W3Cschool
恭喜您成為首批注冊用戶
獲得88經(jīng)驗(yàn)值獎(jiǎng)勵(lì)
CSS 列表屬性作用如下:
在 HTML 中,有兩種類型的 HTML列表:
使用CSS,可以列出進(jìn)一步的樣式,并可用圖像作列表項(xiàng)標(biāo)記。
list-style-type
屬性指定列表項(xiàng)標(biāo)記的類型是:
一些值是無序列表,以及有些是有序列表。
下列是對 list-style-type
屬性的常見屬性值的描述:
none
:不使用項(xiàng)目符號
disc
:實(shí)心圓
circle
:空心圓
square
:實(shí)心方塊
decimal
:阿拉伯?dāng)?shù)字
lower-alpha
:小寫英文字母
upper-alpha
:大寫英文字母
lower-roman
:小寫羅馬數(shù)字
upper-roman
:大寫羅馬數(shù)字
要指定列表項(xiàng)標(biāo)記的圖像,使用列表樣式圖像屬性:
上面的例子在各大主流瀏覽器中的顯示有所差異,IE 和 Opera 顯示圖像標(biāo)記比火狐( Firefox ),Chrome 和 Safari 更高一點(diǎn)點(diǎn)。
提示:
- 利用
list-style-position
可以確定標(biāo)志出現(xiàn)在列表項(xiàng)內(nèi)容之外還是內(nèi)容內(nèi)部。- 如果你想在所有的瀏覽器放置同樣的形象標(biāo)志,就應(yīng)使用瀏覽器兼容性解決方案,方法如下。
同樣在所有的瀏覽器,下面的例子會顯示的圖像標(biāo)記:
例子解釋:
padding-left
屬性把文本置于列表中在單個(gè)屬性中可以指定所有的列表屬性。這就是所謂的簡寫屬性。
為列表使用簡寫屬性,列表樣式屬性設(shè)置如下:
如果使用縮寫屬性值的順序是:
list-style-type
list-style-position
(有關(guān)說明,請參見下面的CSS屬性表)list-style-image
在簡寫屬性時(shí),如果上述值丟失一個(gè),其余仍在指定的順序,就沒關(guān)系。
所有不同的列表項(xiàng)標(biāo)記
這個(gè)例子演示了所有不同的 CSS 列表項(xiàng)標(biāo)記。
屬性 | 描述 |
---|---|
list-style | 簡寫屬性。用于把所有用于列表的屬性設(shè)置于一個(gè)聲明中 |
list-style-image | 將圖象設(shè)置為列表項(xiàng)標(biāo)志。 |
list-style-position | 設(shè)置列表中列表項(xiàng)標(biāo)志的位置。 |
list-style-type | 設(shè)置列表項(xiàng)標(biāo)志的類型。 |
Copyright©2021 w3cschool編程獅|閩ICP備15016281號-3|閩公網(wǎng)安備35020302033924號
違法和不良信息舉報(bào)電話:173-0602-2364|舉報(bào)郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號
聯(lián)系方式:
更多建議: