上周翻出去年做的端午网页，越看越不顺眼，背景塞满龙舟粽叶差点溢出屏幕，栏目链接挤成一坨。我TM直接打开编辑器重做，这回认准三个原则：信息一眼抓到重点，动效要克制，手机电脑都得能看。

第一步：从“粽子堆”里杀出血路

去年主页铺满高清粽子图，结果加载慢得想砸键盘。这回学乖了：只留顶部通栏背景，选了个青绿色渐变当底色，用CSS画了个手写体“端午安康”飘在右上角。鼠标挪过去能显示阴影，代码就四五行：

• background: linear-gradient(160deg, #a8e063 0%, #56ab2f 100%)
• text-shadow: 2px 2px 4px rgba(0,0,0,0.3)

第二步：导航栏玩点小心机

以前导航按钮方方正正像麻将牌，现在改成粽叶造型标签。用::before伪元素画三角箭头，hover时填充黄绿色，点中哪个栏目底下就冒出一条金色波浪线——是用border-image加载的SVG虚线，比切图省事多了。

重点改造区域

• 习俗模块：图片悬浮变立体 给赛龙舟/挂艾草图加transform: translateY(-5px)，配上0.3秒缓动曲线，手指划过去像浮出水面
• 粽子食谱：丑排版逆袭 原先文字绕图绕得稀碎，直接拆成两栏。左边放咸甜党投票进度条（纯CSS画圆环），右边用dl列表排食材，dd标签前加了个糯米icon

头铁踩的坑

最费劲的是赛龙舟动画。拿div当船身，伪元素画船头龙纹，刚写个transform: translateX就跑偏到河里。调试两小时发现得用calc(100vw - 200px)算位移距离，加个infinite alternate才让龙舟在屏幕间来回跑。手机上看效果崩了，赶紧补media query把龙舟缩小30%……

昨晚十点收工前突发奇想，给每段标题加了闪烁光效。结果早上老婆拿手机刷网页，第一句就吐槽：“这文字闪得我头晕！”默默删掉animation-timing-function里的blink值——果然花哨玩意儿不如扎实排版

源码存Github了，需要参考的直接搜“端午网页布局避坑”。今年记住教训了：少堆素材，多留白，重点按钮突出得能当靶子戳 （完）