Sitemap Rss
·您当前位置:网站首页 >> 网页与设计 >> 阅读文章

简单DIV+CSS浮动在线客服代码,支持IE6

来源:逍遥峡谷 发布时间:2012-11-17 浏览0条评论
内容简介

相关关键词:css   js   浮动   代码  

本文链接:http://www.icoa.cn/a/619.html [复制网址]

我们经常遇到需要在两侧或一侧浮动的图片或按钮,特别是电商类网站需要在网页一侧浮动在线客服之类的按钮和图标。

大部分的浮动按钮之类的代码要么很复杂,要么简单但是不兼容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);
}


本文链接:http://www.icoa.cn/a/619.html
关键词: css   js   浮动   代码  
上一篇:CSS样式兼容IE6,IE7的技巧
下一篇:CSS控制大图片自动缩放的样式,支持IE6
相关文章
·导航居中背景色通栏显示css代码 2013-03-15 11:42:47
·如何去除ecshop标题和网站底部的Powered by ECShop 2013-03-13 15:26:28
·拍摄家庭照的5要5不要 2013-02-19 09:42:28
·44条使用数码相机的重要提示 2013-02-17 21:02:50
·一分钟迅速掌握好摄影构图 2013-01-17 15:08:35
·拍摄人像剪影的9个技巧 2013-01-16 13:41:53
·模拟印鉴效果教程 2009-07-31 14:00:17
·PS配置文件丢失解决办法 2009-07-31 13:57:45
文章评论

共有0条评论(点击查看)



6504

逍遥峡谷 逍遥乱弹 张立博 飓风团队 爱之路 酷品优选 宝贝派 张子涵


版权所有©逍遥峡谷 Copyright©Canyon of Airily 冀ICP备06033848号