我们经常遇到需要在两侧或一侧浮动的图片或按钮,特别是电商类网站需要在网页一侧浮动在线客服之类的按钮和图标。
大部分的浮动按钮之类的代码要么很复杂,要么简单但是不兼容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);
}- 相关文章 -
什么是DM广告,DM广告的形式有哪些? - 2010-12-04
报纸广告设计知识介绍 - 2010-12-02
五则电视广告脚本(转) - 2009-08-03
CCTV-7中央电视台农业频道片花 - 2009-08-01
Html网页瘦身,网页加速系列(二) - 2009-07-31
Html网页瘦身,网页加速系列(一) - 2009-07-31
形成视觉冲击的几种方式 - 2009-07-31
什么是广告诉求点? - 2009-07-31
- 文章评论 -
- 最新评论[0条评论] -
版权所有©逍遥峡谷 - 星际中心超自然局 · 地球总部 |
逍遥峡谷 ·
酷品优选
Copyright©Interstellar Central Occult Agency (I.C.O.A)
本局纯属虚构,如有雷同,纯属巧合