子比主题美化 – 任意页面添加VIP购买小工具(任意网站通用)

效果图

教程开始

复制下面代码

到WordPress后台-外观-小工具-自定义HTML代码小工具中选择想要添加的位置(不推荐侧边栏)

粘贴代码并保存即可

图片路径和跳转地址可自行替换

本文付费阅读内容 – 大SVIP会员免费

<style>

.office-bottom-block {

width: 1200px;

margin: 0 auto;

}

.office-bottom-block * {

box-sizing: border-box;

}

.office-bottom-block .block2 {

display: flex;

justify-content: space-between;

padding-top: 23px;

}

.office-bottom-block .block2 > li {

width: 372px;

transition: all 0.3s;

cursor: pointer;

position: relative;

}

.office-bottom-block .block2 > li:hover {

transform: translateY(-20px);

}

.office-bottom-block .block2 > li .top {

width: 400px;

height: 190px;

margin-left: -14px;

}

.office-bottom-block .block2 > li .title {

position: absolute;

font-weight: bold;

font-size: 24px;

color: #FFF;

line-height: 34px;

text-shadow: 0px -4px 16px rgba(0, 0, 0, 0.05), 0px 2px 4px #F56F00;

left: 59px;

top: 53px;

}

.office-bottom-block .block2 > li .bottom {

height: 242px;

background: radial-gradient(0% 63% at 50% 0%, rgba(255, 252, 244, 0.9) 0%, rgba(255, 249, 229, 0.9) 100%);

box-shadow: 0px -4px 16px 0px rgba(0, 0, 0, 0.05);

border-radius: 10px;

border: 1px solid #fff;

backdrop-filter: blur(6px);

margin-top: -84px;

padding: 26px 28px 0 30px;

overflow: hidden;

}

.office-bottom-block .block2 > li .bottom.b2 {

background: radial-gradient(0% 63% at 50% 0%, rgba(252, 245, 255, 0.9) 0%, rgba(248, 236, 255, 0.9) 100%);

}

.office-bottom-block .block2 > li .bottom.b3 {

background: radial-gradient(0% 63% at 50% 0%, rgba(255, 247, 244, 0.9) 0%, rgba(255, 247, 244, 0.9) 100%);

}

.office-bottom-block .block2 > li .bottom .t1 {

font-weight: bold;

font-size: 16px;

color: #191919;

line-height: 22px;

text-shadow: 0px -4px 16px rgba(0, 0, 0, 0.05);

margin-bottom: 6px;

}

.office-bottom-block .block2 > li .bottom .equs {

display: flex;

flex-wrap: wrap;

font-size: 14px;

color: #191919;

line-height: 20px;

}

.office-bottom-block .block2 > li .bottom .equs li {

min-width: 49.9%;

text-shadow: 0px -4px 16px rgba(0, 0, 0, 0.05);

margin-top: 10px;

}

.office-bottom-block .block2 > li .bottom .equs li i {

color: #474747;

margin-right: 8px;

font-size: 14px;

}

.office-bottom-block .block2 > li .bottom .price-bd {

margin-top: 32px;

}

.office-bottom-block .block2 > li .bottom .price-bd .price {

font-size: 16px;

color: #FF3434;

}

.office-bottom-block .block2 > li .bottom .price-bd .price .unit {

font-size: 18px;

}

.office-bottom-block .block2 > li .bottom .price-bd .price b {

font-size: 36px;

margin: 0 2px;

}

.office-bottom-block .block2 > li .bottom .price-bd button {

float: right;

width: 160px;

height: 42px;

background: linear-gradient(301deg, #F45509 0%, #FFB424 100%);

box-shadow: 0px -4px 16px 0px rgba(0, 0, 0, 0.05), 0px 4px 10px 0px rgba(246, 99, 16, 0.3);

border-radius: 21px;

border: none;

cursor: pointer;

font-size: 18px;

color: #FFF;

letter-spacing: 2px;

text-shadow: 0px -4px 16px rgba(0, 0, 0, 0.05);

position: relative;

}

.office-bottom-block .block2 > li .bottom .price-bd button em {

position: absolute;

width: 70px;

height: 20px;

background: linear-gradient(72deg, #FF7308 0%, #FF3B22 100%);

box-shadow: 0px -4px 16px 0px rgba(0, 0, 0, 0.05);

border-radius: 0px 6px 0px 6px;

font-size: 12px;

color: #FFF;

line-height: 20px;

text-align: center;

text-shadow: 0px -4px 16px rgba(0, 0, 0, 0.05);

right: -6px;

top: -12px;

}

.office-bottom-block .block2 > li .bottom .price-bd button:hover {

background: linear-gradient(301deg, #FFB424 0%, #F45509 100%);

}

.office-bottom-block .block2 > li .bottom .price-bd button.btn2 {

background: linear-gradient(301deg, #891EEF 0%, #FF37E4 100%);

box-shadow: 0px -4px 16px 0px rgba(0, 0, 0, 0.05), 0px 4px 10px 0px rgba(164, 59, 252, 0.3);

}

.office-bottom-block .block2 > li .bottom .price-bd button.btn2:hover {

background: linear-gradient(301deg, #FF37E4 0%, #891EEF 100%);

}

.office-bottom-block .block2 > li .bottom .price-bd button.btn3 {

background: linear-gradient(301deg, #5B2601 0%, #E68500 100%);

box-shadow: 0px -4px 16px 0px rgba(0, 0, 0, 0.05), 0px 4px 10px 0px rgba(71, 41, 12, 0.2);

}

.office-bottom-block .block2 > li .bottom .price-bd button.btn3:hover {

background: linear-gradient(301deg, #E68500 0%, #5B2601 100%);

}

</style>

<div class=“title”>办公VIP</div>

<p class=“t1”>PPT海量下载+加赠在线编辑7天VIP</p>

<li><i class=“iconfont icon-icon”></i>PPT板块海量下载</li>

<li><i class=“iconfont icon-icon”></i>个人学习/论文/新媒体平台/社交账号发布</li>

<li><i class=“iconfont icon-icon”></i>多权益升级加量不加价</li>

</ul>

<div class=“price-bd”><span class=“price”><span

class=“unit”>¥</span><b>69</b>/年起</span><button>立即开通</button></div>

</div>

</li>

<div class=“title” style=“text-shadow: 0px -4px 16px rgba(0,0,0,0.05), 0px 2px 4px #9E27F8;”>全站通VIP</div>

<p class=“t1”>全站10大类目+千库编辑海量下载</p>

<li><i class=“iconfont icon-icon”></i>全站海量下载</li>

<li><i class=“iconfont icon-icon”></i>个人学习/论文/新媒体平台/社交账号发布</li>

<li><i class=“iconfont icon-icon”></i>多权益升级加量不加价</li>

</ul>

<div class=“price-bd”><span class=“price”><span class=“unit”>¥</span><b>199</b>/年起</span><button

class=“btn2”>立即开通</button></div>

</div>

</li>

<div class=“title” style=“text-shadow: 0px -4px 16px rgba(0,0,0,0.05), 0px 2px 4px #9A641A;”>企业VIP</div>

<p class=“t1”>全站10大类目+千库编辑+加赠AI助手工具</p>

<li><i class=“iconfont icon-icon”></i>全站海量下载</li>

<li><i class=“iconfont icon-icon”></i>永久商用版权</li>

<li><i class=“iconfont icon-icon”></i>多账号体系</li>

<li><i class=“iconfont icon-icon”></i>享赔付保障金</li>

</ul>

<div class=“price-bd”><span class=“price”><span class=“unit”>¥</span><b>999</b>/年起</span><button

class=“btn3”>立即开通<em>买1年送1年</em></button></div>

</div>

</li>

</ul>

</div>

转载保留本文章地址

Ctrl+D收藏我们

部分内容来自于网络如有不妥联系站长删除！

本站用户发帖仅代表本站用户个人观点，并不代表本站赞同其观点和对其真实性负责。

本站代码模板仅供学习交流使用请勿商业运营,严禁从事违法,侵权等任何非法活动,否则后果自负！

本站收集的资源仅供内部学习研究软件设计思想和原理使用，学习研究后请自觉删除，请勿传播，因未及时删除所造成的任何后果责任自负。

如果用于其他用途，请购买正版支持作者，谢谢！若您认为「CHUANGFUYE.COM」发布的内容若侵犯到您的权益，请联系站长邮箱:554286@qq.com 进行删除处理。
本站资源大多存储在云盘，如发现链接失效，请联系我们，我们会第一时间更新。