网赚妈妈

 找回密码
 立即注册
搜索
查看: 362|回复: 0

[网赚是真的吗] CSS 列表——每天几个样式,轻松玩转CSS

[复制链接]
  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

    发表于 2018-9-10 20:16:00 | 显示全部楼层 |阅读模式

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

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

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

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

    <ul>

    <li>苹果</li>

    <li>香蕉</li>

    <li>菠萝</li>

    <li>草莓</li>

    </ul>

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

    z63kKLd1x2Ko32Zz.jpg

    给ul设置list-style属性:

    ul{ list-style: none;}

    在浏览器中查看:

    b2cyC2m5m5c2nll9.jpg

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

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

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

    ul{list-style-type: square;}

    在浏览器中显示:

    eFzO77FQjNJqzO29.jpg

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

    none 无标记

    disc 默认。实心圆

    circle 空心圆

    decimal 数字

    ......

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

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

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

    ctHC0UgdX3X3TXuA.jpg

    浏览器中显示:

    bJ9hSNHpR2bgJDgg.jpg

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

    InRSmasf6JJkmjeN.jpg

    在浏览器中显示:

    AHA0qXDu4x4jT06O.jpg

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

    ul{list-style: circle inside;}

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

    你必须非常努力,才能看起来毫不费力!

    关注小白前端,持续收到文章推送~

    回复

    使用道具 举报

    xml|2.xml|QQ3014497968|文章发布|签到|小黑屋|网赚论坛-致富项目网络赚钱平台 |网站地图

    GMT+8, 2019-10-17 21:03 , Processed in 0.288871 second(s), 16 queries , File On.

    Powered by Discuz! X3.3

    © 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表