
WebFlux - 数字代理 HTML 模板
# 项目简介
WebFlux 是一套基于 Bootstrap 的多页面商业网站模板,提供首页三套变体(index / index2 / index3),内置关于我们、博客、商店、产品详情、团队、案例、定价等完整页面,适合快速搭建企业官网或电商展示站点。
## 技术栈
- Bootstrap 5(CSS 框架)
- Owl Carousel 2(轮播组件)
- jQuery UI Slider(价格区间滑块)
- Font Awesome 6(图标库)
- PHP(联系表单后端处理)
## 项目结构
```
webfluxhtml-10/
documentation/
webflux/
index.html # 首页变体一
index2.html # 首页变体二
index3.html # 首页变体三
about.html # 关于我们
blog.html # 博客列表
shop.html # 商城
product-detail.html
cart.html
checkout.html
contact.html # 联系页
contact-form.php # 表单后端
team.html
testimonial.html
pricing.html
project.html
services.html
assets/
bootstrap/
bootstrap.min.css
css/
custom.css, responsive.css
owl.carousel.min.css
priceslider.css
images/
```
## 核心文件说明
- `index.html` — 主入口页面,包含 Banner、服务特色、案例展示等区块
- `contact-form.php` — 处理 contact.html 提交的数据,发送邮件至指定地址
- `assets/css/priceslider.css` — jQuery UI 价格滑块样式,用于商城筛选
- `assets/bootstrap/bootstrap.min.css` — Bootstrap 核心样式表
- `assets/css/owl.carousel.min.css` + `owl.theme.default.min.css` — 轮播组件样式
- `shop.html` — 商城列表页,含分类筛选与价格滑块
## 快速开始
1. 直接在浏览器打开 `webflux/index.html` 预览完整效果
2. 若需使用联系表单,请将整个 `webflux` 文件夹部署至支持 PHP 的 Web 服务器
3. 修改 `contact-form.php` 中的 `$to_email` 为实际收件邮箱
## 使用建议
- 本模板为纯静态页面,适合直接修改 HTML/CSS 内容后部署至任意静态托管服务
- 联系表单依赖 PHP `mail()` 函数,线上环境建议替换为 SendGrid / PHPMailer 等更可靠的邮件方案
- 页面中大量使用绝对定位和固定高度,移动端适配需额外关注 `responsive.css` 中的断点样式
help_outline
常见问题
评论0
发布时间Jan 20, 2026
技术栈
HTML