淘宝移动端首页商品列表实例

html部分代码

<!-- 2. 商品列表 -->
<div class="list">
    <div class="recommend-hd-bg">
        <img src="https://img.alicdn.com/tfs/TB1V2eQrKSSBuNjy0FlXXbBpVXa-966-114.png" />
    </div>
    <div class="goods">
        <div class="goods-list">
            <a href="">
                <img src="images/goods/1.jpg" alt="" />
                <span>包邮日本制进口野田珐琅Pochka搪瓷双耳</span>
                <div class="price">
                    <span>￥ 12585.9</span>
                    <span>100+人已购买</span>
                </div>
            </a>
        </div>
        <div class="goods-list">
            <a href="">
                <img src="images/goods/2.jpg" alt="" />
                <span>蕾丝加厚马桶垫夏季网红马桶坐垫大号坐便</span>
                <div class="price">
                    <span>￥ 32.9</span>
                    <span>100+人已购买</span>
                </div>
            </a>
        </div>
        <div class="goods-list">
            <a href="">
                <img src="images/goods/1.jpg" alt="" />
                <span>包邮日本制进口野田珐琅Pochka搪瓷双耳</span>
                <div class="price">
                    <span>￥ 12.9</span>
                    <span>100+人已购买</span>
                </div>
            </a>
        </div>
        <div class="goods-list">
            <a href="">
                <img src="images/goods/1.jpg" alt="" />
                <span>包邮日本制进口野田珐琅Pochka搪瓷双耳</span>
                <div class="price">
                    <span>￥ 12.9</span>
                    <span>100+人已购买</span>
                </div>
            </a>
        </div>
        <div class="goods-list">
            <a href="">
                <img src="images/goods/1.jpg" alt="" />
                <span>包邮日本制进口野田珐琅Pochka搪瓷双耳</span>
                <div class="price">
                    <span>￥ 12.9</span>
                    <span>100+人已购买</span>
                </div>
            </a>
        </div>
        <div class="goods-list">
            <a href="">
                <img src="images/goods/1.jpg" alt="" />
                <span>包邮日本制进口野田珐琅Pochka搪瓷双耳</span>
                <div class="price">
                    <span>￥ 12.9</span>
                    <span>100+人已购买</span>
                </div>
            </a>
        </div>
    </div>
</div>

css代码

/* 你可能还喜欢 */
main .list .recommend-hd-bg {
    width: 100%;
    height: 0.47rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* 设置你可能还喜欢图片宽高 */
main .list .recommend-hd-bg img {
    width: 45%;
    height: 40%;
}
/* 商品列表 */
main .list .goods {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.1rem;
}
/* 设置单个商品的grid */
main .list .goods .goods-list a {
    display: grid;
    height: 2.6rem;
    background-color: #fff;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 6fr 2fr 1fr;
    border-radius: 0.1rem;
}
/* 图片跨两列 左右上角加上圆角 */
main .list .goods .goods-list a img {
    grid-column: span 2;
    border-top-left-radius: 0.1rem;
    border-top-right-radius: 0.1rem;
}
/* 商品标题跨两列 加一个呼吸距离 */
main .list .goods .goods-list a > span:first-of-type {
    grid-column: span 2;
    padding: 0.1rem;
}
/* 价格和购买人次 */
main .list .goods .goods-list .price {
    grid-column: span 2;
    display: flex;
    padding: 0.05rem 0.1rem;
}
/* 价格和购买人次之间距离 */
main .list .goods .goods-list .price span:first-of-type {
    padding-right: 0.1rem;
    color: #ff5500;
}
main .list .goods .goods-list .price span:last-of-type {
    color: #999999;
}