为什么我跳过中间内容，直接去写底部模块呢？
因为头部和底部都是公共部分，与其他页面差异不大，只是里面的内容改了一下而已。
所以先做底部模块，这样效率更高。
image.png

  • 一号盒子是 footer 盒子，给定高度 height 和背景颜色，和 padding-top （为了挤下三号盒子）
  • 二号盒子是版心盒子

    1

    image.png
    发现 .dd 影响到我布局，所以先让它 display：none
    image.png

    index.html

    1. <!-- 底部模块制作 start -->
    2. <footer class="footer">
    3.   <div class="w">
    4.     1111
    5.   </div>
    6. </footer>
    7. <!-- 底部模块制作 end -->

    common.css

    ```css / 底部模块制作 start / .footer { height: 425px; padding-top: 25px; background-color: #f5f5f5; }

/ 底部模块制作 end /

<a name="jVvtM"></a>
## 2
![image.png](https://cdn.nlark.com/yuque/0/2021/png/2811041/1633657612255-bdf4ad1a-b80a-4556-94ed-7fd216fdfbe6.png#clientId=u5607f0e1-b5b6-4&from=paste&height=91&id=u714c164b&margin=%5Bobject%20Object%5D&name=image.png&originHeight=182&originWidth=1451&originalType=binary&ratio=1&size=44171&status=done&style=none&taskId=u837fbe87-80cf-40cf-ad92-7587cffe925&width=725.5)

- 1号盒子 mod_service，放在版心里，下面还有一条边框 用 border-bottom
- 2号盒子是 li，给个padding-left
- 3号盒子用 h5，里面放图标
- 4号盒子 h4 放标题
- 5号盒子 p

对了，4号盒子与5号盒子，可以一起放到一个div里面

![image.png](https://cdn.nlark.com/yuque/0/2021/png/2811041/1633667806463-dbcae644-5474-4773-b599-d403a1361a87.png#clientId=u5607f0e1-b5b6-4&from=paste&height=96&id=uf0088995&margin=%5Bobject%20Object%5D&name=image.png&originHeight=192&originWidth=1919&originalType=binary&ratio=1&size=40842&status=done&style=none&taskId=u56725c2a-cb99-472b-8713-a91633afb05&width=959.5)
<a name="WdsFf"></a>
### index.html
```html
  <!-- 底部模块制作 start -->
  <footer class="footer">
    <div class="w">
      <div class="mod_service">
        <ul>
          <li>
            <h4></h4>
            <div class="service_txt">
              <h5>极速物流</h5>
              <p>正品保障，提供发票</p>
            </div>
          </li>
          <li>
            <h4></h4>
            <div class="service_txt">
              <h5>极速物流</h5>
              <p>正品保障，提供发票</p>
            </div>
          </li>
          <li>
            <h4></h4>
            <div class="service_txt">
              <h5>极速物流</h5>
              <p>正品保障，提供发票</p>
            </div>
          </li>
          <li>
            <h4></h4>
            <div class="service_txt">
              <h5>极速物流</h5>
              <p>正品保障，提供发票</p>
            </div>
          </li>
          <li>
            <h4></h4>
            <div class="service_txt">
              <h5>极速物流</h5>
              <p>正品保障，提供发票</p>
            </div>
          </li>

        </ul>
      </div>
    </div>
  </footer>
  <!-- 底部模块制作 end -->

common.css

/* 底部模块制作 start  */
.footer {
  height: 425px;
  padding-top: 25px;
  background-color: #f5f5f5;
}

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

.footer .mod_service ul li {
  float: left;
  width: 240px;
  height: 50px;
  padding-left: 35px;
}

.footer .mod_service ul li h4 {
  float: left;
  margin-right: 5px;
  width: 50px;
  height: 50px;
  background-color: red;
}

.service_txt h5 {
  font-size: 14px;
  font-weight: 700;
  color: #333333;
}

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


/* 底部模块制作 end   */

3

精灵图：icons.png
image.png没有改变index.html

common.css

.footer .mod_service ul li h4 {
  float: left;
  margin-right: 5px;
  width: 50px;
  height: 50px;
  background: url(../images/icons.png) no-repeat -252px -2px;
}