零基础教你学前端——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 中输入文本，   账户管理，    订单指南，    订单操作，    保存

在浏览器打开页面，    基本的自定义列表实现了。和真实的效果做个对比，    我们发现这两处文字的大小是不同的    而我们的是相同的，    同时，    这里的内容没有缩进，    而我们的有缩进，    这些问题等到我们学习了CSS知识后，    就可以实现了。

配套视频链接

Tags 标签

扩展阅读

加个好友，技术交流