Homelist - 房地产 HTML 模板 preview 1

Homelist - 房地产 HTML 模板

bookmark

Homelist 是一套基于 HTML、CSS、JS 的房地产网站模板，提供 5 种首页风格变体，支持响应式布局。通过 Tailwind CSS 构建样式，TypeScript 处理交互逻辑，适合快速搭建房产租售、楼盘展示类网站。

HTML

项目简介

Homelist 是一套基于 HTML、CSS、JS 的房地产网站模板，提供 5 种首页风格变体，支持响应式布局。通过 Tailwind CSS 构建样式，TypeScript 处理交互逻辑，适合快速搭建房产租售、楼盘展示类网站。

技术栈

  • Tailwind CSS v3.4（样式框架）
  • PostCSS + autoprefixer（CSS 处理）
  • TypeScript（交互逻辑）
  • Flowbite（Tailwind UI 组件库）
  • Font Awesome 6（图标）
  • concurrently（开发阶段多进程并行）

项目结构

text
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 实现
help_outline

常见问题