Разбиение на страницы CSS - httpdoc.ru

CSS-пагинация

Пагинация помогает нам разбивать большие объемы контента на множество записей на нескольких страницах, что помогает нам пользователям с легкостью посещать сайт.

Он дает уникальные значения каждой странице. pagination Класс используется с элементом, содержание которого должно быть paginized.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS Pagination </title> 
  <meta charset="UTF-8"> 
<style>
.pagination li {display: inline;}

.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 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>

Выход

CSS Pagination

Простая разбивка на страницы


Пагинация с эффектом наведения и классом .active

Для этого вида эффекта разбивки на страницы вы должны добавить active класс на текущую страницу вместе с :hover селектором для изменения цвета каждой ссылки страницы, когда курсор мыши перемещается по ней. Вы также можете использовать border свойство для добавления границ в пагинацию.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS Hover on Pagination </title> 
  <meta charset="UTF-8"> 
<style>
.pagination li {display: inline;}

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

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

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

<h2>Active and Hoverable Pagination</h2>
<p>Move the mouse over the numbers.</p>
<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>

Выход

CSS Hover on Pagination

Активная и плавающая разбивка на страницы

Наведите указатель мыши на числа.