网页制作中,想打印出隐藏的元素,注意不是在打印时隐藏,而是隐藏元素的打印,css属性应该如何设置?

html-css0126

网页制作中,想打印出隐藏的元素,注意不是在打印时隐藏,而是隐藏元素的打印,css属性应该如何设置?,第1张

很简单,再写一个打印专用的css文件,让隐藏的东西再显示出来,这并不影响屏幕上的显示效果。

在网页头部调用

<link href="用于打印的css文件地址" type=“text/css” rel=“stylesheet” media=“print” />

media=“print” 意思就是在打印的时候启用该样式。

1、使用display:none来隐藏所有内容

display:none可以让网页中所有内容不显示,如代码、文字、链接、图片、div层,是推荐的内容隐藏方式。

<div style="display:none">我不占地儿,你看不见我;</div>

2、使用visibility:hidden来隐藏内容

visibility:hidden和display:none可以隐藏的内容几乎一样,但唯一区别是它虽然隐藏了内容,但被隐藏掉的内容仍旧占据空间,这段隐藏了内容却保留空间的位置会在网页中显示为空白。

<div style="visibility:hidden">我占了地儿,你也看不见我;</div>

3、使用overflow:hidden隐藏溢出内容

overflow:hidden这种方式可以隐藏掉固定区域外的内容,它可以有效控制显示区域。但应注意,使用它时需要给它定义宽度和高度,否则会无效。

<div style="width:120pxheight:20pxoverflow:hidden">我占的地儿太多了你就看不见我的尾巴了。。。。。</div>overflow用法中存在一个分支,overflow-x:hidden和overflow-y:hidden,x是横向范围,y是纵向范围,这两个属性经常用在需要隐藏滚动条时。

1、使用display:none来隐藏所有信息(无空白位占据)推荐,CSSdisplay手册查看

2、使用overflow:hidden来隐藏溢出的文字或图片适用推荐,CSSoverflow手册查看

3、使用overflow-y:hidden和overflow-x:hidden控制滚动条的隐藏与否,CSSoverflow-y手册查看,CSS手册查看overflow-x