制作橫向菜單

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

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

3、xtalign:centerheight:30px.testlifloat:leftwidth:100pxbackground:#CCCmarginleft:3pxlineheight:30px效果變成：這樣就漂亮多了吧。第七步：定義背景圖片我們通常都會(huì)在每個(gè)鏈接前加一個(gè)小圖標(biāo)，這樣導(dǎo)航更清楚。CSS是采用定義li的背景圖片來實(shí)現(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”這句代碼是一個(gè)CSS縮寫，表示背景圖片是arrow_off.gif；背景

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