Ссылки-номера на соседние страницы
В некоторых случаях на страницах сайтов размещают номера соседних страниц, выполненные в виде ссылок. Например, разбиение больших статей, фотогалереи, форумы и т. д.
Обычно в HTML-коде пишут:
<a href="#">Назад</a>
<a href="#">1</a>
<a href="#">2</a>
3
<a href="#">4</a>
<a href="#">5</a>
<a href="#">Вперед</a>
Браузер отображает это так:
Назад 1 2 3 4 5 ВпередТекущая страница (в данном случае это страница 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;
}
Получается вполне симпатичный результат, пользоваться которым гораздо удобнее.
Комментарии:
Отличное решение.