html购物网站代码
时间: 2023-10-09 11:09:28 浏览: 70
以下是一个简单的HTML购物网站的代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>购物网站</title>
<style>
body {
font-family: Arial, sans-serif;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
main {
display: flex;
justify-content: center;
align-items: flex-start;
padding: 20px;
}
.product {
margin: 20px;
padding: 20px;
border: 1px solid #ccc; border-radius: 5px;
width: 200px;
text-align: center;
}
.product img {
max-width: 100%;
height: auto;
margin-bottom: 10px;
}
footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>购物网站</h1>
</header>
<main>
<div class="product">
<img src="product1.jpg" alt="Product 1">
<h2>商品1</h2>
<p>商品描述1</p>
<p>价格:$10</p>
<button>添加到购物车</button>
</div>
<div class="product">
<img src="product2.jpg" alt="Product 2">
<h2>商品2</h2>
<p>商品描述2</p>
<p>价格:$15</p>
<button>添加到购物车</button>
</div>
<div class="product">
<img src="product3.jpg" alt="Product 3">
<h2>商品3</h2>
<p>商品描述3</p>
<p>价格:$20</p>
<button>添加到购物车</button>
</div>
</main>
<footer>
<p>© 2021 购物网站. All rights reserved.</p>
</footer>
</body>
</html>
```
请注意,上述示例中的代码仅包含静态HTML,没有实际的后端或购物功能。你可以根据自己的需求自定义和扩展此代码。