本篇内容主要讲解“css3导航索引设计的方法”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“css3导航索引设计的方法”吧!
HTML为表单标签定义的tabindex属性，此属性为当前元素指定了其在当前文档中导航的序列号。导航的序列号可以修改页面中元素通过键盘操作获得焦点的顺序。该属性可以存在于嵌套的页面元素当中。
定义导航顺序
css3新增加了nav-index属性，替换了标签属性tabindex。为了使浏览器能按顺序获取焦点，页面元素需要遵循如下规则：
1.该元素支持nav-index属性，而被纳入正整数属性值的元素将会被优先导航。浏览器将按照nav-index属性值从小到大的顺序进行导航。属性值无须按顺序，也无须以特定盼值开始。拥有相同的nav-index属性值的元素将以它们在文档流中出现的顺序进行导航。
2.对于那些不支持nav-index属性，或者nav-index属性变为自动的元素，将以其在文档流中出现的顺序进行导航。
3.对那些局部的元素，将不参与导航的排序。
导航和激活页面元素的快捷键依赖于浏览器的设置，例如，通常Tab键用于按顺序导航，而Enter键则用于激活调用的元素。当通过Tab键导航到序列的结束
或开始时，浏览器可能会循环到导航序列酌开始或结束。按Shift + Tab组合键通常用于反向导航。
nav-index属性的基本语法如下所示。
nav-index属性初始值自动，适用于所有可用元素。取值简单说明如下。
auto：浏览器默认的顺序。
<number>：必须是正整数，该数字指定了元素的导航顺序。l意味着最先被导航。当多个元素的nav-index值相同时，则按照文档的先后顺序进行导航。
继承：从继承。
对于以下这个表单示例来说，传统做法是使用tabindex属性来更改表单输入的键盘激活和响应顺序，现在使用nav-index则直接在CSS样式表中调整表单域的键盘影响顺序，其中css样式代码如下：
<style type = “ text / css” >
正文{ background-color：＃F7F7F7 ; }
fieldset {
border：1px dashed #CCC ;
填充：10px ;
}
传说{
font-family：Arial，Helvetica，sans-serif ;
颜色：#fff ;
背景：＃666 ;
边框：1px 实线 ＃333；
填充：2px 6px ;
}
标签{
宽度：142像素;
高度：32px ;
边距：3px 2px 0 0 ;
填充：11px 0 0 6px ;
浮动：左;
颜色：＃666 ;
text-align：right ;
}
。形式{
保证金：0 ;
填充：0 ;
}
#leftSide {
宽度：530px ;
padding-top：30px ;
浮动：左;
}
。div_texbox {
宽度：347px ;
浮动：对;
背景颜色：＃E6E6E6 ;
高度：35px ;
边距顶部：3px ;
padding-top：5px ;
padding-bottom：3px ;
padding-left：5px；
}
。文本框{
background-image：url （images / 16t.gif ） ;
背景重复：不重复；
背景位置：左;
宽度：285像素;
字体：普通 18px Arial ;
颜色：＃999999 ;
填充：3px 5px 3px 19px ;
}
。用户名：focus。用户名：悬停{ background-color：＃F0FFE6 ; }
。button_div {
宽度：287px ;
浮动：对;
text-align：right ;
高度：35px ;
边距顶部：3px ;
填充：5px 32px 3px ;
}
。按钮{
padding：6px 14px ;
边框：2px 实心;
边框颜色：#FFF ＃d8d8d0 ＃d8d8d0 #FFF ;
背景：＃e3e3db ;
颜色：＃989070 ;
font-weight：粗体;
}
输入。nav1 { nav-index：1 ; }
输入。nav2 { nav-index：2 ; }
输入。nav3 { nav-index：3 ; }
输入。nav4 { nav-index：4 ; }
输入。nav5 { nav-index：5 ; }
< / /样式>
定义方向键控制顺序
输入设备交替的4个方向键将根据文档流顺序控制元素的焦点切换，但为了有更好的用户体验，CSS3定义了切换焦点的控制顺序方向键特性。它主要由4个属性来配合实现：
导航：控制向上方向键。
nav-right：控制向右方向键。
nav-down：控制向下方向键。
nav-left：控制向左方向键。
这些属性的基本语法如下所示。
这些属性的初始值自动，适用于所有可用元素。取值简单说明如下。
auto：根据浏览器预设的顺序。
<id>：要切换元素的id命名。
root | <target-name>：该参数不能以“ _”命名，指出frameset目标页面之间的元素焦点切换。如果指定的目标页面不存在，则被替换为当前页面的焦点，则意味着完全依赖框架页。该属性
以关键的“根”为标志，浏览器将把整个框架设置为框架页面定为目标。
继承：继承。
下面的示例介绍了如何正确定义键盘控制键顺序，了解这些键盘方向键样式控制的一般方法。底部，左
侧和右侧的按钮，则直接按方向键即可，当按不同方向键时，变为自动切换位置，显示对应按钮，
完整代码如下：
<！DOCTYPE html PUBLIC“-// W3C // DTD XHTML 1.0 Transitional // EN”“ https://cache.yisu.com/upload/information/20220117/488/20427.jpg）中心不重复；}
按钮{位置：绝对；}
按钮＃b1 {
顶：0;
左：50％;
导航指数：1;
导航权：＃b2;
导航左：＃b4;
导航：＃b2;
导航：＃b4;
}
按钮＃b2 {
最高：50％;
左：100％;
导航指数：2;
导航权：＃b3;
导航左：＃b1;
导航：＃b3;
导航：＃b1;
}
按钮＃b3 {
最高：100％;
左：50％;
导航指数：3;
导航权：＃b4;
nav-left：＃b2;
导航：＃b4;
导航：＃b2;
}
按钮＃b4 {
最高：50％;
左：0;
导航指数：4;
导航权：＃b1;
nav-left：＃b3;
导航：＃b1;
导航：＃b3;
}
</ style >
</ head >
<body >
<div >
<button id = “ b1” >顶部</ button >
<button id = “ b2” >右侧</ button >
<button id = “ b3” >底部</ button >
<button id = “ b4” >开头</ button >
</ div >
</ body >
</ html >
到此，相信大家对“css3导航索引设计的方法”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
