单页面网站设计

那天突然想整个自己的作品集网站，琢磨了半天觉得单页面最省事——反正内容也不多，一个页面上扒拉两下全搞定。说干就干，随手抄起铅笔在草稿纸上瞎画布局：最顶上得怼个大名字，下头跟几行简介，中间塞作品，最底下留个联系方式。画完瞅着像回事儿，拍照存手机里当参考。

开工乱搞阶段

开电脑直接新建个空HTML文件，先敲个标题标签写自己名字，底下跟个段落标签吹两句牛。接着拿div框出一片地儿当作品展示区，每个作品都糊个标题加几句描述，顺手再怼几张截图占位——图片路径瞎写的，反正回头换真的。重点来了：导航栏直接做成一排按钮，点哪个就自动滑到对应区块。查着文档抄了段滚动代码，粘进去发现还真能咕噜一下滑过去！

头疼的屏幕适配

用自己手机预览时差点吐血——电脑上排得整整齐齐的方块，到手机上全叠成俄罗斯方块。赶紧扒拉教程学响应式，在CSS里狂加这种代码：

• 最大宽度限制：让内容别在宽屏幕上撑炸
• flex布局：小屏幕上作品列自动变单排
• 字体缩小：手机上看标题大字跟脸盆似的

调了俩钟头，举着手机横过来竖过去，总算在各种尺寸下看着不太寒碜了。

点按钮闪白屏的坑

本来以为搞定了，结果测试时发现点导航按钮瞬间会闪一下白屏，跟抽风似的。蹲电脑前瞪眼琢磨半天才醒过味儿——原来滚动时候浏览器默认有个动画效果。又翻论坛找到段CSS代码：给html标签加scroll-behavior:smooth，粘进去刷新页面再点，诶这回丝滑多了。

的折腾

临发布前总感觉少点一拍脑袋加了两个玩意儿：

• 页面往下滑的时候，右上角冒出个「回到顶部」的小箭头
• 作品图片悬停时稍微放大一下，显得高级点

折腾完F12那个调试工具看了八百遍，确认没红字报错才敢传服务器。现在这破站就长这样：开头大字报，中间是作品方块阵，滑到底能看见我邮箱。虽然简陋但该有的都有——反正比之前简历上光写个「精通网页设计」有说服力？