Красивая пагинация с использованием css
Приветствую вас, уважаемые гости и подписчики моего скромного блога zacompom!
Давненько не писал, хотя в статье где рассказывал о поиске по Твиттеру, обещал что скоро напишу. Очень сильно перед вами извеняюсь, но на то у меня были весомые доводы, и сейчас я исправляю досадную промашку.
Итак, готовы? В добрый путь)))
В этом уроке рассмотрим то как украсить нашу пагинацию для поисковой выдачи или еще для чего нибудь. Это можно сделать использую несколько html строчек и CSS. Урок содержит HTML и CSS код для осуществления пагинации как в Flickr, Digg и простая пагинация готовые для использования на вашем сайте.
Ко мне часто поступают вопросы про хостинг, которым я пользуюсь и поэтому решил указать хостинг в статье https://sprinthost.ru. Вы можете попробовать попользоваться хостингом 30 дней бесплатно. Чтобы понять, как будет работать Ваш сайт на этом хостинге просто перенести свой сайт (в этом поможет поддержка хостинга бесплатно) и и таким образом сможете понять подходит хостинг Вам или нет. На этом хостинге находятся сайты с 20 000 тысяч посещаемость и сайты чувствуют себя отлично. Рекомендую! Да, если делать оплату на 1 год то получаете скидку 25%. И что мне нравится — тех. поддержка всегда помогает в технических вопросах, за что им спасибо. Как Вы понимаете не всегда проходит всё гладко и нет желания, чтобы сайт не был доступен тем самым страдал трафик и доход.
Типичная структура пагинации
Следующая картинка показывает пример типочной структуры пагинации:
В целом можно выделить четыре основных элемента:
Вы можете оформить эту структуру с помощю списка HTML(<ul>), который содержит некоторые элементы <li> (по одному для каждогой кнопки) и поставить ID для <ul> списка для назначения специфических стилей пагинации.
Верстка пагинации как в Flickr:
Пагинация в Flickr выглядит следующим образом:
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 которая выглядит так:
С предыдущего примера скопируйте 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; }
Простая пагинация
Если вам нравится чистый дизайн без всяких примочек то этот пример покажет как создать очень простую пагинацию которая выглядит так:
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. Постараюсь больше так на долго не пропадать и не разочаровывать вас. Оставляйте комментарии, так будет стимул писать чаще полезных для вас статей!