CSS nav-index定义每个元素的顺序导航顺序。与其他nav属性相同,不包含target-name属性。 Opera 12.0仅支持CSS nav-index。句法:
nav-index:auto | number | initial | inherit;
属性:
- auto:它是默认值,此处浏览器定义顺序。
- number:它定义了元素的制表顺序。
- initial:它是默认值。
- inherit:它从其父元素继承。
下面的示例说明nav-index属性:
例:
<!DOCTYPE html>
<html>
<head>
<title>CSS nav-index Property</title>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
button {
position:absolute;
}
h1 {
color:green;
}
button {
background-color:#80ff80;
nav-right:auto;
nav-left:auto;
nav-down:auto;
nav-up:auto;
border-radius:25px;
font-size:20px;
}
#Geeks1 {
top:35%;
left:43%;
nav-index:1;
}
#Geeks2 {
top:50%;
left:65%;
nav-index:2;
}
#Geeks3 {
top:65%;
left:43%;
nav-index:3;
}
#Geeks4 {
top:50%;
left:20%;
nav-index:4;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h4>CSS nav-index Property</h4>
<p>
Press the <samp>Shift</samp>
key while navigating with the arrow keys.
</p>
</center>
<button id="Geeks1">Button
<i class="fa fa-arrow-circle-up"></i>
</button>
<button id="Geeks2">Button
<i class="fa fa-arrow-circle-right"></i>
</button>
<button id="Geeks3">Button
<i class="fa fa-arrow-circle-down"></i>
</button>
<button id="Geeks4">Button
<i class="fa fa-arrow-circle-left"></i>
</button>
<div>
</div>
</body>
</html>
输出:
支持的浏览器:CSS nav-index属性不支持主要的浏览器
浏览器特定的扩展程序:CSS nav-index性能具有浏览器特定的扩展程序。
- Google Chrome -webkit-
- Internet Explorer -ms-
- Firefox -moz-
- Safari -webkit-
- Opera -webkit-
相关用法
- CSS transition-property用法及代码示例
- CSS top属性用法及代码示例
- CSS nav-down用法及代码示例
- CSS nav-up用法及代码示例
- CSS all属性用法及代码示例
- CSS right属性用法及代码示例
- CSS nav-right用法及代码示例
- CSS zoom属性用法及代码示例
- CSS columns属性用法及代码示例
- CSS nav-left用法及代码示例
- CSS will-change用法及代码示例
- CSS clear属性用法及代码示例
- CSS clip属性用法及代码示例
- CSS resize属性用法及代码示例
- CSS align-self用法及代码示例
注:本文由纯净天空筛选整理自skyridetim大神的英文原创作品 CSS | nav-index property。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。