Шпаргалки для начинающего верстальщика HTML/CSS. Елена Эберт
Чтение книги онлайн.
Читать онлайн книгу Шпаргалки для начинающего верстальщика HTML/CSS - Елена Эберт страница 5
Есть специализированные сайты, с помощью которых можно узнать название того или иного цвета, его прочие цветовые модели. Например, сайт С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»> 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.
Конец ознакомительного фрагмента.
Текст предоставлен ООО «ЛитРес».
Прочитайте эту книгу целиком, купив полную легальную версию на ЛитРес.
Безопасно оплатить книгу можно банковской картой Visa, MasterCard, Maestro, со счета мобильного телефона, с платежного терминала, в салоне МТС или Связной, через PayPal, WebMoney, Яндекс.Деньги, QIWI Кошелек, бонусными картами или другим удобным Вам способом.