成品演示截图
代码CSS在线演示:
新ACG会员开通引导页
当会员 体验不一样的特权
- 日常实时更新及维护补档
- 日常实时更新及维护补档
- 站内包含:美图\游戏\心得\软件\影视\姿势\源码等等新鲜的玩意
代码CSS分享
<div class="gdd-pvip-intro-page__header perfmatters-lazy" style="background-repeat: no-repeat;background-position: center center;background-size: cover;background-image: url("https://p2.pstatp.com/origin/pgc-image/ec90060d612c41239fb22ce13b83da48");" data-bg="url(https://p2.pstatp.com/origin/pgc-image/ec90060d612c41239fb22ce13b83da48)" loading="lazy" data-was-processed="true">
<div class="gdd-pvip-intro-page__header__container">
<span class="gdd-pvip-intro-page__header__subtitle">
<h1>
<span class="gdd-pvip-intro-page__header__title" style="color:#fff;">新ACG会员开通引导页</span>
</h1>
</span><span class="gdd-pvip-intro-page__header__title">当会员 体验不一样的特权</span>
<ul class="gdd-pvip-intro-page__header__rights">
<li><span>日常实时更新及维护补档</span></li>
<li><span>日常实时更新及维护补档</span></li>
<li><span>站内包含:美图\游戏\心得\软件\影视\姿势\源码等等新鲜的玩意</span></li>
</ul>
</div>
</div>
<style>
.gdd-pvip-intro-page__header {
text-align: center;
background-size: 100% 100%;
height: 440px;
padding-top: 88px;
margin-top: -64px;
background-repeat: no-repeat;
background-size: cover;
background-position: 50%;
position: relative;
background: linear-gradient(90deg,#e00866,#ea7594);
}
.gdd-pvip-intro-page__header__container{
width: 1200px;
margin: 0 auto;
text-align: left;
margin-top: 40px;
}
.gdd-pvip-intro-page__header__title{
display: inline-block;
-webkit-background-clip: text;
margin-bottom: 23px;
font-family: PingFang SC;
font-weight: 500;
font-size: 40px;
line-height: 56px;
color: #f6cd9c;
margin-bottom: 34px;
}
.gdd-pvip-intro-page__header__rights>li{
font-family: PingFang SC;
font-weight: 500;
font-size: 16px;
line-height: 20px;
color: #fff;
margin-bottom: 20px;
}
.gdd-pvip-intro-page__header__subtitle .logo{
display: block;
}
</style>
测试使用环境:7B2主题 B2主题,其他主题自己测试~
© 版权声明
文章版权归作者所有,未经允许请勿转载。
相关文章
暂无评论...