8.（初级）web字体之：装饰列表

一、无装饰列表符号

list-style:none;

二、装饰列表<ul>、<ol>

list-style-type:disc（实心圆）/circle（空心圆）/square（实心方形）;

三、装饰列表<ol>

list-style-type:

decimal（1. 2. ...）

decimal-leading-zero（01. 02. ...）

upper-alpha（A. B. ...）

lower-alpha（a. b. ...）

upper-roman（I. II. ...）

lower-roman（i. ii. ...）;

四、设置装饰列表符号位置

list-style-position:outside（默认）/inside

 

                                                             


list-style-position:outside                                                                            list-style-position:inside

五、设置装饰列表符号颜色
    1、<ul>设置符号颜色：

ul li{

   width: 200px;

   list-style-type: none;

   list-style-position:outside ;

}

ul li:before{

   content:counter(item,disc) ' ';

   color: red;

}

2、<ol>设置符号颜色：
ol li{

    width: 200px;

    list-style-type: none;

    list-style-position:outside ;

    counter-increment:item ;

}

ol li:before{

    content:counter(item) '. ';

    color: red;

}

！效果为list-style-position:inside，就算设置list-style-position:outside也无法改变

六、设置装饰列表符号图形

list-style-image:url(xxx.xxx);

七、装饰列表简写

list-style:list-style-type list-style-image list-style-position;

例如：

list-style:circle url(img/bullet.gif) inside;