一、无序列表
无序列表有ul组成，其中每个列表项由li表示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>列表</title>
</head>
<body>
<ul>
<li>这是无序列表1</li>
<li>这是无序列表2</li>
<li>这是无序列表3</li>
</ul>
</body>
</html>运行结果为：
若想把前面的实心圆点去掉，只需要在ul里面加上样式style="list-style-type: none;"，具体如下：
把上面ul改成下面这样，在里面加上style
<ul style="list-style-type: none;">
<li>这是无序列表1</li>
<li>这是无序列表2</li>
<li>这是无序列表3</li>
</ul>此时的运行结果为：
此时我们可以看到，前面的实心圆点已经没了。
二、有序列表
有序列表有ol构成，列表项由li表示。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>列表</title>
</head>
<body>
<ol>
<li>这是有序列表1</li>
<li>这是有序列表2</li>
<li>这是有序列表3</li>
</ol>
</body>
</html>
运行结果为：
这时我们可以看见，列表项前由1、2、3数字有序排列下来。如果我们想要去掉前面的数字，按照无序列表的方法，在ol里添加样式style="list-style-type: none;"即可。
<ol style="list-style-type: none;">。
三、自定义列表
自定义列表由dl定义，列表项由dt表示，列表项的描述由dd定义。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>列表</title>
</head>
<body>
<dl>
<dt>这是列表项</dt>
<dd>这是列表描述项</dd>
</dl>
</body>
</html>运行结果为：
由此我们可以看出，列表描述项是对列表项的一个描述，所以有位置递进的关系。
自定义列表也可以结合无序列表和有序列表来嵌套实现出我们想要达到的效果，例如课程表就可以用自定义列表来实现。
2143
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
