[译]HTML&CSS Lesson8: 列表

列表清单是我们日常生活的一部分。未办事项清单确认我们接下来要做什么，行车导航提供路线列表，食谱提供成分列表和说明列表。几乎所有的东西都有列表，这就很容易理解为什么它们在网上这么受欢迎。

若我们想在网站上创建列表，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...

[译]HTML&CSS Lesson8: 列表

无序列表

有序列表

`start` 属性

`reversed` 属性

`value`属性

描述列表

列表嵌套

列表样式

`list-style-type`属性

`list-style-type`属性值

图片项标记

`list-style-position`属性

简写列表样式属性

横向列表

`display`属性

导航列表示例

练习

演示源代码

总结

文章来源

龙猫猫

引用和评论

腾讯新闻中心首页改版啦

网页设计的垂直居中

CSS团队协作规范

前端开发工具

Jerry和您聊聊Chrome开发者工具

CSS 如何模拟“真实的”进度条？

面向企业级前端应用的开发框架 UI5 的发展简史介绍

[译]HTML&CSS Lesson8: 列表

无序列表

有序列表

start 属性

reversed 属性

value属性

描述列表

列表嵌套

列表样式

list-style-type属性

list-style-type属性值

图片项标记

list-style-position属性

简写列表样式属性

横向列表

display属性

导航列表示例

练习

演示源代码

总结

文章来源

龙猫猫

引用和评论

腾讯新闻中心首页改版啦

网页设计的垂直居中

CSS团队协作规范

前端开发工具

Jerry和您聊聊Chrome开发者工具

CSS 如何模拟“真实的”进度条？

面向企业级前端应用的开发框架 UI5 的发展简史介绍

`start` 属性

`reversed` 属性

`value`属性

`list-style-type`属性

`list-style-type`属性值

`list-style-position`属性

`display`属性