中等专业学校2022-2023-2教案
编号：
备课组别
计算机
课程名称
网页设计与制作
所在
年级
二年级
主备
教师
授课教师
授课系部
授课班级
授课
日期
课题
模块三 3.3  Flex布局
教学
目标
1.了解Flex的基本概念和容器的常用属性
2.学会使用Flex布局和美化页面
重点
了解Flex的基本概念和容器的常用属性
难点
使用Flex布局和美化页面
教法
讲练法、演示法、任务驱动法
教学设备
多媒体机房
教学
环节
教学活动内容及组织过程
个案补充
教
学
内
容
教
学
内
容
教
学
内
flex布局对齐方式
容
【复习导入】
    引导学生回顾上节课学习内容
【教学过程及内容】
预备知识：
Flex 是 Flexible  Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。
.box{
  display: flex;}
行内元素也可以使用 Flex 布局。
.box{
  display: inline-flex;}
注意：设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
基本概念：
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目，简称"项目"。
容器的常用属性：
（1）flex-direction属性：决定主轴的方向（即项目的排列方向）。
.box {flex-direction: column-reverse | column | row |row-reverse；}
图3-1  flex-direction效果
·column-reverse：主轴为垂直方向，起点在下沿。
·column：主轴为垂直方向，起点在上沿。
·row（默认值）：主轴为水平方向，起点在左端。
·row-reverse：主轴为水平方向，起点在右端。
（2）flex-wrap属性:默认情况下，项目都排在一条线（又称"轴线"）上,flex-wrap属性定义，如果一条轴线排不下，如何换行。
.box{  flex-wrap: nowrap | wrap | wrap-reverse;}
nowrap（默认）：不换行。
wrap：换行，第一行在上方。
·wrap-reverse：换行，第一行在下方。
（3）justify-content属性：定义项目在主轴上的对齐方式。
.box {justify-content: flex-start| flex-end | center | space-between | space-around；}
具体对齐方式与轴的方向有关,下面假设主轴为从左到右。
flex-start（默认值）：左对齐。·flex-end：右对齐。
·center：居中。·space-between：两端对齐，项目之间的间隔都相等。space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
（4） align-content属性：定义多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
.box {align-content: flex-start | flex-end | center | space-between | space-around | stretch；}     
CSS圆角属性
（1）常用的圆角设计案例有以下两种
指定背景颜的元素圆角  指定边框的元素圆角
（2）使用 border-radius属性，可以给任何元素制作“圆角”,CSS设计器属性设置如图3-96所示。
图3-2  border-radius属性
border-radius属性中只指定一个值，将生成 4 个圆角；在四个角上一一指定，可以使用以下规则：
·四个值:第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
·三个值:第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
·两个值:第一个值为左上角与右下角，第二个值为右上角与左下角
·一个值：四个圆角值相同     
【课堂小结】
教师引导学生小结本课所学内容。
【作业布置】
总结本课所学操作实用技巧。
板
书
设
计
模块三 3.3  Flex布局
1.Flex布局
2.基本概念
3.容器的常用属性
4.CSS圆角属性
教后札记

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。