今天突然想做个电子相册网站，琢磨着能不能用最简单的方法搞定。翻了好多教程都讲得太复杂，干脆自己动手试一遍。

第一步：先搭个架子

我直接新建了个文件夹，里面塞了三个文件：、和。html文件就写了个最基础的框架，head里把css和js连上，body里先空着。

第二步：把照片摆整齐

在html里加了几个div当相册格子，每个格子用img标签放图片。css里折腾了半天：给相册容器设置成flex布局，图片宽度统一调成25%，再加个阴影和圆角。鼠标悬停时放大图片的动画效果调试最久——transform:scale(1.05)这行代码反复改了七八次才顺眼。

• 图片间距用margin-right:10px控制
• overflow:hidden防止图片撑破格子
• transition属性让放大效果更自然

第三步：加点动态功能

用js写点击放大效果。给所有图片绑定click事件，点击时把图片src塞进新创建的遮罩层里。写着写着发现关闭按钮点了没反应，原来是把appendChild写成了appendChild——这种拼写错误排查了半小时。加了键盘事件，按ESC也能关闭预览。

全部弄完才发现根本不用什么复杂框架，三个文件加起来不到200行代码。下次谁再跟我说做网站难，我直接把这份模板甩过去。