CSS實現頁面自適應分頁效果

在Web開發中，頁面的分頁效果是常見的需求之一。如何實現一個既美觀又實用的頁面分頁效果呢？本文介紹使用CSS實現頁面自適應分頁效果的方法和技巧。

一、布局

實現頁面自適應分頁效果的第一步是布局。分頁通常需要將內容區域和分頁區域分開，分頁區域往往位於頁面底部。我們可以使用Flexbox來實現響應式布局。

<div class="container">
  <div class="content">
    // 內容區域
  </div>
  <div class="pagination">
    // 分頁區域
  </div>
</div>

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.content {
  flex: 1;
}

.pagination {
  height: 50px;
}

上面的布局代碼使用了Flexbox布局，將容器設置為display: flex，並且使用flex-direction: column設置主軸為垂直方向。內容區域使用flex: 1進行自適應高度布局，分頁區域設置固定高度為50px。

二、樣式

在布局完成後，我們需要對內容區域和分頁區域進行樣式設置。首先是內容區域，我們可以設置padding來保證內容不會與容器邊緣重合，同時設置Box Shadow來增加整體的立體感。

.content {
  flex: 1;
  padding: 20px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

上面的樣式代碼使用了padding和Box Shadow來設置內容區域的樣式。

接下來是分頁區域的樣式。我們可以使用Flexbox來實現分頁區域的自適應布局，同時使用border-top來增加分割線的效果。對於頁碼的樣式，我們可以使用Border Radius和Box Shadow來設置圓角和陰影效果。

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  border-top: 1px solid #d0d0d0;
}

.pagination a {
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  margin: 0px 5px;
  border-radius: 15px;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
}

上面的樣式代碼使用了Flexbox布局、border-top、Border Radius和Box Shadow來設置分頁區域和頁碼的樣式。

三、JS交互

最後一個問題是如何實現用戶交互。我們可以使用JavaScript來實現分頁效果。首先，我們需要計算出總頁數和當前頁數。

var totalPage = 10; // 總頁數
var currentPage = 1; // 當前頁數

然後，我們可以使用for循環來生成頁碼，將頁碼插入到頁面中。

var pagination = document.querySelector('.pagination');

for (var i = 1; i <= totalPage; i++) {
  var a = document.createElement('a');
  a.textContent = i;
  if (i === currentPage) {
    a.classList.add('current');
  }
  pagination.appendChild(a);
}

上面的代碼使用了for循環和createElement來動態生成頁碼，並且根據當前頁數設置class為current來標識當前頁碼。

最後，我們需要為每個頁碼綁定點擊事件。當用戶點擊頁碼時，通過修改currentPage的值來重新渲染頁面。

pagination.addEventListener('click', function(e) {
  var target = e.target;
  if (target.tagName === 'A' && !target.classList.contains('current')) {
    currentPage = parseInt(target.textContent);
    render();
  }
});

function render() {
  var pagination = document.querySelector('.pagination');
  pagination.innerHTML = '';

  for (var i = 1; i <= totalPage; i++) {
    var a = document.createElement('a');
    a.textContent = i;
    if (i === currentPage) {
      a.classList.add('current');
    }
    pagination.appendChild(a);
  }
}

上面的代碼使用了addEventListener和innerHTML來綁定點擊事件和重新渲染頁面。

四、完整代碼

下面是完整的代碼示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS實現頁面自適應分頁效果</title>
    <style>
      .container {
        display: flex;
        flex-direction: column;
        height: 100vh;
      }

      .content {
        flex: 1;
        padding: 20px;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
      }

      .pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fff;
        border-top: 1px solid #d0d0d0;
      }

      .pagination a {
        display: inline-block;
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        margin: 0px 5px;
        border-radius: 15px;
        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
      }

      .pagination a.current {
        background-color: #666;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="content">
        <p>這是第1頁的內容。</p>
      </div>
      <div class="pagination">
      </div>
    </div>

    <script>
      var totalPage = 10;
      var currentPage = 1;

      var pagination = document.querySelector('.pagination');

      for (var i = 1; i <= totalPage; i++) {
        var a = document.createElement('a');
        a.textContent = i;
        if (i === currentPage) {
          a.classList.add('current');
        }
        pagination.appendChild(a);
      }

      pagination.addEventListener('click', function(e) {
        var target = e.target;
        if (target.tagName === 'A' && !target.classList.contains('current')) {
          currentPage = parseInt(target.textContent);
          render();
        }
      });

      function render() {
        var pagination = document.querySelector('.pagination');
        pagination.innerHTML = '';

        for (var i = 1; i <= totalPage; i++) {
          var a = document.createElement('a');
          a.textContent = i;
          if (i === currentPage) {
            a.classList.add('current');
          }
          pagination.appendChild(a);
        }

        var content = document.querySelector('.content p');
        content.textContent = '這是第' + currentPage + '頁的內容。';
      }

      render();
    </script>
  </body>
</html>

以上就是本文介紹的使用CSS實現頁面自適應分頁效果的方法和技巧。通過以上的代碼示例，我們可以更好地理解CSS和JavaScript在頁面分頁中的應用。希望本文對大家的學習和工作有所幫助。

原創文章，作者：DUIZD，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/329540.html

CSS實現頁面自適應分頁效果

一、布局

二、樣式

三、JS交互

四、完整代碼

相關推薦

發表回復