當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

详细研究CSS列表

發布時間：2025/4/14 CSS 23 豆豆

生活随笔收集整理的這篇文章主要介紹了详细研究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列表的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。