查看“沙盒/css测试”的源代码

<div class="grid text-center"><!--
--><div class="main-left g-col-12 g-col-md-3 order-lg-1 order-2">{{首页/右栏}}</div><!--
--><div class="main-center g-col-12 g-col-md-9 order-lg-1 order-1">{{首页/中栏}}</div>
</div>

{{首页/中栏/图鉴导航}}


<div class="ptlist"><!--
--><div class="ptlist-item stripe-background"><!--
--><a link="代理人图鉴" target="_blank" class="ptlist-item-in-cat"><!--
    -->[[文件:首页-导航图标-代理人图鉴.png|149px|class="avatar"|link=]]<!--
    --></a><!--
  --></div><!--
   --><div class="ptlist-item stripe-background"><!--
--><a link="代理人图鉴" target="_blank" class="ptlist-item-in-cat"><!--
    -->[[文件:首页-导航图标-代理人图鉴.png|149px|class="avatar"|link=]]<!--
    --></a><!--
  --></div><!-- 
  --><div class="stripe-background ptlist-item"><!--
--><a link="代理人图鉴" target="_blank" class="ptlist-item-in-cat"><!--
    -->[[文件:首页-导航图标-代理人图鉴.png|149px|class="avatar"|link=]]<!--
    --></a><!--
  --></div><!--
  --><div class="ptlist-item"><!--
--><a link="代理人图鉴" target="_blank" class="ptlist-item-in-cat"><!--
    -->[[文件:首页-导航图标-代理人图鉴.png|149px|class="avatar"|link=]]<!--
    --></a><!--
  --></div>
</div>
<br><br><br><br>
<div class="ptlist-2"><div class="stripe-background">{{#cargo_query: tables=角色图鉴 |fields=角色图鉴._pageName=标题, 角色图鉴.稀有度, 角色图鉴.角色名称国服 |where=角色图鉴.阵营 = '维多利亚家政' |order by=角色图鉴.稀有度 DESC, 角色图鉴.角色序号 DESC |limit=100 |template=首页/中栏/角色物品图鉴/项 |format=template |named args=yes |more results text= }}</div></div>
<br><br><br><br>
<div class="ptlist-2"><div class="stripe-background">{{#cargo_query: tables=角色图鉴 |fields=角色图鉴._pageName=标题, 角色图鉴.稀有度, 角色图鉴.角色名称国服 |where=角色图鉴.阵营 = '狡兔屋' |order by=角色图鉴.稀有度 DESC, 角色图鉴.角色序号 DESC |limit=100 |template=首页/中栏/角色物品图鉴/项 |format=template |named args=yes |more results text= }}</div></div>


{{#css:
.ptlist-item-in-cat {
  position: relative;
  z-index: 10;
  box-sizing: content-box;
  display: block;
  padding-bottom: 0.25rem;
  background-color: #1a1a1a; /* 暗黑色背景 */
  color: #ccc; /* 浅灰色文本 */
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out; /* 添加平滑过渡效果 */
}

.ptlist-item-in-cat::after {
  content: '';
  width: 90%;
  height: 90%;
  position: absolute;
  left: 5%;
  top: 5%;
  border: 1px solid #333; /* 暗灰色边框 */
  transition: border-color 0.3s ease-in-out; /* 添加边框颜色过渡 */
}

.ptlist-item-in-cat:hover {
  background-color: #333; /* 鼠标悬浮时背景颜色变暗 */
  color: #fff; /* 鼠标悬浮时文本颜色变为白色 */
}

.ptlist-item-in-cat:hover::after {
  border-color: #555; /* 鼠标悬浮时边框颜色变亮 */
}

.ptlist-item-in-cat {
  height: auto; /* 保持高度自适应 */
}

.stripe-background {
  background: #0c0c0c;
  background: repeating-linear-gradient(-45deg, #111111, #111111 9px, #080808 9px, #080808 11px);
}
}}