单个商品布局展示html，css

好的，以下是单个商品布局展示的HTML和CSS代码示例：

HTML代码：

<div class="product">
  <div class="product-image">
    <img src="product-image.jpg" alt="Product Image">
  </div>
  <div class="product-details">
    <h2 class="product-title">Product Name</h2>
    <p class="product-description">Product Description</p>
    <p class="product-price">$19.99</p>
    <button class="add-to-cart">Add to Cart</button>
  </div>
</div>

CSS代码：

.product {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0px 0px 5px #ccc;
  margin-bottom: 20px;
}

.product-image {
  flex-basis: 30%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-image img {
  max-width: 100%;
  max-height: 100%;
}

.product-details {
  flex-basis: 70%;
  margin-left: 20px;
}

.product-title {
  font-size: 24px;
  margin-bottom: 10px;
}

.product-description {
  font-size: 16px;
  margin-bottom: 10px;
}

.product-price {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

.add-to-cart {
  padding: 10px 20px;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  background-color: #1abc9c;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s;
}

.add-to-cart:hover {
  background-color: #16a085;
}

以上代码包含一个名为 `product` 的容器，里面包含商品的图片和详细信息。商品图片使用 `img` 标签展示，商品详细信息包含商品名称、描述、价格和添加到购物车的按钮。CSS代码实现了商品容器的样式，包括边框、投影、内边距、边框半径、背景色、字体样式等。你可以根据需要自定义商品布局展示的样式。