本篇內(nèi)容主要講解“css3導(dǎo)航索引設(shè)計(jì)的方法”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“css3導(dǎo)航索引設(shè)計(jì)的方法”吧!
十余年的嶺東網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開(kāi)發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。營(yíng)銷型網(wǎng)站的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整嶺東建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)公司從事“嶺東網(wǎng)站設(shè)計(jì)”,“嶺東網(wǎng)站推廣”以來(lái)，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。
HTML為表單標(biāo)簽定義的tabindex屬性，此屬性為當(dāng)前元素指定了其在當(dāng)前文檔中導(dǎo)航的序列號(hào)。導(dǎo)航的序列號(hào)可以修改頁(yè)面中元素通過(guò)鍵盤(pán)操作獲得焦點(diǎn)的順序。該屬性可以存在于嵌套的頁(yè)面元素當(dāng)中。
定義導(dǎo)航順序
css3新增加了nav-index屬性，替換了標(biāo)簽屬性tabindex。為了使瀏覽器能按順序獲取焦點(diǎn)，頁(yè)面元素需要遵循如下規(guī)則：
1.該元素支持nav-index屬性，而被納入正整數(shù)屬性值的元素將會(huì)被優(yōu)先導(dǎo)航。瀏覽器將按照nav-index屬性值從小到大的順序進(jìn)行導(dǎo)航。屬性值無(wú)須按順序，也無(wú)須以特定盼值開(kāi)始。擁有相同的nav-index屬性值的元素將以它們?cè)谖臋n流中出現(xiàn)的順序進(jìn)行導(dǎo)航。
2.對(duì)于那些不支持nav-index屬性，或者nav-index屬性變?yōu)樽詣?dòng)的元素，將以其在文檔流中出現(xiàn)的順序進(jìn)行導(dǎo)航。
3.對(duì)那些局部的元素，將不參與導(dǎo)航的排序。
導(dǎo)航和激活頁(yè)面元素的快捷鍵依賴于瀏覽器的設(shè)置，例如，通常Tab鍵用于按順序?qū)Ш剑鳨nter鍵則用于激活調(diào)用的元素。當(dāng)通過(guò)Tab鍵導(dǎo)航到序列的結(jié)束
或開(kāi)始時(shí)，瀏覽器可能會(huì)循環(huán)到導(dǎo)航序列酌開(kāi)始或結(jié)束。按Shift + Tab組合鍵通常用于反向?qū)Ш健?/p>
nav-index屬性的基本語(yǔ)法如下所示。
nav-index屬性初始值自動(dòng)，適用于所有可用元素。取值簡(jiǎn)單說(shuō)明如下。
auto：瀏覽器默認(rèn)的順序。
繼承：從繼承。
對(duì)于以下這個(gè)表單示例來(lái)說(shuō)，傳統(tǒng)做法是使用tabindex屬性來(lái)更改表單輸入的鍵盤(pán)激活和響應(yīng)順序，現(xiàn)在使用nav-index則直接在CSS樣式表中調(diào)整表單域的鍵盤(pán)影響順序，其中css樣式代碼如下：
正文{ background-color：＃F7F7F7 ; }
fieldset {
border：1px dashed #CCC ;
填充：10px ;
}
傳說(shuō){
font-family：Arial，Helvetica，sans-serif ;
顏色：#fff ;
背景：＃666 ;
邊框：1px 實(shí)線 ＃333；
填充：2px 6px ;
}
標(biāo)簽{
寬度：142像素;
高度：32px ;
邊距：3px 2px 0 0 ;
填充：11px 0 0 6px ;
浮動(dòng)：左;
顏色：＃666 ;
text-align：right ;
}
。形式{
保證金：0 ;
填充：0 ;
}
#leftSide {
寬度：530px ;
padding-top：30px ;
浮動(dòng)：左;
}
。div_texbox {
寬度：347px ;
浮動(dòng)：對(duì);
背景顏色：＃E6E6E6 ;
高度：35px ;
邊距頂部：3px ;
padding-top：5px ;
padding-bottom：3px ;
padding-left：5px；
}
。文本框{
background-image：url （images / 16t.gif ） ;
背景重復(fù)：不重復(fù)；
背景位置：左;
寬度：285像素;
字體：普通 18px Arial ;
顏色：＃999999 ;
填充：3px 5px 3px 19px ;
}
。用戶名：focus。用戶名：懸停{ background-color：＃F0FFE6 ; }
。button_div {
寬度：287px ;
浮動(dòng)：對(duì);
text-align：right ;
高度：35px ;
邊距頂部：3px ;
填充：5px 32px 3px ;
}
。按鈕{
padding：6px 14px ;
邊框：2px 實(shí)心;
邊框顏色：#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 ; }
< / /樣式>
定義方向鍵控制順序
輸入設(shè)備交替的4個(gè)方向鍵將根據(jù)文檔流順序控制元素的焦點(diǎn)切換，但為了有更好的用戶體驗(yàn)，CSS3定義了切換焦點(diǎn)的控制順序方向鍵特性。它主要由4個(gè)屬性來(lái)配合實(shí)現(xiàn)：
導(dǎo)航：控制向上方向鍵。
nav-right：控制向右方向鍵。
nav-down：控制向下方向鍵。
nav-left：控制向左方向鍵。
這些屬性的基本語(yǔ)法如下所示。
這些屬性的初始值自動(dòng)，適用于所有可用元素。取值簡(jiǎn)單說(shuō)明如下。
auto：根據(jù)瀏覽器預(yù)設(shè)的順序。
root |
以關(guān)鍵的“根”為標(biāo)志，瀏覽器將把整個(gè)框架設(shè)置為框架頁(yè)面定為目標(biāo)。
繼承：繼承。
下面的示例介紹了如何正確定義鍵盤(pán)控制鍵順序，了解這些鍵盤(pán)方向鍵樣式控制的一般方法。底部，左
側(cè)和右側(cè)的按鈕，則直接按方向鍵即可，當(dāng)按不同方向鍵時(shí)，變?yōu)樽詣?dòng)切換位置，顯示對(duì)應(yīng)按鈕，
完整代碼如下：
<！DOCTYPE html PUBLIC“-// W3C // DTD XHTML 1.0 Transitional // EN”“ /upload/otherpic61/20427.jpg）中心不重復(fù)；}
按鈕{位置：絕對(duì)；}
按鈕＃b1 {
頂：0;
左：50％;
導(dǎo)航指數(shù)：1;
導(dǎo)航權(quán)：＃b2;
導(dǎo)航左：＃b4;
導(dǎo)航：＃b2;
導(dǎo)航：＃b4;
}
按鈕＃b2 {
最高：50％;
左：100％;
導(dǎo)航指數(shù)：2;
導(dǎo)航權(quán)：＃b3;
導(dǎo)航左：＃b1;
導(dǎo)航：＃b3;
導(dǎo)航：＃b1;
}
按鈕＃b3 {
最高：100％;
左：50％;
導(dǎo)航指數(shù)：3;
導(dǎo)航權(quán)：＃b4;
nav-left：＃b2;
導(dǎo)航：＃b4;
導(dǎo)航：＃b2;
}
按鈕＃b4 {
最高：50％;
左：0;
導(dǎo)航指數(shù)：4;
導(dǎo)航權(quán)：＃b1;
nav-left：＃b3;
導(dǎo)航：＃b1;
導(dǎo)航：＃b3;
}
到此，相信大家對(duì)“css3導(dǎo)航索引設(shè)計(jì)的方法”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！
重慶分公司
重慶分公司
