Residem - Single Property & Apartment Website Template

# 项目简介 Residem 是一套面向单物业/公寓场景的静态网站模板，包含首页、房间展示、设施介绍、新闻动态、联系表单和预订功能等多个页面。模板基于 Bootstrap 框架，提供了完整的响应式布局和交互组件，适合酒店、民宿或长租公寓快速搭建展示页面。 ## 技术栈 - Bootstrap 5 — 响应式布局框架 - Swiper.js — 轮播图/幻灯片组件 - Google Fonts — Jost（标题字体）、DM Sans（正文字体） - Font Awesome 4/6 + Elegant Icons — 图标库 - PHP — 仅用于 booking.php 表单处理 ## 项目结构 ``` 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/ ``` ## 核心文件说明 - `index.html` — 主首页，包含导航、轮播图、物业介绍等完整首屏结构 - `css/style.css` — 主样式表，定义了完整的 CSS 变量系统（字体、颜色、间距、按钮等） - `js/designesia.js` — 模板核心交互逻辑（导航、滚动效果、主题切换等） - `js/custom-swiper-1.js` — fade 切换轮播配置，4 秒自动播放 - `js/custom-swiper-2.js` — slide 切换轮播配置，带分页导航 - `booking.php` — 预订表单后端处理文件 ## 快速开始 由于是纯静态模板，直接在浏览器中打开 `index.html` 即可预览完整效果。如需预订功能，需将项目部署到支持 PHP 的 Web 服务器（如 Apache/Nginx + PHP 环境）后访问 `booking.php`。 ## 使用建议 模板提供了多个首页和内页变体，可根据实际物业类型选择对应的 HTML 文件作为起点。更换 Logo 和配色时，主要修改 `images/` 目录下的图片文件以及 `css/coloring.css` 中的颜色变量。