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

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

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

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

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

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

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

一、多快好省模块

这个模块主要是2部分:

1. 文字部分 （浮动实现）
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;
	 297px;
	height: 42px;
}
.service_unit {
	 225px;
	height: 42px;
	margin: 0 auto;
	position: relative;
}
.service_unit h5 {
	 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部分:

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

如图

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;
	 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;
	 207px;
	height: 150px;
	background: url(../images/ico_footer.png) no-repeat;
}
.cover dt {
	text-align: center;
}
.help .info {
	 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部分

1. 关于我们
2. 京公网安备
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{
	 103px;
	height: 32px;
	display: inline-block;
	background: url(../images/ico_footer.png) no-repeat 0 -151px;
}
.tupian .kexin {
	background-position: -104px -151px;
}

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