京东首页项目(3)---底部模块实现
京东首页项目(3)---底部模块实现
有关京东首页项目之前已经写了两篇博客：
这篇就开始写京东首页页面底部分。这篇所需完成的工作如下：
这里一共完成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)
