【前端学习笔记】列表属性

最新推荐文章于 2024-09-15 23:59:26 发布

爷傲奈我何_m

最新推荐文章于 2024-09-15 23:59:26 发布

阅读量213

点赞数

分类专栏：我的前端之路

本文链接：https://blog.csdn.net/weixin_43841844/article/details/122277543

版权

CSS list-style-type list-style-image list-style-position 代码示例

关键词由CSDN通过智能技术生成

我的前端之路专栏收录该内容

9 篇文章 0 订阅

订阅专栏

个数	属性	描述	说明
1	list-style-type	定义列表符合样式	list-style-type:disc(实心圆) / circle (空心圆) / square (实心方块) / none (去掉符合)
2	list-style-image	将图片设置为列表符合样式	list-style-image: url();
3	list-style-position	设置列表项标记的放置位置	list-style-position:outside; 列表的外面默认值 list-style-position: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>
        ul{
            list-style-type: circle;
        }
        li{
            border: 1px solid red;
            list-style-position: inside;
        }
        .box{
            list-style: disc inside;
        }
    </style>
</head>
<body>
    <ul>
        <li class="li1">1111</li>
        <li class="li2">2222</li>
        <li class="li3">3333</li>
    </ul>

    <ul class="box">
        <li class="li1">4444</li>
        <li class="li2">5555</li>
        <li class="li3">6666</li>
    </ul>
</body>
</html>