最美观的QQ悬浮代码

 现在大多网站都提供了QQ在线咨询的悬浮代码，有的是直接显示的可能不是很美观。上次看到一个www.ahubbs.com中右侧的QQ悬浮面板只是一个小图片，鼠标放上去展开详细列表。感觉不错，我进行整理了下，并且找了好几个颜色和大家分享下！

首先是qq.css，以下是qq.css中主要代码：

UL,LI,P {
 BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; MARGIN: 0px; BORDER-RIGHT-WIDTH: 0px; padding: 0px;
}
H2 {
 FONT-SIZE: 100%; MARGIN: 0px; COLOR: #555; padding: 0px;
}
A {
 COLOR: #8f8f8f; TEXT-DECORATION: none
}
a:link {
 font-size: 10pt;
}
A:hover {
 COLOR: #333; TEXT-DECORATION: underline
}
.QQbox {
 Z-INDEX: 99; RIGHT: 0px; WIDTH: 150px; POSITION: absolute; TOP: 50px
}
.QQbox .press {
 BACKGROUND: url(qq_1.png) no-repeat; FLOAT: right; WIDTH: 33px; TEXT-INDENT: 16px; HEIGHT: 158px
}
.QQbox .Qlist {
 BACKGROUND: url(qq_listbg.gif) repeat-y -155px 0px; LEFT: 0px; WIDTH: 138px; POSITION: absolute
}
.QQbox .Qlist .t {
 FONT-SIZE: 1px; FLOAT: left; WIDTH: 138px; HEIGHT: 6px
}
.QQbox .Qlist .b {
 FONT-SIZE: 1px; FLOAT: left; WIDTH: 138px; HEIGHT: 6px
}
.QQbox .Qlist .t {
 BACKGROUND: url(qq_listbg.gif) no-repeat left 50%
}
.QQbox .Qlist .b {
 BACKGROUND: url(qq_listbg.gif) no-repeat right 50%
}
.QQbox .Qlist .con {
 BACKGROUND: #fff; MARGIN: 0px auto; WIDTH: 80%
}
.QQbox .Qlist .con H2 {
 BORDER-RIGHT: #3a708d 1px solid; BORDER-TOP: #3a708d 1px solid; BACKGROUND: url(qq_listbg.gif) repeat-y -

163px 0px; FONT: bold 12px/22px "宋体"; BORDER-LEFT: #3a708d 1px solid; COLOR: #fff; BORDER-BOTTOM: #3a708d 1px

solid; HEIGHT: 22px; TEXT-ALIGN: center
}
.QQbox .Qlist .con UL {
}
.QQbox .Qlist .con UL LI {
 PADDING-RIGHT: 0px; PADDING-LEFT: 8px; BACKGROUND: #e8e8e8; PADDING-BOTTOM: 0px; PADDING-TOP: 5px; HEIGHT:

20px
}
.QQbox .Qlist .con UL LI.odd {
 BACKGROUND: #fff;
}

这里的图片地址可以根据实际来修改。压缩包里有四种颜色的图片自由选择。

然后是qq.js，在需要显示的页面中插入代码
<script language="JavaScript" type="text/javascript" src="qq.js"></script>
QQ号码以及提示信息请在qq.js中修改。1.html是演示文件

下载QQ悬浮窗文件：20100509_2.rar