服務(wù)熱線
153 8323 9821
咨詢熱線 ：
15383239821
盡管在我的網(wǎng)站和文章里都有提到CSS制作菜單的方法，但很多初學(xué)者還是不太清楚如何實(shí)現(xiàn)，以及實(shí)現(xiàn)原理，我想專門寫一篇詳細(xì)教程會(huì)對(duì)大家比較有幫助。
我們先來(lái)看一個(gè)菜單的例子，最終效果是:
然后我們來(lái)詳細(xì)講解步驟
我們先建立一個(gè)無(wú)序列表，來(lái)建立菜單的結(jié)構(gòu)。代碼是：
<ul>效果是：
因?yàn)榭雌饋?lái)不是很好看，菜單通常都不需要li默認(rèn)的圓點(diǎn)，我們給UL定義一個(gè)樣式來(lái)消除這些圓點(diǎn)。
當(dāng)然，為了更好的控制整個(gè)菜單，我們把菜單放在一個(gè)div里。頁(yè)面代碼變成：
<div class="test"> <ul>CSS定義為：
.test ul{list-style:none;}說(shuō)明：“.test ul”表示我要定義的樣式將作用在test的層里的ul標(biāo)簽上。
現(xiàn)在的效果是沒有圓點(diǎn)了：
這里是菜單變成橫向的關(guān)鍵，我們給li元素加上一個(gè)“float:left;”屬性，讓每個(gè)li浮動(dòng)在前面一個(gè)li的左面。
CSS定義為：
.test li{float:left;}效果是：
看，菜單變橫向了。就這么簡(jiǎn)單！下面需要做的就是優(yōu)化細(xì)節(jié)了。
菜單都擠在一起不好看怎么辦？我們來(lái)調(diào)節(jié)li的寬度。
在CSS中添加定義width:100px指定一個(gè)li的寬度是100px，當(dāng)然你可以根據(jù)你的需要調(diào)整數(shù)值：
.test li{float:left;width:100px;}效果是：
