免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
分享
新浪微博
QQ空间
Facebook
Google+
Plurk
Twitter
Line
Board logo

標題: [插件教學] [分享]论坛官方QQ群展示（可一键加群） [打印本頁]
作者: 泛泛    時間: 2013-5-29 20:29     標題: [分享]论坛官方QQ群展示（可一键加群）

本帖最後由 泛泛 於 2013-5-29 20:39 編輯

代码作者：不祥
代码类型：二次修改、完善

=.=代码中可能有部分是多余滴。
但由于对代码不太了解=v=
欢迎代码高玩指出哟。

在论坛帮助增加新分类，然后增加帮助主题为QQ群。
粘贴以下代码。

外观展示：

[attach]20747[/attach]
使用之前请先到http://wp.qq.com/group.html获取一键加群代码。
  1. <script src="http://cpro.baidustatic.com/cpro/ui/c.js" type="text/javascript"></script>
  2. </div>
  3. <div class="main-wrap">
  4. <div id="main">
  5. <script type="text/javascript" src="js/big5.js"></script>
  6. <style type="text/css">
  7. img { vertical-align:top; border:none; } /* 去除蓝色边框 */
  8. /* 栏目标题 */
  9. .box h3 { background:url(hack/qqgroup/image/h3_bg.gif) repeat-x center 0; border-bottom:1px solid #D5DEE3; display:block; height:30px; line-height:30px; font-size:14px; font-weight:700; padding:0 15px; }
  10. .box h3 a.fr { color:#666; font-size:12px; font-weight:100; }
  11. .box h3 a:hover { text-decoration:underline; }
  12. /* 栏目框架 */
  13. .box { border:1px solid #D5DEE3; overflow:hidden; _height:1%; }
  14. .qqgroup_about { padding:10px 20px; }
  15. .qqun { width:920px; margin:10px auto 20px; }
  16. .qqun td, .qqun th {
  17. border: 1px solid #D5DEE3;
  18. padding: 5px 0;
  19. text-align: center;
  20. }
  21. .qqun th { background:#b6b9bc; color:#FFF; padding:10px 0; }
  22. .qqun tr.man { color:#666; text-decoration:line-through; }
  23. .qqun a { background:url(hack/qqgroup/image/group.png) no-repeat; display:block; height:25px; width:82px; margin:0 auto; }
  24. .qqun a:hover { background-position:0 -25px; }
  25. .qqun tr.man a, .qqun tr.man a:hover { background-position:0 -50px; }
  26. </style>
  27. <div class="qqgroup_about">
  28. 下面是我们新水浒Q传粉丝社区的论坛讨论群，欢迎大家加入
  29. </div>
  30. <table class="qqun">
  31. <tbody>
  32. <tr>
  33. <th width="50">序号</th>
  34. <th width="150">Q群名称</th>
  35. <th width="90">Q群号码</th>
  36. <th width="50" >满否</th>
  37. <th>简介</th>
  38. <th width="120">免费加入</th>
  39. </tr>
  40. <tr >
  41. <td>1</td>
  42. <td>新水浒Q传玩家少先队</td>
  43. <td>132490019</td>
  44. <td>未满</td>
  45. <td>欢迎大家加群讨论</td>
  46. <td><a target="_blank" href="http://wp.qq.com/wpa/qunwpa?idkey=59359861a468956a17abb0b1e3beefb64404c1a57ce7caf0bc944b77530744cb"><img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="新水浒Q传玩家少先队" title="新水浒Q传玩家少先队"></a></td>
  47. </tr>
  48. <tr >
  49. <td>2</td>
  50. <td>163567926</td>
  51. <td>163567926</td>
  52. <td>未满</td>
  53. <td>欢迎大家加群讨论</td>
  54. <td><a target="_blank" href="<a target="_blank" href="http://wp.qq.com/wpa/qunwpa?idkey=b58727e3589f8aa8f24fb92055599e9a726163aedb65247910419d8fd8718786"><img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="[新水浒Q传]♥水粉盛宴" title="[新水浒Q传]♥水粉盛宴"></a></td>
  55. </tr>
  56. </tbody>
  57. </table>
  58. </div>
  59. </div>
  60. <!-- End of w960 -->
複製代碼
作者: empty    時間: 2013-5-29 21:21

谢谢楼主分享，╭(╯3╰)╮
作者: 章鱼    時間: 2013-5-29 21:25

好吧的确有很多多余的...
正确代码:
  1. <div class="main-wrap">
  2. <div id="main">
  3. <style type="text/css">
  4. img { vertical-align:top; border:none; } /* 去除蓝色边框 */
  5. /* 栏目标题 */
  6. .box h3 { background:url(hack/qqgroup/image/h3_bg.gif) repeat-x center 0; border-bottom:1px solid #D5DEE3; display:block; height:30px; line-height:30px; font-size:14px; font-weight:700; padding:0 15px; }
  7. .box h3 a.fr { color:#666; font-size:12px; font-weight:100; }
  8. .box h3 a:hover { text-decoration:underline; }
  9. /* 栏目框架 */
  10. .box { border:1px solid #D5DEE3; overflow:hidden; _height:1%; }
  11. .qqgroup_about { padding:10px 20px; }
  12. .qqun { width:920px; margin:10px auto 20px; }
  13. .qqun td, .qqun th {
  14. border: 1px solid #D5DEE3;
  15. padding: 5px 0;
  16. text-align: center;
  17. }
  18. .qqun th { background:#b6b9bc; color:#FFF; padding:10px 0; }
  19. .qqun tr.man { color:#666; text-decoration:line-through; }
  20. .qqun a { background:url(hack/qqgroup/image/group.png) no-repeat; display:block; height:25px; width:82px; margin:0 auto; }
  21. .qqun a:hover { background-position:0 -25px; }
  22. .qqun tr.man a, .qqun tr.man a:hover { background-position:0 -50px; }
  23. </style>
  24. <div class="qqgroup_about">
  25. 下面是我们新水浒Q传粉丝社区的论坛讨论群，欢迎大家加入
  26. </div>
  27. <table class="qqun">
  28. <tbody>
  29. <tr>
  30. <th width="50">序号</th>
  31. <th width="150">Q群名称</th>
  32. <th width="90">Q群号码</th>
  33. <th width="50" >满否</th>
  34. <th>简介</th>
  35. <th width="120">免费加入</th>
  36. </tr>
  37. <tr >
  38. <td>1</td>
  39. <td>新水浒Q传玩家少先队</td>
  40. <td>132490019</td>
  41. <td>未满</td>
  42. <td>欢迎大家加群讨论</td>
  43. <td><a target="_blank" href="http://wp.qq.com/wpa/qunwpa?idkey=59359861a468956a17abb0b1e3beefb64404c1a57ce7caf0bc944b77530744cb"><img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="新水浒Q传玩家少先队" title="新水浒Q传玩家少先队"></a></td>
  44. </tr>
  45. <tr >
  46. <td>2</td>
  47. <td>163567926</td>
  48. <td>163567926</td>
  49. <td>未满</td>
  50. <td>欢迎大家加群讨论</td>
  51. <td><a target="_blank" href="<a target="_blank" href="http://wp.qq.com/wpa/qunwpa?idkey=b58727e3589f8aa8f24fb92055599e9a726163aedb65247910419d8fd8718786"><img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="[新水浒Q传]♥水粉盛宴" title="[新水浒Q传]♥水粉盛宴"></a></td>
  52. </tr>
  53. </tbody>
  54. </table>
  55. </div>
  56. </div>
複製代碼
另外,里面有很多图片都要自己上传一下
作者: 达人小G    時間: 2013-5-30 04:25

支持章鱼&楼主！
作者: 4rphotoclub    時間: 2013-5-30 12:14

她東西要好好學習
作者: syst    時間: 2013-5-30 16:54

额。期待LZ一次性发个完整的代码、教程出来。。。好让我们新手可以及时了解。
作者: iworld    時間: 2013-10-16 09:19

学习学习了 感谢分享



歡迎光臨 SCLUB免費論壇申請-使用者論壇 (http://sclub.com.tw/discuz/) Powered by Discuz! 7.2