1. 小蓝资源网首页
  2. 网站源码

炽焰 BLAZE 电竞俱乐部官网 HTML 单页源码

小蓝IT • • 网站源码

纯黑背景配荧光青绿与洋红霓虹的电竞战队官网模板，含选手阵容、赛程战绩与青训招募。

炽焰 BLAZE 是一款面向电竞俱乐部与游戏战队的单页官网模板。它整合了战队口号、下一场比赛倒计时、选手阵容、赛程战绩、荣誉室、训练直播与青训招募七大模块，满足一支职业战队日常对外展示的全部需求。

页面以纯黑为底，荧光青绿、洋红与紫色霓虹渐变构建出强烈的电竞氛围。多边形切角、网格背景、数据条、排行榜与直播聊天室等元素的运用，让页面既有赛事感又具年轻潮流气质，非常适合目标受众为游戏玩家与电竞粉丝的战队官网。

适合电竞俱乐部、游戏战队、电竞赛事、游戏主播工作室，也适合前端学习者作为’暗色潮流风’案例，学习如何用渐变、网格、切角与动效打造高能量的运动/竞技类页面。

炽焰 BLAZE 电竞俱乐部官网 HTML 单页源码

使用教程

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">
<title>炽焰战队 BLAZE GAMING · 电竞俱乐部官网 | 打到最后一秒</title>
<style>
:root{
  --bg:#07090e;
  --bg2:#0d1119;
  --bg3:#131924;
  --cyan:#00e5c0;
  --cyan-d:#00b89a;
  --mag:#ff3d78;
  --violet:#8b5cf6;
  --txt:#e8ecf4;
  --txt2:#8792a8;
  --line:rgba(0,229,192,.16);
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg);color:var(--txt);line-height:1.75;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
a{text-decoration:none;color:inherit}
.mono{font-family:"SF Mono","Consolas","Courier New",monospace}

/* 顶栏 */
header{position:sticky;top:0;z-index:70;background:rgba(7,9,14,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{display:flex;align-items:center;gap:12px}
.brand .lg{
  width:40px;height:40px;flex:none;
  background:linear-gradient(135deg,var(--cyan),var(--violet));
  clip-path:polygon(50% 0,100% 26%,100% 74%,50% 100%,0 74%,0 26%);
  display:grid;place-items:center;color:#07090e;font-size:17px;font-weight:900;
}
.brand b{font-size:19px;font-weight:900;letter-spacing:2px;display:block;
  background:linear-gradient(90deg,var(--cyan),var(--violet));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.brand span{font-size:9.5px;letter-spacing:3.5px;color:var(--txt2);display:block;font-weight:700}
nav ul{display:flex;gap:28px;list-style:none;font-size:14px;font-weight:700;letter-spacing:1.2px}
nav a{color:var(--txt2);transition:.22s;position:relative;padding-bottom:5px}
nav a:after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--cyan);transition:.28s}
nav a:hover{color:var(--cyan)}
nav a:hover:after{width:100%}
.join{
  background:linear-gradient(135deg,var(--mag),#c72b5c);color:#fff;
  padding:10px 22px;font-size:13.5px;font-weight:800;letter-spacing:1.5px;
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
  transition:.25s;
}
.join:hover{filter:brightness(1.18)}
.mb{display:none;background:none;border:0;color:var(--txt);font-size:23px}

/* Hero */
.hero{
  position:relative;padding:92px 0 84px;overflow:hidden;
  background:
    radial-gradient(760px 420px at 82% 8%,rgba(139,92,246,.20),transparent 62%),
    radial-gradient(680px 400px at 6% 92%,rgba(0,229,192,.15),transparent 60%),
    var(--bg);
}
.grid-bg{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(0,229,192,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,229,192,.055) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(circle at 50% 40%,#000 20%,transparent 78%);
  -webkit-mask-image:radial-gradient(circle at 50% 40%,#000 20%,transparent 78%);
}
.hero-in{position:relative;z-index:3;display:grid;grid-template-columns:1.12fr .88fr;gap:48px;align-items:center}
.live{
  display:inline-flex;align-items:center;gap:9px;
  border:1px solid var(--mag);color:var(--mag);
  font-size:11.5px;font-weight:800;letter-spacing:2.5px;padding:6px 15px;margin-bottom:24px;
}
.live .dt{width:7px;height:7px;border-radius:50%;background:var(--mag);animation:bl 1.3s infinite}
@keyframes bl{0%,100%{opacity:1}50%{opacity:.25}}
h1{font-size:64px;line-height:1.04;font-weight:900;letter-spacing:-2px;text-transform:uppercase}
h1 .g{background:linear-gradient(100deg,var(--cyan),var(--violet) 60%,var(--mag));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
h1 .sm{display:block;font-size:22px;letter-spacing:9px;color:var(--txt2);font-weight:700;margin-bottom:14px;text-transform:none}
.hero p{color:var(--txt2);font-size:17px;margin:24px 0 34px;max-width:31em}
.hb{display:flex;gap:14px;flex-wrap:wrap}
.bt{
  padding:15px 32px;font-size:14.5px;font-weight:800;letter-spacing:1.5px;transition:.25s;display:inline-block;
  clip-path:polygon(11px 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%,0 11px);
}
.bt-a{background:linear-gradient(135deg,var(--cyan),var(--cyan-d));color:#07090e}
.bt-a:hover{filter:brightness(1.15);transform:translateY(-2px)}
.bt-b{border:1.5px solid rgba(232,236,244,.28);color:var(--txt)}
.bt-b:hover{border-color:var(--cyan);color:var(--cyan)}

/* 下一场比赛卡 */
.next{
  background:var(--bg2);border:1px solid var(--line);padding:28px 26px;position:relative;
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px));
}
.next .lb{font-size:11px;letter-spacing:3.5px;color:var(--cyan);font-weight:800;margin-bottom:18px}
.vs{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;text-align:center;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.team-s{display:block}
.team-s .ic{
  width:56px;height:56px;margin:0 auto 9px;display:grid;place-items:center;font-size:23px;font-weight:900;
  clip-path:polygon(50% 0,100% 26%,100% 74%,50% 100%,0 74%,0 26%);
}
.team-s.us .ic{background:linear-gradient(135deg,var(--cyan),var(--violet));color:#07090e}
.team-s.them .ic{background:var(--bg3);border:1px solid var(--txt2);color:var(--txt2)}
.team-s b{font-size:15px;font-weight:800;letter-spacing:1px}
.team-s small{display:block;font-size:11.5px;color:var(--txt2)}
.vs .x{font-size:22px;font-weight:900;color:var(--mag);letter-spacing:1px}
.cd{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:20px}
.cd div{background:var(--bg3);padding:11px 4px;text-align:center;border:1px solid rgba(255,255,255,.06)}
.cd b{display:block;font-size:24px;font-weight:900;color:var(--cyan);line-height:1.15}
.cd small{font-size:10px;letter-spacing:1.5px;color:var(--txt2);font-weight:700}
.next .mt{margin-top:16px;font-size:12.5px;color:var(--txt2);text-align:center}
.next .mt b{color:var(--txt)}

/* 战绩条 */
.stat{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sg{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.si{background:var(--bg2);padding:38px 20px;text-align:center;transition:.3s}
.si:hover{background:var(--bg3)}
.si b{display:block;font-size:40px;font-weight:900;line-height:1.1;
  background:linear-gradient(100deg,var(--cyan),var(--violet));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.si small{font-size:12px;letter-spacing:2.5px;color:var(--txt2);font-weight:700}

/* 通用节 */
section{padding:86px 0}
.head{text-align:center;max-width:660px;margin:0 auto 52px}
.head .k{font-size:11.5px;letter-spacing:5px;color:var(--mag);font-weight:900}
.head h2{font-size:40px;font-weight:900;letter-spacing:-.8px;margin:10px 0 12px;text-transform:uppercase}
.head h2 span{background:linear-gradient(100deg,var(--cyan),var(--violet));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.head p{color:var(--txt2);font-size:16px}
.alt{background:var(--bg2)}

/* 选手 */
.roster{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.pl{
  background:var(--bg2);border:1px solid rgba(255,255,255,.07);
  overflow:hidden;transition:.34s;position:relative;
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
}
.alt .pl{background:var(--bg3)}
.pl:hover{transform:translateY(-9px);border-color:var(--cyan)}
.pl .fc{height:158px;position:relative;display:grid;place-items:center;overflow:hidden}
.pl .fc:after{content:"";position:absolute;inset:0;background:
  repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 2px,transparent 2px 4px)}
.pl .fc b{font-size:40px;font-weight:900;color:rgba(255,255,255,.92);position:relative;z-index:2;letter-spacing:-2px}
.f1{background:linear-gradient(150deg,#00e5c0,#0a6b60)}
.f2{background:linear-gradient(150deg,#8b5cf6,#3d2a72)}
.f3{background:linear-gradient(150deg,#ff3d78,#7a1636)}
.f4{background:linear-gradient(150deg,#4dabf7,#123a5e)}
.f5{background:linear-gradient(150deg,#ffb340,#7a4f0e)}
.pl .role{
  position:absolute;top:10px;left:10px;z-index:3;
  background:rgba(7,9,14,.8);color:var(--cyan);
  font-size:10px;font-weight:900;letter-spacing:1.5px;padding:3px 9px;
}
.pl .bd{padding:18px 18px 20px}
.pl h3{font-size:19px;font-weight:900;letter-spacing:.5px}
.pl .rn{font-size:12px;color:var(--txt2);margin-bottom:12px}
.pl .kv{display:flex;justify-content:space-between;font-size:12.5px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.pl .kv span{color:var(--txt2)}
.pl .kv b{color:var(--cyan);font-weight:800}
.pl .kv:last-child{border:0}

/* 赛程 */
.sched{border:1px solid var(--line)}
.row{
  display:grid;grid-template-columns:120px 1fr 150px 110px 100px;gap:16px;align-items:center;
  padding:18px 22px;border-bottom:1px solid rgba(255,255,255,.06);transition:.24s;
}
.row:last-child{border:0}
.row:hover{background:var(--bg3)}
.row .dt{font-size:13px;color:var(--txt2);font-weight:700}
.row .op{font-size:16px;font-weight:800}
.row .op small{display:block;font-size:11.5px;color:var(--txt2);font-weight:600}
.row .ev{font-size:12.5px;color:var(--violet);font-weight:700}
.row .sc{font-size:19px;font-weight:900;letter-spacing:1px;text-align:center}
.row .sc.w{color:var(--cyan)}
.row .sc.l{color:var(--mag)}
.row .tag{
  text-align:center;font-size:11px;font-weight:900;letter-spacing:1.5px;padding:5px 0;
}
.tag.win{background:rgba(0,229,192,.14);color:var(--cyan)}
.tag.lose{background:rgba(255,61,120,.13);color:var(--mag)}
.tag.up{background:rgba(139,92,246,.15);color:var(--violet)}
.row-h{background:var(--bg3);font-size:11px;letter-spacing:2.5px;color:var(--txt2);font-weight:900;padding:14px 22px}

/* 荣誉 */
.tro{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tc{
  background:var(--bg2);border:1px solid rgba(255,255,255,.07);padding:30px 26px;transition:.3s;
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));
}
.alt .tc{background:var(--bg3)}
.tc:hover{border-color:var(--mag);transform:translateY(-6px)}
.tc .yr{font-size:12px;letter-spacing:3px;color:var(--mag);font-weight:900}
.tc .md{font-size:32px;margin:10px 0 8px}
.tc h3{font-size:19px;font-weight:900;margin-bottom:6px}
.tc p{font-size:14px;color:var(--txt2)}
.tc .rk{
  display:inline-block;margin-top:14px;font-size:11.5px;font-weight:900;letter-spacing:1.5px;
  background:rgba(0,229,192,.13);color:var(--cyan);padding:4px 12px;
}

/* 直播 */
.stream{display:grid;grid-template-columns:1.15fr .85fr;gap:34px;align-items:stretch}
.screen{
  background:var(--bg3);border:1px solid var(--line);position:relative;
  aspect-ratio:16/9;display:grid;place-items:center;overflow:hidden;
}
.screen:before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(500px 260px at 50% 46%,rgba(0,229,192,.16),transparent 70%),
  repeating-linear-gradient(0deg,rgba(0,0,0,.2) 0 2px,transparent 2px 4px);
}
.play{
  width:82px;height:82px;border-radius:50%;background:rgba(0,229,192,.16);
  border:2px solid var(--cyan);color:var(--cyan);display:grid;place-items:center;
  font-size:27px;position:relative;z-index:2;cursor:pointer;transition:.28s;
}
.play:hover{background:var(--cyan);color:#07090e;transform:scale(1.08)}
.screen .lbl{position:absolute;bottom:16px;left:18px;z-index:2;font-size:12.5px;color:var(--txt2)}
.screen .on{
  position:absolute;top:16px;right:18px;z-index:2;background:var(--mag);color:#fff;
  font-size:10.5px;font-weight:900;letter-spacing:2px;padding:4px 11px;
}
.chat{background:var(--bg2);border:1px solid var(--line);padding:22px;display:flex;flex-direction:column}
.alt .chat{background:var(--bg3)}
.chat h4{font-size:13px;letter-spacing:2.5px;color:var(--cyan);font-weight:900;padding-bottom:13px;border-bottom:1px solid var(--line);margin-bottom:6px}
.msg{font-size:13.5px;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.msg b{font-weight:800;margin-right:7px}
.n1{color:var(--cyan)}.n2{color:var(--mag)}.n3{color:var(--violet)}.n4{color:#ffb340}
.msg span{color:var(--txt2)}
.chat .inp{margin-top:auto;padding-top:14px;display:flex;gap:8px}
.chat input{
  flex:1;background:var(--bg);border:1px solid rgba(255,255,255,.12);color:var(--txt);
  padding:10px 13px;font-size:13.5px;font-family:inherit;
}
.chat input:focus{outline:none;border-color:var(--cyan)}
.chat button{background:var(--cyan);color:#07090e;border:0;padding:0 18px;font-weight:900;font-size:13px;cursor:pointer;font-family:inherit}

/* 招募 CTA */
.rec{
  border:1px solid var(--line);background:
    radial-gradient(600px 300px at 20% 20%,rgba(139,92,246,.16),transparent 65%),
    radial-gradient(500px 280px at 85% 80%,rgba(0,229,192,.13),transparent 62%),
    var(--bg2);
  padding:56px 46px;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;
  clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,26px 100%,0 calc(100% - 26px));
}
.rec h2{font-size:36px;font-weight:900;letter-spacing:-1px;line-height:1.24;text-transform:uppercase}
.rec p{color:var(--txt2);font-size:16px;margin-top:14px}
.rq{list-style:none;margin-top:20px}
.rq li{font-size:14.3px;color:var(--txt2);padding:6px 0 6px 26px;position:relative}
.rq li:before{content:"▸";position:absolute;left:0;color:var(--cyan);font-weight:900}
.rf{background:rgba(7,9,14,.6);border:1px solid rgba(255,255,255,.1);padding:28px}
.rf label{display:block;font-size:11.5px;letter-spacing:2px;color:var(--cyan);font-weight:800;margin-bottom:7px}
.rf input,.rf select{
  width:100%;padding:12px 14px;margin-bottom:16px;background:var(--bg);
  border:1px solid rgba(255,255,255,.12);color:var(--txt);font-size:14px;font-family:inherit;
}
.rf select option{background:var(--bg2)}
.rf input:focus,.rf select:focus{outline:none;border-color:var(--cyan)}
.rf button{
  width:100%;padding:15px;border:0;cursor:pointer;font-family:inherit;
  background:linear-gradient(135deg,var(--mag),#c72b5c);color:#fff;
  font-size:15px;font-weight:900;letter-spacing:2px;transition:.25s;
}
.rf button:hover{filter:brightness(1.18)}

footer{background:var(--bg2);border-top:1px solid var(--line);padding:50px 0 26px;font-size:14px;color:var(--txt2)}
.fg{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px;padding-bottom:28px;border-bottom:1px solid rgba(255,255,255,.07)}
.fg h5{color:var(--txt);font-size:13.5px;font-weight:900;letter-spacing:2px;margin-bottom:13px}
.fg ul{list-style:none}.fg li{line-height:2.1;font-size:13.5px}
.fg a:hover{color:var(--cyan)}
.soc{display:flex;gap:10px;margin-top:14px}
.soc a{
  width:36px;height:36px;background:var(--bg3);border:1px solid rgba(255,255,255,.1);
  display:grid;place-items:center;font-size:16px;transition:.25s;
}
.soc a:hover{border-color:var(--cyan);color:var(--cyan)}
.cp{text-align:center;padding-top:22px;font-size:12.5px;opacity:.6}

@media(max-width:1080px){.roster{grid-template-columns:repeat(3,1fr)}}
@media(max-width:980px){
  nav ul,.join{display:none}.mb{display:block}
  .hero-in,.stream,.rec{grid-template-columns:1fr;gap:34px}
  h1{font-size:40px}
  .sg{grid-template-columns:1fr 1fr}
  .roster,.tro{grid-template-columns:1fr 1fr}
  .row{grid-template-columns:1fr 1fr;gap:8px;row-gap:6px}
  .row .ev,.row .dt{font-size:12px}
  .head h2{font-size:28px}
  .fg{grid-template-columns:1fr 1fr}
  .rec{padding:36px 24px}
}
@media(max-width:600px){.roster,.tro{grid-template-columns:1fr}}
</style>
</head>
<body>

<header>
  <div class="wrap nav">
    <a href="#" class="brand">
      <span class="lg">B</span>
      <span><b>BLAZE</b><span>炽 焰 电 竞 俱 乐 部</span></span>
    </a>
    <nav><ul>
      <li><a href="#roster">选手阵容</a></li>
      <li><a href="#sched">赛程战绩</a></li>
      <li><a href="#honor">荣誉室</a></li>
      <li><a href="#live">直播</a></li>
      <li><a href="#rec">青训招募</a></li>
    </ul></nav>
    <a href="#rec" class="join">加 入 我 们</a>
    <button class="mb">☰</button>
  </div>
</header>

<div class="hero">
  <div class="grid-bg"></div>
  <div class="wrap hero-in">
    <div>
      <span class="live"><span class="dt"></span>LIVE · 训练赛正在直播</span>
      <h1><span class="sm">EST. 2019 · 城市主场</span>打到<span class="g">最后一秒</span></h1>
      <p>我们不是最有钱的那支队，但我们是最难被翻盘的那支。三年三个赛区亚军，去年终于把那座奖杯搬回了主场馆——但故事还没写完。</p>
      <div class="hb">
        <a href="#sched" class="bt bt-a">查看本季赛程</a>
        <a href="#roster" class="bt bt-b">认识选手</a>
      </div>
    </div>
    <div class="next">
      <div class="lb">NEXT MATCH · 下 一 场</div>
      <div class="vs">
        <div class="team-s us"><div class="ic">B</div><b>BLAZE</b><small>炽焰 · 主场</small></div>
        <div class="x">VS</div>
        <div class="team-s them"><div class="ic">NV</div><b>NOVA</b><small>新星 · 客场</small></div>
      </div>
      <div class="cd">
        <div><b>02</b><small>DAYS</small></div>
        <div><b>14</b><small>HRS</small></div>
        <div><b>38</b><small>MIN</small></div>
        <div><b>05</b><small>SEC</small></div>
      </div>
      <div class="mt">🏟 <b>城市电竞馆 A 馆</b> · 季后赛半决赛 BO5 · 19:30 开打<br>门票已开售，俱乐部会员享 7 折</div>
    </div>
  </div>
</div>

<div class="stat">
  <div class="wrap">
    <div class="sg">
      <div class="si"><b>68%</b><small>本季胜率</small></div>
      <div class="si"><b>11</b><small>赛季冠亚军</small></div>
      <div class="si"><b>240万</b><small>全平台粉丝</small></div>
      <div class="si"><b>7</b><small>一线队选手</small></div>
    </div>
  </div>
</div>

<section id="roster">
  <div class="wrap">
    <div class="head">
      <div class="k">THE ROSTER</div>
      <h2>一线队<span>选手阵容</span></h2>
      <p>五名首发 + 两名替补，平均年龄 21.4 岁。数据为本赛季常规赛统计（演示数据）</p>
    </div>
    <div class="roster">
      <div class="pl">
        <div class="fc f1"><span class="role">上路 / 队长</span><b>QY</b></div>
        <div class="bd">
          <h3>清野</h3>
          <div class="rn">QINGYE · 24 岁 · 队长</div>
          <div class="kv"><span>场均伤害</span><b>28.4k</b></div>
          <div class="kv"><span>参团率</span><b>61%</b></div>
          <div class="kv"><span>MVP 次数</span><b>9</b></div>
        </div>
      </div>
      <div class="pl">
        <div class="fc f2"><span class="role">中路</span><b>SK</b></div>
        <div class="bd">
          <h3>霜刻</h3>
          <div class="rn">SHUANGKE · 20 岁</div>
          <div class="kv"><span>场均伤害</span><b>34.1k</b></div>
          <div class="kv"><span>补刀差 @10</span><b>+12.7</b></div>
          <div class="kv"><span>MVP 次数</span><b>14</b></div>
        </div>
      </div>
      <div class="pl">
        <div class="fc f3"><span class="role">打野</span><b>LX</b></div>
        <div class="bd">
          <h3>雷息</h3>
          <div class="rn">LEIXI · 21 岁</div>
          <div class="kv"><span>场均击杀</span><b>5.8</b></div>
          <div class="kv"><span>野区控制</span><b>57%</b></div>
          <div class="kv"><span>MVP 次数</span><b>11</b></div>
        </div>
      </div>
      <div class="pl">
        <div class="fc f4"><span class="role">射手</span><b>AZ</b></div>
        <div class="bd">
          <h3>阿栈</h3>
          <div class="rn">AZHAN · 19 岁 · 新人王</div>
          <div class="kv"><span>场均伤害</span><b>36.9k</b></div>
          <div class="kv"><span>KDA</span><b>5.42</b></div>
          <div class="kv"><span>MVP 次数</span><b>8</b></div>
        </div>
      </div>
      <div class="pl">
        <div class="fc f5"><span class="role">辅助</span><b>MO</b></div>
        <div class="bd">
          <h3>木鸮</h3>
          <div class="rn">MUXIAO · 23 岁</div>
          <div class="kv"><span>场均视野</span><b>71.3</b></div>
          <div class="kv"><span>保护成功率</span><b>82%</b></div>
          <div class="kv"><span>MVP 次数</span><b>4</b></div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="alt" id="sched">
  <div class="wrap">
    <div class="head">
      <div class="k">SCHEDULE</div>
      <h2>近期<span>赛程与战绩</span></h2>
      <p>常规赛已结束，目前排名赛区第二，锁定季后赛四强席位</p>
    </div>
    <div class="sched">
      <div class="row-h">日 期 · 对 手 · 赛 事 · 比 分 · 结 果</div>
      <div class="row">
        <div class="dt">08-22 周六</div>
        <div class="op">NOVA 新星<small>季后赛半决赛 · 主场</small></div>
        <div class="ev">城市联赛 S12</div>
        <div class="sc">BO5</div>
        <div class="tag up">即 将 开 打</div>
      </div>
      <div class="row">
        <div class="dt">08-14 周五</div>
        <div class="op">IRON 铁律<small>常规赛第 18 轮</small></div>
        <div class="ev">城市联赛 S12</div>
        <div class="sc w">3 : 1</div>
        <div class="tag win">胜</div>
      </div>
      <div class="row">
        <div class="dt">08-09 周日</div>
        <div class="op">VOID 虚空<small>常规赛第 17 轮</small></div>
        <div class="ev">城市联赛 S12</div>
        <div class="sc w">3 : 0</div>
        <div class="tag win">胜</div>
      </div>
      <div class="row">
        <div class="dt">08-02 周日</div>
        <div class="op">TITAN 泰坦<small>常规赛第 16 轮</small></div>
        <div class="ev">城市联赛 S12</div>
        <div class="sc l">1 : 3</div>
        <div class="tag lose">负</div>
      </div>
      <div class="row">
        <div class="dt">07-26 周日</div>
        <div class="op">ECHO 回响<small>常规赛第 15 轮</small></div>
        <div class="ev">城市联赛 S12</div>
        <div class="sc w">3 : 2</div>
        <div class="tag win">胜</div>
      </div>
      <div class="row">
        <div class="dt">07-19 周日</div>
        <div class="op">DAWN 破晓<small>邀请赛决赛</small></div>
        <div class="ev">夏季邀请赛</div>
        <div class="sc w">3 : 1</div>
        <div class="tag win">冠 军</div>
      </div>
    </div>
  </div>
</section>

<section id="honor">
  <div class="wrap">
    <div class="head">
      <div class="k">TROPHY ROOM</div>
      <h2>荣誉<span>陈列室</span></h2>
      <p>从 2019 年八人组队到今天，我们把这些放在训练室门口，每天进门都看一眼</p>
    </div>
    <div class="tro">
      <div class="tc"><div class="yr">2025</div><div class="md">🏆</div><h3>城市联赛 S11 冠军</h3><p>决赛让二追三，第五局最后一波团灭翻盘，那一晚主场馆全场站着看完。</p><span class="rk">第 1 名</span></div>
      <div class="tc"><div class="yr">2026</div><div class="md">🥇</div><h3>夏季邀请赛 冠军</h3><p>小组赛全胜出线，决赛 3:1 击败破晓，新人阿栈拿下赛事 FMVP。</p><span class="rk">第 1 名</span></div>
      <div class="tc"><div class="yr">2024</div><div class="md">🥈</div><h3>城市联赛 S9 亚军</h3><p>队史第一次进决赛，虽然输了，但那一年我们才知道自己能走多远。</p><span class="rk">第 2 名</span></div>
      <div class="tc"><div class="yr">2024</div><div class="md">🥈</div><h3>全国城市对抗赛 亚军</h3><p>作为最年轻的参赛队打进决赛，被誉为当年最大黑马。</p><span class="rk">第 2 名</span></div>
      <div class="tc"><div class="yr">2023</div><div class="md">🥉</div><h3>春季公开赛 季军</h3><p>队伍重组后的第一个奖项，也是清野接任队长的第一个赛季。</p><span class="rk">第 3 名</span></div>
      <div class="tc"><div class="yr">2026</div><div class="md">⭐</div><h3>最佳青训体系奖</h3><p>三名青训选手在两年内进入一线队，联盟评选的年度组织奖项。</p><span class="rk">年 度 奖</span></div>
    </div>
  </div>
</section>

<section class="alt" id="live">
  <div class="wrap">
    <div class="head">
      <div class="k">LIVE STREAM</div>
      <h2>训练室<span>直播间</span></h2>
      <p>每天 14:00–18:00 训练赛直播，20:00–23:00 选手个人排位，弹幕点歌与战术提问随便发</p>
    </div>
    <div class="stream">
      <div class="screen">
        <span class="on">● LIVE</span>
        <div class="play">▶</div>
        <span class="lbl">霜刻 · 中路排位第一视角 · 12,483 人正在观看</span>
      </div>
      <div class="chat">
        <h4>弹 幕 区</h4>
        <div class="msg"><b class="n1">追焰三年</b><span>这波绕后太阴了哈哈哈</span></div>
        <div class="msg"><b class="n2">阿栈老婆</b><span>下播前来一局双排好吗</span></div>
        <div class="msg"><b class="n3">路人甲</b><span>半决赛门票还有吗？会员在哪买</span></div>
        <div class="msg"><b class="n4">战术分析菌</b><span>刚那波换线处理得很干净，说明日常有练</span></div>
        <div class="msg"><b class="n1">木鸮的眼</b><span>辅助视野打得真好，学到了</span></div>
        <div class="msg"><b class="n2">路过的猫</b><span>周六主场见！横幅已做好</span></div>
        <div class="msg"><b class="n3">新人报道</b><span>青训要什么段位才能报名啊</span></div>
        <div class="inp">
          <input type="text" placeholder="说点什么…（演示，不会真发送）">
          <button onclick="alert('演示页面，弹幕未真实发送')">发送</button>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="rec">
  <div class="wrap">
    <div class="rec">
      <div>
        <div class="k" style="font-size:11.5px;letter-spacing:5px;color:var(--mag);font-weight:900">RECRUITMENT</div>
        <h2>青训招募<br>常年开放</h2>
        <p>我们更在意你在逆风局里的判断，而不只是段位数字。通过初筛后可进基地试训两周，食宿全包。</p>
        <ul class="rq">
          <li>年龄 16–22 周岁，需监护人同意（未成年）</li>
          <li>主要位置段位达到本赛区前 500</li>
          <li>能接受每日 8 小时结构化训练与复盘</li>
          <li>试训期提供食宿、训练设备与心理辅导</li>
          <li>签约选手统一缴纳社保并配备学业辅导</li>
        </ul>
      </div>
      <form class="rf" onsubmit="event.preventDefault();alert('报名已提交，教练组会在 5 个工作日内联系你。');">
        <label>游 戏 ID</label>
        <input type="text" placeholder="请填写主号 ID" required>
        <label>联 系 方 式</label>
        <input type="tel" placeholder="手机号 / 微信" required>
        <label>擅 长 位 置</label>
        <select><option>上路</option><option>中路</option><option>打野</option><option>射手</option><option>辅助</option><option>教练 / 分析师</option></select>
        <label>当 前 段 位</label>
        <input type="text" placeholder="如：大师 480 分">
        <button type="submit">提 交 报 名</button>
      </form>
    </div>
  </div>
</section>

<footer>
  <div class="wrap">
    <div class="fg">
      <div>
        <h5>BLAZE GAMING 炽焰电竞俱乐部</h5>
        <p style="line-height:1.9">2019 年由八名玩家在网吧组队起步，2021 年入驻城市电竞馆成为主场队伍。我们相信一支队伍的上限，取决于最难的那局怎么打。</p>
        <div class="soc"><a href="#">🎮</a><a href="#">📺</a><a href="#">💬</a><a href="#">📷</a></div>
      </div>
      <div><h5>俱 乐 部</h5><ul>
        <li><a href="#roster">选手阵容</a></li>
        <li><a href="#sched">赛程战绩</a></li>
        <li><a href="#honor">荣誉室</a></li>
        <li><a href="#rec">青训招募</a></li>
      </ul></div>
      <div><h5>粉 丝</h5><ul>
        <li><a href="#">会员与门票</a></li>
        <li><a href="#">周边商店</a></li>
        <li><a href="#live">直播日程</a></li>
        <li><a href="#">线下见面会</a></li>
      </ul></div>
      <div><h5>合 作</h5><ul>
        <li>商务：biz@blaze-demo.com</li>
        <li>媒体：pr@blaze-demo.com</li>
        <li>青训：youth@blaze-demo.com</li>
        <li>基地：城市电竞馆 B 座 5F</li>
      </ul></div>
    </div>
    <div class="cp">© 2026 BLAZE GAMING 炽焰电竞俱乐部 · 本页为 HTML 单页示例模板，战队、选手与赛事数据均为虚构演示</div>
  </div>
</footer>

</body>
</html>

原创文章，作者：小蓝IT，如若转载，请注明出处：https://www.xiaolanzy.com/2056.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
0 0

关于作者

小蓝IT的头像

小蓝IT

496 文章
12 评论
13 粉丝
13年建站经验，为用户提供企业、个人、博客网站搭建服务
叁寸 SANCUN 私人订制西装 HTML 单页源码
上一篇 1小时前
小红书图片尺寸大全 包含横竖版图片封面、背景、头像尺寸
下一篇 2023年 8月 21日 下午5:09

相关推荐

发表回复

登录后才能评论
分享本页
返回顶部
icon 首页
icon 网站源码
icon IT资讯
icon 网站客服