lovecoding
/
J250913


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>商品列表页（央视风格）</title>
  <style>
    /* 1. 央视风格初始化：统一基础样式，符合官方简洁规范 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box; /* 全局盒模型，避免边距错乱 */
      font-family: "Microsoft YaHei", Arial, sans-serif; /* 央视常用字体 */
    }
    body {
      background-color: #f5f5f5; /* 浅灰背景，简洁不刺眼 */
      color: #333333; /* 正文深灰色，符合官方阅读体验 */
      font-size: 14px;
      line-height: 1.6; /* 行高优化，提升可读性 */
    }

    /* 2. 央视版心布局：内容居中，左右留白，适配大屏 */
    .container {
      width: 90%; /* 响应式宽度 */
      max-width: 1200px; /* 最大宽度，避免大屏过宽 */
      margin: 0 auto; /* 水平居中，核心版心样式 */
      padding: 20px 0;
    }

    /* 3. 标题样式：央视风格——粗体、居中、深色调 */
    .page-title {
      font-size: 24px;
      font-weight: bold;
      color: #222222;
      text-align: center;
      margin-bottom: 30px;
      padding-bottom: 10px;
      border-bottom: 2px solid #0066cc; /* 蓝色下划线，体现官方风格 */
    }

    /* 4. 商品列表容器：Flex 实现3列横向排列 */
    .product-list {
      display: flex; /* 启用Flex布局 */
      flex-wrap: wrap; /* 超出自动换行，适配小屏 */
      gap: 20px; /* 商品卡片间距，均匀分布 */
      justify-content: space-between; /* 左右对齐，间距均匀 */
    }

    /* 5. 商品卡片样式：简洁卡片，信息层级清晰 */
    .product-card {
      flex: 0 0 calc(33.33% - 14px); /* 计算3列宽度（减去gap的均分间距） */
      background-color: #ffffff; /* 白色卡片，干净清爽 */
      border-radius: 8px; /* 轻微圆角，避免生硬 */
      overflow: hidden; /* 裁剪图片/内容，保持卡片形状 */
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* 淡阴影，提升质感不突兀 */
      transition: box-shadow 0.2s ease; /*  hover过渡，更丝滑 */
    }
    /* 卡片hover效果：轻微加深阴影，提升交互感 */
    .product-card:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    }

    /* 6. 商品图片：统一尺寸，避免拉伸 */
    .product-img {
      width: 100%;
      height: 200px; /* 固定高度，保持卡片整齐 */
      object-fit: cover; /* 填充容器，不裁剪关键内容 */
      border-bottom: 1px solid #f0f0f0; /* 底部边框，分隔图片和文字 */
    }

    /* 7. 商品信息区域：内边距留白，信息层级分明 */
    .product-info {
      padding: 16px;
    }
    /* 商品标题：单行省略，避免换行错乱 */
    .product-title {
      font-size: 16px;
      font-weight: 500;
      color: #222222;
      margin-bottom: 8px;
      white-space: nowrap; /* 不换行 */
      overflow: hidden; /* 隐藏超出部分 */
      text-overflow: ellipsis; /* 超出显示省略号 */
    }
    /* 商品标签：小字体浅灰色，辅助信息 */
    .product-tags {
      font-size: 12px;
      color: #666666;
      margin-bottom: 12px;
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }
    .product-tags span {
      background-color: #f0f7ff; /* 浅蓝色背景，呼应央视蓝色调 */
      color: #0066cc;
      padding: 2px 8px;
      border-radius: 4px;
    }

    /* 8. 价格与销量：突出价格，销量辅助 */
    .product-price-sales {
      display: flex;
      justify-content: space-between; /* 价格居左，销量居右 */
      align-items: center;
    }
    .product-price {
      font-size: 18px;
      font-weight: bold;
      color: #cc0000; /* 红色价格，醒目但不刺眼（央视风格不使用高饱和色） */
    }
    .product-sales {
      font-size: 12px;
      color: #666666;
    }

    /* 9. 响应式适配：小屏自动调整列数，避免拥挤 */
    @media (max-width: 992px) {
      /* 平板：2列布局 */
      .product-card {
        flex: 0 0 calc(50% - 10px);
      }
    }
    @media (max-width: 576px) {
      /* 手机：1列布局 */
      .product-card {
        flex: 0 0 100%;
      }
      .product-img {
        height: 180px; /* 小屏缩小图片高度，节省空间 */
      }
    }
  </style>
</head>
<body>
<!-- 央视风格版心容器 -->
<div class="container">
  <!-- 央视风格标题 -->
  <h1 class="page-title">精选商品列表</h1>

  <!-- 商品列表：3列横向排列 -->
  <div class="product-list">
    <!-- 商品1：雷锋帽 -->
    <div class="product-card">
      <img src="img/iphone.png" alt="冬季加厚保暖防寒雷锋帽子" class="product-img">
      <div class="product-info">
        <h3 class="product-title">Ceokue冬季加厚保暖防寒雷锋帽子男</h3>
        <div class="product-tags">
          <span>自营</span>
          <span>保暖</span>
        </div>
        <div class="product-price-sales">
          <div class="product-price">¥29.80</div>
          <div class="product-sales">销量1000+</div>
        </div>
      </div>
    </div>

    <!-- 商品2：炉甘石香皂 -->
    <div class="product-card">
      <img src="img/iphone.png" alt="炉甘石香皂全身皮肤清洁抑菌止痒" class="product-img">
      <div class="product-info">
        <h3 class="product-title">炉甘石香皂全身皮肤清洁抑菌止痒沐浴</h3>
        <div class="product-tags">
          <span>抑菌</span>
          <span>清洁</span>
        </div>
        <div class="product-price-sales">
          <div class="product-price">¥4044.83</div>
          <div class="product-sales">销量600+</div>
        </div>
      </div>
    </div>

    <!-- 商品3：三星Galaxy S -->
    <div class="product-card">
      <img src="img/iphone.png" alt="三星(SAMSUNG) Galaxy S" class="product-img">
      <div class="product-info">
        <h3 class="product-title">全球购三星(SAMSUNG) Galaxy S</h3>
        <div class="product-tags">
          <span>全球购</span>
          <span>官方直降1%</span>
        </div>
        <div class="product-price-sales">
          <div class="product-price">¥3617.00</div>
          <div class="product-sales">销量1000+</div>
        </div>
      </div>
    </div>

    <!-- 商品4：五香烤花生 -->
    <div class="product-card">
      <img src="img/iphone.png" alt="25年新五香花生米山东" class="product-img">
      <div class="product-info">
        <h3 class="product-title">【半价抢2斤】25年新五香花生米山东</h3>
        <div class="product-tags">
          <span>半价</span>
          <span>自然原香</span>
        </div>
        <div class="product-price-sales">
          <div class="product-price">¥15.80</div>
          <div class="product-sales">销量2万+</div>
        </div>
      </div>
    </div>

    <!-- 商品5：iPhone 14 Pro -->
    <div class="product-card">
      <img src="img/iphone.png" alt="Apple iPhone 14 Pro" class="product-img">
      <div class="product-info">
        <h3 class="product-title">拍拍二手 Apple iPhone 14 Pro 【24期免息】</h3>
        <div class="product-tags">
          <span>拍拍二手</span>
          <span>京东物流</span>
        </div>
        <div class="product-price-sales">
          <div class="product-price">¥3299.00</div>
          <div class="product-sales">销量4000+</div>
        </div>
      </div>
    </div>

    <!-- 商品6：低价五香花生（补充6个商品，展示换行效果） -->
    <div class="product-card">
      <img src="img/iphone.png" alt="五香烤花生自然原香" class="product-img">
      <div class="product-info">
        <h3 class="product-title">五香烤花生自然原香休闲零食</h3>
        <div class="product-tags">
          <span>零食</span>
          <span>低价</span>
        </div>
        <div class="product-price-sales">
          <div class="product-price">¥9.56</div>
          <div class="product-sales">销量9000+</div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>