01 网页效果
整站采用 6 页结构，顶部统一导航、固定横幅、内容页分层排版和底部收束文案贯穿全部页面，打开后先建立端午专题的整体氛围，再逐页进入不同主题内容。
首页负责总览，内页分别承接节俗、节物、故事、清单和留言，让浏览过程既有阅读顺序，也更像一组完整的节日小专题。
02 网页介绍
Page1 总览首页：先用“关于端午节”建立整体认知，再通过节日信息、三段摘要和主图，把端午的时间、节俗、氛围和典型记忆快速铺开。
首页先稳住端午主题，再把节俗、节物和节日记忆一次讲清楚。
Page2 节俗现场：第二页重点呈现门前挂艾草、佩香囊和江上龙舟竞渡两类最有现场感的端午画面。页面用双区块图文结构，把“静”和“动”的节日气质并排讲清楚。
节俗现场页通过两张更高的主图，把端午的草木气和龙舟热闹感同时拉出来。
Page3 节物细赏：这一页从粽叶糯米香、香囊与五彩绳、鼓点与舟影三个角度切入，让端午不只是概念上的传统节日，而是能被看见、闻到和记住的具体细节。
节物细赏页更适合承接图片近景和细节讲述，让页面内容不只停留在概括层面。
Page4 龙舟故事：第四页把屈原记忆、江上竞渡的由来和家常里的节日传承拆成三张内容卡片，读起来更有专题感，也让故事线更清晰。
故事页借助卡片叙事，让历史记忆、竞渡热闹和日常传承形成清晰分层。
Page5 过节清单：第五页用双列卡片把备粽子、看竞渡、挂艾草、佩香囊、准备家宴和午后闲坐这些真实过节动作整理出来，更贴近实际浏览与使用场景。
清单页更偏工具型信息组织，适合把节日准备动作快速整理给读者浏览。
Page6 留言页面：最后补了一张静态留言表单，包含网名、邮箱、联系地址和留言描述四个字段，并配有提交与重置按钮，让这套专题站在展示之外也多了一个交流入口。
留言页虽然不接入 JS 提交逻辑，但页面结构已经完整，后续继续扩展会很顺手。
1. 多页面专题导航模块：6 个页面共享统一导航结构，用户可以在总览、节俗、节物、故事、清单和留言之间快速切换。
2. 节日横幅展示模块：每页顶部都保留统一 banner，先稳定整站视觉，再把专题识别度拉起来。
3. 图文分栏内容模块：首页、节俗页和节物页都采用图文分栏或上下分区结构，提升阅读节奏，也让图片更有承载空间。
4. 卡片清单整理模块：龙舟故事页和过节清单页通过卡片结构整理信息，适合承接多主题内容，也方便后续继续扩展页面。
5. 静态留言表单模块：新增留言页保留输入框、文本域和操作按钮，适合作为后续接入真实功能的基础页面。
03 设计亮点
亮点一：配色以草木绿、米白、暖橙为主，既有初夏节令感，也和端午的艾草、粽叶、龙舟主题保持一致。
亮点二：横幅、卡片、分栏和按钮都沿用同一套圆角、阴影和边框语言，多页面浏览时不会显得松散。
亮点三：各页版式有明显区分：首页偏总览，节俗页偏双区对照，节物页偏细节展开，故事页偏卡片叙事，清单页偏工具型整理。
亮点四：图片展示比例针对不同页面做了单独调整，重点内容页的主图更高，整体观感更饱满。
04 网页技术
技术栈：HTML5、CSS3、本地图片资源、少量静态表单结构。
核心实现：6 个页面共用统一头部、banner、页脚和样式变量；主体内容通过 CSS Grid 和 Flex 混合完成不同版式；使用 `body[data-page]` 进行页面级图片区高度微调；留言页使用纯 HTML 表单结构，便于后续扩展真实提交逻辑。
优势一：纯静态结构，部署轻量，放到本地或服务器就能直接打开使用。
优势二：多页面共用一套样式体系，后续替换节日主题、图片和文案时改动成本较低。
优势三：页面结构类型比较丰富，适合练习多页站点组织、图文布局和节日专题表达。
优势四：已经串好了网页、截图和发布包这三段流程，适合作为完整内容生产链路示例来复用。
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）等一系列互联网应用服务。
公安局备案号：
专属顾问
