Bacysoft.cn

标题: 带关闭功能的浮动对联广告框的CSS写法（兼容所有主流浏览器） [打印本页]

---

作者: bacy001    时间: 2012-6-7 20:17
标题: 带关闭功能的浮动对联广告框的CSS写法（兼容所有主流浏览器）
对联广告在很多网站都有，使用 CSS 就能完美实现，下面是 CSS 代码：

1. 
   
2.         .a_fl, .a_fr { float: right; position: fixed; top: 20px; z-index: 100; }
   
3.         .a_fl { left: 0; }
   
4.         .a_fr { right: 0; text-align: right; }
   
5.         * html .a_fl, * html .a_fr { position: absolute; top: expression(offsetParent.scrollTop+20);  }
   
6.         .a_fl a, .a_fr a { display:block; font-size:10px; text-align:center; }
   

复制代码

.a_fl：左浮动对联
.a_fr：右浮动对联
*html：用于 IE6 的兼容
其他具体属性的内容，可以参考 CSS 相关手册。

使用方法：

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

复制代码

本站在线图书馆（http://www.bacysoft.cn/myapp/ebook/index.php）以及纪念日计时器（http://www.bacysoft.cn/myapp/memorialday/index.php）均采用了此对联广告，欢迎访问！

---

欢迎光临 Bacysoft.cn (http://www.ec7ts.cfan.cc/)

Powered by Discuz! X3.3