查看“模板:泰坦传奇技师资料同人”的源代码

<div class="container main"> <!-- 外层容器，包含整个页面的主要内容 -->

    <div class="row"> <!-- 将页面分成左右两栏 -->
        <div class="col-xs-12 col-md-4"> <!-- 左侧窄栏，占全屏的25% -->
            <!-- 左侧内容 -->
[[File:技师等级徽章.png|40px]]<span style="color: #fda602; font-weight: bold; font-size: 20px;">&nbsp;&nbsp;{{{润色英文|}}}（[[同人]]）</span>
<div class="background" style="position: relative; width: 500px;"> <!-- 背景图设置为相对定位 -->
[[文件:技师背景光环.png|400px|link=]]
<div class="pilot" style="position: absolute; left: 80px; top: 50px;"> <!-- 绝对定位叠加图片 -->
[[文件:{{{英文|}}}.png|250px|link=]]
----
</div>
</div>
<br>
<div class="robot_info" style="color: #fda602;">
'''{{{润色英文|}}}'''<br>
'''{{{润色翻译|}}} 的专属机甲：'''[[FanArt/{{{专属机甲|}}}|{{{专属机甲|}}}]]  <br>
</div>
        </div>
        <div class="col-xs-12 col-md-8"> <!-- 右侧宽栏，占全屏的75% -->
            <!-- 右侧内容 -->
<br><br><br>
<div class="pilot_skill">
<span style="color: #fda602; float: right; font-size: 14px;">专属技能</span>
<span style="color: #fff; font-weight: bold; font-size: 16px;">{{{技能名称|}}}</span><br>
<span style="color: #fff; font-size: 14px;">{{{技能描述|}}}</span>
<span style="color: #fda602; float: right; font-size: 14px;">独特</span>
</div>
<br>
<div class="pilot_skill">
<span style="color: #fda602; float: right; font-size: 14px;">专属技能</span>
<span style="color: #fff; font-weight: bold; font-size: 16px;">{{{技能2名称|}}}</span><br>
<span style="color: #fff; font-size: 14px;">{{{技能2描述|}}}</span>
<span style="color: #fda602; float: right; font-size: 14px;">独特</span>
</div>
<br>
<div class="pilot_skill">
<span style="color: #fda602; float: right; font-size: 14px;">专属技能</span>
<span style="color: #fff; font-weight: bold; font-size: 16px;">{{{技能3名称|}}}</span><br>
<span style="color: #fff; font-size: 14px;">{{{技能3描述|}}}</span>
<span style="color: #fda602; float: right; font-size: 14px;">独特</span>
</div>
<br>

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

<div style="font-size: 24px; line-height: 1; font-family: 'KaiTi', 楷体, serif; color: #fda602;">详细描述</div>
----
<div style="font-size: 20px; line-height: 1.7; font-family: 'Times New Roman', 'KaiTi', 楷体, serif;  white-space: pre-wrap; word-wrap: break-word;">
{{{描述|}}}
</div>



<includeonly>{{#set:
| 单元={{{单元|}}}	| 类别={{{类别|}}}	| 英文={{{英文|}}}	| 润色英文={{{润色英文|}}}	| 润色翻译={{{润色翻译|}}}	| 排序={{{排序|}}}	| 技能名称={{{技能名称|}}}	| 技能描述={{{技能描述|}}}	| 技能2名称={{{技能2名称|}}}	| 技能2描述={{{技能2描述|}}}	| 技能3名称={{{技能3名称|}}}	| 技能3描述={{{技能3描述|}}} | 专属机甲={{{专属机甲|}}}	| 机甲图片={{{机甲图片|}}}	| 第1段={{{第1段|}}}	| 第2段={{{第2段|}}}	| 第3段={{{第3段|}}} | 描述={{{描述|}}}
}}</includeonly>
<!-- 模板作者 啃泥丝 -->
{{#css:
.robot_info {
    background-color: #0d2638; /* 容器背景色 */
    padding: 20px; /* 内边距 */
    border-radius: 20px; /* 圆角效果 */
    text-align: center; /* 居中对齐 */
    margin: 0 auto; /* 居中容器 */
}
.robot_info:hover {
    background-color: #1b3742; /* 鼠标悬浮时的背景色 */
    color: #c3fffb !important;  /* 鼠标悬浮时的文字颜色 */
}
.pilot_skill {
    background-color: #845E2F; /* 容器背景色 */
    border: 2px solid #fda602; /* 设置边框颜色 */
    color: #fda602; /* 文字色 */
    padding: 10px 50px;/* 内边距 */
    margin: 0px; /* 所有方向的外边距均为 20px */
    border-radius: 0px; /* 圆角效果 */
}
hr {
    background-color: #fda602;
}
.story-board {
    background-color: #0d2638; /* 容器背景色 */
    padding: 20px 20px; /* 内边距 */
}
.story-board:hover {
    background-color: #1b3742; /* 鼠标悬浮时的背景色 */
    box-shadow: 0px 0px 20px #356279 inset; 
}
}}