列表属性
CSS列表属性用于设置HTML列表元素的样式，包括无序列表和有序列表。
CSS列表的所有属性：
- list-style：设置列表项的复合属性，包含项目符和定位
- list-style-image：设置列表项的图片，值为图片url。
- list-style-position：设置列表项的定位，包含值inside和outside。
- list-style-type：设置列表项样式，可以是项目符号（无序列表）和顺序符号（有序列表）。
无序列表
无序列表的列表项目符默认为实心圆点，定位为inside。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
<style>
ul{
list-style: url('img/log.png') inside;
/* 项目符号设置为图片格式 默认值为disc*/
}
</style>
</head>
<body>
<ul>
<li>HTML：超文本标记语言</li>
<li>CSS：层叠样式表</li>
<li>Js：前端脚本语言</li>
</ul>
</body>
</html>
有序列表
有序列表的列表项目符为阿拉伯数字，从1开始的整数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
<style>
ol{
list-style: lower-alpha
/* 项目符号设置为小写字母 序号从a开始*/
}
</style>
</head>
<body>
<ol>
<li>HTML：超文本标记语言</li>
<li>CSS：层叠样式表</li>
<li>Js：前端脚本语言</li>
</ol>
</body>
</html>
如果不需要项目符号可以设置值为none，在无序列表中这非常有用。
网友评论