HTML + CSS 连载 | 27 - HTML 列表（下）一、无序列表 ul ul(unordered list)
一、无序列表 ul
ul(unordered list) 为无序列表，直接子元素只能是 li，li 表示列表中的每一项。
创建一个 HTML 页面，使用无序列表来展示数据，具体 HTML 代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>SpaceX rockets</h1>
<ul>
<li>Falcon 9</li>
<li>Falcon Heavy</li>
<li>Startship</li>
<li>Dragon</li>
</ul>
</body>
</html>
在浏览器中打开 HTML 页面，效果如下：
可以看到无序列表也自带了一些样式，包括内外边距以及左边的小圆点等，我们也可以对它们进行样式的重置，添加如下 CSS 代码：
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
刷新页面，效果如下：
可以看到具体的 item 的内外边距小圆点等样式已经被清除了。
当然我们也可以将 body、h1 等元素的内外边距全部重置，具体 CSS 代码如下：
body, h1, p, ul {
margin: 0;
padding: 0;
list-style-type: none;
}
刷新页面，效果如下：
可以看到 body 和 h 元素的内外边距已被清除。
二、定义列表 dl-dt-dd
dl(definition list) 为定义列表，直接子元素只能是 dt、dd，dt(definition term) 表示列表中每一项的项目名；dd(definition description) 表示列表中每一项的具体描述，是对 dt 的描述、解释和补充。
一个 dt 后面可以紧跟一个或者多个 dd。
创建一个 HTML 页面，使用定义列表来展示数据，具体 HTML 代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Tesla Motors</h1>
<dl>
<dt>2003-2007</dt>
<dd>Roadster</dd>
<dt>2008-2010</dt>
<dd>Model S</dd>
<dt>2011-2016</dt>
<dd>Model X</dd>
<dd>Model 3</dd>
<dt>2017-Now</dt>
<dd>Semi</dd>
<dd>Model Y</dd>
<dd>Cybertruck</dd>
<dd>Roadster 2</dd>
</dl>
</body>
</html>
在浏览器中打开 HTML 页面，效果如下：
dl\dt\dd 也自带了一些样式，可以对它们进行样式的清除，具体 CSS 代码如下：
dl, dt, dd {
margin: 0;
padding: 0;
}
刷新页面，效果如下：
可以看到内外边距等样式已经被清除。
在之后的开发中，reset.css CSS 样式重置文件 reset.css 中也要包含 ol ul li dl dt dd 内外边距等样式的重置。
三、列表案例-今日头条
在学习了上述内容中的有序列表 ol li、无序列表 ul li 以及定义列表 dl dd dt 之后，我们可以尝试使用列表来实现今日头条上的新闻列表，如下图所示：
搭建 HTML 并重置样式
首先创建 HTML 页面，实现一条新闻的 HTML 结构，包含了左边的序号、新闻标题以及右边可能存在的图标，具体 HTML 结构代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li class="item">
<a href="">
<span class="no">10</span>
<div class="content">
神十七乘组进行航天技术试验亮点
</div>
</a>
<i class="icon"></i>
</li>
</ul>
</body>
</html>
在浏览器中打开 HTML 页面，效果如下：
可以看到 ul li a 自带的样式都显示出来，需要对这些自带的样式进行重置，添加如下 CSS 代码：
body, ul, li, a {
margin: 0;
padding: 0;
}
ul, li, ol {
list-style: none;
}
a {
text-decoration: none;
color: #333;
}
刷新页面，效果如下：
这就是样式重置的代码，按照我们之前的开发习惯，我们可以将重置的 CSS 代码拷贝到 css 目录下的 reset.css 文件中，并在 head 元素中使用 link 元素引入重置的 CSS 代码，如下所示引入：
<link rel="stylesheet" href="./css/reset.css">
一条新闻当中新闻的标题和序号应该是在一行显示，由于标题使用的是 div 元素，会独占一行，因此可以修改 div 的类型为行内元素，具体 CSS 代码如下：
ul > li > a {
display: inline-block;
}
ul > li .content {
display: inline;
}
刷新页面，效果如下：
可以看到序号和标题已经可以在同一行显示了，但是距离浏览器顶部太近了，可以设置一个 margin-top，具体 CSS 代码如下所示：
ul > li {
margin-top: 15px;
}
刷新页面，效果如下：
转载自:https://juejin.cn/post/7295237661617635380