HTML + CSS 连载 | 27 - HTML 列表（下）

一、无序列表 ul

ul(unordered list) 为无序列表，直接子元素只能是 li，li 表示列表中的每一项。

创建一个 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>
  <h1>SpaceX rockets</h1>
  <ul>
    <li>Falcon 9</li>
    <li>Falcon Heavy</li>
    <li>Startship</li>
    <li>Dragon</li>
  </ul>
</body>
</html>

在浏览器中打开 HTML 页面，效果如下：

可以看到无序列表也自带了一些样式，包括内外边距以及左边的小圆点等，我们也可以对它们进行样式的重置，添加如下 CSS 代码：

CSS 复制代码

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

刷新页面，效果如下：

可以看到具体的 item 的内外边距小圆点等样式已经被清除了。

当然我们也可以将 body、h1 等元素的内外边距全部重置，具体 CSS 代码如下：

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 代码如下：

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 代码如下：

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 结构代码如下：

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 代码：

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 代码，如下所示引入：

HTML 复制代码

<link rel="stylesheet" href="./css/reset.css">

一条新闻当中新闻的标题和序号应该是在一行显示，由于标题使用的是 div 元素，会独占一行，因此可以修改 div 的类型为行内元素，具体 CSS 代码如下：

CSS 复制代码

ul > li > a {
  display: inline-block;
}

ul > li .content {
  display: inline;
}

刷新页面，效果如下：

可以看到序号和标题已经可以在同一行显示了，但是距离浏览器顶部太近了，可以设置一个 margin-top，具体 CSS 代码如下所示：

CSS 复制代码

ul > li {
  margin-top: 15px;
}

刷新页面，效果如下：