四时宝库

程序员的知识宝库

css基础篇09--列表样式(css设置列表符号)

目标

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


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

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


设置自带的符号样式

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


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


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

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


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


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


列表项的图片符号

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


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


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


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


代码设置如下


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


取消列表项的符号

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

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


语法:list-style-type:none;


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


总结

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言
    友情链接