• / 14
  • 下载费用:20 金币  

网页设计12

关 键 词:
网页设计12
资源描述:
网页设计与制作(12) CSS样式(7) ----盒子模型 新课讲授 一、盒子模型 v 1、P172,盒子实际宽度是由 content+padding+border+margin组成 内容 内边距 外边距 边框 新课讲授 一、盒子模型 v 2、边框实例 v IE对边框的某些属 性不大支持 课堂实践 1、综合实例 v 通过实例了解盒子 模型中各种属性的设置 对页面的控制效果 课堂实践 (1)插入并设置块的大小 边距实例 body{ background-color:#99CCFF; } #box{ width:154px; height:160px;/* 块的大小 */ } } 课堂实践 (2)插入图片并设置大小 …… body{ background-color:#99CCFF; } #box{ width:154px; height:160px;/* 块的大小 */ } #box img{ /* 设置相片 */ height:90px; width:135px; /* 指定相片 大小 */ } 课堂实践 (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;/* 指定相片的大小 */ } …… 课堂实践 (5)扩展:修改实例的各属性的值,并浏览页面 ,观察页面的变化。 课堂实践 2、给图片加上签名 (1)定义并添加签名块 …… #content{ color:#FFFFFF; } …… 鸣沙山 课堂实践 2、给图片加上签名 (2)设置签名块浮动 …… #content{ color:#FFFFFF; float:center; } 课堂实践 2、给图片加上签名 (3)设置签名块位置绝对定位(P210) …… #content{ color:#FFFFFF; float:center; position:absolute; left:137px; top:82px; } 课后作业 1. 参照课本P214-216中的例子,创建一网页12-1.htm在 各块中插入图像设置固定定位 The End Thanks a lot!Thanks a lot!
展开阅读全文
  麦档网所有资源均是用户自行上传分享,仅供网友学习交流,未经上传用户书面授权,请勿作他用。
0条评论

还可以输入200字符

暂无评论,赶快抢占沙发吧。

关于本文
本文标题:网页设计12
链接地址:https://www.maidoc.com/p-15678866.html

当前资源信息

d****

编号: 20180813171539271694

类型: 共享资源

格式: PPT

大小: 678.00KB

上传时间: 2019-11-07

相关搜索

关于我们 - 网站声明 - 网站地图 - 资源地图 - 友情链接 - 网站客服 - 联系我们

[email protected] 2018-2020 maidoc.com版权所有  文库上传用户QQ群:3303921 

麦档网为“文档C2C模式”,即用户上传的文档所得金币直接给(下载)用户,本站只是中间服务平台,本站所有文档下载所得的金币归上传人(含作者)所有。
备案号:蜀ICP备17040478号-3  
川公网安备:51019002001290号 

本站提供办公文档学习资料考试资料文档下载


收起
展开