在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
在很多是时候往往要打印网页中的某一部分,而不是全部网页,所以告诉打印机要打印的部分,使用css进行一下设置是一个比较好的方式,先看一段代码: 复制代码 代码如下:<link href="css/screen.css" rel="stylesheet" type="text/css" media="screen" /> <link href="css/print.css" rel="stylesheet" type="text/css" media="print" /> 以上两行代码是引入外部css样式表,需要特别主义的是media属性值分别是screen和print,用来规定css样式表要服务的对象,如果属性值是media,则说明是为了在屏幕控制页面的显示,如果属性值是print,则说明css代码是用于控制需要打印的元素的样式的。 复制代码 代码如下:/* 隐藏不打印项 start */ h1 span{ display:none; } #sidebar{ display:none; } /* 隐藏不打印项 end */ 以上代码只是一个简单的演示,页面中的相关元素将不会被打印。 点击进行打印: 复制代码 代码如下:<input type="button" value="点击打印" onclick="window.print()"/> 点击以上按钮就可以实现打印效果。 复制代码 代码如下:<link rel="stylesheet" type="text/css" href="mycss.css"> 实际上,上面的link对象里,我们是省略了一个叫“media”的属性,这个属性指定样式表规则用于指定的设备类型。它有如下值可用: 复制代码 代码如下:<link rel="stylesheet" type="text/css" media="screen" href="mycss.css"> <link rel="stylesheet" type="text/css" media="print" href="myprintcss.css"> 那就表示,我们通过IE看到的网页,用到的css文件是mycss.css,而通过IE打印时用到的css文件则是myprintcss.css。想到什么了吗?对,我们可以通过print的设置,来让网页上的一些不需要打印的内容隐藏起来,比如,打印按钮。实际上,media还可以这样使用: 复制代码 代码如下:<style media=print> //这里定义你要打印时用到的css类 </style> 或者这样使用: 复制代码 代码如下:<style> @media print { //这里定义你要打印时用到的css类 } </style> |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论