小知识
一个容器的第一个子元素的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;
}