模板概述

这是一个完整的民宿企业静态网站模板，专为展示民宿品牌特色和服务而设计。模板采用现代化响应式设计，以自然环保为主题，提供卓越的用户体验。

页面结构

• 首页 - 品牌展示、特色介绍、行业知识、动态SVG展示
• 关于我们 - 品牌故事、核心理念、团队介绍、发展历程
• 特色服务 - 住宿服务、餐饮体验、活动项目、定制服务
• 案例展示 - 项目展示、设计理念、行业常识、合作邀请
• 联系我们 - 联系信息、交互式地图、联系表单、常见问题

设计特色

模板采用自然环保的设计理念，主要特点包括：

• 配色方案 - 以绿色(#2a5934)为主色调，搭配辅助色#8ba888和#d4a574，营造自然宁静的氛围
• 字体选择 - 使用Google Fonts的Noto Serif SC和Noto Sans SC字体，确保中文字体美观清晰
• 响应式布局 - 基于Bootstrap 5.3.8的响应式网格系统，适配各种屏幕尺寸
• 视觉元素 - 集成Unsplash免费高质量图片、Bootstrap Icons SVG图标和动态效果

技术特性

• 前端框架 - Bootstrap 5.3.8（通过共享资源引用）
• 交互功能 - 原生JavaScript实现导航栏效果、表单验证、图片懒加载、案例筛选等
• 地图集成 - 使用Leaflet.js集成交互式地图
• 性能优化 - 图片懒加载、CSS动画优化、代码模块化
• 浏览器兼容 - 兼容Chrome、Firefox、Safari、Edge等现代浏览器

使用说明

模板开箱即用，只需按照以下步骤：

1. 将文件上传到Web服务器
2. 确保共享Bootstrap资源路径正确（/static/css/bootstrap.min.css等）
3. 替换images/logo.png为品牌Logo
4. 修改联系方式、地址等品牌信息
5. 根据需要调整配色和内容

文件结构

template.zip
├── index.html          # 首页
├── about.html          # 关于我们
├── services.html       # 特色服务
├── portfolio.html      # 案例展示
├── contact.html        # 联系我们
├── css/
│   └── custom.css      # 自定义样式
├── js/
│   └── main.js         # 自定义脚本
├── images/
│   └── logo.png        # 品牌Logo
└── README.md           # 说明文档

定制指南

如需自定义模板，可调整以下内容：

• 在css/custom.css中修改CSS变量调整配色
• 替换Unsplash图片链接为自有图片
• 修改文本内容以适应品牌故事
• 在contact.html中更新地图坐标和联系信息
• 根据需要添加或删除页面模块

提示：此模板已包含完整的5个页面，可直接部署使用，也可作为基础进行二次开发。