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