A4纸打印CSS的设置

<html>

<head>

    <meta charset="UTF-8">

    <title>A4纸</title>

    <style type="text/css">

        body

        {

            margin: 0;

            padding: 0;

            background-color: #FAFAFA;

            font: 12pt "Tahoma";

        }

        *

        {

            box-sizing: border-box;

            -moz-box-sizing: border-box;

        }

        .page

        {

            width: 21cm;

            min-height: 29.7cm;

            /*padding: 1cm;*/

            margin: 1cm auto;

            border: 1px #D3D3D3 solid;

            border-radius: 5px;

            background: white;

            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);

        }

        .subpage

        {

            padding: 1cm;

            border: 5px red solid;

            height: 256mm;

            outline: 2cm #FFEAEA solid;

        }

        @page

        {

            size: A4;

            margin: 0;

        }

        @media print

        {

            .page

            {

                margin: 0;

                border: initial;

                border-radius: initial;

                width: initial;

                min-height: initial;

                box-shadow: initial;

                background: initial;

                page-break-after: always;

            }

            .noprint

            {

              display:none;

            }

        }

    </style>

</head>

<body>

<button class="layui-btn layui-btn-sm noprint" lay-event="" onclick="window.print()">工作证预览</button> </div>   

    <div  class="book">

        <div class="page">           

                Page 1/2

        </div>

        <div class="page">

            <!-- <div class="subpage"> -->

                Page 2/2

                <!-- </div> -->

        </div>

    </div>

</body>

</html>

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容