Каталог статей
| Главная » Статьи » Уроки » Российская школа CSS |
Переход между страницами
Автор: tester-disru | Дата: 08.02.2012 | Просмотров: 543 |
Здравствуйте уважаемые посетители! В этом уроке, я расскажу вам о том, как сделать красивое меню перехода между страницами при помощи CSS2.
Итак, приступим...
1) Для удобства вынесем CSS в отдельный файл. Для этого откроем блокнот -> Сохранить как -> style.css.
2) Вставьте в этот файл следующий код (подробнее о нем читайте в конце урока):
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; - задание "полужирного" шрифта.
Итак, приступим...
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> |
Пояснения к коду:
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; - задание "полужирного" шрифта.
|
| |
