CSS 使用 CSS 控制分页

在本文中，我们将介绍如何使用CSS控制网页的分页效果。分页效果可以使网页内容更加有层次感，并提高用户体验。通过合理地运用CSS样式，我们可以实现分页符号、页眉页脚的设计，以及分页的效果调整等。

阅读更多：CSS 教程

设置分页符号

在CSS中，我们可以使用content 属性来设置分页符号。content 属性用于在元素的内容之前或之后插入生成的内容。在设置分页符号时，我们可以通过before 和 after 伪元素来控制分页符号的位置。下面是一个例子：

/* 设置页眉页脚的分页符号 */
@page :first {
  @top-left {
    content: "第一页";
  }
  @bottom-left {
    content: "页眉";
  }
}

@page :left {
  @top-left {
    content: "页眉";
  }
  @bottom-left {
    content: "页脚";
  }
}

@page :right {
  @top-right {
    content: "页眉";
  }
  @bottom-right {
    content: "页脚";
  }
}

设置分页效果调整

通过CSS，我们可以控制分页效果的调整，如设置分页时的宽度、高度、边距等。下面是一个例子：

/* 设置分页效果 */
@page {
  size: A4;
  margin: 2cm;
  padding: 1cm;
  border: none;
  background-color: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

在上述例子中，我们通过size 属性控制分页的大小，使用margin 属性设置页面边距，通过padding 属性设置页面内边距，使用border 属性设置页面边框，使用background-color 属性设置页面背景颜色，还可以使用box-shadow 属性为页面添加阴影效果。

示例说明

接下来，我们将通过一个实际的例子说明如何使用CSS控制分页。假设我们有一个包含多个章节的网页，每页应该显示一个章节，并在每页的页眉和页脚中显示章节标题。我们可以通过CSS来实现这个效果。

首先，我们可以使用@page 规则来设置分页的样式：

/* 设置分页样式 */
@page {
  size: A4;
  margin: 2cm;
  padding: 1cm;
  border: none;
  background-color: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

/* 设置页眉和页脚的样式 */
@page :first {
  @top-left {
    content: "第一页";
  }
  @bottom-left {
    content: "页眉";
  }
}

@page :left {
  @top-left {
    content: "页眉";
  }
  @bottom-left {
    content: "页脚";
  }
}

@page :right {
  @top-right {
    content: "页眉";
  }
  @bottom-right {
    content: "页脚";
  }
}

然后，我们可以使用@page 规则来设置每页显示的内容和样式：

/* 设置每页显示的内容和样式 */
.chapter {
  page-break-after: always;
}

.chapter-title {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  margin: 1cm 0;
}

在网页的HTML结构中，每个章节应该用一个<div class="chapter"> 元素包裹起来，章节标题应该用一个<h1 class="chapter-title"> 元素表示。

<div class="chapter">
  <h1 class="chapter-title">第一章：搭建网页</h1>
  <!-- 此处是第一章的内容 -->
</div>

<div class="chapter">
  <h1 class="chapter-title">第二章：美化网页</h1>
  <!-- 此处是第二章的内容 -->
</div>

<!-- 其他章节的内容 -->

这样，每个章节将会被分页显示，并在每页的页眉和页脚中显示相应的章节标题。