LITMIR.BIZ

Скачать книгу

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

      justify-cоntent: space-between; – данное свойство равномерно распределяет элементы по всей строке. Первый и последний элемент прижимаются к соответствующим краям нашего контейнера. В целом про свойство justify-content смотрите далее.

      display: flex; – делает все дочерние элементы резиновыми – flex, а не блочными, как было изначально. Если родительский блок содержит, например, графические элементы, они становятся анонимными flex-элементами.

      Оформим непосредственно меню, ниже указан пример, отмечу, что при работе над проектом данные вы должны смотреть в своем макете (боковая панель слева).

      Кратко опишу теги, примененные выше в коде

      text-decoration: none; – убирает автоматическое подчеркивание в созданном нами списке

      font-size: – определяет размер шрифта элемента.

      line-height: – высота строки.

      color: – определяет цвет текста.

      Причем существует несколько цветовых моделей, через которые можно указать значение цвета.

      Так зеленый цвет можно вывести в свойстве color как:

      – green

      – #41AB0D

      – rgb (255,0,0)

      – rgba (255,100,0,.5)

      – hsl (0, 20%, 50%)

      – hsla (221, 100%, 50%,.8) и пр.

      Самые популярные это green и #41AB0D.

      Через # записывается шестнадцатеричная система счисления цвета. Выше приведена сокращенная запись hex-цветов.

      Есть специализированные сайты, с помощью которых можно узнать название того или иного цвета, его прочие цветовые модели. Например, сайт Сolorscheme https://colorscheme.ru/color-names.html

      max-width: – устанавливает максимальную ширину элемента.

      margin: auto; – свойство margin в значении auto применяется для горизонтального центрирования элемента в его контейнере. Данный элемент будет занимать заданную ширину, а остальное пространство будет равномерно распределено между левым и правым полями.

      Оформляем шапку второго типа в HTML с помощью Bootstrap

      Оформляем с помощью библиотеки Bootstrap, как ее подключить расскажу далее.