列表
1.列表概述
网页中有三种列表：
1.无序列表（unordered list），直接子元素只能是li
2.有序列表（ordered list），直接子元素只能是li
3.定义列表（definition list），直接子元素只能是dt(definition term)、dd(definition description)；dt是列表中每一项的项目名，dd是对dt的描述、解释、补充，一个dt后面一般跟着1个或者多个dd
无序列表
使用ul标签创建一个无序列表
使用li在ul中创建一个个列表项
去掉列表前项目符号：
ul{
list-style: none;
}
如果需要设置项目符号，可以采用为li设置背景图片的方式来设置
type属性：
1）默认使用阿拉伯数字
2）a/A 采用小写或者大写字母作为序号
3）i/I 采用小写或者大写的罗马数字作为序号
列表之间可以互相嵌套
定义列表
/* dt表示被定义的内容 dd表示对定义内容的描述 */
<dl>
<dt>1</dt>
<dd>2</dd>
</dl>
注意dd与dl之间会有间距
2.列表中常见CSS属性
以下四个属性均可以继承，因此设置给ol、ul属性，默认也会应用到li元素
1.list-style-type
该属性用于设置li元素前面标记的样式
1.decimal 数字（与ol效果相同）
2.disc 实心圆
3.circle 空心圆
4.square 实心方块
5.lower-roman 小写罗马数字
6.upper-roman 大写罗马数字
7.lower-alpha 小写英文字母
8.upper-alpha 大写英文字母
9.none 什么也没有（同时配合padding:0 margin:0）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
ul li {
padding: 0;
margin: 0;
margin-top: 8px;
}
ul li span {
color: #fff;
background-color: #f00;
padding: 0 5px;
}
</style>
</head>s
<body>
<h2>列表</h2>
<ul>
<li><span>1</span> 1</li>
<li><span>2</span> 2</li>
<li><span>3</span> 3</li>
<li><span>4</span> 4</li>
<li><span>5</span> 5</li>
</ul>
</body>
</html>
2.list-style-image
设置某张图片为li元素前面的标记，会覆盖list-style-type的设置
ul {
list-style-image: url("./logo.png");
}
但是该种方式并不常用，如果想在前面加图片，推荐在li内使用i标签(实际上是i标签被滥用，因为i标签被误认作icon，经常用于图标的设置)
3.list-style-position
该属性用于设置li元素前面标记的位置，可以取outside、inside两个值（这两个值表示是否将标记放在内容之内，比如outside表示放在内容之外，那么标记将被放在外边距内，inside表示放在内容之内，那么标记将放在外边距右侧，即li整体会向后移动）
4.list-style
该属性为上述三个属性的缩写属性
通常list-style设置为none，去掉前面的默认标记
浙公网安备 33010602011771号