Логин: Пароль: Забыл пароль | Регистрация

Каталог статей

Главная » Статьи » Уроки » Российская школа CSS

Создание вертикального меню

Автор: tester-disru | Дата: 08.02.2012 | Просмотров: 629 |

В уроке №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 пикселя вниз).




Теги:Теги отсутствуют 0

Имя *:
Email:


Разделы сайта

Популярные теги