Войти на сайт
Регистрация
Обратная связьНаш магазинБлог администрации
Российская школа CSS - Справочник CSS, уроки CSS, jQuery
Оптимизатор CSS Конструктор CSS
Российская школа CSS » Уроки CSS » Урок CSS 1. Переход между страницами
Не нравится(-) 138 Нравится(+)
Урок CSS 1. Переход между страницами

Здравствуйте уважаемые посетители! В этом уроке, я расскажу вам о том, как сделать красивое меню перехода между страницами при помощи 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="/">&#8592; Назад</a> <a href="/">1</a> <a href="/">2</a> <a href="/">3</a> <a href="/">Вперёд &#8594;</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; - задание "полужирного" шрифта.

---------------------------------------
Правила копирования материалов урока
Демо
Скачать (zip, 13 Kb)
Дополнительные материалы по уроку


Уважаемый посетитель Российской школы CSS! Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. Спасибо за внимание!



---------------------------------------
---------------------------------------

Похожие публикации

Публикацию посмотрели 33050 раз(а) и написали 22 комментариев.
Подписаться на канал RSS Добавить сайт в закладки

«    Май 2017    »
ПнВтСрЧтПтСбВс
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
© 2008-2017 Copyright, Российская школа CSS. CSS-School.RU. Все права защищены.
Designed by GZ Design, OniX © 2010 - 2017
Valid XHTML 1.0 Transitional Правильный CSS!