纯代码为网站添加全屏banner图片和分类广告栏

前几天给自己网站首页添加了四格广告，今天又看到一个五栏分类带banner的，很是高大上，如图：

网站修改

看了一下代码都差不多，应该都是脱胎于同一个网站，下面分享一下：

一、修改网站css代码：

一般网站修改style，wordpress网站就添加到本主题的css文件中，比如本站是main.css。

/* focusbanner chukuangren.com ================================================================================ */
.focusbanner {
text-align: center;
margin-bottom: 20px;
height: 200px;
background-repeat: no-repeat;
background-position: 50% 50%;
}
.focusbanner .container {
padding-top: 88px;
padding-right: 60px;
text-align: right;
}
.focusbanner .btn {
margin-left: 10px;
}
/* btn chukuangren.com ======================================================================================== */
.btn {
display: inline-block;
padding: 6px 15px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 2px;
}
.btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.btn:hover, .btn:focus, .btn.focus {
color: #333;
text-decoration: none;
}
.btn:active, .btn.active {
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.btn.disabled, .btn[disabled], fieldset[disabled] .btn {
cursor: not-allowed;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
box-shadow: none;
opacity: .65;
}
a.btn.disabled, fieldset[disabled] a.btn {
pointer-events: none;
}
.btn-default {
color: #555;
background-color: #fff;
border-color: #d6d6d6;
}
.btn-default:hover, .btn-default:focus, .btn-default:active {
color: #333;
background-color: #e6e6e6;
border-color: #bbb;
}
.btn-primary {
color: #fff;
background-color: #00AAEE;
border-color: #00AAEE;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
color: #fff;
background-color: #00A1EC;
border-color: #00A1EC;
}
.btn-success {
color: #fff;
background-color: #50CD7C;
border-color: #50CD7C;
}
.btn-success:hover, .btn-success:focus, .btn-success:active {
color: #fff;
background-color: #3CC76D;
border-color: #3CC76D;
}
.btn-danger {
color: #fff;
background-color: #FF8966;
border-color: #FF8966;
}
.btn-danger:hover, .btn-danger:focus, .btn-danger:active {
color: #fff;
background-color: #FF6F44;
border-color: #FF6F44;
}
.btn-whrite {
color: #555;
background-color: #fff;
border-color: #fff;
}
.btn-whrite:hover, .btn-whrite:focus, .btn-whrite:active {
color: #333;
background-color: #fff;
border-color: #fff;
}
.btn-xs {
padding: 2px 6px;
font-size: 12px;
}
.btn-sm {
padding: 4px 12px;
}
.btn-lg {
font-size: 20px;
border-radius: 4px;
padding: 10px 25px;
}
.btn-block {
width: 100%;
}
/* ebox chukuangren.com ======================================================================================= */
.eboxx {
overflow: hidden;
font-size: 12px;
text-align: center;
background-color: #fff;
margin-bottom: 20px;
}
.eboxx h4 {
font-size: 14px;
color: #444;
margin: 10px 0;
}
.eboxx-i {
position: relative;
float: left;
width: 20%;
padding: 20px;
background-color: #fff;
color: #777;
}
.eboxx-01, .eboxx-02, .eboxx-03, .eboxx-04 {
border-right: 2px solid #eee;
}
.eboxx-i:hover {background-color: #F9F9F9;}
.eboxx-i p {height: 36px;overflow: hidden;color: #bbb;}
@media (max-width: 1024px) {
.eboxx .btn-default {display: none;}
.eboxx h4 {height: 20px;overflow: hidden;}
}
@media (max-width: 860px) {
.eboxx .eboxx-100 {display: none;}
.eboxx-i {width: 25%;}
.eboxx-04 {border-right: none;}
}
@media (max-width: 640px) {
.eboxx-i {width: 50%;}
.eboxx-01 {border-bottom: 2px solid #eee;}
.eboxx-02 {border-right: none;border-bottom: 2px solid #eee;}
}
@media (max-width: 480px) {
.eboxx-i {padding: 10px 15px 15px;}
.eboxx h4 {margin-bottom: 0;}
.eboxx-i p {margin: 5px 0}
}

二、修改网站首页代码：

1、第一行中的图片地址需要替换成自己本地图片，图片大小1920X200。

2、里面的网址和文字内容自己替换掉。

 <div class="focusbanner" style="background-image:url(http:/图片地址)">
 <div class="container"> <a href="javascript:;" class="signin-loader"><p class="btn btn-primary">登录</p></a> <a href="javascript:;" class="signup-loader"><p class="btn btn-whrite">我要注册</p></a> </div>
</div>
 
<div class="container">
 <ul class="eboxx">
 <li class="eboxx-i eboxx-01">
 <h4>糖果大全</h4>
 <p>免费领取空投糖果项目收集</p>
 <a class="btn btn-sm btn-primary" target="_blank" rel="nofollow" href="http://haotang.wang/candy">点击查看</a>
 <a class="btn btn-sm btn-default" target="_blank" rel="nofollow" href="http://haotang.wang">点击查看</a>
 </li>
 <li class="eboxx-i eboxx-02">
 <h4>imtoken钱包</h4>
 <p>免费的数/字/货/币钱包，领糖果必备</p>
 <a class="btn btn-sm btn-primary" target="_blank" rel="nofollow" href="https://token.im">官网</a>
 <a class="btn btn-sm btn-default" target="_blank" rel="nofollow" href="http://haotang.wang/510.html">查看说明</a>
 </li>
 <li class="eboxx-i eboxx-03">
 <h4>telegram</h4>
 <p>领糖果常用通讯软件，很多需要通过telegram验证</p>
 <a class="btn btn-sm btn-primary" target="_blank" rel="nofollow" href="http://telegram.org/">官网</a>
 <a class="btn btn-sm btn-default" target="_blank" rel="nofollow" href="http://haotang.wang/275.html">使用说明</a>
 </li>
 <li class="eboxx-i eboxx-04">
 <h4>免费领比特币</h4>
 <p>有币APP免费领取YCC，可兑换比特币</p>
 <a class="btn btn-sm btn-default" target="_blank" rel="nofollow" href="http://haotang.wang/36.html">点击查看</a>
 </li>
 <li class="eboxx-i eboxx-100">
 <h4>好糖网</h4>
 <p>专注于免费链空投糖果</p>
 <a class="btn btn-sm btn-danger" target="_blank" rel="nofollow" href="">联系我们</a>
 </li>
 </ul>
</div>