网页设计14-盒子模型概要.ppt

内部培训资料,不作任何宣传用途 P o w e r B a r 中国专业PPT设计交流论坛 授课人：何蕴婷 EMAIL：jmhyt@126.com 内部培训资料,不作任何宣传用途 内部培训资料,不作任何宣传用途 网页设计与制作（14） CSS样式（8） ----盒子模型 知识技能目标 1、通过实训项目了解css盒子模型的结构。 实训内容 在网页中css的盒子模型的实现 实训项目 通过实例了解盒子模型中各种属性的设置对页面的控制效果 1、综合实例 新课讲授 1、P172，盒子实际宽度是由content+padding+border+margin组成 盒子模型 内容 内边距 外边距 边框 新课讲授 2、边框实例 IE对边框的某些属性不大支持 盒子模型 课堂实践 html head title边距实例/title style body{ background-color:#99CCFF; } #box{ width:154px; height:160px; /* 块的大小 */ } } /style /head body div id=box /div /body /html (1)插入并设置块的大小 课堂实践 …… style body{ background-color:#99CCFF; } #box{ width:154px; height:160px; /* 块的大小 */ } #box img{ /* 设置相片 */ height:90px; width:135px; /* 指定相片大小 */ } /style /head body div id=box img src=01.jpg /div /body /html (2)插入图片并设置大小 课堂实践 …… #box{ width:154px; height:160px; /* 块的大小 */ margin:36px; padding:20px; border:10px gray dashed; background-color:#000000; } …… (3)设置块的内外边距与边框样式 课堂实践 …… #box img{ /* 相片 */ border:5px yellow solid ; /* 指定相片的边框 */ margin:0px; /* 指定相片的外边距 */ height:90px; width:135px; /* 指定相片的内边距 */ padding:34px 14px 36px 11px; } …… (4)相片的样式 课堂实践 (5)扩展：修改实例的各属性的值，并浏览页面，观察页面的变化。 课堂实践 （1）定义并添加签名块 2、给图片加上签名 style …… #content{ color:#FFFFFF; } /style body …… div id=content鸣沙山 /div 课堂实践 （2）设置签名块浮动 2、给图片加上签名 style …… #content{ color:#FFFFFF; float:center; } /style 课堂实践 （3）设置签名块位置绝对定位（P210） 2、给图片加上签名 style …… #content{ color:#FFFFFF; float:center; position:absolute; left:137px; top:82px; } /style 课后作业 1. 参照课本中的例子，创建一网页13-1.htm体会盒子模型的结构 The End Thanks a lot! 内部培训资料,不作任何宣传用途 P o w e r B a r 中国专业PPT设计交流论坛 授课人：何蕴婷 EMAIL：jmhyt@126.com 内部培训资料,不作任何宣传用途 内部培训资料,不作任何宣传用途