你给我写一个商品列表页
时间: 2023-06-27 09:08:00 浏览: 42
好的,以下是一个简单的商品列表页示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>商品列表页</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.product {
display: flex;
flex-wrap: wrap;
margin-top: 20px;
}
.product-item {
flex-basis: 25%;
padding: 10px;
box-sizing: border-box;
}
.product-img {
width: 100%;
height: 200px;
object-fit: cover;
margin-bottom: 10px;
}
.product-name {
font-size: 20px;
font-weight: bold;
margin-bottom: 10px;
}
.product-price {
font-size: 16px;
color: #f00;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>商品列表</h1>
<div class="product">
<div class="product-item">
<img src="https://via.placeholder.com/400x300" alt="Product Image" class="product-img">
<div class="product-name">Product 1</div>
<div class="product-price">$50</div>
</div>
<div class="product-item">
<img src="https://via.placeholder.com/400x300" alt="Product Image" class="product-img">
<div class="product-name">Product 2</div>
<div class="product-price">$80</div>
</div>
<div class="product-item">
<img src="https://via.placeholder.com/400x300" alt="Product Image" class="product-img">
<div class="product-name">Product 3</div>
<div class="product-price">$120</div>
</div>
<div class="product-item">
<img src="https://via.placeholder.com/400x300" alt="Product Image" class="product-img">
<div class="product-name">Product 4</div>
<div class="product-price">$150</div>
</div>
<div class="product-item">
<img src="https://via.placeholder.com/400x300" alt="Product Image" class="product-img">
<div class="product-name">Product 5</div>
<div class="product-price">$200</div>
</div>
<div class="product-item">
<img src="https://via.placeholder.com/400x300" alt="Product Image" class="product-img">
<div class="product-name">Product 6</div>
<div class="product-price">$250</div>
</div>
<div class="product-item">
<img src="https://via.placeholder.com/400x300" alt="Product Image" class="product-img">
<div class="product-name">Product 7</div>
<div class="product-price">$300</div>
</div>
<div class="product-item">
<img src="https://via.placeholder.com/400x300" alt="Product Image" class="product-img">
<div class="product-name">Product 8</div>
<div class="product-price">$350</div>
</div>
</div>
</div>
</body>
</html>
```
这个商品列表页包含一个顶部标题,一个容器用于包含商品列表,每个商品都由一个包含商品图片、商品名称和商品价格的 div 元素组成。通过使用 flexbox 布局,我们可以轻松地将商品列表水平排列,并在需要时自动换行。