版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
《》教案20-20学年第学期课程名称：授课教师：职称：开课部门：年月日
《》教案首页课程名称授课专业班级授课教师职称部门课程类型学位课□公共必修课□专业必修课□素质拓展必修课□公共选修课□专业选修课□素质拓展选修课非学位课□公共必修课专业必修课□素质拓展必修课□公共选修课□专业选修课□素质拓展选修课课程性质□理论□实践理论+实践考核方式考试□考查课程教学总学时数64学分3.5学情分析大*年级的学生首次正式接触WEB的相关概念，但是在之前的基础课程中学过***（操作系统、计算机原理、Python编程、C语言编程）等相关专业方面基础知识，具备有一定的计算机操作能力，与基础应用知识；并且在日常中大量使用电脑与手机等计算机设备，其中日常生活中也对于网页的使用更是颇多。但对于WEB方面的专业知识没有一个准确、完整的知识体系构建。教学方法谈论法、讲授法、演示法、练习法、抽象法教材名称《HTML5+CSS3Web前端开发技术》作者于丽娜出版社及出版时间人民邮电出版社2021.09参考书目作者出版社及出版时间教研室意见教研室主任签字：年月日注：表中□选项请打“√”。每门课程只需填写一次本表。
《》教案授课教师班级学时6授课日期教学任务《使用CSS3弹性盒子布局页面》授课方式讲授实践授课地点多媒体教室实验/实训室□企业主要参考资料教学PPT、微课、动画、思维导图课程思政视频习题等教学目标素质目标：1.培养学生的时间意识；培养学生的职业素养意识；培养学生与本专业发展相适应的劳动素养。知识目标：1.了解弹性盒子的特点与优势；掌握弹性布局。能力目标：1.掌握使用弹性布局替换浮动布局；2.熟练使用弹性盒子布局。教学内容CSS3弹性盒子结构CSS3弹性盒子主轴方向CSS3弹性盒子主轴对齐方式CSS3弹性盒子交叉轴对齐方式弹性盒子优势重点难点教学重点：CSS3弹性盒子结构CSS3弹性盒子主轴方向CSS3弹性盒子主轴对齐方式CSS3弹性盒子交叉轴对齐方式教学难点：CSS3弹性盒子主轴对齐方式CSS3弹性盒子交叉轴对齐方式教学方法谈论法、讲授法、演示法、练习法素材资源R文本素材R实物展示RPPT幻灯片□音频素材R视频素材R动画素材R图形/图像素材□网络资源□其他课后作业任务一：总结提升任务二：能力进阶教学反思注：教案按授课次数填写，每次授课均应填写一份本表。重复班授课可不另填写教案。
教学过程及内容一、导入新课【约5分钟】教师：Flex弹性布局是CSS3的一种新的布局模式。是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。弹性盒布局的设计目是提供一种有效的方法，对一个容器中的子元素进行排列、对齐和分配空白空间。从而避免传统div+css布局方式中，需要依赖大量的盒模型内外边距来调整，而导致项目页面宽度灵活适应性差；混乱的边距使用方式，导致项目难以修改维护。弹性盒子的优势体现在移动端，可以快速实现各种灵活的布局，提高开发效率，希望同学们以此为借鉴，要珍惜时间，提高学习和工作效率。本单元将之前使用浮动方式布局的页面通过弹性盒子进行改造。二、新知识点、技能点讲解【约x分钟】新课讲解1：【约10分钟】教师：弹性盒子是CSS3的一种新的布局模式。是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。弹性盒布局模型设计目是提供一种有效的方法，对一个容器中的子元素进行排列、对齐和分配空白空间。传统布局——基于盒子模型，依赖display属性、float属性、position属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。并且，传统布局代码冗长，出错率高，要时刻注意清除浮动或者在进行绝对定位时给父元素添加相对定位。否则就容易造成页面布局混乱。Flex布局就就可以避免以上情况。Flex是FlexibleBox的缩写，意为“弹性布局"，用来为盒模型提供最大的灵活性与便捷性。任何一个容器都可以指定为Flex布局，形成弹性盒子。可以是块状元素，也可是行内元素。弹性盒子由两部分组成，一个容器，一个是项目。容器，指的是被设定为弹性盒子的父元素；项目，指的是在容器中的子元素。容器和项目的概念是相对的，一个弹性布局中的项目元素，也可以设定为弹性盒子，作为其内部的子元素的容器，这些子元素也是对应这个容器的项目。需要注意的是，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。新课讲解2：【约15分钟】教师：（案例演示）我们先通过如下代码来实现一个简单的弹性布局：<!DOCTYPE
html><html><head>
<meta
charset="utf-8">
<title>弹性盒子</title>
<style>
.flex-container
{
display:
flex;
width:
400px;
height:
300px;
background-color:
lightblue;
}
.flex-item
{
width:
100px;
height:
100px;
}
.flex-item-1{
background-color:
orange;
}
.flex-item-2{
background-color:
burlywood;
}
.flex-item-3{
background-color:
bisque;
}
</style></head><body><div
class="flex-container">
<div
class="flex-item
flex-item-1">flex
item
1</div>
<div
class="flex-item
flex-item-2">flex
item
2</div>
<div
class="flex-item
flex-item-3">flex
item
3</div>
</div></body></html>页面文件保存后运行，我们将会得到如下的效果：学生：（讨论分析）教师：外部div充当了弹性盒子，也就是容器；内部div则作为项目。容器默认存在两根轴，主轴，默认为水平方向从左向右的矢量；交叉轴，矢量方向与主轴垂直。三个项目首先按照主轴方向进行排列，即从左向右水平排列；之后再在每个项目所在的纵轴方向进行对齐，默认项目靠近主轴一侧对齐并垂直完全填充。这里由于项目已经默认设定了宽高，设定高度致使项目在交叉轴上仅靠近主轴对齐，而没有进行拉伸填充。新课讲解3：【约15分钟】教师：弹性盒子容器有以下6种属性：flex-direction属性决定主轴的方向（即项目的排列方向）。row（默认值）：主轴为水平方向，起点在容器左上角，终点点在右上角，方向向右。row-reverse：主轴为水平方向，起点在右上角，终点点在右上角，方向向左。column：主轴为垂直方向，起点在容器左上角，终点点在左下角，方向向下。 column-reverse：主轴为垂直方向，起点在容器左下角，终点点在左上角，方向向上。分别在上面的基础案例的css代码的.flex-container样式中，添加flex-direction:row|row-reverse|column|column-reverse。这里我们把主轴看作是沿着容器上边沿和左边沿的一条有方向的线，交叉轴则是垂直于主轴的，交叉轴的方向并不重要，可以看作是双向的。flex-wrap属性决定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。产生的新行与已有的行会平分交叉轴上的控件。nowrap（默认）：不换行。如果项目总长超过容器，则项目在主轴方向上进行平均压缩。wrap：可以换行，新行在远离主轴一侧产生。wrap-reverse：可以换行，新行在靠近主轴一侧产生。新课讲解4：【约45分钟】教师：这里我们把主轴看作是沿着容器上边沿和左边沿的一条有方向的线，交叉轴则是垂直于主轴的，交叉轴的方向并不重要，可以看作是双向的。flex-wrap属性决定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。产生的新行与已有的行会平分交叉轴上的控件。nowrap（默认）：不换行。如果项目总长超过容器，则项目在主轴方向上进行平均压缩。wrap：可以换行，新行在远离主轴一侧产生。wrap-reverse：可以换行，新行在靠近主轴一侧产生。新建页面文件，编写如下代码：<!DOCTYPE
html><html><head>
<meta
charset="utf-8">
<title>弹性盒子</title>
<style>
.flex-container
{
display:
flex;
flex-direction:
row;
flex-wrap:
nowrap;
/*
flex-wrap:
wrap;
*/
/*
flex-wrap:
wrap-reverse;
*/
width:
400px;
height:
300px;
background-color:
lightblue;
}
.flex-item
{
width:
100px;
height:
100px;
margin:
5px;
background-color:
orange;
}
</style></head><body><div
class="flex-container">
<div
class="flex-item">1</div>
<div
class="flex-item">2</div>
<div
class="flex-item">3</div>
<div
class="flex-item">4</div>
<div
class="flex-item">5</div></div></body></html>并分别在.flex-container样式中，添加flex-wrap:nowrap|wrap|wrap-reverse。查看效果：图11-6图11-7图11-8新建页面文件，编写如下代码：<!DOCTYPE
html><html><head>
<meta
charset="utf-8">
<title>弹性盒子</title>
<style>
.flex-container
{
margin:
30px;
display:
flex;
justify-content:
flex-start;
/*
justify-content:
flex-end;
*/
/*
justify-content:
center;
*/
/*
justify-content:
space-between;
*/
/*
justify-content:
space-around;
*/
/*
justify-content:
space-evenly;
*/
width:
400px;
height:
300px;
background-color:
lightblue;
}
.flex-item
{
width:
100px;
height:
100px;
margin:
5px;
background-color:
orange;
}
</style></head><body><div
class="flex-container">
<div
class="flex-item">1</div>
<div
class="flex-item">2</div>
<div
class="flex-item">3</div>
</div></body></html>并分别在.flex-container样式中，添加justify-content:flex-start|flex-end|center|space-between|space-around|space-evenly。justify-content属性：定义了项目在主轴上的对齐方式。flex-start（默认值）：在主轴方向上靠近起始点一侧对齐；flex-end：在主轴方向上靠近主轴终点一侧对齐；center：居中；space-between：两端对齐，项目之间的间隔都相等，两侧不留空间；space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。space-evenly：每个项目之间与两侧项目与容器边缘距离都相等，平均分割了容器的剩余空间。查看效果：图11-9新课讲解5：【约20分钟】教师：align-item属性，定义项目在交叉轴（垂直轴）上如何对齐。flex-start：交叉轴的起点对齐。flex-end：交叉轴的终点对齐。center：交叉轴的中点对齐。baseline:项目的第一行文字的基线对齐。stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。学生：跟做新课讲解6：【约20分钟】教师：align-item属性，定义项目在交叉轴（垂直轴）上如何对齐。flex-start：交叉轴的起点对齐。flex-end：交叉轴的终点对齐。center：交叉轴的中点对齐。baseline:项目的第一行文字的基线对齐。stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。新建页面文件，编写如下代码：<!DOCTYPE
html><html><head>
<meta
charset="utf-8">
<title>弹性盒子</title>
<style>
.flex-container
{
margin:
30px;
display:
flex;
align-items:
flex-start;
/*
align-items:
flex-end;
*/
/*
align-items:
center;
*/
/*
align-items:
center;
*/
/*
align-items:
stretch;
*/
/*
align-items:
baseline;
*/
width:
400px;
height:
300px;
background-color:
lightblue;
}
.flex-item
{
width:
100px;
height:
100px;
border:
1px
solid
#000;
background-color:
orange;
}
</style></head><body><div
class="flex-container">
<div
class="flex-item">1</div>
<div
class="flex-item">2</div>
<div
class="flex-item">3</div>
</div></body></html>并分别在.flex-container样式中，添加align-items:
flex-start|flex-end|center|stretch|baseline。查看效果：图11-10图11-11图11-12图11-13图11-14align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。flex-start：与交叉轴的起点对齐。flex-end：与交叉轴的终点对齐。center：与交叉轴的中点对齐。space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。stretch（默认值）：轴线占满整个交叉轴。新建页面文件，编写如下代码：<!DOCTYPE
html><html><head>
<meta
charset="utf-8">
<title>弹性盒子</title>
<style>
.flex-container
{
margin:
30px;
display:
flex;
flex-direction:
row;
flex-wrap:
wrap;
/*
align-content:
flex-start;
*/
/*
align-content:
flex-end;
*/
/*
align-content:
center;
*/
/*
align-content:
stretch;
*/
/*
align-content:
space-between;
*/
align-content:
space-around;
width:
400px;
height:
300px;
background-color:
lightblue;
}
.flex-item
{
width:
100px;
height:
100px;
margin:
5px;
background-color:
orange;
}
</style></head><body><div
class="flex-container">
<div
class="flex-item">1</div>
<div
class="flex-item">2</div>
<div
class="flex-item">3</div>
<div
class="flex-item">4</div>
<div
class="flex-item">5</div>
</div></body></html>并分别在.flex-container样式中，添加align-content:
flex-start|flex-end|center|stretch|space-between|space-around。查看效果：图11-15图11-16图11-17图11-18图11-19图11-20学生：跟做新课讲解7：【约20分钟】项目元素可以有如下6个属性：order、flex-grow、flex-shrink、flex-basis、flex、align-selforder属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。<!DOCTYPE
html><html><head>
<meta
charset="utf-8">
<title>弹性盒子</title>
<style>
.flex-container
{
margin:
30px;
display:
flex;
width:
400px;
height:
200px;
background-color:
lightblue;
}
.flex-item
{
width:
100px;
height:
100px;
}
.flex-item-1{
background-color:
orange;
order:
1;
}
.flex-item-2{
background-color:
burlywood;
order:
2;
}
.flex-item-3{
background-color:
bisque;
order:
1;
}
</style></head><body><div
class="flex-container">
<div
class="flex-item
flex-item-1">1
order
1</div>
<div
class="flex-item
flex-item-2">2
order
2</div>
<div
class="flex-item
flex-item-3">3
order
1</div>
</div></body></html>得到如下结果：图11-21flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。<!DOCTYPE
html><html><head>
<meta
charset="utf-8">
<title>弹性盒子</title>
<style>
.flex-container
{
margin:
30px;
display:
flex;
width:
400px;
height:
200px;
background-color:
lightblue;
}
.flex-item
{
width:
100px;
height:
100px;
}
.flex-item-1{
background-color:
orange;
}
.flex-item-2{
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 2025部门级安全培训考试试题标准卷
- 2024-2025车间安全培训考试试题及参考答案（模拟题）
- 2024-2025安全培训考试试题【综合卷】
- 【部编版】四年级语文下册习作《故事新编》精美课件
- 2025钢筋班组承包合同
- 2025农产品采购合同样本协议
- 2025上海赛宝网络科技发展有限公司合同代理协议汇编
- 2025《设备购销合同模板》
- 2025年合成材料抗氧化剂项目建议书
- 2025二手房屋买卖合同官方版空白
- DB3301∕T 0451-2024 医学美容机构电子病历系统技术规范
- 《大国浮沉500年：经济和地理背后的世界史》记录
- 水工维护初级工技能鉴定理论考试题库（含答案）
- 运维项目进度计划
- 商场中央空调租赁协议模板
- 十八项核心制度
- 浙江省杭州市2023-2024学年六年级下学期期中模拟测试数学试卷（人教版）
- 国家开放大学《Python语言基础》实验4：条件分支结构基本应用参考答案
- OTA代运营协议文档
- 内分泌科常见急危重症抢救流程
- 污染源权重分析报告
评论
0/150
提交评论