WebSphere - 虚拟主机 HTML 模板 preview 1

WebSphere - 虚拟主机 HTML 模板

bookmark

Websphere 是一个面向互联网服务商的静态 HTML 网站模板，包含首页、服务介绍、产品展示、博客等多个页面，布局清晰、交互完善。使用 Bootstrap 框架构建，附带 PHP 联系表单，适合快速搭建 VPS、域名、主机等业务的展示站点。

HTML

项目简介

Websphere 是一个面向互联网服务商的静态 HTML 网站模板，包含首页、服务介绍、产品展示、博客等多个页面，布局清晰、交互完善。使用 Bootstrap 框架构建，附带 PHP 联系表单，适合快速搭建 VPS、域名、主机等业务的展示站点。

技术栈

  • Bootstrap 5.x（响应式布局框架）
  • HTML5 + CSS3（静态页面结构）
  • Font Awesome 6（图标库）
  • Owl Carousel 2（轮播组件）
  • jQuery UI Slider（价格滑块）
  • PHP（联系表单后端）

项目结构

text
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 中的引用路径。
help_outline

常见问题