【论坛勋章百科】
<br><br>
<style>
/* 隔离命名，防止污染论坛原有样式 */
.uc-card-box{
width:90%;
max-width:800px;
margin:0 auto;
}
/* 外层大卡片 */
.uc-card-out{
background:#ff7822;
border-radius:20px;
padding:30px;
box-sizing:border-box;
}
/* 顶部图片容器 居中 */
.uc-card-top-img{
text-align:center;
margin:0 0 20px 0;
}
.uc-card-top-img img{
max-width:100%;
height:auto;
display:inline-block;
}
/* 底部文字 居中 */
.uc-card-bottom-text{
color:#fff;
text-align:center;
margin:20px 0 0 0;
font-size:16px;
}
/* 网格布局：6行6列，全部居中，可调节间隙 */
.uc-card-list{
display:grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(6, auto);
gap:20px; /* 【可调节】卡片之间间距，改这个数值 */
width:100%;
justify-items:center; /* 单元格内水平居中 */
align-items:center; /* 单元格内垂直居中 */
}
/* 单个小卡片，宽高可调节 */
.uc-item-card{
width:100%;
background:#ffffff;
border-radius:16px;
padding:15px; /* 【可调节】小卡片内边距 */
box-sizing:border-box;
text-align:center; /* 小卡内部全部居中 */
}
/* 小卡内图片 */
.uc-item-img{
text-align:center;
margin-bottom:10px; /* 【可调节】图片与文案间距 */
}
.uc-item-img img{
max-width:100%;
height:auto;
border-radius:10px;
display:block;
margin:0 auto;
}
/* 小卡内文案，粘贴自动识别换行，文字居中 */
.uc-item-text{
font-size:13px; /*【可调节】文字大小 */
line-height:1.5;
color:#ff7822;
word-wrap:break-word;
word-break:break-all;
white-space:pre-wrap;
text-align:center;
}
</style>
<div class="uc-card-box">
<div class="uc-card-out">
<!-- 顶部大图 -->
<div class="uc-card-top-img">
<img style="width:159px;height:40px;object-fit:cover;" src="https://www.qqmcc.net/data/attachment/album/202610/21/124051ott9m7mc81akhxfb.png" alt="">
</div>
<div class="uc-card-top-img"><br></div>
<!-- 网格：6行 × 6列 共36张小卡片，全部居中 -->
<div class="uc-card-list">
<!-- 第1行 -->
<div class="uc-item-card">
<div class="uc-item-img"><img src="https://www.qqmcc.net/static/image/common/medal654.gif" alt=""></div>
<div class="uc-item-text">官方勋章</div>
</div>
<div class="uc-item-card">
<div class="uc-item-img"><img src="https://www.qqmcc.net/static/image/common/medal300.gif" alt=""></div>
<div class="uc-item-text">最亮的星</div>
</div>
<div class="uc-item-card">
<div class="uc-item-img"><img src="https://www.qqmcc.net/static/image/common/medal36.gif" alt=""></div>
<div class="uc-item-text">会员勋章</div>
</div>
<div class="uc-item-card">
<div class="uc-item-img"><img src="https://www.qqmcc.net/static/image/common/medal10.gif" alt=""></div>
<div class="uc-item-text">论坛元老</div>
</div>
<div class="uc-item-card">
<div class="uc-item-img"><img src="https://www.qqmcc.net/static/image/common/medal7.gif" alt=""></div>
<div class="uc-item-text">突出贡献</div>
</div>
<div class="uc-item-card">
<div class="uc-item-img"><img src="https://www.qqmcc.net/static/image/common/medal11.gif" alt=""></div>
<div class="uc-item-text">设计师</div>
</div>
<!-- 第2行 -->
<div class="uc-item-card">
<div class="uc-item-img"><img src="https://www.qqmcc.net/static/image/common/medal303.gif" alt=""></div>
<div class="uc-item-text">主题王</div>
</div>
<div class="uc-item-card">
<div class="uc-item-img"><img src="https://www.qqmcc.net/static/image/common/medal165.gif" alt=""></div>
<div class="uc-item-text">素材达人</div>
</div>
<div class="uc-item-card">
<div class="uc-item-img"><img src="https://www.qqmcc.net/static/image/common/medal123.gif" alt=""></div>
<div class="uc-item-text">实名认证</div>
</div>
<div class="uc-item-card">
<div class="uc-item-img"><img src="https://www.qqmcc.net/static/image/common/medal101.gif" alt=""></div>
<div class="uc-item-text">音乐达人</div>
</div>
<div class="uc-item-card">
<div class="uc-item-img"><img src="https://www.qqmcc.net/static/image/common/medal41.gif" alt=""></div>
<div class="uc-item-text">水贴达人</div>
</div>
<div class="uc-item-card">
<div class="uc-item-img"><img src="https://www.qqmcc.net/static/image/common/medal102.gif" alt=""></div>
<div class="uc-item-text">夜猫子</div>
</div>
<!-- 第3行 -->
<div class="uc-item-card">
<div class="uc-item-img"><img src="https://www.qqmcc.net/data/attachment/album/202609/25/103819pyh4bbb2gg24t2gq.gif" border="0" style="max-width:400px"></div>
<div class="uc-item-text">荣誉管理</div>
</div>
<div class="uc-item-card">
<div class="uc-item-img"><img src="https://www.qqmcc.net/data/attachment/album/202609/25/103818o8gt4g8k9psosic4.gif" border="0" style="max-width:400px"></div>
<div class="uc-item-text">优秀版主</div>
</div>
<div class="uc-item-card">
<div class="uc-item-img"><img src="https://www.qqmcc.net/data/attachment/album/202609/25/103818s5wqqttawx63t6xw.gif" border="0" style="max-width:400px"></div>
<div class="uc-item-text">水贴之王</div>
</div>
<div class="uc-item-card">
<div class="uc-item-img"><img src="https://www.qqmcc.net/data/attachment/album/202609/25/103818imc93o4xyejebgkc.gif" border="0" style="max-width:400px"></div>
<div class="uc-item-text">宣传达人</div>
</div>
<div class="uc-item-card">
<div class="uc-item-img"><img src="https://www.qqmcc.net/data/attachment/album/202609/25/103818up0cahkyppk903qy.gif" border="0" style="max-width:400px"></div>
<div class="uc-item-text">热心市民</div>
</div>
<div class="uc-item-card">
<div class="uc-item-img"><img src="https://www.qqmcc.net/data/attachment/album/202609/25/103818sllze0we0wuwl07l.gif" border="0" style="max-width:400px"></div>
<div class="uc-item-text">活跃会员</div>
</div>
<!-- 第4行 -->
<div class="uc-item-card">
<div class="uc-item-img"><img src="https://www.qqmcc.net/data/attachment/album/202609/25/103818havnxs8n82y6wncf.gif" border="0" style="max-width:400px"></div>
<div class="uc-item-text">最佳新人</div>
</div>
<div class="uc-item-card">
<div class="uc-item-img"><img src="https://www.qqmcc.net/data/attachment/album/202609/25/103819mq1c946rp9k9vqrv.gif" border="0" style="max-width:400px"></div>
<div class="uc-item-text">在线时长</div>
</div>
<div class="uc-item-card">
<div class="uc-item-img"><img src="https://www.qqmcc.net/data/attachment/album/202609/25/103819j7fgdtdkz7ktgld0.gif" border="0" style="max-width:400px"></div>
<div class="uc-item-text">在线时长</div>
</div>
<div class="uc-item-card">
<div class="uc-item-img"><img src="https://www.qqmcc.net/data/attachment/album/202609/25/103819etvcj110mvtj6xjj.gif" border="0" style="max-width:400px"></div>
<div class="uc-item-text">站外拓展</div>
</div>
<div class="uc-item-card">
<div class="uc-item-img"><img src="https://www.qqmcc.net/data/attachment/album/202609/25/103819w8iswsxscswpngq3.gif" border="0" style="max-width:400px"></div>
<div class="uc-item-text">万贴王</div>
</div>
<div class="uc-item-card">
<div class="uc-item-img"><img src="https://www.qqmcc.net/data/attachment/album/202609/25/103819p3t8fp4dve4cnohh.gif" border="0" style="max-width:400px"></div>
<div class="uc-item-text">版主勋章</div>
</div>
<!-- 第5行 -->
<div class="uc-item-card">
<div class="uc-item-img"><img src="https://www.qqmcc.net/data/attachment/album/202609/25/103819nwtsm7777ras4s41.gif" border="0" style="max-width:400px"></div>
<div class="uc-item-text">白羊座</div>
</div>
<div class="uc-item-card">
<div class="uc-item-img"><img src="https://www.qqmcc.net/data/attachment/album/202609/25/103819limmolb3yyvb38gy.gif" border="0" style="max-width:400px"></div>
<div class="uc-item-text">处女座</div>
</div>
<div class="uc-item-card">
<div class="uc-item-img"><img src="https://www.qqmcc.net/data/attachment/album/202609/25/103819bn2tw16t04t5t2yv.gif" border="0" style="max-width:400px"></div>
<div class="uc-item-text">金牛座</div>
</div>
<div class="uc-item-card">
<div class="uc-item-img"><img src="https://www.qqmcc.net/data/attachment/album/202609/25/103819bpo5cictovohpkcv.gif" border="0" style="max-width:400px"></div>
<div class="uc-item-text">巨蟹座</div>
</div>
<div class="uc-item-card">
<div class="uc-item-img"><img src="https://www.qqmcc.net/data/attachment/album/202609/25/103820t29td1o1l266wdd7.gif" border="0" style="max-width:400px"></div>
<div class="uc-item-text">摩羯座</div>
</div>
<div class="uc-item-card">
<div class="uc-item-img"><img src="https://www.qqmcc.net/data/attachment/album/202609/25/103820d35jzzmxjmzmoo5u.gif" border="0" style="max-width:400px"></div>
<div class="uc-item-text">射手座</div>
</div>
<!-- 第6行 -->
<div class="uc-item-card">
<div class="uc-item-img"><img src="https://www.qqmcc.net/data/attachment/album/202609/25/103820dss0nvhpoxu4q7xx.gif" border="0" style="max-width:400px"></div>
<div class="uc-item-text">狮子座</div>
</div>
<div class="uc-item-card">
<div class="uc-item-img"><img src="https://www.qqmcc.net/data/attachment/album/202609/25/103820gscs42sooz5aujoh.gif" border="0" style="max-width:400px"></div>
<div class="uc-item-text">双鱼座</div>
</div>
<div class="uc-item-card">
<div class="uc-item-img"><img src="https://www.qqmcc.net/data/attachment/album/202609/25/103820mwxc8ks8wemivwwm.gif" border="0" style="max-width:400px"></div>
<div class="uc-item-text">双子座</div>
</div>
<div class="uc-item-card">
<div class="uc-item-img"><img src="https://www.qqmcc.net/data/attachment/album/202609/25/103820rq44iq345w4iy5rw.gif" border="0" style="max-width:400px"></div>
<div class="uc-item-text">水瓶座</div>
</div>
<div class="uc-item-card">
<div class="uc-item-img"><img src="https://www.qqmcc.net/data/attachment/album/202609/25/103821hv78snn7thdcplwc.gif" border="0" style="max-width:400px"></div>
<div class="uc-item-text">天秤座</div>
</div>
<div class="uc-item-card">
<div class="uc-item-img"><img src="https://www.qqmcc.net/data/attachment/album/202609/25/103821cym66o1bz7ay6o3a.gif" border="0" style="max-width:400px"></div>
<div class="uc-item-text">天蝎座</div>
</div>
</div>
<!-- 底部文案 -->
<div class="uc-card-bottom-text"><span style="font-family: Arial, Microsoft YaHei, sans-serif; font-size: 12px;"><br></span></div><div class="uc-card-bottom-text"><span style="font-family: Arial, Microsoft YaHei, sans-serif; font-size: 12px;">qqmcc.net - Because of love</span></div>
</div>
</div>
页:
[1]