案例：产品模块

最新推荐文章于 2023-07-15 18:42:34 发布

愤怒的西瓜君

最新推荐文章于 2023-07-15 18:42:34 发布

阅读量459

点赞数

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

本文链接：https://blog.csdn.net/lizhi20210729/article/details/122461691

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

案例：产品模块

效果如下：
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<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: #f5f5f5;
      }
      a {
          color: #333;
          text-decoration: none;
      }
      .box {
          width: 298px;
          height: 415px;
          background-color:#fff;
          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: 0 6px 0 15px;
      }
    </style>
</head>
<body>
    <div class="box">
        <img src="images/img.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>

这里用到的图片，需要自取：
在这里插入图片描述

愤怒的西瓜君

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
案例：产品模块

案例：产品模块效果如下：代码如下：<!DOCTYPE html><html lang="zh-CN"><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"&
复制链接

扫一扫