2017年2月15日 星期三

html 頁面 做成 A4 樣式

http://monkeybinbin-blog.logdown.com/posts/254000-css-print-style-display-a4

CSS :
body {
  background: rgb(204,204,204);
}
page[size="A4"] {
  background: white;
  width: 21cm;
  height: 29.7cm;
  display: block;
  margin: 0 auto;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0,0,0,0.5); 
}
h1{
  text-align:center;
}
@media print {
  body, page[size="A4"] {
    margin: 0;
    box-shadow: 0;
  }
}

HTML :
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Print Style Page Size A4" />
  <meta charset="utf-8">
  <title>Print Style Page Size A4</title>




<style type=\"text/css\">
<!--
page[size=\"A4\"] {
  background: white;
  width: 21cm;
  height: 29.7cm;
  display: block;
  margin: 0 auto;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}
@media print {
  body, page[size=\"A4\"] {
    margin: 0;
    box-shadow: 0;
  }
}
-->
</style>
</head>
<body>
  <page size="A4">
    <h1>Demo Page 1</h1>
  </page>
  <page size="A4">
    <h1>Demo Page 2</h1>
  </page>
  <page size="A4">
    <h1>Demo Page 3</h1>
  </page>
  <page size="A4">
    <h1>Demo Page 4</h1>
  </page>
</body>
</html>