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

牙科诊所预约 HTML 单页源码（薄荷绿 + 天蓝，含时段选择 + 价目表 + 医生团队）

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

薄荷绿与天蓝配色的牙科诊所预约页，含可点击时段、6 项诊疗价目与医生介绍。

本源码是一款为口腔门诊、牙科诊所打造的「在线预约 + 诊疗展示」单页模板，采用薄荷绿 + 天蓝主色，搭配白色卡片与圆角设计，视觉上干净、治愈，能缓解看牙时的紧张感。首屏直接展示「初诊检查 0 元」与「今日剩余号源 6 个」的关键转化信息，配合右侧预约卡实现即时留资。

预约交互做得相当完整：可点击选择具体时段、状态切换（可选/已选/已满）通过不同样式与 hover 效果呈现；诊疗价目区用六宫格卡片 + 图标色块区分项目，每项标明原价删除线与限时优惠价；医生团队采用四种渐变色头像展示四位主诊医生专长；就诊流程从预约到复查分 5 步，全部在浅色卡片上完成展示。

适合口腔门诊、牙科诊所、医美机构、宠物医院等需要在线预约的医疗机构。替换医院名称、价目、医生介绍与时段后即可上线，也可作为诊所官网改版或新店开张的预热页面。

牙科诊所预约 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{
    --mint:#2fbfa5;
    --mint-d:#1e9c85;
    --mint-l:#e6f8f4;
    --sky:#3f8ef7;
    --sky-l:#eaf2ff;
    --ink:#1d2b33;
    --gray:#6c7d87;
    --bg:#f4fbfa;
    --line:#e0efec;
    --white:#fff;
    --radius:18px;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  body{font-family:"PingFang SC","Microsoft YaHei","Helvetica Neue",sans-serif;background:var(--bg);color:var(--ink);line-height:1.75;-webkit-font-smoothing:antialiased}
  .wrap{max-width:1120px;margin:0 auto;padding:0 22px}
  a{text-decoration:none}

  header{background:rgba(255,255,255,.92);backdrop-filter:blur(10px);position:sticky;top:0;z-index:30;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:10px;font-weight:800;font-size:20px;color:var(--ink)}
  .brand .tooth{width:36px;height:36px;border-radius:12px;background:linear-gradient(135deg,var(--mint),var(--sky));display:grid;place-items:center;color:#fff;font-size:18px}
  .nav ul{display:flex;gap:28px;list-style:none;font-size:15px}
  .nav ul a{color:var(--gray);transition:.2s}
  .nav ul a:hover{color:var(--mint)}
  .book-btn{background:var(--mint);color:#fff;padding:10px 22px;border-radius:999px;font-size:14.5px;font-weight:600;box-shadow:0 6px 16px rgba(47,191,165,.32)}

  /* hero */
  .hero{padding:64px 0 72px;position:relative;overflow:hidden}
  .hero::before{content:"";position:absolute;width:520px;height:520px;background:radial-gradient(circle,rgba(47,191,165,.16),transparent 65%);top:-160px;right:-120px;border-radius:50%}
  .hero::after{content:"";position:absolute;width:380px;height:380px;background:radial-gradient(circle,rgba(63,142,247,.13),transparent 65%);bottom:-180px;left:-100px;border-radius:50%}
  .hero-grid{display:grid;grid-template-columns:1fr .92fr;gap:52px;align-items:center;position:relative;z-index:2}
  .pill{display:inline-flex;align-items:center;gap:8px;background:var(--mint-l);color:var(--mint-d);padding:7px 16px;border-radius:999px;font-size:13.5px;font-weight:600;margin-bottom:20px}
  .pill b{background:var(--mint);color:#fff;border-radius:999px;padding:1px 8px;font-size:12px}
  h1{font-size:44px;line-height:1.28;font-weight:800;letter-spacing:-.5px;margin-bottom:18px}
  h1 span{background:linear-gradient(120deg,var(--mint),var(--sky));-webkit-background-clip:text;background-clip:text;color:transparent}
  .lead{color:var(--gray);font-size:16.5px;max-width:490px;margin-bottom:28px}
  .trust{display:flex;gap:30px;flex-wrap:wrap;margin-bottom:32px}
  .trust div b{display:block;font-size:27px;color:var(--mint-d);font-weight:800;line-height:1.3}
  .trust div span{font-size:13.5px;color:var(--gray)}
  .cta-row{display:flex;gap:14px;flex-wrap:wrap}
  .btn{padding:14px 30px;border-radius:999px;font-size:15.5px;font-weight:600;display:inline-block;transition:.25s}
  .btn-p{background:linear-gradient(120deg,var(--mint),var(--mint-d));color:#fff;box-shadow:0 10px 24px rgba(47,191,165,.3)}
  .btn-p:hover{transform:translateY(-2px)}
  .btn-o{background:#fff;color:var(--mint-d);border:1.5px solid var(--mint)}

  /* 预约卡 */
  .booking{background:#fff;border-radius:24px;padding:32px 30px;box-shadow:0 22px 50px rgba(30,156,133,.14);border:1px solid var(--line)}
  .booking h3{font-size:21px;font-weight:800;margin-bottom:4px}
  .booking .sub{color:var(--gray);font-size:13.5px;margin-bottom:22px}
  .fg{margin-bottom:15px}
  .fg label{display:block;font-size:13px;color:var(--gray);font-weight:600;margin-bottom:7px}
  .fg input,.fg select{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;font-size:14.5px;font-family:inherit;color:var(--ink);background:#fbfefe;outline:none;transition:.2s}
  .fg input:focus,.fg select:focus{border-color:var(--mint);background:#fff}
  .fg-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .slots{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:18px}
  .slot{border:1.5px solid var(--line);border-radius:10px;text-align:center;padding:9px 0;font-size:13.5px;color:var(--gray);cursor:pointer;background:#fbfefe;transition:.2s}
  .slot:hover{border-color:var(--mint);color:var(--mint-d)}
  .slot.on{background:var(--mint);border-color:var(--mint);color:#fff;font-weight:600}
  .slot.off{opacity:.4;text-decoration:line-through;cursor:not-allowed}
  .booking button{width:100%;background:linear-gradient(120deg,var(--mint),var(--mint-d));color:#fff;border:0;padding:15px;border-radius:14px;font-size:16px;font-weight:700;cursor:pointer;font-family:inherit;box-shadow:0 10px 22px rgba(47,191,165,.28)}
  .booking .note{text-align:center;font-size:12.5px;color:#9aabb3;margin-top:12px}

  section{padding:74px 0}
  .sec-t{text-align:center;margin-bottom:46px}
  .sec-t .k{color:var(--mint-d);font-size:13.5px;font-weight:700;letter-spacing:2px;margin-bottom:8px}
  .sec-t h2{font-size:32px;font-weight:800;letter-spacing:-.4px}
  .sec-t p{color:var(--gray);font-size:15.5px;margin-top:10px}

  /* 诊疗项目 */
  .svc{background:#fff}
  .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  .sc{border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px;background:linear-gradient(180deg,#fff,#f8fdfc);transition:.28s}
  .sc:hover{transform:translateY(-5px);box-shadow:0 16px 34px rgba(30,156,133,.13);border-color:#bfe9e0}
  .ico{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:24px;margin-bottom:16px}
  .i1{background:var(--mint-l)}.i2{background:var(--sky-l)}.i3{background:#fff2e3}
  .i4{background:#f0ecff}.i5{background:#ffeef2}.i6{background:#eafaf0}
  .sc h3{font-size:18.5px;font-weight:700;margin-bottom:9px}
  .sc p{color:var(--gray);font-size:14.3px;line-height:1.85}
  .price{margin-top:15px;padding-top:14px;border-top:1px dashed var(--line);font-size:14px;color:var(--mint-d);font-weight:700}
  .price s{color:#b7c4ca;font-weight:400;margin-left:8px;font-size:13px}

  /* 医生 */
  .docs{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
  .doc{background:#fff;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);text-align:center;padding-bottom:24px}
  .doc .av{height:150px;display:grid;place-items:center;font-size:44px;color:#fff}
  .d1{background:linear-gradient(140deg,#2fbfa5,#1e9c85)}
  .d2{background:linear-gradient(140deg,#3f8ef7,#2f6fd0)}
  .d3{background:linear-gradient(140deg,#f79f4a,#e07a2c)}
  .d4{background:linear-gradient(140deg,#9b7bf0,#7654d6)}
  .doc h4{font-size:18px;font-weight:700;margin:18px 0 4px}
  .doc .t{color:var(--mint-d);font-size:13px;font-weight:600;margin-bottom:10px}
  .doc p{color:var(--gray);font-size:13.3px;padding:0 20px;line-height:1.8}

  /* 就诊流程 */
  .steps{background:linear-gradient(135deg,var(--mint-d),var(--sky));color:#fff}
  .steps .sec-t h2,.steps .sec-t .k{color:#fff}
  .steps .sec-t p{color:rgba(255,255,255,.85)}
  .st-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
  .st{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.24);border-radius:16px;padding:24px 18px;text-align:center;backdrop-filter:blur(4px)}
  .st b{display:block;width:34px;height:34px;border-radius:50%;background:#fff;color:var(--mint-d);margin:0 auto 12px;line-height:34px;font-size:15px;font-weight:800}
  .st h4{font-size:15.5px;margin-bottom:6px}
  .st span{font-size:12.8px;color:rgba(255,255,255,.82);line-height:1.7;display:block}

  /* 评价 */
  .rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  .rev{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px}
  .stars{color:#ffb020;font-size:15px;letter-spacing:2px;margin-bottom:12px}
  .rev p{font-size:14.5px;color:#41535c;line-height:1.9;margin-bottom:16px}
  .who{display:flex;align-items:center;gap:11px}
  .who i{width:38px;height:38px;border-radius:50%;background:var(--mint-l);color:var(--mint-d);display:grid;place-items:center;font-style:normal;font-weight:700;font-size:14px}
  .who b{display:block;font-size:14px}
  .who span{font-size:12.5px;color:var(--gray)}

  footer{background:#123037;color:#a5bdc3;padding:52px 0 26px;font-size:14px}
  .fg3{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:38px;margin-bottom:32px}
  footer h5{color:#fff;font-size:16px;margin-bottom:14px}
  footer ul{list-style:none;line-height:2.1}
  .cp{border-top:1px solid rgba(255,255,255,.09);padding-top:20px;text-align:center;color:#78939b;font-size:13px}

  @media(max-width:920px){
    .nav ul{display:none}
    .hero-grid,.svc-grid,.docs,.rev-grid,.fg3{grid-template-columns:1fr}
    .st-grid{grid-template-columns:repeat(2,1fr)}
    h1{font-size:31px}
    section{padding:52px 0}
    .slots{grid-template-columns:repeat(3,1fr)}
  }
</style>
</head>
<body>

<header>
  <div class="wrap nav">
    <div class="brand"><span class="tooth">◍</span>清和口腔</div>
    <ul>
      <li><a href="#svc">诊疗项目</a></li>
      <li><a href="#doc">医生团队</a></li>
      <li><a href="#step">就诊流程</a></li>
      <li><a href="#rev">患者评价</a></li>
    </ul>
    <a class="book-btn" href="#book">立即预约</a>
  </div>
</header>

<div class="hero">
  <div class="wrap hero-grid">
    <div>
      <div class="pill"><b>NEW</b> 今日剩余号源 6 个，可当日就诊</div>
      <h1>牙齿的事，<br><span>不用再拖着</span></h1>
      <p class="lead">从检查、方案到治疗全程一位主诊医生负责。三甲背景团队、透明报价、独立诊室，让看牙这件小事变得省心一点。</p>
      <div class="trust">
        <div><b>12 年</b><span>临床服务</span></div>
        <div><b>38000+</b><span>累计接诊</span></div>
        <div><b>4.9</b><span>患者评分</span></div>
        <div><b>0 元</b><span>初诊检查</span></div>
      </div>
      <div class="cta-row">
        <a class="btn btn-p" href="#book">在线预约挂号</a>
        <a class="btn btn-o" href="#svc">查看诊疗价目</a>
      </div>
    </div>

    <div class="booking" id="book">
      <h3>在线预约</h3>
      <div class="sub">填写信息后，客服将在 15 分钟内与您确认</div>
      <div class="fg"><label>就诊人姓名</label><input type="text" placeholder="请输入姓名"></div>
      <div class="fg fg-2">
        <div><label>手机号码</label><input type="tel" placeholder="11 位手机号"></div>
        <div><label>就诊项目</label>
          <select><option>口腔检查</option><option>洁牙/牙周</option><option>补牙/根管</option><option>种植牙</option><option>牙齿矫正</option><option>儿童牙科</option></select>
        </div>
      </div>
      <div class="fg"><label>预约日期</label><input type="date" value="2026-08-06"></div>
      <label style="display:block;font-size:13px;color:var(--gray);font-weight:600;margin-bottom:9px">可选时段</label>
      <div class="slots">
        <div class="slot">09:00</div>
        <div class="slot on">10:30</div>
        <div class="slot off">13:00</div>
        <div class="slot">14:30</div>
        <div class="slot">15:30</div>
        <div class="slot off">16:30</div>
        <div class="slot">18:00</div>
        <div class="slot">19:00</div>
      </div>
      <button>确认预约（免挂号费）</button>
      <div class="note">提交即表示同意《就诊须知》，可提前 2 小时免费改约</div>
    </div>
  </div>
</div>

<section class="svc" id="svc">
  <div class="wrap">
    <div class="sec-t">
      <div class="k">TREATMENTS</div>
      <h2>诊疗项目与参考价</h2>
      <p>所有价格公开透明，治疗前签署书面报价单，中途不加项</p>
    </div>
    <div class="svc-grid">
      <div class="sc"><div class="ico i1">🦷</div><h3>口腔检查与洁牙</h3><p>含全口检查、口内照、牙周探诊与超声洁治，帮助你了解牙齿真实状况，建立健康档案。</p><div class="price">￥199 起 <s>￥380</s></div></div>
      <div class="sc"><div class="ico i2">🔬</div><h3>补牙与根管治疗</h3><p>显微根管配合橡皮障隔离，减少二次感染风险；树脂补牙可现场完成，当天即可正常进食。</p><div class="price">￥280 起 <s>￥450</s></div></div>
      <div class="sc"><div class="ico i3">⚙️</div><h3>种植牙</h3><p>提供韩系、欧系多品牌植体方案，术前 CBCT 三维设计，缺牙区精准定位，咀嚼力接近真牙。</p><div class="price">￥3980 起 <s>￥6800</s></div></div>
      <div class="sc"><div class="ico i4">📐</div><h3>牙齿矫正</h3><p>金属自锁、陶瓷半隐形与隐形牙套三种方案可选，方案确认前提供三维模拟效果预览。</p><div class="price">￥9800 起 <s>￥15800</s></div></div>
      <div class="sc"><div class="ico i5">✨</div><h3>美学修复</h3><p>贴面、全瓷冠与冷光美白，针对色素沉着、四环素牙与前牙缺损，兼顾颜色与咬合功能。</p><div class="price">￥1280 起 <s>￥2200</s></div></div>
      <div class="sc"><div class="ico i6">🧸</div><h3>儿童牙科</h3><p>涂氟、窝沟封闭与乳牙治疗，独立儿童诊区，配备行为引导，减少孩子对看牙的抗拒。</p><div class="price">￥98 起 <s>￥180</s></div></div>
    </div>
  </div>
</section>

<section id="doc">
  <div class="wrap">
    <div class="sec-t">
      <div class="k">OUR DOCTORS</div>
      <h2>主诊医生团队</h2>
      <p>预约时可指定医生，全程由同一位主诊医生负责到底</p>
    </div>
    <div class="docs">
      <div class="doc"><div class="av d1">林</div><h4>林知远</h4><div class="t">种植科 · 主任医师</div><p>从业 18 年，累计完成种植修复 5000 余例，擅长复杂骨量不足病例。</p></div>
      <div class="doc"><div class="av d2">徐</div><h4>徐佩宁</h4><div class="t">正畸科 · 副主任医师</div><p>正畸专业硕士，擅长成人隐形矫治与青少年早期干预方案设计。</p></div>
      <div class="doc"><div class="av d3">郭</div><h4>郭晓沐</h4><div class="t">牙体牙髓科 · 主治医师</div><p>专注显微根管与牙体美学修复，年治疗量 1200 余例，操作细致。</p></div>
      <div class="doc"><div class="av d4">何</div><h4>何念安</h4><div class="t">儿童齿科 · 主治医师</div><p>擅长低龄儿童行为管理与乳牙外伤处理，孩子回访满意度 98%。</p></div>
    </div>
  </div>
</section>

<section class="steps" id="step">
  <div class="wrap">
    <div class="sec-t">
      <div class="k">PROCESS</div>
      <h2>五步就诊流程</h2>
      <p>从预约到复查，每一步都有专人跟进提醒</p>
    </div>
    <div class="st-grid">
      <div class="st"><b>1</b><h4>在线预约</h4><span>选择项目、日期与时段，客服电话确认</span></div>
      <div class="st"><b>2</b><h4>到院检查</h4><span>建立口腔档案，拍片与口内检查</span></div>
      <div class="st"><b>3</b><h4>方案沟通</h4><span>医生讲解方案与费用，签署书面报价</span></div>
      <div class="st"><b>4</b><h4>治疗执行</h4><span>独立诊室，器械一人一用一消毒</span></div>
      <div class="st"><b>5</b><h4>随访复查</h4><span>术后 7 天回访，定期提醒复查</span></div>
    </div>
  </div>
</section>

<section id="rev">
  <div class="wrap">
    <div class="sec-t">
      <div class="k">REVIEWS</div>
      <h2>患者怎么说</h2>
      <p>以下评价来自真实到院患者的匿名反馈</p>
    </div>
    <div class="rev-grid">
      <div class="rev">
        <div class="stars">★★★★★</div>
        <p>拖了三年的智齿终于拔了。医生先讲清楚了整个过程和可能的肿胀反应，实际拔的时候没什么感觉，第二天就能正常吃饭。</p>
        <div class="who"><i>王</i><div><b>王女士</b><span>智齿拔除 · 2026-07</span></div></div>
      </div>
      <div class="rev">
        <div class="stars">★★★★★</div>
        <p>带孩子涂氟，儿童诊区有玩具和动画片，护士姐姐一直在旁边讲解，小朋友全程没哭，下次说还要来。</p>
        <div class="who"><i>李</i><div><b>李先生</b><span>儿童涂氟 · 2026-07</span></div></div>
      </div>
      <div class="rev">
        <div class="stars">★★★★☆</div>
        <p>做的隐形矫正，第一次戴牙套有点不习惯，医生给的方案模拟图很直观，每次复诊都会对比进度，现在半年多已经很明显了。</p>
        <div class="who"><i>陈</i><div><b>陈同学</b><span>隐形矫正 · 2026-06</span></div></div>
      </div>
    </div>
  </div>
</section>

<footer>
  <div class="wrap">
    <div class="fg3">
      <div>
        <h5>清和口腔门诊部</h5>
        <p>地址：城市中心区春熙路 128 号明珠广场 2 楼<br>电话：0755-8899-1234<br>营业时间：周一至周日 09:00–20:00（节假日不休）</p>
      </div>
      <div><h5>诊疗项目</h5><ul><li>口腔检查洁牙</li><li>种植修复</li><li>牙齿矫正</li><li>儿童齿科</li></ul></div>
      <div><h5>患者服务</h5><ul><li>在线预约</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/1882.html

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

关于作者

小蓝IT的头像

小蓝IT

430 文章
12 评论
13 粉丝
13年建站经验，为用户提供企业、个人、博客网站搭建服务
律师事务所 HTML 单页源码（深蓝 + 金色，6 大业务领域 + 律师团队 + 案件展示）
上一篇 8小时前
宠物生活馆 HTML 单页源码（暖棕 + 焦糖色，洗护寄养训练一站搞定）
下一篇 8小时前

相关推荐

发表回复

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