效果演示
创建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
暂无评论内容