html圆点列表符号_css基础篇09--列表样式

目标

• 设置自带的符号样式
• 用图片设置符号样式
• 取消符号

列表在网页里使用的频率非常高，对于新闻类的网站来说，就是百分百的使用。列表的前头一般都是阿拉伯数字，作为列表的顺序。

当然，列表项的前缀是不止阿拉伯数字，还有小圆点'●'、正方形'■'等等，这些都是自带的样式。如果你还不满意，还可以自定义前缀。

各种类型的列表符号

设置自带的符号样式

无论是有序列表，还是无序列表，都统一使用list-style-type属性来定义列表项符号。

语法：list-style-type:属性值;

有序列表自带的符号，都是跟顺序有关。

属性值

更换了前缀的有序列表如下

更换效果

无序列表自带的符号，都是小图标，跟顺序没关系

属性值

更换了前缀的无序列表如下

更换效果

列表项的图片符号

虽然列表项有自带样式，但很多时候都不是我们想要的效果，就可以使用自定义符号。通过list-style-image:url(图像地址)来设置。

语法：list-style-image:url(图像地址);

自定义列表项符号，实际上就是列表项符号改为一张图片

注意图片的尺寸要把握好，是无法修改大小

代码设置如下

设置图片

自定义前缀的列表效果如下

自定义列表符号

取消列表项的符号

list-style-type属性，实际上更多的使用在取消符号上，几乎能用到都是在这一点上

几乎所有的前端框架，在重置样式的时候，都是使用这个来取消列表项的默认符号

语法：list-style-type:none;

新闻类网站，都会有部分列表项是没有前缀符号

空白列表符号

总结

总结