查看“模板:最新卡面/行”的源代码


    <!-- 使用div class="card"包裹每个卡面 -->
    <div class="card">
        <!-- 卡面 -->
        [[File:{{#replace:{{{ID}}}|_|-}}-卡面.webp|居中|100px|link={{{标题}}}]]
        {{{标题}}}
        <!-- 角色名 -->
        <div>{{#cargo_query:tables=角色
|fields=角色._pageName=标题,角色.名称简中,角色.名称繁中,角色.名称英文,角色.片假名,角色.ID
|where=角色.ID="{{{角色ID|}}}"
|format=template
|template=首页/中栏/卡面角色所属
|named args=yes
|limit=2}}</div>
    </div>

{{#CSS:
.card {
    flex: 1 1 100px; /* 允许卡片弹性伸缩，基础宽度为200px */
    margin: 10px; /* 设置卡片间距 */
    text-align: center; /* 文本居中显示 */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 添加阴影效果 */
    transition: transform 0.2s; /* 添加动画效果 */
    max-width: 100px; /* 设置卡片的最大宽度为200px */
}

.card:hover {
    transform: scale(1.05); /* 鼠标悬停时放大卡片 */
}

.card img {
    width: 100%; /* 图片宽度自适应 */
    height: auto; /* 图片高度自适应 */
}
}}