【两天搞定小米商城】【第九步】小米商城之尾部部分

效果图:

【两天搞定小米商城】【第九步】小米商城之尾部部分_第1张图片(我做的和官网有些许差距,确实拉胯~)

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

你可能感兴趣的:(css,html,前端)