CSS 列表樣式(ul)

CSS列表屬性作用如下：

• 設置不同的列表項標記為有序列表
• 設置不同的列表項標記為無序列表
• 設置列表項標記為圖像

列表

在HTML中，有兩種​​類型的列表：

• 無序列表- 列表項標記用特殊圖形（如小黑點、小方框等）
• 有序列表- 列表項的標記有數字或字母

使用CSS，可以列出進一步的樣式，並可用圖像作列表項標記。

不同的列表項標記

list-style-type屬性指定列表項標記的類型是：:

一些值是無序列表，以及有些是有序列表。

作為列表項標記的圖像

要指定列表項標記的圖像，使用列表樣式圖像屬性：

上面的例子在所有瀏覽器中顯示並不相同，IE和Opera顯示圖像標記比火狐，Chrome和Safari更高一點點。

如果你想在所有的瀏覽器放置同樣的形象標誌，就應使用瀏覽器兼容性解決方案，過程如下

瀏覽器兼容性解決方案

同樣在所有的瀏覽器，下面的例子會顯示的圖像標記：

例子解釋：

• ul:
  • 設置列表樣式類型為沒有刪除列表項標記
  • 設置填充和邊距0px（瀏覽器兼容性）
• ul中所有li:
  • 設置圖像的URL，並設置它只顯示一次（無重複）
  • 您需要的定位圖像位置（左0px和上下5px）
  • 用padding-left屬性把文本置於列表中

列表-縮寫屬性

在單個屬性中可以指定所有的列表屬性。 這就是所謂的縮寫屬性。

為列表使用縮寫屬性，列表樣式屬性設置如下：

如果使用縮寫屬性值的順序是：

• list-style-type
• list-style-position (有關說明，請參見下面的CSS屬性表)
• list-style-image

如果上述值丟失一個，其餘仍在指定的順序，就沒關係。

更多實例

所有不同的列表項標記
這個例子演示了所有不同的CSS列表項標記。

所有的CSS列表屬性