第8讲DIV+CSS布局—图文混排

1、陕西新华电脑软件学校-电子商务教研组1第8讲 DIV+CSS布局-图文混排版权所有陕西新华电脑软件学校-电子商务教研组2任务一任务一 图文混排相关知识点（重点）图文混排相关知识点（重点）CSS-图文混排教学重难点教学重难点课前回顾：图文混排基础知识课前回顾：图文混排基础知识任务二任务二 图文混排综合应用（重点）图文混排综合应用（重点）版权所有陕西新华电脑软件学校-电子商务教研组3课前回顾：图文混排课前回顾：图文混排uQQ相册效果制作u相册浏览效果版权所有陕西新华电脑软件学校-电子商务教研组4任务一任务一 混排相关知识点混排相关知识点ubackground-image:url(图片路径);uba

2、ckground-repeat:repeat-x; ubackground-position:left top;版权所有陕西新华电脑软件学校-电子商务教研组5任务任务二二 综合应用综合应用u图文混排-做人做事的艺术u图文混排-畅游普吉岛u图像的阴影效果版权所有陕西新华电脑软件学校-电子商务教研组6任务二任务二 综合应用综合应用 u知识点复习pmargin定义和用法 margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。 注释：允许使用负值。注释：允许使用负值。版权所有陕西新华电脑软件学校-电子商务教研组7任务二任务二 综合应用综合应用 u知识点复习p例子 1 m

3、argin:10px 5px 15px 20px; 上外边距是 10px 右外边距是 5px 下外边距是 15px 左外边距是 20px版权所有陕西新华电脑软件学校-电子商务教研组8任务二任务二 综合应用综合应用 u知识点复习p例子 2 margin:10px 5px 15px; 上外边距是 10px 右外边距和左外边距是 5px 下外边距是 15px 版权所有陕西新华电脑软件学校-电子商务教研组9任务二任务二 综合应用综合应用 u知识点复习p例子 3 margin:10px 5px; 上外边距和下外边距是 10px 右外边距和左外边距是 5px版权所有陕西新华电脑软件学校-电子商务教研组10

4、任务二任务二 综合应用综合应用 u知识点复习p例子 4margin:10px; 所有 4 个外边距都是 10pxu浏览器支持p所有浏览器都支持 margin 属性。p实例：magin.html 版权所有陕西新华电脑软件学校-电子商务教研组11任务二任务二 综合应用综合应用 u注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 inherit。 版权所有陕西新华电脑软件学校-电子商务教研组12任务二任务二 综合应用综合应用 u基本方法：p首先制作一个图像p经验：这个图像的大小可以随意设定，但是如果图像的大小大于这个阴影大小，则图像的阴影就不能全部显示，因此这个

5、图像应该比里边的图像大些。版权所有陕西新华电脑软件学校-电子商务教研组13任务二任务二 综合应用综合应用 u基本方法：p给img标签外加个“div”版权所有陕西新华电脑软件学校-电子商务教研组14任务二任务二 综合应用综合应用 u基本方法：p给DIV设置左浮动p设置图像属性p实例：yingying.htm版权所有陕西新华电脑软件学校-电子商务教研组15任务二任务二 综合应用综合应用 u使用“滑动门”技术p上述实例在firefox浏览器与IE7正常显示，但是在IE6就不能正常显示了。p怎么解决IE6的问题呢？ 使用“滑动门”技术版权所有陕西新华电脑软件学校-电子商务教研组16任务二任务二 综合应用综合应用 u基本方法：p制作一个部分透明的GIF图像，图像的上边和左边各有“8”个像素的白色不透明区域，其余均为透明色。版权所有陕西新华电脑软件学校-电子商务教研组17任务二任务二 综合应用综合应用 u基本方法：p改造HTML代码，把图像外部再套一层DIV注意：写代码的时候之间不要有空格。版权所有陕西新华电脑软件学校-电子商务教研组18任务二任务二 综合应用综合应用 u基本方法p设置CSS代码版权所有陕西新华电脑软件学校-电子商务教研组19本讲总结本讲