网页制作第六讲(张静)摘要.pptVIP

为什么需要clear区隔属性 演示示例8：clear属性 第3个DIV块随窗口大小决定是否换行，如希望“强制”换行怎么办？ 如何实现第3块换行显示？ 什么是clear清除属性 演示示例8：clear属性 clear作用 如果前一个元素存在左浮动或右浮动，则换行以区隔 只对块级元素有效 clear属性的取值 right left both none 需求说明： 在前面上机练习基础上，实现页面中间布局 练习——实现中间布局 完成时间：10分钟 中间两块宽度各占一半 需求说明： 在前面上机练习完成的页面中，实现header块的局部布局 练习——头部局部布局 完成时间：25分钟 盒子属性有哪些 ？各包含哪些属性？ float属性的应用场合？有哪些取值？ clear属性的应用场合？有哪些取值？ 总结 * * 盒子模型比较抽象，需要从页面布局类似报纸排版，需划分块，各块可以看做一个一个的盒子，从而引出盒子模型。 内容 ：月饼）。 填充（padding）：泡沫纸。 边框（border）：盒子框。 边界（margin）：月饼盒到大盒子（容器）四周的距离，或者说盒子之间的距离 。 强调：本章只需要对盒模型有个初步认识即可，下一章将会对盒模型进行深入讲解。 * 1）盒内样式修饰 包括字体修饰，背景色及背景图，列表属性等，主要修饰盒子内容。 2）盒子位置布局 包括宽高，定位，浮动，边框，填充，边界等，主要是布局相关属性。 此处讲解思路和5.0课程不同，各类样式的讲解顺序按盒内样式（字体修饰，背景色及背景图，列表属性等），再次为盒子位置布局的样式（包括宽高，定位，浮动，边框，填充，边界等，主要是布局相关属性。），最后才是三种样式表应用方式（内部样式、行内样式、外部样式）。 这样讲的角度全是为了后续的页面布局。 * 强调：顺时针赋值 * 盒子高度 = height属性 + 上下填充高度 + 上下边框高度 答案：20*2+5*2+40=90px * 典型的三行两列布局 * 典型的三行两列布局 * 典型的三行两列布局 * * * 演示：因为IDV都是块级元素，前后换行显示原因，所以会出现两块竖排情形？怎么解决？使用float * 1、 background为缩写形式，又细分为background-color等几个子属性 * 1、 background为缩写形式，又细分为background-color等几个子属性 * 1、 background为缩写形式，又细分为background-color等几个子属性 * 1、 background为缩写形式，又细分为background-color等几个子属性 * 1、 background为缩写形式，又细分为background-color等几个子属性 * 1、 background为缩写形式，又细分为background-color等几个子属性 * * 第六章 CSS样式表（二） 盒子属性包括哪些？ 有哪三类定位方式？ margin属性又细分为哪些属性？ 预习检查 完成贵美 网站 “登录页”的布局 实现“登录页”顶部的局部布局 本章任务 使用盒模型相关属性实现页面布局 掌握普通文档流、浮动与清除属性的含义 本章目标 如何控制CSS样式2-1 盒子模型 网页中的所有元素可以看作一个一个的“盒子” 元素内容 填充（也称内边距） 边框 边界（也称外边距） 如何控制CSS样式2-2 样式控制思路 盒内样式修饰 盒子位置布局 盒内样式： 设置网页元素的颜色、字体等外观 盒子位置布局：确定盒子所在的位置、和其他网页元素的关系 盒子模型是网页布局的基础 盒子属性是盒子模型的关键属性 为什么需要盒子属性 盒子模型平面图 盒子模型三维立体图：注意背景色在背景图的下一层 盒子属性： margin（外边距/边界） border（边框） padding（内边距/填充 ） 各属性又分为 四个方向 什么是盒子属性 margin-right 右边界 margin-left 左边界 margin-top 上边界 margin-bottom 下边界 margin border padding 可统一设置或四边分开设置 margin属性 margin margin-top margin-right margin-bottom margin-left margin外边距 margin-right 右边界 margin-left 左边界 margin-top 上边界 margin-bottom 下边界 margin：1px，2px，3px，4px; margin：1px，2px; m