无序和有序列表

最新推荐文章于 2025-04-25 17:23:22 发布

Farer1

最新推荐文章于 2025-04-25 17:23:22 发布

阅读量136

点赞数

文章标签： css3 css html

本文链接：https://blog.youkuaiyun.com/Farer1/article/details/121762231

版权

list

设置HTML中有序或无序列表的样式

list-style-type：设置列表的标记

<style>
        /* 正方形：square
        空心圆：circle
        十进制：decimal
        无：none
         */
        ul {
            list-style-type: square;
        }
    </style>
<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

list-style-position：设置样式图标的位置

outside：把符号设置在里边
inside：把符号设置到外边

ul {
            list-style-type: square;
            list-style-position: inside;
        }

        ul li {
            background-color: aqua;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

效果：