简介：网页制作长期被视为纯展示性技术，但借助HTML、CSS与JavaScript原生三件套，无需服务器与数据库，就能打造出具备信息管理、数据交互和本地存储能力的完整应用。这种零依赖、零构建的静态页面方案，既保留了纯前端开发的轻量优势，又能实现响应式布局、动态渲染、数据持久化等工程能力。从毕业照墙到同学录翻转卡片，从留言板到班级数据统计，一个看似复杂的纪念页面完全可以通过原生DOM操作、CSS Grid/Flex布局和localStorage本地存储来完成。此类项目特别适合前端初学者理解数据驱动视图的核心思路，也为个人作品集或轻量化活动页面提供了高效实现路径。整个设计从需求分析到本地部署，完整覆盖数字同学录与毕业照网页的实战构建流程。 每年临近毕业，班里总会有人张罗着做纪念册、整理照片、写同学录。去年一个学弟来找我，说想做一个能直接在手机和电脑上打开的同学录，最好把毕业照、个人档案、留言都塞进去，还要带点交互效果，别像PPT那样翻页。我当时第一反应就是：这种需求用 HTML、JavaScript、CSS 原生三件套就够了，没必要上框架。于是花了几个晚上搭了一套“wuliangxiao 同学录与毕业照”静态页面，效果还挺好，班级里传开之后好几个同学问我要源码。今天把整个设计思路、实现细节、踩过的坑一次说清楚。
这套项目的核心价值在于：它不需要服务器，不需要数据库，纯静态页面搞定信息展示和简单交互。照片墙用 CSS Flex 和 Grid 做响应式布局，同学录卡片用 JavaScript 驱动数据渲染，留言功能靠 localStorage 本地持久化，整体风格可以做成偏校园、小清新或者复古胶片的质感，完全取决于样式设计。适合前端初学者练手，也适合有 HTML/CSS/JS 基础的人快速做一个毕业季纪念页面，甚至可以直接套模板改成班级主页。
1. 项目需求分析与整体设计思路
1.1 这个项目到底要解决什么问题
同学录和毕业照本身是两件东西：同学录讲究信息完整，姓名、绰号、座右铭、联系方式、想说的话；毕业照讲究氛围感，集体照加个人照，排版要好看，点击要能看大图。常见做法是做成一本 PDF 或者打印册子，但缺点很明显——不能动态更新，不能互动，手机上看还得放大缩小。
所以这个项目最核心的目标是做“一个能长期保存、随时打开、带点互动的数字版同学录”。用网页来承载，优势是天然跨平台，电脑、平板、手机都能打开，不需要装 App，发给同学一个链接或者文件就能看。
另一个要解决的问题是“信息展示效率”。一个班四五十个人，如果一张张照片堆在页面上，用户根本找不到想看的同学。这就需要把信息按模块拆开，按卡片展示，加上筛选和搜索，把“信息陈列”转化成“信息浏览体验”。
1.2 页面模块规划与信息架构
我在做信息架构的时候，把整个页面分成了七个区域，每个区域承担不同职责：
- 顶部导航栏：固定定位，包含项目名称和锚点跳转，方便长页面导航。
- 首页 Banner 区：大标题、副标题、班级合照背景、滚动提示，负责营造打开的“第一印象”。
- 毕业照墙：集体照全宽展示，个人照用网格布局，支持点击查看大图。
- 同学录卡片区：每个同学一张卡片，正面是照片和姓名，点击翻转显示详细信息。
- 班级大数据统计：人数、男女比例、星座分布等，用简单的数字卡片和进度条展示。
- 留言板：按时间倒序展示留言，支持新增留言，数据存 localStorage。
- 页脚：放版权信息、项目说明和“重回顶部”按钮。
这七个模块覆盖了纪念页面的所有典型需求，而且每个模块的耦合度很低，写代码时完全可以一个个独立完成，最后再用导航串联起来。
模块划分还有个隐藏好处：方便后续扩展。想加班级大事记、想加老师寄语，直接新写一个 section 挂到导航里就行，不影响原有功能。
1.3 为什么只选原生三件套而不上框架
这里必须拆一下技术选型。很多同学一上手就是 Vue、React，其实做这种纯展示型页面，框架反而增加负担。一个静态页面只需要：一个 HTML 负责结构、一个 CSS 负责样式、一个 JS 负责交互，没有任何状态管理、路由、组件通信的需求。用框架的话，光构建工具和依赖安装就能劝退一半人。
原生实现最大的优势是“零依赖、零构建、双击即开”。生成一个 HTML 文件，把所有 CSS 和 JS 内联或者外链到一起，在任何浏览器里直接打开就能跑。分享的时候只需要发一个文件，接收方不用装任何东西。
另外，对于学习前端的同学来说，原生 DOM 操作能让你真正理解页面是怎么渲染的。等你用过document.createElement、appendChild、addEventListener这些 API 之后，再去学框架里的虚拟 DOM、事件委托，理解成本会低很多。所以这个项目的源码是一个很好的底层训练素材。
2. 核心页面实现与样式细节
2.1 同学录卡片的数据组织与渲染
同学录卡片的难点不在 CSS，而在“数据怎么组织”。我建议把每个同学的信息定义成一个对象，统一放到数组里管理。姓名、外号、生日、星座、爱好、座右铭、留言、照片地址，都可以作为对象的属性。这样后续做筛选、搜索、随机打乱都非常方便。
const classmates = [ { id: 1, name: "李晓明", nickname: "小明", birth: "2003-05-12", zodiac: "金牛座", hobby: "篮球、吉他", motto: "一直往前走，就会看到光。", message: "三年同学，谢谢你借我的笔记。", photo: "images/student-01.jpg" }, { id: 2, name: "周雨桐", nickname: "小雨", birth: "2003-11-03", zodiac: "天蝎座", hobby: "摄影、旅行", motto: "保持热爱，奔赴山海。", message: "记得一起熬夜写作业的日子。", photo: "images/student-02.jpg" } ];数据驱动渲染是我在这个项目里最想强调的思路。页面上的 HTML 结构不是手写死的一大段，而是通过 JavaScript 遍历数组，动态生成卡片。这样做的好处是：想加一个人，只需要往数组里 push 一条数据；想改一个人，只需要改对象里的字段；页面结构会自动同步。
const cardContainer = document.getElementById("classmatesGrid"); classmates.forEach((student, index) => { const card = document.createElement("div"); card.className = "student-card"; card.innerHTML = ` <div class="card-inner"> <div class="card-front"> <img src="${student.photo}" alt="${student.name}" loading="lazy"> <h3>${student.name}</h3> <p>${student.nickname}</p> </div> <div class="card-back"> <p>生日：${student.birth}</p> <p>星座：${student.zodiac}</p> <p>爱好：${student.hobby}</p> <p>座右铭：${student.motto}</p> <p>留言：${student.message}</p> </div> </div> `; cardContainer.appendChild(card); });这里有个容易被忽略的点：动态创建元素时，createElement和innerHTML混用没关系，但数据里如果有用户输入的内容，要做转义，防止 XSS 注入。虽然我们班级数据是手动维护的，但写代码养成好习惯，以后做其他项目能少踩坑。
2.2 毕业照墙布局：Flex 与 Grid 该怎么配合
照片墙是整个页面视觉冲击力最强的模块，也是布局上最容易出问题的地方。CSS Flex 适合做一维布局，也就是一行或者一列；CSS Grid 适合做二维布局，也就是行和列同时控制。毕业照墙这种“多张照片、不同尺寸、需要对齐”的场景，Grid 更合适。
我先用 Grid 定义照片墙的骨架：
.photo-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; } .photo-gallery img { width: 100%; height: 240px; object-fit: cover; border-radius: 12px; transition: transform 0.3s ease, box-shadow 0.3s ease; } .photo-gallery img:hover { transform: scale(1.03); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); }repeat(auto-fill, minmax(240px, 1fr))是响应式的核心。它表示每一列最小的宽度是 240 像素，最大可以平均占满容器。屏幕宽的时候会自动多排几列，屏幕窄的时候自动减少列数，完全不需要写媒体查询。这是 CSS Grid 比 Flex 更优雅的地方。
集体照建议单独做成一张通栏大图，放在照片墙顶部，用width: 100%; height: auto;处理，保证任何屏幕下不变形。个人照则用上面的网格布局。
如果想让照片墙更活泼一点，可以给部分照片设置横跨两列的样式，形成瀑布流错落感：
.photo-item.wide { grid-column: span 2; } .photo-item.tall { grid-row: span 2; }但要注意，Grid 的跨行跨列需要配合固定行高才能生效，否则高度会被图片内容撑开，效果反而乱。我实际测试下来，纯网格布局最稳妥，照片统一裁切、统一圆角，干净利落。
2.3 毕业季视觉风格：配色、字体与光影
视觉风格决定了这个页面的“情绪”。我做的是一个偏暖色调的版本：主色用杏黄色，辅助色用奶油白，加上一点靛蓝做对比。这样的配色有毕业季的阳光感，又不会太刺眼。
:root { --primary: #f4a261; --secondary: #264653; --bg-light: #fefae0; --text-dark: #2a2a2a; --shadow: rgba(0, 0, 0, 0.1); }把颜色定义为 CSS 变量，后面所有地方都可以用 var() 引用，改主题色只動一处。这是我强烈推荐的做法，尤其适合做多主题风格切换。
字体方面，中文标题可以用系统自带的“思源宋体”或者“楷体”，营造一点书卷气；正文用无衬线字体保证可读性。如果不想引入外部字体文件，就直接用系统字体族：
font-family: "Noto Serif SC", "Source Han Serif SC", "STSong", serif;光影上，我建议在 Banner 区加一个径向渐变的遮罩，让背景照片上叠加一层半透明的主色，保证白色文字能看清楚。这个细节虽然小，但对观感提升非常明显。
.banner { background-image: radial-gradient(circle at center, rgba(244, 162, 97, 0.2), rgba(38, 70, 83, 0.7)), url("images/class-photo.jpg"); background-size: cover; background-position: center 30%; }2.4 卡片翻转效果与动画实现
同学录卡片我做了 3D 翻转效果。鼠标悬停或点击时，卡片从正面翻到背面，展示详细信息。这个效果用 CSS 的transform-style: preserve-3d和rotateY(180deg)实现。
.student-card { perspective: 1000px; } .card-inner { position: relative; width: 100%; height: 320px; transition: transform 0.6s; transform-style: preserve-3d; } .student-card:hover .card-inner, .student-card:focus .card-inner { transform: rotateY(180deg); } .card-front, .card-back { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 16px; padding: 16px; } .card-back { background: var(--primary); color: #fff; transform: rotateY(180deg); }这里有个关键点：backface-visibility: hidden必须写在正面和背面两个面上，否则翻转后反面内容会透出来。另外，给.card-inner设置height: 320px而不是让内容撑开，是为了保证翻转前后的尺寸一致，不然背面文字多了会把卡片高度撑大。
在移动端，hover 效果不灵敏，所以我加了点击事件来切换翻转状态，用 JS 操作 classList 来控制。
3. 交互功能与 JavaScript 实现
3.1 照片墙的点击放大与关闭
毕业照墙上的照片，点击后应该能放大查看，这就是典型的 Lightbox 效果。我不用任何第三方库，直接用原生 JS 写一个简单的弹层。
思路：点击图片时，把图片地址传给一个全屏遮罩层，遮罩层里显示大图，点击遮罩或者按 Esc 键关闭。
const lightbox = document.getElementById("lightbox"); const lightboxImg = lightbox.querySelector("img"); document.querySelectorAll(".photo-gallery img").forEach((img) => { img.addEventListener("click", () => { lightboxImg.src = img.src; lightbox.classList.add("active"); }); }); lightbox.addEventListener("click", () => { lightbox.classList.remove("active"); }); document.addEventListener("keydown", (e) => { if (e.key === "Escape") { lightbox.classList.remove("active"); } });遮罩层的样式要注意：固定定位铺满全屏，背景半透明，大图居中，加一个过渡动画，避免生硬弹出。
.lightbox { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.8); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; z-index: 999; } .lightbox.active { opacity: 1; visibility: visible; } .lightbox img { max-width: 90%; max-height: 85vh; border-radius: 8px; box-shadow: 0 0 30px rgba(255, 255, 255, 0.2); }3.2 播放按钮和随机打乱：让页面“活起来”
毕业照页如果只是一张张静态图，看久了会无聊。我加了一个“随机展示”按钮，点击后把所有图片的顺序打乱，再用 CSS 动画做一个淡入效果。这个功能适合在班级聚会的时候投屏播放，很有氛围。
const shuffleBtn = document.getElementById("shuffleBtn"); const gallery = document.querySelector(".photo-gallery"); function shuffleArray(arr) { for (let i = arr.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [arr[i], arr[j]] = [arr[j], arr[i]]; } return arr; } shuffleBtn.addEventListener("click", () => { const items = Array.from(gallery.children); const shuffled = shuffleArray(items); shuffled.forEach((item) => gallery.appendChild(item)); });这个逻辑其实很简单：把 DOM 里的图片元素转成数组，用 Fisher-Yates 算法打乱顺序，再按新顺序重新 append 到容器里。因为 DOM 的操作是按顺序插入现有节点，浏览器会自动移动元素位置，不会有重复。
3.3 留言板与 localStorage 存储
留言板是很多人问我的功能：没有后端，留言怎么保存？答案是localStorage。浏览器把数据存在本地，只要不清缓存，刷新页面后内容还在。虽然换设备看不到，但作为班级自用的页面完全够用。
实现步骤分两步：
第一步，初始化留言数据。如果 localStorage 里没有数据，就用默认的几条留言作为示例；如果已有数据，就解析出来渲染到页面上。
const messageBoard = document.getElementById("messageList"); const messageInput = document.getElementById("messageInput"); const sendBtn = document.getElementById("sendBtn"); function loadMessages() { const saved = localStorage.getItem("messages"); return saved ? JSON.parse(saved) : [ { name: "小明", content: "毕业快乐！常回学校看看！" }, { name: "小雨", content: "祝大家都能去想去的地方！" } ]; } function renderMessages() { const messages = loadMessages(); messageBoard.innerHTML = ""; messages.forEach((msg) => { const li = document.createElement("li"); li.innerHTML = `<strong>${msg.name}</strong>：${msg.content}`; messageBoard.appendChild(li); }); }第二步，新增留言。点击发送按钮或者按回车，读取输入框内容，push 到数组里，再写回 localStorage，最后重新渲染列表。
function addMessage() { const content = messageInput.value.trim(); if (!content) return; const messages = loadMessages(); messages.push({ name: "匿名同学", content: content }); localStorage.setItem("messages", JSON.stringify(messages)); messageInput.value = ""; renderMessages(); } sendBtn.addEventListener("click", addMessage); messageInput.addEventListener("keydown", (e) => { if (e.key === "Enter") addMessage(); });这里有两个坑需要提醒。第一个是JSON.stringify序列化后的数据体积有限，localStorage 一般只能存 5MB 左右，放文字留言完全够，但千万别拿它存图片 base64。第二个是用户输入内容要转义，直接用innerHTML会有 XSS 风险。最简单的方法是创建文本节点：
const nameSpan = document.createElement("strong"); nameSpan.textContent = msg.name; li.appendChild(nameSpan); li.appendChild(document.createTextNode(`：${msg.content}`));3.4 滚动入场动画与导航高亮
页面滚动时，模块应该有点落差的出现效果，而不是静止不动。我用 IntersectionObserver 监听元素是否进入可视区，进入后加上一个.visible类名，触发 CSS 过渡。
const observer = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { entry.target.classList.add("visible"); } }); }, { threshold: 0.2 }); document.querySelectorAll(".animate-block").forEach((el) => { observer.observe(el); });对应的 CSS 做一个位移 + 透明度的过渡：
.animate-block { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; } .animate-block.visible { opacity: 1; transform: translateY(0); }导航高亮也用 IntersectionObserver 监听各个区块的位置，当某个区块进入可视区时，给对应的导航链接加上高亮样式。不用监听 scroll 事件是因为 IntersectionObserver 性能更好，不会频繁触发回调解算。
4. 实操过程参考：从空目录到完整页面
4.1 目录结构与命名规范
动手写代码之前，先把目录结构定好。这个项目虽然是静态页面，但文件多了以后如果命名混乱，后面维护会非常痛苦。我习惯用下面的结构：
wuliangxiao-memory/ ├── index.html ├── css/ │ ├── style.css │ └── responsive.css ├── js/ │ ├── data.js │ ├── main.js │ └── gallery.js └── images/ ├── class-photo.jpg ├── student-01.jpg ├── ...CSS 拆成两个文件：style.css 放主样式，responsive.css 放媒体查询。JS 拆成三个文件：data.js 放同学数据和照片数据，gallery.js 负责照片墙逻辑，main.js 负责其余交互。如果项目体量更大，还可以把 data.js 再拆成 students.js 和 photos.js。
命名规范上，HTML 的 class 名全部用小写字母加中划线，比如student-card、photo-gallery、message-board。图片文件用语义化名字，如class-photo.jpg、student-01.jpg，不要出现IMG_20230601.jpg这种文件名，不然后面改起来找不到对应关系。
4.2 关键页面结构：写出语义化 HTML
HTML 结构尽量语义化。header、nav、main、section、footer 这些标签，浏览器和搜索引擎都能识别，同时也有利于读屏软件。
<header class="top-nav"> <div class="nav-brand">wuliangxiao · 同学录</div> <nav> <a href="#home">首页</a> <a href="#photos">毕业照</a> <a href="#classmates">同学录</a> <a href="#gallery">班级大数据</a> <a href="#messages">留言板</a> </nav> </header> <main> <section id="home" class="banner">...</section> <section id="photos" class="photo-gallery-wrap">...</section> <section id="classmates" class="classmates-wrap">...</section> <section id="gallery" class="stats-wrap">...</section> <section id="messages" class="message-wrap">...</section> </main> <footer> <p>wuliangxiao 同学录 · 制作于毕业季</p> </footer>锚点跳转注意一个问题：顶部导航是固定定位，点击锚点跳到对应区块时，区块顶部会被导航遮住。解决办法是给每个 section 加一个scroll-margin-top：
section { scroll-margin-top: 72px; }这个属性是 CSS 里专门解决锚点定位偏移的，比用scroll-padding-top加在 html 上更灵活，目前主流浏览器都支持。
4.3 图片素材处理与体积优化
毕业照页面的图片如果直接拿手机原图放上去，一张就 5MB 起步，页面加载会非常卡。我遇到的情况是：三十张原图加起来快 200MB，不处理根本没法用。所以必须做一次压缩。
我的处理方法是：用 Python 的 Pillow 库写个小脚本批量压缩，把所有图片调整为 1200px 宽，质量为 80%，体积能压到 100KB 左右，肉眼几乎看不出差别。脚本很简单：
from PIL import Image from pathlib import Path src_dir = Path("raw_images") dst_dir = Path("images") dst_dir.mkdir(exist_ok=True) for img_path in src_dir.glob("*.jpg"): img = Image.open(img_path) img = img.convert("RGB") img.thumbnail((1200, 1200)) out_path = dst_dir / img_path.name img.save(out_path, quality=80, optimize=True)HTML 里给 img 标签加上loading="lazy"，让首屏之外的图片延迟加载。测试下来，首屏加载时间从 8 秒降到了 1 秒左右，体验差异非常明显。
4.4 本地测试与移动端适配
项目做完之后，在本地打开 index.html 直接测试。这里有一个细节：如果你用fetch加载本地 JSON 文件，在file://协议下会被浏览器的同源策略拦截。所以我把所有数据都写在 JS 文件里，而不是单独放 JSON 文件。
移动端适配主要是三个点：
- 视口设置：
<meta name="viewport" content="width=device-width, initial-scale=1.0">。 - 字体大小用相对单位，不要用固定像素。我习惯根元素设置 16px，内容字体用
clamp(14px, 2vw, 18px)。 - 导航在窄屏下收成汉堡菜单，点击展开。这个实现也不复杂，就是监听按钮切换一个 class，让导航列表在展开和收起之间切换。
@media (max-width: 768px) { .top-nav nav { display: none; } .top-nav nav.open { display: flex; flex-direction: column; } .nav-toggle { display: block; } }我实测过 iPhone 和安卓各两三款机型，Flex 和 Grid 布局在 WebKit 内核和 Chromium 内核的浏览器上都没有大问题，兼容性这块不必太担心。
5. 常见问题与排查技巧实录
5.1 照片墙在手机上错乱
这是我最常被问到的问题，症状是：手机上打开页面，照片不是整齐的一列或两列，而是有的宽有的窄，还歪歪扭扭。
排查思路：先确认是否所有图片都设置了width: 100%。如果 img 标签没有宽度约束，Grid 布局会根据图片原始尺寸计算列宽，导致网格被撑破。给.photo-gallery img添加上面代码里的width: 100%; height: 240px; object-fit: cover;，问题基本解决。
如果图片已经设置了宽度还乱，检查是不是某些图片有flex-shrink: 0之类的样式残留，或者父元素没有设置min-width: 0。Grid 子元素默认最小值是 auto，内容太宽时会撑开网格，给所有网格子项加min-width: 0能避免这种情况。
5.2 图片加载慢，页面卡顿
图片压缩之后加载慢的问题一般还在。如果班级照片确实多，建议把图片分成两组：首屏放关键合照，后面的人像照都用懒加载。懒加载除了 HTML 自带的loading="lazy"，还可以用 JS 实现一个更精细的逻辑。比如当某个区域快要进入视口时才加载图片。
还有一个容易被忽略的问题：图片是 DOM 节点过多导致页面卡顿。四五十张卡片加上照片墙，如果每个节点都有 CSS 动画，浏览器渲染压力很大。这时候可以给动画元素加will-change: transform，让浏览器提前优化。但注意不要滥用，加太多反而占用显卡内存。
5.3 点击卡片翻转失效
这个问题的典型原因是perspective写在了子元素上，而不是父容器上。perspective必须定义在产生 3D 效果的父级，也就是.student-card上，.card-inner才能正确获得透视效果。
另外检查.card-back的transform: rotateY(180deg)是否被后面的样式覆盖。如果 CSS 里两个选择器的优先级相同，后定义的会覆盖先定义的，类名重复时容易出这种问题。
最后，在 Firefox 里如果出现翻转后文字模糊的情况，可以给.card-inner加上backface-visibility: visible测试，但这属于极少的兼容性问题，多数情况不用处理。
5.4 localStorage 数据不生效
留言板输入内容后刷新页面，数据没保存。常见原因是浏览器处于隐私模式或者禁用了本地存储。控制台输入localStorage.setItem("test", "1")，如果报错 SecurityError，就是被禁用了。
另一个原因是代码里的键名不一致。写入的时候用的messages，读取的时候写的msg，这种低级错误排查起来很浪费时间。我有个习惯：把存储键名定义成常量，写在文件开头，后面所有地方都引用这个常量。
const STORAGE_KEY = "wuliangxiao_messages";这样即使要改键名，也只需要改一处，不会出现写读不一致的问题。
5.5 快速排查清单
我把常见问题整理成一个简单的速查表，方便照着检查：
| 症状 | 可能原因 | 解决方案 |
|---|---|---|
| 页面空白 | JS 报错，代码没执行 | 打开控制台看报错信息 |
| 图片全部不显示 | 路径错误 | 确认 images 目录相对路径 |
| 锚点跳转后标题被挡 | 固定导航遮挡 | section 加 scroll-margin-top |
| 点击按钮无反应 | 事件绑定元素不存在 | 确认 JS 在 DOM 之后加载 |
| 手机横屏排版乱 | 媒体查询缺失 | 补横向断点样式 |
6. 项目部署与分享
页面做完之后，面临的核心问题是怎么分享给同学。纯静态项目部署方式非常灵活，我总结了几种从简单到复杂的方案。
6.1 打成压缩包直接发
最直接的方式：把整个文件夹压缩成 zip 发给同学。对方解压后双击 index.html 就能在浏览器里打开。这种方式不依赖网络，数据都在本地，隐私性最好，唯一的缺点是每个人都得手动解压，稍微麻烦一点。
打包之前注意一件事：检查所有图片路径是相对路径而不是绝对路径。如果在代码里写了src="/images/student-01.jpg"，本地打开时浏览器会去磁盘根目录找 images 文件夹，大概率找不到。正确写法是src="images/student-01.jpg"。
6.2 放到局域网共享
如果想把页面给全班同学一起看，一个很简单的办法是把项目放到一台电脑的共享目录里，大家在同一个 Wi-Fi 下通过局域网地址访问。在本地起一个静态服务器，比如用 Python 的 http 模块：
cd wuliangxiao-memory python -m http.server 8080然后在同一局域网内，其他人通过http://你的IP:8080在手机浏览器里访问。注意电脑的防火墙要放行 8080 端口，手机和电脑要连同一个路由器。这种方式适合现场演示，聚会的时候投到电视上，大家扫码就能看。
6.3 部署到静态托管平台
如果希望这个页面能长期保存在线上，以后想打开就能看，可以部署到静态托管服务。把项目目录直接上传上去，绑定一个访问地址，就能获得一个公网可访问的链接，发给所有人，打开就是页面。
这类托管平台一般支持自定义域名，也可以直接用平台分配的二级域名。部署过程非常简单，无需配置服务器，几乎都是拖拽上传或者关联 Git 仓库后自动部署。我自己试过几个平台，实测下来部署成功率最高的是把整个文件夹拖进去就直接生成链接的那种，全程不超过五分钟。部署完成之后发到班级群，大家收藏链接就能永久访问。
提示：上传前一定把压缩过的图片和打包后的文件检查一遍，不要在线上页面里出现几百 MB 的原图，打开慢不说，流量也扛不住。
7. 源码里值得反复看的三个细节
最后分享几个我在写这套源码时觉得最有价值的细节，如果你拿代码学习，可以先从这三个地方入手。
第一个是data.js里的数据结构和渲染逻辑的配合。很多初学者写页面喜欢一个元素一个元素地复制粘贴，数据一变就要改 HTML。这个项目演示了“数据驱动视图”的好处——改数组里的内容，界面自动更新，这是所有现代前端框架最核心的思想。
第二个是 CSS 变量与主题化的关系。项目里所有颜色都定义在:root里，换一个配色变量组，整个页面风格立刻改变。如果你想给班级做两套风格，比如“夏日清新”和“复古胶片”，只需要写两份 CSS 变量，切主题就是加一个 class 或者改一个变量群，比重新写两套样式高效得多。
第三个是localStorage与纯前端数据持久化的权衡。没有后端，数据存储在哪？这是刚接触前端的人最容易困惑的问题。留言板的功能让你明白，浏览器本身就是一个微型数据库。虽然它有容量限制、只能存文本、不能跨设备，但解决“临时小数据”的场景绰绰有余。
我个人在实际操作中的体会是：做这种纪念型项目，技术上不需要多高深，难的是把需求和视觉统一起来。代码只是手段，真正的价值是毕业之后很多年，同学们还能打开一个网页，看到自己当年的照片和留言。那种“一眼回到十八岁”的感觉，比任何技术指标都重要。如果你也要做类似的项目，不用追求复杂，先把照片和信息整理好，再用这一套 HTML、JavaScript、CSS 三件套搭一个干净、好用的页面，就已经赢了。
本文还有配套的精品资源，点击获取
颗LED的省引脚方案)
