本課圍繞使用CSS屬性制作菜單，介紹相關(guān)的項目列表、菜單變幻、導(dǎo)航欄等的內(nèi)容；很多設(shè)計者都會投入很多時間和精力來制作各式各樣的導(dǎo)航條，從而體現(xiàn)網(wǎng)站的整體構(gòu)架。

調(diào)用CSS屬性制作漂亮的菜單

作為一個成功的網(wǎng)站，導(dǎo)航菜單是永遠(yuǎn)不可缺少的。導(dǎo)航菜單的樣式風(fēng)格往往也決定了整個網(wǎng)站的樣式風(fēng)格，因此很多設(shè)計者都會投入很多時間和精力來制作各式各樣的導(dǎo)航條，從而體現(xiàn)網(wǎng)站的整體構(gòu)架。本課圍繞菜單的制作，介紹相關(guān)的項目列表、菜單變幻、導(dǎo)航欄等的內(nèi)容。

1.項目列表

傳統(tǒng)的HTML語言提供了項目列表的基本功能，包括順序式列表的ol標(biāo)記，無順序列表ul標(biāo)記等等。當(dāng)引入CSS后，項目列表被賦予了很多新的屬性，甚至超越了最初設(shè)計時它的功能。我們在這里主要圍繞項目列表的基本CSS屬性進(jìn)行相關(guān)介紹，包括項目列表的編號、縮進(jìn)、位置等等。希望大家能夠掌握以下幾個方面的內(nèi)容：

列表的符號

圖片符號

2.無需表格的菜單

當(dāng)項目列表的項目符號可以通過list-style-type設(shè)置為none時，制作各式各樣的菜單、導(dǎo)航條成了項目列表的最大用處之一，通過各種CSS屬性變幻可以達(dá)到很多意想不到的導(dǎo)航效果。首先看一個實例，其效果如圖所示。

3.菜單的橫豎轉(zhuǎn)換

導(dǎo)航條不光是豎直排列，很多時候要求頁面的菜單能夠水平方向顯示。通過CSS屬性的控制，可以使項目列表的導(dǎo)航條輕松的實現(xiàn)橫豎轉(zhuǎn)換，該例效果如圖所示。

4.菜單實例一：百度導(dǎo)航條

打開搜索引擎百度的網(wǎng)站，可以看到logo下方的水平導(dǎo)航條。利用本課前面幾節(jié)所介紹的內(nèi)容和方法，便可以輕松實現(xiàn)該導(dǎo)航條。我們在這里便通過簡單的制作，模擬該效果。

5.菜單實例二：流行的Tab菜單

Tab風(fēng)格的菜單導(dǎo)航一直受到廣大網(wǎng)站的青睞，網(wǎng)上隨處可見各式各樣的Tab菜單，圖中顯示的就是一個Tab菜單。我們在這里通過對導(dǎo)航菜單CSS屬性的進(jìn)一步控制，實現(xiàn)Tab菜單的效果。
 

【編輯推薦】

1. CSS屬性實現(xiàn)同比例縮小圖片
2. 實用但I(xiàn)E不支持的十個CSS屬性
3. 14大CSS工具提高網(wǎng)頁設(shè)計效率
4. CSS屬性選擇器語法詳解
5. 鼠標(biāo)經(jīng)過時改變DIV背景顏色的三種途徑