Шпаргалки для начинающего верстальщика HTML/CSS

– 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 (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»> Brands </a>

</li>

<li class=«navigation-icon»>

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

</li>

</ul>

</nav>

</div>

<div class=«col-2»>

<button class=«button»>

<img class=«button-icon» src=«img/Фото» alt=«icon Card»>

<span class=«button-text»> Cart </span>

</button>

</div>

</div>

</header>

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

container – это ключевой строительный блок Bootstrap. Его применяют для содержания, заполнения, центрирования содержимого внутри него.

<div class=«row»> класс «row"является элементом библиотеки Bootstrap. Ее сетка состоит из строк и колонок, что дает возможность позиционировать элементы на странице как это необходимо по макету. Сам класс означает ряд, который занимает всю ширину элемента, внутри которого он находится, выравнивание по горизонтали реализуется через колонки col.