底部 start
html部分
<div class="jd-footer">
<div class="service">
<div class="slogen">
<span class="item slogen1">
<img src="images/slogen1.png" alt="">
</span>
<span class="item slogen2">
<img src="images/slogen2.png" alt="">
</span><span class="item slogen3">
<img src="images/slogen3.png" alt="">
</span><span class="item slogen4">
<img src="images/slogen4.png" alt="">
</span>
</div>
<div class="w shopping clearfix">
<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>
<div class="coverage">
<div class="dt">京东自营覆盖区县</div>
<div class="dd">
<p>京东已向全国2661个区县提供自营配送服务,支持货到付款、POS机刷卡和售后上门服务。</p>
<p class="look"><a href="#">查看详情 ></a></p></div>
</div>
</div>
</div>
<div class="w againw" >
<div class="links">
<a href="#">关于我们</a>|
<a href="#">联系我们</a>|
<a href="#">联系客服</a>|
<a href="#">商家入驻</a>|
<a href="#">营销中心</a>|
<a href="#">手机京东</a>|
<a href="#">友情链接</a>|
<a href="#">销售联盟</a>|
<a href="#">京东社区</a>|
<a href="#">风险监测</a>|
<a href="#">隐私政策</a>|
<a href="#">京东公益</a>|
<a href="#">English Site</a>|
<a href="#">Contact Us</a>
</div>
<div class="copyright">
京公网安备 11000002000088号|京ICP证070359号|互联网药品信息服务资格证编号(京)-经营性-2014-0008|新出发京零 字第大120007号<br />
互联网出版许可证编号新出网证(京)字150号|出版物经营许可证|网络文化经营许可证京网文[2014]2148-348号|违法和不良信息举报电话:4006561155<br />
Copyright © 2004 - 2017 京东JD.com 版权所有|消费者维权热线:4006067733经营证照<br />
京东旗下网站:京东钱包|京东云
</div>
<div class="message">
<!--a>img-->
<a href="#"><img src="images/mess.png" alt=""></a>
<a href="#"><img src="images/mess.png" alt=""></a>
<a href="#"><img src="images/mess.png" alt=""></a>
<a href="#"><img src="images/mess.png" alt=""></a>
<a href="#"><img src="images/mess.png" alt=""></a>
</div>
</div>
</div>
css部分
.slogen {
height: 54px;
padding: 20px 0;
background-color: #F5F5F5;
position: relative;
/*margin-bottom: 25px;但是.coverage .dt里的padding-top在之后调整时增加10px让整体下移所以在此处减去10px*/
margin-bottom: 15px;
}
.item {
width: 302px;
position: absolute;
top: 20px;
/*让定位的盒子水平居中*/
left: 50%;
}
.slogen1 {
margin-left: -604px;
}
.slogen2 {
margin-left: -302px;
}
.slogen3 {
margin-left: 0;
}
.slogen4 {
margin-left: 302px;
}
.service dl {
width: 198px;
float:left;
}
.service dt,
.coverage .dt{
padding-top: 10px;
font-size: 16px;
height: 28px;
font-family:"微软雅黑"
}
.service dd {
height: 20px;
}
.coverage {
float: right;
width: 210px;
height: 165px;
background: url(../images/china.png) no-repeat left bottom;
}
.coverage p{
line-height: 18px;
}
.look {
text-align: right;
margin-top: 5px;
}
.coverage .dd {
margin-top: 10px;
}
.againw {
border-top: 1px solid #E5E5E5;
padding: 23px 0 30px 0;
margin-top: 30px;
text-align: center;
}
.links {
height: 25px;
}
.links a{
/*行内之间的元素有小缝隙*/
padding: 0 6px;
}
.copyright {
line-height: 18px;
margin-bottom: 10px;
}