5.4-网页布局中overflow属性（教案）-《网页设计与制作(html5+css3+javascript)》同步教学（清华大学出版社）

教案 编号：PT-323 流水号：116 （首页）共 4页 课程 《网页设计与制作(html5+css3+javascript)》 一体化 理论 章节（课题）及内容 网页布局中overflow属性 班级日期 中职 2024.05 授课方式 讲授与任务驱动相结合 课时 1 作业题数 1 拟用时间 40分钟 教学目标 使学生理解以下理论知识： · 掌握overflow属性的基本概念和作用。 · 熟悉overflow属性的不同取值及其效果。 · 学会在网页布局中合理应用overflow属性。 教学资源准备 多媒体设备 课本教材 学生练习素材 教学重点 1. overflow属性的定义和作用。 2. overflow属性的常用取值及其效果。 3. 如何在网页布局中灵活运用overflow属性。 教学难点 1. overflow属性在不同浏览器中的兼容性问题。 2. 如何根据实际需求选择合适的overflow属性值。 教学方法 讲授法、任务驱动法、演示法、体验探究法等。 1. 案例分析法：通过分析实际案例，让学生更好地理解overflow属性的应用。 2. 演示法：教师现场演示如何使用overflow属性进行网页布局。 3. 探究法：鼓励学生自主探究，尝试不同的overflow属性值，观察效果。 授课教师： 审阅签名： 教学过程 教学活动内容 时间分配教学方法 课前导入 1. 回顾之前学过的CSS布局相关知识，如盒子模型、定位等。 2. 展示几个网页布局中常见的溢出问题的例子，引导学生思考如何解决这些问题。 2分钟 讲授新课 练习指导 `overflow` 属性是 CSS 中的一个重要属性，用于控制内容溢出元素框时的显示方式。 ### overflow 属性的定义和作用 `overflow` 属性用于设置当元素的内容超出其宽度或高度时，如何处理多余的内容。它主要有两个方面的作用： 1. **控制元素内容的显示**：当元素的内容超出其宽度或高度时，`overflow` 属性决定如何显示这些内容。 2. **影响元素的滚动条**：`overflow` 属性还可以决定是否显示滚动条，以及滚动条的类型。 ### overflow 属性的常用取值及其效果 `overflow` 属性有以下几个常用的取值： 1. **visible**：默认值。内容不会被裁剪，会呈现在元素框外。 2. **hidden**：内容会被裁剪，并且不显示滚动条。 3. **scroll**：内容会被裁剪，但是会显示滚动条，即使内容不超出元素框也会显示滚动条。 4. **auto**：根据需要自动显示滚动条。如果内容超出元素框，则显示滚动条。 ### 在网页布局中灵活运用 overflow 属性 在网页布局中，`overflow` 属性可以帮助我们实现多种效果，如下： 1. **隐藏多余内容**：当元素的内容超出其宽度或高度时，可以使用 `overflow: hidden;` 来隐藏多余的内容。这在很多场景下都很有用，比如导航栏、标签页等。 2. **添加滚动条**：当元素的内容确实需要滚动查看时，可以使用 `overflow: auto;` 或 `overflow: scroll;` 来添加滚动条。这样用户就可以通过滚动条来查看所有内容。 3. **创建固定高度的容器**：结合 `height` 或 `max-height` 属性，可以创建一个固定高度的容器，然后使用 `overflow` 属性来控制内容的显示方式。这在展示列表、日志等内容时非常有用。 4. **实现简易的响应式布局**：通过设置 `overflow: hidden;`，可以防止内容在小屏幕设备上溢出，从而实现简易的响应式布局。 下面是一个简单的例子，展示了如何使用 `overflow` 属性来控制元素内容的显示： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .container { width: 200px; height: 100px; border: 1px solid black; overflow: hidden; /* 控制内容显示方式 */ } </style> </head> <body> <div class="container"> 这里是内容，可能会超出容器的宽度和高度。 </div> </body> </html> ``` 在这个例子中，我们设置了一个宽度为 200px、高度为 100px 的容器，并使用 `overflow: hidden;` 来隐藏超出容器的内容。 10分钟 7分钟 自主学习 8分钟 练习训练 1. 给出几个网页布局的例子，让学生分析并选择合适的overflow属性值。 2. 让学生自己动手编写代码，实现一个具有滚动条的网页布局。 12分钟 布置作业 1. 完成课后习题，巩固所学知识。 2. 设计一个网页布局，要求合理运用overflow属性解决溢出问题。 1分钟 总结回顾 1. overflow属性的定义和作用。 2. overflow属性的常用取值及其效果。 3. 网页布局中overflow属性的应用场景和注意事项。 第 1 页，共 2 页 学科网（北京）股份有限公司 $$