Как сделать пагинацию css

CSS Pagination Examples

Узнайте, как создать Адаптивное разбиение на страницы с помощью CSS.

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

Если у вас есть сайт с большим количеством страниц, вы можете добавить какую-то разбивку на страницы на каждой странице:

Пример

.pagination <
display: inline-block;
>

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

Активная и парящая нумерация страниц

Выделите текущую страницу с помощью класса .active и используйте селектор :hover для изменения цвета каждой ссылки страницы при перемещении указателя мыши на них:

Пример

.pagination a.active <
background-color: #4CAF50;
color: white;
>

Закругленные активные и парящие кнопки

Добавьте свойство border-radius , если требуется округленная кнопка "активно" и "Hover":

Пример

.pagination a <
border-radius: 5px;
>

.pagination a.active <
border-radius: 5px;
>

Парящий эффект перехода

Добавьте свойство transition к ссылкам страницы, чтобы создать эффект перехода при наведении курсора:

Пример

Bordered Pagination

Используйте свойство border для добавления границ к разбиению на страницы:

Пример

Закругленные границы

Совет: Добавьте округленные границы к вашему первому и последнему звену в разбиении на страницы:

Пример

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

Расстояние между ссылками

Совет: Добавьте свойство margin , если не хотите группировать ссылки на страницы:

Пример

Размер разбиения на страницы

Измените размер разбиения на страницы с помощью свойства font-size :

Пример

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

Чтобы центрировать разбиение на страницы, оберните элемент контейнера (например, <div>) вокруг него с text-align:center

Как сделать — Пагинацию

Узнать, как создать разбиение на страницы с помощью CSS.

Пагинация

Создать пагинацию

Шаг 1) Добавить HTML:

Пример

Шаг 2) Добавить CSS:

Пример

/* Ссылки для разбиения на страницы */
.pagination a <
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
transition: background-color .3s;
>

/* Стиль активной/текущей ссылки */
.pagination a.active <
background-color: dodgerblue;
color: white;
>

/* Добавить серый цвет фона при наведении курсора мыши */
.pagination a:hover:not(.active)

Красивая пагинация с использованием css

Приветствую вас, уважаемые гости и подписчики моего скромного блога zacompom!

Давненько не писал, хотя в статье где рассказывал о поиске по Твиттеру, обещал что скоро напишу. Очень сильно перед вами извеняюсь, но на то у меня были весомые доводы, и сейчас я исправляю досадную промашку.

Итак, готовы? В добрый путь)))

В этом уроке рассмотрим то как украсить нашу пагинацию для поисковой выдачи или еще для чего нибудь. Это можно сделать использую несколько html строчек и CSS. Урок содержит HTML и CSS код для осуществления пагинации как в Flickr, Digg и простая пагинация готовые для использования на вашем сайте.

Типичная структура пагинации

Следующая картинка показывает пример типочной структуры пагинации:

pagin

В целом можно выделить четыре основных элемента:

  • Предыдущая/Следующая кнопка (отключенном состоянии)
  • Текущая активная страница
  • Стандартая кнопка для всех страниц
  • Предыдущая/Следующая кнопка (активном состоянии)

Вы можете оформить эту структуру с помощю списка HTML(<ul>), который содержит некоторые элементы <li> (по одному для каждогой кнопки) и поставить ID для <ul> списка для назначения специфических стилей пагинации.

Верстка пагинации как в Flickr:

Пагинация в Flickr выглядит следующим образом:

flicrk-pagination

Html код очень прост, вы можете использовать эту структуру во всех пагинациях которые будете создавать:

Теперь остается переопределить CSS стили элементов (ul,li,a)

Css стили для Flickr пагинации очень просты:

Верстка пагинации как в Digg:

Теперь попробуем создать пагинацию как в Digg которая выглядит так:

Immagine-8

С предыдущего примера скопируйте HTML структуру. Вам нужно будет только поменять ID для <ul> на pagination-digg:

Css код очень похож на предыдущий, как Flickr. Вам надо только изменить некоторые атрибуты, а также изменить #pagination-flickr ID на #pagination-digg, но CSS элементы разбиения на страницы не меняются:

Если вам нравится чистый дизайн без всяких примочек то этот пример покажет как создать очень простую пагинацию которая выглядит так:

3

HTML структура такая же как и двух предыдущих. Правдо опять надо будет поменять ID для <ul> теперь на “pagination-clean”:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *