
上QQ阅读APP看本书,新人免费读10天
设备和账号都新为新人
5.3 有序列表
有序列表是使用编号(而不是项目符号)来编排项目的。列表中的项目以数字或英文字母开头,通常各项目之间有先后顺序。在有序列表中,主要使用<ol>和<li>两个标签,以及type属性。
5.3.1 有序列表标签

<o1>和<li>两个标签的具体语法如下:

在该语法中,<ol>和</ol>标签标志着有序列表的开始和结束,<li>标签表示这是一个列表项的开始,在默认情况下,采用数字序号进行排列。
下面通过一个实例,运用有序列表输出古诗。具体代码如下:

运行这段代码,可以看到有序列表前面包含顺序号,如图5.6所示。

图5.6 运用有序列表输出古诗
学习笔记
在默认情况下,有序列表中的列表项采用数字序号进行排列,如果需要将列表序号改为其他类型(如以英文字母开头),则需要改变type属性。
5.3.2 有序列表属性

在默认情况下,有序列表的序号是数字,通过type属性可以调整序号的类型,如将其修改成字母等。
具体语法如下:

在该语法中,序号类型有5种,如表5.3所示。
表5.3 有序列表的序号类型

下面通过一个实例,新建一个HTML5文件,使用有序列表制作一个商城网页。在<body>标签中添加如下代码:

为上面的HTML代码添加CSS样式,代码如下:

保存文件,运用谷歌浏览器打开该文件,将显示使用有序列表制作的商城网页,效果如图5.7所示。

图5.7 有序列表制作的商城网页
学习笔记
如果在开发过程中不需要有序列表的序号,则只需将有序列表的列表项目的序号类型设置为none即可,也可以将列表的list-style属性设置为none。