我们经常遇到需要在两侧或一侧浮动的图片或按钮,特别是电商类网站需要在网页一侧浮动在线客服之类的按钮和图标。
大部分的浮动按钮之类的代码要么很复杂,要么简单但是不兼容IE6,毕竟IE6在中国的占有率还是比较高的,那么现在跟大家分享一个支持IE6简单的CSS代码。
这段CSS代码带浮动链接和回到顶部按钮:
CSS代码如下:(top.css)
#feedback{ right:100px; width:70px; height:100px; line-height:15px; overflow:visible; padding:10px 5px; border-radius:5px; bottom:180px; float:right; position:fixed !important; top:200px; } *html #feedback { position:absolute; z-index:300; top:expression(offsetParent.scrollTop+200);right:20px; /*兼容IE6*/ } #feedback a{ text-decoration:none; color:#000; } #feedback_btn { -moz-border-radius:5px;-khtml-border-radius:5px;-webkit-border-radius:5px;border-radius:5px; border:1px solid #dfdfdf; cursor:pointer; padding:5px; margin:5px; background:#fff; width:60px; height:20px; font-size:12px; } #returntop{ -moz-border-radius:5px;-khtml-border-radius:5px;-webkit-border-radius:5px;border-radius:5px; border:1px solid #dfdfdf; cursor:pointer; padding:5px; margin:5px; background:#fff; width:60px; height:20px; font-size:12px; }
html代码如下:
<link rel="stylesheet" href="top.css" media="all" /> <div id="feedback"> <div id="feedback_btn"><a href="" target="_blank">客服</a></div> <div id="feedback_btn"><a target="_blank" href="">QQ</a></div> <div id="feedback_btn"><a target="_blank" href="">旺旺</a></div> <div id="returntop">回顶部</div> <script type="text/javascript"> var getDiv=document.getElementById('returntop'); getDiv.onclick=function(){ window.scrollTo(0,0); } </script> </div> <table width="90%" border="0" align="center" bgcolor="#f8f8f8" height="1500"><td></td></table>
其中回到顶部使用了一个兼容IE6的JS代码,而没有使用#标签:
var getDiv=document.getElementById('returntop'); getDiv.onclick=function(){ window.scrollTo(0,0); }
- 相关文章 -
导航居中背景色通栏显示 DIV + CSS 代码 - 2013-03-15
如何去除ecshop标题和网站底部的Powered by ECShop - 2013-03-13
拍摄家庭照的5要5不要 - 2013-02-19
44条使用数码相机的重要提示 - 2013-02-17
一分钟迅速掌握好摄影构图 - 2013-01-17
拍摄人像剪影的9个技巧 - 2013-01-16
CSS样式兼容IE6,IE7的技巧 - 2012-11-17
简单DIV+CSS浮动在线客服代码,支持IE6 - 2012-11-17
- 文章评论 -
- 最新评论[0条评论] -
版权所有©逍遥峡谷 - 星际中心超自然局 · 地球总部 |
逍遥峡谷 ·
酷品优选
Copyright©Interstellar Central Occult Agency (I.C.O.A)
本局纯属虚构,如有雷同,纯属巧合