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

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

bookmark

AutoDetail 是一款专业的汽车美容、维修与配件商城 HTML 模板，适合洗车行、汽车维修店、汽车配件零售商等建立官网。模板内置 5 种首页布局及完整的服务、商品、博客、预约、联系我们等页面，全静态实现，无需后端即可直接部署。

HTML

项目简介

AutoDetail 是一款专业的汽车美容、维修与配件商城 HTML 模板，适合洗车行、汽车维修店、汽车配件零售商等建立官网。模板内置 5 种首页布局及完整的服务、商品、博客、预约、联系我们等页面，全静态实现，无需后端即可直接部署。

技术栈

  • HTML5 + CSS3（静态页面）
  • Bootstrap 5（布局与栅格系统）
  • Swiper（轮播与幻灯片组件）
  • jQuery（交互与表单验证）
  • Google Fonts（Oxanium + Manrope 字体）

项目结构

text
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 顶部修改变量值以统一调整品牌色，避免逐行修改。

help_outline

常见问题