css制作页码

CSS 制作页码的方法

使用 CSS 可以轻松地为网页或文档创建美观的页码样式。以下是几种常见的方法：

方法一：使用伪元素和计数器

通过 CSS 计数器和伪元素，可以自动为页面添加页码。

@page {
  @bottom-right {
    content: counter(page);
    font-family: Arial, sans-serif;
    font-size: 12px;
  }
}

方法二：使用 Flexbox 布局

适用于分页导航栏的页码样式。

.pagination {
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 0;
}

.pagination li {
  margin: 0 5px;
}

.pagination a {
  display: block;
  padding: 5px 10px;
  border: 1px solid #ddd;
  text-decoration: none;
  color: #333;
}

.pagination a:hover {
  background-color: #f5f5f5;
}

.pagination .active a {
  background-color: #007bff;
  color: white;
  border-color: #007bff;
}

方法三：使用 Grid 布局

适用于更复杂的页码排列。

.pagination {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30px, 1fr));
  gap: 5px;
  list-style: none;
  padding: 0;
}

.pagination a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  border: 1px solid #ddd;
  text-decoration: none;
  color: #333;
}

方法四：打印样式中的页码

专门为打印文档添加页码。

@media print {
  @page {
    @bottom-center {
      content: counter(page);
    }
  }
}

方法五：使用 CSS 变量动态控制页码

通过 JavaScript 动态更新 CSS 变量来改变页码样式。

.pagination {
  --active-color: #007bff;
}

.pagination .active a {
  background-color: var(--active-color);
}

注意事项

• 打印样式中的页码需要使用 @page 规则。
• 分页导航的页码通常需要结合 HTML 结构使用。
• 对于动态页码，可能需要 JavaScript 配合更新页码状态。

以上方法可以根据具体需求选择使用，或组合多种技术实现更复杂的效果。