設(shè)計

footer.png

分為三部分：

• mod_service 服務(wù)模塊
• mod_help 幫助模塊
• mod_copyright 版權(quán)模塊

<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 里構(gòu)建五塊浮動

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

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

2.在li里面用h5放圖片意述，另外一個service_text放文字，用浮動實現(xiàn)環(huán)繞

<li>
   <h5></h5>
   <div class="service_txt">
       <h4>正品保證</h4>
       <p>正品保障沮峡，提供發(fā)票</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精準(zhǔn)測量后，放進(jìn)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味咳，進(jìn)行浮動

        <dl>
           <dt><a href="#">購物指南</a></dt>
           <dd><a href="#">購物流程</a></dd>
           <dd><a href="#">會員介紹</a></dd>
           <dd><a href="#">生活旅行/團(tuán)購</a></dd>
           <dd><a href="#">常見問題</a></dd>
           <dd><a href="#">大家電</a></dd>
           <dd><a href="#">聯(lián)系客服</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找出,再進(jìn)行居中調(diào)試

        <dl>
          <dt><a href="#">幫助中心</a></dt>
          <dd>
            <img src="upload/erweima.png" alt="">
            <span>品優(yōu)購客戶端</span>
          </dd>
        </dl>

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

mod_copyright

這個部分就分為上下兩部分疟游，比較簡單

• 上部分蚯瞧，盒子里放a，添加間隔

          <div class="links">
            <a href="#">關(guān)于我們</a>|
            <a href="#">聯(lián)系我們</a>|
            <a href="#">聯(lián)系客服</a>|
            <a href="#">商家入駐</a>|
            <a href="#">營銷中心</a>|
            <a href="#">手機(jī)品優(yōu)購</a>|
            <a href="#">友情鏈接</a>|
            <a href="#">銷售聯(lián)盟</a>|
            <a href="#">品優(yōu)購社區(qū)</a>|
            <a href="#">品優(yōu)購公益</a>|
            <a href="#">English Site</a>|
            <a href="#">Contact U</a>
          </div>

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

• 下部分掂铐，用盒子罕拂，增加行高就好

          <div class="copyright">
            地址：北京市昌平區(qū)建材城西路金燕龍辦公樓一層 郵編：100096 電話：400-618-4000 傳真：010-82935100 郵箱: zhanghj+itcast.cn
京ICP備08001421號京公網(wǎng)安備110108007702
          </div>

.copyright {
  line-height: 20px;
}