版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
《》教案20-20学年第学期课程名称：授课教师：职称：开课部门：年月日
《》教案首页课程名称授课专业班级授课教师职称部门课程类型学位课□公共必修课□专业必修课□素质拓展必修课□公共选修课□专业选修课□素质拓展选修课非学位课□公共必修课专业必修课□素质拓展必修课□公共选修课□专业选修课□素质拓展选修课课程性质□理论□实践理论+实践考核方式考试□考查课程教学总学时数64学分3.5学情分析大*年级的学生首次正式接触WEB的相关概念，但是在之前的基础课程中学过***（操作系统、计算机原理、Python编程、C语言编程）等相关专业方面基础知识，具备有一定的计算机操作能力，与基础应用知识；并且在日常中大量使用电脑与手机等计算机设备，其中日常生活中也对于网页的使用更是颇多。但对于WEB方面的专业知识没有一个准确、完整的知识体系构建。教学方法谈论法、讲授法、演示法、练习法、抽象法教材名称《HTML5+CSS3Web前端开发技术》作者于丽娜出版社及出版时间人民邮电出版社2021.09参考书目作者出版社及出版时间教研室意见教研室主任签字：年月日注：表中□选项请打“√”。每门课程只需填写一次本表。
《》教案授课教师班级学时6授课日期教学任务《使用CSS3浮动布局页面》授课方式讲授实践授课地点多媒体教室实验/实训室□企业主要参考资料教学PPT、微课、动画、思维导图课程思政视频习题等教学目标素质目标：1.培养学生团队合作精神；2.培养学生主动学习的能力，独立思考、分析问题、解决问题的能力。知识目标：1.了解display的4种状态；2.了解浮动的特点；3.了解如何清除浮动；4.了解浮动导致崩塌的解决方法及其优缺点。能力目标：1.熟练使用浮动的方式进行元素水平两端布局或者水平排列布局；2.熟练解决由于浮动导致的结构崩塌问题。教学内容标准文档流displayCSS3浮动CSS3清除浮动CSS3解决浮动导致的高度塌陷重点难点教学重点：CSS3浮动CSS3清除浮动CSS3解决浮动导致的高度塌陷教学难点：CSS3清除浮动CSS3解决浮动导致的高度塌陷教学方法谈论法、讲授法、演示法、练习法素材资源R文本素材R实物展示RPPT幻灯片□音频素材R视频素材R动画素材R图形/图像素材□网络资源□其他课后作业任务一：总结提升任务二：能力进阶教学反思注：教案按授课次数填写，每次授课均应填写一份本表。重复班授课可不另填写教案。
教学过程及内容一、导入新课【约5分钟】教师：使用DIV+CSS进行网页布局，实际上是使用CSS排版网页元素，这是一种很新的排版理念，完全有别于传统的排版习惯。根据页面期望的结构，使用div标签与CSS样式配合进行页面布局，使得这些div完成布局，设定的div标签作为容器，再取包裹相应的内容元素。这种方式就能有效地进行内容与样式的分离，并且页面的布局不再受标签元素的默认样式过多的影响。使用display改变元素特性进行网页元素的排版，使用浮动排版网页元素，并且根据网页布局需要对浮动进行清除，通过多角度分析父元素高度塌陷的原因。希望同学们遇到困难或问题要认真分析，提升解决的问题。最后讲解display和float排版各自的优缺点，使大家能合理地在不同场合用不同的布局方式。二、新知识点、技能点讲解【约x分钟】新课讲解1：【约20分钟】教师：新云课堂项目的开发中，要解决通用头部的左右布局，成长之路的水平排列等效果也都需要用到浮动布局的方式来解决。......标准文档流是指元素根据块元素或行内元 素的特性按从上到下，从左到右地方式自然排列。这也是元素默认的排列方式。我们在本学习单元之前的页面内容均是在标准文档流下的排列结果。简单来说标准文档流的规则就是：从左至右、从上至下的规则。在前面的学习过程中，我们将HTML的元素进行了分类。分为以div的代表的块状元素；以span为代表的内联元素。如果不更改其特性那么页面的效果自然会收到默认样式的影响，很难做出精美的页面效果，css为我们提供了一种改变其特性的方式------display属性。......(案例演示)新课讲解2：【约20分钟】教师：通过为display设定不同的属性值，可以将元素的特性进行修改。这里css样式不仅提供了基础的块状元素、内联元素特性，还为我们另外提供了内联块状特性与none特性。其中内联块状特性是既具有行内元素的在一行内从左向右排列的特性，也具有块元素的可以指定元素宽高的特性；none的属性值，会让元素相当于被屏蔽掉。值说明block块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符inline行内元素的默认值，元素会被显示为行内元素，该元素前后没有换行符inline-block行内块元素，元素既具有行内元素的特性，也具有块元素的特性none设置元素不会被显示新课讲解4：【约35分钟】教师：float属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在CSS中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。（案例演示）实际上浮动是起初是为了页面中的图片能够使实现类似于word中的图片浮于文字的排版效果。如图。我们如何理解这种浮动效果呢？我们可以看到再默认的标准文档流中，所有的在同一行的内联元素是默认以底边对齐，而我们对图片进行浮动之后，图片脱了标准文档流，按照优先靠左或者优先靠右的顺序悬浮在之前的文档流之上，与相邻的文本内容产生了重叠，而如果重叠的区域有内联元素（如文字），则内联元素则会自动躲避浮动的重叠区域，继续按照标准文档流的从左到右，从上到下的方式排列。经验分享：并且浮动的元素会有一个收缩特性，当被浮动的元素没有指定宽高时，其浮动后的宽高由其所包含的内容宽高决定。新课讲解5：【约35分钟】教师：CSS中clear属性规定元素的哪一侧不允许其他浮动元素，官方解释为“元素盒子的边不能和前面的浮动元素相邻"。设置了clear的元素只能通过调整自身来使自己不要和浮动元素排列在一起。比如说，如果一个元素同时设置了float:left和clear:left，希望左边不要有浮动元素，那么这个元素就要调整自己，排到下一行去。因为设置了float:left，这个元素会往左边靠拢，所以这个元素会跑到下一行，同时往左浮动。新课讲解6：【约30分钟】教师：我们在上一个案例中看到浮动虽然能够实现一定的布局，但是会有一个明显的副作用，浮动的元素有可能因为脱离文档流而导致父元素高度塌陷。我们来回忆造成父元素高度塌陷的原因有：1.父元素的高度自适应，由实际子元素内容决定2.父元素中撑起高度的子元素，浮动后由于脱离文档流而导致不占用父元素空间，从而无法撑起父元素高度从原因上我们着手去解决该问题。方法1：我们给包含浮动元元素的父元素指定确定的高度值，从而解决由高度自适应产生的塌陷问题。示例图8-10代码<!DOCTYPE
html><html><head>
<meta
charset="utf-8">
<title>清除浮动</title>
<style>
#father
{
width:
650px;
/*手动指定高度*/
height:
300px;
border:
5px
solid
#000000;
}
.d1
{
width:
100px;
height:
100px;
background-color:
#008000;
float:
right;
}
.d2
{
width:
200px;
height:
200px;
background-color:
#0066CC;
float:
left;
}
</style></head><body>
<div
id="father">
<div
class="d1"></div>
<div
class="d2"></div>
</div></body></html>我们给页面中的#father元素手动指定高度值300px，则可以避免出现崩塌，但是需要根据内容的高度去收手动计算，不能灵活适应页面内容。方式2：我们从子元素脱离文本流的问题入手，我们不能直接让浮动的子元素对父元素产生影响，但我们可以通过清除浮动的方式，让浮动元素对其他的子元素产生影响，即在最后的浮动元素之下添加一个高度为0的块状元素，并让该新增元素对浮动元素进行浮动清除处理，这样相当于得到了一个浮动元素未浮动前下方紧邻的一个下边框进行占位，从而也能有效地撑开父元素高度。示例图8-11代码<!DOCTYPE
html><html><head>
<meta
charset="utf-8">
<title>清除浮动</title>
<style>
#father
{
width:
650px;
border:
5px
solid
#000000;
}
.d1
{
width:
100px;
height:
100px;
background-color:
#008000;
float:
right;
}
.d2
{
width:
200px;
height:
200px;
background-color:
#0066CC;
float:
left;
}
</style></head><body>
<div
id="father">
<div
class="d1"></div>
<div
class="d2"></div>
<!--
在父元素内最后手动添加一个具有清除浮动特性的况状元素
-->
<div
style="clear:
left"></div>
</div></body></html>这种方式可有有效的解决父元素高度塌陷问题，而且也能自动根据浮动元素的高度而调整。但是唯一缺点就是在html中增加了没有实际内容含义的元素，违背“内容与样式分离"的原则。方法3：根据方法2的思路进行了优化。这里我们优化手动添加块状元素为自动追加块状元素，这样在源码的角度下，解决了无内容意义的元素问题。我们借助css的伪元素after选择器。代码<!DOCTYPE
html><html><head>
<meta
charset="utf-8">
<title>清除浮动</title>
<style>
#father
{
width:
650px;
border:
5px
solid
#000000;
}
/*
通过after伪元素在父元素最后添加一个元素并设定元素内容为空
块状元素
清除两侧浮动
*/
#father:after
{
content:
"";
display:
block;
clear:
both;
}
.d1
{
width:
100px;
height:
100px;
background-color:
#008000;
float:
right;
}
.d2
{
width:
200px;
height:
200px;
background-color:
#0066CC;
float:
left;
}
</style></head><body>
<div
id="father">
<div
class="d1"></div>
<div
class="d2"></div>
</div></body></html>这里我们一般情
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 2026年西双版纳州勐腊县统计局选调事业编制工作人员（2人）备考题库新版
- 2026年天津市北辰区中医医院公开招聘事业单位6人参考题库新版
- 2026年甘肃省定西市渭源县新寨镇卫生院招聘检验专业人员和乡村医生参考题库及答案1套
- 2026年甘肃钢铁职业技术学院单招综合素质考试题库及答案1套
- 2026年查询心理考试题库往年题考
- 2026年大理护理职业学院单招职业技能测试模拟测试卷及答案1套
- 2026年常州纺织服装职业技术学院单招综合素质考试模拟测试卷及答案1套
- 2026年安徽工业职业技术学院单招职业技能考试模拟测试卷及答案1套
- 2025年金融理财产品设计与销售指南
- 2026年淄博入团考试试题（预热题）
- 变电站变压器吊装施工方案
- 民事检察案例汇报
- 断骨增高手术护理教程
- 2025秋季学期国开电大法学本科《国际私法》期末纸质考试简述题题库珍藏版
- 2025年道教传度考试题及答案
- 微机电系统（MEMS）技术 柔性微机电器件循环弯曲变形后电气特性测试方法 编制说明
- 小区充电桩转让合同范本
- （2025年标准）国债使用协议书
- 如何说孩子才会听-怎么听孩子才肯说
- 2025年南京市事业单位教师招聘考试体育学科专业知识试卷（秋季篇）
- 2021年普通高等学校招生全国统一考试英语试卷（天津卷）含答案
评论
0/150
提交评论