小时候总羡慕长大的人,过年回家拉着行李箱穿着漂亮的衣服。现在才知道,一个人提着行李箱的背后需要肩负着多大 的不容易。
li标签设置浮动的时候,下方的元素会占据li元素原有的位置,导致布局变乱,解决办法:给父元素设置清除浮动
li元素添加 hover 设置外部边框的时候,会有闪动的情况,原因是它本身就有一个边框,需要此时将其自己的边框设置为transparent透明
.hd_l ul li a{
display: block;
font-size: 16px;
line-height: 47px;
padding: 0 10px;
font-weight: 700;
color: #000;
}
.hd_r{
float: right;
}
.hd_r ul li{
float: left;
}
.hd_r ul li a {
display: block;
font-size: 14px;
line-height: 52px;
padding: 0 10px;
}
.hd_r ul li:last-child a::after{
content: '\e96d';
font-family: 'icomoon';
}
.bd img {
width: 1200px;
margin-top: -5px;
}
.hd ul{
}
.hd ul li{
/*设置浮动其下方的盒子会升上来,给父盒子清除浮动*/
float: left;
width: 290px;
height: 460px;
border: 1px solid transparent;
}
.hd ul li:hover{
border: 1px solid #e60012;
}
<div class="nav">
<div class="w list_hd">
<div class="hd_l">
<ul>
<li><a href="#">王子秒杀</a></li>
<li><a href="#">王子会员</a></li>
<li><a href="#">王子优惠</a></li>
</ul>
</div>
<div class="hd_r">
<ul>
<li><a href="#">王子男装</a></li>
<li><a href="#" class="style_red">王子手机</a></li>
<li><a href="#">王子乐器</a></li>
<li><a href="#">王子书籍</a></li>
<li><a href="#">王子外卖</a></li>
<li><a href="#">王子物流</a></li>
<li><a href="#">王子仓储</a></li>
<li><a href="#">王子女装</a></li>
<li><a href="#">更多分类</a></li>
</ul>
</div>
</div>
</div>
<div class="w content">
<div class="bd">
<img src="upload/shangshi.jpg" alt="">
</div>
<div class="hd">
<ul class="clearfix">
<li><img src="upload/liebiao.jpg" alt=""></li>
<li><img src="upload/liebiao.jpg" alt=""></li>
<li><img src="upload/liebiao.jpg" alt=""></li>
<li><img src="upload/liebiao.jpg" alt=""></li>
<li><img src="upload/liebiao.jpg" alt=""></li>
<li><img src="upload/liebiao.jpg" alt=""></li>
<li><img src="upload/liebiao.jpg" alt=""></li>
</ul>
</div>
</div>