無(wú)序列表(ul)和有序列表(ol)，默認(rèn)情況下在網(wǎng)頁(yè)的呈現(xiàn)和表格一樣，比較粗糙。
看一個(gè)無(wú)序和有序列表的代碼：
<ul> <li>CSS入門(mén)準(zhǔn)備</li> <li>簡(jiǎn)介與語(yǔ)法</li> <li>選擇器</li> <li>值和單位</li> <li>字體和字號(hào)</li> <li>顏色和背景</li> <li>鏈接</li> <li>邊框</li> <li>外邊距（margin）和填充（padding）</li> </ul> <ol> <li>CSS入門(mén)準(zhǔn)備</li> <li>簡(jiǎn)介與語(yǔ)法</li> <li>選擇器</li> <li>值和單位</li> <li>字體和字號(hào)</li> <li>顏色和背景</li> <li>鏈接</li> <li>邊框</li> <li>外邊距（margin）和填充（padding）</li> </ol>
它呈現(xiàn)的效果如下：
在內(nèi)容文字前面出現(xiàn)的原點(diǎn)（無(wú)序列表里），或數(shù)字（有序列表里），稱為“列表項(xiàng)標(biāo)記”。
一起來(lái)看看 CSS 能用來(lái)對(duì)列表進(jìn)行什么樣的樣式修改。
列表項(xiàng)標(biāo)記類(lèi)型（list-style-type）
有序列表和無(wú)序列表，其實(shí)就是列表項(xiàng)標(biāo)記類(lèi)型上的區(qū)別。
列表項(xiàng)標(biāo)記類(lèi)型通過(guò)屬性 list-style-type 指定。
.ul-one { list-style-type: decimal; }
上面定義了類(lèi).ul-one，并指定它的 list-style-type 為 decimal，也就是數(shù)字。
<ul class="ul-one"> <!--為節(jié)省空間，這里具體的列表項(xiàng)不再展示--> </ul>
然后再為無(wú)序列表應(yīng)用上述類(lèi)，那么它呈現(xiàn)出來(lái)的效果就和有序列表一樣。這里就不再截圖示意。
list-style-type 屬性值
list-style-type 的值有很多，如下：
none：無(wú)標(biāo)記。
disc：默認(rèn)。標(biāo)記是實(shí)心圓。
circle：標(biāo)記是空心圓。
square：標(biāo)記是實(shí)心方塊。
decimal：標(biāo)記是數(shù)字。
decimal-leading-zero：0 開(kāi)頭的數(shù)字標(biāo)記。(01, 02, 03, 等。)
lower-roman：小寫(xiě)羅馬數(shù)字(i, ii, iii, iv, v, 等。)
upper-roman：大寫(xiě)羅馬數(shù)字(I, II, III, IV, V, 等。)
lower-alpha：小寫(xiě)英文字母 The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha：大寫(xiě)英文字母 The marker is upper-alpha (A, B, C, D, E, 等。)
lower-greek：小寫(xiě)希臘字母(alpha, beta, gamma, 等。)
lower-latin：小寫(xiě)拉丁字母(a, b, c, d, e, 等。)
upper-latin：大寫(xiě)拉丁字母(A, B, C, D, E, 等。)
hebrew：傳統(tǒng)的希伯來(lái)編號(hào)方式
armenian：傳統(tǒng)的亞美尼亞編號(hào)方式
georgian：傳統(tǒng)的喬治亞編號(hào)方式(an, ban, gan, 等。)
cjk-ideographic：簡(jiǎn)單的表意數(shù)字
hiragana：標(biāo)記是：a, i, u, e, o, ka, ki, 等。（日文平假名字符）
katakana：標(biāo)記是：A, I, U, E, O, KA, KI, 等。（日文片假名字符）
hiragana-iroha：標(biāo)記是：i, ro, ha, ni, ho, he, to, 等。（日文平假名序號(hào)）
katakana-iroha：標(biāo)記是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名序號(hào)）
通過(guò)使用不同的值，可以為列表呈現(xiàn)出不同的標(biāo)記。
移除標(biāo)記默認(rèn)設(shè)置
如果不想顯示列表項(xiàng)標(biāo)記，把它的值設(shè)置成 none 即可。
.ul-two { list-style-type: none; }
<ul class="ul-one ul-two"> <!--為節(jié)省空間，這里具體的列表項(xiàng)不再展示--> </ul>
這里也不再截圖示意。
為列表項(xiàng)標(biāo)記使用圖像（list-style-image）
如果覺(jué)得默認(rèn)的列表項(xiàng)標(biāo)記都不好，而是希望使用自己設(shè)計(jì)或準(zhǔn)備的圖片，則可以通過(guò) list-style-image 來(lái)實(shí)現(xiàn)。
.ul-three { list-style-image: url(../img/2-1-3-0-correct-small-2.png); }
準(zhǔn)備好圖片之后，設(shè)置如上，再把樣式類(lèi)應(yīng)用到 ul 中。
<ul class="ul-one ul-two ul-three"> <!--為節(jié)省空間，這里具體的列表項(xiàng)不再展示--> </ul>
它的呈現(xiàn)效果如下：
這里要注意，我們無(wú)法在 list-style-image 里像 img 一樣設(shè)置圖片大小，所以為它準(zhǔn)備的圖片大小要合適才行。
列表項(xiàng)標(biāo)記位置（list-style-position）
list-style-position 屬性表示列表項(xiàng)標(biāo)記和內(nèi)容之間的關(guān)系。也就是前面的原點(diǎn)或數(shù)字與內(nèi)容文字之間的位置關(guān)系。
它的默認(rèn)值是 outside，表示在內(nèi)容文字的外部，還可以設(shè)置成 inside，表示在內(nèi)容文字的內(nèi)部。
為了清楚地展示這里的外部和內(nèi)部，我們給 li 標(biāo)簽加上邊框。
.ul-four li { border: 1px solid #ccc; }
可以看到，默認(rèn)情況下，列表項(xiàng)標(biāo)記在邊框之外，因?yàn)樗闹凳?outside。
.ul-five { list-style-position: inside; }
如果此時(shí)設(shè)置位置為 inside，則標(biāo)記顯示在了邊框之內(nèi)，如下：
總結(jié)
?? 在內(nèi)容文字前面出現(xiàn)的原點(diǎn)（無(wú)序列表里），或數(shù)字（有序列表里），稱為“列表項(xiàng)標(biāo)記”。
?? 有序列表和無(wú)序列表，其實(shí)就是列表項(xiàng)標(biāo)記類(lèi)型上的區(qū)別，列表項(xiàng)標(biāo)記還可以使用圖片。
?? 列表項(xiàng)標(biāo)記與內(nèi)容文字之間的關(guān)系，有 outside 和 inside 兩種類(lèi)型。
該文章在 2024/10/19 12:43:26 編輯過(guò)
400 186 1886
