Binifox - Digital Agency Service HTML5 Template

# 项目简介 Binifox 是一套面向数字 agency 的静态网站模板，包含首页、关于、案例、服务、团队、博客等 12 个页面，集成 Swiper 轮播、Isotope 筛选、MeanMenu 移动端导航等交互组件，适合快速搭建代理、设计或咨询类公司官网。 ## 技术栈 - HTML5 + CSS3 - Bootstrap 5（栅格系统、响应式工具类） - jQuery（DOM 操作与插件调用） - Swiper（Hero 幻灯片 / 团队 / 评价轮播） - OwlCarousel（备用轮播组件） - MeanMenu（移动端汉堡菜单） - Isotope（Portfolio 筛选布局） ## 项目结构 ``` 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>` 标签内，可按需增删