第8讲DIV+CSS布局—图文混排探究.pptVIP

第8讲 DIV+CSS布局-图文混排 教学重难点 课前回顾：图文混排 QQ相册效果制作 相册浏览效果 任务一 混排相关知识点 background-image:url(图片路径); background-repeat:repeat-x; background-position:left top; 任务二 综合应用 图文混排-做人做事的艺术 图文混排-畅游普吉岛 图像的阴影效果 任务二 综合应用 知识点复习 margin定义和用法 margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。 注释：允许使用负值。 任务二 综合应用 知识点复习 例子 1 margin:10px 5px 15px 20px; 上外边距是 10px 右外边距是 5px 下外边距是 15px 左外边距是 20px 任务二 综合应用 知识点复习 例子 2 margin:10px 5px 15px; 上外边距是 10px 右外边距和左外边距是 5px 下外边距是 15px 任务二 综合应用 知识点复习 例子 3 margin:10px 5px; 上外边距和下外边距是 10px 右外边距和左外边距是 5px 任务二 综合应用 知识点复习 例子 4margin:10px; 所有 4 个外边距都是 10px 浏览器支持 所有浏览器都支持 margin 属性。 实例：magin.html 任务二 综合应用 注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 inherit。 任务二 综合应用 基本方法： 首先制作一个图像 经验：这个图像的大小可以随意设定，但是如果图像的大小大于这个阴影大小，则图像的阴影就不能全部显示，因此这个图像应该比里边的图像大些。 任务二 综合应用 基本方法： 给img标签外加个“div” div class=yximg src=图像//div 任务二 综合应用 基本方法： 给DIV设置左浮动 设置图像属性 实例：yingying.htm 任务二 综合应用 使用“滑动门”技术 上述实例在firefox浏览器与IE7正常显示，但是在IE6就不能正常显示了。 怎么解决IE6的问题呢？ 使用“滑动门”技术 任务二 综合应用 基本方法： 制作一个部分透明的GIF图像，图像的上边和左边各有“8”个像素的白色不透明区域，其余均为透明色。 任务二 综合应用 基本方法： 改造HTML代码，把图像外部再套一层DIV div class=youxiajiaodivimg src=cup.gif//div/div 注意：写代码的时候divimg之间不要有空格。 任务二 综合应用 基本方法 设置CSS代码 本讲总结 综合应用 作业 1、完成案例3、4 2、完成作业一、作业二 3、作业三（选做）