OpenCity - 政治和政府 HTML 模板

# 项目简介 OpenCity 是一套响应式城市/政府机构 HTML5 网站模板，包含首页四个变体以及关于、博客、服务、团队、活动、联系方式等完整内页。模板采用 Bootstrap 框架，支持现代化浏览器，适合构建政府门户、城市介绍或公共服务类网站。 ## 技术栈 - Bootstrap 5.0.2（响应式布局框架） - jQuery（DOM 操作与交互） - Owl Carousel（轮播组件） - AOS（滚动动画） - Font Awesome / Flaticon（图标） - Google Fonts（Poppins + Manjari 字体） ## 项目结构 ``` 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 中的引用