Hadiman - Handyman & Renovation Services HTML Template

# 项目简介 Hadiman 是一套面向维修与装修服务企业的 HTML 模板，提供首页变体、案例展示、产品页、博客、预约表单等完整业务页面，基于 Tailwind CSS 构建，支持 SCSS 自定义样式，适合快速搭建装修公司或工匠服务官网。 ## 技术栈 - Tailwind CSS 3.4.x（CSS 框架） - SCSS/SASS（样式预处理） - jQuery（文档导航脚本） - npm（项目依赖管理） ## 项目结构 ``` hadiman-html/ ├── index.html ├── home2.html / home3.html / home4.html ├── about-us.html ├── our-services.html / services-detail.html ├── our-projects1.html / our-projects2.html ├── our-products.html / product-detail.html ├── our-pricing.html / faqs.html ├── blog-*.html（列表与详情页） ├── contact.html / book-appointment.html ├── cart.html / checkout.html ├── tailwind.config.js ├── package.json ├── dist/ │ ├── output-tailwind.css │ └── output-scss.css └── assets/ ├── images/ ├── css/ └── scss/ ``` ## 核心文件说明 - `index.html` — 首页入口，整合 Tailwind 与 SCSS 输出样式 - `tailwind.config.js` — Tailwind 构建配置，可扩展主题色与组件 - `package.json` — 定义 tailwindcss 与 sass 依赖及构建脚本 - `book-appointment.html` — 预约表单页面，含服务选择与提交逻辑 - `contact.html` — 联系页面，含地图区域与联系信息 - `our-projects1.html` — 项目案例展示，支持多图网格布局 ## 快速开始 ```bash # 1. 进入项目目录 cd hadiman-html # 2. 安装依赖 npm install # 3. 启动 Tailwind 监听编译 npm run tailwindcss # 4. 另起终端启动 SCSS 监听编译 npm run sass # 5. 用 Live Server 打开 index.html 或直接浏览器访问 ``` ## 使用建议 模板通过 `tailwind.config.js` 定义了配色与排版变量，如需修改主题色或字体，建议优先调整该配置文件；多页面间的公共头部和底部需手动同步维护，适合有一定 HTML 基础的用户进行二次开发。