本文摘自PHP中文网,作者青灯夜游,侵删。
css3 nav-right属性是一个CSS3属性,用于指定当使用箭头向右的导航键时,向何处进行导航,其语法是“nav-right: auto|id|target-name;”,参数“auto”表示浏览器决定导航到哪个元素。

nav-right属性是一个CSS3属性,用于指定当使用箭头向右的导航键时,向何处进行导航。
推荐:《css3视频教程》
CSS3 nav-right属性
作用:nav-right 属性规定当使用 nav-right 导航键时,向何处进行导航。
基本语法:
1 | nav- right : auto |id|target-name;
|
auto:浏览器决定导航到哪个元素。
id:指定导航到该元素的ID
target-name :指定导航到目标帧
注:目前只有Opera 支持 nav-right 属性。
CSS3 nav-right属性的使用示例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | <!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8" >
<title>php中文网(php.cn)</title>
<style>
button
{
position : absolute ;
}
button#b 1
{
top : 20% ; left : 25% ;
nav-index: 1 ;
nav- right :#b 2 ; nav- left :#b 4 ;
nav-down:#b 2 ; nav-up:#b 4 ;
}
button#b 2
{
top : 40% ; left : 50% ;
nav-index: 2 ;
nav- right :#b 3 ; nav- left :#b 1 ;
nav-down:#b 3 ; nav-up:#b 1 ;
}
button#b 3
{
top : 70% ; left : 25% ;
nav-index: 3 ;
nav- right :#b 4 ; nav- left :#b 2 ;
nav-down:#b 4 ; nav-up:#b 2 ;
}
button#b 4
{
top : 40% ; left : 0% ;
nav-index: 4 ;
nav- right :#b 1 ; nav- left :#b 3 ;
nav-down:#b 1 ; nav-up:#b 3 ;
}
</style>
</head>
<body>
<button id= "b1" >按钮 1 </button>
<button id= "b2" >按钮 2 </button>
<button id= "b3" >按钮 3 </button>
<button id= "b4" >按钮 4 </button>
<p><b>注释:</b>目前只有 Opera 支持 nav-* 属性。当您使用方向键导航时,请同时按下 Shift 键。</p>
</body>
</html>
|
以上就是本篇文章的全部内容,希望能对大家的学习有所帮助。
以上就是css3 nav-right属性怎么用?的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
巧用css steps()函数实现随机翻牌效果!
css3 sticky不生效怎么办
css3是什么技术
css3倒影效果怎么实现
css3如何设置placeholder的样式
纯css3实现信纸/同学录效果(代码示例)
用h5和css3制作全屏背景轮换播放教程
border-image-slice属性怎么用
css3混合模式使用详解
20个非常绚丽的html5/css3应用插件的详细介绍(图)
更多相关阅读请进入《nav-right属性》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » css3 nav-right属性怎么用?