项目一 第二阶段 任务12 布局网页-【鹑首文化】HTML5+CSS3网页设计与制作配套电子课件PPT

HTML5+CSS3网页设计与制作 使用CSS3设置网页格式 第二阶段 能够表述盒模型的结构概念。 能够使用宽高属性设置标签大小，使用内外补白属性设置标签内外间距。 能够修改标签的类型，使一种标签能具有其他标签的特性。 能够使用浮动和清除浮动属性，正确控制标签的排列方式，实现网页的整体排版布局。 能够综合运用以上内容完成D清单页面布局。 任务目标 任务12 布局网页 本次任务要求根据D清单网页效果图，在任务11基础上设置网页每个模块的宽高、间距，统一网页的整体布局，并完善各标签的排版布局。完成后效果图如图2-3所示。 任务描述 图2-3完成后效果图 任务12 布局网页 要完成D清单页面每个模块的宽高、间距设置，并统一网页的整体布局，需要： 学习宽高属性设置方法，正确使用内外补白属性设置标签内外间距； 学习浮动和清除浮动属性的设置方法； 分析D清单页面中格式样式，正确使用宽、高、边界、补白设置格式。 D清单部分格式样式分析如图2-3-1所示。 任务分析 图2-3-1 D清单部分格式样式分析图 任务12 布局网页 知识与技能准备 网页中任何元素都可以视为一个盒子，所有盒模型就是页面元素的基本模型结构。它具有如下特性： 每个盒子都有：内容、填充、边框、边界4个属性。 每个属性都包括4个部分：上、右、下、左。属性的4个部分可同时设置，也可分别设置。 如果用一个简单示意图来描述盒子属性与空间关系，则如图2-3-2所示。 1、盒模型结构 图2-3-2 盒模型中各个属性的空间位置关系 知识与技能准备 CSS盒子模型使用width（宽）和height（高）定义内容区域的大小。 其中宽高属性可使用px为单位设置固定长度，也可以使用％设置相对长度，％以当前标签的父标签为参考。 宽高属性也可以设置为auto（自动），相当于不设置宽高属性。此时宽度将默认设置为允许的最大值，即等同于父标签的宽度；高度则将随标签的内容自动扩展高度。 当标签设置了宽高后，标签的大小就被固定了，如果标签内容超过标签的大小，那么超出的部分会溢出标签。 2、标签的宽高属性 语法：width：宽度数值； height：高度数值； 设置<div>的宽度为250px，高度为120px。 课堂练习2-3-1 为标签设置宽高度参数 HTML代码： CSS代码： 1 2 3 4 5 6 7 <div> <p>明月几时有？把酒问青天。</p> <p>不知天上宫阙，今夕是何年。</p> <p>我欲乘风归去，又恐琼楼玉宇，高处不胜寒。</p> <p>起舞弄清影，何似在人间。</p> </div> 1 2 3 4 5 div{ width:250px; height:120px; border:1px solid black; /*设置边框*/ } 显示效果如下图所示： 图2-3-3内容溢出标签 知识与技能准备 如果希望标签能保持一定的大小，又能灵活地适应内容或网页的变化，可以使用以下几个属性： min-width：设置标签宽度的最小值； max-width：设置标签宽度的最大值； min-height：设置标签高度的最小值； max-height：设置标签高度的最大值。 可将练习2-3-1中的CSS代码修改如下： 显示效果如下图所示： 2、标签的宽高属性 1 2 3 4 5 div{ width:250px; min-height:120px; border:1px solid black; /*设置边框*/ } 图2-3-4 自动增加高度以适应内容 为<div>标签设置最小高度200px，宽度为浏览器窗口的60％，但要求该宽度随着浏览器宽度变化时，宽度最小不能小于350px，最大不能超过600px。 课堂练习2-3-2 为标签设置适应页面变化的宽度 CSS代码： 1 2 3 4 5 6 7 div{ min-height: 200px; width:60%; min-width: 350px; max-width: 600px; border:1px solid black;/*设置边框*/ } 知识与技能准备 补白是用来调整元素包含的内容与元素边框