用CSS模仿小米产品模块

写在前面的话：

  1. 本章内容：如何使用CSS模仿小米的产品模块
  2. 所利用的知识：了解完内外边距后的一个小案例

目录

1.代码 

2.效果截图

今天，我们要模仿的是产品模块，如下图：

 

1.代码 

<!DOCTYPE html>
<html lang="zh-CN">
<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;
        }

        body {
            font-size: 14px;
            line-height: 21px;
            background-color: #f5f5f5;
        }

        a {
            text-decoration: none;
        }

        /* 外面的大盒子 */
        .box {
            width: 234px;
            height: 300px;
            background-color: #fff;

            /* 设置水平居中 */
            margin: 100px auto;

            padding: 20px 0;

        }

        .box .image-box {
             margin: 0 37px 18px;
        }

        .box .image-box img {
           width: 160px;
           height: 160px;    
        }

        .box h3 {
            color: #333;
            font-size: 14px;
            font-weight: normal;
            text-align: center;
            margin: 0 10px 2px;
        }

        .box .desc {
            font-size: 12px;
            color: #b0b0b0;

            text-align: center;
            /* 文字只占一行 */
            white-space: nowrap;
            /* 文字超出范围以点代替 */
            text-overflow: ellipsis;
            overflow: hidden;

            margin: 0 10px 10px;
            
        }

        .box .price-box {
            text-align: center;
            color: #ff6700;
            margin: 0 10px 10px;
        }

        .box .price-box .del-price {
            
            margin-left: 0.5em;
            color: #b7b9b5;
        }

    </style>
</head>
<body>
    <a href="#">
    <div class="box">
        <!-- 在盒子中放入图片 -->
        <div class="image-box">
           <img src="素材.webp" alt="小米平板5 Pro">
        </div>
        
        <h3>小米平板5 Pro</h3>

        <p class="desc">骁龙870芯片 | 2.5K超高清｜120HZ高刷新率 </p>

        <p class="price-box">
            <span class="price">2399元起</span>
            <del class="del-price">2499元</del>
        </p>
    </div></a>
</body>
</html>

2.效果截图

 完

posted @ 2022-05-04 12:21  辰梦starDream  阅读(4)  评论(0)  编辑  收藏  举报  来源