HTML5/CSS3: Простое меню сайта (Урок 4)

Создание меню

Меню разместим под шапкой. Под закрывающим тегом <header> добавим <div> с классом «clear»:

<div class="clear"></div>

Для правильного отображения добавим свойство float: left к тегу <header>:

<header style="float: left;"></header>

Далее, создадим блок меню:

<div id="menu"> </div>

Используем <div> с id="menu" вместо тега <menu> для лучшей совместимости. Добавим горизонтальную линию:

<hr>

И ссылки в меню:

<a href="#">Ссылка 1</a>
<a href="#">Ссылка 2</a>
<a href="#">Ссылка 3</a>

Стилизация меню и ссылок

Добавим стили CSS. Разместим их после стилей для <header>:

#menu {
  color: /*укажите цвет*/;
  font-family: Comic Sans MS, sans-serif;
  font-size: 1.7em;
}

hr {
  display: block;
  width: 100%;
  height: 1px;
  border: 0;
  border-top: 1px solid /*укажите цвет*/;
  margin: 0;
}

#menu a {
  padding: 5px;
  border-radius: 5px;
  color: /*укажите цвет*/;
}

#menu a:hover {
  background-color: /*укажите цвет*/;
  padding: 10px;
}

Добавим ссылки с контентом:

<a href="about.html">О нас</a>
<a href="#">Обратная связь</a>
<a href="#">Вход</a>
<a href="#">Регистрация</a>

Экспериментируя с цветами и отступами, можно добиться желаемого эффекта, например, эффекта наведения мышки на ссылку, подобного тому, что используется в Facebook.

Создано простое меню с использованием HTML и CSS. Настройкой стилей можно изменить внешний вид меню и сделать его более привлекательным. Экспериментируйте с цветами, отступами и эффектами наведения для достижения оптимального результата.

Что будем искать? Например,программа