10.7.3-align-items属性（教案）-《网页设计与制作(html5+css3+javascript)》同步教学（清华大学出版社）

教案 编号：PT-323 流水号：116 （首页）共 4页 课程 《网页设计与制作(html5+css3+javascript)》 一体化 理论 章节（课题）及内容 alignitems属性 班级日期 中职 2024.05 授课方式 讲授与任务驱动相结合 课时 1 作业题数 1 拟用时间 40分钟 教学目标 使学生理解以下理论知识： 1. 知识与技能：掌握align-items属性的基本概念、作用及常见取值。 2. 过程与方法：通过案例分析，让学生了解align-items属性在弹性盒子布局中的应用。 3. 情感态度与价值观：培养学生自主学习、解决问题的能力，激发学生对前端开发的兴趣。 教学资源准备 多媒体设备 课本教材 学生练习素材 教学重点 1. align-items属性的基本概念和作用。 2. align-items属性的常见取值及其效果。 教学难点 如何根据实际需求选择合适的align-items属性值。 教学方法 讲授法、任务驱动法、演示法、体验探究法等。 · 案例分析法：通过实际案例，让学生更好地理解align-items属性的应用场景和效果。 · 实践操作法：让学生亲自动手操作，加深对知识点的理解和掌握。 授课教师： 审阅签名： 教学过程 教学活动内容 时间分配教学方法 课前导入 1. 回顾弹性盒子布局的基本概念和布局方法。 2. 介绍align-items属性的概念及其在弹性盒子布局中的作用。 2分钟 讲授新课 练习指导 align-items属性是CSS中的一个属性，用于控制弹性盒子（flexbox）中弹性项目在交叉轴（cross axis）上的对齐方式。以下是关于align-items属性的基本概念和作用以及常见取值及其效果的详细介绍： 一、align-items属性的基本概念和作用 align-items属性用于控制弹性项目在交叉轴上的对齐方式。它可以让弹性项目在交叉轴上按照一定的规则进行排列，从而实现不同的布局效果。 二、align-items属性的常见取值及其效果 1. `flex-start`：项目在交叉轴起点对齐。 ```css .container { display: flex; align-items: flex-start; } ``` 2. `flex-end`：项目在交叉轴终点对齐。 ```css .container { display: flex; align-items: flex-end; } ``` 3. `center`：项目在交叉轴居中对齐。 ```css .container { display: flex; align-items: center; } ``` 4. `baseline`：项目的基线对齐。 ```css .container { display: flex; align-items: baseline; } ``` 5. `stretch`（默认值）：项目填充整个交叉轴。 ```css .container { display: flex; align-items: stretch; } ``` 通过设置不同的align-items属性值，可以实现弹性盒子中弹性项目在交叉轴上的不同对齐方式。在实际应用中，可以根据需求灵活调整align-items属性值，以实现更丰富的布局效果。 10分钟 7分钟 自主学习 8分钟 练习训练 1. 请为以下网页内容设计一个弹性盒子布局方案，并使用align-items属性进行对齐： 1. 一个导航栏 2. 一个轮播图 3. 三个文章列表项 2. 根据以下需求，调整弹性盒子布局的对齐方式： 2. 实现导航栏在顶部居中对齐。 2. 实现轮播图在交叉轴上居中对齐。 2. 实现文章列表项在交叉轴上等间距排列。 12分钟 布置作业 1. 完成课后习题练习。 2. 在自己的项目中尝试使用align-items属性进行布局对齐。 1分钟 总结回顾 第 1 页，共 2 页 学科网（北京）股份有限公司 $$