Pc区块菜单添加7b2

<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
    }
}

部分文章/资源来源于网络,文章标题下部均已标注来源,如有侵权,请点击此处联系客服进行删除,本站将会在第一时间内进行处理! 

如果您要搬运本站文章,请在文章底部标注

图床支持:https://cos.bheo.cn/

如果文章帮助到您,还请您点击一下广告支持本站一下!

部分文章/资源来源于网络,文章标题下部均已标注来源,如有侵权,请点击此处联系客服进行删除,本站将会在第一时间内进行处理! 

如果您要搬运本站文章,请在文章底部标注

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

如果文章帮助到您,还请您点击一下广告支持本站一下! 如果本帖存在的内容对您和您的利益产生损害,请立即通知我,将在最短时间内对其做出处理.本站提供的一切软件、教程和内容信息仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负.

给TA饼干
共{{data.count}}人
人已饼干
7b2美化

网站文章内底部增加声明

2022-10-6 9:45:58

7b2美化行业软件

wordpress阿里图标引入应用到网站详细步骤

2022-10-7 10:39:56

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索