之前一直不了解 <li> 和 <lu> 代表什麼意思,今天小小研究了一下。




先看看下面的語法,在和上圖做比較。

ul {
 list-style-type:none;
 padding:2px;
}

li{
 list-style-type:none;
 padding:0px 5px 0px 10px;
}


ul{}
代表目錄,就是上圖橘色框框的部份,而裡面的 padding 則變成兩個目錄,也就是兩個橘色框框之間的距離。

li{}
子目錄,也就是連結本身的部份。
padding 的大小依序是:上、右、下、左
所以可以發現子目錄的兩行間距部份是 0px,而靠左的部份是 10px (如上圖藍色框框部份),造成母目錄和子目錄的起始點不一樣,子目錄的起始點相較於母目錄較靠左,可比較橘色框框<li>的語法,padding 最後一個代表「左」的只有 2px 的時候。

list-style-type
項目符號,可選擇各式符號,如:圓圈、英文字母…等等。

list-style-type: none (不編號), decimal (阿拉伯數字), upper/lower-roman (大小寫羅馬數字), upper/lower-alpha (大小寫英文字母), disc (實心圓形符號), circle (空心圓形符號), square (實心方形符號);

list-style-image: url(圖片網址)
如果加了這一行,就會如上圖在子目錄的前面加上圖示。
我試了分別加在 ul{} 和 li{} 裡面,圖示都會出現在子目錄前面,如果兩個都加,則只會出現加在子目錄裡面的圖,母目錄的圖示會被蓋過去。

list-style-position
子目錄部份的凸排(outside)或縮排(inside)。

list-style-position: outside, inside;






創作者介紹

min'cellanea

minc 發表在 痞客邦 PIXNET 留言(0) 人氣()