Question

据我所知，在HTML5中，您应该只在文档中（或至少在一个部分中）有一个标题标记和一个页脚标记。但是，如果您希望一个页脚出现在屏幕上并且在打印时出现另一个页脚，该怎么办？就HTML而言，您将两个页脚添加在一起，即使一次只出现一个。

例如，屏幕阅读器是否会忽略打印版本？

Answer 1

这样做的一种方法是在每个部分中放置两个部分，一个部分显示在屏幕上（.noprint），另一个部分显示用于打印（.print）。像你一样显示.noprint并设置.print以显示无，除非使用＆＃;; media打印＆＃39;查询。

像这样：

<header>

    <div class="noprint">
        <p>stuff for screen only goes here</p>
    </div>

    <div class="print">
        <p>stuff for print only goes here</p>
    </div>

</header>

<style>
.print {
    display: none;
}

@media print {
    .print {
        display: inherit;
    }
    .noprint {
        display: none;
    }
}
</style>

另外，要回答有关屏幕阅读器的问题：他们通常不会读取要显示的元素集：无，我相信在这种情况下也是如此。这是一个关于屏幕阅读器如何处理显示的更全面的指南：无：

http://juicystudio.com/article/screen-readers-display-none.php

祝你好运！

添加两个页眉和页脚，一个用于屏幕和打印

1 个答案: