HTML/CSS 打印页面样式实战详解（新手必看）

在HTML/CSS开发中，打印页面样式几乎是绕不开的话题。不管是刚入门的新手，还是写了几年代码的老手，都难免在细节上栽跟头。这篇文章把打印页面样式的知识点系统梳理一遍，并附上可以直接运行的示例。

第一步：理解打印页面样式的基本概念

别在生产环境直接试打印页面样式的新写法，先在测试环境验证。

团队里推广打印页面样式的正确用法，比一个人用得好更有价值。

第二步：动手实现打印页面样式

打印页面样式，代码如下：

@media print {
  /* 隐藏无关元素 */
  .navbar, .sidebar, .footer, .btn { display: none !important; }

  /* 打印用黑字白底，省墨又清晰 */
  body { color: #000; background: #fff; font-size: 12pt; }

  /* 链接后显示 URL，方便纸质查阅 */
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 90%; }

  /* 避免表格跨页被截断 */
  table { page-break-inside: avoid; }
}

第三步：验证与调优

1. 定时任务没执行，先查 cron 表达式，再查系统时区，最后查日志。
2. 不要在线上环境直接调试，复制一份数据到本地慢慢查。

收尾

打印页面样式的内容聊完了。说一千道一万，代码这行终究是靠手吃饭——多写，永远是王道。

遇见问题加 QQ23979811 协助处理