HTML/用CSS控制列表格式

最新推荐文章于 2023-12-18 09:41:52 发布

GAG_Katojun

最新推荐文章于 2023-12-18 09:41:52 发布

阅读量256

点赞数 1

文章标签： html css 列表

本文链接：https://blog.csdn.net/GAG2723/article/details/103712559

版权

无聊耍耍

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #one{
            width:200px;
            list-style-type: square;
            border: 1px solid red;
        }
        #two{
            width: 200px;
            list-style-type: disc;
            border: 1px solid blue;
        }
    </style>
</head>
<body>
<h1>这是无序列表</h1>
<ul id="one">
    <li>c</li>
    <li>d</li>
    <li>a</li>
</ul>
<h1>这是有序列表</h1>
<ol id="two">
    <li>AAAAAA</li>
    <li>BBBBBB</li>
    <li>CCCCCC</li>
    <li>DDDDDD</li>
</ol>
</body>
</html>

其中list-style-type属性表示列表的项目符号的类型，其值有：
none:没有符号
disc: 实心圆（默认）。
circle: 空心圆。

square: 实心方块。

decimal：数字。

lower-roman：小写罗马数字。

upper-roman：大写罗马数字。

lower-alpha：小写英文字母。

upper-alpha：大写英文字母。
也可写作 style=“list-style-type:square”。
list-style-image属性用来定义使用图片代替项目符号,例如：
li{list-style-image:url(images/bg03.gif);}
list-style-position属性，是用来定义项目符号在列表中显示位置的属性，属性值有：
inside：项目符号放置在文本以内。
outside：项目符号放置在文本以外。

当然