重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
本篇内容主要讲解“css3导航索引设计的方法”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“css3导航索引设计的方法”吧!
十余年的岭东网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。营销型网站的优势是能够根据用户设备显示端的尺寸不同,自动调整岭东建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。创新互联公司从事“岭东网站设计”,“岭东网站推广”以来,每个客户项目都认真落实执行。
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:浏览器默认的顺序。
继承:从继承。
对于以下这个表单示例来说,传统做法是使用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:根据浏览器预设的顺序。
root |
以关键的“根”为标志,浏览器将把整个框架设置为框架页面定为目标。
继承:继承。
下面的示例介绍了如何正确定义键盘控制键顺序,了解这些键盘方向键样式控制的一般方法。底部,左
侧和右侧的按钮,则直接按方向键即可,当按不同方向键时,变为自动切换位置,显示对应按钮,
完整代码如下:
<!DOCTYPE html PUBLIC“-// W3C // DTD XHTML 1.0 Transitional // EN”“ /upload/otherpic61/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 >
div >
body >
html >
到此,相信大家对“css3导航索引设计的方法”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!