WordPress首页实用的四格推荐自定义HTML模块

效果演示

WordPress首页实用的四格推荐自定义HTML模块插图

创建sige.css

直接到网站根目录创建一个sige.css文件(文件名可自定义)

注意文件名要一致

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

修改header.php

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

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

自定义HTML

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://chenyu.me" target="_blank"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-meirituijian"></use></svg><span>每日推荐</span></a></li>
<li><a href="https://chenyu.me" target="_blank"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-jiaochengqu"></use></svg><span>教程分享</span></a></li>
<li><a href="https://chenyu.me" target="_blank"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-huodonglipin"></use></svg><span>线报活动</span></a></li>
<li><a href="https://chenyu.me" target="_blank"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-gongju"></use></svg><span>美化代码</span></a></li>
<li><a href="https://chenyu.me" target="_blank"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-huaji"></use></svg><span>cos</span></a></li>
<li><a href="https://chenyu.me" 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(
你的图片网址5.jpg)"><img src="
你的图片网址5.jpg" alt="thumb"></span><strong class="title">天天向上</strong></a>
</div>
<div class="col-xs-6">
<a href="#" target="_blank"><span class="thumb" style="background-image:url(
你的图片网址4.png)"><img src="
你的图片网址4.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(你的图片网址1.png)"><img src="你的图片网址2.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(你的图片网址3.jpg)"><img src="你的图片网址3.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代码

2、css代码如下:

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;
}
button,input[type="text"],input[type="password"],input[type="number"],textarea {
  -webkit-appearance: none;
  outline: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif;
  border:1px solid #ccc;
  box-sizing: border-box
}
body{
  margin:0;
  padding:0;
  -webkit-backface-visibility: hidden;
  overflow-x: hidden;
  color:#121212;
  font-feature-settings: "tnum";
  line-height: 1.4;
  font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif;
  text-rendering: optimizeLegibility;
  -moz-font-feature-settings: "liga" on;
  font-feature-settings: "liga" on;
  -webkit-font-smoothing: subpixel-antialiased;
  font-style: normal;
    font-display: swap;
}
.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: -apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,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% 11px;
  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
}
/* ::-webkit-scrollbar{width:12px;height:0;border:3px solid #fff}
::-webkit-scrollbar-track{background:#ededed}
::-webkit-scrollbar-thumb{background:#bbbdc3;border-radius: 10px;}
::-webkit-scrollbar-corner{width:12px;height:3px;background:#ccc;}
::-webkit-scrollbar-resizer{display:none}
::-moz-scrollbar{width:12px;height:0;border:3px solid #fff}
::-moz-scrollbar-track{background:#ededed}
::-moz-scrollbar-thumb{background:#bbbdc3;border-radius: 10px;}
::-moz-scrollbar-corner{width:12px;height:3px;background:#ccc;}
::-moz-scrollbar-resizer{display:none} */
html input[disabled] {
  cursor: default;
  border: 1px solid rgba(255, 255, 255, 0);
}
button,.button{
  border-radius:4px;
  color:#fff;
  padding: 8px 16px;
  transition: opacity .2s;
  position: relative;
  cursor: pointer;
  font-size: 12px;
  margin:0;
  white-space: nowrap;
}
button.text,.button.text{
  background: none;
  border:0
}
button[disabled],button[disabled].empty,.button.disabled.empty,button[disabled]:hover,button[disabled].empty:hover,.button.disabled.empty:hover{
  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;
  vertical-align: text-top;
}
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%;
  width:100%
}
.entry-content iframe{
  min-height:450px
}
.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;
  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%;
}


.entry-content table {
  border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}
.entry-content table thead{
    font-weight: 700;
}
table td{
  border: 1px solid #F5F6F7;
}
table thead{
  border-top: 1px solid #F5F6F7
}
.entry-content table td {
  padding: 12px 20px;
    font-size: 13px;
    text-align: left;
    word-wrap: break-word;
    word-break: break-all;
}
.entry-content 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!important;
  top:-999999px
}
@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);
    }
}

.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,#fff 0,#fff 50%,#fff 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;
                }


.search_360{
    color:#fff;
    background-color:#28bc5b;
}
.search_baidu{
    color:#fff;
    background-color:#4E6EF2;
}
.search_bing{
    color:#fff;
    background-color:#ffc20e;
}
.search_toutiao{
    color:#fff;
    background-color:#f04142;
}
.search_zhihu{
    color:#fff;
    background-color:#06f;
}
#page-wrapper {
  padding-bottom:16px;
  margin-top:-85px
}
.home-banner {
  height:550px;
  position:relative;
  /* z-index:1; */
  background-position:0 100%;
  animation:gradient 12s ease-in-out infinite;
}
.home-banner .section {
  position:relative;
  width:100%;
  overflow:hidden;
  max-height:550px;
  height:100vh
}
.home-banner .section .video-wrapper {
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  height:100%;
  position:absolute;
  overflow:hidden;
  z-index:0
}
.home-banner .section .video-wrapper video {
  visibility:visible;
  pointer-events:none;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  height:100%;
  width:100%;
  object-fit:cover
}
.home-banner .section .video-overlay {
  height:100%;
  width:100%;
  top:0;
  left:0;
  position:absolute;
  background:rgba(45,47,54,.15)
}
.home-banner .corner {
    width: 28px;
    height: 21px;
    border-radius: 4px;
    left: 340px;
    top: 10px;
}
.home-banner .home-menus {
  margin-left:70px
}
.home-banner .home-menus .cus-dropbox-trigger a,.home-banner .home-menus>a {
  color:#fff;
  font-size:14px;
  margin-right:20px;
  line-height:60px
}
.home-banner .home-menus .cus-dropbox-trigger a:hover,.home-banner .home-menus>a:hover {
  color:var(--b2color);
}
.home-banner>.layout-center {
  height:100%
}
.home-banner-content {
    padding-top: 130px;
    margin-left: 182px;
    margin-bottom: 30px;
}
.home-banner-content .slogan-text p {
  font-size:18px;
  line-height:24px;
  letter-spacing:2px;
  font-weight: 600;
    text-shadow: 0 2px 4px rgba(0,0,0,.25);
}
.home-banner-content .slogan-text p:nth-of-type(1) {
  font-weight:600;
  font-size:28px;
  line-height:46px;
  letter-spacing:6px;
  text-shadow:0 2px 4px rgba(0,0,0,.25);
  margin-bottom:20px
}
.home-banner-search {
  width:800px;
  margin-left:209px;
  height:auto
}
.home-banner-search .tag {
    position: absolute;
    right: 100px;
    top: 0;
    padding: 15px 10px;
}
.home-banner-search .tag a:hover {
    background: var(--b2color);
    color: #fff;
}
.home-banner-search .tag a {
    display: inline;
    padding: 0px 8px;
    border-radius: 10px;
    background: #EFEFEF;
    float: left;
    margin: 5px;
    height: 20px;
    line-height: 20px;
    color: #A0A0A0;
    font-size: 12px;
}
/*.home-banner-search form {*/
/*  margin-bottom:10px;*/
/*}*/
.home-banner-search form>input {
  width:100%;
  height: 50px;
  background:#fff;
  border:none;
  padding:18px 22px;
  font-size:14px;
  color:#333;
}
.home-banner-search form>input::placeholder {
  color:#979797
}
.home-banner-search .hot-top {
  position:absolute;
  top:13px;
  right:115px;
  color: #000;
  font-size:13px
}
.home-banner-search .hot-top i {
  margin-right:4px
}
.home-banner-search .hot-words-container,.home-banner-search .rec-words-container {
  width:100%;
  top:56px
}
.home-banner-links {
    width: 80%;
    font-size: 14px;
    height: 40px;
    line-height: 40px;
    text-shadow: 0 2px 4px rgba(0,0,0,.27);
}
.home-banner-links a {
  margin-right:19px;
  color:inherit
}
.home-banner-links a:hover {
  color:var(--b2color);
}
.home-banner .search-types-cycles {
  width:106px;
  height:290px;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0,rgb(255 96 0 / 17%) 51.04%,rgba(0,0,0,0) 100%);
  left:625px;
  top:-95px;
  text-align:center;
  z-index:-1
}
.home-banner .search-types-cycles .search-types-btn {
  width:100%;
  height:20px;
  line-height:20px;
  cursor:pointer;
  user-select:none;
  left:0;
  bottom:-20px;
  z-index:1
}
.home-banner .search-types-cycles .search-types-btn i {
  color:#fff;
  font-size:12px
}
.home-banner .search-types-cycles .search-types-btn:nth-of-type(1) {
  bottom:auto;
  top:-20px
}
.home-banner .search-types-cycles .search-types-btn:nth-of-type(1) i {
  transform:rotate(180deg)
}
.home-banner .search-types-cycles .search-types-btn:hover i {
  color:var(--b2color);
}
.home-banner .search-types-cycles ul {
  width:100%;
  height:100%;
  padding-top:5px
}
.home-banner .search-types-cycles ul:after,.home-banner .search-types-cycles ul:before {
  content:'';
  width:1px;
  height:100%;
  display:block;
  position:absolute;
  left:0;
  top:0;
  background:linear-gradient(0,transparent 0,var(--b2color) 50%,transparent 100%)
}
.home-banner .search-types-cycles ul:after {
  left:auto;
  right:0
}
.home-banner .search-types-cycles ul li {
  height:30px !important;
  line-height:30px !important;
  font-size:16px;
  text-align:center;
  cursor:pointer;
  user-select:none
}
.home-banner .search-types-cycles ul li:hover {
  color:var(--b2color);
}
.home-banner .search-types-cycles ul li:nth-of-type(4) {
  height:60px!important;
  line-height:60px!important;
}
.home-banner .search-types-cycles ul li a {
  color:rgba(255,255,255,.6);
  transition:none
}
.home-banner .search-types-cycles ul li a:hover {
  color:var(--b2color);
}
.home-banner .search-types-cycles button:hover {
  background:#46dacf !important;
  opacity:1;
  transition:opacity .2s
}
.home-banner .search-types-cycles button i {
  font-size:18px;
  color:#fff;
  margin-right:6px
}
.home-banner .search-types-cycles button span {
  font-size:16px;
  color:#fff
}
.top-navs {
  width:100%;
  /* height:70px; */
  bottom: 0px;
  padding-top: 16px;
  left:0;
  /* padding:12px 0; */
  /* z-index:1; */
  backdrop-filter: blur(10px);
}
.top-navs .top-navs-l {
  width: calc(100% - 180px);
  display:flex;
  justify-content:center;
  align-items:center;
  margin:0 auto;
  border-right:1px solid rgb(255 255 255 / 10%)
}
.top-navs .top-navs-l-item {
  width:20%;
  margin:0 18px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center
}
.top-navs .top-navs-l-item .top-navs-l-title a {
  font-weight:600;
  font-size:18px;
  line-height:25px;
  height:25px;
  margin-bottom:12px;
  color:#fff;
  text-shadow:1px 1px 1px #000
}
.top-navs .top-navs-l-item .top-navs-l-title .wz {
  font-weight:600;
  font-size:18px;
  line-height:25px;
  height:25px;
  margin-bottom:12px;
  color:#fff;
  text-shadow:1px 1px 1px #000
}
.top-navs .top-navs-l-item .top-navs-l-title a i {
  font-size:34px;
  margin-right:8px;
  vertical-align:-4px
}
.top-navs .top-navs-l-item .top-navs-l-title a img {
  float:left;
  width:34px;
  height:34px;
  margin-right:8px;
  vertical-align:-4px;
  margin-top: -5px;
}
.top-navs .top-navs-l-item .top-navs-l-title a:hover {
  color:var(--b2color);
}
.top-navs .top-navs-l-item .top-navs-l-links {
  font-size:14px;
  line-height:20px;
  display:flex;
  justify-content:space-around;
  margin:0 -10px
}
.top-navs .top-navs-l-item .top-navs-l-links a {
  color:#fff;
  margin:0 10px;
  text-shadow:1px 1px 1px #000
}
.top-navs .top-navs-l-item .top-navs-l-links a:hover {
  color:var(--b2color);
}
.top-navs .top-navs-m {
  width:176px;
  height:61px;
  border-right:1px solid rgba(255,255,255,.25);
  padding:0 24px;
  display:none;
  flex-wrap:wrap;
  justify-content:space-around;
  align-items:center
}
.top-navs .top-navs-m a,.top-navs .top-navs-m p,.top-navs .top-navs-m>div {
  width:50%;
  text-align:center;
  color:#fff;
  font-size:14px;
  line-height:20px;
  cursor:pointer;
  user-select:none;
  text-shadow:1px 1px 1px #000
}
.top-navs .top-navs-m a:hover,.top-navs .top-navs-m p:hover,.top-navs .top-navs-m>div:hover {
  color:var(--b2color);
}
.top-navs .top-navs-m div p,.top-navs .top-navs-m>a {
  margin-bottom: 25px;
}
.top-navs .top-navs-m div p {
  width:100%;
  margin-bottom:0;
  margin-top:-20px
}
.top-navs .top-navs-m .top-navs-m-box {
  top:-16px;
  left:-72px;
  width:157px;
  height:66px;
  background:#444;
  border-radius:8px;
  padding:8px 14px 0;
  display:none;
  margin-top:-70px
}
.top-navs .top-navs-m .top-navs-m-box a {
  margin-bottom:9px
}
.top-navs .top-navs-m .top-navs-m-box a:hover {
  color:var(--b2color);
}
.top-navs .top-navs-r {
  width:176px
}
.top-navs .top-navs-r a {
  width:50%;
  padding-left:30px;
  text-align:center;
}
.top-navs .top-navs-r a i {
  font-size:36px;
  margin-bottom:10px
}
.top-navs .top-navs-r img {
  height: 40px;
  width: 40px;
  margin-top: -3px;
}
.top-navs .top-navs-r a p {
  font-size:14px;
  line-height:40px;
  color:#fff;
  text-shadow:1px 1px 1px #000
}
.top-navs .top-navs-r a p:hover {
  color:var(--b2color);
}
.por {
  position:relative
}
.poa {
  position:absolute
}
.pof {
  position:fixed
}
.Onecad_clearfix:after {
  content:'';
  clear:both;
  display:block;
  height:0;
  visibility:hidden;
  font-size:0;
  line-height:0
}
.fl {
  float:left
}
.fr {
  float:right
}
.ovh {
  overflow:hidden
}
.block {
  display:block
}
.icon-rank {
  width:auto;
  display:inline-block;
  border:none;
  overflow:hidden;
  vertical-align:-3px
}
img.icon-rank {
  width:20px;
  height:20px;
  margin-right:0px
}
a.hot-top.text-notify:hover {
  color:var(--b2color);
}
p.top-navs-l-title {
  margin-bottom:8px
}
.top-navs-l-title i{
     width:1em;
  height:1em;
  float: left;
}
.left-cont{
  border: 5px solid rgb(255 255 255 / 18%);
}
.home-banner-search>form>button {
  box-sizing:border-box;
  min-width:100px;
  transform:translateY(0px);
  font-size:15px;
  border-top-right-radius:3px;
  border-bottom-right-radius:3px;
  position:absolute;
  right:1px;
  top:0;
  z-index:1;
  border:1px solid #23d1c3;
  padding:0 15px;
  width:147px;
  height:56px;
  background:linear-gradient(90deg,#35eee3 0,#21cec0 100%);
  border-radius:0 8px 8px px 0;
  right:0;
  text-align:center;
  padding-left:25px;
  margin-right:-7px;
  border-bottom-left-radius:1px;
  border-top-left-radius:1px
}
.home-banner-search .search.hidden {
  display:none
}
.primary-menus .left-cont button {
  height: 50px;
  box-sizing:border-box;
  min-width:100px;
  /* margin-left: 0px; */
  cursor:pointer;
  color:#fff;
  font-size:15px;
  line-height:40px;
  position:absolute;
  right: 5px;
  top: 5px;
  border-radius:1px;
  padding:0 15px;
  width:106px;
  transform:translateY(0px);
}
.slogan-text.por.fl {
    margin-left: 200px;
    text-align: center;
    margin-bottom: 20px;
}
@media screen and (max-width:768px) {
  #page-wrapper {
  display:none
}
}
本站资源均为网友推荐收集整理而来,请勿商业运营,仅供学习和研究,请在下载后24小时内删除!!
© 版权声明
THE END
点赞7
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容