品优购 底部

设计

footer.png

分为三部分：

• mod_service 服务模块
• mod_help 帮助模块
• mod_copyright 版权模块

<footer class="footer">
  <div class="w">
    <div class="mod_service "></div>
    <div class="mod_help "></div>
    <div class="mod_copyright "></div>
  </div>
</footer>

.footer {
  padding: 30px;
  height: 415px;
  background-color: #f5f5f5;
}
.mod_service {
  height: 80px;
  border-bottom: 1px solid #ccc;
}
.mod_help {
  padding-top: 20px;
  height: 185px;
  border-bottom: 1px solid #ccc;
}
.mod_copyright {
  text-align: center;
  padding-top: 20px;
}

mod_service

1.这个地方先用ul 里构建五块浮动

<ul>
  <li>
  </li>
   ...
</ul>

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

2.在li里面用h5放图片，另外一个service_text放文字，用浮动实现环绕

<li>
   <h5></h5>
   <div class="service_txt">
       <h4>正品保证</h4>
       <p>正品保障，提供发票</p>
   </div>
</li>

.mod_service ul li h5 {
  float: left;
  margin-right: 8px;
  width: 50px;
  height: 50px;
}
.service_txt h4 {
  font-size: 14px;
}
.service_txt p {
  font-size: 12px;
}

3.图片采用精灵图，用ps精准测量后，放进h5的背景里

精灵图

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

mod_help

这一块用dl浮动来完成
1.建立5个 dl>dt+dd，进行浮动

        <dl>
           <dt><a href="#">购物指南</a></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>

.mod_help dl {
  padding-left: 50px;
  width: 200px;
  float: left;
}
.mod_help dl dt {
  margin-bottom: 10px;
  font-size: 16px;
}

2.最后一个dl不太一样，放的图片，用:last-child找出,再进行居中调试

        <dl>
          <dt><a href="#">帮助中心</a></dt>
          <dd>
            <img src="upload/erweima.png" alt="">
            <span>品优购客户端</span>
          </dd>
        </dl>

.mod_help dl:last-child {
  width: 190px;
}

mod_copyright

这个部分就分为上下两部分，比较简单

• 上部分，盒子里放a，添加间隔

          <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="#">English Site</a>|
            <a href="#">Contact U</a>
          </div>

.links {
  margin-bottom: 15px;
}
.links a {
  padding: 0 5px;
}

• 下部分，用盒子，增加行高就好

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

.copyright {
  line-height: 20px;
}