CSS-列表详情页

小时候总羡慕长大的人，过年回家拉着行李箱穿着漂亮的衣服。现在才知道，一个人提着行李箱的背后需要肩负着多大 的不容易。

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>

标签：font,详情页,float,li,ul,王子,CSS,列表,hd
来源： https://blog.csdn.net/qq_37304462/article/details/120934146