Housey - 度假村和酒店 HTML 模板 preview 1

Housey - 度假村和酒店 HTML 模板

bookmark

Housey 是一套基于 Bootstrap 的度假村与酒店预订 HTML 模板，包含首页、房间列表、博客、购物车、结账等多个业务页面，适合快速搭建旅游住宿类网站。模板提供了 5 种首页风格和完整的响应式布局。

HTML

项目简介

Housey 是一套基于 Bootstrap 的度假村与酒店预订 HTML 模板，包含首页、房间列表、博客、购物车、结账等多个业务页面，适合快速搭建旅游住宿类网站。模板提供了 5 种首页风格和完整的响应式布局。

技术栈

  • Bootstrap 5（CSS 框架）
  • jQuery（DOM 操作与交互）
  • Swiper（轮播滑动）
  • Magnific Popup（图片/视频弹窗）
  • Flatpickr（日期选择）
  • ion RangeSlider（价格区间滑块）
  • Font Awesome Pro（图标）

项目结构

text
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 功能
help_outline

常见问题