来自QQwiki

阅读:102

  

更新日期:2022-03-10

  

最新编辑:Admin

前言

  • 这是带按钮功能的卡片,与文章盒模板的形式相似,一级标题为必须,二级标题、宽度参数非必须。
  • 使用时需要将css复制到相应页面才能使卡片展示出相应样式。(若希望保证该卡片在全站所有页面的样式一致,也可将下述css直接粘贴到全站的Mediawiki:common.css中)


{{#css:

.card-btn {
    display: inline-block;
}
.card-title-1 {
    font-size: 26px;
    font-weight: 400;
    color: #FFFFFF;
    background: #0099ff;
    padding: 10px;
    border-radius: 16px;
}

.card-title-2 {
    font-size: 20px;
    color: #000000;
    font-weight: 600;
    margin: 10px;
    border-bottom: 2px solid #0092fe;
}
span.card-btnF {
    color: #FFFFFF;
    background: #0099ff;
    text-align: center;
    height: 36px;
    font-size: 16px;
    border-radius: 8px;
}
}}

卡片使用

  • 当未输入宽度参数时,若按钮的大小会随按钮名称的长短自动发生变化;当输入宽度参数时,若该宽度无法完全显示所有按钮名称中的字,则部分文字会被自动省略。
  • 调用该模板的指令和效果如下:
{{卡片|开始|标题=一级标题}} 
{{卡片|内容开始}} 
{{卡片|二级标题|标题=二级标题}} 
{{卡片|按钮|按钮名称|链接地址|宽度=}} 
{{卡片|内容结束}} 
{{卡片|结束}}
  • 卡片使用示例及效果如下所示:
{{卡片|开始|标题=一级标题}} 
{{卡片|内容开始}} 
{{卡片|二级标题|标题=二级标题}} 
{{卡片|按钮|按钮名称|链接地址|宽度=200px}} 
{{卡片|按钮|按钮名称|链接地址|宽度=}} 
{{卡片|按钮|按钮名称按钮名称按钮名称|链接地址|宽度=}} 
{{卡片|按钮|按钮名称按钮名称按钮名称|链接地址|宽度=150px}} 
{{卡片|内容结束}} 
{{卡片|结束}}

样式修改

  • 按钮卡片的样式同样可以通过css进行修改
  • css的语言对应的功能如下:
.card-title-1 {
    font-size: 字体大小;
    font-weight: 加粗;
    color: 字体颜色;
    background: 背景颜色;
    padding: 字体与边框的距离;
    border-radius: 圆角;
}

.card-title-2 {
    font-size: 字体大小;
    color: 字体颜色;
    font-weight: 加粗;
    margin: 边框与页面的距离;
    border-bottom: 二级标题下方横线的参数;
}
span.card-btnF {
    color: 字体颜色;
    background: 背景颜色;
    text-align: 字体对齐方式;
    height: 按钮高度;
    font-size: 字体大小;
    border-radius: 按钮圆角;


轮播图

举报