WEB前端

CSS 列表样式,轻松玩转CSS

位置:首页 > WEB前端 > css教程,2018-08-10 12:02
童靴们还记得之前文章中讲到的css无序列表和有序列表么,今天我们要讲的样式就是有关列表的。list-style 简写属性在一个声明中设置所有的列表属性。列表样式

童靴们还记得之前文章中讲到的css无序列表和有序列表么,今天我们要讲的样式就是有关列表的。

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

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

<ul>

<li>苹果</li>

<li>香蕉</li>

<li>菠萝</li>

<li>草莓</li>

</ul>

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

CSS 列表(图0)

给ul设置list-style属性:

ul{ list-style: none;}

在浏览器中查看:

CSS 列表(图1)

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

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

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

ul{list-style-type: square;}

在浏览器中显示:

CSS 列表(图2)

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

none 无标记

disc 默认。实心圆

circle 空心圆

decimal 数字

......

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

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

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

CSS 列表(图3)

浏览器中显示:

CSS 列表(图4)

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

CSS 列表(图5)

在浏览器中显示:

CSS 列表(图6)

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

ul{list-style: circle inside;}

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

TAGS:CSS 列表

猜你喜欢

NewHot