Html代码：
<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
}
}