摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>小米商城</title> <link rel="shortcut icon" type="image/
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>小米商城</title> <link rel="shortcut icon" type="image/x-icon" href="D:/my-mi/images/footlogo.png"> <link rel="stylesheet" type="text/css" href="D:/my-mi/font-awesome/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="D:/my-mi/css/style.css"> <script type="text/javascript" src="D:/my-mi/js/jquery-3.3.1.min.js"></script> </head> <body> <footer> <div class="centers"> <div class="footer-top"> <ul> <li><a href="#"><i class="fa fa-wrench"></i>预约维修服务</a><span>|</span></li> <li><a href="#"><i class="fa fa-rotate-right"></i>7天无理由退货</a><span>|</span></li> <li><a href="#"><i class="fa fa-refresh"></i>15天免费换货</a><span>|</span></li> <li><a href="#"><i class="fa fa-gift"></i>满150元包邮</a><span>|</span></li> <li><a href="#"><i class="fa fa-map-marker"></i>520余家售后服务</a></li> </ul> </div> <hr> <div class="footer-con"> <div class="footer-con-l"> <ul> <li>帮助中心 <ul> <li><a href="#">账户管理</a></li> <li><a href="#">购物指南</a></li> <li><a href="#">订单操作</a></li> </ul> </li> <li>服务支持 <ul> <li><a href="#">售后服务</a></li> <li><a href="#">自助服务</a></li> <li><a href="#">相关下载</a></li> </ul> </li> <li>线下门店 <ul> <li><a href="#">小米之家</a></li> <li><a href="#">服务网点</a></li> <li><a href="#">授权体验店</a></li> </ul> </li> <li>关于小米 <ul> <li><a href="#">了解小米</a></li> <li><a href="#">加入小米</a></li> <li><a href="#">投资者关系</a></li> </ul> </li> <li>关注我们 <ul> <li><a href="#">新浪微博</a></li> <li><a href="#">官方微信</a></li> <li><a href="#">联系我们</a></li> </ul> </li> <li>特色服务 <ul> <li><a href="#">F码通道</a></li> <li><a href="#">礼物码</a></li> <li><a href="#">防伪查询</a></li> </ul> </li> </ul> </div> <div class="footer-con-r"> <h3>400-100-5678</h3> <span>周一至周日 8:00-18:00<br/>(仅收市话费)</span> <p><button><a href="#"><i class="fa fa-commenting"></i>联系客服</a></button></p> </div> </div> <div class="footer-but"></div> </div> </footer> </body> </html>
/*通用设置*/
*{margin:0px;padding: 0px;}
li{
list-style: none;
}
a{
text-decoration: none;
}
.clear{
clear: both;
}
.centers{
width: 1226px;
margin:0 auto;
overflow: hidden;
}
footer{
width: 100%;
background-color: #fff;
}
.footer-top{
height:100px;
}
.footer-top ul li{
float: left;
height: 60px;
line-height: 60px;
margin:20px 0px;
}
.footer-top ul li a{
display:inline-block;
color: #888;
height: 50px;
line-height: 50px;
margin:5px 0px;
font-size: 20px;
}
.footer-top ul li span{
display: inline-block;
color: #ccc;
font-size: 20px;
height: 50px;
line-height: 50px;
margin:0px 59.5px;
}
.footer-top ul li a:hover{
color: #FF6F28;
}
.footer-con{
overflow: hidden;
padding-bottom: 30px;
}
.footer-con-l{
width: 1000px;
float: left;
}
.footer-con-l>ul{
margin-top: 20px;
overflow: hidden;
border-right: 1px solid #ccc;
}
.footer-con-l>ul>li{
font-size: 17px;
margin-top: 30px;
margin-right:95px;
color: #666;
float: left;
}
.footer-con-l>ul>li ul{
margin-top: 15px;
margin-bottom: 20px;
}
.footer-con-l>ul>li ul li a{
color: #888;
display: block;
font-size: 14px;
margin-top: 15px;
}
.footer-con-l>ul>li ul li a:hover{
color: #FF6F28;
font-size: 16px;
}
.footer-con-r{
width: 225px;
margin-top: 20px;
float: left;
}
.footer-con-r h3{
margin-top: 30px;
color: #FF6F28;
font-size: 20px;
text-align: center;
}
.footer-con-r span{
display: block;
color: #888;
font-size: 12px;
text-align: center;
margin:15px 0px;
}
.footer-con-r p{
text-align: center;
}
.footer-con-r p button{
border:1px solid #ff6f28;
}
.footer-con-r p button a{
display: block;
font-weight: bold;
color: #ff6f28;
width: 100px;
height: 30px;
line-height: 30px;
background: #fff;
}
.footer-con-r p button a:hover{
background: #ff6f28;
color: #fff;
}
.footer-but{
height: 400px;
background: #222;
}摘取的部分文档，只有底部。
页面图：
