模板:最新卡面/行：修订间差异
无编辑摘要 |
无编辑摘要 |
||
| （未显示同一用户的2个中间版本） | |||
| 第1行： | 第1行： | ||
<div class="card"> | <div class="card"> | ||
<!-- 卡面 --> | <!-- 卡面 --> | ||
[[File:{{#replace:{{{ID}}}|_|-}}-卡面.webp|居中| | [[File:{{#replace:{{{ID}}}|_|-}}-卡面.webp|居中|200px|link={{{标题}}}]] | ||
<div class="card-title">{{{标题}}}</div> | <div class="card-title">{{{标题}}}</div> | ||
</div> | </div> | ||
| 第8行： | 第7行： | ||
{{#CSS: | {{#CSS: | ||
.card { | .card { | ||
flex: 1 1 | flex: 1 1 200px; /* 允许卡片弹性伸缩，基础宽度为200px */ | ||
margin: 10px; /* 设置卡片间距 */ | margin: 10px; /* 设置卡片间距 */ | ||
text-align: center; /* 文本居中显示 */ | text-align: center; /* 文本居中显示 */ | ||
box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 添加阴影效果 */ | box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 添加阴影效果 */ | ||
transition: transform 0.2s; /* 添加动画效果 */ | transition: transform 0.2s; /* 添加动画效果 */ | ||
max-width: | max-width: 200px; /* 设置卡片的最大宽度为200px */ | ||
display: flex; | display: flex; | ||
flex-direction: column; | flex-direction: column; | ||
| 第35行： | 第34行： | ||
white-space: normal; /* 正常换行 */ | white-space: normal; /* 正常换行 */ | ||
text-overflow: ellipsis; /* 用省略号表示溢出部分 */ | text-overflow: ellipsis; /* 用省略号表示溢出部分 */ | ||
} | |||
/* Media Queries for Mobile Devices */ | |||
@media (max-width: 600px) { | |||
.card { | |||
flex: 1 1 150px; /* 调整基础宽度为150px */ | |||
max-width: 150px; /* 设置卡片的最大宽度为150px */ | |||
} | |||
.card-title { | |||
padding: 5px 0; /* 减小标题的上下内边距 */ | |||
max-height: 40px; /* 设置标题的最大高度为40px */ | |||
} | |||
} | } | ||
}} | }} | ||
2024年7月16日 (二) 16:00的最新版本
[[File:{{{ID}}}-卡面.webp|居中|200px|link={{{标题}}}]]
{{{标题}}}