前端-赶集网（七）

底部部分

代码展示

html

<!--赶集招标 start-->
<div class="gj-bbs">
    <div class="tool gj-render">
        <h2>赶集招标</h2>
        <ul>
            <li><a class='icon_1' rel="nofollow" href="#"><span>家庭保洁</span></a></li>
            <li><a class='icon_2' rel="nofollow" href="#"><span>企业保洁</span></a></li>
            <li><a class='icon_3' rel="nofollow" href="#"><span>育儿嫂</span></a></li>
            <li><a class='icon_4' rel="nofollow" href="#"><span>月嫂</span></a></li>
            <li><a class='icon_5' rel="nofollow" href="#"><span>保姆</span></a></li>
            <li><a class='icon_6' rel="nofollow" href="#"><span>搬家</span></a></li>
            <li><a class='icon_7' rel="nofollow" href="#"><span>装修装饰</span></a></li>
            <li><a class='icon_8' rel="nofollow" href="#"><span>租车服务</span></a></li>
            <li><a class='icon_9' rel="nofollow" href="#"><span>担保贷款</span></a></li>
            <li><a class='icon_10' rel="nofollow" href="#"><span>物流货运</span></a></li>
            <li><a class='icon_11' rel="nofollow" href="#"><span>网站建设</span></a></li>
            <li><a class='icon_12' rel="nofollow" href="#"><span>工商注册</span></a></li>
        </ul>
    </div>
    <div class="tool life-helper">
        <h2>生活助手</h2>
        <ul>
            <li><a class="icon_13" rel="nofollow" href="#"><span>天气预报</span></a></li>
            <li><a class="icon_14" rel="nofollow" href="#"><span>快递查询</span></a></li>
            <li><a class="icon_15" rel="nofollow" href="#"><span>手机充值</span></a></li>
            <li><a class="icon_16" href="#"><span>商务租车</span></a></li>
            <li><a class="icon_17" rel="nofollow" href="#"><span>火车票</span></a></li>
            <li><a class="icon_18" rel="nofollow" href="#"><span>日历</span></a></li>
            <li><a class="icon_19" rel="nofollow" href="#"><span>水电煤</span></a></li>
            <li><a class="icon_20" rel="nofollow" href="#"><span>在线地图</span></a></li>
            <li><a class="icon_21" rel="nofollow" href="#"><span>查违章</span></a></li>
            <li><a class="icon_22" href="#"><span>外卖订餐</span></a></li>
        </ul>
    </div>
    <div class="tool aplication-center">
        <h2>应用中心</h2>
        <ul>
            <li><a class="icon_23" rel="nofollow" href="#"><span>赶集网</span></a></li>
            <li><a class="icon_24" rel="nofollow" href="#"><span>招才猫直聘</span></a></li>
            <li><a class="icon_25" rel="nofollow" href="#"><span>58到家</span></a></li>
            <li><a class="icon_26" rel="nofollow" href="#"><span>转转</span></a></li>
            <li><a class="icon_27" rel="nofollow" href="#"><span>中华英才</span></a></li>
            <li><a class="icon_28" rel="nofollow" href="#"><span>瓜子二手车</span></a></li>
            <li><a class="icon_30" rel="nofollow" href="#"><span>驾校一点通</span></a></li>
        </ul>
    </div>
</div>
<!--赶集招标 end-->


<!--footer start -->
<div id="footer">
    <div class="f-area1 clearfix">
        <a class="gjLogo" rel="nofollow"></a>
        <dl class="dl"><dt><a rel="nofollow"   href="#">关于赶集</a></dt>
            <dd><a rel="nofollow" href="#">公司简介</a></dd>
            <dd><a rel="nofollow" href="#">企业文化</a></dd>
            <dd><a rel="nofollow" href="#">隐私政策</a></dd>
        </dl>
        <dl class="dl"><dt><a rel="nofollow"   href="#">网站合作</a></dt>
            <dd><a rel="nofollow" href="#">赶集推广</a></dd>
            <dd><a rel="nofollow" href="#">渠道招商</a></dd>
        </dl>
        <dl class="dl"><dt><a rel="nofollow"   href="#">帮助中心</a></dt>
            <dd><a rel="nofollow" href="#">常见问题</a></dd>
            <dd><a rel="nofollow" href="#">求职指南</a></dd>
            <dd><a rel="nofollow" href="#">防骗指南</a></dd>
            <dd><a rel="nofollow" href="#">协议规则公示</a></dd>
            <dd><a rel="nofollow" href="#">违规商户信息公示</a></dd>
            <dd><a rel="nofollow" href="#">知识产权投诉</a></dd>
        </dl>
        <dl class="dl"><dt>安全中心</dt>
            <dd><a rel="nofollow" href="#">账号登录</a></dd>
            <dd><a rel="nofollow" href="#">安全设置</a></dd>
            <dd><a rel="nofollow" class='red' href="#">手机号冒用</a></dd>
        </dl>
        <dl class="dl"><dt>关注我们</dt>
            <dd><a rel="nofollow" href="#">新浪微博</a></dd>
            <dd><a rel="nofollow" href="#">官网微信</a></dd>
        </dl>
    </div>
    <div class="f-area2 clearfix">
        <p class="ftext"><img src="picture/footer-jgw-beian.png"><a rel="nofollow" href="#">京公网安备 11010502034637</a>&nbsp;&nbsp;
            <a rel="nofollow" href="#">京ICP证110986号</a>&nbsp;&nbsp;<a rel="nofollow" href="#">京ICP备11045189号-2</a>&nbsp;&nbsp;
            <a rel="nofollow" href="#">乙测资字1110849</a>&nbsp;&nbsp;<a rel="nofollow" href="#">人力资源服务许可证及备案凭证</a>&nbsp;&nbsp;
            <a rel="nofollow" href="#">文网证资质</a>&nbsp;&nbsp;违法信息/未成年人举报4008180133&nbsp;&nbsp;<a rel="nofollow" href="#">jbpt@58ganji.com</a></p>
        <p class="gj-info">
            <a class='beianxinxi' rel="nofollow" href="#">经营网站备案信息</a><a class='jubaozhongxin' rel="nofollow" href="#">网上有害信息举报专区</a></p>
    </div>
</div>
<!--footer end-->

<!--浮层 start-->
<div class="footer-b">
    <div></div>
</div>
<div class="footer-l"></div>
<!--浮层 end-->

css

#footer .dl a.red {
    color: #ff7200
}

#footer {
    width: 1190px;
    margin: 0 auto;
    background-color: #fff;
    font-size: 12px;
    color: #999;
    line-height: 30px;
    text-align: center;
}

.f-area2 .ftext a {
    color: #999
}

.f-area2 .ftext a:hover {
    text-decoration: none;
    color: #ff7200
}

.f-area2 .ftext img {
    vertical-align: middle
}

#footer .gjLogo {
    margin: 16px 65px 0 40px
}

#footer .dl {
    width: 160px;
    float: left;
    margin-right: 20px;
    text-align: left
}

#footer .dl a {
    color: #999
}

#footer .dl dt,
#footer .dl dt a {
    margin-bottom: 20px;
    line-height: 19px;
    font-size: 16px;
    font-weight: bold;
    color: #676767
}

#footer .dl dd {
    line-height: 30px;
    font-size: 12px;
    color: #999
}

#footer .f-area1 {
    padding: 30px 0;
    border-bottom: 1px solid #f7f7f7
}

#footer .f-area2 {
    padding: 19px 0 21px
}

.gj-info {
    margin-top: 13px;
    text-align: center
}

#footer .f-area2 .gj-info a {
    margin: 0 3px;
    display: inline-block;
    height: 37px;
    text-indent: -9999px;
    /*隐藏文字*/
    background: url(images/gj_info_ico.png) no-repeat;
}

.iconHD #footer .f-area2 .gj-info a {
    background: url(images/gj_info_ico_hd.png) no-repeat;
    background-size: 540px 37px
}

#footer .f-area2 .gj-info a {
    *display: inline;
}

#footer .f-area2 .gj-info .chengxinwang {
    width: 106px;
    background-position: 0 -0
}

#footer .f-area2 .gj-info .beianxinxi {
    width: 125px;
    background-position: -111px -0
}

#footer .f-area2 .gj-info .xinyongqiye {
    width: 126px;
    background-position: -242px -0
}

#footer .f-area2 .gj-info .jubaozhongxin {
    width: 166px;
    background-position: -374px -0
}

.footer-b {
    position: fixed;
    width: 100%;
    height: 160px;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000；
}

.footer-b div {
    position: absolute;
    width: 1209px;
    height: 192px;
    bottom: 0;
    left: 50%;
    margin-left: -604px;
    background: url(images/footer-b.png) no-repeat;
}

.footer-l {
    position: fixed;
    width: 100px;
    height: 100px;
    bottom: 0;
    left: -100%;
    background: url(images/footer-l.png) no-repeat;
    z-index: 1000;
}

赶集网效果图片展示