CSS 導(dǎo)航欄

實(shí)例: 導(dǎo)航欄

導(dǎo)航欄

熟練使用導(dǎo)航欄，對(duì)于任何網(wǎng)站都非常重要。

使用CSS你可以轉(zhuǎn)換成好看的導(dǎo)航欄而不是枯燥的HTML菜單。

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

作為標(biāo)準(zhǔn)的HTML基礎(chǔ)一個(gè)導(dǎo)航欄是必須的

。在我們的例子中我們將建立一個(gè)標(biāo)準(zhǔn)的HTML列表導(dǎo)航欄。

導(dǎo)航條基本上是一個(gè)鏈接列表，所以使用 <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)在，讓我們從列表中刪除邊距和填充：

實(shí)例

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

嘗試一下 ?

例子解析：

  • list-style-type:none - 移除列表前小標(biāo)志。一個(gè)導(dǎo)航欄并不需要列表標(biāo)記
  • 移除瀏覽器的默認(rèn)設(shè)置將邊距和填充設(shè)置為0

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

垂直導(dǎo)航欄

上面的代碼，我們只需要 <a>元素的樣式，建立一個(gè)垂直的導(dǎo)航欄：

實(shí)例

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

嘗試一下 ?

示例說明：

  • display:block - 顯示塊元素的鏈接，讓整體變?yōu)榭牲c(diǎn)擊鏈接區(qū)域（不只是文本），它允許我們指定寬度
  • width:60px - 塊元素默認(rèn)情況下是最大寬度。我們要指定一個(gè)60像素的寬度

提示：查看 完全樣式的垂直導(dǎo)航欄的示例.

注意： 請務(wù)必指定 <a>元素在垂直導(dǎo)航欄的的寬度。如果省略寬度，IE6可能產(chǎn)生意想不到的效果。

水平導(dǎo)航欄

有兩種方法創(chuàng)建橫向?qū)Ш綑?。使?b>內(nèi)聯(lián)或浮動(dòng)的列表項(xiàng)。

這兩種方法都很好，但如果你想鏈接到具有相同的大小，你必須使用浮動(dòng)的方法。

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

建立一個(gè)橫向?qū)Ш綑诘姆椒ㄖ皇侵付?li>元素， 上述代碼是標(biāo)準(zhǔn)的內(nèi)嵌:

實(shí)例

li
{
display:inline;
}

嘗試一下 ?

實(shí)例解析：

  • display:inline; -默認(rèn)情況下，<li>元素是塊元素。在這里，我們刪除換行符之前和之后每個(gè)列表項(xiàng)，以顯示一行 。

提示: 查看 完全樣式的水平導(dǎo)航欄的示例.

浮動(dòng)列表項(xiàng)

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

對(duì)于所有的鏈接寬度相等，浮動(dòng) <li&gt元素，并指定為 <a>元素的寬度：

實(shí)例

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

嘗試一下 ?

實(shí)例解析：

  • float:left - 使用浮動(dòng)塊元素的幻燈片彼此相鄰
  • display:block - 顯示塊元素的鏈接，讓整體變?yōu)榭牲c(diǎn)擊鏈接區(qū)域（不只是文本），它允許我們指定寬度
  • width:60px - 塊元素默認(rèn)情況下是最大寬度。我們要指定一個(gè)60像素的寬度

Tip:查看 完全樣式的橫向?qū)Ш綑诘氖纠?.