
NetNova - 虚拟主机 HTML 模板
# 项目简介
NetNova 是一套面向主机托管 / ISP 行业的多页面 HTML 静态网站模板,首页提供 3 种风格变体(index.html / index1.html / index2.html),并包含域名、VPS、Reseller、Shared、Dedicated 等产品展示页面。模板基于 Bootstrap 构建,天然支持响应式布局,适合快速搭建主机服务商官网。
## 技术栈
- Bootstrap 5(CSS 框架)
- 原生 HTML5 + CSS3
- JavaScript / jQuery(Owl Carousel、AOS 动画、jQuery UI Slider)
- PHP(仅 contact-form.php 处理联系表单邮件发送)
## 项目结构
```
netnovahtml-10/
netnova/
index.html # 首页变体一
index1.html # 首页变体二
index2.html # 首页变体三
about.html
blog.html / single-blog.html
shop.html / cart.html / checkout.html / product-detail.html
pricing.html
domain.html / vps.html / reseller.html / shared.html / dedicated.html
contact.html
contact-form.php # 联系表单后端
404.html / coming-soon.html
assets/
css/ # 样式文件(含 responsive、shop、priceslider 等)
bootstrap/ # Bootstrap 核心 CSS
images/ # 图标与配图
```
## 核心文件说明
- `netnova/index.html` — 模板主入口,包含完整页面结构与导航
- `netnova/assets/css/style.css` — 全局样式表,定义颜色变量(--e-global-color-*)、字体及组件基础样式
- `netnova/assets/css/responsive.css` — 响应式断点样式
- `netnova/contact-form.php` — 联系表单后端,接收 POST 数据并通过 PHP `mail()` 发送邮件
- `netnova/assets/css/priceslider.css` — VPS 方案价格滑块样式,依赖 jQuery UI Slider
- `netnova/assets/js/` — 需配合 Owl Carousel、AOS 等 JS 库使用(位于 assets/js 目录)
## 快速开始
1. 将 `netnova` 文件夹部署至任意 Web 服务器(如 Nginx / Apache)或使用 VS Code Live Server 插件打开
2. 在浏览器访问 `index.html` 即可预览完整效果
3. 如需联系表单功能,需将 `contact-form.php` 部署至支持 PHP 的服务器,并确保服务器已配置 `sendmail`
## 使用建议
- 仅修改 `index.html` 系列首页时,可直接复制现有结构快速换肤
- 生产环境请务必替换 `contact-form.php` 中的目标邮箱地址,并考虑使用 PHPMailer 等更安全的邮件发送方案
- 图片资源位于 `assets/images/`,建议压缩后使用以提升加载速度
help_outline
常见问题
评论0
发布时间Jan 20, 2026
技术栈
HTML