🩹 打印药箱清单时，别再手动截图粘贴了

上周三晚上，我妈在厨房翻出过期降压药，边念叨边掏出手机拍了张‘手写药单’照片发到家庭群。我点开一看：字迹糊、没日期、找不到‘儿童退烧贴’在哪行……10分钟后，我用Cursor+Claude Code生成了一个可打印、带条形码、按药品类型自动分栏的《家庭药箱清单》网页——但她第一次打印出来，还是满页错位、按钮挤在右上角、二维码被裁掉一半。

直到我删掉了项目里那行看似无害的 /print 路由，换上3行原生CSS媒体查询，她第二天早上就微信发来一张A4纸实拍：「这回连楼下诊所护士都说‘比他们台账还清楚’」。

今天这篇，不讲部署、不聊API，只拆解零基础也能抄的3个打印专用CSS技巧——它们藏在所有AI生成网页的盲区里，但能让你的生活工具真正‘拿得出手’。

---

✅ 第一步：先生成一个‘能看’的药箱清单（5分钟）

打开Cursor，新建文件 index.html，右键 → Ask Claude → 输入Prompt：

> 用纯HTML+CSS生成一个家庭药箱清单网页。要求：
> - 分四类展示：口服药 / 外用药 / 儿童用品 / 急救物品
> - 每项含：药品名、有效期、存放位置、剩余数量、是否开封
> - 页面顶部有‘家庭药箱｜2024年更新’标题，右上角加一个‘打印本页’按钮
> - 不用JavaScript，不调用外部字体，兼容微信内置浏览器

等待3秒，Claude返回完整代码。复制粘贴进index.html，右键 → Open Preview，预览正常。

⚠️ 此时点击「打印本页」→ 会发现：

右上角按钮印在纸中央

条形码被截断

‘口服药’和‘外用药’两栏在一页里挤成一团

页眉页脚空白巨大

这就是典型「屏幕友好 ≠ 打印友好」。

---

✅ 第二步：插入3行救命CSS（2分钟，无需懂CSS）

在标签内，


📌 关键操作：

给「打印本页」按钮加上 id="print-btn" 属性

给每个分类区块（如

）加上 class="category-section"

给页面顶部标题栏加 class="no-print"

💡 这3行不是魔法——它们是浏览器原生支持的打印媒体查询规则，Cursor和Claude Code默认不会生成，但你加进去，立刻生效。

---

✅ 第三步：测试 & 升级（3分钟）

在Chrome中按 Ctrl+P（Windows）或 Cmd+P（Mac），进入打印预览

选择「目标打印机」→「另存为PDF」

对比前后：

- ✅ 页眉页脚干净，仅剩药品内容
- ✅ 每个分类独占一页（口服药→第1页，外用药→第2页…）
- ✅ 条形码完整显示，字号适中可扫码

🔧 进阶小技巧（选做）：

想加页码？在@media print里加：@page { @bottom-center { content: "第 " counter(page) " 页"; } }

想让过期药自动标红？给有效期加判断逻辑（Claude可帮你补）：

  2024-06-30
  

再加CSS：.expiry[data-date="2024-06-30"] { color: red; font-weight: bold; }

---

💡 为什么这招特别适合零基础？

❌ 不需要学Flex/Grid布局

❌ 不需要装任何插件或依赖

❌ 不需要改HTML结构逻辑，只加class和几行CSS

✅ 所有主流浏览器（包括微信iOS版）都支持@media print

✅ 同一套技巧，可复用于：

- 社区防疫物资登记表（打印张贴）
- 家庭旅行行李清单（A4纸塞进背包）
- 幼儿园手工材料采购单（老师直接复印）

---

🌟 真实反馈：从「凑合用」到「被要源码」

我把改好的链接发到小区业主群，附言：「扫码→打印→贴冰箱」。2小时后，物业王姐私信：「能改成我们物业的LOGO和联系电话吗？明天晨会就发给每栋楼管家」。我用Claude重写Prompt：

> “把原家庭药箱清单网页，顶部标题改为‘XX花园物业｜家庭健康服务’，左上角加物业LOGO（用base64编码的PNG占位），底部加‘咨询电话：138XXXXXXX’，保持所有打印优化不变。”

30秒生成新代码，发给她——她当场打印5份，贴在各单元门禁旁。

你看，真正的「生活黑客」，从来不是写最炫的代码，而是用最少改动，解决最真实的纸面问题。

> ✨ 小结：打印不是技术终点，而是交付起点。当你学会用3行CSS接管打印机，AI生成的网页才算真正落地进生活。

---

下一步行动建议：

打开你任意一个AI生成的网页（比如上周做的团购页）

按本文方法加@media print规则

Ctrl+P预览，截图对比前后 → 发到#life-hacks频道打卡！

我们下周拆解：如何让AI生成的「家庭水电费分摊表」，一键导出Excel并保留公式（依然不用写JS）。