列表類(lèi)型

我們知道，列表有無(wú)序，有序之分，無(wú)序列表又可以用不同的標(biāo)記來(lái)區(qū)分。而 list-style-type 這個(gè)屬性我們就可以用來(lái)控制標(biāo)記類(lèi)型。下面我們就動(dòng)手實(shí)驗(yàn)一把在html 檔案中加入：

<ul class="circle">
    <li>php中文網(wǎng)</li>
    <li>php中文網(wǎng)</li>
</ul>
 
<ul class="square">
    <li>php中文網(wǎng)</li>
    <li>php中文網(wǎng)</li>
</ul>
 
<ol class="upper-roman">
    <li>php中文網(wǎng)</li>
    <li>php中文網(wǎng)</li>
</ol>
 
<ol class="lower-alpha">
    <li>php中文網(wǎng)</li>
    <li>php中文網(wǎng)</li>
</ol>

在CSS 檔案中加入：

ul.circle {list-style-type:circle}
ul.square {list-style-type:square}
ol.upper-roman {list-style-type:upper-roman}
ol.lower-alpha {list-style-type:lower-alpha}

以下就是我們所得到的結(jié)果：

#清單項(xiàng)目圖像

有時(shí)，常規(guī)的標(biāo)誌是不夠的。你可能想要對(duì)各標(biāo)誌使用一個(gè)圖像，這可以利用?list-style-image?屬性做到：

ul li {list-style-image : url(xxx.gif)}

只需要簡(jiǎn)單地使用一個(gè)url() 值，就可以使用圖像作為標(biāo)誌。

清單標(biāo)誌位置

CSS2.1 可以決定標(biāo)誌出現(xiàn)在清單項(xiàng)目?jī)?nèi)容之外還是內(nèi)容內(nèi)部。這是利用?list-style-position?完成的。

簡(jiǎn)寫(xiě)清單樣式

為簡(jiǎn)單起見(jiàn)，可以將以上3 個(gè)清單樣式屬性合併為一個(gè)方便的屬性：list-style，就像這樣：

li {list-style : url(example.gif) square inside}

list-style 的值可以用任何順序列出，而且這些值都可以忽略。只要提供了一個(gè)值，其它的就會(huì)填入其預(yù)設(shè)值。

?