模板:最新卡面/行：修订间差异

2024年7月15日 (一) 21:49的版本

       [[File:{{{ID}}}-卡面.webp|居中|200px|link={{{标题}}}]]

没有结果

@@ 第1行： / 第1行： @@
-<div>
+<div class="card-container">
-[[File:{{#replace:{{{ID}}}|_|-}}-卡面.webp|居中|200px|link={{{标题}}}]]
+    <!-- 使用div class="card"包裹每个卡面 -->
-{{#cargo_query:tables=角色
+    <div class="card">
+        <!-- 卡面 -->
+        [[File:{{#replace:{{{ID}}}|_|-}}-卡面.webp|居中|200px|link={{{标题}}}]]
+        <!-- 角色名 -->
+        <div>{{#cargo_query:tables=角色
 |fields=角色._pageName=标题,角色.名称简中,角色.名称繁中,角色.名称英文,角色.片假名,角色.ID
 |where=角色.ID="{{{角色ID|}}}"
@@ 第7行： / 第11行： @@
 |template=卡面图鉴/所属角色
 |named args=yes
-|limit=2}}
+|limit=2}}</div>
+    </div>
 </div>
+{{#CSS:
+.card-container {
+    display: flex; /* 使用Flexbox布局 */
+    flex-wrap: wrap; /* 允许内容换行 */
+    justify-content: space-around; /* 在项目之间和周围提供均等的空间 */
+    align-items: stretch; /* 拉伸项目以填充容器 */
+}
+.card {
+    flex: 1 1 200px; /* 允许卡片弹性伸缩，基础宽度为200px */
+    margin: 10px; /* 设置卡片间距 */
+    text-align: center; /* 文本居中显示 */
+    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 添加阴影效果 */
+    transition: transform 0.2s; /* 添加动画效果 */
+}
+.card:hover {
+    transform: scale(1.05); /* 鼠标悬停时放大卡片 */
+}
+.card img {
+    width: 100%; /* 图片宽度自适应 */
+    height: auto; /* 图片高度自适应 */
+}
+}}