
ClinicMaster - 儿科和儿童护理 Tailwind CSS 模板
categoryUI 组件
# 项目简介
ClinicMaster 是一款基于 Tailwind CSS 构建的儿科诊所与儿童健康网站模板,适用于儿科门诊、儿童医院、医疗健康机构等场景。模板包含首页、服务、团队、博客、预约、联系等完整页面,并提供响应式布局与多皮肤主题切换功能。
## 技术栈
- Tailwind CSS v4.1.11
- jQuery(交互逻辑)
- Bootstrap(部分组件支持)
- Font Awesome(图标)
- Google Fonts(Poppins 字体)
- PerfectScrollbar(滚动条美化)
## 项目结构
```
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
常见问题
评论0
发布时间Dec 4, 2025
技术栈
HTML
标签
baby carechild careday carehealthcarekidskids clinicmedicalmedical shopmedical storemedicinepediatricpharmacytailwindtherapywellness