2013-02-15 251 views
0

我打算打印我的頁面..... 我不想讓頂部顯示..... 如何在打印紙張時去除頂部... .... 提供我的小提琴下面打印頁面

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> [email protected]</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 

>

+1

使用替代的打印CSS頁面 – 2013-02-15 18:59:38

回答

2
@media print { 
    .mainDiv { 
     display: none; 
    } 
    /* any other styles you wish to target go here */ 
} 
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;}