京东首页项目(3)---底部模块实现

有关京东首页项目之前已经写了两篇博客：

1、京东首页项目(1)---总述

2、京东首页项目(2)---顶部模块实现

这篇就开始写京东首页页面底部分。这篇所需完成的工作如下：

这里一共完成3个部分，1、多快好省模块 2、帮助模块 3、版权模块。

一、多快好省模块

这个模块主要是2部分:

文字部分（浮动实现）
图片部分（绝对定位实现）

如图

html部分

        <div class="footer-service">  
                <div class="w footer-service-inner">
                    <ul class="clearfix">
                         <li>
                              <div class="service_unit">
                                   <h5>多</h5>             <!-- 图片部分 -->
                                   <p>品类齐全，轻松购物</p> <!-- 文字部分 -->
                              </div>
                         </li>
                         <li>
                              <div class="service_unit">
                                   <h5 class="kuai">快</h5>
                                   <p>多仓直发，极速配送</p>
                              </div>
                         </li>  
                         <li>
                              <div class="service_unit">
                                   <h5 class="hao">好</h5>
                                   <p>正品行货，精致服务</p>
                              </div>
                         </li>
                         
                         <li>
                              <div class="service_unit">
                                   <h5 class="sheng">省</h5>
                                   <p>天天低价，畅选无忧</p>
                              </div>
                         </li>
                    </ul>
                </div>
            </div>

css部分

.footer-service {                  /*1、多快好省模块*/
    border-bottom: 1px solid #DEDEDE; /*设置底部样式*/
}
.footer-service-inner {  
    padding: 30px 0;

}
.footer-service-inner li {  
    float: left;
    width: 297px;
    height: 42px;
}
.service_unit {
    width: 225px;
    height: 42px;
    margin: 0 auto;
    position: relative;
}
.service_unit h5 {
    width: 36px;
    height: 42px;
    position: absolute;
    top: 0;
    left: 0;
    background: url(../images/ico_service.png) no-repeat;
    text-indent: -999px;
    overflow: hidden;
}
.service_unit p {
    line-height: 42px;
    margin-left: 45px;
    font-size: 18px;
    font-weight: 700;

}
.service_unit .kuai {
    background-position: 0 -44px;
}
.service_unit .hao {
    background-position: 0 -86px;
}
.service_unit .sheng {
    background-position: 0 -128px;
}

二、帮助模块模块

这个模块分为3部分:

购物指南（左浮动实现）
京东自营覆盖区县（右浮动+定位实现)

如图

HTML部分

  <div class="w help">
                    <dl>
                         <dt>购物指南</dt>
                         <dd><a href="#">购物流程</a></dd>
                         <dd><a href="#">会员介绍</a></dd>
                         <dd><a href="#">生活旅行</a></dd>
                         <dd><a href="#">常见问题</a></dd>
                         <dd><a href="#">大家电</a></dd>
                         <dd><a href="#">联系客服</a></dd>
                    </dl>
                    <dl>
                         <dt>购物指南</dt>
                         <dd><a href="#">购物流程</a></dd>
                         <dd><a href="#">会员介绍</a></dd>
                         <dd><a href="#">生活旅行</a></dd>
                         <dd><a href="#">常见问题</a></dd>
                         <dd><a href="#">大家电</a></dd>
                         <dd><a href="#">联系客服</a></dd>
                    </dl>
                    <dl>
                         <dt>购物指南</dt>
                         <dd><a href="#">购物流程</a></dd>
                         <dd><a href="#">会员介绍</a></dd>
                         <dd><a href="#">生活旅行</a></dd>
                         <dd><a href="#">常见问题</a></dd>
                         <dd><a href="#">大家电</a></dd>
                         <dd><a href="#">联系客服</a></dd>
                    </dl>
                    <dl>
                         <dt>购物指南</dt>
                         <dd><a href="#">购物流程</a></dd>
                         <dd><a href="#">会员介绍</a></dd>
                         <dd><a href="#">生活旅行</a></dd>
                         <dd><a href="#">常见问题</a></dd>
                         <dd><a href="#">大家电</a></dd>
                         <dd><a href="#">联系客服</a></dd>
                    </dl>
                    <dl>
                         <dt>购物指南</dt>
                         <dd><a href="#">购物流程</a></dd>
                         <dd><a href="#">会员介绍</a></dd>
                         <dd><a href="#">生活旅行</a></dd>
                         <dd><a href="#">常见问题</a></dd>
                         <dd><a href="#">大家电</a></dd>
                         <dd><a href="#">联系客服</a></dd>
                    </dl>
                    <dl class="cover">
                         <dt>京东自营覆盖区县</dt>
                         <dd class="info">京东已向全国2661个区县提供自营配送服务，支持货到付款、POS机刷卡和售后上门服务。
                         </dd>
                         <dd class="more"><a href="#">查看详情 > </a></dd>
                         
                    </dl>
            </div>

CSS部分

.help {                   /*2、帮助模块*/
    height: 180px;
    /* background-color: pink; */
    padding-top: 20px;
}
.help dl {
    float: left;
    width: 195px;
}
.help dt {
    font-size: 14px;
    font-weight: 700;
    color: #666;
    height: 30px;
}
.help dd {
    height: 22px;
}
.help dd a{
    color: #727272;
    font-size: 12px;
}
.help dd a:hover {
    color: #f10215;
}

.help .cover {
    float: right;
    width: 207px;
    height: 150px;
    background: url(../images/ico_footer.png) no-repeat;
}
.cover dt {
    text-align: center;
}
.help .info {
    width: 175px;
    height: 50px;
    font-size: 12px;
    margin-top: 5px;
    margin-left: 10px;
    line-height: 18px;
    color: #727272;
}
.more {
    text-align: right;
    padding-right: 10px;
}

三、版权模块

这个模块分为3部分

关于我们
京公网安备
图片

如图

html部分

 <div class="w copyright">               
                    <div class="links">
                         <a href="#">关于我们</a>
                         <span>|</span>
                         <a href="#">关于我们</a>
                         <span>|</span>
                         <a href="#">关于我们</a>
                         <span>|</span>
                         <a href="#">关于我们</a>
                         <span>|</span>
                         <a href="#">关于我们</a>
                         <span>|</span>
                         <a href="#">关于我们</a>
                         <span>|</span>
                         <a href="#">关于我们</a>
                         <span>|</span>
                         <a href="#">关于我们</a>
                         <span>|</span>
                         <a href="#">关于我们</a>
                         <span>|</span>
                         <a href="#">关于我们</a>
                         <span>|</span>
                         <a href="#">关于我们</a>
                         <span>|</span>
                         
                         <a href="#">English</a>
                         <span>|</span>
                         <a href="#">Site</a>
                         <span>|</span>
                         <a href="#">Media & IR</a>
                         <span>|</span>
                    </div>

                    <div class="c-info">
                         <p>京公网安备 11000002000088号|京ICP证070359号|互联网药品信息服务资格证编号(京)-经营性-2014-0008|新出发京零 字第大120007号</p>
                         <p>互联网出版许可证编号新出网证(京)字150号|出版物经营许可证|网络文化经营许可证京网文[2014]2148-348号|违法和不良信息举报电话：4006561155</p>
                         <p>Copyright © 2004 - 2017  京东JD.com 版权所有|消费者维权热线：4006067733经营证照</p>
                         <p>京东旗下网站：京东支付|京东云</p>
                    </div>
                    <div class="tupian">
                         <a href="#"></a>
                         <a href="#" class="kexin"></a>
                         <a href="#"></a>
                         <a href="#"></a>
                         <a href="#"></a>
                         <a href="#"></a>
                    </div>
          </div>

CSS部分

.copyright {          /*3、版权模块*/
    border-top: 1px solid #ccc;
    padding-top: 15px;
}
.links {
    text-align: center;
}
.links a {
    color: #727272;
    font-size: 12px;
}
.links span {
    font-size: 12px;
    color: #D4CDCD;
    margin: 0 6px;
}
.c-info {
    font-size: 12px;
    color: #9E9E9B;
    text-align: center;
    line-height: 20px;
    margin-top: 10px;
}
.tupian {
    text-align: center;
    margin-top: 10px;
}
.tupian a{
    width: 103px;
    height: 32px;
    display: inline-block;
    background: url(../images/ico_footer.png) no-repeat 0 -151px;
}
.tupian .kexin {
    background-position: -104px -151px;
}

你如果愿意有所作为，就必须有始有终。(13)

来源：https://www.cnblogs.com/qdhxhz/p/11884735.html

标签

互联网电商

电子商务

font-size

text-align