В уроке №5, вы сможете узнать, как при помощи CSS создать довольно простое и красивое вертикальное меню в виде кнопок.
Итак, приступим...
1) Для удобства вынесем CSS в отдельный файл. Для этого откроем блокнот -> Сохранить как -> style.css.
2) Вставьте в этот файл следующий код (подробнее о нем читайте в конце урока):
body {
font: bold 11px Tahoma;
}
#menu ul {
margin:0;
padding:10px 10px 0 50px;
}
#menu li {
display:inline;
margin:0;
padding:0;
}
#menu a {
float:left;
background:url("left.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#menu a span {
float:left;
display:block;
background:url("right.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
#menu a:hover span {
color:#FFF;
background-position:100% -42px;
}
#menu a:hover {
background-position:0% -42px;
}
3) Чтобы увидеть работу стилей, создадим в той же дирректории html файл и, например вставим туда такой код:
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="menu">
<ul>
<li><a href="/"><span>Пункт 1</span></a></li>
<li><a href="/"><span>Пункт 2</span></a></li>
<li><a href="/"><span>Пункт 3</span></a></li>
<li><a href="/"><span>Пункт 4</span></a></li>
<li><a href="/"><span>Пункт 5</span></a></li>
<li><a href="/"><span>Пункт 6</span></a></li>
</ul>
</div>
</body>
</html>
4) Сохраняем и смотрим, что получилось.
Пояснения к коду:
display:inline; - Отключение выделения списков;
float:left; - Установка левой границы;
background-position:0% -42px; - Изменение поля фонового рисунка (Смещение на 42 пикселя вниз).
ДемоПо материалам сайта:
Российская школа CSS
