CSS 導航條 · W3School HTML & CSS 教程

# CSS 導航條 ## 演示：導航欄 * [Home](#) * [News](#) * [Articles](#) * [Forum](#) * [Contact](#) * [About](#) ## 導航欄擁有易用的導航條對于任何網站都很重要。通過 CSS，您能夠把乏味的 HTML 菜單轉換為漂亮的導航欄。 ## 導航欄 = 鏈接列表導航欄需要標準的 HTML 作為基礎。在我們的例子中，將用標準的 HTML 列表來構建導航欄。導航欄基本上是一個鏈接列表，因此使用 <ul> 和 <li> 元素是非常合適的： #### 實例 ``` <ul> <li><a href="default.asp">Home</a></li> <li><a href="news.asp">News</a></li> <li><a href="contact.asp">Contact</a></li> <li><a href="about.asp">About</a></li> </ul> ``` 現在，讓我們從列表中去掉圓點和外邊距： #### 實例 ``` ul { list-style-type:none; margin:0; padding:0; } ``` ### 例子解釋： * list-style-type:none - 刪除圓點。導航欄不需要列表項標記。 * 把外邊距和內邊距設置為 0 可以去除瀏覽器的默認設定。以上例子中的代碼是用在垂直、水平導航欄中的標準代碼。 ## 垂直導航欄如需構建垂直導航欄，我們只需要定義 <a> 元素的樣式，除了上面的代碼之外： ### 實例 ``` a { display:block; width:60px; } ``` ### 例子解釋： * display:block - 把鏈接顯示為塊元素可使整個鏈接區域可點擊（不僅僅是文本），同時也允許我們規定寬度。 * width:60px - 塊元素默認占用全部可用寬度。我們需要規定 60 像素的寬度。提示：請同時看一看我們[完整樣式的導航欄實例](/tiy/t.asp?f=css_navbar_vertical_advanced)。注釋：請始終規定垂直導航欄中 <a> 元素的寬度。如果省略寬度，IE6 會產生意想不到的結果。 ## 水平導航欄有兩種創建水平導航欄的方法。使用行內或浮動列表項。兩種方法都不錯，但是如果您希望鏈接擁有相同的尺寸，就必須使用浮動方法。 ### 行內列表項除了上面的“標準”代碼，構建水平導航欄的方法之一是將 <li> 元素規定為行內元素： #### 實例 ``` li { display:inline; } ``` #### 例子解釋： display:inline; - 默認地，<li> 元素是塊元素。在這里，我們去除了每個列表項前后的換行，以便讓它們在一行中顯示。提示：請看一下我們[完整樣式的水平導航欄實例](/tiy/t.asp?f=css_navbar_horizontal_advanced)。 ### 對列表項進行浮動在上面的例子中，鏈接的寬度是不同的。為了讓所有鏈接擁有相等的寬度，浮動 <li> 元素并規定 <a> 元素的寬度： #### 實例 ``` li { float:left; } a { display:block; width:60px; } ``` #### 例子解釋： * float:left - 使用 float 來把塊元素滑向彼此。 * display:block - 把鏈接顯示為塊元素可使整個鏈接區域可點擊（不僅僅是文本），同時也允許我們規定寬度。 * width:60px - 由于塊元素默認占用全部可用寬度，鏈接無法滑動至彼此相鄰。我們需要規定 60 像素的寬度。提示：請看一下我們[完整樣式的水平導航欄實例](/tiy/t.asp?f=css_navbar_horizontal_float_advanced)。