HTML列表分为两类,无序列表和有序列表;无序列表通过ul元素定义,有序列表通过ol元素定义。在CSS中列表相关属性的主要功效如下:
通过设置<ul>
标签的list-style-type
属性即可设置标记的样式。
具体样式有如下几种:
list-style-type | 标记样式描述 |
---|---|
disc | 实心圆圈(默认) |
circle | 空心圆圈 |
square | 小方块 |
none | 不进行标记 |
运行一次下面的这个例子就全懂啦 ~
<ul style="list-style-type:disc"> <li>专否社区</li> <li>专否沙盒</li> </ul> <ul style="list-style-type:circle"> <li>专否社区</li> <li>专否沙盒</li> </ul> <ul style="list-style-type:square"> <li>专否社区</li> <li>专否沙盒</li> </ul> <ul style="list-style-type:none"> <li>专否社区</li> <li>专否沙盒</li> </ul>
通过设置<ul>
标签的type
属性即可设置标记的样式。
常用样式有如下几种:
list-style-type | 标记样式描述 |
---|---|
decimal | 用阿拉伯数字表示顺序(默认) |
upper-alpha | 使用大写字母来表示顺序 |
lower-alpha | 使用小写字母来表示顺序 |
upper-roman | 使用大写的罗马数字来排序 |
lower-roman | 使用小写的罗马数字来排序 |
运行一次下面的这个例子就全懂啦 ~
<ol style="list-style-type:decimal"> <li>天机棒 天机老人</li> <li>子母龙凤环 上官金虹</li> <li>小李飞刀 李寻欢</li> </ol> <ol style="list-style-type:upper-alpha"> <li>天机棒 天机老人</li> <li>子母龙凤环 上官金虹</li> <li>小李飞刀 李寻欢</li> </ol> <ol style="list-style-type:lower-alpha"> <li>天机棒 天机老人</li> <li>子母龙凤环 上官金虹</li> <li>小李飞刀 李寻欢</li> </ol> <ol style="list-style-type:upper-roman"> <li>天机棒 天机老人</li> <li>子母龙凤环 上官金虹</li> <li>小李飞刀 李寻欢</li> </ol> <ol style="list-style-type:lower-roman"> <li>天机棒 天机老人</li> <li>子母龙凤环 上官金虹</li> <li>小李飞刀 李寻欢</li> </ol>
通过CSS中的list-style-image
属性即可自定义某张图片作为列表的标记物。如下:
ul { list-style-image: url('https://logo.zhuanfou.com/program-logo-60.png'); }
CSS中的list-style-position
属性可定义标记物的位置,如果取值outside标记物则在列表内容之外,若取值inside标记物则在列表内容之内,但缩进依然存在。
"list-style-position: outside;"的效果如下:
"list-style-position: inside;"的效果如下:
如下例所示:
ul.position_outside { list-style-position: outside; } ul.position_inside { list-style-position: inside; }
通过CSS中的list-style-type:none
这种属性与取值,可以删除浏览器关于列表样式的默认设置;为了显得更纯粹,最好把列表元素的内边距padding
和外边距margin
都设置成零。如下例子所示:
ul.demo { list-style-type: none; margin: 0; padding: 0; }
洒家在此,洒家认为要分别声明list-style-type
、list-style-position
、list-style-image
有点麻烦,洒家是个粗人,记这么多的属性名有点费事,所以洒家决定只用list-style
来通吃上述三种属性。
list-style-type
(如果没有设置list-style-image或者list-style-image引入的图片加载失败,则会显示该属性设置的标记物)list-style-position
list-style-image
(自定义图片作为列表标记物)如果上述某个属性是可以缺省的,缺省则会取浏览器默认值。另外,上述三者属性的顺序如何是无所谓的,随便搞吧!
空谈误学,实干兴邦,看例子:
ol { background: Tomato; padding: 20px; } ul { background: rgba(70, 172, 182, 0.2); padding: 20px; } ol li { background: #f8ebe7; padding: 5px; margin-left: 35px; } ul li { color: White; background: #46acb6; margin: 5px; }