Уроки Flexbox Практика — Адаптивная верстка сайта. Макет.

Автор Nikita Stoianov
Уроки Flexbox Практика — Адаптивная верстка сайта. Макет.

Всем привет.

Друзья вы на канале Web Developer Blog. Не забывайте подписаться на канал и поставить лайк этому видео сегодня мы продолжаем уроки практике Flexbox — это второй урок по счёту можете найти также на канале ну или в плейлисте где вам будет удобнее на канале он. Также недалеко в этом видео я вам предлагаю построить со мной.

Вот такую структуру сайта картинка будет на экране мы сделаем эту структуру также адаптивной всё — это мы построим с помощью Flexbox не будем медлить и пойдём писать код начнём мы с нашего HTML.

Также вы создаёте тоже html-файл. Яндекс и style.css и не забудьте style.css подключить справа внизу я поставлю картинку с нашим макетам по которым. Северсталь и так. Сначала мы с нашего HTML создаем heyder heyder с классом header утреннего нас будет такая структура у нас будет ссылка с классом Logo не ем и пропишем также Logo логотип. Доля у нас будет в данном же блоке навигация на. ВСК лосанов изнутри класса на мы создаем ссылку с классом nav-item и умножим на 3 чтобы создать три элемента. Давайте поставим решётку в ссылке и пойдём дальше кадром. Мы закончили теперь переходим к майну names класса Main далее создадим Class define Class at line и класс Grid для нашего класса Grid мы создадим Grid Python для которого у нас будет класс Grid IMG и также класс сквер также параграф также H1 и также параграф вот такой вот структуру. Мы создали H1 у нас здесь будет тайтл и в норме. В параграфе мы запишем хлором и слов так 10. Ну начнем с такого и так и Grid item мы копируем и вставляем в 4 раза вот в принципе так после этого мы после закрытого классом и мы вводим футер с классом также футер и здесь ведём, что — это Footer просто для того чтобы было понимание, что — это вот, что у нас там данном этапе получилось вот такие вот не значные такая невзрачная непонятная структура хорошо. И теперь я предлагаю вам перейти к файлу style.css и начать стилизация наших нашей этой структуры которые у нас невзрачная и так начала бы с мячом состязаться мы задаем background у нас будет белым далее мы поставим минимальную высоту она у нас будет 100% далее сразу Display Flex. Ну и также flex-direction column следующая я предлагаю вам стилизовать Body здесь. Мы обнули марджины также 1ge onu поставим 0,15 пикселей далее конечно же Display Flex и далее flex-direction column и значение Flex нас бу авто хорошо свадебный также закончили слезаю нашу ссылку сделаем ей. Цвет белый, а также сделаем. Ей также decoration underline. Удали нашу ссылку с хаммером для красоты и text-decoration моего уберём. Давайте лучше дальше IMG Border нам не нужен поэтому моего уберём доля смж мы всё закончили H1 мы уберем ему margin-top и перейдем к стерилизации хедера. Начнем с того, что мы поставим стопроцентно ширину далее мы поставим максимальную ширину 960 пикселей дальше 400 минимальную ширину от 460 пикселей. Не давайте 430 пикселей так наверное правильнее хорошо дальше margin 0 Auto и 30 пикселей далее кадингир оставим они у нас будут 30 пикселей 0 и 10 пикселей после этого конечно же мы Display Flex IE Flex рэп назначение будет рэп если кто не помнит flex-wrap задаёт многострочное расстановку блоков. По главной оси наличие align-items мы поставим в конец Flex and long-term — это выравнивание элементов вдоль поперёк доля конечно же justify-content мы ставим его Space between in Space Around A Space between justify-content. Кто не помнит — это выравнивание элементов вдоль оси. Ну и последнее, что мы поставим — это box-sizing — это будет у нас border-box принципе всё с кедром мы завершили наша ссылка даже пропало. она у нас белая ничего хорошо дальше мы перейдём к стерилизации блоков и она у нас появится далее я вам предлагаю стилизовать со мной дела текст много по приборам связаться налога логотип мы поставим background чёрный мы поставим шириной 200 пикселей — это сделаем немножко побольше строк и ширину 200 пикселей далее высоту 80 пикселей мы сделаем 0 доли margin у нас будет 010 пикселей 10 пикселей и также 0 следующее такое Display Flex для того чтобы была возможность работать с флексами и нас будет, но он кто не помнит, что такое Flex — это сокращённая запись в 3 свойств flex-grow flex-shrink flex-basis по умолчанию они 01 и авто. И последнее, что нам осталось — это свойство align Items и мы их остановим, что давайте посмотрим наши изменения и вот получилось у кого-то на слога хорошо дальше следующая к чему. Мы перейдём — это классно навигация здесь мы сделаем. Марвин минус 5 пикселей 10 пикселей и минус 15 пикселей следующая с навигацией — это конечно же Display Flex и далее ничего не flexura снял я его вам или нет, но напомни, что мы зададим многострочное расстановка блоков. По главной оси и значение у нас будет хорошо. Давайте сохраним и посмотрим результат результата нас не будет потому, что мы пока, что не установили данные блоки и как бы у нас их ещё нету. А у нас — это ссылки которые будут в. Наф этими мыслями чуть позже хорошо. Вот как раз моего. И начнём стилизовать nav-item background мы зададим нему чёрный и вот сейчас у нас всё нет ещё не появится хорошо мы зададим шириной 130 пикселей в высоту 5050. Пикси далее. Франсис нас будет один и пять тема далее ответ мы зададим белый. После этого так, что не печки везде теперь мерещится так далее в тексте Creation у нас будет. Он после этого текста line нас будет центр. Дай Battle Lamborghini они нас будут 5 пикселей 00 и 15 пикселей хорошо следующее — это конечно же Display Flex для того чтобы использовать Flexbox. А ну и justify-content для выравнивания элементов вдоль глава.

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

Читайте также