JavaEE物联网云计算系列培训教材-HTML5+CSS3+Javascript网页设计06.ppt

Chapter 第六章 回顾与作业点评 CSS的基本语法？分哪三类选择器？ 常用的文本属性有哪些？ 常用的列表属性有哪些？ 常用的背景属性有哪些？ 预习检查 盒子属性包括哪些？ 有哪三类定位方式？ margin属性又细分为哪些属性？ 本章任务 完成贵美 网站 “登录页”的布局 实现“登录页”顶部的局部布局 本章目标 使用盒模型相关属性实现页面布局 掌握普通文档流、浮动与清除属性的含义 盒模型 样式控制思路 盒子模型是网页布局的基础 盒子属性是盒子模型的关键属性 盒子属性： 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图片的布局？ 练习——DIV+CSS布局 需求说明： 重新实现DIV+CSS布局 练习——修饰表单 需求说明： 根据提供的素材，实现表单的细边框样式 共性问题集中讲解 练习——实现中间布局 需求说明： 在前面上机练习基础上，实现页面中间布局 练习——头部局部布局 需求说明： 在前面上机练习完成的页面中，实现header块的局部布局 总结 盒子属性有哪些 ？各包含哪些属性？ float属性的应用场合？有哪些取值？ clear属性的应用场合？有哪些取值？ 完成时间：25分钟 产品介绍的框架页效果：即点击左边的产品目录，右边显示具体内容。 什么是盒子模型？样式控制思路？ 1、 background为缩写形式，又细分为background-color等几个子属性 演示：因为IDV都是块级元素，前后换行显示原因，所以会出现两块竖排情形？怎么解决？使用float 强调：顺时针赋值 盒子高度 = height属性 + 上下填充高度 + 上下边框高度 答案：20*2+5*2+40=90px 典型的三行两列布局 典型的三行两列布局 1、 background为缩写形式，又细分为background-color等几个子属性 1、 background为缩写形式，又细分为background-color等几个子属性 1、 background为缩写形式，又细分为background-color等几个子属性 CSS样式表（二） 如何控制CSS样式2-1 网页中的所有元素可以看作一个一个的“盒子” 元素内容 填充（也称内边距） 边框 边界（也称外边距） 如何控制CSS样式2-2 盒内样式修饰 盒子位置布局 盒内样式： 设置网页元素的颜色、字体等外观 盒子位置布局：确定盒子所在的位置、和其他网页元素的关系 为什么需要盒子属性 盒子模型平面图 盒子模型三维立体图：注意背景色在背景图的下一层 什么是盒子属性 margin-right 右边界 margin-left 左边界 margin-top 上边界 margin-bottom 下边界 margin border padding 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-top border-right border-bottom border-left border border-left … 修饰属性 四个方向 缩写形式 border 每个边都有style、color、with属性，四个边可以一次设置，也可以分别设置 border-style: none; border: 1px solid red; border-right: 5px dotted blue; 分别代表什么含义？ style type=text/css .textBorder