多页面专题结构
包含首页、革命历史、古代建筑、联系我们等页面，形成完整的内容浏览路径。
这是我 2023 年完成的静态网页项目，以“大理印象”为主题，把家乡风景、特色美食、革命历史、古代建筑和联系表单组织成一个多页面专题网站。项目主要使用 HTML、CSS 和 JavaScript 完成页面结构、视觉排版、轮播交互和表单校验。
图文内容组织
围绕苍山洱海、特色美食和古镇建筑，用图片和文字呈现大理地域文化。
原生 JS 交互
实现历史页面轮播、展开更多内容、联系表单提交拦截和基础输入校验。
静态页面练习
练习布局、浮动清除、导航、图片列表、页面复用和基础 DOM 事件处理。
2023
HTML
CSS
JavaScript
Static Site
Carousel
Form Validation
Visual Theme
用家乡风景建立第一屏记忆点
原项目首页使用大幅横向风景图作为视觉入口，并通过顶部导航连接不同内容页面。对于当时的练习目标来说，它重点训练的是“图片素材、标题、导航和正文内容如何组合成一个完整专题页”。
Homepage
首页承担项目主题和内容导览
首页包含站点 Logo、导航、主视觉、家乡介绍和特色美食模块。内容上先建立“大理是什么”的背景，再通过图文列表展示美食，形成从城市概览到生活文化的阅读节奏。
Content Map
把大理文化拆成可浏览的专题页面
站点不是单页堆内容，而是把信息分为首页、革命历史、古代建筑和联系页面。每个页面都复用统一导航与页脚，同时根据内容类型调整图片和文字结构。
Home
家乡之美
介绍大理的地理位置、历史背景、苍山洱海和古城印象。
History
革命历史
用轮播和展开内容承载红色历史故事，增加页面互动性。
Architecture
古代建筑
展示松桂古镇、双廊古镇、巍山古城、大理古城等建筑内容。
Interaction
用原生 JavaScript 做基础交互
项目中的交互没有依赖框架：历史页使用轮播脚本切换图片，“了解更多”按钮控制隐藏内容显示；联系页拦截表单提交，对姓名、手机号、邮箱和留言做基础校验，再给出反馈。
- 轮播模块练习 DOM 选择、计时与左右切换。
- 展开模块练习事件绑定和元素显示状态控制。
- 表单模块练习正则校验、错误提示和提交拦截。
What I Practiced
这个早期项目带来的前端基础训练
现在回看它仍然比较基础，但它完整覆盖了静态站开发最核心的一组能力：页面拆分、视觉排版、图片组织、导航跳转、JS 交互和表单校验。
页面结构
使用 HTML 组织 header、section、列表、表单和 footer，建立多页面内容结构。
视觉排版
通过 CSS 控制宽度、浮动、图片尺寸、文本间距和模块对齐。
交互逻辑
使用原生 JavaScript 完成轮播、内容展开和表单校验。
内容表达
将风景、美食、历史和建筑拆分成可阅读的页面模块。