效果预览
美化步骤
1、在zibll>>pages新建vip.php文件,将相应内容放入其中:
<?php
/**
* Template name: Zibll-会员模板
* Description: vips page
*/
// 在 PHP 中嵌套 HTML
get_header();
$header_style = zib_get_page_header_style();
?>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="applicable-device" content="pc,mobile">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>vip - 绿软博客</title>
<meta name="keywords" content="绿软博客,资源网,技术网,软件资源,精品软件,网站源码,视频教程,贴吧教程,技术教程">
<meta name="description" content="专注于分享高质量实用的互联网资源,涵盖网站搭建、建站源码、美化教程、SEO优化、免费工具、素材资源、设计资源、技术教程等丰富内容。我们致力于为用户提供一站式的资源解决方案,满足各种需求。">
<meta name="robots" content="max-image-preview:large">
<style>
.ceo-background-muted {
background-color: #f0f2f5
}
.ceo_vipbgs {
width: 100%;
height: 495px;
background: #ffc003;
position: relative;
}
.ceo-container {
margin-top: 0px!important;
}
@media (min-width: 960px) {
.ceo-container {
padding-left: 40px;
padding-right: 40px;
}
}
@media (min-width: 640px) {
.ceo-container {
padding-left: 30px;
padding-right: 30px;
}
}
@media screen and (max-width: 800px) {
.ceo_vipbgs {
height: 220px!important;
}
}
.ceo-container {
box-sizing: content-box;
max-width: 1440px;
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
}
.ceo-container::before,
.ceo-container::after {
content: "";
display: table;
}
.ceo-container>:last-child {
margin-bottom: 0;
}
.ceo_portal_block_summary {
max-width: 1200px;
padding: 40px;
display: inline-block;
background: #fff;
position: relative;
margin: 0 auto;
top: -140px;
border-radius: 6px;
}
.yuvip_buy {
max-width: 1200px;
padding: 40px;
background: #fff;
min-height: 600px;
position: relative;
margin: 0 auto;
top: -116px;
border-radius: 6px;
text-align: center;
}
.yuvip_title {
margin: 30px 0 30px 0;
text-align: center;
font-size: 30px;
letter-spacing: 2px;
line-height: 30px;
padding: 0 80px;
position: relative;
display: inline-block;
color: #333;
}
.yuvip_title:before {
content: '';
width: 61px;
height: 10px;
position: absolute;
top: 10px;
left: 0;
background: url(https://www.ludown.com/vips-pic/ceo_hdicon3.png) center no-repeat;
}
.yuvip_title em {
display: block;
border-bottom: 1px solid #006eff;
width: 50px;
margin: 20px auto;
}
.yuvip_title:after {
content: '';
width: 61px;
height: 10px;
position: absolute;
top: 10px;
right: 0;
background: url(https://www.ludown.com/vips-pic//ceo_hdicon4.png) center no-repeat;
}
.yuvip_serve_father {
max-width: 1200px;
padding: 40px;
background: #fff;
display: inline-block;
position: relative;
margin: 0 auto;
top: -92px;
border-radius: 6px;
text-align: center;
}
.ceo_vip_ping {
max-width: 1200px;
padding: 40px;
background: #fff;
display: inline-block;
position: relative;
margin: 0 auto;
top: -66px;
border-radius: 6px;
text-align: center;
}
.ceo_portal_block_summary {
max-width: 1200px;
padding: 40px;
display: inline-block;
background: #fff;
position: relative;
margin: 0 auto;
top: -140px;
border-radius: 6px;
}
.ceo_vip_txtop {
text-align: center;
}
.ceo_vip_txtop h1 {
margin: 30px 0 30px 0;
text-align: center;
font-size: 30px;
letter-spacing: 2px;
line-height: 30px;
padding: 0 80px;
position: relative;
display: inline-block;
color: #333;
}
.ceo_vip_txtop h1:before {
content: '';
width: 61px;
height: 10px;
position: absolute;
top: 10px;
left: 0;
background: url(https://www.ludown.com/vips-pic/ceo_hdicon3.png) center no-repeat;
}
.ceo_vip_txtop h1:after {
content: '';
width: 61px;
height: 10px;
position: absolute;
top: 10px;
right: 0;
background: url(https://www.ludown.com/vips-pic/ceo_hdicon4.png) center no-repeat;
}
.ceo_vip_txtop em {
display: block;
border-bottom: 1px solid #006eff;
width: 50px;
margin: 20px auto;
}
.ceo_youshi_box ul li {
float: left;
width: 33%;
padding-bottom: 20px;
}
.ceo_vip_icon {
width: 64px;
height: 64px;
margin: 0 auto 10px;
}
.ceo_youshi_box ul li h5 {
height: 30px;
line-height: 30px;
margin: 10px 0;
font-size: 18px;
color: #333;
font-weight: 500;
overflow: hidden;
text-align: center;
}
.ceo_youshi_box ul li p {
height: 30px;
line-height: 30px;
margin: 0 0;
font-size: 14px;
color: #999;
font-weight: 500;
overflow: hidden;
text-align: center;
}
.yuvip_buy li {
float: left;
margin: 0 10px;
width: 23.2%;
padding: 0;
border-radius: 6px;
background: #ffffff;
box-shadow: 0px 4px 8px 0px rgb(0 0 0 / 15%);
}
.yuvip_buy li:nth-child(1) .top {
background-color: #07dc8b;
background-image: -webkit-radial-gradient(50% -6%, circle, #51ffbd 2%, #07dc8b);
background-image: radial-gradient(circle at 50% -6%, #51ffbd 2%, #07dc8b);
}
.yuvip_buy li .top {
position: relative;
height: 100px;
border-radius: 6px 6px 0 0;
}
.yuvip_buy li .top .tag {
position: absolute;
top: 0px;
left: 0px;
height: 24px;
line-height: 24px;
text-align: center;
background: linear-gradient( 102.51deg, #ff451d 3.76%, #ff6f32 93.18%);
border-radius: 4px 0 4px 0;
color: #fff;
font-size: 14px;
font-weight: 400;
padding: 0 12px;
}
.yuvip_buy li .top span {
font-size: 20px;
color: #fff;
display: block;
padding-top: 20px;
font-weight: 600;
}
.yuvip_buy li .top p {
font-size: 12px;
color: #fff;
margin-top: 5px;
}
.yuvip_buy li .con {
font-size: 14px;
padding: 24px;
}
.yuvip_buy li .con .desc {
border-top: 1px solid #f4f4f4;
margin-top: 20px;
padding-top: 20px;
}
.yuvip_buy li .con .desc p {
line-height: 2.5;
}
.yuvip_buy li:nth-child(1) a {
background: #07dc8b;
}
.yuvip_buy li a {
display: inline-block;
width: 150px;
height: 38px;
line-height: 38px;
margin-top: 15px;
border-radius: 22px;
font-size: 15px;
color: #fff;
letter-spacing: 0;
text-align: center;
transition: none;
}
.ceo-pages-vip ol,
.ceo-pages-vip ul,
.ceo-pages-vip li {
list-style: none;
}
.yuvip_buy li .con .price span {
font-size: 44px;
color: #333;
font-weight: bold;
line-height: 1;
}
.yuvip_buy li .con .price em {
font-style: normal;
color: #999;
}
.yuvip_buy li .con .price p {
display: block;
background: rgb(255 111 0 / 14%);
color: #ff6f00;
padding: 6px;
border-radius: 50px;
margin-top: 20px;
font-size: 12px;
}
.yuvip_buy li:nth-child(2) .top {
background-color: #f59b00;
background-image: -webkit-radial-gradient(50% -6%, circle, #ffb83d 2%, #f59b00);
background-image: radial-gradient(circle at 50% -6%, #ffb83d 2%, #f59b00);
}
.yuvip_buy li:nth-child(3) .top {
background-color: #397bee;
background-image: -webkit-radial-gradient(50% -45%, circle, #53a7f5, #397bee);
background-image: radial-gradient(circle at 50% -45%, #53a7f5, #397bee);
}
.yuvip_buy li:nth-child(4) .top {
background-color: #f55727;
background-image: -webkit-radial-gradient(50% 3%, circle, #f07a56, #f55727);
background-image: radial-gradient(circle at 50% 3%, #f07a56, #f55727);
}
a,
.ceo-link {
color: #262626;
text-decoration: none;
cursor: pointer;
transition: all .3s;
}
.yuvip_buy li:nth-child(4) a {
background: #f55727;
}
.yuvip_buy li:nth-child(2) a {
background: #f59b00;
}
.yuvip_buy li:nth-child(3) a {
background: #397bee;
}
.ceo-pages-vip body,
ul,
ol,
li,
dl,
dd,
p,
h1,
h2,
h3,
h4,
h5,
h6,
form,
fieldset,
.pr,
.pc {
margin: 0;
padding: 0;
}
.yuvip_serve {
display: inline-block;
}
.yuvip_serve ul {
max-width: 1200px;
}
.yuvip_serve ul li {
float: left;
width: 25%;
}
.yuvip_serve ul li div {
height: 200px;
padding: 15px 10px;
box-sizing: border-box;
background: #FFFFFF;
border: 1px solid #fff0;
transition: all ease-in-out 0.3s;
border-radius: 6px;
margin: 12px;
}
.yuvip_serve ul li img {
width: 60px;
height: 60px;
margin: 0 auto 20px;
}
.yuvip_serve ul li div:hover {
border: 1px solid #EAECEF;
box-shadow: 0 2px 5px 2px #d4d4d4;
}
.deanmbavar {
width: 80px;
height: 80px;
margin: 0 auto;
position: relative;
}
.deanmbavar img {
border-radius: 50%;
}
canvas,
img,
video {
max-width: 100%;
height: auto;
box-sizing: border-box;
}
.ceo_vip_ping li {
float: left;
width: 31.5%;
padding: 20px 15px;
padding-bottom: 40px;
margin: 10px 10px;
background: #fff;
border: 1px solid #f0f0f0;
border-radius: 15px;
}
.deanmbavar span {
display: block;
width: 30px;
height: 30px;
background: url(https://www.ludown.com/svip.gif) 0 0 no-repeat;
background-size: 30px 30px;
position: absolute;
bottom: -10px;
right: -10px;
}
.ceo_vip_ping ul li p b {
color: #ccc;
font-size: 23px;
}
.ceo_vip_ping ul li p {
font-size: 14px;
line-height: 23px;
height: 88px;
padding: 0 20px;
margin-top: 5px;
color: #666;
display: block;
text-align: left;
}
.deanmbusename b {
font-size: 14px;
color: #fec42d;
padding-left: 10px;
}
.deanmbusename {
height: 30px;
line-height: 30px;
margin-top: 10px;
font-size: 16px;
color: #666;
}
.yuvip_serve ul li p {
margin-bottom: 10px;
padding: 0 15px;
font-size: 18px;
color: #444444;
text-align: center;
line-height: 25px;
box-sizing: border-box;
}
.yuvip_serve ul li em {
height: 20px;
font-size: 12px;
color: #666666;
text-align: center;
line-height: 20px;
font-style: normal;
transition: all ease-in-out 0.3s;
}
@media screen and (max-width: 800px) {
.yuvip_buy {
min-height: auto!important;
height: auto!important;
display: inline-block;
}
.yuvip_buy,
.ceo_portal_block_summary,
.yuvip_serve_father {
padding: 20px!important;
}
}
@media screen and (max-width: 800px) {
.ceo_vip_txtop h1,
.yuvip_title {
font-size: 18px;
}
.yuvip_buy li {
margin: 10px 0!important;
width: 100%!important;
}
.yuvip_serve ul li {
width: 100%;
}
.ceo_vip_ping li {
width: 100%!important;
padding: 0!important;
padding-bottom: 20px!important;
padding-top: 20px!important;
margin: 10px 0!important;
}
}
</style>
</head>
<body id="ceotheme" class="">
<script>
var all_night_theme = false;
</script>
<script>
var is_switch_day_night = true;
</script>
<div class="ceo-background-muted site ceo-zz-background">
<div class="ceo_vipbgs"><img src="https://www.ludown.com/vips-pic/vip-banner.png" style="width: 100%;"></div>
<div class="ceo-container" id="page-content" style="max-width: 1200px;">
<div class="ceo-pages-vip">
<div class="ceo_portal_block_summary">
<div class="ceo_vip_txtop">
<h1>VIP超级特权<em></em></h1>
</div>
<div class="ceo_youshi_box">
<ul>
<li>
<div class="ceo_vip_icon"><img src="https://www.ludown.com/vips-pic/ceo-vip-01.png"></div>
<h5>全站优选</h5>
<p>五层审核,层层把关作品质量</p>
</li>
<li>
<div class="ceo_vip_icon"><img src="https://www.ludown.com/vips-pic/ceo-vip-02.png"></div>
<h5>极速下载</h5>
<p>VIP专享极速通道,下载提高100倍</p>
</li>
<li>
<div class="ceo_vip_icon"><img src="https://www.ludown.com/vips-pic/ceo-vip-03.png"></div>
<h5>畅享无限</h5>
<p>更多内容,随时随地无限任意下载</p>
</li>
<li>
<div class="ceo_vip_icon"><img src="https://www.ludown.com/vips-pic/ceo-vip-04.png"></div>
<h5>优享新品</h5>
<p>优先下载最新作品,比别人先一步</p>
</li>
<li>
<div class="ceo_vip_icon"><img src="https://www.ludown.com/vips-pic/ceo-vip-05.png"></div>
<h5>海量内容</h5>
<p>112万精选作品,满足任何使用场景</p>
</li>
<li>
<div class="ceo_vip_icon"><img src="https://www.ludown.com/vips-pic/ceo-vip-06.png"></div>
<h5>专属客服</h5>
<p>属于你的1对1客服,即时响应</p>
</li>
<div class="clear"></div>
</ul>
</div>
</div>
<div class="yuvip_buy">
<div class="yuvip_title">VIP套餐<em></em></div>
<ul>
<li>
<div class="item">
<div class="top">
<div class="tag">推荐</div>
<span>年卡VIP会员</span>
<p>已加入3人</p>
</div>
<div class="con">
<div class="price">
<span>68</span>
<em>余额</em>
<p>每天可下载10个VIP资源</p>
</div>
<div class="desc">
<p></p>
</div>
<a class="vip-buy vip-btn pay-vip" vip-level="1" data-toggle="tooltip" data-placement="top" href="javascript:;" data-original-title="开通会员">
立即开通
</a>
</div>
</div>
</li>
<li>
<div class="item">
<div class="top">
<div class="tag">80%用户选择</div>
<span>永久VIP会员</span>
<p>已加入13人</p>
</div>
<div class="con">
<div class="price">
<span>108</span>
<em>余额</em>
<p>每天可下载10个VIP资源</p>
</div>
<div class="desc">
<p></p>
</div>
<a class="vip-buy vip-btn pay-vip" vip-level="1" data-toggle="tooltip" data-placement="top" href="javascript:;" data-original-title="开通会员">
立即开通
</a>
</div>
</div>
</li>
<li>
<div class="item">
<div class="top">
<div class="tag">优惠</div>
<span>年卡SVIP会员</span>
<p>已加入2人</p>
</div>
<div class="con">
<div class="price">
<span>98</span>
<em>余额</em>
<p>每天可下载100个VIP资源</p>
</div>
<div class="desc">
<p></p>
</div>
<a class="vip-buy vip-btn pay-vip" vip-level="2" data-toggle="tooltip" data-placement="top" href="javascript:;" data-original-title="开通会员">
立即开通
</a>
</div>
</div>
</li>
<li>
<div class="item">
<div class="top">
<div class="tag">优惠</div>
<span>永久SVIP会员</span>
<p>已加入5人</p>
</div>
<div class="con">
<div class="price">
<span>158</span>
<em>余额</em>
<p>每天可下载100个VIP资源</p>
</div>
<div class="desc">
<p></p>
</div>
<a class="vip-buy vip-btn pay-vip" vip-level="2" data-toggle="tooltip" data-placement="top" href="javascript:;" data-original-title="开通会员">
立即开通
</a>
</div>
</div>
</li>
</ul>
</div>
<div class="yuvip_serve_father">
<h3 class="yuvip_title" style="margin-top: 50px;">VIP会员特权服务<em></em></h3>
<div class="yuvip_serve">
<ul>
<li>
<div>
<img src="https://www.ludown.com/vips-pic/yuvip_serve1.jpg">
<p>全站免费 任意下载</p>
<em>全站照片、视频、隐藏资源、模板、动图、元素、办公文档、插画等均可任意下载</em>
</div>
</li>
<li>
<div>
<img src="https://www.ludown.com/vips-pic/yuvip_serve2.jpg">
<p>专属客服快速响应</p>
<em>企业VIP专属客服通道,随时随地为您解决遇到的各项问题</em>
</div>
</li>
<li>
<div>
<img src="https://www.ludown.com/vips-pic/yuvip_serve3.jpg">
<p>多人协作 云端共享</p>
<em>最高可15人同时团队协作云端共享,满足企业团队工作需求</em>
</div>
</li>
<li>
<div>
<img src="https://www.ludown.com/vips-pic/yuvip_serve4.jpg">
<p>会员尊享 高速下载</p>
<em>为SVIP提供高速下载资源渠道,资源畅享无忧</em>
</div>
</li>
<li>
<div>
<img src="https://www.ludown.com/vips-pic/yuvip_serve5.jpg">
<p>1对1 指导服务</p>
<em>SVIP会员遇到魔改难题,在一定范围内,给予免费远程帮助</em>
</div>
</li>
<li>
<div>
<img src="https://www.ludown.com/vips-pic/yuvip_serve6.jpg">
<p>会员服务 专属折扣</p>
<em>精品资源,享有专属最低折扣,畅享全网资源</em>
</div>
</li>
<li>
<div>
<img src="https://www.ludown.com/vips-pic/yuvip_serve7.jpg">
<p>优质资源 抢先体验</p>
<em>网站最新资源,抢先体验使用,无任何门槛</em>
</div>
</li>
<li>
<div>
<img src="https://www.ludown.com/vips-pic/yuvip_serve8.jpg">
<p>SVIP 永久会员</p>
<em>畅享全网所有资源,无下载门槛,可联系站长获取任意魔改资源</em>
</div>
</li>
</ul>
</div>
</div>
<div class="ceo_vip_ping">
<div class="deanw1180">
<div class="yuvip_title">会员点评<em></em></div>
<div class="clear"></div>
<ul>
<div class="portal_block_summary">
<li>
<div class="deanmbavar">
<img src="https://www.ludown.com/vips-pic/vipuser.jpg" width="80">
<span></span>
</div>
<div class="clear"></div>
<div class="deanmbusename">小喵喵<b>SVIP</b></div>
<div class="clear"></div>
<p><b>"</b>很喜欢绿软博客的美化,网站里的代码没有遇到一个失效的,对于我这种代码小白来说,真的是太友好啦!<b>"</b></p>
</li>
<li>
<div class="deanmbavar">
<img src="https://www.ludown.com/vips-pic/vipuser.jpg" width="80">
<span></span>
</div>
<div class="clear"></div>
<div class="deanmbusename">一叶扁舟<b>SVIP</b></div>
<div class="clear"></div>
<p><b>"</b>加入绿软博客会员两个多月了,下载了很多设计素材以及课程,帮助我很多。这个会员真的非常值<b>"</b></p>
</li>
<li>
<div class="deanmbavar">
<img src="https://www.ludown.com/vips-pic/vipuser.jpg" width="80">
<span></span>
</div>
<div class="clear"></div>
<div class="deanmbusename">时间过客<b>SVIP</b></div>
<div class="clear"></div>
<p><b>"</b>博主非常好,魔改教程也很详细,有好几次都免费帮我处理问题,我买了svip会员,有很多种类的资源,真的对我帮助很大。<b>"</b></p>
</li>
</div>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<?php
get_footer();
2、子比后台添加页面,选择zbill会员模板;
3、将部分资源改为你自己的,比如图片;