分享一个美观的QQ悬浮代码

心砚

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



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

1. UL,LI,P {
   
2. BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; MARGIN: 0px; BORDER-RIGHT-WIDTH: 0px; padding: 0px;
   
3. }
   
4. H2 {
   
5. FONT-SIZE: 100%; MARGIN: 0px; COLOR: #555; padding: 0px;
   
6. }
   
7. A {
   
8. COLOR: #8f8f8f; TEXT-DECORATION: none
   
9. }
   
10. a:link {
    
11. font-size: 10pt;
    
12. }
    
13. A:hover {
    
14. COLOR: #333; TEXT-DECORATION: underline
    
15. }
    
16. .QQbox {
    
17. Z-INDEX: 99; RIGHT: 0px; WIDTH: 150px; POSITION: absolute; TOP: 50px
    
18. }
    
19. .QQbox .press {
    
20. BACKGROUND: url(qq_1.png) no-repeat; FLOAT: right; WIDTH: 33px; TEXT-INDENT: 16px; HEIGHT: 158px
    
21. }
    
22. .QQbox .Qlist {
    
23. BACKGROUND: url(qq_listbg.gif) repeat-y -155px 0px; LEFT: 0px; WIDTH: 138px; POSITION: absolute
    
24. }
    
25. .QQbox .Qlist .t {
    
26. FONT-SIZE: 1px; FLOAT: left; WIDTH: 138px; HEIGHT: 6px
    
27. }
    
28. .QQbox .Qlist .b {
    
29. FONT-SIZE: 1px; FLOAT: left; WIDTH: 138px; HEIGHT: 6px
    
30. }
    
31. .QQbox .Qlist .t {
    
32. BACKGROUND: url(qq_listbg.gif) no-repeat left 50%
    
33. }
    
34. .QQbox .Qlist .b {
    
35. BACKGROUND: url(qq_listbg.gif) no-repeat right 50%
    
36. }
    
37. .QQbox .Qlist .con {
    
38. BACKGROUND: #fff; MARGIN: 0px auto; WIDTH: 80%
    
39. }
    
40. .QQbox .Qlist .con H2 {
    
41. BORDER-RIGHT: #3a708d 1px solid; BORDER-TOP: #3a708d 1px solid; BACKGROUND: url(qq_listbg.gif) repeat-y -
    
42. 
    
43. 163px 0px; FONT: bold 12px/22px "宋体"; BORDER-LEFT: #3a708d 1px solid; COLOR: #fff; BORDER-BOTTOM: #3a708d 1px
    
44. 
    
45. solid; HEIGHT: 22px; TEXT-ALIGN: center
    
46. }
    
47. .QQbox .Qlist .con UL {
    
48. }
    
49. .QQbox .Qlist .con UL LI {
    
50. PADDING-RIGHT: 0px; PADDING-LEFT: 8px; BACKGROUND: #e8e8e8; PADDING-BOTTOM: 0px; PADDING-TOP: 5px; HEIGHT:
    
51. 
    
52. 20px
    
53. }
    
54. .QQbox .Qlist .con UL LI.odd {
    
55. BACKGROUND: #fff;
    
56. }

复制代码

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

然后是把qq.js放到网页中，在需要显示的页面中插入代码

1. <script language="JavaScript" type="text/javascript" src="qq.js"></script>

复制代码

QQ号码以及提示信息请在qq.js中修改。1.html是演示文件

ladydaigou

多谢分享哦, 收了先:)

心砚

不客气。

有意思

这个很有用。不错

安徽大学

留着用。