1、無序列表

無序列表是指列表符為圓點或者其他圖形而非數字。無序列表語法為：

<ul>
    <li>**</li>
    <li>**</li>
    ......
</ul>

其中ul的作用是說明其包含的列表是無序列表，每組li用于包含一個列表項目。

2、有序列表

有序列表的列表符為數字。有序列表語法為：

<ol>
    <li>**</li>
    <li>**</li>
    ......
</ol>

其中ol的作用是說明其包含的列表是有序列表，每組li用于包含一個列表項目。

3、定義列表

定義列表在使用中較少出現，其語法為：

<dl>
   <dt>
      <dd>**</dd>
   </dt>
   ......
</dl>

其中dl的作用是說明其包含的列表是定義列表，一般dt定義一個概念，dd是對該概念的解釋。

4、改變列表符的樣式

CSS提供list-style-type、list-style-image、list-style-position屬性來改變列表符的樣式。

使用自帶列表符

語法：

list-style-type：type;

若type=none，則列表不帶列表符。常用的type有：

square（實心方塊）

disc（實心圓）

cicle（空心圓）

decimal（阿拉伯數字）

lower-roman（小寫羅馬字母）

upper-roman（大寫羅馬字母）

使用背景圖片作為列表符

根據需要，有時候列表符可以使用較小的圖片來代替，語法為：

list-style-image：url(picture.png);

改變列表符的位置

列表符可以嵌入文本中，也可以在文本內容之外，語法為：

list-style-position：inside/outside;

列表符屬性的簡寫

以下代碼：

list-style-image：url(picture.png);
list-style-position：inside/outside;

可以簡寫為：

list-style: url(picture.png) inside/outside;

注意：一般情況下，list-style-type和list-style-image不會同時使用，因為后者會覆蓋前者。

以上就是CSS頁面布局常用知識匯總（列表樣式）的詳細內容，更多請關注php中文網其它相關文章！