用样式表实现友好打印

作者：vkvi 来源：ITPOW（原创）日期：2006-11-3

在打印网页时，常常是把整个网页打印下来，其中的站标、导航条、广告等，也通通打印下来了，而我们真正需要的不是这些，这些内容不仅浪费纸张，其中的图片也大大浪费了墨水。

以前有些网站通过 JS 控制打印，以使不需要的内容隐藏起来，可是这有弊端，就是必须点击网页上的“打印”按钮才行，直接点击浏览器上的“打印”是实现不了预期效果的。

我们可以通过样式表来控制，以实现友好打印。相关阅读：四种方式将样式表应用到HTML

在本例中，有两个样式表，第二个样式表指定了 media 为 print，就是指只有打印的时候才起作用的样式表，通过 display 来控制内容的显示与隐藏。

<?xml version="1.0" encoding="gb2312"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
  <title>用样式表实现友好打印</title>
<style type="text/css">
body
{
    font-size:13px;
    line-height:150%;
}

#header,
#footer,
.ads
{
    clear:both;
    margin-top:5px;
    background-color:#008080;
    color:#FFFFFF;
}

.ads
{
    float:left;
}
</style>
<style type="text/css" media="print">
#header,
#footer,
.ads
{
    display:none;
}

.pageBody
{
    border:1px solid #999999;
}
</style>
</head>
<body>

<div id="header">这里是页眉，包含站标、广告条、导航栏等，打印时不希望显示</div>

<div class="pageBody">
  <div class="ads">
    <div><img src="http://www.itpow.com/images/logo.gif" alt="ITPOW" /></div>
    <div>这是文章页的广告，打印时不希望显示</div>
  </div>
  <div>这里是正文，正文，打印时希望显示，希望显示希望显示希望显示希望显示希望显示。请在浏览器菜单中选择“文件”、“打印预览”用以查看效果。</div>
</div>

<div id="footer">这里是页脚，包含版权声明、联系方式等，打印时不希望显示</div>

</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

电邮：cftea@126.com