Скачать "HTML и CSS: адаптив для Landing Page с нуля за 40 минут"

"videoThumbnail HTML и CSS: адаптив для Landing Page с нуля за 40 минут

0:16

Адаптивность сайта

0:31

Принцип адаптива

1:05

Группы экранов

1:59

В чем подвох?

2:12

Плотность пикселей у Iphone X

43:28

Промежутки адаптива

C++ Разработчик учит Python

C++ Разработчик учит Python

Канал: Winderton

Основы Программирования - #5 - Арифметические и логические выражения

Основы Программирования - #5 - Арифметические и логические выражения

Канал: loftblog

Формируем заголовки H1-H6 на страницах сайта

Формируем заголовки H1-H6 на страницах сайта

Канал: loftblog

Полный курс Laravel 10 Компоненты + Вёрстка в Blade (Blade Components)

Полный курс Laravel 10 Компоненты + Вёрстка в Blade (Blade Components)

Канал: One Code

ОТКРЫТЫЙ УРОК: создаём TO DO только с помощью вёрстки [Хекслет]

ОТКРЫТЫЙ УРОК: создаём TO DO только с помощью вёрстки [Хекслет]

Канал: Хекслет

Основы SQL - #4 – Триггеры

Основы SQL - #4 – Триггеры

Канал: loftblog

PHP PDO - Введение

PHP PDO - Введение

Канал: loftblog

Создание сайта на Битрикс - #21 - Как пользоваться GetFileArray

Создание сайта на Битрикс - #21 - Как пользоваться GetFileArray

Канал: loftblog

Классификация программиста. Субъективно.

Классификация программиста. Субъективно.

Канал: Winderton

html

css

itlogia

программист

программирование

разработка

веб

адаптив

itlogia.ru

00:00:02

html и css в которую мы с вами

00:00:04

разберемся с такой важной вещью при

00:00:06

версткой страниц как адаптивная верстка

00:00:09

ссылку на первую часть где мы

00:00:10

разбираемся с основами html css вы

00:00:13

можете найти в описании под этим видео

00:00:15

все мы пользуемся мобильными телефонами

00:00:17

и планшетами и уже не представляем свою

00:00:20

жизнь без них все сайты выглядят на

00:00:22

таких устройствах отлично так как их

00:00:24

верстка адаптирована под всевозможные

00:00:26

разрешения экрана это называется

00:00:28

адаптивностью сайтов принцип адаптивно

00:00:31

прост блоки с информацией на сайте

00:00:33

изменяют свои размеры и расположение в

00:00:35

зависимости от ширины экрана например

00:00:38

как вы видите сейчас на экране на

00:00:40

основной версии сайта есть три синих

00:00:42

блока в одну строку на планшете они уже

00:00:45

не помещаются в одну строку ведь ширина

00:00:47

экрана меньше

00:00:48

поэтому 2 остаются на своей строке а

00:00:50

третий переносится на новую строку она

00:00:52

мобильной версии и вовсе каждый блок

00:00:54

размещается в своей строке таким образом

00:00:57

вся информация остается на месте но

00:00:59

расположение блоков изменилось все это

00:01:02

достигается с помощью задания стилей css

00:01:04

для определенных размеров экранов мы

00:01:07

можем выделить несколько основных групп

00:01:09

экранов разных устройств конечно же это

00:01:12

будет примерно и деление но она поможет

00:01:14

нам понять как на определенном типе

00:01:16

устройств будет выглядеть наш сайт

00:01:19

первая группа это компьютеры сейчас эта

00:01:21

ширина экрана примерно от 1280 пикселей

00:01:25

до 1920 и плюс у некоторых пользователей

00:01:28

ширина экрана может быть и больше чем

00:01:30

1920 например 2560 но таких

00:01:34

пользователей сейчас очень мало так как

00:01:36

пользоваться таким разрешением

00:01:37

совершенно неудобно большинство

00:01:39

пользователей компьютеров ширина экрана

00:01:41

составляет 1366

00:01:43

или 1920 пикселей на планшетах

00:01:47

используется ширина примерно от 500 70 и

00:01:49

до 1280 пикселей на мобильных

00:01:53

устройствах от 320 до 580 пикселей

00:01:57

многие сейчас подумали как так в чем

00:01:59

подвох ведь разрешение моего mac book

00:02:01

pro имеет ширину 2880 пикселей а у

00:02:05

телефона 1125 пикселей и на самом деле

00:02:08

вы будете правы дело в том что в

00:02:11

современных экранах особен

00:02:12

мобильных устройствах достаточно большое

00:02:15

разрешение экрана

00:02:16

но высокая плотность пикселей и видимая

00:02:18

область сайта будет равна другой ширине

00:02:21

давайте рассмотрим пример с айфоном x

00:02:23

разрешение экрана этого телефона в

00:02:25

пикселях составляет аж 1125 пикселей по

00:02:28

ширине это значит что экран ширину

00:02:31

показывает 1125 пикселей но для

00:02:34

отображения сайта в браузеры используют

00:02:35

так называемую видимую область в которой

00:02:38

этот экран телефона будет считаться как

00:02:41

икра шириной 375 пикселей фактически это

00:02:44

триста семьдесят пять точек в ширину и в

00:02:47

каждой такой точки на самом деле

00:02:48

находится по несколько пикселей

00:02:50

ведь если мы откроем сайт на ширине 1140

00:02:53

пикселей на телефоне им будет просто

00:02:56

неудобно пользоваться он же будет

00:02:58

выглядеть как версия для планшета или же

00:03:00

компьютера то же самое и на macbook pro

00:03:03

retina дисплей на таком компьютере имеет

00:03:05

в ширину h3000 360 пикселей

00:03:08

ни один сайт не будет нормально

00:03:10

отображаться на этой ширине

00:03:11

да и в целом пользоваться компьютером

00:03:13

будет неудобно поэтому операционная

00:03:15

система использует тоже подход с видимой

00:03:18

областью когда на одной точке

00:03:20

размещается несколько пикселей и в итоге

00:03:22

мы работаем на ширине экрана 1680

00:03:25

пикселей вместо 3360 просто на таком

00:03:29

экране будут более четкие объекты и

00:03:32

изображения так как большая плотность

00:03:34

пикселей

00:03:35

возможно сейчас этот момент для вас

00:03:37

выглядит немного запутанным но на самом

00:03:39

деле можно и вовсе не вникать в нюансы с

00:03:41

пикселями

00:03:42

и точками при создании адаптивно главное

00:03:44

это покрыть все необходимые размеры по

00:03:47

ширине это размер от 320 пикселей и до

00:03:50

бесконечности но делая упор на размерах

00:03:53

ширины до 1920 пикселей

00:03:56

поэтому давайте сейчас перейдем к

00:03:58

практической части и сделаем адаптивную

00:04:00

версию сайта для нашего лендинга

00:04:02

стоматологии которые мы создали в первой

00:04:04

части этого урока настоятельно

00:04:06

рекомендую повторять все мои действия

00:04:08

иначе смысл от просмотра этого видео

00:04:10

потеряется очень важный момент в

00:04:12

процессе задания стилей адаптивная буду

00:04:15

делать стиле без пояснения их

00:04:17

особенностей буду лишь вкратце объяснять

00:04:19

суть стиля и для чего мы это делаем

00:04:21

ведь если я буду рассказывать вам каждый

00:04:23

стиль его варианты принцип работы итак

00:04:26

али то этот урок явно растянется на

00:04:28

несколько часов поэтому я буду просто

00:04:30

применять стиль и говорить для чего мы

00:04:33

его делаем вы в любой момент можете

00:04:35

поставить видео на паузу и гуглить

00:04:37

свойства стиля почитать и разобраться

00:04:39

как она работает это несложно давайте

00:04:42

откроем наш лэндинг для того чтобы нам

00:04:45

сделать адаптив сайта понадобится

00:04:47

специальный режим просмотра сайта на

00:04:49

любом размере экрана нам нужно открыть

00:04:51

панель инструментов разработчика

00:04:53

нажатием клавиши f12 либо команд alt и

00:04:56

на макбуках в этой панели режим

00:04:59

адаптивно находится слева и представляет

00:05:01

из себя маленькую иконку с планшетом и

00:05:03

мобильным телефонам давайте нажмем на

00:05:05

нее теперь у нас включен режим адаптивно

00:05:08

и мы можем посмотреть как будет

00:05:09

выглядеть наш сайт на совершенно любой

00:05:11

ширине для этого выпадающем списке

00:05:13

выберем пункт response of и теперь мы

00:05:16

можем редактировать наш у ширину так как

00:05:19

нам угодно согласитесь наш сайт сейчас

00:05:21

выглядит на адаптивен не очень хорошо

00:05:23

поэтому нам надо применить стиль и для

00:05:26

разных размеров и убрать все проблемы

00:05:28

верстки этого лендинга первое что

00:05:30

обязательно нужно сделать так это

00:05:32

добавить специальный метатег который

00:05:34

позволит на мобильном устройстве

00:05:36

использовать не реальное разрешение

00:05:38

экрана пользователя а нужную видимую

00:05:40

область о которой я вам рассказывал в

00:05:42

начале этого видео урока

00:05:44

поэтому всех цвет мы добавляем этот

00:05:46

нужный так это у нас так мета

00:05:49

поэтому пишем его и здесь нужно добавить

00:05:51

всего лишь два атрибута это ней viewport

00:05:54

и контент вот с таким вот содержимым в

00:05:58

целом можно не вникать в его принцип

00:06:00

работы и не разбираться в этих атрибутах

00:06:03

просто обязательно применяйте его во

00:06:05

всех своих проектах чтобы она мобильной

00:06:07

версии была возможность сделать

00:06:08

нормальный адаптив хорошо теперь можно

00:06:11

начинать писать стиле адаптив я

00:06:13

рекомендую делать с больших размеров к

00:06:15

меньше

00:06:16

это делается потому что задав правильные

00:06:18

стилей для больших экранов мы можем

00:06:20

добиться того что

00:06:21

и на мобильные версии эти блоки будут

00:06:23

выглядеть нормально поэтому первая

00:06:26

ширина которую мы рассмотрим это 2560

00:06:29

пикселей здесь давайте выставим 2560 и

00:06:32

нажмём enter давайте посмотрим как

00:06:34

выглядит наш сайт панель можно немножко

00:06:36

сузить

00:06:38

в целом все выглядит нормально кроме

00:06:40

двух блоков это первый блок и блок с

00:06:44

формой в том что остальные блоки

00:06:46

выглядит нормально

00:06:48

нам конечно же помогают контейнеры как я

00:06:50

уже говорил в прошлом уроке контейнер

00:06:53

это такой блок с ограниченной шириной в

00:06:55

которой находится весь контент страницы

00:06:57

этот контейнер находится по центру

00:07:00

экрана и позволяет контенту сайта

00:07:02

выглядеть одинаково на разных размерах

00:07:04

экранов компьютера хорошо давайте

00:07:07

включим обратно 2560 здесь это можно

00:07:10

сделать нажав на такой специальной

00:07:12

панели и теперь давайте изменим стиль

00:07:14

для этой ширины нам для первого блока

00:07:16

нужно изменить фон но нет смысла менять

00:07:19

стиль и для конкретного размера то есть

00:07:22

2560 вместо этого меняют стиль и для

00:07:25

промежутка давайте начнем сужать

00:07:27

страницу и посмотрим на какой ширине эта

00:07:30

проблема пропадает наши дни 1920

00:07:34

пикселей это значит что мы можем сделать

00:07:36

так что если наша ширина будет больше

00:07:38

чем 1920 пикселей то мы будем изменять

00:07:41

позиционирование в фона для блока

00:07:43

давайте перейдем в код теперь создадим

00:07:45

для адаптивно отдельный файл css

00:07:48

нажимаем на папку проекта здесь выбираем

00:07:50

new & styles и пишем здесь название

00:07:53

файла например адаптив хорошо теперь

00:07:56

надо подключить его на странице заходим

00:07:59

наш файл индекса html подключать его

00:08:01

обязательно надо после основного файла

00:08:04

стилей ведь нам нужно будет чтобы новые

00:08:06

стили для адаптивного смогли перекрывать

00:08:09

стиле основной версии

00:08:10

и были более приоритетные поэтому после

00:08:13

подключения файлом нсс мы подключаем наш

00:08:16

файл адаптив так как он должен быть

00:08:18

более приоритетной хорошо теперь

00:08:20

переходим в наш файл и пишем специальную

00:08:23

конструкцию для стилей адаптивно пишем

00:08:25

символ собачки и слова медиа далее нам

00:08:29

нужно написать конструкцию он ли screen

00:08:31

это будет обозначать применение этих

00:08:34

стилей только для экранов компьютера

00:08:36

телефона планшета и так далее потом мы

00:08:39

пишем and и добавляем второе условие это

00:08:42

условие будет в скобках

00:08:43

тут мы пишем условия которое нужно

00:08:45

применять для своих стилей нашем случае

00:08:48

это минимальная ширина 1921 пиксель

00:08:53

ведь наши вине 1920 у нас все выглядит

00:08:57

хорошо начиная с 1920 и одного пикселя начинает

00:09:00

повторяться фонд поэтому мы задаем этот

00:09:02

блок стилей для всех экранов которые

00:09:05

пошли не будут больше 1920 и одного

00:09:07

пикселя внутри этого блока мы можем

00:09:10

задать стиль и для наших блоков с фоном

00:09:12

давайте посмотрим что это за блоки

00:09:14

перейдем на страницу и выберем

00:09:16

инструмент выбора элементов наводим на

00:09:18

наш блог

00:09:20

поднимем немножко панель это блок main с

00:09:23

нашим фоном поэтому давайте найдем для

00:09:25

него стиль в основном файле хорошо

00:09:28

давайте скопируем этот стиль и вставим

00:09:31

теперь в наш новый блог адаптивно здесь

00:09:33

нам нужно будет изменить только

00:09:35

backgrounds

00:09:36

поэтому остальные свойства мы удаляем

00:09:38

меняем ему backgrounds на корт это

00:09:41

свойства стиля позволит нам заполнить

00:09:44

всю область блока картинкой без

00:09:46

повторений давайте посмотрим что

00:09:48

получается на странице

00:09:49

отлично делаем тоже самое и для второго

00:09:52

блока это у нас блок с формой записи давайте

00:09:54

посмотрим какое у него иди иди и резерв

00:09:57

поэтому мы можем просто скопировать этот

00:10:00

айди и здесь через запятую перечислить после

00:10:03

нашего и demain это мы сделали чтобы не

00:10:06

дублировать для него точно такой же блок

00:10:07

стилей а просто через запятую

00:10:09

перечислили два селектора которым

00:10:12

применится один и тот же стиль давайте

00:10:14

обновим страницу отлично теперь наш сайт

00:10:17

хорошо отображается на любой ширине

00:10:19

больше 1920 пикселей

00:10:22

прошло теперь перейдем самый верх

00:10:24

страницы будем уменьшать страницу и

00:10:27

искать проблемные места на всех

00:10:29

компьютерах сайт будет выглядеть отлично

00:10:31

ведь у нас тут применен контейнер

00:10:34

шириной 1170 пикселей давайте глянем как

00:10:37

он будет выглядеть нашей вине например

00:10:40

1200 пикселей

00:10:42

выставляем здесь 1200 нажимаем энтер

00:10:45

хорошо давайте посмотрим в целом как все

00:10:47

здесь выглядит никаких проблем не видно

00:10:51

хорошо давайте теперь уменьшим

00:10:53

еще на 100 пикселей и сейчас скорее

00:10:55

всего уже будут у нас проблемы с

00:10:57

версткой потому что у нас контейнер 1170

00:11:00

пикселей соответственно на 1100 пикселей

00:11:03

наш контейнер уже будет не помещать

00:11:05

нашу страницу так теперь видим что

00:11:08

начинаются проблемы их все надо

00:11:10

исправить но какую точку выбрать теперь

00:11:13

на самом деле можете делать любые

00:11:15

удобные вам промежутке хоть каждые 10

00:11:18

пикселей но лучше всего завязываться на

00:11:20

контрольные точки основных устройств

00:11:22

ближайшая контрольная и важная . она

00:11:25

кстати отображается здесь в панели

00:11:27

это 1024 пикселя это ширина экрана на

00:11:30

планшетах и старых компьютерных

00:11:32

мониторах теперь мы будем задавать не

00:11:34

минимальную ширину как мы это делали а

00:11:36

наоборот ограничивать максимальный так

00:11:39

как стиле которой мы применим для ширины

00:11:41

1024 пикселей могут быть полезны и на

00:11:44

более меньше ширине так как наша

00:11:47

страница отлично выглядит на ширине 1200

00:11:50

пикселей поэтому мы начнем наши стиле с

00:11:53

задания промежутком максимума 1199 и

00:11:56

пикселей поэтому переходим наш файл

00:11:59

здесь добавляем точно такую же строку

00:12:02

можно и и скопировать добавляем

00:12:04

закрывающую скобку и здесь изменяем

00:12:06

минимальную на максимальную ширину и

00:12:08

ставим 1199 пикселей в целом наш

00:12:12

промежуток который мы сейчас хотим

00:12:14

покрыть от 1024 пикселей

00:12:17

до 1199 пиксель но созданные нами стиле

00:12:21

для этого промежутка будут полезны и для

00:12:23

меньшей ширины поэтому ограничения от

00:12:26

1024 пикселей мы ставить не будем

00:12:29

поставим только до 1199 пикселей это

00:12:33

будет значить что все стили из этого

00:12:35

блока применятся к любой ширине которая

00:12:38

будет меньше чем 1199 пикселей в том

00:12:41

числе даже для самого маленького экрана

00:12:43

который мы будем сегодня делать 320

00:12:45

пикселей

00:12:46

но так как мы рассматриваем промежуток

00:12:47

от 1024 пикселей поэтому давайте в

00:12:51

браузере поставим именно 1024 пикселя и

00:12:53

будем исправлять нашу страницу под эту

00:12:56

ширину как минимальную ширину в нашем

00:12:58

промежутке который мы сейчас

00:13:00

рассматриваем

00:13:01

чуть позже при создании нового

00:13:02

промежутка я вам еще раз поясню как это

00:13:05

работает вам точно станет понятен

00:13:07

алгоритм задание адаптивных стилей по

00:13:09

промежутком итак начнем макетов

00:13:12

адаптивно у нас нет поэтому будем делать

00:13:14

на свое усмотрение первый косяк который

00:13:17

мы видим это меню а

00:13:18

уже отображается неправильно в этом

00:13:20

случае нам главное понять из-за чего она

00:13:22

отображается не так как нужно и что мы

00:13:25

можем для этого сделать все дело в том

00:13:27

что между тремя основными блоками в

00:13:29

блоке main хедер

00:13:31

у нас есть отступ и и они фиксированы и

00:13:34

по размерам мы их взяли из photoshop

00:13:36

макет а теперь нам надо их сделать

00:13:38

меньше чтобы наши блоки помещались на

00:13:40

странице мы можем их не уменьшать а

00:13:42

убрать вообще и пойти другим путем

00:13:45

использовать выравнивание флекса с

00:13:47

равными отступами между собой поэтому

00:13:49

сейчас для блока main хедер

00:13:51

мы зададим специальное выравнивание а

00:13:53

для этих блоков main header menu main

00:13:56

хедер фон мы уберем отступ слева

00:13:58

поэтому давайте скопируем здесь вот эти

00:14:01

стили ставим наш новый блог и margin

00:14:04

лифт здесь мы ставим 0 то же самое нам

00:14:07

нужно сделать для второго блока mein

00:14:09

herr фон поэтому копируем и просто через

00:14:12

запятую вставляем его здесь алейх

00:14:14

родительского элемента с 1 main хедер

00:14:17

мы просто выставим justify контент space

00:14:21

between что сделает равные отступы между этими

00:14:24

тремя блоками но и раз наша страница уже

00:14:27

меньше чем 1200 пикселей нам надо

00:14:29

сделать так чтобы контент не прилипал

00:14:31

краям экраны поэтому для нашего

00:14:33

контейнера мы сразу дадим о стук по

00:14:35

сторонам в 20 пикселей это у нас блок

00:14:38

main контейнер поэтому давайте здесь

00:14:40

напишем его пишем здесь padding райт 20

00:14:44

пикселей и padding лифт тоже 20 пикселей

00:14:47

теперь обновляем страницу отлично блок

00:14:50

выглядит хорошо но справа есть белая

00:14:53

полоса она появляется когда какие-либо элементы

00:14:55

уже не влазит в указанную ширину и

00:14:58

растягивают страницу в этом виноват

00:15:00

другой блок если посмотреть страницу

00:15:02

ниже то становится понятно что это в

00:15:04

блоке докторов картинки просто не влазят

00:15:07

нашу ширину блока и растягивают страницу

00:15:10

с этим мы разберем чуть чуть позже но

00:15:12

если мы наведем на наш блог main то мы

00:15:14

увидим что он равен 1024 пикселя то есть

00:15:17

он должен полностью влезать в нашу

00:15:19

ширину

00:15:20

если мы сейчас будем расширять нашу

00:15:22

страницу до 1199 пикселей то увидим что

00:15:26

наш первый блок уже хорошо отображается

00:15:28

на любой ширине

00:15:30

этого промежутка то чего мы и добивались

00:15:33

следующий блок это блок у нас этому

00:15:37

контейнеру давайте также сразу же

00:15:39

зададим отступы слева и справа по 20

00:15:41

пикселей поэтому здесь пишем about

00:15:44

контейнер и добавляем отзыв справа и

00:15:46

слева по 20 пикселей

00:15:48

сверху снизу можно поставить по нулю

00:15:51

обновляем страницу хорошо теперь давайте

00:15:54

разберемся в чем у нас здесь проблема

00:15:56

дело в том что у нас стоит максимальная

00:15:58

ширина для каждого блока в 560 пикселей

00:16:02

что в сумме даст 1120 пикселей и явно не

00:16:05

поместится в наш экран поэтому нам надо

00:16:07

уменьшить этот размер на примерно 450

00:16:11

пикселей чтобы наши блоки влезли в ширину 1024

00:16:14

которой является минимальная в нашем

00:16:17

промежутке если блоки будут нормально

00:16:19

отображаться на 1024 то явно по месяца и

00:16:22

на 1199 пикселей поэтому переходим в код

00:16:25

ищем название нашего блока это у нас

00:16:28

блоки about a этом нажимаем через control

00:16:31

теперь мы можем скопировать это

00:16:33

определение стиле оставить его здесь

00:16:35

убрать то что нам не нужно то есть

00:16:37

отступ и сверху и максимальную ширину

00:16:39

изменить на 450 пикселей

00:16:42

еще надо сразу сделать чтобы картинки

00:16:45

внутри не были больше чем наши блоки так

00:16:47

как они имеют свойство оставаться своих

00:16:50

размеров без учета родительских

00:16:52

ограничений поэтому давайте зададим

00:16:54

следующий стиль выберем здесь

00:16:56

эбаут контейнер . about ayten и напишем

00:16:59

пробел и m&g что значит картинкой которая

00:17:02

находится внутри about айтем и поставим

00:17:04

им максимальную ширину сто процентов

00:17:06

давайте обновим страницу и посмотрим что

00:17:09

получается если мы сейчас будем

00:17:11

растягивать нашу страницу то увидим что

00:17:13

между блоками расстояния увеличивается и

00:17:16

это смотрится не очень хорошо поэтому мы

00:17:18

сделаем следующее

00:17:19

выровняем блоки по центру и дадим между

00:17:22

ними о стук чтобы они не касались друг

00:17:24

друга

00:17:25

переходим файл css для about контейнер

00:17:28

давайте добавим следующий стиль и это

00:17:30

позиционирование блоков по центру через

00:17:32

justify контент-центр а каждому блоки

00:17:36

информации

00:17:37

about ой там мы дадим отступ с каждой

00:17:39

стороны по 15 пикселей поэтому пишем

00:17:42

margin 15px давайте 1

00:17:44

страницу и посмотрим что получается

00:17:46

сжимаем наш экран теперь все супер

00:17:49

выставляем 1024 хорошо в целом наш блог

00:17:53

выглядит неплохо но мы видим что есть

00:17:55

проблема с картинкой кавычек давайте

00:17:57

посмотрим в чем дело это значит что у

00:18:00

нас сейчас применилась к ней также

00:18:01

максимальная ширина 100 процентов и мы

00:18:04

можем это отменить просто сделать так

00:18:06

чтобы наш стиль максу и сто процентов

00:18:09

применялся для картинок которые

00:18:10

находятся на первом уровне вложенности в

00:18:13

элементах about idem а наша картинка с

00:18:16

кавычками находятся на втором уровне

00:18:18

вложенности поэтому переходим наш файл

00:18:21

спичкой шторм и здесь мы используем

00:18:23

специальный знак который позволит

00:18:25

сделать именно первый уровень

00:18:27

вложенности давайте обновим страницу и

00:18:29

посмотрим работает ли всю супер теперь

00:18:32

этот блок выглядит так как нужно

00:18:34

следующий блок это блок

00:18:36

наши услуги за счет того что мы здесь

00:18:38

применили перенос блоков на новую строку

00:18:40

сейчас они переносятся и в целом все

00:18:43

выглядит почти нормально только давайте

00:18:44

выравняем весь контент по центру в этом

00:18:47

блоке и также сделаем выравнивание

00:18:49

текста по центру в нашем заголовки

00:18:51

давайте посмотрим что за стиле у нас

00:18:53

используется для заголовка это сервисы

00:18:55

сайта

00:18:56

поэтому давайте применим здесь сервисы

00:18:58

сайта текст оnline центр обновим

00:19:01

страницу хорошо теперь нужно выровнять

00:19:04

также блоки в нашем блок сервис ой tires

00:19:07

поэтому давайте скопируем этот селектор

00:19:10

также здесь его вставляем и

00:19:12

justify контент-центр поможет нам

00:19:15

выровнять эти блоки по центру хорошо он выглядит

00:19:18

отлично давайте проверим до 1199

00:19:21

пикселей все супер давайте выставим

00:19:24

тысячи 24 и пойдем к следующему блоку

00:19:26

следующий блок это блок с формой контент

00:19:29

внутри формы занимает явно меньше чем

00:19:32

1000 24 пикселей в ширину поэтому этот

00:19:34

блок выглядит отлично и нам для него

00:19:36

сейчас адаптив делать не нужно

00:19:38

идем дальше итак мы подобрались к

00:19:41

главному виновнику белые полосы справа и

00:19:44

нашего экрана в этом случае давайте

00:19:45

просто уменьшим наши картинки так чтобы

00:19:48

все четыре помещались на странице

00:19:50

давайте посмотрим какая у них ширина 270

00:19:54

пикселей можем задать им максимальную

00:19:56

ширину 220

00:19:57

excel по высоте они уменьшатся

00:19:59

пропорционально автоматический поэтому

00:20:01

сейчас мы берём их родительский айдишник

00:20:04

доктор айтемы

00:20:05

здесь пишем соответственно один доктор

00:20:08

ой торс и m&g и задаем им максимальную

00:20:11

ширину 220 пикселей

00:20:13

давайте обновим страницу заголовок также

00:20:15

давайте выравняем по центру поэтому

00:20:17

давайте найдем для него определений

00:20:19

стилей

00:20:20

это у нас доктор style вставляем его

00:20:23

здесь и пишем текст оnline центр

00:20:26

обновляем страницу хорошо но картинки

00:20:29

очень сильно примыкает краю экрана что

00:20:32

выглядит не очень хорошо

00:20:33

к тому же если мы сейчас будем

00:20:35

растягивать экран то расстояние между

00:20:37

ними будет увеличиваться что выглядит не

00:20:39

очень красиво мы можем выровнять контент

00:20:41

по центру и задать отступ между блоками

00:20:44

как мы это делали в предыдущие разы

00:20:46

давайте пойдем в этой ситуации другим

00:20:48

путем чтобы разобраться с другим

00:20:50

вариантом мы оставим равные

00:20:52

автоматически отступы между блоками от

00:20:54

flex контейнера но просто ограничим этот

00:20:57

блок по ширине чтобы он не увеличивался

00:21:00

это у нас блок доктор и magic поэтому

00:21:03

для этого блока давайте здесь зададим

00:21:05

максимальную ширину например 950

00:21:08

пикселей также сделаем выравнивание его

00:21:11

по центру родительском блоке маджин 0

00:21:14

автор форматируем код и переходим на

00:21:17

нашу страницу смотрим теперь изменяем

00:21:20

нашу ширину все выглядит замечательно

00:21:22

хорошо выставляем 1000 24 и идем дальше

00:21:25

на этом промежутке осталось разобраться

00:21:28

только с футажем тут мы как и в хедере

00:21:30

можем убрать

00:21:31

отступы слева для наших основных блоков

00:21:34

это у нас блок time адрес и фон поэтому

00:21:37

давайте перечислим в нашем файле стилей

00:21:40

3 селектора и the future time footer

00:21:42

адрес и footer фон и соответственно

00:21:45

уберем для них отступ слева

00:21:48

пишем margin лифт 0 а теперь для

00:21:52

родительского блока это у нас footer

00:21:54

контейнер давайте скопируем его селектор

00:21:57

мы сделаем justify контент space between

00:22:01

чтобы между нашими блоками были равные

00:22:04

отступы

00:22:05

также сделаем внутренний отступ справа и

00:22:08

слева по 20 пикселей поэтому пишем pdf и

00:22:11

padding райт по 20 пикселей

00:22:14

обновляем нашу страницу увеличиваем

00:22:16

ширину и смотрим что получается блоки

00:22:18

разъезжаются но в отличие от блока с

00:22:21

картинками для футера или хедера это

00:22:23

нормальное явление и все выглядит

00:22:25

замечательно хорошо вот мы и сделали

00:22:27

поддержку нашей странице промежутка

00:22:29

ширины от 1024 пикселей до 2560 что нам

00:22:35

надо сделать дальше возьмем следующий

00:22:38

промежуток например от 700 68 до 1023

00:22:42

пикселей поэтому нам надо создать блог

00:22:45

где будет указана максимальная ширина

00:22:47

1023 пикселя давайте скопируем и вставим

00:22:50

новый блок определения стилей здесь

00:22:53

пишем максимальную ширину 1023 так как

00:22:56

до этого мы рассматривали промежуток

00:22:58

1024 тире 1199

00:23:01

пикселей значит сейчас мы рассматриваем

00:23:04

768 1023 пикселя но помните что те стили

00:23:08

которые мы применили для максимальной

00:23:10

ширины и 1199 применятся и к этому

00:23:13

промежутку это лишь сыграет нам на руку

00:23:16

в некоторых случаях для этого промежутка

00:23:18

мы также опишем свои стили таким образом

00:23:21

мы будем описывать промежутке указывая

00:23:23

только максимальную ширину пока не

00:23:25

дойдем до самой маленькой ширины экрана

00:23:27

раз мы сейчас будем делать промежуток от

00:23:30

700 68 пикселей то будем делать стиле на

00:23:33

минимальной ширине

00:23:34

этого промежутка 768 пикселей но будем

00:23:37

проверять на любой ширине до 1023

00:23:40

пикселей потому как теперь начиная с

00:23:42

1024 пикселей наша страница выглядит

00:23:45

полностью нормально поэтому выставляю

00:23:48

здесь 768 и смотрим что получается на

00:23:51

полосу справа мы пока не обращаем

00:23:53

внимание

00:23:54

исправим это когда дойдем до блока с

00:23:56

нашими докторами

00:23:57

давайте разберемся с федором меню опять

00:24:00

надо исправлять как видите отступы от

00:24:02

края блока контейнера у нас уже

00:24:04

сохранились от задания стилей для

00:24:07

максимальной ширины 1199 пикселей то

00:24:10

есть если бы мы там сделали ограничения

00:24:13

не только максимуму но и минимумах то у

00:24:15

этого блока main контейнер у нас

00:24:17

уже не было бы фитингов 20 пикселей для

00:24:20

швейной 768 нам бы пришлось задавать ее

00:24:23

заново а так они у нас уже есть и

00:24:26

это экономит наше время и конечно же

00:24:28

силы для меню мы можем пока оставить все

00:24:31

как есть но только убрать отступ и

00:24:33

справа для пунктов меню

00:24:34

давайте найдем для них стиле это у нас

00:24:37

вот такой вот селектор копируем его и

00:24:40

вставляем здесь создаем новый блок и

00:24:42

зададим им отступ справа margin райт 0

00:24:46

давайте обновим страницу и посмотрим что

00:24:48

получается супер на 768

00:24:51

у нас меню отображается отлично если

00:24:53

начнем увеличивать то тоже все будет

00:24:55

выглядеть хорошо с этим блоком на нашем

00:24:58

промежутке также хорошо поэтому сразу

00:25:00

перейдем к следующему блоку следующий

00:25:02

блок тоже выглядит хорошо но мы можем

00:25:05

немножко уменьшить отступ сверху блока и

00:25:07

сделать заголовок по центру страницы

00:25:10

давайте это сделаем найдем наш отступ

00:25:12

сверху он у нас применен для блока about

00:25:15

как мы видим здесь это margin топ 160

00:25:18

пикселей

00:25:19

поэтому здесь давайте зададим для блока

00:25:21

about важен топ 80 пикселей хорошо

00:25:25

теперь давайте зададим стиле для

00:25:27

заголовка

00:25:28

это у нас about тайтл сделаем ему margin

00:25:32

ботом например в 30 пикселей вместо 60

00:25:35

поэтому вставляем здесь этот стиль и

00:25:37

меняем 60 на 30 давайте обновим страницу

00:25:40

хорошо отступы уменьшились давайте

00:25:42

теперь ещё уменьшим отступ для наших

00:25:44

абзацев ищем эти блоки это у нас about

00:25:48

текст они имеют отступ сверху 45

00:25:51

пикселей поэтому давайте скопируем этот

00:25:52

selector и заменим на 25 пикселей место

00:25:57

45 машин топ 25 gx

00:26:00

хорошо посмотрим что получается отлично

00:26:02

отступы уменьшили теперь этот блок

00:26:04

выглядит отлично давайте попробуем

00:26:07

применить большую ширину здесь все

00:26:10

хорошо

00:26:11

выставляем опять 768 и идем дальше

00:26:14

следующий блок это блок наши услуги

00:26:17

тут в целом все хорошо но давайте

00:26:19

уменьшим отступ сверху так как на

00:26:21

мобильных устройствах и планшетах лучше

00:26:23

экономить место но похоже что эти

00:26:25

отступы созданы не для блока услуг the

00:26:28

service is a

00:26:29

лео блока ебал поэтому для блока about

00:26:32

давайте margin ботов сделаем не 126

00:26:35

пикселей а например 80 поэтому переходим

00:26:39

на 6 ли

00:26:40

и в имеющейся блок стилей добавляем

00:26:42

маджид ботом 80 пикселей и обновляем

00:26:45

страницу хорошо давайте проверим этот

00:26:47

блок на большей ширине растягиваем здесь

00:26:51

в целом все хорошо блоки сжимаются

00:26:54

где-то на 900 пикселях поэтому на 768

00:26:57

этот блок выглядит отлично идем дальше

00:26:59

следующий блок это блок с формой в целом

00:27:02

он выглядит хорошо но было бы неплохо

00:27:04

добавить внутренний отступ в 20 пикселей

00:27:07

по странам чтобы контент не прилипал

00:27:10

краям экрана поэтому давайте для блока с

00:27:12

контейнера этой формы просто добавим

00:27:15

справа и слева пасту по 20 пикселей

00:27:17

поэтому здесь копируем резерв контейнер

00:27:20

и добавляем просто 10 20 пикселей так

00:27:24

как сверху снизу пилинга у нас нет мы не

00:27:27

боимся его затронуть и поставить на 0

00:27:29

хорошо теперь проверяем до 1023 пикселей

00:27:33

все работает замечательно выставляем 768

00:27:37

и идем к следующему блоку

00:27:39

наконец мы подошли к блоку исправив

00:27:41

которым мы избавимся от белой полосы

00:27:43

справа исправить его очень просто

00:27:45

давайте добавим стиль переноса картинок

00:27:48

на новую строп если они не будут

00:27:51

вмещаться на одну строк но чтобы у нас

00:27:53

было по две картинки на каждой строке

00:27:55

сделаем ограничение например в 500

00:27:58

пикселей для блоков доктор семейств ведь

00:28:00

если не сделать ограничения то на первой

00:28:02

строке будет три картинки

00:28:03

а на второй строке 1 картинка которая

00:28:06

просто перенесется из-за того что она не

00:28:08

влазит и это будет выглядеть не очень красиво

00:28:10

поэтому давайте скопируем наш селектор

00:28:12

доктор images здесь зададим для него

00:28:15

блок стилей пишем здесь flex wrap чтобы

00:28:18

наши элементы то есть картинки

00:28:20

переносились на новую строку задаем

00:28:23

максимальную ширину 500 пикселей

00:28:25

выравниваем этот блок по центру margin 0

00:28:28

авто и смотрим что получается хорошо

00:28:31

теперь давайте добавим для каждой

00:28:33

картинке отступ

00:28:34

например в 15 пикселей с каждой стороны

00:28:36

поэтому здесь копируем наш селектор

00:28:38

доктор 7 jus добавляем пробел и ставим

00:28:42

m&g маджид

00:28:43

15px обновляем и смотрим что получается

00:28:47

супер теперь все выглядит отлично

00:28:49

проверяем на другой ширине все работает

00:28:53

так как мы задумали выставляем 768

00:28:56

хорошо только давайте ещё для этого

00:28:58

блока уменьшен отступ и сверху и снизу

00:29:00

чтобы экономить место давайте посмотрим

00:29:03

где они применены

00:29:04

это у нас блок доктор с такими вот

00:29:07

морщинами поэтому скопируем его целиком

00:29:09

здесь просто изменим маршем сверху и

00:29:12

снизу на 80 пикселей

00:29:15

обновляем страницу супер этот блок готов

00:29:19

так остался суток тут мы сделаем перенос

00:29:22

элементов на новую строку и поменяем их

00:29:24

порядок чтобы на первой строке у нас был

00:29:27

блог с логотипом и телефоном а на второй

00:29:29

строке блоки с информации режимов работы

00:29:32

и адресом поэтому давайте найдем сейчас

00:29:34

на эти блоки

00:29:36

смотрим это у нас footer логан и footer

00:29:40

фон которая должны быть на одной строке

00:29:42

a future time и footer адрес на 2

00:29:45

поэтому давайте для элемента footer фон

00:29:48

добавим следующий стиль пишем здесь

00:29:50

footer фон делаем ему орден 2 это стиль

00:29:55

который позволяет задать порядок

00:29:57

отображения наших элементов внутри flex

00:29:59

контейнера а для нашего блока food or

00:30:02

time задаем соответственно ордер 3 и для

00:30:07

блока footer адрес задаем ордер 4

00:30:11

давайте обновим страницу хорошо местами

00:30:14

мы поменяли а теперь давайте их сделаем

00:30:16

с переносом на новую строку это у нас

00:30:19

блок footer контейнер поэтому давайте

00:30:21

его скопируем ставим здесь через решетку

00:30:25

и добавим flex wrap wrap также зададим

00:30:29

ограничение в 400 пикселей чтобы наши

00:30:32

элементы переносились именно два сразу

00:30:35

потому что если мы не сделаем этого то

00:30:37

на первой строке будут три элемента на 2

00:30:39

1 то же самое как уже могло бы быть с

00:30:42

картинками и также выравниваем этот блок

00:30:45

по центру margin но

00:30:46

auto смотрим что получается хорошо мы

00:30:49

видим что наши блоки не переносят так

00:30:52

как нам нужна и все дело в том что мы

00:30:54

указали маленькую ширину и эти блоки

00:30:56

просто не помещаются если мы укажем

00:30:59

например 470 пикселей то все будет работать

00:31:02

поэтому давайте здесь изменим макс весна

00:31:05

470 пикселей и также добавим отступы

00:31:08

сверху для элементов хутор там и footer

00:31:11

адрес

00:31:12

поэтому переходим наш пичкаешь там и

00:31:14

здесь добавляем маджин топ 20 пикселей

00:31:17

то же самое для блока footer time

00:31:20

смотрим что получается выглядит вполне

00:31:23

неплохо давайте проверим на разной

00:31:25

ширине

00:31:26

отлично все работает вот мы и покрыли

00:31:30

этот промежуток 768 1023 хорошо

00:31:34

следующий промежуток которую мы будем

00:31:36

исправлять это 425 767 пикселей поэтому

00:31:41

давайте здесь выставим 425 также можно

00:31:43

нажать на панели мобайл л и зададим

00:31:46

новый блок стилей адаптивно для

00:31:48

максимальной ширины в 767 пикселей

00:31:52

поэтому здесь добавляем

00:31:53

скобочку пишем максимальную ширину 767

00:31:57

перски потому как этот блок мы проверяли

00:31:59

на 768

00:32:00

и он был промежутком до 1023 пикселей

00:32:04

поэтому здесь будем разбираться со

00:32:07

стилями от 425 петли до 700 67

00:32:11

давайте посмотрим что получается опять

00:32:14

надо исправлять меню в этом случае

00:32:16

сделаем следующее поменяем местами блоки

00:32:19

и flex контейнер как раз позволяет нам

00:32:21

это сделать на первой строке оставим

00:32:23

логотип и телефон как мы это сделали уже

00:32:26

с food epam а на второй строке у нас

00:32:28

будет меню поэтому давайте для блока

00:32:31

main хедер

00:32:32

зададим здесь новый блок определения

00:32:33

стилей и

00:32:35

ему соответственно зададим flexx wrap

00:32:37

wrap чтобы наши элементы внутри

00:32:39

переносились также сделаем максимальную

00:32:41

ширину 360 пикселей

00:32:44

выровняем этот блок по центру через

00:32:46

мажем 0 авто и посмотрим что получается

00:32:49

хорошо теперь нужно поменять местами

00:32:51

наши блоки давайте найдем что это за

00:32:54

блок это у нас блок main header menu

00:32:57

поэтому давайте скопируем и

00:32:59

хайди здесь создадим новый стиль и

00:33:01

зададим ему ордер 3 а для блока которые

00:33:05

нам нужно поднять выше и the main хедер

00:33:08

фон зададим ордер 2 и проверим что

00:33:12

получается хорошо

00:33:14

добавим еще отступ сверху для блока main

00:33:17

header menu

00:33:18

переходим добавляю здесь margin топ 20

00:33:22

пикселей и обновляем страницу отлично

00:33:24

проверим на любой ширине до 700 67

00:33:27

пикселей все выглядит так как надо

00:33:31

включаем опять 425 смотрим весь блок

00:33:34

целом у нас тут все хорошо но можно

00:33:37

чуть-чуть уменьшить отступ и сверху и

00:33:39

снизу у этого блока чтобы сэкономить

00:33:41

место на мобильных устройствах

00:33:43

давайте посмотрим где у нас задается

00:33:45

этот о ступ это у нас доступ и у блока

00:33:49

main content

00:33:50

поэтому давайте маджин топ у этого блока

00:33:52

изменим копируем вместе со стилем машин

00:33:55

топ вставляем нашу ширину и добавляем

00:33:58

закрывающую скобку теперь вместо ста

00:34:00

восьмидесяти одного пикселя давайте

00:34:02

зададим например

00:34:04

120 пикселей и посмотрим что получается

00:34:06

хорошо теперь нужно уменьшить

00:34:08

отступ снизу этот отцу у нас у кнопки

00:34:11

main action поэтому давайте здесь

00:34:13

изменим его

00:34:14

и зададим вместо 250 пикселей 150

00:34:19

обновляем страницу отлично теперь этот

00:34:23

блок выглядит вполне нормально идем

00:34:26

дальше смотрите благодаря тому что мы не

00:34:28

выставляли ограничения для минимума

00:34:31

наших промежутках все блоки внутри этого

00:34:34

блока выглядит вполне нормально поэтому

00:34:36

просто переходим к следующему блоку это

00:34:38

блок наши услуги

00:34:40

он также выглядит хорошо здесь

00:34:42

исправляет там ничего не нужно

00:34:44

следующий блок с формой него уже есть

00:34:46

проблемы первое что мы сделаем это дадим

00:34:49

возможность переноситься элементом

00:34:51

внутри формы поэтому переходим к стилем

00:34:54

это у нас блоки

00:34:55

input визер форм давайте его скопируем

00:34:59

напишем здесь margin 10 пикселей 000 то

00:35:04

есть отступ сверху 10 пикселей а все

00:35:06

остальные отступы уберем то же самое

00:35:09

нужно сделать для блока с кнопкой это у

00:35:11

нас

00:35:12

визер форм бата поэтому давайте через

00:35:15

запятую перечислим его

00:35:16

обновим страницу хорошо но нам нужно

00:35:19

сделать перенос наших элементов поэтому

00:35:21

для формы просто зададим flex wrap wrap

00:35:25

добавляем пишем здесь flex wrap и

00:35:29

обновляем страницу хорошо теперь давайте

00:35:32

посмотрим почему наша кнопка больше чем

00:35:34

input и давайте зададим этой кнопки

00:35:37

ширину такую же как и для input of то

00:35:39

есть 268 пикселей поэтому копируем этот

00:35:43

селектор вставляем его ниже и задаём

00:35:46

ширину 268 пикселей теперь обновляем

00:35:51

хорошо теперь наша форма выглядит

00:35:54

замечательно но есть проблема с фоном

00:35:56

из-за того что картинки не хватает на

00:35:58

всю высоту этого блока который уже

00:36:01

увеличился этот фон начинает

00:36:03

дублироваться поэтому нам нужно

00:36:05

определить каком блоке применен этот фон

00:36:07

тонус блок резерв давайте его скопируем

00:36:10

и backgrounds

00:36:12

изменим на то же самое что мы делали для

00:36:14

ширины

00:36:15

от 1921 пикселя то есть баграм сайт

00:36:18

covert это значит что наш фон теперь

00:36:21

будет покрывать всю высоту этого блока и

00:36:24

картинка никогда не будет повторяться

00:36:26

смотрим хорошо давайте проверим как этот

00:36:30

блок выглядит на другой ширине

00:36:32

увеличиваем целом все хорошо и блок

00:36:35

везде выглядеть замечательно поэтому

00:36:38

выставляем 425 и идем дальше следующий

00:36:40

блок выглядит неплохо но надо выровнять

00:36:43

содержимое блока по центру поэтому для

00:36:45

селектора в котором находятся наши

00:36:47

картинки докторов это доктор семей джес

00:36:50

просто задаем justify контент-центр и

00:36:55

обновляем страницу смотрим теперь

00:36:58

проверяем на всем промежутке отлично

00:37:01

можно идти дальше выставляем 425 и

00:37:04

переходим к footer давайте сделаем так

00:37:07

чтобы каждый блок отображался по центру

00:37:09

и занимал всю строку для этого найдем

00:37:11

эти стили это у нас блоки внутри footer

00:37:15

контейнер поэтому для всех этих четырех

00:37:18

блоков мы применим следующие стиле

00:37:20

давайте мы их все разместим здесь через

00:37:22

запятую теперь footer

00:37:25

time to lie footer адрес и footer фон

00:37:31

для этих четырех блоков добавим margin

00:37:34

20px 000 чтобы отступ был только сверху

00:37:38

и 20 пикселей для того чтобы каждый из

00:37:41

этих блоков занимал свою строку мы

00:37:43

сделаем специальный стиль flex один сто

00:37:46

процентов для родительского элемента

00:37:49

footer контейнер давайте зададим

00:37:52

максимальную ширину в 300 пикселей и

00:37:55

специальное свойство бокс айзен border

00:37:58

бокс чтобы в эту ширину включались от

00:38:01

тука которая там есть также выровняем

00:38:03

этот блок по центру и давайте посмотрим

00:38:05

что получается так выглядит очень хорошо

00:38:09

проверяем на другой ширине этого

00:38:11

промежутка все отлично теперь переходим

00:38:15

в самое начало страницы

00:38:17

у нас остался последний промежуток

00:38:19

который мы сегодня рассмотрим это от 320

00:38:23

пикселей до 424 это промежуток от

00:38:27

минимальной ширины которые пользуются

00:38:29

современные смартфоны 320 пикселей

00:38:31

поэтому давайте создадим новый блок

00:38:33

стилей с максимальной шириной 420 четыре

00:38:36

пикселя

00:38:37

копируем определение стиле здесь пишем

00:38:40

424 и будем задавать стиле то есть это

00:38:44

будет блок стилей для всех экранов

00:38:47

которые меньше чем 424 пикселя по ширине

00:38:50

поэтому выбираю здесь самый минимальный

00:38:52

который будет использоваться когда-либо

00:38:55

это 320 пикселей и будем исправлять все

00:38:57

по порядку начинаем с меню

00:38:59

конечно тут лучше было бы сделать

00:39:01

выпадающее меню с иконкой бургера или

00:39:04

что-нибудь еще более современное мы не

00:39:06

будем углубляться в эту тему и сделаем

00:39:08

самый простой вариант адаптивно меню мы

00:39:11

просто сделаем так чтобы каждый из

00:39:13

внутренних блоков хедера был на новой

00:39:15

строке и размещался по центру давайте

00:39:17

выберем эти блоки для блока main хедер

00:39:21

давайте скопируем его селектор зададим

00:39:23

выравнивание текста по центру и

00:39:26

выравниванием внутри flex контейнера по

00:39:28

центру и тот же стив и контент-центр

00:39:31

давайте 1-ым страницу для блока с

00:39:33

телефоном то есть это у нас main хедер

00:39:36

фон давайте зададим отступы

00:39:38

арку в 20 пикселей копируем селектор

00:39:41

вставляем им пишем мажем топ 20 пикселей

00:39:44

а для пунктов меню сделаем чуть больше

00:39:46

высоту строки

00:39:48

выбираем наш меню ой там и вставляем

00:39:52

новый блок определения стиле задаем

00:39:54

высоту строки например 28 пикселей

00:39:58

обновляем страницу хорошо в целом

00:40:00

выглядит неплохо поэтому оставим так

00:40:02

давайте проверим до 400 24 пикселей

00:40:05

вот здесь у нас есть косяк поэтому нам

00:40:08

надо его исправить

00:40:09

первый и второй блок уже помещаются на

00:40:11

одну строку и выглядит без доступа

00:40:13

довольно плохо поэтому применим для

00:40:15

блока с логотипом стиль который заставит

00:40:18

его занимать всю тропу это у нас flex один

00:40:22

сто процентов поэтому здесь

00:40:24

применяем пишем flex один сто процентов

00:40:29

и обновляем страницу хорошо проверяем

00:40:32

теперь все замечательно и смотрим что у

00:40:36

нас здесь получается в первом блоке в

00:40:38

этом блоке у нас очень большой текст и

00:40:40

кнопка размерами больше чем сам блок

00:40:43

поэтому для текста а это у нас блок main

00:40:46

title

00:40:47

давайте применим следующие стиле зададим

00:40:50

размер текста 30 пикселей а высоту

00:40:53

строки например в 35 пикселей а для

00:40:57

кнопки это у нас один main action

00:40:59

зададим максимальную ширину 100

00:41:02

процентам и посмотрим что получается на

00:41:04

странице хорошо теперь этот блок

00:41:07

выглядит замечательно поэтому можно

00:41:09

перейти к следующему

00:41:10

следующем блоке в принципе тоже все

00:41:13

хорошо кроме последней части кавычки и

00:41:16

текст не помещаются на одной строке

00:41:18

давайте вообще скроем эти кавычки на

00:41:21

этой ширине

00:41:22

поэтому для блока about имидж клод

00:41:25

давайте скопируем этот селектор просто

00:41:27

зададим дисплей но и обновим страницу

00:41:32

хорошо он теперь проверяем на большом

00:41:35

промежутке целом этот блок выглядит

00:41:38

хорошо поэтому можно идти дальше смотрим

00:41:42

следующий блок это наши услуги

00:41:44

здесь у нас все хорошо конечно мы могли

00:41:46

сделать так чтобы наш фон у этих блоков

00:41:49

чередовался то есть был сначала за

00:41:51

крашены потом незакрашенный и так далее

00:41:53

но в целом это нас может сейчас не

00:41:56

беспокоить поэтому мы оставим так как

00:41:58

есть приходим к следующему блоку это блок с

00:42:01

формой здесь тоже все хорошо проверим на

00:42:04

нашем промежутке отлично выставляем 320

00:42:08

пикселей или он дальше наши доктора здесь тоже

00:42:11

все отлично переходим к следующему и

00:42:15

последнему блоку

00:42:16

это footer здесь тоже все выглядит

00:42:19

замечательно вот мы и закончили адаптив

00:42:21

для нашей странице теперь на любой

00:42:23

ширине наш сайт будет отображаться

00:42:26

хорошо согласитесь это было не так

00:42:28

сложно как кажется с самого начала вы в

00:42:30

целом можете добавлять и свои промежутке

00:42:33

давайте я покажу пример допустим вы

00:42:35

делаете такие же промежутке как и я вы

00:42:37

видите что на определенной ширине есть

00:42:40

косяк и его надо исправить можно взять

00:42:42

для примера текст в первом блоке мы

00:42:45

видим что наши вине 500 пикселей

00:42:47

текст очень большой и становится меньше

00:42:50

тока нашей вине и 424 пикселя поэтому мы

00:42:54

просто отправляемся в наш файл стилей

00:42:56

копируем нужный селектор вставляем его

00:42:59

там где нам нужно и задаем максимальную

00:43:02

ширину до например 500 пикселей а теперь

00:43:05

для нашего блока main тайтл

00:43:07

задаем размер текста 35 пиксель

00:43:11

обновляем страницу смотрим хорошо теперь

00:43:15

наш текст уменьшается так как нужно

00:43:17

таким образом вы можете создавать

00:43:19

дополнительно сколько угодно промежутков

00:43:22

под нужные вам стилизации страницы

00:43:24

давайте я вам еще раз поясню по какой

00:43:26

схеме мы сейчас сделали промежутки и как

00:43:29

это работает если у вас все еще есть

00:43:31

недопонимание всего нам надо было

00:43:33

покрыть стилями

00:43:34

общей промежуток ширины от 320 пикселей

00:43:37

до 2560 пикселей

00:43:40

когда мы создали страницу на основной

00:43:42

ширине без адаб тиго за счет

00:43:44

использования контейнером и сразу

00:43:46

покрыли ширину которая больше ширины

00:43:48

контейнера а так как контейнер был у нас

00:43:51

1170 пикселей и по сторонам нужны были

00:43:54

отступы для нормального отображения то

00:43:56

можно сказать что мы покрыли промежуток

00:43:59

с 1200 пикселей и до 1920 и далее мы

00:44:03

сделали поддержку стилей для

00:44:05

ширины больше чем 1920 пикселей по итогу

00:44:08

наш сайт уже выглядел хорошо на общей

00:44:11

шине от 1200 пикселей до 2560 пикселей

00:44:16

следующим шагом мы задали стилей для

00:44:17

стране шириной меньше чем 1199 пикселей

00:44:21

таким образом мы написали стиле которые

00:44:23

будут работать на любой ширине нашего

00:44:26

общего промежутка от 320 то 1199

00:44:30

пикселей но проверяли все на контрольной

00:44:32

точки 1024 для ширины меньше чем эта

00:44:36

контрольная точка то есть 1023 пикселя и

00:44:39

ниже мы также создали отдельный блок

00:44:42

стилей и ограничились максимум в 768

00:44:45

пикселей как контрольная . далее мы

00:44:48

создали стилей для промежутка 425 767

00:44:53

пикселей и в конце мы создали стилей для

00:44:55

последнего промежутка который покрыл

00:44:57

экраны от 320 до 400

00:45:00

24 пикселей таким образом на ширине 320

00:45:04

пикселей у нас действуют как стиле

00:45:05

основных экранов созданные изучают так и

00:45:08

стиле всех промежутков которые меньше

00:45:10

чем 1200 пикселей эта схема обычно

00:45:13

работает лучше всего вы конечно же

00:45:15

можете делать так как вам угодно это

00:45:17

вариант которым пользуюсь я как доделаю

00:45:19

адаптив сайта

00:45:21

создавайте свои промежутки и только

00:45:22

опытным путем вы поймете как вам будет

00:45:25

удобно работать в целом это все что

00:45:27

касается адаптивно я не рассказывал все

00:45:30

максимально подробно ведь нюансов очень

00:45:32

много растягивать урок на несколько часов мне

00:45:34

бы не хотелось если какой-то момент вам

00:45:37

был непонятен просто задайте этот вопрос

00:45:39

гугле или напишите в комментариях к

00:45:42

этому видео я очень надеюсь что вся

00:45:44

информация для вас была очень полезно

00:45:46

буду рад вашему лайку и комментарию под

00:45:48

этим видео всем спасибо и до встречи в

00:45:51

новых видео

00:45:53

[музыка]

00:46:01

[музыка]

Описание:

Регистрируйся на бесплатный 7-дневный интенсив «Frontend Start» по ссылке: https://itlogia.ru//link/GlEfR. На интенсиве ты вместе с Романом Черновым создашь собственный Frontend-проект с нуля с проверкой домашних заданий от кураторов! ► Эффективный 12-месячный онлайн-курс «Frontend-разработчик» с помощью в трудоустройстве: https://itlogia.ru/link/CgBLQ ✔️ В этом видео сооснователь Айтилогии - Роман Чернов, расскажет вам об основах HTML и CSS. ✔️ Также вы сверстаете адаптивную версию Landing Page всего за 40 минут. Внимание: в видео идёт упор больше на практическую часть, поэтому подробное теоретическое пояснение всех CSS стилей опущено. Любое интересующее вас свойство стилей можно подробно изучить в любом справочнике в свободном доступе. ✔️ Первая часть видео: https://www.youtube.com/watch?v=PUwEMjHKU7M Подпишитесь на канал Айтилогии, чтобы вовремя получать еще больше полезной информации! ► Онлайн-курс «Frontend-разработчик» с нуля до трудоустройства: https://itlogia.ru/link/CgBLQ Следи за нами в соц. сетях: ✔️ Полезные посты про Frontend в инстаграме Айтилогии - https://www.facebook.com/unsupportedbrowser ✔️ Личный блог Романа Чернова в инстаграме - https://www.facebook.com/unsupportedbrowser ✔️ Актуальная информации про Frontend в телеграме Айтилогии - https://t.me/itlogia ✔️ Ценные знания про Frontend в сообществе Вконтакте Айтилогии - https://vk.com/itlogia_ru ✔️ Узнать об онлайн-школе Айтилогия еще больше можно на сайте - https://itlogia.ru ✔️ Читайте интервью об успехах наших выпускников - https://itlogia.ru/graduate

Готовим варианты загрузки

Популярные

HD видео

Только звук

Все форматы

* — Если видео проигрывается в новой вкладке, перейдите в неё, а затем кликните по видео правой кнопкой мыши и выберите пункт "Сохранить видео как..."

** — Ссылка предназначенная для онлайн воспроизведения в специализированных плеерах

Вопросы о скачивании видео

Как можно скачать видео "HTML и CSS: адаптив для Landing Page с нуля за 40 минут"?

Сайт http://unidownloader.com/ — лучший способ скачать видео или отдельно аудиодорожку, если хочется обойтись без установки программ и расширений. Расширение UDL Helper — удобная кнопка, которая органично встраивается на сайты YouTube, Instagram и OK.ru для быстрого скачивания контента.
Программа UDL Client (для Windows) — самое мощное решение, поддерживающее более 900 сайтов, социальных сетей и видеохостингов, а также любое качество видео, которое доступно в источнике.
UDL Lite — представляет собой удобный доступ к сайту с мобильного устройства. С его помощью вы можете легко скачивать видео прямо на смартфон.

Какой формат видео "HTML и CSS: адаптив для Landing Page с нуля за 40 минут" выбрать?

Наилучшее качество имеют форматы FullHD (1080p), 2K (1440p), 4K (2160p) и 8K (4320p). Чем больше разрешение вашего экрана, тем выше должно быть качество видео. Однако следует учесть и другие факторы: скорость скачивания, количество свободного места, а также производительность устройства при воспроизведении.

Почему компьютер зависает при загрузке видео "HTML и CSS: адаптив для Landing Page с нуля за 40 минут"?

Полностью зависать браузер/компьютер не должен! Если это произошло, просьба сообщить об этом, указав ссылку на видео. Иногда видео нельзя скачать напрямую в подходящем формате, поэтому мы добавили возможность конвертации файла в нужный формат. В отдельных случаях этот процесс может активно использовать ресурсы компьютера.

Как скачать видео "HTML и CSS: адаптив для Landing Page с нуля за 40 минут" на телефон?

Вы можете скачать видео на свой смартфон с помощью сайта или pwa-приложения UDL Lite. Также есть возможность отправить ссылку на скачивание через QR-код с помощью расширения UDL Helper.

Как скачать аудиодорожку (музыку) в MP3 "HTML и CSS: адаптив для Landing Page с нуля за 40 минут"?

Самый удобный способ — воспользоваться программой UDL Client, которая поддерживает конвертацию видео в формат MP3. В некоторых случаях MP3 можно скачать и через расширение UDL Helper.

Как сохранить кадр из видео "HTML и CSS: адаптив для Landing Page с нуля за 40 минут"?

Эта функция доступна в расширении UDL Helper. Убедитесь, что в настройках отмечен пункт «Отображать кнопку сохранения скриншота из видео». В правом нижнем углу плеера левее иконки «Настройки» должна появиться иконка камеры, по нажатию на которую текущий кадр из видео будет сохранён на ваш компьютер в формате JPEG.

Сколько это всё стоит?

Нисколько. Наши сервисы абсолютно бесплатны для всех пользователей. Здесь нет PRO подписок, нет ограничений на количество или максимальную длину скачиваемого видео.