溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“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樣式代碼如下：
<style type = “ text / 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 >
<button id = “ b1” >頂部</ button >
<button id = “ b2” >右側</ button >
<button id = “ b3” >底部</ button >
<button id = “ b4” >開頭</ button >
</ div >
</ body >
</ html >
到此，相信大家對“css3導航索引設計的方法”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
