您的位置:首页 > Web前端 > CSS

A4纸像素及WEB打印样式

2012-12-02 01:24 281 查看
A4纸网页打印中对应像素的设定和换算

在公制长度单位与屏幕分辨率进行换算时,必须用到一个DPI(Dot Per Inch)指标。

经过我仔细的测试,发现了网页打印中,默认采用的是96dpi,并非传闻的72dpi

A4纸张的尺寸是210×297mm,按1英寸=25.41mm换算,即8.264×11.688英寸

所以,A4纸96dpi下的分辨率是794×1123,这就是我们在制作网页的时候需要的象素。

但是打印机是无法满幅打印的,总要有页边距,所以我们在制作网页的时候必须减去页边距。

0.5cm=38px

1cm=76px

以下是我测试的各种页边距下,A4纸对应的象素尺寸:

打印页边距设定为 0mm 时,网页内最大元素的分辨率:794×1123

<div style="width:794px;height:1123px;border:1px solid #000000;"> </div>

打印页边距设定为 5mm 时,网页内最大元素的分辨率:756×1086

<div style="width:756px;height:1086px;border:1px solid #000000;"> </div>

 

打印页边距设定为 10mm 时,网页内最大元素的分辨率:718×1086

<div style="width:718px;height:1086px;border:1px solid #000000;"> </div>

打印页边距设定为 1.5mm 时,网页内最大元素的分辨率:680×1086

<div style="width:680px;height:1086px;border:1px solid #000000;"> </div>

打印页边距设定为 19.05mm 时,网页内最大元素的分辨率:649×978

<div style="width:649px;height:978px;border:1px solid #000000;"> </div>

打印样式

<html>

<head>

<title>看看</title>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<!--media=print 这个属性可以在打印时有效-->

<style media=print>

.Noprint{display:none;}

.PageNext{page-break-after: always;}

</style>

<style>

.tdp

{

border-bottom: 1 solid #000000;

border-left: 1 solid #000000;

border-right: 0 solid #ffffff;

border-top: 0 solid #ffffff;

}

.tabp

{

border-color: #000000 #000000 #000000 #000000;

border-style: solid;

border-top-width: 2px;

border-right-width: 2px;

border-bottom-width: 1px;

border-left-width: 1px;

}

.NOPRINT {

font-family: "宋体";

font-size: 9pt;

}

</style>

</head>

<body >

<center class="Noprint" >

<p>

<OBJECT id=WebBrowser classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 width=0>

</OBJECT>

<input type=button value=打印 onclick=document.all.WebBrowser.ExecWB(6,1)>

<input type=button value=直接打印 onclick=document.all.WebBrowser.ExecWB(6,6)>

<input type=button value=页面设置 onclick=document.all.WebBrowser.ExecWB(8,1)>

</p>

<p> <input type=button value=打印预览 onclick=document.all.WebBrowser.ExecWB(7,1)>

<br/>

</p>

<hr align="center" width="90%" size="1" noshade>

</center>

<table width="90%" border="0" align="center" cellpadding="2" cellspacing="0" class="tabp">

<tr>

<td colspan="3" class="tdp">第1页</td>

</tr>

<tr>

<td width="29%" class="tdp"> </td>

<td width="28%" class="tdp"> </td>

<td width="43%" class="tdp"> </td>

</tr>

<tr>

<td colspan="3" class="tdp"> </td>

</tr>

<tr>

<td colspan="3" class="tdp"><table width="100%" border="0" cellspacing="0" cellpadding="0">

<tr>

<td width="50%" class="tdp"><p>这样的报表</p>

<p>对一般的要求就够了。</p></td>

<td> </td>

</tr>

</table></td>

</tr>

</table>

<hr align="center" width="90%" size="1" noshade class="NOPRINT" >

<!--分页-->

<div class="PageNext"></div>

<table width="90%" border="0" align="center" cellpadding="2" cellspacing="0" class="tabp">

<tr>

<td class="tdp">第2页</td>

</tr>

<tr>

<td class="tdp">看到分页了吧</td>

</tr>

<tr>

<td class="tdp"> </td>

</tr>

<tr>

<td class="tdp"> </td>

</tr>

<tr>

<td class="tdp"><table width="100%" border="0" cellspacing="0" cellpadding="0">

<tr>

<td width="50%" class="tdp"><p>这样的报表</p>

<p>对一般的要求就够了。</p></td>

<td> </td>

</tr>

</table></td>

</tr>

</table>

</body>

</html>

附:打印样式1
<html>

<head>

<title>看看</title>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<!--media=print 这个属性可以在打印时有效-->

<style media=print>

.Noprint{display:none;}

.PageNext{page-break-after: always;}

</style>

<style>

.tdb

{

border-bottom: 1 solid #000000;

border-left: 1 solid #000000;

border-right: 1 solid #000000;

border-top: 1 solid #000000;

height:50px;

font-family: "仿宋_GB2312","宋体";

text-align:center;

}

.tdb1

{

border-bottom: 1 solid #000000;

border-left: 1 solid #000000;

border-right: 1 solid #000000;

border-top: 1 solid #000000;

height:30px;

font-family: "仿宋_GB2312","宋体";

text-align:center;

}

.tdn

{

border-bottom: 1 solid #000000;

border-left: 1 solid #000000;

border-right: 1 solid #000000;

border-top: 1 solid #000000;

height:50px;

font-family: "仿宋_GB2312","宋体";

font-size:16px;

font-weight:bold;

text-align:center;

}

.tdn1

{

border-bottom: 1 solid #000000;

border-left: 1 solid #000000;

border-right: 1 solid #000000;

border-top: 1 solid #000000;

height:30px;

font-family: "仿宋_GB2312","宋体";

font-size:16px;

font-weight:bold;

text-align:center;

}

.tabp

{

font-size:16px;

border-color: #000000 #000000 #000000 #000000;

border-style: solid;

border-top-width: 2px;

border-right-width: 2px;

border-bottom-width: 2px;

border-left-width: 2px;

BORDER-COLLAPSE: collapse;

}

.NOPRINT {

font-family: "宋体";

font-size: 12pt;

}

.tabz{

border-bottom: 1 solid #000000;

border-left: 0 solid #000000;

border-right: 0 solid #000000;

border-top: 0 solid #000000;

font-size:16px;

font-weight:bold;

text-align:left;

font-style:italic;

vertical-align:bottom;

}

.paragraph{

 margin-top:6px;

 margin-bottom:0px;

 margin-left:0px;

 margin-right:0px;

}

</style>

</head>

<body >

<center class="Noprint" >

<p>

<OBJECT id=WebBrowser classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 width=0>

</OBJECT>

<input type=button value=直接打印 onclick=document.all.WebBrowser.ExecWB(6,6)>

<input type=button value=打印预览 onclick=document.all.WebBrowser.ExecWB(7,1)> 

<input type=button value=选打印机 onclick=document.all.WebBrowser.ExecWB(6,1)>

 <input type=button value=页面设置 onclick=document.all.WebBrowser.ExecWB(8,1)>

</p>

<br/>

第一页

<hr align="center" width="90%" size="1" noshade>

</center>

 

<center>

<table style="font-family:黑体; font-size:24px; font-weight:bold;line-height:130%; letter-spacing:0.2em; margin-top:40px;">

<tr><td align="center">

西安文理学院2009年学前教育专业(舞蹈方向)<br>

招生考试报名登记表<br>

</td></tr></table>

<table width="680px" align="center" cellpadding="0" cellspacing="0" class="tabp">

  <tr>

     <td class="tdb" width="160px" style="line-height:100%;">生源省份颁发的<br>文化课考试准考证号<br>(或报名序号)</td>

     <td class="tdn" colspan="2" width="170px">09611111111111</td>

     <td class="tdb" colspan="2"  width="140px">考生类别<br><span style="font-size:12px;">(艺术文/艺术理)</span></td>

     <td class="tdn" width="100px">艺术文</td>

     <td class="tdb" rowspan="3"  width="110px"><img src="pic/09610109130193.jpg"></td>

  </tr>

  <tr>

     <td class="tdb">姓名</td>

     <td class="tdn" width="100px">举例举例</td>

     <td class="tdb" width="60px">性别</td>

     <td class="tdn" width="60px">男</td>

     <td class="tdb" width="90px">民族</td>

     <td class="tdn"  width="100px" >汉族</td>

  </tr>

  <tr>

     <td class="tdb">身份证号</td>

     <td class="tdn" colspan="2">610410197803152222</td>

     <td class="tdb">出生<br>日期</td>

     <td class="tdn" colspan="2">年月日</td>

  </tr>

  <tr>

     <td class="tdb">毕业学校或<br>工作单位</td>

     <td class="tdn" colspan="3">*****</td>

     <td class="tdb">户口所<br>在省份</td>

     <td class="tdn" colspan="2">*省*市(区)</td>

  </tr>

  <tr>

     <td class="tdb">合格证邮<br>寄地址</td>

     <td class="tdn" colspan="4">******</td>

     <td class="tdb">收件人</td>

     <td class="tdn">******</td>

  </tr>

  <tr>

     <td class="tdb">联系电话</td>

     <td class="tdn" colspan="4" style="font-size:13px;"><font style="font-weight:normal;">手机:</font>13888888888888 <font style="font-weight:normal">固定:</font>0931-88888888</td>

     <td class="tdb">邮政编码</td>

     <td class="tdn">******</td>

  </tr>

 

  <tr>

     <td class="tdb" rowspan="4">个人简历</td>

     <td class="tdb">自何年何月</td>

     <td class="tdb" colspan="2">至何年何月</td>

     <td class="tdb" colspan="3">在何学校学习或单位工作</td>

  </tr>

  <tr>

     <td class="tdn"></td>

     <td class="tdn" colspan="2"></td>

     <td class="tdn" colspan="3"></td>

  </tr>

  <tr>

     <td class="tdn"></td>

     <td class="tdn" colspan="2"></td>

     <td class="tdn" colspan="3"></td>

  </tr>

  <tr>

     <td class="tdn"></td>

     <td class="tdn" colspan="2"></td>

     <td class="tdn" colspan="3"></td>

  </tr>

 

  <!--音乐表演-->

  <tr>

     <td class="tdb" rowspan="3">填报专业<br><span style="font-size:12px;">(在专业及专业方向<br>下的括号中打"√")</span></td>

     <td class="tdb" colspan="6">音乐表演(本科)</td>

  </tr>

  <tr>

     <td class="tdb" colspan="2"><span style="font-size:14px;">声乐方向</span></td>

     <td class="tdb" colspan="2"><span style="font-size:14px;">键盘方向</span></td>

     <td class="tdb" colspan="2"><span style="font-size:14px;">民族器乐演奏方向</span></td>

  </tr>

  <tr>

     <td class="tdn" colspan="2">(√)</td>

     <td class="tdn" colspan="2">(√)</td>

     <td class="tdn" colspan="2">(√)</td>

  </tr>

 

  <!--音乐学-->

  <tr>

     <td class="tdb" rowspan="2">填报专业<br><span style="font-size:12px;">(在专业及专业方向<br>下的括号中打"√")</span></td>

     <td class="tdb" colspan="3">音乐学<span style="font-size:12px;">(本科)艺术文理兼招</span></td>

     <td class="tdb" colspan="3">学前教育<span style="font-size:12px;">(音乐方向、专科)仅限艺术文科</span></td>

  </tr>

  <tr>

     <td class="tdn" colspan="3">(√)</td>

     <td class="tdn" colspan="3">(√)</td>

  </tr>

 

  <tr>

     <td class="tdb">考生本人签名</td>

     <td class="tdb" colspan="2"></td>

     <td class="tdb" colspan="4">本人确认以上信息准确无误,并与高考志愿信<br>息一致,凡因信息错误所导致的后果自负。</td>

  </tr>

</table>

<!--音乐表演--> 

<table border="0" cellpadding="0" cellspacing="0" width="680px"  style="text-align:left; font-weight:bold; font-size:16px; font-family:'仿宋_GB2312';margin-top:5px; margin-bottom:5px">

   <tr><td>注:音乐表演专业内的专业方向只能报一项,不能选择兼报。</td></tr>

</table>

  

<table border="0" cellpadding="0" cellspacing="0" width="680px;" height="210px;">

   <tr>

      <td class="tdn" width="300px" style="font-weight:normal">粘贴艺术类报考证复印件</td>

      <td width="70px"></td>

      <td class="tdn" width="300px"  style="font-weight:normal">粘贴身份证复印件</td>

   </tr>

</table>  

</center>

 

<center  class="Noprint" >

  <hr align="center" width="90%" size="1" noshade  class="NOPRINT" style="margin-top:40px;" >

  <br><br>第二页

</center>

<center>

<div class="PageNext"></div>

<table style="font-family:黑体; font-size:24px; font-weight:bold;line-height:130%; letter-spacing:0.2em; margin-top:40px;" width="718px">

   <tr><td align="center">

   西安文理学院2009年学前教育(舞蹈方向)专业考试<br>

   <span style="letter-spacing:30px;">准考证<br>

   </td></tr>

</table>

<table height="300px" border="0" cellpadding="0" cellspacing="0" width="718px">

  <tr>

     <td valign="middle" width="110px" rowspan="6">

          <img src="pic/09610109130193.jpg">

     </td>

     <td>

        <table  border="0" cellpadding="0" cellspacing="0"  style="font-size:16px;font-family:'黑体', '宋体'; line-height:120%; padding-top:8px;" width="308">

          <tr>

             <td width="150" align="right">生源省份颁发的文 <br>化课考试准考证号 <br>(或报名序号 ):</td>

             <td width="150" class="tabz">09613333333333</td>

          </tr>

          <tr>

             <td  align="right">院校颁发的专   <br>业课准考证号 :</td>

             <td  class="tabz">09613333333333</td>

          </tr>

          <tr>

             <td  align="right" style="letter-spacing:10px;">身份证号:</td>

             <td  class="tabz">096133333333332222</td>

          </tr>

          <tr>

             <td  align="right"><span style="letter-spacing:65px;">姓名</span> :</td>

             <td  class="tabz">王一</td>

          </tr>

          <tr>

             <td  align="right"><span style="letter-spacing:65px;">性别</span> :</td>

             <td  class="tabz">男</td>

          </tr>

          <tr>

             <td  align="right" style="letter-spacing:10px;">考点名称:</td>

             <td  class="tabz">西安文理学院</td>

          </tr>

        </table>

     </td>

     <td width="300px;" style="line-height:150%; padding-left:8px;">

        <p class="paragraph">1、考生须持我校签发的准考证、专业报考证和本人身份证到指定报名地点参加专业考试。</p>

        <p class="paragraph">2、考生按要求入场,不得大声喧哗,避免影响其他考生考试。</p>

        <p class="paragraph">3、考试期间要严格遵守考场纪律,考试结束,应立即离开考场。</p>

        <p class="paragraph">4、考生食宿自理,除钢琴外,其它考具自备。</p>

        <p class="paragraph">5、考试时间:2009.3.20  8:30开始</br>

              考试地点:西安文理学院中校区  西安市太白南路212号</p>

        <p class="paragraph">注:请考生在考试当天在侯考试集合(?),由工作人员带领至考场。</p>

     </td>

  </tr>

</table>

 

<!--音乐表演--> 

<table width="718px"  align="center" cellpadding="0" cellspacing="0" class="tabp">

  <tr>

     <td class="tdb1" rowspan="3"  width="160px;">填报专业<br><span style="font-size:12px;">(在专业及专业方向<br>下的括号中打"√")</span></td>

     <td class="tdb1" colspan="3">音乐表演(本科)</td>

  </tr>

  <tr>

     <td class="tdb1" width="160px;"><span style="font-size:14px;">声乐方向</span></td>

     <td class="tdb1" width="160px;"><span style="font-size:14px;">键盘方向</span></td>

     <td class="tdb1"><span style="font-size:14px;">民族器乐演奏方向</span></td>

  </tr>

  <tr>

     <td class="tdn1">(√)</td>

     <td class="tdn1">(√)</td>

     <td class="tdn1">(√)</td>

  </tr>

  <tr>

     <td class="tdb1">考生本人签名</td>

     <td class="tdb1" width="120px;"></td>

     <td class="tdb1" colspan="2">本人确认以上信息准确无误,并与高考志愿<br>信息一致,凡因信息错误所导致的后果自负。</td>

  </tr>

</table>

<table border="0" cellpadding="0" cellspacing="0" width="718px"  style="text-align:left; font-weight:bold; font-size:16px; font-family:'仿宋_GB2312';margin-top:5px;">

   <tr><td>注:音乐表演专业内的专业方向只能报一项,不能选择兼报。</td></tr>

</table>

<!--音乐学-->

<table width="718px"  align="center" cellpadding="0" cellspacing="0" class="tabp">

  <tr>

     <td class="tdb1" rowspan="2" width="160px;">填报专业<br><span style="font-size:12px;">(在专业及专业方向<br>下的括号中打"√")</span></td>

     <td class="tdb1" colspan="2" width="279px">音乐学<span style="font-size:12px;">(本科)艺术文理兼招</span></td>

     <td class="tdb1" colspan="2" width="279px">学前教育<span style="font-size:12px;">(音乐方向、专科)仅限艺术文科</span></td>

  </tr>

  <tr>

     <td class="tdn1" colspan="2">(√)</td>

     <td class="tdn1" colspan="2">(√)</td>

  </tr>

 

  <tr>

     <td class="tdb1">考生本人签名</td>

     <td class="tdb1" colspan="1"></td>

     <td class="tdb1" colspan="3">本人确认以上信息准确无误,并与高考志愿信<br>息一致,凡因信息错误所导致的后果自负。</td>

  </tr>

</table>

<table border="0" cellpadding="0" cellspacing="0" width="718px"  style="text-align:left; font-weight:bold; font-size:16px; font-family:'仿宋_GB2312';margin-top:5px;">

   <tr><td>注:本表专业:音乐学、学前教育(音乐方向)。</td></tr>

</table>

</center>

</body>

</html>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: