b2美化之首页四格
效果
头部自定义HTML
<script type="text/javascript" src="//at.alicdn.com/t/font_3187889_jk0nugfzkgd.js"></script>
首页模块自定义HTML
<div class="home-first">
<div class="aibkcontainer hide_sm">
<div class="row">
<div class="col-1-4">
<div class="hf-widget hf-widget-1 hf-widget-
software">
<h3 class="hf-widget-title"> <svg class="libs1"
aria-hidden="true"><use xlink:href="#bd-tishifuhao"></use></svg>副业赚钱<span>网络
兼职副业赚钱项目教程</span>
</h3>
<div class="hf-widget-content">
<div class="scroll-h">
<ul>
<li><a href="/xmszzq/dsmh"
target=_blank><svg class="lib sixin" aria-hidden="true"><use xlink:href="#bd-
yinliugongju"></use></svg><span>电商卖货</span></a></li>
<li><a href="/xmszzq/dspbx"
target=_blank><svg class="lib" aria-hidden="true"><use xlink:href="#bd-
zhibo"></use></svg><span>视频变现</span></a></li>
<li><a href="/xmszzq/ylbx"
target=_blank><svg class="lib" aria-hidden="true"><use xlink:href="#bd-
xiangmusuohuotisheng"></use></svg><span>引流变现</span></a></li>
<li><a href="/xmszzq/sczqxm"
target=_blank><svg class="lib" aria-hidden="true"><use xlink:href="#bd-
cunqianguan-copy"></use></svg><span>实操赚钱</span></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-1-4">
<div class="hf-widget hf-widget-2">
<h3 class="hf-widget-title"> <svg class="libs1"
aria-hidden="true"><use xlink:href="#bd-tishifuhao"></use></svg>热门推荐<span>最受
大家欢迎的链接</span> </h3>
<div class="hf-widget-content">
<div class="no-scroll hf-tags">
<a class="style_orange" href="#"
target="_blank"><span>链接一</span></a>
<a class="" href="#"
target="_blank"><span>链接二</span></a>
<a class="style_orange" href="#" target="_blank"><span>链接三</span></a>
<a class="" href="#"
target="_blank"><span>链接四</span></a>
</div>
</div>
</div>
</div>
<div class="col-1-4">
<div class="hf-widget hf-widget-1 hf-widget-hot-
cats">
<h3 class="hf-widget-title"><svg class="libs1"
aria-hidden="true"><use xlink:href="#bd-tishifuhao"></use></svg>知识学习<span>全网
知识课程学习+代理</span> </h3>
<div class="hf-widget-content">
<div class="scroll-h">
<ul>
<li><a href="/jfdhkc"
target="_blank"><svg class="lib" aria-hidden="true"><use xlink:href="#bd-
kepujiaoyu"></use></svg><span>积分课程</span></a></li>
<li><a href="/cydd"
target="_blank"><svg class="lib" aria-hidden="true"><use xlink:href="#bd-
chuangyequ"></use></svg><span>创业导读</span></a></li>
<li><a href="/vips"
target="_blank"><svg class="lib" aria-hidden="true"><use xlink:href="#bd-ic-
vip"></use></svg><span>VIP会员</span></a></li>
<li><a href="/vips"
target="_blank"><svg class="lib" aria-hidden="true"><use xlink:href="#bd-
hezuo"></use></svg><span>网站合作</span></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-1-4">
<div class="hf-widget hf-widget-4">
<h3 class="hf-widget-title"> <svg class="libs1"
aria-hidden="true"><use xlink:href="#bd-tishifuhao"></use></svg>网站公告<span>发布
最新的活动信息</span>
</h3>
<div class="hf-widget-content">
<div class="scroll-h">
<ul>
<li><h3><a href="/vips"
target="_blank"> <i class="icon-time"></i> <span>赞助贵宾会员限时优惠</span><em>点
击查看详情</em></a></h3></li>
<li><h3><a href="/vips"
target="_blank"> <i class="icon-time"></i> <span>现在开通终身会员只需要128元
</span></a></h3></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
子主题style.css
/*首页四格开始*/
.libs1 {
width: 1.3em;
height: 1.3em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
margin-right: 3px;
}
.libs {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
.lib {
width: 3em;
height: 3em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
@media screen and (max-width: 768px){
.home-first .hf-widget-4 .hf-widget-content ul li{padding-left:12px;}
}
.home-first {
margin-bottom: 0px
}
.home-first .sixin{
width: 2.8em;
}
.home-first .tese{
width: 1.1em;
}
@media (min-width:1024px) {
.home-first {
/*background: #fcfcfc*/
}
}
.home-first .aibkcontainer {
padding-top: 0
}
.home-first .vitara_slide_in {
margin-top: 15px;
margin-bottom: 15px;
border-radius: 3px
}
@media (min-width:1024px) {
.home-first .vitara_slide_in {
margin-top: 0;
margin-bottom: 0
}
}
.home-first .h-images {
box-sizing: content-box;
margin: 0;
padding: 0
}
.home-first .h-images:after,.home-first .h-images:before {
clear: both;
display: block;
visibility: none;
height: 0;
content: "";
line-height: 0
}
.home-first .h-images:after {
display: block;
margin: 0 -15px;
height: 0;
border-bottom: 15px solid #f2f2f2;
content: ''
}
@media (min-width:768px) {
.home-first .h-images:after {
display: none
}
}
@media (min-width:768px) {
.home-first .h-images {
display: box;
display: -ms-flexbox;
display: flex;
width: 100%;
justify-content: space-between
}
}
@media (min-width:1024px) {
.home-first .h-images {
width: 25%
}
}
.home-first .h-images .item-tuwen {
float: left;
padding: 0 6.5px;
width: 50%
}
@media (min-width:1024px) {
.home-first .h-images .item-tuwen {
float: none
}
}
@media (min-width:1024px) {
.home-first .h-images {
display: block;
box-sizing: border-box;
padding: 0 7.3333px
}
.home-first .h-images .item-tuwen {
padding: 0;
width: auto
}
}
.home-first .item-tuwen {
margin-bottom: 15px
}
@media (min-width:768px) {
.home-first .item-tuwen {
margin-bottom: 13px
}
}
.home-first .item-tuwen a {
position: relative;
display: block;
overflow: hidden;
border-radius: 3px
}
.home-first .item-tuwen a .thumb {
padding-top: 57%;
transition: all .2s;
transform-origin: center
}
.home-first .item-tuwen a strong {
position: absolute;
right: 0;
bottom: 0;
left: 0;
z-index: 10;
display: block;
padding: .4em .8em .6em;
background-image: linear-gradient(to bottom,rgba(0,0,0,.2) 0,rgba(0,0,0,.6) 100%);
background-repeat: repeat-x;
box-shadow: 0 -7px 15px rgba(0,0,0,.2);
color: #fff;
letter-spacing: .5px;
font-weight: 700;
font-size: 9pt;
line-height: 1.3
}
@media (min-width:768px) {
.home-first .item-tuwen a strong {
letter-spacing: 1px;
font-size: 14px;
line-height: 1.4
}
}
.home-first .hf-widget {
box-sizing: border-box;
margin-bottom: 15px;
padding: 14px 17px 0;
border: 1px solid #f2f2f2;
background: #fff;
box-shadow: 8px 8px 9pt rgba(255, 255, 255, 0);
border-radius: 20px;
}
@media (min-width:768px) {
.home-first .hf-widget {
overflow: hidden;
height: 135px
}
}
@media (min-width:1024px) {
.home-first .hf-widget {
margin-bottom: 0
}
}
.home-first .hf-widget [class*=" icon-"]:before,.home-first .hf-widget [class^=icon-]:before {
margin: 0
}
.home-first .hf-widget .hf-widget-title {
margin-bottom: 14px;
padding: 0 0 10px;
border-bottom: 1px solid #f2f2f2;
color: #383838;
letter-spacing: 1px;
font-weight: 700;
font-size: 15px;
line-height: 20px
}
.home-first .hf-widget .hf-widget-title a {
color: #383838
}
.home-first .hf-widget .hf-widget-title>i {
margin-right: 2px;
color: #2882c5
}
.home-first .hf-widget .hf-widget-title span {
margin-left: 10px;
color: #a7a7a7;
font-weight: 400;
font-size: 9pt;
line-height: 20px
}
@media (min-width:1024px) {
.home-first .hf-widget .hf-widget-title span {
display: none
}
}
@media (min-width:1330px) {
.home-first .hf-widget .hf-widget-title span {
display: inline
}
}
.home-first .hf-widget .hf-widget-title .pages {
float: right;
padding-top: 2px
}
.home-first .hf-widget .hf-widget-title .pages .next,.home-first .hf-widget .hf-widget-title .pages .prev {
float: left;
margin: 0;
padding: 0 2px;
height: 1pc;
border: 0px solid #eee;
color: #ccc;
font-size: 15px;
line-height: 15px;
cursor: pointer
}
.home-first .hf-widget .hf-widget-title .pages .next:hover,.home-first .hf-widget .hf-widget-title .pages .prev:hover {
color: #2882c5
}
.home-first .hf-widget .hf-widget-title .pages .prev {
border-right: none
}
.home-first .hf-widget .hf-tags {
margin-bottom: -10px
}
@media (min-width:768px) {
.home-first .hf-widget .hf-tags {
overflow: hidden;
height: 4pc
}
}
.home-first .hf-widget .hf-tags a {
display: inline-block;
margin: 0 5px 10px;
padding: 0 5px;
height: 22px;
border-radius: 20px;
background: #f9f9f9;
color: #888;
white-space: nowrap;
font-size: 9pt;
line-height: 22px;
word-break: break-all
}
.home-first .hf-widget .hf-tags a.style_orange,.home-first .hf-widget .hf-tags a:hover {
background: #2882c5;
color: #fff
}
.home-first .hf-widget-4 .hf-widget-title {
margin-bottom: 19px
}
.home-first .hf-widget-4 .hf-widget-content {
color: #888;
font-size: 14px
}
.home-first .hf-widget-4 .hf-widget-content a {
color: #888
}
.home-first .hf-widget-4 .hf-widget-content a:hover {
color: #2882c5
}
.home-first .hf-widget-4 .hf-widget-content h3 {
overflow: hidden;
height: 22px;
font-weight: 400;
font-size: 13px;
line-height: 22px
}
.home-first .hf-widget-4 .hf-widget-content em {
float: right;
padding: 0 5px;
height: 22px;
border-radius: 20px;
background: #e3f0f8;
color: #2882c5;
font-style: normal;
font-size: 9pt;
line-height: 22px
}
.home-first .hf-widget-4 .hf-widget-content ul {
background: #fff
}
.home-first .hf-widget-4 .hf-widget-content ul li {
margin-bottom: 5px
}
.home-first .hf-widget-4 .hf-widget-content ul li:last-child {
margin-bottom: 0
}
.home-first .hf-widget-1 .hf-widget-content a {
color: #888
}
.home-first .hf-widget-1 .hf-widget-content a:hover {
color: #2882c5
}
.home-first .hf-widget-1 .hf-widget-content li {
float: left;
box-sizing: border-box;
padding: 0 10px;
width: 25%;
text-align: center;
font-size: 9pt
}
.home-first .hf-widget-1 .hf-widget-content li .thumb {
margin: 0 auto 4px;
padding-top: 36px;
width: 36px
}
.home-first .hf-widget-1 .hf-widget-content li span {
display: block;
overflow: hidden;
height: 1pc;
line-height: 1pc
}
.home-first .hf-widget-1 .hf-widget-content .scroll-h {
margin: 0 -10px
}
.home-first .scroll-h {
position: relative;
overflow: hidden;
height: 56px
}
.home-first .scroll-h ul {
position: absolute;
top: 0;
left: 0;
width: 100%;
transition: all .2s
}
.home-first .scroll-h ul:after,.home-first .scroll-h ul:before {
clear: both;
display: block;
visibility: none;
height: 0;
content: "";
line-height: 0
}
.home-first .scroll-h .holdon {
position: absolute;
top: 0;
left: 100%
}
.home-first .scroll-h .holdon-prev {
left: -100%
}
.home-first .hf-widget-hot-cats .hhicon {
display: inline-block;
margin-bottom: 5px;
width: 36px;
height: 36px;
border-radius: 100%;
background: #fff5f0;
color: #2882c5;
text-align: center;
font-size: 20px;
line-height: 36px
}
.home-first .hf-widget-hot-cats .scroll-h li a {
display: block
}
.home-first .hf-widget-hot-cats .scroll-h li a:hover .hhicon {
background: #2882c5;
color: #fff
}
.home-first .thumb {
position: relative;
display: block;
overflow: hidden;
padding-top: 66.7%;
width: 100%;
height: 0;
background-color: transparent;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
transition: all .2s
}
.home-first i {
font-weight: 300
}
@media screen and (max-width:720px) {
.home-first .hf-widget-1 .hf-widget-content .scroll-h,.home-first .hf-widget-content {
margin: 1pc -10px
}
}
.aibkcontainer {
position: relative;
overflow: hidden;
margin: 0 auto;
width: 100%
}
@media (min-width:768px) {
.aibkcontainer {
overflow: visible;
max-width: 8in
}
}
@media (min-width: 1024px){
.aibkcontainer {
max-width: 100%;
}
}
@media (min-width: 1024px){
.container {
max-width: 1300px;
}
}
.aibkcontainer:after,.aibkcontainer:before {
clear: both;
display: block;
visibility: none;
height: 0;
content: "";
line-height: 0
}
.aibkcontainer .row {
margin: 0 -7.3333px
}
.aibkcontainer .col-1-4,.aibkcontainer .col-2-4,.aibkcontainer .col-3-4 {
float: left;
box-sizing: border-box;
padding: 0 7.3333px;
width: 100%
}
@media (min-width:768px) {
.aibkcontainer .col-1-4 {
width: 50%
}
}
@media (min-width:1024px) {
.aibkcontainer .col-1-4 {
width: 25%
}
}
@media (min-width:768px) {
.aibkcontainer .col-2-4 {
width: 100%
}
}
@media (min-width:1024px) {
.aibkcontainer .col-2-4 {
padding-right: 8px;
width: 50%
}
}
@media (min-width:768px) {
.aibkcontainer .col-3-4 {
width: 100%
}
}
@media (min-width:1024px) {
.aibkcontainer .col-3-4 {
padding-right: 8.6666px;
width: 75%
}
}
/*首页四格结束*/
声明：本站部分文章来源于网络，如有危害到您的合法权益请联系客服
