把历史,
讲给同龄人听。

这不是一份把史料搬上网页的作业。我们想做的,是让一个十九岁的人, 在另一个十九岁的故事里,看见自己。

作品说明 设计 / 技术 / 来源 2026.11

01 / 为什么做

先看见“人”,
再看见“历史”。

提到长征,我们很容易想到数字、路线和结论。但数字背后,是一个个和今天的我们差不多年纪的人。

01

用第二人称,缩短九十年的距离

全站以“你”为主语。不是旁观历史,而是把用户放进1934年的于都河边、湘江边、雪山和草地里。

02

三条路线,让“选择”成为叙事的一部分

红一方面军、红二方面军、红四方面军,各有七站。用户选择一条路,就选择了一种视角,也承担了一种走法。

03

把数据放回人的尺度

8.6万、3万、7000、每300米、不到20岁。数字不是装饰,而是让“宏大”重新变得具体、可感、可疼。

02 / 作品信息

一份可以打开的
长征叙事。

静态网页,原生代码,适配桌面与手机。所有页面、图片、脚本均在本地,可整体迁移到任意静态服务器。

作品名称
十九岁,长征
赛事
甘肃农业大学“第五届红色网页设计大赛”
作品类型
静态网页(HTML / CSS / JavaScript)
学校
甘肃农业大学
参赛团队
齐欣雨
完成时间
2026年11月
“每一代人有每一代人的长征路,每一代人都要走好自己的长征路。” 习近平,2016年

03 / 技术说明

没有框架,
也没有外部依赖。

原生 HTML、CSS、JavaScript。所有资源本地化,断网也能完整浏览;不使用 CDN、不请求第三方接口。

LongMarch1934/ ├─ index.html 序章 / 三条路线 ├─ story.html 七站沉浸式叙事 ├─ route.html 路线图与数据 ├─ spirit.html 精神谱系 ├─ echo.html 青春回声 ├─ about.html 创作说明 ├─ css/ │ ├─ base.css 全站基础样式 │ ├─ story.css 故事页样式 │ └─ pages.css 内页样式 ├─ js/ │ ├─ main.js 导航 / 显现 / 计数 │ ├─ story-data.js 三条路线文本 │ ├─ story.js 故事渲染与交互 │ ├─ route.js 路线图交互 │ └─ echo.js 本地留言 ├─ images/ 原创插画与纹理 ├─ README.md 使用说明 └─ 作品简介.md 提交用简介草稿

目录层级不超过 3 层;图片、样式、脚本分类存放;所有站内链接均使用相对路径。

兼容目标
Microsoft Edge 90.0 及以上;同时适配 Chrome、Firefox、Safari 现代版本
响应式
桌面、平板、手机三档布局;移动端固定底部“继续走”操作栏
交互
滚动章节、逐字显影、数字增长、SVG 路线图、路线切换、本地留言
无障碍
语义化标签、跳过导航、键盘可操作、可见焦点、尊重“减少动态效果”系统设置
数据
无后端、无数据库;留言仅写入浏览器 localStorage,最多保留30条
素材
全部插画、纹理与图标为原创生成,不使用外部图片;字体调用系统字体

说明:路线图为叙事示意,不追求精确地理边界;兵力数字为公开史料中的约数。

04 / 史料来源

所有数字,
都有出处。

本站为叙事化写作,不是学术论文。关键史实与数字参考以下公开资料,正文中另有注释。

  1. 01
    习近平:在纪念中国工农红军长征胜利90周年大会上的讲话 新华网,2026年10月22日。用于长征精神、历史意义与整体数据表述。
  2. 02
    数说长征 光明日报,2016年10月18日。用于各路红军兵力变化、会师时间、战役战斗次数等数据。
  3. 03
    一组数字看震撼人心的伟大远征! 人民日报,2026年10月21日。用于“每300米一名红军牺牲”、牺牲者年龄等表述。
  4. 04
    湘江战役:中央红军长征的悲壮史诗 人民网·中国共产党新闻网,2016年2月29日。用于湘江战役经过与“三年不饮湘江水”的民间说法。
  5. 05
    解读长征(10):中央红军到达陕北后还剩多少兵力? 央广网,2016年8月31日。用于中央红军各阶段兵力约数。

05 / 作品简介

可直接放入
Word 文档。

以下文字为作品简介草稿,可按参赛表格要求删改。

《十九岁,长征》是一件以“同龄人”视角切入的红色主题沉浸式叙事网页。作品以1934—1936年红军长征为背景,设置红一方面军、红二方面军、红四方面军三条路线,每条路线七站,通过第二人称叙事、逐字显影、数字可视化、路线图与本地留言等方式,让用户在滚动与选择中完成一次“重走”。视觉以黑、纸、金、红为主色,强调史料质感与当代编辑设计;技术上使用原生HTML、CSS、JavaScript,无框架、无后端、无外部依赖,兼容Edge 90及以上版本,并适配移动端。

“长征的历史从未远去,长征的路在不断延伸。” 习近平《在纪念中国工农红军长征胜利90周年大会上的讲话》

看完说明,
不如亲自走一遍。

选一条路,从1934年的于都河开始。