Binifox - 数字代理服务 HTML5 模板 preview 1

Binifox - 数字代理服务 HTML5 模板

bookmark

Binifox 是一套面向数字 agency 的静态网站模板，包含首页、关于、案例、服务、团队、博客等 12 个页面，集成 Swiper 轮播、Isotope 筛选、MeanMenu 移动端导航等交互组件，适合快速搭建代理、设计或咨询类公司官网。

HTML

项目简介

Binifox 是一套面向数字 agency 的静态网站模板，包含首页、关于、案例、服务、团队、博客等 12 个页面，集成 Swiper 轮播、Isotope 筛选、MeanMenu 移动端导航等交互组件，适合快速搭建代理、设计或咨询类公司官网。

技术栈

  • HTML5 + CSS3
  • Bootstrap 5（栅格系统、响应式工具类）
  • jQuery（DOM 操作与插件调用）
  • Swiper（Hero 幻灯片 / 团队 / 评价轮播）
  • OwlCarousel（备用轮播组件）
  • MeanMenu（移动端汉堡菜单）
  • Isotope（Portfolio 筛选布局）

项目结构

text
binifoxhtml-10/
├── binifox/
│   ├── index.html              # 首页
│   ├── index-2.html            # 首页变体
│   ├── about.html
│   ├── services.html           # 服务列表
│   ├── services-details.html
│   ├── portfolio.html          # 案例（含筛选）
│   ├── portfolio-details.html
│   ├── team.html               # 团队
│   ├── team-details.html
│   ├── blog.html               # 新闻列表
│   ├── blog-details.html
│   ├── contact.html            # 联系表单
│   ├── pricing.html
│   ├── faq.html
│   ├── error.html              # 404 页面
│   └── assets/
│       ├── css/
│       │   ├── style.css       # 主题全部样式
│       │   ├── bootstrap.min.css
│       │   └── ...
│       ├── js/
│       │   ├── main.js         # 全部交互逻辑
│       │   └── ...
│       └── img/
└── documentation/              # 官方说明文档

核心文件说明

  • binifox/index.html — 主入口页面，包含完整结构与全功能演示
  • binifox/assets/css/style.css — 主题全部样式，定义配色、排版、组件样式
  • binifox/assets/js/main.js — 所有交互逻辑（轮播、筛选、粘性导航、滚动置顶等）
  • binifox/assets/css/bootstrap.min.css — Bootstrap 5 基础栅格与工具类
  • binifox/contact.html — 联系表单页面，依赖 assets/js/ajax-form.js 异步提交
  • documentation/index.html — 官方文档，包含安装步骤与文件结构说明

快速开始

纯静态项目，无需构建工具。将 binifox/ 目录部署至任意 Web 服务器或直接用浏览器打开 index.html 即可本地预览。如需本地服务：

bash
# Python 3
python -m http.server 8080

# Node.js
npx serve

使用建议

  • 直接替换 assets/img/ 中的图片并修改 style.css 中的颜色变量即可完成换肤
  • 联系表单（contact.html）依赖 assets/js/ajax-form.js，实际使用需配合后端或接入第三方表单服务
  • 移动端导航由 MeanMenu 处理，导航数据写在各 HTML 的 <nav> 标签内，可按需增删
help_outline

常见问题