<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简洁设计风格支持二维码qq在线客服代码</title>
<style>
*{ margin:0; padding:0; list-style:none;}
img{ border:0;}
.online_icon{overflow:hidden; }
.online_icon a{ display: block;width: 85px;height: 148px;background: url(http://demo.lanrenzhijia.com/2014/service0905/images/qq_online_trigger.png) no-repeat;}
.online_windows{ width:144px;}
.online_w_top{ background:url(http://demo.lanrenzhijia.com/2014/service0905/images/online_bg.png) no-repeat -36px 0; height:10px; _margin-bottom:-7px;}
.online_w_c{ background:url(http://demo.lanrenzhijia.com/2014/service0905/images/online_bg.png) repeat-y 0 -185px; padding:0 5px;}
.online_w_bottom{ background:url(http://demo.lanrenzhijia.com/2014/service0905/images/online_bg.png) repeat-y -36px -35px; height:29px;}
.online_content{ background:url(http://demo.lanrenzhijia.com/2014/service0905/images/online_bg.png) no-repeat -147px -185px; padding-top:11px;}
.online_content a.qq_icon{ background:url(http://demo.lanrenzhijia.com/2014/service0905/images/online_bg.png) no-repeat -37px -130px; width:121px; height:25px; display:block; margin:0 auto; text-indent:30px; line-height:23px; cursor:pointer; }
.online_content a.qq_icon:hover{ background-position:-159px -130px; color:#FFF;}
.online_bar h2{ background:url(http://demo.lanrenzhijia.com/2014/service0905/images/online_bg.png) repeat-x 0 -156px; height:29px; line-height:27px; font-size:12px; color:#666; text-align:left; }
.online_bar h2 a{ display:block; padding-left:14px; margin-left:6px; cursor:pointer;}
.expand h2 a{ background:url(http://demo.lanrenzhijia.com/2014/service0905/images/online_bg.png) no-repeat -36px -69px;}
.collapse h2 a{ background:url(http://demo.lanrenzhijia.com/2014/service0905/images/online_bg.png) no-repeat -36px -96px; color:#666; text-decoration:none;}
.expand h2 a:hover,.collapse h2 a:hover{ text-decoration:none; color:#c81d04;}
.online_content{ text-align:center; border-bottom:1px solid #d0d0d0;}
.online_content ul li{ height:24px; line-height:24px; margin-bottom:4px; font-size:12px;}
.online_content ul li a:hover{color:#c81d04; }
#online_qq_layer { width:225px; height:455px; position:fixed; right:-140px; top:80px;z-index:20;}
#online_qq_tab {float:left; margin-top: 50px;}
#onlineService {float:left; margin-left:-4px;}
#onlineType1, #onlineType2, #onlineType3, #onlineType4, #onlineType5, #onlineType6 {display:none;}
#onlineType1 {display:block;}
</style>
</head>
<body>
<!-- 代码begin -->
<div id="online_qq_layer">
<div id="online_qq_tab">
<div class="online_icon"> <a href="javascript:void(0);"></a> </div>
</div>
<div id="onlineService">
<div class="online_windows overz">
<div class="online_w_top"> </div>
<!--online_w_top end-->
<div class="online_w_c overz">
<div class="online_bar collapse" id="onlineSort1">
<h2> <a href="javascript:;">在线技术支持</a> </h2>
<div class="online_content overz" id="onlineType1" style="display: block;">
<ul class="overz">
<li><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=0000000000&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:12345678:51" /></a></li>
<li><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=0000000000&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:12345678:51" /></a></li>
<li><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=0000000000&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:12345678:51" /></a></li>
<li><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=0000000000&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:12345678:51" /></a></li>
<li>电话:13600000000</li>
</ul>
</div>
<!--online_content end-->
</div>
<!--online_bar end-->
<div class="online_bar collapse" id="onlineSort2">
<h2> <a href="javascript:;">加盟合作咨询</a> </h2>
<div class="online_content overz" id="onlineType2" style="display: block;">
<ul class="overz">
<li><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=0000000000&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:12345678:51" /></a> </li>
<li>电话:13600000000</li>
</ul>
</div>
</div>
<!--online_bar end-->
<div class="online_bar collapse" id="onlineSort3">
<h2> <a href="javascript:;">扫一扫,体验功能</a> </h2>
<div class="online_content overz" id="onlineType3" style="display: block;"> <img src="http://demo.lanrenzhijia.com/2014/service0905/images/qrcode.jpg" style="display: block;margin: 0 auto 5px;width: 90px"> </div>
</div>
<!--online_bar end-->
</div>
<!--online_w_c end-->
<div class="online_w_bottom"> </div>
<!--online_w_bottom end-->
</div>
<!--online_windows end-->
</div>
</div>
<script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script>
<script>
$(function(){
$('#online_qq_layer').hover(function(){
$(this).animate({right:'0'});
},function(){
$(this).animate({right:'-140px'});
});
});
</script>
<!-- 代码end -->
</body>
</html>