列表類型

我們知道，列表有無序，有序之分，無序列表又可以用不同的標記來區(qū)分。而 list-style-type 這個屬性我們就可以用來控制標記類型。下面我們就動手實驗一把 在 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é)果：

列表項圖像

有時，常規(guī)的標志是不夠的。你可能想對各標志使用一個圖像，這可以利用 list-style-image 屬性做到：

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

只需要簡單地使用一個 url() 值，就可以使用圖像作為標志。

列表標志位置

CSS2.1 可以確定標志出現(xiàn)在列表項內(nèi)容之外還是內(nèi)容內(nèi)部。這是利用 list-style-position 完成的。

簡寫列表樣式

為簡單起見，可以將以上 3 個列表樣式屬性合并為一個方便的屬性：list-style，就像這樣：

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

list-style 的值可以按任何順序列出，而且這些值都可以忽略。只要提供了一個值，其它的就會填入其默認值。