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

婚礼邀请函 HTML 单页源码（倒计时 + 回执表单）

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

香槟色婚礼邀请单页，含倒计时、爱情故事、日程流程与在线回执确认。

本源码是一款仪式感十足的婚礼电子邀请函单页模板，整体采用香槟金、米白与淡粉腮红三种暖色调，气质温柔雅致，符合中式婚礼与西式简约婚礼的双重审美。页面以新人姓名、婚期倒计时和邀约语作为首屏视觉中心，让受邀宾客第一时间感受到婚礼的浪漫与庄重。

设计亮点非常丰富：首屏双框线边框与 SVG 爱心分隔线营造复古请柬质感；倒计时模块实时显示距离婚礼的天、时、分、秒；爱情故事采用时间轴方式展现相识、相伴、定居、相守四个节点；时光剪影相册使用六宫格渐变占位展示；信息卡片区、当日流程表与在线回执表单相互独立，区块之间节奏清晰。所有交互均为原生 HTML/CSS/JS，无外部依赖，可直接保存为单文件使用。

适合准新人作为婚礼请柬投放到朋友圈、微信群或公众号，也适合婚庆公司、独立设计师作为客户演示模板。只需替换姓名、婚期、地点与故事内容，即可快速生成专属电子请柬。

婚礼邀请函 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{
  --champagne:#c8a96a;
  --champagne-l:#e3cf9f;
  --blush:#f6ece6;
  --cream:#fdfaf6;
  --ink:#3b332c;
  --ink-soft:#7d7166;
  --line:#e8ddd0;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:"Songti SC","Noto Serif SC",Georgia,"Times New Roman",serif;
  background:var(--cream);
  color:var(--ink);
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:760px;margin:0 auto;background:#fff;box-shadow:0 0 60px rgba(180,150,110,.14)}

/* ---------- 封面 ---------- */
.cover{
  position:relative;
  padding:88px 32px 76px;
  text-align:center;
  background:
    radial-gradient(circle at 20% 10%, rgba(227,207,159,.32), transparent 55%),
    radial-gradient(circle at 82% 88%, rgba(246,236,230,.9), transparent 60%),
    linear-gradient(160deg,#fffdf9,#f8efe4);
  overflow:hidden;
}
.cover::before,.cover::after{
  content:"";position:absolute;border:1px solid var(--champagne-l);
}
.cover::before{inset:18px;opacity:.55}
.cover::after{inset:26px;opacity:.3}
.orn{
  display:flex;align-items:center;justify-content:center;gap:14px;
  margin-bottom:26px;color:var(--champagne);
}
.orn span{display:block;width:56px;height:1px;background:var(--champagne)}
.orn svg{width:22px;height:22px}
.pre{
  font-size:12px;letter-spacing:.55em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:34px;font-family:"Helvetica Neue",Arial,sans-serif;
}
.names{
  font-size:clamp(38px,7.6vw,62px);
  letter-spacing:.06em;line-height:1.35;font-weight:400;
}
.amp{
  display:block;font-size:26px;color:var(--champagne);
  margin:10px 0;font-style:italic;font-family:Georgia,serif;
}
.tagline{
  margin-top:26px;font-size:15px;color:var(--ink-soft);letter-spacing:.14em;
}
.date-badge{
  display:inline-flex;align-items:center;gap:20px;margin-top:40px;
  padding:16px 30px;border-top:1px solid var(--champagne-l);border-bottom:1px solid var(--champagne-l);
}
.date-badge .d{font-size:34px;letter-spacing:.04em}
.date-badge .m{font-size:12px;letter-spacing:.3em;color:var(--ink-soft);
  font-family:"Helvetica Neue",Arial,sans-serif;text-align:center}

/* ---------- 倒计时 ---------- */
.count{
  display:flex;justify-content:center;gap:10px;flex-wrap:wrap;
  padding:38px 24px;background:var(--blush);
}
.cbox{
  min-width:82px;padding:14px 8px;background:#fff;border-radius:4px;
  text-align:center;box-shadow:0 4px 14px rgba(190,160,120,.1);
}
.cbox b{display:block;font-size:30px;color:var(--champagne);font-weight:500}
.cbox i{
  font-style:normal;font-size:11px;letter-spacing:.24em;color:var(--ink-soft);
  font-family:"Helvetica Neue",Arial,sans-serif;
}

/* ---------- 通用区块 ---------- */
section{padding:64px 40px}
.sec-title{
  text-align:center;margin-bottom:44px;
}
.sec-title small{
  display:block;font-size:11px;letter-spacing:.42em;color:var(--champagne);
  text-transform:uppercase;margin-bottom:12px;font-family:"Helvetica Neue",Arial,sans-serif;
}
.sec-title h2{font-size:26px;font-weight:400;letter-spacing:.16em}

/* ---------- 我们的故事 ---------- */
.story{background:#fff}
.timeline{position:relative;max-width:520px;margin:0 auto;padding-left:34px}
.timeline::before{
  content:"";position:absolute;left:7px;top:8px;bottom:8px;width:1px;background:var(--line);
}
.tl-item{position:relative;padding-bottom:30px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{
  content:"";position:absolute;left:-31px;top:9px;width:11px;height:11px;
  border-radius:50%;background:#fff;border:1px solid var(--champagne);
}
.tl-item h4{font-size:16px;font-weight:500;letter-spacing:.06em}
.tl-item .yr{
  font-size:12px;color:var(--champagne);letter-spacing:.2em;
  font-family:"Helvetica Neue",Arial,sans-serif;
}
.tl-item p{font-size:14px;color:var(--ink-soft);margin-top:4px}

/* ---------- 相册 ---------- */
.gallery{background:var(--blush)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:600px;margin:0 auto}
.ph{
  aspect-ratio:3/4;border-radius:3px;position:relative;overflow:hidden;
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:12px;
  font-size:11px;letter-spacing:.2em;color:rgba(255,255,255,.9);
  font-family:"Helvetica Neue",Arial,sans-serif;
}
.ph:nth-child(1){background:linear-gradient(150deg,#d9c3a5,#b99b74)}
.ph:nth-child(2){background:linear-gradient(150deg,#e6d3cb,#c9a99c)}
.ph:nth-child(3){background:linear-gradient(150deg,#cbc4b4,#a29a89)}
.ph:nth-child(4){background:linear-gradient(150deg,#dccbb0,#bfa27c)}
.ph:nth-child(5){background:linear-gradient(150deg,#e9dcd0,#cbb49c)}
.ph:nth-child(6){background:linear-gradient(150deg,#c9baa8,#a3937f)}
.ph.tall{aspect-ratio:3/4}

/* ---------- 婚礼信息 ---------- */
.info{background:#fff}
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:600px;margin:0 auto}
.card{
  border:1px solid var(--line);padding:26px 22px;text-align:center;background:var(--cream);
}
.card .ic{
  width:42px;height:42px;margin:0 auto 14px;border-radius:50%;
  border:1px solid var(--champagne-l);display:flex;align-items:center;justify-content:center;
  color:var(--champagne);
}
.card h4{font-size:15px;letter-spacing:.14em;font-weight:500;margin-bottom:8px}
.card p{font-size:13.5px;color:var(--ink-soft);line-height:1.8}
.card .hl{color:var(--champagne);font-size:15px;display:block;margin-top:4px}

/* ---------- 流程 ---------- */
.flow{background:var(--blush)}
.flow-list{max-width:460px;margin:0 auto}
.flow-row{
  display:flex;align-items:baseline;gap:18px;padding:13px 0;
  border-bottom:1px dashed var(--line);
}
.flow-row:last-child{border-bottom:none}
.flow-row .t{
  font-size:14px;color:var(--champagne);letter-spacing:.08em;min-width:62px;
  font-family:"Helvetica Neue",Arial,sans-serif;
}
.flow-row .n{font-size:14.5px}
.flow-row .n em{font-style:normal;display:block;font-size:12.5px;color:var(--ink-soft)}

/* ---------- RSVP ---------- */
.rsvp{background:#fff;text-align:center}
.rsvp p.lead{
  max-width:460px;margin:0 auto 30px;font-size:14.5px;color:var(--ink-soft);
}
.form{max-width:400px;margin:0 auto;text-align:left}
.field{margin-bottom:16px}
.field label{
  display:block;font-size:11px;letter-spacing:.24em;color:var(--ink-soft);
  margin-bottom:7px;font-family:"Helvetica Neue",Arial,sans-serif;
}
.field input,.field select,.field textarea{
  width:100%;padding:11px 13px;border:1px solid var(--line);background:var(--cream);
  font-family:inherit;font-size:14px;color:var(--ink);border-radius:2px;outline:none;
  transition:border-color .2s;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--champagne)}
.field textarea{resize:vertical;min-height:74px}
.radio-row{display:flex;gap:10px}
.radio-row label{
  flex:1;text-align:center;padding:11px 0;border:1px solid var(--line);cursor:pointer;
  font-size:13.5px;letter-spacing:.1em;background:var(--cream);transition:.2s;
  font-family:inherit;color:var(--ink);margin:0;
}
.radio-row input{display:none}
.radio-row input:checked + span{color:#fff}
.radio-row label:has(input:checked){background:var(--champagne);border-color:var(--champagne);color:#fff}
.btn{
  width:100%;margin-top:8px;padding:14px;background:var(--champagne);color:#fff;
  border:none;font-family:inherit;font-size:14px;letter-spacing:.3em;cursor:pointer;
  transition:background .25s;border-radius:2px;
}
.btn:hover{background:#b3945a}

/* ---------- 页脚 ---------- */
footer{
  padding:46px 30px;text-align:center;background:linear-gradient(160deg,#f8efe4,#fffdf9);
  border-top:1px solid var(--line);
}
footer .bless{font-size:15px;letter-spacing:.18em;color:var(--ink)}
footer .sig{
  margin-top:16px;font-size:13px;color:var(--ink-soft);letter-spacing:.24em;
}
footer .tiny{
  margin-top:22px;font-size:11px;color:#b7ab9d;letter-spacing:.1em;
  font-family:"Helvetica Neue",Arial,sans-serif;
}

@media(max-width:640px){
  section{padding:48px 22px}
  .cover{padding:64px 22px 56px}
  .info-grid{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,1fr)}
  .cbox{min-width:70px}
}
</style>
</head>
<body>
<div class="wrap">

  <!-- 封面 -->
  <header class="cover">
    <div class="orn">
      <span></span>
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2">
        <path d="M12 21s-7-4.6-9-9a5 5 0 0 1 9-3 5 5 0 0 1 9 3c-2 4.4-9 9-9 9z"/>
      </svg>
      <span></span>
    </div>
    <div class="pre">We are getting married</div>
    <h1 class="names">
      沈亦舟
      <em class="amp">&amp;</em>
      林知夏
    </h1>
    <p class="tagline">诚挚邀请您见证我们的幸福时刻</p>
    <div class="date-badge">
      <div class="m">2026<br>OCT</div>
      <div class="d">18</div>
      <div class="m">星期日<br>农历九月初八</div>
    </div>
  </header>

  <!-- 倒计时 -->
  <div class="count">
    <div class="cbox"><b id="dd">88</b><i>DAYS</i></div>
    <div class="cbox"><b id="hh">06</b><i>HOURS</i></div>
    <div class="cbox"><b id="mm">42</b><i>MINUTES</i></div>
    <div class="cbox"><b id="ss">15</b><i>SECONDS</i></div>
  </div>

  <!-- 我们的故事 -->
  <section class="story">
    <div class="sec-title"><small>Our Story</small><h2>我 们 的 故 事</h2></div>
    <div class="timeline">
      <div class="tl-item">
        <div class="yr">2019 · 初 见</div>
        <h4>在城南的旧书店</h4>
        <p>你伸手取下最后一本《人间草木》，而我恰好也伸出了手。</p>
      </div>
      <div class="tl-item">
        <div class="yr">2021 · 相 伴</div>
        <h4>第一次一起看海</h4>
        <p>凌晨四点的海边，我们裹着同一条毯子等日出，你说以后每年都要来。</p>
      </div>
      <div class="tl-item">
        <div class="yr">2024 · 定 居</div>
        <h4>有了自己的小家</h4>
        <p>阳台上种满了绿萝和薄荷，厨房里永远有你煮的红豆汤。</p>
      </div>
      <div class="tl-item">
        <div class="yr">2026 · 相 守</div>
        <h4>愿以余生共此山海</h4>
        <p>这一次，我想把承诺说给所有爱我们的人听。</p>
      </div>
    </div>
  </section>

  <!-- 相册 -->
  <section class="gallery">
    <div class="sec-title"><small>Gallery</small><h2>时 光 剪 影</h2></div>
    <div class="grid">
      <div class="ph">初 见</div>
      <div class="ph">春 日</div>
      <div class="ph">海 边</div>
      <div class="ph">旅 途</div>
      <div class="ph">日 常</div>
      <div class="ph">此 刻</div>
    </div>
  </section>

  <!-- 婚礼信息 -->
  <section class="info">
    <div class="sec-title"><small>Wedding Details</small><h2>婚 礼 信 息</h2></div>
    <div class="info-grid">
      <div class="card">
        <div class="ic">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.3">
            <rect x="3" y="5" width="18" height="16" rx="2"/><path d="M8 3v4M16 3v4M3 10h18"/>
          </svg>
        </div>
        <h4>婚礼时间</h4>
        <p>2026 年 10 月 18 日<span class="hl">星期日 · 中午 12:00</span>请于 11:30 前入场就座</p>
      </div>
      <div class="card">
        <div class="ic">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.3">
            <path d="M12 21s-7-6-7-11a7 7 0 1 1 14 0c0 5-7 11-7 11z"/><circle cx="12" cy="10" r="2.6"/>
          </svg>
        </div>
        <h4>婚礼地点</h4>
        <p>云栖山庄 · 听澜厅<span class="hl">杭州市西湖区云栖路 66 号</span>停车场入口在酒店西侧</p>
      </div>
      <div class="card">
        <div class="ic">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.3">
            <path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.2a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z"/>
          </svg>
        </div>
        <h4>联系我们</h4>
        <p>新郎 沈亦舟<span class="hl">138 0000 1234</span>新娘 林知夏 · 139 0000 5678</p>
      </div>
      <div class="card">
        <div class="ic">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.3">
            <path d="M20 12v7a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-7"/><rect x="2" y="7" width="20" height="5" rx="1"/><path d="M12 21V7M12 7S9.5 3 7.5 4.2 9 7 12 7s6.5-1.5 4.5-2.8S12 7 12 7z"/>
          </svg>
        </div>
        <h4>着装建议</h4>
        <p>半正式 Semi-Formal<span class="hl">香槟 · 米白 · 淡雾蓝</span>请避免纯白与大红色系</p>
      </div>
    </div>
  </section>

  <!-- 当日流程 -->
  <section class="flow">
    <div class="sec-title"><small>Schedule</small><h2>当 日 流 程</h2></div>
    <div class="flow-list">
      <div class="flow-row"><div class="t">11:00</div><div class="n">宾客签到<em>入口领取伴手礼与座位卡</em></div></div>
      <div class="flow-row"><div class="t">11:30</div><div class="n">迎宾茶歇<em>庭院区备有甜点与气泡水</em></div></div>
      <div class="flow-row"><div class="t">12:00</div><div class="n">婚礼仪式<em>听澜厅主厅 · 请提前入座</em></div></div>
      <div class="flow-row"><div class="t">12:40</div><div class="n">午宴开席<em>敬酒环节约 13:30 开始</em></div></div>
      <div class="flow-row"><div class="t">14:30</div><div class="n">合影留念<em>庭院拱门处 · 欢迎自由拍照</em></div></div>
      <div class="flow-row"><div class="t">15:00</div><div class="n">送别宾客<em>门口备有回礼，感谢您的到来</em></div></div>
    </div>
  </section>

  <!-- RSVP -->
  <section class="rsvp">
    <div class="sec-title"><small>R.S.V.P.</small><h2>回 执 确 认</h2></div>
    <p class="lead">为了给每位来宾准备好座位与伴手礼，恳请您在 <b>2026 年 10 月 5 日</b> 前填写下方回执。</p>
    <form class="form" onsubmit="event.preventDefault();alert('感谢您的回执，我们已收到！');">
      <div class="field">
        <label>您的姓名</label>
        <input type="text" placeholder="请输入姓名" required>
      </div>
      <div class="field">
        <label>是否出席</label>
        <div class="radio-row">
          <label><input type="radio" name="attend" checked><span>准 时 出 席</span></label>
          <label><input type="radio" name="attend"><span>抱 歉 缺 席</span></label>
        </div>
      </div>
      <div class="field">
        <label>同行人数</label>
        <select>
          <option>仅本人</option>
          <option>2 人（含伴侣）</option>
          <option>3 人（含儿童）</option>
          <option>4 人及以上</option>
        </select>
      </div>
      <div class="field">
        <label>饮食忌口或其他备注</label>
        <textarea placeholder="如素食、过敏源、需要儿童座椅等"></textarea>
      </div>
      <button class="btn" type="submit">提 交 回 执</button>
    </form>
  </section>

  <footer>
    <p class="bless">愿 我 们 的 喜 悦 ， 有 你 共 享</p>
    <p class="sig">沈 亦 舟 · 林 知 夏  敬 邀</p>
    <p class="tiny">© 2026 Wedding Invitation · 本页面为演示模板</p>
  </footer>

</div>

<script>
  // 倒计时
  var target = new Date("2026-10-18T12:00:00").getTime();
  function pad(n){return n<10?"0"+n:""+n;}
  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("dd").textContent = d;
    document.getElementById("hh").textContent = pad(h);
    document.getElementById("mm").textContent = pad(m);
    document.getElementById("ss").textContent = pad(s);
  }
  tick(); setInterval(tick, 1000);
</script>
</body>
</html>

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

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

关于作者

小蓝IT的头像

小蓝IT

409 文章
12 评论
13 粉丝
13年建站经验，为用户提供企业、个人、博客网站搭建服务
渡舟科技招聘职位列表页 HTML 单页源码
上一篇 17小时前
个人数字名片 HTML 单页源码（vCard 风格）
下一篇 11小时前

相关推荐

发表回复

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