1. صفحه اصلی
  2. مقالات
  3. صفحه بندی (Pagination) در CSS

صفحه بندی (Pagination) در CSS

امیر زوارمی امیر زوارمی
06 تیر 1398
درسنامه درس 12 از سری CSS پیشرفته

Pagination یا صفحه بندی در CSS

اگر وب سایت شما از نوع فروشگاه های اینترنتی یا وبلاگ ها است که دارای صفحات متعدد اند، صفحه بندی از وظایف اجباری شما است. یک مثال ساده از صفحه بندی در CSS را در کد زیر می بینید:

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
}
</style>
</head>
<body>

<h2>Simple Pagination</h2>

<div class="pagination">
  <a href="#">&laquo;</a>
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">&raquo;</a>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

برای زیباتر کردن این مثال باید کلاسی به نام active. را به صفحه ی فعلی داده و با استفاده از hover: کاری کنیم که با حرکت موس روی این صفحات رنگ پس زمینه شان تغییر کند:

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
}

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

.pagination a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>

<h2>Active and Hoverable Pagination</h2>
<p>Move the mouse over the numbers.</p>

<div class="pagination">
  <a href="#">&laquo;</a>
  <a href="#">1</a>
  <a class="active" href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">&raquo;</a>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

گرد کردن زوایا

برای ایجاد ظاهری زیباتر می توانید زوایای این صفحات را با استفاده از border-radius  گرد کنید.

به مثال زیر دقت کنید:

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
}

.pagination a.active {
  background-color: #4CAF50;
  color: white;
  border-radius: 5px;
}

.pagination a:hover:not(.active) {
  background-color: #ddd;
  border-radius: 5px;
}
</style>
</head>
<body>

<h2>Rounded Active and Hover Buttons</h2>

<div class="pagination">
  <a href="#">&laquo;</a>
  <a href="#">1</a>
  <a href="#" class="active">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">&raquo;</a>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

استفاده از قابلیت transition

شما می توانید با استفاده از قابلیت transition کاری کنید که انیمیشن هایی مانند hover به نرمی هرچه تمام تر اجرا شده و آنی اتفاق نیفتند.

به مثال زیر دقت کنید:

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
}

.pagination a.active {
  background-color: #4CAF50;
  color: white;
    border-radius: 5px;
}

.pagination a:hover:not(.active) {background-color: #ddd;border-radius: 5px;}
</style>
</head>
<body>

<h2>Transition Effect on Hover</h2>
<p>Move the mouse over the numbers.</p>

<div class="pagination">
  <a href="#">&laquo;</a>
  <a href="#">1</a>
  <a href="#" class="active">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">&raquo;</a>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

اضافه کردن حاشیه

اکثر وب سایت های دنیای وب از border برای حاشیه دادن به قسمت صفحه بندی سایت خود استفاده می کنند که امری سلیقه ای است. اگر بخواهیم این کار را با مثال خود بکنیم چیزی جز اضافه کردن border به کدهای CSS نداریم:

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
  display: inline-block;
}

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

.pagination a.active {
  background-color: #4CAF50;
  color: white;
  border: 1px solid #4CAF50;
}

.pagination a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>

<h2>Pagination with Borders</h2>

<div class="pagination">
  <a href="#">&laquo;</a>
  <a href="#">1</a>
  <a href="#" class="active">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">&raquo;</a>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

اما هنوز هم جای ارتقاء وجود دارد. اگر گوشه های دو علامت « و » را گرد کنیم شکل قسمت صفحه بندی زیباتر می شود:

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
  display: inline-block;
}

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

.pagination a.active {
  background-color: #4CAF50;
  color: white;
  border: 1px solid #4CAF50;
}

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

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

.pagination a:last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
</style>
</head>
<body>

<h2>Pagination with Rounded Borders</h2>

<div class="pagination">
  <a href="#">&laquo;</a>
  <a href="#">1</a>
  <a class="active" href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">&raquo;</a>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

صفحات با فاصله

یکی دیگر از استایل های ممکن، ایجاد فاصله بین صفحات در قسمت صفحه بندی است. در چنین حالتی باید از margin استفاده کنیم:

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
  display: inline-block;
}

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

.pagination a.active {
  background-color: #4CAF50;
  color: white;
  border: 1px solid #4CAF50;
}

.pagination a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>

<h2>Pagination with Margins</h2>

<div class="pagination">
  <a href="#">&laquo;</a>
  <a href="#">1</a>
  <a href="#" class="active">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">&raquo;</a>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

اندازه ی قسمت صفحه بندی

برای تعیین اندازه ی قسمت صفحه بندی می توان از خاصیت font-size استفاده کرد و به هیچ چیز پیچیده ی دیگری نیاز نیست:

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
  display: inline-block;
}

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

.pagination a.active {
  background-color: #4CAF50;
  color: white;
  border: 1px solid #4CAF50;
}

.pagination a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>

<h2>Pagination Size</h2>
<p>Change the font-size property to make the pagination smaller or bigger.</p>

<div class="pagination">
  <a href="#">&laquo;</a>
  <a href="#">1</a>
  <a href="#" class="active">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">&raquo;</a>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

قرار دادن صفحه بندی در وسط صفحه

برای ترازبندی صفحه بندی باید ابتدا آن را درون یک عنصر نگه دارنده ی دیگر (مانند یک div) قرار دهید و سپس از قابلیت text-align:center استفاده کنید:

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  text-align: center;
}

.pagination {
  display: inline-block;
}

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

.pagination a.active {
  background-color: #4CAF50;
  color: white;
  border: 1px solid #4CAF50;
}

.pagination a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>

<h2>Centered Pagination</h2>

<div class="center">
  <div class="pagination">
  <a href="#">&laquo;</a>
  <a href="#">1</a>
  <a href="#" class="active">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">&raquo;</a>
  </div>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

استایل های دیگر

البته استایل های دیگر صفحه بندی نیز وجود دارند. به طور مثال کد بسیار پیشرفته تری را در زیر می بینید:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<style>
  .wrap {
  display: grid;
  place-content: center;
  height: 100vh;
  background: #90CAF9;
}
.wrap .nav {
  display: flex;
  flex-direction: column;
  background: #fff;
  position: relative;
  overflow: hidden;
  padding: 0;
  margin: 0;
  box-shadow: 0 5px 5px -5px rgba(2, 136, 209, 0.15), 0 10px 10px -5px rgba(2, 136, 209, 0.15), 0 15px 15px -5px rgba(2, 136, 209, 0.15), 0 20px 20px -5px rgba(2, 136, 209, 0.15);
}
.wrap .nav__link {
  flex: 1;
  padding: 50px;
  list-style: none;
  text-align: center;
  position: relative;
  font-size: 20px;
  font-weight: bold;
  transition: 0.5s ease;
  cursor: pointer;
  user-select: none;
}
.wrap .nav__link:hover {
  color: #0288D1;
}
.wrap .nav__link:hover:nth-of-type(2) ~ .nav__bar {
  top: 20%;
}
.wrap .nav__link:hover:nth-of-type(3) ~ .nav__bar {
  top: 40%;
}
.wrap .nav__link:hover:nth-of-type(4) ~ .nav__bar {
  top: 60%;
}
.wrap .nav__link:hover:nth-of-type(5) ~ .nav__bar {
  top: 80%;
}
.wrap .nav__bar {
  top: 0;
  left: 0;
  position: absolute;
  background: #0288D1;
  width: 5px;
  height: 20%;
  transition: 0.35s cubic-bezier(0.32, 1.4, 0.13, 1.4);
}
  </style>
<div class="wrap">
  <ul class="nav"> 
    <li class="nav__link">1</li>
    <li class="nav__link">2</li>
    <li class="nav__link">3</li>
    <li class="nav__link">4</li>
    <li class="nav__link">5</li>
    <div class="nav__bar"></div>
  </ul>
</div>
</body>
</html>

مشاهده ی خروجی در JSBin

یک مثال بسیار زیبای دیگر:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<style>
  body {
  margin: 0;
  background: #F6B533;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
}
a {
  text-decoration: none;
  outline: none;
  display: block;
  padding: 20px 0;
  width: 40px;
  text-align: center;
  color: white;
  float: left;
}
div {
  position: absolute;
  top: 0;
  opacity: 0;
  width: 40px;
  overflow: hidden;
  transition: .5s linear;
}
.left {
  left: 0;
}
.right {
  right: 0;
}
.line {
  width: 30px;
  height: 2px;
  position: absolute;
  bottom: 10px;
  left: -35px;
  background: white;
  transition: .5s linear .2s;  
}
.left a:nth-child(2):hover ~ .line,
.right a:nth-child(2):hover ~ .line {
  left: 5px; 
}
.left a:nth-child(3):hover ~ .line,
.right a:nth-child(3):hover ~ .line {
  left: 45px; 
}
.left a:nth-child(4):hover ~ .line, 
.right a:nth-child(4):hover ~ .line {
  left: 85px; 
}
nav {
  background: #FCFCFC;
  color: #4D4644;
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  width: 600px;
  text-align: center;
  box-shadow: 0 0 20px rgba(0,0,0,.2);
  transition: .3s linear;
}
.text {
  display: inline-block;
  letter-spacing: 2px;
  padding: 20px 10px;
  cursor: pointer;
}
nav:hover div {
  background: #D8CDC9;
  opacity: 1;
}
div:hover .prev {
  opacity: 0;
  display: none;
}
div:hover .next {
  display: none;
}
div:hover {
  width: auto;
}
.prev:before {
  content: "\f104";
  font-family: FontAwesome;
}
.next:before {
  content: "\f105";
  font-family: FontAwesome;
}
  </style>
<nav><span class="text">NEXT</span>
  <div class="left">
    <a href="" class="prev"></a>
    <a href="">1</a>
    <a href="">2</a>
    <a href="">3</a>
    <span class="line"></span>
  </div>
  <div class="right">
    <a href="" class="next"></a>
    <a href="">4</a>
    <a href="">5</a>
    <a href="">6</a>
    <span class="line"></span>
   </div>
</nav>
</body>
</html>

مشاهده ی خروجی در JSBin

برچسب‌ها: آموزش CSS صفر تا صد CSS CSS
تمام فصل‌های سری ترتیبی که روکسو برای مطالعه‌ی دروس سری CSS پیشرفته توصیه می‌کند:

حاشیه های پیشرفته تر در CSS

1

تصاویر پس زمینه ترکیبی در CSS

2

گرادینت (gradient) در زبان CSS

3

سایه ها (shadows) در زبان CSS

4

افکت های متنی و فونت ها در زبان CSS

5

تغییر شکل دو بعدی عناصر در CSS

6

تغییر شکل سه بعدی عناصر در CSS

7

Transition ها در زبان CSS

8

ساخت tooltip در زبان CSS

9

استایل دهی پیشرفته تصاویر در CSS

10

استایل دهی دکمه ها در CSS

11

صفحه بندی (Pagination) در CSS

12

نوشتارهای چند ستونه در CSS

13

خصوصیات object-fit و resize و outline-offset

14

متغیرهای CSS و مبحث Box Sizing

15

آموزش کامل کار با مدل Flexbox (قسمت اول)

16

آموزش کامل کار با مدل Flexbox (قسمت دوم)

17

کار با Media Query ها در CSS 3 به همراه چند مثال

18

طراحی واکنش گرا در CSS

19

Grid-View چیست؟

20

Media Query ها در طراحی واکنش گرا

21

تصاویر و ویدیوها در طراحی واکنش گرا

22

grid ها در زبان CSS

23

کار با container (نگهدارنده‌ی) grid

24

قسمت پایانی: آیتم های grid در CSS

25
نویسنده شوید
دیدگاه‌های شما

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

دوره‌های آموزشی مرتبط
VIP
آموزش HTML و CSS از صفر تا صد + پروژه محور
آموزش HTML و CSS از صفر تا صد + پروژه محور
265000 تومان
مقالات مرتبط
ویژگی z-index چیست و چگونه کار می کند؟
ساخت لودینگ فقط با CSS
ساخت لودینگ فقط با CSS
15 اردیبهشت 1401
طراحی ریسپانسیو با CSS
آموزش جامع و کامل کار با CSS Grid
CSS با طعم تاکو؛ آموزش ساخت ساندویچ تاکو با HTML و CSS
آخرین سوالات کاربران
alidniry در 9 ماه قبل پرسیده:
خطای مسیردهی در HTML و css
ما را دنبال کنید
اینستاگرام روکسو تلگرام روکسو ایمیل و خبرنامه روکسو