项目简介link

Meditics 是一套面向医疗健康行业的静态 HTML 网站模板，提供了首页（双版）、关于我们、科室服务、专家团队、博客、案例展示、预约挂号、联系我们等完整页面，适合快速搭建诊所、医院或医疗平台的展示站点。

技术栈link

• HTML5 + CSS3（原生样式，支持响应式）
• Bootstrap 5（栅格与基础组件）
• Swiper（Banner 轮播、评价滑块、合作伙伴滑块）
• Splide（滚动 ticker 滑块）
• WOW.js / Animate.css（滚动入场动画）
• SlimSelect（预约表单下拉选择）
• Flaticon（图标字体）
• Google Fonts（Open Sans、Lato）

项目结构link

mediticshtml-10/
├── documentation/          # 模板使用文档
│   ├── index.html
│   └── assets/
│       ├── css/
│       ├── fonts/
│       ├── images/
│       └── js/
└── main-file/              # 实际使用的模板文件
    ├── index.html          # 首页
    ├── index-2.html        # 首页第二版
    ├── about.html
    ├── services.html
    ├── services-2.html
    ├── service-details.html
    ├── team.html
    ├── team-details.html
    ├── blog.html
    ├── blog-2.html
    ├── blog-details.html
    ├── case-studies.html
    ├── case-study-details.html
    ├── appointment.html
    ├── contact.html
    ├── testimonials.html
    ├── 404.html
    └── assets/
        ├── css/
        ├── js/
        ├── img/
        └── vendor/         # Swiper、Splide、WOW、SlimSelect 等

核心文件说明link

• main-file/index.html — 首页入口，包含 Banner、服务、团队、评价等完整首屏区块
• main-file/assets/css/style.css — 主样式表，涵盖所有页面组件与响应式断点
• main-file/assets/js/main.js — 交互逻辑：轮播初始化、移动端侧边栏、下拉选择、滚动动画等
• main-file/appointment.html — 预约挂号页面，内含医生与治疗方案选择表单
• main-file/assets/vendor/ — 第三方依赖库（Swiper、Splide、WOW、SlimSelect）

快速开始link

纯静态项目，无需构建工具。可使用以下任一方式运行：

• 方式一（推荐）：在 main-file/ 目录下启动任意本地静态服务器

  bashcontent_copyCopy

  # Python 3
  python -m http.server 8080
  
  # Node.js (npx)
  npx serve .
  

  然后浏览器访问 http://localhost:8080

• 方式二：直接在浏览器中打开 main-file/index.html

第三方库（Swiper、Splide、WOW 等）已以本地文件形式存在于 assets/vendor/ 中，无需额外安装依赖。

使用建议link

模板采用 CSS 变量统一管理主题色，修改 --ul-primary、--ul-secondary 等变量即可更换品牌色。由于页面依赖 jQuery（通过 window.jQuery 或 $ 全局变量），如需替换为框架项目，请注意处理 jQuery 依赖或手动移除相关调用。