《HTML5 CSS3项目开发案例教程》（袁明兰）770-5教案 第8课 使用CSS3美化列表_第1页
《HTML5 CSS3项目开发案例教程》（袁明兰）770-5教案 第8课 使用CSS3美化列表_第2页
《HTML5 CSS3项目开发案例教程》（袁明兰）770-5教案 第8课 使用CSS3美化列表_第3页
《HTML5 CSS3项目开发案例教程》（袁明兰）770-5教案 第8课 使用CSS3美化列表_第4页
《HTML5 CSS3项目开发案例教程》（袁明兰）770-5教案 第8课 使用CSS3美化列表_第5页
已阅读5页，还剩8页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第课使用CSS3美化列表的第课使用CSS3美化列表的基基本本PAGE12821821使用CSS3美化列表第821使用CSS3美化列表第课PAGE138212使用CSS3美化列表第8212使用CSS3美化列表第课PAGE1

课题使用CSS3美化列表课时2课时（90min）教学目标知识技能目标：（1）学习使用CSS3设置列表项目符号（2）掌握使用CSS3制作导航条、图文列表、排行榜的方法思政育人目标：（1）培养学生严谨、细心的工作态度（2）在学习中开拓自己的眼界，提升自己的辩证思维能力教学重难点教学重点：CSS3设置列表项目符号和制作导航条等的操作方法教学难点：熟练操作CSS3制作导航条、图文列表、排行榜教学方法讲授法、启发法、问答法、演示法、讨论法、练习法教学用具电脑、投影仪、多媒体课件、教材教学设计第1节课：考勤（2min）→导入新知（4min）→知识讲解（24min）→知识竞赛（15min）第2节课：案例分析（4min）→知识讲解（20min）→课堂练习（12min）→课堂小结（7min）→作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课考勤

（2min）【教师】清点上课人数，记录好考勤【学生】班干部报请假人员及原因培养学生的组织纪律性，掌握学生的出勤情况导入新知

（4min）【教师】概述CSS3在美化列表上的优势，引出新知识点只使用HTML5制作的列表比较简单，想要制作图文列表、排行榜等比较美观、实用的效果就要用到CSS3，CSS3提供了大量处理列表的标签，丰富了列表美化的操作【学生】聆听、思考【教师】提出问题同学们对CSS3美化列表的方法了解多少呢？自己常用的，最常见的美化列表的方法是哪个呢？【学生】思考、讨论、发言通过问答的方式，介绍CSS3美化列表的方法，引出本节课的内容知识讲解

（24min）【教师】讲述设置项目符号1．项目符号类型在CSS3中，使用list-style-type属性设置列表项的符号类型，其属性值及说明如表4-1所示。表4-1list-style-type的属性值及说明属性值说明属性值说明none不使用项目符号lower-alpha小写英文字母disc实心圆（默认值）upper-alpha大写英文字母circle空心圆lower-roman小写罗马数字square实心方块upper-roman大写罗马数字decimal阿拉伯数字hiragana日文平假名cjk-ideographic中文数字katakana日文片假名【教师】演示【例4-7】操作流程，实现图4-9的效果设置列表项的项目符号，页面效果如图4-9所示。图4-9列表项项目符号的设置效果（1）创建HTML5文档，在<body>标签中输入以下代码，构建商品分类导航列表的结构。<ulclass="t1"> <li>家用电器 <ulclass="t2"> <li>电视 <ulclass="t3"> <li>超薄电视</li> <li>全面屏电视</li> <li>智能电视</li> </ul> </li> <li>空调 <ulclass="t3"> <li>空调挂机</li> <li>空调柜机</li> </ul> </li> </ul> </li></ul>（2）在<head>标签中添加<style>标签，在其中输入以下代码，设置商品分类导航列表项的项目符号，1～3级列表项的项目符号分别为实心方块、大写英文字母和小写英文字母。.t1{list-style-type:square;}.t2{list-style-type:upper-alpha;}.t3{list-style-type:lower-alpha;}2．自定义项目符号除了前面给出的预定义项目符号之外，在CSS3中还可以使用list-style-image属性自定义图像文件为项目符号，具体格式为：list-style-image:none|url;其中，none是默认值，表示没有自定义项目符号；url表示图像文件的地址。【教师】演示【例4-8】操作流程，实现图4-10的效果为列表项设置自定义项目符号，页面效果如图4-10所示。图4-10自定义项目符号的设置效果创建HTML5文档，参照以下代码段分别在<style>和<body>标签中输入代码，为例4-1中的列表项设置自定义项目符号。<style> .t1{list-style-image:url(images/p1.png);}/*设置无序列表的自定义项目符号*/</style>……<body> <p>商品分类</p> <ulclass="t1"> <li>家用电器</li> <li>手机/数码</li> <li>家具/家居/家装/厨具</li> <li>男装/女装/童装</li> <li>美妆/清洁</li> </ul></body>3．项目符号位置在CSS3中，使用list-style-position属性设置项目符号的位置，具体格式为：list-style-position:outside|inside;其中，outside是默认值，表示项目符号在列表项左侧；inside表示项目符号在列表项之内。【学生】聆听、思考【教师】演示【例4-9】操作流程，实现图4-11的效果设置列表项项目符号的位置，页面效果如图4-11所示图4-11项目符号位置的设置效果创建HTML5文档，参照以下代码段分别在<style>和<body>标签中输入代码，设置嵌套列表项项目符号的位置。<style> .t1{list-style-position:inside;}/*设置项目符号显示在列表项之内*/</style>……<body> <ol> <li>列表 <ol> <li>无序列表</li> <liclass="t1">有序列表</li> <liclass="t1">自定义列表</li> </ol> </li> </ol></body>【学生】跟教师一起编写代码【教师】巡视课堂，指导学生完成代码编写【教师】讲述使用列表制作水平导航条使用display属性可以改变元素的显示方式。具体格式为：display:none|inline|block|inline-block|list-item;其中，none表示不显示该元素；inline是默认值，表示将该元素转换为行内元素；block表示将该元素转换为块级元素；inline-block表示将该元素转换为行内块元素；list-item表示将该元素转换为列表块元素。【教师】演示【例4-10】操作流程，实现图4-12的效果设置列表项的显示方式使其水平显示，页面效果如图4-12所示。图4-12列表项水平显示的页面效果创建HTML5文档，参照以下代码段分别在<style>和<body>标签中输入代码，将列表项转换为行内元素，使其水平显示。<style> li{display:inline;padding:10px;}/*将列表项转换为行内元素，并设置其内边距*/</style>……<body> <p>商品分类</p> <ul> <li>家用电器</li> <li>手机/数码</li> <li>家具/家居/家装/厨具</li> <li>男装/女装/童装</li> <li>美妆/清洁</li> </ul></body>【教师】演示【例4-11】操作流程，实现图4-12的效果制作购物网站的水平导航条，页面效果如图4-13所示。图4-13购物网站水平导航条的页面效果【学生】聆听、思考、记录通过讲解知识点，让学生进一步了解使用CSS3美化列表的操作知识竞赛

（15min）【教师】开展知识竞赛1.设置知识竞赛内容编程题在水平导航条的基础上实现项目符号2.讲解知识竞赛规则3.统计小组得分【学生】参加知识竞赛【教师】公布小组得分，安排优秀小组分享心得【学生】讲述比赛心得通过知识竞赛的方式，提高学生的积极性，巩固这节课的知识点第二节课案例分析

（4min）【教师】讲述CSS3美化列表方法，在日常生活中的使用案例，引出本节课内容在日常生活中，我们经常需要对图文进行美化，包括列表中图片和文字的摆放位置、图片是否设置为动态、文字格式的调整，使其美观、整洁，这样才能吸引读者，获得高效的效果。所以学习CSS3美化列表的功能是非常有必要的【学生】聆听、思考、理解通过对CSS3美化列表在生活中应用的讲解，让学生了解学习CSS3美化列表的必要性知识讲解

（20min）【教师】讲述制作图文列表图文列表就是列表项中同时包含图像与文本的列表，可以简单理解为图像列表信息附带简短的文字说明【教师】演示【例4-12】操作流程，实现图4-14的效果制作“菜品欣赏”图文列表，页面效果如图4-14所示。图4-14“菜品欣赏”图文列表的页面效果（1）创建“food.html”文档，在<body>标签中输入以下代码，添加一个基本的图文列表，此时页面效果（浏览器显示比例缩小）如图4-15所示。<divclass="d1"> <h1>湖北菜</h1> <ulclass="food"> <li><imgsrc="images/鲍汁扒时蔬.jpg"/><span>鲍汁扒时蔬</span></li> <li><imgsrc="images/潮州牛肉丸.jpg"/><span>潮州牛肉丸</span></li> <li><imgsrc="images/醋熘山药.jpg"/><span>醋熘山药</span></li> <li><imgsrc="images/鹅肝酱烧丝瓜.jpg"/><span>鹅肝酱烧丝瓜</span></li> <li><imgsrc="images/翡翠藕盒.jpg"/><span>翡翠藕盒</span></li> <li><imgsrc="images/风味香辣虾.jpg"/><span>风味香辣虾</span></li> </ul></div>图4-15图文列表设置样式前的页面效果（2）在头部标签中添加<style>标签，在其中输入以下代码，对图像与文本进行排版，页面效果如图4-16所示。.d1{width:1354px;height:296px;} /*设置div元素的宽度与高度*/h1{text-align:center;} /*标题文本居中对齐*/img{width:200px;height:150px;display:block;}/*设置图像的宽度与高度，并将其转换为块级元素*/li{display:inline;float:left;padding:5px;margin:5px5px-2px5px;text-align:center;}/*将列表项转换为行内元素，向左浮动，添加内边距与外边距，文本居中对齐*/span{display:block;padding-top:10px;font-weight:bold;font-size:1.5em;color:#48486b;text-align:center;}/*将span元素转换为块级元素，并添加内边距，设置文本字体加粗，字号为默认值的1.5倍，更改文本颜色，文本居中对齐*/.food{overflow:hidden;padding-left:0px;}/*设置列表隐藏溢出部分，去除左侧内边距*/图4-16图文列表排版后的页面效果（3）继续在.d1{…}中添加以下代码，设置整个列表的样式。border:#48486B2pxdashed;border-radius:10px;background-color:#fffee7;/*设置整个列表的边框、圆角与背景颜色*/（4）继续在img{…}中添加以下代码，设置图像样式。border:solid#e4e8ff2px;border-radius:10px60px;/*设置图像的边框、圆角*/（5）继续在li{…}中添加以下代码，设置列表项的样式。border:#48486bdashed2px;border-radius:10px10px00;/*设置列表项的边框、圆角*/（6）继续在<style>标签中添加以下代码，修改第一个与最后一个列表项的边框和圆角，并添加鼠标指针移至图像上时的半透明效果。li:first-child{border-radius:010px010px;margin-left:-2px;}li:last-child{border-radius:10px010px0;margin-right:-2px;}img:hover{opacity:0.6;}【学生】聆听、思考、理解【教师】询问学生是否有不理解的地方【学生】提出问题，寻求解答【教师】回答学生提问【教师】讲述使用列表制作排行榜（详见教材）很多音乐网站上都设有排行榜栏目，通过它可以快速找到某个分类下热度靠前的歌曲，下面通过制作经典老歌排行榜，了解这类版块的设置方法。【教师】演示【例4-13】操作流程（1）创建“music.html”文档，在<body>标签中输入以下代码，在页面中添加一个无序列表，此时的页面效果如图4-18所示。<divclass="d1"> <p>经典老歌</p> <olclass="music"> <li><strong>挪威的森林</strong><span>伍佰</span>

<em>……在线试听</em></li> <li><strong>千千阙歌</strong><span>陈慧娴</span>

<em>……在线试听</em></li> <li><strong>走过咖啡屋</strong><span>千百惠</span>

<em>……在线试听</em></li> <li><strong>追梦人</strong><span>凤飞飞</span>

<em>……在线试听</em></li> <li><strong>饿狼传说</strong><span>张学友</span>

<em>……在线试听</em></li> <li><strong>雨一直下</strong><span>张宇</span>

<em>……在线试听</em></li> <li><strong>爱如潮水</strong><span>张信哲</span>

<em>……在线试听</em></li> <li><strong>朋友</strong><span>周华健</span>

<em>……在线试听</em></li> <li><strong>大海</strong><span>张雨生</span>

<em>……在线试听</em></li> <li><strong>我可以抱你吗</strong><span>张惠妹</span>

<em>……在线试听</em></li> </ol></div>图4-18无序列表的页面效果（2）在头部标签中添加<style>标签，在其中输入以下代码，设置列表样式。.d1{width:300px;height:380px;border:solid#758898;}/*设置div元素的宽度、高度与边框*/font-size:1.5em;text-indent:1em;border-bottom:#758898dotted2px;}/*设置p元素的内外边距、背景颜色与文本颜色，字号为默认值的1.5倍，添加1字符的缩进与底边边框*/.music{padding:10px;margin:0px0px0px20px;}/*设置有序列表的内外边距*/li{margin-top:10px;}/*设置列表项的上外边距*/lispan{margin-left:10px;color:#9e9e9e;font-style:italic;}/*设置歌手名的左外边距与字体颜色，添加斜体效果*/strong:hover{color:#585858;text-decoration:underline;}/*设置文本颜色，添加下划线效果*/em{font-size:0.9em;float:right;text-decoration:underline;}/*设置em元素的字号为默认值的0.9倍，向右浮动，添加下划线效果*/【学生】聆听、思考、理解【教师】巡视课堂，督促学生学习【学生】记录操作要点，巩固课堂内容通过讲解知识点，让学生进一步了解CSS3美化表列表的实际应用，熟悉CSS3语言的编写课堂练习

（12min）【教师】布置课堂练习内容美化“网上书店”页面的导航条本任务实施对“网上书店”页面中的导航条进行美化，进一步巩固使用列表制作导航条的方法【教师】演示重点操作流程在样式文档中添加以下代码，设置整体样式body,nav,ul{margin:0;padding:0;}/*去除body、nav、ul元素的内外边距*/body{background:#e5ede2;} /*设置页面背景颜色*/nav{height:50px;background-color:#9194B5;}/*设置nav元素的高度为50px，背景颜色为紫色*/.menu{height:50px;width:900px;margin:0auto;}/*设置导航条的高度为50px，宽度为900px，上下外边距为0px，左右外边距根据浏览器窗口大小自动调节*/继续在样式文档中的ulli{…}内添加以下代码，设置列表项

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论