类eBay在线商店目录开发：如何为商品盒设置不同图与标题？

你要让每个商品盒子显示不同的图片和标题，有两种实现思路：如果是少量固定商品，用纯HTML/CSS就能搞定；如果商品数量多或者需要动态加载，就需要用到JavaScript。下面是具体实现方法和代码改进建议：

一、纯HTML/CSS静态实现（无需JS） #

适合商品数量少、内容固定的场景，直接修改每个盒子的HTML内容即可：

修改后的CSS（优化布局并移除全局图片背景） #

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  background-color: #E7E7E7;
  font-family: system-ui;
  color: #000;
}

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); /* 自动适配列数 */
  gap: 2rem; /* 添加盒子间距 */
  margin: 2.6rem;
}

.box {
  border-radius: 8px; /* 用px代替百分比，更精准 */
  background-color: #fff;
  box-shadow: 0 4px 12px rgba(186, 186, 186, 0.5); /* 优化阴影效果 */
  width: 100%; /* 盒子自适应网格列宽 */
  height: fit-content; /* 高度随内容自适应 */
  overflow: hidden; /* 避免内容溢出 */
}

.image {
  width: 100%;
  padding-top: 100%; /* 实现正方形图片容器 */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center; /* 图片居中显示 */
}

.title {
  margin: 1rem 1rem 0.5rem;
}

.title p {
  font-size: 1rem;
  font-weight: 500;
}

.creator {
  color: #525252;
  font-size: 0.8rem;
  margin: 0 1rem 0.5rem;
}

.price {
  font-weight: 600;
  margin: 0 1rem 1rem;
}

修改后的HTML（每个盒子自定义内容） #

<div class="container">
  <!-- 第一个商品 -->
  <div class="box">
    <div class="image" style="background-image: url('Reference/Shoes/Air Jordan 1 Retro High OG Shoes.webp')"></div>
    <div class="title">
      <p>Nike Air Jordan 1 High OG</p>
    </div>
    <div class="creator">
      <p>Martingrgv</p>
    </div>
    <div class="price">
      <p>$199.99</p>
    </div>
  </div>
  <!-- 第二个商品 -->
  <div class="box">
    <div class="image" style="background-image: url('Reference/Shoes/Nike Air Max 90.webp')"></div>
    <div class="title">
      <p>Nike Air Max 90</p>
    </div>
    <div class="creator">
      <p>ShoeStorePro</p>
    </div>
    <div class="price">
      <p>$129.99</p>
    </div>
  </div>
  <!-- 可继续添加更多商品 -->
</div>

二、JavaScript动态实现（适合大量商品） #

当商品数量多或者需要从后端获取数据时，用JS动态生成DOM元素更高效：

完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>商品目录</title>
  <style>
    /* 复用上面优化后的CSS代码 */
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }

    html {
      background-color: #E7E7E7;
      font-family: system-ui;
      color: #000;
    }

    .container {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
      gap: 2rem;
      margin: 2.6rem;
    }

    .box {
      border-radius: 8px;
      background-color: #fff;
      box-shadow: 0 4px 12px rgba(186, 186, 186, 0.5);
      width: 100%;
      height: fit-content;
      overflow: hidden;
    }

    .image {
      width: 100%;
      padding-top: 100%;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
    }

    .title {
      margin: 1rem 1rem 0.5rem;
    }

    .title p {
      font-size: 1rem;
      font-weight: 500;
    }

    .creator {
      color: #525252;
      font-size: 0.8rem;
      margin: 0 1rem 0.5rem;
    }

    .price {
      font-weight: 600;
      margin: 0 1rem 1rem;
    }
  </style>
</head>
<body>
  <div class="container" id="productContainer"></div>

  <script>
    // 模拟商品数据（实际项目可从后端接口获取）
    const products = [
      {
        imageUrl: 'Reference/Shoes/Air Jordan 1 Retro High OG Shoes.webp',
        title: 'Nike Air Jordan 1 High OG',
        creator: 'Martingrgv',
        price: '$199.99'
      },
      {
        imageUrl: 'Reference/Shoes/Nike Air Max 90.webp',
        title: 'Nike Air Max 90',
        creator: 'ShoeStorePro',
        price: '$129.99'
      },
      {
        imageUrl: 'Reference/Shoes/Adidas Ultraboost 23.webp',
        title: 'Adidas Ultraboost 23',
        creator: 'AdidasOfficial',
        price: '$180.00'
      }
    ];

    // 获取容器元素
    const container = document.getElementById('productContainer');

    // 循环生成商品盒子
    products.forEach(product => {
      const box = document.createElement('div');
      box.className = 'box';

      // 生成图片容器
      const imageDiv = document.createElement('div');
      imageDiv.className = 'image';
      imageDiv.style.backgroundImage = `url('${product.imageUrl}')`;

      // 生成标题
      const titleDiv = document.createElement('div');
      titleDiv.className = 'title';
      titleDiv.innerHTML = `<p>${product.title}</p>`;

      // 生成创作者
      const creatorDiv = document.createElement('div');
      creatorDiv.className = 'creator';
      creatorDiv.innerHTML = `<p>${product.creator}</p>`;

      // 生成价格
      const priceDiv = document.createElement('div');
      priceDiv.className = 'price';
      priceDiv.innerHTML = `<p>${product.price}</p>`;

      // 组装盒子并添加到容器
      box.append(imageDiv, titleDiv, creatorDiv, priceDiv);
      container.appendChild(box);
    });
  </script>
</body>
</html>

三、额外代码改进建议 #

• 语义化优化：用<article>代替<div class="box">，<h3>代替标题里的<p>，<span>代替创作者里的<p>，提升代码语义性，利于SEO和无障碍访问。
• 图片优化：优先使用<img>标签代替background-image，更利于搜索引擎抓取图片内容：

  <img src="Reference/Shoes/Air Jordan 1 Retro High OG Shoes.webp" alt="Nike Air Jordan 1 High OG" class="product-image">
  

  对应CSS：

  .product-image {
    width: 100%;
    height: auto;
    display: block;
  }
  

• 响应式适配：添加媒体查询，适配小屏幕设备：

  @media (max-width: 768px) {
    .container {
      margin: 1rem;
      grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    }
  }
  

• 交互优化：给商品盒子添加hover效果，提升用户体验：

  .box:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(186, 186, 186, 0.6);
    transition: all 0.3s ease;
  }
  

内容的提问来源于stack exchange，提问作者Martin