Страница 1 из 1

Переход между страницами

СообщениеДобавлено: 26 июл 2008, 05:29
Alik
Помагите это доделать с мысле где красное
я хочу где красное сылики на страницы или как ешо их называть сами добавлялись а не я их добовлял

<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>

эсли это комуто нужно вот


как сделать красивое меню перехода между страницами при помощи 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; - задание "полужирного" шрифта.