分享一个好看的四格广告代码，可作为首页顶部模块

经常看到一些网站有很漂亮的功能模块，有的是网站模板自带的（比如很多wordpress主题都有类似的功能），但是如果你的网站模板没有自带功能，也可以手动修改代码实现这种网站美化的前端效果，下面就分享一个好看的四格广告代码，可作为首页顶部模块。

前端效果：

DIV代码：

1、外观-小工具-自定义HTML添加如下代码：

<div class="home-first-screen">
<div class="parts row">
<div class="col-sm-6 col-md-8 part-first">
<div class="home-first-part home-menus">
<ul>
<li><a href="https://www.chukuangren.com" target="_blank"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-meirituijian"></use></svg><span>每日推荐</span></a></li>
<li><a href="https://www.chukuangren.com" target="_blank"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-jiaochengqu"></use></svg><span>教程分享</span></a></li>
<li><a href="https://www.chukuangren.com" target="_blank"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-huodonglipin"></use></svg><span>线报活动</span></a></li>
<li><a href="https://www.chukuangren.com" target="_blank"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-gongju"></use></svg><span>美化代码</span></a></li>
<li><a href="https://www.chukuangren.comx" target="_blank"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-huaji"></use></svg><span>cos</span></a></li>
<li><a href="https://www.chukuangren.com" target="_blank" rel="nofollow"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-zixun"></use></svg><span>游戏资讯</span></a></li>
</ul>
</div>
</div>
<div class="col-sm-6 col-md-8">
<div class="home-first-part home-subjects">
<h2 class="hf-title"><strong><a href="#" target="_blank">教程专区</a></strong>
<span>行业交流一起进步</span>
<a href="#" target="_blank" class="more">more</a></h2>
<div class="items">
<div class="row">
<div class="col-xs-6">
<a href="#" target="_blank"><span class="thumb" style="background-image:url(
https://image.******.com/abcdocker/2020/12/04/d1a8e83aa8ab3/d1a8e83aa8ab3.jpg)"><img src="
https://image.******.com/abcdocker/2020/12/04/d1a8e83aa8ab3/d1a8e83aa8ab3.jpg" alt="thumb"></span><strong class="title">LFTP中文文档</strong></a>
</div>
<div class="col-xs-6">
<a href="#" target="_blank"><span class="thumb" style="background-image:url(
https://image.******.com/wp-content/uploads/2019/09/logo-game-1.png)"><img src="
https://image.******.com/wp-content/uploads/2019/09/logo-game-1.png" alt="thumb"></span><strong class="title">免费内网穿透</strong></a>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-8">
<div class="home-first-part home-topics">
<h2 class="hf-title"><strong><a href="#" target="_blank">文档专区</a></strong>
<span>技术文档专区</span>
<a href="#" target="_blank" class="more">more</a></h2>
<div class="items">
<div class="row">
<div class="col-xs-6">
<a href="#" target="_blank"><span class="thumb" style="background-image:url(https://image.******.com/wp-content/uploads/2019/09/123.png)"><img src="https://i4t.com/wp-content/uploads/2019/09/123.png" alt="thumb"></span><strong class="title">Kubernetes文档</strong></a>
</div>
<div class="col-xs-6">
<a href="#" target="_blank"><span class="thumb" style="background-image:url(https://image.******.com/wp-content/uploads/2019/09/uiad.jpg)"><img src="https://i4t.com/wp-content/uploads/2019/09/uiad.jpg" alt="thumb"></span><strong class="title">运维面试宝典</strong></a>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-8">
<div class="home-first-part home-course">
<h2 class="hf-title"><strong><a href="#" target="_blank">快速通道</a></strong>
<span>便捷服务</span>
<a href="#" target="_blank" class="more">more</a></h2>
<div class="courses">
<div class="course-items">
<ul>
<li><a href="#" target="_blank" rel="nofollow"><strong>关于本站</strong><span>关于本站</span></a></li>
<li><a href="#" target="_blank" rel="nofollow"><strong>领域名人申请认证服务</strong><span>达人认证</span></a></li>
<li><a href="#" target="_blank" rel="nofollow"><strong>帮助别人也是一种快乐</strong><span>快速投稿</span></a></li>
<li><a href="#" target="_blank" rel="nofollow"><strong>需要我们改进的欢迎来信</strong><span>意见反馈</span></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>

CSS代码：

1、代码引用：

在网站根目录创建一个css文件(文件名:sige.css),文件名可自定义,注意文件名要一致,

<link rel="stylesheet" href="你的网站/sige.css" type="text/css" >

然后在header.php模板最上方添加引入代码

也可自定义HTML里添加css代码最上方写入标签<style></style>,将css代码放入标签内即可！

2、代码内容:

<style>a,abbr,acronym,address,applet,big,blockquote,body,caption,cite,code,dd,del,dfn,div,dl,dt,em,fieldset,figure,font,form,h1,h2,h3,h4,h5,h6,html,iframe,ins,kbd,label,legend,li,object,ol,p,pre,q,s,samp,small,span,strike,strong,sub,sup,table,tbody,td,tfoot,th,thead,tr,tt,ul,var {border: 0;font-family: inherit;font-size: 100%;font-style: inherit;font-weight: inherit;margin: 0;outline: 0;padding: 0;vertical-align: baseline;word-wrap:break-word;box-sizing: border-box;
}html {font-size: 100%;overflow-y: scroll;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);overflow-x: hidden;max-width: 100%;image-rendering: -webkit-optimize-contrast;
}
[v-cloak] {display: none!important;}
.b2-hidden-always{display: none
}
input{padding:5px;
}
input,textarea{color:#666;resize: none;
}body{margin:0;padding:0;-webkit-backface-visibility: hidden;overflow-x: hidden;color:#121212;font-feature-settings: "tnum";line-height: 1.4;font-family: font-regular,'Helvetica Neue',sans-serif; text-rendering: optimizeLegibility;-moz-font-feature-settings: "liga" on;font-feature-settings: "liga" on;-webkit-font-smoothing: subpixel-antialiased;
}
.post-list-meta-like, .post-list-meta-comment, .post-list-meta-views, .top-user-box-drop .top-user-info-box-count p b, .top-user-info-box .user-w-gold a, .credit-top-info-right span, .user-mission-info-right span, .user-mission-info-right, .w-a-count div span, .lv-icon.user-lv i, .user-w-tj div span, .bar-user-info-row .user-w-rw span, .user-money b, .user-credit b, .user-money-and-credit > div span, .user-sidebar-count li p, .widget-new-header .ps1, .shop-normal-item-price span, .shop-normal-tips, .b2-widget-post-order span, .custom-page-row.gold-row > div:first-child, .mission-page-user-right, .task-finish, .task-day-list li .task-box-r span b, .shop-single-price, .shop-single-data b, .content-footer-zan-cai span b, .circle-admin-info > div b, .vote-pk-left p, .vote-pk-right p, .topic-vote-radio-picked > div:first-child > span:last-child {font-family: 'DIN-Medium';
}
button.none{padding:0;background: none;border:0;color:inherit
}
select{-webkit-appearance: none;outline: none;-webkit-tap-highlight-color: rgba(0,0,0,0);font-family:  font-regular,'Helvetica Neue',sans-serif;padding:5px 10px;cursor: pointer;box-shadow: inset 0 0 9px rgba(204,204,204,.39);background: url(Assets/fontend/images/arrow.png) no-repeat 97% 9px;padding-right:20px
}
::-moz-placeholder { color: #ccc; }
::-webkit-input-placeholder { color:#ccc; }
:-ms-input-placeholder { color:#ccc; }
button:focus,input:focus,textarea:focus {outline: none;
}
input:focus,textarea:focus{color:initial
}
input:-webkit-autofill {-webkit-box-shadow: 0 0 0 30px #fff inset;box-shadow: 0 0 0 30px #fff inset;
}
button,select {text-transform: none
}
button,html input[type=button],input[type=reset],input[type=submit] {-webkit-appearance: button;cursor: pointer
}button::-moz-focus-inner,input::-moz-focus-inner {border: 0;padding: 0
}html input[disabled] {cursor: default;border: 1px solid rgba(255, 255, 255, 0);
}button.text,.button.text{background: none;border:0
}
button[disabled],button[disabled].empty,.button.disabled.empty{opacity: .7;cursor: default
}
button.empty.b2-loading:after,.button.empty.b2-loading:after{background-image: url(Assets/fontend/images/loading-empty.svg);
}
button.b2-loading,.button.b2-loading,button.empty.b2-loading,.button.empty.b2-loading{color: rgba(255, 255, 255, 0);
}
.post-list-cats a span.button.b2-loading{color: rgba(255, 255, 255, 0)!important;
}
button.b2-loading:after,.button.b2-loading:after{content: '';background-image: url(Assets/fontend/images/loading.svg);background-repeat: no-repeat;background-position: center;background-size: 10px;position: absolute;left: -1px;top: -1px;bottom:-1px;right:-1px;z-index: 2;cursor: default;
}button:active,.button:active{transform: translateY(1px);
}
button[disabled]:active,.button.disabled:active{transform: none
}
button:hover,.button:hover{opacity: .9;transition: opacity .2s
}
button[disabled],.button.disabled{opacity: .7;cursor: default
}
button.empty,.button.empty{background: rgba(255, 255, 255, 0);
}
article,aside,details,figcaption,figure,footer,header,main,nav,section {display: block
}ol,ul {list-style: none
}
table {border-collapse: collapse;border-spacing: 0
}caption,td,th {font-weight: 400;text-align: left
}small {font-size: 80%
}a:active,a:hover {outline: 0;
}pre {padding: 17px;font: 14px/22px courier new;position: relative;background-color: #f8f8f8;box-sizing: border-box;
}code,pre {white-space: pre-wrap;word-wrap: break-word;border-radius: 3px
}code {padding: 2px;background-color: #eee;word-break: break-word;letter-spacing: 0;font: 14px/26px courier new
}pre code {padding: 0;background-color: #fff;border-radius: 0;
}img {max-width: 100%;height: auto;object-fit: cover;/* image-rendering: -webkit-optimize-contrast; */border:0
}
button::-moz-focus-inner {border: 0;padding: 0
}a {color:inherit;text-decoration: none;vertical-align: top;
}
input[disabled] {cursor: default;color: rgba(0,0,0,.8);background-color: rgba(0,0,0,.05)
}
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance: none !important;}input[type="number"]{-moz-appearance:textfield;}
.wp-caption {margin-bottom: 1.5em;max-width: 100%;
}.wp-caption img[class*="wp-image-"] {display: block;margin-left: auto;margin-right: auto;
}.wp-caption .wp-caption-text {margin: 0.8075em 0;
}.wp-caption-text {text-align: center;
}
embed,
iframe,
object {max-width: 100%;
}.alignleft {display: inline;float: left;margin-right: 1.5em;
}.alignright {display: inline;float: right;margin-left: 1.5em;
}.aligncenter {clear: both;display: block;margin-left: auto;margin-right: auto;
}dfn, cite, em, i {font-style: italic;
}address {margin: 0 0 1.5em;
}pre {background: #eee;font-family: "Courier 10 Pitch", Courier, monospace;font-size: 15px;font-size: 0.9375rem;line-height: 1.6;margin-bottom: 1.6em;max-width: 100%;overflow: auto;padding: 1.6em;
}
abbr, acronym {border-bottom: 1px dotted #666;cursor: help;
}mark, ins {background: #fff9c0;text-decoration: none;
}.dr{-webkit-box-align: center;-ms-flex-align: center;align-items: center;display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-flex: 1;-ms-flex: 1 0 auto;flex: 1 0 auto;-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end;
}
.dl{-webkit-box-align: center;-ms-flex-align: center;align-items: center;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-flex: 1;-ms-flex: 1 0 auto;flex: 1 0 auto;
}.jt::before{  /*è¿™é‡Œçš„ä¼ªå…ƒç´ ç”¨å•å†’å·å’ŒåŒå†’å·éƒ½ä¸€æ ·*/content: '';display: block;position: absolute;top: -8px;left: 35px;border-left: 8px solid transparent;border-right: 8px solid transparent;border-bottom: 8px solid rgb(181, 181, 181);z-index: 2;
}/*第二个三角形*/
.jt::after{content: '';display: block;position: absolute;top: -6.6px; /*å‘下å移é‡æ˜¯çŸ©å½¢è¾¹æ¡†å®½åº¦çš„1.4ï¼ˆæ ¹å·2）å€ï¼Œå³8.4，top值为-26-（-8.4）*/left: 35px;border-left: 8px solid transparent;border-right: 8px solid transparent;border-bottom: 8px solid #fff;z-index: 2;
}
.toasted-container{z-index: 99999999!important;
}
.toasted.primary{font-size: 13px!important;font-weight: 400!important
}
.toasted-container.top-center{-webkit-transform: translateX(-50%);transform: translateX(-47%)!important;
}
.toasted.primary.error {background: rgb(255, 255, 255)!important;color: rgb(253, 0, 0)!important;
}
.link-overlay{display: block;position: absolute;top: 0;right: 0;bottom: 0;left: 0;
}
.link-block{position: absolute;width:100%;height:100%;z-index:2;top:0;left:0
}
/*æ’­æ”¾å™¨æ ·å¼å…¼å®¹*/
.dplayer-icons button{background: inherit;border:inherit
}
.dplayer-logo{max-width: 100px;width: 100px;opacity: .3;left: auto;right: 20px;
}
/*视频éšè—å³é”®èœå•*/
.dplayer-menu-show {display: none !important;
}
.dplayer-mask-show{display: none!important
}
.dplayer-video-wrap{height: 0!important;padding-top: 56.39925%;
}
.dplayer.dplayer-hide-controller{height:100%
}
.dplayer-video-wrap video{position: absolute;top: 0;object-fit: cover
}
.b2-dot{padding:0 5px
}
.comment-meta-item{position: absolute;right:16px;color:#FF3355
}
.mobile-show{display: none
}
.mobile-hidden{display: block
}
.pc-hidden{display: none;
}
.pc-show{display: block;
}
.red{color:#FF3355
}
.green{color:green
}
.box,.side-fixed{background-color: #fff;box-shadow: 0px 0px 2px rgb(98 124 153 / 10%);position: relative;
}
.button.empty.box{background-color: #fff!important;
}img.avatar{background-color: #eee;width:100%;height:100%
}/*è¡¨æ ¼æ ·å¼*/
table {border-collapse: collapse;border-spacing: 0;width: 100%;
}
table thead{font-weight: 700;border-top: 1px solid #F5F6F7
}
table td {padding: 12px 20px;border: 1px solid #F5F6F7;font-size: 13px;text-align: left;word-wrap: break-word;word-break: break-all;
}
table tbody tr:nth-child(odd) {background: #F7F9FA;
}
/*** 12.1 - Captions*/.wp-caption {margin-bottom: 1.75em;max-width: 100%;
}.wp-caption img[class*="wp-image-"] {display: block;margin: 0;
}.wp-caption .wp-caption-text {color: #686868;font-size: 13px;font-size: 0.8125rem;font-style: italic;line-height: 1.6153846154;padding-top: 0.5384615385em;
}
.pianli{position:absolute;top:-999px
}
@keyframes waveMove {from { background-position: 0 100%; }to   { background-position: -20px 100%; }
}
.waves {position: relative;width: 100%;height: 60vh;margin-bottom: -7px;/*Fix for safari gap*/min-height: 60px;max-height: 60px;
}
.parallax>use {animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
}
.parallax>use:nth-child(1) {animation-delay: -2s;animation-duration: 7s;
}
.parallax>use:nth-child(2) {animation-delay: -3s;animation-duration: 10s;
}
.parallax>use:nth-child(3) {animation-delay: -4s;animation-duration: 13s;
}
.parallax>use:nth-child(4) {animation-delay: -5s;animation-duration: 20s;
}
.b2-footer-warning > div{color:#FF3355;text-align: center;background: #fff;padding: 10px;box-sizing: border-box;
}
.b2-table{white-space: nowrap;overflow-x: scroll;overflow-y: hidden;margin-right: 0;flex-flow: nowrap;
}
@keyframes move-forever {0% {transform: translate3d(-90px, 0, 0);}100% {transform: translate3d(85px, 0, 0);}
}
/*2.5.4 æ–°å¢žé€šç”¨æ ·å¼*/
.fs12{font-size: 12px;
}
.b2-b-t{border-top: 1px solid rgb(243, 243, 243);
}
@-webkit-keyframes autofill {0%,100% {color: #666;background: transparent;}
}input:-webkit-autofill {-webkit-animation-delay: 1s; /* Safari support - any positive time runs instantly */-webkit-animation-name: autofill;-webkit-animation-fill-mode: both;
}/* *  *  */
.col-md-8,.col-sm-6,.col-xs-6 {float: left;padding: 0 8px;width: 100%;box-sizing: border-box
}
.container1:after,.container1:before,.row:after,.row:before {content: '';clear: both;display: block
}
.col-xs-6 {width: 50%
}
@media (min-width:768px) {.col-sm-6 {width: 50%}}/*2*/@media (min-width:1024px) {.col-md-3 {width: 23%}.col-md-9 {width: 75%}}.home-first-screen .dubao {position: relative;margin-bottom: 5px}@media (min-width:768px) {.home-first-screen .dubao {margin-bottom: 10px}}.home-first-screen .row {margin-left: -8px;margin-right: -8px}.home-first-screen .col-md-3,.home-first-screen .col-md-6,.home-first-screen .col-xs-6 {padding-left: 5px;padding-right: 5px}.home-first-screen .thumb {display: block;width: 100%;padding-top: 62.22222222%;border-radius: 3px;overflow: hidden;position: relative;background-position: center top;background-repeat: no-repeat;background-size: cover}.home-first-screen .thumb:after {content: '';display: block;position: absolute;left: 0;top: 0;width: 100%;padding-top: 100%;background: rgba(0,0,0,.2);opacity: 0;visibility: hidden;transition: all .2s}.home-first-screen .thumb.bigOne {padding-top: 56.72131148%}.home-first-screen .thumb img {display: none}.home-first-screen .items .thumb {padding-top: 65%}.home-first-screen .images .col-md-6,.home-first-screen .images .col-xs-6 {margin-bottom: 10px}.home-first-screen .images .item2 {margin-bottom: 0}.home-first-screen .images a {display: block;position: relative}.home-first-screen .images a strong {display: block;position: absolute;left: 0;right: 0;bottom: 0;padding: .4em .8em .6em;font-size: 12px;color: #dadada;font-weight: 700;letter-spacing: .5px;line-height: 1.3;background-image: -webkit-linear-gradient(top,rgba(0,0,0,.2) 0,rgba(0,0,0,.6) 100%);background-image: -o-linear-gradient(top,rgba(0,0,0,.2) 0,rgba(0,0,0,.6) 100%);background-image: linear-gradient(to bottom,rgba(0,0,0,.2) 0,rgba(0,0,0,.6) 100%);background-repeat: repeat-x;filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#33000000', endColorstr='#99000000', GradientType=0);box-shadow: 0 -7px 15px rgba(0,0,0,.2);border-bottom-left-radius: 3px;border-bottom-right-radius: 3px;}@media (min-width:768px) {.home-first-screen .images a strong {font-size: 14px;line-height: 1.4;font-weight: 400}}.vitara_slide_in .vitara_slide ul li h3 .label {border-radius: 3px;padding: 2px 2px 2px 4px;font-size: 12px;font-weight: 700}.vitara_slide_in .vitara_slide ul li h3 .label {background: #fff;color: #525252;margin-right: 10px;text-shadow: 0 1px 1px #eee;box-shadow: 0 1px 1px #666;-moz-box-shadow: 0 1px 1px #666;-webkit-box-shadow: 0 1px 1px #666;padding: 2px 2px 2px 4px}.vitara_slide_in .vitara_slide ul li h3 {position: absolute;bottom: 0;left: 0;z-index: 10;width: 100%;padding: 20px;margin: 0;font-size: 16px;color: #fff;text-align: left;font-weight: 700;text-shadow: 0 1px 3px #525252;box-sizing: border-box;background: -webkit-linear-gradient(top,rgba(255,255,255,0),rgba(0,0,0,.3));background: -moz-linear-gradient(top,rgba(255,255,255,0),rgba(0,0,0,.3));background: -o-linear-gradient(top,rgba(255,255,255,0),rgba(0,0,0,.3));background: linear-gradient(top,rgba(255,255,255,0),rgba(0,0,0,.3))}.home-first-screen a:hover .thumb:after {visibility: visible;opacity: 1}.home-first-screen .dubao {background: #fff;padding: 12px 10px 24px;height: 14px;border-radius: 3px;box-shadow: 0 0 10px rgba(0,0,0,.1);overflow: hidden}.home-first-screen .dubao h3 {float: left;font-size: 14px;color: #4bbbfa;font-weight: 400;line-height: 14px;padding: 0 10px 0 0;border-right: 1px solid #ddd}.home-first-screen .dubao h3 a {color: #4bbbfa}.home-first-screen .dubao h3 a:hover {color: #FFF}/*3*/.home-first-screen .dubao .cont {height: 14px;overflow: hidden;position: relative}.home-first-screen .dubao .cont a {display: block;line-height: 14px;color: #606060;font-size: 12px;transition: all .5s;position: absolute;left: 0;top: 0}.home-first-screen .dubao .cont a:hover {color: #000}.home-first-screen .dubao .cont a span {display: inline-block;padding: 0 15px;white-space: nowrap}.home-first-screen .parts .hf-title {font-size: 12px;padding: 10px 0 20px;margin-bottom: 0;height: 16px;overflow: hidden;position: relative}.home-first-screen .parts .hf-title strong {color: #525252;margin-right: 5px;font-size: 16px;margin-left: 10px}.home-first-screen .parts .hf-title strong:before {content: '';display: inline-block;width: 3px;height: 16px;vertical-align: middle;background: #54c4fb;margin-right: 6px;margin-top: -2px}.home-first-screen .parts .hf-title strong a {font-weight: 400;color: #54c4fb}.home-first-screen .parts .hf-title strong a:hover {color: #54c4fb}.home-first-screen .parts .hf-title span {font-weight: 400;color: #d5d5d5}.home-first-screen .parts .hf-title .more {display: block;position: absolute;right: 10px;top: 10px;font-size: 10px;text-transform: uppercase;padding: 0 5px 0;border-radius: 3px;border: 1px solid #b1afaf;color: #b1afaf}.home-first-screen .parts .hf-title .more:hover {-webkit-background-size: 200% 100%;background-image: linear-gradient(to right,#1d82ff 0,#70e6f9 50%,#86d6ff 100%);color: #fff;border-color: #258bfe}.home-first-screen .parts .home-first-part {background: #fff;margin-bottom: 10px;border-radius: 7px;box-shadow: 0 0 10px rgba(0,0,0,.1);}.home-first-screen .parts .items {padding: 13px 10px 22px}.home-first-screen .parts .items .col-md-6 {margin-bottom: 7px}.home-first-screen .parts .items a {display: block}.home-first-screen .parts .items .thumb {margin-bottom: 7px}.home-first-screen .parts .items strong {color: #606060}.home-first-screen .parts .items strong.title {display: block;line-height: 1.2em;font-size:0.8em;height: 1.4em;overflow: hidden;text-align: center;font-weight: 400}.home-first-screen .parts .items a:hover strong {color: #4bbbfa}.home-first-screen .fanye {position: absolute;right: 15px;top: 14px;background: #fff}.home-first-screen .fanye .btn {display: inline-block;border: 1px solid #efefef;vertical-align: middle;cursor: pointer;padding-top: 3px;margin-right: -1px}.home-first-screen .fanye .btn i {vertical-align: text-bottom}.home-first-screen .fanye .btn:hover {border-color: #4bbbfa;background: #4bbbfa;color: #fff}.home-first-screen .fanye .btn.no,.home-first-screen .fanye .btn.no:hover {cursor: default;background: #fff;color: #eee;border-color: #efefef}.home-first-screen .fanye .pages {font-size: 14px;display: inline-block;vertical-align: middle;margin-right: 5px;margin-top: 4px}.home-first-screen .fanye .pages em {color: #525252;font-style: normal}.home-first-screen .home-course .hf-title {padding-bottom: 30px;border-bottom: 1px solid #ddd;position: relative}.home-first-screen .home-course .courses {margin: 7px 0 10px;position: relative;height: 106px;overflow: hidden}.home-first-screen .home-course .course-items {overflow: hidden;position: absolute;left: 0;right: 0;top: 0}.home-first-screen .home-course ul {margin: 0 10px 0 12px;list-style: none}.home-first-screen .home-course li {list-style-type: disc;list-style-position: inside;line-height: 20px;height: 20px;overflow: hidden;position: relative;color: #606060;font-size: 14px;margin: 6px 0}.home-first-screen .home-course li a {color: #606060}.home-first-screen .home-course li a:hover {color: #4bbbfa}/*4*/.home-first-screen .home-course li strong {font-weight: 400}.home-first-screen .home-course li span {position: absolute;right: 0;top: 0;font-size: 12px;display: inline-block;padding: 0 10px;line-height: 20px;-webkit-background-size: 200% 100%;background-image: linear-gradient(to right,#1d82ff 0,#70e6f9 50%,#86d6ff 100%);border-radius: 3px;color: #ffffff;}.home-first-screen .home-menus ul {margin: 0;list-style: none;overflow: hidden}.home-first-screen .home-menus li {float: left;width: 33.33333333%;text-align: center}.home-first-screen .home-menus a {border-radius: 7px;display: block;text-align: center;font-size: 14px;color: #606060;position: relative;line-height: 1.5;padding: 10px 5px;box-sizing: border-box;height: 84px;transition: all .1s}.home-first-screen .home-menus a:hover {-webkit-background-size: 200% 100%;background-image: linear-gradient(to right,#1d82ff 0,#70e6f9 50%,#86d6ff 100%);color: #fff}.home-first-screen .home-menus a:hover i {color: #fff}.home-first-screen .home-menus a:hover:after,.home-first-screen .home-menus a:hover:before {display: none;visibility: hidden}.home-first-screen .home-menus a svg {font-size: 22px;line-height: 1.9}/*@media (min-width:768px) {*//*  .home-first-screen .home-menus a svg {*//*    font-size: 28px;*//*    line-height: 1.3*//*  }*//*}*/.home-first-screen .home-menus a span {display: block;line-height: 2}.home-first-screen .home-menus li:nth-child(1) a:before,.home-first-screen .home-menus li:nth-child(2) a:before,.home-first-screen .home-menus li:nth-child(4) a:before,.home-first-screen .home-menus li:nth-child(5) a:before {content: '';display: block;position: absolute;right: 0;bottom: 0;height: 85%;border-right: 1px solid #ddd}.home-first-screen .home-menus li:nth-child(4) a:before,.home-first-screen .home-menus li:nth-child(5) a:before {bottom: auto;top: 0}.home-first-screen .home-menus li:nth-child(1) a:after,.home-first-screen .home-menus li:nth-child(2) a:after,.home-first-screen .home-menus li:nth-child(3) a:after {content: '';display: block;position: absolute;right: 0;bottom: 0;width: 85%;border-bottom: 1px solid #ddd}.home-first-screen .home-menus li:nth-child(2) a:after {width: 100%}.home-first-screen .home-menus li:nth-child(3) a:after {right: auto;left: 0}@media (min-width:768px) {.home-first-screen .parts .home-first-part {height: 168px}.home-first-screen .parts .items a {height: 130px;overflow: hidden}.home-first-screen .parts .items a strong {font-size: 14px;padding-top: 3px}.home-first-screen .dubao {padding: 11px 20px 24px 28px}.home-first-screen .dubao h3 {padding: 0 24px 0 0;margin-right: 10px}.home-first-screen .dubao .cont span {border-right: 1px solid #ddd}.home-first-screen .dubao .cont span:last-child {border-right: none}}@media (min-width:992px) {.home-first-screen .parts .col-md-8 {width: 23.72881356%}.home-first-screen .parts .col-md-8.part-first {width: 28.81355932%}.home-first-screen .images .item1 {width: 52.54237288%}.home-first-screen .images .item2 {width: 47.45762711%}}.icon {width: 1.5em;height: 1.15em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}</style>

3、懒人代码(直接放入下方代码即可直接使用)

<div class="home-first-screen">
<div class="parts row">
<div class="col-sm-6 col-md-8 part-first">
<div class="home-first-part home-menus">
<ul>
<li><a href="https://www.chukuangren.com" target="_blank"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-meirituijian"></use></svg><span>每日推荐</span></a></li>
<li><a href="https://www.chukuangren.com" target="_blank"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-jiaochengqu"></use></svg><span>教程分享</span></a></li>
<li><a href="https://www.chukuangren.com" target="_blank"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-huodonglipin"></use></svg><span>线报活动</span></a></li>
<li><a href="https://www.chukuangren.com" target="_blank"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-gongju"></use></svg><span>美化代码</span></a></li>
<li><a href="https://www.chukuangren.com" target="_blank"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-huaji"></use></svg><span>cos</span></a></li>
<li><a href="https://www.chukuangren.com" target="_blank" rel="nofollow"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-zixun"></use></svg><span>游戏资讯</span></a></li>
</ul>
</div>
</div>
<div class="col-sm-6 col-md-8">
<div class="home-first-part home-subjects">
<h2 class="hf-title"><strong><a href="#" target="_blank">教程专区</a></strong>
<span>行业交流一起进步</span>
<a href="#" target="_blank" class="more">more</a></h2>
<div class="items">
<div class="row">
<div class="col-xs-6">
<a href="#" target="_blank"><span class="thumb" style="background-image:url(
https://*****.com/abcdocker/2020/12/04/d1a8e83aa8ab3/d1a8e83aa8ab3.jpg)"><img src="
https://*****.com/abcdocker/2020/12/04/d1a8e83aa8ab3/d1a8e83aa8ab3.jpg" alt="thumb"></span><strong class="title">LFTP中文文档</strong></a>
</div>
<div class="col-xs-6">
<a href="#" target="_blank"><span class="thumb" style="background-image:url(
https://*****.com/wp-content/uploads/2019/09/logo-game-1.png)"><img src="
https://*****.com/wp-content/uploads/2019/09/logo-game-1.png" alt="thumb"></span><strong class="title">免费内网穿透</strong></a>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-8">
<div class="home-first-part home-topics">
<h2 class="hf-title"><strong><a href="#" target="_blank">文档专区</a></strong>
<span>技术文档专区</span>
<a href="#" target="_blank" class="more">more</a></h2>
<div class="items">
<div class="row">
<div class="col-xs-6">
<a href="#" target="_blank"><span class="thumb" style="background-image:url(https://i4t.com/wp-content/uploads/2019/09/123.png)"><img src="https://*****.com/wp-content/uploads/2019/09/123.png" alt="thumb"></span><strong class="title">Kubernetes文档</strong></a>
</div>
<div class="col-xs-6">
<a href="#" target="_blank"><span class="thumb" style="background-image:url(https://i4t.com/wp-content/uploads/2019/09/uiad.jpg)"><img src="https://*****.com/wp-content/uploads/2019/09/uiad.jpg" alt="thumb"></span><strong class="title">运维面试宝典</strong></a>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-8">
<div class="home-first-part home-course">
<h2 class="hf-title"><strong><a href="#" target="_blank">快速通道</a></strong>
<span>便捷服务</span>
<a href="#" target="_blank" class="more">more</a></h2>
<div class="courses">
<div class="course-items">
<ul>
<li><a href="#" target="_blank" rel="nofollow"><strong>关于本站</strong><span>关于本站</span></a></li>
<li><a href="#" target="_blank" rel="nofollow"><strong>领域名人申请认证服务</strong><span>达人认证</span></a></li>
<li><a href="#" target="_blank" rel="nofollow"><strong>帮助别人也是一种快乐</strong><span>快速投稿</span></a></li>
<li><a href="#" target="_blank" rel="nofollow"><strong>需要我们改进的欢迎来信</strong><span>意见反馈</span></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div><style>
a,abbr,acronym,address,applet,big,blockquote,body,caption,cite,code,dd,del,dfn,div,dl,dt,em,fieldset,figure,font,form,h1,h2,h3,h4,h5,h6,html,iframe,ins,kbd,label,legend,li,object,ol,p,pre,q,s,samp,small,span,strike,strong,sub,sup,table,tbody,td,tfoot,th,thead,tr,tt,ul,var {border: 0;font-family: inherit;font-size: 100%;font-style: inherit;font-weight: inherit;margin: 0;outline: 0;padding: 0;vertical-align: baseline;word-wrap:break-word;box-sizing: border-box;
}html {font-size: 100%;overflow-y: scroll;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);overflow-x: hidden;max-width: 100%;image-rendering: -webkit-optimize-contrast;
}
[v-cloak] {display: none!important;}
.b2-hidden-always{display: none
}
input{padding:5px;
}
input,textarea{color:#666;resize: none;
}body{margin:0;padding:0;-webkit-backface-visibility: hidden;overflow-x: hidden;color:#121212;font-feature-settings: "tnum";line-height: 1.4;font-family: font-regular,'Helvetica Neue',sans-serif; text-rendering: optimizeLegibility;-moz-font-feature-settings: "liga" on;font-feature-settings: "liga" on;-webkit-font-smoothing: subpixel-antialiased;
}
.post-list-meta-like, .post-list-meta-comment, .post-list-meta-views, .top-user-box-drop .top-user-info-box-count p b, .top-user-info-box .user-w-gold a, .credit-top-info-right span, .user-mission-info-right span, .user-mission-info-right, .w-a-count div span, .lv-icon.user-lv i, .user-w-tj div span, .bar-user-info-row .user-w-rw span, .user-money b, .user-credit b, .user-money-and-credit > div span, .user-sidebar-count li p, .widget-new-header .ps1, .shop-normal-item-price span, .shop-normal-tips, .b2-widget-post-order span, .custom-page-row.gold-row > div:first-child, .mission-page-user-right, .task-finish, .task-day-list li .task-box-r span b, .shop-single-price, .shop-single-data b, .content-footer-zan-cai span b, .circle-admin-info > div b, .vote-pk-left p, .vote-pk-right p, .topic-vote-radio-picked > div:first-child > span:last-child {font-family: 'DIN-Medium';
}
button.none{padding:0;background: none;border:0;color:inherit
}
select{-webkit-appearance: none;outline: none;-webkit-tap-highlight-color: rgba(0,0,0,0);font-family:  font-regular,'Helvetica Neue',sans-serif;padding:5px 10px;cursor: pointer;box-shadow: inset 0 0 9px rgba(204,204,204,.39);background: url(Assets/fontend/images/arrow.png) no-repeat 97% 9px;padding-right:20px
}
::-moz-placeholder { color: #ccc; }
::-webkit-input-placeholder { color:#ccc; }
:-ms-input-placeholder { color:#ccc; }
button:focus,input:focus,textarea:focus {outline: none;
}
input:focus,textarea:focus{color:initial
}
input:-webkit-autofill {-webkit-box-shadow: 0 0 0 30px #fff inset;box-shadow: 0 0 0 30px #fff inset;
}
button,select {text-transform: none
}
button,html input[type=button],input[type=reset],input[type=submit] {-webkit-appearance: button;cursor: pointer
}button::-moz-focus-inner,input::-moz-focus-inner {border: 0;padding: 0
}html input[disabled] {cursor: default;border: 1px solid rgba(255, 255, 255, 0);
}button.text,.button.text{background: none;border:0
}
button[disabled],button[disabled].empty,.button.disabled.empty{opacity: .7;cursor: default
}
button.empty.b2-loading:after,.button.empty.b2-loading:after{background-image: url(Assets/fontend/images/loading-empty.svg);
}
button.b2-loading,.button.b2-loading,button.empty.b2-loading,.button.empty.b2-loading{color: rgba(255, 255, 255, 0);
}
.post-list-cats a span.button.b2-loading{color: rgba(255, 255, 255, 0)!important;
}
button.b2-loading:after,.button.b2-loading:after{content: '';background-image: url(Assets/fontend/images/loading.svg);background-repeat: no-repeat;background-position: center;background-size: 10px;position: absolute;left: -1px;top: -1px;bottom:-1px;right:-1px;z-index: 2;cursor: default;
}button:active,.button:active{transform: translateY(1px);
}
button[disabled]:active,.button.disabled:active{transform: none
}
button:hover,.button:hover{opacity: .9;transition: opacity .2s
}
button[disabled],.button.disabled{opacity: .7;cursor: default
}
button.empty,.button.empty{background: rgba(255, 255, 255, 0);
}
article,aside,details,figcaption,figure,footer,header,main,nav,section {display: block
}ol,ul {list-style: none
}
table {border-collapse: collapse;border-spacing: 0
}caption,td,th {font-weight: 400;text-align: left
}small {font-size: 80%
}a:active,a:hover {outline: 0;
}pre {padding: 17px;font: 14px/22px courier new;position: relative;background-color: #f8f8f8;box-sizing: border-box;
}code,pre {white-space: pre-wrap;word-wrap: break-word;border-radius: 3px
}code {padding: 2px;background-color: #eee;word-break: break-word;letter-spacing: 0;font: 14px/26px courier new
}pre code {padding: 0;background-color: #fff;border-radius: 0;
}img {max-width: 100%;height: auto;object-fit: cover;/* image-rendering: -webkit-optimize-contrast; */border:0
}
button::-moz-focus-inner {border: 0;padding: 0
}a {color:inherit;text-decoration: none;vertical-align: top;
}
input[disabled] {cursor: default;color: rgba(0,0,0,.8);background-color: rgba(0,0,0,.05)
}
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance: none !important;}input[type="number"]{-moz-appearance:textfield;}
.wp-caption {margin-bottom: 1.5em;max-width: 100%;
}.wp-caption img[class*="wp-image-"] {display: block;margin-left: auto;margin-right: auto;
}.wp-caption .wp-caption-text {margin: 0.8075em 0;
}.wp-caption-text {text-align: center;
}
embed,
iframe,
object {max-width: 100%;
}.alignleft {display: inline;float: left;margin-right: 1.5em;
}.alignright {display: inline;float: right;margin-left: 1.5em;
}.aligncenter {clear: both;display: block;margin-left: auto;margin-right: auto;
}dfn, cite, em, i {font-style: italic;
}address {margin: 0 0 1.5em;
}pre {background: #eee;font-family: "Courier 10 Pitch", Courier, monospace;font-size: 15px;font-size: 0.9375rem;line-height: 1.6;margin-bottom: 1.6em;max-width: 100%;overflow: auto;padding: 1.6em;
}
abbr, acronym {border-bottom: 1px dotted #666;cursor: help;
}mark, ins {background: #fff9c0;text-decoration: none;
}.dr{-webkit-box-align: center;-ms-flex-align: center;align-items: center;display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-flex: 1;-ms-flex: 1 0 auto;flex: 1 0 auto;-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end;
}
.dl{-webkit-box-align: center;-ms-flex-align: center;align-items: center;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-flex: 1;-ms-flex: 1 0 auto;flex: 1 0 auto;
}.jt::before{  /*è¿™é‡Œçš„ä¼ªå…ƒç´ ç”¨å•å†’å·å’ŒåŒå†’å·éƒ½ä¸€æ ·*/content: '';display: block;position: absolute;top: -8px;left: 35px;border-left: 8px solid transparent;border-right: 8px solid transparent;border-bottom: 8px solid rgb(181, 181, 181);z-index: 2;
}/*第二个三角形*/
.jt::after{content: '';display: block;position: absolute;top: -6.6px; /*å‘下å移é‡æ˜¯çŸ©å½¢è¾¹æ¡†å®½åº¦çš„1.4ï¼ˆæ ¹å·2）å€ï¼Œå³8.4，top值为-26-（-8.4）*/left: 35px;border-left: 8px solid transparent;border-right: 8px solid transparent;border-bottom: 8px solid #fff;z-index: 2;
}
.toasted-container{z-index: 99999999!important;
}
.toasted.primary{font-size: 13px!important;font-weight: 400!important
}
.toasted-container.top-center{-webkit-transform: translateX(-50%);transform: translateX(-47%)!important;
}
.toasted.primary.error {background: rgb(255, 255, 255)!important;color: rgb(253, 0, 0)!important;
}
.link-overlay{display: block;position: absolute;top: 0;right: 0;bottom: 0;left: 0;
}
.link-block{position: absolute;width:100%;height:100%;z-index:2;top:0;left:0
}
/*æ’­æ”¾å™¨æ ·å¼å…¼å®¹*/
.dplayer-icons button{background: inherit;border:inherit
}
.dplayer-logo{max-width: 100px;width: 100px;opacity: .3;left: auto;right: 20px;
}
/*视频éšè—å³é”®èœå•*/
.dplayer-menu-show {display: none !important;
}
.dplayer-mask-show{display: none!important
}
.dplayer-video-wrap{height: 0!important;padding-top: 56.39925%;
}
.dplayer.dplayer-hide-controller{height:100%
}
.dplayer-video-wrap video{position: absolute;top: 0;object-fit: cover
}
.b2-dot{padding:0 5px
}
.comment-meta-item{position: absolute;right:16px;color:#FF3355
}
.mobile-show{display: none
}
.mobile-hidden{display: block
}
.pc-hidden{display: none;
}
.pc-show{display: block;
}
.red{color:#FF3355
}
.green{color:green
}
.box,.side-fixed{background-color: #fff;box-shadow: 0px 0px 2px rgb(98 124 153 / 10%);position: relative;
}
.button.empty.box{background-color: #fff!important;
}img.avatar{background-color: #eee;width:100%;height:100%
}/*è¡¨æ ¼æ ·å¼*/
table {border-collapse: collapse;border-spacing: 0;width: 100%;
}
table thead{font-weight: 700;border-top: 1px solid #F5F6F7
}
table td {padding: 12px 20px;border: 1px solid #F5F6F7;font-size: 13px;text-align: left;word-wrap: break-word;word-break: break-all;
}
table tbody tr:nth-child(odd) {background: #F7F9FA;
}
/*** 12.1 - Captions*/.wp-caption {margin-bottom: 1.75em;max-width: 100%;
}.wp-caption img[class*="wp-image-"] {display: block;margin: 0;
}.wp-caption .wp-caption-text {color: #686868;font-size: 13px;font-size: 0.8125rem;font-style: italic;line-height: 1.6153846154;padding-top: 0.5384615385em;
}
.pianli{position:absolute;top:-999px
}
@keyframes waveMove {from { background-position: 0 100%; }to   { background-position: -20px 100%; }
}
.waves {position: relative;width: 100%;height: 60vh;margin-bottom: -7px;/*Fix for safari gap*/min-height: 60px;max-height: 60px;
}
.parallax>use {animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
}
.parallax>use:nth-child(1) {animation-delay: -2s;animation-duration: 7s;
}
.parallax>use:nth-child(2) {animation-delay: -3s;animation-duration: 10s;
}
.parallax>use:nth-child(3) {animation-delay: -4s;animation-duration: 13s;
}
.parallax>use:nth-child(4) {animation-delay: -5s;animation-duration: 20s;
}
.b2-footer-warning > div{color:#FF3355;text-align: center;background: #fff;padding: 10px;box-sizing: border-box;
}
.b2-table{white-space: nowrap;overflow-x: scroll;overflow-y: hidden;margin-right: 0;flex-flow: nowrap;
}
@keyframes move-forever {0% {transform: translate3d(-90px, 0, 0);}100% {transform: translate3d(85px, 0, 0);}
}
/*2.5.4 æ–°å¢žé€šç”¨æ ·å¼*/
.fs12{font-size: 12px;
}
.b2-b-t{border-top: 1px solid rgb(243, 243, 243);
}
@-webkit-keyframes autofill {0%,100% {color: #666;background: transparent;}
}input:-webkit-autofill {-webkit-animation-delay: 1s; /* Safari support - any positive time runs instantly */-webkit-animation-name: autofill;-webkit-animation-fill-mode: both;
}/* 首页4æ ¼*  *  */
.col-md-8,.col-sm-6,.col-xs-6 {float: left;padding: 0 8px;width: 100%;box-sizing: border-box
}
.container1:after,.container1:before,.row:after,.row:before {content: '';clear: both;display: block
}
.col-xs-6 {width: 50%
}
@media (min-width:768px) {.col-sm-6 {width: 50%}}/*2*/@media (min-width:1024px) {.col-md-3 {wid

大家记得实际应用的时候把里面的图片地址修改为自己的地址。另外，网站美化没有固定的模式，每个网站的需求，每个站长的审美都不尽相同，有人可能不喜欢这个四格广告代码，不过不要紧，本站以前还分享过一个简单版的四格代码：

wordpress主题修改技巧给博客首页添加四格广告位  

发布时间：2018-08-28     阅读(2468)

原文地址:https://blog.csdn.net/qq_39910486/article/details/129353039