HTML. Создаем меню

Пример тегов HTML и стилей CSS для создания простого меню. Создан тег <div id="menu"> </div> с шириной width: 100%; в котором находятся элементы меню. За отступы его внутренних элементов отвечает значения padding, за фон - background. Теги <ul> </ul> содержат в себе списки <li> </li>. По умолчанию строка списка начинается с ромбика, точки и некоторых других символов по выбору, чтоб их убрать применяем list-style: none; для обведения списка в рамки записываем значения в border , и border-radius для округления углов. Параметр width: auto; применяет автоматическую ширину для содержимого списка ( в нашем случае это ссылки-меню). Также по умолчанию список вертикальный, со строками сверху-вниз, чтоб выводить его горизонтально применяется команда float: left. Margin-left увеличивает зазор между горизонтальными элементами списка. Background: голубой фон для элементов. Управление видом самих ссылок, как и с другими элементам: #menu + тег "а" обозначающий ссылку. По умолчанию ссылка подчеркнута, чтоб это отменить применяется команда text- decoration: none; Тегом color выбираем цвет названия ссылки.

< html >

< head >

< link rel='stylesheet' type="text/css" href="layout.css"> <!--Адрес файла с описанием стилей-->

</head>

< div id="menu"> <!--Выделение фрагмента страницы с именем menu-->

<ul>
<li> <a href="www.ivarious.com">Главная</a> </li>

<li> <a href="www.ivarious.com">Продукция</a> </li>

<li> <a href="www.ivarious.com">Контакт</a> </li>
</ul>

</div> <!-- Конец фрагмента страницы с именем menu-->

</html>

Документ layout.css с описанием стиля.

#menu{
width:100%;
height: 60px;
padding: 3px;
background: gray;
}


#menu li {
padding: 5px;
list-style: none;
border: 2px solid gray;
border-radius: 5px;
float: left;
margin-left: 175px;
background: lightblue;
}


#menu a {
text-decoration: none;
color: aliceblue;
}