利用css的clear属性来做内容广告文字环绕效果

  • A+
所属分类:建站

最近在测试一个由PHPCMSV9系统做的网站,在测试广告系统的时候,王晟璟突然想到我们经常看见的大站的广告都是放在内容中间实现文字环绕的,比如新浪网就是如此。而大家看见王晟璟博客文章内容页也是有这样的广告模式。

这样的形式不仅仅很好的展示了广告而且又把全是文字地方加上了一点点缀给视觉带来另外一番的冲击,但一般普通小站广告只能放在内容开头或者结尾,比如说我正在测试的PHPCMSV9网站系统。

利用css的clear属性来做内容广告文字环绕效果

利用css来做文章内容页广告文字环绕效果

也许大站的cms系统在设计之初都会带上这个功能吧,可我们小站常用cms的基本没这个功能,因为内容标签里面不可能再自动加入一个广告标签,除非我们添加文章的时候手动编辑,那不是累死了。

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

 

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

 

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

我们来比较一下:

 

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

 

如果再加上这样一条:

 

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

 

很遗憾,上面的测试发现只有在ie浏览器上可行,firefox和opera两款浏览器上就是不同的结果了,ie浏览器的效果是图片遇到广告层自动下移,firefox浏览器是不会下移,但是不会遮住广告层,因为广告层在最前,opera浏览器是图片不会下移,会遮住广告层,真是太有意思了。

再次改进:

 

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

 

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

 

按照上面的思路我还可以让文字上右下都环绕,我改了一下,如下:

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

 

好吧,就这样,需要的朋友可以照着这样的方式试试看哦,欢迎测试反馈!

avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: