css3导航索引设计的方法

发布时间：2022-03-09 15:56:34 作者：iii
来源：亿速云阅读：141

本篇内容主要讲解“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样式代码如下：

正文{ 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 >

</ div >

</ body >

</ html >

到此，相信大家对“css3导航索引设计的方法”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

css3导航索引设计的方法

相关阅读