日期:2014-05-17  浏览次数:20814 次

css 控制打印按钮显示

<style media="print">
.noprint { display: none }
</style>
……
<body>
<input type="submit" value="显示列表" id=submit1 name=submit1 class="noprint">
……
</body>

=======================

<style media="print">//这表示是在打印时的样式
.noprint { display: none }
</style>

<style media="screen"> //这表示是在屏幕显示时的样工
.print { }
</style>

……
<body>
<input type="submit" value="打印" id=submit1 name=submit1 class="print">
<input type="submit" value="不打印,但可以看" id=submit1 name=submit1 class="noprint">
……
</body>
=========================

@media版本:CSS2  兼容性:IE5+

语法:

@media sMedia { sRules }

说明:

sMedia :  指定设备名称。请参阅附录:设备类型
sRules :  样式表定义

指定样式表规则用于指定的设备类型。请参阅link对象的media属性(特性)。

示例:

// 设置显示器用字体尺寸
@media screen {
BODY {font-size:12pt; }
}

// 设置打印机用字体尺寸
@media print {
@import "print.css"
BODY {font-size:8pt;}
}
===========================

Media Types 设备类型


Media Type
设备类型 CSS Version
版本 Compatibility
兼容性 Description
简介
all CSS2 IE4+ 用于所有设备类型
aural CSS2 NONE 用于语音和音乐合成器
braille CSS2 NONE 用于触觉反馈设备
embossed CSS2 NONE 用于凸点字符(盲文)印刷设备
handheld CSS2 NONE 用于小型或手提设备
print CSS2 IE4+ 用于打印机
projection CSS2 NONE 用于投影图像,如幻灯片
screen CSS2 IE4+ 用于计算机显示器
tty CSS2 NONE 用于使用固定间距字符格的设备。如电传打字机和终端
tv CSS2 NONE 用于电视类设备

============================

想实现在一个页面中显示出全部内容 但是不打印表格中的部分内容 ?

.css中增加

@media Print
{
.noPrint {
DISPLAY: none
}

不打印的地方这样用,如
<Div class="noPrint">
....
</Div>

<table class="noPrint">
...
</table>

?

==========================

或则: VISIBILITY: hidden 隐藏比较好. <style>@media print {.noPrint{VISIBILITY: hidden;}}</style>

?

==========================

如何做到用 css 的@media print控制只打印panel里的内容?

<style>
@media print {
.a {display:none}
}
</style>
<div class=a>
A