Housey - Resort and Hotel HTML Template

# 项目简介 Housey 是一套基于 Bootstrap 的度假村与酒店预订 HTML 模板，包含首页、房间列表、博客、购物车、结账等多个业务页面，适合快速搭建旅游住宿类网站。模板提供了 5 种首页风格和完整的响应式布局。 ## 技术栈 - Bootstrap 5（CSS 框架） - jQuery（DOM 操作与交互） - Swiper（轮播滑动） - Magnific Popup（图片/视频弹窗） - Flatpickr（日期选择） - ion RangeSlider（价格区间滑块） - Font Awesome Pro（图标） ## 项目结构 ``` houseyhtml-10/ ├── documentation/ # 模板文档 │ ├── index.html │ └── assets/ ├── housey/ # 模板主体 │ ├── index.html # 首页（多版本 index-2~5.html） │ ├── room-*.html # 房间列表页 │ ├── room-details-*.html # 房间详情页 │ ├── blog-*.html # 博客相关页面 │ ├── cart.html # 购物车 │ ├── checkout.html # 结账 │ ├── wishlist.html # 收藏 │ ├── contact.html # 联系页 │ ├── pricing-plan.html # 价格方案 │ └── assets/ │ ├── css/main.css # 主样式文件 │ └── js/main.js # 交互脚本 ``` ## 核心文件说明 - `housey/index.html` — 主首页入口文件 - `housey/assets/css/main.css` — 全部页面样式（含主题色变量定义） - `housey/assets/js/main.js` — 核心交互逻辑（导航、轮播、数量增减等） - `housey/assets/css/bootstrap.css` — Bootstrap 5 基础框架样式 - `housey/assets/css/swiper-bundle.css` — 轮播组件样式 - `housey/assets/mail.php` — 联系表单后端邮件发送脚本 ## 快速开始 1. 进入 `housey/` 目录 2. 直接用浏览器打开 `index.html` 即可预览 3. 如需本地服务，可使用任意静态服务器： ```bash npx serve housey ``` ## 使用建议 - 正式项目请替换 `assets/img/` 下的占位图和 `assets/css/main.css` 中的品牌色变量 - 联系表单需配置 `assets/mail.php` 中的邮箱地址并确保服务器支持 PHP mail 功能