项目简介
Consulo 是一款面向企业客户和专业商务服务的 Bootstrap 5 多页面 HTML 模板，包含首页、关于我们、博客、服务、项目、团队、定价等多个完整页面。内置粘性导航栏、滚动动画、响应式抽屉菜单等交互功能，适合作为企业官网或咨询公司展示站点的基础模板。
技术栈
- Bootstrap 5（响应式布局框架）
- 原生 HTML5 / CSS3 / JavaScript
- 自定义 Web Components（StickyHeader、ScrollTop、DrawerOpener）
- Google Fonts（Inter + Poppins）
- AOS（Animate On Scroll 动画库）
项目结构
text
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 Componentsassets/css/style.css— 主样式表，定义了完整的设计系统变量（颜色、字体、间距等）assets/scss/— SCSS 源码目录，可通过修改变量自定义主题contact.html— 包含联系表单布局，表单提交逻辑需后端对接assets/css/base.css— CSS 基础重置与工具类
快速开始
- 直接在浏览器打开
consulohtml-10/Consulo HTML/index.html即可预览全部页面 - 如需修改样式，建议使用 SCSS 源码重新编译：
- 安装依赖：
npm install - 编译 SCSS：
npm run sass
- 安装依赖：
- 模板使用 Google Fonts CDN，无需额外安装字体
使用建议
该模板适合快速搭建企业官网，页面结构完整但无后端逻辑，联系表单等交互功能需要自行对接后端服务。模板样式通过 CSS 变量集中管理，可通过修改 assets/css/style.css 顶部的 :root 变量快速调整品牌配色和字体。
