详细研究CSS列表
先看圖圖;
碼碼:
<html> <head> <style type="text/css"> ul { margin:50px; background: green; width:500px; } </style> </head><body> <ul> <li style="list-style-image: url('img/tuxiao1.png');padding:10px 150px 10px;background: red; ">偶是小兔兔</li> <li style="list-style-image: url('img/maoxiao1.png');padding:10px 150px 10px;background: blue;">偶是小貓咪</li> <li style="list-style-image: url('img/gouxiao1.png');padding:10px 150px 10px;background: red; ">偶是小狗狗</li> </ul> </body></html>在沒有定義ul背景和寬度,及各個li的各自風格時顯示如圖1;
定義了背景之后顯示如圖2;如果不定義ul寬度,其默認寬度占據整個瀏覽器窗口;
定義了背景和寬度之后如圖3;
再為三個li單獨定義樣式:
內邊距: 上和下10px; ? 右和左150px;
由圖可見li的內邊距定義對li的背景在ul的背景中的位置無影響;只是影響了li中文字的位置;?
總結
- 上一篇: CSS列表和一些变化情况
- 下一篇: 各种DIV布局单元