写一个【国庆】风格的活动抽奖页面,页面中必须有醒目的【十一】标志
时间: 2024-09-07 08:03:51 浏览: 36
创建一个国庆风格的活动抽奖页面通常需要使用HTML、CSS以及JavaScript等技术。以下是一个简单的示例来展示如何制作这样一个页面:
HTML (index.html):
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>国庆抽奖活动</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="header">
<img src="11logo.png" alt="十一标志" id="eleven-logo">
<h1>国庆抽奖盛典</h1>
</div>
<div class="prize-container">
<h2>点击下方按钮参与抽奖</h2>
<button id="draw-button">抽取奖品</button>
</div>
<div class="footer">
<p>活动解释权归组织方所有</p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
```
CSS (styles.css):
```css
body {
font-family: 'Microsoft YaHei', sans-serif;
text-align: center;
background-color: #f3f3f3;
}
.container {
max-width: 600px;
margin: auto;
padding-top: 50px;
}
.header {
margin-bottom: 20px;
}
#eleven-logo {
width: 100px;
margin-bottom: 10px;
}
.prize-container {
margin-bottom: 50px;
}
.draw-button {
background-color: #d32f2f;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #ffffff;
padding: 10px;
box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.1);
}
```
JavaScript (script.js):
```javascript
document.getElementById('draw-button').addEventListener('click', function() {
alert('恭喜你!获得了一份精美的奖品!');
// 这里可以加入抽奖逻辑代码,与服务器交互等
});
```
在这个示例中,我们创建了一个包含国庆元素的页面,其中包含一个醒目的“十一”标志图片,和一个抽奖按钮。用户点击抽奖按钮后会触发一个提示信息,表示用户已经成功参与抽奖。
为了实现这个页面,你需要准备一张国庆风格的标志图片,并将其命名为`11logo.png`,放在与`index.html`同级的目录下。
阅读全文