写一个【周年庆】风格的活动抽奖页面,页面中必须有醒目的【彩金】标志
时间: 2024-10-11 20:13:26 浏览: 33
比思电子 KGS - 25 周年庆PADS 9.5 中文有声视频电子教程.rar
当然可以。一个周年庆风格的活动抽奖页面设计应该充满节日气氛,并吸引用户的注意力。首先,让我们构建一个基本框架:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>周年庆典抽奖活动</title>
<style>
body {
background-color: #F0E68C; /* 浅黄色背景,营造氛围 */
}
.page-container {
width: 90%;
margin: 0 auto;
padding: 50px;
border: 2px solid #FFD700; /* 黄金色边框 */
text-align: center;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}
h1 {
font-size: 3rem;
color: #FFA07A; /* 玫瑰金色字体 */
margin-bottom: 2rem;
text-shadow: 1px 1px #BDB76B; /* 小颗粒阴影增加立体感 */
}
.logo {
display: block;
margin-bottom: 1rem;
width: 100px;
height: 100px;
background-image: url("your_golden_logo.png"); /* 彩金Logo图片 */
background-size: contain;
}
.prize {
font-weight: bold;
font-size: 2rem;
color: #FFC0CB; /* 香槟粉色,突出彩金奖品 */
}
input[type="button"] {
padding: 1rem 2rem;
background-color: #FFD700; /* 黄金色按钮 */
color: white;
border: none;
cursor: pointer;
transition: background-color 0.3s ease;
}
input[type="button"]:hover {
background-color: #E0AF0F; /* 按钮悬停效果 */
}
</style>
</head>
<body>
<div class="page-container">
<h1>【恭喜加入我们的周年盛宴!】</h1>
<img src="gold_anniversary_logo.jpg" alt="周年庆彩金标志" class="logo" />
<p class="prize">参与即有机会赢得【豪华彩金大礼包】!</p>
<form>
<input type="button" value="立即抽奖" onclick="startLottery()" />
</form>
</div>
<script>
function startLottery() {
// 这里添加抽奖逻辑,实际应用中需要连接到服务器或本地数据库
alert("恭喜您,您的抽奖结果即将揭晓!");
}
</script>
</body>
</html>
```
在这个示例中,页面包含了一个标题、一个黄金主题的Logo、大奖描述以及一个“立即抽奖”按钮。点击按钮后,会触发`startLottery()`函数,这里只是一个占位符,实际应用中你需要实现抽奖逻辑。
阅读全文