右侧企业客服html代码

xiaojia

1. <!-- 右侧客服QQ代码部分 -->
   
2. <style>
   
3. *{ margin:0; padding:0; list-style:none;}
   
4. img{ border:0;}
   
5. body{ font-size:12px;}
   
6. .Q_pic1,.Q_sign1{background:url(http://demo.lanrenzhijia.com/2014/service1103/images/lanrenzhijia.png) no-repeat;}
   
7. .sign,.signa,.signb,.signc,.signd,.signe,.signf,.signg,.signh,.signi,.signj,.signq{background:url(http://demo.lanrenzhijia.com/2014/service1103/images/lanrenzhijia.png) no-repeat;display:block;}
   
8. .signi{background-position:-203px -484px;width: 10px;height: 30px;float:right;margin: 3px 10px 0 3px;}
   
9. .signj{background-position:-233px -478px;width: 10px;height: 30px;float:right;margin:0 5px 0 3px;}
   
10. .QQ_S{width:90px;height: 172px;position:fixed;right: 10px;top: 40%; z-index:99999;}
    
11. .Q_top{width:100%;background:#E6E6E6;height:30px;line-height:30px;text-align: right;cursor:pointer;}
    
12. .Q_botm{width: 84px;border: 3px solid #E6E6E6;}
    
13. .Q_pic,.Q_anser,.Q_sign{width:100%;height: 45px;border-bottom:2px solid #E6E6E6;background: url(http://demo.lanrenzhijia.com/2014/service1103/images/lanrenzhijia.png) no-repeat;position:relative;overflow:hidden;color: white;text-align:center;cursor:pointer;background-color:white;}
    
14. .Q_pic{background-position:20px -458px;}
    
15. .Q_anser{background-position:-242px -384px;}
    
16. .Q_sign{background-position:-241px -434px;}
    
17. .Q_anser_hide,.Q_pic_hide,.Q_sign_hide{width:100%;height:100%;position:absolute;background:#FE9B1D;left: -84px;-webkit-transition:left ease-in-out .3s;-moz-transition:left ease-in-out .3s;transition:left ease-in-out .3s;}
    
18. .hide_pic,.hide_pic1,.hide_pic2{width:100%;height: 26px;background: url(http://demo.lanrenzhijia.com/2014/service1103/images/lanrenzhijia.png) no-repeat;display:block;}
    
19. .hide_pic{background-position:-242px -348px;}
    
20. .hide_pic1{background-position:-100px -467px;}
    
21. .hide_pic2{background-position:-243px -479px;}
    
22. .Q_pic:hover .Q_pic_hide,.Q_anser:hover .Q_anser_hide,.Q_sign:hover .Q_sign_hide,.Q_pic1:hover .Q_pic1_hide,.Q_sign1:hover .Q_sign1_hide{left:0px;}
    
23. .Q_pic a, .Q_anser a,.Q_sign a,.Q_pic a:hover,.Q_anser a:hover,.Q_sign a:hover,.Q_pic1 a,.Q_pic1 a:hover,.Q_sign1 a,.Q_sign1 a:hover{color:white;}
    
24. a.blank{width:100%;height:100%;display:block;}
    
25. .QQ_S1{width:60px;height: 110px;position:fixed;right:10px;bottom:0;display:none;}
    
26. .Q_top1{width:100%;height:30px;background:#E6E6E6;line-height:30px;text-align:right;cursor:pointer;}
    
27. .Q_botm1{width:56px;border:2px solid #E6E6E6;height: 70px;}
    
28. .Q_pic1{border-bottom:2px solid #E6E6E6;width:100%;height:33px;background-position:-55px -465px;position:relative;overflow:hidden;color: white;text-align:center;line-height:33px;cursor:pointer;background-color:white;}
    
29. .Q_sign1{width:100%;height:33px;width:100%;line-height:33px; height: 35px;background-position:-255px -437px;position:relative;overflow:hidden;color: white;text-align:center;cursor:pointer;background-color:white;}
    
30. .Q_pic1_hide,.Q_sign1_hide{width:100%;height:100%;position:absolute;background:#FE9B1D;left: -56px;-webkit-transition:left ease-in-out .3s;-moz-transition:left ease-in-out .3s;transition:left ease-in-out .3s;cursor:pointer;}
    
31. .Q_sign1_hide a{font-size:12px;}
    
32. </style>
    
33. <div class="QQ_S">
    
34. <div class="Q_top" onClick="HideFoot()">
    
35. <span class="signi"></span>收起
    
36. </div>
    
37. <div class="Q_botm">
    
38. <div class="Q_pic">
    
39. <div class="Q_pic_hide">
    
40. <a href="http://wpa.qq.com/msgrd?v=3&uin=353535611&site=qq&menu=yes" target="_blank" title="企业QQ交谈" rel="nofollow"><span class="hide_pic"></span>企业QQ交谈 </a>
    
41. </div>
    
42. </div>
    
43. <div class="Q_anser">
    
44. <div class="Q_anser_hide">
    
45. <a href="http://wpa.qq.com/msgrd?v=3&uin=353535611&site=qq&menu=yes" target="_blank" title="提交反馈建议"><span class="hide_pic1"></span>提交反馈建议 </a>
    
46. </div>
    
47. </div>
    
48. <div class="Q_sign">
    
49. <div class="Q_sign_hide" onClick="backToTop();">
    
50. <a href="javascript:void(0)" title="返回顶部"><span class="hide_pic2"></span>返回顶部 </a>
    
51. </div>
    
52. </div>
    
53. </div>
    
54. </div>
    
55. <div class="QQ_S1">
    
56. <div class="Q_top1" onClick="ShowFoot()">
    
57. <span class="signj"></span>展开
    
58. </div>
    
59. <div class="Q_botm1">
    
60. <div class="Q_pic1">
    
61. <div class="Q_pic1_hide">
    
62. <a href="http://wpa.qq.com/msgrd?v=3&uin=353535611&site=qq&menu=yes" rel="nofollow"><span class="hide_pic3"></span>QQ交谈</a>
    
63. </div>
    
64. </div>
    
65. <div class="Q_sign1">
    
66. <div class="Q_sign1_hide" onClick="backToTop();">
    
67. <a href="javascript:void(0)">返回顶部</a>
    
68. </div>
    
69. </div>
    
70. </div>
    
71. </div>
    
72. 
    
73. 
    
74. <!-- 右侧客服QQ代码部分begin -->
    
75. ​

复制代码