Question to say "I can!"

今天河北快三走势:体验更佳的打印样式的10条忠告

2011-01-31

原文:体验更佳的打印样式的10条忠告

打印样式貌似要被遗忘了,其实他还是挺重要的,有些人会在打印一些文章在旅行途中看。

打印样式有很多好处。比如,在纸上阅读的感觉比在屏幕上好得多。

下面的10条忠告并不麻烦,但是却可以得到很好的打印样式,一起看看吧。

以防你忘记,我们看看如何设置打印样式。

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

media属性确保用户不会看到这个文件里面定义的样式。

需要注意的是,如果你的主要样式文件没有写media属性,那么打印样式就会继承他。为了区分它们,需要这样写:

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

1、取消导航

纸质物和电脑的最大区别是什么呢?纸上的东西是静态的,而电脑上的却是有交互的。为了实现那些交互,网页一般都有导航,而导航放在纸上就是毫无用处的了。

所以隐藏掉这些不必要的东西,这个操作也非常简单:

	<br />
	#nav, #sidebar {<br />
	    display: none;<br />
	}<br />

2、扩大内容区域

去掉了导航和边栏之后,内容就要充满整个页面,这样看起来才像是正常的一份文档,而不是打印在纸上的网页。

我们要做的只是改变一下宽度,重置浮动,去掉多余的边距。

<br />
#content {<br />
	width: 100%;<br />
	margin: 0;<br />
	float: none;<br />
}<br />

3、重置背景色

很多浏览器为了节省墨水,打印时候会默认去掉背景色,为了确保整个页面是白色背景,我们需要设置一下。

body {
	background: white;
}
#content {
	background: transparent;
}

4、重置字体颜色

我们重置了背景色之后,如果有些页面是深色背景浅色字,这样的话打印出来基本上是无法阅读的,为了修正这个问题,我们还得重新修改一下字体的颜色:

#author {
	color: #111;
}

5、显示连接的目标地址

因为纸上是没有交互的,所以读者也就无法去点击链接来获得更多的信息。如果读者正在读一个新产品的介绍,然后看到一个链接说点过去有更多详细信息,这不是扯淡么。对于这一点能做的也只能是把链接地址打印出来了。

对于支持CSS2的浏览器来说,这个问题也比较好修复。

a:link:after {
	content: " (" attr(href) ") ";
}

你也可以给他加上其他的样式,比如字体小一点、斜体什么的。

6、让链接从文本中突出

读者需要区别链接和普通文本,默认的蓝色和下划线是个不错的选择,但是我觉得加粗更好一些。

别忘了打印机一般都是黑白的,所以别指望能用颜色来区分。

a:link {
	font-weight: bold;
	text-decoration: underline;
	color: #06c;
}

#0066cc是一种新蓝色,但是在灰度打印机中的颜色类似#999999,所以使用这个颜色可以在彩色打印机和黑白打印机中都有比较好的表现。也会从普通文本中突出。

7、字体大小

打印的时候12pt是比较合适的,所以我们需要设置一下字体大小

p {
	font-size: 12pt;
}

8、字体呢

英文字体中,大多人喜欢serif,因为读着不会那么累,所以字体也得设置一下:

body {
	font-family: Georgia, &#8216;Times New Roman&#8217;, serif;
}

9、我的博客有很多留言,怎么办

这个问题就看你自己的选择了,你也可以让留言整个都不打印出来#comments{display:none;}

你也可以把评论挪到其他地方,给读着权利要不要打印出来。

#comments {
	page-break-before: always;
}

比如,你的博客有两页半长,那么评论就会从第四页开始,这样用户打印的时候也就能选择要不要打印了。

10、显示打印版的提示

比如:感谢您的打印,请上我们的网站阅读更多文章rockux.com这样的话,如果在打印页上出现,读者一定不会觉得太糟糕,相反可能会感到被在乎。这也很简单,只要:

#printMsg {
	display: block;
}

当然,默认的要个#printMsg{display:none}的样式才行。

作者:admin | Categories:设计问题 | Tags: 、

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*

  • 男人不安全了?日本读心美女机器人,你咋想的它全知道! 2019-05-03
  • 重庆市永川区:“1+8+X”模式探索基层人民调解新路子 2019-05-03
  • 春节我在岗:爸妈,儿子在军营给您们拜年了 2019-04-22
  • 传统文化,在中国文化里,居住是衡量一个家庭生活的基本因素。 2019-04-15
  • 俄韩就铺设途经朝鲜的天然气管道恢复磋商 2019-04-15
  • 经营者要想“我心换你心”,就要未雨绸缪,让不诚信的诱惑少一点,如此才能在市场中生存下来。反过来说,承担不起亏损就关门歇业,是否也是一种不诚信呢? 2019-04-11
  • 江西省能源集团公司党委副书记胡运生等2人被调查 2019-04-11
  • 乌鲁木齐:这个端午,他们的假日叫“坚守” 2019-03-29
  • 中国电信安康分公司60家智慧家庭便民服务中心盛大开业中国电信安康-最新活动 2019-03-28
  • 中心城区核心片组完成签约清零任务 2019-03-28
  • (Dos sesiones) Legislativo nacional de China concluye sesión anual Spanish.xinhuanet.com 2019-03-28
  • 西班牙一旅游公司官网竟把台湾和香港列为“国家” 2019-03-27
  • 【一周反腐】广东、重庆等地多名厅级干部被查处 2019-03-27
  • 任志强:房价走势并不是不可预测市场 开炮 2019-03-26
  • 世界醉美10条街道,亚洲只有中国上榜! 2019-03-23
  • 214| 277| 102| 834| 862| 834| 664| 212| 874| 560|