Plumbor - 水管工服务 HTML5 模板 preview 1

Plumbor - 水管工服务 HTML5 模板

bookmark

Plumbor 是一款面向水管维修服务行业的多页面 HTML5 模板，提供首页、作品集、博客、在线商店、预约及常见问题等功能页面。模板基于 Bootstrap 5 框架，响应式布局，适配 PC 和移动端，适合水管工、维修公司快速搭建官网。

HTMLarchitecturecleaningconstructionelectricianhandymanmaintenancemodern

项目简介

Plumbor 是一款面向水管维修服务行业的多页面 HTML5 模板，提供首页、作品集、博客、在线商店、预约及常见问题等功能页面。模板基于 Bootstrap 5 框架，响应式布局，适配 PC 和移动端，适合水管工、维修公司快速搭建官网。

技术栈

  • Bootstrap 5.0.1（核心布局框架）
  • jQuery（交互与 DOM 操作）
  • PHP（仅 mail-contact.php，用于处理联系表单邮件发送）
  • Open Sans / Open Sans Condensed（Google Fonts）
  • Font Awesome（图标字体）

项目结构

text
plumborhtml-10/downloadable/
├── plumber/                    # 模板主目录
│   ├── index.html              # 首页（风格1）
│   ├── index-2.html            # 首页（风格2）
│   ├── index-3.html            # 首页（风格3）
│   ├── about.html              # 关于我们
│   ├── contact.html            # 联系页面
│   ├── appoinment.html         # 预约页面
│   ├── blog*.html              # 博客相关页面
│   ├── shop*.html              # 商城相关页面
│   ├── project*.html           # 项目案例页面
│   ├── team*.html              # 团队页面
│   ├── faq.html                # 常见问题
│   ├── mail-contact.php        # 邮件处理脚本
│   └── assets/
│       ├── css/                # 样式文件（含 SASS 源文件）
│       ├── js/                 # JS 脚本
│       ├── images/             # 图片资源
│       └── sass/               # SASS 源文件
└── documentation/              # 官方文档目录
    ├── index.html
    ├── css/
    ├── js/
    ├── fonts/
    └── images/

核心文件说明

  • plumber/index.html — 模板主入口页面（Home style 1）
  • plumber/assets/css/style.css — 主样式文件
  • plumber/assets/js/script.js — 主脚本逻辑
  • plumber/mail-contact.php — 联系表单邮件发送后端脚本
  • plumber/assets/sass/style.scss — SASS 源文件，可自行编译定制
  • documentation/index.html — 官方模板使用文档

快速开始

  1. 将 plumber/ 目录部署至 Web 服务器（如 Apache/Nginx）或通过 VS Code Live Server 等本地服务器打开
  2. 直接在浏览器访问 index.html 即可预览效果
  3. 联系表单需配合 PHP 环境使用，部署前修改 mail-contact.php 中的 $to 收件邮箱地址

使用建议

  • 修改 assets/sass/style.scss 可定制主题颜色和样式，再编译为 CSS
  • 若无需商城或博客页面，可直接删除对应 HTML 文件，减少冗余
help_outline

常见问题