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

岐黄堂中医养生理疗馆 HTML 单页源码

小蓝IT • • 网站源码

赭石红与艾草绿配色的中医养生馆模板，含四诊项目、坐堂医师与预约表单。

岐黄堂是一款面向中医养生、理疗与健康管理机构的单页官网模板。它将传统的问诊项目（四诊辨证、艾灸、正骨推拿、拔罐刮痧、节气膏方、小儿推拿）与现代预约系统结合，帮助中医馆在线上建立专业、可信的品牌形象。

视觉采用宣纸米黄为底，辅以赭石红与艾草绿点缀，整体气质沉稳、温润、有文化感。设计上使用了大量中式留白、衬线字体与印章式图标，四时养生要点、医师卡片、调理价格表与预约表单层层递进，信息结构清晰，既适合年长的养生人群阅读，也能打动年轻用户。

适合中医馆、理疗工作室、艾灸养生店、小儿推拿门店，也适合前端学习者作为’传统行业+现代网页’结合的案例，了解如何用单页承载服务介绍、医师展示与在线预约。

岐黄堂中医养生理疗馆 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">
<title>岐黄堂 · 中医养生理疗馆 | 一年四季，各有各的养法</title>
<style>
:root{
  --paper:#f6f1e4;
  --paper2:#efe7d5;
  --ink:#2c2620;
  --ink2:#6b6055;
  --ochre:#a8402c;
  --ochre-l:#c25a41;
  --moxa:#6f7f52;
  --moxa-l:#8b9c6c;
  --gold:#b5893c;
  --line:#ddd2ba;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:"Songti SC","STSong","Noto Serif SC",serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
a{text-decoration:none;color:inherit}

/* 顶部 */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(246,241,228,.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{display:flex;align-items:center;gap:12px}
.seal{
  width:44px;height:44px;flex:none;
  background:var(--ochre);color:#fff;
  display:grid;place-items:center;
  font-size:20px;letter-spacing:1px;
  border-radius:4px;
}
.logo b{font-size:20px;letter-spacing:3px;display:block}
.logo span{font-size:11px;color:var(--ink2);letter-spacing:2px;font-family:system-ui,sans-serif}
nav ul{display:flex;gap:30px;list-style:none;font-size:15px}
nav a{padding:6px 0;border-bottom:1px solid transparent;transition:.25s}
nav a:hover{color:var(--ochre);border-color:var(--ochre)}
.tel{
  font-family:system-ui,sans-serif;font-size:14px;
  background:var(--moxa);color:#fff;
  padding:9px 20px;border-radius:2px;
}
.menu-btn{display:none;font-size:24px;background:none;border:0;color:var(--ink)}

/* 首屏 */
.hero{padding:74px 0 64px;position:relative;overflow:hidden}
.hero:after{
  content:"養";
  position:absolute;right:-30px;top:20px;
  font-size:340px;line-height:1;
  color:rgba(168,64,44,.05);
  pointer-events:none;
}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;position:relative;z-index:2}
.tagline{
  display:inline-block;
  font-family:system-ui,sans-serif;font-size:12px;letter-spacing:3px;
  color:var(--ochre);border:1px solid var(--ochre);
  padding:5px 14px;margin-bottom:26px;
}
h1{font-size:50px;line-height:1.4;letter-spacing:2px;font-weight:600}
h1 em{font-style:normal;color:var(--ochre);position:relative}
h1 em:after{content:"";position:absolute;left:0;right:0;bottom:6px;height:8px;background:rgba(181,137,60,.22);z-index:-1}
.lead{margin:26px 0 34px;font-size:17px;color:var(--ink2);max-width:30em}
.btns{display:flex;gap:14px;flex-wrap:wrap;font-family:system-ui,sans-serif}
.btn{padding:14px 30px;font-size:15px;border-radius:2px;transition:.25s;display:inline-block}
.btn-1{background:var(--ochre);color:#fff}
.btn-1:hover{background:var(--ochre-l)}
.btn-2{border:1px solid var(--ink);color:var(--ink)}
.btn-2:hover{background:var(--ink);color:var(--paper)}

/* 首屏右侧四时卡 */
.seasons{background:var(--paper2);border:1px solid var(--line);padding:30px 28px}
.seasons h4{font-size:15px;letter-spacing:3px;color:var(--ochre);margin-bottom:6px}
.seasons p.sub{font-size:12px;font-family:system-ui,sans-serif;color:var(--ink2);margin-bottom:20px}
.season-row{display:flex;gap:14px;padding:15px 0;border-top:1px dashed var(--line)}
.season-row i{
  font-style:normal;flex:none;width:34px;height:34px;
  background:var(--moxa-l);color:#fff;border-radius:50%;
  display:grid;place-items:center;font-size:15px;
}
.season-row div{flex:1}
.season-row b{display:block;font-size:15px;letter-spacing:1px}
.season-row small{font-size:12.5px;color:var(--ink2);font-family:system-ui,sans-serif;line-height:1.7}

/* 通用节 */
section{padding:78px 0}
.sec-head{text-align:center;margin-bottom:52px}
.sec-head .en{font-family:system-ui,sans-serif;font-size:11px;letter-spacing:5px;color:var(--gold);text-transform:uppercase}
.sec-head h2{font-size:34px;letter-spacing:3px;margin:10px 0 12px;font-weight:600}
.sec-head p{color:var(--ink2);font-size:15px}
.alt{background:var(--paper2)}

/* 疗法 */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.card{background:var(--paper);border:1px solid var(--line);padding:34px 28px;transition:.3s;position:relative}
.card:before{content:"";position:absolute;left:0;top:0;width:0;height:3px;background:var(--ochre);transition:.35s}
.card:hover{transform:translateY(-6px);box-shadow:0 14px 34px rgba(44,38,32,.09)}
.card:hover:before{width:100%}
.card .ic{font-size:30px;margin-bottom:16px;display:block}
.card h3{font-size:20px;letter-spacing:2px;margin-bottom:10px}
.card p{font-size:14.5px;color:var(--ink2)}
.card .price{
  margin-top:18px;padding-top:14px;border-top:1px dashed var(--line);
  font-family:system-ui,sans-serif;font-size:13px;color:var(--ochre);
}
.card .price b{font-size:22px}

/* 医师 */
.docs{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.doc{background:var(--paper2);border:1px solid var(--line);text-align:center;padding:34px 22px}
.doc .av{
  width:88px;height:88px;margin:0 auto 18px;border-radius:50%;
  background:linear-gradient(140deg,var(--moxa),var(--moxa-l));
  color:#fff;display:grid;place-items:center;font-size:30px;letter-spacing:2px;
}
.doc h3{font-size:19px;letter-spacing:2px}
.doc .role{font-family:system-ui,sans-serif;font-size:12px;color:var(--ochre);letter-spacing:2px;margin:6px 0 14px}
.doc p{font-size:14px;color:var(--ink2);text-align:left}
.tags{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.tags span{font-family:system-ui,sans-serif;font-size:11.5px;background:rgba(111,127,82,.14);color:var(--moxa);padding:4px 10px;border-radius:2px}

/* 流程 */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:s}
.step{padding:0 22px;position:relative;text-align:center}
.step:not(:last-child):after{
  content:"";position:absolute;right:0;top:26px;
  width:1px;height:calc(100% - 40px);background:var(--line);
}
.step .num{
  counter-increment:s;
  width:54px;height:54px;margin:0 auto 16px;border-radius:50%;
  border:1px solid var(--ochre);color:var(--ochre);
  display:grid;place-items:center;font-family:system-ui,sans-serif;font-size:19px;
}
.step .num:before{content:"0" counter(s)}
.step h4{font-size:17px;letter-spacing:2px;margin-bottom:8px}
.step p{font-size:13.5px;color:var(--ink2)}

/* 数据 */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center;
  background:var(--ink);color:var(--paper);padding:52px 34px}
.stats b{display:block;font-family:system-ui,sans-serif;font-size:40px;color:var(--gold);line-height:1.2}
.stats small{font-size:13px;opacity:.72;letter-spacing:2px}

/* 预约 */
.book{display:grid;grid-template-columns:1fr 1.1fr;gap:52px;align-items:start}
.info-item{display:flex;gap:16px;padding:18px 0;border-bottom:1px dashed var(--line)}
.info-item i{font-style:normal;font-size:20px;color:var(--ochre);flex:none}
.info-item b{display:block;font-size:15px;letter-spacing:1px}
.info-item small{font-size:13.5px;color:var(--ink2);font-family:system-ui,sans-serif}
form{background:var(--paper2);border:1px solid var(--line);padding:34px 30px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
label{display:block;font-size:13px;letter-spacing:1px;margin:0 0 7px;color:var(--ink2);font-family:system-ui,sans-serif}
input,select,textarea{
  width:100%;padding:12px 14px;margin-bottom:18px;
  border:1px solid var(--line);background:var(--paper);
  font-family:inherit;font-size:14.5px;color:var(--ink);border-radius:2px;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--moxa)}
textarea{resize:vertical;min-height:88px}
.submit{
  width:100%;padding:15px;border:0;cursor:pointer;
  background:var(--ochre);color:#fff;font-family:system-ui,sans-serif;
  font-size:15px;letter-spacing:3px;border-radius:2px;transition:.25s;
}
.submit:hover{background:var(--ochre-l)}
.note{font-size:12px;color:var(--ink2);font-family:system-ui,sans-serif;margin-top:12px;text-align:center}

/* 页脚 */
footer{background:var(--ink);color:rgba(246,241,228,.62);padding:48px 0 26px;font-family:system-ui,sans-serif}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;padding-bottom:30px;border-bottom:1px solid rgba(246,241,228,.13)}
.f-grid h5{color:var(--paper);font-size:14px;letter-spacing:2px;margin-bottom:14px}
.f-grid p,.f-grid li{font-size:13.5px;line-height:2;list-style:none}
.f-grid a:hover{color:var(--gold)}
.cp{text-align:center;font-size:12.5px;padding-top:22px;opacity:.62}

@media(max-width:900px){
  nav ul,.tel{display:none}
  .menu-btn{display:block}
  .hero-grid,.book{grid-template-columns:1fr;gap:36px}
  .cards,.docs,.flow{grid-template-columns:1fr}
  .step:after{display:none}
  .step{padding:24px 0;border-bottom:1px dashed var(--line)}
  .stats{grid-template-columns:1fr 1fr;gap:30px}
  h1{font-size:34px}
  .f-grid{grid-template-columns:1fr}
  .hero:after{font-size:200px;opacity:.6}
}
</style>
</head>
<body>

<header>
  <div class="wrap nav">
    <div class="logo">
      <div class="seal">岐</div>
      <div>
        <b>岐黄堂</b>
        <span>QIHUANG TANG · SINCE 1998</span>
      </div>
    </div>
    <nav><ul>
      <li><a href="#therapy">调理项目</a></li>
      <li><a href="#doctor">坐堂医师</a></li>
      <li><a href="#flow">问诊流程</a></li>
      <li><a href="#book">预约到店</a></li>
    </ul></nav>
    <a href="#book" class="tel">预约热线 400-186-2098</a>
    <button class="menu-btn">☰</button>
  </div>
</header>

<div class="hero">
  <div class="wrap hero-grid">
    <div>
      <span class="tagline">二十八年 · 老城中医馆</span>
      <h1>不着急治病，<br>先把<em>身子养回来</em></h1>
      <p class="lead">岐黄堂开在老城墙下的第二十八个年头。我们不推套餐、不卖保健品，只做一件事：把脉、看舌、听你说完，然后给一份你能坚持下去的调理方案。</p>
      <div class="btns">
        <a href="#book" class="btn btn-1">在线预约问诊</a>
        <a href="#therapy" class="btn btn-2">看看调理项目</a>
      </div>
    </div>
    <div class="seasons">
      <h4>四时养生要点</h4>
      <p class="sub">SEASONAL GUIDE · 顺时而养，不逆天时</p>
      <div class="season-row"><i>春</i><div><b>疏肝理气</b><small>肝气升发，宜早睡早起、少怒少酒，可饮玫瑰陈皮茶。</small></div></div>
      <div class="season-row"><i>夏</i><div><b>清心祛湿</b><small>暑湿最伤脾胃，忌贪凉直吹空调，三伏贴此时最宜。</small></div></div>
      <div class="season-row"><i>秋</i><div><b>润肺养阴</b><small>燥邪当令，多食百合银耳梨，晨起可练八段锦。</small></div></div>
      <div class="season-row"><i>冬</i><div><b>补肾藏精</b><small>宜早卧晚起、护住腰腹脚，冬令膏方一人一方。</small></div></div>
    </div>
  </div>
</div>

<section id="therapy">
  <div class="wrap">
    <div class="sec-head">
      <div class="en">Therapy</div>
      <h2>调理项目</h2>
      <p>全部由坐堂医师面诊后开单，不做无诊断的推销式服务</p>
    </div>
    <div class="cards">
      <div class="card">
        <span class="ic">🌿</span>
        <h3>四诊辨证 · 中药调理</h3>
        <p>望闻问切完整走一遍，出具辨证记录与方解说明。药材统一由亳州基地直供，可代煎真空包装配送到家。</p>
        <div class="price">首诊面诊 <b>￥68</b> / 次（含舌面脉象记录）</div>
      </div>
      <div class="card">
        <span class="ic">🔥</span>
        <h3>艾灸 · 温阳散寒</h3>
        <p>五年陈艾条，按体质定穴。适合宫寒、畏冷、久坐腰凉、湿气重人群，单次 40 分钟，可搭配督脉铺灸。</p>
        <div class="price">单次 <b>￥168</b> / 十次卡 ￥1480</div>
      </div>
      <div class="card">
        <span class="ic">🖐️</span>
        <h3>正骨推拿 · 松解筋结</h3>
        <p>针对颈肩劳损、腰背酸紧、久坐圆肩。手法轻柔不追求"响声"，配合居家拉伸动作示范表带走。</p>
        <div class="price">60 分钟 <b>￥238</b> / 90 分钟 ￥318</div>
      </div>
      <div class="card">
        <span class="ic">💧</span>
        <h3>拔罐刮痧 · 通络排湿</h3>
        <p>玻璃火罐与刮痧板一客一消毒，罐痕颜色现场解读。夏季祛湿、外感初起时效果最直观。</p>
        <div class="price">单次 <b>￥98</b> / 与艾灸同做立减 30</div>
      </div>
      <div class="card">
        <span class="ic">🍵</span>
        <h3>节气膏方 · 一人一方</h3>
        <p>冬至前后开方最佳。医师按你的舌脉与近半年状态定制，前店后厂现场熬制，一料可服四十天。</p>
        <div class="price">一料 <b>￥880</b> 起（含定制诊费）</div>
      </div>
      <div class="card">
        <span class="ic">👶</span>
        <h3>小儿推拿 · 不打针少吃药</h3>
        <p>针对积食、夜啼、反复咳嗽与脾胃弱。全程家长可在旁观看学习，教三个回家自己能做的手法。</p>
        <div class="price">单次 <b>￥128</b> / 疗程五次 ￥560</div>
      </div>
    </div>
  </div>
</section>

<section class="alt" id="doctor">
  <div class="wrap">
    <div class="sec-head">
      <div class="en">Physicians</div>
      <h2>坐堂医师</h2>
      <p>三位主诊均执业十五年以上，出诊表每周一更新</p>
    </div>
    <div class="docs">
      <div class="doc">
        <div class="av">陈</div>
        <h3>陈砚舟</h3>
        <div class="role">主任中医师 · 32 年</div>
        <p>师承江南温病一派，擅长脾胃与失眠调理。看诊慢，一个病人常聊二十分钟，习惯把方子里每味药做什么都讲清楚。</p>
        <div class="tags"><span>脾胃</span><span>失眠</span><span>膏方</span></div>
      </div>
      <div class="doc">
        <div class="av">林</div>
        <h3>林素荷</h3>
        <div class="role">副主任中医师 · 19 年</div>
        <p>妇科与体质调理为主，月经不调、宫寒、产后恢复经验丰富。艾灸取穴以"少而准"著称，怕痛的人多找她。</p>
        <div class="tags"><span>妇科</span><span>艾灸</span><span>产后</span></div>
      </div>
      <div class="doc">
        <div class="av">吴</div>
        <h3>吴长庚</h3>
        <div class="role">推拿正骨主诊 · 22 年</div>
        <p>原省队队医，专治久坐族的颈肩腰。不追求手法声响，强调"松解 + 自己练"，会给每位客人留一张居家动作图。</p>
        <div class="tags"><span>颈肩</span><span>腰痛</span><span>运动损伤</span></div>
      </div>
    </div>
  </div>
</section>

<section id="flow">
  <div class="wrap">
    <div class="sec-head">
      <div class="en">Process</div>
      <h2>问诊流程</h2>
      <p>从预约到复诊，每一步都提前告知你会发生什么</p>
    </div>
    <div class="flow">
      <div class="step">
        <div class="num"></div>
        <h4>预约登记</h4>
        <p>线上填表或电话预约，选好医师与时段，到店无需排队等号。</p>
      </div>
      <div class="step">
        <div class="num"></div>
        <h4>四诊面谈</h4>
        <p>望舌、切脉、问起居饮食，约 20 分钟，全程记录成一份纸质诊案。</p>
      </div>
      <div class="step">
        <div class="num"></div>
        <h4>方案与施治</h4>
        <p>当场说明辨证结论与调理思路，选中药、外治或两者结合，费用先告知。</p>
      </div>
      <div class="step">
        <div class="num"></div>
        <h4>回访复诊</h4>
        <p>七日后微信回访，记录变化；复诊按前次诊案微调，不重复收首诊费。</p>
      </div>
    </div>
  </div>
</section>

<section class="alt">
  <div class="wrap">
    <div class="stats">
      <div><b>28</b><small>年 老馆坐堂</small></div>
      <div><b>3.6</b><small>万 累计诊案</small></div>
      <div><b>96%</b><small>复诊回访满意</small></div>
      <div><b>0</b><small>保健品推销</small></div>
    </div>
  </div>
</section>

<section id="book">
  <div class="wrap book">
    <div>
      <div class="en" style="font-family:system-ui,sans-serif;font-size:11px;letter-spacing:5px;color:var(--gold)">VISIT US</div>
      <h2 style="font-size:32px;letter-spacing:3px;margin:10px 0 18px">预约到店</h2>
      <p style="color:var(--ink2);font-size:15px;margin-bottom:16px">医师每日限号，建议提前一到三天预约。填表后半小时内会有工作人员电话确认时段。</p>
      <div class="info-item"><i>📍</i><div><b>馆址</b><small>老城区南熏门大街 46 号（城墙根下，青砖门面）</small></div></div>
      <div class="info-item"><i>🕘</i><div><b>营业时间</b><small>周一至周日 08:30 – 20:30，节气义诊日照常开门</small></div></div>
      <div class="info-item"><i>📞</i><div><b>预约电话</b><small>400-186-2098 / 微信同号 qihuangtang1998</small></div></div>
      <div class="info-item"><i>🚇</i><div><b>交通</b><small>地铁 2 号线南熏门站 B 口步行 300 米，门前有 12 个免费车位</small></div></div>
    </div>
    <form onsubmit="event.preventDefault();alert('预约信息已提交，我们会在半小时内与您电话确认。');">
      <div class="f-row">
        <div><label>您的称呼</label><input type="text" placeholder="如：王女士" required></div>
        <div><label>联系电话</label><input type="tel" placeholder="11 位手机号" required></div>
      </div>
      <div class="f-row">
        <div><label>希望的医师</label>
          <select><option>不指定，帮我安排</option><option>陈砚舟（脾胃 / 失眠）</option><option>林素荷（妇科 / 艾灸）</option><option>吴长庚（颈肩 / 腰痛）</option></select>
        </div>
        <div><label>意向项目</label>
          <select><option>四诊辨证 · 中药调理</option><option>艾灸温阳</option><option>正骨推拿</option><option>拔罐刮痧</option><option>节气膏方</option><option>小儿推拿</option></select>
        </div>
      </div>
      <label>希望到店时间</label>
      <input type="text" placeholder="如：本周六上午，或 3 月 12 日 15:00">
      <label>近期主要不适（越具体越好）</label>
      <textarea placeholder="例如：近两个月入睡困难，凌晨三四点易醒，白天口干、容易疲乏，久坐后腰凉。"></textarea>
      <button class="submit" type="submit">提 交 预 约</button>
      <p class="note">提交即表示同意我们仅将信息用于本次预约联系，不作他用。</p>
    </form>
  </div>
</section>

<footer>
  <div class="wrap">
    <div class="f-grid">
      <div>
        <h5>岐黄堂 · 中医养生理疗馆</h5>
        <p>创办于 1998 年，三代人守着一间老馆。我们相信调理是件慢事，也相信把道理讲明白，比多卖一盒药更重要。</p>
      </div>
      <div>
        <h5>快速导航</h5>
        <ul>
          <li><a href="#therapy">调理项目</a></li>
          <li><a href="#doctor">坐堂医师</a></li>
          <li><a href="#flow">问诊流程</a></li>
          <li><a href="#book">预约到店</a></li>
        </ul>
      </div>
      <div>
        <h5>提醒</h5>
        <ul>
          <li>本页面内容仅作养生参考</li>
          <li>不能替代医院诊断与治疗</li>
          <li>急重症请及时前往医院就诊</li>
        </ul>
      </div>
    </div>
    <div class="cp">© 2026 岐黄堂 · 本页为 HTML 单页示例模板，内容与机构均为虚构演示</div>
  </div>
</footer>

</body>
</html>

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

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

关于作者

小蓝IT的头像

小蓝IT

496 文章
12 评论
13 粉丝
13年建站经验，为用户提供企业、个人、博客网站搭建服务
蓝鲸计划 BLUEWHALE 潜水俱乐部课程报名 HTML 单页源码
上一篇 1小时前
鹰瞰 SKYVIEW 无人机航拍服务官网 HTML 单页源码
下一篇 1小时前

相关推荐

发表回复

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