要使用CSS制作分页效果,需要使用CSS的分页属性@page
。这个属性允许你控制打印页面的样式,在屏幕上看不到效果。在CSS中使用@page
来定义打印页面的布局和其他属性。
有一些特定的关键字可以用于定义分页效果,包括:
size
: 设置纸张大小和方向(如 size: A4 portrait;
设置页面为A4纵向)margin
: 设置页面的边距(如 margin: 2cm;
设置边距为2厘米)page-break-inside
: 设置元素是否被分页打印(如 page-break-inside: avoid;
避免在元素内部打断分页)下面是一个简单的示例,演示如何使用CSS创建基本的分页效果:
@media print {
/* 定义页面区域 */
@page {
size: A4 portrait;
margin: 2cm;
}
/* 避免内嵌元素分页打印 */
* { page-break-inside: avoid; }
/* 分页符号 */
h1::after {
content: " ";
page-break-after: always;
}
}
这段代码将在打印时应用,定义了每个页面的大小和边距,并使用 * { page-break-inside: avoid; }
禁止元素内部的分页。最后,我们使用 h1::after
为标题元素添加分页符。
要定制更复杂的分页效果,可以结合其他CSS属性和选择器来实现。始终确保你的分页样式适用于不同的打印场景以及不同类型的打印设备。