css小项目实战_设计一个简洁的新闻订阅页面

用 Flex 布局可快速搭建响应式新闻卡片流：设容器 display: flex; flex-wrap: wrap，卡片 flex: 1 1 calc(33.333% – 1rem)实现桌面三列，媒体查询切换单列；禁用 float，配合 object-fit: cover 控图、分层控制文字样式及按钮交互反馈。

用 Flex 布局快速搭出新闻卡片流，别碰 float

很多人照着老教程写 .left/.center/.right 三栏，结果在手机上全挤成一列还错位——那是 2012 年的写法。现代新闻订阅页要的是「内容优先、响应自然」，display: flex 是唯一靠谱起点。

• 把所有新闻卡片包进一个
  

  ，给它加 display: flex; flex-wrap: wrap;

• 每张卡片设 flex: 1 1 calc(33.333% - 1rem);（桌面三列），再用 @media (max-width: 768px) 改成 flex: 1 1 100%（移动端单列）
• 千万别用 float + clear: both，它会让父容器高度塌陷，后续 footer 死活对不齐

标题与摘要的行高、字重必须分层控制

新闻页最常犯的视觉错误：所有文字都用 font-size: 16px + line-height: 1.5，结果标题没分量、摘要看不清。CSS 不是调色盘，是信息密度控制器。

• h2 新闻标题：用 font-weight: 700 + line-height: 1.2 + margin-bottom: 0.5rem，压紧空间，突出主干
• .meta（作者 / 时间）：font-size: 0.85em + color: #666 + margin-bottom: 0.75rem，弱化但可读
• p 正文摘要：line-height: 1.6（比标题松）+ text-indent: 1.5em（中文阅读刚需），别省这个缩进

移动端图片溢出？用 object-fit 而不是 width: 100%

直接给 写 width: 100%，在 iPhone 等窄屏上会拉伸变形或横向滚动——这是新闻页被放弃的第一秒。

• 给图片容器（比如
  

  或

  ）设固定高宽，例如 height: 180px

• 图片本身加 width: 100%; height: 100%; object-fit: cover;，裁剪保比例，不拉伸
• 补一句 img {display: block;}，干掉图片下方默认留白（那个 4px 空隙）

“订阅”按钮状态必须有明确视觉反馈

很多小项目只写 button {background: #007bff;}，用户点完没反应，就以为没点上——这不是交互，是猜谜。

立即学习 “ 前端免费学习笔记（深入）”；

• 默认态用 background: #007bff，悬停态加 background: #0056b3（深 20%），点击态用 transform: scale(0.98) 模拟按压
• 已订阅状态不能只改文字，得加图标和颜色：比如插入 ✓ 已订阅，背景变 #28a745
• 禁用时务必加 opacity: 0.6; cursor: not-allowed;，否则用户还会反复点

实际开发中，最易被跳过的是「移动端 touch 区域不足」——按钮小于 44×44px，在 iOS 上难点击。宁可让按钮稍大，也别为了“看起来精致”牺牲操作性。