-4

我有包含课程的页面，我想打印此页面，并且我想在打印模式下的每个页面中添加页脚（当前课程名称，当前课程创建日期）。

<html>
<head>
<style>
.footer {
    display:none;
}
@media print {
.Lesson
{
page-break-after:always;
}
.footer {
    display:Block;
}
}
</style>
</head>
<body>
<div id="lesson1" class="Lesson">
lesson text
<div id="print-footer print-footer1" class="footer">footer 1 content</div>
</div>
<div id="lesson2" class="Lesson">
lesson text
<div id="print-footer print-footer2" class="footer">footer 2 content</div>
</div>
<div id="lesson3" class="Lesson">
lesson text
<div id="print-footer print-footer3" class="footer">footer 3 content</div>
</div>
<div id="lesson4" class="Lesson">
lesson text
<div id="print-footer print-footer4" class="footer">footer 4 content</div>
</div>
</body>
</html>
4

3 回答 3

0

它在 css 中是不可能的选择。您需要根据您的要求使用其他一些语言进行动态变化或使用 jquery。

这里的html

 <span>Hello</span>
 <div></div>
 <div></div>
 <div></div>

这里的jquery

 var htmlStr = $('span').html();
  $('div').text(htmlStr);

演示：jsfiddle

于 2012-12-24T10:07:03.923 回答
0

这不是一个好方法，但它会起作用。您可以将所需的所有页脚 DIV 添加到每个页面，如下所示：

<div class="print-footer print-footer1">footer 1 content</div>
<div class="print-footer print-footer2">footer 2 content</div>
<div class="print-footer print-footer3">footer 3 content</div>
<div class="print-footer print-footer4">footer 4 content</div>
<div class="print-footer print-footer5">footer 5 content</div>

然后使用 CSS 隐藏它们：

.print-footer {
    display:none;
}

然后在每个页面上的 BODY 标签中添加一个类，如下所示：

<body class="lesson1">
<body class="lesson2">
<body class="lesson3">
<body class="lesson4">
<body class="lesson5">

并在使用该 BODY 类打印时显示正确的页脚：

@media print {

body.lesson1 .print-footer1 {
    display:block;
}

body.lesson2 .print-footer2 {
        display:block;
}

body.lesson3 .print-footer3 {
        display:block;
}

body.lesson4 .print-footer4 {
        display:block;
}

body.lesson5 .print-footer5 {
        display:block;
}

}
于 2012-12-24T10:22:33.777 回答
0

我已经正确地重新阅读了您的问题，并尝试了以下方法：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Print footer test</title>
        <style>
        .print-footer {
            display: none;
        }
        @media print {
            /* put the page-break after the footer! */
            .print-footer {
                display:block;
                page-break-after: always;
            }
        }
        </style>
    </head>
    <body>
        <div class="lesson" id="lesson1">lesson 1 content</div>
        <div class="print-footer">footer 1 content</div>
        <div class="lesson" id="lesson2">lesson 2 content</div>
        <div class="print-footer">footer 2 content</div>
        <div class="lesson" id="lesson3">lesson 3 content</div>
        <div class="print-footer">footer 3 content</div>
    </body>
</html>

这适用于 Windows 上最新版本的 Firefox、Chrome 和 IE10 的打印预览。基本上，我在打印模式下显示了一个 print-footer，并确保在footer 之后page-break-after: always;，而不是在课程之后。

请注意，某些旧版本的 Internet Explorer（当然还有其他浏览器）不太支持打印 CSS，尤其是类似的内容page-break-after，因此请务必彻底测试！

（另外，请确保验证您的 HTML，否则您不能责怪浏览器出错。您缺少 a DOCTYPE， a<title>并且您的id属性无效 - 它们不能包含空格。）

于 2012-12-27T10:01:15.613 回答