亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

淘寶移動(dòng)端商品列表

HTML代碼如下：
<!-- 2.商品列表 -->

        <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人已購(gòu)買</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人已購(gòu)買</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人已購(gòu)買</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人已購(gòu)買</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人已購(gòu)買</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人已購(gòu)買</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人已購(gòu)買</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人已購(gòu)買</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人已購(gòu)買</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人已購(gòu)買</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人已購(gòu)買</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人已購(gòu)買</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;
}

運(yùn)行效果如下圖：

批改老師：PHPz

批改狀態(tài)：合格

老師批語(yǔ)：