CSS—列表修饰
2014-11-19 本文已影响276人
Miss____Du
-
list-style(
list-style:none表示无修饰） -
list-style-type
-
ul无序列表修饰
ul{
list-style-type: disc; //实心圆
list-style-type: circle; //空心圆
list-style-type: square; //实心方形
} -
ol有序列表修饰
ol {list-style-type: decimal; //阿拉伯数字 list-style-type: lower-roman;//小写罗马 list-style-type: upper-roman;//大写罗马 list-style-type: lower-alpha;//小写字母 list-style-type: upper-alpha;//大写字母 list-style-type: cjk-ideographic;//数字大写 //其实还有一些不常用的 } -
dl定义列表修饰
没有专门的修饰方法。默认情况下：
html代码
-
实际效果
—注意：对于有序列表，定义样式时，需要记住各种样式的名称比较麻烦，我们可以
<ol type="a" > <li>3</li> <li>2</li> </ol> //但是，这个的优先级竟然小于在<head></head>里写样式，有些不可思议，但是测试过，确实是。
-
list-style-position
这个是定义列表项的位置。
ul{
list-style-position:outside;//默认
list-style-position:inside;//向右缩进
}
效果对比
-
list-style-image
ul{
list-style-image: url(huahua.png);
}
效果
注意：以上描述这么多修饰的办法，但是在实际中，我们用的最多的方法是为<li>设置背景
当然，既然不适用list-style就得声明一下，要不然，就使用默认的了
ul{list-style:none}
接下来
ol>li{
background: #FFFFA0 url(huahua.png) no-repeat 0 center;
padding-left: 20px;
}
效果
关于背景的设置，尽量严格按照我的顺序。背景颜色与图片一定要同时写，这样才可以共同作用，否则会被后者取代。
欢迎补充与指正☺
