CSS list-style设置所有列表项属性
list-style属性
鄙人好像在之前的章节中有介绍过:如果要去掉无序列表左侧的小圆点,那么就可以将定义无序列表的ul元素的list-style属性设置为none即可,比如下面的这个简单的实例。实际上,list-style还可以设置其它的有关列表项标记的一些属性。
去掉小圆点的list-style实例,及在线编辑器
<ul class='lt1'>
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
</ul>
<style>
.lt1{list-style:none;}
</style>
list-style属性的语法
一般情况下,list-style可以接受三个属性值,如下:
list-style:list-style-type list-style-position list-style-image
属性值
属性值 | 描述 |
---|---|
list-style-type | 指定列表项标记的类型。 |
list-style-position | 指定列表项标记的位置。 |
list-style-image | 使用指定图像替换列表项标记。 |
none | 不设置指定列表项标记。 |
inherit | 从父元素继承list-style属性。 |
list-style属性实例代码,及在线编辑器
<ul class='lt2'>
<li>菠萝</li>
<li>芒果</li>
<li>砂糖橘</li>
</ul>
<ul class='lt3'>
<li>葡萄</li>
<li>青枣</li>
<li>枇杷</li>
</ul>
<style>
.lt2{list-style:square outside;}
.lt3{list-style:inside url("../../static/img/ul.jpg");}
</style>