本課圍繞使用CSS屬性制作菜單，介紹相關的項目列表、菜單變幻、導航欄等的內容；很多設計者都會投入很多時間和精力來制作各式各樣的導航條，從而體現網站的整體構架。

調用CSS屬性制作漂亮的菜單

作為一個成功的網站，導航菜單是永遠不可缺少的。導航菜單的樣式風格往往也決定了整個網站的樣式風格，因此很多設計者都會投入很多時間和精力來制作各式各樣的導航條，從而體現網站的整體構架。本課圍繞菜單的制作，介紹相關的項目列表、菜單變幻、導航欄等的內容。

1.項目列表

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

列表的符號

圖片符號

2.無需表格的菜單

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

3.菜單的橫豎轉換

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

4.菜單實例一：百度導航條

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

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

Tab風格的菜單導航一直受到廣大網站的青睞，網上隨處可見各式各樣的Tab菜單，圖中顯示的就是一個Tab菜單。我們在這里通過對導航菜單CSS屬性的進一步控制，實現Tab菜單的效果。
 

【編輯推薦】

1. CSS屬性實現同比例縮小圖片
2. 實用但IE不支持的十個CSS屬性
3. 14大CSS工具提高網頁設計效率
4. CSS屬性選擇器語法詳解
5. 鼠標經過時改變DIV背景顏色的三種途徑