大家好，我是皮皮。
一、概念
CSS列表屬性作用如下：設置不同的列表項標記為有序列表。設置不同的列表項標記為無序列表。設置列表項標記為圖像。
二、什么是種類型的列表？
種類型的列表：
-
ul無序列表 - 列表項標記用特殊圖形（如小黑點、小方框等）
-
ol有序列表 - 列表項的標記有數字或字母。
使用CSS，可以列出進一步的樣式，並可用圖像作列表項標記。
三、常見的ul ol列表項標記
list-style-type屬性指定列表項標記的類型是：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<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>
</head>
<body>
<p>Example of unordered lists:</p>
<ul class="a">
<li>語文</li>
<li>數學</li>
<li>英語</li>
</ul>
<ul class="b">
<li>語文</li>
<li>數學</li>
<li>英語</li>
</ul>
<p>Example of ordered lists:</p>
<ol class="c">
<li>語文</li>
<li>數學</li>
<li>英語</li>
</ol>
<ol class="d">
<li>語文</li>
<li>數學</li>
<li>英語</li>
</ol>
</body>
</html>
四、ul ol列表項標記的圖像瀏覽器兼容性解決方案
要指定列表項標記的圖像，使用列表樣式圖像屬性list-style-image。
在所有的瀏覽器，下面的例子會顯示圖像標記：
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;
}
代碼解析
-
ul:
-
設置列表樣式類型為沒有刪除列表項標記
-
設置填充和邊距0px（瀏覽器兼容性）
-
ul中所有li:
-
設置圖像的URL，並設置它只顯示一次（無重復）
-
您需要的定位圖像位置（左0px和上下5px）
-
用padding-left屬性吧文本置於列表中
五、拓展
ul ol列表縮寫屬性
在單個屬性中可以指定所有的列表屬性。這就是所謂的縮寫屬性。
為列表使用縮寫屬性，列表樣式屬性設置如下：
ul
{
list-style: square url("sqpurple.gif");
}
如果使用縮寫屬性值的順序是：
①list-style-type 。②list-style-position。 ③list-style-image。
如果上述值丟失一個，其余仍在指定的順序，就沒關系。
六、總結
本文基於HTML基礎，本文主要介紹了HTML常見的ul ol 列表、常見的列表標記圖標。對於瀏覽器兼容列表圖像的問題，提供了一系列的解決方案，最后擴展相關知識，優化代碼，希望能夠幫助你學習。