《网页设计与制作》第7章课件.ppt

《网页设计与制作》第7章课件.ppt

《《网页设计与制作》第7章课件.ppt》由会员分享，可在线阅读，更多相关《《网页设计与制作》第7章课件.ppt（26页珍藏版）》请在冰点文库上搜索。

第七章CSS样式表（三）布局、定位,回顾,使用CSS设置背景图像时，通常会同时设置背景图像的（）和（）属性使用font属性设置字体类型、风格、大小、粗细时的顺序是什么？

使用（）属性设置列表项目符号。

在某一段文本中突出显示某几个字，以粗体、红色、大字号显示，通常使用（）标签。

在CSS中，设置文本行高使用（）属性。

提问,background-repeat,background-position,字体风格粗细大小类型,list-style-type或list-style,span,line-height,使用盒子模型相关属性实现页面布局掌握普通文档流、浮动、清除和溢出属性的含义,本章目标,如何控制CSS样式2-1,盒子模型,网页中的所有元素可以看作一个一个的“盒子”,元素内容填充（也称内边距）边框边界（也称外边距）,如何控制CSS样式2-2,样式控制思路,盒内样式修饰盒子位置布局,盒子位置布局：

确定盒子所在的位置、和其他网页元素的关系,盒内样式：

设置网页元素的颜色、字体等外观,盒子模型是网页布局的基础盒子属性是盒子模型的关键属性,为什么需要盒子属性,盒子模型平面图,盒子模型三维立体图：

注意背景色在背景图的下一层,盒子属性：

margin（外边距/边界）border（边框）padding（内边距/填充）各属性又分为四个方向,什么是盒子属性,margin-right右边界,margin-left左边界,margin-top上边界,margin-bottom下边界,margin,border,padding,可统一设置或四边分开设置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;,分别代表什么含义？

水平居中,border属性border-colorborder-widthborder-style,border边框,border-topborder-rightborder-bottomborder-left,borderborder-left,修饰属性,四个方向,缩写形式,border-style:

none;border:

1pxredsolid;border-right:

5pxbluedotted;,分别代表什么含义？

边框,文本框边框,空白间隙,padding属性paddingpadding-toppadding-rightpadding-bottompadding-left,padding内边距,padding-left:

5px;padding:

5px10px20px40pxpadding:

5px10px,分别代表什么含义？

四个边可以一次设置，也可以分别设置,padding,内边距,body,ul,lipadding:

0px;margin:

0px;,元素的实际占位（实际宽、高）元素实际占位的高度=height属性+上下填充高度+上下边框高度元素实际占位的宽度=width属性+左右填充宽度+左右边框宽度,元素的宽高及实际占位,height:

40px,border-width-top:

20px,margin-top:

10px,左图图片的实际的高度是多少？

padding-top:

5px,标准文档流组成块级元素（blocklevel）、列表内联元素（inline）、.,标准文档流,内联标签可以包含于块级标签中，成为它的子元素，而反过来则不成立,经验,display属性,控制元素的显示和隐藏块级元素与行级元素的转变,如何实现注册页面的布局？

使用盒子属性实现DIV+CSS布局2-1,main：

主体部分,footer：

底部部分,header：

顶部,实现步骤1、分析页面的分块结构，形成HTML组织结构,使用盒子属性实现DIV+CSS布局2-1,为了控制整个页面的居中，添加一个大容器：

container,main：

主体部分,footer：

底部部分,header：

顶部,实现步骤2、编写每个DIV块的CSS控制定位,使用盒子属性实现DIV+CSS布局2-2,#container:

980px、居中,#header：

136px;、背景色#ccc,#main：

400px;、背景色#fff,#footer：

100px;、背景色#ccc,为什么需要float浮动属性,如何解决中间两块布局无法同行显示的问题？

如何实现为希望的布局？

什么是float浮动属性4-1,脱离常规文档流而表现为向右或向左浮动,默认的常规文档流：

页面内容从上到下，从左到右排列。

DIV块换行显示,向右浮动，脱离常规文档流,什么是float浮动属性4-2,浮动的三大显著特征,1.DIV块元素失去“块状”换行显示特征，变为行内元素,什么是float浮动属性4-3,浮动的三大显著特征,2.紧贴上一个浮动元素（同方向）或父级元素的边框，如宽度不够将换行显示,什么是float浮动属性4-4,浮动的三大显著特征,3.占据行内元素的空间，导致行内元素围绕显示,为什么需要clear区隔属性,第3个DIV块随窗口大小决定是否换行，如希望“强制”换行怎么办？

如何实现第3块换行显示？

什么是clear清除属性,clear作用如果前一个元素存在左浮动或右浮动，则换行以区隔只对块级元素有效clear属性的取值rightleftbothnone,溢出处理,overflow属性,overflow属性的应用,使用overflow扩展盒子高度,#fatherborder:

1px#000solid;width:

500px;overflow:

hidden;,示例,盒子属性有哪些？

各包含哪些属性？

float属性的应用场合？

有哪些取值？

clear属性的应用场合？

有哪些取值？

overflow属性的应用场合？

有哪些取值？

总结,