共计 10818 个字符，预计需要花费 28 分钟才能阅读完成。
列表清单是我们日常生活的一部分。未办事项清单确认我们接下来要做什么，行车导航提供路线列表，食谱提供成分列表和说明列表。几乎所有的东西都有列表，这就很容易理解为什么它们在网上这么受欢迎。
若我们想在网站上创建列表，HTML 提供了三种类型的列表：无序列表、有序列表和描述列表。选择哪种列表——或者是否使用列表——归结于要显示的内容以及语义上最符合当前内容的标签选项。
除了 HTML 中提供了三种不同的列表，我们还可以在 CSS 中用多种方法实现这些列表。例如我们可以选择在列表中使用哪种列表项标记。这个标记可以是方形、圆形、数字、字母或者将它隐藏。另外，我们还可以设置列表是纵向展示或横向展示。所有这些选择在页面渲染中都扮演着重要的角色。
无序列表
无序列表就是一个内容相关但顺序无关紧要的列表。用 HTML 创建无序列表，使用无序列表块状元素 <ul>，无序列表中的每一项都单独使用列表项元素 <li> 标记。
默认情况下，大部分的浏览器都会为 <ul> 元素添加纵向的 margin 和左边的 padding，为 <li> 元素设置一个前置的圆点标记。这些标记被称为列表项标记，它可以用 CSS 修改。
<ul>
<li>Orange</li>
<li>Green</li>
<li>Blue</li>
</ul>
有序列表
有序列表元素 <ol> 与无序列表使用方式相同，列表项元素的创建也相同。它们的主要不同在于，对于有序列表来说，呈现列表项的顺序非常重要。
因为是有序的，所以列表项标记默认为数字，为非圆点。
<ol>
<li>Head north on N Halsted St</li>
<li>Turn right on W Diversey Pkwy</li>
<li>Turn left on N Orchard St</li>
</ol>
start 属性
start 属性定义列表项标记的数字从哪个值开始。默认情况下数字从 1 开始。但有可能列表需要从 30 或其他值开始。在 <ol> 元素上使用 start 属性就可以定义有序列表开始计数的值。
start 属性只接受整数值，即便有序列表可以使用不同类型的数字编号，例如罗马数字。
<ol start=”30″>
<li>Head north on N Halsted St</li>
<li>Turn right on W Diversey Pkwy</li>
<li>Turn left on N Orchard St</li>
</ol>
reversed 属性
当我们在 <ol> 元素上使用 reversed 属性，表示列表倒序显示。若一个有序列表有五个列表项 1 到 5, 将会按倒序 5 到 1 显示。
reversed 属性是一个布尔值（true 或者 false），除此之外它不接受任何其他值。false 为默认值；当值为 true 时，<ol> 元素的列表项将会按倒序显示。
<ol reversed>
<li>Head north on N Halsted St</li>
<li>Turn right on W Diversey Pkwy</li>
<li>Turn left on N Orchard St</li>
</ol>
value 属性
value 属性可以使用在有序列表的 <li> 元素上，用以修改列表的标记值。使用了 value 值及其以下的所有列表项的数字标记将会按照 value 值重新计数。
例如，我们在第二个列表项添加 value 值为 9，那么这个列表项标记的数字显示为 9，同时所有随后的列表项标记都会从 9 以后开始计数。
<ol>
<li>Head north on N Halsted St</li>
<li value=”9″>Turn right on W Diversey Pkwy</li>
<li>Turn left on N Orchard St</li>
</ol>
描述列表
线上还有一种描述列表（但它没有像无序列表和有序列表那么常见）。描述列表常用于列出多个术语和描述，例如术语表。
HTML 创建描述列表使用描述列表元素 <dl>。描述列表不再需要 <li> 元素标记列表项，而是用另外两个块状元素代替：列表项术语元素 <dt> 和描述元素 <dd>。
描述列表可能包含了多个一对一的术语和描述。除此之外，也可能是多个术语对应一个描述或者多个描述对应一个术语。一个术语可能有多种含义和解释。相对的，一个描述也可能适用于多个术语。
当我们添加描述时，需要注意 <dt> 元素需要定义在 <dd> 元素之前。定义的术语和描述需彼此对应；所以这些元素的顺序非常重要。
默认情况下，<dl> 元素与 <ul> 和 <ol> 元素一样，带有纵向外边距。此外，<dd> 元素也有一个默认的左外边距。
<dl>
<dt>study</dt>
<dd>The devotion of time and attention to acquiring knowledge on an academic subject, especially by means of books</dd>
<dt>design</dt>
<dd>A plan or drawing produced to show the look and function or workings of a building, garment, or other object before it is built or made</dd>
<dd>Purpose, planning, or intention that exists or is thought to exist behind an action, fact, or material object</dd>
<dt>business</dt>
<dt>work</dt>
<dd>A person’s regular occupation, profession, or trade</dd>
</dl>
列表嵌套
使列表极为强大的一个特性是它们嵌套的能力。每个列表都可以嵌套在另一个列表里；它们可以连续地嵌套。但这种无限嵌套的功能并不合适随意使用。列表还是需要应用在最适合它们语义的地方。
嵌套列表的一个目的是便于识别列表的起始位置以及每个列表和列表项。拿无序列表和有序列表来说，嵌套列表时，<ul> 元素和 <ol> 元素的直接子元素是 <li> 元素。再重复一遍，<ul> 元素和 <ol> 元素的直接子元素只能是 <li> 元素。
也就是说，在 <li> 元素内可以添加任何标准的元素标签，包括 <ul> 或 <ol> 元素。
若要在列表项中嵌套一个列表，需要新建列表。嵌套列表完成后，闭合包裹的列表项并继续在原列表项中操作。
<ol>
<li>Walk the dog</li>
<li>Fold laundry</li>
<li>
Go to the grocery and buy:
<ul>
<li>Milk</li>
<li>Bread</li>
<li>Cheese</li>
</ul>
</li>
<li>Mow the lawn</li>
<li>Make dinner</li>
</ol>
因为嵌套列表有点复杂——如果写错样式会错乱—— 我们来快速回顾一下。<ul> 和 <ol> 元素只能包含 <li> 元素。<li> 元素可以包含任何普通的元素；但 <li> 元素本身只能是 <ul> 或 <ol> 元素的子元素。
值得注意的是，嵌套列表的项标记会根据嵌套的深度改变。在上面的例子中，无序列表在有序列表内以空心圆而非实心圆作为项标记。这是因为无序列表是有序列表的一级嵌套列表。
幸运的是，我们可以控制任何级别的列表项标记，下面我们来看看。
列表样式
无序和有序列表都有默认的项标记，无序列表通常是实心圆，而有序列表是数字。项标记的样式和定位都可以通过 CSS 来调整。
list-style-type 属性
list-style-type 属性用于设置项标记的内容。从正方形和十进制数一直到亚美尼亚编号都属可用值范围。这个样式可以写在 <ul>、<ol> 或者 <li> 元素上
任何 list-style-type 属性值都可以添加到无序或者有序列表中。这一功能，可以在无序列表中使用数列项标记，在有序列表使用非数字项标记。
HTML
<ul>
<li>Orange</li>
<li>Green</li>
<li>Blue</li>
</ul>
CSS
ul {
list-style-type: square;
}
list-style-type 属性值
前面提到了 list-style-type 属性有一些不同的值。这里罗列出了这些值及其意义。
list-style-type 值
备注
none
无标记
disc
实心圆
circle
空心圆
square
实心正方形
decimal
十进制数
decimal-leading-zero
初始值为 0 的十进制数
lower-roman
小写罗马数字
upper-roman
大写罗马数字
lower-greek
小写古希腊语
lower-alpha / lower-latin
小写 ASCII 字母
upper-alpha / upper-latin
大写 ASCII 字母
armenian
亚美尼亚语
georgian
传统格鲁吉亚编号
图片项标记
我们总会碰到 list-style-type 属性值不够使用的时候，这时候我们就希望能够自定义项标记。达到此目的最常用方法是为 <li> 元素设置背景图。
移除默认的 list-style-type 属性值，然后在 <li> 元素设置背景图和内边距。
详细一点来说，就是将 list-style-type 属性值设为 none 就可以移除项标记。使用 background 属性定义一张背景图，如有必要还可以为其设置定位和重复属性。接下来设置一个左内边距为背景图留出足够空间。代码如下所示：
HTML
<ul>
<li>Orange</li>
<li>Green</li>
<li>Blue</li>
</ul>
CSS
li {
background: url(“arrow.png”) 0 50% no-repeat;
list-style-type: none;
padding-left: 12px;
}
list-style-position 属性
默认情况下项标记位于 <li> 元素左侧，此时 list-style-position 属性的值为 outside，表示元素所有内容都显示在项标记右侧。使用 list-style-position 属性可以将默认值 outside 改为 inside 或 inherit。
属性值 outside 表示项标记位于 <li> 元素左侧，并且不允许元素内容在项标记下环绕显示。属性值 inside（非常少见）使项标记显示在 <li> 元素第一行，并且允许其他内容在项标记下环绕显示。
HTML
<ul>
<li>Cupcakes…</li>
<li>Sprinkles…</li>
</ul>
CSS
ul {
list-style-position: inside;
}
简写列表样式属性
我们之前介绍的列表样式属性 list-style-type 和 list-style-position 可以简写成一个属性值 list-style。使用 list-style 属性可以一次性设置一个或多个列表样式属性。简写值的顺序为先设置 list-style-type，后设置 list-style-position
ul {
list-style: circle inside;
}
ol {
list-style: lower-roman;
}
横向列表
偶尔我们也想要展示横向列表。也许我们想将列表分成多列，来构建一个导航列表，或者将一些列表项放在一行中。基于内容和所需布局，有几种不同的方法可以将列表设置为单行显示，例如将 <li> 元素的 display 属性设置为 inline 或 inline-block，或者为元素设置浮动。
display 属性
将列表设置为单行显示最便捷快速的方法就是把 <li> 的 display 属性设置为 inline 或 inline-block。设置后所有 <li> 元素会间隔一个空格，单行排列显示。
如果不需要每个 <li> 元素间的空格，可以根据第五课 定位 所学，移除元素间的空格。
多半我们都会用 inline-block 而非 inline 属性值。inline-block 属性值允许我们简单快速地为元素添加纵向外边距和 <li> 元素间的距离，这些是 inline 属性值不能做到的。
当我们将 display 属性值改为 inline 或 inline-block，列表项标记，如圆点、数字或者其他的样式都会被移除。
HTML
<ul>
<li>Orange</li>
<li>Green</li>
<li>Blue</li>
</ul>
CSS
li {
display: inline-block;
margin: 0 10px;
}
float 属性
修改 display 属性值为 inline 或 inline-block 确实很简单快捷；但是这种方法移除了列表项标记。如果列表项标记是必须的，那么为 <li> 元素设置浮动比修改 display 属性更合适。
将 <li> 元素的 float 属性设置为 left，所有 <li> 元素都会水平无间隙的排列显示。当我们为 <li> 元素设置浮动后，列表项标记默认显示，并位于相邻 <li> 元素上。为避免列表项标记与 <li> 元素显示重叠，需要添加横向的 margin 或 padding
HTML
<ul>
<li>Orange</li>
<li>Green</li>
<li>Blue</li>
</ul>
CSS
li {
float: left;
margin: 0 20px;
}
为任何元素设置浮动，都破坏了页面的流布局。所以我们必须要记得清除浮动——最常用的是 clearfix 方法——使页面回到正常的流布局中。
导航列表示例
我们常用无序列表开发导航菜单栏。这些菜单栏通常使用以上提到的两种方法实现水平布局。下面是一个将 display 属性设置为 inline-block 的无序列表实现的水平菜单栏示例。
HTML
<nav class=”navigation”>
<ul>
<li><a href=”#”>Profile</a></li><!–
–><li><a href=”#”>Settings</a></li><!–
–><li><a href=”#”>Notifications</a></li><!–
–><li><a href=”#”>Logout</a></li>
</ul>
</nav>
CSS
.navigation ul {
font: bold 11px “Helvetica Neue”, Helvetica, Arial, sans-serif;
margin: 0;
padding: 0;
text-transform: uppercase;
}
.navigation li {
display: inline-block;
}
.navigation a {
background: #395870;
background: linear-gradient(#49708f, #293f50);
border-right: 1px solid rgba(0, 0, 0, .3);
color: #fff;
padding: 12px 20px;
text-decoration: none;
}
.navigation a:hover {
background: #314b60;
box-shadow: inset 0 0 10px 1px rgba(0, 0, 0, .3);
}
.navigation li:first-child a {
border-radius: 4px 0 0 4px;
}
.navigation li:last-child a {
border-right: 0;
border-radius: 0 4px 4px 0;
}
练习
现在我们知道了如何使用 HTML 和 CSS 创建列表，我们回到样式讨论会网站，看看如何使用列表。
目前我们页面中所有 <header> 和 <footer> 元素内的菜单栏都由超链接元素组成。我们可以使用无序列表使这些元素更有条理。
使用无序列表（<ul> 元素）和列表项（<li> 元素）优化我们菜单栏的结构后，这些新的元素会使菜单栏纵向排列。
为了使元素水平排列，我们将 <li> 元素的 display 属性值改为 inline-block，但完成后 <li> 元素间会留有间隙。回想第五课 定位 的内容，我们知道可以通过在 <li> 元素的开始标签和结束标签之间添加注释来消除空格。
完成后，<header> 元素中的菜单栏代码如下所示：
<nav class=”nav primary-nav”>
<ul>
<li><a href=”index.html”>Home</a></li><!–
–><li><a href=”speakers.html”>Speakers</a></li><!–
–><li><a href=”schedule.html”>Schedule</a></li><!–
–><li><a href=”venue.html”>Venue</a></li><!–
–><li><a href=”register.html”>Register</a></li>
</ul>
</nav>
同理，<footer> 元素中的菜单栏修改后代码如下所示：
<nav class=”nav”>
<ul>
<li><a href=”index.html”>Home</a></li><!–
–><li><a href=”speakers.html”>Speakers</a></li><!–
–><li><a href=”schedule.html”>Schedule</a></li><!–
–><li><a href=”venue.html”>Venue</a></li><!–
–><li><a href=”register.html”>Register</a></li>
</ul>
</nav>
别忘了在所有 HTML 文件中修改这部分代码
写好无序列表后，我们需要清除列表项的一些样式，并将其设置为水平布局。我们可以使用 class nav 来帮我们完成。
我们将所有 class 为 nav 的元素内的 <li> 元素的 display 属性设置为 inline-block，设置一些外边距 margin，并将垂直属性 vertical-align 设置为上对齐 top。
除此之外，我们使用伪类选择器:last-child 将最后一个 <li> 元素的右外边距 margin 设为 0。这是为了确保 <li> 元素与父元素间的水平间隙都被移除。
我们在 main.css 文件的导航样式下，添加我们需要的样式：
.nav li {
display: inline-block;
margin: 0 10px;
vertical-align: top;
}
.nav li:last-child {
margin-right: 0;
}
你也许很疑惑为什么无序列表没有项标记或别的默认样式。这是因为这些样式都在我们的样式表中被重置了。如果去查看下重置的样式，就会发现 <ul>，<ol>，和 <li> 元素都设置了 margin 和 padding 为 0。<ul> 和 <ol> 元素还设置了 list-style 为 none
我们的菜单栏不是唯一使用列表的地方，我们也将其应用到别的页面中，例如 Speakers 页面。下面让我们来给讨论会添加演讲者信息。
在 speakers.html 文件的引导区块下，添加一个新的区块用来展示我们的演讲者信息。我们可以复用一些现有的样式，使用 class 属性值为 row 的 <section> 元素包裹演讲者信息，可以直接应用到白色背景和内边距。在 <section> 元素中添加 class 属性为 grid 的 <div> 元素用以集中展示我们的演讲者信息
到此为止，添加的 HTML 如下所示：
<section class=”row”>
<div class=”grid”>
</div>
</section>
在 <div> 元素中，每个演讲者的信息都有独立的 <secion> 元素，元素内有两列。第一列由 <div> 元素标记，占用 <section> 元素 2 / 3 的空间，第二列由 <aside> 元素标记，占用 <section> 元素剩余的 1 / 3 空间，这里的内容展示演讲者一些次要的或特定的信息。
我们可以使用现有的 class col-2- 3 和 col-1- 3 来设置，完成后代码如下所示：
<section id=”shay-howe”>
<div class=”col-2-3″>
…
</div><!–
–><aside class=”col-1-3″>
…
</aside>
</section>
这里有一些需要注意的点。首先，每个演讲者的 <section> 元素都有独立的 id 属性，并用演讲者的名字作为属性值。当我们为讨论会创建日程表，这个 id 就会被当作锚点链接到演讲者信息。
另外，<div> 元素的结束标签和 <aside> 元素的开始标签之前添加了 HTML 注释。因为这俩元素的 display 属性值为 inline-block，我们需要清除他们之间的间隙。
在占有 2 / 3 空间的 <div> 元素中，我们会使用标题和段落标签，用来展示演讲者的名字，演讲内容的标题和摘要，以及一小段传记。
以上内容的代码如下所示：
<section id=”shay-howe”>
<div class=”col-2-3″>
<h2>Shay Howe</h2>
<h5>Less Is More: How Constraints Cultivate Growth</h5>
<p>By setting constraints, we force ourselves…</p>
<h5>About Shay</h5>
<p>As a designer and front-end developer, Shay…</p>
</div><!–
–><aside class=”col-1-3″>
…
</aside>
</section>
在占有 1 / 3 空间的 <aside> 元素中，我们将添加一个 class 为 speaker-info 的 <div> 元素。使用 <div> 元素是因为我们很快会为这个元素添加样式。
在设置样式之前，我们先在这个 <div> 元素中添加一个无序列表，并在列表项中引用一些跟演讲者相关的链接
目前为止，这部分的 HTML 代码如下所示：
<section id=”shay-howe”>
<div class=”col-2-3″>
<h2>Shay Howe</h2>
<h5>Less Is More: How Constraints Cultivate Growth</h5>
<p>By setting constraints, we force ourselves…</p>
<h5>About Shay</h5>
<p>As a designer and front-end developer, Shay…</p>
</div><!–
–><aside class=”col-1-3″>
<div class=”speaker-info”>
<ul>
<li><a href=”https://twitter.com/shayhowe”>@shayhowe</a></li>
<li><a href=”http://learn.shayhowe.com/”>learn.shayhowe.com</a></li>
</ul>
</div>
</aside>
</section>
class 为 speaker-info 的 <div> 元素准备完成后，我们为它添加一些样式。
首先我们在 main.css 文件中分出一个新的 Speakers 区块用来添加 speakers 页面的样式。再来我们为属性值为 speaker-info 的 class 添加 1px 的灰色实线外边框和 5px 的圆角。
接下来，我们添加属性 margin-top 值为 88px，使元素定位在与演讲描述第一段相同的垂直线上，再添加纵向 padding 为 22px 给嵌套的无序列表提供空间
最后将此元素内的的文本设置为居中
CSS 完成后代码如下所示：
/*
========================================
Speakers
========================================
*/
.speaker-info {
border: 1px solid #dfe2e5;
border-radius: 5px;
margin-top: 88px;
padding: 22px 0;
text-align: center;
}
让我们花一分钟时间回顾下为什么我们要在这里使用 <div> 元素并设置相关样式
我们在 class 为 col-1- 3 的 <aside> 元素中添加 <div> 元素是因为我们我们想继承 class col-1- 3 的 padding 值，使之在 <div> 元素的边框外展示。之后还会在 <div> 元素内添加一张图片放在无序列表旁边。因此我们创建了一个 <div> 元素而非把这些样式直接应用在 <ul> 元素上。
随着演讲者越来越多，我们需要确认它们之间的纵向间距相等。为此我们创建了一个 class speaker，并为其添加下外边距 margin-bottom 为 44px，如下所示：
.speaker {
margin-bottom: 44px;
}
我们将这个 class 添加在每个演讲者的 <section> 元素上，除却最后一个。我们在最后一个演讲者元素上省略它是因为我们不希望在 <footer> 元素前生成不必要的边距。多个演讲者的布局如下所示：
<section class=”row”>
<div class=”grid”>
<section class=”speaker” id=”chris-mills”>
<div class=”col-2-3″>
…
</div><!–
–><aside class=”col-1-3″>
…
</aside>
</section>
<section id=”shay-howe”>
<div class=”col-2-3″>
…
</div><!–
–><aside class=”col-1-3″>
…
</aside>
</section>
</div>
</section>
此处留意下，第一个演讲者 Chris Mills 的 <section> 元素添加了 class 属性值 speaker 生成了纵向边距，使之与作者 Shay Howe 的 <section> 元素分开。而最后一个演讲者的 <section> 元素，还是作者 Shay Howe 的，并没有添加 class 属性值 speaker，使之与 <footer> 元素之间保持了合适的距离。
到此我们的导航菜单已经完成，演讲者 speakers 页面也已成形。
演示源代码
这是练习的源代码。在线预览 或 点击下载
总结
列表元素在 HTML 中使用相当普遍，常用在不是很起眼的地方。使用它们的关键是尽可能语义化地使用它们并放在最合适的位置。
我们来总结一下这节课所学：
如何创建无序列表，有序列表和描述列表。
如何正确的在列表中嵌套其他列表
如何改变列表项标记的样式和位置
如何使用背景图代替列表项标记
如何水平显示或浮动列表
现在我们学会了如何在页面中添加列表，接下来我们将学习如果在页面中添加媒体，下节课我们将深入学习可嵌入媒体，如图片、音频和视频。
文章来源
https://learn.shayhowe.com/ht…
