本文摘自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属性怎么用?的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
css3怎么让文字垂直居中显示
带你了解css中的3d效果
css3怎么实现圆角
text-emphasis属性有什么用
谷歌浏览器不支持css3吗
css3动画不循环怎么办
你值得了解的一种css获取图片主题色的小技巧(分享)
css3的:out-of-range和:in-range伪类有什么用?(代码示例)
css3兼容ie8吗
用h5和css3制作全屏背景轮换播放教程
更多相关阅读请进入《nav-right属性》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » css3 nav-right属性怎么用?