Autozen – Car Detailing & Auto Repair HTML Bootstrap 5 Template

# 项目简介 Autozen 是一套基于 Bootstrap 5 构建的汽车美容与维修服务静态 HTML 模板，采用深色主题设计，包含首页、服务详情、团队介绍、定价方案等完整页面，适合汽车后市场服务商快速搭建企业展示网站。模板所有页面均为纯静态，无需后端即可运行。 ## 技术栈 - HTML5 + CSS3 + JavaScript（原生） - Bootstrap 5（响应式布局框架） - AOS（滚动动画库） - GLightbox（图片灯箱） - Slick（轮播组件） - Fancybox（弹窗预览） - Bootstrap Icons（图标库） - PHP（仅用于表单提交示例） ## 项目结构 ``` 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` — 官方开发文档，含文件结构与定制说明 ## 快速开始 1. 进入 `html_template` 目录 2. 直接用浏览器打开 `index.html` 即可预览全部页面 3. 如需修改内容，使用 VS Code 或任意文本编辑器编辑对应 HTML 文件 4. 如启用表单功能，需将 `php/form_process.php` 部署至支持 PHP 的服务器 ## 使用建议 该模板为纯前端静态页面，不含 CMS 集成。如需接入 WordPress 等平台需自行重构。深色主题配色（主色 #DF3B34）适合汽车改装、美容等高端服务场景，建议根据品牌 VI 调整 CSS 变量中的 `--primary-color` 与 `--font` 字体配置。