HTML,使用ul制作橫向?qū)Ш綏l

1、HTML:使用ul制作橫向?qū)Ш綏l說明：1：為了方便學(xué)習(xí)，采用把每一個(gè)關(guān)鍵步驟完全分開寫的方式。2：所有內(nèi)容采用360極速瀏覽器測(cè)試，因?yàn)槠洳捎肅hrome內(nèi)核，而Chrome是對(duì)標(biāo)準(zhǔn)支持最好的內(nèi)核。3：小菜原創(chuàng)。Html代碼：TEST我的主頁新聞?lì)^條電視劇最新電影為了方便觀察，為所有元素添加邊框和邊距:加入樣式：#menu,ul,li,aborder:solidthinblack;margin:lOpx;效果：第一步：去掉前面的小圓點(diǎn)加入樣式：#menulilist-style:none;效果如圖：DTx11圖q|塾下栽gm曲侖尋口卩第二步：可以看到，鏈接還不是塊狀，其大小僅由內(nèi)容文字決定，所

2、以四個(gè)鏈接的寬度是不同的改變鏈接的樣式，使鏈接以塊狀展示加入樣式：#menuadisplay:block;效果如圖：注意對(duì)比觀察鏈接部分的變化。第二步：去掉鏈接的下劃線：加入樣式：#menuatext-decoration:none;效果如圖:第四步：使列表橫向顯示加入樣式：#menulifloat:left;效果如圖:HTMLXVISW-SXDTESTHTMLXVISW-SXDTEST3我的主頁新聞?lì)^親電觀劇最新電影+file:/匚:AJef右看，出現(xiàn)問題了，對(duì)吧，這不是錯(cuò)誤，這是因?yàn)槭褂昧薴loat:left之后，元素脫離了文檔流，就好像元素不在文檔中，而是漂浮在文檔之上，所以不包含在外層

3、容器之中。那么，如何把這些元素“拽”回文檔，放到容器之中呢？請(qǐng)看下一步。第五步：清除浮動(dòng)屬性需要在浮動(dòng)元素的后面加上一個(gè)元素，用于清理之前的浮動(dòng)我們加上一個(gè)div元素，作為清理浮動(dòng)的元素。還需要為這個(gè)div賦予清理浮動(dòng)的屬性。加入樣式：.clearclear:both;注意，這是一個(gè)類選擇器，因?yàn)榭赡苡卸嗵幐?dòng)需要清理改變后的ul部分為：我的主頁新聞?lì)^條電視劇最新電影效果如圖:跑掉的元素回來啦!現(xiàn)在讓我們?yōu)檫@些鏈接設(shè)置背景色:我是個(gè)俗人，就設(shè)置紅色吧：加入如下樣式：#menuabackground-color:red;效果:第七步：貌似不太好看，因?yàn)殒溄又械淖趾瓦吙蚓o緊地挨在一起。只需調(diào)整一下

4、鏈接的邊框的內(nèi)邊距：加入樣式：#menuapadding:10px;效果如圖:CS浮動(dòng)view-sourtest.命會(huì)出IGfile管白|圏+福昕Q11風(fēng)|ClZ&Tfs|to運(yùn)荷口魚匚第八步：為鏈接設(shè)置鼠標(biāo)停留在上面的樣式：加入樣式：#menua:hoverbackground-color:blue;效果如圖：因?yàn)槭髽?biāo)懸停狀態(tài)不方便被截圖下來，所以請(qǐng)大家自行想象那里有一個(gè)手型光標(biāo)。w32站浮動(dòng)view-sourcXDTEST!=!I回Iw32站浮動(dòng)view-sourcXDTEST!=!I回I3iiiS窗E8IW HYPERLINK file:/C:/Users/Adminfile:/C:/Users/AdminfC?I圏福昕Q國Q塾下剽豈面巧口耳&塾下剽豈面巧口耳&大家可以看出來，小弟在這里動(dòng)用了和之前不一樣的截圖工具，可惜那只手還是顯示不出來，想象吧。第九步：去掉多余的用于演示的邊框，邊距。加入樣式：（當(dāng)然，也可以直接刪除前面的對(duì)應(yīng)樣式）#menu,ul,li,aborder:solidthinblack;margin:Opx;padding:Opx;順便改變