品优购 底部

设计

footer.png

分为三部分：

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

.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 里构建五块浮动

  

  
   ...

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

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

   

   

       
正品保证
       
正品保障，提供发票
   

.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，进行浮动

        

           
购物指南
           
购物流程
           
会员介绍
           
生活旅行/团购
           
常见问题
           
大家电
           
联系客服
         

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

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

        

          
帮助中心
          

            
            品优购客户端
          
        

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

mod_copyright

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

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

          

            关于我们|
            联系我们|
            联系客服|
            商家入驻|
            营销中心|
            手机品优购|
            友情链接|
            销售联盟|
            品优购社区|
            品优购公益|
            English Site|
            Contact U
          

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

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

          

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

.copyright {
  line-height: 20px;
}