仿淘宝商品列表

仿淘宝商品列表练习

html:

        <div class="list">
            <div class="title">---------你可能还喜欢的---------</div>
            <div class="unit">
                <div class="img">
                    <img src="../0328课件/imges/item17.webp" alt="">
                </div>
                <div class="dedail">
                    <div class="desc">商品描述商品描述,商品描述商品描述,商品描述商品描述</div>
                    <div class="plc"><span class="iconfont icon-renminbi1688">89</span><span class="num">2000+人购买</span></div>
                </div>
            </div>
            <div class="unit">
                <div class="img">
                    <img src="../0328课件/imges/item18.webp" alt="">
                </div>
                <div class="dedail">
                <div class="desc">商品描述商品描述,商品描述商品描述,商品描述商品描述</div>
                <div class="plc"><span class="iconfont icon-renminbi1688">200</span><span class="num">2000+人购买</span></div>
                </div>
            </div>
            <div class="unit">
                <div class="img">
                    <img src="../0328课件/imges/item19.webp" alt="">
                </div>
                <div class="dedail">
                <div class="desc">商品描述商品描述,商品描述商品描述,商品描述商品描述</div>
                <div class="plc"><span class="iconfont icon-renminbi1688">150</span><span class="num">10w+人购买</span></div>
                </div>
            </div>
            <div class="unit">
                <div class="img">
                    <img src="../0328课件/imges/item20.webp" alt="">
                </div>
                <div class="dedail">
                <div class="desc">商品描述商品描述,商品描述商品描述,商品描述商品描述</div>
                <div class="plc"><span class="iconfont icon-renminbi1688">100</span><span class="num">100w+人购买</span></div>
                </div>
            </div>
        </div>

css：

main .list {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 0.1rem;
    padding: 0.1rem 0 0.5rem 0;
}
main .list .title {
    grid-column: span 2;
    text-align: center;
    color: darkorange;
    font-weight: bolder;
    padding: 10px 0;
    font-size: larger;
}
main .list .unit {
    background-color: #fff;
    display: grid;
    border-radius: 0.1rem;
}
main .list .unit img {
    border-radius: 0.1rem 0.1rem ;
    width: 100%;
    height: 100%;
}
main .list .unit .dedail {
   display: grid;
   padding: 0.1rem;
   gap: 0.1rem;
}
main .list .unit .dedail .plc .iconfont {
    color: orange;
    font-size: large;
    margin-right: 0.1rem;   
}
main .list .unit .dedail .plc .num {
    color: #ccc;
}

效果：