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

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

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

1.項(xiàng)目列表

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

列表的符號(hào)

圖片符號(hào)

2.無需表格的菜單

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

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

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

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

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

5.菜單實(shí)例二：流行的Tab菜單

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

【編輯推薦】

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