纯CSS制作自适应分页条附源码下载

让我详细讲解一下“纯CSS制作自适应分页条附源码下载”的完整攻略，过程中还会包含两个示例说明。

1. 确定分页条的HTML结构

首先，我们要确定分页条的HTML结构。通常来说，分页条包含以下几个部分：

“上一页”按钮
“下一页”按钮
数字页码
“省略号”（表示中间省略的页码）
最左边和最右边的页码

一般来说，分页条的HTML结构可以通过无序列表（<ul>）来实现。每一个页码都是一个列表项（<li>），而页码按钮则是一个链接（<a>）。

下面是一个简单的HTML结构示例，假设有10页：

<div class="pagination">
  <ul>
    <li><a href="#">&lt;</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><span>...</span></li>
    <li><a href="#">8</a></li>
    <li><a href="#">9</a></li>
    <li><a href="#">10</a></li>
    <li><a href="#">&gt;</a></li>
  </ul>
</div>

2. 使用CSS样式美化分页条

接下来，我们使用CSS样式来美化分页条。具体来说，我们需要设置以下样式：

设置分页条的字体、背景和边框样式
设置页码按钮的样式
设置当前页码按钮的样式
设置“省略号”（如果有的话）的样式

下面是一个简单的CSS样式示例：

.pagination {
  font-size: 14px;
  background-color: #FFF;
  border: 1px solid #DDD;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 20px;
}

.pagination ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pagination li {
  display: inline-block;
}

.pagination a, .pagination span {
  color: #1980FF;
  padding: 6px 12px;
  text-decoration: none;
}

.pagination a:hover, .pagination span:hover {
  background-color: #EEE;
}

.pagination .active a {
  background-color: #1980FF;
  color: #FFF;
}

.pagination .disabled a, .pagination .disabled span {
  color: #BBB;
  pointer-events: none;
}

以上CSS样式包含了基本的分页条样式，包括主题颜色、字体大小、背景色、边框效果和页码按钮的样式等。

3. 使用JavaScript动态生成页码

如果你需要实现自适应分页条，那么你需要使用JavaScript来动态地生成页码。具体来说，你需要计算出总页数和当前页，然后使用循环来生成页码按钮。

下面的示例代码演示了如何使用JavaScript来动态地生成一个分页条：

var currentPage = 1;
var totalPages = 10;

function generatePagination(currentPage, totalPages) {
  var pagination = document.querySelector('.pagination ul');

  // remove old page numbers
  while (pagination.firstChild) {
    pagination.removeChild(pagination.firstChild);
  }

  // add new page numbers
  for (var i = 1; i <= totalPages; i++) {
    var li = document.createElement('li');
    var link = document.createElement('a');
    link.href = '#';
    link.textContent = i;
    if (i === currentPage) {
      li.className = 'active';
    }
    li.appendChild(link);
    pagination.appendChild(li);
  }
}

generatePagination(currentPage, totalPages);

上面的代码使用generatePagination()函数来生成分页条。这个函数需要接受当前页码和总页数这两个参数，并使用循环来生成页码按钮。同时，这个函数还可以根据当前页码添加“活动”状态的样式。

4. 运行示例

最后，我们来运行一个分页条示例，看看效果如何。下面是一个简单的示例：

<!DOCTYPE html>
<html>
<head>
  <title>Pagination Example</title>
  <style>
  /* CSS Styles */
  </style>
</head>
<body>
  <div class="pagination">
    <ul>
      <li><a href="#">&lt;</a></li>
      <!-- Dynamic page numbers go here -->
      <li><a href="#">&gt;</a></li>
    </ul>
  </div>
  <script>
    // JavaScript code goes here
  </script>
</body>
</html>

你可以将上述HTML代码复制到一个新建的HTML文档中，并在<style>和<script>标签中分别添加上面提供的CSS和JavaScript代码。然后你可以调整currentPage和totalPages变量的值，以查看分页条的效果。

示例1：基本分页条

下面这个示例展示了一个基本的分页条，包括10个页码和“上一页”和“下一页”按钮。你可以通过修改JavaScript中的currentPage和totalPages变量来演示不同的页码。

<!DOCTYPE html>
<html>
<head>
  <title>Basic Pagination Example</title>
  <style>
  .pagination {
    font-size: 14px;
    background-color: #FFF;
    border: 1px solid #DDD;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 20px;
  }

  .pagination ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .pagination li {
    display: inline-block;
  }

  .pagination a, .pagination span {
    color: #1980FF;
    padding: 6px 12px;
    text-decoration: none;
  }

  .pagination a:hover, .pagination span:hover {
    background-color: #EEE;
  }

  .pagination .active a {
    background-color: #1980FF;
    color: #FFF;
  }

  .pagination .disabled a, .pagination .disabled span {
    color: #BBB;
    pointer-events: none;
  }
  </style>
</head>
<body>
  <div class="pagination">
    <ul>
      <li><a href="#">&lt;</a></li>
      <li><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li><span>...</span></li>
      <li><a href="#">8</a></li>
      <li><a href="#">9</a></li>
      <li><a href="#">10</a></li>
      <li><a href="#">&gt;</a></li>
    </ul>
  </div>
  <script>
    var currentPage = 1;
    var totalPages = 10;

    function generatePagination(currentPage, totalPages) {
      var pagination = document.querySelector('.pagination ul');

      // remove old page numbers
      while (pagination.firstChild) {
        pagination.removeChild(pagination.firstChild);
      }

      // add new page numbers
      for (var i = 1; i <= totalPages; i++) {
        var li = document.createElement('li');
        var link = document.createElement('a');
        link.href = '#';
        link.textContent = i;
        if (i === currentPage) {
          li.className = 'active';
        }
        li.appendChild(link);
        pagination.appendChild(li);
      }
    }

    generatePagination(currentPage, totalPages);
  </script>
</body>
</html>

示例2：自适应分页条

下面这个示例演示了如何使用JavaScript动态计算页码，以实现自适应分页条。在这个示例中，我们通过设置MAX_PAGE_BUTTONS变量来控制显示的最大页码按钮数量。如果当前页码按钮超过了这个数量，那么我们会在两端添加省略号，并生成当前页码前后的页码按钮。

<!DOCTYPE html>
<html>
<head>
  <title>Adaptable Pagination Example</title>
  <style>
  .pagination {
    font-size: 14px;
    background-color: #FFF;
    border: 1px solid #DDD;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 20px;
  }

  .pagination ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .pagination li {
    display: inline-block;
  }

  .pagination a, .pagination span {
    color: #1980FF;
    padding: 6px 12px;
    text-decoration: none;
  }

  .pagination a:hover, .pagination span:hover {
    background-color: #EEE;
  }

  .pagination .active a {
    background-color: #1980FF;
    color: #FFF;
  }

  .pagination .disabled a, .pagination .disabled span {
    color: #BBB;
    pointer-events: none;
  }
  </style>
</head>
<body>
  <div class="pagination">
    <ul>
      <li><a href="#">&lt;</a></li>
      <!-- Dynamic page numbers go here -->
      <li><a href="#">&gt;</a></li>
    </ul>
  </div>
  <script>
    var currentPage = 1;
    var totalPages = 20;
    var MAX_PAGE_BUTTONS = 7;

    function generatePagination(currentPage, totalPages) {
      var pagination = document.querySelector('.pagination ul');

      // remove old page numbers
      while (pagination.firstChild) {
        pagination.removeChild(pagination.firstChild);
      }

      // add new page numbers
      var startPage = 1,
          endPage = totalPages;
      if (totalPages > MAX_PAGE_BUTTONS) {
        if (currentPage <= Math.ceil(MAX_PAGE_BUTTONS / 2)) {
          endPage = MAX_PAGE_BUTTONS;
        } else if (currentPage >= totalPages - Math.floor(MAX_PAGE_BUTTONS / 2)) {
          startPage = totalPages - MAX_PAGE_BUTTONS + 1;
        } else {
          startPage = currentPage - Math.floor(MAX_PAGE_BUTTONS / 2);
          endPage = currentPage + Math.floor(MAX_PAGE_BUTTONS / 2);
        }
      }
      for (var i = startPage; i <= endPage; i++) {
        var li = document.createElement('li');
        var link = document.createElement('a');
        link.href = '#';
        link.textContent = i;
        if (i === currentPage) {
          li.className = 'active';
        }
        li.appendChild(link);
        pagination.appendChild(li);
      }

      // add ellipsis
      if (totalPages > MAX_PAGE_BUTTONS) {
        if (currentPage > Math.ceil(MAX_PAGE_BUTTONS / 2) + 1) {
          var ellipsis = document.createElement('li');
          var span = document.createElement('span');
          span.textContent = '...';
          ellipsis.appendChild(span);
          pagination.insertBefore(ellipsis, pagination.children[1]);
        }
        if (currentPage < totalPages - Math.floor(MAX_PAGE_BUTTONS / 2)) {
          var ellipsis = document.createElement('li');
          var span = document.createElement('span');
          span.textContent = '...';
          ellipsis.appendChild(span);
          pagination.insertBefore(ellipsis, pagination.children[pagination.children.length - 1]);
        }
      }
    }

    generatePagination(currentPage, totalPages);
  </script>
</body>
</html>

上述代码中的主要区别在于，我们使用了MAX_PAGE_BUTTONS变量来指定最大页码按钮数目，并使用了一些额外的代码来计算当前页码前后要生成的页码按钮，并在两端添加省略号。你可以通过修改currentPage和totalPages变量的值，以演示不同情况下的分页条效果。

希望上述攻略能够对你有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：纯CSS制作自适应分页条附源码下载 - Python技术站