Ссылки-номера на соседние страницы

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

Обычно в HTML-коде пишут:

<a href="#">Назад</a>
<a href="#">1</a>
<a href="#">2</a>
3
<a href="#">4</a>
<a href="#">5</a>
<a href="#">Вперед</a>

Браузер отображает это так:

Текущая страница (в данном случае это страница 3) не должна быть ссылкой. Таким образом мы видим положение открытой страницы относительно других страниц.

У этого решения есть один существенный недостаток: цифры-ссылки слишком маленькие, некоторые пользователи могут испытывать затруднение, пытаясь попасть в них, а увеличение размера шрифта не всегда допустимо.

Положение вещей легко исправить с помощью CSS. Код ссылок слегка модифицируем, поместив их в отдельный блок:

<div class="links">
	<a href="#">Назад</a>
	<a href="#">1</a>
	<a href="#">2</a>
	<span>3</span>
	<a href="#">4</a>
	<a href="#">5</a>
	<a href="#">Вперед</a>
</div>

Задаем стили для блока:

/* ссылки расположим по центру */
.links {
	text-align: center;
}

/* отступы, зеленый фон, полужирный шрифт */
.links a, .links a:active,
.links a:visited, .links span {
	background: #074;
	color: #fff;
	padding: 1px 5px;
	margin: 0 5px;
	border: 1px solid #063;
	font-weight: bold;
	text-decoration: none;
}

/* текущая страница */
.links span {
	background: #fff;
	color: #000;
	border: 1px solid #333;
}

/* подсветка при наведении мышкой */
.links a:hover {
	background: #0a5;
	color: #fff;
	border: 1px solid #000;
}

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