CSS样式表2重点.ppt

总结 盒子属性有哪些 ？各包含哪些属性？ 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样式表（二） 回顾与作业点评 CSS的基本语法？分哪三类选择器？ 常用的文本属性有哪些？ 常用的列表属性有哪些？ 常用的背景属性有哪些？ 本章任务 完成贵美 网站 “登录页”的布局 实现“登录页”顶部的局部布局 本章目标 使用盒模型相关属性实现页面布局 掌握普通文档流、浮动与清除属性的含义 如何控制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; margin：0px auto ; margin-left:1px; 分别代表什么含义？ 演示示例1：margin的用法 border属性 border-color border-width border-style border边框 border-top border-right border-bottom border-left border border-left … 修饰属性 四个方向 缩写形式 border 每个边都有style、color、with属