模板:卡片

^{转 编 刷 历 移 删}

首页 > 模板 > 卡片

---

MediaWiki:IfUserLogined

欢迎！一条咸鱼！如果是第一次来，按"Ctrl+D"可以收藏随时查看更新~觉得WIKI好玩的话，请推荐给朋友哦～(◕ω＜)☆
按右上角“WIKI功能→编辑”即可修改页面内容。

×

模板：[刷新此页面] [编辑] [页面历史]
文档：[查看] [编辑] [页面历史]

说明文档

MediaWiki:Prism

MediaWiki:Prism-default

MediaWiki:Card

零件内容

• MediaWiki:common.css
• 模板:卡片
• 模板:卡片/文档

一个可可爱爱的小卡片~

用法

图片版

MediaWiki:CodeBlock

勇闯四季城

The Season Towns

传说森林住着邪恶的大魔王，为了帮助小精灵脱险，羊村守护者们再度出击勇闯四季城。不料，途中喜羊羊竟意外变成无法自控的“破影大王”，时而清醒，时而捣乱，让整个旅途笑料百出。羊狼们一路闯关修炼进阶“勇者”能力，同时寻找“净化”喜羊羊的方法。而另一面，大魔王对这群“不速之客”自然不会束手就擒。谁又将成为下一个战胜魔王的勇者传奇呢？

{{卡片
|图片=勇闯四季城_海报1_电脑版
|图片格式=jpg
|标题=勇闯四季城
|副标题=The Season Towns
|内容=传说森林住着邪恶的大魔王，为了帮助小精灵脱险，羊村守护者们再度出击勇闯四季城。不料，途中喜羊羊竟意外变成无法自控的“破影大王”，时而清醒，时而捣乱，让整个旅途笑料百出。羊狼们一路闯关修炼进阶“勇者”能力，同时寻找“净化”喜羊羊的方法。而另一面，大魔王对这群“不速之客”自然不会束手就擒。谁又将成为下一个战胜魔王的勇者传奇呢？
|style=max-width:300px <!--需要手动设置最大宽度，不然电脑上显示比较难看-->
}}

头像版

喜羊羊小顽皮

Where's My Water? Featuring XYY

风靡全球的迪士尼“小顽皮”系列最新力作，以家喻户晓的喜羊羊和灰太狼为主角，配合精彩原创故事和特色物理解谜关卡，带来耳目一新的互动体验。玩家可以通过挖掘泥土引导水流揭开一个又一个谜题，在挖掘过程收获高端大气上档次的神秘收藏，更有与角色相关的道具系统设计。亲，你还等什么，赶快下载《喜羊羊小顽皮》挑战智力极限吧！

{{卡片
|头像=喜羊羊小顽皮_图标3
|头像格式=jpg
|标题=喜羊羊小顽皮
|副标题=Where's My Water? Featuring XYY
|内容=风靡全球的迪士尼“小顽皮”系列最新力作，以家喻户晓的喜羊羊和灰太狼为主角，配合精彩原创故事和特色物理解谜关卡，带来耳目一新的互动体验。玩家可以通过挖掘泥土引导水流揭开一个又一个谜题，在挖掘过程收获高端大气上档次的神秘收藏，更有与角色相关的道具系统设计。亲，你还等什么，赶快下载《喜羊羊小顽皮》挑战智力极限吧！
|style=max-width:300px <!--需要手动设置最大宽度，不然电脑上显示比较难看-->
}}

纯文字

《喜羊羊与灰太狼》系列动画自2005年播出今已超2700集，并在全球100多个国家和地区使用英语及超过17种当地语言播出。18岁的喜羊羊与灰太狼，已经成为中国国内家喻户晓的IP形象，也为许许多多不同国家的观众所熟知。

{{卡片
|内容=《喜羊羊与灰太狼》系列动画自2005年播出今已超2700集，并在全球100多个国家和地区使用英语及超过17种当地语言播出。18岁的喜羊羊与灰太狼，已经成为中国国内家喻户晓的IP形象，也为许许多多不同国家的观众所熟知。
|style=max-width:300px <!--需要手动设置最大宽度，不然电脑上显示比较难看-->
}}

其他

图片和头像

图片和头像可以同时使用。图片最好选择横向的，否则不太美观。

深色模式

在class中填写mdui-theme-layout-dark即可激活深色模式。

喜羊羊小顽皮

副标题

《喜羊羊与灰太狼》系列动画自2005年播出今已超2700集，并在全球100多个国家和地区使用英语及超过17种当地语言播出。18岁的喜羊羊与灰太狼，已经成为中国国内家喻户晓的IP形象，也为许许多多不同国家的观众所熟知。

{{卡片
|图片=勇闯四季城_海报1_电脑版
|图片格式=jpg
|头像=喜羊羊小顽皮_图标3
|头像格式=jpg
|标题=喜羊羊小顽皮
|内容=《喜羊羊与灰太狼》系列动画自2005年播出今已超2700集，并在全球100多个国家和地区使用英语及超过17种当地语言播出。18岁的喜羊羊与灰太狼，已经成为中国国内家喻户晓的IP形象，也为许许多多不同国家的观众所熟知。
|style=max-width:300px <!--需要手动设置最大宽度，不然电脑上显示比较难看-->
|class=mdui-theme-layout-dark
}}

参数

无描述。

模板参数

此模板首选参数换行格式。

参数		描述	类型	状态
class	class	CSS的class，应用在卡片最外层。看不懂的不要填写。 示例 infocard	单行文本	可选
style	style	行内CSS。看不懂的不要填写。	单行文本	可选
图片	图片	填写一张已经上传到羊羊百科的图片的名称，不用加“文件:”前缀。 示例 勇闯四季城_海报1_电脑版.jpg	文件	可选
头像	头像	填写一张已经上传到羊羊百科的图片的名称，最好是正方形的，不用加“文件:”前缀。 示例 喜羊羊小顽皮_图标3.jpg	文件	可选
标题	标题	标题。如果使用“头像版”，则必须填写标题。 示例 勇闯四季城	单行文本	可选
副标题	副标题	副标题。如果使用“头像版”，则必须填写副标题。 示例 The Season Towns	单行文本	可选
内容	内容1	卡片内容。 示例 《喜羊羊与灰太狼》系列动画自2005年播出今已超2700集，并在全球100多个国家和地区使用英语及超过17种当地语言播出。18岁的喜羊羊与灰太狼，已经成为中国国内家喻户晓的IP形象，也为许许多多不同国家的观众所熟知。	内容	可选

引入样式

在https://wiki.biligame.com/你管理的wiki/MediaWiki:Common.css里引入以下卡片样式

/*template:卡片*/
/*代码来自 https://www.mdui.org/*/
/*Card 卡片*/
/* 卡片 */
.mdui-card {
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  overflow: hidden;
  color: #000;
  background-color: #fff;
  border-radius: 2px;
  -webkit-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
          box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
/*头部，包含头像、标题、副标题*/
.mdui-card-header {
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  height: 72px;
  padding: 16px;
}
/* 卡片头部头像 */
.mdui-card-header-avatar {
  float: left;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
/* 卡片头部标题 */
.mdui-card-header-title {
  display: block;
  margin-left: 52px;
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  opacity: 0.87;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* 卡片头部副标题 */
.mdui-card-header-subtitle {
  display: block;
  margin-left: 52px;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  opacity: 0.54;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/*主标题区域*/
.mdui-card-primary {
  position: relative;
  padding: 24px 16px 16px 16px;
}
/* 主标题区域标题 */
.mdui-card-primary-title {
  display: block;
  font-size: 24px;
  line-height: 36px;
  opacity: 0.87;
}
/* 主标题区域副标题 */
.mdui-card-primary-subtitle {
  display: block;
  font-size: 14px;
  line-height: 24px;
  opacity: 0.54;
}

/*内容区域*/
.mdui-card-content {
  position: relative;
  padding: 16px;
  font-size: 14px;
  line-height: 24px;
}

/*卡片菜单*/
.mdui-card-menu {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1;
}
.mdui-card-menu .mdui-btn {
  margin-left: 8px;
}

/*按钮区域*/
.mdui-card-actions {
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 8px;
}
.mdui-card-actions::before,
.mdui-card-actions::after {
  display: table;
  content: ' ';
}
.mdui-card-actions::after {
  clear: both;
}
.mdui-card-actions::before,
.mdui-card-actions::after {
  display: table;
  content: ' ';
}
.mdui-card-actions::after {
  clear: both;
}
.mdui-card-actions .mdui-btn {
  max-width: 100%;
  margin: 0 8px 0 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mdui-card-actions .mdui-btn-icon {
  width: 36px;
  height: 36px;
  margin: 0 8px;
}
/* 使按钮竖向排列 */
.mdui-card-actions-stacked .mdui-btn {
  display: block;
  margin: 0 0 4px 0;
}
.mdui-card-actions-stacked .mdui-btn:last-child {
  margin: 0;
}

/*媒体元素区域*/
.mdui-card-media {
  position: relative;
}
.mdui-card-media img,
.mdui-card-media video {
  display: block;
  width: 100%;
}
/* 覆盖在媒体元素上的内容 */
.mdui-card-media-covered {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  color: #fff;
  background: rgba(0, 0, 0, 0.2);
  /* 覆盖在媒体元素上的标题 */
}
.mdui-card-media-covered .mdui-card-primary-title {
  opacity: 1;
}
.mdui-card-media-covered .mdui-card-primary-subtitle {
  opacity: 0.7;
}
/* 覆盖在媒体元素顶部 */
.mdui-card-media-covered-top {
  top: 0;
  bottom: auto;
}
/* 覆盖层透明 */
.mdui-card-media-covered-transparent {
  background: transparent;
}
/* 覆盖层渐变 */
.mdui-card-media-covered-gradient {
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.26)), to(rgba(0, 0, 0, 0)));
  background: linear-gradient(to top, rgba(0, 0, 0, 0.26), rgba(0, 0, 0, 0));
}
.mdui-card-media-covered-gradient.mdui-card-media-covered-top {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.26)), to(rgba(0, 0, 0, 0)));
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.26), rgba(0, 0, 0, 0));
}

/* Card dark */
.mdui-theme-layout-dark .mdui-card {
  color: #fff;
  background-color: #424242;
}
@media (prefers-color-scheme: dark) {
  .mdui-theme-layout-auto .mdui-card {
    color: #fff;
    background-color: #424242;
  }
}

鸣谢

Material Design（质感设计）

谷歌的质感设计真的非常好看。本模板的美术设计全部来自质感设计。

MDUI

谷歌官方的网页版质感设计研发速度是真的慢，MIUI很早就实现了常用网页组件的质感设计移植。本模板的代码几乎全部来自MDUI，仅针对羊羊百科进行了少量修改。

---

所有模板列表