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