• 您当前位置:网站首页 >> 视觉设计 >> 简单DIV+CSS浮动在线客服代码,支持IE6
  • 简单DIV+CSS浮动在线客服代码,支持IE6

    iCoA首席特工 逍遥峡谷 发布:2012-11-17 更新:2012-11-17 浏览0条评论
    内容简介

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

    本文链接:https://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);
    }


    本文链接:https://www.icoa.cn/a/619.html
    关键词: css   js   浮动   代码  


    如果您愿意支持本站,欢迎点击打赏哦~



    下一篇:CSS样式兼容IE6,IE7的技巧

    上一篇:CSS控制大图片自动缩放的样式,支持IE6


    - 相关文章 -


    Photoshop组的混合属性里穿透是什么意思?PS里穿透是什么意思? - 2010-07-29

    CSS样式兼容IE6,IE7的技巧 - 2012-11-17

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

    CSS控制大图片自动缩放的样式,支持IE6 - 2012-11-15

    CSS隐藏DIV层和显示DIV层的控制方法 - 2012-11-15

    正则表达式的规则 - 2012-11-13

    用js实现只能点击一次的按钮的功能 - 2012-11-10

    JS 正则表达式的用法 - 2012-11-09


    - 文章评论 -




    6026

    [由于政策原因,您的留言如果提交成功后,需要审核才能展示,请改天再来查看,请不要重复提交,谢谢支持!]

    - 最新评论[0条评论] -


    [>>>点击查看更多评论]

    版权所有©逍遥峡谷 - 星际中心超自然局 · 地球总部 | 逍遥峡谷 · 酷品优选
    Copyright©Interstellar Central Occult Agency (I.C.O.A)
    本局纯属虚构,如有雷同,纯属巧合

    冀公网安备13011102001055号 · 冀ICP备06033848号