电子商务网页设计与制作 教案 第24次课 CSS设置网页表格

湖南商务职业技术学院教案第一题超级链接有四种状态，其中表示鼠标悬停状态的是Aa:linkBa:visitedCa:hoverDa:active第二题同一个网页中超级链接的样式可以做不同的设置，现在网页上有两个链接，请将网页中链接设置为两种样式，一种为正常链接为黑色，没有下划线；另外一种为:正常链接为红色，没有下划线；请写出相应的代码进行回复链接1错接2第三题现有一个图片如下图所示，宽25px高220px另网页中还有一个无序列表，现在要实现如图效果，请问css样式改如何设置，写来进行回复知识回顾10min■■■■■图片■列表:

1.【课堂活动】教师通过开展各种课堂活动回顾上次课知识点

1.学生积极参与课堂活动我的神奇周笔畅火山伍佰无法言喻弥散］颖幸福额度苏打绿荷塘月色凤凰传奇爱是你我刀郎漫步人生路邓丽君不要不要卓文登遇上你是我的缘央金兰泽罢苹果周笔畅divid=rwrapperrrul我的神奇周室畅/]£〈工工〉火山伍佰〈/工工〉工£无色言□俞弓长青见呈页V/l£vli幸福额度苏fl■绿/Ti11荷塘月色凤凰传奇v/1工〉1i爰是4尔我71良漫步人生路邓丽君11〉不要不要卓文萱/1£]£遇上你是我的缘央金兰泽/1111黑苹果周笔畅/I1/ul/divn我的神奇周笔畅s火山伍佰E1无法言喻张靓颖■幸福额度苏打绿荷塘月色凤凰传奇7漫步人生路邓丽君0不要不要卓文萱■遇上你是我的缘央金兰泽

1、CSS设置表格border-collapse属性表格中两个相邻单元格若都设置了边框线，就会出现双边框线的效果，使用border-collapse属性将两条边框线可以合并为一条边框线border-collapse属性设置表格的边框是否被合并为一个单一的边框，还是像在标准的HTML中那样分开显示border-collapse属性有三种取值，分别为separate:默认值边框会被分开collapse:如果可能，边框会合并为一个单一的边框inherit:规定应该从父元素继承border-collapse属性的值任何的版本的InternetExplorer包括IE8都不支持属性值“inherit”，所以该值不建议使用注意border-collapse属性必须放到table元素中使用border-collapse属性的网页，一定要规定！DOCTYPE否则border-collapse可能产生意想不到的结果图3-3-2所示的表格中，单元格之间呈现细线表格的效果，这里就采用了border-collapse属性2016年第四季度销售情况表单位万元图3-3-2表格效果2带背景图片的表格表格中还可以设置背景图片，如图3-3-5所示，表头与单元格均设置了不同的背景效果带背景的表格3设置鼠标悬停变换效果的表格还有一种表格，当鼠标悬停到单元格上时，单元格内的背景或者文字颜色会变换，如图3-3-7所示，表头与单元格鼠标悬停高亮的CSS样式表格均设置了不同的背景效果课堂讨论CSS实现鼠标悬停高光表格的关键代码是什么呢？技能训练组织学生完成作业“331CSS设置网页表格练习题”，并按要求提交作业❷技能训练请完成作业css设置网页表格效果练习题技能训练30min.【实操演示】教师技能训练任务，并进行实操演示.【发布任务】教师在学习通发布技能任务.【实践指导】来回巡视，及时帮助学生解决问题.学生查看技能训练任务.完成技能训练题aabbccdd鼠标悬停效果知识检测10min第一题在网页中插入一个如下的表格，请写出代码回复第二题给第一题的表格进行美化，效果如下，请写出css代码回复.【发布任务】教师在学习通发布活动.【归纳总结】来回巡视，及时帮助学生解决问题完成知识检测第三题将第二题的表格变成如下图的单线表格，需要增加什么样的CSS代码，写出来回复aabb1122第四题继续美化第三题的表格，制作如下效果，需要怎么做才能实现呢？写出代码回复课堂小结5min通过本节课，学生掌握插入表格、编辑表格的基本操作，认知并掌握CSS美化表格的方法主要学习网页表格的制作方法，希望能运用到实际制作过程中去，真正做到融会贯通作业布置

1.继续完成技能训练任务，并提交至学习通2预学下一次课的内容

3.课后讨论在刚才的学习与实践中，你学会了什么？你的难点在哪里教学反思授课章节及主题CSS设置网页表格课次24教学目标知识目标.掌握插入表格、编辑表格的基本操作.掌握CSS美化表格的方法能力目标能够掌握CSS美化网页表格的方法素养目标.培养学生清晰有序的逻辑思维；.培养学生数据分析与总结的意识；.培养学生系统分析与解决问题的能力学情分析知识基础学生已经CSS的盒子结构与表格元素有了一定的了解学生特点.学生爱学习爱思考爱表达，喜欢动手实践，但学生自律性不强，遇到困难时畏难.前续内容的知识绝大部分同学掌握较好，少部分同学操作不太熟练.解决较复杂问题能力比较弱，知识迁移能力有待加强教学重点/插入与编辑表格/CSS美化表格教学难点CSS美化表格教学方法讲授法案例演示法讨论法实践法线上线下混合式教学资源与平台教学平台超星学习通https://www.xueyinonline.com/detai1/221724252参考书.《电子商务网页设计与制作》，电子工业出版社.《HTML5+CSS3网页设计与制作》，人民邮电出版社参考网络资源.菜鸟教程https://www.runoob.com/.虎课网https://huke

88.com/教学过程设计环节教学内容教师活动学生活动产品类别地区销售额数码产品湖南200数码产品河南150数码产品山东180家居产品湖南220家居产品河南240家居产品山东222姓名籍贯出生日期李丽萍湖南1995年5月20日王春华河南199好6月8日班级姓名特长15电商1班李春辉网力设计15电商2班王小丽网店装修15电高3班赵丽萍网店运营15电向4班赵花花网络营销15电商5班汪礼国电话营销aabb1122aabb11aabb1122。