
Charity Compassion - Nonprofit, Donation, Charity HTML5 Template
# 项目简介
Charity Sympathy 是一套基于 Bootstrap 3.3.4 的响应式慈善机构 HTML5 网站模板,包含首页、关于页、博客、活动、捐款项目、商店及联系表单等完整页面,适合公益组织、慈善基金会或社会救助类网站快速搭建。
## 技术栈
- Bootstrap 3.3.4(响应式框架)
- jQuery(DOM 操作与交互)
- Google Fonts(Montserrat + Open Sans)
- Font Awesome 4.x(图标库)
- Owl Carousel / bxSlider(轮播组件)
- FancyBox(图片灯箱)
- Rev Slider(首页滑块,依赖配套 CSS/JS)
- PHP(sendmail.php,联系表单后端)
## 项目结构
```
Charity-sympathy/
├── index.html # 首页入口
├── index-2.html # 首页变体二
├── index-3.html # 首页变体三
├── about.html # 关于我们
├── blog-large.html # 博客列表页
├── blog-details.html # 博客详情页
├── causes.html # 捐款项目列表
├── single-cause.html # 单个项目详情
├── event.html # 活动列表
├── event-details.html # 活动详情
├── shop.html # 商品列表
├── shop-single.html # 商品详情
├── contact.html # 联系页面
├── error.html # 404 错误页
├── sendmail.php # 表单后端
├── css/
│ ├── style.css # 主样式表
│ ├── responsive.css # 响应式断点
│ ├── bootstrap.min.css # Bootstrap 核心
│ └── ... # 其他组件样式
├── js/
│ ├── bootstrap.min.js
│ ├── custom.js # 自定义脚本
│ ├── bxslider.js # 轮播
│ └── ...
└── fonts/ # 图标字体
```
## 核心文件说明
- `Charity-sympathy/index.html` — 网站首页入口
- `Charity-sympathy/css/style.css` — 主样式表,定义全局布局与主题色
- `Charity-sympathy/js/custom.js` — 自定义交互逻辑(导航、动画等)
- `Charity-sympathy/sendmail.php` — 联系表单邮件发送脚本
- `Charity-sympathy/contact.html` — 联系我们页面(含表单)
- `Charity-sympathy/css/responsive.css` — 移动端响应式适配
## 快速开始
1. 直接在浏览器打开 `Charity-sympathy/index.html` 即可预览完整效果
2. 如需使用联系表单,将项目部署至支持 PHP 的 Web 服务器(如 Apache/Nginx)
3. 根据实际需求修改 `css/style.css` 中的主题色(如 `#ff2e3d` 为主色调)
## 使用建议
本模板为纯静态页面,适合快速原型或中小型慈善机构使用。部署前建议检查 `sendmail.php` 的邮件配置(如 SMTP),确保表单功能正常;如无需后端功能,可直接作为纯前端项目使用。
help_outline
FAQ
Comments0
PublishedJan 20, 2026
Tech Stack
HTML