* 無序列表ul\- 列表項標記用特殊圖形（如小黑點、小方框等） * 有序列表ol\- 列表項的標記有數字或字母 ``` <style> ul.a {list-style-type:circle;} ul.b {list-style-type:square;} ol.c {list-style-type:upper-roman;} ol.d {list-style-type:lower-alpha;} </style> <p>無序列表實例:</p> <ul class="a"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> <ul class="b"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> <p>有序列表實例:</p> <ol class="c"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ol> <ol class="d"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ol> ```  還可以設置圖片 ``` ul { list-style-image: url('sqpurple.gif'); } ```  ## **移除默認設置** list-style-type:none 屬性可以用于移除小標記。默認情況下列表 或 還設置了內邊距和外邊距，可使用`margin:0`和`padding:0`來移除: ``` ul { list-style-type: none; margin: 0; padding: 0; } ``` ## **瀏覽器兼容性解決方案** ``` ul { list-style-type: none; padding: 0px; margin: 0px; } ul li { background-image: url(sqpurple.gif); background-repeat: no-repeat; background-position: 0px 5px; padding-left: 14px; } ``` ## 所有的CSS列表屬性 | 屬性 | 描述 | | :-- | :-- | | [list-style](https://www.runoob.com/cssref/pr-list-style.html) | 簡寫屬性。用于把所有用于列表的屬性設置于一個聲明中 | | [list-style-image](https://www.runoob.com/cssref/pr-list-style-image.html) | 將圖像設置為列表項標志。 | | [list-style-position](https://www.runoob.com/cssref/pr-list-style-position.html) | 設置列表中列表項標志的位置。 | | [list-style-type](https://www.runoob.com/cssref/pr-list-style-type.html) | 設置列表項標志的類型。 | ## **簡寫** ``` ul { list-style: square url("sqpurple.gif"); } ```