ClinicMaster - 儿科和儿童护理 Tailwind CSS 模板 preview 1

ClinicMaster - 儿科和儿童护理 Tailwind CSS 模板

bookmark

ClinicMaster 是一款基于 Tailwind CSS 构建的儿科诊所与儿童健康网站模板，适用于儿科门诊、儿童医院、医疗健康机构等场景。模板包含首页、服务、团队、博客、预约、联系等完整页面，并提供响应式布局与多皮肤主题切换功能。

HTMLbaby carechild careday carehealthcarekidskids clinicmedical

项目简介

ClinicMaster 是一款基于 Tailwind CSS 构建的儿科诊所与儿童健康网站模板，适用于儿科门诊、儿童医院、医疗健康机构等场景。模板包含首页、服务、团队、博客、预约、联系等完整页面，并提供响应式布局与多皮肤主题切换功能。

技术栈

  • Tailwind CSS v4.1.11
  • jQuery（交互逻辑）
  • Bootstrap（部分组件支持）
  • Font Awesome（图标）
  • Google Fonts（Poppins 字体）
  • PerfectScrollbar（滚动条美化）

项目结构

text
Tailwind-Pediatrics-v1.0/
├── doc/                          # 模板文档
│   ├── index.html                # 文档首页
│   ├── css/style.css             # 预编译样式
│   ├── fonts/                    # 字体文件
│   ├── images/                   # 文档图片资源
│   └── js/custom.js              # 文档页交互脚本
├── package/                      # 开发构建配置
│   ├── package.json              # npm 依赖与脚本
│   ├── assets/                   # 静态资源
│   └── src/                      # 页面源码
│       ├── index.html            # 首页
│       ├── about-us.html
│       ├── services.html
│       ├── team.html
│       ├── contact-us.html
│       └── ...

核心文件说明

  • package/package.json — npm 配置，定义 Tailwind CSS 编译命令
  • package/src/ — 网站页面源码，所有 HTML 页面所在目录
  • package/assets/ — 静态资源目录（CSS、JS、图片等）
  • doc/css/style.css — 文档页面专用样式
  • doc/index.html — 模板使用文档页面

快速开始

  1. 进入 package 目录安装依赖：
    bash
    cd Tailwind-Pediatrics-v1.0-25_Oct_2025/package
npm install
  2. 启动 Tailwind CSS 监听编译：
    bash
    npm run dev
  3. 在浏览器打开 package/src/index.html 预览效果

使用建议

  • 模板已内置多种皮肤主题（通过 data-theme-color 属性切换），可根据品牌需求选择或扩展。
  • 实际部署时需将 assets/css/style.css 替换为 Tailwind 编译后的输出文件，确保样式完整加载。
  • 页面中引用的第三方 CDN 资源（如 Bootstrap、Font Awesome）在离线环境下需自行下载并替换路径。
help_outline

常见问题