ecshop在线客服-很经典

HTML代码：（建议添加到模板文件page_footer.lbi）

<div id="floattools">

<div>

<a title="咨询客服" style="display:block;">咨询客服</a>

</div>

<div id="divFloatToolsView">

<div></div>

<div>

<ul>

<li>

<h3>QQ在线客服</h3>

</li>

<li><span><a href="http://www.56yx.cn" rel="nofollow">客服中心</a></span> </li>

<li><a href="http://wpa.qq.com/msgrd?v=3&uin=439854744&site=qq&menu=yes" rel="nofollow">客服QQ</a></li>

<li><a href="http://wpa.qq.com/msgrd?v=3&uin=439854744&site=qq&menu=yes" rel="nofollow">客服QQ</a></li>

<li><a href="#">客服QQ</a> </li>

<li><a href="#">客服QQ</a> </li>

</ul>

<ul>

<li>

<h3>电话咨询</h3>

</li>

<li><span>400-400-400</span></li>

</ul>

</div>

</div>

</div>

复制代码CSS代码：（添加到模板style.css） /*客服*/

.float0831 {position: fixed; top: 180px; right: 1px; _position: absolute;}

.float0831 a {color: #00a0e9;text-decoration: none;}

.float0831 a:hover {color: #ff8100; text-decoration: none;}

.float0831 .floatL {position: relative; width: 28px; float: left;}

.float0831 .floatL a {text-indent: -9999px; display: block; font-size: 0px;}

.float0831 .floatR {background: url(images/float_bg.gif);}

.float0831 .tp {background: url(images/float_bg.gif);}

.float0831 .cn {background: url(images/float_bg.gif);}

.float0831 .floatR {padding-bottom: 15px; width: 130px; background-repeat: no-repeat; background-position: -131px bottom; float: left; overflow: hidden;}

.float0831 .tp {background-repeat: no-repeat; background-position: 0% 0%; height: 10px;}

.float0831 .cn {background-repeat: repeat-y; background-position: -262px 0px;}

.float0831 .cn h3 {text-indent: -9999px; height: 36px; font-size: 0px;}

.float0831 .cn ul {padding-bottom: 0px; padding-left: 14px; padding-right: 14px; padding-top: 0px;}

.float0831 .cn ul li {border-bottom: #e6e5e4 1px solid; line-height: 36px; word-wrap: break-word; height: 36px; overflow: hidden; word-break: normal;}

.float0831 .titZx {background: url(images/float_s.gif) no-repeat;background-position: 5px -10px;}

.float0831 .titDh {background: url(images/float_s.gif) no-repeat;background-position: 5px -66px;}

.float0831 .titDc {background: url(images/float_s.gif) no-repeat;background-position: 5px -124px;}

.float0831 .icoZx {padding-left: 28px; display: block; float: left;background: url(images/float_s.gif) no-repeat;background-position: 2px -154px;}

.float0831 .icoTc {padding-left: 28px; display: block; float: left;background: url(images/float_s.gif) no-repeat;background-position: 0px -323px;}

.float0831 .icoFf {padding-left: 28px; display: block; float: left;background: url(images/float_s.gif) no-repeat;background-position: 2px -213px;}

.float0831 .icoTl {background: url(images/float_s.gif) no-repeat;background-position: 2px -264px;padding-left: 20px; display: block; font-family: "微软雅黑";float: left;}

.float0831 .btnOpen {top: 118px; left: 1px;position: relative; width: 28px; height: 118px; top: 80px; left: 2px;background: url(images/float_s.gif) no-repeat;background-position: -30px -396px;}

.float0831 .btnOpen_n {top: 118px; left: 1px;position: relative; width: 28px; height: 118px; top: 80px; left: 2px;background: url(images/float_s.gif) no-repeat;background-position: 0px -530px;}

.float0831 .btnCtn {top: 118px; left: 2px;position: relative; width: 28px; height: 118px; top: 80px; left: 2px;background: url(images/float_s.gif) no-repeat;background-position: 0px -396px;}

.float0831 ul li h3.titDc a {width: 80px; display: block; height: 36px;}

.float0831 ul li.top {border-bottom: #ace5f9 1px solid;}

.float0831 ul li.last {border:none;}

.float0831 ul li.bot {border-bottom-style: none;}

.float0831 ul.webZx {padding-bottom: 0px; padding-left: 0px; width: 164px; padding-right: 0px; background: url(images/webzx_bg.jpg) no-repeat; height: 65px; padding-top: 0px;}

.float0831 ul li.webZx-in {border-bottom-style: none; padding-left: 5px; height: 50px; padding-top: 8px;}