<p>用Flex布局可快速搭建响应式新闻卡片流：设容器display: flex; flex-wrap: wrap，卡片flex: 1 1 calc(33.333% - 1rem)实现桌面三列，媒体查询切换单列；禁用float，配合object-fit: cover控图、分层控制文字样式及按钮交互反馈。</p>
用 Flex 布局快速搭出新闻卡片流，别碰 float
很多人照着老教程写 .left/.center/.right 三栏，结果在手机上全挤成一列还错位——那是 2012 年的写法。现代新闻订阅页要的是「内容优先、响应自然」，display: flex 是唯一靠谱起点。
- 把所有新闻卡片包进一个
<section class="news-grid">，给它加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%
直接给 <img> 写 width: 100%，在 iPhone 等窄屏上会拉伸变形或横向滚动——这是新闻页被放弃的第一秒。
- 给图片容器（比如
<figure>或<div class="news-img">）设固定高宽，例如height: 180px - 图片本身加
width: 100%; height: 100%; object-fit: cover;，裁剪保比例，不拉伸 - 补一句
img { display: block; }，干掉图片下方默认留白（那个 4px 空隙）
<style>
.news-img {
height: 180px;
overflow: hidden;
}
.news-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
</style>“订阅”按钮状态必须有明确视觉反馈
很多小项目只写 button { background: #007bff; }，用户点完没反应，就以为没点上——这不是交互，是猜谜。
立即学习“前端免费学习笔记（深入）”；
- 默认态用
background: #007bff，悬停态加background: #0056b3（深 20%），点击态用transform: scale(0.98)模拟按压 - 已订阅状态不能只改文字，得加图标和颜色：比如插入
<span>✓</span> 已订阅，背景变#28a745 - 禁用时务必加
opacity: 0.6; cursor: not-allowed;，否则用户还会反复点
实际开发中，最易被跳过的是「移动端 touch 区域不足」——按钮小于 44×44px，在 iOS 上难点击。宁可让按钮稍大，也别为了“看起来精致”牺牲操作性。
