pink老师 css课后作业(商品页面)纯css

爱敲代码小黑

于 2022-08-01 20:12:28 发布

阅读量259

点赞数 1

文章标签： css css3 html

本文链接：https://blog.csdn.net/m0_69551472/article/details/126108963

版权

这是一个展示小米红米Note10Pro5G手机的抢购小页面设计，包括手机图片、品牌名称、详细型号、价格、秒杀价、原价、销售进度条以及抢购按钮。页面设计采用白色背景，红色元素突出价格和抢购信息，使用了CSS实现文本溢出显示省略号和进度条效果。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手机抢购小页面</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        a {
            text-decoration: none;
        }

        .nav {
            width: 240px;
            height: 444px;
            padding: 12px 9px;
            background-color: #fff;
            margin: 30px auto;
        }

        .pictures {
            width: 100%;
        }

        .pictures img {
            width: 100%;
        }

        /* 单行文本溢出显示省略号 */
        /* .text {
            word-spacing: normal;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        } */

        /* 多行文本溢出显示省略号 */
        .text {
            font-size: 12px;
            color: #666;
            overflow: hidden;
            text-overflow: ellipsis;
            /* 弹性伸缩盒子模型显示 */
            display: -webkit-box;
            /* 限制在一个快元素显示的文本的行数 */
            -webkit-line-clamp: 2;
            /* 设置或者检索伸缩盒子对象的子元素的排列方式 */
            -webkit-box-orient: vertical;
        }

        .xiaomi {
            color: rgb(233, 97, 6);
        }

        /* 价格 */
        .price {
            position: relative;
            width: 100%;
            height: 30px;
            line-height: 30px;
            margin: 10px auto;
            /* background-color: pink; */
            border: 1px solid red;
        }
        /* 秒杀价格 */
        .miaosha {
            position: relative;
            float: left;
            width: 136px;
            height: 100%;
            background-color:red;
            text-align: center;
            color: #fff;
            font-weight: 700;
            margin-right: 2px;
        }
        /* 三角 */
        .miaosha i {
            position: absolute;
            right: 0;
            top: 0;
            width: 0;
            height: 0;
            border-color: transparent #fff transparent transparent;
            border-style: solid;
            border-width: 28px 21px 0 0;
        } 

        /* 原价 */
        .price::after {
            content: "¥5650";
            position: absolute;
            height: 100%;
            right: 0;
            margin-right: 20px;
            color: #666;
            text-decoration: line-through;
            /* background-color: blue; */
        }


        /* 进度条 前面*/
        .progress-bar::before {
            position: absolute;
            content: "已售87%";
            left: 5px;
            font-size: 12px;
            
        }

        /* 大盒子*/
        .progress-bar {
            position: relative;
            width: 100%;
            height: 40px;  
            line-height: 40px;
            /* background-color: pink; */
        }
        /* 进度条 */
        .progress-bar .bar {
            position: absolute;
            border: 1px solid red;
            /* 使用calc函数进行计算长度 */
            width: calc(100%*0.7);
            height: 28px;
            border-radius: 28px;
            margin-top: 6px;

            /* 居中不能使用auto */
            left:50%;
            margin-left: -53px;
        }

        .progress-bar .bar .bar-in {
            width: 28px;
            height: 100%;
            border-radius: 28px;
            background-color: red;
            transition: all .7s;
        }

        .bar:hover .bar-in {
            border-radius: 28px;
            width: 87%;
        }

        /* 抢购 */
        .shopping {
            width: 100%;
            height: 50px;
            background-color: red;
            margin: 10px auto;
            line-height: 50px;
            text-align: center;
        }

        .shopping a {
            color: #fff;
            font: 700 20px "Microsoft YaHei";
        }

</style>
</head>

<body>
    <div class="nav">
        <!-- 手机图片部分 -->
        <div class="pictures">
            <a href="http://www.xiaomi.com" target="_blank">
                <img src="images/手机抢购小页面.jpg">
            </a>
        </div>
        <!-- 文字部分 多出来的字使用省略号代替-->
        <p class="text"><span class="xiaomi">小米</span> 红米 Note10 Pro 5G 智能液冷游戏芯支持NFC手机 幻青 5G版 (8G + 128G) 天机888</p>

        <!-- 价格 -->
        <!-- 这里我们可以使用之前的三角形盒子来做 -->
        <div class="price">
            <span class="miaosha">
                ¥1449.00
                <!-- 三角形的妙用 -->
                <i></i>
            </span>
        </div>

        <!-- 下面是进度条 progress bar-->
        <div class="progress-bar">
            
            <div class="bar">
                <!-- 前面的的内容可以使用content来做 -->
                <div class="bar-in">
                </div>
            </div>
        </div>

        <!-- 抢购 -->
        <div class="shopping">
            <a href="http://www.bilibili.com" target="_blank">立即抢购</a>
        </div>
    </div>
</body>

</html>