list-style-type的样式和颜色

list-style-type属性可以设置列表项标记的类型。
例如:disc、circle、square、decimal等。

  1. list-style-type:disc(项目符号:实心圆形 默认)

  2. list-style-type: square;(项目符号:实心正方形)

  3. list-style-type: circle(项目符号:空心圆)

  4. list-style-type: decimal(项目符号:阿拉伯数字)

  5. list-style-type: lower-alpha(项目符号:小写英文字母)

  6. list-style-type: upper-alpha(项目符号:大写英文字母)

  7. list-style-type: lower-roman(项目符号:小写罗马数字)

  8. list-style-type: upper-roman(项目符号:大写罗马数字)

除了上面的这些项目符号,我们还可以自定义项目符号
1、通过伪元素添加

 <style>
        li{
            list-style: none;
        }
        li::before{
            content: "★"; 
            color: red;
        }
    </style>
   <body>
    <ul>
        <li>苹果</li>
        <li>香蕉</li>
    </ul>
</body>

在这里插入图片描述
2、 list-style-image: url("");

    <style>
        ul{
            list-style-image: url("sqpurple.gif");
        }
    </style>
    <body>
    <ul>
        <li>苹果</li>
        <li>香蕉</li>
    </ul>
</body>

在这里插入图片描述

  • 9
    点赞
  • 31
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值