今天天没亮就爬起来开搞咖啡页面设计，主要是昨晚喝了自己手冲的曼特宁，睁眼到凌晨三点半还倍儿精神。先抓过马克杯灌了半杯凉白开，哐当打开电脑就直奔主题。

从瞎画到上工具

起手打开Figma先瞎整了一通。拖几个咖啡豆图片上去，调来调去看着跟菜市场海报似的。我一拍大腿，这哪成！掏出手机翻了二十几家网红咖啡店主页，发现这帮人特喜欢用大图糊脸。琢磨半天，我决定也整张大号咖啡拉图当背景，结果图太大直接卡成PPT。

折腾到太阳晒屁股，干脆重开个画布。这回学乖了：

• 先拿纸笔画火柴人布局——顶部塞导航栏，中间劈两半搞图文并茂
• 字体试了八遍，衬线体看着像卖古董的，黑体又太像路边摊传单
• 颜色玩脱了，咖啡棕配屎黄色简直灾难现场

被CSS暴揍实录

下午切进VSCode撸代码，开场就摔跟头。想给导航栏加点阴影效果，写个box-shadow差点把浏览器搞崩。最气人的是图标排版，手机上看七扭八歪活像贪吃蛇。气得我猛灌两杯浓缩，咬牙切齿改了三版：

• 改用Flexbox硬排（就是让图标排排站那个）
• 图片响应式写成筛子——电脑看着美滋滋，手机打开只剩半拉咖啡杯
• 按钮悬停效果像抽筋，鼠标移过去直接表演瞬移术

到晚饭点儿才搞明白，原来是用错max-width单位。把px换成vw那刻，手机电脑终于能同时做人了！

血泪换来的歪理邪说

九点半合上电脑时总结出几条教训：

• 千万别信网红设计，人家首页瀑布流美如画，你学着做分分钟变事故现场
• 手机适配要人命，做完赶紧掏自己手机戳戳看
• 咖啡色系玩不转就上安全牌，米白+深棕保平安

页面愣是做出种家庭咖啡馆的烟火气，虽然离高级感还差十八条街，但好歹能看清菜单价目表了。下次再折腾，非得先给显示器贴个便签："别整花活！"