列表页和商品详情页

1.列表页

图片展示

商品列表HTML代码

<section class="container d-flex my-4 jusify-content-between">
    <section class="card border-0 w-20">
        <img src="./img/cart01.jpg" class="border-radius-5" alt="">
        <div class="card-body">
            <a href="" class="d-block hover-a-none">[细说]细说PHP</a>
            <a href="" class="hover-a-none textColorRed120 fontSize14">￥199.00</a>
        </div>
    </section>
    <section class="card border-0 w-20">
        <img src="./img/flo1.jpg" class="border-radius-5" alt="">
        <div class="card-body">
            <a href="" class="d-block hover-a-none">[细说]细说网页制作</a>
            <a href="" class="hover-a-none textColorRed120 fontSize14">￥199.00</a>
        </div>
    </section>
    <section class="card border-0 w-20">
        <img src="./img/like04.jpg" class="border-radius-5" alt="">
        <div class="card-body">
            <a href="" class="d-block hover-a-none">[细说]细说HTML5</a>
            <a href="" class="hover-a-none textColorRed120 fontSize14">￥199.00</a>
        </div>
    </section>
    <section class="card border-0 w-20">
        <img src="./img/g1.jpg" class="border-radius-5" alt="">
        <div class="card-body">
            <a href="" class="d-block hover-a-none">[细说]细说JS</a>
            <a href="" class="hover-a-none textColorRed120 fontSize14">￥199.00</a>
        </div>
    </section>
</section>

2.商品详情页

图片展示

商品详情页HTML代码

<!-- 商品图片及信息 -->
<section class="container d-flex jusify-content-between">
    <section class=" w-40 pl-4">
        <img src="./img/proDet01_big.jpg" alt="">
        <div>
            <img src="./img/proDet01.jpg" alt="">
            <img src="./img/proDet01.jpg" alt="">
            <img src="./img/proDet01.jpg" alt="">
            <img src="./img/proDet01.jpg" alt="">
        </div>
    </section>
    <section class=" w-50 d-flex flex-column">
        <section class="border-bottom pb-4">
            <h2 class="fontSize18 font-weight-bold">[细说]细说PHP</h2>
            <p class="text-777 my-4">正版细说PHP，编程的揭秘等你来，思维的反转，每一天的进步靠自己</p>
            <p class="fontSize16 pb-2 font-weight-bold textColorRed120">￥199.00</p>
        </section>
        <section class="border-bottom py-4">
            <div>
                <p class="my-4">书的种类</p>
                <div>
                    <img src="./img/proDet01.jpg" class="w-10" alt="">
                    <img src="./img/proDet01.jpg" class="w-10" alt="">
                    <img src="./img/proDet01.jpg" class="w-10" alt="">
                    <img src="./img/proDet01.jpg" class="w-10" alt="">
                </div>
            </div>
            <div class="my-4">
                <p class="py-2">数量 库存<span class="textColorRed120">2000</span>件</p>
                <div class="d-flex mb-4  w-20 align-items-center">
                    <div class="fontSize20 cursor border bg-white px-2">-</div>
                    <div>
                        <input type="text" size="2" name="" class="border-0 px-2 text-center" id="" value="1">
                    </div>
                    <div class="border cursor bg-white px-2">+</div>
                </div>
            </div>
        </section>
        <section class=" d-flex mt-4 pt-4 jusify-content-around">
            <button class="bg-white border bg-dark text-white px-4 w-30 py-2 fontSize14">立即购买</button>
            <button class="bg-white border  px-4 w-30 py-2 fontSize14">加入购物车</button>
        </section>
    </section>
</section>
<!-- 商品详情及为你推荐 -->
<section class="container d-flex jusify-content-between align-content-start">
    <section class="w-80 border-box">
        <div class=" w-90 d-flex border-box  border-top border-bottom">
            <span class="py-2 border-bottom border-dark px-2">商品详情</span>
            <span class="mx-2 py-2 px-2">所有评价</span>
        </div>
        <div>
            <img src="./img/det01.jpg" alt="">
            <img src="./img/det01.jpg" alt="">
            <img src="./img/det01.jpg" alt="">
            <img src="./img/det01.jpg" alt="">
        </div>
    </section>
    <section class="w-20 border pb-4 h-10">
        <div class="bg-db border-top border-bottom-black-30 text-center bg-black-30 py-2">为你推荐</div>
        <div class="d-flex flex-column jusify-content-between">
            <img src="./img/see01.jpg" class="w-80 m-auto" alt="">
            <p class="pl-4 my-2">[细说]细说PHP</p>
            <p class="pl-4 my-2">￥199.00</p>
        </div>
        <div class="d-flex flex-column jusify-content-between">
            <img src="./img/see01.jpg" class="w-80 m-auto" alt="">
            <p class="pl-4 my-2">[细说]细说PHP</p>
            <p class="pl-4 my-2">￥199.00</p>
        </div>
        <div class="d-flex flex-column jusify-content-between">
            <img src="./img/see01.jpg" class="w-80 m-auto" alt="">
            <p class="pl-4 my-2">[细说]细说PHP</p>
            <p class="pl-4 my-2">￥199.00</p>
        </div>
        <div class="d-flex flex-column jusify-content-between">
            <img src="./img/see01.jpg" class="w-80 m-auto" alt="">
            <p class="pl-4 my-2">[细说]细说PHP</p>
            <p class="pl-4 my-2">￥199.00</p>
        </div>
    </section>
</section>
<!-- 猜你喜欢 -->
<section class="container-full p-4 bg-fbfb">
    <section class="text-center fontSize16">
        猜你喜欢
    </section>
    <section class="d-flex jusify-content-between">
        <section class="w-10 opacity3 d-flex fontSize50 jusify-content-center align-items-center iconfont icon-zuoyoujiantou1"></section>
        <section class="w-80  d-flex jusify-content-around">
            <section class="card border-0">
                <a href="">
                <img src="./img/like04.jpg" alt="">
                </a>
                <section class="card-body bg-fbfb">
                    <p class="fontSize14">[细说]细说PHP</p>
                    <p class="fontSize14 textColorRed120">￥199.00</p>
                </section>
            </section>
            <section class="card border-0">
                <a href="">
                <img src="./img/like04.jpg" alt="">
                </a>
                <section class="card-body bg-fbfb">
                    <p class="fontSize14">[细说]细说PHP</p>
                    <p class="fontSize14 textColorRed120">￥199.00</p>
                </section>
            </section>
            <section class="card border-0">
                <a href="">
                <img src="./img/like04.jpg" alt="">
                </a>
                <section class="card-body bg-fbfb">
                    <p class="fontSize14">[细说]细说PHP</p>
                    <p class="fontSize14 textColorRed120">￥199.00</p>
                </section>
            </section>
            <section class="card border-0">
                <a href="">
                <img src="./img/like04.jpg" alt="">
                </a>
                <section class="card-body bg-fbfb">
                    <p class="fontSize14">[细说]细说PHP</p>
                    <p class="fontSize14 textColorRed120">￥199.00</p>
                </section>
            </section>
        </section>
        <section class="w-10 opacity3 d-flex fontSize50 jusify-content-center align-items-center iconfont icon-zuoyoujiantou"></section>
    </section>
</section>