Оформляем горизонтальное меню

Приступаем к созданию навигации по нашему сайту.

Начнем с горизонтального меню, расположенного в заголовке страницы.

Все этапы можно отследить на картинках (для наглядности, я обвела весь список и каждый из элементов белой рамкой).

В файле index.html

Внутри блока «topNav» перед блоком «desc» добавляем пункты меню в виде маркированного списка.

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

В файле style.css

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

Напомню, что «#topNav» в начале каждого имени указывает, что правила имеют силу для этих html-элементов только внутри блока «topNav».

Выравниваем весь список внутри блока навигации

Теперь займемся элементами списка:

И, наконец, изменим цвет и внешний вид ссылки:

Теперь заголовок сайта должен выглядеть так:

Опубликовал 8th Февраль 2011.
Размещено в Сайт с нуля.
Метки: , , , ,

К записи 2 комментария

Отличный сайт! Нужно убить пару часиков — вам сюда 🙂

Горизонтальное меню можно создать путем стилизации обычного списка. Свойству display для элементов li нужно присвоить значение inline, чтобы пункты списка располагались друг за другом.

Нужна помощь?