用HTML写一个【国庆】风格的活动抽奖页面,页面中必须有醒目的【十一】标志
时间: 2024-10-03 22:04:37 浏览: 18
创建一个国庆风格的抽奖页面,可以使用HTML的基本结构和CSS样式来实现。下面是一个简单的示例:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>国庆抽奖</title>
<style>
body {
background-color: #d9534f; /* 使用一种类似中国红的颜色 */
font-family: Arial, sans-serif;
text-align: center;
}
#header {
padding: 50px;
color: white;
border-bottom: 3px solid #fff;
}
.logo {
width: 200px;
height: auto;
}
#prizeInfo {
margin-top: 50px;
font-size: 24px;
color: #fff;
}
#drawButton {
display: block;
margin: 50px auto;
padding: 20px 60px;
background-color: #fff;
color: #d9534f;
border: none;
cursor: pointer;
font-size: 18px;
border-radius: 5px;
}
#drawButton:hover {
background-color: #d9534f;
color: white;
}
</style>
</head>
<body>
<div id="header">
<img src="path_to_your_flag_image/11_logo.png" alt="十一" class="logo"> <!-- 请替换为实际的十一标志图片URL -->
国庆抽奖活动
</div>
<h2 id="prizeInfo">赢取丰富奖品,点击抽大奖!</h2>
<button id="drawButton">开始抽奖</button>
<p id="disclaimer">*活动规则与详情见下方链接</p>
<a href="#" target="_blank">活动规则</a>
</body>
</html>
```
在这个例子中,我们设置了页面背景色为中国红,添加了一个醒目的"十一"标志作为头部背景,并用白色字体突出显示了标题。还设计了一个按钮,用户点击后触发抽奖功能。最后有一个免责声明链接。
阅读全文