前端练习项目——品优购 Day5 底部footer模块搭建

因为common.css是写相同的部分，页脚都是相同的，因此先写footer

 1.整体结构分析

       整体是一个大盒子（footer），然后大盒子里有一个版心 ，版心里有三个盒子（上中下），分别为mod_service服务模块，mod_help帮助模块，mod_copyright版权模块。

.footer {
    height: 415px;
    background-color: #f5f5f5;
    padding-top: 30px;
}

 2.mod_service模块制作

.mod_service {
    height: 80px;
    border-bottom: 1px solid #ccc;
}

     很明显模块被分为五部分，每一部分都是一个图片+一个标题+一段话。因此这五部分可以用li表示（经典的ul li a模式），然后li里面有两个a，一个a用于放图片（因为图片也是链接），另一个a里面放两个部分：h4标题和一个p。

<li>
   <a href="#" class="one pic"></a>
   <a href="#" class="service_txt">
       <h4>正品保障</h4>
       <p>正品保障，提供发票</p>
   </a>
</li>

li的CSS代码

.mod_service ul li {
    box-sizing: border-box;
    /* 由于li里面有padding，为了方便计算，用CSS3盒子（width就是宽度，不计padding和border）*/
    float: left;
    width: 240px;
    /* 1200除以5 */
    height: 50px;
    padding-left: 35px;
    /* 把内容挤开 */
}

     首先，由于li有宽度（5个li正好占满版心），但由于需要把内容挤开，需要加上padding-left，因此设置为CSS3盒子，使盒子宽度不受padding影响（注意如果没有给宽度，那么就不需要使用CSS3盒子了，因为不需要宽度保持恒定）。所有li摆在一排，需要加上float。

 图片部分CSS代码

.mod_service ul li .pic {
    display: block;
    float: left;
    border-radius: 30px;
    width: 50px;
    height: 50px;
    background-image: url(../images/精灵图.png);
    background-repeat: no-repeat;
    margin-right: 8px;
}

  因为要放图片，因此a转化为块级元素。

  加浮动的原因：因为文字要围绕着图片，因此要给图片加上浮动（也就是浮动本来的作用，让文字围绕着图片）

  margin-right用于修饰图片与文字之间的距离

  需要注意的是：图片是用精灵图制作的

       根据目标图片的x，y坐标开始移动图片（左上角为（0，0）），一般都是向上或向左移动，所以数值都是负的（使用background-position）

.mod_service ul li .one {
    background-position: -253px -3px;
}

.mod_service ul li .two {
    background-position: -253px -54px;
}

.mod_service ul li .three {
    background-position: -256px -105px;
}

.mod_service ul li .four {
    background-position: -258px -156px;
}

.mod_service ul li .five {
    background-position: -257px -209px;
}

 文字部分CSS代码

.service_txt h4 {
    font-size: 14px;
}

.service_txt p {
    font-size: 12px;
}

 h4自带加粗功能，因此修改一下字体大小即可。

3.mod_help模块制作

（1）整体结构分析

      整体是一个大盒子，大盒子里可以用dl dt dd模式做，大盒子被分为六个dl盒子，标题写在dt里，下面的分类写在dd里，最右边单独处理。

<dl>
     <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>
      </dt>
 </dl>

（2）大盒子CSS代码

.mod_help {
    height: 185px;
    border-bottom: 1px solid #ccc;
    padding-top: 20px;
    padding-left: 50px;
}

主要就是各种间距的调整

（3）dl模块的CSS代码

.mod_help dl {
    float: left;
    width: 200px;
}

dl本身是块级元素，要想在一行排列需要加上浮动

（4）dt的CSS代码

.mod_help dl dt {
    font-size: 16px;
    margin-bottom: 10px;
}

更改一下字体大小与间距即可

（5）对最后一个dl的处理

.mod_help dl:last-child {
    width: 90px;
    text-align: center;
}

改变宽度（要不然大盒子的宽度就不够用了），然后让盒子里的文字居中显示。

这里使用last-child选择最后一个元素。

<dl>
      <dt>
          帮助中心
      </dt>
      <img src="images/erweima.png">
      品优购客服
</dl>

这里选择插入图片

 4.mod_copyright模块制作

（1）整体结构分析

整体是一个大盒子，分为上下两个盒子——links和copyright，其中links里的做法与导航栏相同

（2）大盒子的CSS代码：

.mod_copyright .links {
    height: 40px;
    margin-top: 23px;
}

（3）links模块制作：（如何居中？？？？？）

<div class="links">
                    <li class="tiaozheng"><a href="#">关于我们</a></li>
                    <li></li>
                    <li><a href="#">联系我们</a></li>
                    <li></li>
                    <li><a href="#">联系客服</a></li>
                    <li></li>
                    <li><a href="#">商家入驻</a></li>
                    <li></li>
                    <li><a href="#">营销中心</a></li>
                    <li></li>                       
                    <li><a href="#">手机品优购</a></li>
                    <li></li>
                    <li><a href="#">友情链接</a></li>
                    <li></li>
                    <li><a href="#">销售联盟</a></li>
                    <li></li>
                    <li><a href="#">品优购社区</a></li>
                    <li></li>
                    <li><a href="#">品优购公益</a></li>  
                    <li></li>
                    <li><a href="#">English Site</a></li>
                </div>

整体盒子

.mod_copyright .links {
    height: 40px;
    margin-top: 23px;
}

 小竖线制作

.mod_copyright .links li:nth-child(even) {
    width: 1px;
    background-color: #666;
    height: 16px;
    margin-top: 1px;
}

 li的CSS代码

.mod_copyright .links li {
    float: left;
}

  通过左浮动排成一排

  a的CSS代码

.mod_copyright .links a {
    margin: 0 10px;
}

  调整间距

       如何把整体调整到盒子中间：给第一个盒子一个类名"tiaozheng"，加上margin-left，一点点调整到盒子中间。

.mod_copyright .links .tiaozheng {
    margin-left: 195px;
}

     不能使用text-align:center的原因：由于li是块级元素，不能在一行内显示，因此需要加上浮动。但是一加上浮动，就会导致text-align:center失效，因此不能使用text-align使文字居中。（如果没有添加浮动或定位，那么text-align对盒子里的文字都有效，不管块级元素还是行内元素，text-align属性可以继承）

（4）copyright模块制作

 直接把文字复制到盒子里，该换行换行，最后加上text-align:center即可。

<div class="copyright">
                   地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn<br>

                    京ICP备08001421号京公网安备110108007702
</div>

.mod_copyright .copyright {
    text-align: center;
}

注：

ctrl+F 查找       ctrl+shift+L    选中所有相同项

遗留问题：text-align:center

如果给父元素text-align:center，父元素的子元素是多个块级元素，那么是否会影响子元素，如何影响？

块元素是否对height和width赋值是否影响到text-align:center。

text-align:center对行内元素和行内块元素的使用

text-align:center的继承

（已在下一章解决）