Bacysoft.cn

 找回密码
 邀请注册
查看: 15087|回复: 0
打印 上一主题 下一主题

带关闭功能的浮动对联广告框的CSS写法(兼容所有主流浏览器)

[复制链接]
跳转到指定楼层
楼主
发表于 2012-6-7 20:17:48 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
对联广告在很多网站都有,使用 CSS 就能完美实现,下面是 CSS 代码:

  1.         .a_fl, .a_fr { float: right; position: fixed; top: 20px; z-index: 100; }
  2.         .a_fl { left: 0; }
  3.         .a_fr { right: 0; text-align: right; }
  4.         * html .a_fl, * html .a_fr { position: absolute; top: expression(offsetParent.scrollTop+20);  }
  5.         .a_fl a, .a_fr a { display:block; font-size:10px; text-align:center; }
复制代码
.a_fl:左浮动对联
.a_fr:右浮动对联
*html:用于 IE6 的兼容
其他具体属性的内容,可以参考 CSS 相关手册。

使用方法:

  1. <div class="a_fl">
  2.         <a href="javascript:;" onclick="this.parentNode.style.display='none'">X Close</a>
  3.         <!-- 此处放置广告 JS 代码或者其他需要的内容 -->
  4. </div>

  5. <div class="a_fr">
  6.         <a href="javascript:;" onclick="this.parentNode.style.display='none'">X Close</a>
  7.         <!-- 此处放置广告 JS 代码或者其他需要的内容 -->
  8. </div>
复制代码
本站在线图书馆http://www.bacysoft.cn/myapp/ebook/index.php)以及纪念日计时器http://www.bacysoft.cn/myapp/memorialday/index.php)均采用了此对联广告,欢迎访问!
您需要登录后才可以回帖 登录 | 邀请注册

本版积分规则



京ICP备08000958号-1|腾讯云|阿里云|联系方式|Bacysoft.cn

GMT+8, 2024-12-26 03:59 , Processed in 0.012877 second(s), 20 queries , Gzip On.

Powered by Discuz! X3.3

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表