模仿米家有品网页2

最新推荐文章于 2024-06-24 00:22:32 发布

Jiangbil

最新推荐文章于 2024-06-24 00:22:32 发布

阅读量574

点赞数

分类专栏：学习笔记及心得文章标签： html

本文链接：https://blog.csdn.net/Jiangbil/article/details/78752325

版权

学习笔记及心得专栏收录该内容

20 篇文章 0 订阅

订阅专栏

html文件`

//头部导航栏

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

    <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);
            }
        }
    }