客服悬浮侧边栏代码-源码分享-日韩赶SEO


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="keywords" content="">
<meta name="description" content="">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="canonical" href="http://www.4asport.com"/>
<style>
*{margin:0;padding:0;}
/*右侧悬浮客服边栏样式开始*/
li{list-style:none;}
.sidebar-box{
    position: fixed;
    right:0;
    bottom:10%;
    transform: translateY(-50%);
    -ms-transform:translateY(-50%); /* IE 9 */
    -moz-transform:translateY(-50%);    /* Firefox */
    -webkit-transform:translateY(-50%); /* Safari 和 Chrome */
    -o-transform:translateY(-50%);
    z-index:1000;
}
.sidebar li{
    width:50px;
    height:50px;
    background-color: #EAEAEA;
    /*padding: 15px;*/
    position:relative;
    text-align:right;
    border-bottom: 1px solid #DBDBDB;
    transition:all 0.5s ease-in-out;
}
.sidebar li+li{

}
.sidebar li i{
    width:50px;
    height:49px;
    position: absolute;
    right:0;
    top:0;
    z-index:1100;
    background-color: #EAEAEA;
    transition:all 0.5s ease-in-out;
}
.sidebar li a{
    display:block;
    width:100%;
}
.sidebar li .text{
    width:220px;
    font-size:14px;
    color:#181818;
    font-weight: 600;
    position:absolute;
    left:50px;
    top:50%;
    transform: translateY(-50%);
    -ms-transform:translateY(-50%); /* IE 9 */
    -moz-transform:translateY(-50%);    /* Firefox */
    -webkit-transform:translateY(-50%); /* Safari 和 Chrome */
    -o-transform:translateY(-50%);
    text-align:left;
    z-index:10;
}
.sidebar li .icon01{background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAWCAMAAAAYXScKAAAAilBMVEUAAAAZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRmBODBBAAAALXRSTlMA+vTOI6JiJxXr1rycj4htCwP47uTbuK2DeHNTGd/RybKmaVoeEgZ8S0Q7NBEBCilLAAAAzUlEQVQY032Q1xaCMBBEDaF3QUCKINU6//97Egwh+GAeMnPu7slk9/DvHPvUguXoRxkODazMbS3QYYPvC8mnWacgOlWCatC5u+O6QgOaaPDw4u4GQ9CKnLlrYynYzripbYlm9KshComWCBcN8JCoimIRou3GPEfqfPvKuB8+8eeb8n9vzSxP8X5orzDqq5WcZuiMpjGxQwHNE4kdVkyBUtAccJb5dXTbssN1fwFZiqX/ZNIhWJ9yXNcG0LgaxWXkCV5CFFqYeR2RxDNn8gGcKg0vvALf3wAAAABJRU5ErkJggg==') no-repeat center #EAEAEA;
}
.sidebar li .icon02{background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAMAAACeyVWkAAAAbFBMVEUAAAAZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRnpdn+EAAAAI3RSTlMAePgVBOlv8MvFvyDdoJWAVzoZ0amQalwoDwwI4+KtrGRNM47SMzAAAACbSURBVBjTrY7XDsIwDEXd7KR7Dzb3//8RNaglAcQT5yF2jq8l009u3YlJl/DQpZadVXUtjqw87HKSLvWNGKXd4nPWiS3AbTs/u759rdFicl8bVlPAxO5rKQ1F5Gu4gEyjezQKIgao0CqAEQFIQpsA+IfVwBDaAdDrLOOh5ZnfrRxFiMa/dqQvcFMuJOr6TQtlLg7oP/KN0rLafw/49QoT2wU2DQAAAABJRU5ErkJggg==') no-repeat center #EAEAEA;
}
.sidebar li .icon03{background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAMAAACeyVWkAAAAY1BMVEUAAAAZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRlhDlP+AAAAIXRSTlMA/gsG4L2xrYaSgzvWYldVPRYU9PJj6c+7pZN+KiTYvmSzVU23AAAAh0lEQVQY043OuRbCMAxE0ZFRHBMMxAFCFrb//0qmwltBplBxzyuEDTN27GtsRC99jefhTi4RKNi8iYasmuhEXLzBTeaIg7ywSEdsdz8MWJ/7As1EIOKTYiOepXtojicQ0VXI0sEgQ8dSJSIsEYcVR2kRN2rgJdr4J7OrDxEzjpiw1kjWmfh3X7ACBf4ustxPAAAAAElFTkSuQmCC') no-repeat center #EAEAEA;
}
.sidebar li .icon04{background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAUCAMAAAC3SZ14AAAAY1BMVEUAAAAZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRlhDlP+AAAAIHRSTlMA+ONu54AQ8OzWyqSaPDQrHgve1cu9l4iGeXdeQTgkBiMXUaIAAAB0SURBVBjThctJDsIwEERRt2MTEjIQ5pl//1PSi8ZSW0j85VNV+FluZfLSACdPCUieBG101KFlRwPQrxyNICquHu4VPSDWswE2FS17OFf2WutuCc/jbS42qcVrC+yar80JS8puezCKofTOApodbXjpJJr87wN3LAlnDO8fHQAAAABJRU5ErkJggg==') no-repeat center #EAEAEA;
}
.sidebar li .icon05{background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAMAAABI111xAAAAWlBMVEUAAAAZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkVrhKSAAAAHXRSTlMA+W32655dTCwE8ePEiXlBNh7bsq2UgGVWUzkkFeeKoEsAAABlSURBVAjXZYyHDoAgEEPvENx7r/7/bwoSBLXJpc27pvRIzPTTAogvW5kjxG+WMG/6kpA1dyvmqPGsze2eQN46lkrUNtWQqU2HROX+FYrOeFdg8ksK/amthCKvbERpFlVGIR12ugCA4wP59fXcPwAAAABJRU5ErkJggg==') no-repeat center #EAEAEA;
}
.sidebar li .icon06{background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAVCAMAAAB44J7gAAAAe1BMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC9eBywAAAAKHRSTlMAuuL0BMorJNvGzQaL65QcGMKefRDm0YG1jW9qFA+/qWUxdmFRUDgOHBlEbgAAAJxJREFUGNNdz9kOgyAQheERt4pWBCq41aUr7/+EhYkZTb/LPwcCkCueEq4EzI5dCHMLxEWWk820EHdwKKUPUQJaRp5c4VYwDKuqPfWG+x5EFmwNLdQV6dMCTbR4VkH/omAjNNKRpERAC/Kl8PdSJGzd1+1pMRo9LG44wqOHxmg4fjtawS34IMXUeNPQpRV4PDY8SJmrIPjMbKfxsh8VDAtfHULr2QAAAABJRU5ErkJggg==') no-repeat center #EAEAEA;
}
.sidebar:hover li{
    width: 250px;
}
.sidebar:hover li .text{
    left:30px;
}
.sidebar li:hover{
    background-color: #181818;
}
.sidebar li:hover .text{
    color: #FFFFFF;
}
.sidebar li:hover .icon01{background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAWCAMAAAAYXScKAAAAjVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8DizOFAAAALnRSTlMA+vTOI/iiYicV69a8nI+IbQsD7uTbuK14c1MZ39HJsqaDaVoeEgaFfEtEOzQRQK8UwQAAAM1JREFUGNN9kFcSgzAMRGOM6TWEnk5J3/sfL5gYY/iIP7Q7Tx7tSJt/b9tkDhzP3KqwPcLJ/bMD2s7wsydFP2gfsV0tqQFTuAdOE7RgyA8B3sLdYUlak4tw50QJdnNhDq5Cc/rTGKVCK8SjRngqVEc5CjMWa16YPtRQ65bLp+FQ6Wl1kxvP04IVbTROQ71W0yyT0ywhbiyhvSOJx5sZUElaAN64v4nrfOx4ul9ExmYVvrhcEYlRzPN9F8DRNyj2nUgIUqLR0i4OjKSBPZAv0MoNcADZxyQAAAAASUVORK5CYII=') no-repeat center #181818;
}
.sidebar li:hover .icon02{background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAMAAACeyVWkAAAAeFBMVEUAAAD////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////GqOSsAAAAJ3RSTlMAeBb66cVvvwT17t3LoJWAVzohDgnRqZBqXB3j4q2senlkTTMpKBNq1QoZAAAAn0lEQVQY06WQ1w7DIAxFnTCzVzO75/3/P2xJFASt1JfcF5vDQVimv7l1B8ZVELqsFuwoy2u+Z8XOwgdX9dzokYtVb5JOr0Io2mbp+tY8W5U0W65ZRU6e7G5KkZKXzMg5+OTNEyMnigDpUglERAAClwYAttP5t8GlAxATnZF4m3oluHxKqciLXiQxetTuyWy1qr6wlulJAf2PP8mYl/b0BrRMCyKMiI76AAAAAElFTkSuQmCC') no-repeat center #181818;
}
.sidebar li:hover .icon03{background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAMAAACeyVWkAAAAWlBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////9ZMre9AAAAHnRSTlMA/guFBuBWr/O71rKSO2I9FhS9f2Ppz5MqJL6mpGTDZarYAAAAiElEQVQY043OyQ7CMAxF0WcHd0igTQmlZfr/38RhQYYi0bexdHQXxo6xm8ctnkm6cYvNdFWuEaiY74qsLJJpr7hYxoWeCSeyWMgotocveoTbsULuFSK+SrSxXKXE5lOGH7gaMAo0WgolhFPEKWCgFmmz+HiG/E/NOusjOsWKE2YsCTOWh+LfvQH48AVOI9rn/wAAAABJRU5ErkJggg==') no-repeat center #181818;
}
.sidebar li:hover .icon04{background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAUCAMAAAC3SZ14AAAAY1BMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+aRQ2gAAAAIHRSTlMA9uRu7+iAEPre1sqkmjw0Kx4L1cu9l4iGeXdeQTgkBqPpb8oAAAB2SURBVBjThcvJDsIwDEXRJE1CaelAmef7/1+JFyaSI6TehRdHz+5vOfrJSgOcLSUgWfJIo6EOKRsagH5jaIRWxNTDo6InhHo2wK6i5QCXyt5Jdot7ne5zsSnC9haR2/xsDmi+7PZHpeBKn+xB0kcdXrs2qKz3BYj3CX7eBwTTAAAAAElFTkSuQmCC') no-repeat center #181818;
}
.sidebar li:hover .icon05{background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAMAAABI111xAAAAXVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////9RKvvlAAAAHnRSTlMA+Wz28J4sBOnjg3lgW1RLQTYe28XDsq2Ui045JBV7ay17AAAAZklEQVQI12WOVw6AMAxDkw723tP3PyZUFW2BJ0W23ocVcoiMfhSA+LqKWaJ8u5q5um8LXSNREJUsG+9aZfcEVPu4SCG3LUcS2XYkcN+sSDuTXYqFHBr9eccATZ54xmgWdUyhnXa6AIdmBCVWjmKRAAAAAElFTkSuQmCC') no-repeat center #181818;
}
.sidebar li:hover .icon06{background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAVCAMAAAB44J7gAAAAe1BMVEUAAAD////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////NgkbwAAAAKHRSTlMAuuL0BMorJNvGzQaL65QcGMKefRDm0YFuZ7WNFA+/qTH4dmFRUDgOlJyinAAAAJxJREFUGNNdz9kOgyAURdErThWtCFQGtWpn/v8LC8Rcjetx50AASkFzRAWD2ZELIm6BtCpKtKoe0gF2NfchyUDyxOMWbhWJwYrWEx+4b4EVwdrhQlwjeVhEEy5eTTC+MegksngkqyPABfphOL00Yrod2/6wsEqaxZk9PEfolIT9t0YzqsEHzqbOm8yQN+DRh6JBTlwDwXcmGxkv+wMJbQtspYQSbAAAAABJRU5ErkJggg==') no-repeat center #181818;
}
@media (max-width:1024px){
	.sidebar-box{
		display:none;
	}
}
/*右侧悬浮客服边栏样式结束*/
</style>
</head>
<!--侧边悬浮客服开始-->
      <div class="sidebar-box">
        <ul class="sidebar">
          <li>
            <a href="http://www.4asport.com" target="_blank" class="clearfix" data-agl-cvt="32" rel="nofollow">
              <span class="text fl">QQ咨询</span>
              <i class="icon01"></i>
            </a>
          </li>
          <li>
            <a href="http://www.4asport.com" class="clearfix" target="blank" data-agl-cvt="1" rel="nofollow">
              <span class="text fl">在线咨询</span>
              <i class="icon02"></i>
            </a>
          </li>
          <li>
            <a href="http://www.4asport.com" class="clearfix" rel="nofollow">
              <span class="text fl">400-6666-666</span>
              <i class="icon04"></i>
            </a>
          </li>
          <li>
            <a href="http://www.4asport.com" class="clearfix" data-agl-cvt="1" rel="nofollow">
              <span class="text fl">在线留言</span>
              <i class="icon06"></i>
            </a>
          </li>
          <li>
            <a href="#top" class="clearfix" rel="nofollow">
              <span class="text fl">TOP</span>
              <i class="icon05"></i>
            </a>
          </li>
        </ul>
      </div>
<!--侧边悬浮客服结束-->

<div>

</div>
</body></html>
如文章内容失效请联系作者更新，感谢ing，如有任何疑问点击网站提问按钮；

本文由【日韩赶SEO】原创，转载请注明出处，违者必究：http://4asport.com/post/112.html
网站SEO优化教程|技术分享|源码分享

客服悬浮侧边栏代码
