CSS 教程
熟練使用導(dǎo)航欄，對(duì)于任何網(wǎng)站都非常重要。
使用CSS你可以轉(zhuǎn)換成好看的導(dǎo)航欄而不是枯燥的HTML菜單。
作為標(biāo)準(zhǔn)的HTML基礎(chǔ)一個(gè)導(dǎo)航欄是必須的
。在我們的例子中我們將建立一個(gè)標(biāo)準(zhǔn)的HTML列表導(dǎo)航欄。
導(dǎo)航條基本上是一個(gè)鏈接列表，所以使用 <ul> 和 <li>元素非常有意義：
現(xiàn)在，讓我們從列表中刪除邊距和填充：
例子解析：
上面的例子中的代碼是垂直和水平導(dǎo)航欄使用的標(biāo)準(zhǔn)代碼。
上面的代碼，我們只需要 <a>元素的樣式，建立一個(gè)垂直的導(dǎo)航欄：
示例說(shuō)明：
提示：查看 完整樣式的垂直導(dǎo)航欄的示例。
注意： 請(qǐng)務(wù)必指定 <a>元素在垂直導(dǎo)航欄的的寬度。如果省略寬度，IE6可能產(chǎn)生意想不到的效果。
創(chuàng)建一個(gè)簡(jiǎn)單的垂直導(dǎo)航條實(shí)例，在鼠標(biāo)移動(dòng)到選項(xiàng)時(shí)，修改背景顏色：
在點(diǎn)擊了選項(xiàng)后，我們可以添加 "active" 類來(lái)標(biāo)準(zhǔn)哪個(gè)選項(xiàng)被選中：
可以在 <li> or <a> 上添加text-align:center 樣式來(lái)讓鏈接居中。
可以在 border <ul> 上添加 border 屬性來(lái)讓導(dǎo)航欄有邊框。如果要在每個(gè)選項(xiàng)上添加邊框，可以在每個(gè) <li> 元素上添加border-bottom :
接下來(lái)我們創(chuàng)建一個(gè)左邊是全屏高度的固定導(dǎo)航條，右邊是可滾動(dòng)的內(nèi)容。
注意: 該實(shí)例可以在移動(dòng)設(shè)備上使用。
有兩種方法創(chuàng)建橫向?qū)Ш綑?。使?b>內(nèi)聯(lián)(inline)或浮動(dòng)(float)的列表項(xiàng)。
這兩種方法都很好，但如果你想鏈接到具有相同的大小，你必須使用浮動(dòng)的方法。
建立一個(gè)橫向?qū)Ш綑诘姆椒ㄖ皇侵付ㄔ兀?上述代碼是標(biāo)準(zhǔn)的內(nèi)聯(lián):
實(shí)例解析：
提示: 查看 完整樣式的水平導(dǎo)航欄的示例。
在上面的例子中鏈接有不同的寬度。
對(duì)于所有的鏈接寬度相等，浮動(dòng) <li>元素，并指定為 <a>元素的寬度：
實(shí)例解析：
提示:查看 完全樣式的橫向?qū)Ш綑诘氖纠?/a>。
創(chuàng)建一個(gè)水平導(dǎo)航條，在鼠標(biāo)移動(dòng)到選項(xiàng)后修改背景顏色。
在點(diǎn)擊了選項(xiàng)后，我們可以添加 "active" 類來(lái)標(biāo)準(zhǔn)哪個(gè)選項(xiàng)被選中：
將導(dǎo)航條最右邊的選項(xiàng)設(shè)置右對(duì)齊 (float:right;)：
<li> 通過(guò) border-right 樣式來(lái)添加分割線:
可以設(shè)置頁(yè)面的導(dǎo)航條固定在頭部或者底部：
注意: 該實(shí)例可以在移動(dòng)設(shè)備上使用。