这是一款为电竞赛事、校园赛或城市冠军赛设计的单页官网模板。整体以近黑底色配霓虹青与品红双色渐变，配合发光按钮、等宽倒计时与战队徽标色块，充满速度与竞技张力。首屏中央是原生 JS 驱动的实时倒计时（开赛自动递减），第一时间制造紧迫感与期待。
页面中段用三阶段赛程卡片（线上预选 / 八强淘汰 / 总决赛）标注日期，八强战队以徽标色块网格呈现，奖金池段用三宫格突出总奖池与冠军独得。所有数据均为静态占位，倒计时的目标日期由脚本动态计算（当前 +30 天），无需后端即可运行。
非常适合赛事主办方、高校电竞社或品牌赞助的杯赛用作官方报名 / 观赛落地页。替换赛事名、赛程、战队与奖金后，即可上线一个燃爆的赛事官网。
使用教程
1. 下载与保存
将下方 HTML 源码全部复制，保存为 index.html 文件（注意文件后缀必须是 .html）。
2. 本地预览
直接双击 index.html 文件，浏览器会自动打开并渲染页面效果。也可以在文件夹内运行 python -m http.server 后访问 localhost:8000 进行预览。
3. 自定义修改
替换文字：直接编辑 HTML 中的标题、段落文本与链接。调整配色：修改 <style> 标签内的 CSS 变量（:root 部分）或具体颜色值。更换图片：将 <img> 的 src 属性换成你自己的图片地址，或将背景渐变替换为 background-image。
4. 上线部署
将 index.html 上传到任意支持静态网页托管的服务（GitHub Pages、Vercel、Netlify、阿里云 OSS、腾讯云 COS 等）即可获得独立访问网址。
HTML 源码
复制下方完整代码，保存为 .html 文件即可在浏览器中预览使用。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>巅峰杯 Summit Cup · 电竞赛事官网</title>
<style>
:root{
--bg:#070a14; --bg2:#0c1120; --card:#101728; --line:#1d2740;
--cyan:#1fe0c8; --pink:#ff2d78; --txt:#eaf2ff; --mut:#93a2c4; --dim:#5b6b8f;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,"PingFang SC","Microsoft YaHei",sans-serif;background:var(--bg);color:var(--txt);line-height:1.7}
a{color:inherit;text-decoration:none}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
header{background:rgba(7,10,20,.85);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-weight:800;letter-spacing:1px;font-size:20px;color:var(--cyan)}
.logo b{color:var(--pink)}
.nav a{color:var(--mut);margin-left:26px;font-size:14px}
.nav a:hover{color:var(--cyan)}
.hero{padding:80px 0 66px;text-align:center;
background:radial-gradient(800px 420px at 50% -20%,rgba(31,224,200,.16),transparent 60%),radial-gradient(700px 360px at 80% 10%,rgba(255,45,120,.14),transparent 60%)}
.hero .tag{color:var(--pink);letter-spacing:5px;font-size:13px}
.hero h1{font-size:58px;line-height:1.1;margin:14px 0;letter-spacing:1px}
.hero h1 span{color:var(--cyan)}
.hero p{color:var(--mut);max-width:560px;margin:0 auto 26px;font-size:16px}
.btn{display:inline-block;background:linear-gradient(135deg,var(--cyan),var(--pink));color:#06121a;padding:14px 38px;border-radius:8px;font-weight:800;letter-spacing:1px}
.btn.ghost{background:transparent;border:1px solid var(--cyan);color:var(--cyan);margin-left:12px}
.count{display:flex;gap:16px;justify-content:center;margin:30px 0 8px}
.count .u{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 22px;min-width:84px}
.count .u b{display:block;font-size:34px;color:var(--cyan);font-weight:800;font-variant-numeric:tabular-nums}
.count .u span{color:var(--mut);font-size:12.5px}
section{padding:70px 0}
.tag{color:var(--cyan);letter-spacing:4px;font-size:13px;text-align:center}
h2{font-size:32px;text-align:center;letter-spacing:1px;margin:8px 0 12px}
.lead{color:var(--mut);text-align:center;max-width:620px;margin:0 auto;font-family:system-ui,sans-serif}
.stages{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:38px}
.c{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:26px;position:relative}
.c .no{position:absolute;top:16px;right:20px;color:var(--pink);font-weight:800;font-size:14px}
.c h3{color:var(--cyan);font-size:20px;margin-bottom:8px}
.c p{color:var(--mut);font-size:14px}
.c .date{margin-top:12px;color:var(--dim);font-size:12.5px}
.teams{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:38px}
.t{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:22px;text-align:center}
.t .em{width:54px;height:54px;border-radius:14px;margin:0 auto 12px;background:linear-gradient(135deg,var(--cyan),var(--pink));display:flex;align-items:center;justify-content:center;font-weight:800;color:#06121a;font-size:18px}
.t h3{font-size:16px}
.t p{color:var(--dim);font-size:12.5px;margin-top:4px}
.pool{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:38px;text-align:center}
.pool .c .num{font-size:38px;color:var(--pink);font-weight:800}
.pool .c p{margin-top:4px}
.cta{text-align:center;background:linear-gradient(160deg,var(--bg2),var(--bg));border-top:1px solid var(--line)}
footer{border-top:1px solid var(--line);padding:28px 0;text-align:center;color:var(--dim);font-size:13px}
@media(max-width:860px){.hero h1{font-size:38px}.count .u{min-width:64px;padding:12px 14px}.count .u b{font-size:26px}.stages,.teams,.pool{grid-template-columns:1fr}.nav a{margin-left:14px;font-size:13px}}
</style>
</head>
<body>
<header><div class="wrap nav">
<div class="logo">巅峰杯 <b>Summit Cup</b></div>
<nav><a href="#stages">赛程</a><a href="#teams">战队</a><a href="#pool">奖金</a><a href="#watch">观赛</a></nav>
</div></header>
<section class="hero"><div class="wrap">
<div class="tag">2026 城市电竞冠军赛</div>
<h1>登顶<span>巅峰</span>，<br>只为那一座奖杯</h1>
<p>32 支战队，单败淘汰，百万奖池。线上预选 + 线下总决赛，一场属于玩家的夏日狂欢。</p>
<div class="count" id="count">
<div class="u"><b id="d">--</b><span>天</span></div>
<div class="u"><b id="h">--</b><span>时</span></div>
<div class="u"><b id="m">--</b><span>分</span></div>
<div class="u"><b id="s">--</b><span>秒</span></div>
</div>
<a class="btn" href="#watch">预约观赛</a><a class="btn ghost" href="#teams">查看战队</a>
</div></section>
<section id="stages"><div class="wrap">
<div class="tag">SCHEDULE</div>
<h2>三阶段赛程</h2>
<div class="stages">
<div class="c"><span class="no">08/15</span><h3>线上预选</h3><p>32 进 8 单败淘汰，全程直播，黑马随时诞生。</p><div class="date">8 月 15 日 – 8 月 22 日</div></div>
<div class="c"><span class="no">09/05</span><h3>八强淘汰</h3><p>BO3 双败，线下场馆开打，门票同步开售。</p><div class="date">9 月 5 日 – 9 月 6 日</div></div>
<div class="c"><span class="no">09/12</span><h3>总决赛</h3><p>BO5 巅峰对决 + 明星表演赛，现场颁发奖杯。</p><div class="date">9 月 12 日 19:00</div></div>
</div>
</div></section>
<section id="teams" style="background:var(--bg2)"><div class="wrap">
<div class="tag">TEAMS</div>
<h2>八强战队</h2>
<div class="teams">
<div class="t"><div class="em">NV</div><h3>夜枭 NV</h3><p>卫冕冠军</p></div>
<div class="t"><div class="em">SK</div><h3>炽焰 SK</h3><p>新生代黑马</p></div>
<div class="t"><div class="em">TG</div><h3>潮汐 TG</h3><p>运营大师</p></div>
<div class="t"><div class="em">LM</div><h3>流光 LM</h3><p>激进打法</p></div>
<div class="t"><div class="em">ZR</div><h3>震雷 ZR</h3><p>老牌劲旅</p></div>
<div class="t"><div class="em">FH</div><h3>星火 FH</h3><p>粉丝最爱</p></div>
<div class="t"><div class="em">QT</div><h3>青藤 QT</h3><p>稳健防守</p></div>
<div class="t"><div class="em">AX</div><h3>苍穹 AX</h3><p>全能阵容</p></div>
</div>
</div></section>
<section id="pool"><div class="wrap">
<div class="tag">PRIZE POOL</div>
<h2>百万奖池</h2>
<div class="pool">
<div class="c"><div class="num">¥100万</div><p>总奖池</p></div>
<div class="c"><div class="num">¥50万</div><p>冠军独得</p></div>
<div class="c"><div class="num">32</div><p>参赛战队</p></div>
</div>
</div></section>
<section class="cta" id="watch"><div class="wrap">
<div class="tag">WATCH LIVE</div>
<h2>9 月 12 日，一起见证冠军诞生</h2>
<p class="lead" style="margin:0 auto 26px">总决赛门票限量发售，线上同步多平台直播。预约提醒，开赛不迷路。</p>
<a class="btn" href="#">预约观赛提醒</a>
</div></section>
<footer>© 2026 巅峰杯 Summit Cup 组委会 · 公平竞技，热爱无界</footer>
<script>
(function(){
var target = new Date(); target.setDate(target.getDate() + 30); target.setHours(19,0,0,0);
function pad(n){return (n<10?"0":"")+n;}
function tick(){
var diff = target - new Date();
if(diff < 0) diff = 0;
var d = Math.floor(diff/86400000);
var h = Math.floor(diff%86400000/3600000);
var m = Math.floor(diff%3600000/60000);
var s = Math.floor(diff%60000/1000);
document.getElementById("d").textContent = d;
document.getElementById("h").textContent = pad(h);
document.getElementById("m").textContent = pad(m);
document.getElementById("s").textContent = pad(s);
}
tick(); setInterval(tick, 1000);
})();
</script>
</body>
</html>
原创文章，作者：小蓝IT，如若转载，请注明出处：https://www.xiaolanzy.com/1988.html
微信扫一扫 
支付宝扫一扫 
