仿作苏宁易购主页（前端学习记录）

最新推荐文章于 2022-09-21 14:33:11 发布
m0_0m_
最新推荐文章于 2022-09-21 14:33:11 发布
阅读量409
点赞数
分类专栏：前端文章标签：前端
本文链接：https://blog.csdn.net/m0_63004006/article/details/125752527
版权
前端专栏收录该内容
4 篇文章 0 订阅
订阅专栏
通过初步的前端知识学习，大体上完成了苏宁易购首页的仿制，还请大家批评指正，谢谢！
具体代码如下
<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, input, a, img, button {
    margin: 0;
    padding: 0;
    border: 0;
    font-weight: normal;
    vertical-align: baseline;
}

html{
    font-size: 10px !important;
}

body{
    font-size: 1.4rem;
    background-color: #f2f2f2 !important;
    font-family: Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;
}
ul, ol, dl{
    list-style: none;
}
fieldset, img, button, input, textarea{
    border: none;
    margin: 0;
    padding: 0;
    outline: none;
}
a{
    color: #999999;
    text-decoration: none;
}
a:hover{
    color: #f8b62b;
}
h1,h2,h3,h4,h5,h6{
    font-weight: normal;
    font-size: 100%;

}
.fl{
    float: left;
}
.fr{
    float: right;
}
.clearfix:before,
.clearfix:after{
    content: '';
    display: table;
    clear: both;
}
.w{
    width: 119rem;
    margin: 0 auto;
}
.tl{
    text-align: left;
}
.tr{
    text-align: right;
}
.tc{
    text-align: center;
}
.f60{
    color: #f8b62b;
}
s,i{
    font-style: normal;
    text-decoration: none;
}
.dis{
    position: relative;
    background-color: #164fa6;
}
.dis.min{
    position: absolute;
    top: 0.3rem;
    right: 1rem;
    width: 1.9rem;
    height: 1.9rem;
    background: url(./../images/close-banner.png) 0 0 ;
}
.dis .min:hover{
    background-position: 0 -1.9rem;
}
.sn-toolbar{
    background-color: #f5f5f5;
    height: 3.5rem;
    border-bottom: 1px solid #eeeeee;
}
.sn-toolbar>div{
    height: 100%;
}
.sn-toolbar>div li{
    float: left;
    line-height: 3.5rem;
    padding: 0 2.5rem 0 0.1rem;
    position: relative;
}
.sn-toolbar>div li.down i{
    position: absolute;
    right: 1rem;
    top: 1.7rem;
    width: 1.5rem;
    height: 1.5rem;
    overflow: hidden;
}
.sn-toolbar>div li.down img{
    height: 1.5rem;
    width: 1.5rem;
}
.sn-toolbar>div li.down i.wang{
    position: absolute;
    top: 1.5rem;
    left: 8.5rem;
}
.sn-toolbar>div li>img{
    width: 1.5rem;
    height: 1.5rem;
}
.sn-toolbar>div li.down i s{
    position: absolute;
    left: 0;
    top: -1.9rem;
    font-size: 2.4rem;
    color: #999999;
}
.sn-toolbar>div li.down i s.f60{
    color: #ff8000;
}
.searchnn{
    background-color: #fff;
    height: 11rem;
}

.searchnn .logo-set .main-logo{
    height: 10rem;
    width: 19rem;
}
.searchnn .logo-set .sec-logo{
    height: 10rem;
    width: 16rem;
}
.searchnn .logo-set .main-logo,
.searchnn .logo-set .sec-logo{
    float: left;
    background-size: contain;
}
.searchnn .search-input{
    width: 53.8rem;
    height: 3.8rem;
    float: left;
    /*background-color: greenyellow;*/
    padding-top: 3rem;
    padding-left: 3rem;
}
.searchnn .search-input input:first-child{
    width: 45rem;
    height: 3.6rem;
    border: 0.2rem solid #ff8000;
    box-sizing: border-box;
    padding-left: 0.8rem;
    font-size: 1.2rem;
    float: left;
    border-radius:5px 0 0 5px;
}
.searchnn .search-input input:last-child{
    width: 8rem;
    height: 3.6rem;
    background-color: #ff8000;
    color: #fff;
    float: left;
    font-size: 1.5rem;
    border-radius:0 5px 5px 0;
}
.searchnn .search-more-link{
    float: left;
    height: 3rem;
    width: 53.8rem;
    padding-left: 3rem;
}
.searchnn .search-more-link li{
    float: left;
    margin: 0.7rem 0.5rem 0 0;
}
.searchnn .search-more-link li + li{
    border-left: 0.1rem solid #c0c0c0;
    padding-left: 0.5rem;
}
.mmm{
    width: 100%;
    height: 3.8rem;
    background-color: #fff;
}
.mmm>div{
    display: flex;
}
/*左边*/
.mmm>div .mmm-menu{
    width: 21rem;
    height: 3.8rem;
    background-color: #ff8000;
}
.mmm >div .mmm-menu a{
    box-sizing: border-box;
    font-size: 1.6rem;
    font-weight: bolder;
    color: #fff;
    display: block;
    width: 100%;
    line-height: 3.8rem;
    padding-left: 2.5rem;
    position: relative;
}
.mmm >div .mmm-menu a:before{
    content: '';
    position: absolute;
    top: 1.5rem;
    left: 1rem;
    width: 1.2rem;
    height: 1rem;
    background: url("./../images/index.png") 0 0;
}
.mmm>div .mmm-items{
    flex: 1;
}
.mmm>div .mmm-items ul li{
    float: left;
    line-height: 3.8rem;
    padding: 0 1rem;
}
.mmm>div .mmm-items ul li a{
    color: #000000;
    font-weight: bolder;
    font-size: 1.7rem;
}
.mmm>div .mmm-items ul li a:hover{
    color: #ff8000;
}
.mmm>div .mmm-items ul li img{
    color: #ff8000;
    height:38px;
    width:110px;
}
.zhongbu{
    width: 100%;
    height: 44rem;
    background-color: rgb(115, 164, 255);
}
.zhongbu .zhongbu-left{
    float: left;
    width: 21rem;
    height: 44rem;
    background-color: #fff;
    margin-left: -100%;
}
.zhongbu .zhongbu-left .index-list{
    width: 21rem;
    height: 44rem;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}
.zhongbu .zhongbu-left .index-list li{
    height: 2.5rem;
    padding-left: 0.8rem;
    cursor: pointer;
}
.zhongbu .zhongbu-left .index-list li a{
    color: #2f2f2f;
}
.zhongbu .zhongbu-left .index-list li a:hover{
    color: #ff8000;
}
.zhongbu .zhongbu-left .index-list li em{
    color: #c0c0c0;
    margin: 0 0.2rem;
}
.zhongbu .zhongbu-left .index-list li img{
    height: 16px;
    width: 16px;
}
.zhongbu .zhongbu-right{
    float: left;;
    width: 17rem;
    height: 44rem;
    background-color: #fff;
    margin-left: -17rem;
}
.zhongbu .zhongbu-right .zhongbu-right-top{
    width: 100%;
    height: 16.8rem;
    padding: 1.1rem 0 0.2rem 0;
    text-align: center;
    border-bottom: 0.01rem solid #f2f2f2;
}
.zhongbu .zhongbu-right .zhongbu-right-top .logo{
    height: 5.9rem;
    width: 100%;
    display: flex;
    justify-content: center;
}
.zhongbu .zhongbu-right .zhongbu-right-top .logo a{
    height: 5.8rem;
    width: 5.8rem;
    box-sizing: border-box;
    background: url("./../images/index.png") -90px -22px;
}
.zhongbu .zhongbu-right .zhongbu-right-top p{
    height: 1.2rem;
    width: 17rem;
    margin: 1rem auto;
}
.zhongbu .zhongbu-right .zhongbu-right-top .new_vip{
    height: 2.2rem;
    width: 17rem;
    margin-bottom: 1rem;
    position:relative
}
.zhongbu .zhongbu-right .zhongbu-right-top .new_vip a:first-child{
    width: 7rem;
    line-height: 2.2rem;
    color: #ff8000;
    font-size: 0.5rem;
    border:0.1rem solid #ff8000;
    position: absolute;
    left: 1rem;
}
.zhongbu .zhongbu-right .zhongbu-right-top .new_vip a:last-child{
    width: 7rem;
    height: 2.2rem;
    background: url("./../images/index.png") -29.5rem -25.1rem ;
    position: absolute;
    right: 1rem;
}
.zhongbu .zhongbu-right .zhongbu-right-top .down{
    line-height: 1.5rem;
    width: 17rem;
    font-size: 0.75rem;
    margin-top: 1.5rem;
}
.zhongbu .zhongbu-right .zhongbu-right-top .down a{
    height: 1.5rem;
    width: 8rem;
}
.zhongbu .zhongbu-right .zhongbu-right-top .down em{
    display: inline-block;
    height: 1.4rem;
    width: 1.8rem;
    vertical-align: top
}
.zhongbu .zhongbu-right .zhongbu-right-top .down a:first-child em{
    background: url("./../images/index.png") -11.2rem -0.1rem;
}
.zhongbu .zhongbu-right .zhongbu-right-top .down a:last-child em{
    background: url("./../images/index.png") -8.8rem 0;
}
.zhongbu .zhongbu-right .zhongbu-right-top .down a span{
    color: #666666;
    line-height: 1.5rem;
    vertical-align: top
}
.zhongbu .zhongbu-right .zhongbu-right-middle{
    height: 9.7rem;
    display: flex;
    flex-direction:column;
}

.zhongbu .zhongbu-right .zhongbu-right-middle div{
    flex: 1;
    position: relative;
    font-size: 1.2rem;
}
.zhongbu .zhongbu-right .zhongbu-right-middle div a{
    position: absolute;
    top: 1.2rem;
    left: 1rem;
    line-height: 2rem;
}
.zhongbu .zhongbu-right .zhongbu-right-middle div a span:first-child{
    color: #f8b62b;
}
.zhongbu .zhongbu-right .zhongbu-right-middle div a span:last-child{
    margin-left: 0.5rem;
}
.zhongbu .zhongbu-right .zhongbu-right-middle div a span:last-child:hover{
    color: #ff6700;
}
.zhongbu .zhongbu-right .zhongbu-right-bottom{
    height: 16.2rem;
    width: 100%;
    box-sizing: border-box;
    padding: 1rem 0 0 0;
}
.zhongbu .zhongbu-right .zhongbu-right-bottom ul{
    height: 100%;
    width: 100%;
}
.zhongbu .zhongbu-right .zhongbu-right-bottom ul li{
    height: 7.6rem;
    width: 5.66rem;
    float: left;
    display: flex;
    flex-direction:column;
    border: 0.1rem solid #f2f2f2 ;
    box-sizing: border-box;
}
.zhongbu .zhongbu-right .zhongbu-right-bottom ul li a{
    line-height: 2.2rem;
    width: 5rem;
    text-align: center;
    margin-top: -2rem;
}
.zhongbu .zhongbu-right .zhongbu-right-bottom ul li a i{
    font-size: 4rem;
}
.zhongbu .zhongbu-right .zhongbu-right-bottom ul li a span{
    font-size: 0.5em;
}
.zhongbu .zhongbu-right .zhongbu-right-bottom ul img{
    width: 35px;
    height: 35px;
    margin:15px auto;
}
.zhongbu .zhongbu-center{
    float: left;;
    width: 100%;
    height: 44rem;
}
.zhongbu .zhongbu-center .zhongbu-center-w{
    margin: 0 17rem 0 21rem;
    height: 44rem;
    background-color: red;
    position: relative;
}
.zhongbu .zhongbu-center .zhongbu-center-w img{
    width: 100%;
    height: 44rem;
}
.zhongbu .zhongbu-center .zhongbu-center-w .c-prev,
.zhongbu .zhongbu-center .zhongbu-center-w .c-next{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 3rem;
    height: 5rem;
    background-color: rgba(0, 0, 0, .4);
}
.zhongbu .zhongbu-center .zhongbu-center-w .c-prev{
    left: 0;
    font-size: 3rem;
}
.zhongbu .zhongbu-center .zhongbu-center-w .c-next{
    right: 0;
    font-size: 3rem;
}
.zhongbu .zhongbu-center .zhongbu-center-w .c-prev i,
.zhongbu .zhongbu-center .zhongbu-center-w .c-next i{
    position: absolute;
    top: 15%;
}
.zhongbu .zhongbu-center .zhongbu-center-w .c-bottom{
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
}
.zhongbu .zhongbu-center .zhongbu-center-w .c-bottom li{
    width: 3rem;
    height: 3rem;
    background-color: #fff;
    float: left;
    margin: 0 0.5rem;
    border-radius: 50%;
}
.zhongbu .zhongbu-center .zhongbu-center-w .c-bottom .current {
    background-color: orangered;
}
.box{
    height: 298px;
    width: 590px;
    background-color:#fff;
    margin:100px auto;
}
.box img {
 width:192px;
 height:192px;
}
.review{
    height:20px;
    padding-left:20px;
}
.appraise {
color: #ff3000;
}
.footer-top-1{
    height: 8rem;
    width: 119rem;
}
.footer-top-1 ul{
    display: flex;
}
.footer-top-1 ul li{
    width: 23.8rem;
    height: 4.8rem;
    margin-top: 2rem;
    position: relative;
}
.footer-top-1 ul li img{
    height: 4.8rem;
    width: 4.8rem;
}
.footer-top-1 ul li strong{
    position: absolute;
    top: 0.3rem;
    left: 6rem;
}
.footer-top-1 ul li span{
    position: absolute;
    top: 2.7rem;
    left: 6rem;
}
.footer-top-2{
    height: 20rem;
    width: 119rem;
}
.footer-top-2 dl{
    height: 14rem;
    width: 20rem;
    float: left;
}
.footer-top-2 dl dt{
    padding: 2rem 0 0 0;
    color: #545454;
}
.footer-top-2 dl dd{
    padding: 1rem 0 0 0;
    color: #666666;
}
.footer-top-2 .app-down{
    padding: 2rem 0 0 0 ;
}
.footer-top-2 .app-down a{
    width: 8.4rem;
    padding: 1rem 0 0 0;
}
.footer-bottom{
    text-align: center;
}
.footer-bottom p {
    margin: 1rem 0;
}
.footer-bottom p a{
    color: #666666;
    padding: 0 1rem;
}
.footer-bottom p a:hover{
    color: #f60;
}
.footer-bottom p a:nth-child(n+2){
    border-left: 0.1rem solid #666666;
}
.footer-bottom p:nth-child(n+3){
    font-size: 0.5rem;
}
.footer-bottom .copyright img{
    height:24px;
}
</style>
<body>
    <section class="dis">
        <div class=" w">
            <a href="#">
                <img src="广告开头.png" alt="">
            </a>
        </div>
        <a href="#" class="min"></a>
    </section>

    <nav class="sn-toolbar">
        <div class="w clearfix">
            <div class="fl"></div>
                <ul>
                <li class="down">
                    <a href="#">网站导航</a>
                    <i><s>◇</s></i>
                </li>
                <li class="down">
                    <a href="#">商家入驻</a>
                    <i><s>◇</s></i>
                </li>
                <li class="down">
                    <a href="#">客户服务</a>
                    <i><s>◇</s></i>
                </li>
                <li class="down">
                    <img src="snyg.png" alt="" class="img">
                    <a href="#">网页无障碍</a>
                </li>
            </ul>
            <div class="fr">
                <ul>
                    <li>
                        <a href="#">请登录</a>
                        <a href="#" class="f60">注册有礼</a>
                    </li>
                    <li class="down">
                        <a href="#">我的订单</a>
                        <i><s>◇</s></i>
                    </li>
                    <li class="down">
                        <a href="#">我的易购</a>
                        <i><s>◇</s></i>
                    </li>
                    <li>
                        <a href="#">苏宁会员</a>
                    </li>
                    <li class="down address">
                        <img src="#" alt="">
                        <a href="#" class="f60">购物车</a>
                        <i><s class="f60">◇</s></i>
                    </li>
                    <li>
                        <a href="#">易宝付</a>
                    </li>
                    <li>
                        <a href="#">企业采购</a>
                    </li>
                    <li class="down">
                        <a href="#">手机苏宁</a>
                        <i><s>◇</s></i>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <section class="searchnn">
        <!--版心-->
        <div class="w">
            <!--左边-->
            <div class="logo-set">
                <a href="#" class="main-logo"></a>
                <a href="#" class="sec-logo"></a>
            </div>
            <!--搜索框-->
            <form action="https://blog.csdn.net/KaiSarH" class="search-input">
                <input type="text" name="search" placeholder="周年庆赢好礼">
                <input type="submit" value="搜 索">
            </form>
            <!--快捷导航-->
            <div class="search-more-link">
                <ul>
                    <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="">ipad</a></li>
                    <li><a href="">热水器</a></li>
                    <li><a href="">沙发</a></li>
                </ul>
            </div>
        </div>
    </section>
    <section class="mmm">
        <div class="w">
            <div class="mmm-menu">
                <div class="mmm-menu-all">
                    <a href="#">分类</a>
                </div>
            </div>
            <div class="mmm-items">
                <ul>
                    <li><a href="#" class="dajuhui">
                        <img src="161185054090483911.png" alt="">
                    </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>
            </div>
        </div>
    </section>
    <section class="zhongbu">
        <div class="w">
            <div class="zhongbu-center">
                <div class="zhongbu-center-w">
                    <div class="content">
                        <img src="gg.jpg" alt="">
                    </div>
                    <div class="control">
                        <a href="#" class="c-prev">
                            <i class="lk-left">＜</i>
                        </a>
                        <a href="#" class="c-next">
                            <i class="lk-right">＞</i>
                        </a>
                    </div>
                </div>
            </div>
            <div class="zhongbu-left">
                <ul class="index-list">
                    <li class="">
                        <img src="sj.png" alt="">
                        <a target="_blank">手机</a><em>/</em>
                        <a target="_blank">运营商</a><em>/</em>
                    </li>
                    <li class="">
                        <img src="dianshi.png" alt="">
                        <a target="_blank">家用电器</a><em>/</em>
                        <a target="_blank">帮客</a><em>/</em>
                    </li>
                    <li class="">
                        <img src="chuwei.png" alt="">
                        <a target="_blank">厨卫</a><em>/</em>
                        <a target="_blank">生活家电</a><em>/</em>
                        <a target="_blank">厨具</a>
                    </li>
                    <li class="">
                        <img src="dnbg.png" alt="">
                        <a target="_blank">电脑办公</a><em>/</em>
                        <a target="_blank">相机</a><em>/</em>
                    </li>
                    <li class="">
                        <img src="shafa.png" alt="">
                        <a target="_blank">家具</a><em>/</em>
                        <a target="_blank">家装</a><em>/</em>
                        <a target="_blank">家纺</a><em>/</em>
                        <a target="_blank">灯具</a>
                    </li>
                    <li class="">
                        <img src="bbt.png" alt="">
                        <a target="_blank">食品</a><em>/</em>
                        <a target="_blank">酒水</a><em>/</em>
                        <a target="_blank">生鲜</a><em>/</em>
                        <a target="_blank">特产</a>
                    </li>
                    <li class="">
                        <img src="kh.png" alt="">
                        <a target="_blank">美妆</a><em>/</em>
                        <a target="_blank">个护</a><em>/</em>
                        <a target="_blank">清洁</a><em>/</em>
                        <a target="_blank">宠物</a>
                    </li>
                    <li class="">
                        <img src="yerc.png" alt="">
                        <a target="_blank">母婴</a><em>/</em>
                        <a target="_blank">玩具</a><em>/</em>
                        <a target="_blank">车床</a><em>/</em>
                        <a target="_blank">童装</a>
                    </li>
                    <li class="">
                        <img src="lanqiu.png" alt="">
                        <a target="_blank">运动</a><em>/</em>
                        <a target="_blank">户外</a><em>/</em>
                        <a target="_blank">国米</a><em>/</em>
                        <a target="_blank">骑行</a>
                    </li>
                    <li class="">
                        <img src="qunzi.png" alt="">
                        <a target="_blank">女装</a><em>/</em>
                        <a target="_blank">男装</a><em>/</em>
                        <a target="_blank">内衣</a><em>/</em>
                        <a target="_blank">鞋靴</a>
                    </li>
                    <li class="">
                        <img src="bao.png" alt="">
                        <a target="_blank">箱包</a><em>/</em>
                        <a target="_blank">钟表</a><em>/</em>
                        <a target="_blank">珠宝</a><em>/</em>
                        <a target="_blank">艺术</a>
                    </li>
                    <li class="">
                        <img src="qic.png" alt="">
                        <a target="_blank">汽摩</a><em>/</em>
                        <a target="_blank">电摩</a><em>/</em>
                        <a target="_blank">汽车用品</a>
                    </li>
                    <li class="">
                        <img src="tushu.png" alt="">
                        <a target="_blank">图书</a><em>/</em>
                        <a target="_blank">艺术</a><em>/</em>
                        <a target="_blank">原版</a><em>/</em>
                        <a target="_blank">文学</a>
                    </li>
                    <li class="">
                        <img src="yyx.png" alt="">
                        <a target="_blank">医药健康</a><em>/</em>
                        <a target="_blank">计生情趣</a><em>/</em>
                    </li>
                </ul>
            </div>
            <div class="zhongbu-right">
                <div class="zhongbu-right-top">
                    <div class="logo">
                        <a href="#"></a>
                    </div>
                    <p>Hi,欢迎来到苏宁易购</p>
                    <div class="new_vip">
                        <a href="">199新人专享</a>
                        <a href="">开通super尊享特权</a>
                    </div>
                </div>
                <div class="zhongbu-right-bottom">
                    <ul>
                        <li><img src="sjdn.png" alt=""><a href=""><i class="sn-4"></i><span>手机电脑</span></a></li>
                        <li><img src="sncs.png" alt=""><a href=""><i class="sn-4"></i><span>苏宁超市</span></a></li>
                        <li><img src="snjz.png" alt=""><a href=""><i class="sn-4"></i><span>家装建材</span></a></li>
                        <li><img src="xkb.png" alt=""><a href=""><i class="sn-4"></i><span>理财</span></a></li>
                        <li><img src="fenqi.png" alt=""><a href=""><i class="sn-4"></i><span>分期</span></a></li>
                        <li><img src="snk.png" alt=""><a href=""><i class="sn-4"></i><span>苏宁卡</span></a></li>
                        <li><img src="ypxx.png" alt=""><a href=""><i class="sn-4"></i><span>药品信息</span></a></li>
                        <li><img src="snbk.png" alt=""><a href=""><i class="sn-4"></i><span>苏宁帮客</span></a></li>
                        <li><img src="sngy.png" alt=""><a href=""><i class="sn-4"></i><span>苏宁公益</span></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </section>
    <footer class="sn-footer">
        <div class="w footer-top">
            <div class="footer-top-1">
                <ul>
                    <li><a href=""><img src="149386338830969041.jpg" alt=""></a><strong>正品保障</strong><span>正品保障、提供发票</span></li>
                    <li><a href=""><img src="149386339441846551.jpg" alt=""></a><strong>正品保障</strong><span>正品保障、提供发票</span></li>
                    <li><a href=""><img src="149386340040069121.jpg" alt=""></a><strong>正品保障</strong><span>正品保障、提供发票</span></li>
                    <li><a href=""><img src="149386341371637387.jpg" alt=""></a><strong>正品保障</strong><span>正品保障、提供发票</span></li>
                    <li><a href=""><img src="xin.png" alt=""></a><strong>正品保障</strong><span>正品保障、提供发票</span></li>
                </ul>
            </div>
            <div class="footer-top-2 clearfix">
                <div class="w">
                    <dl>
                        <dt>购物指南</dt>
                        <dd><a href="">免费注册</a></dd>
                        <dd><a href="">会员等级</a></dd>
                        <dd><a href="">常见问题</a></dd>
                    </dl>
                    <dl>
                        <dt>支付方式</dt>
                        <dd><a href="">苏宁支付</a></dd>
                        <dd><a href="">网银支付</a></dd>
                        <dd><a href="">快捷支付</a></dd>
                        <dd><a href="">分期付款</a></dd>
                        <dd><a href="">贷到付款</a></dd>
                        <dd><a href="">任性付支付</a></dd>
                    </dl>
                    <dl>
                        <dt>物流配送</dt>
                        <dd><a href="">运费政策</a></dd>
                        <dd><a href="">物流配送服务</a></dd>
                        <dd><a href="">签收验货</a></dd>
                        <dd><a href="">物流查询</a></dd>
                    </dl>
                    <dl>
                        <dt>售后服务</dt>
                        <dd><a href="">退换货政策</a></dd>
                        <dd><a href="">贵就赔</a></dd>
                        <dd><a href="">维修/安装</a></dd>
                        <dd><a href="">订单修改</a></dd>
                        <dd><a href="">退换货申请</a></dd>
                        <dd><a href="">我的发票</a></dd>
                    </dl>
                    <dl>
                        <dt>商家服务</dt>
                        <dd><a href="">合作招商</a></dd>
                        <dd><a href="">广告服务</a></dd>
                        <dd><a href="">商家帮助</a></dd>
                        <dd><a href="">服务市场</a></dd>
                        <dd><a href="">规则中心</a></dd>
                    </dl>

                    <div class="app-down">
                        <p>身边苏宁</p>
                        <a href="#">全国300多个城市，上万个门店和服务终端期待您的光临，为您提供最贴心的服务！</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer-bottom">
           <div class="w">
               <p>
                   <a href="">苏宁互联</a>
                   <a href="">苏宁金融</a>
                   <a href="">苏宁支付</a>
                   <a href="">PP视频</a>
                   <a href="">红孩子</a>
                   <a href="">苏宁物流</a>
                   <a href="">手机苏宁</a>
                   <a href="">零售云</a>
                   <a href="">知识产权举报</a>
                   <a href="">投资者关系</a>
               </p>
               <p>
                   <a href="">联系我们</a>
                   <a href="">诚聘英才</a>
                   <a href="">供应商入驻</a>
                   <a href="">广告平台</a>
                   <a href="">苏宁联盟</a>
                   <a href="">苏宁招标</a>
                   <a href="">友情链接</a>
                   <a href="">法律申明</a>
                   <a href="">用户体验提升计划</a>
                   <a href="">股东会员认证</a>
               </p>
               <p>Copyright© 2002-2018，苏宁易购集团股份有限公司版权所有 | 苏公网安备 32010202010078号 | 苏ICP备10207551号-4 | 苏B1-20130131</p>
               <p>苏B2-20130376 | 苏B2-20130391 | 出版物经营许可证新出发苏批字第A-243号 | 互联网药品信息服务资格证书（苏）-非经营性-2016-0005</p>
               <p>本网站直接或间接向消费者推销商品或者服务的商业宣传均属于“广告”（包装及参数、售后保障等商品信息除外）</p>
               <div class="copyright">
                   <img src="aria.png" alt="">
                   <img src="dianxin.jpg" alt="">
                   <img src="dianzizhizhao.png" alt="">
                   <img src="netsafe1 (1).png" alt="">
                   <img src="netsafe3.png" alt="">
                   <img src="unicom.png" alt="">
               </div>
           </div>
        </div>
    </footer>
</body>
</html>
最终效果图