CyberGuard - Cybersecurity Service HTML Template

# 项目简介 CyberGuard 是一款面向网络安全服务企业的静态 HTML 模板，基于 Bootstrap 构建，提供首页、关于页、服务详情、博客、项目展示、联系表单等完整页面。内置深色/浅色主题切换、三套配色方案，适合安全公司、渗透测试服务商或 MSP（托管服务提供商）快速搭建官网。 ## 技术栈 - Bootstrap 5（CSS 框架） - Swiper.js（轮播组件） - Google Fonts：Urbanist / DM Sans - Font Awesome 4 & 6、ET Line Icons、Icofont（图标库） - PHP（仅 contact.php / booking.php 用于表单后端） ## 项目结构 ``` CyberGuard HTML/ ├── index.html # 首页（主入口） ├── homepage-2.html # 首页变体 ├── about.html # 关于我们 ├── services.html # 服务列表 ├── service-single.html # 单个服务详情 ├── projects.html # 项目案例 ├── project-single.html # 单个案例详情 ├── blog.html # 博客列表 ├── blog-single.html # 博客文章 ├── pricing.html # 定价页 ├── appointment.html # 预约页 ├── contact.html # 联系我们（静态） ├── contact.php # 联系我们（PHP 表单） ├── booking.php # 预约表单后端 ├── css/ │ ├── style.css # 主样式（含 CSS 变量） │ ├── bootstrap.min.css # Bootstrap │ ├── swiper.css # Swiper 轮播 │ ├── plugins.css # 插件样式 │ ├── colors/ │ │ ├── scheme-1.css # 配色方案 1（默认） │ │ ├── scheme-2.css # 配色方案 2 │ │ └── scheme-3.css # 配色方案 3 │ └── custom-swiper-1.css └── images/ # 图标、Logo、背景图 ``` ## 核心文件说明 - `index.html` — 首页入口，包含 Banner、特性展示、案例轮播等区块 - `css/style.css` — 全局样式与 CSS 变量（颜色、字体、间距均在顶部定义） - `css/colors/scheme-*.css` — 三套配色方案，通过修改 `href` 路径即可切换 - `contact.php` — 表单处理后端（需配合 PHP 服务器环境使用） - `appointment.html` — 预约/试用入口页面 - `fonts/` — 包含 et-line / icofont / fontawesome 等图标字体，无需额外安装 ## 快速开始 1. 直接用浏览器打开 `index.html`，即可预览完整页面。 2. 如需本地服务器热更新（推荐），可在目录下运行： ```bash # Python 3 python -m http.server 8000 ``` 然后访问 `http://localhost:8000` 3. 使用 PHP 表单功能需将项目部署至支持 PHP 的 Web 服务器（如 XAMPP、Laragon）。 ## 使用建议 - 模板内置深色主题类 `.dark-scheme`，在 `body` 上添加该 class 即可切换暗色模式；配色方案通过替换 `css/colors/` 下的文件实现。 - 所有图标均以字体形式引入，修改颜色直接通过 CSS `color` 属性即可，无需替换图片。