HTML5+CSS3 Pink老师课后作业——购物模块_html怎么制作盒子网上购物-CSDN博客

本文链接：https://blog.csdn.net/weixin_45328723/article/details/124361070

Html5+css3 Pink老师——购物模块
在这里插入图片描述

思路

先有一个div大盒子里面包含图片，标题，div小盒子，div小盒子，a标签链接
在这里插入图片描述
代码：
HTML：

<body>
    <div class="shopping">
        <img src="../img/pgsj.png" alt="">
        <h5>Apple苹果iPhone 6 Plus(A1699)32G金色 移动联通电信4G手机</h5>
        <div class="money">
            <span>¥6088</span>
            <span>¥6988</span>
        </div>
        <div class="merch">
            已售 <span>87%</span>
            <div class="bar">
                <div class="bar_in"></div>
            </div>
            剩余<span>29</span>件
        </div>
        <a href="">立即抢购</a>
    </div>

</body>

Css:

<style>
        * {
            margin: 0;
            padding: 0;
        }

        a {
            text-decoration: none;
        }

        .shopping {
            position: absolute;
            width: 300px;
            height: 400px;

        }

        .shopping img {
            display: block;
            width: 120px;
            margin: 0 auto;
            margin-top: 10px;

        }

        .shopping h5 {
            margin-left: 10px;
            margin-right: 10px;
            margin-top: 10px;
            color: rgb(167, 175, 179);
            font-weight: 500;

        }

        .money {
            margin-top: 10px;
        }

        .money span:first-child {
            margin-left: 10px;
            color: rgb(224, 33, 54);

        }

        .money span:last-child {
            color: rgb(160, 165, 161);
            font-size: 10px;
            text-decoration: line-through;

        }

        .merch {
            margin-left: 10px;
            margin-top: 5px;
            color: rgb(160, 165, 161);
            font-size: 10px;
        }

        .bar {
            display: inline-block;
            width: 120px;
            height: 10px;
            border: 1px solid red;
            border-radius: 7px;

        }

        .bar_in {
            width: 87%;
            height: 100%;
            background-color: rgb(243, 67, 69);
        }

        .merch span {
            color: rgb(223, 61, 63);
        }

        .shopping a {
            display: block;
            width: 280px;
            height: 50px;
            margin: 5px auto;
            background-color: rgb(175, 25, 23);
            color: #fff;
            font-size: 18px;
            text-align: center;
            line-height: 50px;
        }
    </style>

效果图
请添加图片描述