共计 1594 个字符，预计需要花费 4 分钟才能阅读完成。
利用后面的知识点来实现一个综合案例。
先来剖析一下这个案例，第一个题目是：题目标签，题目内的文本居中，题目下方有两个段落，段落前面有一张图片，居中显示，图片的下方别离是有序列表、无序列表、有序列表增加了链接，无序列表的我的项目符号为方形，无序列表的下方是图文混排 格局的自定义列表。咱们关上编辑器新建一个 case_list.html 页面，在页面中应用 ! 配合 tab 键主动补全根底构造，在 body 里应用 ctrl + / 敲出正文代码，增加正文内容：这是案例的题目，在正文的结束位 回车换行。题目应用 h1 标签，将当时筹备好的文本复制粘贴到标签里，因为题目要程度居中显示，所以须要给 h1 定义一个属性 align，它的值设置为 center，保留页面。
接下来实现两个段落回到编辑器，在 h1 完结标签的外侧，回车换行，增加正文：第一个段落。正文下，增加一个 p 标签，写入第一段文本，应用同样的办法，再增加一个 p 标签，写入第二段文本，保留。
回到浏览器，刷新，两个段落就实现了，咱们还须要给每个段落增加自然段缩进。返回编辑器，在每一个段落开始处增加四个 保留。回到浏览器，刷新。
仔细观察发现 这个缩进的间隔不齐全是两个汉字的大小 这怎么办呢 咱们得换一个空格符号。返回编辑器 将四个 用两个 替换，一个 代表一个中文汉字大小的空格，保留一下页面，
回到浏览器，刷新，完满的自然段实现了。接下来制作居中显示的图片，回到编辑器，在第二个 p 标签完结地位的前面增加第三个 p 标签，在 p 标签外部，增加 img 标签，定义 src 属性引入图片，因为页面文件和图片文件是同级关系，图片标签的门路间接能够设置为图片的名称，为了让图片在页面中程度居中，须要给 p 标签增加 align 属性，值为 center，保留。
回到浏览器 刷新 图片居中显示了。
接下来是一个题目，和一个带链接的有序列表。回到编辑器，在第三个 p 标签完结地位处，回车换行，增加正文：有序列表 在正文标签完结的地位，持续回车换行，增加一个 h1 标签，填入题目内容：费曼学习法。在 h1 后，回车换行，增加 emmet 语句：ol>li*4>a[href] 中括号外面定义的是标签的属性，将光标移至语句的结尾处，按下 tab 键，一组有序列表的标签就写好了，填入费曼学习法的四个步骤：将所学内容，迅速记录到一张纸上，练习传授他人，查漏补缺、找到不足之处，优化及欠缺，保留页面。
回到浏览器 刷新 有序列表带超链接的成果就实现了。
接下来是题目 和一个列表符号是小方点的无序列表回到编辑器，在无序列表 ol 标签完结的地位，回车换行，增加正文：无序列表。在正文标签完结后的地位，持续回车换行，增加一个 h1 标签，填入题目内容：一首小诗在 h1 后，回车换行，增加 emmet 语句：ul 大于号 li 乘以 6 ul>li*6，将光标移至语句的结尾处，按下 tab 键，一组无序列表的标签就写好了，接着在 ul 标签里增加 type 属性，值为 square 最初填入小诗的内容，保留页面。
回到浏览器 刷新 无序列表也实现了。
最初一部分咱们来制作，题目和自定义列表实现的图文混排。回到编辑器，在 ul 的上面增加正文，自定义列表。再增加一个 h1 标签，填入题目内容 图文混排。在 h1 后，回车换行，增加 emmet 语句：dl>dt+dd*4 将光标移至语句的结尾处。按下 tab 键。此时。一个 dl 外面蕴含一个 dt 和四个 dd 的根底代码构造就实现了。在 dt 里增加一个 img 标签，定义 src 属性，值为我和我的祖国图片的门路，再把对应的电影名称、领衔主演、导演、类型、别离放在四个 dd 中。保留
回到浏览器 刷新 图文混排的列表就做好了
因为第二部布局成果统一，复制粘贴后面的 dl 布局格局，更改对应的图片门路和电影名称等内容，即可实现第二个图文混排的列表了。
文章配套视频链接
