客服模块代码分享

{{{
<style type="text/css">
.user-kf-heng .kefubox{
padding:0px 0px 0px 180px;
height:110px;
overflow:hidden;
border:1px solid #ddd;
background:url(http://img11.360buyimg.com/cms/jfs/t643/96/744853571/2082/99967992/54849b76Nc6851953.gif) no-repeat #fff 0px center;
overflow:hidden;
}

.user-kf-heng .jOthers {
    width:254px;
    height:110px;
    padding:0px 10px;
    overflow:hidden;
    float:right;
    text-align:center;
}

.user-kf-heng .jInfo { line-height:20px; margin-top:20px; }

.user-kf-heng .kfArea {
    display:block;
    width:257px;
    height:110px;
    padding:0px 10px 0px 0px;
    overflow:hidden;
    float:left;
}

.user-kf-heng .kf {
    display:block;
    float:left;
    width:60px;
    overflow:hidden;
    margin-right:15px;
    padding:15px 0px;
}
.user-kf-heng .last { margin-right:0px; }

.user-kf-heng .kf a {
    display:block;
    width:60px;
    height:80px;
    overflow:hidden;
    text-align:center;
    position:relative;
}
.user-kf-heng .kf a img {
    display:block;
    padding:4px;
    border:solid 1px #eee;border-radius:30px;
}
.user-kf-heng .kf a:hover img { border-color:#d20000;border-radius:30px;}
.user-kf-heng .kf a span {
    display:block;
    height:20px;
    line-height:20px;
    overflow:hidden;
}
.user-kf-heng .kf a:hover span { color:#D90615; }

.user-kf-heng .kf a i { display:block; width:17px; height:18px; overflow:hidden; background:url(http://img11.360buyimg.com/cms/jfs/t517/320/738862989/3692/df6913db/54849b76Nad60cb13.png) no-repeat 0px 0px; position:absolute; right:7px; top:35px; }

.user-kf-heng .ts {
    display:block; width:12px; height:90px; overflow:hidden; padding:20px 9px 0px 9px; text-align:center;
    background:url(http://img11.360buyimg.com/cms/jfs/t661/84/752470269/14138/f2edccd5/54849b76N3db3147f.jpg); float:left; margin-right:15px;
    border-style:solid; border-color:#ddd; border-width:0px 1px 0px 1px;
}

</style>
<div class="user-kf-heng user_gl">
<div class="user_kf">
<div class="kefubox">
<ul class="kfArea">
<li class="ts">售前客服</li>
<li class="kf ">
<a target="blank" href="http://chat.jd.com/pop/chat?shopId=88888">
<img src="http://img11.360buyimg.com/cms/jfs/t664/30/731561930/14903/8ec97d61/54849b76N69b64dd4.jpg" />
<span>售前1号</span>
<i></i>
</a>
</li>
<li class="kf ">
<a target="blank" href="http://chat.jd.com/pop/chat?shopId=88888">
<img src="http://img11.360buyimg.com/cms/jfs/t571/73/734789487/14754/52cfdd6a/54849b76Na735878a.jpg" />
<span>售前2号</span>
<i></i>
</a>
</li>
<li class="kf last ">
<a target="_blank" href="http://chat.jd.com/pop/chat?shopId=88888">
<img src="http://img11.360buyimg.com/cms/jfs/t667/319/744267666/14721/a685406/54849b76Nb76f549e.jpg" />
<span>售前3号</span>
<i></i>
</a>
</li>
</ul>

        <ul class="kfArea">
            <li class="ts">售后客服</li>
            <li class="kf ">
                <a target="_blank" href="http://chat.jd.com/pop/chat?shopId=88888">
                    <img src="http://img11.360buyimg.com/cms/jfs/t670/61/740462276/14915/ed920199/54849b76N7a6df3d8.jpg" />
                    <span>售后1号</span>
                    <i></i>
                </a>
            </li>
            <li class="kf ">
                <a target="_blank" href="http://chat.jd.com/pop/chat?shopId=88888">
                    <img src="http://img11.360buyimg.com/cms/jfs/t664/30/731561930/14903/8ec97d61/54849b76N69b64dd4.jpg" />
                    <span>售后2号</span>
                    <i></i>
                </a>
            </li>
            <li class="kf  last ">
                <a target="_blank" href="http://chat.jd.com/pop/chat?shopId=88888">
                    <img src="http://img11.360buyimg.com/cms/jfs/t574/113/735644081/14622/edcd3e40/54849b76N2933c7e4.jpg" />
                    <span>售后3号</span>
                    <i></i>
                </a>
            </li>
        </ul>

        <div class="jOthers">
            <div class="ts">其它信息</div>
                <pre class="jInfo">工作时间：09:00 - 22:00

周一至周日</pre>
</div>
</div>
</div>
</div>

}}}