Html 使用window.print（）时创建封面_Html_Css

Html 使用window.print（）时创建封面

html css

Html 使用window.print（）时创建封面,html,css,Html,Css,我打印时有页眉和页脚但在第一页，我只希望封面是干净的。所以我只能在那里有一张照片或标题。现在我的页眉和页脚也在封面上。我不想那样我试着用 @页码：第一页{页边距：0；} 我还有页眉和页脚给我一个最简单的方法来做这个CSS，请解释为什么代码你好我是页脚你好文本文本文本文本文本文本您可以添加一个元素以显示为第一页，如下所示： <div class="print-first-page"> your first page

我打印时有页眉和页脚

但在第一页，我只希望封面是干净的。所以我只能在那里有一张照片或标题。现在我的页眉和页脚也在封面上。我不想那样

我试着用

@页码：第一页{页边距：0；}

我还有页眉和页脚

给我一个最简单的方法来做这个CSS，请解释为什么

代码


你好
我是页脚
你好


文本


文本
文本

文本


文本








文本

您可以添加一个元素以显示为第一页，如下所示：

<div class="print-first-page">
    your first page content here
</div>

以下是代码的完整示例：

<head>
    <style>
.print-first-page {
    display: none;
}
@media print {
    .print-first-page {
        display: block;
        width: 100%;
        height: 100%;
    }

}
    </style>
</head>
<body>
<div class="print-first-page">
    your first page content here
</div>
<div class="page-header ">
    <table style="width:100%">
        <tr>
            <p>Hello</p>
        </tr>
    </table>
</div>

<div class="page-footer">
    I'm The Footer
</div>

<table>

    <thead>
    <tr>
        <td>
            <!--place holder for the fixed-position header-->
            <div class="page-header-space"></div>
        </td>
    </tr>
    </thead>

    <tbody>
    <tr>
        <td>
            <!--*** CONTENT GOES HERE ***-->
            <div class="masthead">
                <p>Hello</p>
            </div>
            <div class="page">
                <div>
                    <p class="test">&nbsp; </p>

                </div>
                <div class=" col test-2">

                    <p>
                        Text
                    </p>
                </div>

            </div>
            <div class="page">
                <div>
                    <p class="test-3">&nbsp; </p>
                    <h1 style="text-align:center">Text</h1>
                </div>
                <div style="margin-top: 100px;">
                    <p>Text.</p>
                </div>

            </div>
            <div class="page">
                <div>
                    <p style="margin-top:10px;"><h1 class="test">Text</h1></p>
                </div>
                <div>
                    <p class="test-5">&nbsp; </p>
                    <h2 style="text-align:left">Text</h2>
                </div>
                <div>
                    <p class="test-5">&nbsp; </p>
                </div>
                <div>
                    <div>
                        <p class="test-5">&nbsp; </p>
                    </div>
                    <br />
                    <div>
                        <p class="test-5">&nbsp; </p>
                    </div>
                    <br />
                </div>
            </div>
            <div class="page">
                <div>
                    <p style="margin-top:10px;"><h1 class="test">Text</h1></p>
                </div>
            </div>
        </td>
    </tr>
    </tbody>

    <tfoot>
    <tr>
        <td>
            <!--place holder for the fixed-position footer-->
            <div class="page-footer-space"></div>
        </td>
    </tr>
    </tfoot>
</table>
</body>
</html>


.打印第一页{
显示：无；
}
@媒体印刷品{
.打印第一页{
显示：块；
宽度：100%；
身高：100%；
}
}
你的第一页内容在这里
你好
我是页脚
你好


文本


文本
文本
文本

文本







文本

如果你向我们展示你的尝试，也许可以。展示你的html代码，这样我们可以帮助你。@CanUver和Khalid Khan现在我已经为页面设置输入了我的html代码。感谢您对此解决方案的回复，此解决方案已不再适用。我的问题是，我想去掉第一页的页眉和页脚。

<head>
    <style>
.print-first-page {
    display: none;
}
@media print {
    .print-first-page {
        display: block;
        width: 100%;
        height: 100%;
    }

}
    </style>
</head>
<body>
<div class="print-first-page">
    your first page content here
</div>
<div class="page-header ">
    <table style="width:100%">
        <tr>
            <p>Hello</p>
        </tr>
    </table>
</div>

<div class="page-footer">
    I'm The Footer
</div>

<table>

    <thead>
    <tr>
        <td>
            <!--place holder for the fixed-position header-->
            <div class="page-header-space"></div>
        </td>
    </tr>
    </thead>

    <tbody>
    <tr>
        <td>
            <!--*** CONTENT GOES HERE ***-->
            <div class="masthead">
                <p>Hello</p>
            </div>
            <div class="page">
                <div>
                    <p class="test">&nbsp; </p>

                </div>
                <div class=" col test-2">

                    <p>
                        Text
                    </p>
                </div>

            </div>
            <div class="page">
                <div>
                    <p class="test-3">&nbsp; </p>
                    <h1 style="text-align:center">Text</h1>
                </div>
                <div style="margin-top: 100px;">
                    <p>Text.</p>
                </div>

            </div>
            <div class="page">
                <div>
                    <p style="margin-top:10px;"><h1 class="test">Text</h1></p>
                </div>
                <div>
                    <p class="test-5">&nbsp; </p>
                    <h2 style="text-align:left">Text</h2>
                </div>
                <div>
                    <p class="test-5">&nbsp; </p>
                </div>
                <div>
                    <div>
                        <p class="test-5">&nbsp; </p>
                    </div>
                    <br />
                    <div>
                        <p class="test-5">&nbsp; </p>
                    </div>
                    <br />
                </div>
            </div>
            <div class="page">
                <div>
                    <p style="margin-top:10px;"><h1 class="test">Text</h1></p>
                </div>
            </div>
        </td>
    </tr>
    </tbody>

    <tfoot>
    <tr>
        <td>
            <!--place holder for the fixed-position footer-->
            <div class="page-footer-space"></div>
        </td>
    </tr>
    </tfoot>
</table>
</body>
</html>