QQ客服在很多网站都很普通，它可以很方便的让浏览我们网站的用户通过QQ进行交流，不需要去查找QQ再加好友，只需要点一下QQ客服上的图标就可以直接发信息了。

一般网站添加QQ客服有二种方法：
1、通过第三种的代码添加QQ客服。【优点在于方法简单，一学就会。使用方法看这里：网站如何添加qq客服】
2、通过自己写网站HTML代码的方法来给网站添加QQ客服，也就是这节课要讲的内容。

先看下制作好的在线QQ客服效果图：

怎么给自己的网站添加这款比较漂亮的QQ客服呢，方法如下：

将下载QQ的JS文件和背景图片文件夹，上传到自己网站空间的根目录下。qq客服JS文件下载：QQ客服

复制以下的CSS代码放到自己网站的CSS文件中，用来控制QQ客服的样式和背景。

.qq{width:120px;}
.qq_t{width:120px;}
.qq_d{width:120px;}
.qq_bg{width:130px; background:url(/qqimages/qq03.png) repeat-y; padding:10px 0px 10px; overflow:hidden;}
.qq_bg ul{margin:0px; padding:0px;}
.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;}
.qq_bg li a{color:#333;font-size:12px;text-decoration: none;}
.qq_bg li a:hover{color:#FF0000; text-decoration: underline; font-size:12px;}
.qq_bg li img{margin-top:4px; float:left; margin-left:10px; margin-right:5px;}

使用以下的JS特效代码来调用QQ客服，放在自己网站需要显示客服的页面代码的底部，一般是标签的上方。（网站域名改成自己网站的网址）

<script language="javascript" type="text/javascript" src="http://网站域名/qq.js">script>

通过Dreamweaver CS6破解版可以修改qq.js中的QQ号码为自己的QQ号码，这样QQ客服就完成了。

上一篇：第1节:网页如何添加背景音乐

下一篇：第3节:DW如何给网页添加视频动画