实例演示淘宝移动端商品列表 -

淘宝移动端商品列表

HTML代码如下：

        <div class="list">
            <div class="title">--------你可能还喜欢--------</div>
            <div class="list-1">
            <div class="unit">
                <div class="img">
                    <img src="images/items/item8.webp" alt="">
                </div>
                <div class="detail">
                    <div class="desc">商品描述商品描述，商品描述商品描述</div>
                    <div class="price"><span class="iconfont icon-renminbifuhao">89</span>&nbsp;&nbsp;<span class="num">45人已购买</span></div>
                </div>
            </div>
            <div class="unit">
                <div class="img">
                    <img src="images/items/item20.webp" alt="">
                </div>
                <div class="detail">
                    <div class="desc">商品描述商品描述，商品描述商品描述</div>
                    <div class="price"><span class="iconfont icon-renminbifuhao">89</span>&nbsp;&nbsp;<span class="num">45人已购买</span></div>
                </div>
            </div>
            <div class="unit">
                <div class="img">
                    <img src="images/items/item14.webp" alt="">
                </div>
                <div class="detail">
                    <div class="desc">商品描述商品描述，商品描述商品描述</div>
                    <div class="price"><span class="iconfont icon-renminbifuhao">89</span>&nbsp;&nbsp;<span class="num">45人已购买</span></div>
                </div>
            </div>
            <div class="unit">
                <div class="img">
                    <img src="images/items/item15.webp" alt="">
                </div>
                <div class="detail">
                    <div class="desc">商品描述商品描述，商品描述商品描述</div>
                    <div class="price"><span class="iconfont icon-renminbifuhao">89</span>&nbsp;&nbsp;<span class="num">45人已购买</span></div>
                </div>
            </div>
            <div class="unit">
                <div class="img">
                    <img src="images/items/item16.webp" alt="">
                </div>
                <div class="detail">
                    <div class="desc">商品描述商品描述，商品描述商品描述</div>
                    <div class="price"><span class="iconfont icon-renminbifuhao">89</span>&nbsp;&nbsp;<span class="num">45人已购买</span></div>
                </div>
            </div>
            <div class="unit">
                <div class="img">
                    <img src="images/items/item17.webp" alt="">
                </div>
                <div class="detail">
                    <div class="desc">商品描述商品描述，商品描述商品描述</div>
                    <div class="price"><span class="iconfont icon-renminbifuhao">89</span>&nbsp;&nbsp;<span class="num">45人已购买</span></div>
                </div>
            </div>
            <div class="unit">
                <div class="img">
                    <img src="images/items/item18.webp" alt="">
                </div>
                <div class="detail">
                    <div class="desc">商品描述商品描述，商品描述商品描述</div>
                    <div class="price"><span class="iconfont icon-renminbifuhao">89</span>&nbsp;&nbsp;<span class="num">45人已购买</span></div>
                </div>
            </div>
            <div class="unit">
                <div class="img">
                    <img src="images/items/item19.webp" alt="">
                </div>
                <div class="detail">
                    <div class="desc">商品描述商品描述，商品描述商品描述</div>
                    <div class="price"><span class="iconfont icon-renminbifuhao">89</span>&nbsp;&nbsp;<span class="num">45人已购买</span></div>
                </div>
            </div>
            <div class="unit">
                <div class="img">
                    <img src="images/items/item11.webp" alt="">
                </div>
                <div class="detail">
                    <div class="desc">商品描述商品描述，商品描述商品描述</div>
                    <div class="price"><span class="iconfont icon-renminbifuhao">89</span>&nbsp;&nbsp;<span class="num">45人已购买</span></div>
                </div>
            </div>
            <div class="unit">
                <div class="img">
                    <img src="images/items/item11.webp" alt="">
                </div>
                <div class="detail">
                    <div class="desc">商品描述商品描述，商品描述商品描述</div>
                    <div class="price"><span class="iconfont icon-renminbifuhao">89</span>&nbsp;&nbsp;<span class="num">45人已购买</span></div>
                </div>
            </div>
            <div class="unit">
                <div class="img">
                    <img src="images/items/item18.webp" alt="">
                </div>
                <div class="detail">
                    <div class="desc">商品描述商品描述，商品描述商品描述</div>
                    <div class="price"><span class="iconfont icon-renminbifuhao">89</span>&nbsp;&nbsp;<span class="num">45人已购买</span></div>
                </div>
            </div>
            <div class="unit">
                <div class="img">
                    <img src="images/items/item19.webp" alt="">
                </div>
                <div class="detail">
                    <div class="desc">商品描述商品描述，商品描述商品描述</div>
                    <div class="price"><span class="iconfont icon-renminbifuhao">89</span>&nbsp;&nbsp;<span class="num">45人已购买</span></div>
                </div>
            </div>
        </div>
       </div>

CSS代码如下：

/* 你可能还喜欢的商品列表部分 */
main .list{
    display: grid;
    place-items: center;
}
main .list .title{
    color: orangered;
    padding-top: 0.1rem;
    padding-bottom: 0.1rem;
}
main .list .list-1{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 0.1rem;
}
main .list .list-1 .unit img{
    width: 100%;
    height: 100%;
    border-radius: 5px;
}
main .list .list-1 .unit .detail{
    display: grid;
}
main .list .list-1 .unit .detail .price{
    color:rgb(243, 22, 41) ;
}
main .list .list-1 .unit .num{
    color: #555;
}

运行效果如下图：