AutoDetail - 汽车细节、商店和维修 HTML 模板

# 项目简介 AutoDetail 是一款专业的汽车美容、维修与配件商城 HTML 模板，适合洗车行、汽车维修店、汽车配件零售商等建立官网。模板内置 5 种首页布局及完整的服务、商品、博客、预约、联系我们等页面，全静态实现，无需后端即可直接部署。 ## 技术栈 - HTML5 + CSS3（静态页面） - Bootstrap 5（布局与栅格系统） - Swiper（轮播与幻灯片组件） - jQuery（交互与表单验证） - Google Fonts（Oxanium + Manrope 字体） ## 项目结构 ``` AutoDetail HTML/ ├── index.html # 首页（布局 1） ├── homepage-2~5.html # 其他首页变体 ├── services.html # 服务列表 ├── service-single.html # 单个服务详情 ├── shop.html # 商品列表 ├── shop-product-single.html # 商品详情 ├── blog.html # 博客列表 ├── blog-single.html # 博客文章 ├── about.html # 关于我们 ├── contact.html # 联系方式 ├── contact.php # 联系人表单处理 ├── appointment.html # 预约页面 ├── faq.html # 常见问题 ├── gallery.html # 相册 ├── team.html # 团队成员 ├── testimonials.html # 客户评价 ├── css/ │ ├── bootstrap.min.css # Bootstrap 核心样式 │ ├── style.css # 主题主样式（含配色方案） │ ├── swiper.css # Swiper 轮播样式 │ ├── plugins.css # 第三方插件样式 │ └── custom-swiper-*.css # 自定义 Swiper 样式 ├── js/ │ ├── swiper.js # Swiper 核心库 │ ├── plugins.js # 插件初始化脚本 │ ├── designesia.js # 主题公共逻辑 │ └── validation-*.js # 表单验证脚本 ├── images/ # 图片资源 └── documentation/ └── DOCUMENTATION.html # 文档跳转页 ``` ## 核心文件说明 - `index.html` — 首页入口，展示模板整体风格与模块 - `css/style.css` — 主题核心样式，定义了配色方案与排版变量 - `js/designesia.js` — 主题通用交互逻辑（导航、滚动等） - `contact.php` / `booking.php` — PHP 表单处理文件，用于接收用户提交 - `css/swiper.css` + `js/swiper.js` — 轮播组件，负责图片/内容滑动效果 - `css/colors/scheme-*.css` — 备选配色方案，可快速切换整体色调 ## 快速开始 本项目为纯静态模板，无需 npm 或构建工具： 1. 直接用浏览器打开 `index.html` 预览首页 2. 如需本地服务器模拟 PHP 表单提交，运行： ```bash php -S localhost:8000 ``` 然后访问 `http://localhost:8000/contact.html` ## 使用建议 该模板预设了深色主题（`dark-scheme`），如需切换为浅色主题，移除 `body` 上的 `dark-scheme` 类即可。所有配色通过 `style.css` 中的 CSS 变量统一管理，建议在 `style.css` 顶部修改变量值以统一调整品牌色，避免逐行修改。