一篇文章帶你瞭解CSS 分頁例項

starkbl發表於2021-09-09
CSS

生活中分頁的效果到處可見，今天教大家詳細的分析一下分頁效果。

圖片描述

如何使用 HTML 和 CSS 來建立分頁?

如果你的網站有很多個頁面，你就需要使用分頁來為每個頁面做導航

一、分頁型別

1. 簡單分頁

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>專案</title>
        <style>
            ul.pagination {
                display: inline-block;
                padding: 0;
                margin: 0;
            }

            ul.pagination li {
                display: inline;
            }

            ul.pagination li a {
                color: black;
                float: left;
                padding: 8px 16px;
                text-decoration: none;
            }
</style>
    </head>
    <body>
        <h2>Simple Pagination</h2>
        <ul class="pagination">
            <li><a href="#">«</a></li>
            <li><a href="#">1</a></li>
            <li><a class="active" href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">6</a></li>
            <li><a href="#">7</a></li>
            <li><a href="#">»</a></li>
        </ul>
    </body>
</html>

圖片描述

點選及滑鼠懸停分頁樣式

如果點選當前頁，可以使用 .active 來設定當期頁樣式，滑鼠懸停可以使用 :hover 選擇器來修改樣式：

CSS 例項

ul.pagination li a.active {
    background-color: #4CAF50;
    color: white;
}

ul.pagination li a:hover:not(.active) {background-color: #ddd;}

圖片描述

2. 分頁樣式

2.1 圓角樣式分頁

可以使用 border-radius 屬性為選中的頁碼來新增圓角樣式:

CSS 例項

ul.pagination li a {
    border-radius: 5px;
}

ul.pagination li a.active {
    border-radius: 5px;
}

滑鼠懸停過渡效果

圖片描述

我們可以透過新增 transition 屬性來為滑鼠移動到頁碼上時新增過渡效果:

CSS 例項

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>專案</title>
  <style>
  ul.pagination {
      display: inline-block;
      padding: 0;
      margin: 0;
  }

  ul.pagination li {display: inline;}

  ul.pagination li a {
      color: black;
      float: left;
      padding: 8px 16px;
      text-decoration: none;
      transition: background-color .3s;
      border: 1px solid #ddd;
  }

  .pagination li:first-child a {
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px;
  }

  .pagination li:last-child a {
      border-top-right-radius: 5px;
      border-bottom-right-radius: 5px;
  }

  ul.pagination li a.active {
      background-color: #f00;
      color: white;
      border: 1px solid #f00;
  }

  ul.pagination li a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>
  <h2>Pagination with Rounded Borders</h2>
  <ul class="pagination">
    <li><a href="#">«</a></li>
    <li><a href="#">1</a></li>
    <li><a class="active" href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
    <li><a href="#">7</a></li>
    <li><a href="#">»</a></li>
  </ul>
</body>
</html>

2.2 帶邊框分頁

圖片描述

我們可以使用 border 屬性來新增帶邊框分頁:

CSS 例項

ul.pagination li a {
    border: 1px solid #ddd; /* Gray */
}

2.3. 分頁間隔

提示: 你可以使用 margin 屬性來為每個頁碼直接新增空格：

CSS 例項

ul.pagination li a {
    margin: 0 4px; /* 0 is for top and bottom. Feel free to change it */
}

圖片描述

2.4 分頁字型大小

我們可以使用 font-size 屬性來設定分頁的字型大小:

CSS 例項

ul.pagination li a {
    font-size: 22px;
}

圖片描述

2.5 居中分頁

如果要讓分頁居中，可以在容器元素上 (如 <div>) 新增 text-align:center 樣式：

CSS 例項

div.center {
    text-align: center;
}

二、案例

麵包屑導航

圖片描述

另外一種導航為麵包屑導航，

例項如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>專案</title>
  <style>
  ul.breadcrumb {
      padding: 8px 16px;
      list-style: none;
      background-color: #eee;
  }
  ul.breadcrumb li {display: inline;}
  ul.breadcrumb li+li:before {
      padding: 8px;
      color: black;
      content: "/

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/3705/viewspace-2826460/，如需轉載，請註明出處，否則將追究法律責任。

相關文章