零基础教你学前端——18、列表综合案例

利用前面的知识点来完成一个综合案例。

先来分析一下这个案例，第一个标题是：标题标签，标题内的文本居中，标题下方有两个段落，段落后面有一张图片，居中显示，图片的下方分别是有序列表、无序列表、有序列表添加了链接，无序列表的项目符号为方形，无序列表的下方是图文混排格式的自定义列表。我们打开编辑器新建一个 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中。保存