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>

list-style-type的样式和颜色_第1张图片
2、 list-style-image: url("");

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

list-style-type的样式和颜色_第2张图片

你可能感兴趣的:(css)