使用 HTML 和 CSS 在第一个打印页面上显示不同的页眉

2023-12-07

是否可以使用 HTML 和/或 CSS 的任意组合在第一个标题上显示一个标题printed页面然后显示不同的每个后续的标题printed页?我知道关于@media printCSS 标记仅在打印站点时显示某些内容,但这并不能让我在多个页面上拥有不同的标题。

任何帮助表示赞赏,谢谢!


十二年后我可以回答你的问题:)

以下是在第一个打印页面上显示与后续页面不同的标题的解决方案:

@media print {

  .header, .footer {
      position: fixed;
  }
  
  .header, .header-cover {
    display:flex;
  }

  .header {
      top: 100%;
  }
  
  .header, .header-space {
      height: 5rem;
  }
  
  .footer, .footer-space {
    height: 4rem;
  }
  
  .footer {
      bottom: 0;
  }
}
<body>
<!--Here the HTML of the first header (displayed on landing page)-->
<header class="header-cover">
    <img class="logo-big"
         src="https://picsum.photos/150/100" />
    <div class="right">
        Header 1
    </div>
</header>

  <!-- Here the HTML of the repeated header (on others pages)-->
<header class="header">
   <img class="logo-big"
         src="https://picsum.photos/200/100" />
    <div class="right">
        Repeated Header 
    </div>
</header>
<table>
    <thead>
    <tr>
        <td>
            <!--place holder for the fixed-position header-->
            <div class="header-space">&nbsp;</div>
        </td>
    </tr>
    </thead>

    <tbody>
    <tr>
        <td>
            <!--*** CONTENT GOES HERE ***-->
            <h1>Title</h1>
            <p class="content">A very long text....</p>
        </td>
    </tr>
    </tbody>

    <tfoot>
    <tr>
        <td>
            <!--place holder for the fixed-position footer-->
            <div class="footer-space">&nbsp;</div>
        </td>
    </tr>
    </tfoot>
</table>
<!-- Repeated Footer -->
<footer class="footer">
    <p>
        Text footer
    </p>
</footer>
<button onclick="window.print()">Test Here</button>
</body>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 HTML 和 CSS 在第一个打印页面上显示不同的页眉 的相关文章

  • powershell Invoke-WebRequest WebSession 不起作用

    我无法让以下代码工作 它似乎已登录 但随后返回带有 response 的登录页面 我猜这与回发有关 有办法解决这个问题吗 谢谢 login Invoke WebRequest Uri http www sqlpass org UserLog
  • 设置浏览器窗口最小化的最小尺寸限制?

    有没有办法在所有浏览器中手动设置浏览器窗口的最小尺寸 你可以试试 body min width 600px 一旦视口小于 600 像素 您将得到一个水平滚动条 这仅适用于支持 min width CSS 属性的现代浏览器 我认为不可能限制用
  • JSF 2.1 中的 HTML 4 <按钮>

    我想使用以下命令 The JSF
  • 动态表单标签宽度的 CSS

    我目前正在重构我们的表单控制器之一 以便我们可以将其用于面向公众的网站 目前它正在为表单生成表格布局 但我正在尝试使用 CSS 表单来完成它 我正在尝试重现看起来像这样的东西http www stylephreak com uploads
  • 对一组复选框使用 HTML5“必需”属性?

    使用支持 HTML5 的较新浏览器 例如 FireFox 4 时 并且表单字段具有属性required required 并且表单字段为空 空白 然后点击提交按钮 浏览器检测到 必填 字段为空 并且不提交表单 相反 浏览器会显示一条提示 要
  • 使用 CSS 自定义字体?

    我见过一些在其网站上使用自定义字体的新网站 除了常规的 Arial Tahoma 等 他们支持大量的浏览器 如何做到这一点 同时 如果可能的话 还会阻止人们免费下载该字体 一般来说 您可以使用自定义字体 font face在你的 CSS 中
  • 在 HTML5 中创建可拖动和可缩放的网格

    与其他 HTML5 不同如何创建网格问题 我想知道如何制作一个可拖动且可扩展的 绘制网格非常简单 var c document getElementById canvas var ctx c getContext 2d var width
  • 如何倾斜 div 并保持背景图像不倾斜

    我已经花了几个小时了 所以希望有人能提供帮助 我有一个网站 其中大部分 div 都是倾斜的 大多数 div 都包含背景图像 现在我已经让 div 倾斜了 内容完美地位于其中 唯一的问题是背景图像 它与父级一起倾斜 我用谷歌搜索了很多 但找不
  • 如何将udp发送到udp node.js服务器?

    我对此很陌生 所以我真的不知道我在做什么 但我已经设置了一个 node js udp 服务器 我想从客户端 来自网站 向它发送一个数据包 但我不知道如何在 javascript 中做到这一点 或者是否可能 我不是在研究如何从 Node js
  • HTML5 历史 API

    我如何使用 HTML5 历史 api 我确实经历过https developer mozilla org en DOM Manipulated the browser history https developer mozilla org
  • VBA / HTML / jQuery 选择自动完成 - 在列表中选择

    我正在尝试使用 Excel 中的 VBA 在网站的列表中选择一个值 这不是一个 正常列表 该网站使用 jQuery 选择自动完成 如下所示 example http davidwalsh name demo jquery chosen ph
  • 如何并排放置两个

    我有两个 div 我想要并排放置的元素 如下所示 navigation content 我想要导航 div 根据需要尽可能大 但不能更大 收缩以适应行为 内容 div 然后应该填充剩余的空间 如何在不指定百分比 例如 20 80 的情况下使
  • 如何更改 Bootstrap 3 div 列顺序

    正在做我的第一个响应式设计 在 Bootstrap 3 中可能会出现类似的情况 在 lg 上更改此设置 a b c sm 上的这个 a c b 您可以使用两个 div 一个用于第一类型的布置 另一个用于第二类型的布置 第一个仅在 lg 中显
  • W3C 验证器:“握手警报:unrecognized_name”

    我正在尝试验证我的网站W3C Nu Html 检查器 https validator w3 org nu doc https 3A 2F 2Fwww healthdrop in 2F但我遇到了以下错误 不知道为什么 IO 错误 握手警报 u
  • HTML2canvas 和 Canvas2image,下载的屏幕截图不显示我的 HTML 图像

    我一直在开发一个 HTML 页面 我想将其转换为图像 我一直在使用 html2canvas 和 canvas2image 脚本并采用此代码http jsfiddle net 8ypxW 3 http jsfiddle net 8ypxW 3
  • Jquery 中的动态滚动位置

    请帮助我解决以下情况 我有 3 个页面 当滚动到达第二页时 用户滚动页面 它必须找到特定的 ID 然后触发一个函数 一旦第三页开始 另一个函数就会触发 根据要求我不应该使用任何插件
  • 我可以停止 :hover 应用于元素吗?

    假设我有一些 CSS button hover font weight bold 我怎样才能防止 hover随意应用样式 我的目标用例是当元素被禁用时 例如 使用这个 HTML
  • 如何获取 UIWebView 中元素的位置?

    我在 iPad 程序中加载了 html 的 UIWebView 通过使用 webkit column width 我将 html 分为几列 padding 0px height 1024px webkit column gap 0px we
  • 三级十进制有序列表 CSS

    我有一个 html 中的三级有序列表 我想为其提供如下样式 1 Item 1 1 1 Item 2 1 1 1 Item 3 下一个 plunker 中有一个 html 示例 http plnkr co edit DqhZ5pJILTUHG
  • HTML 默认图像大小

    我在我的代码上显示 3 张图片 图片具有不同的尺寸 宽度和高度 div class row div class col lg 12 h2 class page header Gallery h2 div div class col md 4

随机推荐

  • R重复序列每次重复加1

    我的 R 类作业簿有一个问题 我无法解决 我需要 编写一个使用rep 创建一个包含元素1 2 3 4 2 3 4 5 3 4 5 6 4 5 6 7的向量的R命令 它似乎是一个 1 到 4 的重复序列 重复 4 次 并且每次重复时向起始元素
  • Mac 上禁用 Chrome 开发者工具

    我知道有关如何启用 Chrome 开发人员工具的问题过去已经得到解答 但它们适用于 Windows 我使用的是 Mac 开发人员工具呈灰色 检查元素也是如此 如何在我的 Mac 上重新启用它们 解决方案 1 重置 Chrome 的标志 On
  • 如何在 Xcode 中重命名项目?

    我有一个用 Objective C 编写的已完成的应用程序 我想重命名该文件 我怎么做 最新版本的 Xcode 在 项目 菜单中有一个 重命名 项
  • UIImageView.animationImages之后如何清除内存?

    我创建了一个新的 Xcode 项目 其中仅包含以下内容 从 png 创建 UIImage 数组的代码拖入项目 在将图像附加到数组时 我尝试了 UIImage named 和 UIImage contentsOfFile 一个 UIImage
  • 为什么即使结果定义为浮点数,结果输出也是整数?

    include
  • 在 Ada 中创建子类型而不指定范围有什么意义?

    在Ada中 我经常看到这样的东西 type Number is new Integer 这有什么意义呢 难道你就不能快乐吗 Integer 我还看到过这样的代码 type Small Number is range 1 5 这对我来说是有道
  • 如何在 Java 中表示和操作大于 24:00 的时间值?

    我目前正在一个应用程序域中做一些工作 该域使用大于 24 00 的时间值来表示午夜之后仍与前一天的详细信息相关的时间 例如 它可能使用星期一的 25 15 来表示星期二的凌晨 1 15 因为从域的角度来看 该值仍然与星期一的数据相关联 维基
  • KVM/桥接器:没有到主机的路由

    我已经在 Fedora 17 上使用 KVM 设置了虚拟机 并为 KVM 配置了桥接网络 主机和虚拟机均采用手动IP配置 主机IP为192 168 0 2 虚拟机IP为192 168 0 10 从虚拟机我可以毫无问题地连接到主机 但从主机我
  • Jquery点击事件不起作用

    当我点击 test2 的 test1 时没有结果
  • 按下主页按钮时暂停 Sprite Kit 场景

    我想知道按下主页按钮时如何暂停我的精灵套件场景 我在这里找到了很少的答案 并尝试了这样的通知中心 当我的场景加载时 NSNotificationCenter defaultCenter addObserver self selector s
  • Swift 中使用 POST 方法进行 HTTP 请求

    我正在尝试在 Swift 中运行 HTTP 请求 将 2 个参数 POST 到 URL Example Link www thisismylink com postName php Params id 13 name Jack 最简单的方法
  • Swift 中 UITextView 和 UITextField 的单一扩展

    我想创建一个扩大对彼此而言UITextField and UITextView并向其中添加以下方法 func addDoneButtonOnKeyboardWith selector Selector let keyBoardToolBar
  • 使用 JavaScript 将秒转换为 HH-MM-SS?

    如何将秒转换为HH MM SS使用 JavaScript 字符串 您可以借助 JavaScript Date 方法在没有任何外部 JavaScript 库的情况下做到这一点 如下所示 const date new Date null dat
  • PostgreSQL Last_value 忽略空值

    我知道已经有人问过这个问题 但为什么下面的解决方案不起作用 我要填value最后一个非空值的排序方式为idx 我所看到的 idx coalesce 1 2 2 4 3 4 5 10 5 rows 我想要的是 idx coalesce 1 2
  • 使用 shell_exec('passwd') 更改用户密码

    我需要能够通过网页 在受控环境中 更改用户的密码 因此 为此 我使用以下代码 我的问题是该脚本没有更改用户 testUser 的密码 我究竟做错了什么 Thanks 另一种选择是使用一个 shell 脚本 比如名为 passwd chang
  • 在 C# 中使用 newtonsoft 查找并返回 JSON 差异?

    我想获得使用 Newtonsoft 进行比较时不匹配的 JSON 部分的列表 我有这个比较代码 JObject xpctJSON JObject Parse expectedJSON JObject actJSON JObject Pars
  • 编译静态版QT + OpenSSL 支持

    我从这里下载了 qt everywhere opensource src 5 8 0 的源文件 https download qt io snapshots qt 5 8 5 8 0 latest src 我想编译它并支持静态版本的 QT
  • 自动重命名视频文件

    我有很多文件想要重命名 手动重命名需要很长时间 它们是视频文件 通常采用以下格式 节目名称 剧集编号 剧集名称 例如 绝命毒师 101 Pilot 我想做的是将 101 部分更改为我自己的约定 S01E01 我认为在一系列节目中 该字符串的
  • 无法在 Windows 中安装 Pylint - python?

    我是Python新手 我在Windows上安装了Python 位于以下目录中C Program Files Python36 我在用vscode当我尝试在 IDE 中运行以下命令时integrated terminal C Program
  • 使用 HTML 和 CSS 在第一个打印页面上显示不同的页眉

    是否可以使用 HTML 和 或 CSS 的任意组合在第一个标题上显示一个标题printed页面然后显示不同的每个后续的标题printed页 我知道关于 media printCSS 标记仅在打印站点时显示某些内容 但这并不能让我在多个页面上