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行定位符号