CSS实战（2）

底部 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;
    }

---

知识积累：

1.如何让定位的盒子水平居中对齐？

①left：50%；此时盒子在页面中线紧右侧

②往左走盒子的一个，两个：margin-left: n px;(n代表一个盒子的宽度)，往左为负，往右为正：margin-left: 302px;

2.高度剩余法和宽度剩余法的使用

3..div .span .dl .dd .dt是不合法命名，前面不能加”.”

4.行内块元素在水平线上，运动需要用：text-align:right;

5.ctrl+G 是WS行定位符号