【两天搞定小米商城】【第九步】小米商城之尾部部分
效果图：
(我做的和官网有些许差距，确实拉胯~)
HTML:
<div class="footer">
<div class="site-footer">
<div class="wrap">
<div class="footer-service">
<ul>
<li>
<a href="#">
<i class="iconfont">i>
<span>预约维修服务span>
a>
li>
<li>
<a href="#">
<i class="iconfont">i>
<span>七天无理由退货span>
a>
li>
<li>
<a href="#">
<i class="iconfont">i>
<span>15天免费换货span>
a>
li>
<li>
<a href="#">
<i class="iconfont">i>
<span>满69包邮span>
a>
li>
<li>
<a href="#">
<i class="iconfont">i>
<span>1100余家售后网点span>
a>
li>
ul>
div>
<div class="footer-links">
<ul>
<li>
选购指南
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>
<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>
<ul>
<li>
服务中心
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>
<li>
<a href="#">保障服务a>
li>
<li>
<a href="#">防伪查询a>
li>
<li>
<a href="#">F码通道a>
li>
ul>
<ul>
<li>
线下门店
li>
<li>
<a href="#">小米之家a>
li>
<li>
<a href="#">服务网点a>
li>
<li>
<a href="#">授权体验店/专区a>
li>
ul>
<ul>
<li>
关于小米
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>
<ul>
<li>
关注我们
li>
<li>
<a href="#">新浪微博a>
li>
<li>
<a href="#">官方微信a>
li>
<li>
<a href="#">联系我们a>
li>
<li>
<a href="#">公益基金会a>
li>
ul>
<div class="contact">
<p class="tel">400-100-5678p>
<p class="time">8:00-18:00（仅收市话费）p>
<a href="#" class="kefu"><i class="iconfont">人工客服i>a>
<p>p>
div>
div>
div>
div>
<div class="site-info">
<div class="wrap">
<div class="footer-logo">
<img src="../images/logo-mi2.png" alt="">
div>
<div class="sites">
<p class="one"> <li><a href="#">小米商城<span>|span>a>li>
<li><a href="#">MIUI<span>|span>a>li>
<li><a href="#">loT<span>|span>a>li>
<li><a href="#">有品<span>|span>a>li>
<li><a href="#">小爱开放平台<span>|span>a>li>
<li><a href="#">资质证照<span>|span>a>li>
<li><a href="#">协议规划<span>|span>a>li>
<li><a href="#">下载app<span>|span>a>li>
<li><a href="#">小米商城<span>|span>a>li>
<li><a href="#">MIUI<span>|span>a>li>
<li><a href="#">loT<span>|span>a>li>
<li><a href="#">有品<span>|span>a>li>
<li><a href="#">小爱开放平台<span>|span>a>li>
<li><a href="#">资质证照<span>|span>a>li>
<li><a href="#">协议规划<span>|span>a>li>
<li><a href="#">下载app<span>|span>a>li>
<li><a href="#">小米商城<span>|span>a>li>
<li><a href="#">MIUI<span>|span>a>li>
<li><a href="#">loT<span>|span>a>li>
<li><a href="#">有品<span>|span>a>li>
<li><a href="#">小爱开放平台<span>|span>a>li>
<li><a href="#">资质证照<span>|span>a>li>
<li><a href="#">协议规划<span>|span>a>li>
<li><a href="#">下载app<span>|span>a>li>
p>
<p> mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2020]0276-042号<br>
（京）网械平台备字（2018）第00005号 互联网药品信息服务资格证 (京)-非经营性-2014-0090 营业执照 医疗器械质量公告<br>
增值电信业务许可证 网络食品经营备案 京食药网食备202010048 食品经营许可证<br>
违法和不良信息举报电话：171-5104-4404 知识产权侵权投诉 本网站所列数据，除特殊说明，所有数据均出自我司实验室测试 br>
p>
<p>
<img src="../images/truste.png" alt="">
<img src="../images/v-logo-2.png" alt="">
<img src="../images/icon3.png" alt="">
<img src="../images/ba10428a4f9495ac310fd0b5e0cf8370.png" alt="">
<img src="../images/f1ee261b96ae71e845efba398efeca02.png" alt="">
p>
div>
<img src="../images/slogan2020.png" alt="" class="slogan">
div>
div>
div>
（提示一下，不要忘了主体部分有两个大div包括）
CSS:
/* 页脚样式开始 */
.site-footer{
width: 100%;
height: 473px;
}
.site-info{
width: 100%;
height: 206px;
padding: 30px 0;
background-color: #fafafa;
}
.footer-service{
width: 100%;
height: 25px;
padding: 27px 0;
border-bottom: 1px solid #e0e0e0;
}
.footer{
width: 100%;
height: 1000px;
}
.footer-service li{
width: 190px;
float: left;
height: 25px;
line-height: 25px;
margin-left: 50px;
border-right: 1px solid #e0e0e0;
}
.footer-service li:last-child{
border-right: none;
}
.footer-service a{
color:#616161 ;
transition: all .2s;
}
.footer-service a:hover{
color: #ff6700;
}
.footer-service i{
font-size: 24px;
margin-right: 6px;
}
.footer-links{
width: 100%;
height: 472px;
padding: 40px 0;
margin-left: 170px;
font-size: 14px;
color: #424242;
}
.footer-links ul{
float: left;
width: 160px;
text-align: left;
}
.footer-links a{
color: #757575;
font-size: 12px;
}
.footer-links li{
height: 18px;
margin-top: 10px;
}
.footer-links li:first-child{
height: 17px;
line-height: 17.5px;
margin: -1px 0 26px;
}
.footer-links a:hover{
color: #ff6700;
}
.contact{
width: 251px;
height: 111px;
border-left: 1px solid #b0b0b0;
float:right;
margin-right: 173px;
}
.tel{
color: #ff6700;
font-size: 22px;
line-height: 22px;
margin-bottom: 5px;
text-align: center;
}
.time{
color:#616161 ;
font-style: 5px;
margin-top: 10px;
text-align: center;
}
.contact .kefu{
width: 118px;
height: 28px;
display: block;
margin: 0 auto;
border: 1px solid #ff6700;
color: #ff6700;
line-height: 28px;
font-style: 12px;
transition: all .4s;
margin-top: 10px;
}
.contact .kefu:hover{
background-color: #ff6700;
color: #fff;
}
.footer-logo{
width: 56px;
height: 56px;
margin-right: 10px;
float: left;
}
.footer-logo img{
width: 100%;
}
.sites{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
width: 1160px;
height: 250px;
font-size: 12px;
line-height: 18px;
}
.one:hover a{
color: #ff6700;
}
.sites p{
color: #b0b0b0;
}
.sites p:nth-child(2) a{
color: #b0b0b0;
}
.sites p:last-child{
/* background-color: green; */
padding-right: 500px;
margin-top: 5px;
align-items: ;
}
.sites img{
height: 28px;
}
.slogan{
margin-top: -50px;
margin-left: 380px;
}
/* 页脚样式结束 */
这是我做小米商城的第一步博客地址：
https://blog.csdn.net/zhouzhou20002000/article/details/126143295?spm=1001.2014.3001.5502