Hadiman - 勤杂工装修服务 HTML 模板 preview 1

Hadiman - 勤杂工装修服务 HTML 模板

bookmark

Hadiman 是一套面向维修与装修服务企业的 HTML 模板,提供首页变体、案例展示、产品页、博客、预约表单等完整业务页面,基于 Tailwind CSS 构建,支持 SCSS 自定义样式,适合快速搭建装修公司或工匠服务官网。

HTML

项目简介

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 基础的用户进行二次开发。

help_outline

常见问题