黑马前端 品优购 猜你喜欢模块

• 效果图
  

• 图片素材
  
  
  

• 代码（有待优化 欢迎指出）

<div class="w like">
        <div class="like-hd">
            <h3>猜你喜欢</h3>
            <button>换一批</button>
        </div>
        <div class="like-bd">
            <ul>
                <li>
                    <img src="upload/like-1.png" alt="">
                    <p>阳光美包新款单肩包女
                        包时尚子母包四件套女</p>
                    <div class="price">
                        <h5>¥</h5><h4>116.00</h4>
                    </div>
                </li>
                <li>
                    <img src="upload/like-2.png" alt="">
                    <p>爱仕达 30CM炒锅不粘
                        锅NWG8330E电磁炉炒</p>
                    <div class="price">
                        <h5>¥</h5><h4>99.00</h4>
                    </div>
                </li>
                <li>
                    <img src="upload/like-3.png" alt="">
                    <p>捷波朗 <br>
                        （jabra）BOOSI劲步</p>
                    <div class="price">
                        <h5>¥</h5><h4>245.00</h4>
                    </div>
                </li>
                <li>
                    <img src="upload/like-1.png" alt="">
                    <p>阳光美包新款单肩包女
                        包时尚子母包四件套女</p>
                    <div class="price">
                        <h5>¥</h5><h4>116.00</h4>
                    </div>
                </li>
                <li>
                    <img src="upload/like-2.png" alt="">
                    <p>爱仕达 30CM炒锅不粘
                        锅NWG8330E电磁炉炒</p>
                    <div class="price">
                        <h5>¥</h5><h4>99.00</h4>
                    </div>
                </li>
                <li>
                    <img src="upload/like-3.png" alt="">
                    <p>捷波朗 <br>
                        （jabra）BOOSI劲步</p>
                    <div class="price">
                        <h5>¥</h5><h4>245.00</h4>
                    </div>
                </li>
            </ul>
        </div>
    </div>

.like{
    margin-top: 30px;
    height: 262px;
}
.like-hd{
    height: 29px;
}
.like-hd h3{
    float: left;
    font-size: 18px;
    color: #333;
    font-weight:400 ;
    line-height: 18px;

}
.like-hd button{
    float: right;
    background-color:#fff;
    color: #666666;
    font-size: 12px;
    margin-bottom: 10px;
}
.like-hd button::after{
    content: '\ea2e';
    font-family: 'icomoon';
    font-size: 12px;
    color: #666666;
    margin-left: 10px;
    
}
.like-bd{
    height: 233px;
    border: 1px solid #ededed;
}
.like-bd ul{
    width: 1250px;
}
.like-bd ul li{
    width: 199px;
    height: 233px;
    float: left;
    position: relative;
}
.like-bd ul li img{
    width: 100%;
    /* width: 200px;
    height: 160px; */
}
.like-bd ul li p{
    width: 120px;
    height: 43px;
    margin: 0px 45px 3px 35px;
    font-size: 12px;
    color: #666;
    line-height: 21px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.like-bd ul li .price{
    margin: 0px 45px 0px 35px;
    color: #df3033;
    height: 17px;
}
.price h5{
    float: left;
    font-size: 14px;
    font-weight: 400;
}
.price h4{
    float: left;
    font-size: 18px;
    line-height: 18px;
    font-weight: 400;
}
.like-bd ul li:nth-child(-n+5):after{
    content: '';
    background: #ededed;
    width: 1px;
    height: 62px;
    position: absolute;
    top: 160px;
    right: 0px;
}