效果图
介绍：
一款非常不错的PC端首页区块，B2主题使用的人越来越多，主题功能也逐渐多了起来。全部塞在顶部菜单相对用户来说不是那么友好，好在B2自定义非常高，可以通过主题后台DIY添加自己需要的模块样式。可以直观的突出显示网站重点功能，既美观又使用。
主题后台新建一个模块，调用内容选择自定义
<!--快捷导航-->
<div class="slide_6_ss">
<div class="slide_6_d">
<div class="mini-stats">
<div class="mini-stats-content"
style="background: url(/wp-content/themes/b2child/Custom/test/img/2022052508542167.png);background-size: 100% 100%;">
<div class="slide_6_d_mb4">
<div class="slide_6_d_right">
<span> 精品源码 </span>
<p>精品源码及资源合集</p>
</div>
</div>
</div>
<div class="slide_6_d_m">
<div class="mini-stats-desc">
<li>
<a href="#" target="_blank" class="ceo-dt">
<img src="/wp-content/themes/b2child/Custom/test/img/2022052509062599.png">
<p>小程序</p>
</a>
</li>
<li>
<a href="#" target="_blank" class="ceo-dt">
<img src="/wp-content/themes/b2child/Custom/test/img/2022052509195463.png">
<p>支付系统</p>
</a>
</li>
<li>
<a href="#" target="_blank" class="ceo-dt">
<img src="/wp-content/themes/b2child/Custom/test/img/2022052509062594.png">
<p>电商源码</p>
</a>
</li>
</div>
</div>
</div>
</div>
<div class="slide_6_d">
<div class="mini-stats">
<div class="mini-stats-content"
style="background: url(/wp-content/themes/b2child/Custom/test/img/2022052508542064.png);background-size: 100% 100%;">
<div class="slide_6_d_mb4">
<div class="slide_6_d_right">
<span> 商业模板 </span>
<p>模板插件，网站的好帮手</p>
</div>
</div>
</div>
<div class="slide_6_d_m">
<div class="mini-stats-desc">
<li>
<a href="#" target="_blank" class="ceo-dt">
<img src="/wp-content/themes/b2child/Custom/test/img/2022052509062476.png">
<p>WP模板</p>
</a>
</li>
<li>
<a href="#" target="_blank" class="ceo-dt">
<img src="/wp-content/themes/b2child/Custom/test/img/2022052509062449.png">
<p>CMS模板</p>
</a>
</li>
<li>
<a href="#" target="_blank" class="ceo-dt">
<img src="/wp-content/themes/b2child/Custom/test/img/2022052509062445.png">
<p>其他模板</p>
</a>
</li>
</div>
</div>
</div>
</div>
<div class="slide_6_d">
<div class="mini-stats">
<div class="mini-stats-content"
style="background: url(/wp-content/themes/b2child/Custom/test/img/2022052508542118.png);background-size: 100% 100%;">
<div class="slide_6_d_mb4">
<div class="slide_6_d_right">
<span> 学习中心 </span>
<p>更多建站教程来这里学习~</p>
</div>
</div>
</div>
<div class="slide_6_d_m">
<div class="mini-stats-desc">
<li>
<a href="#" target="_blank" class="ceo-dt">
<img src="/wp-content/themes/b2child/Custom/test/img/2022052509062345.png">
<p>建站教程</p>
</a>
</li>
<li>
<a href="#" target="_blank" class="ceo-dt">
<img src="/wp-content/themes/b2child/Custom/test/img/202205250906256.png">
<p>SEO优化</p>
</a>
</li>
<li>
<a href="#" target="_blank" class="ceo-dt">
<img src="/wp-content/themes/b2child/Custom/test/img/2022052509062466.png">
<p>其他教程</p>
</a>
</li>
</div>
</div>
</div>
</div>
<div class="slide_6_d">
<div class="mini-stats">
<div class="mini-stats-content"
style="background: url(/wp-content/themes/b2child/Custom/test/img/2022052508542190.png);background-size: 100% 100%;">
<div class="slide_6_d_mb4">
<div class="slide_6_d_right">
<span> 更多热门 </span>
<p>更多热门资源点这里哟</p>
</div>
</div>
</div>
<div class="slide_6_d_m">
<div class="mini-stats-desc">
<li>
<a href="#" target="_blank" class="ceo-dt">
<img src="/wp-content/themes/b2child/Custom/test/img/2022052509062598.png">
<p>绿色软件</p>
</a>
</li>
<li>
<a href="#" target="_blank" class="ceo-dt">
<img src="/wp-content/themes/b2child/Custom/test/img/2022052509062616.png">
<p>绝美壁纸</p>
</a>
</li>
<li>
<a href="#" target="_blank" class="ceo-dt">
<img src="/wp-content/themes/b2child/Custom/test/img/2022052509360758.png">
<p>游戏源码</p>
</a>
</li>
</div>
</div>
</div>
</div>
</div>
在子主题style.css添加以下样式
html {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-size: 16px;
font-weight: normal;
line-height: 1.5;
-webkit-text-size-adjust: 100%;
background: #fff;
color: #666;
}
body {
margin: 0;
}
a:active,
a:hover {
outline: none;
}
a {
color: #262626;
text-decoration: none;
cursor: pointer;
transition: all .3s;
}
a:hover {
color: #3385ff;
}
img {
vertical-align: middle;
}
img {
max-width: 100%;
height: auto;
box-sizing: border-box;
}
@supports (display:block) {}
p {
margin: 0 0 20px 0;
}
*+p {
margin-top: 20px;
}
::selection {
background: #39f;
color: #fff;
text-shadow: none;
}
:root {
--ceo-breakpoint-s: 640px;
--ceo-breakpoint-m: 960px;
--ceo-breakpoint-l: 1200px;
--ceo-breakpoint-xl: 1600px;
}
.ceo-heading-line>::before,
.ceo-heading-line>::after {
content: "";
position: absolute;
top: calc(50% - ((0.2px + 0.05em) / 2));
width: 2000px;
border-bottom: calc(0.2px + 0.05em) solid #e5e5e5;
}
.ceo-heading-line>::before {
right: 100%;
margin-right: calc(5px + 0.3em);
}
.ceo-heading-line>::after {
left: 100%;
margin-left: calc(5px + 0.3em);
}
button.ceo-icon:not(:disabled) {
cursor: pointer;
}
.ceo-range:not(:disabled)::-webkit-slider-thumb {
cursor: pointer;
}
.ceo-range:not(:disabled)::-moz-range-thumb {
cursor: pointer;
}
.ceo-range:not(:disabled)::-ms-thumb {
cursor: pointer;
}
.ceo-radio:not(:disabled),
.ceo-checkbox:not(:disabled) {
cursor: pointer;
}
.ceo-button:not(:disabled) {
cursor: pointer;
}
.ceo-navbar-container>::before,
.ceo-navbar-container>::after {
display: none !important;
}
.ceo-breadcrumb>*>:hover,
.ceo-breadcrumb>*>:focus {
color: #666;
text-decoration: none;
}
.ceo-pagination>*>:hover,
.ceo-pagination>*>:focus {
color: #666;
text-decoration: none;
}
.ceo-dotnav>*>:hover,
.ceo-dotnav>*>:focus {
background-color: rgba(102, 102, 102, 0.6);
outline: none;
border-color: transparent;
}
.ceo-dotnav>*>:active {
background-color: rgba(102, 102, 102, 0.2);
border-color: transparent;
}
.ceo-thumbnav>*>:hover,
.ceo-thumbnav>*>:focus {
outline: none;
}
.ceo-thumbnav>*>:hover::after,
.ceo-thumbnav>*>:focus::after {
background-color: transparent;
}
.ceo-lightbox-items>:focus {
outline: none;
}
.ceo-slideshow-items>:focus {
outline: none;
}
.ceo-slider-items>:focus {
outline: none;
}
:root {
--ceo-leader-fill-content: .;
}
.ceo-animation-toggle:not(:hover):not(:focus) [class*='ceo-animation-'] {
animation-name: none;
}
@supports (-webkit-background-clip:text) {}
@supports (filter:blur(0)) {}
@-moz-document url-prefix() {}
@supports (-ms-ime-align:auto) {}
.ceo-visible-toggle:not(:hover):not(:focus) .ceo-hidden-hover:not(:focus-within) {
position: absolute !important;
width: 0 !important;
height: 0 !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
}
.ceo-visible-toggle:not(:hover):not(:focus) .ceo-invisible-hover:not(:focus-within) {
opacity: 0 !important;
}
.ceo-light .ceo-heading-line>::before,
.ceo-light .ceo-heading-line>::after,
.ceo-section-primary:not(.ceo-preserve-color) .ceo-heading-line>::before,
.ceo-section-primary:not(.ceo-preserve-color) .ceo-heading-line>::after,
.ceo-section-secondary:not(.ceo-preserve-color) .ceo-heading-line>::before,
.ceo-section-secondary:not(.ceo-preserve-color) .ceo-heading-line>::after,
.ceo-tile-primary:not(.ceo-preserve-color) .ceo-heading-line>::before,
.ceo-tile-primary:not(.ceo-preserve-color) .ceo-heading-line>::after,
.ceo-tile-secondary:not(.ceo-preserve-color) .ceo-heading-line>::before,
.ceo-tile-secondary:not(.ceo-preserve-color) .ceo-heading-line>::after,
.ceo-card-primary.ceo-card-body .ceo-heading-line>::before,
.ceo-card-primary.ceo-card-body .ceo-heading-line>::after,
.ceo-card-primary>:not([class*='ceo-card-media']) .ceo-heading-line>::before,
.ceo-card-primary>:not([class*='ceo-card-media']) .ceo-heading-line>::after,
.ceo-card-secondary.ceo-card-body .ceo-heading-line>::before,
.ceo-card-secondary.ceo-card-body .ceo-heading-line>::after,
.ceo-card-secondary>:not([class*='ceo-card-media']) .ceo-heading-line>::before,
.ceo-card-secondary>:not([class*='ceo-card-media']) .ceo-heading-line>::after,
.ceo-overlay-primary .ceo-heading-line>::before,
.ceo-overlay-primary .ceo-heading-line>::after,
.ceo-offcanvas-bar .ceo-heading-line>::before,
.ceo-offcanvas-bar .ceo-heading-line>::after {
border-bottom-color: rgba(255, 255, 255, 0.2);
}
.ceo-light .ceo-breadcrumb>*>:hover,
.ceo-light .ceo-breadcrumb>*>:focus,
.ceo-section-primary:not(.ceo-preserve-color) .ceo-breadcrumb>*>:hover,
.ceo-section-primary:not(.ceo-preserve-color) .ceo-breadcrumb>*>:focus,
.ceo-section-secondary:not(.ceo-preserve-color) .ceo-breadcrumb>*>:hover,
.ceo-section-secondary:not(.ceo-preserve-color) .ceo-breadcrumb>*>:focus,
.ceo-tile-primary:not(.ceo-preserve-color) .ceo-breadcrumb>*>:hover,
.ceo-tile-primary:not(.ceo-preserve-color) .ceo-breadcrumb>*>:focus,
.ceo-tile-secondary:not(.ceo-preserve-color) .ceo-breadcrumb>*>:hover,
.ceo-tile-secondary:not(.ceo-preserve-color) .ceo-breadcrumb>*>:focus,
.ceo-card-primary.ceo-card-body .ceo-breadcrumb>*>:hover,
.ceo-card-primary.ceo-card-body .ceo-breadcrumb>*>:focus,
.ceo-card-primary>:not([class*='ceo-card-media']) .ceo-breadcrumb>*>:hover,
.ceo-card-primary>:not([class*='ceo-card-media']) .ceo-breadcrumb>*>:focus,
.ceo-card-secondary.ceo-card-body .ceo-breadcrumb>*>:hover,
.ceo-card-secondary.ceo-card-body .ceo-breadcrumb>*>:focus,
.ceo-card-secondary>:not([class*='ceo-card-media']) .ceo-breadcrumb>*>:hover,
.ceo-card-secondary>:not([class*='ceo-card-media']) .ceo-breadcrumb>*>:focus,
.ceo-overlay-primary .ceo-breadcrumb>*>:hover,
.ceo-overlay-primary .ceo-breadcrumb>*>:focus,
.ceo-offcanvas-bar .ceo-breadcrumb>*>:hover,
.ceo-offcanvas-bar .ceo-breadcrumb>*>:focus {
color: rgba(255, 255, 255, 0.7);
}
.ceo-light .ceo-pagination>*>:hover,
.ceo-light .ceo-pagination>*>:focus,
.ceo-section-primary:not(.ceo-preserve-color) .ceo-pagination>*>:hover,
.ceo-section-primary:not(.ceo-preserve-color) .ceo-pagination>*>:focus,
.ceo-section-secondary:not(.ceo-preserve-color) .ceo-pagination>*>:hover,
.ceo-section-secondary:not(.ceo-preserve-color) .ceo-pagination>*>:focus,
.ceo-tile-primary:not(.ceo-preserve-color) .ceo-pagination>*>:hover,
.ceo-tile-primary:not(.ceo-preserve-color) .ceo-pagination>*>:focus,
.ceo-tile-secondary:not(.ceo-preserve-color) .ceo-pagination>*>:hover,
.ceo-tile-secondary:not(.ceo-preserve-color) .ceo-pagination>*>:focus,
.ceo-card-primary.ceo-card-body .ceo-pagination>*>:hover,
.ceo-card-primary.ceo-card-body .ceo-pagination>*>:focus,
.ceo-card-primary>:not([class*='ceo-card-media']) .ceo-pagination>*>:hover,
.ceo-card-primary>:not([class*='ceo-card-media']) .ceo-pagination>*>:focus,
.ceo-card-secondary.ceo-card-body .ceo-pagination>*>:hover,
.ceo-card-secondary.ceo-card-body .ceo-pagination>*>:focus,
.ceo-card-secondary>:not([class*='ceo-card-media']) .ceo-pagination>*>:hover,
.ceo-card-secondary>:not([class*='ceo-card-media']) .ceo-pagination>*>:focus,
.ceo-overlay-primary .ceo-pagination>*>:hover,
.ceo-overlay-primary .ceo-pagination>*>:focus,
.ceo-offcanvas-bar .ceo-pagination>*>:hover,
.ceo-offcanvas-bar .ceo-pagination>*>:focus {
color: rgba(255, 255, 255, 0.7);
}
.ceo-light .ceo-dotnav>*>:hover,
.ceo-light .ceo-dotnav>*>:focus,
.ceo-section-primary:not(.ceo-preserve-color) .ceo-dotnav>*>:hover,
.ceo-section-primary:not(.ceo-preserve-color) .ceo-dotnav>*>:focus,
.ceo-section-secondary:not(.ceo-preserve-color) .ceo-dotnav>*>:hover,
.ceo-section-secondary:not(.ceo-preserve-color) .ceo-dotnav>*>:focus,
.ceo-tile-primary:not(.ceo-preserve-color) .ceo-dotnav>*>:hover,
.ceo-tile-primary:not(.ceo-preserve-color) .ceo-dotnav>*>:focus,
.ceo-tile-secondary:not(.ceo-preserve-color) .ceo-dotnav>*>:hover,
.ceo-tile-secondary:not(.ceo-preserve-color) .ceo-dotnav>*>:focus,
.ceo-card-primary.ceo-card-body .ceo-dotnav>*>:hover,
.ceo-card-primary.ceo-card-body .ceo-dotnav>*>:focus,
.ceo-card-primary>:not([class*='ceo-card-media']) .ceo-dotnav>*>:hover,
.ceo-card-primary>:not([class*='ceo-card-media']) .ceo-dotnav>*>:focus,
.ceo-card-secondary.ceo-card-body .ceo-dotnav>*>:hover,
.ceo-card-secondary.ceo-card-body .ceo-dotnav>*>:focus,
.ceo-card-secondary>:not([class*='ceo-card-media']) .ceo-dotnav>*>:hover,
.ceo-card-secondary>:not([class*='ceo-card-media']) .ceo-dotnav>*>:focus,
.ceo-overlay-primary .ceo-dotnav>*>:hover,
.ceo-overlay-primary .ceo-dotnav>*>:focus,
.ceo-offcanvas-bar .ceo-dotnav>*>:hover,
.ceo-offcanvas-bar .ceo-dotnav>*>:focus {
background-color: rgba(255, 255, 255, 0.9);
border-color: transparent;
}
.ceo-light .ceo-dotnav>*>:active,
.ceo-section-primary:not(.ceo-preserve-color) .ceo-dotnav>*>:active,
.ceo-section-secondary:not(.ceo-preserve-color) .ceo-dotnav>*>:active,
.ceo-tile-primary:not(.ceo-preserve-color) .ceo-dotnav>*>:active,
.ceo-tile-secondary:not(.ceo-preserve-color) .ceo-dotnav>*>:active,
.ceo-card-primary.ceo-card-body .ceo-dotnav>*>:active,
.ceo-card-primary>:not([class*='ceo-card-media']) .ceo-dotnav>*>:active,
.ceo-card-secondary.ceo-card-body .ceo-dotnav>*>:active,
.ceo-card-secondary>:not([class*='ceo-card-media']) .ceo-dotnav>*>:active,
.ceo-overlay-primary .ceo-dotnav>*>:active,
.ceo-offcanvas-bar .ceo-dotnav>*>:active {
background-color: rgba(255, 255, 255, 0.5);
border-color: transparent;
}
@media print {
*,
*::before,
*::after {
background: transparent !important;
color: black !important;
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
@page {
margin: 0.5cm;
}
p {
orphans: 3;
widows: 3;
}
}
模式二
.slide_6_d .mini-stats {
position:relative;
display:-ms-flexbox;
display:flex;
-ms-flex-direction:column;
flex-direction:column;
min-width:0;
word-wrap:break-word;
background-color:#fff;
background-clip:border-box;
border:1px solid rgba(0,0,0,.125);
border-radius:.5rem;
border:none;
-webkit-box-shadow:0 0 1.25rem rgba(108,118,134,0.1);
box-shadow:0 0 1.25rem rgba(108,118,134,0.1);
overflow:hidden
}
.slide_6_search {
height:68px;
width:1200px;
position:relative;
z-index:12;
margin:0 auto;
margin-top:-100px;
z-index:1;
top:-120px
}
.slide_6_search .searchbox {
width:1010px;
margin:0 auto;
background:rgba(255,255,255,0.5);
height:48px;
border-radius:5px;
padding:10px
}
.slide_6_search .searchbox .search_input {
width:865px;
height:48px;
background:#fff;
border-radius:3px;
position:relative;
left:0;
top:0
}
.slide_6_search .searchbox input.text {
width:469px;
height:48px;
position:absolute;
padding:0 10px;
color:#999898;
font-size:14px
}
.slide_6_search .searchbox input,.slide_6_search .searchbox button {
border:0;
outline:none;
background:none;
filter:chroma(color=#000000)
}
.slide_6_search .searchbox .tag {
position:absolute;
right:123px;
top:0;
padding:12px 10px
}
.slide_6_search .searchbox .tag a {
display:inline;
padding:3px 8px;
border-radius:10px;
background:#EFEFEF;
float:left;
margin:0 5px;
height:18px;
line-height:18px;
color:#A0A0A0;
font-size:12px
}
.slide_6_search .searchbox .tag a:hover {
background:#ff0200;
color:#fff
}
.slide_6_search .searchbox .submit {
display:block;
width:123px;
height:48px;
background:#4E464E;
position:absolute;
right:0;
top:0;
border-radius:0 3px 3px 0;
line-height:48px;
text-align:center;
color:#fff;
font-size:20px;
cursor:pointer
}
.slide_6_search .searchbox .submit:hover {
background:#EB2C17;
color:#fff
}
.slide_6_search .searchbox .submit_s {
right:-138px;
display:block;
width:123px;
height:48px;
background:#fe4d3f;
position:absolute;
top:0;
border-radius:3px;
line-height:48px;
text-align:center;
color:#fff;
font-size:20px;
cursor:pointer
}
.slide_6_search .searchbox .submit_s:hover {
background:#EB2C17;
color:#fff
}
.slide_6_ss {
display:flex;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
padding:0 30px;
margin-left:-20px
}
.slide_6_mk {
}.slide_6_jb {
position:relative;
border-radius:10px;
margin-top:-100px;
margin-bottom:30px!important
}
.slide_6_n {
display:flex;
margin:0 auto;
padding-top:15px;
height:54px;
color:#fff;
font-size:14px;
justify-content:space-between
}
.slide_6_n .slide_6_s {
position:relative;
display:inline-block;
padding:0 40px;
height:40px;
border-radius:73px;
background:none;
vertical-align:middle;
text-align:center;
line-height:40px
}
.slide_6_n .slide_6_s ul {
float:left;
margin:0 auto
}
.slide_6_n .slide_6_s li {
float:left;
margin-right:40px
}
.slide_6_n .slide_6_s li .first {
color:#2879f7
}
.slide_6_n .slide_6_s li a {
float:left;
color:#606075;
font-weight:600;
font-size:14px
}
.slide_6_n .slide_6_y {
font-weight:600;
position:relative;
display:inline-block;
padding:0 40px;
height:40px;
background:none;
vertical-align:middle;
text-align:center;
line-height:40px
}
.slide_6_n .slide_6_y a {
margin-left:40px;
color:#ffb100
}
.slide_6_d {
padding-left:20px;
flex:0 0 25%;
box-sizing:border-box;
width:100%;
max-width:100%
}
.slide_6_d .mini-stats {
position:relative;
display:-ms-flexbox;
display:flex;
-ms-flex-direction:column;
flex-direction:column;
min-width:0;
word-wrap:break-word;
background-color:#fff;
background-clip:border-box;
border:1px solid rgba(0,0,0,.125);
border-radius:.5rem;
border:none;
-webkit-box-shadow:0 0 1.25rem rgba(108,118,134,0.1);
box-shadow:0 0 1.25rem rgba(108,118,134,0.1);
overflow:hidden
}
.mini-stats .mini-stats-content {
padding:1rem!important
}
.slide_6_d_mb4,.my-4 {
margin-bottom:1.5rem!important
}
.slide_6_d_right {
text-align:right!important;
color:rgba(255,255,255,.5)!important
}
.slide_6_d_right span {
margin-top:.5rem!important;
background-color:#f8f9fa;
margin-bottom:.5rem!important;
color:#1699dd !important;
display:inline-block;
padding:.25em .4em;
font-size:75%;
font-weight:700;
line-height:1;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:.25rem;
transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out
}
.slide_6_d_right p {
color:#fff
}
.slide_6_d_m {
margin-left:1rem!important;
margin-right:1rem!important
}
.slide_6_d_m .mini-stats-desc {
display:inline-block;
position:relative;
bottom:22px;
height:100%;
-webkit-box-shadow:0 0 1.25rem rgba(108,118,134,0.1);
box-shadow:0 0 1.25rem rgba(108,118,134,0.1);
background-color:#ffffff !important;
padding:1rem!important;
border-radius:.25rem!important;
display:flex;
-ms-flex-wrap:wrap;
flex-wrap:wrap
}
.slide_6_d_m .mini-stats-desc li {
float:left;
flex:0 0 33.33333%;
box-sizing:border-box;
width:100%;
max-width:100%
}
.slide_6_d_m .mini-stats-desc a {
display:block;
height:60px;
padding:12px 15px 15px 15px
}
.slide_6_d_m .mini-stats-desc a:hover {
color:var(--primary-color)!important
}
.slide_6_d_m .mini-stats-desc a img {
display:block;
width:58px;
height:45px;
margin:0 auto 5px
}
.slide_6_d_m .mini-stats-desc p {
display:block;
height:20px;
line-height:20px;
overflow:hidden;
font-size:14px;
color:#666;
text-align:center
}
.ceo-pages-vip ol,ul,li {
list-style:none
}
也可以新建两个css 文件，自行引用一样可以。两个样式放一个css里面都可以，自行抉择。图标文件自行下载
© 版权声明
文章版权归作者所有，未经允许请勿转载。
