我打算打印我的页面..... 我不希望顶部显示..... 如何在纸张上打印时取下顶部........ 提供我的小提琴
http://jsfiddle.net/2dMuB/embedded/result/
<div class="mainDiv" style="border-bottom: 1px solid grey; height: 80px;">
<div class="subDiv" style="font-size: 24px; color: grey; padding-left: 35px;">
Company LOGO
</div>
<div class="subDiv" style="padding-left: 50px;">
<p><span style="font-weight: bold; font-family: arial; color: #333;">welcome xyz!</span> xyz@defie.co</p>
</div>
<div class="subDivMenu" style="width: 911px; margin-top: 0px; padding-left: 17px; ">
<div class="inline" style="padding-top: 12px; ">
<ul class="homePageLists" style="">
<li style="padding-bottom: 5px; list-style: none; color: #333;">
<a style="color: #cc0000; font-family: arial; font-size: 14px; font-weight: bold;" href="http://www.w3schools.com/" target="_blank">
Menu
</a>
</li>
<li style="padding-bottom: 5px; list-style: none; color: #; ">
<a style="color: #666; font-weight: bold;" href="http://www.w3schools.com/" target="_blank">
<img alt="squareList" style="margin-right: 10px;" id="logo" src="http://intra.defie.co/images/cube_search.png">
Search
</a>
</li>
<li style="padding-bottom: 5px; list-style: none; color: #653921; ">
<a style="color: #666; font-weight: bold;" href="http://www.w3schools.com/" target="_blank">
<img alt="squareList" style="margin-right: 10px;" id="logo" src="http://intra.defie.co/images/cube_inventory.png">
Create ID
</a>
</li>
<li style="padding-bottom: 5px; list-style: none; color: #653921; ">
<a style="color: #666; font-weight: bold;" href="http://www.w3schools.com/" target="_blank">
<img alt="squareList" style="margin-right: 10px;" id="logo" src="http://intra.defie.co/images/cube_inventory.png">
Product List
</a>
</li>
<li style="padding-bottom: 5px; list-style: none; color: #9e1c20; ">
<a style="color: #666; font-weight: bold;" href="http://www.w3schools.com/" target="_blank">
<img alt="squareList" style="margin-right: 10px;" id="logo" src="http://intra.defie.co/images/cube_inventory.png">
BOM List
</a>
</li>
<li style="padding-bottom: 5px; list-style: none; color: #ff5100; ">
<a style="color: #666; font-weight: bold;" href="http://www.w3schools.com/" target="_blank">
<img alt="squareList" style="margin-right: 10px;" id="logo" src="http://intra.defie.co/images/cube_inventory.png">
Customer List
</a>
</li>
<li style="padding-bottom: 5px; list-style: none; color: #184179;">
<a style="color: #666; font-weight: bold;" href="http://www.w3schools.com/" target="_blank">
<img alt="squareList" style="margin-right: 10px;" id="logo" src="http://intra.defie.co/images/cube_vender.png">
Vendor List
</a>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
<div class="subDiv" style="float: right;">
<p style="font-weight: bold;">ABC Systems</p>
<p>1234 lakeview Blvd, CA 94538</p>
<p>510-657-8981</p>
</div>
</div
&GT;
答案 0 :(得分:2)
向页面添加打印样式表,例如:
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
然后在该文件中,执行重置:
body {margin:0; padding:0; line-height: 1.4em; word-spacing:1px; letter-spacing:0.2px; font: 12px Arial, Helvetica,"Lucida Grande", serif; color: #000;}
然后设置打印时不希望显示的元素:
.homepagelinks {display:none;}
答案 1 :(得分:2)
@media print {
.mainDiv {
display: none;
}
/* any other styles you wish to target go here */
}