为啥做这个宠物网页

我上周不是刷到个流浪猫救助视频嘛看得心里特不是滋味，就琢磨着能不能用自己这点三脚猫前端功夫干点一拍大腿，决定捣鼓个宠物领养信息网站出来。

从瞎画开始

抄起铅笔就在草稿纸上乱涂。第一版想着整得高大上点：导航栏在顶上飘着，左边塞一堆分类，中间留一大块儿放萌宠照片。结果画出来一看，跟迷宫似的，自己都找不着北。

• 重新画了三遍，把搜索框从角落挪到正中间；
• 宠物卡片缩成小方块，横着排一排，手机上看也不挤；
• 领养按钮用荧光绿，戳了五版色号才找到不晃眼的那种。

搬砖写代码

打开编辑器吭哧吭哧敲。刚写完导航栏就崩了——手机屏幕上菜单栏炸成两排，活像被狗啃了。赶紧翻文档查怎么搞响应式，原来是漏了个该死的 max-width，补上瞬间老实了。

给宠物卡片加悬停效果时更绝：鼠标挪上去图片突然放大，把旁边卡片全顶飞了。气得我灌了两杯咖啡，发现是 transform 没加 scale 限制。改完测试时手一滑，咖啡全洒键盘上，抹布擦屏幕时意外发现水滴在卡片反光效果上还挺自然，赶紧记下来当设计灵感。

填坑填到哭

最恶心的是宠物详情页：

• 点“查看详情”死活跳转不了，查半天是路径多了个斜杠；
• 领养表单提交后数据石沉大海，原来忘写后端接口，临时用本地存储顶着；
• 上传宠物图片总报错，压缩到200KB以下才认，自己写了个提示文案骂骂咧咧：“图片太大！猫都嫌你胖！”

结果意外还行

折腾到凌晨三点总算能看了：首页一排毛茸茸的小方块点开能看到吃饭睡觉打滚视频，领养按钮点完弹窗里自动填好宠物名字。拿给养狗的朋友看，他第一反应是戳着屏幕问：“这柴犬能领不？”——至少说明信息够直观！

总结就两句：做网页和养宠物一样，你以为在调教它，是被它折腾。下次再做，绝对先买防泼溅键盘再开工！