第五单元 任务4 DIV+CSS布局（课件）-《计算机网络基础》（高等教育出版社）同步精品课堂

第五单元 任务4 DIV+CSS布局 计算机网络基础 同步精品课堂 高等教育出版社 任务一 盒模型结构 任务二 DIV+CSS布局 任务三 “保护濒危动物”网页页面布局 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 教学目标 一 1、学生能够深入理解盒模型的概念，包括内容（content）、内边距（padding）、边框（border）和外边距（margin）； 2、熟练运用 div 结合 CSS 进行网页布局，理解块级元素和行内元素在布局中的特点和应用； 3、掌握浮动属性（float）的作用，理解“浮动脱离文档流实现水平并列”的布局原理； 4、完成 “保护濒危动物” 网页页面的布局设计； 教学重难点 二 教学重点： 盒模型的组成与尺寸计算； float属性的基本用法； 清除浮动（clear）的方法； 教学难点： 理解浮动元素脱离文档流后对后续元素的影响（高度塌陷、元素遮挡）； 正确运用浮动和清除浮动实现稳定的多列布局； 提问：“同学们，这些计算机在网络中是如何准确找到对方进行通信的呢？” 导入新课 三 请你来为右边网页面划分模块？ 提问：“同学们，这些计算机在网络中是如何准确找到对方进行通信的呢？” 导入新课 三 搭建框架 header side main footer 这就是我们本节课要解决的核心问题： 对网页进行布局，解决元素堆积问题 任务一 盒模型结构 机位固定：摄像机本身不移动（如不推、拉、摇、移）。 新知讲授 四 布局一 布局二 活动一：学习两张图的布局方式 机位固定：摄像机本身不移动（如不推、拉、摇、移）。 新知讲授 二 优秀作品框画 要求：请用“ ”把页面划分区域结构 机位固定：摄像机本身不移动（如不推、拉、摇、移）。 新知讲授 二 优秀作品框画 要求：请用“ ”把页面划分区域结构 再试一试？ 新知讲授 一 问题：这些优秀作品布局有什么共同特点？ 新知讲授 一 HTML 元素被视为盒模型，含内容、内边距、边框和外边距。内容区域展示文本、图像等，由 width 和 height 设定尺寸。内边距（padding）调整内容与边框间距，边框（border）分离元素，外边距（margin）控制元素间距。width 和 height 仅指内容区域，总尺寸需加内边距、边框和外边距。 新知讲授 一 盒子模型的结构由四个部分组成：content（内容）、padding（内边距或填充）、border（边框）和margin（外边距）。 机位固定：摄像机本身不移动（如不推、拉、摇、移）。 新知讲授 二 在浏览器调试器中“Computed”可以看到它是怎么来解释一个元素的盒模型： 例如，在网页中创建一个<div>标签，ID标识为Div1，并在其中插入一个图像，代码如下： #apDiv1 { position:absolute; width:300px; height:181px; padding-top: 15px; padding-right: 18px; padding-bottom: 15px; padding-left: 18px; border: 30px solid #333; } 新知讲授 一 问题：例如padding: 10px 20px代表什么意思呢？ 第一个值为上、下内边距， 第二个值为右、左内边距。 追问：如何计算盒模型的尺寸呢？ 机位固定：摄像机本身不移动（如不推、拉、摇、移）。 新知讲授 二 ✅ 计算方法 总宽度 = 内容区域宽度（width）+左内边距（padding-left）+右内边距（padding-right）+左边框（border-left）+ 右边框（border-right）+左外边距 （margin-left）+ 右外边距（margin-right） 敲重点！ 邮局员工只需学业务，不用学开车 新知讲授 三 一个 CSS 盒子模型常见的代码案例，其中 .box 是一个盒子的类名，它的宽度是 100px，高度是 50px。它有 10px 的外边距，1px 的实线边框，以及 5px 的内边距。那么，这个盒子的最终宽度和高度是多少呢？ .box { width: 100px; height: 50px; margin: 10px; border: 1px solid #000; padding: 5px; } 盒模型计算 答案是：它的宽度是 122px，高度是 72px。 其中，宽度的计算方法是：100px + 2 × 1px（左右边框）+ 2 × 5px（左右内边距）+ 2 × 10px（左右外边距）= 122px。 而高度的计算方法是：50px + 2 × 1px（上下边框）+ 2 × 5px（上下内边距）+ 2 × 10px（上下外边距）= 72px。 任务二 DIV+CSS布局 机位固定：摄像机本身不移动（如不推、拉、摇、移）。 新知讲授 二 <div>一个块状容器类标签，即在<div>和</div>之间可以容纳各种HTML元素，同时也构成一个独立的矩形区域。 无论在页面中使用多少个标签，<div>标签之间仅存在并列关系和内嵌关系。 <img src="/images/mountain.jpg" alt="" style="width: 300px; height: 200px;"> 新知讲授 二 Div的嵌套 —— 像搭积木一样构建网页 01. 什么是 Div 嵌套？ 在一个 HTML 的<div>元素内部，放置一个或多个<div>元素。就是在一个<div>（父div）里放置一个或多个<div>（子div）。 <div class="upload-group"> <div >...</div> <div >...</div> </div> 人物-背景区域上传展示 人物上传 背景上传 问题：父div和子div分别有什么作用？ <div class="parent"> <div class="child1"> <h2>文章板块</h2> <p>这里是文章内容。</p> </div> <div class="child2"> <img src="example.jpg" alt="示例图片"> </div> </div> 父div为容器 子div为元素载体 机位固定：摄像机本身不移动（如不推、拉、摇、移）。 二 问题1：为什么div总是“上下排队”？ 什么是文档流 (Normal Flow)？ 文档流是浏览器默认的布局方式。HTML元素会按照它们在代码中出现的顺序，从上到下、从左到右依次排列。就像一条繁忙的流水线，元素们都乖乖地站在传送带上，一个接一个地被渲染出来。 块级元素的“独占性” 我们常用的<div>是典型的块级元素。它有一个“霸道”的默认特性：独占一行空间。无论内容多少，它都会占据一整行，把其他元素挤到下一行，这就是div默认“上下排队”的根本原因。 优先级：老大 > 老二 > 老三（行内 > 内部 > 外部） 二 问题2：如何修改文档流布局？将div上下布局变成左右？ 优先级：老大 > 老二 > 老三（行内 > 内部 > 外部） 二 布局魔法：使用`float`让元素“漂浮”起来 什么是 float ? 它是一个核心的 CSS 布局属性，作用是让元素脱离正常的文档流，并向左或向右移动。 浮动的元素会尽可能向指定方向移动，直到遇到容器边界或其他浮动元素位置。 核心取值 float: left;→ 元素向左浮动 float: right;→ 元素向右浮动 float: none;→ 默认值，不浮动，在文档流中正常排列 工作原理 想象所有元素都在一条“流水线”上，从上到下、从左到右依次排队。 当你给一个元素加上 `float`，它就像从传送带上“跳”了下来，飘到容器的一侧。后面的元素会自动填补它的空位，并围绕着它排列。 机位固定：摄像机本身不移、动（如不推、拉、摇、移）。 新知讲授 二 浮动实现多列布局 核心原理 让多个块级元素（如<div>）都设置float: left;，并为它们设置合适的宽度，它们就会在同一行内从左到右并排显示。 Column 1 float: left; Column 2 float: left; Column 3 float: left; 机位固定：摄像机本身不移、动（如不推、拉、摇、移）。 新知讲授 二 让我们来看看浮动的几种方式吧！ ①无浮动 #box1 { height: 100px; width: 150px; background-color: #F90; } #box2 { height: 100px; width: 200px; background-color: #C30; } #box3 { height: 100px; width: 250px; background-color: #3FF; } 机位固定：摄像机本身不移、动（如不推、拉、摇、移）。 新知讲授 二 ②左右浮动 #box1 { height: 100px; width: 150px; background-color: #F90; float: left; } #box2 { height: 100px; width: 200px; background-color: #C30; float: left; } #box3 { height: 100px; width: 250px; background-color: #3FF; float: right; } 机位固定：摄像机本身不移、动（如不推、拉、摇、移）。 新知讲授 二 ③全部左浮动 #box1 { height: 100px; width: 150px; background-color: #F90; float: left; } #box2 { height: 100px; width: 200px; background-color: #C30; float: left; } #box3 { height: 100px; width: 250px; background-color: #3FF; float: left; } 机位固定：摄像机本身不移、动（如不推、拉、摇、移）。 新知讲授 二 ④清除左浮动 #box1 { height: 100px; width: 150px; background-color: #F90; float: left; } #box2 { height: 100px; width: 200px; background-color: #C30; float: left; } #box3 { height: 100px; width: 250px; background-color: #3FF; float: left; clear: left; }   机位固定：摄像机本身不移、动（如不推、拉、摇、移）。 新知讲授 二 活动二：请在Hbuilder中用<div>标签规划出布局。 任务三 “保护濒危动物”网页页面布局 怎么完成子网划分呢？ 新知讲授 三 活动三：综合实战，制作“保护濒危动物”页面。 规则：让主体区域的4个box从“一列堆叠”（布局一）变为两行两列并排（布局二），使用浮动属性实现。 邮局员工只需学业务，不用学开车 新知讲授 三 步骤一：分析页面组成 （1）头部（Header）： <div class=”header”>„„</div> （2）横幅图片区（Banner）： <div class="banner"></div> （3）主体内容区（Main Content）： <div class="main"></div> （4）底部（Footer）： <div class="footer"></div> 邮局员工只需学业务，不用学开车 新知讲授 三 步骤二：打开 HBuilder，在“选择模板”中选择“基本 HTML 项目”创建项目“保护濒危动物”。把素材中的图片文件复制到项目中的“img”文件夹中，选择“CSS”文件夹，点击【文件】→【新建】→【CSS 文件】，命名为“style.css”，点击【创建】。 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>保护濒危动物</title> <link rel="stylesheet" href="css/style.css"> </head> <body> 邮局员工只需学业务，不用学开车 新知讲授 三 步骤三：清除文档中所有元素默认的内、外边距，定义网页背景颜色为#FCF7E2，在 style.css文件中添加 css 代码 *{ padding: 0px; /*内边距 0 像素*/ margin: 0px; /*外边距 0 像素*/ } body{ background-color:#FCF7E2; /*设置页面背景颜色为#FCF7E2*/ } 邮局员工只需学业务，不用学开车 新知讲授 三 步骤四：在 index.html 的<body>„„</body>中添加<div>元素，设置 class="header"。 邮局员工只需学业务，不用学开车 新知讲授 三 步骤五：在 index.html 中继续添加<div>元素，设置 class="banner"。 邮局员工只需学业务，不用学开车 新知讲授 三 步骤六：在 index.html 中继续添加<div>元素，设置 class="main"。 步骤七：在 index.html 中，在“.main”的<div>元素中添加<div>元素，设置 class="title” .title{ width: 1000px; /*宽度 1000 像素*/ height: 60px; /*高度 60 像素*/ background-image: url("../images/title.jpg"); } <div class="main"> <div class="title"></div> </div> 邮局员工只需学业务，不用学开车 新知讲授 三 步骤八：在 index.html 中，在“.main”的<div>元素中继续添加 4 个<div>元素，分别设置class="box1"、 class="box2"、 class="box3"和 class="box4"。 随堂练习 五 1、（单选）在CSS盒模型中，由内到外正确的顺序是（ ） A. 内容 → 内边距 → 边框 → 外边距 B. 内容 → 边框 → 内边距 → 外边距 C. 内边距 → 内容 → 边框 → 外边距 D. 边框 → 内边距 → 内容 → 外边距 答案：A 解析：本题考查盒模型的组成顺序。根据参考资料中图5-4-4，盒模型从内到外依次为：内容（content）→ 内边距（padding）→ 边框（border）→ 外边距（margin）。这是理解盒模型布局的基础 随堂练习 五 2. （多选）在CSS盒模型中，以下哪些属于盒模型的组成部分？（ ） A. 内容（content） B. 内边距（padding） C. 边框（border） D. 外边距（margin） 答案：ABCB 解析：本题考查盒模型的四个组成部分。盒模型从内到外依次由内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。掌握这四个部分是理解CSS布局的基础 随堂练习 五 3、（判断）在CSS盒模型中，元素的总宽度等于width属性设置的值，不包含内边距和边框。（ ） 答案：× 解析：本题考查盒模型总宽度的计算。默认情况下（box-sizing: content-box），元素的总宽度包含内容区宽度（width）、左右内边距（padding-left和padding-right）、左右边框（border-left和border-right）和左右外边距（margin-left和margin-right），并不等于width属性本身。 课堂小结 六 谢谢 $