列表属性

1 list-style-type 定义列表符合样式 disc(实心圆)、circle(空心圆)、square(实心方块)、none(去掉符号)
2 list-style-image 将图片设置为列表符合样式　 list-style-image：url()
3 list-style-position 设置列表项标记的放置位置 outside:列表的外面（默认值），inside：列表的里面
4 list-style 简写 list-style：none 去除列表符号

 

 

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .ul1{
            list-style-type: square;          
        }
        .ul2{
            list-style-image: url(imgs/1.png);
        }
        .ul3{
            list-style-image: url(imgs/2.png);
        }
        .ul4{
            list-style-image: url(imgs/3.png);
        }
    </style>

</head>
<body>
    <ul class="ul1">
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>
    <ul>
        <li class="ul2">111</li>
        <li class="ul3">222</li>
        <li class="ul4">333</li>
    </ul>
</body>
</html>

执行效果：

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .ul1{
            list-style-type: square;          
        }
        .ul2{
            list-style-image: url(imgs/1.png);
        }
        .ul3{
            list-style-image: url(imgs/2.png);
        }
        .ul4{
            list-style-image: url(imgs/3.png);
        }
        li{
            border: 2px solid red;
            list-style-position: inside;
        }
    </style>

</head>
<body>
    <ul class="ul1">
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>
    <ul>
        <li class="ul2">111</li>
        <li class="ul3">222</li>
        <li class="ul4">333</li>
    </ul>
</body>
</html>

效果：

 

 

可以看到，list-style-position可以将我们的图片、实心方块等放到列表里面。

posted @ 2022-04-12 13:10  Target_L  阅读(57)  评论(0)    收藏  举报