css3導(dǎo)航索引設(shè)計(jì)的方法

發(fā)布時(shí)間：2022-03-09 15:56:34 來源：億速云閱讀：136 作者：iii 欄目：web開發(fā)

本篇內(nèi)容主要講解“css3導(dǎo)航索引設(shè)計(jì)的方法”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“css3導(dǎo)航索引設(shè)計(jì)的方法”吧!

HTML為表單標(biāo)簽定義的tabindex屬性，此屬性為當(dāng)前元素指定了其在當(dāng)前文檔中導(dǎo)航的序列號。導(dǎo)航的序列號可以修改頁面中元素通過鍵盤操作獲得焦點(diǎn)的順序。該屬性可以存在于嵌套的頁面元素當(dāng)中。

定義導(dǎo)航順序

css3新增加了nav-index屬性，替換了標(biāo)簽屬性tabindex。為了使瀏覽器能按順序獲取焦點(diǎn)，頁面元素需要遵循如下規(guī)則：

1.該元素支持nav-index屬性，而被納入正整數(shù)屬性值的元素將會被優(yōu)先導(dǎo)航。瀏覽器將按照nav-index屬性值從小到大的順序進(jìn)行導(dǎo)航。屬性值無須按順序，也無須以特定盼值開始。擁有相同的nav-index屬性值的元素將以它們在文檔流中出現(xiàn)的順序進(jìn)行導(dǎo)航。

2.對于那些不支持nav-index屬性，或者nav-index屬性變?yōu)樽詣拥脑?，將以其在文檔流中出現(xiàn)的順序進(jìn)行導(dǎo)航。

3.對那些局部的元素，將不參與導(dǎo)航的排序。

導(dǎo)航和激活頁面元素的快捷鍵依賴于瀏覽器的設(shè)置，例如，通常Tab鍵用于按順序?qū)Ш剑鳨nter鍵則用于激活調(diào)用的元素。當(dāng)通過Tab鍵導(dǎo)航到序列的結(jié)束

或開始時(shí)，瀏覽器可能會循環(huán)到導(dǎo)航序列酌開始或結(jié)束。按Shift + Tab組合鍵通常用于反向?qū)Ш健?/p>

nav-index屬性的基本語法如下所示。

nav-index屬性初始值自動，適用于所有可用元素。取值簡單說明如下。

auto：瀏覽器默認(rèn)的順序。

<number>：必須是正整數(shù)，該數(shù)字指定了元素的導(dǎo)航順序。l意味著最先被導(dǎo)航。當(dāng)多個(gè)元素的nav-index值相同時(shí)，則按照文檔的先后順序進(jìn)行導(dǎo)航。

繼承：從繼承。

對于以下這個(gè)表單示例來說，傳統(tǒng)做法是使用tabindex屬性來更改表單輸入的鍵盤激活和響應(yīng)順序，現(xiàn)在使用nav-index則直接在CSS樣式表中調(diào)整表單域的鍵盤影響順序，其中css樣式代碼如下：

正文{ background-color：＃F7F7F7 ; }

fieldset {

border：1px dashed #CCC ;

填充：10px ;

}

傳說{

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 ;

浮動：左;

顏色：＃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 ） ;

背景重復(fù)：不重復(fù)；

背景位置：左;

寬度：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 實(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è)屬性來配合實(shí)現(xiàn)：

導(dǎo)航：控制向上方向鍵。

nav-right：控制向右方向鍵。

nav-down：控制向下方向鍵。

nav-left：控制向左方向鍵。

這些屬性的基本語法如下所示。

這些屬性的初始值自動，適用于所有可用元素。取值簡單說明如下。

auto：根據(jù)瀏覽器預(yù)設(shè)的順序。

<id>：要切換元素的id命名。

root | <target-name>：該參數(shù)不能以“ _”命名，指出frameset目標(biāo)頁面之間的元素焦點(diǎn)切換。如果指定的目標(biāo)頁面不存在，則被替換為當(dāng)前頁面的焦點(diǎn)，則意味著完全依賴框架頁。該屬性

以關(guān)鍵的“根”為標(biāo)志，瀏覽器將把整個(gè)框架設(shè)置為框架頁面定為目標(biāo)。

繼承：繼承。

下面的示例介紹了如何正確定義鍵盤控制鍵順序，了解這些鍵盤方向鍵樣式控制的一般方法。底部，左

側(cè)和右側(cè)的按鈕，則直接按方向鍵即可，當(dāng)按不同方向鍵時(shí)，變?yōu)樽詣忧袚Q位置，顯示對應(yīng)按鈕，

完整代碼如下：

<！DOCTYPE html PUBLIC“-// W3C // DTD XHTML 1.0 Transitional // EN”“ https://cache.yisu.com/upload/information/20220117/488/20427.jpg）中心不重復(fù)；}

按鈕{位置：絕對；}

按鈕＃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;

}

</ style >

</ head >

<body >

<div >

</ div >

</ body >

</ html >

到此，相信大家對“css3導(dǎo)航索引設(shè)計(jì)的方法”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

向AI問一下細(xì)節(jié)

css3導(dǎo)航索引設(shè)計(jì)的方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽