7-1设置列表样式.docVIP

课程名称 WEB前端开发（1） 课次 20 任务、项目、课题名称 列表样式设置 课时 2学时 教学内容 CSS控制列表样式 CSS控制超链接样式 案例制作：学院新闻块页面制作 教学目标 掌握CSS控制列表样式 掌握CSS控制超链接样式 教学重点 CSS控制列表样式、CSS控制超链接样式 教学难点 CSS控制超链接样式 教学活动及主要环节 复习提问： 设置元素的CSS背景使用什么属性？ 导入新课： 网站页面中新闻块的制作方法，需要包含什么内容，展示学院官网通知公告块（小组为单位讨论，派小组代表分享知识） 新授：（案例演示：学院官网导航条） 一．CSS控制列表样式 使用CSS控制列表的样式时，通常使用如下属性： List-style-type：设置无序或有序列表的项目符号； List-style-position：设置列表项目符号的位置； List-style-image：设置列表的项目图像； 这三个属性都可以通过list-style属性进行定义，格式如下： List-style：列表项目符号 列表项目符号的位置 列表项目图像 但实际网页制作过程中，为了更高效地控制列表项目符号，通常将list-style的属性值定义为none，然后通过为li设置背景图像的方式实现不同的列表项目符号。 CSS控制超链接样式 （案例演示：在学院官网导航条上设置不同的链接状态） 在CSS中，通过链接伪类可以实现不同的链接状态。 所谓伪类并不是真正意义上的类，它的名称是由系统定义的。超链接标记a的伪类有4种，如下所示： a:link{CSS样式规则;} 未访问时超链接的状态 a:visited{CSS样式规则;} 访问后超链接的状态 a:hover{CSS样式规则;} 鼠标悬停时超链接的状态 a:active{CSS样式规则;} 鼠标点击不动时超链接的状态 通常在实际应用时，只需要使用a:link、a:visited来定义未访问和访问后的样式，而且a:link和a:visited定义相同的样式；使用a:hover定义鼠标悬停时超链接的样式即可。 学院新闻块效果制作 （老师讲解，学生动手操作，实现教学做一体化） 图5-1 学院要闻块显示效果 小结： 掌握列表及超链接的样式设置方法；掌握新闻列表块的实现方法。 作业： 自定义列表的应用：课本案例