Пошаговая инструкция создания сайта на html коде / Верхнее меню сайта

Верхнее меню сайта

Верхнее меню будет располагаться после блока шапки сайта и перед таблицей с двумя колонками.

Элементы списка <ul> и <li>

Меню сделаем с помощью элемента <ul>, который используется для создания неупорядоченного (маркированного) списка, и представляет собой набор пунктов не имеющих порядковой нумерации, а только маркеры.

Каждый пункт этого списка создается с помощью элемента <li>, который будет находиться внутри элемента <ul>:

<ul
<li> Первый пункт меню</li>
<li> Второй пункт меню</li>
</ul>

На экране эта запись, пока что, выглядит вот так:

Теперь, с помощью атрибута <style> и его свойств, будем постепенно придавать нашему меню нужный вид.

Убираем меркеры списка с помощью свойства стиля list-style, которое позволяет задать стиль маркера или убрать его совсем:

list-style: none; <!-- Убираем маркеры списка -->

Прописываем это свойство в открывающем теге элемента <ul>:

<ul style="list-style: none;">

Выстраиваем список меню в горизонтальную линию с помощью свойства стиля float, которое определяет, по какой стороне будет производиться ровнение элемента:

float: left; <!-- Выстраиваем список в горизонтальную линию -->

Это свойство необходимо прописать во всех открывающих тегах элемента <li>:

<li style="float: left;">

На первых порах эти записи будут выглядеть громоздко, но пока так проще для понимания. Позже я расскажу, как их усовершенствовать.

На экране получаем следующую картину:

Зададим цвет фона для нашего меню с помощью уже знакомого свойства стиля background.

Я ставлю свой цвет, вы выбираете свой:

background: #819A32; <!-- Цвет фона меню -->

Это свойство прописываем для <ul>:

<ul style="list-style: none; background: #819A32;">

Сделаем эту узкую полоску меню немного шире, а лучше сказать, выше. Для этого используем так же знакомое свойство стиля height. Высота моего меню 45px:

height: 45px; <!-- Высота меню -->

Это свойство тоже прописываем для <ul>:

<ul style="list-style: none; background: #819A32; height: 45px;">

Убираем лишние отступы вокруг блока меню с помощью уже известного нам свойства стиля внешних отступов margin:

margin: 0; <!-- Убираем внешние отступы -->

Свойство прописываем для <ul> и ставим его первым в списке:

<ul style="margin: 0; list-style: none; background: #819A32; height: 45px;">

Ровняем список меню по вертикали, располагая его по середине поля с помощью свойства стиля line-height, которое отвечает за межстрочный интервал:

line-height: ...px; <!-- Ровняем список по вертикали -->

Для этого задем свойству line-height величину, равную высоте поля меню, в нашем случае это 45px.

Свойство прописываем для <ul>:

<ul style="margin: 0; list-style: none; background: #819A32; height: 45px; line-height: 45px;">

Отодвинем список к началу строки, к левому краю с помощью свойства стиля, задающего внутренние отступы padding:

padding: 0; <!-- Отодвигаем список к началу строки -->

Свойство прописываем для <ul> и ставим его вторым в списке:

<ul style="margin: 0; padding: 0; list-style: none; background: #819A32; height: 45px; line-height: 45px;">

А теперь зададим отступы слева и справа для самого текста пунктов меню, с помощью того же свойства стиля, задающего внутренние отступы padding, только применим его к элементу пунктов списка <li>:

padding: 0 20px 0 20px; <!-- Отступы справа и слева текста -->

Свойство прописываем во всех открывающих тегах элемента <li>:

<li style="float: left; padding: 0 20px 0 20px;">

Изменим шрифт текста с помощью свойства стиля font-family:

font-family: ...; <!-- Шрифт текста -->

У меня стоит шрифт Arial.

Свойство прописываем во всех открывающих тегах элемента <li>:

<li style="float: left; padding: 0 20px 0 20px; font-family: Arial;">

И заключительным штрихом на этом этапе, будет изменение цвета текста с помощью свойства стиля color:

color: #код цвета/название; <!-- Цвет текста -->

У меня текст меню белый #ffffff:

Свойство прописываем во всех открывающих тегах элемента <li>:

<li style="float: left; padding: 0 20px 0 20px; font-family: Arial; color: #ffffff;">

Верхнее меню почти готово, но оно пока не работает как должно. А чтобы меню заработало, надо научиться делать переходы с одной страницы на другую, прописав их для каждого пункта меню.

Чтобы нам было куда перейти, создадим вторую страницу сайта.


Файл index.html:

Следующий шаг - Вторая страница сайта