项目简介
OpenCity 是一套响应式城市/政府机构 HTML5 网站模板，包含首页四个变体以及关于、博客、服务、团队、活动、联系方式等完整内页。模板采用 Bootstrap 框架，支持现代化浏览器，适合构建政府门户、城市介绍或公共服务类网站。
技术栈
- Bootstrap 5.0.2（响应式布局框架）
- jQuery（DOM 操作与交互）
- Owl Carousel（轮播组件）
- AOS（滚动动画）
- Font Awesome / Flaticon（图标）
- Google Fonts（Poppins + Manjari 字体）
项目结构
text
opencityhtml-10/OpenCity Pack/
├── Doc/ # 模板使用文档
│ ├── index.html
│ ├── css/
│ │ ├── bootstrap.css
│ │ ├── font-awesome.css
│ │ ├── scrollbar.css
│ │ └── style.css
│ ├── fonts/
│ └── images/
└── OpenCity/ # 主模板目录
├── index.html # 首页主文件
├── index-2/3/4.html # 首页变体
├── about.html # 关于我们
├── blog.html # 博客列表
├── contact.html # 联系方式
├── services.html # 服务项目
├── team.html # 团队成员
├── event.html # 活动列表
├── css/ # 所有样式文件
│ ├── style.css # 主样式
│ ├── bootstrap.css
│ ├── responsive.css
│ └── ...
├── js/ # 所有脚本文件
│ ├── main.js # 核心交互逻辑
│ ├── aos.js
│ └── ...
├── fonts/
└── images/
核心文件说明
OpenCity/index.html— 首页主入口，包含顶部导航、幻灯片、核心功能区块OpenCity/css/style.css— 主样式文件，定义全站视觉风格与组件样式OpenCity/js/main.js— 核心交互逻辑，含预加载动画、导航切换、表单验证、轮播初始化OpenCity/css/responsive.css— 多端响应式适配样式Doc/index.html— 官方模板文档，说明 HTML 结构与自定义方式
快速开始
纯静态模板，无需安装依赖。直接在浏览器中打开 OpenCity/index.html 即可预览完整效果。如需本地服务器运行：
bash
# 使用 Python 3
python -m http.server 8080
# 或使用 VS Code Live Server 插件
使用建议
- 首页提供四个风格变体（index.html ~ index-4.html），可根据实际需求选择或组合
- 模板内含联系表单（#contact-form），需自行对接后端服务或使用第三方表单平台
- 所有图片资源位于
images/目录，替换时应保持相同路径或同步更新 CSS/HTML 中的引用
