CSS 列表樣式
前面在HTML章節中我們學習到了：
1. 無序列表- 列表項標記用特殊圖形（如小黑點、小方框等）
2. 有序列表- 列表項的標記有數字或字母
下面我們就了解CSS中的列表。
CSS中的ul與li樣式詳解
ul和li列表是使用CSS佈局頁面時常用的元素。在CSS中，有專門控制清單表現的屬性，常用的有list-style-type屬性、list-style-image屬性、list-style-position屬性和list-style屬性。
一、list-style-type屬性
list-style-type屬性是用來定義li列表的項目符號的，即列表前面的修飾。 list-style-type屬性是一個可繼承的屬性。其語法結構如下：（列舉一些常用的屬性值）
list-style-type: none/disc/circle/square/demical/lower-alpha/upper-alpha/lower-roman/upper-roman
list-style-type屬性的屬性值很多，在這裡我們只是列舉了比較常用的幾個。
none：不使用項目符號。 disc：實心圓。 circle：空心圓。 square：實心方塊。 demical：阿拉伯數字。 lower-alpha：小寫英文字母。 upper-alpha：大寫英文字母。 lower-roman：小寫羅馬數字。 upper-roman：大寫羅馬數字。
使用list-style-type屬性的範例程式碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
li{list-style-type:square;}
</style>
</head>
<body>
<ul>
<li>这里是列表内容</li>
<li>这里是列表内容</li>
<li>这里是列表内容</li>
</ul>
</body>
</html>二、list-style-image屬性
list-style-image屬性用來定義使用圖片取代項目符號。它也是可繼承屬性，其語法結構如下：
list-style-image:none/url
list-style-image屬性可以取兩個值：
none：沒有替換的圖片。 url：要替換圖片的路徑。
來看一段程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
li{list-style-image:url(http://php.cn/style/images/sqpurple.gif);}
</style>
</head>
<body>
<ul>
<li>这里是列表内容</li>
<li>这里是列表内容</li>
<li>这里是列表内容</li>
</ul>
</body>
</html>三、list-style-position屬性
list-style-position屬性，是用來定義項目符號在清單中顯示位置的屬性。它同樣是一個可繼承的屬性，語法結構如下：
list-style-position:inside/outside
inside：項目符號放置在文字以內。 outside：項目符號放置在文字以外。
使用list-style-position屬性的範例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
li{list-style-type:square;list-style-position:outside;}
</style>
</head>
<body>
<ul>
<li>这里是使用list-style-position属性值为outside的示例。请注意换行以后项目符号的位置。
这里是使用list-style-position属性值为outside的示例。请注意换行以后项目符号的位置。
这里是使用list-style-position属性值为outside的示例。请注意换行以后项目符号的位置。</li>
<li>这里是列表内容</li>
<li>这里是列表内容</li>
</ul>
</body>
</html>四、list-style屬性
list- style屬性是綜合設定li樣式的屬性，也是可以繼承的屬性，語法結構如下：
li-style:list-style-type/list-style-image/list-style-position
各個值的位置可以交換。如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
li{list-style:url( inside;}
</style>
</head>
<body>
<ul>
<li>这里是使用list-style属性的示例。请注意换行以后项目符号的位置。
这里是使用list-style属性的示例。请注意换行以后项目符号的位置。
这里是使用list-style属性的示例。请注意换行以后项目符号的位置。</li>
<li>这里是列表内容</li>
</ul>
</body>
</html>瀏覽器相容性解決方案
同樣在所有的瀏覽器，下面的範例會顯示的圖片標記：
ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul li
{
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding -left: 14px;
}
範例解釋：
ul:
設定清單樣式類型為沒有刪除清單項標記
設定填滿和邊距0px（瀏覽器相容性）
ul中所有li:
設定圖片的URL，並設定它只顯示一次（無重複)
您需要的定位圖像位置（左0px和上下5px）
#用padding-left屬性把文字置於列表中
