Theory and Tasks for Students - Spring 2019
Задание C - Page Template

Необходимо сверстать несколькими способами следующий макет страницы:

Пример макета

На странице должны присутствовать:

  • Шапка (header);
  • Горизонтальная навигация;
  • Как минимум два элемента первичной навигации должны содержать выпадающие списки;
  • Боковая вертикальная вторичная навигация (sidebar);
  • Блок контента страницы;
  • Подвал (footer).

Каждый блок навигации должен быть представлен как список ссылок - т.е. комбинация <ul>, <li> и <a>.
Только выпадающие списки должны использовать абсолютное позиционирование.
Для хедера и футера необходимо использовать соответствующие теги <header> и <footer>.
Цвета, выравнивание и размеры элементов можно использовать отличные от примера. При наведении мышью на ссылки навигации это должно быть явно сообщено, например, с помощью изменения цвета текста/фона. Внимательно следите за отступами между элементами и проверяйте отображение страницы при различных размерах окна браузера. Старайтесь не определять явным образом размеры элементов, даже в относительных величинах.

Результатом выполнения задания должно быть три пары html и css файлов, представляющие макет следующими способами:

  • Использование стиля float для выстраивания блочных элементов в строку;
  • Использование стиля display: inline-block;
  • Использование стиля display: flex и дополнительных стилей FlexBox.