Luxivo - 酒店及度假村预订 HTML5 模板 preview 1

Luxivo - 酒店及度假村预订 HTML5 模板

bookmark

Luxivo 是一款专为酒店、度假村、别墅及各类住宿预订网站设计的现代 HTML5 模板。模板提供多套首页布局、房间展示、服务介绍、团队介绍等功能页面，采用完全响应式设计，适合快速搭建酒店官网或在线预订平台。

HTMLaccommodationapartmentbed and breakfastbookingelementorhostelhotel

项目简介

Luxivo 是一款专为酒店、度假村、别墅及各类住宿预订网站设计的现代 HTML5 模板。模板提供多套首页布局、房间展示、服务介绍、团队介绍等功能页面，采用完全响应式设计，适合快速搭建酒店官网或在线预订平台。

技术栈

  • HTML5 + CSS3（响应式布局）
  • JavaScript / jQuery
  • Bootstrap 5（栅格与组件）
  • Slick（轮播插件）
  • Magnific Popup（灯箱）
  • Nice Select（自定义下拉框）
  • AOS（滚动动画）
  • FontAwesome（图标字体）

项目结构

text
luxivohtml-10/
├── Documentation/          # 官方文档与演示
│   └── index.html
├── luxivo/                 # 模板主目录
│   ├── index.html          # 首页（多套皮肤）
│   ├── index-2.html        # 首页变体2
│   ├── index-3.html        # 首页变体3
│   ├── rooms.html          # 房间列表
│   ├── room-details.html   # 房间详情
│   ├── about.html          # 关于我们
│   ├── blog-*.html          # 博客页面
│   ├── contact.html        # 联系页面
│   ├── pricing.html        # 定价页
│   ├── team.html           # 团队页
│   └── assets/             # 静态资源
│       ├── css/style.css   # 主样式文件
│       ├── js/theme.js     # 主题脚本
│       └── scss/           # SCSS源文件

核心文件说明

  • luxivo/index.html — 主首页入口，包含导航、轮播、房间展示等核心模块
  • luxivo/assets/css/style.css — 主样式表，含 45+ CSS 模块（页眉、页脚、房间、定价等）
  • luxivo/assets/js/theme.js — 主题交互逻辑，导航、动画等
  • luxivo/assets/scss/style.scss — SCSS 源文件，便于自定义主题色
  • luxivo/rooms.html — 客房列表页，展示房型网格布局
  • luxivo/pricing.html — 房价与套餐定价页面

快速开始

直接用浏览器打开 luxivo/index.html 即可预览。如需本地服务器热更新，可使用 VS Code 的 Live Server 插件或运行：

bash
npx serve luxivo

使用建议

该模板为静态 HTML，建议直接修改 style.css 中的 CSS 变量（--primary-color 等）即可快速换肤；若需深度定制可编辑 scss/style.scss 重新编译。模板已内置多套首页方案（index、index-2、index-3），可根据实际品牌风格选择其一作为起点。

help_outline

常见问题