列表相关属性

　　列表相关属性有如下几个。
　　➢　list-style：这是一个复合属性，使用该属性可以同时指定list-style-image、list-style-position、list-style-type三个属性。
　　➢　list-style-image：该属性用于指定作为列表项标记的图片。
　　➢　list-style-position：该属性用于指定列表项标记出现的位置。该属性支持outside（列表项标记放在列表元素之外）和inside（列表项标记放在列表元素之内）两个属性值。
　　➢　list-style-type：该属性用于指定列表项标记的样式。该属性支持如下属性值。
　　□　decimal：阿拉伯数字。默认值。
　　□　disc：实心圆。
　　□　circle：空心圆。
　　□　square：实心方块。
　　□　lower-roman：小写罗马数字。
　　□　upper-roman：大写罗马数字。
　　□　lower-alpha：小写英文字母。
　　□　upper-alpha：大写英文字母。
　　□　none：不使用项目符号。
　　□　cjk-ideographic：浅白的表意数字。
　　□　georgian：传统的乔治数字。
　　□　lower-greek：基本的希腊小写字母。
　　□　hebrew：传统的希伯莱数字。
　　□　hiragana：日文平假名字符。
　　□　hiragana-iroha：日文平假名序号。
　　□　katakana：日文片假名字符。
　　□　katakana-iroha：日文片假名序号。
　　□　lower-latin：小写拉丁字母。
　　□　upper-latin：大写拉丁字母。
　　需要指出的是，如果为每个元素同时指定了列表项标记图片（list-style-image）和列表项标记样式（list-style-type），此时list-style-image属性将会覆盖list-style-type属性。

例子
<!DOCTYPE html>  
<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 列表相关属性 </title>
    <style type="text/css">
        li {
            background-color: #aaa;
        }
    </style>
</head>  
<body>  
使用图片作为列表项标记
<ul style="list-style-image:url(fl.gif);">  
    <li>疯狂Java讲义</li>
    <li>轻量级Java EE企业应用实战</li>
    <li>疯狂Android讲义</li>
    <li>经典Java EE企业应用实战</li>
</ul>  
使用大写罗马字母作为列表项标记
<ol style="list-style-type:upper-roman;">  
    <li>疯狂Java讲义</li>
    <li>轻量级Java EE企业应用实战</li>
    <li>疯狂Android讲义</li>
    <li>经典Java EE企业应用实战</li>
</ol>  
使用表意数组作为列表项标记，并将列表标记放在列表元素内
<ol style="list-style-type:cjk-ideographic;  
    list-style-position:inside;">
    <li>疯狂Java讲义</li>
    <li>轻量级Java EE企业应用实战</li>
    <li>疯狂Android讲义</li>
    <li>经典Java EE企业应用实战</li>
</ol>  
</body>  
</html>

display:list-item列表

　　除了直接使用<ul.../>、<ol.../>和<li.../>等元素来创建列表之外，使用display:list-item还可以把普通元素（例如<div.../>）显示为列表，此时同样可应用列表相关的CSS属性。

例子
<!DOCTYPE html>  
<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 列表相关属性 </title>
    <style type="text/css">
        div>div{
            background-color: #aaa;
            display:list-item;
            list-style-image:url(fl.gif);
            list-style-position:inside;
        }
    </style>
</head>  
<body>  
使用图片作为列表项标记
<div>  
    <div>疯狂Java讲义</div>
    <div>轻量级Java EE企业应用实战</div>
    <div>疯狂Android讲义</div>
    <div>经典Java EE企业应用实战</div>
</div>  
</body>  
</html>

注：本博客内容节选自李刚编著的疯狂HTML 5/CSS 3/JavaScript讲义 ，详细内容请参阅书籍。