【前端项目】产品模块

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>产品模块</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #e8ecf5;
        }

        .box {
            height: 300px;
            width: 232px;
            background-color: #fff;
            margin: 100px auto;
        }

        .box img {
            width: 100%;
        }

        .box .review {
            font-size: 10px;
            height: 70px;
            padding: 0 22px;
            margin-top: 20px;
            line-height: 1.8em;
        }

        .box .apprise {
            font-size: 8px;
            color: #b0b0b0;
            padding: 0 22px;
            margin-top: 30px;
        }

        .box .info {
            font-size: 10px;
            padding: 0 22px;
            margin-top: 10px;
        }

        .info h4 {
            display: inline-block;
            font-weight: 550;
        }

        .info em {
            font-style: normal;
            color: #8f8e8e;
            padding: 0 3px 0 60px;
        }

        .info span {
            color: #ff6700;
        }

        a {
            text-decoration: none;
            color: black
        }
    </style>
</head>

<body>
    <div class="box">
        <a href="#"><img src="image/xiaomi.jpg" alt=""></a>
        <p class="review">
            以前用的NOte3，用了四年了有摔有碰也没坏，貭量非常好，所以换手机还是红米Note8手选了。N0te8照相非常好，手感也非常好。下次再买红米5d手机了。
        </p>
        <div class="apprise">来自于 146131686 的评价</div>
        <div class="info">
            <h4><a href="#">Redmi Note 8</a></h4>
            <em>|</em>
            <span>899元起</span>
        </div>
    </div>
</body>

</html>
效果如下：
在这里插入图片描述
来源：CSDN
作者：C++小白、
链接：https://blog.csdn.net/qq_43641035/article/details/103883355
标签
padding