css3 nav-index属性笔记

原创 国哥笔记  2019-03-04 10:17  阅读 238 views 次

nav-index属性定义及用法

在css中,nav-index属性是用来规定元素的连续导航次序("Tab键顺序")。该属性是css3新增属性,目前大多数浏览器还不支持该属性,只有Opera浏览器支持nav-down属性。

nav-index属性语法格式

  1. css语法:nav-index: auto/numbe/inherit;
  2. JavaScript语法:object.style.navIndex=2;

属性值说明

  • auto :浏览器指派的元素的Tab键顺序;
  • number:表示该元素的Tab键顺序, 1意味着首先;
  • inherit:指定nav- index属性的值应该从父元素继承;

实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css3 nav-down属性笔记</title>
<style type="text/css">
button{position:absolute;}
button#b1{top:20%;left:25%;nav-index:1;nav-right:#b2; nav-left:#b4;nav-down:#b2; nav-up:#b4;}
button#b2{top:40%;left:50%;nav-index:2;nav-right:#b3; nav-left:#b1;nav-down:#b3; nav-up:#b1;}
button#b3{top:70%;left:25%;nav-index:3;nav-right:#b4; nav-left:#b2;nav-down:#b4; nav-up:#b2;}
button#b4{top:40%;left:0%;nav-index:4;nav-right:#b1; nav-left:#b3;nav-down:#b1; nav-up:#b3;}
</style>
</head>
<body>
<button id="b1">Button 1</button><button id="b2">Button 2</button>
<button id="b3">Button 3</button><button id="b4">Button 4</button>
<p><b>注释:</b>目前只有 Opera 支持 nav-* 属性。当您使用方向键导航时,请同时按下 Shift 键。</p>
</body>
</html>

运行结果:

css3 nav-down属性笔记

 

更多css属性——>css属性大全

本文地址:https://www.ggbiji.com/css-nav-index.html
版权声明:本文为 国哥笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情