案例---小米热门评价产品

最新推荐文章于 2023-04-12 14:16:11 发布

发呆少女

最新推荐文章于 2023-04-12 14:16:11 发布

阅读量357

点赞数 1

分类专栏： CSS学习文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_43632490/article/details/125304321

版权

CSS学习专栏收录该内容

33 篇文章 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: 0px;
            padding: 0px;

        }

        body {
            background-color: #f5f5f5;
        }

        a {
            text-decoration: none;
            color: #333;
        }

        .evaluate {
            width: 300px;
            height: 415px;
            background-color: #fff;
            margin: 0 auto;
            margin-top: 100px;
        }

        .evaluate img {
            width: 100%;
            height: 200px;
        }


        .evaluate>a {
            display: block;
            width: 100%;
            height: 200px;
        }

        .review {
            font-size: 14px;
            height: 75px;
            padding: 0 30px;
            padding-top: 35px;
            /* 文字两端对齐 */
            text-align: justify;
            /* 最多显示四行，多余的以...展示 */
            text-overflow: ellipsis;
            display: -webkit-box;
            overflow: hidden;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
        }

        .review a {
            display: block;
            /* 高度自适应 */
            height: auto;
        }

        .user {
            height: 35px;
            padding: 0 30px;
            padding-top: 15px;
            font-size: 12px;
            color: #b0b0b0;
        }

        .product {
            height: 35px;
            padding: 0 30px;
            padding-top: 20px;
            font-size: 14px;
            position: relative;
        }

        .title {
            font-weight: 400;
            width: 160px;
            /* 最多显示一行，多余的以...展示 */
            text-overflow: ellipsis;
            display: -webkit-inline-box;
            overflow: hidden;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
        }

        .title a {
            display: block;
            height: auto;
        }

        .product em {
            font-style: normal;
            color: #ebe4e0;
            /* 定位可以解决塌陷问题 */
            position: absolute;
            top: 20px;
            left: 210px;
        }

        .price {
            color: #ff6700;
            position: absolute;
            top: 20px;
            right: 30px;
        }
    </style>
</head>

<body>
    <div class="evaluate">
        <a href="#"><img src="./images/img.jpg" /></a>
        <p class="review">
            <a href="#">快递牛，整体不错蓝牙可以说秒连。红米给力！快递牛，整体不错蓝牙可以说秒连。红米给力!快递牛，整体不错蓝牙可以说秒连。红米给力！快递牛，整体不错蓝牙可以说秒连。红米给力！</a>
        </p>
        <div class="user">来自于 117384232 的评价</div>
        <div class="product">
            <h4 class="title"><a href="#">Redmi AirDots真无线蓝牙耳机</a></h4>
            <em>|</em>
            <span class="price">99.9元</span>
        </div>

    </div>
</body>

</html>