欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!

 小编知道童靴们大周一脑子都是蒙圈的,特意晚上再来发文章。晚上无聊也没有约会,最适合学点东西了。

开个玩笑活跃一下气氛,下面进入正题。童靴们还记得之前文章中讲到的无序列表和有序列表么,今天我们要讲的样式就是有关列表的。

list-style 简写属性在一个声明中设置所有的列表属性。

列表样式其实就是给列表前面的标记所定义的属性。我们来看下面的无序列表:

<ul>

<li>苹果</li>

<li>香蕉</li>

<li>菠萝</li>

<li>草莓</li>

</ul>

我们在浏览器中所看的的列表,每一项列表前面都是有一个黑点作为标记的(有序列表的标记是数字)。

CSS 列表——每天几个样式,轻松玩转CSS

给ul设置list-style属性:

ul{ list-style: none;}

在浏览器中查看:

CSS 列表——每天几个样式,轻松玩转CSS

在实际的开发过程中,大部分都不需要默认的标记,所以上面的样式在你开发的过程中用到的最多。

list-style-type 设置列表项标记的类型

比如设置列表项的标记形状为实心方块:

ul{list-style-type: square;}

在浏览器中显示:

CSS 列表——每天几个样式,轻松玩转CSS

当然我们还可以设置很多类型:

none 无标记

disc 默认。实心圆

circle 空心圆

decimal 数字

......

在实际开发none用到的多,其他的都作为了解。

list-style-position 列表项标记的定位

list-style-position就是为定义标记所在的位置。

CSS 列表——每天几个样式,轻松玩转CSS

浏览器中显示:

CSS 列表——每天几个样式,轻松玩转CSS

list-style-image 使用图片作为列表项的标记

CSS 列表——每天几个样式,轻松玩转CSS

在浏览器中显示:

CSS 列表——每天几个样式,轻松玩转CSS

关于列表的样式就这么多了,一般我们都用第一个简写的形式,

ul{list-style: circle inside;}

把你需要设置的属性值写在一起,用空格隔开就行。

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/rumen/r50793.shtml