项目简介
Autozen 是一套基于 Bootstrap 5 构建的汽车美容与维修服务静态 HTML 模板，采用深色主题设计，包含首页、服务详情、团队介绍、定价方案等完整页面，适合汽车后市场服务商快速搭建企业展示网站。模板所有页面均为纯静态，无需后端即可运行。
技术栈
- HTML5 + CSS3 + JavaScript（原生）
- Bootstrap 5（响应式布局框架）
- AOS（滚动动画库）
- GLightbox（图片灯箱）
- Slick（轮播组件）
- Fancybox（弹窗预览）
- Bootstrap Icons（图标库）
- PHP（仅用于表单提交示例）
项目结构
text
html_template/
├── index.html # 首页
├── about-us.html # 关于我们
├── services.html # 服务列表
├── service-details.html # 服务详情
├── our-team.html # 团队成员
├── our-process.html # 服务流程
├── pricing-plan.html # 定价方案
├── appointment.html # 预约页面
├── contact-us.html # 联系方式
├── testimonials.html # 客户评价
├── blog.html # 博客列表
├── single-post.html # 博客详情
├── faq.html # 常见问题
├── careers.html # 招聘页面
├── 404.html # 404 页面
├── css/
│ └── style.css # 全部样式
├── js/
│ ├── script.js # 主脚本
│ ├── script-counter.js # 数字滚动动画
│ ├── gallery-preview.js # 画廊预览
│ └── submit-form.js # 表单提交
├── images/ # 图片资源
├── videos/ # 视频资源
└── php/
└── form_process.php # 表单处理示例
核心文件说明
html_template/index.html— 首页，展示核心服务与品牌信息html_template/css/style.css— 主题主样式文件，定义了颜色变量与全局布局html_template/js/script.js— 导航、动画与交互逻辑html_template/js/gallery-preview.js— 图片灯箱初始化（GLightbox）html_template/php/form_process.php— 表单数据处理示例，用于联系/预约页面documentation/index.html— 官方开发文档，含文件结构与定制说明
快速开始
- 进入
html_template目录 - 直接用浏览器打开
index.html即可预览全部页面 - 如需修改内容，使用 VS Code 或任意文本编辑器编辑对应 HTML 文件
- 如启用表单功能，需将
php/form_process.php部署至支持 PHP 的服务器
使用建议
该模板为纯前端静态页面，不含 CMS 集成。如需接入 WordPress 等平台需自行重构。深色主题配色（主色 #DF3B34）适合汽车改装、美容等高端服务场景，建议根据品牌 VI 调整 CSS 变量中的 --primary-color 与 --font 字体配置。
