用html制作一个购物页面
时间: 2023-12-18 09:02:28 浏览: 46
好的,以下是一个简单的购物页面 HTML 代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>购物页面</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f7f7f7;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
box-shadow: 0px 0px 10px #ccc;
}
h1 {
text-align: center;
color: #333;
}
.product {
display: flex;
margin-bottom: 20px;
padding: 10px;
background-color: #eee;
}
.product img {
max-width: 200px;
margin-right: 20px;
}
.product h2 {
margin-top: 0;
margin-bottom: 10px;
color: #333;
}
.product p {
margin: 0;
color: #666;
}
.product button {
padding: 10px;
background-color: #333;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
.product button:hover {
background-color: #555;
}
</style>
</head>
<body>
<div class="container">
<h1>欢迎来到我们的商店</h1>
<div class="product">
<img src="https://via.placeholder.com/200x200" alt="产品1">
<div>
<h2>产品1</h2>
<p>这是产品1的描述。</p>
<p>价格:$10</p>
<button>加入购物车</button>
</div>
</div>
<div class="product">
<img src="https://via.placeholder.com/200x200" alt="产品2">
<div>
<h2>产品2</h2>
<p>这是产品2的描述。</p>
<p>价格:$20</p>
<button>加入购物车</button>
</div>
</div>
<div class="product">
<img src="https://via.placeholder.com/200x200" alt="产品3">
<div>
<h2>产品3</h2>
<p>这是产品3的描述。</p>
<p>价格:$30</p>
<button>加入购物车</button>
</div>
</div>
</div>
</body>
</html>
```
在这个示例中,我们使用了 HTML、CSS 和一些占位符图片来创建一个简单的购物页面。页面包含一个标题、三个产品和每个产品的名称、描述、价格和加入购物车的按钮。每个产品被放置在一个带有灰色背景的盒子中,使用弹性布局来水平排列产品图片和信息。购物页面的整体容器使用白色背景和阴影来使其在页面上更加突出。