查看“首页:阅读”的源代码

<div class="row">
<div class="col-md-4 readSection-other phone">[[主线/1-1|主线]][[主线/世界深处/孑然烛火|世界深处]][[年表|经年历事]][[活动剧情|活动剧情]][[深空百科|深空百科]]
</div>
<div class="readSection col-md-8">
<div>
<div class="readSection-title">手机</div>
{{Tabs|cssClass=lineTabs|id=手机阅读
|短信={{阅读版块选项|短信}}
|朋友圈={{阅读版块选项|朋友圈}}
|语音视频={{阅读版块选项|语音视频}}
|公众号={{阅读版块选项|公众号}}
}}
</div>
<div>
<div class="readSection-title">约会</div>
{{Tabs|cssClass=lineTabs|id=约会阅读
|逸闻={{阅读版块选项|逸闻}}
|快乐出游={{阅读版块选项|快乐出游}}
|在你身边={{阅读版块选项|在你身边}}
|倾心之约={{阅读版块选项|倾心之约}}
}}
</div>
<div>
<div class="readSection-title">其他</div>
{{Tabs|cssClass=lineTabs|id=其他阅读
|战斗语音={{阅读版块选项|语音}}
|主页交互={{阅读版块选项|主页交互}}
|彩蛋={{阅读版块选项|彩蛋}}
|牵绊对话={{阅读版块选项|牵绊对话}}
|分线={{阅读版块选项|分线}}
}}
</div>
</div>
<div class="col-md-4 readSection-other">[[主线/1-1|主线]][[主线/世界深处/孑然烛火|世界深处]][[年表|经年历事]][[活动剧情|活动剧情]][[深空百科|深空百科]]</div>
<div class="col-md-4 hidden-xs>[[file:猎人施工中.png|link=加入我们]]<center>[[加入我们|>&nbsp;一起编辑WIKI&nbsp;<]]</center></div>
</div>
{{#if:{{#varexists:首页阅读CSS防重复加载}} || {{#vardefine:首页阅读CSS防重复加载 | 1 }}<bstyle>/*
<pre>*/
div#headBox{display:none;}
.readSection-other.phone {
    display: none;
}
.readSection>div{display:flex;margin-bottom:50px;}
.readSection-title{
    font-size: 40px;
    font-weight: bold;
    color: #585868;
    width: 50px;
    height:110px;
    line-height: 45px;
    font-style: italic;
    padding-top: 20px;
    margin-right: 10px;
    -webkit-box-reflect: below 0px linear-gradient(transparent, rgba(0, 0, 0, 0.2));
}
.readSection .lineTabs{
width:100%;
}
.readSection-other {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 35px 50px;
}
.readSection-other a {
    flex: 0 0 100%;
    color: #ffffff;
    background: linear-gradient(79deg, rgba(255, 226, 160, 0) 41.87%, rgba(255, 214, 164, 0.3) 85.18%, rgba(255, 235, 211, 0.75) 100%), linear-gradient(0deg, #888696, #888696);
    padding: 18px 16px;
    border-radius: 50px;
    text-align: center;
    font-size: 16px;
}
.readSection-other a:hover {
    font-weight:bold;
}
@media screen and (max-width: 768px) {
    .readSection-other:not(.phone) {
        display: none;
    }
    .readSection-other.phone {
        display: flex;
        margin-bottom:20px;
        padding:10px;
    }
    .readSection-other a {
        padding: 10px 10px;
        border-radius: 8px;
        font-size:14px;
    }
    .readSection{padding:0 0 0 10px;}
    .readSection>div {
        display: block;
        margin-bottom:0px;
    }
    .readSection-title {
        font-size: 16px;
        font-style: normal;
        line-height: normal;
        width: 2.5em;
        height: auto;
        padding-top: 10px;
        -webkit-box-reflect: below -5px linear-gradient(0deg, rgba(109, 114, 142, 0.85) 0%, rgba(109, 114, 142, 0) 45%);
        position: relative;
        display: inline-block;
    }
    .readSection-title::after {
        content: '';
        position: absolute;
        right: 0px;
        bottom: 0;
        height: 1px;
        background: #ccc6d1;
        width: calc(100vw - 100% - 30px);
        transform: translateX(100%);
        box-shadow: 0 3px 2px 0px #0000001f;
    }
    .readBtnGroup img{opacity:1;}
    /*lineTab里的样式*/
    .readSection .lineTabs{margin-top:20px;}
    .readSection .lineTabs>.tab-nav {
            width: 100%;
            padding: 0 0 10px 0;
            border-bottom:none;
            overflow-x: auto;
            flex-wrap: nowrap;
            -webkit-overflow-scrolling: touch; /* 为iOS添加平滑滚动 */
            scrollbar-width: none; /* Firefox */
            -ms-overflow-style: none; /* IE and Edge */
        }
        .readSection .lineTabs>.tab-nav>.tab-btn {
            flex: 0 0 auto;
            min-width: fit-content;
            white-space: nowrap;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 20px;
            padding: 0 1em;
            box-shadow: 0 2px 4px 0 rgba(149, 147, 172, 0.25);
        }
        .readSection .lineTabs>.tab-nav>.tab-btn>a {
        padding: 2px 0;
        font-size: 14px;
    }
        .readSection .lineTabs>.tab-nav>.tab-btn.active {
        border: 1px solid #ffffffc2;
        background: linear-gradient(180deg, #ffffffa6 0%, rgba(255, 255, 255, 0.5) 100%);
        box-shadow: 0px 2px 4px 0px rgb(149 147 172);
    }
        .readSection .lineTabs>.tab-nav>.tab-btn:not(.active):hover {
            background: rgba(255, 255, 255, 0.5);
        }
        .readSection .lineTabs>.tab-content{
        padding:0 0;
        }
    .readSection-other a {
    flex: 0 0 calc(30% - 5px);
    }
}
/*<pre>*/</bstyle>
}}