西昌慢时光旅行攻略

一份面向双人出行的西昌 4天3晚休闲旅行网页攻略，重点围绕邛海自然风光、城市慢游、旅拍安排和不赶路的行程节奏展开。

在线页面：打开西昌旅行攻略
GitHub：查看源代码

行程定位

页面目前以 4月1日中午抵达、4月4日下午离开为时间背景，住宿设定为漫心酒店，适合希望以自然风光、轻松拍照和城市休闲为主的双人旅行。

这不是实时旅行预订系统，而是一份可视化的行程参考。天气、交通、酒店、景区开放时间和价格都应以出发前的官方信息为准。

内容结构

页面采用顶部导航和长页面阅读方式，主要包括：

• 行程概览：快速了解四天节奏；
• 天气与穿搭：根据西昌季节特点准备衣物；
• Day 1：抵达、入住和城市初见；
• Day 2：邛海及周边自然风光；
• Day 3：旅拍、休闲和特色体验；
• Day 4：收尾游览、采购与返程；
• 出行贴士：交通、饮食、时间安排和现场注意事项。

交互体验

• 桌面端顶部导航可直达各个章节；
• 移动端提供折叠菜单；
• 行程内容使用卡片、时间线和手风琴展开；
• 首屏包含旅程主题、日期和出行关键词；
• 页面使用淡入、浮动和悬停动画，增强旅行手册的阅读感；
• 手机、平板和桌面屏幕均可访问。

使用方式

在线使用

打开 Pages 地址即可阅读，不需要注册或安装应用。

本地预览

仓库只有一个 index.html 文件，直接双击即可打开。

如果需要稳定加载远程字体和背景图片，建议使用静态服务器：

python -m http.server 8080

然后打开：

http://localhost:8080/

技术结构

xichang-travel/
└── index.html    # 页面结构、样式、交互和旅行内容

项目使用：

• HTML5；
• Tailwind CSS CDN；
• Google Fonts；
• 原生 JavaScript；
• CSS 动画和响应式布局；
• 远程背景图片资源。

因为页面依赖 CDN 和远程图片，完全离线打开时，字体、背景图或部分样式可能无法加载。若要离线使用，应把所需资源下载到本地并改写引用地址。

修改行程的方法

如果要调整行程，建议按以下顺序：

1. 先修改首屏日期、酒店和行程定位；
2. 再修改概览卡片和 Day 1—Day 4 内容；
3. 同步修改桌面导航和移动端菜单；
4. 检查页面中的锚点 id 是否仍然一致；
5. 在手机宽度下测试折叠菜单、卡片和时间线；
6. 发布前重新核对地图、交通和景区信息。

出行提示

• 旅行日期、天气和高铁班次应在出发前重新确认；
• 旅拍时间要给换装、交通和缓冲留出余量；
• 不要把一天安排得过满，西昌的自然景观适合留出散步和休息时间；
• 高原紫外线较强，准备防晒、饮水和轻便外套；
• 特色餐厅和景区营业状态可能变化，现场以官方或商家最新信息为准。

版权与使用说明

本项目是个人旅行规划与网页展示项目。页面中的行程、店铺、交通和价格信息属于参考内容，不构成预订或安全承诺。