网页制作第六讲(张静)

,单击此处编辑母版标题样式,*,*,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,第六章,CSS,样式表（二）,盒子属性包括哪些？,有哪三类定位方式？,margin,属性又细分为哪些属性？,预习检查,完成贵美 网站“登录页”的布局,实现“登录页”顶部的局部布局,本章任务,使用盒模型相关属性实现页面布局,掌握普通文档流、浮动与清除属性的含义,本章目标,如何控制,CSS,样式,2-1,盒,子,模型,网页中的所有元素可以看作一个一个的“盒子”,元素内容,填充（也称内边距）,边框,边界（也称外边距）,如何控制,CSS,样式,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,m,argin,外边距,margin-right,右边界,margin-left,左边界,margin-top,上边界,margin-bottom,下边界,margin,：,1px,，,2px,，,3px,，,4px;,margin,：,1px,，,2px;,margin,：,0px auto,;,margin-left:1px;,分别代表什么含义？,演示示例,1,：,margin,的用法,border,属性,border-color,border-width,border-style,border,边框,border-top,border-right,border-bottom,border-left,border,border-left,修饰属性,四个方向,缩写形式,border,每个边都有,style,、,color,、,with,属性，四个边可以一次设置，也可以分别设置,border-style:none;,border:1px solid red;,border-right:5px dotted blue;,分别代表什么含义？,.textBorder,border-width:1px;,border-style:solid;,名字：,密码：,细边框的样式,使用,border,属性修饰表单,演示示例,2,：细边框样式,padding,属性,padding,padding-top,padding-right,padding-bottom,padding-left,padding,内边距,padding-left:5px;,padding:5px 10px 20px 40px,padding:5px 10px,分别代表什么含义？,四个边可以一次设置，也可以分别设置,padding,演示示例,3,：表格的填充效果,元素的实际占位（实际宽、高）,盒子高度,=height,属性,+,上下填充高度,+,上下边框高度,盒子宽度,=width,属性,+,左右填充宽度,+,左右边框宽度,元素的宽高及实际占位,height:,40px,border-width-top:,20px,margin-top:,10px,左图图片的实际的高度是多少？,padding-top:5px,使用盒子属性布局元素,2-1,上外边距30px,下填充,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）的,背景和居中,效果,“贵美商城”logo图片的布局,首先组织,HTML,结构，再写,CSS,进行布局或美化,演示示例,4,：贵美商城,Logo,图片布局,如何实现注册页面的布局？,使用盒子属性实现,DIV+CSS,布局,2-1,main,：主体部分,footer,：底部部分,h,eader,：顶部,实现步骤,1,、分析页面的分块结构，形成,HTML,组织结构,使用盒子属性实现,DIV+CSS,布局,2-1,演示示例：,3,行布局,为了控制整个页面的居中，添加一个大容器：,container,main,：主体部分,footer,：底部部分,h,eader,：顶部,实现步骤,2,、编写每个,DIV,块的,CSS,控制定位,使用盒子属性实现,DIV+CSS,布局,2-2,#containe:,980px,、居中,#header,：,136px;,、背景色,#ccc,#main,：,400px;,、背景色,#fff,#footer,：,100px;,、背景色,#ccc,演示示例,5,：实现页面布局,需求说明：,重新实现,DIV+CSS,布局,练习,DIV+CSS,布局,完成时间：,25,分钟,#container:,980px,居中,#header,：,136px;,背景色,#ccc,#main,：,400px;,背景色,#fff,#footer,：,100px;,背景色,#ccc,需求说明：,根据提供的素材，实现表单的细边框样式,练习,修饰表单,完成时间：,10,分钟,常见的细边框样式,为什么需要,float,浮动属性,演示示例,6,：中间两块使用,float,解决,如何解决中间两块布局无法同行显示的问题？,如何实现为希望的布局？,什么是,float,浮动属性,4-1,脱离常规文档流而表现为向右或向左浮动,默认的常规文档流：页面内容从上到下，从左到右排列。,DIV,块换行显示,向右浮动，脱离常规文档流,演示示例,7,：浮动设置,什么是,float,浮动属性,4-2,浮动的三大显著特征,演示示例,7,：浮动设置,1.DIV,块元素失去“块状”换行显示特征，变为行内元素,什么是,float,浮动属性,4-3,浮动的三大显著特征,演示示例,7,：浮动设置,2.紧贴上一个浮动元素（同方向）或父级元素的边框，如宽度不够将换行显示,什么是,float,浮动属性,4-4,浮动的三大显著特征,演示示例,7,：浮动设置,3.,占据行内元素的空间，导致行内元素围绕显示,为什么需要,clear,区隔属性,演示示例,8,：,clear,属性,第,3,个,DIV,块随窗口大小决定是否换行，如希望“强制”换行怎么办？,如何实现第,3,块换行显示？,什么是,clear,清除属性,演示示例,8,：,clear,属性,clear,作用,如果前一个元素存在左浮动或右浮动，则换行以区隔,只对块级元素有效,clear,属性的取值,right,left,both,none,需求说明：,在前面上机练习基础上，实现页面中间布局,练习,实现中间布局,完成时间：,10,分钟,中间两块宽度各占一半,需求说明：,在前面上机练习完成的页面中，实现,header,块的局部布局,练习,头部局部布局,完成时间：,25,分钟,盒子属性有哪些？各包含哪些属性？,float,属性的应用场合？有哪些取值？,clear,属性的应用场合？有哪些取值？,总结,