前端实现小米商城网页4（中间部分）

小知识

一个容器的第一个子元素的margin-top会转移给父元素的margin-top；解决办法如下：

1.给父元素加overflow:hidden
2.将第一个子元素的margin-top变成父元素的padding-top
3.给父元素加上border

实现效果

代码

index.html

    <!-- 菜单和广告位s -->
    <div class="idx_menu_adv container">
        <div class="menu">
            <ul class="menu">
                <li class="br bb"><a href=""></a><i class="iconfont iconshouji"></i><span>选购手机</span></li>
                <li class="br bb"><a href=""></a><i class="iconfont iconshouji"></i><span>企业团购</span></li>
                <li class="bb"><a href=""></a><i class="iconfont iconshouji"></i><span>F码通道</span></li>
                <li class="br"><a href=""></a><i class="iconfont iconshouji"></i><span>米粉卡</span></li>
                <li class="br"><a href=""></a><i class="iconfont iconshouji"></i><span>以旧换新</span></li>
                <li><a href=""></a><i class="iconfont iconshouji"></i><span>话费充值</span></li>
            </ul>
        </div>
        <a href="" class="pic"><img
                src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c0c05274f2fbb55fbccb89622f798907.jpg?w=632&h=340"
                alt=""></a>
        <a href="" class="pic"><img
                src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b746a4db2e0473cc076a3a4b9bbe0235.jpg?w=632&h=340"
                alt=""></a>
        <a href="" class="pic"><img
                src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/816a66edef10673b4768128b41804cae.jpg?w=632&h=340"
                alt=""></a>
    </div>
    <!-- 菜单和广告位E -->
    <!-- 广告图S -->
    <div class="idx_adv container">
        <a href=""><img
                src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/6c907ad4004b32609a589bdada203443.jpg?thumb=1&w=1149&h=113&f=webp&q=90"
                alt=""></a>
    </div>
    <!-- 广告图E -->
    <!-- 大内容区域S -->
    <div class="idx_container">
        <div class="container">
            <div class="idx_title">
                <span class="tit">手机</span>
                <a class="see_all">
                    查看全部<i class="iconfont iconxiangyou"></i>
                </a>
            </div>

            <div class="idx_phone idx_box">
                <div class="adv_box col_5" style="  float: left;">
                    <a href="" class="single"><img
                            src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/c3b86ede4dd31d7c126d56fbdde4f855.jpg?thumb=1&w=1149&h=113&f=webp&q=90"
                            alt=""></a>
                </div>

                <div class="good_box">
                    <div class="col_5 good_item">
                        <a href="" class="pic" style=" margin-left: 25px;"><img
                                src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg?thumb=1&w=188&h=188&f=webp&q=90"
                                alt=""></a>
                        <h3 class="name" style="text-align: center; overflow: hidden;padding-bottom:6px;"><a href="">
                                小米10 至尊版
                            </a></h3>
                        <h4 class="desc" style="text-align: center;padding-bottom:6px;height: 11px;font-size: 12px;
                        color: #b0b0b0;">120X 变焦/120W秒充/120Hz屏幕</h4>
                        <p class="price" style="text-align: center;color: #ff6700; margin-top: 8px;font-size: 20px">
                            <span>1599元</span><i>-1999元</i>
                        </p>
                    </div>
                    <div class="col_5 good_item">
                        <a href="" class="pic" style=" margin-left: 25px;"><img
                                src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg?thumb=1&w=188&h=188&f=webp&q=90"
                                alt=""></a>
                        <h3 class="name" style="text-align: center; overflow: hidden;padding-bottom:6px;"><a href="">
                                小米10 至尊版
                            </a></h3>
                        <h4 class="desc" style="text-align: center;padding-bottom:6px;height: 11px;font-size: 12px;
                        color: #b0b0b0;">120X 变焦/120W秒充/120Hz屏幕</h4>
                        <p class="price" style="text-align: center;color: #ff6700; margin-top: 8px;font-size: 20px">
                            <span>1599元</span><i>-1999元</i>
                        </p>
                    </div>
                    <div class="col_5 good_item">
                        <a href="" class="pic" style=" margin-left: 25px;"><img
                                src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg?thumb=1&w=188&h=188&f=webp&q=90"
                                alt=""></a>
                        <h3 class="name" style="text-align: center; overflow: hidden;padding-bottom:6px;"><a href="">
                                小米10 至尊版
                            </a></h3>
                        <h4 class="desc" style="text-align: center;padding-bottom:6px;height: 11px;font-size: 12px;
                        color: #b0b0b0;">120X 变焦/120W秒充/120Hz屏幕</h4>
                        <p class="price" style="text-align: center;color: #ff6700; margin-top: 8px;font-size: 20px">
                            <span>1599元</span><i>-1999元</i>
                        </p>
                    </div>
                    <div class="col_5 good_item">
                        <a href="" class="pic" style=" margin-left: 25px;"><img
                                src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg?thumb=1&w=188&h=188&f=webp&q=90"
                                alt=""></a>
                        <h3 class="name" style="text-align: center; overflow: hidden;padding-bottom:6px;"><a href="">
                                小米10 至尊版
                            </a></h3>
                        <h4 class="desc" style="text-align: center;padding-bottom:6px;height: 11px;font-size: 12px;
                        color: #b0b0b0;">120X 变焦/120W秒充/120Hz屏幕</h4>
                        <p class="price" style="text-align: center;color: #ff6700; margin-top: 8px;font-size: 20px">
                            <span>1599元</span><i>-1999元</i>
                        </p>
                    </div>
                    <div class="col_5 good_item">
                        <a href="" class="pic" style=" margin-left: 25px;"><img
                                src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg?thumb=1&w=188&h=188&f=webp&q=90"
                                alt=""></a>
                        <h3 class="name" style="text-align: center; overflow: hidden;padding-bottom:6px;"><a href="">
                                小米10 至尊版
                            </a></h3>
                        <h4 class="desc" style="text-align: center;padding-bottom:6px;height: 11px;font-size: 12px;
                        color: #b0b0b0;">120X 变焦/120W秒充/120Hz屏幕</h4>
                        <p class="price" style="text-align: center;color: #ff6700; margin-top: 8px;font-size: 20px">
                            <span>1599元</span><i>-1999元</i>
                        </p>
                    </div>
                    <div class="col_5 good_item">
                        <a href="" class="pic" style=" margin-left: 25px;"><img
                                src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg?thumb=1&w=188&h=188&f=webp&q=90"
                                alt=""></a>
                        <h3 class="name" style="text-align: center; overflow: hidden;padding-bottom:6px;"><a href="">
                                小米10 至尊版
                            </a></h3>
                        <h4 class="desc" style="text-align: center;padding-bottom:6px;height: 11px;font-size: 12px;
                        color: #b0b0b0;">120X 变焦/120W秒充/120Hz屏幕</h4>
                        <p class="price" style="text-align: center;color: #ff6700; margin-top: 8px;font-size: 20px">
                            <span>1599元</span><i>-1999元</i>
                        </p>
                    </div>
                    <div class="col_5 good_item">
                        <a href="" class="pic" style=" margin-left: 25px;"><img
                                src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg?thumb=1&w=188&h=188&f=webp&q=90"
                                alt=""></a>
                        <h3 class="name" style="text-align: center; overflow: hidden;padding-bottom:6px;"><a href="">
                                小米10 至尊版
                            </a></h3>
                        <h4 class="desc" style="text-align: center;padding-bottom:6px;height: 11px;font-size: 12px;
                        color: #b0b0b0;">120X 变焦/120W秒充/120Hz屏幕</h4>
                        <p class="price" style="text-align: center;color: #ff6700; margin-top: 8px;font-size: 20px">
                            <span>1599元</span><i>-1999元</i>
                        </p>
                    </div>
                    <div class="col_5 good_item">
                        <a href="" class="pic" style=" margin-left: 25px;"><img
                                src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg?thumb=1&w=188&h=188&f=webp&q=90"
                                alt=""></a>
                        <h3 class="name" style="text-align: center; overflow: hidden;padding-bottom:6px;"><a href="">
                                小米10 至尊版
                            </a></h3>
                        <h4 class="desc" style="text-align: center;padding-bottom:6px;height: 11px;font-size: 12px;
                        color: #b0b0b0;">120X 变焦/120W秒充/120Hz屏幕</h4>
                        <p class="price" style="text-align: center;color: #ff6700; margin-top: 8px;font-size: 20px">
                            <span>1599元</span><i>-1999元</i>
                        </p>
                    </div>


                </div>
                <div class="idx_adv">
                    <a href=""><img
                            src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/c3b86ede4dd31d7c126d56fbdde4f855.jpg?thumb=1&w=1149&h=113&f=webp&q=90"
                            alt=""></a>
                </div>
            </div>

            <div class="idx_phone idx_box" style="margin-top: 40px;">
                <div class="adv_box col_5" style="  float: left;">
                    <a href="" class="single"><img
                            src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/c3b86ede4dd31d7c126d56fbdde4f855.jpg?thumb=1&w=1149&h=113&f=webp&q=90"
                            alt=""></a>
                </div>

                <div class="good_box">
                    <div class="col_5 good_item">
                        <a href="" class="pic" style=" margin-left: 25px;"><img
                                src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg?thumb=1&w=188&h=188&f=webp&q=90"
                                alt=""></a>
                        <h3 class="name" style="text-align: center; overflow: hidden;padding-bottom:6px;"><a href="">
                                小米10 至尊版
                            </a></h3>
                        <h4 class="desc" style="text-align: center;padding-bottom:6px;height: 11px;font-size: 12px;
                        color: #b0b0b0;">120X 变焦/120W秒充/120Hz屏幕</h4>
                        <p class="price" style="text-align: center;color: #ff6700; margin-top: 8px;font-size: 20px">
                            <span>1599元</span><i>-1999元</i>
                        </p>
                    </div>
                    <div class="col_5 good_item">
                        <a href="" class="pic" style=" margin-left: 25px;"><img
                                src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg?thumb=1&w=188&h=188&f=webp&q=90"
                                alt=""></a>
                        <h3 class="name" style="text-align: center; overflow: hidden;padding-bottom:6px;"><a href="">
                                小米10 至尊版
                            </a></h3>
                        <h4 class="desc" style="text-align: center;padding-bottom:6px;height: 11px;font-size: 12px;
                        color: #b0b0b0;">120X 变焦/120W秒充/120Hz屏幕</h4>
                        <p class="price" style="text-align: center;color: #ff6700; margin-top: 8px;font-size: 20px">
                            <span>1599元</span><i>-1999元</i>
                        </p>
                    </div>
                    <div class="col_5 good_item">
                        <a href="" class="pic" style=" margin-left: 25px;"><img
                                src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg?thumb=1&w=188&h=188&f=webp&q=90"
                                alt=""></a>
                        <h3 class="name" style="text-align: center; overflow: hidden;padding-bottom:6px;"><a href="">
                                小米10 至尊版
                            </a></h3>
                        <h4 class="desc" style="text-align: center;padding-bottom:6px;height: 11px;font-size: 12px;
                        color: #b0b0b0;">120X 变焦/120W秒充/120Hz屏幕</h4>
                        <p class="price" style="text-align: center;color: #ff6700; margin-top: 8px;font-size: 20px">
                            <span>1599元</span><i>-1999元</i>
                        </p>
                    </div>
                    <div class="col_5 good_item">
                        <a href="" class="pic" style=" margin-left: 25px;"><img
                                src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg?thumb=1&w=188&h=188&f=webp&q=90"
                                alt=""></a>
                        <h3 class="name" style="text-align: center; overflow: hidden;padding-bottom:6px;"><a href="">
                                小米10 至尊版
                            </a></h3>
                        <h4 class="desc" style="text-align: center;padding-bottom:6px;height: 11px;font-size: 12px;
                        color: #b0b0b0;">120X 变焦/120W秒充/120Hz屏幕</h4>
                        <p class="price" style="text-align: center;color: #ff6700; margin-top: 8px;font-size: 20px">
                            <span>1599元</span><i>-1999元</i>
                        </p>
                    </div>
                    <div class="col_5 good_item">
                        <a href="" class="pic" style=" margin-left: 25px;"><img
                                src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg?thumb=1&w=188&h=188&f=webp&q=90"
                                alt=""></a>
                        <h3 class="name" style="text-align: center; overflow: hidden;padding-bottom:6px;"><a href="">
                                小米10 至尊版
                            </a></h3>
                        <h4 class="desc" style="text-align: center;padding-bottom:6px;height: 11px;font-size: 12px;
                        color: #b0b0b0;">120X 变焦/120W秒充/120Hz屏幕</h4>
                        <p class="price" style="text-align: center;color: #ff6700; margin-top: 8px;font-size: 20px">
                            <span>1599元</span><i>-1999元</i>
                        </p>
                    </div>
                    <div class="col_5 good_item">
                        <a href="" class="pic" style=" margin-left: 25px;"><img
                                src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg?thumb=1&w=188&h=188&f=webp&q=90"
                                alt=""></a>
                        <h3 class="name" style="text-align: center; overflow: hidden;padding-bottom:6px;"><a href="">
                                小米10 至尊版
                            </a></h3>
                        <h4 class="desc" style="text-align: center;padding-bottom:6px;height: 11px;font-size: 12px;
                        color: #b0b0b0;">120X 变焦/120W秒充/120Hz屏幕</h4>
                        <p class="price" style="text-align: center;color: #ff6700; margin-top: 8px;font-size: 20px">
                            <span>1599元</span><i>-1999元</i>
                        </p>
                    </div>
                    <div class="col_5 good_item">
                        <a href="" class="pic" style=" margin-left: 25px;"><img
                                src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg?thumb=1&w=188&h=188&f=webp&q=90"
                                alt=""></a>
                        <h3 class="name" style="text-align: center; overflow: hidden;padding-bottom:6px;"><a href="">
                                小米10 至尊版
                            </a></h3>
                        <h4 class="desc" style="text-align: center;padding-bottom:6px;height: 11px;font-size: 12px;
                        color: #b0b0b0;">120X 变焦/120W秒充/120Hz屏幕</h4>
                        <p class="price" style="text-align: center;color: #ff6700; margin-top: 8px;font-size: 20px">
                            <span>1599元</span><i>-1999元</i>
                        </p>
                    </div>
                    <div class="col_5 good_item">
                        <a href="" class="pic" style=" margin-left: 25px;"><img
                                src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg?thumb=1&w=188&h=188&f=webp&q=90"
                                alt=""></a>
                        <h3 class="name" style="text-align: center; overflow: hidden;padding-bottom:6px;"><a href="">
                                小米10 至尊版
                            </a></h3>
                        <h4 class="desc" style="text-align: center;padding-bottom:6px;height: 11px;font-size: 12px;
                        color: #b0b0b0;">120X 变焦/120W秒充/120Hz屏幕</h4>
                        <p class="price" style="text-align: center;color: #ff6700; margin-top: 8px;font-size: 20px">
                            <span>1599元</span><i>-1999元</i>
                        </p>
                    </div>


                </div>
                <div class="idx_adv">
                    <a href=""><img
                            src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/c3b86ede4dd31d7c126d56fbdde4f855.jpg?thumb=1&w=1149&h=113&f=webp&q=90"
                            alt=""></a>
                </div>
            </div>
        </div>
    </div>
    <!-- 大内容区域E -->
    </div>

index.css

/* 广告图 */
.idx_adv img {
    width: 100%;
    display: block;
}

.idx_container {
    background-color: #f5f5f5;
    margin-top: 40px;
    overflow: hidden;
}

.idx_title {
    overflow: hidden;
    line-height: 60px;
    margin-top: 20px;
}

.idx_container .tit {
    font-size: 22px;
    color: #666;
    line-height: 60px;
}

.idx_container .see_all {
    float: right;
    font-size: 16px;
    color: #666;
    position: relative;
    top: 18px;
}

.idx_container .see_all:hover {
    color: #ff6700;
}


.idx_container .col_5 {
    width: 229px;
    margin-left: 15px;
    margin-bottom: 15px;
    background-color: #fff;
    float: left;
}

.idx_container .idx_box {
    clear: both;
}

.idx_container .adv_box {
    float: left;
}

.adv_box .col_5 {
    margin-left: 0;


}

.idx_container .adv_box .single img {
    width: 229px;
    display: block;
    height: 615px;
}

.idx_box .good_box {
    float: right;
    width: 976px;
}

.idx_contaier .good_item {
    background-color: #fff;
    height: 300px;
    position: relative;
}