🪴 Edwin Aze's Blog

最近文章

最近笔记

分页(Pagination)

2分钟阅读

案例

简单分页表示

重点在于链接对象 a 设置宽度和高度，而不只是设置 font-size。刚开始没想到这一点，结果用div内嵌a来实现，很丑陋。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap"
      rel="stylesheet"
    />
 
    <title>Pagination Component</title>
 
    <style>
      /*
      SPACING SYSTEM (px)
      2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
      FONT SIZE SYSTEM (px)
      10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
      */
      /* 
      MAIN COLOR: #087f5b
      GREY COLOR: #343a40
      */
 
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
 
      body {
        font-family: "Inter", sans-serif;
        color: #343a40;
        line-height: 1;
        display: flex;
        justify-content: center;
      }
 
      .pagination {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-top: 200px;
      }
 
      .btn {
        border: 1px solid #087f5b;
        height: 48px;
        width: 48px;
        border-radius: 50%;
        background: none;
        cursor: pointer;
      }
 
      .btn:hover {
        background-color: #087f5b;
      }
 
      .btn:hover .btn-icon {
        stroke: #fff;
      }
 
      .btn-icon {
        height: 24px;
        width: 24px;
        stroke: #087f5b;
      }
 
      .page-link:link,
      .page-link:visited {
        font-size: 18px;
        color: #343a40;
        text-decoration: none;
        height: 36px;
        width: 36px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
 
      .page-link:hover,
      .page-link:active,
      .page-link.page-link--current {
        background-color: #087f5b;
        color: #fff;
      }
 
      .dots {
        color: #868e96;
      }
    </style>
  </head>
  <body>
    <div class="pagination">
      <button class="btn">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="btn-icon"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M15 19l-7-7 7-7"
          />
        </svg>
      </button>
      <a href="#" class="page-link">1</a>
      <a href="#" class="page-link">2</a>
      <a href="#" class="page-link page-link--current">3</a>
      <a href="#" class="page-link">4</a>
      <a href="#" class="page-link">5</a>
      <a href="#" class="page-link">6</a>
      <span class="dots">...</span>
      <a href="#" class="page-link">23</a>
      <button class="btn">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="btn-icon"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M9 5l7 7-7 7"
          />
        </svg>
      </button>
    </div>
  </body>
</html>

反向链接