Teach you how to create a printed page with CSS

Creating a printed page with CSS, without having to create an HTML file specifically for printing, can save you some energy by using the Css+p layout HTML page as "Web Standard".

First, add the CSS file set for the printer on the HTML page

<link href= "Css/admin.css" rel= "stylesheet" type= "text/css" media= "screen"/><link href= "css/ Admin-print.css "rel=" stylesheet "type=" Text/css "media=" print "/>

Media= "Screen", is oriented to the display;

Media= "Print", which is oriented to print;

Second, create a print version of the page, remove unnecessary page elements, such as navigation, sidebar, advertising, copyright and so on. At this point can reflect the "Web Standard" to do the advantages of the page, with CSS to change the layout is easy.

/* Hide do not print items start */h1 span {/    * subtitle */display:none;  } #sidebar {/   * side bar */Display:none;} #content td.ads {/  * in-table ads */display:none;} #content th.col2 span {/  * anchor */Display:none;} #content #bottom-2 {/  * page Footer Table print */Display:none;} /* Hide non-printing items end */

Third, the Print button function, IE, Firefox can print normally.

<input Type=button value= "Print this page" onclick= "Window.print ()" >

In addition, there is a local version of the print page, you can do "Print Setup" and "Print Preview", but because of this setting, network printing needs to call IE a control, but also to reduce the security of ActiveX controls, and can only run on IE, not practical. So just post the call code, backup.

<object id=webbrowser classid=clsid:8856f961-340a-11d0-a96b-00c04fd705a2 height=0 width=0> </OBJECT> <input Type=button value= "Print Preview" ONCLICK=DOCUMENT.ALL.WEBBROWSER.EXECWB (7,1) ><input type=button value= "Page Setup "ONCLICK=DOCUMENT.ALL.WEBBROWSER.EXECWB (8,1) ><input Type=button value=" Print this page "onclick= Document.all.WebBrowser.ExecWB (6,1) >

Iv. matters of caution

In the print style, the print font size is measured in dots (PT), and the font size on the screen shows that the pixel (PX) is more appropriate than point and foot.

In the print style, the float property of the CSS can sometimes cause some trouble, causing the print page to be missing, so try to remove unnecessary block-level displays.

About print settings, customizing the header, footer, I looked up the data, the CSS and HTML can not be controlled, only by invoking the ActiveX control to implement, but it is not safe. The best way to do this is to print your own settings by clicking on the browser menu before printing.

There is also a label in the

CSS that can set page breaks: "Page-break-after" and "Page-break-before". Because my holiday page, the table is more, so there is no application of this CSS, the specific effect of your own experiment it.