【HTML+CSS】pink老师课后作业1——购物格模块的实现

本文链接：https://blog.csdn.net/Cherish_hyx/article/details/110224680

【HTML+CSS】pink老师课后作业1——购物格模块的实现

题目如题所示

第一次接触前端知识，可能这是你见过最笨的办法~ 但是成功了嗷给大家提供一个思路吧~

基本思路

先框架后样式

把整个布局看作是不同大小的盒子组合而成：

HTML代码如下：

<body>
    <div class="father">
        <!-- 图片展示 -->
        <div class="pic">
            <img src="images/huawei.png" alt="">
        </div>
        <!-- 文字说明 -->
        <p class="text">HUAWEI Mate 40 Pro+ 5G</p>
        <!-- 价格 -->
        <div class="money">
            <span class="youhui">&yen;6088</span>
            <span class="yuanjia">&yen;6988</span>
        </div>
        <!-- 进度条 -->
        <div class="jdt">
            <span class="content1">已售87%</span>
            <div class="bar">
                <div class="bar-in"></div>
            </div>
            <span class="content2">剩余27件</span>
        </div>
        <!-- 立即抢购按钮 -->
        <!-- <input type="button" value="立即抢购"> -->
        <a href="#">立即抢购</a>

    </div>
</body>

按照每个小模块添加对应的样式

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .father {
            width: 235px;
            height: 295px;
            margin: 10px auto;
        }
        
        .pic {
            width: 115px;
            height: 150px;
            margin: 0 auto;
            padding-top: 20px;
        }
        
        .pic img {
            width: 115px;
            height: 150px;
        }
        
        .text {
            width: 235px;
            height: 21px;
            /* 单行文字垂直居中 */
            line-height: 21px;
            /* 单行文字水平居中 */
            text-align: center;
            font-size: 14px;
            color: #3a3a3a;
            padding-top: 5px;
        }
        
        .money {
            width: 205px;
            height: 21px;
            /* 单行文字垂直居中 */
            line-height: 21px;
            /* 单行文字水平靠左 */
            text-align: lefter;
            padding-top: 5px;
            padding-left: 30px;
        }
        
        .money .youhui {
            font-size: 16px;
            color: red;
        }
        
        .money .yuanjia {
            font-size: 12px;
            color: #777777;
            text-decoration: line-through;
        }
        
        .jdt {
            position: relative;
            width: 235px;
            height: 21px;
        }
        
        .bar {
            width: 116px;
            height: 7px;
            border: 1px solid red;
            border-radius: 7px;
            padding: 1px;
            margin: 10px auto;
        }
        
        .bar-in {
            width: 87%;
            height: 100%;
            background-color: red;
            border-radius: 7px;
            transition: all .7s;
        }
        
        .bar:hover .bar-in {
            width: 100%;
        }
        
        .jdt .content1 {
            position: absolute;
            left: 5px;
            top: 0;
            font-size: 12px;
        }
        
        .jdt .content2 {
            position: absolute;
            right: 3px;
            top: 0;
            font-size: 12px;
        }    
        a {
            display: block;
            width: 200px;
            height: 30px;
            background-color: red;
            text-align: center;
            line-height: 30px;
            text-decoration: none;
            border: none;
            color: #fff;
            /* 块级盒子水平居中对齐 */
            margin: 5px auto;
        }
    </style>
</head>