
Homeradar - Directory Listing Real Estate Template
category房地产
# 项目简介
Homeradar 是一款面向房产中介网站的专业 HTML 模板,同时提供浅色(light)和深色(dark)两套主题方案。模板内置首页、房源列表页(含地图/无地图)、房源详情页、中介列表页、仪表盘管理页面等 40+ 个完整页面,适合快速搭建房产租售平台或物业管理后台。
## 技术栈
- HTML5 + CSS3(响应式布局,支持 viewport 适配)
- jQuery(v1.6.4)及相关插件(scrollTo、easing)
- Font Awesome 5 图标字体
- Google Fonts(Jost 字体)
- 语法高亮:SyntaxHighlighter(documentation 目录)
## 项目结构
```
homeradar/
├── dark/
│ ├── index.html # 深色主题主页
│ ├── index2~4.html # 其他首页变体
│ ├── listing.html # 房源列表页
│ ├── listing-single.html # 房源详情页
│ ├── agent-list.html # 中介列表页
│ ├── dashboard.html # 用户仪表盘
│ └── css/
│ ├── style.css # 主要样式
│ ├── dark-style.css # 深色主题补充样式
│ └── color.css # 配色变量
├── light/
│ ├── index.html # 浅色主题主页
│ ├── listing.html # 房源列表页
│ └── css/
│ └── style.css # 主要样式
└── documentation/
└── index.html # 官方文档(含 SyntaxHighlighter)
```
## 核心文件说明
- `homeradar/light/index.html` — 浅色主题入口页面
- `homeradar/dark/index.html` — 深色主题入口页面
- `homeradar/light/css/style.css` — 浅色主题完整样式表
- `homeradar/dark/css/style.css` — 深色主题样式表
- `documentation/index.html` — 模板官方文档,内含组件使用说明
- `IMPORTANT.txt` — 重要说明:contact form 及视频背景功能必须在本地或线上服务器环境运行,纯 file 协议无法工作
## 快速开始
直接在浏览器中打开以下文件即可预览:
```
homeradar/dark/index.html
homeradar/light/index.html
```
若需使用联系表单或 YouTube/Vimeo 背景视频,请将 `homeradar` 文件夹部署到本地服务器(如 Live Server)或托管服务器上运行。
## 使用建议
该模板为纯静态页面,不含后端逻辑,contact form 依赖 PHP 环境。若用于生产项目,建议自行对接后端 API 或使用表单托管服务(如 Formspree)。dark 和 light 两套主题可按需选择,或参考 CSS 结构进行二次定制。
help_outline
FAQ
Comments0
PublishedDec 7, 2025
Tech Stack
HTML
Tags
airbnbcatalogcity tourdirectorygeolocationgoogle mapslistingslocal businessesmapplacesplaces in townreal estatesearchtourism