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>

图片说明