CSS—列表修饰

---

• 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代码

实际效果

—注意：对于有序列表，定义样式时，需要记住各种样式的名称比较麻烦，我们可以

1. 3
2. 2

//但是，这个的优先级竟然小于在里写样式，有些不可思议，但是测试过，确实是。

• list-style-position
  这个是定义列表项的位置。
  ul{
  list-style-position:outside;//默认
  list-style-position:inside;//向右缩进
  }
  
  

  效果对比
• list-style-image
  ul{
  list-style-image: url(huahua.png);
  }
  
  

  效果

注意：以上描述这么多修饰的办法，但是在实际中，我们用的最多的方法是为

设置背景

当然，既然不适用list-style就得声明一下，要不然，就使用默认的了
ul{list-style:none}
接下来
ol>li{
background: #FFFFA0 url(huahua.png) no-repeat 0 center;
padding-left: 20px;
}

效果

关于背景的设置，尽量严格按照我的顺序。背景颜色与图片一定要同时写，这样才可以共同作用，否则会被后者取代。

欢迎补充与指正☺