项目简介link

Residem 是一套面向单物业/公寓场景的静态网站模板，包含首页、房间展示、设施介绍、新闻动态、联系表单和预订功能等多个页面。模板基于 Bootstrap 框架，提供了完整的响应式布局和交互组件，适合酒店、民宿或长租公寓快速搭建展示页面。

技术栈link

• Bootstrap 5 — 响应式布局框架
• Swiper.js — 轮播图/幻灯片组件
• Google Fonts — Jost（标题字体）、DM Sans（正文字体）
• Font Awesome 4/6 + Elegant Icons — 图标库
• PHP — 仅用于 booking.php 表单处理

项目结构link

residemhtml-10/Residem/Residem HTML/
├── index.html                    # 主首页
├── 01_single-property-2.html      # 单物业首页变体
├── 02_apartment-*.html           # 公寓型内页集合
├── 03_apartment-rent-onepage.html
├── booking.php                   # 预订表单处理
├── css/
│   ├── bootstrap.min.css         # Bootstrap 核心
│   ├── style.css                 # 主样式（含完整变量系统）
│   ├── coloring.css              # 配色方案
│   └── swiper*.css               # 轮播组件样式
├── js/
│   ├── designesia.js             # 主交互脚本
│   ├── custom-swiper-*.js        # 轮播配置
│   └── validation-*.js           # 表单验证
├── images/
└── video/

核心文件说明link

• index.html — 主首页，包含导航、轮播图、物业介绍等完整首屏结构
• css/style.css — 主样式表，定义了完整的 CSS 变量系统（字体、颜色、间距、按钮等）
• js/designesia.js — 模板核心交互逻辑（导航、滚动效果、主题切换等）
• js/custom-swiper-1.js — fade 切换轮播配置，4 秒自动播放
• js/custom-swiper-2.js — slide 切换轮播配置，带分页导航
• booking.php — 预订表单后端处理文件

快速开始link

由于是纯静态模板，直接在浏览器中打开 index.html 即可预览完整效果。如需预订功能，需将项目部署到支持 PHP 的 Web 服务器（如 Apache/Nginx + PHP 环境）后访问 booking.php。

使用建议link

模板提供了多个首页和内页变体，可根据实际物业类型选择对应的 HTML 文件作为起点。更换 Logo 和配色时，主要修改 images/ 目录下的图片文件以及 css/coloring.css 中的颜色变量。