做一个简单的商品展示页面用html,css,javascript
时间: 2024-02-18 09:06:17 浏览: 21
好的,以下是一个简单的商品展示页面的HTML、CSS和JavaScript代码示例:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>商品展示页面</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>商品展示</h1>
<div id="products">
<!-- 商品展示区域 -->
</div>
</div>
<script src="script.js"></script>
</body>
</html>
```
CSS代码:
```
* {
box-sizing: border-box;
font-family: Arial, sans-serif;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
h1 {
text-align: center;
}
#products {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.product {
flex-basis: 30%;
margin-bottom: 20px;
padding: 10px;
border: 1px solid #ccc;
}
.product img {
max-width: 100%;
}
.product h2 {
margin-top: 0;
font-size: 1.2em;
}
.product p {
margin: 0;
font-size: 0.8em;
color: #666;
}
```
JavaScript代码:
```
const products = [
{
name: "商品1",
price: 100,
image: "image1.jpg"
},
{
name: "商品2",
price: 200,
image: "image2.jpg"
},
{
name: "商品3",
price: 300,
image: "image3.jpg"
}
];
const productsContainer = document.getElementById("products");
products.forEach(product => {
const productElement = document.createElement("div");
productElement.classList.add("product");
productElement.innerHTML = `
<img src="${product.image}" alt="${product.name}">
<h2>${product.name}</h2>
<p>价格: ${product.price}元</p>
`;
productsContainer.appendChild(productElement);
});
```
这个示例页面使用了Flexbox布局,并通过JavaScript动态生成商品展示区域。你可以根据你的需求进行修改和扩展。