网易严选（html+css+js）

一.css部分

body{
     margin: 0;
    -webkit-user-select:none;
    -webkit-touch-callout: none; 
    -webkit-text-size-adjust: 100%;
    font-family: helvetica;
}
a,input,button{
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
button,input{
    -webkit-appearance: none;
    border-radius: 0;
}
:root{
    --c1:#dd1a21;
}
body{
    font-size: 12px;
    background-color: #eee;
    color: #333;
}
a{
    text-decoration: none;
    color: #333333;
}
input{
    outline: none;
    vertical-align: middle;
    padding: 0;
}
ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
img{
    vertical-align: middle;
}
h1,h2,h3,h4,p{
      margin: 0;
}
html{
    font-size: 13.333333333334vw;
}
#logo{
    display:inline-block;
    background: url(https://yanxuan-static.nosdn.127.net/hxm/yanxuan-node-wap/style/img/index-20a8c6c35d0ec7b54782d2098282371f.png);
    width:1.8rem;
    height: 0.5rem;
    background-size: 5.013333333333334rem 5.013333333333334rem;;
    background-position: -1.68rem -3.36rem;
}
/* 头部 */
.header{
    width: 100vw;
    background-color: #fff;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 2;
}
.head{
    height: 0.96rem;
    padding: 0.3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
} 
.head .search{
    height: .56rem;
    line-height: .56rem;
    background-color: #ededed;
    border-radius: .08rem;
    font-size: .28rem;
    color: #666;
    text-align: center;
    margin: 0.2rem;
    flex: 1 1 auto;/* 扩展 收缩 宽度 */
}
.head .logoin button{
    font-size: .24rem;
    color: var(--c1);
    border: 1px solid var(--c1);
    border-radius: .08rem;
}
.channel{
    height: .6rem;
    position: relative;
}
.channel .title{
    display: none;
}
.channel .scrollWrap{
    width: 5.9rem;
    box-sizing: border-box;
    padding-left: .3rem;
}
.channel .inner{
    font-size: .28rem;
    line-height: .56rem;
    white-space: nowrap;/* 不换行 */
    float: left;
}
.channel .inner a{
    display: inline-block;
    padding: 0 .16rem;
    margin-left: .2rem;
}
.channel .inner a.active{
    color: var(--c1);
    margin-left: 0;
    border-bottom: .04rem solid var(--c1);
}
.channel .more{
    width: 1.6rem;
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
}
.channel .more div{
    width: 1rem;
    background: #FFFFFF;
    text-align: center;
    height: .6rem;
}
.channel .more::before{
    content:"";
    width: .6rem;
    height: .6rem;
    background-image: linear-gradient(90deg,rgba(255,255,255,0),#fff);
}
.blockChannel{
    
}
.blockChannel .title{
    display: block;
    height: .6rem;
    font-size: .28rem;
    line-height: .6rem;
    padding-left: .3rem;
}
.blockChannel .scrollWrap{
    width: 100vw;
    padding: .24rem .3rem 0;
    background-color: #FFFFFF;
}
.blockChannel .inner{
    white-space: normal;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.blockChannel .inner a{
    width: 1.5rem;
    height: .56rem;
    font-size: .24rem;
    color: #333;
    padding: 0;
    text-align: center;
    margin:0 0 .4rem 0 ;
    border: 1px solid #ccc;
    border-radius: .04rem;
}
.blockChannel .inner a.active{
    border: 1px solid var(--c1);
    color:var(--c1);
}
/* 引入图标库 */
@font-face {
  font-family: 'iconfont';
  src: url('../font/font_9d10ptd61p/iconfont.eot');
  src: url('../font/font_9d10ptd61p/iconfont.eot?#iefix') format('embedded-opentype'),
      url('../font/font_9d10ptd61p/iconfont.woff2') format('woff2'),
      url('../font/font_9d10ptd61p/iconfont.woff') format('woff'),
      url('../font/font_9d10ptd61p/iconfont.ttf') format('truetype'),
      url('../font/font_9d10ptd61p/iconfont.svg#iconfont') format('svg');
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.search span.iconfont{
    font-size: .28rem;
    margin-right: .05rem;
}
.more span.iconfont{
    font-size: .56rem;
    color: #b2b2b2;
    transition: .3s;
    display: inline-block;
}
.blockChannel .more span.iconfont{
    transform: rotate(180deg);
}
/* banner */
.banner{
    width: 100vw;
    margin-top: 2.3rem;
    overflow: hidden;
    position:relative ;
}
.banner .wrap{
    width: 800vw;
    display: flex;
}
.banner .wrap a{
    width: 100vw;
}
.banner .wrap a img{
    width: 100%;
}
.banner .circle{
    position: absolute;
    bottom: 0.15rem;
    width: 100vw;
    display: flex;
    justify-content: center;
}
.banner .circle span{
    width: 0.4rem;
    height: .04rem;
    margin: 0 0.1rem;
    background: rgba(255,255,255,0.5);
}
.banner .circle span.active{
    background: rgba(255,255,255,1);
}
/*导航*/
.nav{
    background-color: #FFFFFF;
}
.nav .service{
    display: flex;
    height: .72rem;
    justify-content: space-around;
    align-items: center;
}
.nav service span{
    vertical-align: middle;
}
.nav .service span:nth-child(1){
    color: #cc6d70;
    font-size: .3rem;
    margin-right: .1rem;
}
.nav .service span:nth-child(2){
    font-size: .24rem;
}
.nav .navList{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}
.nav .navList li{
    margin: .1rem .18rem;
}
.nav .navList li a{
    display: flex;
    flex-direction: column;
    text-align: center;
}
.nav .navList li img{
    width: 1.1rem;
    margin-bottom: .1rem;
}
.nav .navList li span{
    font-size: .24rem;
}
/* 广告 */
.ad{
    display: flex;
    justify-content: space-between;
    margin: .2rem;
}
.ad img{
    width: 3.5rem;
}
/* 新人专享礼包 */
.newPeople{
    background: #fff;
    margin: .2rem 0;
}
.newPeople h3{
    height: .9rem;
    font-size: .32rem;
    text-align: center;
    line-height: .9rem;
    font-weight: normal;
}
.newPeople h3 span{
    position: relative;
}
.newPeople h3 span::before,newPeople h3 span:after{
    content: "";
    width: .24rem;
    height: .04rem;
    position: absolute;
    top: 50%;
    margin-top: -0.2rem;
    background: #333;
}
 .newPeople h3 span:before{
     left: -0.4rem;
 }
 .newPeople h3 span:after{
     right: -0.4rem;
 }
 .newPeople .content{
     display: flex;
     justify-content: space-between;
     padding: 0 .3rem .3rem .3rem;
 }
 .newPeople .contentLeft{
     width: 3.43rem;
     height: 4.34rem;
     background: #F9E9CF;
     border-radius: .04rem;
 }
 .newPeople .contentLeft h4{
         font-size: .32rem;
         font-weight: normal;
         padding: .3rem 0 .37rem .3rem;
 }
 .newPeople .contentLeft .img{
         width: 2.58rem;
         height: 2.57rem;
         margin: 0px auto;
         background: url(https://yanxuan.nosdn.127.net/352b0ea9b2d058094956efde167ef852.png) no-repeat center/100% 100%;   
 }
 .newPeople .contentRight{
     display: flex;
     flex-direction: column;
     justify-content: space-between;
}
.newPeople .contentRight a{
    width: 3.43rem;
    height: 2.15rem;
    border-radius: .04rem;
    box-sizing: border-box;
    padding: .2rem;
}
.newPeople .contentRight a h4{
    font-size: .32rem;
    font-weight: normal;
}
.newPeople .contentRight a:nth-child(1){
    background:#fbe2d3 url(https://yanxuan-item.nosdn.127.net/2c0147161faaa160cf10b6770f1e290d.png?quality=75&type=webp&imageView&thumbnail=200x200) no-repeat right bottom/2rem 2rem ;
    position: relative;
}
.newPeople .contentRight a:nth-child(1) p{
        color: #F7F7F7;
        font-size: .24rem;
}
.newPeople .contentRight a:nth-child(1) .discount{
    width: .8rem;
    height: .8rem;
    position: absolute;
    top: .2rem;
    right: .2rem;
    background: #f59524;
    border-radius: 50%;
    padding-top: .1rem;
    color: #fff;
    text-align: center;
    font-size: .24rem;
}
.newPeople .contentRight .discount div:last-child{
    text-decoration: line-through;
}
.newPeople .contentRight a:nth-child(2){
    background: #ffecc2 url(https://yanxuan-item.nosdn.127.net/fc02a38d31bb0c0a19cfa64b91a3ca2f.png?quality=75&type=webp&imageView&thumbnail=200x200) no-repeat 1.4rem bottom/2rem 2rem ;
    position: relative;
}
.newPeople .contentRight a:nth-child(2) p{
    font-size: .22rem;
    color: #fff;
    text-align: center;
    line-height: .3rem;
    display: inline-block;
    background: #cbb693;
    border-radius: .04rem;
}
.newPeople .contentRight a:nth-child(2) .discount1{
    width: 1rem;
    height: 0.8rem;
    position: absolute;
    top: .2rem;
    right: .2rem;
    background: #f59524;
    border-radius: 50%;
    padding-top: .1rem;
    color: #fff;
    text-align: center;
    font-size: .24rem;
}
.newPeople .contentRight .discount1 div:last-child{
    text-decoration: line-through;
}

/* 类目热销榜 */
.hot{
    margin: .2rem 0;
    background-color: #fff;
    padding: 0 .3rem .3rem .3rem;
}
.hot h3{
    font-size: .32rem;
    line-height: 1rem;
    font-weight: normal;
}
.hot .hotContent1{
    display: flex;
    justify-content: space-between;
}
.hot .hotContent1 a{
    width: 3.4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.hot .hotContent1 a:nth-child(1){
    background: #f9f3e4;
}
 .hot .hotContent1 a img{
     width: 2rem;
     height: 2rem;
 }
 .hot .hotContent1 a span{
     font-size: .32rem;
     margin-left:.32rem ;
     position: relative;
 }
 .hot .hotContent1 a span::before{
   content: "";
   width: .48rem;
   height: .04rem;
   position: absolute;
   left: 0;
   bottom: -.14rem;
   background-color: #333;
 }
  .hot .hotContent1  a:nth-child(2){
      background-color: #ebeff6;
  }
  .hot .hotContent2{
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;      
  }
.hot .hotContent2 li{
    background: #f5f5f5;
    border-radius: .04rem;
    margin-top: .1rem;
}
.hot .hotContent2 li a{
    display: block;
    width: 1.65rem;
    height: 1.8rem;
    text-align: center;
    padding-top: .1rem;
    box-sizing: border-box;
}
.hot .hotContent2 li a img{
    width: 1.2rem;
    height: 1.2rem;
}
.hot .hotContent2 li a span{
    font-size: .25rem;
}
/* 限时购 */
.limit{
    background: #fff;
    padding: 0 .3rem;
}
.limit .title,.newProductor .title{
    display: flex;
    align-items: center;
    height: 1rem;
}
.limit .title h3{
    font-size: .32rem;
    font-weight: normal;
}
.limit .title .time{
    font-size: .28rem;
    font-weight:bold ;
    margin-right: auto;
}
.limit .title .time span{
    font-size: .24rem;
    color: #fff;
    font-weight: normal;
    text-align: center;
    display: inline-block;
    width: .36rem;
    height: .36rem;
    background: #333;
    line-height: .36rem;
    border-radius: .04rem;
    margin: 0 .1rem;
}
.limit .title .more span,.newProductor .title .more span{
    vertical-align: middle;
    font-size: .28rem;
}
.limit .title .more span .iconfont,.newProductor .title .more span .iconfont{
     font-size: .40rem;
     font-weight: bold;
     color: #bbb;
}
.limit .list,.newProductor ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.limit .list a,.newProductor ul a{
    display: block;
    width: 2.16rem;
    height: 3rem;
}
.limit .list a img,.newProductor ul a img{
    width: 2.16rem;
    height: 2.16rem;
    background: #f5f5f5;
    border-bottom: #f5f5f5;
    border-radius: .04rem;
    margin-bottom: .1rem;
}
.limit .list a p{
    font-size: .28rem;
    color: var(--c1);
    padding-left: .2rem;
}
.limit .list a p span:last-child{
    font-size: .24rem;
    color:#7f7f7f;
    text-decoration: line-through;
    margin-left: .2rem;
}
/* 新品首发 */
.newProductor{
    background: #fff;
    margin: .2rem 0;
    padding: 0 .3rem .17rem;
}
.newProductor .title {
    justify-content: space-between;
}
.newProductor ul li{
    margin-bottom: .13rem;
}
.newProductor ul li a{
    height: auto;
}
.newProductor ul li p{
    font-size: .24rem;
    line-height: .36rem;
    /* 出现省略号的固定写法 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.newProductor ul li span{
    display: block;
    font-size: .32rem;
    line-height: .48rem;
    color:var(--c1);
}
.newProductor ul li button{
    height: .3rem;
    line-height: .3rem;
    padding: 0 .08rem;
    font-size: .18rem;
    color: var(--c1);
    background: rgba(255,255,255,.9);
    border: 1px solid var(--c1);
    border-radius: .15rem;
    margin-left: .1rem;
}

/* 购物指导 */

    .guide{
        display: flex;
        justify-content: space-between;
        background-color: #fff;
        padding: .3rem .3rem .1rem .3rem;
    }
    .guide li{
        background-color: #F5F5F5;
        margin-bottom: .2rem;
    }
    .guide li a{
        display: block;
        padding: .15rem;
    }
    .guide li h3{
        font-size: .32rem;
        font-weight: normal;
    }
    .guide li h4{
        color: #7F7F7F;
        font-size: .24rem;
        font-weight: normal;
    }
    .guide li img{
        width: 1.5rem;
        height: 1.5rem;
    }
    /* 底部 */
    .foot{
        background: #414141;
        margin: .2rem 0 .28rem 0;
        padding: .54rem 0 .30rem 0;
        text-align: center;
        position: relative;
        height: 2.3rem;
    }
    .foot .btn{
        margin-bottom: .36rem;
    }
    .foot .btn a{
        display: inline-block;
        width: 1.72rem;
        height: .62rem;
        line-height: .62rem;
        border: 1px solid #999;
        color: #fff;
        font-size: .24rem;
        border-radius:.04rem;
        margin:  0 .2rem;
    }
    .foot p{
        font-size: .24rem;
        line-height: .32rem;
        color: #999;
        
    }
    /* 底部导航 */
    .footernav{
        width: 100vw;
        height: 1rem;
        box-sizing: border-box;
        background: #fff;
        border: 1px solid #d9d9d9;
        position: fixed;
        bottom: 0;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .footernav a{
        text-align: center;
    }
    .footernav a span{
        display: block;
        font-size: .24rem;
    }
    .footernav a span.iconfont{
        font-size: .36rem;
    } 
    .footernav a.active{
        color: var(--c1);
    }
    /* 回到顶部 */
    .backTop{
        width: .82rem;
        height: .82rem;
        background:rgba(255,255,255,.9);
        position: fixed;
        right: .23rem;
        bottom: 1.23rem;
        transition: .3s;
        opacity: 0;
        border-radius: 50%;
        line-height: .82rem;
    }
    .backTop span{
        font-size: .5rem;
        color: #aaa;
        margin-left: .15rem;
        
    }
    /* 遮罩层 */
    .shadow{
        width: 100vw;
        height: 100vh;
        background: rgba(0,0,0,.5);
        position: fixed;
        left: 0;
        top: 0;
        z-index: 1;
        display: none;
    }
    html部分

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link rel="stylesheet" type="text/css" href="css/index.css"/>
        
    </head>
    <body>
        <div id="wrap">
            <div id="scroll">
                <!-- 头部 -->
                 <header class="header">
                        <!-- logo-->
                        <div class="head">
                            <div class="logo">
                                <h1><a href="#" id="logo"></a></h1>
                            </div>
                            <div class="search">
                                <span class="iconfont">&#xeace;</span>搜索商品,共47496好物
                            </div>
                            <div class="logoin">
                                <button type="button">登录</button>
                            </div>
                        </div>
                        <!-- 频道 -->
                        <div class="channel"><!-- blockChannel -->
                            <div class="title">全部频道</div>
                            <div class="scrollWrap">
                                  <div class="inner">
                                       <a href="#" class="active">推荐</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>
                                  </div>
                                  <div class="more">
                                       <div>
                                         <span class="iconfont">&#xe63e;</span>
                                     </div>
                                  </div>
                            </div>
                        </div>
                        
                 </header>
                 <!-- banner-->
                 <div class="banner">
                      <div class="wrap">
                          <a href="#"><img src="https://yanxuan.nosdn.127.net/d8b91f9b95a9e84967364e1203e01894.jpg?type=webp&imageView&quality=75&thumbnail=750x0" ></a>
                        <a href="#"><img src="https://yanxuan.nosdn.127.net/ee767ce00b4e3cdc54cbffb3d693468e.jpg?type=webp&imageView&quality=75&thumbnail=750x0" ></a>
                        <a href="#"><img src="https://yanxuan.nosdn.127.net/0047b05a75503ba1af43f8abd0b2bbb3.jpg?type=webp&imageView&quality=75&thumbnail=750x0" ></a>
                        <a href="#"><img src="https://yanxuan.nosdn.127.net/67bfe04c8fb13473e50456813f5cf27b.jpg?type=webp&imageView&quality=75&thumbnail=750x0" ></a>
                        <a href="#"><img src="https://yanxuan.nosdn.127.net/6c03a67baf2935220592ffc61c86979c.jpg?type=webp&imageView&quality=75&thumbnail=750x0" ></a>
                        <a href="#"><img src="https://yanxuan.nosdn.127.net/5a4d1ff8fab4576a03bad94dbf840268.jpg?type=webp&imageView&quality=75&thumbnail=750x0" ></a>
                        <a href="#"><img src="https://yanxuan.nosdn.127.net/c17c351e55e1ddfb207fa65570bd3fd2.jpg?type=webp&imageView&quality=75&thumbnail=750x0" ></a>
                        <a href="#"><img src="https://yanxuan.nosdn.127.net/b14ed91ec52f326dbe0098bec69265e3.jpg?type=webp&imageView&quality=75&thumbnail=750x0" ></a>
                        
                      </div>
                      <div class="circle">
                           <span class="active"></span>
                         <span></span>
                         <span></span>
                         <span></span>
                         <span></span>
                         <span></span>
                         <span></span>
                         <span></span>
                      </div>
                 </div>
                 <!-- 导航-->
                 <nav class="nav">
                     <ul class="service">
                         <li><span class="iconfont">&#xe69d;</span><span>网易自营</span></li>
                        <li><span class="iconfont">&#xe6f4;</span><span>30天无忧退货</span></li>
                        <li><span class="iconfont">&#xe61b;</span><span>48小时快速退款</span></li>
                     </ul>
                     <ul class="navList">
                         <li>
                            <a href="#">
                                <img src="https://yanxuan.nosdn.127.net/c6fd8835a6400b7da7a016ad85506b69.png" >
                            </a>
                            <span>新品首发</span>
                        </li>
                        <li>
                            <a href="#">
                                <img src="https://yanxuan.nosdn.127.net/fede8b110c502ec5799702d5ec824792.png" >
                            </a>
                            <span>居家生活</span>
                        </li>
                        <li>
                            <a href="#">
                                <img src="https://yanxuan.nosdn.127.net/896a3beac514ae8f40aafe028e5fec56.png" >
                            </a>
                            <span>服饰鞋包</span>
                        </li>
                        <li>
                            <a href="#">
                                <img src="https://yanxuan.nosdn.127.net/37520d1204a0c55474021b43dac2a69e.png" >
                            </a>
                            <span>美食酒水</span>
                        </li>
                        <li>
                            <a href="#">
                                <img src="https://yanxuan.nosdn.127.net/6c3bd9d885c818b1f73e497335a68b47.png" >
                            </a>
                            <span>个护清理</span>
                        </li>
                        <li>
                            <a href="#">
                                <img src="https://yanxuan.nosdn.127.net/559d2a240ec20b096590a902217009ff.png" >
                            </a>
                            <span>母婴亲子</span>
                        </li>
                        <li>
                            <a href="#">
                                <img src="https://yanxuan.nosdn.127.net/5c088559ebcc3f0ffcda663f04dfbeb2.png" >
                            </a>
                            <span>运动旅行</span>
                        </li>
                        <li>
                            <a href="#">
                                <img src="https://yanxuan.nosdn.127.net/fbca8e1f2948f0c09fc7672c2c125384.png" >
                            </a>
                            <span>数码家电</span>
                        </li>
                        <li>
                            <a href="#">
                                <img src="https://yanxuan.nosdn.127.net/f7281169d4e82d5d8d52aa1fec83fe01.png" >
                            </a>
                            <span>全球特色</span>
                        </li>
                        <li>
                            <a href="#">
                                <img src="https://yanxuan.nosdn.127.net/12e8efd15b9b210ab156a7ee9b340548.gif" >
                            </a>
                            <span>好货超底</span>
                        </li>
                     </ul>
                 </nav>
                  <!-- 广告-->
                  <div class="ad">
                        <a href="#"><img src="https://yanxuan.nosdn.127.net/93fd207d65d28e6d815de6126eaf2403.png?quality=75&type=webp&imageView&thumbnail=375x0" ></a>
                        <a href="#"><img src="https://yanxuan.nosdn.127.net/bb3fc854d67acef94a225ea3fa3d5755.png?quality=75&type=webp&imageView&thumbnail=375x0" ></a>
                  </div>
                  <!-- 新人专享礼-->
                  <div class="newPeople">
                       <h3><span>新人专享礼</span></h3>
                     <div class="content">
                         <a href="#" class="contentLeft">
                            <h4>新人专享礼包</h4>
                            <div class="img">
                                
                            </div>
                        </a>
                        <div class="contentRight">
                            <a href="#">
                                <h4>福利社</h4>
                                <p>今日特价</p>
                                <div class="discount">
                                    <div>￥30.9</div>
                                    <div>￥35</div>
                                </div>
                            </a>
                            <a href="#">
                                <h4>新人拼团</h4>
                                 <p>1元起包邮</p>
                                 <div class="discount1">
                                     <div>￥324.75</div>
                                     <div>￥1299</div>
                                 </div>
                            </a>
                        </div>
                     </div>
                  </div>
                   <!-- 类目热销榜-->
                   <div class="hot">
                          <h3>类目热销榜</h3>
                       <div class="hotContent1">
                             <a href="#">
                              <span>热销榜</span>
                              <img src="https://yanxuan-item.nosdn.127.net/c40842640f6a1a2509960c2029aca1b8.png?quality=75&type=webp&imageView&thumbnail=200x200" >
                          </a>
                          <a href="#">
                              <span>好评榜</span>
                               <img src="https://yanxuan-item.nosdn.127.net/6ca4f35ed719057790f63eaeeee354b0.png?quality=75&type=webp&imageView&thumbnail=200x200" >
                          </a>
                       </div>
                       <ul class="hotContent2">
                            <li>
                             <a href="#">
                                 <span>美食酒水榜</span>
                                 <img src="https://yanxuan-item.nosdn.127.net/a903a6812fc7e0df8f1b84237e368f29.png?quality=75&type=webp&imageView&thumbnail=200x200" >
                             </a>
                         </li>
                         <li>
                            <a href="#">
                                  <span>居家生活榜</span>
                                 <img src="https://yanxuan-item.nosdn.127.net/86989f8cb0ece3d5ebf903b988abae79.png?quality=75&type=webp&imageView&thumbnail=200x200" >
                              </a>
                         </li>
                         <li>
                             <a href="#">
                                 <span>服饰鞋包榜</span>
                                 <img src="https://yanxuan-item.nosdn.127.net/268ab6fc96bb61800aae957e60eadb40.png?quality=75&type=webp&imageView&thumbnail=200x200" >
                              </a>
                         </li>
                         <li>
                             <a href="#">
                                   <span>个护清洁榜</span>
                                   <img src="https://yanxuan-item.nosdn.127.net/7a0e064c1fd99b5eb16608bca9b7aa0d.png?quality=75&type=webp&imageView&thumbnail=200x200" >
                              </a>
                         </li>
                         <li>
                             <a href="#">
                                     <span>数码家电榜</span>
                                     <img src="https://yanxuan-item.nosdn.127.net/7c850ef50fc408c4eab4d7abdb920da3.png?quality=75&type=webp&imageView&thumbnail=200x200" >
                              </a>
                         </li>
                         <li>
                             <a href="#">
                                     <span>严选全球榜</span>
                                     <img src="https://yanxuan-item.nosdn.127.net/7642edf5434fe9dcb1cf8ff29d9d5c03.png?quality=75&type=webp&imageView&thumbnail=200x200" >
                              </a>
                         </li>
                         <li>
                             <a href="#">
                                     <span>母婴亲子榜</span>
                                     <img src="https://yanxuan-item.nosdn.127.net/74662d24f6d217b520178c5a6d031457.png?quality=75&type=webp&imageView&thumbnail=200x200" >
                              </a>
                         </li>
                         <li>
                            <a href="#">
                                     <span>运动旅行榜</span>
                                     <img src="https://yanxuan-item.nosdn.127.net/2a3d5179df95e6c5ba6472704a2b0921.png?quality=75&type=webp&imageView&thumbnail=200x200" >
                              </a>
                         </li>
                       </ul>
                   </div>
                    <!--限时购  -->
                    <div class="limit">
                        <div class="title">
                            <h3>限时购</h3>
                             <div class="time">
                                 <span>00</span>:<span>00</span>
                                :<span>00</span>
                             </div>
                             <a href="#" class="more"><span>更多</span><span class="iconfont">&#xe614;</span></a>
                        </div>
                        <ul class="list">
                            <li>
                                <a href="#">
                                    <img src="https://yanxuan-item.nosdn.127.net/52918a7569096bdb30b47f7ceca3d28f.png?quality=75&type=webp&imageView&thumbnail=216x216" >
                                    <p>
                                        <span>￥628</span>
                                        <span>￥689</span>
                                    </p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="https://yanxuan-item.nosdn.127.net/5763c449cb194edb4166e1bd3acf0b2d.png?quality=75&type=webp&imageView&thumbnail=216x216" >
                                <p>
                                    <span>￥398</span>
                                    <span>￥499</span>
                                </p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="https://yanxuan-item.nosdn.127.net/5763c449cb194edb4166e1bd3acf0b2d.png?quality=75&type=webp&imageView&thumbnail=216x216" >
                                    <p>
                                        <span>￥108</span>
                                        <span>￥128</span>
                                    </p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="https://yanxuan-item.nosdn.127.net/66e8381ccdb25847c57b889910038822.png?quality=75&type=webp&imageView&thumbnail=216x216" >
                                    <p>
                                        <span>￥299</span>
                                        <span>￥399</span>
                                    </p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="https://yanxuan-item.nosdn.127.net/4f5744971de6aab22ff4312a3a9a4eb1.png?quality=75&type=webp&imageView&thumbnail=216x216" >
                                    <p>
                                        <span>￥819</span>
                                        <span>￥999</span>
                                    </p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="https://yanxuan-item.nosdn.127.net/0f3d2ee932a80837aa537f8fe602300c.png?quality=75&type=webp&imageView&thumbnail=216x216" >
                                    <p>
                                        <span>￥221</span>
                                        <span>￥299</span>
                                    </p>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <!-- 新品首发 -->
                    <div class="newProductor">
                        <div class="title">
                            <h3>新品首发</h3>
                            <a href="#" class="more"><span>更多</span><span class="iconfont">&#xe614;</span></a>
                        </div>
                        <ul>
                            <li>
                                <a href="#">
                                    <img src="https://yanxuan-item.nosdn.127.net/6b0423fb3755b61a2d8979de39c54e8a.png?type=webp&imageView&quality=65&thumbnail=330x330" >
                                    <p>
                                        折叠出水口可自动停止 3秒速热便携饮水机
                                    </p>
                                    <span>￥319</span>
                                    <button type="button">限时购</button>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="https://yanxuan-item.nosdn.127.net/f568b81e67ed94954c5177fa7aab3270.png?type=webp&imageView&quality=65&thumbnail=330x330" >
                                    <p>
                                        吸足10次尿量,婴儿奢柔吸纸尿裤PRO版
                                    </p>
                                    <span>￥79</span>
                                    <button type="button">特价</button>
                                    <button type="button">换购</button>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                <img src="https://yanxuan-item.nosdn.127.net/b4892bff6e5ade75b4583da328da20e7.png?type=webp&imageView&quality=65&thumbnail=330x330" >
                                <p>
                                    眼镜+首饰+手表,超声波除菌清洁机pro版
                                </p>
                                <span>￥299</span>
                                <span>每满200减15卷</span>
                                 </a>
                            </li>
                            <li>
                                <a href="#">
                                <img src="https://yanxuan-item.nosdn.127.net/b4987c9b676f71f2b55b5b6396
                                a4fed5.png?type=webp&imageView&quality=65&thumbnail=330x330 ">
                                <p>地收腰短款表强温 女式狐狸毛领收腰短款羽绒服</p>
                                 <span>￥732</span>
                                 <button type="button">特价</button>
                                 </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="https://yanxuan-item.nosdn.127.net/6a50bd8e0b2d0f66c0224ff85586a9a9.png?type=webp&imageView&quality=65&thumbnail=330x330" >
                                  <p>吸着吃的网红橙,爱媛果冻橙五斤</p>
                                  <span>￥55</span>
                                  <button type="button">特价</button>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                <img src="https://yanxuan-item.nosdn.127.net/2dffc83551401e34ef6eeec5f964c027.png?type=webp&imageView&quality=65&thumbnail=330x330" >
                                <p>不漂白更健康 臻语竹韵M码3层抽纸 6包/提</p>
                                <span>￥16.9</span>
                                <span>每满200减15卷</span>
                                </a>
                            </li>
                            
                        </ul>
                    </div>
                    <!-- 购物指导 -->
                    <ul class="guide">
                        <li>
                            <a href="#">
                                <h3>超值专区</h3>
                                 <h4>低至9.9元</h4>
                                 <img src="https://yanxuan-item.nosdn.127.net/6f4174968ff47cb68d1f5dd4edb569cb.png?quality=75&type=webp&imageView&thumbnail=150x150" >
                                 <img src="https://yanxuan-item.nosdn.127.net/1f0c3f5d32b0e804deb9b3d56ea6c3b2.png?quality=75&type=webp&imageView&thumbnail=150x150" >
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <h3>员工精选</h3>
                                <h4>天天内部价</h4>
                                <img src="https://yanxuan-item.nosdn.127.net/039a1f3e40d3841d16e74039375fd728.png?quality=75&type=webp&imageView&thumbnail=150x150" >
                                <img src="https://yanxuan-item.nosdn.127.net/44b26f36153072a5cc6dd253aab3cb82.png?quality=75&type=webp&imageView&thumbnail=150x150" >
                            </a>
                        </li>
                    </ul>
                    <!-- 底部 -->
                    <footer class="foot">
                        <div class="btn">
                            <a href="#">
                                下载APP
                            </a>
                            <a href="#">电脑版</a>
                        </div>
                        <p>网易公司版权所有 © 1997-</p>
                        <p>食品经营许可证：JY13301080111719</p></p>
                    </footer>
                    <!-- 底部导航 -->
                    <nav class="footernav">
                        <a href="#" class="active">
                        <span class="iconfont">&#xe651;</span>
                        <span>首页</span>
                        </a>
                        <a href="#">
                        <span class="iconfont">&#xe627;</span>
                        <span>分类</span>
                        </a>
                        <a href="#">
                        <span class="iconfont">&#xe620;</span>
                        <span>值得买</span>
                        </a>
                        <a href="#">
                        <span class="iconfont">&#xe650;</span>
                        <span>购物车</span>
                        </a>
                        <a href="#">
                        <span class="iconfont">&#xe652;</span>
                        <span>个人</span>
                        </a>
                    </nav>
                    <!-- 礼物与回到顶部 -->
                    <a href="javascript:;" class="backTop">
                        <span class="iconfont">&#xe6fd;</span>
                    </a>
                    <!--遮罩层-->
                    <div class="shadow">
                        
                    </div>
            </div>
        </div>
    </body>
    <script src="js/index.js" type="text/javascript" charset="utf-8"></script>
</html>

js部分

//滑屏导航
(function(){
    var scollWrap=document.querySelector('.scrollWrap'),
        inner=document.querySelector('.inner');    
    var startPointX=0,//按下时手指的坐标
        startLeft=0,//按下元素的位置
        movePointX=0;//坐标点移动的距离
    inner.style.transform='translateX(0px)';//为了在下面能用js取到移动的距离
    scollWrap.addEventListener('touchstart',function(ev){
        //changedTouches 触发当前事件的手指列表
        startPointX=ev.changedTouches[0].pageX;
        startLeft=parseInt(inner.style.transform.split('(')[1]);
    });
    scollWrap.addEventListener('touchmove',function(ev){
        movePointX=ev.changedTouches[0].pageX-startPointX;//手指移动的距离
        var x=movePointX+startLeft;//元素走的位置
        if(x >=0){//左边到头
            x=0;
        }else if(x <= scollWrap.offsetWidth-inner.offsetWidth){
           x=scollWrap.offsetWidth-innerWidth;
        }
        inner.style.transform='translateX('+x+'px)';
        ev.preventDefault();//左右拖动的时候会触发滚动条上下        
    });
})();
//折叠导航
(function(){
    var more=document.querySelector('.channel .more span'),
    channel=document.querySelector('.channel'),
    shadow=document.querySelector('.shadow'),
    inner=document.querySelector('.inner');
    var shrink=true;//用来决定内容是否展开
    more.addEventListener('touchend',function(){
        if(shrink){//展开
            channel.classList.add('blockChannel');
            shadow.style.display='block';
            inner.style.transform='translateX(0)';
        }else{//收缩
            channel.classList.remove('blockChannel');
            shadow.style.display='none';
        }
        shrink=!shrink;
        
    });
    //阻止拖动遮罩层的时候滚动会走
    shadow.addEventListener('touchstart',function(ev){
        ev.preventDefault();
    });
})();

//轮播图
(function(){
    /* querySelector() 方法返回匹配指定 CSS 选择器元素的第一个子元素 。 */
    var banner=document.querySelector('.banner'),
        wrap=document.querySelector('.wrap'),
        circles=document.querySelectorAll('.banner .circle span'),
        imgWidth=banner.offsetWidth;//offsetWidth 水平方向 width + 左右padding + 左右border-width
    var startPointX=0,//按下时手指的坐标
        startLeft=0,//按下时元素的位置
        movePointX=0,//坐标点的移动
        cn=0,//当前的索引值
        ln=0;//上一个索引值
        timer=null;
        
    //初始化
    wrap.innerHTML+=wrap.innerHTML;
    var len=wrap.children.length;
    wrap.style.width=len*100+'vw';
    wrap.style.transform='translate(0px)';//为了在下面能用js取到移动距离
    
    //手指按下
    banner.addEventListener('touchstart',function(ev){
        clearInterval(timer);
        wrap.style.transition='null';
        if(cn==0){//按下是第一张图片,往右走,会出现空白
        cn=len/2; //第2份的第一张        
        }
        if(cn ==len-1){//按下的是最后一张图片,如果往左走,那就会出现空白
        cn=len/2-1;
        }
        wrap.style.transform='translate('+ -cn*imgWidth+'px)';
        
        startPointX=ev.changedTouches[0].pageX;//按下鼠标离我可视区的距离
        startLeft=parseInt(wrap.style.transform.split('(')[1]);//盒子移动的距离
        
    });
    //手指移动
    banner.addEventListener('touchmove',function(ev){
        movePointX=ev.changedTouches[0].pageX-startPointX;//手指移动的距离
        var x=movePointX+startLeft;//元素走的位置
        wrap.style.transform='translateX('+x+'px)';
        
        ev.preventDefault();//避免左右滚动时,滚动条滚动
        
    });
    //手指抬起
    banner.addEventListener('touchend',function(ev){
        movePointX=ev.changedTouches[0].pageX-startPointX;//手指移动距离
        
        var backWidth=imgWidth/8;//回弹的距离,只有超过这个距离图片才会切换
        if(Math.abs(movePointX)>backWidth){
            /* 
            拖动时cn的变化
             1.movePointX为正值代表往右拖,往右拖要显示上一张图,cn要减
              1.movePointX为负值代表往右拖,往右拖要显示上一张图,cn要加
             */
            cn -= movePointX/Math.abs(movePointX);
        }
        //图片运动
        wrap.style.transition='.3s';
        wrap.style.transform='translateX('+ -cn*imgWidth +'px)';
    
    
        //小圆点切换
        /* 
         cn:0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
         cn%8:0 1 2 3 4 5 6 7
         */
        var hn=cn%(len/2);//cn模的一半
        circles[ln].className='';
        circles[hn].className='active';
        ln=hn;
        timer=setInterval(move,3000);
    }); 
    //图片运动函数
    function move(){
        cn++;
        wrap.style.transition='.3s';
        wrap.style.transform='translateX('+ -cn*imgWidth +'px)';
        //处理无缝滚动
        wrap.addEventListener('transitionend',function(){
            if(cn >= len-1){
               cn=len/2-1;
            }
            wrap.style.transition='null';
            wrap.style.transform='translateX('+ -cn*imgWidth+'px)';
        });
        var hn=cn%(len/2);//cn%cn的一半
        circles[ln].className='';
        circles[hn].className='active';
        ln=hn;
    }
    timer=setInterval(move,3000);
})();

//回到顶部
(function(){
    var backTop=document.querySelector('.backTop');
    window.οnscrοll=function(){
        var top=window.pageYOffset;//滚动条走的距离
        backTop.style.opacity = top > 600?1:0;
    };
    backTop.addEventListener('touchend',function(){
        window.scrollTo(0,0);//回到顶部
    });
})();