《网页设计与制作》PPT课件.ppt

第七章CSS样式表 三 布局 定位 3 19 2020 1 回顾 使用CSS设置背景图像时 通常会同时设置背景图像的 和 属性使用font属性设置字体类型 风格 大小 粗细时的顺序是什么 使用 属性设置列表项目符号 在某一段文本中突出显示某几个字 以粗体 红色 大字号显示 通常使用 标签 在CSS中 设置文本行高使用 属性 提问 background repeat background position 字体风格 粗细 大小 类型 list style type或list style span line height 3 19 2020 2 使用盒子模型相关属性实现页面布局掌握普通文档流 浮动 清除和溢出属性的含义 本章目标 3 19 2020 3 如何控制CSS样式2 1 盒子模型 网页中的所有元素可以看作一个一个的 盒子 元素内容填充 也称内边距 边框边界 也称外边距 3 19 2020 4 如何控制CSS样式2 2 样式控制思路 盒内样式修饰盒子位置布局 盒子位置布局 确定盒子所在的位置 和其他网页元素的关系 盒内样式 设置网页元素的颜色 字体等外观 3 19 2020 5 盒子模型是网页布局的基础盒子属性是盒子模型的关键属性 为什么需要盒子属性 盒子模型平面图 盒子模型三维立体图 注意背景色在背景图的下一层 3 19 2020 6 盒子属性 margin 外边距 边界 border 边框 padding 内边距 填充 各属性又分为四个方向 什么是盒子属性 margin right右边界 margin left左边界 margin top上边界 margin bottom下边界 margin border padding 3 19 2020 7 可统一设置或四边分开设置margin属性marginmargin topmargin rightmargin bottommargin left margin外边距 margin right右边界 margin left左边界 margin top上边界 margin bottom下边界 margin 1px 2px 3px 4px margin 1px 2px margin 0pxauto margin left 1px 分别代表什么含义 水平居中 3 19 2020 8 border属性border colorborder widthborder style border边框 border topborder rightborder bottomborder left borderborder left 修饰属性 四个方向 缩写形式 border style none border 1pxredsolid border right 5pxbluedotted 分别代表什么含义 边框 文本框边框 空白间隙 3 19 2020 9 padding属性paddingpadding toppadding rightpadding bottompadding left padding内边距 padding left 5px padding 5px10px20px40pxpadding 5px10px 分别代表什么含义 四个边可以一次设置 也可以分别设置 padding 内边距 body ul li padding 0px margin 0px 3 19 2020 10 元素的实际占位 实际宽 高 元素实际占位的高度 height属性 上下填充高度 上下边框高度元素实际占位的宽度 width属性 左右填充宽度 左右边框宽度 元素的宽高及实际占位 height 40px border width top 20px margin top 10px 左图图片的实际的高度是多少 padding top 5px 3 19 2020 11 标准文档流组成块级元素 blocklevel 列表内联元素 inline 标准文档流 内联标签可以包含于块级标签中 成为它的子元素 而反过来则不成立 经验 3 19 2020 12 display属性 控制元素的显示和隐藏块级元素与行级元素的转变 3 19 2020 13 如何实现注册页面的布局 使用盒子属性实现DIV CSS布局2 1 main 主体部分 footer 底部部分 header 顶部 3 19 2020 14 实现步骤1 分析页面的分块结构 形成HTML组织结构 使用盒子属性实现DIV CSS布局2 1 为了控制整个页面的居中 添加一个大容器 container main 主体部分 footer 底部部分 header 顶部 3 19 2020 15 实现步骤2 编写每个DIV块的CSS控制定位 使用盒子属性实现DIV CSS布局2 2 container 980px 居中 header 136px 背景色 ccc main 400px 背景色 fff footer 100px 背景色 ccc 3 19 2020 16 为什么需要float浮动属性 如何解决中间两块布局无法同行显示的问题 如何实现为希望的布局 3 19 2020 17 什么是float浮动属性4 1 脱离常规文档流而表现为向右或向左浮动 默认的常规文档流 页面内容从上到下 从左到右排列 DIV块换行显示 向右浮动 脱离常规文档流 3 19 2020 18 什么是float浮动属性4 2 浮动的三大显著特征 1 DIV块元素失去 块状 换行显示特征 变为行内元素 3 19 2020 19 什么是float浮动属性4 3 浮动的三大显著特征 2 紧贴上一个浮动元素 同方向 或父级元素的边框 如宽度不够将换行显示 3 19 2020 20 什么是float浮动属性4 4 浮动的三大显著特征 3 占据行内元素的空间 导致行内元素围绕显示 3 19 2020 21 为什么需要clear区隔属性 第3个DIV块随窗口大小决定是否换行 如希望 强制 换行怎么办 如何实现第3块换行显示 3 19 2020 22 什么是clear清除属性 clear作用如果前一个元素存在左浮动或右浮动 则换行以区隔只对块级元素有效clear属性的取值rightleftbothnone 3 19 2020 23 溢出处理 overflow属性 3 19 2020 24 overflow属性的应用 使用overflow扩展盒子高度 father border 1px 000