CSS學習 CSS 列表樣式（ul）

2021-07-04 06:06:14 字數 1815 閱讀 8056

css列表屬性作用如下：

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

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

設定列表項標記為影象

在html中，有兩種型別的列表：

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

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

使用css，可以列出進一步的樣式，並可用影象作列表項標記。

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



ul.a


ul.b


ol.c


ol.d


style>


head>


example of unordered lists:p>


class="a">


coffeeli>


teali>


coca colali>


ul>


class="b">


coffeeli>


teali>


coca colali>


ul>


example of ordered lists:p>


class="c">


coffeeli>


teali>


coca colali>


ol>


class="d">


coffeeli>


teali>


coca colali>


ol>


body>


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

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



ulstyle>


head>


coffeeli>


teali>


coca colali>


ul>


body>


html>
上面的例子在所有瀏覽器中顯示並不相同，ie和opera顯示影象標記比火狐，chrome和safari更高一點點。

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

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



ulul


listyle>


head>


coffeeli>


teali>


coca colali>


ul>


body>


html>
例子解釋：

ul:

設定列表樣式型別為沒有刪除列表項標記

設定填充和邊距0px（瀏覽器相容性）

ul中所有li:

設定影象的url，並設定它只顯示一次（無重複）

您需要的定位影象位置（左0px和上下5px）

用padding-left屬性吧文字置於列表中

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

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

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

list-style-type

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

list-style-image

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

CSS的ul與li樣式學習

ul和li列表是使用css布局頁面時常用的元素。在css中，有專門控制列表表現的屬性，常用的有list style type屬性 list style image屬性 list style position屬性和list style屬性。一 list style type屬性 list style ...

css列表樣式

css列表樣式 1.list style type 設定列表項標誌的型別 1 無序列表 none 無標記 去除預設的圓點 disc 實心的圓點，circle 空心的圓點，square實心的方塊 2 有序列表 none 無標記，decimal 從1開始的整數，lower roman小寫羅馬數字，upp...

CSS列表樣式屬性

list style 這個屬性是設定列表樣式的乙個快捷的綜合寫法。用這個屬性可以同時設值列表樣式型別屬性 list style type 列表樣式位置屬性 list style position 和列表樣式屬性 list style image 示例 如下 ul list style type 列表...