list-style-type
- none 無標記。
- disc 默認。標記是實心圓。
- circle 標記是空心圓。
- square 標記是實心方塊。
- decimal 標記是數位。
- decimal-leading-zero 0開頭的數位標記。(01, 02, 03, 等。)
- lower-roman 小寫羅馬數字(i, ii, iii, iv, v, 等。)
- upper-roman 大寫羅馬數字(I, II, III, IV, V, 等。)
- lower-alpha 小寫英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
- upper-alpha 大寫英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
- 還有，自己查。以上來自：http://www.w3school.com.cn/cssref/pr_list-style-type.asp
清單前使用圖片，先去掉標記再放上圖片：
list-style-type: none;
list-style-image: url("picture/arrow2.gif")
清單前使用符號的位置有inside、outside兩種，其中前者會跟著清單一起走，後者不會。
<!DOCTYPE html>
<html lang="zh-tw">
<head>
<title>第二個網頁測試</title>
<meta charset="UTF-8">
<style>
.first li {
list-style-type: none;
list-style-image: url("picture/arrow1.gif");
}
.second li {
list-style-type: none;
list-style-image: url("picture/arrow2.gif")
}
.third li {
list-style-type: none;
list-style-image: url("picture/arrow3.png")
}
.in {
background-color: yellow;
list-style-position: inside
/*套用時注意，如果沒有把list-style-position設定成inside，那新設定的清單(圖片)跟清單列本身不在一起，之後調整可能出錯
例如頭身分離之類的(清單點「‧」跟清單內容分離，可以看.in跟.out背景顏色圈的範圍就不一樣)*/
}
#out {/*#開頭的是id，*/
background-color: #EE7700;
list-style-position: outside
}
</style>
</head>
<body>
<h2 >子清單‧中國朝代服飾</h2>
<ol class = "first"><!--設定這一層的標籤套用是.first的設計，注意如果下面的子類別沒有設定，則也會套用此設定-->
<li>
唐<!--在唐朝裡增加第二層子清單，唐朝服飾-->
<ul class = "second">
<li>
齊胸儒裙
</li><!--在唐朝服飾裡增加第三層子清單，服飾資料-->
<ol class = "third">
<li>
貴族
</li>
<li>
盛唐
</li>
</ol>
<li class="in">
圓領袍
</li>
<li id="out"><!--只能使用一次的id-->
坦領裙
</li>
</ul>
</li><!--在唐朝裡增加子清單結束-->
<li>
宋
</li>
<li>
元
</li>
<li>
明
</li>
<li>
清
</li>
</ol><!--清單結束-->
</body>
</html>
留言列表
【前端網頁開發技術】 (4)
