b2主题首页美化教程，幻灯片下方精美UI布局

<div class="hh_fenlei01">
    <div class="hh_fenlei01_warp">
        <ul class="hh_fenleilist">
            <li class="hh_fenleilist1"><a href="#"><i class="hh_fenleilist1_left"></i>
                    <div class="hh_fenleilist_right">
                        <h3>广告设计</h3>
                        <h4>广告设计频道专题</h4>
                </a></li>
            <li class="hh_fenleilist2"><a href="#"><i class="hh_fenleilist2_left"></i>
                    <div class="hh_fenleilist_right">
                        <h3>样机场景</h3>
                        <h4>各类样机场景下载</h4>
                </a></li>
            <li class="hh_fenleilist3"><a href="#"><i class="hh_fenleilist3_left"></i>
                    <div class="hh_fenleilist_right">
                        <h3>UI模板</h3>
                        <h4>国外整套素材打包下载</h4>
                </a></li>
            <li class="hh_fenleilist4"><a href="#"><i class="hh_fenleilist4_left"></i>
                    <div class="hh_fenleilist_right">
                        <h3>办公文档</h3>
                        <h4>快速完成老板交代的工作</h4>
                </a></li>
        </ul>
    </div>
</div>

<div class="hh_fenlei02">
    <div class="hh_fenlei02_warp">
        <ul class="hh_home_tags_3">
            <li class="hh_home_tags_3_list1 hh_home_tags_3_list">
                <ul class="hh_home_tags_3_listul">
                    <li><a href="#"><i class="sj sjicon_new_recruit"></i>广告专题</a></li>
                    <li><a href="#"><i class="sj sjicon_new_recruit"></i>样机专题</a></li>
                </ul>
            </li>
            <li class="hh_home_tags_3_list2 hh_home_tags_3_list">
                <ul class="hh_home_tags_3_listul">
                    <li><a href="#">广告海报</a></li>
                    <li><a href="#">手机样机</a></li>
                </ul>
            </li>
            <li class="hh_home_tags_3_list3 hh_home_tags_3_list">
                <ul class="hh_home_tags_3_listul">
                    <li><a href="#">印刷打印</a></li>
                    <li><a href="#">电脑样机</a></li>
                </ul>
            </li>
            <li class="hh_home_tags_3_list1 hh_home_tags_3_list">
                <ul class="hh_home_tags_3_listul">
                    <li><a href="#"><i class="sj sjicon_new_recruit"></i>ui模板</a></li>
                    <li><a href="#"><i class="sj sjicon_new_recruit"></i>办公文档</a></li>
                </ul>
            </li>
            <li class="hh_home_tags_3_list2 hh_home_tags_3_list">
                <ul class="hh_home_tags_3_listul">
                    <li><a href="#">UI模板</a></li>
                    <li><a href="#">ppt</a></li>
                </ul>
            </li>
            <li class="hh_home_tags_3_list3 hh_home_tags_3_list">
                <ul class="hh_home_tags_3_listul">
                    <li><a href="#">APP模板</a></li>
                    <li><a href="#">简历模板</a></li>
                </ul>
            </li>
            <li class="hh_home_tags_3_list1 hh_home_tags_3_list">
                <ul class="hh_home_tags_3_listul">
                    <li><a href="#"><i class="sj sjicon_new_recruit"></i>视频音乐</a></li>
                    <li><a href="#"><i class="sj sjicon_new_recruit"></i>网站设计</a></li>
                </ul>
            </li>
            <li class="hh_home_tags_3_list2 hh_home_tags_3_list">
                <ul class="hh_home_tags_3_listul">
                    <li><a href="#">AE模板</a></li>
                    <li><a href="#">banner</a></li>
                </ul>
            </li>
            <li class="hh_home_tags_3_list3 hh_home_tags_3_list">
                <ul class="hh_home_tags_3_listul">
                    <li><a href="#">音乐素材</a></li>
                    <li><a href="#">注册登录</a></li>
                </ul>
            </li>
        </ul>
        <ul class="hh_home_tags_4">
            <li class="hh_home_tags_3_list1 hh_home_tags_3_list">
                <ul class="hh_home_tags_3_listul">
                    <li><a href="#"><i class="sj sjicon_new_recruit"></i>图标插画</a></li>
                    <li><a href="#"><i class="sj sjicon_new_recruit"></i>设计工具</a></li>
                </ul>
            </li>
            <li class="hh_home_tags_3_list3 hh_home_tags_3_list">
                <ul class="hh_home_tags_3_listul">
                    <li><a href="#">图标素材</a></li>
                    <li><a href="#">软件插件</a></li>
                </ul>
            </li>
            <li class="hh_home_tags_3_list3 hh_home_tags_3_list">
                <ul class="hh_home_tags_3_listul">
                    <li><a href="#">插画素材</a></li>
                    <li><a href="#">字体下载</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>

<style>
    /*首页UI美化开始*/
    .hh_fenlei01 {
        width: 100%;
        margin-top: 45px;
    }

    .hh_fenlei01_warp {
        width: 1250px;
        padding: 20px;
        margin: 0 auto;
        background: #eee;
        height: 114px
    }

    .hh_fenlei01 ul {
        list-style: none;
    }

    .hh_fenlei01 ul li {
        float: left;
        width: 25%;
    }

    .hh_fenlei01 ul li a i {
        width: 72px;
        height: 72px;
        border-radius: 50%;
        margin-right: 28px;
        background-repeat: no-repeat;
        background-size: cover;
        display: block;
        float: left
    }

    .hh_fenlei01 ul li a {
        display: block;
    }

    .hh_fenleilist1_left {
        background-image: url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNDgiIGhlaWdodD0iNDgiPjxkZWZzPjxzdHlsZS8+PC9kZWZzPjxwYXRoIGQ9Ik0wIDUxMmE1MTIgNTEyIDAgMSAwIDEwMjQgMEE1MTIgNTEyIDAgMSAwIDAgNTEyeiIgZmlsbD0iIzc5NUZFNSIvPjxwYXRoIGQ9Ik0zMzYuNDU3IDI3Ny45NDNoMzUxLjA4NnY0NjguMTE0SDMzNi40NTdWMjc3Ljk0M3pNNTEyIDcxNi44YTI5LjI1NyAyOS4yNTcgMCAxIDAgMC01OC41MTQgMjkuMjU3IDI5LjI1NyAwIDAgMCAwIDU4LjUxNHpNMzk0Ljk3MSAzMzYuNDU3VjYyOS4wM0g2MjkuMDNWMzM2LjQ1N0gzOTQuOTd6IiBmaWxsPSIjRkZGIi8+PC9zdmc+)
    }

    .hh_fenleilist2_left {
        background-image: url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNDgiIGhlaWdodD0iNDgiPjxkZWZzPjxzdHlsZS8+PC9kZWZzPjxwYXRoIGQ9Ik0wIDUxMmE1MTIgNTEyIDAgMSAwIDEwMjQgMEE1MTIgNTEyIDAgMSAwIDAgNTEyeiIgZmlsbD0iI0YyN0Y2NiIvPjxwYXRoIGQ9Ik02NzguODk3IDI5Mi41NzFsNjAuNTMzIDcyLjE0OWE4Ny43NzEgODcuNzcxIDAgMCAxLTEzNC40NjUgMTEyLjg0NGwtNC43NTUtNS42NzZBMTE2Ljc1IDExNi43NSAwIDAgMSA1MTIgNTEyYTExNi43OCAxMTYuNzggMCAwIDEtODkuNjg4LTQxLjgzOGwtNi4yMTcgNy40MDJBODcuNzcxIDg3Ljc3MSAwIDAgMSAyODEuNjMgMzY0LjcybDYwLjUzMy03Mi4xNDloMzM2Ljc1ek03MDMuNDg4IDY3My43OTJsLTU4LjUxNCA1OC41MTR2LTU4LjUxNGg1OC41MTR6bS01OC41MTQtMTAyLjRoNTguNTE0djE2MC45MTRIMzIzLjE0NVY1NzEuMzkyaDU4LjUxNHYxMDIuNGgyNjMuMzE1di0xMDIuNHpNMzgxLjY1OSA3MzIuMzA2bC01OC41MTQtNTguNTE0aDU4LjUxNHY1OC41MTR6bS01OC41MTQtNTguNTE0bDU4LjUxNCA1OC41MTR2LTU4LjUxNGgtNTguNTE0em0zMjEuODI5IDB2LTEwMi40aDU4LjUxNHYxNjAuOTE0SDMyMy4xNDVWNTcxLjM5Mmg1OC41MTR2MTAyLjRoMjYzLjMxNXptNTguNTE0IDBsLTU4LjUxNCA1OC41MTR2LTU4LjUxNGg1OC41MTR6IiBmaWxsPSIjRkZGIi8+PC9zdmc+)
    }

    .hh_fenleilist3_left {
        background-image: url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNDgiIGhlaWdodD0iNDgiPjxkZWZzPjxzdHlsZS8+PC9kZWZzPjxwYXRoIGQ9Ik0wIDUxMmE1MTIgNTEyIDAgMSAwIDEwMjQgMEE1MTIgNTEyIDAgMSAwIDAgNTEyeiIgZmlsbD0iIzUwQzlBOCIvPjxwYXRoIGQ9Ik02MDcuMTQ0IDU1NS44ODZoNzkuNjI0bDczLjE0MiAxMTcuMDI4aC03OS42MjN6TTI2My4wMjIgMzM2LjQ1N2g3My42NTVsLS4wMyAxMzIuMDM4aDEwMi43MzdWMzM2LjQ1N2g3Mi42NzV2MzM2LjQ1N2gtNzIuNjc1VjU0Mi4yMzdIMzM2LjY3N3YxMzAuNjc3aC03My42NTV6IiBmaWxsPSIjRkZGIi8+PHBhdGggZD0iTTU1NS44ODYgNDk3LjM3MWg4Ny43NzFhNDMuODg2IDQzLjg4NiAwIDAgMCAwLTg3Ljc3MWgtODcuNzcxdi03My4xNDNoODcuNzcxYTExNy4wMjkgMTE3LjAyOSAwIDEgMSAwIDIzNC4wNTdoLTg3Ljc3MXYtNzMuMTQzeiIgZmlsbD0iI0ZGRiIvPjwvc3ZnPg==)
    }

    .hh_fenleilist4_left {
        background-image: url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNDgiIGhlaWdodD0iNDgiPjxkZWZzPjxzdHlsZS8+PC9kZWZzPjxwYXRoIGQ9Ik0wIDUxMmE1MTIgNTEyIDAgMSAwIDEwMjQgMEE1MTIgNTEyIDAgMSAwIDAgNTEyeiIgZmlsbD0iIzVBOTNFQyIvPjxwYXRoIGQ9Ik0yOTIuNTcxIDMyMS44MjlINzMxLjQzdjM1MS4wODVoLTE3NC4xMWwtMTE4LjMxNiA4OC4xMzctLjAyOS04OC4xMzdIMjkyLjU3MXoiIGZpbGw9IiNGRkYiLz48cGF0aCBkPSJNMzgwLjM0MyA0NTMuNDg2YTI5LjI1NyAyOS4yNTcgMCAxIDAgNTguNTE0IDAgMjkuMjU3IDI5LjI1NyAwIDEgMC01OC41MTQgMHpNNTg1LjE0MyA0NTMuNDg2YTI5LjI1NyAyOS4yNTcgMCAxIDAgNTguNTE0IDAgMjkuMjU3IDI5LjI1NyAwIDEgMC01OC41MTQgMHoiIGZpbGw9IiM1QTkzRUMiLz48cGF0aCBkPSJNNTk5Ljc3MSA0NTMuNDg2aDI5LjI1OHY0My44ODVhMTAyLjQgMTAyLjQgMCAwIDEtMTAyLjQgMTAyLjRINDk3LjM3YTEwMi40IDEwMi40IDAgMCAxLTEwMi40LTEwMi40di00My44ODVoMjkuMjU4djQzLjg4NWE3My4xNDMgNzMuMTQzIDAgMCAwIDczLjE0MiA3My4xNDNoMjkuMjU4YTczLjE0MyA3My4xNDMgMCAwIDAgNzMuMTQyLTczLjE0M3YtNDMuODg1eiIgZmlsbD0iIzVBOTNFQyIvPjwvc3ZnPg==)
    }

    .hh_fenleilist_right {
        float: left;
        padding-top: 12px;
    }

    .hh_fenleilist_right h3 {
        font-size: 18px;
        font-family: PingFangSC-Semibold;
        font-weight: 600;
        color: #000;
    }

    .hh_fenleilist_right h4 {
        margin-top: 6px;
        width: 120px;
        font-size: 12px;
        color: #666;
        font-weight: 400;
    }

    /*首页UI美化8小块*/
    .hh_fenlei02 {
        width: 100%;
        margin-top: 30px;
        margin-bottom: 40px;
    }

    .hh_fenlei02_warp {
        width: 1310px;
        margin: 0 auto;
        height: 114px;
        padding: 10px 5px;
    }

    .hh_home_tags_3 {
        display: block;
        float: left;
        list-style: none
    }

    .hh_home_tags_4 {
        display: block;
        float: left;
        list-style: none;
        margin-left: 46px;
    }

    .hh_home_tags_3_listul {
        list-style: none
    }

    .hh_home_tags_3_list {
        float: left;
    }

    .hh_home_tags_3_list:nth-child(3n+1) {
        margin-right: 30px;
        margin-left: 40px;
    }

    .hh_home_tags_3_list {
        margin-right: 30px;
        position: relative;
    }

    .hh_home_tags_3_list:nth-child(3n) {
        margin-right: 35px;
    }

    .hh_home_tags_3_list:first-child {
        margin-left: 0
    }

    .hh_home_tags_3_list:nth-child(3n):after {
        content: "";
        position: absolute;
        top: 50%;
        right: -35px;
        height: 70%;
        transform: translateY(-50%);
        border-right: 1px solid #eee;
    }

    .hh_home_tags_4 .hh_home_tags_3_list:nth-child(3n):after {
        content: none;
    }

    .hh_home_tags_4 li {
        margin-right: 20px
    }

    .hh_home_tags_3_listul li {
        margin-bottom: 0px;
    }

    .hh_home_tags_3_listul li a {
        font-size: 14px;
        color: #666;
        display: block;
        height: 40px;
        line-height: 40px;
    }

    .hh_home_tags_3_listul li a:hover {
        color: #000;
    }

    .hh_home_tags_3_listul li a i {
        font-style: normal;
        position: relative;
        right: 5px;
    }

    .hh_home_tags_3_list1 .hh_home_tags_3_listul li a {
        font-weight: 600;
        color: #333;
    }

    .hh_home_tags_3_list1 .hh_home_tags_3_listul li a:hover {
        color: #12bf94
    }

    .sj {
        color: #12bf94
    }

    .home-collections .clearfix .fl {
        font-size: 24px;
        font-weight: 600;
    }

    .home-collections .clearfix {
        margin-bottom: 20px;
        padding: 0;
    }

    .home-collections .clearfix .fr {
        display: block;
        /* width: 113px; */
        background: #f5f5f5;
        padding: 10px 20px;
        border-radius: 30px;
        font-size: 14px;
        text-align: center;
    }

    .home-collections .clearfix .fr:hover {
        color: #12bf94
    }

    .home-menu-post .zrz-menu-in {
        width: 44%;
        float: right;
    }

    .hh_home_zhuanhuanwenzhang_left_title {
        display: block;
        width: 20%;
        float: left;
        font-size: 24px;
        font-weight: 600;
        color: #333;
        line-height: 54px;
    }

    .jinrigengxinRmenu {
        box-shadow: 0 0 0
    }

    .hh_zhuanti_bootom {
        margin-bottom: 80px
    }

    .hh_home_chakangengduo {
        color: rgb(51, 51, 51);
        font-weight: 300;
        display: block;
        padding: 10px 20px;
        font-size: 14px;
        line-height: 1;
        position: relative;
        border-radius: 30px;
        background: #f5f5f5;
    }

    .hh_home_chakangengduo:hover {
        color: #12bf94
    }

    /**/
    .widget .box-header span {
        font-size: 12px;
        font-weight: 300;
        display: block;
        padding: 7px 20px;
        background: #f0eeee;
        border-radius: 30px;
    }

    .widget_user .bg-blue-light {
        box-shadow: 0px 0px 1px #dee3f0;
        border: 0;
    }

    .entry-content h2:before {
        content: "e630";
        color: #f13b03;
        font-family: sj !important;
    }

    .entry-title a {
        color: #666
    }

    .widget_user_achievement .widget-title span {
        font-size: 18px;
        font-weight: 700;
        /* display: none; */
        padding: 0;
        background: #fff;
        float: left;
    }

    .hh_fenleilist_right a h3:hover {
        color: #2978f7
    }

    .single .entry-content #gallery-1 .gallery-item {
        float: left;
        margin-top: 2%;
        margin-right: 2%;
        text-align: center;
        width: 48%;
        border: 1px solid #eaeeff;
        box-shadow: 0 0px 3px #f7f9ff;
    }

    .single .entry-content #gallery-1 .gallery-caption {
        display: none
    }

    .single .entry-content .wp-caption p {
        text-align: center
    }

    .home-menu-post li:hover a,
    .zrz-menu-post .current-menu-item a {
        color: #40aafd;
        box-shadow: 0 0 0;
        border: 1px solid #e5f4ff;
    }

    .home-menu-post li a {
        display: block;
        padding: 10px 20px;
        font-size: 14px;
        line-height: 1;
        position: relative;
        border-radius: 30px;
        color: #454574;
        border-radius: 30px;
        background: #ffffff;
        box-shadow: 0px 2px 6px #e4ebff;
        border: 1px solid #f8fcff;
    }

    .menu-top .zrz-post-menu .menu-item-has-children {
        padding: 18px 10px !important
    }

    @media (max-width:767px) {
        .entry-content img {
            max-width: 100% !important
        }

        .hh_fenlei01 ul li a span {
            background: #795fe5;
            width: 3rem;
            height: 3rem;
        }

        .hh_fenleilist_right h3 {
            font-size: 0.875rem;
            font-weight: 300;
            margin-left: 16px;
        }

        .hh_fenlei01 ul li a .fw {
            font-size: 1.5rem;
            line-height: 3rem;
            left: 11px;
        }

        .hh_fenleilist_right h4 {
            display: none
        }

        .hh_fenlei01_warp {
            height: 120px;
            padding: 20px 0px;
        }

        .hh_fenlei01 {
            margin-top: 5px;
            margin-bottom: 20px;
        }

        .home-collections .clearfix .fl {
            font-size: 1.2rem;
        }

        .hh_fenlei02 {
            display: none;
        }
    }

    .mission a b {
        color: #f16b6f;
    }

    .home_title .title h3:before {
        width: 3px;
        display: block;
        background: red
    }

    .hh_home_tags_3_listul li a .fw {
        color: #005cf9;
    }

    .home-menu-post .zrz-menu-in .fw {
        color: #545474;
    }

    .home-menu-post li:hover a,
    .zrz-menu-post .current-menu-item a .fw {
        color: #005cf9
    }

    .home .mobile-full-width.content-area {
        margin-top: 20px;
    }

    .site-content #bubble-home {
        box-shadow: 0 0 5px #e7f0fe;
    }

    .site-content #primary {
        box-shadow: 0 0 5px #e7f0fe;
    }

    .site-content .link-list ul li .box {
        box-shadow: 0 0 5px #dbe2fe;
    }
</style>