零基础教你学前端——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中。保存

回到浏览器    刷新    图文混排的列表就做好了

由于第二部布局效果一致 ， 复制粘贴前面的 dl 布局格式，更改对应的图片路径和电影名称等内容 ，即可实现第二个图文混排的列表了。

文章配套视频链接

Tags 标签

扩展阅读

加个好友，技术交流