css3导航索引设计的方法

本篇内容主要讲解“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:浏览器默认的顺序。

:必须是正整数,该数字指定了元素的导航顺序。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命名。

     root | :该参数不能以“ _”命名,指出frameset目标页面之间的元素焦点切换。如果指定的目标页面不存在,则被替换为当前页面的焦点,则意味着完全依赖框架页。该属性

    以关键的“根”为标志,浏览器将把整个框架设置为框架页面定为目标。

  继承:继承。

  下面的示例介绍了如何正确定义键盘控制键顺序,了解这些键盘方向键样式控制的一般方法。底部,左

侧和右侧的按钮,则直接按方向键即可,当按不同方向键时,变为自动切换位置,显示对应按钮,

完整代码如下:

<!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;

}

 

 

 

 

    顶部 

    右侧 

    底部 

    开头 

 

 

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


标题名称:css3导航索引设计的方法
网站网址:http://pwwzsj.com/article/jspjpc.html