CSS 分页效果制作实例教程

根据您的要求，我将为您详细讲解关于“CSS 分页效果制作实例教程”的完整攻略，以下是详细步骤：

1. 样式准备

首先，我们需要准备一些基础样式，如分页区域的长度、背景色、边框等，具体代码如下：

.pagination {
  width: 100%;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 4px;
}

2. 生成分页按钮

接下来，我们需要使用css为分页按钮添加样式。每一个按钮都应该使用相同的类名，我们可以使用以下代码生成按钮：

<div class="pagination">
  <a href="#" class="prev">&laquo;</a>
  <a href="#" class="page">1</a>
  <a href="#" class="page">2</a>
  <span class="current-page">3</span>
  <a href="#" class="page">4</a>
  <a href="#" class="page">5</a>
  <a href="#" class="next">&raquo;</a>
</div>

其中，«和»表示向前和向后的箭头。current-page类名表示当前的页码。

对于按钮的样式，我们可以使用以下代码：

.pagination a,
.pagination span {
  display: inline-block;
  margin: 0 2px;
  padding: 5px 10px;
  text-decoration: none;
  border: 1px solid #ddd;
  color: #337ab7;
}
.pagination .current-page {
  background-color: #337ab7;
  color: #fff;
  border-color: #337ab7;
}

3. 为当前页添加激活状态

我们需要使用JavaScript为当前页添加激活状态。首先，我们需要获取当前页的页码，具体代码如下：

var currentPage = 3 // 例如，当前页码为3

接下来，我们需要为当前页添加激活状态，具体代码如下：

var pages = document.getElementsByClassName('page');
for (var i = 0; i < pages.length; i++) {
  if (parseInt(pages[i].innerHTML) === currentPage) {
    pages[i].classList.add('current-page');
  }
}

示例说明

示例一

假设我们需要将分页按钮添加到一个表格底部，具体代码如下：

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>男</td>
      <td>28</td>
    </tr>
    <!-- 此处省略部分数据 -->
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">
        <div class="pagination">
          <a href="#" class="prev">&laquo;</a>
          <a href="#" class="page">1</a>
          <a href="#" class="page">2</a>
          <span class="current-page">3</span>
          <a href="#" class="page">4</a>
          <a href="#" class="page">5</a>
          <a href="#" class="next">&raquo;</a>
        </div>
      </td>
    </tr>
  </tfoot>
</table>

需要注意的是，我们需要将分页按钮添加到表格底部的tfoot元素内。

示例二

假设我们需要将分页按钮添加到一个列表底部，具体代码如下：

<ul>
  <li>人民日报</li>
  <li>新华网</li>
  <li>央视网</li>
  <!-- 此处省略部分数据 -->
  <li>千龙网</li>
  <li>
    <div class="pagination">
      <a href="#" class="prev">&laquo;</a>
      <a href="#" class="page">1</a>
      <a href="#" class="page">2</a>
      <span class="current-page">3</span>
      <a href="#" class="page">4</a>
      <a href="#" class="page">5</a>
      <a href="#" class="next">&raquo;</a>
    </div>
  </li>
</ul>

需要注意的是，我们需要将分页按钮添加到列表底部的li元素内。