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

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

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

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

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