网页设计与制作项目式教程（HTML+CSS）课件07.制作“古诗推荐”“诗文释义”模块.pptx

网页设计与制作项目式教程（HTML+CSS）功能模块类网站开发项目——“古诗词”网站页面模块的实现

项目实施任务分析“诗词推荐”模块效果及框架结构任务3.3制作“古诗推荐”模块

知识储备知识导图“古诗推荐”模块，可以按照作者、朝代、类型等维度对古诗进行推荐，帮助用户快速找到心仪的诗词。完成本任务还需要学习的主要知识点有列表及其CSS样式设置，知识导图如图所示。任务3.3制作“古诗推荐”模块

知识储备新知学习1：有序列表和无序列表1．网页中的列表列表是网页中一种常用的数据排列方式，我们在网页中到处可以看到列表的身影，如图3-21所?示。任务3.3制作“古诗推荐”模块

知识储备2．HTML列表简介在HTML中，列表共有3种：有序列表、无序列表和定义列?表。任务3.3制作“古诗推荐”模块新知学习1：有序列表和无序列表

知识储备（1）有序列表ol。有序列表的各个列表项都是有顺序的。一般采用数字或字母作为排序依据，默认采用数字顺序。有序列表从ol开始，到/ol结束，中间的列表项是li标签内?容。语法：olli列表项内容/li…li列表项内容/li/ol任务3.3制作“古诗推荐”模块新知学习1：有序列表和无序列表

知识储备（2）有序列表的list-style-type属性。语法：styleol{list-style-type:属性值；}/stylel任务3.3制作“古诗推荐”模块新知学习1：有序列表和无序列表属性值列表项的序号类型decimal数字1、2、3……lower-alpha小写英文字母a、b、c……upper-alpha大写英文字母A、B、C……lower-roman小写罗马字母ⅰ、ⅱ、ⅲ……upper-roman大写罗马字母Ⅰ、Ⅱ、Ⅲ……

知识储备（2）无序列表ul。无序列表是没有顺序的，默认情况下，无序列表的项目符号是●，不过可以通过无序列表的list-style-type属性来改变无序列表的列表项符?号。语法：ulli列表项内容/li…li列表项内容/li/ul任务3.3制作“古诗推荐”模块新知学习1：有序列表和无序列表

知识储备无序列表的list-style-type属性任务3.3制作“古诗推荐”模块新知学习1：有序列表和无序列表属性值描述disc默认值，实心圆●circle空心圆?square实心正方形■none去除列表项符号

知识储备定义列表在实际开发中用得不多，其主要由两部分组成：定义条件和定义描?述。语法：dldt定义条件/dtdd定义描述/dd…/dl任务3.3制作“古诗推荐”模块新知学习2定义列表

小结延伸任务小结本任务围绕“古诗推荐”模块的制作，分析了页面的结构要素，介绍了有序列表、无序列表和定义列表，综合应用完成了该功能模块的制作。任务3.3制作“古诗推荐”模块

小结延伸1.根据所学列表知识，设计并制作“在线考试试卷”页面，效果如图所?示。2.扫码观看任务3.4中的微课视频，预习新课。课后延伸任务3.3制作“古诗推荐”模块