项目简介
Hadiman 是一套面向维修与装修服务企业的 HTML 模板,提供首页变体、案例展示、产品页、博客、预约表单等完整业务页面,基于 Tailwind CSS 构建,支持 SCSS 自定义样式,适合快速搭建装修公司或工匠服务官网。
技术栈
- Tailwind CSS 3.4.x(CSS 框架)
- SCSS/SASS(样式预处理)
- jQuery(文档导航脚本)
- npm(项目依赖管理)
项目结构
text
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 基础的用户进行二次开发。
