查看“模板:流浪体图鉴”的源代码

<includeonly>
<div class="row"><!--本页面使用以【行】为单位，每行共12列，从左侧开始的规则-->
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4"><!--以下部分，在手机中，占12/12列(整个页面），其余设备占比6/12列（左侧一半）-->
<!--本部分内容开始-->
<!--左侧6/12第一个部分-->
<div class="tagNameBox">

<div class="lineOneBox"></div>
<div class="lineTweBox"></div>
<div class="textBox">
{{{流浪体名称|}}}
</div>

</div>

<div class="basicInfoBox">
{|  <!--创建一个表格样式-->style="text-align:center;width:100%"<!--表内文字居中/宽度100%-->
 
|- <!-- 第1行 --> 
| colspan=8<!--合并两格单元格/行-->|[[file:{{{流浪体图片|}}}.png]]<!--上传对应【流浪体名.PNG】的图片后，自己会自动展示-->

|- <!-- 第2行 --> 
|style="text-align:left" colspan=8<!--合并两格单元格/行-->|
<div class="moduleBox ">[[file:流浪体标题圆点.png|8x8px]]&nbsp;&nbsp;<font color=#554F5B>'''{{{标题名称1}}}'''</font></div>

|- <!-- 第3行 -->
|<!--第一格-->style="text-align:left"<!--合并两格单元格--> colspan=3 <!--合并两格单元格-->style="width:30%<!--20%宽-->;font-weight:bold"<!--加粗-->|流浪体名称<!--表头内容-->
|<!--第二格--> colspan=5 <!--合并四格单元格--> style="text-align:left;width:70%"<!--80%宽-->|<font color=#867379>{{{流浪体名称|}}}</font>

|- <!-- 第4行 -->
|<!--第一格-->style="text-align:left"<!--合并两格单元格--> colspan=3 <!--合并两格单元格-->style="width:30%<!--20%宽-->;font-weight:bold"<!--加粗-->|流浪体级别<!--表头内容-->
|<!--第二格--> colspan=5 <!--合并四格单元格--> style="text-align:left;width:70%"<!--70%宽-->|<div class="lltpic">
<div class="gradeBox1" style="{{#if:{{{流浪体级别-普通|}}}||display:none}}">{{{流浪体级别-普通|}}}</div>
<div class="gradeBox2" style="{{#if:{{{流浪体级别-精英|}}}||display:none}}">{{{流浪体级别-精英|}}}</div>
<div class="gradeBox3" style="{{#if:{{{流浪体级别-首领|}}}||display:none}}">{{{流浪体级别-首领|}}}</div>
</div>&nbsp;&nbsp;

|- <!-- 第5行 --> 
|<!--第一格-->style="width:30%<!--20%宽-->;vertical-align:top;font-weight:bold;"<!--加粗-->" rowspan=11<!--合并两格单元格/列--> colspan=4<!--合并两格单元格/行-->|流浪体特性<!--表头内容-->

|- <!-- 第1行 -->
|style="text-align:left;font-weight:bold;"<!--15%宽/加粗-->colspan=4 <!--合并四格单元格--> |<div class="tag1" style="{{#if:{{{特性tag1|}}}||display:none}}">{{{特性tag1|}}}</div>

|- <!-- 第2行 -->
|<!--第一格-->style="text-align:left"colspan=4 <!--合并四格单元格--> |<div class="tagContent" style="{{#if:{{{流浪体特性1|}}}||display:none}}"><font color=#65606C>{{{流浪体特性1|}}}</font></div>

|- <!-- 第3行 -->
|style="text-align:left;"<!--15%宽/加粗-->colspan=4 <!--合并四格单元格--> |<div class="tag2" style="{{#if:{{{特性tag2|}}}||display:none}}">{{{特性tag2|}}}</div>

|- <!-- 第4行 -->
|<!--第一格-->style="text-align:left"colspan=4 <!--合并四格单元格--> |<div class="tagContent" style="{{#if:{{{流浪体特性2|}}}||display:none}}"><font color=#65606C>{{{流浪体特性2|}}}</font></div>

|- <!-- 第5行 -->
|style="text-align:left"<!--15%宽/加粗-->colspan=8 <!--合并四格单元格--> |<div class="tag3" style="{{#if:{{{特性tag3|}}}||display:none}}">{{{特性tag3|}}}</div></div>

|- <!-- 第6行 -->
|style="text-align:left;width:100%;"colspan=4 <!--合并四格单元格--> |<div class="tagContent" style="{{#if:{{{流浪体特性3|}}}||display:none}}"><font color=#65606C>{{{流浪体特性3|}}}</font>

|- <!-- 第7行 -->
|style="text-align:left;"<!--15%宽/加粗-->colspan=4 <!--合并四格单元格--> |<div class="tag2" style="{{#if:{{{特性tag4|}}}||display:none}}">{{{特性tag4|}}}</div>

|- <!-- 第8行 -->
|<!--第一格-->style="text-align:left"colspan=4 <!--合并四格单元格--> |<div class="tagContent" style="{{#if:{{{流浪体特性4|}}}||display:none}}"><font color=#65606C>{{{流浪体特性4|}}}</font></div>

|- <!-- 第9行 -->
|style="text-align:left"<!--15%宽/加粗-->colspan=8 <!--合并四格单元格--> |<div class="tag3" style="{{#if:{{{特性tag5|}}}||display:none}}">{{{特性tag5|}}}</div></div>

|- <!-- 第10行 -->
|style="text-align:left;width:100%;padding-bottom:10px;"colspan=4 <!--合并四格单元格--> |<div class="tagContent" style="{{#if:{{{流浪体特性5|}}}||display:none}}"><font color=#65606C>{{{流浪体特性5|}}}</font>

|- <!-- 第11行 -->
|<!--第一格--> style="font-weight:bold;"<!--加粗--> colspan=4<!--合并两格单元格-->|相关流浪体<!--表头内容-->
|<!--第二格--> style="text-align:left"<!--左对齐-->colspan=4<!--合并四格单元格-->|<font color=#867379>{{{相关流浪体|}}}</font>

|}
</div>

<!--左侧6/12第二个部分-->
</div>

<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8"><!--以下部分，在手机中，占12/12列(整个页面），其余设备占比6/12列（右侧一半）-->
<!--右侧12/12第一个部分-->

<div class="includeBox">
<div class="moduleBox ">[[file:流浪体标题圆点.png|8x8px]]&nbsp;&nbsp;<font color=#554F5B>'''{{{标题名称2}}}'''</font></div>
<div style="color:#696969;padding-left:10px">{{{流浪体介绍|}}}</div>
<div class="moduleBox ">[[file:流浪体标题圆点.png|8x8px]]&nbsp;&nbsp;<font color=#554F5B>'''{{{标题名称3}}}'''</font></div>
<div style="color:#696969;padding-left:10px">{{{对战指南|}}}</div>
<br/>
</div>

<!--右侧12/12第二个部分-->

<div class="skillDescriptionBox">
<div class="moduleBox ">[[file:流浪体标题圆点.png|8x8px]]&nbsp;&nbsp;<font color=#554F5B>'''{{{标题名称4}}}'''</font></div>

<div class="skillModuleBox">
<div class="skillBox" style="{{#if:{{{技能1|}}}||display:none}}">'''{{{技能1|}}}'''</div>
<div style="color:#696969;margin-bottom:5px";{{#if:{{{技能说明1|}}}||display:none}}>{{{技能说明1|}}}</div>
<div class="skillBox" style="{{#if:{{{技能2|}}}||display:none}}">'''{{{技能2|}}}'''</div>
<div style="color:#696969;margin-bottom:5px;{{#if:{{{技能说明2|}}}||display:none}}">{{{技能说明2|}}}</div>
<div class="skillBox" style="{{#if:{{{技能3|}}}||display:none}}">'''{{{技能3|}}}'''</div>
<div style="color:#696969;margin-bottom:5px;{{#if:{{{技能说明3|}}}||display:none}}">{{{技能说明3|}}}</div>
<div class="skillBox" style="{{#if:{{{技能4|}}}||display:none}}">'''{{{技能4|}}}'''</div>
<div style="color:#696969;margin-bottom:5px";{{#if:{{{技能说明1|}}}||display:none}}>{{{技能说明4|}}}</div>
<div class="skillBox" style="{{#if:{{{技能5|}}}||display:none}}">'''{{{技能5|}}}'''</div>
<div style="color:#696969;margin-bottom:5px;{{#if:{{{技能说明5|}}}||display:none}}">{{{技能说明5|}}}</div>
<div class="skillBox" style="{{#if:{{{技能6|}}}||display:none}}">'''{{{技能6|}}}'''</div>
<div style="color:#696969;margin-bottom:5px;{{#if:{{{技能说明6|}}}||display:none}}">{{{技能说明6|}}}</div>
</div>

<br/>
</div>


<!--右侧12/12第三个部分-->

<div class="backgroundBox">
<div class="moduleBox ">[[file:流浪体标题圆点.png|8x8px]]&nbsp;&nbsp;<font color=#554F5B>'''{{{标题名称5}}}'''</font></div>

<div>
<ul>
<li class="contentBox">{{{内容1|}}}</li>
<li class="contentBox">{{{内容2|}}}</li>
<li class="contentBox">{{{内容3|}}}</li>
</ul>
</div>

<br/>
</div>

<!--右侧12/12第四个部分-->

<div class="galleryBox">
<div class="moduleBox ">[[file:流浪体标题圆点.png|8x8px]]&nbsp;&nbsp;<font color=#554F5B>'''{{{标题名称6}}}'''</font></div>
[[file:{{{流浪体图片|}}}.png|center]]

</div>


</div>
</div>
</includeonly>

<noinclude>
 {{流浪体图鉴
    |标题名称1=基本信息
    |标题名称2=流浪体介绍
    |标题名称3=对战指南
    |标题名称4=技能描述
    |标题名称5=流浪体考证/背景/趣闻
    |标题名称6=流浪体画廊
    
    |流浪体图片=流浪体-黑翼遗龙
    |流浪体名称=黑翼遗龙
    |流浪体级别图片=流浪体级别-首领
    
    |流浪体级别-首领=首领
    
    |特性tag1=远近兼具
    |流浪体特性1=具有近战与远程两种攻击方式
    |特性tag2=吐息
    |流浪体特性2=进行能量喷吐，持续对前方扇形范围造成伤害。
    |特性tag3=回避
    |流浪体特性3=战斗中当身边有敌人时，会腾空跃起回避敌人。
    |相关流浪体=黑翼遗龙
    |特性tag4=吐息
    |流浪体特性4=进行能量喷吐，持续对前方扇形范围造成伤害。
    |特性tag5=回避
    |流浪体特性5=战斗中当身边有敌人时，会腾空跃起回避敌人。
    |相关流浪体=黑翼遗龙
    
    |流浪体介绍=这是流浪体介绍这是流浪体介绍这是流浪体介绍这是流浪体介绍
    |对战指南=这是对战指南这是对战指南这是对战指南这是对战指南
    |对战指南tag=这是对战指南这是对战指南这是对战指南这是对战指南这是对战指南这是对战指南这是对战指南
    
    |技能1=●技能1
    |技能说明1=这是技能说明这是技能说明这是技能说明这是技能说明
    |技能2=●技能2
    |技能说明2=这是技能说明这是技能说明这是技能说明这是技能说明
    |技能3=●技能3
    |技能说明3=这是技能说明这是技能说明这是技能说明这是技能说明
    |技能4=●技能4
    |技能说明4=这是技能说明这是技能说明这是技能说明这是技能说明
    |技能5=●技能5
    |技能说明5=这是技能说明这是技能说明这是技能说明这是技能说明
    |技能6=●技能6
    |技能说明6=这是技能说明这是技能说明这是技能说明这是技能说明
    
    |内容1=这是内容这是内容这是内容这是内容这是内容这是内容
    |内容2=这是内容这是内容这是内容这是内容这是内容这是内容
    |内容3=这是内容这是内容这是内容这是内容这是内容这是内容
    
    }}
</noinclude>
    {{#CSS:
      img {
           max-width: 100%; /* 确保图片不会超出容器 */
           height: auto; /* 保持图片比例 */
           margin:0 auto;
           text-align:center;
      }

      /*流浪体名字标签*/
      .tagNameBox .lineOneBox{
          position: absolute;
          left: 20px;
          top: 16.5px;
          width: 1px;
          height: 8px;
          background: #7B7680;
      }
      .tagNameBox .lineTweBox{
          position: absolute;
          width: 1px;
          height: 8px;
          left: 20px;
          top: 24.5px;
          background: #B6B3B9;
      }
      .tagNameBox .textBox{
          font-family: 'Source Han Serif SC VF';
          font-style: normal;
          /*font-weight: 600;*/
          font-size: 20px;
          line-height: 29px;
          color: #FFFFFF;
          padding-left: 9px;
      }
      .tagNameBox{
          width: 131px;
          height: 49px;
          position: relative;
          background-color: rgba(255, 255, 255, 0.1);
          border: 1px solid #ffffff;
          color:#ffffff;
          font-size:16px;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-bottom:15px;
          margin-top:-65px;
          padding: 10px 20px;
          border-radius: 4px;
          background: linear-gradient(90deg, rgba(45, 43, 57, 0.6) 0%, rgba(45, 43, 57, 0) 100%);
      }
      
      /*基本信息*/
      .basicInfoBox {
            background: rgba(255, 255, 255, 0.6);
            box-shadow: 0px 4px 4px rgba(121, 121, 135, 0.3), inset 0px 4px 15px rgba(255, 255, 255, 0.2);
            border: 1px solid #e5e2e2; 
            border-radius: 8px;
            padding: 20px 10px;
            font-size: 14px;
        }
        /*小标题*/
        .moduleBox{
            margin: 25px 12px 5px;
            margin-bottom: 10px;
            padding-bottom: 10px;
            border-bottom: 1px solid #867379; 
            font-size: 18px;
            display: flex;
            justify-content: left;
            align-items: center;
       }
       /* 流浪体级别标签--首领 */
       .gradeBox3{
          width: 68px;
          height: 28px;
          background: linear-gradient(90deg, #CB7E9A 0%, #9C8FA6 100%);
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          border-radius: 42px;
          padding: 0px 16px 2px;
          color:#ffffff;
          font-family: 'Source Han Serif CN';
          font-style: normal;
          font-weight: 600;
          font-size: 18px;
          line-height: 26px;
       }
       /* 流浪体级别标签--精英 */
       .gradeBox2{
          width: 68px;
          height: 28px;
          background: linear-gradient(90deg, #C5988A 0%, #9996A5 100%);
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          border-radius: 42px;
          padding: 0px 16px 2px;
          color:#ffffff;
          font-family: 'Source Han Serif CN';
          font-style: normal;
          font-weight: 600;
          font-size: 18px;
          line-height: 26px;
       }
       
       /* 流浪体级别标签--普通 */
       .gradeBox1{
          width: 68px;
          height: 28px;
          background: linear-gradient(90deg, #9398AC 0%, #8F92A7 100%);
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          border-radius: 42px;
          padding: 0px 16px 2px;
          color:#ffffff;
          font-family: 'Source Han Serif CN';
          font-style: normal;
          font-weight: 600;
          font-size: 18px;
          line-height: 26px;
       }

      .includeBox {
            background: linear-gradient(90deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.48) 100%);
            box-shadow: 0px 4px 4px rgba(121, 121, 135, 0.3), inset 0px 4px 15px rgba(255, 255, 255, 0.2);
            border-radius: 8px;
            border: 1px solid #e5e2e2; 
            padding: 0px 10px;
            font-size: 14px;
        }
        
         /*技能表述*/
        .skillDescriptionBox {
                background: linear-gradient(90deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.48) 100%);
                box-shadow: 0px 4px 4px rgba(121, 121, 135, 0.3), inset 0px 4px 15px rgba(255, 255, 255, 0.2);
                border-radius: 8px;
                /*box-shadow: 2px 2px 2px #e5e2e2;*/
                border: 1px solid #e5e2e2;
                padding: 0px 10px;
                font-size: 14px;
            }
            .skillModuleBox{
                padding:0px 10px;
            }
            .skillBox{
                font-size: 16px;
                line-height: 23px;
                font-style: normal;
                font-weight: 500;
                color: #554F5B;
                vertical-align: top;
                padding-top: 5px;
                margin-bottom:5px;

            }
            
            .backgroundBox {
                /*box-shadow: 2px 2px 2px #e5e2e2;*/
                background: linear-gradient(90deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.48) 100%);
                box-shadow: 0px 4px 4px rgba(121, 121, 135, 0.3), inset 0px 4px 15px rgba(255, 255, 255, 0.2);
                border-radius: 8px;
                border: 1px solid #e5e2e2; 
                border-radius: 10px;
                padding: 0px 10px;
            }
            .contentBox{
                font-size: 14px;
                color: #65606C;
                vertical-align: top;
                padding-top: 5px;
            }
        
            .galleryBox {
                background: linear-gradient(90deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.48) 100%);
                box-shadow: 0px 4px 4px rgba(121, 121, 135, 0.3), inset 0px 4px 15px rgba(255, 255, 255, 0.2);
                border-radius: 8px;
                /*box-shadow: 1px 2px 2px #e5e2e2;*/
                border: 2px solid #e5e2e2; 
                border-radius: 10px;
                padding: 0px 10px;
            }
            
            .lltpic{
             width:80px;
             border-radius: 10px;
             padding-top:15px;
             display: flex;
             justify-content: center;
             align-items: center;
       }
       .tag1{
             text-align: center;
             color: #ffffff;
             width: 72px;
             height: 20px;
             background: linear-gradient(180deg, #C587C6 0%, #C480B8 100%);
             border-radius: 2px;
             padding: 0px 8px;
       }
       .tag2{
             width:44px;
             height: 20px;
             background: linear-gradient(180deg, #EEB48D 0%, #EFB297 100%);
             border-radius: 2px;
             text-align: center;
             color: #ffffff;
             margin-top:10px;
             display: flex;
             flex-direction: row;
             justify-content: center;
             align-items: center;
             padding: 0px 8px;
       }

       .tag3{
             width:44px;
             height: 20px;
             background: linear-gradient(180deg, #EEB48D 0%, #EFB297 100%);
             border-radius: 2px;
             text-align: center;
             color: #ffffff;
             margin-top:10px;
             display: flex;
             flex-direction: row;
             justify-content: center;
             align-items: center;
             padding: 0px 8px;
       }

       .tagContent{
             width: 256px;
             height: auto;
             font-family: 'Source Han Sans CN';
             font-style: normal;
             font-weight: 400;
             font-size: 13px;
       }
            }}