建站
咨詢
售后
建站咨詢
新聞中心
本課圍繞使用CSS屬性制作菜單，介紹相關(guān)的項目列表、菜單變幻、導航欄等的內(nèi)容；很多設計者都會投入很多時間和精力來制作各式各樣的導航條，從而體現(xiàn)網(wǎng)站的整體構(gòu)架。
調(diào)用CSS屬性制作漂亮的菜單
作為一個成功的網(wǎng)站，導航菜單是永遠不可缺少的。導航菜單的樣式風格往往也決定了整個網(wǎng)站的樣式風格，因此很多設計者都會投入很多時間和精力來制作各式各樣的導航條，從而體現(xiàn)網(wǎng)站的整體構(gòu)架。本課圍繞菜單的制作，介紹相關(guān)的項目列表、菜單變幻、導航欄等的內(nèi)容。
1.項目列表
傳統(tǒng)的HTML語言提供了項目列表的基本功能，包括順序式列表的ol標記，無順序列表ul標記等等。當引入CSS后，項目列表被賦予了很多新的屬性，甚至超越了最初設計時它的功能。我們在這里主要圍繞項目列表的基本CSS屬性進行相關(guān)介紹，包括項目列表的編號、縮進、位置等等。希望大家能夠掌握以下幾個方面的內(nèi)容：
列表的符號
圖片符號
2.無需表格的菜單
當項目列表的項目符號可以通過list-style-type設置為none時，制作各式各樣的菜單、導航條成了項目列表的最大用處之一，通過各種CSS屬性變幻可以達到很多意想不到的導航效果。首先看一個實例，其效果如圖所示。
3.菜單的橫豎轉(zhuǎn)換
導航條不光是豎直排列，很多時候要求頁面的菜單能夠水平方向顯示。通過CSS屬性的控制，可以使項目列表的導航條輕松的實現(xiàn)橫豎轉(zhuǎn)換，該例效果如圖所示。
4.菜單實例一：百度導航條
打開搜索引擎百度的網(wǎng)站，可以看到logo下方的水平導航條。利用本課前面幾節(jié)所介紹的內(nèi)容和方法，便可以輕松實現(xiàn)該導航條。我們在這里便通過簡單的制作，模擬該效果。
5.菜單實例二：流行的Tab菜單
Tab風格的菜單導航一直受到廣大網(wǎng)站的青睞，網(wǎng)上隨處可見各式各樣的Tab菜單，圖中顯示的就是一個Tab菜單。我們在這里通過對導航菜單CSS屬性的進一步控制，實現(xiàn)Tab菜單的效果。
網(wǎng)站標題：調(diào)用CSS屬性制作超炫菜單
當前地址：http://www.5511xx.com/article/dhcdjii.html
