Consulo - Business Consulting Bootstrap 5 HTML Template

# 项目简介 Consulo 是一款面向企业客户和专业商务服务的 Bootstrap 5 多页面 HTML 模板，包含首页、关于我们、博客、服务、项目、团队、定价等多个完整页面。内置粘性导航栏、滚动动画、响应式抽屉菜单等交互功能，适合作为企业官网或咨询公司展示站点的基础模板。 ## 技术栈 - Bootstrap 5（响应式布局框架） - 原生 HTML5 / CSS3 / JavaScript - 自定义 Web Components（StickyHeader、ScrollTop、DrawerOpener） - Google Fonts（Inter + Poppins） - AOS（Animate On Scroll 动画库） ## 项目结构 ``` consulohtml-10/Consulo HTML/ ├── index.html # 首页入口 ├── about.html # 关于我们 ├── blog.html # 博客列表 ├── blog-list.html # 博客列表页 ├── blog-details.html # 博客详情 ├── services.html # 服务列表 ├── service-details.html # 服务详情 ├── project.html # 项目展示 ├── project-details.html # 项目详情 ├── team.html # 团队成员 ├── team-details.html # 成员详情 ├── pricing-plan.html # 定价方案 ├── contact.html # 联系我们 ├── faq.html # 常见问题 ├── error.html # 错误页面 ├── privacy-policy.html # 隐私政策 ├── terms-condition.html # 使用条款 └── assets/ ├── css/ # 编译后的样式文件 ├── scss/ # SCSS 源码（可自定义变量） ├── js/ │ ├── main.js # 核心交互逻辑 │ └── vendor.js # 第三方依赖 └── img/ # 图片资源 ``` ## 核心文件说明 - `index.html` — 首页模板，包含 Hero 区域和服务展示 - `assets/js/main.js` — 实现粘性导航、滚动置顶按钮、抽屉菜单的 Web Components - `assets/css/style.css` — 主样式表，定义了完整的设计系统变量（颜色、字体、间距等） - `assets/scss/` — SCSS 源码目录，可通过修改变量自定义主题 - `contact.html` — 包含联系表单布局，表单提交逻辑需后端对接 - `assets/css/base.css` — CSS 基础重置与工具类 ## 快速开始 1. 直接在浏览器打开 `consulohtml-10/Consulo HTML/index.html` 即可预览全部页面 2. 如需修改样式，建议使用 SCSS 源码重新编译： - 安装依赖：`npm install` - 编译 SCSS：`npm run sass` 3. 模板使用 Google Fonts CDN，无需额外安装字体 ## 使用建议 该模板适合快速搭建企业官网，页面结构完整但无后端逻辑，联系表单等交互功能需要自行对接后端服务。模板样式通过 CSS 变量集中管理，可通过修改 `assets/css/style.css` 顶部的 `:root` 变量快速调整品牌配色和字体。