QQ客服在很多网站都很普通，它可以很方便的让浏览我们网站的用户通过QQ进行交流，不需要去查找QQ再加好友，只需要点一下QQ客服上的图标就可以直接发信息了。
通过自己写网站HTML代码的方法来给网站添加QQ客服，也就是这节课要讲的内容。
先看下制作好的在线QQ客服效果图：
怎么给自己的网站添加这款比较漂亮的QQ客服呢，方法如下：
将下载QQ的JS文件和背景图片文件夹，上传到自己网站空间的根目录下，同时设置H5设计精灵的"站点" > "资源文件路径"为网站空间目录。qq客服JS文件下载：QQ客服
复制以下的CSS代码放到H5设计精灵的页面CSS代码中，用来控制QQ客服的样式和背景。
.qq{width:120px;}<br>.qq_t{width:120px;}<br>.qq_d{width:120px;}<br>.qq_bg{width:130px; background:url(/qqimages/qq03.png) repeat-y; padding:10px 0px 10px; overflow:hidden;}<br>.qq_bg ul{margin:0px; padding:0px;}<br>.qq_bg li{width:90px; height:26px; float:left; margin-left:20px; text-align:left; line-height:26px; background:url(/qqimages/qq04.png) no-repeat; display:inline; margin-bottom:5px;}<br>.qq_bg li a{color:#333;font-size:12px;text-decoration: none;}<br>.qq_bg li a:hover{color:#FF0000; text-decoration: underline; font-size:12px;}<br>.qq_bg li img{margin-top:4px; float:left; margin-left:10px; margin-right:5px;} 复制以下的JS代码放到H5设计精灵的页面JS代码中，用来控制QQ客服窗口的显示。
document.write("<div id=QQFloat style=Z-INDEX:20;LEFT:88%;VISIBILITY:visible;WIDTH:112px;POSITION:absolute;TOP:400px;HEIGHT:300px;>")<br>document.write("<div class=qq><div class=qq_t><img src=qqimages/qq01.png /></div><div class=qq_bg><ul>")<br>document.write("<li><img SRC=qqimages/qq.gif border=0 align=absmiddle /><a target=_blank href='http://wpa.qq.com/msgrd?v=3&uin=12345689&site=qq&menu=yes'><font color='#000000'>业务咨询</font></a></li>")<br>document.write("<li><img SRC=qqimages/qq.gif border=0 align=absmiddle /><a target=_blank href='http://wpa.qq.com/msgrd?v=3&uin=23568969&site=qq&menu=yes'><font color='#000000'>业务咨询</font></a></li>")<br>document.write("<li><img SRC=qqimages/qq.gif border=0 align=absmiddle /><a target=_blank href='http://wpa.qq.com/msgrd?v=3&uin=23568969&site=qq&menu=yes'><font color='#000000'>业务咨询</font></a></li>")<br>document.write("<li><img SRC=qqimages/qq.gif border=0 align=absmiddle /><a target=_blank href='http://wpa.qq.com/msgrd?v=3&uin=5465648989&site=qq&menu=yes'><font color='#000000'>售后服务</font></a>")<br>document.write("<li><img SRC=qqimages/qq.gif border=0 align=absmiddle /><a target=_blank href='http://wpa.qq.com/msgrd?v=3&uin=5465648989&site=qq&menu=yes'><font color='#000000'>售后服务</font></a>")<br>document.write("<li><img SRC=qqimages/qq.gif border=0 align=absmiddle /><a target=_blank href='http://wpa.qq.com/msgrd?v=3&uin=5465648989&site=qq&menu=yes'><font color='#000000'>售后服务</font></a>")<br>document.write("</ul></div><div class=qq_d><img src=qqimages/qq02.png /></div></div>")<br>document.write("</div>")<br>var tips; var theTop = 200<br>var old = theTop;<br>function initFloatTips() {<br> tips = document.getElementById('QQFloat');<br> moveTips();<br>};<br>function moveTips() {<br> var tt=50;<br> if (window.innerHeight) {<br> pos = window.pageYOffset<br> }<br> else if (document.documentElement && document.documentElement.scrollTop) {<br> pos = document.documentElement.scrollTop<br> }<br> else if (document.body) {<br> pos = document.body.scrollTop;<br> }<br><br> pos=pos-tips.offsetTop+theTop;<br> pos=tips.offsetTop+pos/10;<br> <br> if (pos < theTop) pos = theTop;<br> if (pos != old) {<br> tips.style.top = pos+"px";<br> tt=10;<br> } <br> old = pos;<br> setTimeout(moveTips,tt);<br>}<br>initFloatTips(); 
vvv
dd