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

沉浸式剧本杀「迷雾档案馆」HTML 单页源码（深色紫黑 + 琥珀金 + 血红，含剧本列表 + 实景场馆 + 预约流程 + 价格套餐）

小蓝IT • • 网站源码 • 阅读 9

一间主打硬核推理与情感沉浸的剧本杀门店详情页，含剧本列表、实景场馆、预约流程、价格套餐与玩前须知。

本源码是一款为沉浸式剧本杀门店、密室逃脱场馆、桌游吧打造的「剧本展示 + 在线拼场 + 套餐预约」单页模板，采用深色紫黑 + 琥珀金 + 血红主调，视觉上神秘、悬疑，与推理、恐怖、情感沉浸类题材高度契合。首屏用超大剧本名 + 题材标签 + 推荐人数 + 时长直接给出决策信息，右侧「本周热门」把当下最受欢迎的剧本摆在眼前，避免玩家从几十个本里挑花眼。

页面内容按玩家拼场路径设计：六大剧本支持题材、人数、时长多维筛选；五间实景场馆用色块 + 特色描述营造真实空间感；预约流程四步从选本 → 拼场 → 到店 → 复盘一气呵成；三档套餐（体验局 / 标准局 / 沉浸局）按人均定价并写清包含内容；最后的「玩前须知」用问答形式覆盖迟到、未成年人、过敏、是否可拍照等真实疑问。

适合剧本杀门店、密室逃脱、桌游吧、剧本作者工作室作为官网或活动报名落地页。替换店名、剧本、场地图片、价格与门店地址后即可上线，也可作为文娱线下业态的获客页面模板。

沉浸式剧本杀「迷雾档案馆」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.0">
<title>迷雾档案馆 - 沉浸式剧本杀主题店</title>
<style>
  :root{
    --void:#0d0a14;
    --void-2:#161020;
    --panel:#1e1730;
    --plum:#4a2d6b;
    --gold:#d4a83d;
    --amber:#e0a83d;
    --blood:#a32d3c;
    --text:#e8e2f2;
    --muted:#9a91b0;
    --line:rgba(255,255,255,.09);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  body{font-family:"PingFang SC","Microsoft YaHei",serif;background:var(--void);color:var(--text);line-height:1.8;overflow-x:hidden}
  .wrap{max-width:1120px;margin:0 auto;padding:0 22px}
  a{text-decoration:none}

  header{position:sticky;top:0;z-index:60;background:rgba(13,10,20,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
  .nav{display:flex;align-items:center;justify-content:space-between;height:74px}
  .lg{font-size:21px;font-weight:700;letter-spacing:4px;color:var(--amber)}
  .lg small{display:block;font-size:9.5px;letter-spacing:3px;color:var(--muted);font-weight:400;margin-top:-3px}
  .nav ul{display:flex;gap:30px;list-style:none;font-size:14.5px;letter-spacing:1px}
  .nav ul a{color:var(--muted);transition:.25s}
  .nav ul a:hover{color:var(--amber)}
  .bk{border:1px solid var(--amber);color:var(--amber);padding:9px 22px;font-size:14px;letter-spacing:2px;transition:.25s}
  .bk:hover{background:var(--amber);color:var(--void)}

  /* hero */
  .hero{padding:90px 0 96px;text-align:center;position:relative;overflow:hidden}
  .hero::before{content:"";position:absolute;inset:0;background:
    radial-gradient(ellipse 700px 380px at 50% 0%,rgba(74,45,107,.5),transparent 70%),
    radial-gradient(ellipse 460px 300px at 15% 80%,rgba(163,45,60,.22),transparent 70%)}
  .hero::after{content:"";position:absolute;inset:0;background-image:
    repeating-linear-gradient(0deg,transparent 0 2px,rgba(255,255,255,.012) 2px 4px)}
  .hero-in{position:relative;z-index:3}
  .seal{display:inline-block;border:1px solid var(--amber);color:var(--amber);font-size:12px;letter-spacing:5px;padding:7px 22px;margin-bottom:28px}
  .hero h1{font-size:58px;font-weight:700;letter-spacing:12px;margin-bottom:18px;text-shadow:0 0 40px rgba(212,168,61,.28)}
  .hero .sub{color:var(--muted);font-size:16px;letter-spacing:3px;margin-bottom:14px}
  .hero .desc{color:var(--muted);max-width:560px;margin:0 auto 38px;font-size:15.5px;line-height:2.1}
  .hbtn{display:flex;gap:15px;justify-content:center;flex-wrap:wrap;margin-bottom:54px}
  .btn{padding:15px 36px;font-size:15.5px;letter-spacing:3px;display:inline-block;transition:.25s}
  .b1{background:linear-gradient(100deg,var(--blood),#7a1f2c);color:#fff;box-shadow:0 0 30px rgba(163,45,60,.35)}
  .b1:hover{box-shadow:0 0 44px rgba(163,45,60,.55);transform:translateY(-2px)}
  .b2{border:1px solid rgba(255,255,255,.28);color:var(--text)}
  .b2:hover{border-color:var(--amber);color:var(--amber)}
  .hstat{display:flex;gap:0;justify-content:center;flex-wrap:wrap;border:1px solid var(--line)}
  .hstat div{padding:20px 40px}
  .hstat div+div{border-left:1px solid var(--line)}
  .hstat b{display:block;font-size:26px;color:var(--amber);font-weight:700;letter-spacing:1px}
  .hstat span{font-size:12px;color:var(--muted);letter-spacing:2px}

  section{padding:78px 0}
  .st{text-align:center;margin-bottom:48px}
  .st .k{color:var(--blood);letter-spacing:6px;font-size:12px;margin-bottom:12px}
  .st h2{font-size:32px;font-weight:700;letter-spacing:6px}
  .st p{color:var(--muted);font-size:15px;margin-top:12px;letter-spacing:1px}

  /* 剧本列表 */
  .scripts{background:var(--void-2)}
  .filter{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:34px}
  .fp{border:1px solid var(--line);padding:8px 22px;font-size:13.5px;color:var(--muted);letter-spacing:2px;cursor:pointer;transition:.22s}
  .fp:hover{border-color:var(--amber);color:var(--amber)}
  .fp.on{background:var(--plum);border-color:var(--plum);color:#fff}
  .sc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .sc{background:var(--panel);border:1px solid var(--line);overflow:hidden;transition:.3s;display:flex;flex-direction:column}
  .sc:hover{border-color:var(--plum);transform:translateY(-6px);box-shadow:0 18px 40px rgba(74,45,107,.3)}
  .sc .po{height:180px;position:relative;display:grid;place-items:center;font-size:52px}
  .p1{background:linear-gradient(150deg,#3a1f2e,#6b2438)}
  .p2{background:linear-gradient(150deg,#1f2b3f,#2f4c6b)}
  .p3{background:linear-gradient(150deg,#2d1f3f,#4a2d6b)}
  .p4{background:linear-gradient(150deg,#3f2f1c,#6b5124)}
  .p5{background:linear-gradient(150deg,#1c2f28,#2a4a3c)}
  .p6{background:linear-gradient(150deg,#331c2b,#5c2447)}
  .sc .tp{position:absolute;top:12px;left:12px;background:rgba(0,0,0,.6);color:var(--amber);font-size:11px;padding:4px 12px;letter-spacing:2px;border:1px solid rgba(212,168,61,.4)}
  .sc .hot{position:absolute;top:12px;right:12px;background:var(--blood);color:#fff;font-size:11px;padding:4px 11px;letter-spacing:1px}
  .sc .bd{padding:22px 22px 24px;flex:1;display:flex;flex-direction:column}
  .sc h3{font-size:20px;font-weight:700;letter-spacing:2px;margin-bottom:9px}
  .sc .tags{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:13px}
  .sc .tags span{font-size:11.5px;border:1px solid var(--line);padding:3px 10px;color:var(--muted);letter-spacing:1px}
  .sc .in{font-size:13.6px;color:var(--muted);line-height:1.9;flex:1;margin-bottom:16px}
  .sc .ft{display:flex;justify-content:space-between;align-items:center;padding-top:14px;border-top:1px solid var(--line);font-size:13px}
  .sc .ft .dif{color:var(--amber);letter-spacing:1px}
  .sc .ft .pri{color:var(--text);font-weight:700;font-size:16px}
  .sc .ft .pri small{font-size:12px;color:var(--muted);font-weight:400}

  /* 场景 */
  .rm-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
  .rm{border:1px solid var(--line);overflow:hidden;position:relative}
  .rm .im{height:190px;display:grid;place-items:center;font-size:42px;position:relative}
  .rm .im::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(13,10,20,.85))}
  .r1{background:linear-gradient(150deg,#3f2438,#1f1224)}
  .r2{background:linear-gradient(150deg,#243a4a,#0f1a24)}
  .r3{background:linear-gradient(150deg,#4a3a1f,#241c0f)}
  .r4{background:linear-gradient(150deg,#2d2447,#150f24)}
  .rm .cap{padding:16px 18px 20px}
  .rm h4{font-size:16.5px;letter-spacing:2px;margin-bottom:5px}
  .rm span{font-size:12.5px;color:var(--muted)}

  /* 预约流程 */
  .flow{background:var(--void-2)}
  .fl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
  .fl{border:1px solid var(--line);padding:30px 24px;position:relative;background:var(--panel)}
  .fl .n{position:absolute;right:18px;top:12px;font-size:44px;color:rgba(255,255,255,.05);font-weight:700}
  .fl h4{font-size:17.5px;letter-spacing:2px;margin-bottom:10px;color:var(--amber)}
  .fl p{font-size:13.8px;color:var(--muted);line-height:1.9}

  /* 价格 */
  .pk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .pk{background:var(--panel);border:1px solid var(--line);padding:34px 30px;position:relative;display:flex;flex-direction:column}
  .pk.hl{border-color:var(--amber);box-shadow:0 0 34px rgba(212,168,61,.13)}
  .pk.hl::before{content:"周末推荐";position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--amber);color:var(--void);font-size:11.5px;padding:4px 18px;letter-spacing:2px;font-weight:700;white-space:nowrap}
  .pk h3{font-size:20px;letter-spacing:3px;margin-bottom:6px}
  .pk .tt{font-size:12.5px;color:var(--muted);margin-bottom:18px}
  .pk .pv{font-size:40px;color:var(--amber);font-weight:700;line-height:1;margin-bottom:6px}
  .pk .pv small{font-size:15px;color:var(--muted);font-weight:400}
  .pk .od{color:#6f6684;text-decoration:line-through;font-size:13.5px;margin-bottom:22px}
  .pk ul{list-style:none;font-size:14px;color:var(--muted);line-height:2.2;flex:1;margin-bottom:24px}
  .pk ul li::before{content:"◇　";color:var(--plum)}
  .pk a{display:block;text-align:center;padding:13px;font-size:15px;letter-spacing:3px;border:1px solid rgba(255,255,255,.22);color:var(--text);transition:.25s}
  .pk a:hover{border-color:var(--amber);color:var(--amber)}
  .pk.hl a{background:linear-gradient(100deg,var(--blood),#7a1f2c);border-color:transparent;color:#fff}

  /* 须知 */
  .nt{max-width:840px;margin:0 auto}
  .ni{background:var(--panel);border-left:2px solid var(--plum);padding:20px 26px;margin-bottom:12px}
  .ni b{display:block;font-size:16px;color:var(--amber);margin-bottom:6px;letter-spacing:1px}
  .ni p{font-size:14.2px;color:var(--muted);line-height:1.9}

  footer{border-top:1px solid var(--line);padding:50px 0 26px;font-size:14px;color:var(--muted);background:var(--void-2)}
  .f3{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:38px;margin-bottom:32px}
  footer h5{color:var(--amber);font-size:16px;letter-spacing:3px;margin-bottom:15px;font-weight:700}
  footer ul{list-style:none;line-height:2.2}
  .cp{border-top:1px solid var(--line);padding-top:20px;text-align:center;font-size:12.5px;color:#6f6684;letter-spacing:1px}

  @media(max-width:940px){
    .nav ul{display:none}
    .hero h1{font-size:32px;letter-spacing:6px}
    .sc-grid,.fl-grid,.pk-grid,.f3{grid-template-columns:1fr}
    .rm-grid{grid-template-columns:repeat(2,1fr)}
    .hstat div{padding:16px 24px;flex:1 1 45%}
    section{padding:54px 0}
  }
</style>
</head>
<body>

<header>
  <div class="wrap nav">
    <div class="lg">迷雾档案馆<small>MIST ARCHIVE</small></div>
    <ul>
      <li><a href="#sc">在售剧本</a></li>
      <li><a href="#rm">实景场馆</a></li>
      <li><a href="#fl">预约流程</a></li>
      <li><a href="#pk">价格套餐</a></li>
    </ul>
    <a class="bk" href="#pk">立即订场</a>
  </div>
</header>

<div class="hero">
  <div class="wrap hero-in">
    <div class="seal">EST. 2021　│　城中最难的三个本都在这里</div>
    <h1>迷 雾 档 案 馆</h1>
    <div class="sub">沉 浸 式 实 景 剧 本 推 理</div>
    <p class="desc">六间实景还原房、42 部在售剧本、七位全职 DM。我们不催场、不剧透、不敷衍推理线，只想让你在四个小时里真的相信另一个身份。</p>
    <div class="hbtn">
      <a class="btn b1" href="#sc">挑一个本</a>
      <a class="btn b2" href="#rm">看看场馆</a>
    </div>
    <div class="hstat">
      <div><b>42</b><span>在 售 剧 本</span></div>
      <div><b>6</b><span>实 景 房 间</span></div>
      <div><b>7</b><span>全 职 D M</span></div>
      <div><b>4.9</b><span>玩 家 评 分</span></div>
    </div>
  </div>
</div>

<section class="scripts" id="sc">
  <div class="wrap">
    <div class="st">
      <div class="k">SCRIPTS</div>
      <h2>在 售 剧 本</h2>
      <p>按类型筛选，也可以直接问 DM「今天几个人，想玩什么感觉的」</p>
    </div>
    <div class="filter">
      <div class="fp on">全部</div>
      <div class="fp">硬核推理</div>
      <div class="fp">情感沉浸</div>
      <div class="fp">恐怖惊悚</div>
      <div class="fp">欢乐撕逼</div>
      <div class="fp">新手友好</div>
    </div>
    <div class="sc-grid">
      <div class="sc">
        <div class="po p1"><div class="tp">硬核推理</div><div class="hot">TOP 1</div>🔍</div>
        <div class="bd">
          <h3>雾港十三夜</h3>
          <div class="tags"><span>6 人</span><span>5.5 小时</span><span>民国</span><span>还原</span></div>
          <div class="in">十三个人被困在雾港旅馆，每晚死一个。全店最难的本，需要全程记笔记，不建议第一次玩就上。</div>
          <div class="ft"><span class="dif">难度 ★★★★★</span><span class="pri">￥168<small>/人</small></span></div>
        </div>
      </div>
      <div class="sc">
        <div class="po p2"><div class="tp">情感沉浸</div>🕯️</div>
        <div class="bd">
          <h3>写给八月的信</h3>
          <div class="tags"><span>5 人</span><span>4 小时</span><span>现代</span><span>治愈</span></div>
          <div class="in">没有凶手，只有五封没寄出去的信。适合和熟人一起玩，DM 会提醒你带纸巾，这不是玩笑。</div>
          <div class="ft"><span class="dif">难度 ★★☆☆☆</span><span class="pri">￥138<small>/人</small></span></div>
        </div>
      </div>
      <div class="sc">
        <div class="po p3"><div class="tp">恐怖惊悚</div><div class="hot">新本</div>👁️</div>
        <div class="bd">
          <h3>第七次敲门</h3>
          <div class="tags"><span>6 人</span><span>4.5 小时</span><span>灵异</span><span>NPC</span></div>
          <div class="in">全程关灯，两位真人 NPC 全程参与。心脏不好、有幽闭恐惧的朋友请谨慎选择，退场无需理由。</div>
          <div class="ft"><span class="dif">难度 ★★★☆☆</span><span class="pri">￥188<small>/人</small></span></div>
        </div>
      </div>
      <div class="sc">
        <div class="po p4"><div class="tp">欢乐撕逼</div>🎭</div>
        <div class="bd">
          <h3>富豪的第八份遗嘱</h3>
          <div class="tags"><span>7 人</span><span>3.5 小时</span><span>喜剧</span><span>阵营</span></div>
          <div class="in">七个亲戚抢一份遗产，谁也不是好人。全程笑点密集，适合团建与不熟的人破冰，玩完基本就熟了。</div>
          <div class="ft"><span class="dif">难度 ★★☆☆☆</span><span class="pri">￥118<small>/人</small></span></div>
        </div>
      </div>
      <div class="sc">
        <div class="po p5"><div class="tp">新手友好</div>🧭</div>
        <div class="bd">
          <h3>山中旧事</h3>
          <div class="tags"><span>5 人</span><span>3 小时</span><span>古风</span><span>入门</span></div>
          <div class="in">线索清晰、节奏平缓，DM 会在每一轮结束后带一次复盘。第一次玩剧本杀就选这个，不会一头雾水。</div>
          <div class="ft"><span class="dif">难度 ★☆☆☆☆</span><span class="pri">￥98<small>/人</small></span></div>
        </div>
      </div>
      <div class="sc">
        <div class="po p6"><div class="tp">硬核推理</div>🗝️</div>
        <div class="bd">
          <h3>镜屋回声</h3>
          <div class="tags"><span>6 人</span><span>5 小时</span><span>科幻</span><span>机制</span></div>
          <div class="in">带机制的推理本，需要现场解密与实物道具配合。逻辑链完整，复盘时那种「原来如此」的感觉很足。</div>
          <div class="ft"><span class="dif">难度 ★★★★☆</span><span class="pri">￥158<small>/人</small></span></div>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="rm">
  <div class="wrap">
    <div class="st">
      <div class="k">OUR ROOMS</div>
      <h2>实 景 场 馆</h2>
      <p>六间独立主题房，每间都按剧本时代重新做过软装</p>
    </div>
    <div class="rm-grid">
      <div class="rm"><div class="im r1">🏮</div><div class="cap"><h4>民国旅馆</h4><span>可容 8 人　│　雾港十三夜专用</span></div></div>
      <div class="rm"><div class="im r2">🚪</div><div class="cap"><h4>废弃医院</h4><span>可容 6 人　│　恐怖本专用房</span></div></div>
      <div class="rm"><div class="im r3">📜</div><div class="cap"><h4>古宅书房</h4><span>可容 6 人　│　古风与推理通用</span></div></div>
      <div class="rm"><div class="im r4">🛋️</div><div class="cap"><h4>现代客厅</h4><span>可容 8 人　│　情感与喜剧本</span></div></div>
    </div>
  </div>
</section>

<section class="flow" id="fl">
  <div class="wrap">
    <div class="st">
      <div class="k">HOW TO BOOK</div>
      <h2>预 约 流 程</h2>
      <p>四步就能开局，不确定选什么本可以直接微信问 DM</p>
    </div>
    <div class="fl-grid">
      <div class="fl"><div class="n">01</div><h4>选本组队</h4><p>确定人数与偏好类型，人不够可以约拼场，DM 会帮你匹配到合适的车队。</p></div>
      <div class="fl"><div class="n">02</div><h4>在线订场</h4><p>选择日期与时段，支付定金锁定房间。开场前 24 小时可免费改期一次。</p></div>
      <div class="fl"><div class="n">03</div><h4>到店换装</h4><p>提前 15 分钟到店，领取角色服装与剧本，DM 讲解规则后正式进入故事。</p></div>
      <div class="fl"><div class="n">04</div><h4>复盘留念</h4><p>结束后 DM 带完整复盘，讲清每条线的来龙去脉，最后拍一张全员合照。</p></div>
    </div>
  </div>
</section>

<section id="pk">
  <div class="wrap">
    <div class="st">
      <div class="k">PRICING</div>
      <h2>价 格 套 餐</h2>
      <p>学生证到店可享 8 折，生日当天本人免单</p>
    </div>
    <div class="pk-grid">
      <div class="pk">
        <h3>工 作 日 场</h3>
        <div class="tt">周一至周四　全时段</div>
        <div class="pv">￥98<small> 起/人</small></div>
        <div class="od">周末价 ￥138 起</div>
        <ul>
          <li>全部在售剧本可选</li>
          <li>含角色服装与道具</li>
          <li>无限量茶水与小食</li>
          <li>专职 DM 全程带本</li>
          <li>结束后完整复盘</li>
        </ul>
        <a href="#">预约工作日</a>
      </div>
      <div class="pk hl">
        <h3>周 末 全 场</h3>
        <div class="tt">周五至周日　含节假日</div>
        <div class="pv">￥138<small> 起/人</small></div>
        <div class="od">原价 ￥168 起</div>
        <ul>
          <li>全部在售剧本可选</li>
          <li>含角色服装与道具</li>
          <li>无限量茶水与小食</li>
          <li>资深 DM 优先排班</li>
          <li>赠送角色定妆照一张</li>
        </ul>
        <a href="#">预约周末场</a>
      </div>
      <div class="pk">
        <h3>包 场 团 建</h3>
        <div class="tt">6 人以上　可定制主题</div>
        <div class="pv">￥888<small> 起/场</small></div>
        <div class="od">另有企业开票服务</div>
        <ul>
          <li>整店包场不与他人拼团</li>
          <li>可定制企业专属剧本</li>
          <li>含定制餐饮与生日布置</li>
          <li>全程跟拍与合照相册</li>
          <li>支持对公转账与开票</li>
        </ul>
        <a href="#">咨询包场</a>
      </div>
    </div>
  </div>
</section>

<section style="background:var(--void-2)">
  <div class="wrap">
    <div class="st">
      <div class="k">NOTICE</div>
      <h2>玩 前 须 知</h2>
    </div>
    <div class="nt">
      <div class="ni"><b>迟到与改期</b><p>请提前 15 分钟到店。迟到超过 30 分钟视为自动放弃，定金不退。开场前 24 小时以上可免费改期一次，24 小时内改期扣除 30% 定金。</p></div>
      <div class="ni"><b>年龄与身体限制</b><p>恐怖类剧本限 16 岁以上，孕妇、心脏病、高血压及幽闭恐惧症患者请勿选择。其他类型剧本建议 12 岁以上参与，未成年人需监护人陪同。</p></div>
      <div class="ni"><b>剧透与拍照</b><p>请勿在社交平台剧透关键线索与凶手身份。房间内可自由拍照，但恐怖房与 NPC 演出期间禁止开闪光灯，以免影响其他玩家沉浸感。</p></div>
      <div class="ni"><b>物品与安全</b><p>贵重物品请存放在前台储物柜。房间内所有道具均可触碰翻找，但请勿暴力拆卸，人为损坏需照价赔偿。任何时候感到不适都可以随时喊停。</p></div>
    </div>
  </div>
</section>

<footer>
  <div class="wrap">
    <div class="f3">
      <div>
        <h5>迷 雾 档 案 馆</h5>
        <p>地址：城中区解放路 88 号创意园 B 栋 3 层<br>营业时间：13:00 – 次日 02:00（全年无休）<br>预约微信：mist_archive　│　电话：0571-8877-2199</p>
      </div>
      <div><h5>快速导航</h5><ul><li>在售剧本</li><li>实景场馆</li><li>价格套餐</li><li>玩前须知</li></ul></div>
      <div><h5>加入我们</h5><ul><li>DM 招募</li><li>剧本合作</li><li>企业团建</li><li>玩家社群</li></ul></div>
    </div>
    <div class="cp">© 2026 迷雾档案馆　本页为 HTML 模板演示，店名、剧本与价格信息均为虚构</div>
  </div>
</footer>

</body>
</html>

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

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

关于作者

小蓝IT的头像

小蓝IT

440 文章
12 评论
13 粉丝
13年建站经验，为用户提供企业、个人、博客网站搭建服务
独立书店「纸间书屋」HTML 单页源码（米黄纸张 + 苔绿 + 铁锈橙，含荐读书架 + 分类 + 活动日历 + 会员 + 到店地图）
上一篇 5小时前
山谷星空露营地「野望营地」HTML 单页源码（大地棕 + 卡其 + 日落橙，含山形剪影 hero + 营位选择 + 设施装备 + 七日天气）
下一篇 5小时前

相关推荐

发表回复

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