一、无序列表 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;
}
刷新页面,效果如下: