html - 网页打印

Question

我的网页上有以下 HTML:

<div id=header>
   <a href="/" id="logo" name="logo"><span class="hide">FooBar</span></a>
      <div id="topnavmenu">
         <ul id="nav-utility">
            <li><a href="/careers">Careers</a></li>
            <li><a href="/blog">Blog</a></li>
            <li><a href="/test4/">Test4</a></li>
            <li><a href="/program">Program</a></li>
            <li><a href="/contact">Contact Us</a></li>
         </ul>
      </div>
</div>

当我打印页面时，我得到:

(/)   Careers (/careers)   Blog(/blog)   Test4(/test4) ....

问题:

1. 未显示 Logo 图片。在屏幕上工作正常
2. 为什么我在 parents 中打印 href？我该如何抑制它？

这是使用 bootstrap，但我不确定 bootstrap 是否是罪魁祸首。

谢谢，

P

Answer 1

编写 print css 时要记住的事情:-

1. 我们不需要导航来在纸上浏览 - 所以在打印时隐藏导航。
2. 删除横幅、广告和任何不需要的图片。
3. 字体大小应缩放到眼睛可以看到的合适数字，但不要太大。
4. 不要打印背景图片。保持白色。

您必须使用 CSS 媒体样式来提供打印特定区域的细节。好的做法是使用包含所有打印 css 的单独样式表，例如:

<link rel="stylesheet" type="text/css" media="print" href="print.css">

像下面这样在 print.css 中编写你的 css 样式

@media print {
/* your stylesheet for printing, eg.: */
   body {
           color : #000000;
           background : #ffffff;
           font-family :"Times New Roman", Times, serif;
           font-size : 12pt;
        }
  a {
           text-decoration : underline;
           color : #ddd;
    }
 #topnavmenu {
          display : none;
    }
   #logo {
       height:20px;
       margin-top:10px;

    }
}

Bootstrap css 不是罪魁祸首，因为它指定了 media="screen"属性，这就是为什么它只会影响屏幕而不影响打印。

 <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

另一种方法是将 MEDIA="screen, print" 分配给 Bootstrap 文件。 但这只是建议 如果您想要打印您的网站时完全按照它在桌面上的显示方式。 “So Save Trees”并只打印那些绝对必要的区域。 将 media="screen,print"分配给 Bootstrap css 的示例:

<link href="css/bootstrap.min.css" rel="stylesheet" media="screen,print">