20160607 html5学习代码

标签：

index.html 部分

<!--footer部分-->
 <footer>
   <div class="bottom">
      <div class="wp fix">
       <div class="box-bottom1 fix">
        <div class="messages fix">
            <div class="p-fu">
            <p> 服务热线：</p>
            <p> 0571-88854090</p>
            <p> TEL：15158159764</p>
            <a> E-MAIL：2215637658@qq.com</a>　
            <p> ADDRESS：拱墅区石祥路与通益路交叉口绿景国际</p>
            <p> 友情链接：<a href="#">19楼  保障网  装修第一网  微博</a></p>
            </div>
            <img src="images/b-ewm.png" /><span>扫一扫 都都官方微信</span>
        </div>
        <div class="lianjie fix">
            <ul class="lj-1">
                <li class="tit-a3">
                    <a href="#">整体家装</a>
                </li>
                <li><a href="#">899套餐</a></li>
                <li><a href="#">1080套餐</a></li>
               <li class="tit-a3"><a href="#">装修案例</a></li>
                <li class="tit-a3"><a href="#">设计明星</a></li>
            </ul>
        </div>
        <div class="lianjie fix">
            <ul class="lj-2">
                <li class="tit-a3">
                    <a href="#">走进都都</a>
                </li>
                <li><a href="#">企业简介</a></li>
                <li><a href="#">品牌荣誉</a></li>
                <li><a href="#">企业文化</a></li>
                <li><a href="#">品牌历程</a></li>
                <li><a href="#">新闻中心</a></li>
            </ul>
        </div>
        <div class="lianjie fix">
            <ul class="lj-3">
                <li class="tit-a3">
                    <a href="#">服务规范</a>
                   </li>
                 <li><a href="#">施工流程</a></li>
                <li><a href="#">标准工艺</a></li>
                <li><a href="#">售后保障</a></li>
            </ul>
        </div>
        <div class="lianjie fix">
            <ul class="lj-4">
                <li class="tit-a3">
                    <a href="#">施工管理</a>
                </li>
                 <li><a href="#">在建工地</a></li>
               
            </ul>
        </div>
        <div class="lianjie fix">
            <ul class="lj-5">
                <li class="tit-a3">
                    <a href="#">在线服务</a>
                </li>
                <li><a href="#">在线预约</a></li>
                <li><a href="#">在线留言</a></li>
                <li><a href="#">联系我们</a></li>
            </ul>
        </div>
        
        
     </div>
        <div class="box-bottom2 fix">
            <span>Copyright© 2014 都都装饰  All Rights Reserved.   技术支持：仰止视觉  　浙ICP备11015637号</span>
            <img src="images/liuliang.png" class="bt-1">
            <div class="bt-r">
            <img src="images/bt-lj.png" class="bt-2">
              <em>|<a href="#">网站地图</a></em>  
              <em>|<a href="#">法律声明</a> </em>
              <em>|<a href="#"> 联系我们</a>  </em>
              <em>|<a href="#">版权信息</a></em>
            </div>
        </div>
      </div>  
   </div>  
     
 </footer>   

index.css部分

 /*footer*/
.bottom{
    height: 305px;
    width: 100%;
    background-color: #4b4948;
    margin-top: 48px;
}

.bottom .box-bottom1{
    /*padding-left: 200px;*/
    padding-top: 45px;
    height: 210px;
    width: 100%;
    border-bottom: 1px solid #5f5e5d;
}
.bottom .box-bottom1 .messages{
    width: 542px;
    height: 165px;   
    float: left;
}

.bottom .box-bottom1 .messages p:nth-child(2){
   
    color: #f08300;
    font-size: 27px;
    
}
.bottom .box-bottom1 .messages p:nth-child(6){
    margin-top: 20px;
}
.bottom .box-bottom1 .messages p,.bottom .box-bottom1 .messages a{  
    color: #fff;
    font-size: 14px;
    margin-top: 5px;
     }
  .bottom  .box-bottom1 .messages .p-fu{
      float:left;      
  }
  .bottom  .box-bottom1 .messages img{
      display: block;
      float: right;
      margin-right: 46px;
      margin-top: 8px;
  }
 .bottom  .box-bottom1 .messages span{
     color:#fff;
     font-size: 13px;
     display: block;
     float: right;
     margin-right: 52px;
     margin-top: 8px;
 }
 
 
 .bottom  .box-bottom1 .lianjie{
    width: 120px;
    height: 165px;
    border-left: 1px solid #5a5958;
    float: left;
    text-align: center;
    overflow: hidden;
 }
 
 .bottom  .box-bottom1 .lianjie ul li.tit-a3 a{
     font-size: 16px;
     color: #fff;
     line-height: 40px;
     
 }
 
.bottom  .box-bottom1 .lianjie ul li a{
     font-size: 14px;
     color: #e3e3e2;
     line-height: 22px;
 }
 
 
.bottom .box-bottom2{
   width: 100%;
   height: 50px;
   color: #e3e3e2;
   float: left;
   font-size: 13px;
   padding-top: 20px;
 
}
.bottom .box-bottom2 .bt-r{
    margin-top: -20px;
}
.bottom .box-bottom2 .bt-2{
    float:left;
    margin-left: 665px;
   
   
}
.bottom .box-bottom2 .bt-r a{
     color: #e3e3e2;
     margin-left: 8px;
}
.bottom .box-bottom2 .bt-r em{
    font-style: normal;
    font-size: 12px;
    color: #898383;
    float:left;
    margin-left: 8px;  
}

20160607 html5学习代码

标签：

原文地址：http://www.cnblogs.com/liaoliao985786516/p/5568351.html