提供一个打折促销的网页
时间: 2023-08-31 13:32:41 浏览: 50
以下是一个简单的打折促销网页示例,您可以参考并修改其中的HTML和CSS代码来适应您的需求:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Summer Sale</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
h1 {
text-align: center;
color: #ff6600;
margin-top: 50px;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin-top: 50px;
}
.item {
width: 300px;
margin: 30px;
padding: 20px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
.item img {
display: block;
margin: 0 auto;
max-width: 100%;
height: auto;
margin-bottom: 20px;
}
.item h2 {
font-size: 24px;
color: #333;
margin-bottom: 10px;
}
.item p {
font-size: 16px;
color: #666;
margin-bottom: 20px;
line-height: 1.5;
}
.item .price {
font-size: 20px;
color: #ff6600;
font-weight: bold;
margin-bottom: 20px;
}
.item .sale-price {
font-size: 24px;
color: #ff6600;
font-weight: bold;
margin-bottom: 20px;
text-decoration: line-through;
}
.item .discount {
font-size: 16px;
color: #666;
margin-bottom: 20px;
}
.item button {
display: block;
margin: 0 auto;
padding: 10px 20px;
background-color: #ff6600;
color: #fff;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Summer Sale</h1>
<div class="container">
<div class="item">
<img src="https://via.placeholder.com/300x200" alt="Product 1">
<h2>Product 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eget leo magna. Integer auctor velit vel elit tristique.</p>
<div class="price">Price: $50</div>
<div class="sale-price">Sale Price: $40</div>
<div class="discount">Save $10 (20%)</div>
<button>Add to Cart</button>
</div>
<div class="item">
<img src="https://via.placeholder.com/300x200" alt="Product 2">
<h2>Product 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eget leo magna. Integer auctor velit vel elit tristique.</p>
<div class="price">Price: $80</div>
<div class="sale-price">Sale Price: $60</div>
<div class="discount">Save $20 (25%)</div>
<button>Add to Cart</button>
</div>
<div class="item">
<img src="https://via.placeholder.com/300x200" alt="Product 3">
<h2>Product 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eget leo magna. Integer auctor velit vel elit tristique.</p>
<div class="price">Price: $120</div>
<div class="sale-price">Sale Price: $80</div>
<div class="discount">Save $40 (33%)</div>
<button>Add to Cart</button>
</div>
</div>
</body>
</html>
```
在该示例中,页面包含一个标题(Summer Sale)和三个打折商品,每个商品都包含名称、图片、描述、原价、折扣价和购买按钮等信息。页面使用CSS样式表来设置字体、颜色、背景、布局和其他样式,以增强页面效果。