7b2美化之首页四格

头部自定义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%
    }
}
/*首页四格结束*/