写一个【春节】风格的活动抽奖页面,页面中必须有醒目的【新年快乐】标志
时间: 2024-10-21 14:03:49 浏览: 16
创建一个春节主题的抽奖页面,首先我们需要考虑的是视觉效果和用户体验。以下是一个简单的HTML和CSS示例:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>新春抽奖</title>
<style>
body {
background-color: #f5f5f5;
font-family: 'SimHei', sans-serif; /* 使用中文字体 */
}
.container {
width: 80%;
margin: 0 auto;
padding: 50px;
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
background-color: white;
text-align: center;
}
h1 {
color: #ff9900;
font-size: 36px;
margin-bottom: 30px;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}
.logo {
display: block;
margin: 0 auto;
max-width: 200px;
height: auto;
vertical-align: middle;
}
button {
padding: 10px 20px;
background-color: #ff9900;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #c18400;
}
</style>
</head>
<body>
<div class="container">
<h1 style="font-weight: bold;">新年快乐!</h1>
<img src="new-year-logo.png" alt="新年快乐图标" class="logo"> <!-- 图片路径需替换为实际图片文件 -->
<p>点击按钮参加我们的春节抽奖活动:</p>
<button id="lotteryButton">开始抽奖</button>
</div>
<script>
document.getElementById('lotteryButton').addEventListener('click', function() {
// 这里应添加抽奖逻辑,比如跳转到新的页面或弹出提示窗口
alert("恭喜您参与了抽奖,结果即将公布!");
});
</script>
</body>
</html>
```
在这个例子中,我们创建了一个简洁的页面布局,标题是“新年快乐”,中间有一个代表新年的图标,下方是“开始抽奖”按钮。当用户点击按钮时,会触发一个简单的抽奖操作,这里只是一个模拟,实际应用中需要连接到后台服务生成随机奖品。
阅读全文