模仿米家有品网页2

html文件`





//头部导航栏

登陆
注册

下载 APP

• 
  有品推荐
  
• 
  家电
  
• 
  影音
  
• 
  餐厨
  
• 
  服饰
  
• 
  智能
  
• 
  洗护
  
• 
  日杂
  
• 
  饮食
  
• 
  居家
  
• 
  手机
  
• 
  箱包
  
• 
  配件
  
• 
  婴童
  
• 
  出行
  
• 
  品牌
  

22

    <div class="content all-nzdc">        <ul class="container">            <li>                <img src="img/年.jpg" />            </li>            <li>                <img src="img/末.jpg" />            </li>            <li>                <img src="img/12.12.jpg" />            </li>            <li>                <img src="img/大.jpg" />            </li>            <li>                <img src="img/促.jpg" />            </li>        </ul>        <div style="width: 100%;height: 1px;background-color: #E7E7E7;"></div>    </div>

有品推荐
有品为您甄选 悦心购买

                <img style="width: 538px;height: 206px;" src="img/sec-fis2.jpg" />                <img style="width: 538px;height: 206px;" src="img/sec-fis.png" />            </div>            <div class="sec-two line-block"><img style="width:266px; height:206px;" src="img/sec-sru.jpg"/></div>            <div class="sec-sri line-block"><img style="width: 266px;height: 206px;" src="img/sec-two.jpg"/></div>        </div>    </div>

小米众筹
寻觅世间好物

8H美式简约独立弹簧布艺…

松软包裹感，宽厚大身量…

￥1566

554
/200 人参与

283%

                <div class="sec2-two line-block">                    <div>                        <div>                            <img style="width:266px; height:206px;" src="img/sec2-two.jpg"/>                            <img style="width:266px; height:206px;" src="img/sec2-two2.png"/>                        </div>                            <div class="sec-all-p2 line-block">                                    <p class="sec2-p1">2018复古风日历</p>                                    <p class="sec2-p3">￥59</p>                            </div>                    </div>                    <div class="sec-buttom">                    <div class="con-line line-block"></div>                    <div class="con-line-p">                        <span>17539</span>                        /200 人参与                        <span class="con-line-p-le">已结束</span>                    </div>                </div>                </div>                  <div class="sec2-sri line-block">                    <div>                        <div>                            <img style="width: 266px;height: 206px;" src="img/sec2-sri.jpg"/>                        </div>                        <div class="sec-all-p2 ">                                <p class="sec2-p1">造梦者衡氧除尘新风机</p>                                <p class="sec2-p3">￥4999</p>                        </div>                    </div>                    <div class="sec-buttom">                        <div class="con-line line-block"></div>                        <div class="con-line-p">                            <span>757</span>                            /200 人参与                            <span class="con-line-p-le2">379%</span>                        </div>                    </div>                </div>        </div>    </div>`

css文件

*{    margin: 0;    padding: 0;}.content{    width: 1080px;    margin: 0 auto;}.hide{    width:100%;    height: 48px;    background: #333;}.clearfix{    clear:both;}.fr-downlond,.h-fr,.head ul li,.img-more,.container li{    display: inline-block;}.fr{    font-family: "微软雅黑";    font-size: 15px;    float: right;}.h-fr{    height: 48px;    line-height: 48px;}.h-fr-top,.h-fr-top2{    padding-right:7px;    color: #e7e7e7;    text-decoration: none;}.line{    width: 1.5px;    margin: 6px;    height: 14px;    border-right:1px solid #666;}.fr-downlond{    margin-left:7px ;    color: #E7E7E7;}.head ul{    width: 1080px;    margin:0px auto;    margin-top: 20px;}.head ul li{    float: left;    margin: 0;    list-style: none;    text-align: center;    height: 40px;    color: #333333;    font-size: 14px;    width: 65px;}.dis-more{    padding-top:32px;    opacity: 0;    background: #ffffff;    position: absolute;    z-index:21;    height: 0px;    border: 1px solid #e6e6e6;}.dis-more div{    margin-left: 10px;    width: 105px;    display: inline-block;}.dis-more div img{    margin-left: 12.5px;    width: 80px;    height: 80px;}.dis-more div p{    text-align: center;}.all-img{    overflow: hidden;    width: 1080px;    height: 450px;    position:relative;}.img_button1{    position: absolute;    top:50%;    left: 10px;    z-index: 11px;}.img_button2{    position: absolute;    top:50%;    right:10px;    z-index: 11px;}.img-all{    z-index: 10px;    overflow: hidden;    position:relative;    width: 3240px;}.img-more{    float: left;    width: 1080px;    height: 450px;    display: inline;}.dah-logo{    margin-top:26px;}.line-block{    display: inline-block;}.daohline{}.sos-icongo,.sos-input,.sos-iconso{    float: right;}.sos-iconso{    z-index:0;    margin-right: 10px;    margin-top: 30px;}.sos-icongo{    z-index:0;    margin-right: 20px;    margin-top:30px ;}.sos-icongo img,.sos-iconso img{    z-index: 0;}.sos-input{    z-index:0;    margin-top:30px;    width:254px;    height:32px;}.sos-input input{    z-index:0;    color: #E7E7E7;    font-size: 14px;    border:0px;    height:32px;    width:254px;}.all-icon{    width: 350px;    float: right;}br{    position: absolute;    right: 0;    z-index:1;    margin-top: 60px;    margin-right: 50px;    float: right;    background-color: #E7E7E7;    width: 280px;    height: 1px;}.br{    margin-right:50px ;    float: right;    background-color: #E7E7E7;    width:290px;    height:1px;}.container ul{    margin: 0 auto;}.container li img {    cursor: pointer;    width:130px;    height: 144px;}.container li{    margin-right:41px;    margin-left: 41px;}.all-nzdc{    margin-bottom: 100px;}.section-top h2{    font-weight: 400;    font-size: 24px;    font-family: "微软雅黑";    color: #333333;}.section-top{}.sec-top-two{    margin-left: 10px;    font-size: 14px;    color: #999;}.sec-fis{    width: 538px;    height: 246px;    position:relative;}.sec-fis img{    position: absolute;    left: 0;    top: 0;}.sec-sri,.sec-two{    width: 266px;    margin-left: 5px;    float:right;}.section{    margin-bottom: 80px;}.sec2-two img{    position: absolute;    left: 0;    top: 0;}.sec2-sri img{    position: absolute;    left: 0;    top: 0;}.sec2-two{    overflow: hidden;    height: 246px;    position:relative;}.sec2-sri{    overflow: hidden;    height: 246px;    width: 266px;    float:right;}.sec2-sri{    margin-left: 5px;    float:right;    position:relative;}.sec2-two{    width:266px;    margin-left: 5px;    float:right;}.sec2-p1{    color: #333;    font-size: 16px;}.sec2-p2{    font-size: 14px;    color: #999;}.sec2-p3{    font-size: 14px;    color: #c00000;}.sec-all-p{    position: relative;    z-index:5;    margin:15px;    margin-top: 25px;}.sec-all-p p{    font-family: "微软雅黑";    margin-top: 8px;}.sec-all-p2{    position: relative;    z-index:5;    margin:15px;    margin-top: 23px;}.sec-all-p2 p{    font-family: "微软雅黑";    margin-top: 8px;}.con-line{    height: 4px;    width:538px;    background: linear-gradient(to right,#ffcc00,#ff3300);}.sec-buttom{    position: absolute;    left: 0;    bottom: 0;}.sec-buttom div span{    font-family: "微软雅黑";    color:#C00000;}.sec-buttom div{    color:#666666;    font-family: "微软雅黑";}.con-line{    margin-bottom: 6px;}.con-line-p{    margin-bottom: 5px;}.con-line-p-le{    font-family: "微软雅黑";    color:#666666;    margin-left: 70px;}.con-line-p-le2{    color:#666666;    margin-left: 90px;}.con-line-p-le3{    color:#666666;    margin-left:363px;}

js文件

var changindex=0;        //定义图片数量及判断方法    var aa = setInterval(function (){        if(changindex<2){            changindex ++;        }else{            changindex = 0;        }        changTo(changindex);//进行图片显示传入移动值    },3000);$('.img_button2').click(function(){//左推进图片    console.log(changindex);    changindex = (changindex <2) ? (++changindex) : 0;    changTo(changindex);});$('.img_button1').click(function(){//又推进图片    console.log(changindex);    changindex = (changindex >0) ? (--changindex) : 2;    changTo(changindex);});//利用改变all-img的位置利用动画改变，和overflow属性。function changTo(num){    var leftgo=num*1080;    $(".img-all").animate({left:"-"+leftgo+"px"}, 300);} $('.head ul li').on({    mouseenter:show,    mouseleave:function(){        var inul = $('.a').attr('inul');        if(inul=='yes'){            }else{            console.log('列表推出');            hide();        }    }, }) $('.dis-more').on({    mouseenter:function(){        dis_more_img();        $('.dis-more').attr('mousein','yes');        $('.dis-more').stop();        $('.dis-more').animate({'height':'150px','opacity':1},0);    },    mouseleave:function(){        $('.dis-more').attr('mousein','no');        if(inul=='yes'){        }else{            console.log('显示条推出');            hide();        }    } });    function show(){            var show = $('.dis-more').attr('show');            if(show=='showed'){console.log('以显示不能继续显示！');}{                console.log('jinru');                $('.dis-more').attr('show','showed');                index2 = $(this).attr('data-index');                dis_more_img(index2);                setTimeout(function(){                 $('.dis-more').stop();                $('.dis-more').animate({'height':'150px','opacity':1},'fastslow');                //$('.dis-more').slideDown(1000);            },600);        }    }function hide(){            var inul = $('.a').attr('inul');            console.log('tuichu');            console.log(inul);            if(inul=='yes'){                //window.alert(111);            console.log('在ul中不能hide')}{            if($('.dis-more').attr('mousein')=='yes'){             }else{            $('.dis-more').attr('show','unshowed');            $('.dis-more').stop();            var length = $('.dis-more').css('height');            $('.dis-more').animate({'height':'0px','opacity':0},'fastslow');            //$('.dis-more').slideUp(1000);            }        }    }