Homelist - 房地产 HTML 模板

# 项目简介 Homelist 是一套基于 HTML、CSS、JS 的房地产网站模板，提供 5 种首页风格变体，支持响应式布局。通过 Tailwind CSS 构建样式，TypeScript 处理交互逻辑，适合快速搭建房产租售、楼盘展示类网站。 ## 技术栈 - Tailwind CSS v3.4（样式框架） - PostCSS + autoprefixer（CSS 处理） - TypeScript（交互逻辑） - Flowbite（Tailwind UI 组件库） - Font Awesome 6（图标） - concurrently（开发阶段多进程并行） ## 项目结构 ``` main-file/ index.html # 首页入口（展示5种Homepage变体） index2.html ~ index5.html property.html # 房源详情页 property2.html # 房源详情页变体 properties.html # 房源列表页 blog.html / blogs.html contact.html / faq.html project.html / projects.html map-view-*.html # 地图展示页（4种布局） package.json postcss.config.js tailwind.config.js tsconfig.json styles/ # 编译输出目录（CSS） assets/ # 图片、图标资源 documentation/ README.md / index.html # 官方文档站点 ``` ## 核心文件说明 - `main-file/index.html` — 主入口页面，包含导航、幻灯片、房源推荐等模块 - `main-file/package.json` — 项目依赖与脚本定义 - `main-file/postcss.config.js` — PostCSS 插件配置（引入 tailwindcss） - `main-file/tailwind.config.js` — Tailwind 主题与变体定制 - `main-file/styles/` — Tailwind 编译产出的 CSS 文件夹 - `documentation/index.html` — 配置说明文档的在线预览站点 ## 快速开始 ```bash cd main-file npm install # 开发模式（同时启动 Tailwind CSS 监听 + TypeScript 监听） npm run dev # 或单独启动 CSS 编译 npm run dev:css # 生产构建 npm run build:css ``` ## 使用建议 - 模板默认通过 CDN 引入 Font Awesome，如需离线使用需替换为本地 webfonts 文件 - 5 个首页（index ~ index5）提供不同的首屏布局，可按需选择或混用 - 自定义主题色可通过修改 `tailwind.config.js` 中的 `colors.primary` 实现