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