LITMIR.BIZ

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

по середине – margin: auto;

      .container {

      max-width: 1140px;

      margin: auto;

      }

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

      .header {

      display: flex; /*выравнивание по центру по вертикали*/

      align-items: center; /*раскидываем по сторонам*/

      justify-content: space-between;

      }

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

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

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

      .menu-link {

      font-size: 16px;

      line-height: 24px;

      color: #2E266F;

      text-decoration: none;

      margin-right: 45px;

      }

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

      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, как ее подключить расскажу далее.

      <header class=«container header»>

      <div class=«row»>

      <div class=«col-2»>

      <a href="/" class=«logo-link»>

      <img width=«128» src=«img/Фото логотипа» alt=«logo» class=«logo-image»>

      </div>

      </div>

      <div class=«col-6»>

      <nav>

      <ul class=«navigation»>

      <li class=«navigation-icon»>

      <a href=«#» class=«navigation-link»> Womens </a>

      </li>

      <li class=«navigation-icon»>

      <a href=«#» class=«navigation-link»> Mens </a>

      </li>

      <li class=«navigation-icon»>

      <a href=«#» class=«navigation-link»> Goods </a>

      </li>

      <li class=«navigation-icon»>

      <a href=«#» class=«navigation-link»>

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