网站建设资讯

NEWS

网站建设资讯

css实现悬浮客服效果的案例-创新互联

这篇文章主要介绍css实现悬浮客服效果的案例,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

泸州ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为创新互联公司的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:13518219792(备注:SSL证书合作)期待与您的合作!

css实现悬浮客服效果的案例


    
        在线客服
                     
  • QQ:1846492969
  •             
  • QQ:1846492969
  •             
  • QQ:1846492969
  •             
  • QQ:1846492969
  •             
  • QQ:1846492969
  •              
    .sideBar {
     position:fixed;
     right:-182px;
     top:50px;
     background-color:#ffffff;
     border:#eea236 solid 1px;
     transition:right 0.5s;
     border:solid 1px red;
    }
    .sideBar:hover {
     right:0;
    }
    .sideBar>div {
     position:relative;
    }
    .sideBar .tips {
     position:absolute;
     height:120px;
     line-height:25px;
     background-color:#eea236;
     width:40px;
     left:-40px;
     top:50px;
     text-align:center;
     box-sizing:border-box;
     padding:10px 10px;
     border-top-left-radius:5px;
     border-bottom-left-radius:5px;
     font-weight:bold;
     color:#ffffff;
    }
    .sideBar .list {
     padding:0;
     list-style:none;
     width:180px;
     margin:0;
    }
    .sideBar .list>li {
     padding:15px;
     border-top:#eea236 dashed 1px;
    }
    .sideBar .list>li:hover {
     background-color:#f0ad4e;
     color:#ffffff;
    }
    .sideBar .list>li:first-child {
     border-top:none;
    }

    以上是“css实现悬浮客服效果的案例”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!


    名称栏目:css实现悬浮客服效果的案例-创新互联
    文章源于:http://cdweb.net/article/ddodpj.html

    其他资讯