Bizos - Creative Agency HTML Template

# 项目简介 Bizos 是一套面向创意机构、数字营销公司及自由职业者的响应式 HTML5 模板，包含首页、服务、作品集、团队、定价、博客、电商、问答等 20+ 完整页面，支持二级导航、轮播、灯箱、FAQ 等交互功能，可直接用于快速搭建企业官网或作品展示站点。 ## 技术栈 - **前端框架**: Bootstrap 5（通过 CDN 引入） - **导航组件**: BSnav（Bootstrap Navigation 定制导航） - **动画库**: Animate.css、FontAwesome 6 - **图标**: Themify Icons、IcoFont、Flaticon、Bootstrap Icons - **交互组件**: Magnific Popup（灯箱）、Swiper Slider（轮播）、jQuery UI - **字体**: Google Fonts（Roboto、Lato） - **预处理器**: 无（纯静态 HTML/CSS，CSS 变量定义主题色） ## 项目结构 ``` bizoshtml-10/source/ ├── bizos/ # 主题主目录 │ ├── index.html # 首页 │ ├── index-2.html # 首页变体 │ ├── about.html # 关于我们 │ ├── service.html # 服务列表 │ ├── service-single.html # 服务详情 │ ├── gallery.html # 项目/作品展示 │ ├── project-single.html # 项目详情 │ ├── team.html # 团队成员 │ ├── team-single.html # 成员详情 │ ├── price.html # 定价方案 │ ├── review.html # 客户评价 │ ├── blog.html # 博客列表 │ ├── blog-standard.html # 标准博客 │ ├── single.html # 博客详情 │ ├── shop.html # 商城首页 │ ├── product-single.html # 商品详情 │ ├── cart.html # 购物车 │ ├── checkout.html # 结账 │ ├── contact.html # 联系我们 │ ├── faq.html # 常见问题 │ ├── appointment.html # 预约 │ ├── login.html # 登录 │ ├── register.html # 注册 │ ├── 404.html # 404 页面 │ ├── style.css # 自定义样式（空，供二次开发） │ └── assets/ │ ├── style.css # 主题完整样式表 │ └── css/ # 各模块样式（responsive、preloader 等） └── documentation/ # 官方文档 └── index.html ``` ## 核心文件说明 - `bizos/index.html` — 模板入口首页，包含顶部导航、轮播区块、服务介绍、团队展示等 - `bizos/assets/style.css` — 主题主体样式，定义了颜色变量（--clr-def 等）、排版、布局及所有组件样式 - `bizos/style.css` — 预留自定义样式文件，默认留空，开发时在此覆盖主题默认样式 - `bizos/assets/css/bsnav.min.css` — BSnav 导航组件样式，负责响应式下拉菜单与粘性导航 - `bizos/assets/css/swiper-bundle.min.css` — Swiper 轮播插件样式 - `documentation/index.html` — 官方文档页，说明模板结构与修改方式 ## 快速开始 1. 进入 `bizoshtml-10/source/bizos/` 目录 2. 直接用浏览器打开 `index.html` 即可预览完整效果 3. 如需本地服务器运行，可使用任一静态服务器工具，例如： ```bash # Python 3 python -m http.server 8080 # Node.js (npx) npx serve . ``` 4. 修改模板内容时，用代码编辑器（如 VS Code）打开 HTML 文件，搜索并替换占位文字（如联系方式、团队信息）后保存即可。 ## 使用建议 - 模板中 `style.css` 为空文件，建议所有自定义样式统一写在此文件中，避免直接修改 `assets/style.css`，便于后续主题更新。 - 该模板内置电商页面（shop、cart、checkout），但不含后端逻辑，如需完整购物功能需对接第三方电商 SaaS 或自行开发后端接口。