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