導(dǎo)航欄

擁有易用的導(dǎo)航條對于任何網(wǎng)站都很重要。

通過 CSS，您能夠把乏味的 HTML 菜單轉(zhuǎn)換為漂亮的導(dǎo)航欄。

導(dǎo)航欄 = 鏈接列表

導(dǎo)航欄需要標(biāo)準(zhǔn)的 HTML 作為基礎(chǔ)。

在我們的例子中，將用標(biāo)準(zhǔn)的 HTML 列表來構(gòu)建導(dǎo)航欄。

導(dǎo)航欄基本上是一個鏈接列表，因此使用 <ul> 和 <li> 元素是非常合適的：

實(shí)例

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

親自試一試

現(xiàn)在，讓我們從列表中去掉圓點(diǎn)和外邊距：

實(shí)例

ul
{
list-style-type:none;
margin:0;
padding:0;
}

親自試一試

例子解釋：

• list-style-type:none - 刪除圓點(diǎn)。導(dǎo)航欄不需要列表項(xiàng)標(biāo)記。
• 把外邊距和內(nèi)邊距設(shè)置為 0 可以去除瀏覽器的默認(rèn)設(shè)定。

以上例子中的代碼是用在垂直、水平導(dǎo)航欄中的標(biāo)準(zhǔn)代碼。

垂直導(dǎo)航欄

如需構(gòu)建垂直導(dǎo)航欄，我們只需要定義 <a> 元素的樣式，除了上面的代碼之外：

實(shí)例

a
{
display:block;
width:60px;
}

親自試一試

例子解釋：

• display:block - 把鏈接顯示為塊元素可使整個鏈接區(qū)域可點(diǎn)擊（不僅僅是文本），同時也允許我們規(guī)定寬度。
• width:60px - 塊元素默認(rèn)占用全部可用寬度。我們需要規(guī)定 60 像素的寬度。

提示：請同時看一看我們完整樣式的導(dǎo)航欄實(shí)例。

注釋：請始終規(guī)定垂直導(dǎo)航欄中 <a> 元素的寬度。如果省略寬度，IE6 會產(chǎn)生意想不到的結(jié)果。

水平導(dǎo)航欄

有兩種創(chuàng)建水平導(dǎo)航欄的方法。使用行內(nèi)或浮動列表項(xiàng)。

兩種方法都不錯，但是如果您希望鏈接擁有相同的尺寸，就必須使用浮動方法。

行內(nèi)列表項(xiàng)

除了上面的“標(biāo)準(zhǔn)”代碼，構(gòu)建水平導(dǎo)航欄的方法之一是將 <li> 元素規(guī)定為行內(nèi)元素：

實(shí)例

li
{
display:inline;
}

親自試一試

例子解釋：

display:inline; - 默認(rèn)地，<li> 元素是塊元素。在這里，我們?nèi)コ�了每個列表項(xiàng)前后的換行，以便讓它們在一行中顯示。

提示：請看一下我們完整樣式的水平導(dǎo)航欄實(shí)例。

對列表項(xiàng)進(jìn)行浮動

在上面的例子中，鏈接的寬度是不同的。

為了讓所有鏈接擁有相等的寬度，浮動 <li> 元素并規(guī)定 <a> 元素的寬度：

實(shí)例

li
{
float:left;
}
a
{
display:block;
width:60px;
}

親自試一試

例子解釋：

• float:left - 使用 float 來把塊元素滑向彼此。
• display:block - 把鏈接顯示為塊元素可使整個鏈接區(qū)域可點(diǎn)擊（不僅僅是文本），同時也允許我們規(guī)定寬度。
• width:60px - 由于塊元素默認(rèn)占用全部可用寬度，鏈接無法滑動至彼此相鄰。我們需要規(guī)定 60 像素的寬度。

提示：請看一下我們完整樣式的水平導(dǎo)航欄實(shí)例。