今天遇到了一个问题，在页面进行打印的东西，一些内容必须打印在一张A4纸上，起初想到把页面变成PDF然后再打印，但仍然无法控制页面的分页符。为此去Google了一圈，发现个好方法，Css就可以做到而且非常的简单。只需定义一个属性即可。
在CSS2中打印的属性如下：
page-break-after 设置元素后是否应当放置分页符。 auto、always、avoid、left、right
page-break-before 设置元素前否应当放置分页符。 auto、always、avoid、left、right
page-break-inside 设置元素内部是否应当放置分页符。 auto、avoid
于是我们可以利用这里面的属性来设置打印的属性，将我们要显示的放在一张纸上，如果内容超出一张灰显示在下一张上，但下一张会有一个分隔符，为此我们要尽量的用Css来控制我们的页面打印格式。
<html>
<head>
<style>
.page{
page-break-after:always;
}
</sytle>
</head>
<body>
<div>
page-break-after 设置元素后是否应当放置分页符。 auto、always、avoid、left、right
page-break-before 设置元素前否应当放置分页符。 auto、always、avoid、left、right
page-break-inside 设置元素内部是否应当放置分页符。 auto、avoid
</div>
<div class="page"></div>
<div>
page-break-after 设置元素后是否应当放置分页符。 auto、always、avoid、left、right
page-break-before 设置元素前否应当放置分页符。 auto、always、avoid、left、right
page-break-inside 设置元素内部是否应当放置分页符。 auto、avoid
</div>
<div class="page"></div>
<div>
page-break-after 设置元素后是否应当放置分页符。 auto、always、avoid、left、right
page-break-before 设置元素前否应当放置分页符。 auto、always、avoid、left、right
page-break-inside 设置元素内部是否应当放置分页符。 auto、avoid
</div>
<div class="page"></div>
</body>
</html>
此时page 的Css样式表就相当于插入了一个分页符，所有的内容将分为三页显示。
分享到：
相关推荐
- **分页控制**：探讨如何通过CSS控制页面分隔符、页眉页脚等内容。 ##### 16. 删除自CSS2.1的内容 - **不再支持的特性**：列出那些已被废弃或删除的CSS2.1特性。 - **迁移建议**：提供关于如何更新代码以适应新...
- **菜单原理**：通过CSS控制菜单项的显示与隐藏。 - **制作菜单内容和结构部分**：创建基本的HTML结构。 - **CSS代码编写**：编写样式代码以实现菜单的功能。 #### 一个横向导航菜单的制作 - **菜单原理**：通过...
在给定的代码中，JavaScript被用来控制一系列图片的自动轮播，通过定时器（`setTimeout`）和数组（`jname`）来实现图像的顺序显示。 ### 知识点二：数组在JavaScript中的使用 数组是JavaScript中一种常用的数据...
CSS选择符是CSS语法的核心部分，用于选取页面中的元素，以应用相应的样式规则。文章中提到的“属性及剩余的选择符”是指CSS中除了常见的类型、类和ID选择符之外的，根据元素的属性以及特定条件进行选择的其他选择符...
通过CSS，我们可以精准控制网页中每个元素的字体、颜色、大小、位置、背景、边距等样式。 【CSS设置方式】 1. 内联样式：将CSS直接添加到HTML元素的`style`属性中，如`宋体;font-size:12pt;color:blue">...</h1>`。...
CSS选择器是CSS的核心组成...了解和熟练运用这些选择器，可以帮助我们编写出更加高效、可维护的CSS代码，实现对HTML页面的精确样式控制。在实际工作中，选择器的组合使用能够实现更复杂的匹配规则，满足不同设计需求。
DIV元素在HTML中作为分隔符，常被用来组织页面结构，通过CSS的float、display和position属性，可以实现流式、网格、盒模型等多种布局模式，满足后台管理界面的需求。 2. **响应式设计**：随着移动设备的普及，后台...
在CSS中，类选择符和ID选择符是两种常用的选择器，它们在语法结构和使用场景上存在一些差异。 类选择符（Class Selector）使用点号（.）开头，后跟类名。类名可以包含字母、数字、连字符和下划线，但必须以字母开头...
CSS选择符是网页设计中用来定位和...通过熟练运用这些选择符，开发者可以更精确地控制页面的视觉呈现，提高用户体验，并实现动态和响应式的设计。在实际开发中，应根据需要选择合适的选择符，以保持代码的清晰和高效。
CSS基础中的CSS选择符是网页开发人员在布局...以上九类CSS选择符构成了CSS中选择器的核心概念，通过这些选择符，开发者可以精确控制HTML文档内元素的显示样式。掌握这些选择符，是学习CSS中非常基础且至关重要的一步。
- "image1.gif" 和 "image2.gif"：可能是用于分页设计中的图形元素，如箭头图标、分隔符等，这些图像与CSS结合使用，可以增强分页的视觉吸引力。 - "index.html"：这通常是主网页文件，可能展示了所有24款分页样式的...
在网页设计领域，"DIV+CSS完美布局"是一种常见的页面构造技术，它通过结合HTML的元素（Division，分隔符）与CSS（Cascading Style Sheets，层叠样式表）来实现灵活、响应式的网页布局。这种方法使得网页结构与表现...
8. **伪类和伪元素**：利用`::before`和`::after`伪元素添加额外内容，如图标或分隔符。`:hover`、`:active`、`:focus`等伪类可以为不同状态的元素添加样式。 9. **CSS预处理器**：为了提高代码的可维护性和复用性...
通过组合选择符，可以更加精细地控制页面布局和风格，实现复杂的样式规则。 通过上述介绍，我们可以看出CSS选择符具有高度的灵活性和强大的功能。合理使用这些选择符不仅可以提高开发效率，还能够使我们的CSS代码...
CSS的核心功能在于它可以精确地控制页面中每个元素的外观和布局，包括字体、颜色、背景、对齐方式、尺寸和边框等。通过CSS，我们可以创建出一致的页面样式，简化页面格式代码，提升页面加载速度。同时，外部样式表的...
CSS，全称为层叠样式表（Cascading Style Sheets），是用于控制网页元素样式和布局的一种语言。它与HTML或XML等标记语言配合使用，使网页设计更加灵活、美观。CSS允许将样式规则与内容分离，使得网页的维护和更新...
- **后代选择符**：可以选择某个元素的所有子代元素，使用空格分隔选择符，如 `div p` 表示选择所有`<p>`标签，这些`<p>`标签位于任何`<div>`标签内。 - **子元素选择符**：只能选择直接子元素，使用`>`连接选择符，...
总结，CSS选择符是CSS的核心，它们提供了强大的工具来控制网页的视觉呈现。熟练掌握各种选择符的使用能帮助开发者更高效、准确地实现设计目标。通过类型、群组、包含、id、class、组合、伪类和通配选择符的灵活组合...
7. **Paged Media**：CSS2对打印样式进行了优化，允许开发者定义页面分隔符、页眉和页脚，使得网页在打印时能保持良好的布局。 8. **透明度**：CSS2提供了`opacity`属性，允许调整元素的透明度，为网页动画和交互...