IT资讯/综合软件下载站!┆ 最新软件 最新文章 最新手机 UFO外星人 网站分类

您当前的位置→图文中心网站专题搜索引擎广告在文章的中间显示

广告在文章的中间显示


2009/1/3 23:52:55 编辑:佚名 来源:本站整理 
今天给大家分享广告在文章的中间显示搜索引擎文章。喜欢广告在文章的中间显示的可以分享广告在文章的中间显示给你的好友。

我们经常看见大站的广告都是放在内容中间实现文字环绕的呢, 一般普通小站广告只能放在内容开头或者结尾, 也许大站的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>

    12下一页

    相关文章
  • QQ8.9.3.21169 正式版去广告特别版 安装版+绿色版+集成NtrQQ版
  • 今日头条广告怎么投放
  • 让小米干净如iPhone!实测关闭MIUI全部广告
  • 谷歌浏览器屏蔽广告的相关教程介绍
  • 小米如何彻底去除MIUI广告
  • 如何在微信公众号赚钱做广告
  • 软件广告弹窗如何拦截?
  • 去除qq聊天窗口广告/去除QQ广告的方法
  • 相关推荐
  • 龙帝IE小助手(IE浏览器广告拦截工具) v1.3 最新版
  • 视频客户端电脑版去广告补丁(爱奇艺腾讯优酷视频客户端去广告) v1.0 官方版
  • 地摊叫卖广告语音制作软件(地摊叫卖语音制作) v1.0 绿色最新版
  • 爱奇艺视频电脑版去广告补丁(爱奇艺去广告神器) v1.0 最新版
  • 微软繁综艺字体(常用POP广告字体) v1.0 绿色免费版
  • 游戏宣传广告海报背景素材 高清图片 最新版
  • 微信群二维码批量采集器(微商打广告神器) v1.0 绿色最新版
  • 奶牛广告过滤器(拦截浏览器网站广告) v4.94.34121 中文增强版
  • 发表评论
    栏目列表
    阅读排行
    网站帮助 - 广告合作 - 下载声明 - 网站地图