《《网页设计与制作》第6章课件》由会员分享，可在线阅读，更多相关《《网页设计与制作》第6章课件（29页珍藏版）》请在金锄头文库上搜索。
1、第六章 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 左边界,margin-t
3、op 上边界,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 dotted blue;,分别代表什么含义？, .textBorder border-width:1px; border-style:solid; 名字： 密码： ,细边框的样式,使用border属性修饰表单,padding属性 padding padding-top padding-right padding-bottom padding-left,padding内边距,padding-left : 5px; padding: 5px 10px 20px 40px pa
5、dding: 5px 10px,分别代表什么含义？,四个边可以一次设置，也可以分别设置,padding,元素的实际占位（实际宽、高） 盒子高度 = height属性 + 上下填充高度 + 上下边框高度 盒子宽度 = width属性 + 左右填充宽度 + 左右边框宽度,元素的宽高及实际占位,height: 40px,border-width-top: 20px,margin-top: 10px,左图图片的实际的高度是多少？,padding-top: 5px,使用盒子属性布局元素2-1,上外边距30px,下填充40px,左右外边距：水平居中,左填充80px,5px宽的边框,如何实现如下贵美logo
6、图片的布局？,图片背景色：#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进行布局或美化,如何实现注册页面的布局？,使用盒子属性实现DIV+CSS布局
7、2-1,main：主体部分,footer：底部部分,header：顶部,实现步骤 1、分析页面的分块结构，形成HTML组织结构,使用盒子属性实现DIV+CSS布局2-1,为了控制整个页面的居中，添加一个大容器：container,main：主体部分,footer：底部部分,header：顶部,实现步骤 2、编写每个DIV块的CSS控制定位,使用盒子属性实现DIV+CSS布局2-2,#containe: 980px 、居中,#header： 136px;、背景色#ccc,#main： 400px;、背景色#fff,#footer： 100px;、背景色#ccc,需求说明： 重新实现DIV+CSS
8、布局,练习DIV+CSS布局,#container: 980px 居中,#header： 136px; 背景色#ccc,#main： 400px; 背景色#fff,#footer： 100px; 背景色#ccc,需求说明： 根据提供的素材，实现表单的细边框样式,练习修饰表单,常见的细边框样式,为什么需要float浮动属性,如何解决中间两块布局无法同行显示的问题？,如何实现为希望的布局？,什么是float浮动属性4-1,脱离常规文档流而表现为向右或向左浮动,默认的常规文档流：页面内容从上到下，从左到右排列。DIV块换行显示,向右浮动，脱离常规文档流,什么是float浮动属性4-2,浮动的三大显著
9、特征,1.DIV块元素失去“块状”换行显示特征，变为行内元素,什么是float浮动属性4-3,浮动的三大显著特征,2.紧贴上一个浮动元素（同方向）或父级元素的边框，如宽度不够将换行显示,什么是float浮动属性4-4,浮动的三大显著特征,3.占据行内元素的空间，导致行内元素围绕显示,为什么需要clear区隔属性,第3个DIV块随窗口大小决定是否换行，如希望“强制”换行怎么办？,如何实现第3块换行显示？,什么是clear清除属性,clear作用 如果前一个元素存在左浮动或右浮动，则换行以区隔 只对块级元素有效 clear属性的取值 right left both none,需求说明： 在前面上机练习基础上，实现页面中间布局,练习实现中间布局,中间两块宽度各占一半,需求说明： 在前面上机练习完成的页面中，实现header块的局部布局,练习头部局部布局,盒子属性有哪些 ？各包含哪些属性？ float属性的应用场合？有哪些取值？ clear属性的应用场合？有哪些取值？,总结,
