上次，我们学习了两种复合CSS选择器，以及两种内容分组的方式：整体布局的div元素和局部布局的span元素。
学习目标
学习另一种对内容分组的方式：列表结构。首先，我们会简单了解下什么是HTML的列表结构。然后，学习不同的列表结构所对应的样式、标签，并实际使用它们来搭建网页中整洁的列表结构。
什么是列表结构？
列表结构是指网页中的相关数据或信息都按照行的方式整齐排列。这种结构非常常见，比如NBA排行榜、新闻列表等。
不过，同样都是列表结构，表现形式却不一样。
按照不同的应用场景，列表结构可分为3种，分别是有序列表、无序列表和定义列表。
接下来，我们会依次学习这三种列表结构。
一、有序列表（Ordered List）
| 有序列表之间的内容有先后顺序之分，即每个列表项前有数字或某种表示一系列项目的编号标记来表示顺序。 例如，有序列表可以从数字1开始，并继续到2、3、4等；也可以从字母A开始，到B、C、D等。 图中的排行榜就是标有数字的有序列表，有先后排名。 |  |
在HTML中，我们可以使用<ol>和<li>标签来创建一个有序列表。
有序列表
| 这几行代码构建了一个有序列表。 第2、6行，使用<ol></ol>标签对定义了一个有序列表。 第3-5行，使用<li></li>标签对为有序列表添加了三个列表项。 |
| <p>游戏畅销榜</p> <ol> <li>王者荣耀</li> <li>和平精英</li> <li>梦幻西游</li> </ol> |
 |
代码解释：
| <ol>标签 ol是ordered list的缩写，表示有序列表。 <ol>标签一般和<li>标签配合使用，不会单独出现，且尽量在<ol>标签中只使用<li>标签。 | <p>游戏畅销榜</p> <ol> <li>王者荣耀</li> <li>和平精英</li> <li>梦幻西游</li> </ol>
|
| <li>标签 li是list item的缩写，表示列表项，即列表里的条目。 默认情况下，有序列表中的每一项都会按序标记一个数字。 <li>标签嵌套在<ol>标签中，有多少个<li>标签就表示有多少条列表项。 示例中，我们有3个<li>标签，表示一共定义了3个列表项，分别是王者荣耀、和平精英和梦幻西游。 |  |
有序列表默认状态的显示效果
1、每一项都是有顺序的；
2、序号是默认从1开始、逐一递增的数字序号。
设置列表项里的内容
| 列表项里除了文本，还可以包含超链接、图片等，甚至还可以是另外一个列表。 这是因为<li>标签类似一个容器，里面可以添加任意的标签。 示例中的有序列表共有三个列表项： 第一个列表项是一个超链接，第二个列表项是一张图片，第三个列表项是另一个有序列表。 |
| <p>我最喜欢的进阶课：</p> <ol> <!-- 超链接 --> <li> <a href="https://np.baicizhan.com/website/lessons" target="_blank">网页开发</a> </li>
<!-- 图片 --> <li> <img src="spider.png" alt="网络爬虫" width="200"> </li>
<!-- 列表项中包含另一个有序列表 --> <li>数据分析 <ol> <li>数据分析基础</li> <li>数据分析进阶</li> </ol> </li> </ol> |
 |
指定序号类型
| 我们可以通过CSS，设置list-style-type属性的值，指定序号类型。 示例中，第6-8行，我们创建了一个标签选择器ol，并其将list-style-type的属性值设置为了upper-alpha，指定大写字母为序号类型。 |
| <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> ol { list-style-type: upper-alpha; } </style> </head> <body> <ol> <li>王者荣耀</li> <li>和平精英</li> <li>梦幻西游</li> </ol> </body> </html> |
 |
指定序号类型
| 在有序列表中，list-style-type属性的常用值有5个，如图所示。 只需创建标签选择器，并根据图中的属性值，就可以分别设置将列表按照数字、大写字母、小写字母、大写罗马数字或小写罗马数字的顺序进行排列。 |
 |
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
