我有包含课程的页面,我想要打印此页面,我想在每个页面中添加页脚包含(当前课程名称,当前课程创建日期)到打印模式中的每个页面。
<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>
答案 0 :(得分:0)
它在css中不可能。您需要使用其他语言进行动态变化,具体取决于您的要求或使用jquery。
这里是html
<span>Hello</span>
<div></div>
<div></div>
<div></div>
这里是jquery
var htmlStr = $('span').html();
$('div').text(htmlStr);
DEMO:jsfiddle
答案 1 :(得分: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;
}
}
答案 2 :(得分: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的打印预览。基本上,我在打印模式下显示打印页脚,并确保page-break-after: always;
在页脚之后来,而不是课程。
注意一些旧版本的Internet Explorer(毫无疑问其他浏览器)不能很好地支持打印CSS,特别是像page-break-after
这样的东西,所以一定要彻底测试!
(另外,请确保validate your HTML,否则你不能责怪浏览器出错。你错过了DOCTYPE
,<title>
和{{1}属性无效 - 它们不能包含空格。)