闲来无事，再写几个产品宣传页
宣传页面一：
源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>产品推广海报</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
background-color: #f2f2f2;
color: #333;
}
header {
background-color: #007BFF;
color: #fff;
text-align: center;
padding: 20px;
}
section {
max-width: 800px;
margin: 20px auto;
padding: 30px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
h1 {
color: #007BFF;
}
p {
line-height: 1.6;
}
.product-image {
max-width: 100%;
height: auto;
border-radius: 8px;
margin-bottom: 20px;
}
.cta-button {
display: inline-block;
padding: 10px 20px;
background-color: #007BFF;
color: #fff;
text-decoration: none;
border-radius: 5px;
font-weight: bold;
transition: background-color 0.3s ease;
}
.cta-button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<section>
<img class="product-image" src="https://huamaobizhi.com/appApi/wallpaper/getImages_1_0/?pid=6070&resolution=800w380h" alt="产品图片">
<h2>产品特点</h2>
<ul>
<li>高品质材料</li>
<li>创新设计</li>
<li>性能卓越</li>
</ul>
<h2>优惠详情</h2>
<p>现在购买，可享受额外5%折扣！</p>
<a class="cta-button" href="https://example.com/buy-now" target="_blank">立即购买</a>
</section>
</body>
</html>
效果
宣传界面二：
源码
效果
宣传界面三：
源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>产品推广海报</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
background-color: #f9f9f9;
color: #333;
display: flex;
min-height: 100vh;
}
.container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
.left-section,
.right-section {
flex: 1;
text-align: center;
padding: 40px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
.left-section {
background-color: #FF7F50;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.left-section h1 {
margin-bottom: 20px;
}
.left-section p {
line-height: 1.6;
color: #eee;
}
.cta-button {
margin-top: 20px;
padding: 15px 30px;
background-color: #FF6347;
color: #fff;
text-decoration: none;
border-radius: 5px;
font-weight: bold;
transition: background-color 0.3s ease;
border: 2px solid #FF6347;
}
.cta-button:hover {
background-color: #FF4500;
border-color: #FF4500;
}
.right-section {
background-color: #fff;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
h1,
p {
color: #333;
}
.product-image {
max-width: 100%;
height: auto;
border-radius: 8px;
margin: 20px 0;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
ul {
list-style-type: none;
padding: 0;
color: #333;
}
li {
margin-bottom: 8px;
}
</style>
</head>
<body>
<div class="container">
<div class="left-section">
<h1>热销产品推广</h1>
<p>限时优惠，快来抢购！</p>
<a class="cta-button" href="https://example.com/buy-now" target="_blank">立即购买</a>
</div>
<div class="right-section">
<img class="product-image" src="https://huamaobizhi.com/appApi/wallpaper/getImages_1_0/?pid=6070&resolution=800w380h" alt="产品图片">
<h2>产品特点</h2>
<ul>
<li>高品质材料</li>
<li>创新设计</li>
<li>性能卓越</li>
</ul>
<h2>优惠详情</h2>
<p>现在购买，可享受额外5%折扣！</p>
</div>
</div>
</body>
</html>
效果
“Remember, Red, hope is a good thing, maybe the best of things, and no good thing ever dies.” – “记住，瑞德，希望是一种美好的东西，或许是最好的东西，而且没有任何好事会消逝。”——《肖申克的救赎》
原文链接：https://juejin.cn/post/7333631025757732883 作者：IT小辉同学
