首页前端开发CSSCSS 列表——每天几个样式,轻松玩转CSS

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

时间2024-05-23 18:14:03发布访客分类CSS浏览11
导读:小编知道童靴们大周一脑子都是蒙圈的,特意晚上再来发文章。晚上无聊也没有约会,最适合学点东西了。 开个玩笑活跃一下气氛,下面进入正题。童靴们还记得之前文章中讲到的无序列表和有序列表么,今天我们要讲的样式就是有关列表的。 list-style...

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

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

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

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

  • 苹果
  • 香蕉
  • 菠萝
  • 草莓

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

给ul设置list-style属性:

ul{ list-style: none; }

在浏览器中查看:

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

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

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

ul{ list-style-type: square; }

在浏览器中显示:

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

none 无标记

disc 默认。实心圆

circle 空心圆

decimal 数字

......

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

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

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

浏览器中显示:

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

在浏览器中显示:

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

ul{ list-style: circle inside; }

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

声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!


若转载请注明出处: CSS 列表——每天几个样式,轻松玩转CSS
本文地址: https://pptw.com/jishu/666480.html
css常见问题 游戏行业为什么选择日本服务器

游客 回复需填写必要信息