- 零基础HTML+CSS+JavaScript学习笔记
- 明日科技编著
- 467字
- 2025-02-26 15:27:48
5.4 列表的嵌套
嵌套列表指的是多于一级层次的列表,在一级项目下可以存在二级项目、三级项目等。项目列表可以嵌套,以实现多级项目列表。
5.4.1 定义列表的嵌套

定义一个两级层次的列表,用于解释名词的定义,名词为第一层次,解释为第二层次,且不包含项目符号。
具体语法如下:

在定义列表中,一个<dt>标签下可以有多个<dd>标签作为名词的解释和说明,以实现定义列表的嵌套。
下面通过一个实例,定义列表的第一层级用于放置标题,第二层级用于设置语句内容,且不包含项目符号。具体代码如下:

运行这段代码,效果如图5.8所示。

图5.8 定义列表的嵌套
5.4.2 无序列表和有序列表的嵌套

最常见的列表嵌套模式就是无序列表和有序列表的嵌套,可以通过重复使用<ol>和<ul>标签来组合实现。
下面的代码就是利用无序列表和有序列表嵌套制作的商品导航栏:

为了控制网页的样式,这里运用了CSS样式,代码如下:


学习笔记
在上面的代码中,为了控制网页布局和字体的样式,应用了CSS样式,应用的CSS样式的具体代码请参照配套资源中的源码。
运行这段代码,可以得到无序列表和有序列表嵌套制作的商城网页,效果如图5.9所示。

图5.9 无序列表和有序列表嵌套制作的商城网页