老师，为什么我写到智能那块布局就不对了，智能部分嵌套的第一张居中大图的div的背景颜色显示在家电部分居中大图的下方，正常应该位于家电整体后面。 如果再往后写的话，内容会从家电居中大图开始往下继续撑开页面高度，我不知道是不是语法错了
.content{
width:100%;
/*自动找高，清除子元素产生的浮动影响，*/
overflow:hidden;
background-color:#f5f5f5;
padding:4px 0 12px;
}
/* 手机部分 */
/* 手机、家电、智能等标题部分前面居中的大图片样式 */
.phone-nav,.elc-nav{
width:100%;
height:120px;
margin:22px 0;
}
.phone-nav>a>img{
width:100%;
height:100%;
}
/* 手机、家电等标题样式 */
.title{
color:#333;
font-size:22px;
font-weight:200;
line-height:58px;
text-align:left;
}
/* 手机、家电等标题下a元素样式 */
.title>a{
color:#424242;
font-size:12px;
line-height:58px;
float:right;
}
/* 鼠标悬停在手机、家电等标题下的a元素上，字体颜色改变 */
.title>a:hover{
color:#ff6700;
}
.phone-box,.elc-box{
width:100%;
height:614px;
}
.phone-box-left{
width:234px;
height:614px;
float:left;
}
.phone-box-left img{
width:100%;
height:100%;
}
.phone-box-right{
width:992px;
height:614px;
float:left;
}
.items-1{
width:234px;
height:260px;
background-color:#fff;
margin:0 0 14px 14px;
padding:20px 0;
float:left;
transition:all .2s linear;
}
.img1{
width:160px;
height:160px;
margin-bottom:18px;
}
.phone-box-left:hover,.phone-box-right>div:hover{
box-shadow:0 15px 30px rgba(0,0,0,.1);
transform:translate(0,-2px);
}
.name2{
width: 214px;
height: 21px;
color: #333;
font-size: 14px;
line-height: 21px;
margin: 0 auto 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.desc2{
width: 214px;
height: 18px;
color: #b0b0b0;
font-size: 12px;
line-height: 18px;
margin: 0 auto 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.price2{
color: #ff6700;
font-size: 14px;
}
/* 家电部分 */
/* 家电标题右侧span元素设置样式。字体大小颜色等样式在手机标题部分的a元素中已设置 */
.title span{
margin-left:30px;
transition:border .3s;
}
/* 鼠标悬停在家电标题右侧部分的span元素上，橘色的下边框显示 */
.title span:hover{
border-bottom:2px solid #ff6700;
}
.items-2{
width:234px;
height:300px;
background-color:#fff;
margin-left:0;
padding:0;
float:left;
}
.items-last{
width:234px;
height:300px;
margin-left:14px;
float:left;
position:relative;
}
.items-last>div{
width:234px;
height:143px;
background-color:#fff;
padding-top:50px;
box-sizing:border-box;
}
.items-last>div:first-child{
margin-bottom: 14px;
}
.items-2 img{
width:100%;
height:100%;
}
.price2>del{
color: #b0b0b0;
margin-left:0.5em;
}
.items-last img{
width:80px;
height:80px;
position:absolute;
top:32px;
right:20px;
}
.items-last h3{
position:absolute;
top:50px;
left:-40px;
}
.items-last p{
position:absolute;
top:76px;
left:40px;
}
/* 智能部分 */
.smart-nav{
width:100%;
height:120px;
margin:22px 0;
/* 为什么智能标题上方的smart-nav根据背景颜色是显示在家电标题上方的elc-nav下？
但smart-nav嵌套的图片却是出现在智能标题上方,且显示不全,页面高度不能由嵌套的图片撑开,侧边滚动条显示已经到底
*/
background-color:red;
}
.smart-nav>a>img{
width:100%;
height:100%;
}
.smart .title{
height:58px;
line-height:58px;
}
.smart ul{
padding-top:16px;
}
.smart li{
margin-left:30px;
float:left;
} <!--主体部分 -->
<div class="content">
<div class="wrap">
<!-- 手机部分 -->
<div class="phone">
<div class="phone-nav">
<a href="#">
<img src="../images/431e5fd6bfd1b67d096928248be18303.jpg" alt="">
</a>
</div>
<h2 class="title">手机<a href="#">查看更多</a></h2>
<div class="phone-box">
<div class="phone-box-left">
<a href="#">
<img src="../images/c583f2edc613f1be20fa415910b13ce3.jpg" alt="">
</a>
</div>
<div class="phone-box-right">
<div class="items-1">
<a href="#">
<img src="../images/5dc32ec73299ff79556dcd1cf0f0ac11.png" alt="" class="img1">
<h3 class="name2">小米MIX FOLD </h3>
<p class="desc2">折叠大屏｜自研芯片</p>
<p class="price2">9999元起</p>
</a>
</div>
<div class="items-1">
<a href="#">
<img src="../images/eb69512d9d6430d865d457ec52eebb51.png" alt="" class="img1">
<h3 class="name2">小米11 Ultra </h3>
<p class="desc2">1.12''GN2｜2K四微曲屏</p>
<p class="price2">5999元起</p>
</a>
</div>
<div class="items-1">
<a href="#">
<img src="../images/34caee2c867bfd8c5e0dc2d8c663e121.jpg" alt="" class="img1">
<h3 class="name2">小米11 Pro </h3>
<p class="desc2">1.12''GN2｜骁龙888</p>
<p class="price2">4999元起</p>
</a>
</div>
<div class="items-1">
<a href="#">
<img src="../images/cb554f30eaa0316b0a736c3d59f21584.png" alt="" class="img1">
<h3 class="name2">小米11 青春版 </h3>
<p class="desc2">小米11 青春版 轻薄</p>
<p class="price2">2299元起</p>
</a>
</div>
<div class="items-1">
<a href="#">
<img src="../images/d47f7ecaa04d92bf2790d4a5d53d9099.png" alt="" class="img1">
<h3 class="name2">黑鲨4 Pro</h3>
<p class="desc2">黑鲨4 Pro</p>
<p class="price2">3999元起</p>
</a>
</div>
<div class="items-1">
<a href="#">
<img src="../images/c21247abf4bc610cd86fe00601b0f766.png" alt="" class="img1">
<h3 class="name2">黑鲨4 </h3>
<p class="desc2">黑鲨4 磁动力升降肩键</p>
<p class="price2">2499元起</p>
</a>
</div>
<div class="items-1">
<a href="#">
<img src="../images/b3553083a4975325eab6470d94465548.jpg" alt="" class="img1">
<h3 class="name2">小米10S </h3>
<p class="desc2">骁龙870 | 对称式双扬立体声</p>
<p class="price2">3299元起</p>
</a>
</div>
<div class="items-1">
<a href="#">
<img src="../images/68217751d12b1bfd2f9766e458b5e2dd.jpg" alt="" class="img1">
<h3 class="name2">Redmi K40 Pro 系列 </h3>
<p class="desc2">骁龙888 / E4 旗舰直屏</p>
<p class="price2">2799元起</p>
</a>
</div>
</div>
</div>
</div>
<!-- 家电部分 -->
<div class="elc">
<div class="elc-nav">
<a href="#">
<img src="../images/41d16e66381cfeda7b6b39ab67678d5e.jpg" alt="">
</a>
<h2 class="title">家电
<a href="#">
<span>热门</span>
<span>电视影音</span>
</a>
</h2>
<div class="elc-box">
<div class="items-2">
<a href="#">
<img src="../images/116fc43816b87192be4e67cf762e8da5.jpeg" alt="">
</a>
</div>
<div class="items-1">
<a href="#">
<img src="../images/03a9e7e96a09d256ca1badeec186c859.jpg" alt="" class="img1">
<h3 class="name2">小米全面屏电视65英寸 E65X </h3>
<p class="desc2">全面屏设计</p>
<p class="price2">2999元<del class="original">3299元</del></p>
</a>
</div>
<div class="items-1">
<a href="#">
<img src="../images/20d36fbaa18625e4fe507af31e4e9f83.jpg" alt="" class="img1">
<h3 class="name2">全面屏电视E43K </h3>
<p class="desc2">全面屏设计，海量内容</p>
<p class="price2">1349元<del class="original">1500元</del></p>
</a>
</div>
<div class="items-1">
<a href="#">
<img src="../images/9d8674cd21c486feff5328772ab9cf01.jpg" alt="" class="img1">
<h3 class="name2">小小米电视4A 70英寸 </h3>
<p class="desc2">大屏更享受</p>
<p class="price2">3599元<del class="original">3900元</del></p>
</a>
</div>
<div class="items-1">
<a href="#">
<img src="../images/6bed167fc905bab57dee478bcf1e5e0d.JPG" alt="" class="img1">
<h3 class="name2">米家互联网对开门冰箱 540L </h3>
<p class="desc2">重磅新品福利特惠</p>
<p class="price2">2999元<del class="original">3600元</del></p>
</a>
</div>
<div class="items-2">
<a href="#">
<img src="../images/dfbdabe36b2d630d57a015e6fb5eb3ea.jpg" alt="">
</a>
</div>
<div class="items-1">
<a href="#">
<img src="../images/b8c63a2024528fe5410ebe669b7d2407.jpg" alt="" class="img1">
<h3 class="name2">Redmi全自动波轮洗衣机1A 8kg</h3>
<p class="desc2">一键操作，父母都爱用</p>
<p class="price2">849元<del class="original">899元</del></p>
</a>
</div>
<div class="items-1">
<a href="#">
<img src="../images/74e573c4c0d89048392d14831cc507d5.jpg" alt="" class="img1">
<h3 class="name2">Air 13.3" 2019款 </h3>
<p class="desc2">新一代独立显卡</p>
<p class="price2">6299元</p>
</a>
</div>
<div class="items-1">
<a href="#">
<img src="../images/7e5f89adf98ab3fccb34012b5209cd58.jpg" alt="" class="img1">
<h3 class="name2">米家互联网烟灶套装（天然气）</h3>
<p class="desc2">点火排烟，风随火动</p>
<p class="price2">2298元</p>
</a>
</div>
<div class="items-last">
<div>
<a href="#">
<img src="../images/1612c93ad4756215774a0dbec7a81bb2.jpg" alt="">
<h3 class="name2">米家电烤箱 </h3>
<p class="price2">279元</p>
</a>
</div>
<div>
<a href="#">
浏览更多
</a>
</div>
</div>
</div>
</div>
</div>
<!-- 智能部分 -->
<div class="smart">
<div class="smart-nav">
<a href="#">
<img src="../images/59e8fc8ba9718c266882719fb4bbcedd.jpg" alt="">
</a>
</div>
<h2 class="title">智能
<ul>
<li><a href="#">热门</a></li>
<li><a href="#">安防</a></li>
<li><a href="#">出行</a></li>
</ul>
</h2>
<div class="smart-box">
</div>
</div>
</div>
</div>
</body>
</html>
京公网安备 11011402011233号