论坛 › 官方频道 › 用户组全系星耀等级系列！换新来袭！

夜晚 发表于 2016-12-12 18:05:45

用户组全系星耀等级系列！换新来袭！

<br>
<br>
<style>
/* ====== 仅本卡片专用，不会污染全局 ====== */
.ucard-wrap{
/* ====== 【可修改参数区】全部在这里调整 ====== */
--outer-bg: #ff7800;                /* 外层卡片底色，橙色可改 */
--inner-bg: rgba(255,255,255,0.65); /* 内层卡片半透明白色，透明度0~1 */
--search-box-bg: #ffffff;         /* 椭圆搜索框底色 */
--tag-box-bg: #ffffff;             /* 标签2、3椭圆小框底色 */
--text-color: #FF7800;                /* 文字颜色 */
/* 整体尺寸 */
--wrap-width: 750px;               /* 外层卡片整体宽度 */
--wrap-padding: 50px;            /* 外层卡片内边距，控制外框粗细 */
--wrap-border-radius: 16px;       /* 外层卡片圆角 */
/* 内卡片尺寸 */
--inner-padding: 40px;            /* 内卡片内边距，控制内框粗细 */
--inner-border-radius: 14px;      /* 内卡片圆角 */
/* ✅标签宽度比例 */
--tag1-width: 20%;
--tag2-width: 40%;
--tag3-width: 40%;
/* 椭圆通用 */
--radius: 999px;                  /* 椭圆圆角，999为标准椭圆 */
/* 行高与间距 */
--tag-line-height: 44px;          /* 标签椭圆框高度 */
--line-margin-bottom: 20px;      /* 每行之间的上下间距 */
--search-top-margin-bottom:20px;   /* ✅顶部搜索框【下边距】 */
--insert-search-margin-top:40px;   /* 中间搜索框【上边距】 */
--insert-search-margin-bottom:20px;/* 中间搜索框【下边距】 */
--search-height:44px;            /* 搜索框高度 */
--tag-gap:20px;                     /* 标签之间间隙 */
}
.ucard-wrap *{box-sizing:border-box;margin:0;padding:0;font-family:system-ui, sans-serif;}

/* 外层链接容器，清除a默认下划线，继承文字颜色 */
.ucard-wrap .card-link{
display:block;
text-decoration:none !important;
color:inherit;
}

/* 外层大卡片 */
.ucard-wrap .wrap-dz-card{
background:var(--outer-bg);
padding:var(--wrap-padding);
border-radius:var(--wrap-border-radius);
max-width:var(--wrap-width);
margin:0 auto;
}
/* 内层卡片 */
.ucard-wrap .dz-card-item{
background:var(--inner-bg);
padding:var(--inner-padding);
border-radius:var(--inner-border-radius);
}
/* 椭圆搜索框通用样式 */
.ucard-wrap .search-oval{
width:100%;
height:var(--search-height);
background:var(--search-box-bg);
border-radius:var(--radius);
display:flex;
align-items:center;
padding:0 16px;
color:var(--text-color);
}
.ucard-wrap .search-top{
margin-bottom:var(--search-top-margin-bottom);
}
.ucard-wrap .search-insert{
margin-top:var(--insert-search-margin-top);
margin-bottom:var(--insert-search-margin-bottom);
}
/* 每行3个椭圆小框 */
.ucard-wrap .tag-line{
display:flex;
gap:var(--tag-gap);
margin-bottom:var(--line-margin-bottom);
}
.ucard-wrap .tag-oval.tag1{
width:var(--tag1-width);
height:var(--tag-line-height);
background:var(--tag-box-bg);
border-radius:var(--radius);
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
}
.ucard-wrap .tag-oval.tag2{
width:var(--tag2-width);
height:var(--tag-line-height);
background:var(--tag-box-bg);
border-radius:var(--radius);
display:flex;
align-items:center;
justify-content:center;
color:var(--text-color);
font-size:13px;
}
.ucard-wrap .tag-oval.tag3{
width:var(--tag3-width);
height:var(--tag-line-height);
background:var(--tag-box-bg);
border-radius:var(--radius);
display:flex;
align-items:center;
justify-content:center;
color:var(--text-color);
font-size:13px;
}
/* 标签1图片：原图尺寸居中，不拉伸不变形 */
.ucard-wrap .tag-img{
max-width:100%;
max-height:100%;
}
</style>

<div class="ucard-wrap">
<a class="card-link" href="https://www.qqmcc.net/home.php?mod=spacecp&ac=usergroup&do=list" target="_blank">
<div class="wrap-dz-card">
<div class="dz-card-item">
    <div class="search-oval search-top"><div align="center">论坛用户升级用户组全新升级！</div></div>
    <!-- 第1行 -->
    <div class="tag-line">
      <div class="tag-oval tag1"><img class="tag-img" src="https://www.qqmcc.net/data/attachment/common/c7/common_87_usergroup_icon.gif" alt=""></div>
      <div class="tag-oval tag2">年费SVIP</div>
      <div class="tag-oval tag3">前往购买</div>
    </div>
    <!-- 第2行 -->
    <div class="tag-line">
      <div class="tag-oval tag1"><img class="tag-img" src="https://www.qqmcc.net/data/attachment/common/d9/common_46_usergroup_icon.gif" alt=""></div>
      <div class="tag-oval tag2">会员SVIP</div>
      <div class="tag-oval tag3">前往购买</div>
    </div>
    <!-- ✅第2行标签下面插入搜索框 -->
    <div class="search-oval search-insert"><div align="center">普通用户组升级图标组</div></div>
    <!-- 第3行 ~ 第15行 -->
    <div class="tag-line">
      <div class="tag-oval tag1"><img class="tag-img" src="https://www.qqmcc.net/data/attachment/common/d3/common_10_usergroup_icon.gif?YU3cuy" alt=""></div>
      <div class="tag-oval tag2">寻星者I阶</div>
      <div class="tag-oval tag3">用户组升级图标</div>
    </div>
    <div class="tag-line">
      <div class="tag-oval tag1"><img class="tag-img" src="https://www.qqmcc.net/data/attachment/common/65/common_11_usergroup_icon.gif?p555vX" alt=""></div>
      <div class="tag-oval tag2">寻星者II阶</div>
      <div class="tag-oval tag3">用户组升级图标</div>
    </div>
    <div class="tag-line">
      <div class="tag-oval tag1"><img class="tag-img" src="https://www.qqmcc.net/data/attachment/common/c2/common_12_usergroup_icon.gif?eGvOd1" alt=""></div>
      <div class="tag-oval tag2">寻星者III阶</div>
      <div class="tag-oval tag3">用户组升级图标</div>
    </div>
    <div class="tag-line">
      <div class="tag-oval tag1"><img class="tag-img" src="https://www.qqmcc.net/data/attachment/common/1f/common_24_usergroup_icon.gif?sXzS0s" alt=""></div>
      <div class="tag-oval tag2">寻星者V阶</div>
      <div class="tag-oval tag3">用户组升级图标</div>
    </div>
    <div class="tag-line">
      <div class="tag-oval tag1"><img class="tag-img" src="https://www.qqmcc.net/data/attachment/common/19/common_36_usergroup_icon.gif?Fi9577" alt=""></div>
      <div class="tag-oval tag2">筑星者I阶</div>
      <div class="tag-oval tag3">用户组升级图标</div>
    </div>
    <div class="tag-line">
      <div class="tag-oval tag1"><img class="tag-img" src="https://www.qqmcc.net/data/attachment/common/a5/common_37_usergroup_icon.gif?Fbi4l4" alt=""></div>
      <div class="tag-oval tag2">筑星者II阶</div>
      <div class="tag-oval tag3">用户组升级图标</div>
    </div>
    <div class="tag-line">
      <div class="tag-oval tag1"><img class="tag-img" src="https://www.qqmcc.net/data/attachment/common/a5/common_38_usergroup_icon.gif?R0XD5h" alt=""></div>
      <div class="tag-oval tag2">筑星者III阶</div>
      <div class="tag-oval tag3">用户组升级图标</div>
    </div>
    <div class="tag-line">
      <div class="tag-oval tag1"><img class="tag-img" src="https://www.qqmcc.net/data/attachment/common/d6/common_39_usergroup_icon.gif?i86o64" alt=""></div>
      <div class="tag-oval tag2">筑星者V阶</div>
      <div class="tag-oval tag3">用户组升级图标</div>
    </div>
    <div class="tag-line">
      <div class="tag-oval tag1"><img class="tag-img" src="https://www.qqmcc.net/data/attachment/common/d6/common_40_usergroup_icon.gif?nU49id" alt=""></div>
      <div class="tag-oval tag2">耀星者II阶</div>
      <div class="tag-oval tag3">用户组升级图标</div>
    </div>
    <div class="tag-line">
      <div class="tag-oval tag1"><img class="tag-img" src="https://www.qqmcc.net/data/attachment/common/34/common_41_usergroup_icon.gif?dhY8p5" alt=""></div>
      <div class="tag-oval tag2">耀星者III阶</div>
      <div class="tag-oval tag3">用户组升级图标</div>
    </div>
    <div class="tag-line">
      <div class="tag-oval tag1"><img class="tag-img" src="https://www.qqmcc.net/data/attachment/common/a1/common_42_usergroup_icon.gif?a6cYnj" alt=""></div>
      <div class="tag-oval tag2">耀星者V阶</div>
      <div class="tag-oval tag3">用户组升级图标</div>
    </div>
    <div class="tag-line">
      <div class="tag-oval tag1"><img class="tag-img" src="https://www.qqmcc.net/data/attachment/common/93/common_86_usergroup_icon.gif?Jn3y7U" alt=""></div>
      <div class="tag-oval tag2">星耀王者1星</div>
      <div class="tag-oval tag3">升阶高等级图标</div>
    </div>
    <div class="tag-line">
      <div class="tag-oval tag1"><img class="tag-img" src="https://www.qqmcc.net/data/attachment/common/17/common_43_usergroup_icon.gif?F7Ya3l" alt=""></div>
      <div class="tag-oval tag2">星耀王者2星</div>
      <div class="tag-oval tag3">升阶高等级图标</div>
    </div>
    <div class="tag-line">
      <div class="tag-oval tag1"><img class="tag-img" src="https://www.qqmcc.net/data/attachment/common/d2/common_73_usergroup_icon.gif?d6377g" alt=""></div>
      <div class="tag-oval tag2">星耀王者3星</div>
      <div class="tag-oval tag3">升阶高等级图标</div>
    </div>
    <div class="tag-line">
      <div class="tag-oval tag1"><img class="tag-img" src="https://www.qqmcc.net/data/attachment/common/32/common_72_usergroup_icon.gif?nZsFbe" alt=""></div>
      <div class="tag-oval tag2">星耀至尊</div>
      <div class="tag-oval tag3">升阶高等级图标</div>
    </div>
</div>
</div>
</a>
</div>

爱你痛彻我心扉 发表于 2017-6-16 16:27:09

{:4_257:}{:4_257:}

抵达之夜 发表于 2017-12-1 17:54:34

很棒            

Mmmmmmm. 发表于 2017-12-13 20:10:39

想要个段位UID

鸽吻 发表于 2018-6-11 00:25:56

厉害 http://www.qqmcc.net//mobcent//app/data/phiz/default/06.png

ruoy 发表于 2019-7-21 15:00:04

怎么购买啊，

男青年 发表于 2019-11-17 23:25:11

我没 {:4_245:}

私藏 发表于 2023-6-15 17:55:58

好耶         

沈风 发表于 2023-6-17 12:24:17

好耶

三眠 发表于 2023-6-24 10:24:59

好耶

查看完整版本: 用户组全系星耀等级系列！换新来袭！