CSS教程7.ppt

使用盒子模型相关属性实现页面布局 掌握普通文档流、浮动与清除属性的含义 完成贵美 网站 “登录页”的布局 实现“登录页”顶部的局部布局 盒子模型 样式控制思路 盒子模型是网页布局的基础 盒子属性是盒子模型的关键属性 盒子属性： margin（外边距/边界） border（边框） padding（内边距/填充 ） 各属性又分为 四个方向 可统一设置或四边分开设置 margin属性 margin margin-top margin-right margin-bottom margin-left border属性 border-color border-width border-style padding属性 padding padding-top padding-right padding-bottom padding-left 元素的实际占位（实际宽、高） 盒子高度 = height属性 + 上下填充高度 + 上下边框高度 盒子宽度 = width属性 + 左右填充宽度 + 左右边框宽度 如何实现如下贵美logo图片的布局？ 实现头部局部布局 在本章前面案例完成的页面中，实现header块的局部布局 总结4-1 盒子属性有哪些 ？各包含哪些属性？ float属性的应用场合？有哪些取值？ clear属性的应用场合？有哪些取值？ 请讲述表格、框架和DIV+CSS三种布局方式的区别？并列举其优缺点和应用场合？ 盒子模型比较抽象，需要从页面布局类似报纸排版，需划分块，各块可以看做一个一个的盒子，从而引出盒子模型。如：礼品的包装盒，运输时盒子四周添加抗震的填充材料 内容 ：月饼）。 填充（padding）：泡沫纸。 边框（border）：盒子框。 边界（margin）：月饼盒到大盒子（容器）四周的距离，或者说盒子之间的距离 。 强调：本章只需要对盒模型有个初步认识即可，下一章将会对盒模型进行深入讲解。 1）盒内样式修饰 包括字体修饰，背景色及背景图，列表属性等，主要修饰盒子内容。 2）盒子位置布局 包括宽高，定位，浮动，边框，填充，边界等，主要是布局相关属性。 此处讲解思路和5.0课程不同，各类样式的讲解顺序按盒内样式（字体修饰，背景色及背景图，列表属性等），再次为盒子位置布局的样式（包括宽高，定位，浮动，边框，填充，边界等，主要是布局相关属性。），最后才是三种样式表应用方式（内部样式、行内样式、外部样式）。 这样讲的角度全是为了后续的页面布局。 强调：顺时针赋值；上下外边距为0px、左右外边距自动计算（一般表现为水平居中） 盒子高度 = 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等几个子属性 即使用框架结构的页面可以将一个浏览器窗口划分为多个相互独立又相互联系的小窗口，每个区域都可以显示不同的HTML文档，从而实现将多个HTML文件组织到一个浏览器窗口中显示 从上往下看层次关系：1、边框；2、内容、内边距；3、背景图；4、背景色；5、外边距。 无边框、实线、虚线 第 7 章 DIV+CSS布局（一） 网页设计基础 本章目标 本章任务 如何控制CSS样式2-1 网页中的所有元素可以看作一个一个的“盒子” 元素内容 填充（也称内边距） 边框 边界（也称外边距） 盒内样式修饰 盒子位置布局 盒内样式： 设置网页元素的颜色、字体等外观 盒子位置布局：确定盒子所在的位置、和其他网页元素的关系 如何控制CSS样式2-2 为什么需要盒子属性 盒子模型平面图 盒子模型三维立体图：注意背景色在背景图的下一层 margin-right 右边界 margin-left 左边界 margin-top 上边界 margin-bottom 下边界 margin border padding 什