今天翻出自己刚学做网页时的作品，差点没笑出声——那些排版简直像被狗啃过似的。干脆动手把个人博客整个翻修了一遍，现在看着顺眼多了，给你们唠唠具体怎么折腾的。

第一步：先给字体动手术

以前傻乎乎直接用浏览器默认字体，读两行眼睛就发飘。这回专门打开谷歌字体库，挨个戳进去试效果：衬线体看着太老气，圆体又像幼儿园黑板报。挑了款叫"思源黑体"的，调成16px大小，1.6倍行距——电脑上看像书本排版，手机上看也不挤。

• 重点句子直接加深灰色背景
• 引文缩进四个字符再加浅灰竖线
• 段间距拉到1.5倍，再也不用担心文字糊成粥

第二步：收拾图片烂摊子

以前图片总爱到处乱窜，手机上看半截身子还卡在屏幕外边。这回把CSS盒模型当积木玩：给所有图片套上max-width:100%的紧身衣，再设置object-fit:cover。最绝的是加了个阴影滤镜，filter: drop-shadow(2px 2px 4px #00000020)，扁平图片瞬间变立体贺卡。

第三步：给颜色上枷锁

原来用的玫红配亮蓝，朋友说像霓虹灯管炸了。去在线配色工具抓了组莫兰迪色：主色定成陶土棕(#8B5A2B)，按钮用枯草黄(#D7B98E)，警告提示用苔藓绿(#606C38)。代码里全写成CSS变量，改色调就跟换衣服似的方便。

检查时发现个鬼故事：手机端菜单栏把标题挤成了俄罗斯方块！赶紧祭出flex弹性布局，media query里设置480px以下自动变成汉堡菜单。顺手把行高从1.2调到1.8，现在躺着刷手机也不怕戳错链接。

改完那天正好去便利店，盯着货架上的饮料包装直愣神。店员小哥凑过来问是不是便衣稽查，我指着排版说："你看营养表比商品名还显眼，这得改！"结果俩人蹲冰柜前研究了半小时包装设计，临走他送了我个甜筒——你看，审美强迫症还能换冷饮！