WebSphere - Web Hosting HTML Template

# 项目简介 Websphere 是一个面向互联网服务商的静态 HTML 网站模板，包含首页、服务介绍、产品展示、博客等多个页面，布局清晰、交互完善。使用 Bootstrap 框架构建，附带 PHP 联系表单，适合快速搭建 VPS、域名、主机等业务的展示站点。 ## 技术栈 - Bootstrap 5.x（响应式布局框架） - HTML5 + CSS3（静态页面结构） - Font Awesome 6（图标库） - Owl Carousel 2（轮播组件） - jQuery UI Slider（价格滑块） - PHP（联系表单后端） ## 项目结构 ``` webspherehtml-10/ ├── documentation/ │ └── doc.html └── websphere/ ├── index.html # 首页 ├── about.html # 关于我们 ├── services.html # 服务列表 ├── pricing.html # 定价页面 ├── shop.html # 产品商店 ├── contact.html # 联系页面 ├── blog.html # 博客列表 ├── assets/ │ ├── bootstrap/ # Bootstrap CSS │ ├── css/ # 自定义样式 │ └── images/ # 图片资源 └── contact-form.php # 表单处理脚本 ``` ## 核心文件说明 - `websphere/index.html` — 首页入口，包含 Banner、服务展示、客户评价等模块 - `websphere/assets/bootstrap/bootstrap.min.css` — Bootstrap 框架核心样式表 - `websphere/assets/css/custom.css` — 覆盖框架默认样式，实现主题视觉 - `websphere/contact-form.php` — 接收前端表单数据并发送邮件的后端脚本 - `websphere/assets/css/owl.carousel.min.css` — 轮播图样式配置 ## 快速开始 **方式一：本地预览** 直接双击 `websphere/index.html` 或使用 Live Server 插件在 VS Code 中打开。 **方式二：本地服务器（支持联系表单功能）** ```bash # 如果使用 PHP 内置服务器 cd webspherehtml-10/websphere php -S localhost:8000 ``` 然后访问 `http://localhost:8000/contact.html` 测试表单提交。 ## 使用建议 - 部署前需将 `contact-form.php` 中的目标邮箱 `sumayyah.farooq@devbunch.com` 替换为实际业务邮箱，并确保服务器已配置邮件发送功能（mail() 函数）。 - 图片资源位于 `assets/images/`，替换时应保持相同文件命名或同步修改 CSS 中的引用路径。