当我们打印网页时，有些页面会自动在打印页面中显示页面标题和日期信息，这可能会影响打印效果。本文将介绍如何使用 CSS 移除打印页面中的页面标题和日期。
使用 @media print 媒体查询
CSS 提供了一种媒体查询方式，可以针对不同的媒体类型设置不同的样式。其中，@media print 可以用于设置打印时的样式。
要移除打印页面中的标题和日期信息，可以使用以下 CSS 样式：
------ ----- -
-- ---- --
--- --- --- --- --- -- -
-------- -----
-
-- ---- --
----- -
-------- -----
-
-上述代码中，我们使用了 display: none; 属性来隐藏标题和日期信息。需要注意的是，如果标题和日期信息是通过 <img> 或 <iframe> 元素添加到页面中的，则需要使用其他方式进行隐藏（例如，将其位置移出可见范围）。
示例代码
下面是一个示例代码，演示如何使用 @media print 媒体查询来移除打印页面中的页面标题和日期（假设页面中的标题为 <h1> 元素，日期信息使用 .date 类名来标识）：
--------- -----
------
------
-------------------
-------
-- ------- --
------ ----- -
-- -
-------- -----
-
----- -
-------- -----
-
-
--------
-------
------
---------------
----------------
---- ----------------- - - - - -------
-------
-------当我们在浏览器中打开该页面，并使用浏览器的打印功能打印该页面时，将不会显示页面标题和日期信息。
结论
使用 @media print 媒体查询可以方便地移除打印页面中的页面标题和日期信息。需要注意的是，在实际应用中，可能会涉及到更复杂的情况，例如需要对特定元素进行样式设置，或者需要为多个媒体类型设置不同的样式。因此，了解 CSS 媒体查询的语法和用法，对于掌握前端技术非常重要。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/28959