SCLUB免費論壇申請-使用者論壇 » Discuz--插件討論 » [分享]论坛官方QQ群展示（可一键加群）

泛泛 發表於 2013-5-29 20:29

[分享]论坛官方QQ群展示（可一键加群）

[i=s] 本帖最後由 泛泛 於 2013-5-29 20:39 編輯 [/i]

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

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

[b][color=DarkRed]在论坛帮助增加新分类，然后增加帮助主题为QQ群。
粘贴以下代码。[/color][/b]

外观展示：

[attach]20747[/attach]
使用之前请先到[url]http://wp.qq.com/group.html[/url]获取一键加群代码。[code]<script src="http://cpro.baidustatic.com/cpro/ui/c.js" type="text/javascript"></script>
</div>
<div class="main-wrap">
<div id="main">
<script type="text/javascript" src="js/big5.js"></script>
<style type="text/css">
img { vertical-align:top; border:none; } /* 去除蓝色边框 */
/* 栏目标题 */
.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; }
.box h3 a.fr { color:#666; font-size:12px; font-weight:100; }
.box h3 a:hover { text-decoration:underline; }
/* 栏目框架 */
.box { border:1px solid #D5DEE3; overflow:hidden; _height:1%; }
.qqgroup_about { padding:10px 20px; }
.qqun { width:920px; margin:10px auto 20px; }
.qqun td, .qqun th {
border: 1px solid #D5DEE3;
padding: 5px 0;
text-align: center;
}
.qqun th { background:#b6b9bc; color:#FFF; padding:10px 0; }
.qqun tr.man { color:#666; text-decoration:line-through; }
.qqun a { background:url(hack/qqgroup/image/group.png) no-repeat; display:block; height:25px; width:82px; margin:0 auto; }
.qqun a:hover { background-position:0 -25px; }
.qqun tr.man a, .qqun tr.man a:hover { background-position:0 -50px; }
</style>
<div class="qqgroup_about">
下面是我们新水浒Q传粉丝社区的论坛讨论群，欢迎大家加入
</div>
<table class="qqun">
<tbody>
<tr>
<th width="50">序号</th>
<th width="150">Q群名称</th>
<th width="90">Q群号码</th>
<th width="50" >满否</th>
<th>简介</th>
<th width="120">免费加入</th>
</tr>
<tr >
<td>1</td>
<td>新水浒Q传玩家少先队</td>
<td>132490019</td>
<td>未满</td>
<td>欢迎大家加群讨论</td>
<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>
</tr>
<tr >
<td>2</td>
<td>163567926</td>
<td>163567926</td>
<td>未满</td>
<td>欢迎大家加群讨论</td>
<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>
</tr>
</tbody>
</table>
</div>
</div>
<!-- End of w960 -->[/code]

empty 發表於 2013-5-29 21:21

谢谢楼主分享，╭(╯3╰)╮

章鱼 發表於 2013-5-29 21:25

好吧的确有很多多余的...
正确代码:[code]
<div class="main-wrap">
<div id="main">
<style type="text/css">
img { vertical-align:top; border:none; } /* 去除蓝色边框 */
/* 栏目标题 */
.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; }
.box h3 a.fr { color:#666; font-size:12px; font-weight:100; }
.box h3 a:hover { text-decoration:underline; }
/* 栏目框架 */
.box { border:1px solid #D5DEE3; overflow:hidden; _height:1%; }
.qqgroup_about { padding:10px 20px; }
.qqun { width:920px; margin:10px auto 20px; }
.qqun td, .qqun th {
border: 1px solid #D5DEE3;
padding: 5px 0;
text-align: center;
}
.qqun th { background:#b6b9bc; color:#FFF; padding:10px 0; }
.qqun tr.man { color:#666; text-decoration:line-through; }
.qqun a { background:url(hack/qqgroup/image/group.png) no-repeat; display:block; height:25px; width:82px; margin:0 auto; }
.qqun a:hover { background-position:0 -25px; }
.qqun tr.man a, .qqun tr.man a:hover { background-position:0 -50px; }
</style>
<div class="qqgroup_about">
下面是我们新水浒Q传粉丝社区的论坛讨论群，欢迎大家加入
</div>
<table class="qqun">
<tbody>
<tr>
<th width="50">序号</th>
<th width="150">Q群名称</th>
<th width="90">Q群号码</th>
<th width="50" >满否</th>
<th>简介</th>
<th width="120">免费加入</th>
</tr>
<tr >
<td>1</td>
<td>新水浒Q传玩家少先队</td>
<td>132490019</td>
<td>未满</td>
<td>欢迎大家加群讨论</td>
<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>
</tr>
<tr >
<td>2</td>
<td>163567926</td>
<td>163567926</td>
<td>未满</td>
<td>欢迎大家加群讨论</td>
<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>
</tr>
</tbody>
</table>
</div>
</div>[/code]另外,里面有很多图片都要自己上传一下

达人小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

学习学习了 感谢分享

查看完整版本: [分享]论坛官方QQ群展示（可一键加群）