В этом уроке, пойдет речь о том, как сделать красивое меню перехода между страницами при помощи CSS2.
Итак, приступим...
1) Для удобства вынесем CSS в отдельный файл. Для этого откроем блокнот -> Сохранить как -> style.css.
2) Вставьте в этот файл следующий код (подробнее о нем читайте в конце урока):
.navigation {
font-family: Tahoma;
}
.navigation a:link,
.navigation a:visited,
.navigation a:hover,
.navigation a:active {
text-decoration:none;
color: #ffe98f;
background-color: #f3f3f3;
border:1px solid #333;
background-image: url(nav.gif);
padding:3px 6px;
font-size:11px;
font-weight:bold;
}
.navigation a:hover {
background-color: #003060;
background-image: url(fon.gif);
color:#fff;
border-color:#003366;
}
.navigation span {
text-decoration:none;
background:#fff;
padding:3px 6px;
border:1px solid #333;
color:#a6a6a6;
font-size:11px;
}
Для оформления навигации, нам понадобятся 2 небльших фоновых рисунка: nav.gif и fon.gif. Создайте их и сохраните в той же папке.
3) Чтобы увидеть работу стилей, создадим в той же дирректории html файл и, например вставим туда такой код:
<html>
<head>
<link href="style.css" rel="stylesheet" type=text/css>
</head>
<body>
<div class="navigation"><br />
<a href="/">← Назад</a> <a href="/">1</a> <a href="/">2</a> <a href="/">3</a> <a href="/">Вперёд →</a>
</div>
</body>
</html>
4) Сохраняем и смотрим, что получилось.
Пояснения к коду:
font-family: Tahoma; - Задание шрифта для текстов и номеров.
text-decoration:none; - отмена подчёркивания ссылки
color: #ffe98f; - задание цвета ссылки
background-color: #f3f3f3; - задание цвета блока (в случае, если картинка не найдена)
border:1px solid #333; - задание ширины границ и их цвета
background-image: url(nav.gif); - задание фонового изображения
padding:3px 6px; - задание отступов (для формирования блоков)
font-size:11px; - задание размера шрифта
font-weight:bold; - задание "полужирного" шрифта.
Исходник CSS навигации. В архив включены 10 расцветок.
СкачатьПо материалам сайта:
css-school
