开始动手：为什么我选择了“土法炼钢”
我最近自己找了个项目练手，就是给一个叫《影之奠》的小独立游戏搭了个官方网站，主要就是做个游戏介绍页面。本来想着，现在各种建站工具这么方便，随便套个模板，半天也就搞定了。结果朋友那边突然把要求提得老高，非说要体现出游戏那种压抑、阴森的“奠基”氛围，还不能用那些花里胡哨的动态效果，得稳重，得能跑在所有老旧浏览器上。
我立马把之前准备好的React模板全扔了。我这人就这样，既然要求回归本质，那我就用最糙、最稳的办法来。我决定这回网站的架构，就用最简单的那一套——HTML5打底，用原生CSS来控制那些阴影和布局，顶多加了一点点轻量级的JavaScript来处理图片加载的懒加载，图的就是一个稳定。
素材的整理与初步定调
在敲第一行代码之前，我花了一整天的时间，沉浸在这个游戏的设定里。我翻阅了他们给我的所有资料，从世界观设定文档到美术概念图，我把所有带血色或者黑色的素材都筛选了出来。
- 第一步，我锁定色调： 主体是纯黑和深灰，辅助色是那种快要凝固的血红色。我定了两个核心CSS变量，就是专门管这两种颜色的。
- 第二步，我处理图片： 游戏原图太大了，直接放上去网站跑起来会很慢。我抓取了所有高清概念图，然后用批量工具统一压缩到WebP格式，同时生成了一套低分辨率的占位图。
- 第三步，规划布局： 因为是游戏介绍页，所以布局必须是线性的。我在草稿纸上画了一个简单的流程图，从背景故事到角色介绍，再到发行信息，确保信息流是顺畅的。
实施阶段：阴影与稳定是王道
我拉起VS Code，新建了一个空文件夹，然后一口气把基础的HTML骨架都堆了进去。因为要求稳，我甚至连预处理器Sass都没用，硬是手写了上千行原生CSS。
最让我费劲巴拉的是那个背景视觉效果。为了体现“影之奠”的那个“影”字，我尝试了好几种纯CSS的阴影叠加方案。游戏要求背景是深色的，但是文字部分又不能被吃掉。我反复调试了背景图的透明度和叠加模式，3锁定了使用多层`box-shadow`配合`opacity`的方案，让页面滚动时，视觉上总感觉有层阴影在跟着你。我录下来了这个调试过程，光是这块儿的记录就写了厚厚一叠。
为什么要这么老实巴交地写原生CSS？这跟我上个月遇到的一件糟心事有关系。
当时我正在给一个外包项目做收尾，用的是最新最潮的框架。结果，客户的验收环境竟然是一台十年前的老旧电脑，系统配置极低。跑起来之后，所有炫酷的动画效果全都卡成了幻灯片，项目直接被打回来重做了。那次经历气得我差点把键盘砸了。我痛定思痛，发誓以后所有项目，哪怕是给朋友做的小站，也必须得在最低配置下能顺畅运行。
这回给《影之奠》做网站，我就逼着自己，把所有冗余的依赖和花哨的效果全部砍掉，只求一个字——稳。我把所有实践中遇到的兼容性问题都记录了下来，包括怎么用纯CSS实现平滑滚动，怎么在不使用框架的情况下优雅地处理图片加载失败。这都是血的教训换来的。
最终，这个网站的介绍页我花了两周时间反复打磨，终于上线了。没有绚烂的动画，没有复杂的交互，但它很稳定，也很“奠”。我把所有的实践过程和遇到的那些坑，都详细整理在了我的实践记录里，希望对想自己动手做网站的朋友们有所帮助。