前端-赶集网（六）

第四行第三列部分

代码展示

html

<!-- start-->
<div class="col col-4">
    <!--到家生活服务 start-->
    <div class='category list-wrap'>
        <!-- 幻灯片容器 -->
        <h3 class="daojia"><a rel="nofollow" href="#">家庭上门服务</a></h3>
        <div class='listWrap'>
            <div class='list'>
                <a class='item' rel="nofollow" href="#"><img src="picture/banjia.png" /><span>搬家</span></a>
                <a class='item' rel="nofollow" href="#"><img src="picture/lahuoyundongxi_che_1554901812758.png" /><span>拉货快运</span></a>
                <a class='item' rel="nofollow" href="#"><img src="picture/shouji.png" /><span>手机维修</span></a>
                <a class='item' rel="nofollow" href="#"><img src="picture/guandao.png" /><span>管道疏通</span></a>
                <a class='item' rel="nofollow" href="#"><img src="picture/shuiguan.png" /><span>水管龙头</span></a>


            </div>
        </div>


    </div>
    <!--到家生活服务 end-->



    <!--本地生活服务 start-->
    <div class="category noborder life">
        <h3><a href="#">本地生活服务</a></h3>
        <div class="clearfix"><a rel="nofollow" href="#" class="small-title">搬家估价</a>
            <span class="small-class"><a href="#" >无忧装修</a><i>|</i><a href="#">金牌商家</a></span>
        </div>
        <div class="clearfix"><a href="#" class="small-title">搬家</a><span class="small-class"><a href="#" >住宅</a><i>|</i><a href="#"  >金杯</a><i>|</i><a href="#"  >长途</a><i>|</i><a href="#"  >办公室</a></span></div>
        <div class="clearfix"><a href="#" class="small-title">家政</a><span class="small-class"><a href="#" >保洁</a><i>|</i><a href="#"  >保姆</a><i>|</i><a href="#"  >月嫂</a><i>|</i><a href="#"  >小时工</a></span></div>
        <div class="clearfix"><a href="#" class="small-title">物流</a><span class="small-class"><a href="#" >快递</a><i>|</i><a href="#"  >国际</a><i>|</i><a href="#"  >国内</a><i>|</i><a href="#"  >货运</a></span></div>
        <div class="clearfix"><a href="#" class="small-title">家电维修</a><span class="small-class"><a href="#" >空调</a><i>|</i><a href="#"  >移机</a><i>|</i><a href="#"  >冰箱</a><i>|</i><a href="#"  >电视</a></span></div>
        <div class="clearfix"><a href="#" class="small-title">房屋维修</a><span class="small-class"><a href="#" >门窗</a><i>|</i><a href="#"  >卫浴</a><i>|</i><a href="#"  >防水补漏</a></span></div>
        <div class="clearfix"><a href="#" class="small-title">便民</a><span class="small-class"><a href="#" >开锁</a><i>|</i><a href="#"  >干洗</a><i>|</i><a href="#"  >修鞋</a><i>|</i><a href="#"  >改衣</a></span></div>
        <div class="clearfix"><a href="#" class="small-title">风水</a><span class="small-class"><a href="#" >起名</a><i>|</i><a href="#"  >测字</a><i>|</i><a href="#"  >转运</a><i>|</i><a href="#"  >算命</a><i>|</i><a href="#"  >殡葬</a></span></div>
    </div>
    <!--本地生活服务 end-->



    <!--装修建材 start-->
    <div class="category noborder building">
        <h3><a href="#">装修建材</a>
        </h3>
        <div class="clearfix"><a href="#" class="small-title">装修</a><span class="small-class"><a href="#" >家装</a><i>|</i><a href="#"  >工装</a><i>|</i><a href="#"  >设计</a><i>|</i><a href="#"  >翻新</a></span></div>
        <div class="clearfix"><a href="#" class="small-title">建材</a><span class="small-class"><a href="#" >门窗</a><i>|</i><a href="#"  >家具</a><i>|</i><a href="#"  >窗帘</a><i>|</i><a href="#"  >地板</a></span></div>
        <div class="clearfix"><a href="#" class="small-title">服务</a><span class="small-class"><a href="#" >装修公司</a><i>|</i><a href="#"  >监工</a><i>|</i><a href="#"  >效果图</a></span></div>
    </div>
    <!--装修建材 end-->



    <!--婚纱摄影 start-->
    <div class="category noborder wedding">
        <h3><a href="#">婚庆摄影</a></h3>
        <div class="clearfix"><a href="#" class="small-title">婚庆</a><span class="small-class"><a href="#"   >策划</a><i>|</i><a href="#"  >婚车</a><i>|</i><a href="#"  >主持</a><i>|</i><a href="#"  >鲜花</a></span></div>
        <div class="clearfix"><a href="#" class="small-title">摄影</a><span class="small-class"><a href="#"   >婚纱</a><i>|</i><a href="#" >儿童</a><i>|</i><a href="#"  >商业</a><i>|</i><a href="#"  >摄像</a></span></div>
    </div>
    <!--婚纱摄影 end-->



    <!--旅游休闲 start-->
    <div class="category tour">
        <h3><a href="#">旅游休闲</a></h3>
        <div class="clearfix"><a href="#" class="small-title">旅游</a><span class="small-class"><a href="#" >旅行社</a><i>|</i><a href="#"  >自助游</a><i>|</i><a href="#"  >郊区游</a><i>|</i><a href="#"  >农家乐</a></span></div>
        <div class="clearfix"><a href="#" class="small-title">国内旅游</a><span class="small-class"><a href="#"  >出国旅游</a><i>|</i><a href="#"  >港澳游</a><i>|</i><a href="#"  >台湾游</a><i>|</i><a href="#"  >度假村</a></span></div>
        <div class="clearfix"><a href="#" class="small-title">餐饮美食</a><span class="small-class"><a href="#"  >中餐</a><i>|</i><a href="#"  >西餐</a><i>|</i><a href="#"  >自助餐</a><i>|</i><a href="#"  >烧烤</a></span></div>
        <div class="clearfix"><a href="#" class="small-title">运动休闲</a><span class="small-class"><a href="#"  >瑜伽</a><i>|</i><a href="#"  >健身</a><i>|</i><a href="#"  >游泳</a><i>|</i><a href="#"  >滑雪</a></span></div>
        <div class="clearfix"><a href="#" class="small-title">美容美体</a><span class="small-class"><a href="#"  >美发</a><i>|</i><a href="#"  >瘦脸</a><i>|</i><a href="#"  >祛痘</a><i>|</i><a href="#"  >隆鼻</a></span></div>
    </div>
    <!--旅游休闲 end-->
    <!--下载app start-->
    <p class="loadapp"><i class="goapp-ico"></i>下载赶集APP，找工作上岗快</p>
    <!--下载app end-->



    <!--商务服务 start-->
    <div class="category business">
        <h3><a href="#">本地商务服务</a></h3>
        <div class="clearfix"><a href="#" class="small-title">担保贷款</a><span class="small-class"><a href="#" >投资理财</a><i>|</i><a href="#"  >保险</a><i>|</i><a href="#"  >典当融资</a></span></div>
        <div class="clearfix"><a href="#" class="small-title">公司注册</a><span class="small-class"><a href="#" >专项审批</a><i>|</i><a href="#"  >专利注册</a><i>|</i><a href="#"  >企业变更</a></span></div>
        <div class="clearfix"><a href="#" class="small-title">网络建站</a><span class="small-class"><a href="#"  >网络维护</a><i>|</i><a href="#"  >网站优化</a><i>|</i><a href="#"  >服务器</a></span></div>
        <div class="clearfix"><a href="#" class="small-title">设计策划</a><span class="small-class"><a href="#"  >礼仪庆典</a><i>|</i><a href="#"  >展览会展</a><i>|</i><a href="#"  >喷绘招牌</a></span></div>
        <div class="clearfix"><a href="#" class="small-title">律师</a><span class="small-class"><a href="#"  >翻译</a><i>|</i><a href="#"  >会计</a><i>|</i><a href="#"  >app开发</a></span></div>
        <div class="clearfix"><a href="#" class="small-title">设备维修</a><span class="small-class"><a href="#"  >设备租赁</a><i>|</i><a href="#"  >食品批发</a><i>|</i><a href="#"  >节日礼品</a></span></div>
        <div class="clearfix"><a href="#" class="small-title">印刷</a><span class="small-class"><a href="#"   >礼品定制</a><i>|</i><a href="#"  >资质认证</a><i>|</i><a href="#"  >网站推广</a></span></div>
    </div>
    <!--商务服务end-->



    <!--教育培训 start-->
    <div class="category edu noborder">
        <h3><a href="#">教育培训</a></h3>
        <div class="clearfix"><a href="#" class="small-title">特长爱好</a>
            <span class="small-class"><a href="#" >舞蹈</a><i>|</i><a href="#" >乐器</a><i>|</i><a href="#"  >书画</a><i>|</i><a href="#"  >声乐</a></span>
        </div>
        <div class="clearfix"><a href="#" class="small-title">职业培训</a>
            <span class="small-class"><a href="#" class=""  >会计</a><i>|</i><a href="#" >设计</a><i>|</i><a href="#"  >技工</a><i>|</i>
<a  href="#"  >厨师</a>
</span>
        </div>
        <div class="clearfix"><a href="#" class="small-title">家教</a><span class="small-class"><a href="#"  >小学</a><i>|</i><a href="#"  >初中</a><i>|</i><a href="#"  >高中</a><i>|</i><a href="#"  >奥数</a></span></div>
        <div class="clearfix"><a href="#" class="small-title">育儿</a><span class="small-class"><a href="#"  >托管</a><i>|</i><a href="#"  >亲子</a><i>|</i><a href="#"  >智力开发</a><i>|</i><a href="#"  >学前教育</a></span></div>
        <div class="clearfix"><a href="#" class="small-title">留学</a><span class="small-class"><a href="#"  >日本</a><i>|</i><a href="#"  >美国</a><i>|</i><a href="#"  >加拿大</a><i>|</i><a href="#"  >新加坡</a></span></div>
        <div class="clearfix placeholderText"><a href="#" class="small-title">IT培训</a>
            <span class="small-class"><a href="#"  >网站设计</a><i>|</i>
<a href="#"  >软件开发</a><i>|</i><a href="#"  >思科认证</a></span>
        </div>
        <div class="clearfix placeholderText"><a href="#" class="small-title">高等教育</a>
            <span class="small-class"><a href="#" >考研培训</a><i>|</i>
<a  href="#"  >在职研究生</a><i>|</i><a href="#"  >MBA</a></span>
        </div>
        <div class="clearfix placeholderText"><a href="#" class="small-title">其他课程</a>
            <span class="small-class"><a href="#" class=""  >股票期货</a><i>|</i>
<a  href="#"  >拓展培训</a>
</span>
        </div>
    </div>
    <!--教育培训 end-->
</div>
<!--第四列 end-->
</div>
</div>

css

.col .loadapp {
    margin-top: -10px;
    padding: 10px 15px;
    height: 30px;
    line-height: 30px;
    cursor: pointer;
    background-color: #f8fcf4;
    color: #39bc30;
    border-bottom: 10px solid #f5f5f5
}

.col .loadapp .goapp-ico {
    margin-right: 10px;
    float: left;
    width: 30px;
    height: 30px;
    background-position: -210px -183px
}

.col .loadapp:hover {
    color: #fff;
    background: #39bc30
}

.col .loadapp:hover .goapp-ico {
    background-position: -256px -183px
}

.col-4 .list-wrap {
    position: relative;
    padding: 0;
    width: 330px;
    height: 156px;
    overflow: hidden
}

.col-4 .listWrap {
    width: 300px;
    margin: 16px 15px;
    height: 76px;
    overflow: hidden;
    *position: relative
}

.nextBtn,
.prevBtn {
    display: none;
    position: absolute;
    right: 0;
    width: 14px;
    height: 30px
}

.tab-more .nextBtn,
.tab-more .prevBtn {
    margin-top: 0;
    top: 68px
}

.tab-more:hover .nextBtn,
.tab-more:hover .prevBtn {
    display: block
}

.nextBtn {
    background-position: -91px -23px
}

.prevBtn {
    left: 0;
    background-position: -71px -23px
}

.list-wrap .prevBtn,
.list-wrap .nextBtn {
    top: 87px
}

.nextBtn:hover {
    background-position: -132px -23px
}

.prevBtn:hover {
    background-position: -111px -23px
}

.col-4 .list {
    width: 360px;
    height: 76px;
    text-align: center;
    left: 0;
    position: relative
}

.col-4 .list-wrap .daojia,
.col-4 .daojia-t {
    font-size: 16px;
    color: #333;
    margin: 0 12px;
    line-height: 47px;
    border-bottom: 1px solid #f7f7f7
}

.col-4 .list .item {
    float: left;
    width: 60px;
    height: 76px;
    text-align: center
}

.col-4 .list-wrap .wipePage .wipePage {
    width: 6px;
    height: 6px
}

.col-4 .list-wrap .wipePage {
    position: absolute;
    top: 0;
    right: 15px;
    height: 47px;
    line-height: 47px
}

.col-4 .list-wrap .wipePage .pageNum {
    margin: 0 3px;
    float: left;
    width: 8px;
    height: 8px;
    position: relative;
    top: 20px;
    background-position: -259px -243px
}

.col-4 .list-wrap .wipePage .pageNum.active {
    background-position: -247px -243px
}

.col-4 .list .item a {
    float: left;
    text-align: center;
    margin: 0 5px
}

.col-4 .list .item img {
    margin: 0 5px;
    width: 50px;
    height: 50px;
    float: left
}

.col-4 .list .item span {
    display: block;
    line-height: 30px
}
.gj-bbs {
    height: 230px;
    font-size: 12px;
    color: #333;
    line-height: 20px;
    text-align: center;
    border-top: 10px solid #f5f5f5
}

.gj-bbs a {
    color: #666
}

.gj-bbs .tool {
    float: left;
    margin: 0 15px 13px 15px
}

.gj-bbs ul {
    clear: both;
    zoom: 1;
    overflow: hidden
}

.gj-bbs .gj-render {
    width: 420px
}

.gj-bbs .life-helper {
    width: 350px;
    margin: 0 24px 13px
}

.gj-bbs .aplication-center {
    width: 280px
}

.gj-bbs h2 {
    margin-bottom: 10px;
    text-align: left;
    font-size: 16px;
    border-bottom: 1px solid #f5f5f5;
    line-height: 48px
}

.gj-bbs ul li {
    width: 70px;
    height: 70px;
    display: block;
    float: left;
    margin: 4px 0
}

.gj-bbs ul li a {
    position: relative;
    float: left;
    width: 70px;
    height: 70px;
    background: url(images/gjbbs_ico_1x.png) no-repeat;
}

.iconHD .gj-bbs ul li a {
    background-image: url(images/gjbbs_ico_hd.png) no-repeat;
    background-size: 70px
}

.gj-bbs ul li a:hover {
    background-color: #f6f6f6
}

.gj-bbs ul li a:hover span {
    text-decoration: underline
}

.gj-bbs ul li .icon_1 {
    background-position: 0 8px
}

.gj-bbs ul li .icon_2 {
    background-position: 0 -72px
}

.gj-bbs ul li .icon_3 {
    background-position: 0 -152px
}

.gj-bbs ul li .icon_4 {
    background-position: 0 -232px
}

.gj-bbs ul li .icon_5 {
    background-position: 0 -312px
}

.gj-bbs ul li .icon_6 {
    background-position: 0 -392px
}

.gj-bbs ul li .icon_7 {
    background-position: 0 -1192px
}

.gj-bbs ul li .icon_8 {
    background-position: 0 -1272px
}

.gj-bbs ul li .icon_9 {
    background-position: 0 -1352px
}

.gj-bbs ul li .icon_10 {
    background-position: 0 -1432px
}

.gj-bbs ul li .icon_11 {
    background-position: 0 -1512px
}

.gj-bbs ul li .icon_12 {
    background-position: 0 -1592px
}

.gj-bbs ul li .icon_13 {
    background-position: 0 -472px
}

.gj-bbs ul li .icon_14 {
    background-position: 0 -552px
}

.gj-bbs ul li .icon_15 {
    background-position: 0 -632px
}

.gj-bbs ul li .icon_16 {
    background-position: 0 -712px
}

.gj-bbs ul li .icon_17 {
    background-position: 0 -792px
}

.gj-bbs ul li .icon_18 {
    background-position: 0 -1672px
}

.gj-bbs ul li .icon_19 {
    background-position: 0 -1752px
}

.gj-bbs ul li .icon_20 {
    background-position: 0 -1832px
}

.gj-bbs ul li .icon_21 {
    background-position: 0 -1912px
}

.gj-bbs ul li .icon_22 {
    background-position: 0 -1992px
}

.gj-bbs ul li .icon_23 {
    background-position: 0 -872px
}

.gj-bbs ul li .icon_24 {
    background-position: 0 -952px
}

.gj-bbs ul li .icon_25 {
    background-position: 0 -1032px
}

.gj-bbs ul li .icon_26 {
    background-position: 0 -1112px
}

.gj-bbs ul li .icon_27 {
    background-position: 0 -2072px
}

.gj-bbs ul li .icon_28 {
    background-position: 0 -2152px
}

.gj-bbs ul li .icon_29 {
    background-position: 0 -2232px
}

.gj-bbs ul li .icon_30 {
    background-position: 0 -2312px
}

.gj-bbs ul li a span {
    width: 100%;
    display: block;
    position: absolute;
    bottom: 6px;
    line-height: 22px;
    left: 0
}
.hot {
    color: #fff;
    text-align: center
}

.hot.hot-11 {
    padding: 0 0 3px;
    display: block;
    font-size: 10px;
    position: absolute;
    top: 10px;
    left: 48px;
    width: 16px;
    height: 15px;
    line-height: 15px;
    background-position: -443px -184px
}

.hot.hot-3 {
    padding: 0 0 3px;
    font-size: 12px;
    position: absolute;
    z-index: 2;
    top: -13px;
    left: 193px;
    width: 44px;
    height: 19px;
    line-height: 19px;
    background-position: -369px -184px
}

.s-line1 {
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

.s-line2 {
    height: 36px;
}

赶集网效果图片展示