Сайт визитка - пагинация на странице "Новости"

В своей практике я сталкивался с различными вариантами разметки для пагинации - это были и таблицы, и див. Мне полюбился и показался самым оптимальным вариант, построенный на основе списков. Его и будем использовать для решения стоящей перед нами задачи.

В файле news.html перед закрывающим тэгом </section> прописываем следующий код:

<nav class="pagenav">
	<ul>
		<li class="first"><a href="#">prev</a></li>
		<li><a href="#">1</a></li>
		<li><a href="#">2</a></li>
		<li><a href="#">3</a></li>
		<li class="last"><a href="#">next</a></li>
	</ul>
</nav>

Тут все предельно ясно - поскольку пагинация по сути является навигацией локального характера по страницам, то по правилам html 5 ненумерованный список вставим внутрь тэга nav. Как правило, первому и последнему пунктам назначаются классы - мы поступили так же. Ну и для активного пункта пагинации добавим, уже знакомый по верхнему меню сласс active.

Для первого и последнего пункта потребуются четыре картинки в виде треугольников, но это как раз тот случай, когда эти четыре изображения лучше объединить в одно (подготовить спрайт), тем самым уменьшив количество запросов к серверу. Вырезаем сначала черный треугольник на прозрачном фоне. Когда будем создавать в photoshop новое окно, то для него следует указать размеры в двое больше (в нашем случае ширина будет равной 14px, высота - 26px). Вставляем скопированный фрагмент в новый документ и прижимаем его к левому верхнему краю. Затем делаем копию слоя, разворачиваем ее на 180 градусов и прижимаем к правому верхнему краю. Аналогичные действия повторяем для красных треугольников.

Готовый спрайт сохраняем в папке synchronous/html/images/ с именем pagenav.png.

Разметка с графикой готовы - приступаем к стилизации.

.pagenav, .pagenav li {
display:inline-block;
vertical-align:top;
*display:inline;
*zoom:1;
}
.pagenav {
width:100%;
text-align:right;
}
.pagenav li a {
padding:0 10px;
display:block;
line-height:13px;
text-align:center;
color:#000;
font-weight:bold;
text-decoration:none;
}
.pagenav li a:hover, .pagenav li.active a {
color:#cc0000;
}
.pagenav li.first {
margin-right:10px;
}
.pagenav li.last {
margin-left:10px;
}
.pagenav li.first a, .pagenav li.last a {
padding:0;
width:7px;
height:13px;
text-indent:-9999px;
overflow:hidden;
background:url(../images/pagenav.png) no-repeat;
}
.pagenav li.first a {
background-position:0 0;
}
.pagenav li.first a:hover {
background-position:0 -13px;
}
.pagenav li.last a {
background-position:-7px 0;
}
.pagenav li.last a:hover {
background-position:-7px -13px;
}

Кода вроде как и много, но не стоит пугаться - все очень просто. Блоку .pagenav и пунктам списка li внутри него мы присваиваем свойство display:inline-block; - оставляем их блочными, но заставляем вести себя как строчные элементы. Благодаря этому все пункты списка выстраиваются друг за другом в одну строку. Что бы .pagenav занимал всю ширину центральной колонки, задаем ему размер, равный 100% и выравниваем все элементы внутри него по правому краю. Далее пишем стили для всех ссылок в обычном состоянии, указываем поведение для активных ссылок и ссылок в состоянии наведения. И наконец переходим к первому и последнему пункту пагинации - задаем им размеры, в качестве фона назначаем спрайт, смещаем текст за пределы видимости блока и, наконец, указываем позицию спрайта при определенных состояниях ссылок.

Сохраняем все изменения, обновляем страницу в браузере и смотрим на результат. Для очистки совести можем загрузить страницу в разные браузеры и убедиться, что все выглядит нормально.

Если требуется, то по ссылке ниже качаем окончательный вариант верстки сайта визитки для desktop или смотрим на итоговую демо версию.

В следующей статье мы начнем адаптировать сайт для мобильных устройств.