項目清單(list)在網頁編寫上是很常用到的元素，常見的項目符號除了「1、2、3」數字之外，大多使用圓點或是方塊來標注個個清單，區分條列。CSS語法裡面也能選擇清單樣式的宣告，像是「list-style-type」屬性，雖然這樣的符號相當容易使用，但是卻有著無法彈性修正位置以及自訂樣式的缺點。另外一種屬性，「list-style-image」也許可以讓你替換自訂的樣式圖片，卻在各瀏覽器上存在著不一致的情況，在位置上的調整上也具有難以異動的缺點！那麼，想要製作清單圖示 最好的選擇 是什麼呢？就是利用背景「background」元素來宣告！
以下就來分享一下如何使用背景圖片來製作清單圖示吧！
Step 1 建立基本的項目清單
- 清單項目一
- 清單項目二
- 清單項目三
HTML
<ul>
<li>清單項目一</li>
<li>清單項目二</li>
<li>清單項目三</li>
</ul>
Step 2 清除預設的項目符號（以及元素內外間距）
- 清單項目一
- 清單項目二
- 清單項目三
CSS
*{
padding:0;
margin:0;
}
ul{
list-style-type:none;
}
清除預設的項目符號只要加上「list-style-type:none;」語法即可。這裡有另外一個重點，在於清除瀏覽器預設的內外間距。我的習慣會在編寫CSS之前下一個 *{margin:0; padding:0;} 的語法，意思是宣告整個網站「所有」元素內外間距皆為 0 ，而 * 指的就是「所有元素」。
為什麼要清除所有預設的屬性呢？原因無他，就是為了清除各瀏覽器之間的差異！以項目清單的「縮排」為例子，在 FireFox 底下預設是使用 padding 來呈現，而在 IE 則是 margin 。將所有瀏覽器基準同於一線的時候，再去作調整，則每個瀏覽器之間的差異就不會太大了！
Step 3 自訂縮排間距
- 清單項目一
- 清單項目二
- 清單項目三
CSS
ul{
list-style-type:none;
margin-left:20px;
}
清除了預設的縮排之後，我們就可以隨心所欲將項目清單位置作調整。這裡我使用 margin-left: 20px 。可依情況改變。
Step 4 加上自訂的背景圖片
CSS
ul{
list-style-type:none;
margin-left:20px;
}
li {
background-image:url(images/icon01.gif);
background-repeat:no-repeat;
}
針對 li 下背景圖片的屬性，我們還必須增加一個 no-repeat 屬性，免得背景圖片一直重複，以致整個 li 被圖片淹沒。
Step 5 調整背景圖片位置
CSS
ul{
list-style-type:none;
margin-left:20px;
}
li {
background-image:url(images/icon01.gif);
background-repeat:no-repeat;
background-position:0 0.4em;
}
在上一步，背景圖片的預設位置，將會對齊元素的 left 與 top ，也就是左上方，這在每個瀏覽器中都是相同的。使用背景代項目符號的優點，就是能調整符號的位置！在這裡，「background-position:0 0.4em;」語法後面的2個數字分別代表：靠左 0px ，靠上 0.4em。0.4em 圖片正好垂直置中於文字的行高。
背景定位的數值可以自行調整，數值大小將取決於網站字級、行高等因素而有不同。編寫的時候，可以嘗試不同的值，以達到自己滿意的效果。
Step 6 調整項目位置
CSS
ul{
list-style-type:none;
margin-left:20px;
}
li {
background-image:url(images/icon01.gif);
background-repeat:no-repeat;
background-position:0 0.4em;
padding-left:12px;
}
最後，針對每個項目做靠左的定位，這裡必須使用內距 padding-left:12px; 的屬性，來讓項目定位在正確的位置上。數值可以依據符號圖片的寬度做調整，儘量不要靠圖片太近。使用圖片寬度較大的，就必須將數值調整更大了！
完成！
一個具有調整彈性，又能兼容各瀏覽器的「背景圖片製作的項目符號」就完成了！如果覺得項目與項目之間的行距不夠高，也能針對 li 下 margin-bottom:8px; 拉大與下面項目的距離。
發表文章
