CSS 列表樣式的實例講解

CSS 清單

CSS清單屬性作用如下：

設定不同的清單項目標記為有序列表

設定不同的清單項目標記為無序列表

設定清單項目標記為圖片

清單

在HTML中，有兩種​​類型的清單：

無序列表- 列表項目標記以特殊圖形（如小黑點、小方框等）

有序列表- 列表項目的標記有數字或字母

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

不同的清單項目標記

list-style-type屬性指定清單項目標記的型別是：:

實例

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;}

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

作為清單項目標記的圖像

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

實例

ul
{
list-style-image: url('sqpurple.gif');
}

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

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

瀏覽器相容性解決方案

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

實例

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
{
list-style: square url("sqpurple.gif");
}

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

list-style -type

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

list-style-image

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

【相關推薦】

1. 特別推薦：「php程式設計師工具箱」V0.1版本下載

2. 免費css線上影片教學

#3. php.cn獨孤九賤（2）－css影片教學

#

以上是CSS 列表樣式的實例講解的詳細內容。更多資訊請關注PHP中文網其他相關文章！