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

Статья читается: 3 мин.

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

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

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

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

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

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

pagin

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

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

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

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

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

flicrk-pagination

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

<ul id="pagination-flickr">
        <li class="previous-off">«Previous</li>
        <li class="active">1</li>
        <li><a href="?page=2">2</a></li>
        <li><a href="?page=3">3</a></li>
        <li><a href="?page=4">4</a></li>
        <li><a href="?page=5">5</a></li>
        <li><a href="?page=6">6</a></li>
        <li><a href="?page=7">7</a></li>
        <li class="next"><a href="?page=2">Next »</a></li>
</ul>

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

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

ul{border:0; margin:0; padding:0;}

#pagination-flickr li{
border:0; margin:0; padding:0;
font-size:11px;
list-style:none;
}
#pagination-flickr a{
border:solid 1px #DDDDDD;
margin-right:2px;
}
#pagination-flickr .previous-off,
#pagination-flickr .next-off {
color:#666666;
display:block;
float:left;
font-weight:bold;
padding:3px 4px;
}
#pagination-flickr .next a,
#pagination-flickr .previous a {
font-weight:bold;
border:solid 1px #FFFFFF;
}
#pagination-flickr .active{
color:#ff0084;
font-weight:bold;
display:block;
float:left;
padding:4px 6px;
}
#pagination-flickr a:link,
#pagination-flickr a:visited {
color:#0063e3;
display:block;
float:left;
padding:3px 6px;
text-decoration:none;
}
#pagination-flickr a:hover{
border:solid 1px #666666;
}

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

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

Immagine-8

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

<ul id="pagination-digg">
        <li class="previous-off">«Previous</li>
        <li class="active">1</li>
        <li><a href="?page=2">2</a></li>
        <li><a href="?page=3">3</a></li>
        <li><a href="?page=4">4</a></li>
        <li><a href="?page=5">5</a></li>
        <li><a href="?page=6">6</a></li>
        <li><a href="?page=7">7</a></li>
        <li class="next"><a href="?page=2">Next »</a></li>
</ul>

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

ul{border:0; margin:0; padding:0;}

#pagination-digg li{
border:0; margin:0; padding:0;
font-size:11px;
list-style:none;
margin-right:2px;
}
#pagination-digg a{
border:solid 1px #9aafe5;
margin-right:2px;
}
#pagination-digg .previous-off,
#pagination-digg .next-off {
border:solid 1px #DEDEDE;
color:#888888;
display:block;
float:left;
font-weight:bold;
margin-right:2px;
padding:3px 4px;
}
#pagination-digg .next a,
#pagination-digg .previous a {
font-weight:bold;
}
#pagination-digg .active{
background:#2e6ab1;
color:#FFFFFF;
font-weight:bold;
display:block;
float:left;
padding:4px 6px;
}
#pagination-digg a:link,
#pagination-digg a:visited {
color:#0e509e;
display:block;
float:left;
padding:3px 6px;
text-decoration:none;
}
#pagination-digg a:hover{
border:solid 1px #0e509e;
}

Простая пагинация

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

3

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

<ul id="pagination-clean">
        <li class="previous-off">«Previous</li>
        <li class="active">1</li>
        <li><a href="?page=2">2</a></li>
        <li><a href="?page=3">3</a></li>
        <li><a href="?page=4">4</a></li>
        <li><a href="?page=5">5</a></li>
        <li><a href="?page=6">6</a></li>
        <li><a href="?page=7">7</a></li>
        <li class="next"><a href="?page=2">Next »</a></li>
</ul>

Css для такого типа пагинации будет:

ul{border:0; margin:0; padding:0;}

#pagination-clean li{
border:0; margin:0; padding:0;
font-size:11px;
list-style:none;
}
#pagination-clean li, #pagination-clean a{
border:solid 1px #DEDEDE;
margin-right:2px;
}
#pagination-clean .previous-off,
#pagination-clean .next-off {
color:#888888;
display:block;
float:left;
font-weight:bold;
padding:3px 4px;
}
#pagination-clean .next a,
#pagination-clean .previous a {
font-weight:bold;
border:solid 1px #FFFFFF;
}
#pagination-clean .active{
color:#00000;
font-weight:bold;
display:block;
float:left;
padding:4px 6px;
}
#pagination-clean a:link,
#pagination-clean a:visited {
color:#0033CC;
display:block;
float:left;
padding:3px 6px;
text-decoration:none;
}
#pagination-clean a:hover{
text-decoration:none;
}

Вот такой у меня получился урок. Думаю, он вам будет полезен.

На этом я буду с вами прощаться и до скорых встреч!

С вами был — ваш Юрич!

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

Вам понравилась статья?
плохохорошо (+4 баллов, 2 оценок)
Загрузка...
Обо мне
Юрич:
Занимаюсь созданием сайтов на ВордПресс более 5 лет. Работал в нескольких веб-студиях, да и сейчас работаю. Иногда подрабатываю на фрилансе, как на нашем так и на зарубежном. Везде зарекомендовал себя очень хорошо. Если нужен сайт на вордресс, шаблон для сайта или лендинг - не стесняйтесь - пишите. Рад буду помочь!
One Comment к статье "Красивая пагинация с использованием css"
  1. witos1: 16.03.2016 в 09:01 - Ответить

    Я тоже себе так сделал