商品列表页面实现

效果图

image.png

字体大小颜色可以自己选择修改
1.html

<div class="goods">
            <img src="img/luyou.jpg" class="goodsImage"/>
            <div class="goodsContent">
                <span class="goodsTitle">TP-LINK TL-WDN5200H免驱版 650M 双频USB无线网卡台式机笔记本通用 随身WiFi接收器 发射器</span>
                <span class="goodsPrice">￥198</span>
                <span class="goodsSale">已售 189 件</span>
            </div>
        </div>

2.css

.goods{
    height: 90px;
    padding: 5px;
    display: flex;
    border-bottom: 1px solid #e4e4e4;
}
.goodsImage{
    width: 90px;
    height: 90px;
    border-radius: 3px;
}
.goodsContent{
    display: inline-block;
    height: 90px;
    position: relative;
    padding-left: 5px;
}
.goodsTitle{
    width: 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.goodsPrice{
    color: red;
    position: absolute;
    bottom: 2px;
    font-size: 20px;
}
.goodsSale{
    color: #c4c4c4;
    position: absolute;
    bottom: 2px;
    right: 8px;
    font-size: 13px;
}