Demo产品模块

最新推荐文章于 2023-10-19 21:03:17 发布

南夏繁笙

最新推荐文章于 2023-10-19 21:03:17 发布

阅读量463

点赞数 1

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/weixin_45770470/article/details/109060243

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>Document</title>  
    <style>  
        /* 第一行清除页面边距 */  
        * {  
            margin: 0;  
            padding: 0;  
        }   
        body {  
            background-color: #f5f5f5;  
        }  
        .box {  
             width: 298px;  
            height: 415px;  
            background-color:#f5f5f5;  
            /* 让块级的盒子水平居中 */  
            margin: 100px auto;  
        }  
        .box img {  
            width: 100%;  
        /* 图片宽度和父容器一样宽 */  
        }  
        .review {  
            height: 70px;  
            font-size: 14px;  
            padding: 0 28px;  
            margin-top: 30px;  
        }  
        .appraise {  
            font-size: 12px;  
            color: #b0b0b0;  
            margin-top: 20px;  
            padding: 0 28px;  
        }  
        .info {  
            font-size: 14px;  
            margin-top: 15px;  
            padding: 0 28px;  
        }  
        .info h4 {  
            /* 将块元素转换成行内块元素，使得一行可放下多个 */  
            display: inline-block;  
           /* 让文字不加粗 */  
           font-weight: 400 ;   
        }  
        .info span {  
            color: #ff6700;  
        }  
        .info em {  
            font-style: normal;  
            color: #ebe4e0;  
            /* margin上右下左順時針 ，且兩個盒子之間的距離多margin*/  
            margin: 0 6px 0 15px;  
        }  
        a {  
            text-decoration: none;  
            color: #333;  
        }  
    </style>  
</head>  
<body>  
   <div class="box">  
       <img src="htmlcss/picture/xiaomi.jpg" alt="图片">  
       <p class="review">快递牛，整体不错蓝牙可以说秒连。红米给力</p>  
       <div class="appraise">来自于 117384232 的评价</div>  
       <div class="info">  
        <h4><a href="#">  Redmi AirDots真无线蓝...  </a></h4>  
        <em>|</em>  
            <span>99.9元</span>  
       </div>  
  
   </div>  
</body>  
</html>