1
2
3
4
5
6

  @media screen {}

  /* print style */
  @media print {

  }

1

  <link href="/path/to/print.css" media="print" rel="stylesheet" />

1
2
3
4
5
6
7
8
9

  /* print.css */
  header, footer, aside, nav, form, iframe, .menu, .hero, .adslot {
    display: none;
  }

  /* https://css-tricks.com/stylesheets-for-printing/ */
  #header, #navigation, #footer, .any, .random, .junk, .on, .your, .page, .that, .shouldnt, .print {
    display: none;
  }

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

  <style>
  /* hidden on-screen */
  .print {
    display: none;
  }

  @media print {

    /* visible when printed */
    .print {
      display: block;
    }

  }
  </style>

  <p class="print">Some print info.</p>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

  /* 显示链接 */
  a::after {
    content: " (" attr(href) ")";
  }

  /* 添加一些打印信息，如网站 */
  main::after {
    content: "Copyright site.com";
    display: block;
    text-align: center;
  }