CSS頁面佈局常用知識總結（清單樣式）

CSS中的知識非常多，我們不可能全都記得住。閒暇時整理了一些CSS頁面佈局的常用知識，這篇文章就和大家分享一下CSS列表樣式的常用知識。需要的朋友可以參考一下，希望可以幫助你。

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中文網其他相關文章！