《CSS教程7.ppt》由会员分享，可在线阅读，更多相关《CSS教程7.ppt（29页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、第第第第 7 7 章章章章DIV+CSSDIV+CSS布局（一）布局（一）网页设计基础网页设计基础使用盒子模型相关属性实现页面布局使用盒子模型相关属性实现页面布局掌握普通文档流、浮动与清除属性的含义掌握普通文档流、浮动与清除属性的含义本章目标本章目标完成贵美完成贵美 网站网站“登录页登录页”的布局的布局实现实现“登录页登录页”顶部的局部布局顶部的局部布局本章任务本章任务如何控制如何控制CSS样式样式2-1盒子模型盒子模型网页中的所有元网页中的所有元素可以看作一个素可以看作一个一个的一个的“盒子盒子”元素内容元素内容 填充（也称内边距）填充（也称内边距）边框边框边界（也称外边距）边界（也称外边距
2、）样式控制思路样式控制思路盒内样式修饰盒内样式修饰 盒子位置布局盒子位置布局 盒内样式：盒内样式：设置网页元素的设置网页元素的颜色、字体等外颜色、字体等外观观盒子位置布局：盒子位置布局：确定盒子所在的确定盒子所在的位置、和其他网位置、和其他网页元素的关系页元素的关系如何控制如何控制CSS样式样式2-2盒子模型是网页布局的基础盒子模型是网页布局的基础盒子属性是盒子模型的关键属性盒子属性是盒子模型的关键属性为什么需要盒子属性为什么需要盒子属性盒子模型盒子模型平面图平面图盒子模型三维立体图：盒子模型三维立体图：注意背景色在背景图注意背景色在背景图的下一层的下一层盒子属性：盒子属性：margin（外边
3、距（外边距/边界）边界）border（边框）（边框）padding（内边距（内边距/填充填充）各属性又分为各属性又分为 四个方向四个方向margin-right右边界右边界margin-left左边界左边界margin-top上边界上边界margin-bottom下边界下边界marginborderpadding什么是盒子属性什么是盒子属性可统一设置或四边分开设置可统一设置或四边分开设置margin属性属性marginmargin-topmargin-rightmargin-bottommargin-leftmargin外边距外边距margin-right右边界右边界margin-left左边
4、界左边界margin-top上边界上边界margin-bottom下边界下边界margin:1px 2px 3px 4px;margin:1px 2px;margin:0px auto;margin-left:1px;分别代表什分别代表什么含义？么含义？演示示例演示示例1：margin的用法的用法border属性属性border-colorborder-widthborder-styleborder边框边框border-topborder-rightborder-bottomborder-leftborderborder-left修修饰饰属属性性四四个个方方向向缩缩写写形形式式border每个
5、边都有每个边都有style、color、with属性，属性，四个边可以一次设置，四个边可以一次设置，也可以分别设置也可以分别设置border-style:none;border:1px solid red;border-right:5px dashed blue;border-width:1px 2px 3px 4px;分别代表什么分别代表什么含义？含义？.textBorder border-width:1px;border-style:solid;名字：名字：密码：密码：细边框的样式细边框的样式 使用使用border属性修饰表单属性修饰表单演示示例演示示例2：细边框样式：细边框样式paddi
6、ng属性属性paddingpadding-toppadding-rightpadding-bottompadding-leftpadding内边距内边距 padding-left:5px;padding:5px 10px 20px 40px;padding:5px 10px;分别代表什么分别代表什么含义？含义？四个边可以一四个边可以一次设置，也可次设置，也可以分别设置以分别设置padding演示示例演示示例3：表格的填充效果：表格的填充效果元素的实际占位（实际宽、高）元素的实际占位（实际宽、高）盒子高度盒子高度=height属性属性+上下填充高度上下填充高度+上下边框高度上下边框高度盒子宽度盒
7、子宽度=width属性属性+左右填充宽度左右填充宽度+左右边框宽度左右边框宽度元素的宽高及实际占位元素的宽高及实际占位height:40pxborder-width-top:20pxmargin-top:10px右图图片的实际的高度是右图图片的实际的高度是多少？多少？padding-top:5px使用盒子属性布局元素使用盒子属性布局元素2-1 上外边距上外边距30px下填充下填充40px 左右外左右外边边距：距：水平居中水平居中左左填充填充80px5px宽宽的的边边框框如何实现如下贵美如何实现如下贵美logo图片的布局？图片的布局？图图片背景色：片背景色：#ff7300 页页面背景面背景色：色
8、：#ccc body margin:0px;padding:0px;background:#ccc;#logo width:380px;border:5px solid#666;padding:10px 20px 40px 80px;background:#ff7300;margin:30px auto;/水平居中水平居中 使用盒子属性布局元素使用盒子属性布局元素2-2 设设置置浏览浏览器器对对body的默的默认设认设置，置，清除清除为为0“贵贵美商城美商城”logo图图片的片的布局布局 首先首先组织组织HTML结结构，构，再写再写CSS进进行布局或美行布局或美化化 演示示例演示示例4：贵美商
9、城：贵美商城Logo图片布局图片布局如何实现注册页面的布局？如何实现注册页面的布局？使用盒子属性实现使用盒子属性实现DIV+CSS布局布局2-1 main：主体部分：主体部分 footer：底部部分：底部部分 header：顶顶部部 实现步骤实现步骤1、分析页面的分块结构，形成、分析页面的分块结构，形成HTML组织结构组织结构演示示例：演示示例：3行布局行布局 为为了控制整个了控制整个页页面的居中，添面的居中，添加一个大容器：加一个大容器：container main：主体部分：主体部分 footer：底部部分：底部部分 header：顶顶部部 使用盒子属性实现使用盒子属性实现DIV+CSS布
10、局布局2-2实现步骤实现步骤2、编写每个、编写每个DIV块的块的CSS控制定位控制定位使用盒子属性实现使用盒子属性实现DIV+CSS布局布局2-3#containe:980px、居中、居中#header：宽宽：100%、高：高：136px、背景色背景色#ccc#main：宽宽：100%、高：高：400px、背景色背景色#fff#footer：宽宽：100%、高：高：100px、背景色背景色#ccc 演示示例演示示例5：实现页面布局：实现页面布局为什么需要为什么需要float浮动属性浮动属性演示示例演示示例6：中间两块使用：中间两块使用float解决解决如何解决中间两块布局无法同行显示的问题？如
11、何解决中间两块布局无法同行显示的问题？如何实现如下布局如何实现如下布局（左右两块各占一（左右两块各占一半宽度）？半宽度）？什么是什么是float浮动属性浮动属性4-1脱离常规文档流而表现为向右或向左浮动脱离常规文档流而表现为向右或向左浮动 默认的常规文档流：默认的常规文档流：页面内容从上到下，页面内容从上到下，从左到右排列。从左到右排列。DIV块块换行显示换行显示向右浮动，脱离常规向右浮动，脱离常规文档流文档流演示示例演示示例7：浮动设置：浮动设置浮动的三大显著特征浮动的三大显著特征演示示例演示示例7：浮动设置：浮动设置1.DIV块级元素失去块级元素失去“块状块状”换行显示特征，变为行内元素换
12、行显示特征，变为行内元素什么是什么是float浮动属性浮动属性4-2浮动的三大显著特征浮动的三大显著特征演示示例演示示例7：浮动设置：浮动设置2.紧贴上一个浮动元素（同方向）或父级紧贴上一个浮动元素（同方向）或父级元素的边框，如宽度不够将换行显示元素的边框，如宽度不够将换行显示（即（即容纳不了第三个容纳不了第三个DIV块换行显示）块换行显示）什么是什么是float浮动属性浮动属性4-3浮动的三大显著特征浮动的三大显著特征演示示例演示示例7：浮动设置：浮动设置3.占据行内元素的空占据行内元素的空间，导致行内元素围间，导致行内元素围绕显示绕显示什么是什么是float浮动属性浮动属性4-4为什么需要
13、为什么需要clear清除属性清除属性演示示例演示示例8：clear属性属性第第3个个DIV块随窗口块随窗口大小决定是否换行，大小决定是否换行，如希望如希望“强制强制”换行换行怎么办？怎么办？如何实现第如何实现第3块换行显示？块换行显示？什么是什么是clear清除属性清除属性演示示例演示示例8：clear属性属性clear作用（实际是强制换行）作用（实际是强制换行）如果前一个元素存在左浮动或右浮动，则换行以区隔如果前一个元素存在左浮动或右浮动，则换行以区隔 只对块级元素有效只对块级元素有效clear属性的取值属性的取值right/在右侧不允许有浮动元素在右侧不允许有浮动元素left/在左侧不允许
14、有浮动元素在左侧不允许有浮动元素both/在左右两侧不允许有浮动元素在左右两侧不允许有浮动元素none/允许两侧都有浮动元素允许两侧都有浮动元素实现头部局部布局实现头部局部布局 在本章前面案例完成的页面中，实现在本章前面案例完成的页面中，实现header块的局部布局块的局部布局演示示例演示示例9：实现贵美顶部布局：实现贵美顶部布局总结总结4-1 盒子属性有哪些盒子属性有哪些？各包含哪些属性？各包含哪些属性？float属性的应用场合？有哪些取值？属性的应用场合？有哪些取值？clear属性的应用场合？有哪些取值？属性的应用场合？有哪些取值？请讲述表格、框架和请讲述表格、框架和DIV+CSSDIV+
15、CSS三种布局方式的区别？三种布局方式的区别？并列举其优缺点和应用场合？并列举其优缺点和应用场合？总结总结4-21、表格布局是用于划分页面区域的。、表格布局是用于划分页面区域的。优点：优点：A）使用表格布局可以直观且明确每部分的内容，使布局清）使用表格布局可以直观且明确每部分的内容，使布局清晰合理（方便排列有规律、结构均匀的内容或数据）；晰合理（方便排列有规律、结构均匀的内容或数据）；B）表格有很好的兼容性，可被绝大部分的浏览器所支持。）表格有很好的兼容性，可被绝大部分的浏览器所支持。缺点：缺点：A）表格布局灵活性不大，难于修改；）表格布局灵活性不大，难于修改；B）产生垃圾代码、影响页面下载时
16、间。）产生垃圾代码、影响页面下载时间。应用场合：应用场合：内容或数据整齐的页面；或适用于定位图片和文本上内容或数据整齐的页面；或适用于定位图片和文本上总结总结4-32、框架布局是用于分割浏览器窗口的。、框架布局是用于分割浏览器窗口的。优点：优点：访问者的浏览器不需要为每个页面重新加载导航条；访问者的浏览器不需要为每个页面重新加载导航条；每个框架都具有自己的滚动条，因此访问者可以独立滚每个框架都具有自己的滚动条，因此访问者可以独立滚动这些框架进行浏览。节省页面下载时间。动这些框架进行浏览。节省页面下载时间。缺点：缺点：A）并不是所有浏览器都提供良好的框架支持；）并不是所有浏览器都提供良好的框架支
17、持；B）难以实现在不同框架中精确的对齐各个页面元素；）难以实现在不同框架中精确的对齐各个页面元素；C）保存框架集网页比较麻烦，且应用范围有限。）保存框架集网页比较麻烦，且应用范围有限。应用场合：应用场合：小型商业网站、论坛、后台管理、学习教程等小型商业网站、论坛、后台管理、学习教程等总结总结4-43、DIV+CSS布局布局优点：优点：A）代码精简、页面下载速度快、表现和内容相分离等；）代码精简、页面下载速度快、表现和内容相分离等；B）层不同于表格和框架，其最大优势在于可以叠加。）层不同于表格和框架，其最大优势在于可以叠加。缺点：缺点：层在浏览器中兼容性不好；比较灵活，难于控制。层在浏览器中兼容性不好；比较灵活，难于控制。应用场合：应用场合：复杂的不规则页面、业务种类较多的大型商业网站复杂的不规则页面、业务种类较多的大型商业网站