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

《《网页设计与制作》第6章课件.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第六章CSS样式表（二）完成贵美网站“登录页”的布局实现“登录页”顶部的局部布局本章任务使用盒模型相关属性实现页面布局掌握普通文档流、浮动与清除属性的含义本章目标如何控制CSS样式2-1盒子模型网页中的所有元素可以看作一个一个的“盒子”元素内容填充（也称内边距）边框边界（也称外边距）如何控制CSS样式2-2样式控制思路盒内样式修饰盒子位置布局盒内样式：设置网页元素的颜色、字体等外观盒子位置布局：确定盒子所在的位置、和其他网页元素的关系盒子模型是网页布局的基础盒子属性是盒子模型的关键属性为什么需要盒子属性盒子模型平

2、面图盒子模型三维立体图：注意背景色在背景图的下一层盒子属性：margin（外边距/边界）border（边框）padding（内边距/填充）各属性又分为四个方向什么是盒子属性margin-right右边界margin-left左边界margin-top上边界margin-bottom下边界marginborderpadding可统一设置或四边分开设置margin属性marginmargin-topmargin-rightmargin-bottommargin-leftmargin外边距margin-right右边界

3、margin-left左边界margin-top上边界margin-bottom下边界margin：1px，2px，3px，4px;margin：1px，2px;margin：0pxauto;margin-left:1px;分别代表什么含义？演示示例：margin的用法border属性border-colorborder-widthborder-styleborder边框border-topborder-rightborder-bottomborder-leftborderborder-left…修饰属性四个方向

4、缩写形式border每个边都有style、color、with属性，四个边可以一次设置，也可以分别设置border-style:none;border:1pxsolidred;border-right:5pxdottedblue;分别代表什么含义？.textBorder{border-width:1px;border-style:solid;}

名字：

5、e="fname"type="text"class="textBorder"/>

密码：

6、xpadding:5px10px分别代表什么含义？四个边可以一次设置，也可以分别设置padding演示示例：表格的填充效果元素的实际占位（实际宽、高）盒子高度=height属性+上下填充高度+上下边框高度盒子宽度=width属性+左右填充宽度+左右边框宽度元素的宽高及实际占位height:40pxborder-width-top:20pxmargin-top:10px左图图片的实际的高度是多少？padding-top:5px使用盒子属性布局元素2-1上外边距30px下填充40px左右外边距：水平居中左填充80px

7、5px宽的边框如何实现如下贵美logo图片的布局？图片背景色：#ff7300页面背景色：#cccbody{margin:0px;padding:0px;background:#ccc;}#logo{width:380px;border:5pxsolid#666;padding:10px20px40px80px;background:#ff7300;margin:30pxauto;//水平居中}

8、ages/logo.jpg"alt="logo"/>