CSS 结果页样式：少写一行代码，多留一分体面

搜索框按下去，页面跳转，结果刷出来——这短短两秒里，用户其实已经完成了三次无声判断：
“有我要的吗？”
“能一眼看清吗？”
“值得我点进去吗？”

结果页不是后台日志，也不是数据快照。它是用户和系统之间最后一道“见面礼”。而CSS，在这里干的活，从来不是“让字变大一点”或“加个边框”，而是帮信息建立呼吸节奏、给注意力铺一条不费力的小路。

很多人一写结果页，就陷进两个坑：要么堆砌卡片、阴影、渐变，把页面搞得像UI组件展览；要么干脆放任自流，靠浏览器默认样式硬扛，结果列表挤成一坨，标题缩成省略号，时间戳小得要凑近看。这两种，本质上都是放弃了“信息分层”的责任。

真正管用的结果页样式，核心就三条：可扫视、可预判、可收口。

可扫视，是指用户视线横向滑过时，300毫秒内能抓住关键字段。比如电商搜索结果，价格和主图必须在第一眼落点区；文档类结果，标题+摘要前两句+更新时间构成黄金三角，缺一不可。CSS 不是去“美化”这个结构，而是用视觉权重把它钉死——标题用 font-weight: 600 + line-height: 1.4；价格用 color: #e53935 + font-size: 1.125rem；摘要则控制 max-lines: 2，配合 -webkit-line-clamp，而不是靠 JS 截断再加“展开”。

可预判，说的是用户看到某条结果，心里能自然浮现出它点开后的样子。这靠的不是猜，是一致的视觉锚点。比如所有带附件的文档结果，右上角统一加一个微小的 paperclip 图标（用伪元素画，不引图标字体）；所有视频结果，缩略图右下角固定位置叠一个播放按钮 SVG。这些细节不喧宾夺主，但一旦缺失，用户就会迟疑：“这是文字？还是能播的？”——那半秒犹豫，就是跳出率悄悄上升的起点。

可收口，最容易被忽略。结果页不该是无限下拉的深渊。当没有更多结果时，空白区域不能只写一句“暂无数据”。用 CSS 控制空状态容器的高度、内边距和图标大小，让它和正常结果项保持视觉等重。比如空状态区域设为 min-height: 200px，内部图标用 48px × 48px，文字行高 1.5，整体居中——这样用户滑到底部，感受到的是“到这里为止”，而不是“页面卡了”。

还有一处常被低估的细节：筛选态与结果的视觉耦合。用户刚点了“价格从低到高”，结果列表排序变了，但页面没有任何反馈，就像发了条消息没回音。解决方法很简单：在结果容器上加一个 subtle 的 border-top: 2px solid #4285f4，仅在有活跃筛选时生效。颜色不必刺眼，但线条要够稳——它不是装饰，是系统在说：“你刚才的操作，我收到了。”

字体排印上，别迷信“统一用思源黑体”。中文结果页里，标题用中黑，摘要用常规字重，时间/标签用细体，三者形成天然灰度差。关键是字号阶梯要克制：标题 1.25rem → 摘要 1rem → 辅助信息 0.875rem，每级差 0.125rem 刚好，差太多反而割裂。

响应式不是“小屏缩放”，而是重新组织信息优先级。手机端把时间戳挪到标题右侧 inline-block，用 white-space: nowrap + text-overflow: ellipsis 控制长度；PC 端则让它沉到底部右对齐。同一套数据，不同设备上该露什么、藏什么、怎么露，CSS 变量就能管住——定义 --result-title-size: 1.25rem; --result-meta-size: 0.875rem; 媒体查询里只改变量值，不碰结构。

最后说个反直觉的点：结果页的动效，越少越好。悬停放大卡片？滚动加载淡入？这些在营销页上讨喜，在结果页里全是干扰。用户要的是效率，不是演出。真要加动效，只做一件：点击选中某条结果时，用 outline-offset: 2px + outline: 2px solid #4285f4 给个清晰焦点，且确保键盘 Tab 也能走到——这不炫技，但让每个操作都有确定反馈。

写完结果页 CSS，不妨关掉开发者工具，用手机拍一张页面照片，眯起眼只看明暗块。如果标题、价格、摘要、空状态各自成块、边界清晰，那基本就成了。技术会迭代，框架会换，但人眼识别信息的方式，十年没变过。

结果页的体面，不在像素精准，而在让用户觉得：“嗯，它懂我接下来想干什么。”
那一行 margin-bottom: 1.5rem，那个刚刚好的 line-height，那个没乱跳的 hover 状态——它们不说话，但一直在替你点头。