制作橫向菜單

1、如何用DIVCSS制作橫向菜單我們先來看一個菜單的例子，最終效果是:然后我們來詳細講解步驟第一步：建立一個無序列表我們先建立一個無序列表，來建立菜單的結(jié)構(gòu)。代碼是：首頁產(chǎn)品介紹服務(wù)介紹技術(shù)支持立刻購買聯(lián)系我們效果是：?第二步：隱藏li的默認(rèn)樣式因為看起來不是很好看，菜單通常都不需要li默認(rèn)的圓點，我們給UL定義一個樣式來消除這些圓點。當(dāng)然，為了更好的控制整個菜單，我們把菜單放在一個div里。頁面代碼變成：CSS定義為：.testulli

2、ststyle:none說明：“.testul”表示我要定義的樣式將作用在test的層里的ul標(biāo)簽上。現(xiàn)在的效果是沒有圓點了：第三步：關(guān)鍵的浮動這里是菜單變成橫向的關(guān)鍵，我們給li元素加上一個“float:left”屬性，讓每個li浮動在前面一個li的左面。用marginleft:3px使每個菜單之間空3px距離；用lineheight:30px定義行高，使鏈接文字縱向居中；CSS定義象這樣：.testadisplay:block；te

3、xtalign:centerheight:30px.testlifloat:leftwidth:100pxbackground:#CCCmarginleft:3pxlineheight:30px效果變成：這樣就漂亮多了吧。第七步：定義背景圖片我們通常都會在每個鏈接前加一個小圖標(biāo)，這樣導(dǎo)航更清楚。CSS是采用定義li的背景圖片來實現(xiàn)的：.testa:linkcol:#666background:url(arrow_off.gif)#CCC

4、norepeat5px12pxtextdecation:none.testa:hovercol:#FFFfontweight:boldtextdecation:nonebackground:url(arrow_on.gif)#F00norepeat5px12px說明：“background:url(arrow_off.gif)#CCCnorepeat5px12px”這句代碼是一個CSS縮寫，表示背景圖片是arrow_off.gif；背景

5、顏色是#CCC；背景圖片不重復(fù)“norepeat“，背景圖片的位置是左邊距5px、上邊距12px；默認(rèn)狀態(tài)下，圖標(biāo)為arrow.off.gif，當(dāng)鼠標(biāo)移動到鏈接上，圖標(biāo)變?yōu)閍rrow_on.gif效果變成：現(xiàn)在css的完整代碼是：.testulliststyle:none.testlifloat:leftwidth:100pxbackground:#CCCmarginleft:3pxlineheight:30px.testadispla