Страница 1 из 11
Форум » Web дизайн » HTML и CSS » Шапка сайта в стиле Web 2.0 - HTML и CSS (продолжение)
Шапка сайта в стиле Web 2.0 - HTML и CSS
Reddy Дата: Пятница, 17.09.2010, 23:31 | Сообщение # 1
Reddy
Новичок
Сообщений: 129
Репутация: 14
Страна: Латвия
Статус: Offline
Продолжение данного урока

Подразумевает наличие у Вас изображений, необходимых для создания этого меню (header.jpg, back.jpg и hover.jpg). По умолчанию картинки хранятся в той же директории, что и файлы с HTML и CSS.

01. По старой и доброй традиции создадим файлы index.html и style.css - для этого откроем блокнот в Windows, и впишем туда следующие строчки:

для index.html :

Code
<html>
<head>
<title>Меню сайта</title>
<link  href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div align="center"><!-- задаём размещение по центру -->
<div id="container">
<img src="header.jpg" alt="" border="0" height="214" width="990"> <!-- шапка сайта -->
<div id="menu">
<ul class="navigation"> <!-- меню сайта -->
<li id="m1"><a href="/" title="Ваш текст описания"></a></li>
<li id="m2"><a href="/" title="Ваш текст описания"></a></li>
<li id="m3"><a href="/" title="Ваш текст описания"></a></li>
<li id="m4"><a href="/" title="Ваш текст описания"></a></li>
</ul>
</div>
</div>     
</div>

</body>
</html>     

Вместо "a href="/"" нужно вставить необходимые ссылки.

Переходим к таблице стилей (CSS). Добавляем в файл style.css следующие строчки:

Code
body {
         background: #000000;
         font-family: Verdana;
         font-size: 11px;
}
#container {
         width: 990px; /* ширина шапки и меню */
}
#menu {
         background: url('back.jpg');  /* фон меню*/
         height: 36px;  /* высота меню */
}
.navigation {
         margin: 0 0 0 255px;  /* последнее значение - отступ меню от левого края */
         padding: 0;
}
.navigation li {
         float: left; /* выравнивает элемент по левому краю, а все остальные элементы обтекают справа. Необходимо для создания горизонтального меню */
         list-style-type: none; /* убираем маркеры для списка.*/
}
.navigation li a {
         display: block; /* отображает данный элемент как блок*/
         height: 36px;  /* высота блока */
         width: 120px;  /* ширина блока */
}
#m1 a:hover {
         background: url('hover.jpg'); /* цвет фона активного меню */
}
#m2 a:hover {
         background: url('hover.jpg') -120px 0px; /* цвет фона активного меню. -120 - количество пикселей, на которые будет смещена картинка hover.jpg - необходимо для вывода нужного фрагмента над соответствующим пунктом меню. Рассчитывается по ширине navigation li a (в данном случае width=120 пикселей, для следующего пункта -240, и т.д.) */
}
#m3 a:hover {
         background: url('hover.jpg') -240px 0px;
}
#m4 a:hover {
         background: url('hover.jpg') -360px 0px;
}

В результате получаем работоспособное и простое меню :)

© otherside.ws

спец по кнопачкам
 
Форум » Web дизайн » HTML и CSS » Шапка сайта в стиле Web 2.0 - HTML и CSS (продолжение)
Страница 1 из 11
Поиск:
Rambler's Top100 Рейтинг@Mail.ru Яндекс.Метрика
Полное или частичное копирование материалов только с указанием гиперссылки на www.otherside.ws

© 2010-2017 Other Side | Хостинг от uCoz