目录
一、list-style-type列表序号的样式
| 属性的值 | 说明 |
|---|---|
| none | 无标记符号 |
| disc | 实心圆，默认类型 |
| circle | 空心圆 |
| square | 实心正方形 |
| decimal | 数字 |
序号的样式远不止这些，如decimal-leading-zero，lower-roman，upper-roman，lower-alpha等；
语法示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
</style>
</head>
<body>
<ul>
<li style="list-style-type: none">1</li>
<li style="list-style-type: disc">2</li>
<li style="list-style-type: circle">3</li>
<li style="list-style-type: square">4</li>
<li style="list-style-type: decimal">5</li>
</ul>
</body>
</html>
运行结果：
二、list-style-position列表序号位置
| 属性的值 | 说明 |
|---|---|
| inside | 将序号放置在文本以内 |
| outside | 默认值。将序号放置于文本的左侧 |
语法示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
</style>
</head>
<body>
<ul>
<li style="list-style-position: inside">1</li>
<li style="list-style-position: outside">2</li>
</ul>
</body>
</html>
运行结果
三、list-style-image列表序号图片
| 属性的值 | 说明 |
|---|---|
| url | 图像的路径 |
| none | 无图片显示 |
语法示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
li{
list-style-image:url("图片/****.png");
}
</style>
</head>
<body>
<ul>
<li>a</li>
</ul>
</body>
</html>
运行结果：
注:用来 list-style-image 则 list-style-type 属性无效
1449
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
