Ailand - 现代室内设计 HTML 模板 + RTL preview 1

Ailand - 现代室内设计 HTML 模板 + RTL

bookmark

Ailand 是一款现代室内设计与建筑行业 HTML 模板，提供首页、作品集、博客、商城（购物车/结算）、服务详情等多个完整页面，支持多首页切换与单页滚动导航。模板包含 LTR 与 RTL 两套版本，适合快速搭建建筑/室内设计公司官网或作品展示站点。

HTML

项目简介

Ailand 是一款现代室内设计与建筑行业 HTML 模板，提供首页、作品集、博客、商城（购物车/结算）、服务详情等多个完整页面，支持多首页切换与单页滚动导航。模板包含 LTR 与 RTL 两套版本，适合快速搭建建筑/室内设计公司官网或作品展示站点。

技术栈

  • HTML5 + CSS3（静态模板）
  • Bootstrap 5（响应式布局框架）
  • jQuery（DOM 交互与动画触发）
  • GSAP + ScrollTrigger（页面滚动动画与平滑滚动）
  • Isotope（瀑布流/马赛克布局筛选）
  • Magnific Popup（图片/视频弹窗）
  • Font Awesome 6 Pro + Google Fonts（DM Sans / Syncopate）
  • PHP（mail.php 提供联系表单邮件发送）

项目结构

text
ailandhtml-10/
├── ailand/
│   ├── index.html              # 主首页
│   ├── index-2~5.html          # 首页变体
│   ├── index-one-page.html     # 单页版首页
│   ├── about.html, service*.html, portfolio*.html, blog*.html
│   ├── shop*.html, cart.html, checkout.html, wishlist.html
│   ├── contact.html, login.html, register.html, pricing.html, faq.html
│   ├── error.html, team-details.html
│   ├── mail.php                 # 联系表单后端
│   └── assets/
│       ├── css/main.css         # 核心样式
│       ├── js/main.js           # 全部交互逻辑（33 个功能模块）
│       ├── fonts/               # Font Awesome 字体
│       └── img/
├── ailand-rtl/                  # RTL 阿拉伯语版本（结构同 ailand/）
└── documentation/                # 官方文档页（参考用）

核心文件说明

  • ailand/assets/css/main.css — 全部样式，含 CSS 变量定义（字体、颜色、响应式断点）和 26 类组件/页面样式
  • ailand/assets/js/main.js — 33 个 JS 模块：懒加载背景图、GSAP 滚动动画、马赛克筛选、计数动画、移动端菜单、侧边栏、灯箱等
  • ailand/mail.php — 联系表单提交后的邮件发送脚本（需服务器 PHP 环境）
  • ailand/index-one-page.html — 单页全屏版首页，适合作品集型展示站
  • ailand/assets/js/bootstrap-bundle.js — Bootstrap JS（含弹窗、下拉等组件）

快速开始

  1. 直接在浏览器打开 ailand/index.html 预览全站
  2. 或将整个 ailand/ 目录部署到任意 Web 服务器
  3. 联系表单需配置服务器端 PHP 支持；本地测试时表单提交会提示 405

使用建议

模板内置 5 种首页风格与完整电商页面，建议根据实际业务选择对应入口文件替换内容；如需多语言支持，可基于已有的 ailand-rtl/ 目录结构复制修改。全部图片路径需替换为真实资源，否则会出现 404 影响展示效果。

help_outline

常见问题