lovecoding
/
J250913


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>苹果14pro商品卡片</title>
  <style>
    /* 全局样式重置：清除默认边距，统一字体 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: "Microsoft YaHei", Arial, sans-serif;
    }

    /* 商品卡片容器：左图右文核心布局 */
    .product-card {
      display: flex; /* 启用Flex布局，子元素水平排列 */
      align-items: flex-start; /* 顶部对齐，避免图片/文字高度不一致导致错位 */
      gap: 24px; /* 图片与文字区域间距，比margin更灵活 */
      width: 90%;
      max-width: 800px; /* 限制卡片最大宽度，避免大屏下太宽 */
      margin: 30px auto; /* 上下间距+水平居中 */
      padding: 20px;
      background-color: #fff;
      border-radius: 12px; /* 圆角卡片，现代电商风格 */
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* 轻微阴影，提升立体感 */
    }

    /* 左侧商品图片区域 */
    .product-img {
      flex: 0 0 280px; /* 固定图片宽度，不伸缩（0 0 宽度值） */
    }
    .product-img img {
      width: 100%; /* 图片自适应容器宽度 */
      height: auto; /* 保持图片比例，避免拉伸变形 */
      border-radius: 8px; /* 图片圆角，与卡片风格统一 */
      object-fit: cover; /* 确保图片填充容器且不裁剪关键内容 */
    }

    /* 右侧商品信息区域 */
    .product-info {
      flex: 1; /* 文字区域占据剩余所有空间 */
      padding: 10px 0; /* 上下内边距，优化文字垂直间距 */
    }

    /* 商品标题样式 */
    .product-title {
      font-size: 22px;
      font-weight: 600;
      color: #1d1d1f; /* 苹果风格深灰色，避免纯黑刺眼 */
      margin-bottom: 16px;
      line-height: 1.3;
    }

    /* 商品价格样式：突出价格，吸引注意力 */
    .product-price {
      margin-bottom: 18px;
    }
    .product-price .current-price {
      font-size: 28px;
      font-weight: 700;
      color: #ff3b30; /* 红色价格，电商常用强调色 */
      margin-right: 12px;
    }
    .product-price .discount {
      font-size: 14px;
      color: #ff3b30;
      background-color: #fff5f5; /* 浅红背景，突出优惠 */
      padding: 2px 8px;
      border-radius: 4px;
    }

    /* 商品标签样式：如"购物车界面""订单支付界面" */
    .product-tags {
      display: flex;
      gap: 10px;
      margin-bottom: 24px;
      flex-wrap: wrap; /* 小屏时标签自动换行 */
    }
    .product-tags span {
      font-size: 13px;
      color: #6e6e73;
      background-color: #f5f5f7;
      padding: 4px 12px;
      border-radius: 16px; /* 胶囊形标签，更精致 */
    }

    /* 按钮样式：购物车+立即购买，区分主次 */
    .product-buttons {
      display: flex;
      gap: 16px; /* 按钮间距 */
      margin-top: 20px;
    }
    .btn {
      padding: 12px 0;
      border-radius: 8px;
      font-size: 16px;
      font-weight: 500;
      text-align: center;
      cursor: pointer; /* 鼠标悬浮显示手型，提示可点击 */
      transition: all 0.2s ease; /* 按钮交互动画，更丝滑 */
      border: none;
    }
    /* 立即购买按钮：主按钮，颜色更醒目 */
    .btn-buy {
      flex: 1; /* 按钮自适应宽度 */
      background-color: #ff3b30;
      color: #fff;
    }
    .btn-buy:hover {
      background-color: #e03024; /* 悬浮时加深颜色，有视觉反馈 */
      box-shadow: 0 2px 8px rgba(255, 59, 48, 0.3);
    }
    /* 加入购物车按钮：次按钮，浅色边框 */
    .btn-cart {
      flex: 1;
      background-color: #fff;
      color: #ff3b30;
      border: 1px solid #ff3b30;
    }
    .btn-cart:hover {
      background-color: #fff5f5;
    }

    /* 响应式适配：小屏幕（手机）下改为"上图下文" */
    @media (max-width: 768px) {
      .product-card {
        flex-direction: column; /* 子元素垂直排列 */
        padding: 16px;
        gap: 16px;
      }
      .product-img {
        flex: 0 0 auto; /* 取消固定宽度，图片自适应全屏 */
        width: 100%;
      }
      .product-title {
        font-size: 19px;
      }
      .product-price .current-price {
        font-size: 24px;
      }
      .product-buttons {
        flex-direction: column; /* 按钮垂直排列，方便点击 */
      }
    }
  </style>
</head>
<body>
<!-- 商品卡片容器：包含左侧图片和右侧信息 -->
<div class="product-card">
  <!-- 左侧商品图片 -->
  <div class="product-img">
    <!-- 用占位图示例，实际替换为真实商品图链接即可 -->
    <img src="img/iphone.png" alt="苹果14pro手机">
  </div>

  <!-- 右侧商品信息 -->
  <div class="product-info">
    <h2 class="product-title">苹果14pro / 苹果14proMax</h2>
    <div class="product-price">
      <span class="current-price">¥3079</span>
      <span class="discount">已享受满199减120</span>
    </div>
    <div class="product-tags">
      <span>iphone15 </span>
      <span>iphone15pro</span>
      <span>iphone16pro</span>
      <span>iphone16pro max</span>
    </div>
    <div class="product-desc">
      <p>搭载A16仿生芯片，6.1英寸超视网膜XDR显示屏，支持ProMotion自适应刷新率，全天候显示功能；后置4800万像素主摄，拍照画质细腻；多种配色可选，轻薄机身，手感出众。</p>
    </div>
    <div class="product-buttons">
      <button class="btn btn-cart">加入购物车</button>
      <button class="btn btn-buy">立即购买</button>
    </div>
  </div>
</div>
</body>
</html>