QQ在线客服

css代码：


    .float0831 {
    POSITION: fixed; TOP: 180px; RIGHT: 1px; _position: absolute
}
.float0831 A {
    COLOR: #00a0e9
}
.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")  //  http://images.cnblogs.com/cnblogs_com/xinlinux/584094/o_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;display:none;
}
.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
}
.float0831 .titDh {
    BACKGROUND: url("images/float_s.gif") no-repeat
}
.float0831 .titDc {
    BACKGROUND: url("images/float_s.gif") no-repeat         //  http://images.cnblogs.com/cnblogs_com/xinlinux/584094/o_float_s.gif
}
.float0831 .icoZx {
    BACKGROUND: url("images/float_s.gif") no-repeat
}
.float0831 .icoTc {
    BACKGROUND: url("images/float_s.gif") no-repeat
}
.float0831 .icoFf {
    BACKGROUND: url("images/float_s.gif") no-repeat
}
.float0831 .icoTl {
    /*BACKGROUND: url("images/float_s.gif") no-repeat*/
}
.float0831 .btnOpen {
    BACKGROUND: url("images/float_s.gif") no-repeat
}
.float0831 .btnOpen_n {
    BACKGROUND: url("images/float_s.gif") no-repeat
}
.float0831 .btnCtn {
    BACKGROUND: url("images/float_s.gif") no-repeat
}
.float0831 .titZx {
    BACKGROUND-POSITION: 5px -10px
}
.float0831 .titDh {
    BACKGROUND-POSITION: 5px -66px
}
.float0831 .titDc {
    BACKGROUND-POSITION: 5px -124px
}
.float0831 .icoZx {
    BACKGROUND-POSITION: 2px -154px
}
.float0831 .icoTc {
    BACKGROUND-POSITION: 0px -323px
}
.float0831 .icoFf {
    BACKGROUND-POSITION: 2px -213px
}
.float0831 .icoTl {
    PADDING-LEFT: 5px; DISPLAY: block; FONT-FAMILY: "微软雅黑"; BACKGROUND-POSITION: 2px -266px; FLOAT: left
}
.float0831 .btnOpen {
    BACKGROUND-POSITION: -30px -396px
}
.float0831 .btnOpen_n {
    BACKGROUND-POSITION: 0px -530px
}
.float0831 .btnCtn {
    BACKGROUND-POSITION: 0px -396px
}
.float0831 .icoZx {
    PADDING-LEFT: 28px; DISPLAY: block; FLOAT: left
}
.float0831 .icoTc {
    PADDING-LEFT: 28px; DISPLAY: block; FLOAT: left
}
.float0831 .qqOn {
    display:block;margin:6px 0px 0px 15px;
}

.float0831 .icoFf {
    PADDING-LEFT: 28px; DISPLAY: block; FLOAT: left
}
.float0831 .btnOpen {
    POSITION: relative; WIDTH: 28px; HEIGHT: 118px; TOP: 80px; LEFT: 2px
}
.float0831 .btnOpen_n {
    POSITION: relative; WIDTH: 28px; HEIGHT: 118px; TOP: 80px; LEFT: 2px
}
.float0831 .btnCtn {
    POSITION: relative; WIDTH: 28px; HEIGHT: 118px; TOP: 80px; LEFT: 2px
}
.float0831 .btnOpen {
    TOP: 118px; LEFT: 1px
}
.float0831 .btnOpen_n {
    TOP: 118px; LEFT: 1px
}
.float0831 .btnCtn {
    TOP: 118px; LEFT: 2px
}
.float0831 UL LI H3.titDc A {
    WIDTH: 80px; DISPLAY: block; HEIGHT: 36px
}
.float0831 UL LI.top {
    BORDER-BOTTOM: #ace5f9 1px solid
}
.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
}







HTml代码：

<div id="floatTools" class="float0831">
<div class="floatL">
<a title="查看在线客服" class="btnOpen" id="aFloatTools_Show" style="display:none" onclick="javascript:$('#divFloatToolsView').animate({width: 'show', opacity: 'show'}, 'normal',function(){ $('#divFloatToolsView').show(); });$('#aFloatTools_Show').attr('style','display:none');$('#aFloatTools_Hide').attr('style','display:block');" href="javascript:void(0);">展开</a>
<a title="关闭在线客服" class="btnCtn" id="aFloatTools_Hide" style="display:block" onclick="javascript:$('#divFloatToolsView').animate({width: 'hide', opacity: 'hide'}, 'normal',function(){ $('#divFloatToolsView').hide(); });$('#aFloatTools_Show').attr('style','display:block');$('#aFloatTools_Hide').attr('style','display:none');" href="javascript:void(0);">收缩</a>
</div>
<div id="divFloatToolsView" class="floatR" style="display: block;">
<div class="tp"></div>
<div class="cn">
<ul>
<li class="top">
<h3 class="titZx">
QQ咨询
</h3>
</li>
<li>
<span class="icoZx">在线咨询</span>
</li>
<li>
<a class="qqOn" target="_blank" href="http://wpa.qq.com/msgrd?v=3&amp;uin=2278808484&amp;site=qq&amp;menu=yes" rel="nofollow"><img border="0" src="http://wpa.qq.com/pa?p=2:2278808484:41" alt="长沙写字楼网客服" title="长沙写字楼网客服"></a>
</li>
<li>
<a class="qqOn" target="_blank" href="http://wpa.qq.com/msgrd?v=3&amp;uin=2753546408&amp;site=qq&amp;menu=yes" rel="nofollow"><img border="0" src="http://wpa.qq.com/pa?p=2:2753546408:41" alt="长沙写字楼网客服" title="长沙写字楼网客服"></a>
</li>
</ul>
<ul>
<li>
<h3 class="titDh">
电话咨询
</h3>
</li>
<li>
<span class="icoTl">0731-83860482</span>
</li>
<li class="bot">
<h3 class="titDc">
<a href="http://www.cslou.com/advise.html" target="_blank">反馈意见</a>
</h3>
</li>
</ul>
</div>
</div>
</div>