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

第8讲DIV+CSS布局-图文混排1陕西新华电脑软件学校-电子商务教研组任务一图文混排相关知识点（重点）CSS-图文混排教学重难点课前回顾：图文混排基础知识任务二图文混排综合应用（重点）2陕西新华电脑软件学校-电子商务教研组课前回顾：图文混排QQ相册效果制作相册浏览效果3陕西新华电脑软件学校-电子商务教研组任务一混排相关知识点background-image:url(图片路径);background-repeat:repeat-x;background-position:lefttop;4陕西新华电脑软件学校-电子商务教研组任务二综合应用图文混排-做人做事的艺术图文混排-畅游普吉岛图像的阴影效果5陕西新华电脑软件学校-电子商务教研组任务二综合应用知识点复习margin定义和用法margin简写属性在一个声明中设置所有外边距属性。该属性可以有1到4个值。注释：允许使用负值。6陕西新华电脑软件学校-电子商务教研组任务二综合应用知识点复习例子1margin:10px5px15px20px;上外边距是10px右外边距是5px下外边距是15px左外边距是20px7陕西新华电脑软件学校-电子商务教研组任务二综合应用知识点复习例子2margin:10px5px15px;上外边距是10px右外边距和左外边距是5px下外边距是15px8陕西新华电脑软件学校-电子商务教研组任务二综合应用知识点复习例子3margin:10px5px;上外边距和下外边距是10px右外边距和左外边距是5px9陕西新华电脑软件学校-电子商务教研组任务二综合应用知识点复习例子4margin:10px;所有4个外边距都是10px浏览器支持所有浏览器都支持margin属性。实例：magin.html

10陕西新华电脑软件学校-电子商务教研组任务二综合应用注释：任何的版本的InternetExplorer（包括IE8）都不支持属性值"inherit"。

11陕西新华电脑软件学校-电子商务教研组任务二综合应用基本方法：首先制作一个图像经验：这个图像的大小可以随意设定，但是如果图像的大小大于这个阴影大小，则图像的阴影就不能全部显示，因此这个图像应该比里边的图像大些。12陕西新华电脑软件学校-电子商务教研组任务二综合应用基本方法：给img标签外加个“div”<divclass="yx"><imgsrc="图像"/></div>13陕西新华电脑软件学校-电子商务教研组任务二综合应用基本方法：给DIV设置左浮动设置图像属性实例：yingying.htm14陕西新华电脑软件学校-电子商务教研组任务二综合应用使用“滑动门”技术上述实例在firefox浏览器与IE7正常显示，但是在IE6就不能正常显示了。怎么解决IE6的问题呢？使用“滑动门”技术15陕西新华电脑软件学校-电子商务教研组任务二综合应用基本方法：制作一个部分透明的GIF图像，图像的上边和左边各有“8”个像素的白色不透明区域，其余均为透明色。16陕西新华电脑软件学校-电子商务教研组任务二综合应用基本方法：改造HTML代码，把图像外部再套一层DIV<divclass="youxiajiao"><div><imgsrc="cup.gif"/></div></div>注意：写代码的时候<div><img>之间不要有空格。17陕西新华电脑软件学校-电子商务教研组任务二综合应用基本方法设置CSS代码18陕西新华电脑软件学校-电子商务教研组本讲总结综合应用19陕西新华电脑软件学校