时光美学在线预约系统 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{
  --bg:#fff7ef; --card:#ffffff; --ink:#3a2c23; --sub:#8c7a6b;
  --acc:#ff8a3d; --acc2:#ffb347; --line:#f0e2d4;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"PingFang SC","Microsoft YaHei",sans-serif;color:var(--ink);
  background:linear-gradient(160deg,var(--bg),#ffe9d6);min-height:100vh;padding:28px 16px}
.wrap{max-width:900px;margin:0 auto}
.head{text-align:center;margin-bottom:26px}
.head h1{font-size:28px;margin-bottom:8px}
.head p{color:var(--sub);font-size:14px}
.layout{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.box{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:24px;
  box-shadow:0 12px 30px rgba(255,138,61,.10)}
.box h3{font-size:17px;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.box h3 .ic{width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,var(--acc),var(--acc2));
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px}
.svc{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}
.svc label{display:block;padding:14px;border:1px solid var(--line);border-radius:14px;cursor:pointer;transition:.2s}
.svc label:hover{border-color:var(--acc);background:#fff3e9}
.svc input{display:none}
.svc input:checked + .ttl{color:var(--acc)}
.svc .ttl{font-weight:700;font-size:15px}
.svc .pr{color:var(--sub);font-size:13px;margin-top:4px}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal div{text-align:center;padding:9px 0;font-size:13px;border-radius:10px;color:var(--sub)}
.cal .d{padding:9px 0;border-radius:10px;background:#fff3e9;cursor:pointer;color:var(--ink);font-weight:600}
.cal .d.on{background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff}
.slots{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}
.slot{padding:9px 16px;border:1px solid var(--line);border-radius:999px;font-size:14px;cursor:pointer;background:#fff}
.slot.on{background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff;border-color:transparent}
.field{margin-bottom:14px}
.field label{display:block;font-size:13px;color:var(--sub);margin-bottom:6px}
.field input{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;font-size:14px;outline:none}
.field input:focus{border-color:var(--acc)}
.sum{background:#fff3e9;border-radius:14px;padding:16px;font-size:14px;line-height:1.9;margin:8px 0 16px}
.sum b{color:var(--acc)}
.btn{width:100%;padding:14px;border:none;border-radius:14px;cursor:pointer;font-size:16px;font-weight:800;
  background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff}
.note{text-align:center;color:var(--sub);font-size:12px;margin-top:18px}
@media(max-width:720px){.layout{grid-template-columns:1fr}.svc{grid-template-columns:1fr}}
</style>
</head>
<body>
<div class="wrap">
  <div class="head">
    <h1>时光美学 · 在线预约</h1>
    <p>选服务、挑时间、留信息，30 秒完成预约</p>
  </div>

  <div class="layout">
    <div class="box">
      <h3><span class="ic">✦</span>选择服务</h3>
      <div class="svc">
        <label><input type="radio" name="svc" checked><span class="ttl">精致妆容</span><div class="pr">¥299 · 60min</div></label>
        <label><input type="radio" name="svc"><span class="ttl">护肤管理</span><div class="pr">¥459 · 90min</div></label>
        <label><input type="radio" name="svc"><span class="ttl">发型设计</span><div class="pr">¥359 · 75min</div></label>
        <label><input type="radio" name="svc"><span class="ttl">美甲艺术</span><div class="pr">¥199 · 45min</div></label>
      </div>
      <h3><span class="ic">▦</span>选择日期</h3>
      <div class="cal">
        <div>一</div><div>二</div><div>三</div><div>四</div><div>五</div><div>六</div><div>日</div>
        <div class="d">10</div><div class="d on">11</div><div class="d">12</div><div class="d">13</div>
        <div class="d">14</div><div class="d">15</div><div class="d">16</div>
      </div>
      <h3 style="margin-top:18px"><span class="ic">⏱</span>选择时段</h3>
      <div class="slots">
        <div class="slot">10:00</div><div class="slot on">11:30</div><div class="slot">13:00</div>
        <div class="slot">14:30</div><div class="slot">16:00</div><div class="slot">17:30</div>
      </div>
    </div>

    <div class="box">
      <h3><span class="ic">✎</span>填写信息</h3>
      <div class="field"><label>称呼</label><input placeholder="如何称呼您"></div>
      <div class="field"><label>手机号</label><input placeholder="用于接收入店提醒"></div>
      <div class="field"><label>备注（可选）</label><input placeholder="如过敏史、偏好风格"></div>
      <div class="sum">
        已选：<b>精致妆容</b><br>
        时间：<b>8月11日 11:30</b><br>
        预估：<b>¥299</b>
      </div>
      <button class="btn">确认预约</button>
      <p class="note">提交后专属顾问将在 15 分钟内电话确认</p>
    </div>
  </div>
</div>
</body>
</html>

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