CSS样式表基础（十一）——有序列表
15、有序列表
对有序列表，list-style-type的值为：
- lower-roman 小写罗马数字：
ⅰ,ⅱ,ⅲ,ⅳ,ⅴ,ⅵ,ⅶ,ⅷ,ⅸ,ⅹ…… - upper-roman 大写罗马数字：
Ⅰ,Ⅱ,Ⅲ,Ⅳ,Ⅴ,Ⅵ,Ⅶ,Ⅷ,Ⅸ,Ⅹ…… - upper-alpha 或 upper-latin 大写英文字母
A,B,C,D,E,F,G,H,I,J…… - lower-alpha 或 lower-latin 小写英文字母
a,b,c,d,e,f,g,h,i,j…… - lower-greek 小写希腊字母
α,β,γ,δ,ε,ζ,η,θ,ι,κ…… - decimal 十进制数
1,2,3,4,5,6,7,8,9,10…… - decimal-leading-zero 十进制数，前面带0，如01、02、99
01,02,03,04,05,06,07,08,09,10…… - binary 二进制数
0,01,10,11,100,101,110,111,1000,1001,1010…… - cjk-ideographic 中文数字一二三四
一,二,三,四,五,六,七,***,十…… - cjk-earthly-branch 子丑寅卯
子、丑、寅、卯、辰、巳、午、未、申、酉、戌、亥…… - cjk-heavenly-stem 甲乙丙丁
甲、乙、丙、丁、戊、己、庚、辛、壬、癸……
例：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>CSS Sample</title>
<style>
ol#list_1 {list-style-type:lower-roman;}
ol#list_2 {list-style-type:upper-roman;}
ol#list_3 {list-style-type:lower-alpha;}
ol#list_4 {list-style-type:upper-alpha;}
ol#list_5 {list-style-type:lower-greek;}
ol#list_6 {list-style-type:decimal;}
ol#list_7 {list-style-type:decimal-leading-zero;}
ol#list_8 {list-style-type:cjk-ideographic;}
ol#list_9 {list-style-type:cjk-earthly-branch;}
ol#list_10 {list-style-type:cjk-heavenly-stem;}
</style>
</head>
<body>
<ol id="list_1">
<li>第一个列表项</li>
<li>第二个列表项</li>
<li>第三个列表项</li>
</ol>
<ol id="list_2">
<li>第一个列表项</li>
<li>第二个列表项</li>
<li>第三个列表项</li>
</ol>
<ol id="list_3">
<li>第一个列表项</li>
<li>第二个列表项</li>
<li>第三个列表项</li>
</ol>
<ol id="list_4">
<li>第一个列表项</li>
<li>第二个列表项</li>
<li>第三个列表项</li>
</ol>
<ol id="list_5">
<li>第一个列表项</li>
<li>第二个列表项</li>
<li>第三个列表项</li>
</ol>
<ol id="list_6">
<li>第一个列表项</li>
<li>第二个列表项</li>
<li>第三个列表项</li>
</ol>
<ol id="list_7">
<li>第一个列表项</li>
<li>第二个列表项</li>
<li>第三个列表项</li>
</ol>
<ol id="list_8">
<li>第一个列表项</li>
<li>第二个列表项</li>
<li>第三个列表项</li>
</ol>
<ol id="list_9">
<li>第一个列表项</li>
<li>第二个列表项</li>
<li>第三个列表项</li>
</ol>
<ol id="list_10">
<li>第一个列表项</li>
<li>第二个列表项</li>
<li>第三个列表项</li>
</ol>
</body>
</html>
投递vivo等公司10个岗位 >
查看6道真题和解析