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

实际效果

—注意:对于有序列表,定义样式时,需要记住各种样式的名称比较麻烦,我们可以
<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;
}


效果

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

欢迎补充与指正☺
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1 字体属性:(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) ...
    厝弧阅读 328评论 0 0
  • 一,HTML有N多标签,根据显示的类型,主要可以分为3大类 1,块级标签 独占一行的标签 能随时设置宽度和高度(比...
    张不二01阅读 745评论 0 4
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 1,089评论 0 1
  • 都说距离产生美,这话挺对的。遇到一帅哥,天天见,看腻了,导致越看越丑。。。没想到都隔了这么久再看,我印象中肤白貌美...
    呆阿茶阅读 139评论 0 0
  • 情字心边牵着青 青春年少倍精神 神魂颠倒莫忘乱 乱套提防误自身 作者: 青松
    小启明星阅读 153评论 2 1