Meditics – 医疗和保健 HTML 模板

# 项目简介 Meditics 是一套面向医疗健康行业的静态 HTML 网站模板，提供了首页（双版）、关于我们、科室服务、专家团队、博客、案例展示、预约挂号、联系我们等完整页面，适合快速搭建诊所、医院或医疗平台的展示站点。 ## 技术栈 - **HTML5** + **CSS3**（原生样式，支持响应式） - **Bootstrap 5**（栅格与基础组件） - **Swiper**（Banner 轮播、评价滑块、合作伙伴滑块） - **Splide**（滚动 ticker 滑块） - **WOW.js / Animate.css**（滚动入场动画） - **SlimSelect**（预约表单下拉选择） - **Flaticon**（图标字体） - **Google Fonts**（Open Sans、Lato） ## 项目结构 ``` 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 等 ``` ## 核心文件说明 - `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） ## 快速开始 纯静态项目，无需构建工具。可使用以下任一方式运行： - **方式一（推荐）**：在 `main-file/` 目录下启动任意本地静态服务器 ```bash # Python 3 python -m http.server 8080 # Node.js (npx) npx serve . ``` 然后浏览器访问 `http://localhost:8080` - **方式二**：直接在浏览器中打开 `main-file/index.html` > 第三方库（Swiper、Splide、WOW 等）已以本地文件形式存在于 `assets/vendor/` 中，无需额外安装依赖。 ## 使用建议 模板采用 CSS 变量统一管理主题色，修改 `--ul-primary`、`--ul-secondary` 等变量即可更换品牌色。由于页面依赖 jQuery（通过 `window.jQuery` 或 `$` 全局变量），如需替换为框架项目，请注意处理 jQuery 依赖或手动移除相关调用。