CSS 列表样式详解

CSS列表用于前端的列表排列。

CSS列表属性作用如下：

• 设置不同的列表项标记为有序列表
• 设置不同的列表项标记为无序列表
• 设置列表项标记为图像

列表

在HTML中，有两种类型的列表：

• 无序列表 - 列表项标记用特殊图形（如小黑点、小方框等）
• 有序列表 - 列表项的标记有数字或字母

list-style-type：设置列表标志类型。

1：无序列表实例

ul.a {list-style-type:circle;}ul.b {list-style-type:square;}

  <p>无序列表实例:</p>    <ul class="a">     <li>射雕英雄传</li>     <li>笑傲江湖</li>     <li>倚天屠龙记</li>    </ul>        <ul class="b">     <li>鹿鼎记</li>     <li>天龙八部</li>     <li>神雕侠侣</li>    </ul>

效果：

      

2：有序列表实例

ol.c {list-style-type:decimal-leading-zero;}ol.d {list-style-type:lower-alpha;}

 <p>有序列表实例:</p>   <ol class="c">       <li>射雕英雄传</li>       <li>笑傲江湖</li>       <li>倚天屠龙记</li>   </ol>        <ol class="d">     <li>鹿鼎记</li>     <li>天龙八部</li>     <li>神雕侠侣</li>  </ol>

效果：

    

还可以设置为图片，通过  list-style-image

ul.cc{    list-style-image: url("http://www.w3school.com.cn/i/eg_arrow.gif")    }

<ul class="cc">    <li>三国演义</li>    <li>红楼梦</li></ul>

效果：

      

 

在前端开发中，就可以通过列表 以上的知识来完成网站中相应的列表模块了。