國慶風格的活動抽獎頁面的示例代碼

下是一個簡單的國慶風格的活動抽獎頁面的示例代碼。頁面中有一個醒目的十一標志，以及一些國慶相關的元素和活動信息。

html復制代碼

	<!DOCTYPE html>
	<html>
	<head>
	<title>國慶抽獎活動</title>
	<style>
	body {
	background-color: #f2f2f2;
	font-family: Arial, sans-serif;
	text-align: center;
	}

	.container {
	max-width: 600px;
	margin: 0 auto;
	padding: 20px;
	}

	.logo {
	width: 200px;
	height: 200px;
	background-image: url('path/to/logo.png');
	background-size: cover;
	margin: 0 auto;
	display: block;
	}

	.prizes {
	list-style-type: none;
	padding: 0;
	}

	.prize {
	margin-bottom: 20px;
	}

	.prize-item {
	font-weight: bold;
	}

	.button {
	display: inline-block;
	background-color: #ff0000;
	color: #fff;
	text-align: center;
	padding: 10px 20px;
	margin: 10px 2px;
	cursor: pointer;
	border: none;
	border-radius: 5px;
	}
	</style>
	</head>
	<body>
	<div class="container">
	<div class="logo"></div>
	<h1>國慶抽獎活動</h1>
	<p>歡慶國慶，贏取豐厚獎品！</p>
	<ul class="prizes">
	<li class="prize">
	<div class="prize-item">iPhone 13</div>
	<div class="prize-item">價值 6999 元</div>
	</li>
	<li class="prize">
	<div class="prize-item">Kindle Paperwhite</div>
	<div class="prize-item">價值 1299 元</div>
	</li>
	<li class="prize">
	<div class="prize-item">國慶紀念品</div>
	<div class="prize-item">價值 50 元</div>
	</li>
	</ul>
	<a href="#" class="button">立即參與</a>
	</div>
	</body>
	</html>

家好，今天給大家介紹一款，JavaScript實現(xiàn)的轉盤抽獎html頁面前端源碼（圖1）。送給大家哦，獲取方式在本文末尾。

圖1

圖2

圖3

就愛UI - 分享UI設計的點點滴滴

動時間：7月30日-8月10日

活動地址：

pc端鏈接：

https://youxi.vip.qq.com/m/act/0b278d3d1c_cf_587449.html?_wv=3&_wwv=4

移動端：

https://youxi.vip.qq.com/m/act/0f2f285fd1_cf_587468.html?_wv=1&_wwv=4

PART1：集火線周年慶拼圖，抽IPAD

各位CFer可以通過活動頁面完成對應任務，即可集齊一套“火線周年慶”拼圖，集齊之后即可開啟周年寶箱，獎勵豐厚，千萬別錯過；其中包含永久游戲道具：黑騎士-海王，colt1911-大黃蜂，還有實物獎勵：牛年公仔以及終極大獎IPAD等你哦！

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。