15 Мар
2019
0Комментарии2019
Создание адаптивной шапки сайта
Сегодня ми с вами создадим адаптивную шапку для сайта в 4 колонки. По данному примеру, вы сможете создавать адаптивную шапку в любое количество колонок.
Итак, приступим:
- Напишем код для нашей шапки по такой структуре:123456<div class="row"><div class="my_column">Ваш код первого блока</div><div class="my_column">Ваш код...</div><div class="my_column">Ваш код...</div><div class="my_column">Ваш код...</div></div>
2. Зададим стили для наших классов:123456789101112131415.my_column {float: left;width: 25%;}.row:after {content: "";display: table;clear: both;}/* Адаптивный макет - когда ширина экрана составляет менее 600 пикселей, 4 столбца располагаются друг под другом, когда более 600 в одну линию. */@media screen and (max-width: 600px) {.my_column {width: 100%;}}
Вот и все! Получается такая шапка:
Соответственно если мы хотим создать шапку на 3 колонки в стилях пишем:
1234.my_column {float: left;width: 33.33%;}То есть берем 100% и делим на нужное нам количество колонок.

Нет комментариев