您现在的位置: 教育资源库 >> 电脑学院 >> 网页设计 >> CSS教程 >> 正文

利用css技术实现广告文字环绕效果##5151doc

利用css技术实现广告文字环绕效果
作者:佚名 文章来源:本站原创 点击数: 更新时间:2010-2-12

我们经常看见大站的广告都是放在内容中间实现文字环绕的呢,一般普通小站广告只能放在内容开头或者结尾,也许大站的cms系统带这个功能吧,我们小站常用cms的基本没这个功能,因为内容标签里面不可能再自动加入一个广告标签,除非你添加文章的时候手动编辑,那不累死。

我也一直没想到过用css来控制,主要是没想到这个clear属性,今天偶然看到一个介绍,才知道原来实现文字环绕是如此简单。

<div class="news">
<div style="float:left;height:300px;width:0">一个宽为0的空白层,利用该层的高度控制广告层上下的位置</div>
<div style="float:left;height:250px;width:250px;clear:left;">广告代码</div>
</div>


关键在于clear:left的作用,clear有3个属性:clear:both,clear:left,clear:right,分别表示清除两边,左边,右边的浮动块。在广告层加上clear:left,那么就表示该层相对于空白层来说不浮动了,就往下移动了,太妙了,哈哈。

我们来比较一下:

<div class="news">
<div style="float:left;height:300px;width:100px;background:#CCC;">给他加上宽度和背景便于观察效果</div>
<div style="float:left;height:250px;width:250px;">去掉了清除浮动,你就明白了它的意义</div>
</div>

 

如果再加上这样一条:

<style>.news img,.news table{clear:both;}</style> //让内容里面的图片和表格不会遮到广告


很遗憾,上面的测试发现只有ie可行,firefox和opera还有不同的结果,ie的效果是图片遇到广告层自动下移,firefox是不会下移,但是不会遮住广告层,因为广告层在最前,opera是图片不会下移,会遮住广告层,搞笑啊。

再次改进:

<style>.news img,.news table{clear:both;position:relative;z-index:-1;}</style> //让图片和表格自动处于最底层


终于可以了,比较完美了,广告内容环绕的效果就这样搞定了:)

忘记加上了 <style>.news{float:left;}</style>


有人问要文字上右下都环绕,我改了一下,如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<title>利用css的clear属性搞定gg广告文字环绕</title>
<meta name="keywords" content="css,clear,ggad,文字环绕" />
<body>
<div style="float:left;">
<div style="float:left;height:200px;width:1px;"><!--一个宽为1px的空白层,利用该层的高度控制广告层上下的位置。宽为0就不能控制上下了,原因不知道。--></div>
<div style="float:left;height:250px;width:250px;clear:left;background:#F00;margin:25px 5px 5px 0;"><!--广告代码,firefox和opera还有少量偏差,需要另外调整,就不写了,基本可以。--></div>
<p>新闻内容</p>
</div>
</body>
</html>

[这篇文章来自[教育资源库]edu.5151doc.com收集与整理,感谢原作者]
本文版权归原作者所有,如需转载或摘录请注明出处:教育资源库 http://edu.5151doc.com

文章录入:魅力教师    责任编辑:5151doc 
【字体: 】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
| 设为首页 | 加入收藏 | 联系站长 | 在线投稿 | 版权申明 | 网站登陆 |