给大家分享一段网站底部美化代码，适合介绍、宣传栏等使用。
我们的优势
资源丰富，专业人员筛选上传更新
N
更新及时
专人上传，每天更新
T
资源最全
各类资源，全网最全
D
省时省力
资源合集，一键转存
Q
7x24h服务
专人客服，随时联系
代码如下：
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div class="vip-why">
<div class="container">
<h2><span>我们的优势</span></h2>
<p class="desc">资源丰富，专业人员筛选上传更新</p>
<div class="items clearfix">
<div class="item">
<span>N</i></span>
<div><h4>更新及时</h4>
<p>专人上传，每天更新</p></div>
</div>
<div class="item">
<span>T</span>
<div><h4>资源最全</h4>
<p>各类资源，全网最全</p></div>
</div>
<div class="item">
<span>D</span>
<div><h4>省时省力</h4>
<p>资源合集，一键转存</p></div>
</div>
<div class="item">
<span>Q</i></span>
<div><h4>7x24h服务</h4>
<p>专人客服，随时联系</p></div>
</div>
</div>
</div>
</div>
<style>
.vip-why h2 span:after {
content: " ";
width: 20px;
background: #ff5f33;
height: 3px;
position: absolute;
left: 0;
top: 45px;
margin-left: calc(50% - 10px);
border-radius: 1.5px;
}
.container{position:relative;margin:0 auto;max-width:auto}
.vip-why{/*background: #f9f9f9;*/padding:40px 0 60px;}
.vip-why h2{text-align: center;font-size:28px;margin-bottom: 10px;font-weight: normal;}
.vip-why .items .item{float: left;width: 25%;text-align: center;}
.vip-why .items .item div{text-align: left;}
.vip-why .items .item div, .vip-why .items .item span{display: inline-block;}
.vip-why .items .item span{background: #ff5f33;color: #fff;width:60px;height: 60px;display: inline-block;border-radius: 50%;margin-right: 12px;line-height: 60px;text-align: center;font-size: 28px;position: relative;top:-10px;}
.vip-why .items .item h4{font-weight: normal;font-size: 18px;margin: 5px auto;}
.vip-why .items .item p{text-align: inherit;color: #666}
.vip-why .desc {text-align: center;color: #8a92a9;font-size: 14px;margin-bottom: 40px;margin-top:30px;}
</style>
</body>
</html>© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
暂无评论...