模仿米家有品网页4

html`

品牌
精心制作 物美价优

                </div>
            </div>
            <div class="for-all-img content">
                <div>
                <div class="pos-img for-all-img-all thrid-all-img" index=1>

                    <div class="pos-img for-all-img-top">
                        <img style="width: 195px;height: 195px;" class="" src="img/for-img3.jpg" />
                        <div><span class="" >【最高直降400元】</span></div>
                    </div>
                    <div class="pos-img for-all-img-buttom">
                        <div>小米Note3</div>
                        <div>
                            <span style="font-size:13px ;" class="">￥</span>
                            <span style="font-size:15px ;" class="">229</span>
                            <span style="font-size:13px ;" class="">起</span>
                        </div>
                    </div>
                </div>
                <div class="pos-img for-all-img-all thrid-all-img" index=1>
                    <div class="pos-img for-all-img-top">
                        <img style="width: 195px;height: 195px;" class="" src="img/for-img4.jpg" />
                        <div><span class="" >【最高直降400元】</span></div>
                    </div>
                    <div class="pos-img for-all-img-buttom">
                        <div>小米Note3</div>
                        <div>
                            <span style="font-size:13px ;" class="">￥</span>
                            <span style="font-size:15px ;" class="">229</span>
                            <span style="font-size:13px ;" class="">起</span>
                        </div>
                    </div>
                </div>
            <div class="pos-img for-all-img-all thrid-all-img" index=1>
                    <div class="pos-img for-all-img-top">
                        <img style="width: 195px;height: 195px;" class="" src="img/for-img3.jpg" />
                        <div><span class="" >【最高直降400元】</span></div>
                    </div>
                    <div class="pos-img for-all-img-buttom">
                        <div>小米Note3</div>
                        <div>
                            <span style="font-size:13px ;" class="">￥</span>
                            <span style="font-size:15px ;" class="">229</span>
                            <span style="font-size:13px ;" class="">起</span>
                        </div>
                    </div>
                </div>
                <div class="pos-img for-all-img-all thrid-all-img" index=1>
                    <div class="pos-img for-all-img-top">
                        <img style="width: 195px;height: 195px;" class="" src="img/for-img4.jpg" />
                        <div><span class="" >【最高直降400元】</span></div>
                    </div>
                    <div class="pos-img for-all-img-buttom">
                        <div>小米Note3</div>
                        <div>
                            <span style="font-size:13px ;" class="">￥</span>
                            <span style="font-size:15px ;" class="">229</span>
                            <span style="font-size:13px ;" class="">起</span>
                        </div>
                    </div>
                </div>
                </div>
            </div>
            <div class="for-all-img content">
                <div>
                <div class="pos-img for-all-img-all thrid-all-img" index=1>

                    <div class="pos-img for-all-img-top">
                        <img style="width: 195px;height: 195px;" class="" src="img/for-img3.jpg" />
                        <div><span class="" >【最高直降400元】</span></div>
                    </div>
                    <div class="pos-img for-all-img-buttom">
                        <div>小米Note3</div>
                        <div>
                            <span style="font-size:13px ;" class="">￥</span>
                            <span style="font-size:15px ;" class="">229</span>
                            <span style="font-size:13px ;" class="">起</span>
                        </div>
                    </div>
                </div>
                <div class="pos-img for-all-img-all thrid-all-img" index=1>
                    <div class="pos-img for-all-img-top">
                        <img style="width: 195px;height: 195px;" class="" src="img/for-img4.jpg" />
                        <div><span class="" >【最高直降400元】</span></div>
                    </div>
                    <div class="pos-img for-all-img-buttom">
                        <div>小米Note3</div>
                        <div>
                            <span style="font-size:13px ;" class="">￥</span>
                            <span style="font-size:15px ;" class="">229</span>
                            <span style="font-size:13px ;" class="">起</span>
                        </div>
                    </div>
                </div>
                <div class="pos-img for-all-img-all thrid-all-img" index=1>
                    <div class="pos-img for-all-img-top">
                        <img style="width: 195px;height: 195px;" class="" src="img/for-img3.jpg" />
                        <div><span class="" >【最高直降400元】</span></div>
                    </div>
                    <div class="pos-img for-all-img-buttom">
                        <div>小米Note3</div>
                        <div>
                            <span style="font-size:13px ;" class="">￥</span>
                            <span style="font-size:15px ;" class="">229</span>
                            <span style="font-size:13px ;" class="">起</span>
                        </div>
                    </div>
                </div>
                <div class="pos-img for-all-img-all thrid-all-img" index=1>
                    <div class="pos-img for-all-img-top">
                        <img style="width: 195px;height: 195px;" class="" src="img/for-img4.jpg" />
                        <div><span class="" >【最高直降400元】</span></div>
                    </div>
                    <div class="pos-img for-all-img-buttom">
                        <div>小米Note3</div>
                        <div>
                            <span style="font-size:13px ;" class="">￥</span>
                            <span style="font-size:15px ;" class="">229</span>
                            <span style="font-size:13px ;" class="">起</span>
                        </div>
                    </div>
                </div>
                </div>
            </div>

        </div>
        <div class="fiw content">
            <div class="fiw-left">

                <div class="fiw-p-1"><span>居家</span></div>
                <div class="fiw-p-2"><span>更多></span></div>
            </div>
            <div style="display: inline-block;height: 370px;" class="fiw-right">
                <img src="img/img-big.jpg" />
            </div>
            <div class="for-all-img content">
                <div>
                <div class="pos-img for-all-img-all thrid-all-img" index=1>

                    <div class="pos-img for-all-img-top">
                        <img style="width: 195px;height: 195px;" class="" src="img/for-img3.jpg" />
                        <div><span class="" >【最高直降400元】</span></div>
                    </div>
                    <div class="pos-img for-all-img-buttom">
                        <div>小米Note3</div>
                        <div>
                            <span style="font-size:13px ;" class="">￥</span>
                            <span style="font-size:15px ;" class="">229</span>
                            <span style="font-size:13px ;" class="">起</span>
                        </div>
                    </div>
                </div>
                <div class="pos-img for-all-img-all thrid-all-img" index=1>
                    <div class="pos-img for-all-img-top">
                        <img style="width: 195px;height: 195px;" class="" src="img/for-img4.jpg" />
                        <div><span class="" >【最高直降400元】</span></div>
                    </div>
                    <div class="pos-img for-all-img-buttom">
                        <div>小米Note3</div>
                        <div>
                            <span style="font-size:13px ;" class="">￥</span>
                            <span style="font-size:15px ;" class="">229</span>
                            <span style="font-size:13px ;" class="">起</span>
                        </div>
                    </div>
                </div>
                <div class="pos-img for-all-img-all thrid-all-img" index=1>
                    <div class="pos-img for-all-img-top">
                        <img style="width: 195px;height: 195px;" class="" src="img/for-img3.jpg" />
                        <div><span class="" >【最高直降400元】</span></div>
                    </div>
                    <div class="pos-img for-all-img-buttom">
                        <div>小米Note3</div>
                        <div>
                            <span style="font-size:13px ;" class="">￥</span>
                            <span style="font-size:15px ;" class="">229</span>
                            <span style="font-size:13px ;" class="">起</span>
                        </div>
                    </div>
                </div>
                <div class="pos-img for-all-img-all thrid-all-img" index=1>
                    <div class="pos-img for-all-img-top">
                        <img style="width: 195px;height: 195px;" class="" src="img/for-img4.jpg" />
                        <div><span class="" >【最高直降400元】</span></div>
                    </div>
                    <div class="pos-img for-all-img-buttom">
                        <div>小米Note3</div>
                        <div>
                            <span style="font-size:13px ;" class="">￥</span>
                            <span style="font-size:15px ;" class="">229</span>
                            <span style="font-size:13px ;" class="">起</span>
                        </div>
                    </div>
                </div>
                </div>
            </div>
            <div class="for-all-img content">
                <div>
                <div class="pos-img for-all-img-all thrid-all-img" index=1>

                    <div class="pos-img for-all-img-top">
                        <img style="width: 195px;height: 195px;" class="" src="img/for-img3.jpg" />
                        <div><span class="" >【最高直降400元】</span></div>
                    </div>
                    <div class="pos-img for-all-img-buttom">
                        <div>小米Note3</div>
                        <div>
                            <span style="font-size:13px ;" class="">￥</span>
                            <span style="font-size:15px ;" class="">229</span>
                            <span style="font-size:13px ;" class="">起</span>
                        </div>
                    </div>
                </div>
                <div class="pos-img for-all-img-all thrid-all-img" index=1>
                    <div class="pos-img for-all-img-top">
                        <img style="width: 195px;height: 195px;" class="" src="img/for-img4.jpg" />
                        <div><span class="" >【最高直降400元】</span></div>
                    </div>
                    <div class="pos-img for-all-img-buttom">
                        <div>小米Note3</div>
                        <div>
                            <span style="font-size:13px ;" class="">￥</span>
                            <span style="font-size:15px ;" class="">229</span>
                            <span style="font-size:13px ;" class="">起</span>
                        </div>
                    </div>
                </div>
                <div class="pos-img for-all-img-all thrid-all-img" index=1>
                    <div class="pos-img for-all-img-top">
                        <img style="width: 195px;height: 195px;" class="" src="img/for-img3.jpg" />
                        <div><span class="" >【最高直降400元】</span></div>
                    </div>
                    <div class="pos-img for-all-img-buttom">
                        <div>小米Note3</div>
                        <div>
                            <span style="font-size:13px ;" class="">￥</span>
                            <span style="font-size:15px ;" class="">229</span>
                            <span style="font-size:13px ;" class="">起</span>
                        </div>
                    </div>
                </div>
                <div class="pos-img for-all-img-all thrid-all-img" index=1>
                    <div class="pos-img for-all-img-top">
                        <img style="width: 195px;height: 195px;" class="" src="img/for-img4.jpg" />
                        <div><span class="" >【最高直降400元】</span></div>
                    </div>
                    <div class="pos-img for-all-img-buttom">
                        <div>小米Note3</div>
                        <div>
                            <span style="font-size:13px ;" class="">￥</span>
                            <span style="font-size:15px ;" class="">229</span>
                            <span style="font-size:13px ;" class="">起</span>
                        </div>
                    </div>
                </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/new_file.js"></script>
</body>

`
css

.left-thr{
    background-image:url(../img/yp-icons.a78aa962.png) ;
    background-position-x:0 ;
    background-position-y:-1616px ;
    position: absolute;
    left: 8px;
    top: 50%;
    z-index: 100;
    margin-left: 8px;
    opacity: 0.35;
}
.left-thr:hover{
    background-position-x: 0 ;
    background-position-y:-1574px;
}
.right-thr{
    position: absolute;
    right: 8px;
    top: 50%;
    float: right;
    background-image:url(../img/yp-icons.a78aa962.png) ;
    background-position-x:0 ;
    background-position-y:-1532px ;
    opacity: 0.35;
}
.right-thr:hover{
    background-position-x:0 ;
    background-position-y:-1490px ;
}
.img_button2{
    border: none;
    width: 38px;
    height: 38px;
    background-color: none;
    background-image:url(../img/yp-icons.a78aa962.png) ;
    background-position-x:0 ;
    background-position-y:-1532px ;
}
.img_button2:hover{
    background-position-x:0 ;
    background-position-y:-1490px ;
}
.img_button1{
    border: none;
    width: 38px;
    height: 38px;
    background-color: none;
    background-image:url(../img/yp-icons.a78aa962.png) ;
    background-position-x:0 ;
    background-position-y:-1616px ;
}
.img_button1:hover{
    background-position-x:0 ;
    background-position-y:-1574px ;
}
.for-img-1-top,.for-img-2-top{
    display: inline-block;

}
.pos-img{
    display: inline-block;
}
.for-all-img-all{
    float: left;
    border: 1px solid #E7E7E7;
    width: 264px;
    height: 301px;
    margin-left: 3px;
}
.for-all-img{
    margin-top: 50px;
}
.for-all-img-top{
    margin-left: 35px;
    text-align: center;

}
.for-all-img-top span{
    font-size: 17px;
    color: #845f3f;
}
.for-all-img-buttom{
    padding-top: 10px;
    margin-top: 20px;
    height: 60px;
    background: #ececec;
    width: 100%;
    text-align: center;
}
.for-all-img-buttom div{
    margin-bottom: 3px;
    font-size: 17px;
    font-family: "微软雅黑";
}
.for-all-img{
    margin-top: 27px;
    height: 345px;
}
.for-all-img-buttom div span{
    font-size: ;
    color:#C00000;
}
.fiw{
    margin-top:50px ;
}
.fiw-left{
    margin-right: 5px;
    float: left;
    display: inline-block;
    opacity: 0.8;
    width: 266px;
    height: 370px;
    background:#f6cfc5;
}

.fiw-p-1{
    margin-left: 100px;
    display: inline-block;
    margin-top: 185px;

}
.fiw-p-1 span{
    text-align: center;
    font-size: 26px;
    font-weight: 700;
    color: #FFFFFF;

}
.fiw-p-2{
    margin-left: 110px;
    margin-top:130px;
}
.fiw-p-2 span{
    font-size: 15px;
    font-weight: 400;
    color: #FFFFFF;
}
.fiw-right img {

    width: 804px;
    height: 370px;
}

js这里写代码片