> 웹 프론트엔드 > HTML 튜토리얼 > 利用css设置打印页面简单介绍_html/css_WEB-ITnose

利用css设置打印页面简单介绍_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 11:30:25
원래의
1129명이 탐색했습니다.

利用css设置打印页面简单介绍:
在很多是时候往往要打印网页中的某一部分,而不是全部网页,所以告诉打印机要打印的部分,使用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代码是用于控制需要打印的元素的样式的。
隐藏不需要打印的页面元素:
使用控制打印的css隐藏不需要打印的页面元素即可,那么点击打印,被打印的只有打印样式表控制下没有被隐藏的元素。
代码如下:

/* 隐藏不打印项 start */h1 span{   display:none; } #sidebar{   display:none; } /* 隐藏不打印项 end */
로그인 후 복사

以上代码只是一个简单的演示,页面中的相关元素将不会被打印。
点击进行打印:

<input type="button" value="点击打印" onclick="window.print()"/>
로그인 후 복사

 

点击以上按钮就可以实现打印效果。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=12813

更多内容可以参阅:http://www.softwhy.com/divcss/

 

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿