<div class="home-section-division header_fixed_from_here">
	<div class="containers">
	  <div class="home-division">
		<ul>
		  <li><div class="item item_3"><a href="#">
			<div class="item-thumb"><i class="b2font b2-landscape-line"></i> </div>
			<h3>菜单<span class="go">go<i class="ico-go"></i></span> </h3>
			<p>正版原创设计作品集</p>
		  </a></div></li>
		  <li><div class="item item_1"><a href="/vips">
			<div class="item-thumb"><i class="b2font b2-profile-fill"></i> </div>
			<h3>VIP会员<span class="go">go<i class="ico-go"></i></span></h3>
			<p>高级资源抢先使用</p>
		  </a></div></li>
		  <li><div class="item item_2"><a href="#">
			<div class="item-thumb"><i class="b2font b2-bar-chart-fill"></i> </div>
			<h3>菜单<span class="go">go<i class="ico-go"></i></span></h3>
			<p>玩转潮流，体验快乐</p>
		  </a></div></li>
		  <li class="li_4"><div class="item item_4"><a href="#">
				<div class="item-thumb"><i class="b2font b2-heart-pulse-line"></i> </div>
			<h3>菜单<span class="go">go<i class="ico-go"></i></span></h3>
			<p>国内外品牌聚集地</p>
		  </a></div></li>
		</ul>
	  </div>
	</div>
  </div>

Css代码：

.item-thumb i{
    font-size: 50px;
}

.home-section-division {
    background: #fff;
}
.containers {
    width: 100%;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    zoom: 1;
}
@media (min-width: 768px) {
   .containers {
      overflow: visible;
    max-width: 1280px;
    }
}
.home-section-division .home-division {
    overflow: hidden;
}
.home-section-division .home-division a {
    color: #005aff;
    display: block;
    padding: 20px 0 10px;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    text-align: center
}
@media (min-width:768px) {
    .home-section-division .home-division a {
        text-align: left;
        padding: 22px 10px 30px 50px
    }
}
@media (min-width:1330px) {
    .home-section-division .home-division a {
        /*padding-right: 60px;*/
        padding-left: 106px
    }

}
.home-section-division .home-division a:hover .item-thumb {
    color: #3385ff
}
.home-section-division .home-division a:hover .icon-inspiration-nav-1:before {
    content: "\e82c"
}
.home-section-division .home-division a:hover .icon-tool-nav-1:before {
    content: "\e82a"
}
.home-section-division .home-division a:hover .icon-course-nav-1:before {
    content: "\e82e"
}
.home-section-division .home-division ul {
    margin: 0 -14px;
    overflow: hidden
}
.home-section-division .home-division li {
    float: left;
    line-height: 1;
    width: 25%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 0px 0 4px;
}
.home-section-division .home-division li h3 {
    font-size: 13px;
    line-height: 1;
    margin: 10px 0;
    color: #005aff;
    font-weight: 400
}
@media (min-width:768px) {
    .home-section-division .home-division li h3 {
        font-size: 18px;
        font-weight: 700
    }
}
.home-section-division .home-division li h3 .go {
    background: #3385ff;
    display: none;
    height: 20px;
    line-height: 20px;
    padding: 0px 0px 3px 8px;
    -webkit-border-radius: 14px;
    border-radius: 14px;
    color: #fff;
    font-weight: 400;
    font-size: 12px;
    text-transform: uppercase;
    vertical-align: top
}
@media (min-width:1024px) {
    .home-section-division .home-division li h3 .go {
        display: inline-block
    }
}
.home-section-division .home-division li h3 .go i {
    vertical-align: middle;
    margin: -2px 3px 0
}
.home-section-division .home-division li p {
    font-size: 13px;
    color: #9a9a9a;
    display: none
}
@media (min-width:1024px) {
    .home-section-division .home-division li p {
        display: block
    }
}
.home-section-division .home-division li .item-thumb {
    font-size: 28px
}
@media (max-width:1023px) {
    .home-section-division .home-division li .item-thumb {
        color: #3385ff
    }
}
@media (min-width:768px) {
    .home-section-division .home-division li .item-thumb {
        position: absolute;
        left: 5px;
        top: 20px;
        font-size: 40px
    }
}
@media (min-width:1330px) {
    .home-section-division .home-division li .item-thumb {
        top: 30px;
        left: 50px
    }
}
@media (min-width:1024px) {
    .home-section-division .home-division li.li_4 .item {
/*        background: #f3f8ff;*/
        -webkit-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
        color: #3385ff
    }
    .home-section-division .home-division li.li_4 .item .item-thumb,.home-section-division .home-division li.li_4 .item h3 {
        color: #3385ff
    }
    .home-section-division .home-division li.li_4 .item:hover {
        background: #3385ff;
        -webkit-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
        color: #fff
    }
    .home-section-division .home-division li.li_4 .item:hover h3,.home-section-division .home-division li.li_4 .item:hover i,.home-section-division .home-division li.li_4 .item:hover p {
        color: #fff
    }


    .home-section-division .home-division li .item {
/*        background: #f3f8ff;*/
        -webkit-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
        color: #3385ff
    }
    .home-section-division .home-division li .item .item-thumb,.home-section-division .home-division li .item h3 {
        color: #3385ff
    }
    .home-section-division .home-division li .item:hover {
        background: #3385ff;
        -webkit-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
        color: #fff
    }
    .home-section-division .home-division li .item:hover h3,.home-section-division .home-division li .item:hover i,.home-section-division .home-division li .item:hover p {
        color: #fff
    }
}