查看“模板:留音背景-左慈”的源代码

<includeonly><bstyle>
.chuanyu {
width: 768px;
overflow: hidden;
position: relative;
background: url(https://patchwiki.biligame.com/images/yuan/3/34/rru2p952577ocabmzp7mowu94924k82.png) no-repeat center /100%;
background-size: cover;
margin: 0 auto;
font-family: kaiti;
display:flex;
flex-direction: column;
justify-content: space-between;
}
.chuanyu .title {
margin:15px 30px;
font-size: 48px;
color:#FFF8CB;
display: flex;
justify-content: space-between;
}
.chuanyu .text {
display: flex;
padding-top: 30px;
flex-direction: column;
align-items: center;
}
.chuanyu .text p {
margin: 20px;
line-height: 25px;
font-size: 20px;
color: #B69A7C;
transition: color 1;
text-shadow: 0.5px 0.5px 0px  #000;
}
.chuanyu .text p:hover {
color: #F8E7D9;
font-size:24px;
text-shadow: 1px 0.5px 1px #000;
}
.chuanyu .tab {
display: flex;
flex-direction: column-reverse;
}
.chuanyu .tab ul {
display: flex;
margin: 0 15px;
flex-wrap: wrap;
}
.chuanyu .tab>ul>li {
display: inline-flex;
width:150px;
height:165px;
margin:0 5px;
padding:0;
color:#666;
background:url(https://wiki.biligame.com/yuan/special:filepath/%E7%95%99%E5%A3%B0%E6%8C%89%E9%92%AE.png) no-repeat center / 150px;
}
.chuanyu .tab>ul>li a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 82%;
font-size: 20px;
}
.chuanyu .tab>ul>li:hover {
color:#666;
font-weight:bold;
}
.chuanyu .tab>ul>li.active {
background:url(https://wiki.biligame.com/yuan/special:filepath/%E7%95%99%E5%A3%B0%E6%8C%89%E9%92%AE%E9%80%89%E4%B8%AD.png) no-repeat center / 150px !important;
color:#fff;
font-weight:bold;
}
.chuanyu .tab>.tab-content {
margin:15px;
padding:15px 0;
border-top-left-radius:5px;
border-top-right-radius:5px;
}
.chuanyu .tab>.tab-content>.tab-pane {
width:100%;
aspect-ratio: 1 / 1.6;
overflow-y:scroll;
}
.chuanyu .tab>.tab-content>.tab-pane.active {
background: transparent!important;
}
.chuanyu .tab>ul>li>a, .chuanyu .tab>ul>li>a:hover, .chuanyu .tab>ul>li>a:active, .chuanyu .tab>ul>li>a:focus {
text-decoration:none;
color:inherit;
}
.chuanyu .tab>ul>li.active>a, .chuanyu .tab>ul>li>a:hover, .chuanyu .tab>ul>li.active>a:active, .chuanyu .tab>ul>li.active>a:focus {
color:inherit;
}
.chuanyu ::-webkit-scrollbar {
width:12px;
border-radius: 20px;
background: #775743;
}
.chuanyu ::-webkit-scrollbar-thumb {
border-radius: 20px;
background:#736758;
}
@media only screen and (max-width: 870px) {
.chuanyu {
width:100%;
}
.chuanyu .title {
font-size: 24px;
}
.chuanyu .tab>ul>li {
width: 90px !important;
height: 95px !important;
background:url(https://wiki.biligame.com/yuan/special:filepath/%E7%95%99%E5%A3%B0%E6%8C%89%E9%92%AE.png) no-repeat center / 90px !important;
}
.chuanyu .tab>ul>li.active {
background:url(https://wiki.biligame.com/yuan/special:filepath/%E7%95%99%E5%A3%B0%E6%8C%89%E9%92%AE%E9%80%89%E4%B8%AD.png) no-repeat center / 90px !important;
}
.chuanyu .text p {
margin: 16px;
line-height: 21px;
font-size:16px;
text-shadow: 0.5px 0.5px 0px  #000;
}
.chuanyu .text p:hover {
font-size:20px;
text-shadow: 1px 0.5px 1px #000;
}
}
</bstyle></includeonly>