第一步：建立一個(gè)無序列表

我們先建立一個(gè)無序列表，來建立菜單的結(jié)構(gòu)。代碼是：

效果是：

• 首頁
• 產(chǎn)品介紹
• 服務(wù)介紹
• 技術(shù)支持
• 立刻購買
• 聯(lián)系我們

第二步：隱藏li的默認(rèn)樣式，去掉圓點(diǎn)

因?yàn)榭雌饋聿皇呛芎每矗藛瓮ǔ６疾恍枰猯i默認(rèn)的圓點(diǎn)，我們給UL定義一個(gè)樣式來消除這些圓點(diǎn)。

當(dāng)然，為了更好的控制整個(gè)菜單，我們把菜單放在一個(gè)div里。頁面代碼變成：

CSS定義為：

說明：“.test ul”表示我要定義的樣式將作用在test的層里的ul標(biāo)簽上。

現(xiàn)在的效果是沒有圓點(diǎn)了：

首頁
產(chǎn)品介紹
服務(wù)介紹
技術(shù)支持
立刻購買
聯(lián)系我們

第三步：關(guān)鍵的浮動(dòng)

這里是菜單變成橫向的關(guān)鍵，我們給li元素加上一個(gè)“float:left;”屬性，讓每個(gè)li浮動(dòng)在前面一個(gè)li的左面。

CSS定義為：

效果是：

首頁產(chǎn)品介紹服務(wù)介紹技術(shù)支持立刻購買聯(lián)系我們

看，菜單變橫向了。就這么簡(jiǎn)單！下面需要做的就是優(yōu)化細(xì)節(jié)了。