说实话，写这篇东西的时候，我手都在抖。不是激动的，是累的。

这半个月，我像个疯子一样，盯着那堆代码看。你们可能觉得，做个网站静态部分，不就是把HTML、CSS、JS写写吗？太简单了，随便找个模板套一下不就完了？

呵，天真。

如果你也是那种觉得“静态页面能有多难”的人，听我一句劝，别碰。除非你想在深夜里怀疑人生，除非你想对着浏览器控制台里的红色报错流泪。

我这次做的这个网站建设静态部分报告总结，真的是用血泪换来的。

先说HTML结构。很多人觉得写标签就是敲字，其实不然。语义化标签，你懂多少？div套div，div套div，最后你的代码就像一团乱麻。我为了那个header部分的布局，改了不下二十遍。为什么？因为我要适配手机端。

你们知道在手机上调试导航栏有多崩溃吗？明明在电脑上看好好的，一到手机屏幕，那个汉堡菜单就弹不出来，或者弹出来把主要内容给遮住了。我当时就想把键盘砸了。真的，那一刻，我真的想放弃。

但是，作为一名做了10年博客的老油条，我不能输。

我重新梳理了DOM结构，把那些多余的嵌套全删了。这时候，我才明白，为什么老鸟们总说“少即是多”。代码越干净，加载越快，bug越少。

接着是CSS。这是最让人头大的地方。

我要实现一个响应式的网格布局。听起来很高级对吧？实际上，我为了对齐那几行文字，调了无数个px。

你们有没有遇到过这种情况：明明设置了margin: 0 auto，结果它就是不居中？或者，明明设置了height: 100vh，结果内容溢出？

我遇到了。而且不止一次。

有一次，我为了一个按钮的hover效果，试了transition的所有属性。结果发现，因为父元素没有设置overflow: hidden，导致动画效果溢出容器，看起来特别丑。

那一刻，我真的想骂人。

但是，当我终于看到那个按钮平滑过渡的效果时，那种成就感，真的，无法言喻。

然后是JS。

我不喜欢用jQuery，太臃肿了。我想用原生JS。

结果呢？原生JS的兼容性，真的让人头秃。

我要实现一个图片懒加载的功能。逻辑很简单：当图片进入视口时，才加载src属性。

但是，怎么判断图片是否进入视口？

IntersectionObserver？好，现代浏览器都支持。但是，老版本的Safari不支持啊！

我不得不写polyfill。那段时间，我查遍了MDN，看了无数篇Stack Overflow的回答。

终于，我搞定了。

当我看到第一张图片在滚动到屏幕中间时才加载出来，页面加载速度瞬间提升了几百毫秒。

那一刻，我觉得所有的熬夜都值了。

现在，回过头来看这份网站建设静态部分报告总结，我觉得它不仅仅是一份报告，更是一段经历。

它记录了我的愤怒、我的焦虑、我的绝望，以及最后的喜悦。

如果你也在做网站静态部分，如果你也遇到了同样的问题，希望我的这些经验能帮到你。

别怕报错，别怕调试。

每一个bug，都是你成长的阶梯。

虽然这个过程很痛苦，但当你最终看到那个完美的页面时，你会觉得，这一切，都值得。

最后，说一句题外话。

做技术，真的需要一点耐心。

不然，你早就被那些红色的报错信息逼疯了。

就像我现在，虽然累，但心里是踏实的。

因为我知道，我搞定了。

这份网站建设静态部分报告总结，是我给这段日子的交代。

也是给你们的一份礼物。

希望它能帮到你们。

真的。

加油吧，同行们。

这条路，虽然难走，但风景不错。

至少，比我想象的，要好得多。

好了，不说了。

我要去睡个懒觉了。

这半个月，欠下的觉，得补回来。

晚安。