Bricknet - 建筑公司网站 Tailwind 模板 preview 1

Bricknet - 建筑公司网站 Tailwind 模板

bookmark

Bricknet 是一款面向建筑/工程公司的静态 HTML 网站模板，由 PeterDraw Studio 出品。该模板基于 TailwindCSS v4 构建，无需 jQuery，提供首页、关于、案例、详情、联系等多个页面，适合快速搭建专业的建筑企业展示站。

HTMLarchitecturebusinesscompany profileconstructionconstruction companycontractorengineering

项目简介

Bricknet 是一款面向建筑/工程公司的静态 HTML 网站模板，由 PeterDraw Studio 出品。该模板基于 TailwindCSS v4 构建，无需 jQuery，提供首页、关于、案例、详情、联系等多个页面，适合快速搭建专业的建筑企业展示站。

技术栈

  • HTML5 — 语义化标签，SEO 友好
  • TailwindCSS v4 — 样式框架（预编译为单 CSS 文件）
  • Vanilla JavaScript — 交互逻辑，无外部依赖
  • AOS.js — 页面滚动动画（CDN）
  • Swiper.js — 轮播图与幻灯片（CDN）
  • Shuffle.js — 案例画廊筛选（CDN）
  • Plyr.js — 视频播放器，支持 HTML5/YouTube/Vimeo（CDN）
  • Phosphor Icons — 图标库（CDN）
  • Formspree — 表单后端服务

项目结构

text
bricknet-template/
├── bricknet-html/
│   ├── index.html          # 首页
│   ├── home.html           # 首页（另版）
│   ├── about.html          # 关于我们
│   ├── projects.html       # 案例列表
│   ├── project-details.html # 案例详情
│   ├── contact.html        # 联系我们
│   ├── assets/
│   │   └── main-BL-C0xJq.css
│   ├── js/
│   │   └── main.js
│   ├── images/             # WebP 图片资源
│   └── *.webmanifest       # PWA 清单
└── bricknet-doc/
    └── index.html          # 官方文档

核心文件说明

  • bricknet-html/index.html — 网站首页入口
  • bricknet-html/assets/main-BL-C0xJq.css — 编译后的 TailwindCSS 样式表
  • bricknet-html/js/main.js — 导航栏滚动变色、移动端菜单、视频背景自动播放等交互
  • bricknet-html/projects.html — 案例画廊，支持 Shuffle.js 筛选
  • bricknet-html/contact.html — 联系表单，集成 Formspree
  • bricknet-doc/index.html — 完整使用文档（包含 CDN 资源、部署方式等）

快速开始

  1. 将 bricknet-template/bricknet-html/ 目录部署到任意 Web 服务器或静态托管平台
  2. 在浏览器中打开 index.html 即可预览

使用建议

  • 如需修改样式，可直接编辑 assets/main-BL-C0xJq.css（或基于 TailwindCSS 源码重新编译）
  • 视频背景默认静音自动播放，建议提前准备 WebP 格式的占位图作为降级方案
help_outline

常见问题