零基础教你学前端——16、自定义列表

这节课来学习自定义列表。先来看个例子小米官网 (https://www.mi.com/) 的底部导航每个列表都有一个共同特点，除了列表内容外，还包含一个标题，我们就把类似这样的列表，称为自定义列表。

自定义列表由三个标签组成，分别是： dl dt 和 dd dl 是 definition list 的缩写意为定义列表dt 是 definition term 的缩写意为定义术语可以理解为列表标题。dd 是 definition description的缩写意为定义描述可以理解为列表内容三个标签都遵循双标签语法。

语法如下图：注意 dt 和 dd 是 dl 的子标签。dt 与 dd 是兄弟标签，dt 不能放入 dd 内 dd也不能放入 dt 内 dd标签可以定义多个但dt 或 dd 标签不能脱离 dl 单独使用。

再次来到小米官网的底部导航在浏览器页面上单击鼠标右键选择，检查，打开开发者工具，选择 elements 页签，点击元素选择工具按钮，点击选中你要查看的元素，在 elements 中你就能看到选择区域的代码。

仔细观察 dl 标签下定义了一个dt 和三个 dd 分别展示了一个列表标题和三个列表描述。我们来动手制作一个自定义列表打开编辑器新建一个 definition_list_1.html 页面使用 ! 配合 tab 键自动补全基础代码在 body 里书写 dl ，按下 tab 键补全 dl 标签，在 dl 标签内部，敲回车，换行，书写 dt，按下 tab或者是回车键自动补全 dt，在 dt 的结束标签外部，回车换行，在下边再定义一个 dd 标签，dt 标签里书写文本问：英文不好能不能学编程dd 标签里书写文本答：当然可以，保存。在浏览器打开页面，自定义列表完成了，这里我们发现， dd 里包含的文本缩进了，这个缩进是浏览器默认的样式。

再来实现一下小米官网的底部导航！回到编辑器，新建 definition_list_2.html 页面，补全基础代码，在body里面书写一个 dl 标签在 dl 中书写一个 dt 标签，向 dt 标签中填写文本，帮助中心，再书写三个 dd 标签，分别在每个 dd 中输入文本，账户管理，订单指南，订单操作，保存