奔跑吧城市公益马拉松报名页 HTML 单页源码

这是一款为城市马拉松、公益跑步赛事或运动筹款活动设计的单页报名模板。整体以温暖的阳光橙与草地绿为主色调，传递出「活力、公益、希望」的情绪，能够降低报名决策门槛，让活动信息更容易被传播。首屏左侧是核心口号与实时倒计时，右侧是一块渐变赛事主视觉，视觉焦点清晰。

页面中段用四宫格数据条呈现参赛名额、全程公里、公益报名费与捐赠比例，再往下是三种赛道（欢乐跑 / 半程 / 全程）的卡片说明；底部设置了深色报名区块，内含姓名、手机、邮箱与赛道选择的表单，并配有两张福利卡片增强参与动机。倒计时由原生 JS 驱动，无需任何第三方库。

非常适合赛事主办方、跑团、公益组织或企业运动嘉年华用作报名召集页。替换赛事日期、路线信息与联系方式后，即可直接部署到官网或公众号落地页。

使用教程

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>奔跑吧城市 · 公益马拉松报名</title>
<style>
  :root{
    --orange:#f97316; --green:#22c55e; --ink:#1a1a1a; --bg:#fffdf7; --muted:#5b5b52;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  body{font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.7}
  a{text-decoration:none;color:inherit}
  .wrap{max-width:1080px;margin:0 auto;padding:0 22px}
  header{display:flex;align-items:center;justify-content:space-between;height:64px}
  .logo{font-weight:800;font-size:20px;color:var(--orange)}
  .btn{padding:12px 26px;border-radius:999px;font-weight:700;display:inline-block;transition:.2s}
  .btn-main{background:var(--orange);color:#fff}
  .btn-main:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(249,115,22,.4)}
  /* 首屏 */
  .hero{background:linear-gradient(135deg,#fff4e6 0%,#e8fbe9 100%);border-radius:0 0 40px 40px;padding:60px 0 70px;position:relative;overflow:hidden}
  .hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
  .kicker{color:var(--green);font-weight:700;letter-spacing:2px;font-size:14px}
  .hero h1{font-size:44px;line-height:1.18;margin:12px 0 16px}
  .hero h1 em{color:var(--orange);font-style:normal}
  .hero p.lead{color:var(--muted);font-size:17px;margin-bottom:26px;max-width:480px}
  .countdown{display:flex;gap:14px;margin-bottom:26px}
  .cd{background:#fff;border:2px solid #ffe0bf;border-radius:14px;padding:14px 0;width:74px;text-align:center;box-shadow:0 8px 20px rgba(249,115,22,.12)}
  .cd b{display:block;font-size:30px;color:var(--orange);font-variant-numeric:tabular-nums}
  .cd small{color:var(--muted);font-size:12px}
  .hero-img{aspect-ratio:4/3;border-radius:22px;background:linear-gradient(135deg,var(--green),var(--orange));position:relative;overflow:hidden;box-shadow:0 30px 60px rgba(34,197,94,.25)}
  .hero-img::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.45),transparent 55%)}
  .hero-img span{position:absolute;left:24px;bottom:22px;color:#fff;font-weight:800;font-size:22px;text-shadow:0 2px 8px rgba(0,0,0,.25)}
  /* 数据条 */
  .facts{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:48px 0}
  .fact{background:#fff;border-radius:16px;padding:22px;text-align:center;border:1px solid #f0e6d6;box-shadow:0 8px 20px rgba(0,0,0,.04)}
  .fact b{display:block;font-size:30px;color:var(--green)}
  .fact small{color:var(--muted)}
  /* 路线 */
  .sec{padding:64px 0}
  .sec h2{font-size:30px;text-align:center;margin-bottom:30px}
  .routes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .route{background:#fff;border:1px solid #f0e6d6;border-radius:16px;padding:24px;transition:.2s}
  .route:hover{transform:translateY(-4px);border-color:var(--orange)}
  .route b{font-size:20px;color:var(--orange)}
  .route .km{float:right;color:var(--green);font-weight:700}
  .route p{color:var(--muted);font-size:14px;margin-top:10px}
  /* 报名表单 */
  .signup{background:#1a1a1a;color:#fff;border-radius:26px;padding:46px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
  .signup h2{color:#fff;text-align:left;margin-bottom:12px;font-size:28px}
  .signup p{color:#c9c9c0;margin-bottom:18px}
  .field{margin-bottom:14px}
  .field input,.field select{width:100%;padding:13px 15px;border-radius:10px;border:1px solid #3a3a3a;background:#262626;color:#fff;font-size:15px}
  .field input:focus,.field select:focus{outline:none;border-color:var(--orange)}
  .signup .btn-main{width:100%;text-align:center;border:none;font-size:16px;cursor:pointer}
  .note{font-size:13px;color:#9a9a90;margin-top:12px}
  footer{padding:34px 0;text-align:center;color:var(--muted);font-size:14px}
  @media(max-width:860px){
    .hero-grid,.signup{grid-template-columns:1fr;gap:28px}
    .routes,.facts{grid-template-columns:repeat(2,1fr)}
    .hero h1{font-size:34px}
  }
  @media(max-width:520px){.routes,.facts{grid-template-columns:1fr}}
</style>
</head>
<body>

<div class="hero">
  <div class="wrap">
    <header>
      <div class="logo">奔跑吧城市</div>
      <a href="#signup" class="btn btn-main">立即报名</a>
    </header>
    <div class="hero-grid">
      <div>
        <div class="kicker">2026 城市公益马拉松</div>
        <h1>万人同跑，<em>为爱出发</em></h1>
        <p class="lead">5 月 17 日，沿城市最美滨江线开跑。每一笔报名费都将捐入乡村儿童运动计划，跑步也能做公益。</p>
        <div class="countdown" id="cd">
          <div class="cd"><b id="d">--</b><small>天</small></div>
          <div class="cd"><b id="h">--</b><small>时</small></div>
          <div class="cd"><b id="m">--</b><small>分</small></div>
          <div class="cd"><b id="s">--</b><small>秒</small></div>
        </div>
        <a href="#signup" class="btn btn-main">锁定参赛名额</a>
      </div>
      <div class="hero-img"><span>滨江 · 42.195km</span></div>
    </div>
  </div>
</div>

<div class="wrap">
  <div class="facts">
    <div class="fact"><b>10,000</b><small>参赛名额</small></div>
    <div class="fact"><b>42.2</b><small>全程公里</small></div>
    <div class="fact"><b>¥80</b><small>公益报名费</small></div>
    <div class="fact"><b>100%</b><small>捐入助学</small></div>
  </div>
</div>

<section class="sec">
  <div class="wrap">
    <h2>选择你的赛道</h2>
    <div class="routes">
      <div class="route"><b class="km">5km</b><b>欢乐跑</b><p>亲子同行、零基础友好，沿江慢跑道轻松完赛。</p></div>
      <div class="route"><b class="km">21km</b><b>半程马拉松</b><p>有一定基础跑者挑战，途经三座城市地标桥梁。</p></div>
      <div class="route"><b class="km">42km</b><b>全程马拉松</b><p>进阶跑者殿堂级路线，终点设专属完赛奖牌墙。</p></div>
    </div>
  </div>
</section>

<section class="wrap" id="signup">
  <div class="signup">
    <div>
      <h2>填写报名信息</h2>
      <p>提交后我们将发送参赛号码布与物资领取通知至你的邮箱，名额先到先得。</p>
      <div class="facts" style="margin:0;grid-template-columns:1fr 1fr">
        <div class="fact" style="background:#262626;border-color:#3a3a3a"><b style="color:var(--orange)">完赛</b><small style="color:#c9c9c0">专属纪念奖牌</small></div>
        <div class="fact" style="background:#262626;border-color:#3a3a3a"><b style="color:var(--orange)">补给</b><small style="color:#c9c9c0">8 个能量站</small></div>
      </div>
    </div>
    <form onsubmit="return false">
      <div class="field"><input type="text" placeholder="真实姓名" required></div>
      <div class="field"><input type="tel" placeholder="手机号码" required></div>
      <div class="field"><input type="email" placeholder="电子邮箱" required></div>
      <div class="field"><select><option>欢乐跑 5km</option><option>半程马拉松 21km</option><option>全程马拉松 42km</option></select></div>
      <button class="btn-main">提交报名 · 公益同行</button>
      <p class="note">提交即表示同意《参赛须知》与公益捐赠说明。</p>
    </form>
  </div>
</section>

<footer>© 2026 奔跑吧城市公益马拉松 · 每一步都为爱向前</footer>

<script>
  var target=new Date("2026-05-17T07:30:00").getTime();
  function tick(){
    var diff=target-Date.now();
    if(diff<0)diff=0;
    var d=Math.floor(diff/86400000),h=Math.floor(diff%86400000/3600000),m=Math.floor(diff%3600000/60000),s=Math.floor(diff%60000/1000);
    document.getElementById("d").textContent=d;
    document.getElementById("h").textContent=("0"+h).slice(-2);
    document.getElementById("m").textContent=("0"+m).slice(-2);
    document.getElementById("s").textContent=("0"+s).slice(-2);
  }
  tick();setInterval(tick,1000);
</script>
</body>
</html>

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