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

19-05-2010

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

Pagination

В целом можно выделить четыре основных элемента:
- Предыдущая/Следующая кнопка (отключенном состоянии)
- Текущая активная страница
- Стандартая кнопка для всех страниц
- Предыдущая/Следующая кнопка (активном состоянии)
Вы можете оформить эту структуру с помощю списка 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 которая выглядит так:

digg-pagination

С предыдущего примера скопируйте 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;
}

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

clean-pagination

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;
}
NeesseSoifada6.4.2010 03:06
спасибо за интересную информацию
gigit6.14.2010 12:06
Хорошая статья ,попробую применить на своем сайте.
Boat Sales3.15.2011 01:03
really agreed with what they were saying and thought I would share it with you all... was surprised by this so thought I would share it with my readers...
Алексей3.8.2012 12:03
Здравствуйте.Подскажите,куда вставлять первый вариант кода и код css в таблице стилей?
Алексей3.11.2012 09:03
ЗдравствуйтеНе поможите с наавигацией страниц Wordpress не поддерживается темой.Наверное надо в ручную.Я уже писал Вам об этой проблеме.Могу прислать архив данных сайта как приложение.Сайт пока технич. и находится на хостинге.Пишите!
Николай Чеботарев4.19.2012 11:04
Поправьте, пожалуйста, заголовок - "Красивая пагинация с использованием css"
anniversary gifts for men1.21.2013 09:01
personalized gifts for men gifts for her baby gifts... [...]I used to be very happy to seek out this net-site.I needed to thanks in your time for this glorious learn!! I definitely having fun with every little little bit of it and I've you bookmarked to take a look at new stuff you blog post.[...]...
Ирина1.26.2013 07:01
Здравствуйте!!! Скажите , пожалуйста, а как выровнять эту красоту по центру ???
Homepage3.4.2013 12:03
... [Trackback]... [...] Read More here: prootime.ru/pagination [...]...
momubyfvrxeszw.com3.4.2013 07:03
Title... [...]Here is a great Weblog You might Discover Fascinating that we Encourage You[...]...
maillot irlande football7.25.2013 03:07
story.php?title=
maillot river plate 20137.31.2013 04:07
index.php?s= showtopic=
maillot russie 20137.31.2013 11:07
viewtopic,p,*.html
maillot de foot pas cher8.5.2013 06:08
/viewtopic/p=*.html
ОСТАВИТЬ КОММЕНТАРИЙ