查看“模板:沈星回个人页”的源代码

<includeonly><div class="row">
<div class="col-sm-4">
<div class="visible-md visible-sm visible-lg"">
__NOEDITSECTION__ __NOTOC__
==个人照片==
{| class="wikitable" 
|-
| <div class="main-line-wrap">
<div class="resp-tabs" height="150px">
<ul class="resp-tabs-list clearfix" style="margin:3px 0px;">
<li class="bili-list-style active"><span class="tab-panel">官方信息照</span></li>
<li class="bili-list-style "><span class="tab-panel">大头贴</span></li>
</ul>
<div class="resp-tabs-container">
<div class="resp-tab-content" style="display: block;"><div></div>[[文件:思念普通大图-微光懒阳.png|center|class=pic-hh]]</div>
<div class="resp-tab-content"><div></div>[[文件:{{{男主姓名|}}}单人大头.png|center]]</div>
</div>
|}
</div>
</div>
<div class="col-sm-8">
<div class="resp-tabs-container">
<div class="resp-tab-content" style="display:block">
==基本信息==
{| class="wikitable" style="width:100%;text-align:center"
|-
!style="width:25%" | 姓名
|style="width:25%" | {{{男主姓名|}}}
!style="width:25%" | 职业
|style="width:25%" | {{{职业|}}}
|-
!年龄
|{{{年龄|}}}
!身高
|{{{身高|}}}
|-
!Evol
|{{{Evol|}}}
!工作地
|{{{工作地|}}}
|-
!生日
|{{{生日|}}}
!星座
|{{{星座|}}}
|}
==关于他==
{| class="wikitable mw-collapsible" style="width:100%"
|-
!style="width:100%;text-align:left;"|[[文件:{{{男主姓名|}}}小头标1.png|30px|link=]]日常生活
|-
|style="width:100%;text-align:center;"|{{{日常生活|}}}
|}
{| class="wikitable mw-collapsible" style="width:100%"
|-
!style="width:100%;text-align:right;"|[[文件:{{{男主姓名|}}}小头标2.png|30px|link=]]过往经历
|-
|style="width:100%;text-align:center;"|{{{过往经历|}}}
|}
{| class="wikitable mw-collapsible" style="width:100%"
|-
!style="width:100%;text-align:left;"|[[文件:{{{男主姓名|}}}小头标3.png|30px|link=]]他的喜好
|-
|style="width:100%;text-align:center;"|{{{他的喜好|}}}
|}
{| class="wikitable mw-collapsible" style="width:100%"
|-
!style="width:100%;text-align:right;"|[[文件:{{{男主姓名|}}}小头标4.png|30px|link=]]我们的事
|-
|style="width:100%;text-align:center;"|{{{我们的事|}}}
|}
</div>
</div>
</div>
</div>
</div>
</div>
{{#css:
.high{
background:#c2cff3;
padding:0px 2px;
color:#515468;
font-weight:bold;
}
.pic-hh{
height: 550px;
width: auto;
}
.resp-tabs-list li {
    border-left: 0px solid rgba(0,0,0,0.16);
    float: left;
    background: unset;
    border: unset;
    border-bottom: 1px solid rgba(0,0,0,0.5);
}
.resp-tabs-list li.active,  .resp-tabs-list li.active:last-child{
    border-bottom: 2px solid rgba(234,208,193,0.7);
    color: #ddd;
    background: rgba(46,53,64,1);
}
.resp-tabs-list li.active .tab-panel{
    color: unset;
    background: unset;
}
.resp-tabs-list li.active .tab-panel::before {
    content: '';
    position: absolute;
    bottom: -30px;
    left: 50%;
    width: 50px;
    height: 50px;
    background: linear-gradient(to top, rgba(234, 208, 193, 0.4), rgba(234, 208, 193, 0));
    border-radius: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 8px 3px rgba(234, 208, 193, 0.1);
}
.resp-tabs-list li:last-child {
    border: unset;
    border-bottom: 1px solid rgba(0,0,0,0.5);
}
.resp-tabs-list li:last-child .tab-panel {
    margin-right: unset;
}
.tab-panel {
    font-family: MicrosoftYaHei;
    color: #54505B;
    transition: all .15s linear;
    background: unset;
    font-weight: 600;
    padding: 0 20px;
    width: 100px;
    height: 30px;
    line-height: 30px;
    position: relative;
    overflow: hidden;
}
.resp-tabs-list li.active .tab-panel, .tab-panel:hover {
    width: 100px;
    height: 30px;
    line-height: 30px;
}
}}
</includeonly>