慈善同情 - 非营利组织、捐赠、慈善 HTML5 模板 preview 1

慈善同情 - 非营利组织、捐赠、慈善 HTML5 模板

bookmark

Charity Sympathy 是一套基于 Bootstrap 3.3.4 的响应式慈善机构 HTML5 网站模板，包含首页、关于页、博客、活动、捐款项目、商店及联系表单等完整页面，适合公益组织、慈善基金会或社会救助类网站快速搭建。

HTML

项目简介

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，联系表单后端）

项目结构

text
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

常见问题