Скачать "Intensivo do Zero ao Código: Construindo um projeto de programação completo - PROJETO ONE PIECE"
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252FIcjhB0emU04%252Fmaxresdefault.webp&w=1139&q=75)
Похожие ролики из нашего каталога
![NEXT.JS Crash Course for Beginners - Build 6 Apps in 17 Hours (SSR, Auth, Full-Stack + More) [2023]](/_next/image?url=https%3A%2F%2Funidownloader.com%2FcontentImages%2FefDmE3uZi4jlJkMTsIbUYSFIkMY%3D%2Ffilters%3Aquality(80)%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252F6fNy0iD3hsk%252Fmaxresdefault.jpg&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252F8dZj54iWn7U%252Fmaxresdefault.jpg&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252FDAhczeKPR34%252Fmaxresdefault.jpg&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252FTKL0FWThCeg%252Fmaxresdefault.jpg&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252Fg5HKlFy-2gE%252Fmaxresdefault.jpg&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252Fg79NMn7HUZg%252Fmaxresdefault.webp&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252FzYlAQPXpSqQ%252Fmaxresdefault.jpg&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252F7GSaG13ChZ8%252Fmaxresdefault.jpg&w=1139&q=75)
Теги видео
Субтитры
Английский
00:00:00
Эй, давай откроем версию, чтобы я00:00:02
я установил00:00:04
снова красота, ребята, вы можете?00:00:07
делай это вместе с нами или нет, если ты00:00:11
заблудился, в какой-то момент тебе будет лучше00:00:13
остановись и обрати внимание на Live00:00:15
о чем идет речь в концепции и00:00:17
потом посмотришь еще раз, оно останется00:00:20
записано, чтобы вы могли просмотреть его еще раз и00:00:22
делай это вместе, чтобы не заблудиться00:00:23
Красота00:00:24
Эй, дай мне что-нибудь сделать, я закрою00:00:28
вот и я, ребята, посмотрите ссылку00:00:31
из дискорда, это есть в описании Live, ок00:00:35
там есть одна из таких ссылок00:00:37
сообщество гильдий должно00:00:40
двойной, вот где тебе придется иметь один00:00:43
аккаунт в дискорде, сразу создавай00:00:46
Ну вот и все, папка у меня есть00:00:50
внутри папки моего рабочего стола, которая представляет собой00:00:52
папка, которую я создал здесь, у меня есть00:00:53
Папка S zpc просто пустая папка, которую я00:00:56
Я создал это только для того, чтобы привести здесь пример00:00:57
Итак, я собираюсь нажать кнопку00:01:00
прямо в нем, и я приду сюда и открою его с помощью00:01:02
код после установки vud Code00:01:04
ты тоже сможешь это сделать00:01:06
При установке важно отметить00:01:08
есть варианты, которые помогут вам это сделать00:01:09
У красоты есть два варианта00:01:11
который там отмечен, я открою его здесь и00:01:15
тогда мы сможем немного поговорить00:01:16
о расширениях Тогда расширения00:01:19
Если у вас есть это, позвольте мне увеличить здесь00:01:21
для F проще всего из вас00:01:23
посмотрите это меню здесь00:01:27
расширения, поэтому, если я нажму здесь, все пойдет00:01:29
Здесь очень много расширений00:01:31
они вообще супер00:01:33
лучшие способности тренера, которые вы можете установить00:01:35
расширение, а затем оно изменится00:01:37
что-то в коде для тебя.00:01:39
упрощение чего-либо увеличит00:01:41
продуктивность мы покажем00:01:42
некоторые из них мы используем и которые00:01:44
очень хорошо Итак, вы, ребята, первые здесь00:01:45
вы можете установить тот, который меняет язык00:01:48
с жилетного кода на португальский, чтобы вы00:01:50
Можете набрать здесь в поиске00:01:53
Португальский, отсюда и этот первый здесь00:01:56
португальский00:01:57
Бразилия, ты можешь прийти сюда сюда00:02:00
кнопку и установить, позвольте мне сделать это00:02:02
Я собираюсь в ISO, здесь оно тебе не нужно.00:02:04
я просто зайду в профиль Zeroed00:02:07
чтобы мы могли установить все с нуля00:02:09
Вот оно, так оно и выйдет от тебя вот так00:02:11
Также тогда вы заходите сюда в расширениях00:02:13
найдите португальский и установите здесь00:02:16
на этой синей кнопке красоты иногда это00:02:20
спроси об этом здесь, если хочешь изменить00:02:22
прямо твой язык, тебе нужно сделать то, что00:02:25
перезапустите код v, затем нажмите на это00:02:28
синяя кнопка Изменить язык Перезагрузить оттуда00:02:30
он закроет код v и откроет его00:02:34
в00:02:35
Это новое, вы заметите, что оно уже здесь.00:02:38
переведено, открытые редакторы00:02:41
добро пожаловать, он переводит код ves00:02:44
на португальский он переводит не все, но00:02:46
большинство вещей да, пойдем сюда00:02:48
в расширениях еще раз и посмотрим00:02:52
еще одно расширение, которое мы сделаем00:02:54
использовать, что очень хорошо, это Live00:02:57
тип сервера это появится00:03:00
первая ссылка здесь, живой сервер — это вы00:03:02
нажмите здесь на кнопку установки еще раз, и00:03:05
Живой сервер будет работать у нас00:03:09
всякий раз, когда мы сохраняем наши00:03:11
проект он перезагрузится и даст нам00:03:13
ты сможешь это увидеть, повидайся с ним00:03:16
перезагрузка в браузере например00:03:18
Chrome без необходимости нажимать кнопку00:03:20
F5 или обновите страницу00:03:22
поэтому он делает это автоматически, чтобы00:03:24
Это значительно облегчит юзабилити, не так ли?00:03:28
и наша производительность тогда00:03:30
установить того, кто собирался установить только S00:03:34
небольшая скобка о языке00:03:37
этот язык не является расширением PTBR00:03:39
многие люди скажут: «Ой, но не я»00:03:41
Мне следует оставить все на английском языке00:03:43
потому что английский важен, бла-бла-бла00:03:47
Английский важен, не так важен00:03:49
чтобы вы, ребята, начали вот так00:03:51
мы поместили это сюда00:03:53
переведено, чтобы помочь большинству00:03:56
люди там, потому что не все00:03:58
Мир знает английский, так это много?00:04:00
Можно ли использовать код v Studio?00:04:03
все на португальском языке будет иметь содержание00:04:04
Португальский также о нем в Интернете00:04:07
Так что нет проблем, ребята00:04:09
начни с его перевода, тогда если ты00:04:11
хотите, наконец, попрактиковать свой английский или если00:04:13
Вы уже знаете английский. Пусть он говорит по-английски.00:04:14
тогда нет00:04:16
проблема, затем другая, которую вы установите00:04:19
Это команда Omni, а что насчет Omni Them?00:04:25
вот этот вот этот первый здесь00:04:27
установка - это, по сути,00:04:30
тогда когда вы его установите, он будет00:04:31
здесь появится это поле, тогда вы сможете00:04:34
выберите первый здесь00:04:35
Омни, так что это тема, да, это тема00:04:40
это меняет цвета. Итак, если вы, если вы00:04:41
обратите внимание, что цвет кода vs здесь уже изменился00:04:44
Цвет красивее, шрифт меняется.00:04:46
Это также значительно упрощает00:04:49
программирование с использованием лучших цветов – это еще один00:04:52
мы собираемся установить vs code00:04:55
значки значки что это такое00:04:59
изменить значки файлов в жилете00:05:01
код, затем установите его, и он откроет этот00:05:04
коробка, в которой вы проверяете значки кода жилета00:05:07
новый00:05:08
здесь00:05:11
еще одна красота, которую мы можем установить, это00:05:13
o Цвет насыщенный00:05:17
легкого гула не появилось, идет загрузка00:05:22
здесь иногда такое случается и остается00:05:25
несущий бесконечно о, кто открыл о00:05:27
цвет Выделите этот00:05:30
установите его сюда, на маленькую кнопку00:05:33
установи и всё00:05:36
Есть кое-что, что вы можете сделать в этом случае00:05:40
он не просил меня перезапустить еще раз00:05:42
поэтому я не собираюсь начинать заново, потому что думаю00:05:43
что тебе не нужно, но если бы это дало тебе немного00:05:45
проблема или нет, не помогло00:05:47
перезапустить v Coach закрыть и снова открыть00:05:49
Он просто новый, и тогда он должен работать нормально.00:05:53
расширений, это еще одна вещь, которая00:05:55
мы хотели показать00:05:57
Я думаю, мне просто нужно объяснить, что это такое00:06:00
цвет Выделите, тогда я не думаю, что вы это сказали00:06:02
Выделение цвета предназначено только для отображения цветов.00:06:05
более наглядно, чем здесь00:06:08
это бывшая десятичная дробь цвета, верно?00:06:12
Иногда вам трудно знать точно00:06:13
Какой цвет невозможен, я бы сказал, но00:06:17
coloright он точно передаст цвет00:06:19
цвет, который представлен в примере00:06:21
десятичная для тебя, тогда будет проще00:06:23
чтобы ты увидел, но когда мы пойдем туда00:06:25
CSS, вы увидите это на практике00:06:27
окей, тогда все00:06:32
Я открыл его здесь, значит, код жилета — «на-на».00:06:34
моя папка00:06:36
ТС, и тогда я смогу прийти сюда снова00:06:40
файл создать новый индекс файла P00:06:44
HTML Вот как мы это называем00:06:49
обычно у нас есть HTML-файл00:06:51
чтобы поместить точку HTML, которая является расширением00:06:53
из Файл красоты, так что это важно00:06:56
потому что индекс Бето является стандартом00:06:58
имя, которое мы используем в00:07:01
программирование всякий раз, когда у вас есть индекс00:07:04
Обычно это сервер, верно?00:07:07
он будет искать файл с именем00:07:08
индекс для загрузки первым, затем он00:07:11
Важно, чтобы вы указали свое имя00:07:13
этого файла в качестве индекса, то мы00:07:15
вы загрузите этот проект на github, и если00:07:17
Если у вас нет индекса, это будет проблемой.00:07:19
индекс P HTML здесь в HTML. Тогда00:07:24
Затем мы сможем создать эту структуру, верно?00:07:26
куклы, у которой была HTML-голова O00:07:28
тело Но вместо того, чтобы мы пришли сюда и00:07:30
вот так всё печатаю от руки, хмл00:07:34
голова, мы сделаем следующее00:07:37
мы собираемся использовать emet. Верно, это одно, это одно,00:07:41
расширение также для кода vs, но уже00:07:42
Поставляется в установленном виде, устанавливать его не нужно.00:07:44
поможет нам в этом, поэтому, если вы наберете00:07:47
HTML откроет эти параметры здесь00:07:50
вот этот второй - аббревиатура, да?00:07:52
это будет сокращение от emet, если вы дадите00:07:55
нажмите Enter здесь, и он поместит все00:07:58
теги для вас00:08:00
базовая структура справа, которая представляет собой тип документа, который00:08:03
в основном означает, что это тот, который00:08:06
этот файл имеет тип00:08:08
HTML HTML-тег, верно, который мы там видели00:08:11
в изображении нашей куколки00:08:13
здесь тег head, тег bar и закрывающий00:08:17
поэтому он собирается создать все это здесь, чтобы00:08:19
у нас есть только одна команда, так что это00:08:23
очень хорошо насчет жилетного кодекса, и ты сможешь это сделать00:08:25
это вместе с несколькими другими вещами, которые я дал позже00:08:27
один учился в emet, и это действительно круто,00:08:30
много интересного, что ты можешь00:08:32
сделать с ним00:08:34
Есть еще кое-что, что нам нравится00:08:36
сделайте это, ребята, если пойдете, посмотрите00:08:38
здесь, в V-коде, я создал структуру и00:08:41
Итак, здесь был этот маленький шарик, вот этот.00:08:42
маленький белый шарик здесь, видишь ли.00:08:44
Это означает, что файл не00:08:46
если я не дам ему контроль00:08:49
Или, если я приду сюда, позволь мне00:08:52
давать меньше контроля, потому что я так не думаю00:08:54
ты появляешься здесь00:08:56
файл00:08:58
сохранить мяч исчезает, так что это здесь00:09:01
указывает, что этот файл сохранен в00:09:04
Нам нравится активировать сохранение00:09:06
автоматически в vs коде, почему, почему тогда00:09:08
нас00:09:09
тебе, в принципе, можно не оставаться00:09:12
делая этот контроль S каждый раз, когда вы00:09:14
Ты собираешься прикоснуться к файлу, да? Потому что, когда я?00:09:16
иди сюда, у бота здесь что-то есть00:09:19
маленький шарик, маленький шарик снова появился там00:09:22
ох, тогда мне придется снова ее спасти00:09:24
исчезает при автосохранении «Я, а не я»00:09:27
Мне не нужно продолжать экономить, отдавая контроль00:09:28
Как мне включить это постоянно?00:09:31
я приду сюда в00:09:32
файл придет сюда00:09:34
в автосохранении и я нажму00:09:39
Итак, если я снова открою файл здесь, в00:09:42
в меню я увижу, что оно отмечено00:09:43
здесь с небольшим поворотом. Это значит, что00:09:45
активирован, поэтому, если я приду сюда и00:09:48
напиши что-нибудь00:09:50
Ой, мяч не появляется, а он уже его спас00:09:53
автоматически мой файл, поэтому я00:09:55
Мне не нужно все время экономить00:09:58
даю кнопку S, так что здесь много00:10:00
Что ж, сделай это, потому что это поможет00:10:01
ты00:10:03
много, и это в основном все, верно?00:10:06
здесь, в Б, как я уже сказал, сюда ты идешь00:10:08
вещи действительно появляются, верно?00:10:12
HTML-элементы, которые мы напишем00:10:15
Например, мы использовали00:10:16
пример из тега P, тут же еще раз, ок00:10:18
угловая скобка P угловая скобка, когда00:10:22
Я делаю это, emet уже создает00:10:25
закрытие тега для меня00:10:27
автоматически, так что это очень хорошо00:10:29
мне тоже не нужно продолжать печатать00:10:32
закрытие00:10:33
здесь все время, и тогда я смогу написать00:10:36
да, я00:10:39
содержание содержания или абзац00:10:45
вы можете увеличить масштаб там00:10:48
Ах, ребята, я собираюсь увеличить масштаб, но меню здесь00:10:51
вверху это будет выглядеть так, ок, но нет Нет00:10:54
сильно переживай по этому поводу00:10:56
Хорошо, вот и все, и как мне00:10:59
Я заставлю PR увидеть эту страницу, верно?00:11:02
HTML-страница, на которой я ее вижу00:11:04
правильный браузер, тогда вы сможете00:11:06
здесь есть сочетание клавиш00:11:09
какой выход00:11:11
L держится, нажмите l и o00:11:16
тогда это Alt l для льва и яйцо для яйца00:11:20
то он автоматически откроет00:11:23
браузер здесь00:11:25
О, с нашим HTML здесь. Итак, если00:11:29
люди приходят сюда и нажимают на это00:11:30
сюда приходит текст, чтобы проверить нас00:11:34
вы можете видеть, что это наш HTML здесь00:11:36
Этот HTML-код — это то, что мы только что создали.00:11:38
создать здесь, в нашем vs00:11:41
код, отложите его сюда, и мы00:11:45
Затем вы можете сравнить HTML здесь как00:11:47
мы создали его здесь, что это?00:11:50
рендерится так, что если бы я увидел это здесь,00:11:53
пример, поместив o H, создайте право H1, которое является00:11:55
Тег заголовка, в котором я сказал, что я00:12:01
title Я не знаю, есть ли в названии акцент, но00:12:04
я так думаю00:12:06
название ох ох как круто я не я этого не делал00:12:10
ничего, я просто напечатал, а оно уже обновилось00:12:13
здесь в браузере для меня кто это00:12:15
сделай это Бето - это Live-сервер все00:12:18
Я пишу все, что делаю, он уже это сделает00:12:20
сохраните файл здесь, и он обновится00:12:22
в браузере для меня, если бы я этого не сделал00:12:24
Живой сервер мне бы пришлось остаться00:12:26
Выполнение этого вручную должно было бы изменить00:12:28
html Я зашёл сюда в браузере Я зашёл сюда00:12:30
обновляйте и продолжайте обновлять, чтобы поймать00:12:32
информация, которую я только что ввел00:12:34
здесь, в V Coach00:12:36
Хорошо, тогда все, ребята. Поздравляю вас.00:12:39
вы только что создали свою первую страницу00:12:40
HTML самая быстрая страница в мире00:12:44
Загрузка не занимает много времени, потому что это не00:12:45
Нет ничего, кроме этого00:12:49
да, теги есть00:12:52
Сколько еще тегов существует, кроме этого?00:12:55
Бето00:12:57
140 ах Бето, но я должен знать их всех00:13:00
Это не то, о чем мы вам говорим00:13:03
принцип Парето, верно?00:13:05
знаю 20%00:13:08
Ха, никто не знает их всех, и нет никакой возможности00:13:12
зная их всех, никто не знает их всех наизусть00:13:14
что мы говорим тебе00:13:16
принцип Парето, верно?00:13:18
знаю 20% максимум из этих 100 140 до00:13:22
уметь делать 80% вещей, веб-сайтов00:13:25
что тебе нужно, ладно, Бето, но как00:13:28
что я знаю самые важные вещи, такие как00:13:29
Я знаю, эти 20% мы дадим00:13:31
для тебя на карте, так что участвуй00:13:35
событие получить карту в пятницу00:13:37
это идет туда идет00:13:38
есть, и это в основном все, ребята00:13:40
еще одна вещь, которую я хотел показать00:13:41
ты больше не создаешь мне проблем00:13:44
Я собираюсь сделать следующее00:13:45
напиши сюда в П я напишу00:13:47
напиши Лорен, я тогда нажму Enter00:13:51
эмет он завершит здесь для меня одну00:13:54
Целый абзац, включая его00:13:57
Это даже выходит из до-да-да00:13:59
визуализация моего кода vs, верно?00:14:01
Чтобы сделать это, вам нужно прокрутить, вам нужно прокрутить00:14:04
вот скрин со стороны PR, чтобы увидеть00:14:07
полный текст, как мне увидеть00:14:09
полный текст в00:14:10
экран я могу зайти сюда в меню в00:14:14
файл, тогда я приду и посмотрю00:14:18
Дай-ка посмотреть, нет, это не здесь, это здесь, ох00:14:20
В этой маленькой шестеренке здесь00:14:22
сторона00:14:24
настройки то здесь в поиске могу00:14:27
печатать00:14:30
Перенос слов, тогда я поищу это00:14:35
о редактор Word00:14:37
обертка отмечена, верно? Я собираюсь щелкнуть и00:14:40
Я собираюсь позвонить, чтобы включить его, прямо сейчас?00:14:42
выкл. вкл. Итак, я включил это00:14:45
здесь перенос слов, он делает это здесь00:14:48
контролирует, какими должны быть линии00:14:49
сломано, поэтому теперь, если я закрою00:14:52
мы увидим, что строка представляет собой весь текст00:14:54
Он появляется в моем окне00:14:57
так что это очень хорошо для меня00:14:59
Мне не нужно00:15:00
продолжайте просматривать или прокручивать страницу00:15:03
сторона, так что это тоже хороший балкон00:15:05
там для00:15:07
вы, ребята, наша команда поделилась00:15:10
в наших сегодняшних историях в Instagram на @dev00:15:14
Indobro несколько юридических материалов, которые00:15:15
В течение года мы что-то делали с HTML.00:15:18
на протяжении всей нашей траектории и00:15:20
в основном словарь тегов HTML00:15:22
для новичков тоже, тогда туда00:15:25
наша Инста на @dev indobro, сохрани это00:15:27
контент, чтобы посмотреть позже, он включен00:15:30
наши истории Итак, если вы нажмете туда, вы00:15:32
зайди на пост, прямо в ленте, тогда ты00:15:34
ты можешь сохранить его и наслаждаться им сейчас00:15:37
Отметьте это тоже в историях, так что00:15:40
Тогда наша команда поделится00:15:41
некоторые люди, которые отметили нас Красоткой00:15:44
мы собираемся принять позу. Давайте, ребята00:15:48
примет для тебя позу00:15:50
ты фотографируешь, сфотографируешься с00:15:52
свой мобильный телефон или00:15:54
в любом случае, отметьте нас там @dev в инсте и00:15:59
Следуйте за нами там, подпишитесь на00:16:00
Инста, потому что это один из00:16:03
правила участия в розыгрыше Итак00:16:05
уже подписаны на нас в Insta Cadu, у меня нет00:16:07
Инста, что я делаю, создай Инста, это00:16:11
правил розыгрыша, то все исключает00:16:13
Я время от времени принимаю позу, вот и все00:16:16
фальшивый смех00:16:18
и забери00:16:20
распечатайте, а затем вернитесь в Live и возьмите его00:16:25
распечатай, если хочешь, это просто вещь00:16:28
Это тоже важно, ребята, о, Бето, ты сделал это.00:16:30
очень быстро что-то там, чего я не делаю00:16:33
Я видел Подожди, позволь мне вернуться сюда, я сделал00:16:37
Я многое сделал очень быстро, Бето, я не смог этого сделать.00:16:38
вернитесь к Live и снова увидите, что у вас есть00:16:42
эта возможность не потому, что это00:16:44
живи так, что ты не сможешь вернуться в Live00:16:46
немного и пересмотреть, потому что мы00:16:48
ты не сможешь остановиться и00:16:49
объясняя все много раз лично00:16:50
иначе Live займёт у нас 6 часов00:16:52
сделай это, нам нужно сделать больше00:16:56
быстро, вот и все, ребята00:16:58
Первым делом мы собираемся собрать00:16:59
первоначальная структура проекта, а затем здесь00:17:02
Будет несколько стандартов, которые мы00:17:04
Вы можете продолжать, да, но это мало что даст.00:17:05
разница на самом деле главная цель00:17:08
что у вас есть свой проект00:17:11
организовано Итак, мы собираемся сделать00:17:12
организация, которую мы всегда делаем в00:17:14
проекты, которые нам нравятся00:17:16
и вот важный совет, попробуйте00:17:19
следовать названию и номенклатуре00:17:22
вещи, которые мы создадим именно00:17:24
точно так же, как мы делаем, поэтому, если00:17:25
мы сделали имя класса со всеми00:17:28
строчные буквы, разделенные ифеном00:17:31
сделать то же самое, как если бы мы сделали это00:17:33
изображение с именем, написанным строчными буквами.00:17:37
то же самое, если ты не сделаешь это точно так же00:17:40
будут проблемы и тогда ты пойдешь туда00:17:41
нет нет нет разногласий спрашиваю что00:17:44
Все пошло не так, но это потому, что ты не последовал00:17:45
именно то, что мы сделали, если вы допустили ошибку00:17:47
кое-что, что ты сможешь получить00:17:50
проблема в вашем коде, поэтому будьте осторожны00:17:52
эта программа требует много внимания, поэтому00:17:54
тебе нужно обратить внимание на то, чем ты являешься00:17:56
делать это, по сути, это00:17:59
Так что давай, я поделюсь этим здесь00:18:01
мой V-код00:18:06
новое, первое, что я собираюсь сделать00:18:08
правда, я создам00:18:12
позвольте мне поделиться экраном сейчас00:18:17
Личная часть начнётся прямо сейчас00:18:18
мы действительно собираемся начать размещать00:18:20
внесение кода - это сделать наш HTML o00:18:25
Сначала я приду сюда, может быть, это оно.00:18:28
папка scpc позвольте мне00:18:32
Видите ли, возможно, я удалю этот HTML-код, который00:18:35
Я сделал ОК, я создам новую папку00:18:38
здесь я назову это проектом Dash00:18:42
Одно тире. Хорошо, я использую ifen.00:18:46
вот чтобы разделить слова00:18:47
крошечный Итак, я собираюсь создать эту папку00:18:49
здесь будет наша папка00:18:51
проект окей, Бето, я могу поставить акцент00:18:54
Имя00:18:56
папка Нет, нехорошо класть ее на сиденье00:18:59
В именах папок хорошо ставить пробелы00:19:02
Это всякий раз, когда ты собираешься расстаться00:19:05
слова разделяются, как я сделал с00:19:07
здесь иена или тире00:19:10
ОК, я введу его, я нажму00:19:14
здесь, в на00:19:15
папка будет внутри, да, и я собираюсь ее открыть00:19:18
с кодом V открыть здесь с этим кодом00:19:21
Домашняя страница кода появляется следующим образом:00:19:23
мелочи, ты можешь закрыть все00:19:25
ты можешь закрыть это и здесь, и ты сможешь00:19:28
показывает также, как открыть, не имея00:19:31
возможность открытия с помощью кода, потому что иногда00:19:33
Иногда сотрудники не имеют возможности открыть00:19:35
с помощью кода вы можете просто открыть00:19:37
ваш V-код, верно, откройте код Studio, оставьте его00:19:40
Я закрываю это, ты можешь зайти сюда00:19:44
File Open Folder выбирает папку00:19:47
здесь, на вашем компьютере, выберите00:19:49
папка тоже откроется, или вы также можете00:19:53
иди сюда и перетащи папку в00:19:57
Я думаю, это тоже работает, посмотрю00:20:00
он уходит00:20:01
копировать00:20:03
Это не тянет, это не лучшая идея, ладно, да.00:20:07
что вы уже находитесь в открытом проекте или00:20:09
открыть с помощью кода или посмотреть здесь, в файле00:20:12
Вы даже можете перетащить папку, но00:20:16
Это тоже худший вариант, я так думаю00:20:20
Вот и все, а затем внутри этой домашней папки00:20:24
мы откроем создадим новую папку00:20:26
и вот эта кнопка есть здесь, в новой папке00:20:30
нажав на нее, создаст папку00:20:32
ты можешь назвать все src00:20:35
tiny — после создания папки src00:20:39
что такое папка src, это папка00:20:41
что мы вложим все наши00:20:44
файлы, изображения, JS, CCS, все00:20:49
останется в этой папке, чтобы остаться00:20:51
более00:20:52
организованная красота00:20:54
Этот RC будет из исходного кода, верно?00:20:57
источник00:20:59
Отсюда мы можем создать00:21:01
здесь нажмите на папку src и00:21:04
нажмите здесь еще раз в новой папке00:21:07
Мы можем создать папку CSS для всего00:21:10
крошечный, вот это важно, ребята00:21:12
Он создал здесь src и CSS.00:21:15
правильно, вам придется нажать еще раз здесь00:21:17
над маленьким именем src, тогда оно останется00:21:20
отмечено здесь этим подчеркиванием00:21:23
потом снова заходишь сюда в папку и создаешь00:21:27
новую папку JS, затем вы нажимаете00:21:30
новое здесь, в src, оно будет помечено вот так00:21:32
Нажмите «Новая папка изображений», чтобы создать00:21:38
эти три папки, которые должны быть00:21:40
внутри источника ах B я не уверен, что я00:21:43
Я все правильно создал, или не приходи сюда, в твой дом.00:21:47
ваша папка Windows переходит в src и смотрите00:21:50
Если у вас есть три папки здесь, у вас есть00:21:52
вот так вот00:21:54
src и внутри трех папок вам нужно00:21:56
так оно и есть, иначе это неправильно00:21:58
если это неправильно, ты можешь просто00:22:00
перетащите папку Допустим, вы создали00:22:03
папка изображений здесь вместе с src00:22:06
Вы можете просто удерживать и перетаскивать его внутрь00:22:08
из источника00:22:09
красота и наконец мы щелкнем00:22:12
здесь, щелкните мышью, DAE останется00:22:15
проверил вот эту большую коробку00:22:17
вы можете прийти сюда в новом файле и создать00:22:20
индексный файл P hml, вот это00:22:25
базовая структура нашего из наших00:22:27
проект завершен, мы можем это сделать00:22:31
поместите изображения проекта в наш00:22:34
папка с изображениями, справа, наша команда,00:22:36
Возьмите почтовый индекс и отправьте его в00:22:39
канал раздора, который является проектом Tro One00:22:42
У TR pce есть канал в Discord, который00:22:44
Проект One Piece, чтобы люди00:22:47
Берите архив с изображениями и играйте.00:22:49
там для тебя, так что загляни ко мне00:22:52
у меня есть изображения00:22:54
Вот позвольте мне посмотреть, куда я это положил00:22:56
Теперь, верно, я думаю, что оно здесь, если оно здесь?00:23:01
н00:23:02
быстрый00:23:03
[Музыка]00:23:05
Хм00:23:15
проекты, которые я могу скачать здесь, у меня есть00:23:17
Оно тоже скачано и я его даже покажу00:23:20
Я покажу тебе, как это может быть00:23:22
что ты00:23:24
делать00:23:26
О, так я скачал это здесь, да?00:23:31
zip, я могу нажать кнопку выше, прийти00:23:34
вот у меня есть набор Zip и s Zip00:23:36
установлен, поэтому я могу прийти сюда00:23:39
извлечь в изображения, поэтому я извлек00:23:42
папку с изображениями сюда из папки я могу00:23:45
иди сюда, открой папку с изображениями00:23:48
выбери их все, да?00:23:50
перетащите их сюда, в00:23:52
изображения, оставь там отметку серым цветом00:23:55
изображения здесь, а затем просто отпустите, и все пойдет00:23:58
поместите все изображения сюда00:24:00
внутри папки изображений00:24:04
вот и все00:24:07
или вы также можете открыть свою папку00:24:10
проект там00:24:12
нет пути назад00:24:14
там открываем папку images копируем00:24:18
заархивируйте изображения папок и вставьте00:24:21
здесь, в папке вашего проекта00:24:22
это тоже будет работать так же00:24:24
вот и все, и мы собираемся00:24:28
здесь есть HTML, поэтому здесь, в HTML, есть00:24:31
с чего мы начнем создавать00:24:32
структура нашего сайта, верно, и вот здесь00:24:35
Многие уже запутались, даже не знают00:24:37
с чего начать, но это большой вопрос00:24:40
практики здесь, да представьте себе в нашем?00:24:41
возглавить структуру минимальная структура00:24:44
HTML, который мы хотим, со временем00:24:46
тебе будет легче00:24:49
структура Итак, позвольте мне открыть здесь00:24:52
холст00:24:53
Дай мне посмотреть, буду ли я с ним снова00:24:55
открой где-нибудь здесь00:25:02
хм хм хм, может быть, я закрыл это00:25:07
снова здесь00:25:08
[Музыка]00:25:11
Опять ребята из Canva, кто-нибудь, кто-нибудь?00:25:15
сделайте это вместе, если у вас есть00:25:17
проблема во время отправки сообщения на00:25:19
Discord уже отправляет вам ваш код00:25:23
в чем проблема, потому что тогда она останется00:25:24
легче помочь, это намного проще00:25:26
проще, чем говорить, я с00:25:28
проблема в моем коде и она исчезает00:25:31
ты должен отправить то, что даешь00:25:33
проблема В чем проблема, код, который00:25:36
чтобы люди могли больше помогать00:25:39
быстро ты видишь там00:25:41
Изображение Обезьяны Луффи, я вижу это, хм00:25:46
Итак, это структура, которая00:25:50
Мы его собираем, прямо с нашей стороны?00:25:53
нашего проекта Готов, да, о Бето, но00:25:57
Откуда мне это знать00:26:00
проект, что этот макет и есть этот рисунок00:26:02
что ты сделал, мне придется сделать00:26:04
Как я буду иметь Как я буду00:26:06
иметь доступ к этому, когда у меня есть00:26:08
работа в компании например00:26:10
Обычно это изображение не является тем макетом, который00:26:12
люди так называют этот сайт00:26:15
остаться, что по сути похоже на00:26:18
рисунок, кто это сделает, будет00:26:20
как правило, специализированный специалист00:26:22
в этом дизайнер, пользовательский интерфейс, да?00:26:26
это человек, который работает с интерфейсом00:26:27
с его или ее пользовательским опытом00:26:30
который создаст этот макет и передаст его00:26:32
разработчик, если вы параформируете00:26:34
этот макет в этом макете в коде, верно?00:26:37
так что это ISO, который вы собираетесь сделать в рамках00:26:39
компания, так что представьте себе, что это здесь00:26:42
макет, который мы получили и мы00:26:44
нужен ISO здесь, в HTML, в коде00:26:47
так что я уже могу в голове00:26:50
разделение этого сайта на несколько разделов00:26:52
вот, например, красная часть00:26:55
какая самая внешняя часть будет баром00:26:58
оранжевая часть будет главным тегом, верно?00:27:02
это тег, который является Main Beto Main00:27:05
главный тег на нашем сайте, прямо там, где00:27:08
идет основное содержание00:27:10
страница, а тег ul — это тег списка, который00:27:13
Это тег неупорядоченного списка, верно?00:27:15
неупорядоченный список, который по сути представляет собой00:27:18
список, в котором нет порядка, тогда почему00:27:22
Это действительно список, которого нет00:27:23
В нем есть порядок, но не обязательно00:27:25
порядок, да, что такое упорядоченный список?00:27:27
который будет тегом ol n ol, будет00:27:30
список чего-либо с чемпионата00:27:33
Бразилец, имеющий там рейтинг00:27:35
Олимпийские игры, поэтому, когда есть что-то вроде00:27:37
ты будешь использовать тег ol00:27:40
Когда нет необходимости иметь заказ00:27:42
вы можете использовать тег ul ta, это то, что00:27:44
мы собираемся использовать его здесь, чтобы я мог сейчас00:27:47
подумай об этом, прямо внутри моей панели тегов00:27:50
У меня будет два тега: основной тег и00:27:54
ярлык00:27:55
как составить исходную структуру, верно?00:27:58
Итак, вы можете думать так, как будто это было00:28:00
маленькие коробочки, из которых мы собираем эти00:28:02
маленькие коробочки внутри нашего кода00:28:05
Так что теперь я могу начать это делать00:28:08
это в моем HTML как раз перед00:28:11
забудь об этом, давай вернемся к V-коду00:28:15
Давайте создадим первоначальную структуру, хорошо?00:28:18
HTML, то мы можем выбрать это00:28:20
второй вариант хмл00:28:22
2.5 тоже вышел, дайте один00:28:26
там больший зумзин00:28:28
Вариант S тоже был здесь, ясно?00:28:32
восклицательный знак, да?00:28:35
создай вот так, у тебя есть эти два варианта D00:28:38
масштабируйте здесь и управляйте, но вы можете дать ему00:28:41
персональный контроль масштабирования меньше на клавиатуре00:28:43
ты уменьшаешь масштаб управления, но ты00:28:45
увеличить масштаб до00:28:47
увеличьте масштаб, вот структура00:28:50
п это было слишком00:28:53
сейчас и здесь, внутри Б, верно?00:28:56
наше представительство там00:28:57
маленький красный, я собираюсь начать создавать00:29:00
теги, как я сказал, верно?00:29:04
Main открывает и закрывает тег Main и тег ul.00:29:07
Итак, две маленькие коробочки здесь раньше00:29:10
Если я забуду, давай поменяем этот тег00:29:12
HTML — это длина, верно, это будет00:29:14
язык, да, язык страницы, я00:29:16
измените на PT TR BR, затем на строчную PT00:29:20
тро БР с большой буквы это будет страница00:29:23
где будет текст на португальском языке, верно?00:29:24
Португальский PTBR и название здесь тоже мое00:29:27
Я изменюсь, я напишу один00:29:30
Кусок00:29:32
тире неделя от нуля до00:29:37
Наемный программист, это звание00:29:42
которое появляется в браузере после00:29:44
Когда я открою страницу, вы увидите00:29:47
это больше00:29:48
легко, теперь перейдем к содержимому здесь00:29:51
Итак, мы уже разобрали коробки00:29:55
правильно, и и первое, что мы00:29:58
может00:30:01
тогда значит создавать, верно?00:30:05
структуру, которую мы всегда можем начать00:30:07
Думая, как будто я был снаружи00:30:10
внутри, несмотря на это, у нас есть00:30:13
часть снаружи, верно?00:30:15
часть Б Главного, да, мы можем идти00:30:18
зайдя в эти теги, собираюсь00:30:21
внутри них и построение HTML подробнее00:30:24
изнутри, да?00:30:26
так вот, например, позволь мне вернуться назад00:30:28
там00:30:31
Позвольте мне вернуться сюда00:30:35
презентация здесь, да, мы уже создали00:30:38
тело М — это Л, поэтому есть коробка А00:30:40
Out box, который является баром, коробкой00:30:42
внутри двух маленьких коробочек: главной и главной.00:30:44
Я и здесь внутри, да, этот, этот00:30:47
Главное, у нас будет эта информация00:30:49
затем имя персонажа и текст00:30:53
говорим о персонаже, поэтому мы00:30:54
Вы также можете создать больше ящиков здесь00:30:57
поэтому мы создали другое изображение00:31:00
вот как выглядит эта часть00:31:02
больше изнутри, да, это была бы часть00:31:04
внутри Main, чтобы мы могли иметь00:31:07
Вот мы еще продолжаем, да?00:31:10
b Главный здесь, Ларанжинья и L00:31:14
это Розинья, но внутри Мэйна00:31:17
У нас может быть еще одна коробка, которая00:31:20
div div — это тег, он также является тегом00:31:24
разделить тег, который не имеет большого значения00:31:26
семантики, верно, то, что мы это называем, не имеет00:31:29
много смысла, но оно служит00:31:30
группировать элементы, а это именно то, что00:31:32
мы хотим это здесь, верно?00:31:34
сгруппируйте этот другой div и это изображение00:31:37
поэтому для этого мы используем div00:31:39
снаружи, поэтому мы используем коробку00:31:41
из div еще один div здесь и изображение00:31:46
Здесь будет изображение персонажа00:31:48
Хорошо, мы можем построить это00:31:51
представительство также есть в нашем00:31:53
HTML, который будет выглядеть следующим образом00:31:58
внутри Main, помните, мы будем00:32:00
Нажмите Enter здесь, чтобы открыть этот тег00:32:03
Допустим, мы собираемся создать div00:32:07
мы собираемся нажать Enter, верно?00:32:09
внутри этого div у нас будет больше00:32:10
затем div и изображение00:32:13
div и разбиваем здесь от div до00:32:17
у нас будет IMG, можно просто00:32:20
напишите вот так в IMG и нажмите Enter оттуда00:32:22
он завершит кое-что для тебя00:32:26
атрибуты с пустым значением здесь00:32:28
Становится легче, правда?00:32:31
мы говорили здесь о некоторых тегах00:32:33
у них есть самозакрытие, а у тебя нет00:32:35
Нам нужно закрыться, потому что нас здесь даже нет.00:32:37
закрытие тега div, да и здесь оно не нужно?00:32:40
даже ты можешь или закрыть его, как этот бар00:32:43
или изображение, которое вы даже можете оставить без00:32:45
запретить в обе стороны, обе стороны работают00:32:49
Хорошо, вот и все, макроструктура, вот и все.00:32:55
поэтому мы создали отличный00:32:57
разделы нашего веб-сайта, и оттуда мы можем00:33:01
углубляйтесь в эти вопросы00:33:03
этих областей Там, чтобы создать больше тезин00:33:05
еще коробки для нас позже00:33:07
поместите информацию ОК, но прежде00:33:10
мы идем еще глубже и создаем больше00:33:13
теги, которые мы можем теперь начать размещать00:33:14
классы в нашем HTML. Затем00:33:17
занятия, я уже немного объяснил, что00:33:19
Вот когда мы создаем класс в00:33:21
какой-то тег, который мы в основном используем00:33:24
это или ты собираешься использовать это для оформления00:33:26
затем в CSS, поэтому я хочу изменить00:33:29
цвет текста, который я хочу уменьшить00:33:31
размер изображения, которое я хочу изменить00:33:34
стиль моего тега как-нибудь я00:33:37
Я помещу класс для этого тега00:33:39
иметь возможность представлять ее, чтобы потом00:33:41
измените это в CSS, например, здесь00:33:43
в теге М ты придешь сюда незадолго до этого00:33:46
перед закрытием здесь вы сможете00:33:49
поставьте пробел и введите «Класс равен»00:33:54
когда ты уже печатаешь лайк00:33:58
двойные кавычки здесь внутри, вы можете00:34:00
введите значение, которое является именем этого00:34:02
класс будет называться00:34:04
символы снова, да?00:34:07
имя, я хочу положить сюда картошку, если00:34:10
Я хотел, но я дам имя00:34:12
имя00:34:13
лучшее имя, чтобы идентифицировать это здесь00:34:16
чтобы вы не заблудились в CSS позже00:34:20
затем00:34:22
персонажи здесь, я собираюсь создать еще одного00:34:25
сорт00:34:28
персонаж в этом разрыве00:34:31
внутри я иду00:34:36
на самом деле создайте это изображение здесь00:34:38
мы можем поставить00:34:39
это здесь, а div ниже00:34:44
поэтому я просто скопировал это, да, так что немного00:34:47
сочетания клавиш для вас00:34:50
сдвиг, если я удержу рычаг переключения передач, я00:34:53
Я могу сделать это здесь, тогда я00:34:55
Я могу выбирать слово за словом00:34:58
или я могу переложиться и мой00:35:01
клавиатуру, а затем выделяю всю строку00:35:03
Итак, что я сделал, это дал00:35:05
выбрать всю строку и подсчитать00:35:07
нажмите X, чтобы разрезать, а потом я кончил00:35:10
вот с клавиатурой поднятой и приклеенной00:35:13
просто изменить порядок здесь, чтобы позволить00:35:16
сначала изображение, а потом00:35:19
это на картинке, я тоже могу поставить такое00:35:22
Класс, класс, который я позвоню00:35:25
то же изображение00:35:27
и в этом div здесь также будет00:35:30
содержание класса, а сейчас мы просто00:35:33
Это классно, здесь не то00:35:36
ничего не меняйте в HTML и здесь я помещу00:35:38
Сорт00:35:40
те же кнопки00:35:43
поэтому мы добавили класс почти во все00:35:46
тесты, которые мы создали, просто не00:35:49
мы вводим класс00:35:51
Тело, и теперь мы можем идти.00:35:54
входя в каждый из этих великих00:35:57
области здесь, начиная с изображения, затем00:35:59
изображение здесь мы не загружали изображение00:36:03
нет, да, настолько, что если бы я пришел сюда00:36:05
и нажмите Alt, чтобы открыть Live-сервер.00:36:08
в00:36:09
новый, экран пустой, да, ах, держу пари, но00:36:13
Почему оно пустое, потому что мы00:36:14
Вы еще ничего не разместили на странице, верно?00:36:17
ничто не имеет только тегов и тегов, которые они00:36:20
не обрезать не отображаться в браузере, если00:36:22
Я щелкаю правой кнопкой мыши и прихожу00:36:24
Вот, осмотрите, тогда я даже смогу00:36:27
см. теги здесь в div внутри div00:36:31
Есть картинка, я даже ее вижу00:36:34
Они здесь, но ничего не загружается00:36:36
потому что я еще ничего не добавил в теги00:36:37
чтобы мы могли загрузить изображение00:36:39
вот тогда это00:36:42
изображение, мы можем прийти сюда сейчас00:36:44
Атрибут src, который будет источником, верно?00:36:47
будет источником, где какой путь00:36:50
Это изображение находится в моем проекте и00:36:53
тогда я смогу загрузить изображение00:36:56
Чоппер00:36:58
как мне тогда загрузить изображение00:36:59
помните, что здесь у нас есть папка00:37:02
src внутри src имеет папку изображений00:37:05
а внутри находятся нужные нам изображения00:37:08
загрузи это изображение сюда, персонаж00:37:09
Дэш Тони Дэш00:37:11
чоппер - это тот, который мне нужен00:37:14
загружаюсь, поэтому я прихожу сюда, в источник, на00:37:17
источник, а затем я поставлю косую черту через точку00:37:20
Это здесь по сути00:37:21
поговорка о представлении начинается с корня00:37:25
мой проект, корень проекта здесь00:37:28
о, HTML здесь, в корне проекта00:37:32
так что начни с корня, а потом посмотри00:37:35
точка косой черты00:37:37
источник00:37:40
бар изображений тогда Ох против вещей он меня00:37:43
помощь00:37:44
Ребята, если я наберу точку, то уже слэш00:37:47
Это автоматически произойдет для меня, это даст мне00:37:49
вот структура папок, которую я00:37:52
У меня это есть в моем проекте, поэтому я могу пойти один00:37:54
выбрав здесь с помощью клавиатуры, чтобы00:37:55
вверх и вниз, затем я нажимаю Enter NC00:37:59
иди сюда на изображениях ниже, я даю одно00:38:01
войди и здесь я тоже указан00:38:03
все изображения, чтобы я мог загрузить00:38:04
здесь изображение чоппера, персонаж Т00:38:08
Chopper.png Я нажимаю Enter, и все идет00:38:11
дайте это путь к изображению в моем00:38:15
на выходе компьютера будет текст00:38:19
альтернатива, да, позволь мне показать тебе00:38:21
Как это получилось, позвольте мне рассказать вам00:38:24
это сюда в сторону и выложи проект00:38:26
вот здесь он уже загрузил изображение00:38:29
Тони Чоппер здесь, он просто гигантский.00:38:31
да, но она здесь, пока я не дам ей один00:38:35
меньше контролировать здесь, в браузере00:38:36
Я могу уменьшить масштаб, чтобы00:38:40
посмотри на всю картину, и если я дам00:38:43
control z0 Я вернусь в Zoom00:38:45
100%00:38:47
Итак, мы загружаем00:38:50
изображение и здесь в альтернативном тексте я00:38:53
Я хожу00:38:54
скажи в общем я поставлю немного00:38:57
информация, да? Что это за изображение?00:38:59
Поэтому я могу сказать00:39:02
характер00:39:04
Тони Чоп, для чего это?00:39:08
здесь Допустим, у меня возникла проблема00:39:10
у меня изображение не загрузилось00:39:11
По какой-то причине я собираюсь изменить название00:39:14
изображение здесь, Тони 1 2 3 Не делай этого00:39:17
Просто потому что на изображении будет ошибка, нет00:39:20
Нет изображения персонажа Трона.00:39:22
13. чоппер, с которым этого изображения не существует00:39:24
этого имени не существует, так что вот оно00:39:28
это даст, появится эта микросхема00:39:29
маленький конус, который представляет собой изображение с ошибкой00:39:31
изображение битое, но текст я вставил00:39:33
здесь персонаж Тони Чоппер он же00:39:35
появилось, так что вот это хорошо, если это дает00:39:38
ошибка в моем изображении, если есть проблема00:39:39
при загрузке у меня будет текст00:39:42
альтернатива здесь, что человек хотя бы00:39:43
буду знать, для чего это изображение00:39:46
программы чтения с экрана также для людей, которые00:39:47
Здесь этого тоже не видят, это очень много00:39:49
хорошо, что читатель придет сюда и уйдет00:39:51
говорю, что это изображение персонажа00:39:55
тонер, окей, тогда я вернусь сюда00:39:58
удалить 1 2 TR справа, чтобы загрузить снова00:40:00
изображение, а затем мы можем перейти к00:40:02
долг по содержанию00:40:04
так что я собираюсь открыть это здесь снова, пойдем00:40:07
здесь, в долгу за контент здесь00:40:09
О, я собираюсь нажать Enter, затем открыть div и00:40:13
закрой div здесь и внутри я напишу00:40:16
здесь контент, контент, который мы00:40:19
Я сказал N, это может быть текстовое сообщение00:40:21
элемент 1 2 3 но там тоже может быть00:40:23
другие теги, могу ли я зарегистрировать теги здесь00:40:25
внутри00:40:27
Итак, в нашем изображении позвольте мне попробовать00:40:29
откройте здесь изображение Ó, если пойдем00:40:32
посмотрите здесь, внутри этого div есть00:40:34
div контента, который мы перемещаем00:40:36
теперь у него есть логотип One PCe и название00:40:40
вот персонажа и текста Вот они00:40:42
три новых тега, которые нам придется00:40:44
создайте здесь, чтобы мы могли00:40:48
создайте тег I, который представляет собой тег значка n00:40:54
decon - это здорово, почему бы тебе не загрузить его00:40:57
изображение там, так почему бы тебе не00:40:58
используйте тег IMG, вы используете этот тег i там00:41:02
потому что логотип — это изображение, верно?00:41:07
нам придется повторить то же самое00:41:10
один и тот же символ div для каждого00:41:13
персонажей, которые у нас есть тогда00:41:14
у нас пять или шесть персонажей, нет00:41:17
Я вспомнил, дай мне посмотреть здесь 1 2 3 4 500:41:20
у нас есть пять символов.00:41:21
нам придется скопировать этот div00:41:23
символ пять раз, но затем, если00:41:26
мы повторяем этот же образ пять00:41:29
Иногда мы идем, это изображение будет00:41:31
взимается пять раз, что00:41:33
одинаковый00:41:35
изображение, независимо от того, насколько это изображение00:41:37
Маленький, это не очень хорошая практика00:41:39
с веб-сайта, который мы собираемся использовать00:41:42
что нам придется нести, да?00:41:43
потому что он загружается без необходимости00:41:46
одно и то же изображение несколько раз, затем00:41:48
Мы можем использовать тег, а затем в CSS00:41:52
Затем мы можем стилизовать этот тег00:41:55
выставив такое изображение, она уходит00:41:57
заряжайте только один раз, тогда мы сделаем00:42:00
покажу это тебе там, на-на00:42:02
Четверг CSS live, как он загружается00:42:05
изображение в CSS из тега00:42:09
поэтому мы создадим этот тег i и a00:42:11
Мы также дадим атрибут00:42:13
Класс, куда ему позвонить00:42:16
скоро, потому что здесь мы собираемся нажать Enter00:42:19
в конце закрытия i и vai00:42:21
создайте H2, который является еще одним тегом, верно?00:42:25
тег заголовка или заголовок два00:42:27
О, да, как вы видели, у нас было00:42:30
создал H1 до того, как появился H100:42:33
есть H2 есть H3 есть h h H4 висит00:42:38
язык там 5 и если, если я не ошибаюсь00:42:42
Их количество достигает шести, так что у каждого есть по одному.00:42:46
разный вес, один больше00:42:49
важно, а шесть - наименьшее, поэтому здесь00:42:51
мы будем использовать H2, потому что это не один00:42:54
такое важное название, у него даже есть00:42:57
Есть еще несколько вещей, которые вы можете сделать, чтобы использовать00:42:59
H1 например но говорят не работает00:43:01
использовать много h1 на одной странице00:43:04
почему H1 — самый важный заголовок00:43:07
Есть и другие люди, которые говорят, что это работает, но00:43:09
В любом случае, мы не будем вдаваться в подробности00:43:10
заслуга Сегодня мы создадим здесь H200:43:13
чтобы не затевать драку Итак, поехали00:43:15
создайте H2 и дайте ему класс00:43:19
он [Музыка]00:43:22
также и давайте назовем это тире00:43:26
персонаж, вот что я сказал00:43:27
ребята, если вы собираетесь называть имена00:43:29
Пиар усугубляет занятия Никогда не уходи00:43:32
Так что никогда не делайте этого с пространством всегда00:43:34
поставь один, если нам нравится его ставить00:43:37
У Ифен есть люди, которые это надевают00:43:40
да в любом случае, но всегда оставляйте все так00:43:45
вместе, если вы отделитесь00:43:47
создаем два класса для элемента00:43:50
и это не то, что мы хотим здесь делать00:43:52
мы хотим создать класс только тогда00:43:55
класс имени00:43:56
имя персонажа написано строчными буквами, сделай это00:44:00
точно так же, как мы делаем здесь00:44:02
ОК, и вот внутри тега мы идем00:44:05
поместите содержимое тега, который является именем00:44:07
его Тони00:44:11
чоппер, а затем здесь из H2 мы будем00:44:13
создайте еще один тег, который является тегом p00:44:16
абзац, который является тегом, к которому будет помещен текст00:44:18
правильное описание персонажа Итак00:44:19
мы также собираемся создать класс00:44:22
здесь мы назовем это описанием00:44:24
так что не ставь это00:44:26
Не нужно такое описание00:44:29
Cedilha с сиденьем имеет не только описание00:44:33
Даже если мы не используем акцент, мы00:44:36
не использует cedia в названии класса00:44:39
предпочтения, и здесь мы поместим00:44:42
Сообщение Тони, да? Это даже не от него?00:44:45
предпочтение не может это порождает00:44:48
Неверный HTML, не используйте его.00:44:53
акцентуация, вот такой замечательный текст00:44:55
от Тони Чоппера, чтобы00:44:59
вот не знаю, вставлю ли это, а потом00:45:01
Ты взял00:45:03
Это может быть лучше, не так ли? Или просто создать?00:45:08
такая маркировка00:45:11
пока00:45:14
Да, мы создадим тег, ладно?00:45:17
Ребята, если я напишу Лорен, дайте мне00:45:20
введите, создается небольшой текст разметки00:45:22
здесь просто для того, чтобы здесь был текст00:45:26
Да, это латынь, вот и все, я не знаю, нет-нет00:45:28
Я понятия не имею, что ты говоришь00:45:31
Потом мы передадим тексты00:45:33
конечно для00:45:34
ты, я даже думаю, что даже наш00:45:37
команда могла бы даже отправить тексты00:45:39
туда или Каду отправляет тексты туда00:45:43
девятый00:45:44
раздор, но мы всегда в конце00:45:47
В прямом эфире мы отправим этот файл00:45:48
проект здесь также этой части HTML00:45:50
застегивается для тебя. Хорошо, но тогда всё00:45:55
в основном это все00:45:58
эй, а теперь мы собираемся скопировать этот div00:46:02
для каждого персонажа и изменение имён00:46:04
и изображения и тексты такие00:46:07
div здесь o div Класс символа вы00:46:09
ты можешь просто взять00:46:12
она отмечает, что все ее здесь содержат CRL C для00:46:16
скопируйте пару, введите сюда, чтобы подарить одну00:46:18
мало места и00:46:21
клей, ты сделаешь это пять раз, тогда00:46:24
Здесь уже есть один, верно?00:46:26
два, так давай повторим 3 4 500:46:31
Итак, у нас создано пять элементов div, и теперь00:46:35
Тогда мы собираемся изменить изображения00:46:38
персонаж второй, дай мне посмотреть, кто это00:46:41
О [Музыка]00:46:43
второй — это чоппер, затем — это00:46:48
Зуро, тогда мы сможем прийти сюда00:46:50
Вы можете удалить его здесь, пока00:46:52
персонажа, и тогда он даст вам00:46:54
варианты другие варианты, затем роно аоро00:46:57
там персонаж Ророноа00:47:03
zouro Итак, измените Alt здесь, измените нет00:47:07
src меняется здесь, на H200:47:10
Рон00:47:12
Зоро, текст после тебя остается таким же00:47:15
изменить Тогда давайте перейдем к следующему следующему00:47:19
кто00:47:21
следующий Луффи00:47:23
Так что выбери это, Обезьяна.00:47:26
Луффи затем меняет. src меняет здесь альтернативный вариант.00:47:29
из изображения к Monkey de p00:47:35
Луффи и в H2 также Монки Д.00:47:43
Луффи следующий00:47:50
Аами персонаж Нами00:47:54
характер00:47:58
Нами и вот оно00:48:01
Нами и последняя — Сэнди, так что вот00:48:06
Это00:48:09
Сэнди персонаж00:48:13
Песок и H200:48:18
Песок00:48:21
Вот и все, посмотрим, как пойдет00:48:24
оставайтесь на нашем сайте AB на сайте00:48:27
Вот где это?00:48:29
О, так это сайт, да?00:48:32
давайте прокрутим вниз, мы будем00:48:33
видите, что есть изображение вертолета, тогда есть00:48:35
название чоппера текст есть изображение00:48:39
вот, позвольте мне уменьшить масштаб здесь00:48:41
У вас есть фотография00:48:44
Зуро с его именем в его тексте есть00:48:47
изображение00:48:49
Луффи Нами и Сэнд здесь, так что все здесь.00:48:56
а теперь перейдем к списку кнопок00:48:58
персонажи, да, что это за часть здесь?00:49:01
этот список маленьких кнопок00:49:03
вот что в нашем представлении00:49:06
наш HTML здесь, поэтому внутри00:49:10
из тега мы нажмем Enter и00:49:13
Мы собираемся создать здесь еще несколько тегов.00:49:15
поэтому, когда мы создаем00:49:17
какой список нам нужно создать00:49:22
перечислить элементы, которые являются другим тегом00:49:25
который читается, чтобы я мог печатать вот так00:49:27
Li и нажмите Enter, после чего будет создан00:49:30
тег для00:49:31
я открываю и00:49:35
закрываюсь, а потом внутри да до ли я00:49:39
тогда могу добавить еще теги00:49:42
Это кнопки, как мы уже говорили, они00:49:44
кнопки Итак, у нас также есть тег00:49:46
который представляет собой кнопку, которая является тегом00:49:48
button Итак, вы пишете Button Gives a00:49:50
введите, это также завершится для меня00:49:53
и тогда я могу нажать Enter здесь, чтобы00:49:56
сломать, верно, поэтому внутри тега Button я00:49:59
Я создам еще один тег00:50:01
IMG Я нажму Enter, чтобы вы прочитали00:50:06
внутри моего Ли есть кнопка00:50:08
внутри кнопки у меня есть MG. Так что00:50:11
Ребята, это иерархия, по которой вы идете.00:50:13
видеть, как Иерархия работает00:50:16
отступ всякий раз, когда у меня есть вещи00:50:18
внутри здесь будет отступ с00:50:19
Это место — единственное, куда я могу попасть.00:50:22
Взгляни и посмотри на красоту, это тег MG00:50:24
внутренний загрузочный тег, который находится внутри тега00:50:27
Я читал, что это внутри тега, если вы00:50:32
нажмите здесь на L на L, вы можете увидеть00:50:33
здесь, здесь завершение, здесь открытие00:50:36
Если вы нажмете здесь на «Тело», вы сможете00:50:38
посмотри здесь и он тебя тоже отметит здесь00:50:40
О, это начало Тела, так что это00:50:43
Это также помогает найти вас в вашем коде и00:50:47
Итак, мы собираемся поставить этот00:50:49
маленькое изображение00:50:50
круглый, тот, да, то же самое?00:50:53
внутри тега im IMG у меня есть атрибут00:50:56
src — источник, right — путь к00:50:58
мой образ, тогда я укажу на него00:51:01
бар00:51:03
src, тогда я получу свои00:51:06
мое другое изображение здесь00:51:07
трох экипаж00:51:09
чоппер.png00:51:11
а потом здесь в00:51:14
Альт я могу00:51:18
помещать00:51:20
экипаж плачет о00:51:24
пример00:51:27
ОК, я сделаю это пять раз00:51:30
поэтому я собираюсь скопировать это сюда еще раз00:51:33
Прочитал, дам управление и вставлю00:51:37
2 3 4 5 и я поменяюсь00:51:43
здесь после вертолета идет Зуро00:51:50
уляция00:51:53
Зуро после Зуро приходит Луффи00:51:59
команда команды00:52:06
Луф, здесь может быть роно аоро00:52:11
сразу после прихода Луффи00:52:15
Команда Нами00:52:19
Нами и автор00:52:23
последняя шкаторина осталась00:52:28
это был М декабря00:52:30
Мона не осталась в понедельник, ах00:52:35
да, вот и все, посмотрим, что получится00:52:40
есть у нас на сайте o Так оно уже появилось00:52:43
Вот список с флагами00:52:46
ХОРОШО00:52:48
а эти шарики остались здесь, да?00:52:52
весь сайт был00:52:54
издевались Но нет проблем, мы пойдем00:52:57
Тогда вы это исправите, ладно, ребята?00:53:00
вот и все, ребята, вот основа00:53:02
наш проект практически завершен00:53:04
готово, всего несколько вещей, которые мы00:53:07
мы хотим сначала сделать это здесь00:53:09
давайте поставим один сейчас00:53:12
классы, которые будут выбраны, которые будут00:53:15
в основном так, чтобы мы могли сделать00:53:17
этот выбор персонажа, когда00:53:19
Щелкаем правой кнопкой мыши и покажем00:53:20
то, что мы нажали, и скрыть00:53:22
другие, поэтому мы идем00:53:23
нужен урок, но эта часть00:53:25
покажи и спрячь, мы сделаем это00:53:27
CSS Live Хорошо, но оставим00:53:29
класс готов, так что пойдем сюда, ох00:53:32
в div класса персонажей Луффи00:53:37
поэтому я прихожу сюда, Несса здесь, которая является00:53:40
третий дивизион, позвольте мне посмотреть, это третий00:53:43
иди сюда на класс персонажей и дай00:53:46
пробел и напишите выбранное, затем00:53:49
здесь будет два класса, будет00:53:51
класс персонажа будет иметь класс00:53:53
выбрано, то мы будем использовать это00:53:55
здесь здесь, чтобы выбрать персонажа00:53:57
когда мы нажимаем «Почему00:53:59
мы уже оставляем это отмеченным в передней шкаторине00:54:01
выбрано, потому что, когда мы открываем00:54:03
Сайт Luf появился первым00:54:05
поэтому он будет выбран по умолчанию00:54:08
окей, и там, в нашем, в нашем, где00:54:13
Есть Лисы, нам тоже придется00:54:16
поместите выбранный класс, включая меня00:54:19
Я не помещал сюда класс, поэтому мы00:54:20
вам придется поместить это сюда, на кнопку00:54:25
дайте мне немного места и напишите00:54:27
Место для кнопки класса, выбранное в00:54:31
правда, это не этот, это не этот, отпусти его00:54:33
этот только с первой кнопкой здесь00:54:36
по тому же классу00:54:39
кнопка там, в третьем пространстве классов.00:54:44
выбрано Почему в третьей бета-версии00:54:47
потому что третий это Луффи и Лафф00:54:49
Его маленькая пуговица тоже должна будет прийти00:54:51
там, где маленькая кнопка, находится список, который00:54:53
Это справа, вам придется прийти00:54:54
выберите n также по умолчанию здесь в00:54:59
в другой мы тоже поместим один00:55:00
Сорт00:55:02
кнопка и здесь, в последней, еще и класс00:55:06
кнопка00:55:08
ОК, вот и все, ребята, в общем, все закончилось.00:55:10
основная структура, но источник нашего00:55:12
Сайт немного не в порядке, не так ли, если посмотреть сюда?00:55:16
О, например, Нами, вот этот00:55:19
этот стиль шрифта, который00:55:22
отличается от нашего кода00:55:25
конец здесь, мы покажем здесь00:55:29
вы видите, что источник здесь передней шкаторины00:55:32
Соломенная Шляпа, а также название00:55:34
совершенно другое, да?00:55:37
мы делаем, чтобы загрузить шрифт в00:55:40
наш проект, наши проекты, прямо мы00:55:43
буду использовать шрифты Google для тех, кто этого не делает00:55:46
Вы не знаете, есть ли оно у вас здесь?00:55:49
У Fontes есть этот сайт здесь Google Fontes00:55:53
позвольте мне открыть00:55:55
Итак, в принципе здесь мы можем00:55:58
получить несколько источников, есть несколько источников00:56:00
бесплатные ресурсы, которые мы можем использовать в наших00:56:02
Сайт бесплатный, платить ничего не нужно, понятно?00:56:05
Итак, для нашего проекта мы будем использовать00:56:07
два источника один источник00:56:10
светский, так что вы можете прийти сюда в00:56:14
в поиске и вставь светский вот такой00:56:18
вот этот, светский. Тот, который ты нажимаешь00:56:21
вот и ты00:56:23
здесь00:56:26
ох, давай посмотрим, где эта маленькая кнопка00:56:29
вот эта обычная кнопка выбора00:56:32
400, нажмите на него, и откроется другой00:56:35
вкладка здесь, она появится здесь, светская00:56:39
Одна обычная красавица из 400, которую вы ищете.00:56:43
еще раз и наберите Rubik Rubica00:56:49
Рубика, вот эта, Рубика а00:56:53
сначала нажмите на него00:56:57
Затем вы также выбираете выбор здесь00:57:00
обычный 400, это здесь, потом здесь00:57:02
Это толщина шрифта, ладно, ребята?00:57:04
чем больше, тем выше значение здесь, верно?00:57:06
Самая тяжелая цифра — шрифт o Итак, это00:57:10
вот00:57:11
900 было бы смело, не так ли?00:57:16
но нам нужен вот этот, обычный 40000:57:19
Ха, жирный сильнее, жирный00:57:25
нажмите здесь, и тогда мы получим это00:57:28
два шрифта o светский One и Rubik00:57:30
отмечено здесь, чтобы мы могли прийти сюда00:57:33
ниже00:57:34
О, есть два способа импортировать это в00:57:37
ваш сайт может использовать ссылку как00:57:39
помечает тег ссылки или импортирует из CSS нас00:57:43
вы воспользуетесь ссылкой, ладно, ребята, так что просто00:57:45
иди сюда, на эти маленькие квадратики здесь00:57:48
щелкните, а затем скопируйте, он копирует все00:57:51
этот текст, нажав здесь, и вы можете там00:57:54
там, в твоем00:57:56
проект можно сделать там очень быстро00:58:00
посмотри в прямом эфире и посмотри еще раз00:58:04
Ребята, вы можете получить его там по адресу00:58:06
Подробно, поставь видео на паузу, ок00:58:10
Это здесь, тогда ты приходишь сюда, возвращаешься к Главе00:58:14
здесь, в вашем проекте, да? Это может быть здесь?00:58:16
после этой цели здесь, в этом теге00:58:20
мета нажмите два входа и нажмите V, чтобы00:58:23
вставить00:58:25
личный совет, когда я его вставил00:58:28
У него были неправильные отступы, верно?00:58:31
Всегда полезно делать отступы в коде, как это делаю я.00:58:33
Я сказал, как мне сделать отступ в коде00:58:34
проще в коде vs есть ярлык00:58:37
Shift удерживайте Shift удерживайте Alt и нажмите F00:58:41
сдвинь Alt и нож, тогда ты сможешь это сделать00:58:45
отступ кода автоматически00:58:47
Сейчас это выглядит так мило00:58:51
индентор — это я уже объяснил, что такое отступы, верно?00:58:53
но это в основном так, если вы заметили здесь00:58:57
он вот такой, он в стороне, да?00:58:59
стоматологический я собираюсь положить00:59:01
такой код, я помещу их в00:59:04
иерархия, да, я еще даже не упомянул об этом00:59:07
Это проще сделать с помощью00:59:10
сочетание клавиш Alt F оттуда00:59:13
я код00:59:17
автоматически, вот и все, поэтому мы помещаем00:59:21
Google шрифты здесь, прямо сейчас, если я00:59:25
вернись на мой сайт, ты увидишь это00:59:26
Ничего не изменилось, шрифт остался прежним.00:59:29
ничего не изменилось, потому что зачем мне это нужно00:59:32
d стиль шрифта вправо увеличивает масштаб00:59:35
шрифт, пожалуйста, в тексте, который я хочу00:59:37
здесь его нет, я просто нес00:59:41
шрифт на сайте нет, я его не стилизую00:59:43
текст по-прежнему личный для нас00:59:45
стилизую текст в CSS, вот я00:59:49
Я просто покажу вам пример, верно?00:59:51
тебе нужно сделать эту часть, если ты этого не делаешь00:59:53
они хотят, но просто чтобы показать, что это работает00:59:55
Как это будет работать позже, когда00:59:57
можем ли мы действительно оформить это в CSS?01:00:00
так что я собираюсь прийти сюда и прочитать сообщение Нами01:00:01
Хотя я уже здесь01:00:04
страница о, Нами, позволь мне открыть ее01:00:09
вот я собираюсь приехать сюда, в По, вскоре после этого01:00:13
этого атрибута здесь, в классе, я дам01:00:15
место и я буду01:00:17
тип Style, который является еще одним атрибутом01:00:21
стиль, да, так что обрежьте стиль в этом01:00:23
конкретный тег01:00:26
я могу сказать01:00:27
Шрифт тире Семья два01:00:31
пункты открытия закрытия котировок01:00:37
просто, я могу поставить здесь запятую01:00:40
здесь01:00:41
Не обращайте на это особого внимания сейчас01:00:43
Мы объясним это позже в прямом эфире.01:00:45
CSS, но просто чтобы показать вам01:00:47
как выглядит действие, если вы заметили01:00:50
уже Он изменился, я даже снова уберу тег.01:00:55
атрибут Извините, я собираюсь удалить атрибут01:00:57
стиля, взгляните вот на это01:00:59
Я собираюсь удалить атрибут из этого текста01:01:05
стиль, стиль01:01:09
источник Итак, вот как мы даем01:01:12
другой стиль шрифта нашего сайта01:01:14
ОК, еще раз, это не лучший способ сделать это01:01:17
Тогда я выключу его и пойду.01:01:19
уйти без01:01:20
Это лучший способ сделать это01:01:23
Семейная стилизация01:01:25
источник находится в CCS, который мы покажем01:01:27
для тебя в прямом эфире01:01:29
Четверг, вот и все01:01:33
Да, HTML готов к стилизации.01:01:36
на следующем занятии страница будет в порядке01:01:38
очень некрасиво, да? Как видите?01:01:39
сюда, если вы хотите иметь красивую страницу01:01:43
готовую страницу, примите участие в01:01:46
Прямой эфир в четверг, где мы01:01:47
создадим стиль Итак, мы сделаем01:01:49
поговорим о том, что такое CSS, мы будем01:01:51
поговорим обо всех классах селекторов01:01:54
важная юридическая информация о CSS01:01:57
в четверг в прямом эфире и мы преобразимся01:01:59
Следовательно, наше наше01:02:01
небольшой проект для этого, вот финальная версия01:02:06
милая стилизованная работающая красавица01:02:09
Без лишних слов, давайте перейдем к коду01:02:12
вот и я уже раздевал файл, чем01:02:17
Бето отправил это на канал do do01:02:19
Проект One Piece уже здесь, и вот у нас есть01:02:22
папка, да, она появится вот так, я нажму01:02:24
щелкните правой кнопкой мыши вверху, и я дам01:02:26
открыть с помощью кода01:02:27
Вот кто хочет сделать это вместе, теперь может01:02:30
начать01:02:31
сделай это, вот так и будет, да?01:02:34
у нас был HTML-индекс src01:02:37
с папками CSS, которые пусты, папка01:02:40
изображений, в которых есть изображения и папка01:02:41
JS, который сегодня тоже пуст, мы будем01:02:43
в основном работает в папке CSS01:02:46
Хорошо, давайте начнем с предупреждения, ладно?01:02:49
непосредственно перед тем, как мы начнем, если во время01:02:52
объяснение, ты чего-то не понимаешь01:02:53
Все в порядке, мы объясняем это01:02:56
лучший способ дать это, но у него есть концепции01:02:59
Здесь нам придется обратиться01:03:01
чуть более поверхностная форма невозможна01:03:03
вникать глубже во все, потому что если01:03:05
Если бы мы это сделали, мы бы не смогли01:03:08
не прошло и недели, да? Там много дел?01:03:10
очень-очень важная тема для01:03:12
Я думаю, работа с Live займет часов 501:03:14
никто этого не хочет, а потом ты01:03:18
вернись, пересмотри, делай дела, иди, делай дела01:03:21
сохраняйте свои записи у нас01:03:23
чтобы Эндер всё спокойно и тогда ты01:03:26
вернись и пересмотри, я думаю, это01:03:28
это был бы лучший сценарий. О, я хочу это сделать01:03:30
вместе, тогда делайте это вместе, есть проблема01:03:32
также, если вы застряли и не можете01:03:34
вперед дальше назад к обзору в реальном времени, тогда ладно01:03:37
вот как ты можешь сделать это в первую очередь01:03:39
Что я собираюсь здесь делать?01:03:41
это попасть сюда, в эту папку01:03:44
CSS, окей, я нажму на него и приду01:03:49
здесь, в новом файле Нажмите кнопку01:03:51
прямо из нового файла вашей мыши01:03:55
и я собираюсь создать такой, которому вы сможете дать еще зо Z01:04:00
затем управляй, но увеличивай масштаб, ок01:04:03
да, мы думаем о людях01:04:06
то, что они делают на своем личном мобильном телефоне, это01:04:09
не только последователи01:04:12
мне так хорошо01:04:16
Хороший Зум, раз ты мне не ответил, я пойду01:04:19
скажи да, reset.css Ты создашь01:04:22
файл с таким именем здесь, сбросьте настройки01:04:25
temudo pcss создает там файл, когда01:04:29
ты ставишь CSS, ты говоришь, что это01:04:31
это будет файл с кодом01:04:33
CSS внутри — это CSS-файл, верно?01:04:36
простая красивая укладка01:04:40
Так и есть и в Ресете написано01:04:45
это будет сброс, верно?01:04:48
он идет01:04:50
содержать01:04:52
селекторы, которые идут01:04:54
удалить настройки по умолчанию в браузере01:04:57
потому что, возможно, ты не знаешь, но01:04:59
когда когда мы открываем файл01:05:01
внутри браузера он уже есть01:05:03
некоторые стили, которые являются его стандартом01:05:06
да, и часто мы не хотим этого01:05:08
стили, поэтому нам нужно создать01:05:10
файл, чтобы удалить или удалить эти01:05:14
эти стили являются стандартными, а затем01:05:16
мы создаем этот файл reset.css, ок01:05:19
внутри него мы сделаем вот так01:05:20
мы собираемся поместить этот файл01:05:22
селектор, да? Мы видели это там?01:05:25
объяснение презентации, которая01:05:28
В эту звездочку вы введете это01:05:30
открывается пространство звездочки в первой строке01:05:33
Ключи вот ты01:05:36
Вы можете закрыть Чавеса, верно, и прийти сюда посередине.01:05:40
и нажмите Enter ОК И вот01:05:43
создайте все свойства, которые вы01:05:45
нужен вот этот селектор, нравится01:05:47
это универсальный селектор, он подойдет01:05:49
эти эти эти стили во всех01:05:52
элементы нашего экрана именно01:05:54
Это то, чего мы хотим, по крайней мере, сейчас01:05:56
Хорошо, мы сделаем это вот так01:05:59
мы будем использовать Опу, мы будем01:06:00
используйте свойство, которое представляет собой маржу vs01:06:03
код, он уже вам очень помог, он уже дал вам01:06:05
там опция маржи, о, я только что набрал М хе01:06:07
дал опцию «Маржа, которую я могу нажать»01:06:09
введите его уже будет создано в структуре01:06:11
свойство, которое является ключом, правильное имя01:06:14
имущества, которое представляет собой маржу два01:06:17
точки и здесь внутри здесь идет01:06:20
значение правильное, а затем идет точка с запятой01:06:22
право на закрытие, как если бы оно было01:06:24
заканчивая эту инструкцию в этом стиле01:06:27
здесь мы скажем, что у него есть01:06:28
нулевая маржа нулевая маржа - это, по сути,01:06:31
сказать: «О, я хочу, чтобы ты взял пятерку»01:06:34
Маржа, верно? Маржа находится на расстоянии.01:06:38
будет расстояние между элементами01:06:41
между элементами, то это01:06:43
в основном это то, для чего я иду01:06:46
Пока оно не откроется здесь, я положу это сюда01:06:47
с этой стороны я собираюсь открыть ту, к которой собираюсь прийти01:06:52
Это может быть и здесь, при перезагрузке.01:06:54
Я верю, что если вы удержите Alt, это произойдет.01:06:56
Открой проект, я вставлю?01:07:01
здесь, сбоку, чтобы мы могли видеть01:07:04
что-то происходит, о, одно дело01:07:06
Здесь важно, я ставлю запас01:07:09
ноль, и похоже, что ничего не произошло, верно?01:07:11
Я знаю, что ничего не произошло, может быть01:07:12
кто никогда не видел этого, кто никогда не видел этого здесь01:07:14
идти01:07:15
Это не будет иметь большого значения, но я знаю01:07:18
этого не произошло Так почему Почему01:07:20
Я не привязывал сюда этот файл сброса01:07:24
в нашем HTML, что означает ссылка на01:07:28
сброс CSS с помощью HTML — это, по сути,01:07:30
Мы должны сообщить здесь, пусть закроется01:07:32
вот, управление Б, открываешь меню и01:07:35
закройте этот элемент бокового меню здесь01:07:37
B для болола qu b для01:07:41
ОК, я закрыл меню, чтобы иметь01:07:45
больше места, позвольте мне открыть больше здесь01:07:47
так что же это будет такое?01:07:50
ОК, давайте зайдем сюда01:07:54
из01:07:55
Заголовок Это может быть здесь перед заголовком Что01:07:59
Эта часть может даже увеличить экран до01:08:00
стать немного легче01:08:05
смотри, вот и все01:08:09
Вы свяжете этот файл?01:08:11
CSS с нашим HTML, потому что HTML01:08:14
когда он загружается, он должен загрузиться01:08:16
файл ваши файлы CSS01:08:18
иначе он не сможет подать заявку01:08:20
нет стиля, так как же так01:08:22
что мы делаем, чтобы сделать эту ссылку, это вы01:08:25
вы можете ввести ссылку vi здесь с клавиатуры01:08:28
и выберите вот эту ссылку 2.ss введите01:08:31
он уже создаст всю структуру для01:08:34
вы делаете ссылку, правильно, свяжите HTML01:08:38
с CSS то вы приходите сюда на ВЧ где01:08:40
style.css здесь, он его поставил просто ради01:08:42
стандартно, да, но в нашем случае мы хотим01:08:45
сделай это вот так, косая черта, почему потому что01:08:48
мы начинаем из нашей папки01:08:51
Вот корень нашего проекта, верно?01:08:53
Мы уже видели это в классе01:08:54
HTML для загрузки изображений, после чего вы01:08:57
boot pon barra src, это наша папка01:09:00
у которого есть SSS, правильный CSS, это папка, в которой есть01:09:03
сам CSS, и здесь у нас есть01:09:06
reset.css Вот и все, теперь CSS01:09:11
связано с HTML Хорошо, давайте вернемся01:09:14
вот я отложу это в сторону и01:09:17
мы увидим, что что-то произойдет01:09:19
Смотри сюда, я собираюсь вернуться к сбросу01:09:22
Я поставил это поле, да, я его удалю?01:09:24
Я дам точку с запятой для управления01:09:28
прокомментируйте этот код, когда я комментирую01:09:30
код, вы можете заметить это здесь01:09:33
вокруг изображения чоппера есть01:09:36
правое пустое место здесь строка01:09:40
Когда я нажму, я выберу снова01:09:42
Все, я нажму здесь, я выберу01:09:44
снова и снова контрольная точка с запятой он01:09:46
раскомментирую01:09:48
ОК, теперь он исчез в стороне01:09:52
затем был применен стиль01:09:54
правильно, почему это исчезло?01:09:56
маржа, которая была вокруг, потому что я01:09:58
Я поставил нулевую маржу, теперь поехали01:10:01
сделать эту разницу, она была01:10:03
там, потому что браузер размещает стили01:10:06
в тегах некоторые стили в некоторых тегах01:10:09
По умолчанию так, да? Почему?01:10:12
в основном просто чтобы иметь что-то вроде01:10:15
стиль в теге, а затем, например, поле01:10:18
Это стиль, который входит в стандартную комплектацию01:10:20
некоторые теги, которые мы можем удалить01:10:22
удалите это, используя эту технику сброса01:10:25
да, а зачем нам работать?01:10:27
на полях или в самом интервале01:10:30
используя наш SSS, мы не хотим01:10:32
браузер продолжает стилизовать вещи, которые01:10:34
мы не будем01:10:35
используйте так, чтобы один из них был маржей, другой01:10:38
то, что мы можем получить, также является01:10:40
дополнение, дополнение будет интервалом01:10:44
и внутренний по отношению к01:10:48
элементы являются противоположностью полей, верно?01:10:52
например, здесь, если мы дадим01:10:54
особенный здесь или в01:10:56
браузер, позвольте мне перетащить это сюда, чтобы01:10:58
Здесь, внизу, есть маленькая коробочка, в которой01:11:01
в самом низу, в самом конце, вот01:11:04
Маржа, граница, отступы, вот и все.01:11:07
как будто это коробочка, элемент, да?01:11:10
элемент, например div, вот он01:11:13
будут все эти, это как одно целое01:11:15
у лука нет поля, которое является01:11:17
расстояние за пределами границы элемента01:11:19
Отступ, который представляет собой расстояние внутри01:11:21
и содержание такое, я здесь01:11:23
сохраняя поля и дополняя эти два01:11:26
и тогда я тоже смогу сделать один-один01:11:29
другой, чтобы поместить другое свойство, которое01:11:31
коробка01:11:32
размеры, я не буду все расписывать, ладно, ребята01:11:34
Я собираюсь напечатать несколько слов01:11:36
буквы, для которых я собираюсь нажать Enter01:11:38
автозаполнение, чтобы мы могли выиграть01:11:39
время и здесь мы собираемся поставить один01:11:42
значение, которое является границей поля01:11:46
Хорошо, это не будет происходить часто01:11:48
все в порядке, и я тоже не доберусь до себя01:11:51
удлинить объяснение, почему это концепция01:11:53
немного сложнее понять, но01:11:57
ты можешь сделать что-нибудь сейчас01:11:58
предупреждаю вас, зайдите сюда, в Google, и опубликуйте01:12:02
пример01:12:03
[Музыка]01:12:05
эй, играй здесь, ты можешь играть только здесь01:12:07
размер нет01:12:10
Гуглите и это попадет в документацию01:12:13
Скорее всего, да?01:12:15
вот документация или это сайт01:12:17
документацию, поэтому, когда мы01:12:18
говори документацию, ты знаешь, что это01:12:20
вот это mdn - документация E01:12:22
тогда ты увидишь, ох, зачем01:12:25
это полезно, правда?01:12:27
объяснение того, для чего нужен размер коробки01:12:28
Есть даже пример, да?01:12:32
размер, он в основном служит этой цели здесь01:12:34
О, он будет, но я не знаю английского Cadu01:12:36
Там все на английском языке, нажмите на кнопку01:12:38
правильно и переведите, или если у вас есть01:12:42
автоматический перевод из вашего браузера01:12:44
переведу01:12:45
Хорошо, можешь перевести это туда?01:12:48
ваш браузер. Никаких проблем.01:12:50
Иногда документация находится в01:12:52
Португальский тоже, но иногда01:12:54
Итак, через некоторое время у вас нет01:12:56
исследовал здесь размер коробки, это работает01:12:58
в основном, чтобы избежать боли01:13:00
голова с01:13:02
некоторая помощь в работе с измерениями01:13:05
ширина с шириной с с высотой с01:13:09
расстояние по ширине, то это будет01:13:11
облегчи свою трудовую жизнь01:13:12
с измерениями в CSS, так что это очень хорошо01:13:14
что вы используете здесь это значение рамки01:13:17
в коробке, так что внутри reset.css Хорошо01:13:21
aad, но файлов сброса нет01:13:24
более продвинутые люди могли бы спросить01:13:27
В интернете есть файлы сброса01:13:29
готово, но мы покажем это здесь01:13:32
Для вас, как сделать его с нуля?01:13:35
несколько готовых, которые можно взять и просто01:13:37
используйте, но мы покажем это здесь01:13:40
Для тебя это для чего?01:13:41
Попрактикуйтесь еще в одной вещи, которую я хочу сбросить01:13:44
это ул, верно, поэтому ул будет нашими списками01:13:48
и есть что-то очень плохое, что у него есть01:13:50
Да ладно, это список недвижимости01:13:53
Стиль, разве это не тот стиль в списке?01:13:56
В комплекте идут шарики, не знаю, подойдут ли они01:13:58
появиться здесь01:14:00
Нет, ему это не нравится, потому что он застрял01:14:03
Упс, ему это не нравится, потому что он застрял01:14:05
но там есть несколько точек, обозначающих01:14:08
это список, и мы хотим удалить01:14:09
поэтому мы просто разместили это здесь в виде списка01:14:11
Стиль Нет01:14:13
Красота тогда Любая или любая01:14:16
элемент L, который есть на вашем экране, будет01:14:18
примените это свойство, и оно удалит01:14:22
точки в списке, потому что в нашем01:14:26
в финальном проекте нет шаров E01:14:27
вот как это должно быть01:14:29
действительно круто, так что сброс - это, по сути,01:14:32
Теперь мы можем двигаться дальше01:14:35
из стилей, да, так что поехали01:14:40
вернись сюда, открой нашу здесь01:14:43
проводник и давайте щелкнем здесь01:14:45
новый CSS01:14:48
файл сейчас мы создадим еще один01:14:51
файл, который является файлом стилей01:14:53
Тут да, стили останутся01:14:55
нашего проекта, затем стили PON01:14:58
CSS, затем создайте свой файл01:15:02
стили введите его, щелкните по нему правой кнопкой мыши01:15:04
Я собираюсь закрыть сброс, потому что мы01:15:05
ты больше не прикоснешься к нему, с контролем б01:15:07
итак, теперь я в файлах стилей01:15:09
ХОРОШО01:15:11
Эх01:15:12
поэтому он останется внутри папки01:15:15
CSS тоже, да, вы ведь это там видели?01:15:17
все файлы CSS, которые вы помещаете01:15:19
внутри папки CSS для облегчения01:15:21
организация людей, да?01:15:23
Вам не нужно знать много английского, ребята01:15:26
красота, я создаю вот это01:15:27
получил свое название на английском языке, потому что это01:15:28
узор - это просто еще один узор, но ты01:15:31
может создавать файлы с именами в01:15:32
Португальский, какой-то, да, индекс не может01:15:34
мы говорили на прошлом уроке, но есть01:15:36
файлы, которые вы можете создать с помощью01:15:38
Португальский, да, тебе не обязательно знать01:15:40
Английский, чтобы начать позже, когда ты01:15:43
продвигаясь вперед, хорошо знать больше английского, но01:15:46
Для начала оно вам не нужно, это не эссил01:15:48
Хорошо, я думаю, ты можешь забыть об этом раньше01:15:52
давайте свяжем его сейчас, скоро он появится в HTML01:15:56
после ссылки01:15:58
здесь о том, что мы сделали01:16:01
Сделай сброс, поставь ссылку, если останется01:16:03
белый, как будто ты больше не появляешься01:16:05
сдерживайся и сжимай пространство здесь, в01:16:08
В конце он снова открывается а а а01:16:11
поле, в котором вы можете выбрать01:16:12
все делается ради бога, ребята, нет01:16:14
напиши минорный знак и ссылка не пойдет01:16:17
выбери emet, если напишешь01:16:19
минусик и ссылку пишем только название01:16:21
судя по тегу, всегда так, не так, не так01:16:24
идти01:16:25
ХОРОШО01:16:29
поэтому он не вернется, чтобы завершить01:16:32
излучать, ты не пойдешь туда, тогда ты останешься01:16:34
потерял мысль, почему это не сработало и01:16:36
Вот почему вы просто пишете имя тега и даете его01:16:39
О01:16:40
введите, я удалю этот style.css, потому что01:16:43
Это не то, это не имя, верно?01:16:45
Мы хотим, чтобы это стало стандартом.01:16:46
я положу01:16:47
Хм, здесь будут стили, да, упс.01:16:52
бар01:16:53
CRC CSSstyles.css то же самое, что и01:16:57
мы сделали это здесь, просто изменив его на01:16:58
style.css Хорошо, вот и все.01:17:01
также связали стили, и теперь01:17:03
мы можем начать работать над01:17:04
файл01:17:05
стили, окей, ребята, со мной все будет в порядке01:17:10
объективно прямо в точку, потому что иначе01:17:12
Концерт станет очень масштабным, так что поехали01:17:15
Если ты чего-то не понимаешь, вернись01:17:16
Live просит немного01:17:18
дискорд сообщество мониторы01:17:21
тоже здесь, чтобы помочь. Хорошо, но01:17:24
мы собираемся дать немного газа, чтобы иметь возможность сделать01:17:26
В прямом эфире нет 3 часов, так что поехали01:17:30
начать Бари, первое, что мы делаем01:17:33
Здесь у нас есть элемент01:17:36
Бари, да, это первый тег, который01:17:40
он у нас есть, и мы собираемся его поставить01:17:42
стиль в нашем баре, так что иди01:17:44
напечатай вот так01:17:46
Бари открывает и закрывает Чавес, так что я здесь.01:17:49
Я уже создаю CSS-код, красоту и01:17:51
Мы хотим стилизовать селектор01:17:53
да, мы уже видели там, что это все, что01:17:55
Это до тех открывающихся ключей, верно?01:17:59
будет селектором, который мы хотим применить01:18:02
наши стили, поэтому, если я помещу это здесь01:18:04
внутри фона, например01:18:06
фоновый цвет01:18:08
Эй, ты можешь увидеть цвет фона01:18:11
поставь вот так, звездочка 00 00 вот это01:18:14
это бывшая десятичная дробь черного цвета, поэтому здесь01:18:18
Color Highlight уже дает нам01:18:20
это расширение уже дает нам цвет01:18:21
черный01:18:24
Так что это упрощает задачу, верно? Потому что, если ты нажмешь на01:18:26
Я смотрю, и ты действительно не знаешь, что это такое01:18:27
бывшая десятичная дробь, ты этого не поймешь01:18:28
это здесь черное, но вот оно01:18:30
говорю: «О, это черный цвет, ок»01:18:34
да, это очень обширная тема, но01:18:39
по сути это комбинация eh R de o01:18:43
r ne от красного B от синего и зеленого, затем два01:18:48
из этих нулей красный, два синих, два синих01:18:51
они зеленые, отсюда и сочетание красного01:18:53
синий и01:18:55
зеленый дает десятичное выражение, подобное этому01:18:59
объяснять слишком много, я не буду01:19:01
вдаваться в подробности, потому что это опять же01:19:03
довольно имеет очень обширное понятие01:19:06
здесь, но тебе нужно сделать одну вещь01:19:07
знай Каду, я должен знать бывших01:19:09
десятичный цвет. Конечно нет, правда, ребята.01:19:11
никто не знает до тех пор, когда у тебя будет01:19:14
поработав некоторое время, ты будешь01:19:16
зная, что ты поймаешь свой взгляд, и ты поймешь, что01:19:17
вот это черное, а фф фф белое01:19:22
ты узнаешь, потому что уже запомнил это, но если ты01:19:24
передайте шестнадцатеричное число, равное 2 4 C 301:19:27
Ты не узнаешь, и это нормально01:19:30
Шестнадцатеричное число будет предложено дизайнером, ясно?01:19:32
так что тебе не нужно01:19:34
волнуйся красотка, но хорошо, что ты позже01:19:37
учись, конечно, чтобы пойти глубже, тогда01:19:39
О, я поместил цвет фона в свою панель01:19:42
черный Теперь, если мы прокрутим сюда01:19:45
теперь здесь уже почернело раньше01:19:47
он был белым здесь, в этой части01:19:50
есть текст Итак, под панелью, да?01:19:53
это элемент, который остается, потому что он включает в себя01:19:56
все потемнело, а потом здесь, внизу01:19:58
Вы также можете видеть, что он был всем01:19:59
черный, поэтому я нарисовал фон01:20:01
черный01:20:03
Красота, теперь здесь много изображений01:20:05
да, гигант здесь, у всех на экране01:20:07
персонажи, это меня беспокоит01:20:09
немного, то что-то, что мы01:20:11
Все, что ты можешь сделать, это скрыть эти изображения, ладно?01:20:13
это на готовом сайте, дайте мне посмотреть01:20:15
если я закончу сайт01:20:17
вот я открыл его в то время01:20:19
да, это не так01:20:21
здесь01:20:23
что я01:20:25
Я закрыл, я закрыл, здесь нет красоты.01:20:28
сайт завершен01:20:31
И что я собирался сказать, о, он один с01:20:35
Изображение Луффи, да, изображения нет?01:20:37
из остальных персонажей появляется только01:20:40
Сначала Луффи, тогда мы сможем это сделать.01:20:43
что-то здесь, чтобы сделать наш01:20:44
Жизнь позволила мне забрать это пространство, ладно?01:20:46
почисти свой код, оставь его01:20:48
правильно организованный01:20:51
Хорошо, я собираюсь снять это, я собираюсь спрятать это.01:20:53
изображения Потому что это вещь01:20:56
важные ребята, так что обратите внимание01:20:58
o когда ты хочешь создать стиль, когда01:21:00
хочу применить стиль к01:21:02
элементы, которые нужно думать надвое01:21:05
вещи - это первое, что нужно01:21:08
К какому элементу я собираюсь применить это?01:21:13
стиль и что, что, что я, что, что я01:21:17
мне действительно нужно сделать то, что я01:21:20
Мне придется сделать это здесь, поэтому я хочу, чтобы01:21:23
элементы, в каком элементе я хочу01:21:25
сделайте это в нашем случае, мы хотим01:21:27
скрыть символы Итак, если мы01:21:29
проверьте здесь, просто нажмите кнопку01:21:32
ладно и иди01:21:33
Осмотрите, посмотрим, что там01:21:35
несколько погружений персонажей, конечно01:21:39
мы сделали это в другом классе и01:21:41
внутри div каждого div каждого01:21:42
у персонажа есть образ персонажа01:21:45
его содержание, да, так что их пять01:21:47
персонажи, с которыми у нас пять погружений01:21:49
класс персонажа, поэтому, если я захочу01:21:50
скрыть всю эту информацию от01:21:52
один один01:21:53
символ, я буду использовать селектор01:21:57
класс этого класса здесь персонажа01:22:00
Хорошо, и как нам это сделать?01:22:03
мы видели это там, в нашей презентации01:22:04
Символ правой точки PowerPoint открывается и01:22:08
закрывать01:22:09
prem open close Ключи и внутри01:22:13
мы можем01:22:16
поэтому сделайте правильный стиль персонажа01:22:19
примените к нему стиль на самом деле01:22:21
мы можем это сделать, мы можем это позволить01:22:23
вот так, или мы могли бы сделать вот так01:22:26
также, Мейн, у нас есть о01:22:29
наш основной элемент здесь, который имеет01:22:33
классные персонажи Но этот мы01:22:35
не буду стилизовать по крайней мере01:22:36
пока, но мы хотим стилизовать это01:22:38
эти классы персонажей здесь и здесь01:22:40
есть маленькая стрелка, если ты пойдёшь и увидишь это01:22:43
когда вы нажимаете, вы сворачиваетесь, сразу же вы закрываете01:22:46
div здесь открываешь и тут закрываешь01:22:49
Если я закрою их все, мы увидим01:22:52
что здесь есть эти пять погружений01:22:54
персонажи - это те, кого я хочу01:22:58
близко и они все внутри01:22:59
находятся внутри класса элемента, верно?01:23:01
тег M Хорошо, если вы поставите M01:23:05
символ пробела, который вы используете01:23:08
этот селектор потомков, потому что01:23:10
все элементы, которые имеют эти01:23:12
характер и которые находятся в пределах01:23:14
Я получу этот стиль, хорошо?01:23:18
мы могли бы сделать01:23:21
Далее, как я хочу скрыть01:23:24
Мне нужно использовать свойство, которое01:23:26
Это дисплей, и у дисплея есть несколько01:23:30
Различные значения Но я хочу01:23:33
Нэн, потому что Нэн он мне так скажет01:23:35
просто измените отображение или представление01:23:39
все эти элементы, которые имеют это01:23:41
class на None, т.е. ни у кого нет01:23:44
презентация в основном будет такой01:23:47
поэтому он прячет Каду, как я иду01:23:49
запомни эти вещи на практике01:23:53
да, мы учим вас здесь, но с01:23:55
практика украсишь со временем01:23:57
красота, тогда вы узнаете, какое свойство01:23:59
подавайте заявку куда хотите, но запишите это01:24:03
потому что это поможет тебе тогда01:24:05
Я спрятал все элементы Красоты01:24:08
теперь я хочу показать элемент01:24:10
Луффи, да, просто персонаж Луффи, потому что01:24:13
он уже загружен по умолчанию, поэтому я01:24:15
Я хочу показать ему, как мы это делаем01:24:17
снова вам придется подумать о том, какой из них01:24:19
элемент, к которому вы хотите применить правило01:24:21
свойство или стиль Если вы хотите и01:24:25
В данном случае это будет долг Лаффа, верно?01:24:28
так что нам нужно посмотреть здесь, запомни01:24:31
что мы создали класс01:24:32
выбран в дивизионе Луффи01:24:35
и с этим классом здесь у него есть два01:24:38
классы, право, персонаж и избранные01:24:40
Он единственный, кто выбрал01:24:42
другие нет, мы сделали это01:24:43
намеренно, чтобы01:24:45
быть в состоянии выполнить следующую проверку01:24:48
Здесь, в CSS, мы можем даже повторить это,01:24:51
м01:24:53
точка01:24:55
пробел нет здесь нет здесь нет01:24:58
Место есть, это важно.01:25:00
ХОРОШО01:25:02
точка01:25:06
выбрано Почему нет места01:25:08
здесь между персонажем и выбранным01:25:10
точно так же, как мы уже видели, если мы01:25:14
говоря так, он бы сказал, что01:25:17
мы пытаемся стилизовать элемент01:25:19
у которого есть выбранный класс, который01:25:20
внутри символа, который является селектором01:25:23
потомки, но в данном случае это не так01:25:25
что происходит, нас двое01:25:27
занятия в том же01:25:29
Элемент красоты, поэтому для этого01:25:32
Мы можем сделать это вот так, объединив два01:25:34
так что теперь мы говорим про01:25:36
для CSS я хочу стилизовать, я хочу01:25:40
создай здесь правило стиля, верно?01:25:43
когда элемент имеет эти два01:25:45
занятия01:25:47
он на нем. Тогда можно сказать, дисплей01:25:50
И еще, что за презентация?01:25:52
бло Блок01:25:55
было бы показать настоящее в основном есть01:25:58
Вот если мы вернемся сюда, сейчас, сейчас01:26:02
Изображение Луффи и текст01:26:06
Луффи, сообщение Луффи здесь, только что.01:26:08
он как будто черный на черном фоне, нет01:26:09
ты это видишь, да, но это здесь и вот оно01:26:11
меню, ребята, мы не01:26:14
стилизовано, но это все, что касается передней шкаторины01:26:16
сейчас меньше появляется, но все в порядке01:26:17
глючит, так что поехали01:26:19
наводить порядок, так наводить порядок01:26:23
нам нужно сделать следующее01:26:26
Это здесь, в нашем HTML01:26:28
О01:26:31
у класса здесь есть изображение, верно?01:26:35
Вот такое изображение у нас есть01:26:36
загружаю это изображение сюда из Luff01:26:37
большой, и он у нас есть на изображении01:26:40
изображение класса, которое мы туда поместили01:26:42
в правильном HTML, чтобы мы могли использовать01:26:45
это сделать стиль изображения Итак01:26:47
как нам это сделать01:26:49
Главный персонаж01:26:53
здесь вы собираетесь дать немного места, потому что01:26:55
Тег изображения внутри, верно?01:27:00
персонажа Хорошо, я покажу тебе01:27:03
есть для вас в браузере, но это01:27:05
в основном это здесь01:27:07
пространство для символов pon image Потому что это01:27:10
Вот это изображение — класс, Ви?01:27:13
проверьте этот элемент здесь01:27:15
нажмите на нужный элемент01:27:16
проверить, проверить, вот, пожалуйста01:27:20
персонаж, это s и это do01:27:23
doof, а внутри изображение с классом01:27:28
изображение, чтобы мы могли применить его01:27:32
стиль в этом, мы приходим сюда и выставляем его напоказ01:27:37
100%, поэтому мы говорим это сейчас01:27:40
изображение будет иметь оно должно соответствовать01:27:43
со 100% размера пространства это01:27:45
имеет внутри этого этот этот элемент01:27:49
персонажа, поэтому он идет с нами01:27:52
Он говорит: «Ой, вот если я сниму это, это01:27:54
занимая ширину, которую он хочет01:27:56
изображение есть, потому что я не указал01:27:59
ничего широкого, но если я скажу так01:28:01
ширина 100%, это помещает 100%01:28:04
размер, который он должен занять тогда01:28:06
он не превысит свой размер01:28:08
должен занять, будет занимать 100% площади01:28:10
размером с отца и с01:28:14
высота то же самое я скажу01:28:17
занимающий 100% ширины,01:28:22
высота, так что это будет ширина, верно?01:28:25
на английском языке и высота тогда будет высотой01:28:28
Теперь изображение немного лучше01:28:31
правильно, он не полностью лопнул и вышел наружу01:28:34
тот свиток, который был здесь01:28:37
Вертикально-горизонтально, правда?01:28:39
прокрутите то, что было ниже, потому что01:28:41
теперь изображение Она не она она есть01:28:45
изменен размер, чтобы занять только 100%01:28:48
ширина и высота, которые он должен01:28:49
занимай, чтобы она не удержала01:28:51
гигантский размер ISO, которым она была01:28:53
раньше, то уже было01:28:55
только улучшено01:28:58
что все еще не так, как есть01:29:01
в финальном проекте вот здесь он занимает01:29:03
полная высота экрана01:29:05
право01:29:07
Итак, нам нужно сообщить элементу01:29:12
характер, что он должен занять всю01:29:15
высота экрана у вас есть, вот и все, вам придется01:29:20
быть для элемента персонажа, верно?01:29:22
потому что персонаж настолько похож на этот образ01:29:25
что касается заголовка и правильного текста на01:29:29
весь этот элемент здесь, в котором есть все01:29:31
Вот этот элемент, верно, персонаж имеет01:29:33
изобразите это разделение контента, которое имеет01:29:37
титул «Монах де Луфф» и его текст затем01:29:41
вот это одно из того, почему мы01:29:42
используйте погружения, да, ребята, потому что тогда мы01:29:44
можно поместить внутрь несколько элементов01:29:46
div, и если вы помните другой01:29:49
класс, мы сказали, что div предназначен для01:29:50
элементы группы, они не имеют значения01:29:52
семантики, не так ли?01:29:55
кнопка, которую ты туда положил, кнопка, а затем ты01:29:57
знает, что браузер будет знать, что это01:29:58
кнопка div, у него нет значения01:30:00
семантика ничего не значит, но это так01:30:02
очень хорошо подходит для группировки элементов вместе01:30:04
мы сможем стилизовать их позже, и это01:30:06
именно то, что мы собираемся здесь делать01:30:07
Теперь, да? Мы уже там.01:30:08
мы делаем стили для погружений01:30:10
который имеет несколько элементов внутри, а затем01:30:12
мы можем переместить их на увеличенном экране01:30:14
высота увеличить ширину сделать что01:30:17
люди хотят, и это хорошо, что они есть01:30:18
содержится внутри div, чтобы сделать01:30:20
Правильно. Так как же нам это сделать?01:30:23
для01:30:24
хе-хе изображение там в полный рост01:30:27
что она на самом деле есть на экране01:30:30
Здесь уже есть правило, которое гласит:01:30:33
персонаж, у которого был дисплей Нэн, верно?01:30:36
чтобы мы могли прийти сюда и поговорить01:30:38
высота, так что высота будет высотой, верно?01:30:40
поэтому я хочу этого01:30:43
Это элемент, имеющий класс01:30:46
персонаж, это все они на самом деле01:30:49
да, все персонажи вот и все01:30:51
иметь высоту01:30:53
100 ВХ или01:30:56
VH – это единица измерения, которая расскажет01:31:00
как высота области просмотра, так и01:31:04
высота экрана устройства, на которой01:31:08
человек получает доступ, и когда мы говорим01:31:10
это 100, это как 100%01:31:13
Это не совсем так, но примерно так.01:31:15
ах, он занимает 100% размера, который у вас есть01:31:19
занимай рост человека, тогда ты01:31:22
доступен в браузере компьютера01:31:25
Если вы получаете доступ к нему со своего мобильного телефона, он будет иметь01:31:27
которые занимают 100% от его размера01:31:30
Это займет хоть какую-то высоту01:31:32
затем высота области просмотра Хорошо, тогда здесь01:31:36
он уже занял 100 он уже занял01:31:39
высота, которую он имел, ему пришлось01:31:41
занимай красоту и он нажал меню на01:31:45
низкий, и это именно то, что мы01:31:47
Я хочу его сейчас, он все еще глючит, но01:31:48
Сейчас исправим изображение01:31:52
растягивается, верно?01:31:54
Мы портим ее рост, но это не так.01:31:56
изменение ширины, чтобы она осталась01:31:58
очень старался исправить это для нас01:32:00
может хорошо использовать собственность01:32:01
интересная вещь о CSS, который является Object01:32:04
Подходит, поэтому мы приходим сюда на изображении01:32:07
О, почему? Почему мы собираемся переезжать сейчас?01:32:09
только в изображении только в теге изображения01:32:13
который находится здесь, внутри этого div01:32:17
персонаж, поэтому мы пришли сюда, чтобы01:32:20
изображение и место или тире объекта «Подогнать», а затем01:32:24
у него есть для нас некоторые ценности01:32:26
Я хочу01:32:28
обложка обложка ох теперь его там больше нет01:32:32
изображение больше не лопается, не так ли?01:32:36
так что она не она искажена она была01:32:38
да, это было искажено, а теперь оно есть, оно есть01:32:42
лучше, чем ты был раньше01:32:45
это есть и нет, он не ловит01:32:48
этот свиток01:32:50
прямо горизонтально, здесь, почему01:32:53
Потому что Object Fit говорит это01:32:55
ох, это ворона, она прокручивает01:32:58
прокрутка здесь все еще имеет прокрутку, если01:33:01
ты поймешь, почему эта прокрутка01:33:04
вертикально, потому что меню находится ниже01:33:06
занимает место, поэтому в итоге получается вот это01:33:08
прокрутка — это нормально, но объект Fit, верно?01:33:11
объясняя, что он сохранит01:33:13
правильные размеры изображения здесь01:33:17
ширину и высоту и сделаю это01:33:20
покрыть элемент01:33:22
персонаж, то обложка будет для01:33:24
крышка, да, так что она сохранит то же самое, что и01:33:28
размеры и будет охватывать элемент, который01:33:30
мы ставим Object Fit, прямо в данном случае01:33:32
Мы поместили это в изображения, да?01:33:35
Нам здесь становится намного лучше01:33:38
сможем добиться того эффекта, который мы01:33:39
хочу здесь, что Луффи занимает01:33:43
опять полный экран ребята Ой но01:33:47
Каду, я не знаю этих свойств01:33:49
то, что ты используешь, это красота, как будто ты01:33:52
Это начинается сейчас, ты не узнаешь01:33:53
Вот почему мы с тобой01:33:55
Объясняю, откуда мне знать?01:33:57
когда использовать практическое исследование ACADO01:34:01
посмотри на01:34:02
документацию понимаю, много копаюсь01:34:06
тестирование нескольких разных свойств01:34:08
Вот что значит быть программистом и01:34:11
и потренируйтесь. Хорошо, но мы уже там это даем01:34:14
путь для тебя с тем, что ты01:34:16
учитесь здесь, вы можете позже01:34:17
сделать еще один проект, потренироваться больше01:34:20
в любом случае01:34:22
следуй, верно, так что давай поставим01:34:25
цвет фона здесь, теперь мы01:34:27
можно начать стилизовать контент и01:34:29
добавить цвет фона к содержимому01:34:30
чтобы мы могли увидеть, что01:34:32
например, содержание, в данном случае это будет следующее01:34:34
вот заголовок, текст, но01:34:40
контент здесь, он здесь01:34:43
ок, ребята, вы с ним даже не встречаетесь, потому что01:34:45
он черный, да, но сейчас мы пойдем01:34:47
начни исправлять это, чтобы я знал01:34:49
там есть класс контента01:34:52
элемент контента прямо здесь01:34:54
О, есть такой класс контента, верно?01:34:58
в логотипе есть все, что есть в содержимом01:35:01
каждого символа, поэтому, если я использую один01:35:04
точечный контент, который я буду стилизовать01:35:06
все элементы, имеющие этот класс01:35:09
содержания, вот и все, вот почему01:35:11
Хорошо использовать классы, не так ли?01:35:13
поместить более одного класса в HTML01:35:15
стилизовать несколько элементов одновременно01:35:17
Время с идентификатором, ты не можешь этого сделать.01:35:20
у этого есть еще один атрибут, который01:35:22
это id, единственное, что id уникален на странице01:35:25
Таким образом, вы не можете стилизовать его, но с помощью01:35:27
класс, который ты можешь сделать, это один01:35:28
ее положительный балл Ви поставил один01:35:30
цвет фона здесь o Оранжевый Оранжевый01:35:33
оранжевый, теперь мы готовы?01:35:37
Тебе виднее, да? Что это?01:35:39
да да да да да да да элемент не де01:35:42
содержимое o консоль o цвет фона a01:35:45
люди говорят, что это консоль журнала01:35:48
из журнала JavaScript консоли CSS в01:35:50
кто не знает, тот для нас01:35:51
способен понять, как код01:35:54
это работает, отладьте наш код01:35:57
в основном покажите нам в консоли01:36:00
al переменная, то, что мы01:36:02
вам нужно знать JavaScript, мы это сделаем01:36:04
пока покажи это в классе01:36:06
JavaScript для вас, но здесь, в CCS,01:36:08
цвет фона, это помогает, потому что это01:36:10
он действительно может показать нам, что01:36:13
что это за элемент, так?01:36:16
вы можете увидеть это сейчас здесь01:36:17
ясно, что содержание здесь и01:36:20
Теперь давайте стилизуем это01:36:23
давайте сделаем01:36:24
Далее, как нам это сделать сейчас?01:36:27
Если мы посмотрим на наш проект01:36:29
конец текста все содержимое На самом деле01:36:32
это поверх изображения, да, это типа01:36:34
если бы он держал ее сверху, это было бы так, как если бы01:36:36
мы взяли лист бумаги01:36:39
с содержимым и поместите его поверх01:36:42
нижний лист с изображением01:36:45
Луффи прав, как будто это было01:36:47
лист поверх другого, конечно лист01:36:49
в данном случае это прозрачно, верно?01:36:52
это концепция Итак, у нас есть01:36:53
сделать это, затем сделать это, чтобы01:36:56
нам нужно использовать свойство01:36:58
позиционирование здесь, в этом div01:36:59
содержание этого оранжевого цвета, это позиция01:37:03
Абсолютно, тогда вы удалите это в01:37:06
который он устанавливает по умолчанию и будет писать01:37:07
Абсолют, затем, Абсолют, он идет.01:37:11
позиция К сожалению, я изменил цвет здесь без01:37:12
хочет контролировать Z, он будет01:37:15
позиция а01:37:18
элемент абсолютной формы01:37:22
на странице, так что это в целом похоже на тебя01:37:24
удалил элемент этот элемент01:37:28
из контекста страницы, на которой он находился, до тех пор, пока01:37:30
настолько, что если я удалю это здесь01:37:33
вы увидите, что это было сбоку от меню01:37:36
Посмотрите здесь, если я поставлю позицию01:37:39
Абсолютное Я передам управление Z управление01:37:41
вернуть его01:37:43
вот он идет Он поднялся на вершину01:37:46
меню, которое мы взяли, такое, будто мы01:37:49
Я бы выделил его выше, да?01:37:53
находится над меню, теперь меню01:37:56
внизу, а он сверху точно01:37:57
на МКС, как мы его поймали01:37:59
и выделил его на странице справа и поместил01:38:03
его, как будто он был листом над01:38:04
всего, чтобы можно было вырвать это из потока, верно?01:38:09
удалить элемент из нормального потока01:38:12
наверх Итак, это один из01:38:15
способы сделать это здесь, да, но это все равно01:38:18
там, Каду, окей, теперь пойдём01:38:20
приходится ставить верхний правый верхний ноль.01:38:22
у нас есть некоторые объекты недвижимости01:38:24
из из01:38:26
позиционирование, когда мы используем pos01:38:29
Абсолютно мы можем использовать эти01:38:30
свойства один из них топ 2.001:38:33
Всегда нужно ставить точку с запятой01:38:34
правильно, ребята, в конце концов, сейчас он идет01:38:38
пойду туда01:38:39
ох, а почему оно там торчит?01:38:42
Потому что я поставил верх ноль ноль, это как01:38:43
он поднимался туда, в нулевую позицию01:38:47
в первом в самом верхнем положении01:38:49
а затем элемент застревает вверху01:38:53
Если мы можем измениться, двигайтесь наверху01:38:55
мы можем переехать куда угодно01:38:58
вниз PR слева направо01:39:01
наш сайт01:39:04
Как только контент готов, он позиционируется01:39:08
Слева01:39:09
именно потому, что он он здесь он здесь01:39:12
слева от сайта, и это01:39:16
расположен левее Красавица01:39:19
Итак, как мы это сделаем01:39:21
мы приходим сюда и ставим налево01:39:24
осталось 120 пикселей01:39:28
Хорошо, теперь я разложил это01:39:31
120 пикселей01:39:34
вправо, вправо, но это как будто01:39:36
100 120 пикселей расстояние между краями01:39:40
слева, поэтому я удалил 120 пилей01:39:43
из01:39:44
слева 120 пикселей, ребята, это единица01:39:48
пиксель — это очень PE-квадрат01:39:51
маленькая вещь на твоем экране01:39:52
Итак, экран состоит из миллионов01:39:55
миллионы пикселей, я не знаю, много пикселей, но01:40:00
пиксель здесь квадрат01:40:03
крошечные 120 - это как 12001:40:06
маленькие квадраты01:40:08
здесь очень многое объясняют01:40:11
вкратце, но это в основном так01:40:13
Мы даем немного места, окей, Каду.01:40:18
Откуда ты знаешь, что это 120 пикселей в секунду?01:40:20
люди01:40:21
придумали это число, которое мы сделали01:40:23
этот макет и мы говорим 120 пикселей01:40:26
Это было круто, кто это скажет?01:40:29
дизайнер – это человек, который01:40:31
Тот, у кого больше всего, создаёт макет.01:40:33
знание пространства имеет больше01:40:35
знание стиля, поэтому она01:40:38
смонтирует этот образ в макете и01:40:42
передадим разработчику01:40:43
разработчик будет только следовать этому01:40:45
стандартный, но не то, чтобы ты не мог научиться01:40:48
как создать макет в фигме, да?01:40:51
тебе не обязательно это знать, чтобы01:40:53
будучи программистом, ты можешь взять01:40:54
просто эта информация от дизайнера01:40:56
кто тебя пошлет, окей, теперь он есть01:41:00
позиционируется до тех пор, но это не так01:41:01
Централизовано, которого даже здесь нет, в самом конце01:41:03
Так как же нам сделать01:41:04
централизовать, вам придется сделать01:41:07
Далее, теперь есть еще один01:41:09
очень классный и интересный объект01:41:10
для вас, чтобы изучить позже01:41:12
Обратите внимание, что дисплей Flex — это дисплей01:41:16
Мы это уже видели, там Нано Блок01:41:18
который мы уже использовали, но здесь есть Flex01:41:20
что такое конфликт, который мы называем01:41:21
также с флексбоксом, да?01:41:24
теперь включаем отображение Flex в контент01:41:27
ничего не изменилось, ничего не изменилось, да?01:41:30
Flex дисплей, я прокомментирую управление01:41:32
точка с запятой — это Обезьяна Луффи и01:41:35
напиши ниже прямо сейчас, если я раскомментирую01:41:39
оставайтесь рядом друг с другом, потому что Каду01:41:41
испортил весь контент, потому что когда01:41:44
мы установили дисплей Flex, чтобы у нас было01:41:47
свойство дисплея Flex, который поставляется01:41:49
скрыто, верно?01:41:53
Изменить направление прямо тогда и и по умолчанию01:41:57
он имеет направление строки, верно?01:41:59
направление линии Тогда элементы01:42:01
Они расположены в линию с одной стороны.01:42:04
от другого, как здесь, в содержании01:42:08
позвольте мне уточнить здесь01:42:10
О, как внутри контента мы01:42:13
Есть два элемента, не так ли?01:42:16
до трех, здесь тоже есть логотип, но01:42:18
имеет01:42:19
заголовок и абзац01:42:23
да, так вот почему они остаются вместе01:42:25
рядом, если бы элементов было больше01:42:27
в рамках содержания они будут одними из01:42:28
тоже сбоку, так что будет один сбоку01:42:30
от другого, тем больше внутри01:42:32
содержимого div, тем больше они будут иметь01:42:35
элементы здесь рядом друг с другом, тогда01:42:37
В комплект входит ряд Flex Direction, понятно?01:42:39
по умолчанию Но нам не нужен Роу, верно?01:42:42
нам нужно другое значение, которое01:42:45
колонка, почему колонка он01:42:50
он сделает это вот так, он это получит01:42:53
элементы в столбце тогда и сейчас01:42:55
он будет один под01:42:57
еще раз вернись к тому, что было раньше, все в порядке01:43:01
Это для того, чтобы вы могли вернуться к тому, каким вы были раньше01:43:03
потому что теперь мы можем подать заявку01:43:04
кое-что о Flex, которое нам поможет01:43:06
очень помогает, что в основном заключается в использовании01:43:09
другой01:43:11
собственность, которая01:43:16
оправдывать01:43:19
двоеточие содержимого01:43:23
Центр — это оправдание того, что контент будет предназначен для01:43:27
люди01:43:29
выровнять контент по вертикали01:43:32
вертикально вот эта ось01:43:36
вертикально, да, просто не сработало Почему01:43:40
это не сработало и теперь это концепция01:43:43
Тогда тебе очень важно понять01:43:45
запишите, я поставил Центр, не помогло01:43:48
Каду, что я сделал не так?01:43:51
когда мы хотим централизовать01:43:52
элемент, в котором должен быть пробел01:43:55
внутри него иначе, если у него нет01:43:57
пространство внутри него, он не может01:44:00
вернись от него, верно?01:44:04
пространство будет централизованным, если01:44:06
у него нет01:44:07
пространство, которое вы не сможете централизовать01:44:10
его, потому что он, да, такой же, как ты, ставит один01:44:13
обувь в коробке, которая не01:44:15
Там есть место, обувь останется там01:44:18
содержится в том пространстве, которое у него есть, если вы01:44:21
Например, вы хотите положить обувь в01:44:22
середина коробки, тогда коробка должна быть01:44:25
больше, то внутри должно быть место01:44:28
ящик, чтобы вы могли централизовать01:44:30
ботинок прямо посередине, чтобы01:44:33
элемент должен иметь пространство, чтобы иметь возможность01:44:35
так что это может быть централизованно, верно?01:44:37
Там много людей, которые ломают себе лица, потому что01:44:39
человек это делает, попробуйте загрузку SP Flex01:44:41
центрируйте, используя оправдание контента, а не01:44:44
первое, что тебе нужно сделать, это работать01:44:46
видите, в этих случаях есть пространство, есть высота01:44:49
Он имеет ширину, позволяющую централизовать пространство.01:44:52
доступно справа Есть место для01:44:55
так что его можно выровнять01:44:57
вертикально или горизонтально может01:44:59
если это не так, и в нашем случае01:45:01
здесь у него действительно нет такого для него01:45:04
нам нужно сказать правильно, поэтому я01:45:06
я положу один сюда01:45:08
мин01:45:10
высота01:45:13
10001:45:15
ВХ, ох, когда я01:45:18
Я положил это сейчас, мне нужен этот элемент01:45:20
имеет минимальную высоту 100 VH, верно?01:45:24
это будет высота випорта, да, мы уже использовали ее01:45:26
VH был раньше, но это в основном01:45:28
объясняя еще раз, мы говорим01:45:30
что я хочу, чтобы элемент теперь был01:45:31
Минимальная высота, которую я хочу01:45:34
всегда общий размер экрана01:45:37
высота, верно, так что теперь он занимал всю01:45:41
высоту, и он уже централизовал ее для нас01:45:43
потому что мы уже говорили здесь, что01:45:44
Оправдать счетчик - это центр, верно?01:45:46
мы хотим центрировать его по вертикали01:45:48
это свойство предназначено для этого01:45:49
по центру вертикально, если я возьму01:45:51
он возвращается туда01:45:53
вверх, и все это пространство здесь у него есть01:45:56
ох, позволь мне вернуться сюда01:45:57
о о о без О без свойства, которое01:46:02
Выровняйте его по центру - все это пространство01:46:05
вот что ты увидишь здесь позже01:46:06
здесь заканчивается весь текст01:46:09
космос здесь - это космос, которого не существует01:46:11
ничего, когда мы поместим это сюда01:46:13
обосновать контент-центр, он возьмет это01:46:16
все это пространство у меня было и будет01:46:18
как будто он делил это пространство, которое01:46:19
которые у него есть в наличии в двух экземплярах и будут01:46:22
поставьте пробел сверху и снизу, а затем01:46:24
он сможет централизовать01:46:26
элемент01:46:28
ОК, это в основном то, что мы01:46:32
ты можешь сделать это, чтобы стилизовать его?01:46:34
центрирование элемента должно иметь01:46:36
пора нам сделать это для01:46:38
Наконец, мы можем установить ширину01:46:40
также в содержании, чтобы не быть01:46:43
занимает так много места на экране, верно?01:46:47
Вы также можете добавить ширину Макс.01:46:49
ширина максимальная, затем максимальная01:46:52
Я хочу, чтобы он имел01:46:55
380, тогда я могу использовать Pixel, окей01:46:59
потому что я хочу, чтобы он занимал только 38001:47:02
[ __ ] широкая, так что она останется01:47:04
так это ближе к тому, как01:47:07
Это здесь, в нашем последнем проекте01:47:09
Хорошо, теперь мы можем даже вынуть это01:47:12
фон здесь01:47:13
чтобы оно не мешало, поэтому я его сниму01:47:15
цвет фона здесь специально для него01:47:17
Пиар, мы сможем увидеть его получше, я01:47:20
Собирать все это здесь довольно неприятно, правда?01:47:23
но теперь мы собираемся изменить цвет01:47:24
тогда будет лучше посмотреть исходник01:47:27
давай сделаем это, давай возьмем это здесь01:47:29
О01:47:32
контент сейчас, чтобы изменить имя01:47:34
персонаж, мы можем использовать класс01:47:36
что есть в HTML, это имя тире01:47:40
персонаж, обратите внимание, что одетый использует01:47:44
снова пробел между именами01:47:45
классы, потому что имя персонажа01:47:48
внутри элемента, имеющего класс01:47:51
контент тогда является селектором01:47:54
потомки там01:47:56
новое - это видеть отсюда и Ó я жду там01:48:00
так что это здесь01:48:01
О, имя персонажа, этого, этого, H2, да?01:48:06
это элемент, который имеет заголовок01:48:07
персонаж находится в этом классе01:48:09
тогда контент является потомком, верно?01:48:11
не ставка01:48:12
сказал ок, а теперь сделаем стили01:48:15
мы делаем то, что01:48:17
следующим первым мы можем поставить01:48:19
цвет01:48:21
здесь просто чтобы мы могли посмотреть и сделать01:48:23
что наш чек где01:48:26
что это за элемент, поэтому я поставил один01:48:29
зеленый цвет, и теперь вы можете это видеть01:48:30
оно осталось здесь, да, зеленый цвет только в этом01:48:32
элемент, поэтому мы получаем01:48:34
придумай правильный стиль, так что поехали01:48:36
начните создавать стили прямо сейчас01:48:39
хм01:48:41
цвет ФФ01:48:44
FF FF их шесть01:48:48
FS — это точка с запятой, поэтому мы изменили01:48:51
цвет текста на белый. Цвет01:48:53
в основном на Это меняет цвет01:48:55
текст белым цветом01:48:57
Хорошо, тогда мы сделаем шрифт01:49:00
размер Размер шрифта — это размер шрифта, верно?01:49:04
поэтому я увеличу размер шрифта01:49:05
за 48 скин размер уже стал больше01:49:09
из01:49:10
шрифт другое свойство шрифта шрифт01:49:13
Семья01:49:15
Почему этот стиль шрифта отличается?01:49:17
вот этот больше01:49:20
мило, и это стиль01:49:22
уродливый стандартный шрифт, который входит в комплект01:49:24
браузер Итак, поехали01:49:25
затем измените шрифт Family, который мы01:49:28
светское ли оно01:49:31
Один01:49:33
Ой, я сниму это, вот так, да?01:49:38
и это выглядит так, это выглядит по-другому, да?01:49:40
светский, мы связали его здесь, на01:49:43
наш HTML в последнем классе01:49:45
да, вот источник, который мы01:49:48
мы импортировали его из Google01:49:50
один из них, мы импортировали два, поэтому01:49:53
это этот CL Один — это источник, который01:49:55
Теперь мы можем использовать его в01:49:57
Вот такой CSS, тогда мы будем01:50:00
установите вес шрифта. Толщина шрифта — это01:50:02
вес шрифта я скажу 40001:50:05
потому что таким образом у него есть источник01:50:08
толще01:50:10
да, это выглядит как один плюс [ __ ] и так оно и есть01:50:14
с 400 шрифт становится больше01:50:17
тонкий, в этом случае здесь круче01:50:21
правильно, поэтому мы взяли гири01:50:24
из источников там, вплоть до здесь, я не знаю,01:50:27
оно здесь, но когда мы его скачали там01:50:30
Мы уменьшили толщину шрифта01:50:33
так что 400 — более обычный шрифт01:50:36
что мы01:50:37
пламя не такое смелое и еще другое01:50:41
то, что я собираюсь сделать здесь, это дать01:50:42
Нижнее поле на самом деле вот это01:50:44
маржинальный бот классная штука от emet Ó01:50:46
если ты напечатаешь01:50:48
Мб, в первом варианте оно уже есть, ок01:50:51
допуск01:50:53
Внизу, чтобы у него были похожие01:50:57
ярлыки, откуда я знаю Каду01:50:59
потренироваться и изучить документацию01:51:01
эмет, ты же можешь посмотреть, какие у тебя есть, да?01:51:04
но вы также можете ввести маржинальное тире01:51:06
нижний правый край или тире на полях, а затем идет01:51:10
дать вам варианты здесь, вы выбираете здесь01:51:12
о, кнопка имеет несколько твоих обликов01:51:14
Я могу это сделать, тогда маржа здесь01:51:16
В данном случае я поставлю 2001:51:18
пикселей Итак, теперь он собирается дать01:51:20
интервал, смотри, смотри сюда01:51:23
в этом этом01:51:25
текст, когда я, когда я ставлю поле01:51:28
Внизу я говорю, что хочу тебя01:51:29
создать интервал или поле01:51:33
маржа, ты помнишь, что это один, это один01:51:35
расстояние между элементами и01:51:38
кнопка означает, что так и должно быть01:51:39
только ниже01:51:41
ниже 20 пикселей, потому что это будет занимать01:51:44
эй, интервал будет занимать 2001:51:46
пиксели здесь, да, вот почему он01:51:48
дал это маленькое место здесь, теперь он01:51:49
там есть место, поэтому он толкнул этот01:51:53
еще один элемент на 20 пикселей ниже01:51:55
Это в основном то, что он сделал01:51:56
добавил поле ниже этого01:51:59
элемент здесь имени01:52:02
ОК, и еще кое-что мы можем сделать01:52:05
Теперь используйте описание, верно?01:52:08
так что описание контента сейчас01:52:12
давай сделаем почти то же самое01:52:15
давайте просто добавим сюда фон01:52:17
чтобы мы могли увидеть и показать вам01:52:19
Синий01:52:22
Теперь мы собираемся переехать сюда01:52:23
описание не в тексте символов01:52:25
так что здесь мы сделаем это быстрее01:52:27
потому что я уже показал тебе, что это такое01:52:29
Цвет01:52:31
ффф, да, он тоже белый, Шрифт01:52:36
Эта семья01:52:39
другой, это тот другой источник, который01:52:41
люди узнали о Google, который является01:52:44
рубик ф01:52:47
размер в данном случае 30, не так ли01:52:53
16 правда, я не думаю, что это даже необходимо01:52:56
помещать01:52:57
16 - это всего лишь 16, позвольте мне посмотреть, какие они01:53:03
увеличить этот шрифт01:53:05
там01:53:07
[Музыка]01:53:09
зачисление01:53:13
16, затем размер шрифта 1601:53:18
PX — это E Высота строки 24 или высота строки01:53:26
pr — это высота между01:53:29
строк, поэтому здесь мы поместим 2401:53:33
Д01:53:34
x o, а затем высота между строками01:53:38
здесь оно становится больше, правильно, если я01:53:41
удали здесь строк станет больше01:53:42
липкие, так они дольше остаются01:53:44
отдельный01:53:46
так вот для чего нужен Eesse F 1601:53:51
не здесь01:53:53
нужно, потому что размер шрифта по умолчанию01:53:56
браузеру уже 16, окей, ребята01:53:59
Так что вам не нужен этот цвет фона01:54:02
мы можем снять его сейчас, чтобы у нас не было01:54:03
такой же уродливый, как и этот01:54:08
Там чего-то не хватало, да? Логотипа там не хватало?01:54:11
так что пойдем прямо сюда, пойдем01:54:13
положить01:54:16
прямо здесь укажите содержание01:54:22
пон01:54:27
Итак, теперь мы можем сделать01:54:29
далее, прежде чем мы сделаем логотип01:54:31
Давайте просто вздохнем, мы готовы01:54:34
там с 1 часом е8 и теперь осталось не так уж и много01:54:38
что нужно сделать, это личное, но это01:54:40
Важно, чтобы мы сказали вам не делать этого.01:54:42
это будет прямой эфир, только ты будешь01:54:44
получать01:54:45
делать все, что мы делаем здесь01:54:48
поначалу, не так ли? Тем более, если ты никогда01:54:51
Вы ничего не видели в программировании в своей жизни, не так ли?01:54:53
так что все наладится01:54:55
ничего, никакой карьеры ты не делаешь01:54:58
не изучать ни одно из хобби, которое01:55:01
Если ты собираешься учиться, мы можем это сделать.01:55:02
узнай это в жизни чего угодно 101:55:05
полтора часа, два часа, нет возможности01:55:08
Мы говорим здесь с вами, ребята01:55:10
покажи, что ты не семилетний ребенок01:55:12
головы, несмотря на то, что они похожи на многих тэгов01:55:16
множество свойств CSS, которые украсят вас01:55:19
Вам не обязательно его украшать, вы это сделаете.01:55:21
что практиковать и по ходу дела01:55:25
Практикуясь, ты научишься этому, ладно?01:55:28
заключается в том, что это принцип Парето, согласно которому01:55:30
мы уже упомянули 20% объектов01:55:34
CSS выполняет 80% стилизации01:55:38
Сайты мне нужны, а вам нет01:55:40
необходимо знать все свойства, которые01:55:42
Нет необходимости беспокоиться о01:55:45
Укрась это, так что оставайся01:55:48
спокойно, я понимаю здесь только больше01:55:50
та же концепция, что и в CSS, о том, как01:55:54
применять свойства к селекторам01:55:56
Вот где все происходит со временем01:55:58
Копейка падает, и это начинает происходить01:56:00
гораздо больше смысла, но его не будет01:56:02
жизнь, в которой ты всему научишься, ок01:56:04
Так что выбрось это из головы, расслабься и01:56:09
Воспользуйтесь возможностью изучить основы здесь01:56:11
чтобы ты мог продолжить путь01:56:14
вот это без01:56:16
сдавайся, потому что это действительно не животное01:56:18
из семи голов01:56:20
Это просто много, что нужно принять01:56:22
только один раз и тебе не обязательно это делать01:56:25
тогда это круто01:56:29
продолжим в ближайшее время, мы могли бы01:56:32
попробуй поставить цвет фона01:56:34
скоро это просто не сработает, я буду01:56:36
покажу тебе как01:56:39
Морской пехотинец, ничего не произошло, верно?01:56:44
Поскольку логотип в данном случае является изображением01:56:47
случай здесь, то нам придется01:56:49
разместить там недвижимость01:56:52
фон01:56:54
изображение, и это свойство должно быть01:56:57
созданные таким образом, мы делаем то, что делаем01:56:58
введите URL-адрес, откройте круглые скобки, закройте01:57:01
круглые скобки и внутри скобок a01:57:03
мы ставим двойные кавычки, потому что это01:57:05
текст типа здесь Рубик, да?01:57:08
говоря, что это сообщение. Итак, мы01:57:10
вам нужно взять это в двойные кавычки01:57:12
способ01:57:13
здесь и здесь мы сделаем это вот так01:57:16
Пойнт Пон Барра, а потом он дал мне его там01:57:19
варианты o Я хочу загрузить изображение01:57:23
папка01:57:25
изображения такие точки-пон-слэши, он уже01:57:27
дал мне варианты, для какой папки я01:57:29
Я хочу, я хочу сложить изображения в папку, верно, и я это сделаю.01:57:32
загрузите логотип, и он здесь, One01:57:34
След детали01:57:36
логотип One trp TR logo.png так что я01:57:40
изображение логотипа еще не загружается01:57:43
это сработало Каду Э01:57:45
Так что успокойся, я доберусь, мы доберемся01:57:49
что здесь произошло сначала01:57:52
что-то случилось, ты не высказал этого мнения01:57:55
косая черта здесь, как вы этого не делали в HTML01:57:58
потому что в CSS это работает по-другому01:57:59
Лично мы находимся внутри папки01:58:02
Позвольте мне вернуться сюда, как есть01:58:05
верно, мы внутри папки CSS01:58:10
и в файле стилей в HTML01:58:14
HTML готов, он здесь в корне01:58:16
но здесь, в CSS, мы находимся внутри01:58:18
папка, когда мы хотим загрузить01:58:20
изображение, которое у нас есть01:58:22
чтобы добраться туда, где в основном находится изображение01:58:25
проделай небольшой путь, пока не доберешься до01:58:27
изображение того, как мы находимся внутри папки01:58:29
CSS мы должны оставить внутри01:58:32
внутри этой папки, используя эту точку01:58:36
точка косая черта здесь означает, что01:58:38
мы уходим, мы возвращаемся01:58:40
задняя папка - это, по сути, это01:58:43
точка-пон-слэш возвращает папку, когда01:58:46
мы возвращаемся в папку, которую получаем здесь01:58:48
в папке мистера Райта, так что мы внутри01:58:51
папка src теперь мы можем01:58:55
дайте косую черту, чтобы войти в другую папку01:58:58
и мы войдем в папку изображений01:58:59
да, вот где изображения и01:59:03
мы загрузим изображение One Piece01:59:04
Вот и все, в принципе так оно и есть01:59:07
Здесь, в CCS, это работает, но это не так.01:59:11
Это все еще работало, верно?01:59:13
так что это фоновое изображение похоже на меня01:59:16
мы положили, типа, лист бумаги01:59:18
стена01:59:20
на стене, которая на самом деле является01:59:23
изображение здесь, справа, так что положи немного бумаги01:59:24
стена изображения здесь, в этом01:59:27
элемент просто не работает, потому что01:59:30
Что здесь ломает многим людям ноги?01:59:33
Ребята, а не так ли, обратите внимание на элемент01:59:36
Так что это даже довольно очевидная причина01:59:39
но есть много людей, которые только начинают01:59:42
не понимаю почему, но это снова то самое01:59:45
проблема с отсутствием элемента01:59:47
высота и ширина, верно, потому что мы не01:59:50
дал высоту и ширину, чтобы он мог разместить01:59:52
фоновое изображение здесь не подойдет01:59:55
высоту и ширину для него, а затем01:59:58
мы должны сказать, какова ширина и01:59:59
высота, которую мы хотим02:00:02
Я думаю, в данном случае у него просто нет02:00:04
рост, но потом, потому что у него нет роста, он02:00:08
не появляется, поскольку имеет нулевую высоту и02:00:11
нулевая высота — это элемент, которого не существует02:00:14
в общем, давайте проверим высоту 10002:00:17
100 пикселей, поэтому его высота02:00:20
Это сработало, верно?02:00:22
Вы уже рассказали нам о нашей истории здесь.02:00:25
Аквамарин Конечно его там нет02:00:26
изображение появляется, потому что у него есть02:00:28
этот фон02:00:29
Мариньо и еще одна проблема, о которой я уже говорил.02:00:33
Я покажу вам, поэтому давайте сделаем следующее02:00:35
давайте зададим ему ширину так02:00:37
он не только для него02:00:39
быть немного менее широким, потому что02:00:42
Так он не тот02:00:44
большой, то высота 100 пикселей и02:00:47
ширина 230 пикселей, окей, возьмем02:00:50
О02:00:51
фон сейчас не будем02:00:52
он нужен мне больше02:00:54
и не02:00:56
это сработало, почему бы и нет02:00:59
Это сработало, потому что, когда мы используем02:01:01
фоновое изображение вот так у нас есть02:01:03
использовать этот размер фона один за другим02:01:06
собственность также является фоном02:01:09
размер - это фон, я - это02:01:12
фоновый штрих02:01:15
да, и это тоже имеет такое значение02:01:18
то, что мы видели раньше, это обложка02:01:20
поэтому мы говорим, что размер02:01:22
фона я хочу, чтобы он закрывал02:01:25
область, которую он должен охватить, а это вот эта02:01:26
область здесь, так что это будет02:01:28
закройте эту область, и логотип останется02:01:32
оставайся таким сейчас, все будет хорошо02:01:34
Итак, логотип готов, осталось только02:01:37
добавить расстояние между логотипом02:01:40
и название здесь, потому что это что-то вроде02:01:41
застрял, так что можете зайти сюда в журнал и02:01:44
дайте один02:01:46
допуск02:01:48
Бот и вот мы, бот нас02:01:50
поставь 3502:01:53
фото, теперь он более разделен, да?02:01:55
он приближается к результату02:01:58
здесь, с нашей стороны, теперь есть еще один02:02:01
вещь, которую мы можем сделать02:02:03
давайте сделаем нижнюю часть02:02:06
Здесь есть большое дело, если ты пойдешь и посмотришь02:02:08
посмотри внизу, здесь черное, да?02:02:11
еще проще увидеть текст в версии02:02:13
конец того, что мы добавили к нашему02:02:16
вот этот трюк — тип градиента02:02:19
да, черный градиент, так как же так?02:02:22
мы сделаем это, пойдем02:02:24
У нас есть хорошая концепция02:02:28
А ещё здорово, что мы можем даже02:02:30
Иди сюда, вернись наверх, и мы пойдем.02:02:33
используйте тег M, но не тег Main в02:02:37
Если мы собираемся его поставить, мы собираемся использовать один02:02:38
концепции, которые являются псевдо02:02:40
элементов заключается в том, что он имеет псевдо02:02:44
элемент, который является After. Итак, как это сделать?02:02:45
вы создаете стиль для псевдоэлемента02:02:48
можешь поставить точку и две точки два02:02:51
После того, как все точки вместе, так что теперь02:02:54
люди так говорят, и у него есть02:02:57
свойство, которое является02:02:59
контент есть и контент Эл, это может быть02:03:02
пусто или может содержать текст02:03:07
Боже, может быть, это сообщение или он может иметь02:03:11
Я не знаю смайлов, правда, в Windows это безопасно02:03:16
Windows и нажмите точку, и она откроется вам02:03:19
эта маленькая коробочка смайликов, я не знаю, сможешь ли ты02:03:20
Они знали это, но теперь они это знают.02:03:24
Я могу выбрать маг здесь02:03:26
так что это здесь02:03:27
в основном я добавляю02:03:29
контент для этого элемента02:03:32
После. Где здесь Каду?02:03:36
Английский позже, да, ребята, тогда02:03:38
в основном это добавит02:03:41
создайте элемент PSE после Main n02:03:45
после тега Main, поэтому02:03:47
остался здесь внизу, если мы02:03:50
осмотреть02:03:52
Просто нажмите на стрелку и перейдите к началу страницы.02:03:55
элемент и нажмите «О, это как если бы мы02:04:00
поместил дополнительный элемент в02:04:04
наш HTML через CSS — это безумие, не так ли?02:04:07
Всё, этого элемента не существует ни в каком02:04:10
Сам HTML, но через CSS мы02:04:13
можете ли вы добавить туда элемент в02:04:15
браузер тогда и вот почему он02:04:19
останься здесь, да, он после того, как он он02:04:22
Как будто он поместил элемент02:04:25
эх, после, прямо перед закрытием02:04:29
элемент, но после выполнения элемента в02:04:31
да, вот почему он остается там02:04:32
ниже Итак, Магиньос здесь, чтобы02:04:36
что мы делаем это, потому что02:04:37
мы создадим дополнительный элемент для02:04:40
здесь, на нашем сайте, поэтому мы02:04:44
сделаю это вот так, в позиции Итак, мы02:04:46
Пойди, поставь это, тебе нужно это поставить, ладно?02:04:48
одна одна позиция Упс, не хватает одного пункта02:04:52
здесь запятая всегда должна стоять02:04:53
точка с запятой02:04:54
это фиксированное положение, фиксированное положение, оно будет02:04:58
скажи, что хочу исправить, я хочу это02:05:01
что этот элемент зафиксирован в02:05:04
экран, теперь волшебники исчезли Хорошо, но02:05:07
они появятся снова02:05:10
исчезли Скорее всего потому, что они02:05:11
расположены где-то очень02:05:12
странно, но мы их позиционируем02:05:15
используя эти слова02:05:16
позиционирование, которое мы уже использовали02:05:19
ноль, теперь они снова там появляются02:05:22
Тогда я сниму магин, да, ребята?02:05:23
ты, они не останутся там только ради нас02:05:25
можно увидеть, где они02:05:27
что такое элемент02:05:28
Вы также можете поставить левый ноль, чтобы02:05:30
гарантирую, что оно всегда останется02:05:32
расположен слева02:05:35
Он там застрял, и мы можем02:05:40
даже добавил сюда цвет фона, чтобы02:05:41
ты видишь, что это такое02:05:44
элемент справа02:05:47
viol o Так оно там, да?02:05:51
хотя только эта область имеет02:05:52
maguinhos Потому что это единственный контент, который02:05:54
он должен02:05:55
занять, и мы должны дать место02:05:58
и высота. Итак, поехали, мин.02:06:02
высота минимальная высота 10002:06:07
VH составляет около 100 эх высоты випорта, поэтому02:06:12
здесь он занимает 100 метров в высоту, это02:06:16
элемент, поэтому мы поместили02:06:18
так и так02:06:20
ширина мы можем сделать, я хочу это02:06:22
он имеет фиксированную ширину02:06:25
8002:06:27
VW — это не VH, потому что VH — это высота области просмотра.02:06:31
высокий и увидел, что VW выберет вид02:06:36
ширина, поэтому она другая, есть только эта02:06:38
разница, и теперь это похоже на него02:06:40
кокасса 80% размера Почему не 100%02:06:43
Каду, потому что здесь есть меню, да, ребята?02:06:46
и меню должно оставаться здесь02:06:50
вот этот черный элемент02:06:54
потому что ему это не нужно02:06:56
верно, поэтому именно поэтому мы02:06:58
поставь 80, давай снимем, а теперь дай мне02:07:02
Давайте посмотрим, давайте сейчас удалим этот фон02:07:04
цвет сейчас, он все еще здесь, но02:07:07
он такой, как будто у него есть02:07:09
прозрачный, и теперь мы собираемся поместить02:07:10
кошачий прыжок вот кошачий прыжок вот и все02:07:13
здесь я собираюсь02:07:15
скопировать один02:07:17
собственность, и я объясню, что это такое02:07:21
Далее я собираюсь удалить магов02:07:23
также пока02:07:27
maguinos теперь там пустое содержимое02:07:29
да, там ничего нет, но у него есть это02:07:31
фон фон похож на02:07:33
В глубине души мы это уже видели, и это есть.02:07:36
это значение здесь, это то, что02:07:37
CSS-функция, которую мы вызываем и которая является02:07:39
Линейный штриховой градиент, вот и все02:07:43
в основном код, который мы используем02:07:45
чтобы определить местонахождение02:07:48
мы хотим этого, это как будто одно02:07:49
личный градиент, градиент такой, как будто02:07:51
Если бы это был градиент, здесь даже есть сайт02:07:53
что мы откуда это взяли02:07:57
этот градиент - это то, что он генерирует02:08:00
градиенты для тебя o Чтобы ты не делал02:08:02
это нужно02:08:03
Ах, укрась, тебе не нужно знать02:08:07
как именно создать градиент с нуля02:08:09
ОК, вы можете зайти на этот сайт02:08:12
вот если сс02:08:13
Gradient.io, и здесь вы можете создать свой собственный02:08:16
сам градиент, вот как мы02:08:17
Он сделал это позже, вы можете осмотреться и увидеть02:08:19
каково это, правда? но по сути это ты?02:08:22
выберите цвет, который вы хотите, чтобы ваш градиент02:08:25
твой выбор02:08:27
непрозрачность, ты двигаешься сюда, нет02:08:29
позиционирование, которое вы хотите, вот оно02:08:32
расположение будет горизонтальным, верно?02:08:35
но вы можете поставить другие типы02:08:37
позиционирование, поэтому мы использовали его02:08:40
здесь, чтобы создать, и тогда вы получите02:08:41
код ниже, скопируйте и вставьте его в свой02:08:44
проект ах Каду но это не то, это не так02:08:46
воруешь так, как будто ты не должен знать что02:08:49
Что это за свойства, очень02:08:51
лучше, если ты знаешь. Конечно, мы02:08:54
не буду объяснять это здесь, потому что это слишком много02:08:55
подробно Хорошо, но это в основном здесь, это будет02:08:58
цвет и02:09:01
позиционирование И вот он здесь02:09:04
мы использовали цвет, который будет градиентом02:09:07
Он имеет два цвета, более темный цвет02:09:09
И более длинный цвет может быть более светлым02:09:11
да, это наш случай, но02:09:13
может быть и темный цвет02:09:15
в данном случае это rgba, потому что rgba02:09:17
мы используем его для создания Альфы, верно?02:09:21
непрозрачность, которая имеет место здесь, прямо здесь02:09:23
Когда он идет, он имеет небольшую непрозрачность.02:09:25
заканчиваю и не повторяй, а как насчет нас?02:09:28
ты не хочешь, чтобы он это повторял, тогда ладно02:09:31
тогда надо смотреть документацию02:09:33
снова откройте документацию mdn02:09:35
поместите его туда линейный фон Градиент оттуда02:09:40
вы прочитаете документацию и поймете02:09:41
то, что происходит, лучше, но02:09:44
вы можете использовать эти ресурсы02:09:46
сайты, чтобы делать больше вещей больше02:09:48
Это также легко, если вы поймете02:09:50
что бы это ни было, нет проблем02:09:53
поэтому он произвел впечатление, что мы02:09:55
Я хотел, ох02:09:56
но содержание было ниже n Итак02:10:01
Давайте исправим это, поехали, ребята02:10:04
код, который мы можем отправить02:10:05
на канале в дискорде всё иначе, правильно, иначе02:10:09
не сможет копировать или02:10:10
они, вероятно, скопируют и будут02:10:13
напиши что-то не так, а потом02:10:14
он не будет работать02:10:15
[Музыка]02:10:17
так что скопируйте сейчас. Приостановите видео02:10:20
копию, но наша команда может отправить02:10:24
вот эта строка кода там нет нет нет02:10:27
дискорд на канале проекта One Piece Dash02:10:29
для тебя тоже02:10:30
поймай это, и в конце Live также02:10:33
мы сделаем код доступным02:10:35
пройди этот урок, тогда ты сможешь02:10:37
скопируйте и оттуда, так что поехали02:10:40
дайте ему немного света, теперь это круто02:10:43
Как мы играем в02:10:45
контент, теперь мы приходим02:10:47
здесь, в классе контента o контент и02:10:50
добавьте еще одно свойство - z02:10:52
индекс02:10:55
один, а потом он придумал, что это такое02:10:57
индекс z - это, по сути, ось Z, поэтому02:11:00
ось ось z — ось глубины02:11:04
когда мы ставим индекс Z один, мы02:11:06
Вы хотите сказать, что мы хотим этого?02:11:08
элемент контента, он остается сверху02:11:10
других элементов, у которых есть порядок, верно?02:11:14
меньший индекс z, как будто ни у кого нет Z02:11:16
индекс здесь, если мы поместим индексы один02:11:18
Это останется приоритетом, верно?02:11:20
скажем, и он придет на02:11:22
другие, почему он весь контент02:11:25
подошел, вот он вот такой02:11:28
как это должно02:11:30
да, мы можем сделать кое-что еще02:11:34
теперь кнопки, кнопки здесь02:11:36
ниже, справа, поэтому давайте воспользуемся02:11:38
кнопки Давайте поместим его сюда, сбоку02:11:39
как мы это сделаем, пойдем туда02:11:41
конец Теперь наденьте пуговицы, прямо там нет акцента02:11:46
это наш элемент кнопки и02:11:48
мы собираемся вернуть его, мы собираемся использовать его02:11:49
снова фиксируем положение Итак, смотри, да?02:11:51
мы можем повторить02:11:53
свойства, поэтому мы повторили02:11:56
здесь несколько объектов недвижимости, верно?02:11:59
с 20% объектов недвижимости CS Vocês02:12:01
можешь сделать 80% того, что ты делаешь02:12:03
им это нужно, а остальное ты узнаешь02:12:06
со временем, когда вам это понадобится, это исправится02:12:10
Давайте поместим туда верхний ноль и02:12:16
напишите ноль, потому что он останется02:12:18
лево теперь справа, верно?02:12:20
мы хотим приклеить его вправо02:12:21
поставь это правильно, так что теперь оно застряло02:12:23
вот теперь мы добавим фон02:12:26
Так что здесь просто оранжевый фон.02:12:29
значит мы можем02:12:30
увидеть элемент02:12:34
Она полная, а он не понял, не понял, верно?02:12:38
Почему? Потому что у него нет роста, да?02:12:41
рост у него какой какой02:12:44
кнопки занимают так много высоты, ясно?02:12:47
Итак, как нам это сделать сейчас?02:12:50
нам нужно централизовать эти02:12:51
элементы вот они02:12:52
централизованный02:12:54
о вертикально и горизонтально тоже02:12:58
но пойдем02:13:00
давайте отцентрируем их вертикально02:13:03
Во-первых, как нам это сделать02:13:05
Мы это уже видели, а вы, ребята, уже видели?02:13:07
Вот здесь нам может помочь дисплей Flex.02:13:08
помогите с этим, да, но они остаются внутри02:13:11
еще раз линия, поэтому нам нужно02:13:13
положить02:13:14
Гибкое направление02:13:18
они остаются, они возвращают одного под02:13:21
еще один, давай поставим один02:13:28
высота, поэтому, если мы укажем высоту02:13:30
100 VH, да, сейчас мы это увидим.02:13:33
фон правильный, потому что теперь он02:13:35
занимающий 100 высоты экрана на экране02:13:39
Это завершить и согласовать мы можем02:13:43
используйте Информационный центр justify, который02:13:45
Мы уже использовали его раньше, так что он будет02:13:47
расстановка02:13:49
вертикально02:13:52
Красавица, дай мне посмотреть, что еще у тебя есть.02:13:56
Вот, хм, можем ли мы дать вам один?02:14:01
интервал один02:14:04
разрыв разрыв, который мы установили, равен 1002:14:07
пикселей, GAP — это интервал,02:14:09
мы можем использовать, когда используем02:14:10
Гибкий дисплей, обеспечивающий интервал02:14:14
во всех элементах, вот они02:14:17
близко друг к другу, не прилипает и вот они с02:14:18
пробел в португальском языке, я думаю, это было бы02:14:23
что-то в этом роде, тогда это космос02:14:26
между ними02:14:29
здесь мы удалим цвет фона02:14:35
Оранжевый здесь, ах, здесь чего-то не хватает02:14:39
ох, давай поместим это сюда, ох, мне это нравится02:14:42
присоединяйтесь, когда это станет чем-то масштабным и02:14:44
пора соединить эти два понятия, мы можем соединить02:14:46
ширина02:14:49
в этой области 180 кнопок02:14:52
пи, так и останется, потому что это02:14:55
Он больше по ширине, да?02:14:57
оставайся таким, а потом централизуй02:15:01
теперь он центрирует его вертикально02:15:04
горизонтально, справа, мы используем02:15:07
О02:15:09
выровнять элементы по центру, который по сути является02:15:14
вопреки оправданию содержания02:15:16
Центральное содержимое в этом случае будет02:15:19
вертикальное выравнивание и выравнивание элементов02:15:22
горизонтальное выравнивание, чтобы они02:15:24
мы слиплись, но теперь, когда я02:15:25
Кнопка ALine элемент По центру выравнивается по02:15:27
центр02:15:29
Хорошо, теперь я думаю, что это почти02:15:31
Когда закончу, я удалю этот фон.02:15:33
Оранжевый здесь, потому что он не оранжевый и02:15:37
я поставлю настоящий фон02:15:40
реальный фон этого элемента вот02:15:44
да, у него есть непрозрачность, верно?02:15:48
так что мы можем использовать rgba это02:15:51
функция02:15:53
CSS, который мы говорим красный, зеленый и02:15:56
Синий и альфа, альфа будет непрозрачностью.02:15:58
который мы хотим поместить в элемент02:16:01
В данном случае, каково это?02:16:03
черный, вообще-то ты собираешься сделать это вот так02:16:06
это окей, это не три нуля, окей02:16:09
потому что это02:16:11
o Красный, правый, красный, зеленый и синий02:16:16
если мы поставим ноль, цвет останется02:16:18
настолько черный, что это видно здесь02:16:21
Черный, добавим еще одну запятую02:16:24
запятая и теперь это конфигурация02:16:28
непрозрачности этого элемента непрозрачность02:16:31
элемента будет02:16:32
насколько непрозрачно это будет выглядеть на экране02:16:36
В этом случае мы можем поставить02:16:39
0,302:16:41
О, ты видел, что там произошло, да?02:16:44
Позвольте мне положить это сюда еще раз, я уберу это02:16:46
удалить эту настройку города02:16:48
так что запятая в основном для нас02:16:50
отдельные настройки были бы, если бы я02:16:53
просто возьми это 0,3, я возьму02:16:56
Сотри его и увидишь, что оно стало черным, верно?02:17:00
Теперь, если я верну его обратно02:17:03
запятая02:17:06
0,3 и у него была серьезная непрозрачность02:17:10
как будто это было похоже на непрозрачность02:17:12
30% ок, вот и достиг такого эффекта02:17:15
вот и поехали02:17:19
бос02:17:21
Кнопка «лодки» Все лодки имеют класс02:17:25
кнопка может стилизовать ее и будет стилизовать ее02:17:28
всем сразу что-то одно02:17:31
он беспокоит лодки здесь, у него есть02:17:33
край02:17:34
есть выступ02:17:38
Белый. Удалим этот край как полоску.02:17:41
граница Са02:17:44
Фон B также для кнопок02:17:48
фон02:17:49
от них02:17:51
Это тоже нас беспокоит02:17:53
установить фон Нет, потому что кнопка02:17:56
по умолчанию там есть фон, который02:17:57
вот эта серая зона02:18:00
ниже пока течет, бот02:18:03
фон фон и он это забирает02:18:06
там тоже и мы можем курсор02:18:11
Указатель. Курсор-указатель по сути представляет собой02:18:13
Указатель есть указатель, верно?02:18:16
чтобы мы могли выглядеть так, когда пройдет время02:18:19
мышка сверху - это маленькая ручка, вот что02:18:21
курсор, если я его удалю, он останется с02:18:24
обычный курсор Курсор-указатель хороший02:18:26
Когда у вас есть элемент, на который можно кликнуть02:18:28
да, что значит, чтобы люди это поняли02:18:31
человек может нажать здесь и тогда в любое время02:18:33
ребята, вам нужна ссылка, которая идет02:18:34
быть кликабельным, использовать свойство курсора02:18:37
Укажите нас02:18:39
элементы, и нам нужно было сделать02:18:43
кнопки, кнопка закругленная, да?02:18:46
упускаю один момент, поэтому кнопки пон кнопка02:18:52
IMG, вот я использую селектор02:18:55
потомков, прямо внутри кнопки есть02:18:58
изображение, верно?02:19:00
HTML здесь, кнопка изображения, затем есть02:19:05
тег изображения внутри кнопки, поэтому02:19:08
вот что я использую этот селектор вот и я02:19:10
используйте все теги изображений, и мы02:19:13
поставят пограничные радиостанции пограничные радиостанции02:19:15
это свойство, которое мы используем для02:19:17
способность держать вещи в порядке02:19:19
потому что элементы в HTML02:19:21
все равно квадратный, правильный или прямоугольный, но02:19:25
если мы хотим устроить раунд, он02:19:28
мы можем использовать пограничное радио 50%, только если02:19:30
Если я его удалю, здесь будет квадрат.02:19:32
пуговицы, если я их надену, они будут круглыми02:19:37
ХОРОШО02:19:39
Итак, позвольте мне посмотреть, так ли это. Ах, один02:19:41
здесь не хватает этой кнопки02:19:44
luff в HTML есть класс go02:19:47
Эспеон здесь, позволь мне вернуться к02:19:49
Я собираюсь уточнить здесь и проверить02:19:52
имеет выбранный класс. Запомнить в02:19:55
законченный проект Луффи у него есть02:19:57
его здесь нет, его здесь нет02:19:59
работаем, но когда мы02:20:01
выберите персонажа, которым он станет02:20:04
немного02:20:05
более заметный имеет немного цвета02:20:08
внизу, и он становится немного больше02:20:11
кнопка, выбранная для нас, чтобы сделать02:20:14
Мы уже видели это раньше, верно?02:20:16
ты можешь сделать это вот так02:20:18
кнопки пон кнопка пон02:20:22
[Музыка]02:20:23
выбрано почему Потому что одного не хватало02:20:27
один закрывает Чавес, потому что кнопка, когда02:20:30
у него есть выбранный класс02:20:33
также просто кнопка с02:20:36
выбранный класс будет иметь стиль02:20:39
другое, в данном случае это будет02:20:43
Масштаб преобразования, который является функцией масштаба02:20:47
напиши вот так02:20:48
взбираться02:20:50
шкала02:20:54
1.2, чтобы вы могли видеть, как далеко это зашло02:20:57
больше, ты видишь, он получил02:20:58
больше, чем другие, мы02:21:00
восхождение, да?02:21:02
увеличивая размер этого02:21:04
элемент в 20% будет равен 1,2 мкм.02:21:11
ничего — это нормальный размер элемента 1.202:21:15
это немного больший элемент02:21:17
P9 будет хорошим элементом02:21:20
больше Хорошо, но мы хотим 1,2 и мы02:21:24
Вы хотите, чтобы теневой ящик также был теневым ящиком?02:21:28
напиши вот так02:21:31
w Box Shad - это02:21:34
край02:21:38
тень Тень — это тень, верно?02:21:41
тень элемента в данном случае мы02:21:44
поставлю ноль02:21:46
ноль 1002:21:48
пикселей и цвет границы, который мы хотим02:21:51
что02:21:53
D9 D9 D9 D Упс, вот так D9 D9 D902:22:02
напечатай один02:22:04
Грей, вот я не знаю, сможешь ли ты это сделать02:22:06
вижу очень хорошо, но он поставил край02:22:08
серый здесь02:22:09
ох, но он квадратный02:22:13
правильно Почему Потому что край - это так и есть02:22:17
помещен в div. Помните, я сказал, что02:22:19
погружения квадратные или или02:22:21
прямоугольные, они не круглые, поэтому02:22:24
нам нужно уйти02:22:27
кнопка div, справа, квадратная, круглая02:22:32
тогда мы даже сможем прийти сюда02:22:34
ниже или выберите все, что вы можете сделать с02:22:37
мышь, если хочешь посчитать CRL C, иди сюда02:22:40
на кнопку и дает Crol V, так что теперь02:22:43
кнопка разделение кнопки также имеет02:22:46
радиус границы 50%, а не только изображение02:22:49
это внутри, и теперь оно останется02:22:51
идеально круглый край, затем02:22:55
это в основном все02:22:57
Это единственное, за что он остался здесь, верно?02:22:59
с02:23:01
это эта прокрутка, да?02:23:04
убери свиток, ты можешь подняться сюда02:23:06
в баре и дать02:23:10
переполнение скрыто, потому что все02:23:14
если бы скрытое переполнение было бы всем этим02:23:17
есть избыток, нет перелива02:23:20
португальский02:23:22
это было бы, хм, я не знаю, на кончике02:23:26
языке в любом случае Бето будет искать его в02:23:29
Google02:23:30
Переводчик, но он сильно переполнен02:23:34
Спасибо, что бы у вас ни было02:23:37
переполняющий прямо из бара, как02:23:39
создать эти свитки02:23:42
незнакомцы, мы скроем это и02:23:45
тогда он сможет ES a d и тогда он02:23:48
выглядит вот так, вроде без этого02:23:51
прокрути это02:23:53
на самом деле вертикальная горизонтальная прокрутка02:23:56
что это было тогда, сейчас проект такой02:23:59
Так что это гораздо ближе к тому, что есть02:24:02
наш последний проект просто отсутствовал02:24:05
отзывчивая часть, да, ребята?02:24:07
Итак, давайте сделаем адаптивную часть02:24:10
Подойди сюда, в CSS, я объясню, что02:24:13
что такое ответственность, это новое02:24:16
файл раньше02:24:18
отзывчивый всего на несколько вещей02:24:20
Ребята, сначала я думаю в этом проекте02:24:23
поэтому мы еще не разместили тексты02:24:25
да, да нет, так что мы пойдем, когда02:24:29
Давай закончим урок здесь, ладно?02:24:31
поместит нужные тексты в HTML02:24:34
персонажей и мы сделаем02:24:36
zip-файл есть в дискорде на канале02:24:39
Проект One Piece как всегда, тогда ты02:24:42
может быть основано02:24:44
есть много людей, которые пытаются02:24:46
делайте это вместе, и это дает какое-то ощущение02:24:48
ошибка, да, маленькая ошибка, что-то нормальное02:24:50
потому что часто человек делает02:24:52
вместе и пытаемся написать код и02:24:54
слушаю, обращаю внимание, а затем иду туда и02:24:56
Напиши что-нибудь02:24:58
неправильно, напишите наконец это в CCS в HTML, если02:25:02
Если ты напишешь неправильное слово,02:25:03
доставлять неприятности02:25:05
поэтому совет, который мы даем: стоп02:25:08
попытка присоединиться выдает ошибку, попробуйте02:25:12
обратите внимание на Живи, потому что Живи02:25:14
Это будет записано позже, вы можете02:25:17
В конечном итоге выгоднее предоставить02:25:20
внимания, чем пытаться делать вместе, а не02:25:22
ничего не понимаю, поэтому обрати внимание02:25:25
затем вы попытаетесь сделать это вместе и сравнить02:25:27
с кодом, который мы отправим туда02:25:29
на канале Discord тоже, так что ты02:25:32
можно увидеть, что вы сделали неправильно или02:25:35
даже использовать там наш собственный код, но02:25:37
Если вы хотите сравнить и посмотреть, что вы02:25:39
они совершали ошибки, это тоже круто, иногда ты ошибаешься02:25:41
возился с CSS, у тебя все нормально02:25:43
CSS мой CSS02:25:45
идеально, и да, возможно, ваш CSS02:25:48
верно, но тогда вы посмотрите в свой HTML и02:25:50
что-то не так, тогда HTML и02:25:52
CSS важен и нужен02:25:54
будет идеальным, если ваш HTML имеет02:25:57
какая-то ошибка, какой-то div не на своем месте02:25:59
какой-то элемент неуместен, имя02:26:01
неправильный класс вызовет проблемы, а ты не будешь02:26:03
это не будет правильно стилизоваться, так что всегда02:26:06
также обратите внимание на HTML в дополнение к CSS, который02:26:08
тогда ты создаешь Красоту02:26:10
Думаю, на этом закончились эти маленькие советы.02:26:13
Часть ответственности отсутствует, верно?02:26:15
мы объясним, что02:26:16
идея02:26:17
ответственность, а затем дать02:26:21
Через некоторое время мы откроем чат02:26:22
новый и ответю на некоторые02:26:25
Если у вас есть сомнения, то создайте этот файл здесь02:26:29
внутри адаптивного CSS02:26:31
шт.02:26:33
ОК, а что такое отзывчивость?02:26:37
в основном мы знаем, как адаптироваться к02:26:39
тот же экран, та же страница, на которой мы находимся02:26:42
создание для нескольких устройств02:26:44
другое, например, если я открою02:26:46
Инструменты разработчика здесь наши инструменты02:26:49
разработчик, я дам один02:26:52
проверить На самом деле мне это даже не нужно02:26:55
сделай это, да? Я мог бы сделать это вот так, если бы только02:26:58
я эх, потяни вправо, измени размер экрана, пока02:27:02
здесь все меню упаковано в02:27:04
поверх всего, прямо поверх контента02:27:07
все глючно, т.е. на меньшем экране02:27:10
На экране мобильного телефона все будет02:27:13
глючит, поэтому, чтобы быть отзывчивыми, мы02:27:16
Вам нужно это исправить, чтобы на вашем мобильном телефоне02:27:19
на планшете любое устройство с02:27:21
экран меньшего размера работает как02:27:25
способ, которым люди могут пользоваться02:27:27
ваш сайт, верно?02:27:30
Не то чтобы все прослушивалось, как у меня.02:27:33
Я даже не смог нажать кнопку там02:27:34
ниже Итак, как нам это сделать02:27:37
Давайте разберемся – отзывчивость02:27:39
у него есть очень важная концепция, которая02:27:43
это как и медиа-запросы02:27:45
правильно Итак, давайте создадим мне медиа-запрос02:27:48
Я покажу тебе, для чего она нужна02:27:49
ОК, ты поставишь это @ media, ОК, media02:27:54
медиапространство открывает и закрывает скобки и02:27:59
в скобках мы будем02:28:02
подскажи какой размер02:28:04
какой размер экрана я хочу применить02:28:08
новые стили в основном02:28:10
Например, мы можем положить Макса02:28:15
Виджет02:28:17
следующий нет, верно Макс с М для обезьяны Макс02:28:22
виджет два02:28:24
точки, то мы02:28:27
первое измерение — это ширина экрана,02:28:30
мы хотим изменить это 76902:28:34
Пи красота и ключи открытия и закрытия02:28:37
Итак, структура медиазапроса такова02:28:39
@mia open close открывающие круглые скобки Макс02:28:44
виджет двоеточия02:28:47
769 PX закрывает скобки, открывает скобку и02:28:50
закрой ключ теперь внутри открытия закрой02:28:52
Ключи здесь вы разместите селекторы02:28:55
что тебе нужно стилизовать, ок?02:28:57
свойства нужных селекторов02:28:59
стиль от02:29:02
пример02:29:04
контент я покажу вам на практике02:29:06
станет гораздо понятнее, точка, имя тире02:29:13
имя персонажа, точка, тире02:29:20
ó Тогда в этом селекторе имени02:29:24
персонаж, я просто добавлю один02:29:25
фоновый цвет02:29:27
красный, ничего не произошло02:29:30
на самом деле ничего не произошло для двоих02:29:31
причины, по которым сначала нам нужно связать02:29:34
отвечает за HTML Итак, давайте сделаем02:29:36
это здесь в02:29:40
HTML Давайте поднимемся наверх, затем стили02:29:44
вы даже можете объединить эти два здесь и02:29:48
давайте скажем так02:29:52
связь02:29:55
CSS и вот я его поставлю, я все удалю02:29:59
Вот здесь, я поставлю косую черту02:30:01
упс02:30:02
точка слэш src, я сделаю это быстро02:30:07
здесь, потому что это то, что мы уже сделали02:30:10
ОК, поехали, ребята, продолжим,02:30:13
Пойдем быстрее, пока не отключилось электричество.02:30:15
снова02:30:17
кхм, поставь туда полный экран и поехали02:30:22
давай отдадим ему, окей, я здесь остановился02:30:25
Ребята, ох, у меня было, я собирался, я связал02:30:27
да, я собирался дать ссылку, даже не помню, было ли02:30:29
Мне удалось сделать это до того, как погас свет.02:30:31
но ох, я не мог, тогда пойдем02:30:34
мы создали наш адаптивный02:30:35
давайте свяжем это с HTML, то же самое02:30:37
что мы уже сделали с другими, верно?02:30:39
тогда я отвечаю02:30:41
шт. шоу, займи это место здесь, что я02:30:44
Мне не нравится это пространство, так что теперь оно02:30:46
Это связано, это первое, верно?02:30:49
но это правило у нас было02:30:50
Написал сюда, пока не сработало, почему?02:30:53
Потому что это произойдет только тогда, когда экран02:30:56
достигнем 7 769 пикселей, так что давайте сделаем02:31:00
тест, возьмем наш экран02:31:03
браузер и измените размер o o02:31:06
вот если мы откроем d тоже мы02:31:09
ты даже можешь увидеть02:31:10
осмотри, позволь мне вытащить это сюда02:31:13
здесь внизу, здесь справа он02:31:15
покажет ширину и высоту, которые02:31:18
с твоим браузером сейчас все в порядке, выйди, ох02:31:23
и когда мы туда поднимемся02:31:24
в02:31:26
769 здесь применяется стиль, так и есть02:31:29
в основном это то, что мы используем02:31:30
медиазапросы выше 69 из 769 не будут02:31:34
Хорошо, позвольте мне закрыть это сейчас02:31:39
мы можем начать добавлять стили02:31:40
что нам нужно Итак, поехали02:31:42
первое, что я собираюсь сделать, о, я сделаю02:31:45
Я возьму это здесь, это был просто тест02:31:47
делай это так02:31:49
Главный мост толстой кишки После02:31:53
Так вот этот наш псевдо02:31:56
элемент, мы изменим его один раз02:31:58
немного у меня в мобильнике, даже скопирую сюда02:32:01
o правило o o Человек o Бета и/или02:32:05
команда может отправить новую в дискорд02:32:09
что это здесь, это немного02:32:11
отличается от того, что у нас было02:32:13
сделано раньше, почему, потому что на мобильном телефоне02:32:15
Мы не думали, что это хорошо02:32:18
Градиент02:32:20
Итак, здесь, на мобильном телефоне, мы играли02:32:23
градиент туда к02:32:25
Низкая красота, потому что тогда мы пойдем.02:32:28
поместите содержимое ниже02:32:30
кнопки, так что лучше, чтобы они оставались там02:32:32
ниже, так что в основном это здесь02:32:34
мы просто немного изменили его02:32:36
позиционирование, позвольте мне нажать Ctrl Z02:32:37
что я думаю, что сделал02:32:39
чушь, поэтому здесь мы изменили02:32:41
позиционирование немного в порядке, в принципе02:32:44
вот что мы здесь сделали, так что я пойду02:32:45
оставь это здесь, в видении, вот так, потом02:32:47
мы можем видеть02:32:49
О02:32:51
вот так, а потом мы видим вещи02:32:54
происходит на мобильном телефоне на мобильном телефоне02:32:57
на экранах шириной 769 или 76902:33:02
Есть еще кое-что, что я собираюсь сделать02:33:05
Вот, позвольте мне посмотреть, что еще есть02:33:07
сделай здесь здесь после02:33:11
фон мы можем поставить один02:33:13
ширина 100 В02:33:17
Так что же мы делаем?02:33:20
здесь мы перезаписываем02:33:22
правила, стили, которые у нас были02:33:27
в нашем файле Styles.css, и вот мы02:33:29
У Main After был такой стиль с02:33:35
фон шириной 80 VW a02:33:39
собирались02:33:41
переопределить эти стили, когда02:33:44
иметь экран меньше 76902:33:46
когда у тебя экран меньше, чем у 769 I02:33:48
я не хочу, чтобы это было02:33:50
80 широкий правый виджет viport, потому что02:33:54
Я хочу, чтобы он занимал всю ширину02:33:56
теперь потом оно перезапишется и будет02:33:58
поставьте 100 VH шириной 100, затем02:34:01
мы можем даже посмотреть здесь02:34:03
проверим, давайте проверим элемент02:34:06
отсюда После02:34:09
ох ох теперь он положит это сюда ох когда02:34:12
для максимальной ширины 769 перезаписей для02:34:16
эти свойства здесь селектор он02:34:18
это должно быть одно и то же, ребята02:34:20
Это ответственный человек, он должен быть таким же02:34:23
Как использовать стили, чтобы избежать проблем?02:34:26
и тогда вы сможете перезаписать02:34:29
правила прямого стиля02:34:32
Это когда он такой рискованный02:34:34
потому что ты знаешь, ты знаешь, что это было02:34:36
надстрочный индекс с02:34:38
успех, красотка, позволь мне закрыть здесь02:34:41
но мы перезапишем здесь02:34:43
О, образ, образ, он похож на нас.02:34:47
можешь поставить немного выше02:34:48
Вот как мы делаем Main Point02:34:51
характер02:34:53
характер02:34:55
ах точечное изображение, да, а что у нас?02:34:58
изображение там02:34:59
персонажей02:35:02
То же правило, тот же селектор, что и у нас.02:35:05
Я использовал его там в наших стилях02:35:07
Допустим, у него есть тот, который нам нужен02:35:08
что у него рост02:35:12
85% - это всего лишь это, а затем заканчивается02:35:15
высота немного меньше, чем была02:35:18
До операции здесь не хватало м, справа Изображение там02:35:24
теперь он остается, он немного поднимается02:35:26
ты видишь, он поднимается на одну ступеньку выше02:35:29
немного, но это все, что нужно,02:35:33
изображение вот и все, давайте исправим содержимое02:35:35
точка02:35:37
контент снова, используя тот же селектор02:35:40
Здесь мы можем сделать следующее02:35:42
содержание, ты ведь помнишь все это?02:35:43
область здесь, так что мы можем сделать02:35:45
оправдайся с нимем, сегодня он с Центром02:35:47
Он расположен прямо посередине экрана.02:35:49
Но мы можем поставить Flex02:35:53
конец, а потом он спустился туда02:35:57
Flex end в основном предназначен для этого.02:36:00
в02:36:01
Центр, да, а что было раньше?02:36:03
центрируйте конец Flex в центре02:36:07
он будет в конце02:36:11
правильно, поэтому он будет располагаться в конце02:36:14
в конце элемента, где он находится, верно?02:36:18
поэтому он разместит его там внизу02:36:22
ОК, давайте просто поставим здесь левый ноль02:36:25
для02:36:27
он застревает здесь слева02:36:32
ОК, а еще мы можем надеть топ02:36:36
вершину, и мы можем поставить отрицательную вершину02:36:39
здесь, потому что мы хотим, чтобы он остался02:36:41
дальше вверх, так что он внизу02:36:44
мы хотим немного позиционировать его02:36:46
выше можно надеть топ02:36:47
отрицательный, если вы знаете значения02:36:50
отрицательный, верно, пока вы знаете, что02:36:52
что они Что ты делаешь, если02:36:53
были уверены, что это подтолкнет 20% к02:36:57
низкий, но как нам поставить отрицательный результат02:36:58
вперед он идет, все наоборот, да?02:37:02
поднимаю этот вопрос, как будто это нормально02:37:04
поэтому, если мы поставим 50%, это будет02:37:07
дальше мы одни02:37:09
перенос позиции там нашей02:37:12
ширину контента, мы можем поставить02:37:15
Виджет Макса в нем не хватает точки и02:37:18
здесь запятая, если не поставить точку02:37:20
и запятая эмет, он не успеет02:37:22
найди себя, когда он уйдет02:37:25
автозаполнение ширины, которую мы можем02:37:27
поставь без VW, потому что мы люди02:37:29
теперь мы хотим, чтобы он занял02:37:32
полная ширина02:37:33
пока он просто прилип к краям02:37:36
здесь02:37:37
Итак, мы уже видели, что отступы02:37:40
обеспечивает внутреннее пространство между02:37:43
контент и края контента, верно?02:37:46
посмотрим на практике просят 30 пикселей02:37:49
теперь он ушел и остался02:37:51
более раслабленный02:37:54
здесь все края, прямо как сбоку02:37:57
левый правый низ и верх02:37:59
мы даже можем увидеть это, проверив02:38:02
Ох в содержании, ох уж эти зеленые зоны02:38:06
где оно находится, позволь мне вытащить его02:38:07
здесь больше для02:38:08
вниз, когда я навожу на него курсор мыши02:38:11
там зеленая рамка02:38:13
Видеть это – признак того, что02:38:16
прокладка у него прокладка и одна02:38:18
расстояние внутри элемента между02:38:22
между содержимым элемента и границами02:38:24
поэтому мы смогли подать заявку02:38:27
по одному02:38:28
прокладка и теперь остается только сделать02:38:32
о имя персонажа мы можем02:38:34
немного уменьшите, затем укажите02:38:37
точечное содержание02:38:41
имя02:38:44
символ, мы поместим шрифт02:38:47
размер 3602:38:53
пиксели света02:38:56
уменьшено и в описании мы можем02:38:59
также делайте контент02:39:02
де02:39:03
декаль дал бы, дал бы, мог бы поставить один02:39:07
Теперь мы можем немного ограничить это02:39:09
ширина контента здесь02:39:10
Макс02:39:12
Виджет на 500 пикселей02:39:17
ОК, количество будет ограничено 500.02:39:21
максимум пикселей максимальной ширины, верно?02:39:25
если мы увидим здесь, вот он с02:39:29
централизованно, да? Потому что это не так?02:39:32
применяя правила адаптивного стиля02:39:34
но когда я сокращаю это сюда, оно уходит02:39:37
примени это правило здесь, теперь поехали02:39:40
передвинь кнопки, давай снимем их02:39:41
кнопки оттуда, потому что они там не так хороши02:39:43
прямо тогда точка02:39:47
кнопки02:39:49
кнопки и в кнопках мы можем сделать02:39:53
гибкое направление02:39:57
Здесь не обязательно включать гибкий дисплей.02:40:00
потому что у него уже есть дисплей Flex, который был02:40:03
размещено здесь без стилей02:40:05
o Играть с помощью гибких кнопок. Но мы можем02:40:10
измените Только свойство Flex Direction02:40:12
когда это размер 76902:40:15
поэтому мы ставим Flex Direction Row02:40:17
потому что мы хотим, чтобы они остались внутри02:40:18
очередь прямо сейчас, поэтому они02:40:20
они остались вот так на одной стороне02:40:22
еще я выровняю элементы02:40:26
ах, конец Flex тоже здесь, в них, потому что тогда02:40:31
они спускаются туда и остаются там02:40:34
ниже и шириной02:40:41
100%02:40:42
в этом долгу пуговиц то он02:40:46
теперь они будут занимать 100% размера02:40:47
что им придется занять здесь02:40:51
ширина02:40:52
правильно, и я также могу добавить немного дополнений02:40:55
их, чтобы они не застревали02:40:56
там в конце, затем заполнение 30 пикселей02:40:59
Теперь они остаются здесь02:41:02
необременённый, да, не так02:41:04
склеились и чего не хватало?02:41:07
уменьшено только на маленьких кнопках02:41:10
кнопки точка кнопка IMG02:41:18
Хорошо, а как насчет маленьких изображений?02:41:45
уменьшение сотового телефона по-прежнему имеет02:41:49
очень хорошее расширение02:41:51
Chrome Но он должен быть доступен и в других02:41:54
браузеры тоже, что такое отзывчивость02:41:57
зритель Beto может отправить его вам на02:42:00
чат и все такое, но это действительно хорошо, потому что02:42:02
Ты02:42:03
Вы можете установить его и нажать здесь02:42:06
Итак, когда вы находитесь на веб-сайте и нажимаете02:42:07
в нем у вас есть несколько H просмотров02:42:12
другой экран, так что этот здесь для02:42:14
пример на экране c02:42:16
справа, ISO, это экран O внизу02:42:18
у него есть экран, это будет экран02:42:20
планшет плюс или это может быть планшет02:42:25
Обратился сюда, там большие экраны, да?02:42:30
как здесь будет02:42:31
планшет получился как портрет, да?02:42:35
люди02:42:37
позвони сюда, есть еще один экран, который представляет собой02:42:40
экран ноутбука с разрешением 1440 пикселей, затем El02:42:43
он дает тебе несколько02:42:46
несколько способов увидеть одно и то же02:42:49
Даже на вашем сайте есть несколько разрешений02:42:52
по-другому, это действительно круто, и вы можете видеть02:42:55
здесь, на мобильном телефоне или здесь, на мобильном телефоне02:42:57
мы все еще собираемся кое-что сделать02:42:58
небольшие изменения, чтобы сделать его лучше02:43:00
Итак, мы пришли сюда, о, мы пришли02:43:03
закончил этот 769, могу даже02:43:05
закрой, если захочу, но я оставлю это02:43:06
открой здесь, чтобы ты мог увидеть02:43:10
скопируй скопируй эту строку сюда сделай сделай02:43:12
СМИ Я приду сюда после02:43:15
Я вставлю это замыкание сюда02:43:17
управлять VTR CTR v и сейчас мы как раз собираемся02:43:21
вместо этого измените здесь02:43:24
У 769 экран будет еще меньше, верно?02:43:26
быть 402:43:30
25 человек будут закрывать некоторые экраны02:43:32
сотовый телефон, так что давай продолжим02:43:37
изображение персонажа, пойдем тоже02:43:39
введение ВМС действительно может помочь02:43:44
нравится это изображение, поэтому, когда мы его поместим02:43:48
автоматическая высота для этого изображения здесь02:43:51
мы можем02:43:53
киньте изображение, оно будет такого же роста02:43:56
ей нужно позаботиться об этом02:43:58
элемент здесь и тогда это будет02:44:01
адаптироваться к ширине, не знаю, получится ли02:44:04
Можете ли вы осмотреть внутри, позвольте мне02:44:07
видишь, становится немного плохо02:44:09
правильно, внутри адаптивного средства просмотра изображение02:44:13
Вот он, такой высокий02:44:17
автоматически останется на высоте02:44:21
для чего она нужна02:44:22
займи и так и останется ах упал но я02:44:24
Я думал, что раньше было круче02:44:28
Думаете, раньше это выглядело круче?02:44:31
оставь это до тех пор, пока, может быть, не останется только половина02:44:34
над лицом дурака и все такое, и у вас есть02:44:36
что тестирование, например, есть люди, которые будут02:44:39
используйте разные изображения, верно?02:44:41
необходимость протестировать его в вашем проекте, как есть02:44:42
что остается?02:44:47
ОК, тогда сделай это02:44:49
здесь в то время логотип мы тоже02:44:53
могу дать измененный контент02:44:57
Скоро вот этот, да?02:44:59
большой на мобильном телефоне, чтобы мы могли дать02:45:00
снижение на сотовом телефоне - это нехорошо02:45:03
ты делаешь вещи слишком большими, да?02:45:04
Я спрашиваю, почему он остается02:45:06
довольно02:45:08
странно, поэтому ширина равнялась 0 пи02:45:11
тогда и02:45:14
высота 7502:45:18
у piels нет отзывчивости, vi нет02:45:22
Я хочу установить его, теперь ты можешь это сделать02:45:23
Далее вы также можете прийти сюда и уйти02:45:25
из02:45:26
ответы нажмите F12 вправо, чтобы войти в02:45:29
Инструменты Chrome D и вот переключатель02:45:32
устройство02:45:33
tob щелкает здесь и меняет02:45:37
визуализация, как если бы это был экран02:45:38
сотовый телефон или айфон02:45:41
XR прямо здесь для нашей презентации02:45:44
немного маленький, но ты справишься02:45:47
f12 нажмите здесь на ноутбуке Zinho02:45:51
маленький сотовый телефон здесь, на значке, здесь ты можешь02:45:53
пока вы не выберете другие устройства02:45:57
да, но он немного мал, поэтому я02:45:59
Я буду использовать адаптивный подход специально для вас02:46:01
ты видишь лучше, дай мне посмотреть02:46:04
вот так, но вы можете использовать его вот так02:46:06
также просто чтобы вы знали, если нет02:46:08
хочу использовать адаптивный vier, но это02:46:09
Это действительно хорошо, поэтому советую вам им воспользоваться, ладно?02:46:14
эй, где я был здесь доволен?02:46:17
Мы можем внести изменения в02:46:18
контент здесь тоже02:46:21
ох, давай просто дадим один02:46:25
топ Мужчины 30% Потому что тогда будем играть02:46:28
содержание немного выше02:46:30
на мобильном телефоне02:46:32
Да02:46:35
и символ имени точки контента мы02:46:40
Можете ли вы немного сократить имя?02:46:41
символ и размер шрифта02:46:47
2402:46:49
Рыбы, поэтому нам нужно сократить имя02:46:52
из02:46:54
характер и последнее, что мы02:46:56
сделаю, это перенесу нас02:46:59
кнопки здесь, в кнопках, мы идем02:47:01
перезаписать02:47:03
отступ мы дадим отступ 2002:47:05
пиксели для них, поэтому мы02:47:08
теперь переместим кнопки сюда, верно?02:47:10
и мы можем превзойти это, потому что они02:47:12
они как бы застряли на экране02:47:14
сотовый телефон внизу, чтобы мы могли02:47:16
дать верх -02:47:17
20%02:47:19
Он поднимается и остается немного дальше02:47:22
Здесь, ближе к тексту02:47:24
Хорошо, и наконец кнопки02:47:30
точка02:47:31
ботал, и теперь мы собираемся двигаться дальше02:47:35
изображение и давайте дадим ему Макс02:47:38
широкий02:47:40
5002:47:42
Пиксели красоты02:47:45
Вот и все, что теперь можно дать02:47:48
Один тестировал на устройствах, да?02:47:51
некоторые другие, поэтому нет02:47:53
много дел, потому что у некоторых есть02:47:56
разная высота и ширина Но02:47:57
Что действительно важно, так это то, что человек может02:48:00
пользуйся правильно, так хоть теперь меню02:48:04
это там02:48:06
Вы не можете видеть там шкаторину02:48:10
вы можете прекрасно видеть все02:48:12
элементы тогда Все устройства02:48:16
для правильной работы. Если вы обнаружите02:48:17
устройство, которого нет02:48:19
работает, пришлите его нам, чтобы мы могли02:48:22
хочу посмотреть, какой из них не работает, но02:48:24
Видимо, это работает для всех02:48:25
устройства, которые мы затем закончим02:48:27
часть отзывчивого02:48:30
ребята, это не так уж и сложно, если не считать02:48:32
отзывчивый Да, но от этого зависит многое02:48:34
единственное, что ломается?02:48:37
проблема многих людей в том, что они этого не делают02:48:38
Я правильно оформляю элементы02:48:40
как оформить селекторы в адаптивном стиле02:48:42
право переопределить правила CSS02:48:46
Это очень важно, поэтому я собираюсь открыть это.02:48:48
здесь наш02:48:50
Этот проект здесь тот же проект, что и02:48:53
мы отправили тебе тот же ZIP02:48:55
что мы отправили вам02:48:57
в классе в среду, среду, а не четверг02:49:03
ОК, я использую тот же самый02:49:05
Zip и мы приступим к созданию02:49:08
JavaScript здесь, но перед созданием02:49:10
JavaScript, мы хотели это исправить02:49:12
пуговица, вещь, которая была у кого-то02:49:13
даже прокомментировал другой, который был02:49:15
у одного был такой, если ты сможешь увидеть02:49:19
позволь мне дать тебе альтернативный лото, чтобы ты открыл его02:49:22
Вот, просто сообщаю вам, кто нет, а?02:49:25
Я не знаю, где молния, она там, в02:49:28
канал дискорд проект One Piece, оставь его02:49:34
посмотрим, смогу ли я увеличить и посмотреть02:49:37
Я не знаю, сможешь ли ты это увидеть02:49:39
но здесь внизу02:49:41
иметь это02:49:43
один тип один02:49:45
прозрачность при выборе02:49:48
вот это увидел кто-то с очень хорошим глазом02:49:52
Вот и все, а потом мы это исправим02:49:55
в основном вы идете сюда, в CSS по адресу02:49:57
P стили CSS, тогда вы посмотрите там02:50:00
сорт02:50:02
где02:50:06
где кнопка, я думаю, это02:50:09
Вот и все, здесь вы можете управлять F02:50:13
нет, внутри CSS содержится элемент управления F, тогда вы02:50:16
Вы можете выполнить поиск, набрав кнопку, а затем вы02:50:18
Можете ли вы найти, где доступен этот класс?02:50:21
и вот на этом фоне, который находится в02:50:23
мы идем02:50:26
помещать02:50:28
#6 и 0 будут фоном02:50:31
Черный здесь, Эль уже не будет02:50:36
та прозрачность, которая имела02:50:39
остался здесь, почему02:50:40
Это произошло, вероятно, потому, что02:50:41
вот это кнопка, прямо тег02:50:43
кнопка, пока кнопка, она немного раздражает02:50:46
стилизовать некоторые вещи02:50:48
В конечном итоге это проходит, верно?02:50:53
добавление сюда этого цвета решает проблему02:50:54
проблема в том, что тогда это, а теперь02:50:58
давайте перейдем к JS. Хорошо, я пойду в папку здесь02:51:01
в этой папке JS, возможно, у вас уже есть02:51:04
эта папка тоже создана там, если вы этого не сделаете02:51:06
Если у тебя есть, я сделаю02:51:09
удалить я сделаю это с нуля я нажму02:51:12
над src я приду сюда по кнопке02:51:15
Новая папка. Я создам папку под названием02:51:18
JS я нажму Enter и здесь я нажму02:51:21
снова на ней, и я собираюсь прийти сюда02:51:24
новый файл, и я назову его здесь02:51:29
index.js с этим файлом JS все в порядке02:51:32
похоже на то, что мы делали в CSS, верно?02:51:34
создали файл, который мы будем02:51:35
создайте файл расширения PJS, который является02:51:38
точка JavaScript после этого мы02:51:41
Вам также нужно связать JavaScript, верно?02:51:43
с HTML, как мы это делали только с CSS02:51:45
что немного отличается от02:51:47
мы поместили это здесь, в Главе, что02:51:50
Мы даже не делали этого с помощью css, поехали туда02:51:54
ниже, прежде чем бар закроется здесь02:51:58
о, мы напишем02:52:00
сценарий и выберите эту опцию здесь02:52:03
О, скрипт src, src — это источник, верно?02:52:08
источник Где находится файл путь02:52:10
до файла, тогда мы сможем сделать02:52:12
точно так же, как мы поступили с02:52:13
CSS02:52:15
бар02:52:17
src нет SS тогда правильно02:52:20
Индекс JS JS ок, так вот так02:52:24
даже файл JS мы можем дать02:52:27
сдвиньте F, чтобы сделать отступ в коде02:52:30
он останется02:52:32
мило, вот и все, это связано здесь02:52:35
и тогда мы сможем, например, протестировать02:52:39
JavaScript здесь, так что, если вы помните02:52:41
мы видели этот объект Window02:52:43
правильно, мы можем использовать точку окна02:52:48
Оповещение открывается и закрывается, скобки открываются и02:52:51
закрыть двойные кавычки02:52:53
Привет, итак, окно — это объект, который02:52:57
объект-окно, который мы видели, верно?02:53:00
объект, он будет иметь эти свойства02:53:02
как мы видели02:53:04
Также свойства, которыми они могут быть02:53:07
методы также, поэтому Alert - это метод02:53:11
Это либо свойство, либо метод, верно?02:53:14
Так что в данном случае Алер один, один02:53:16
метод даже в этом случае является методом, который02:53:19
Поэтому мы используем эти методы, чтобы02:53:21
выполнить действия. Затем это оповещение02:53:23
в основном это все02:53:24
предупредить что-то02:53:28
этот аргумент, что я утверждаю, что мы02:53:31
Это происходит здесь, да?02:53:33
строка string is a — текстовый тип02:53:37
Привет, это здесь, в нашем браузере, идет02:53:39
выглядишь вот так, о незнакомец,02:53:42
Привет появился там, тебе не кажется, что я02:53:44
Я уже сохранил это раньше, теперь да, привет, да?02:53:48
появляется там Вот и все, это предупреждение02:53:50
браузер такой всякий раз, когда мы02:53:52
хочу предупредить нас02:53:53
будет использовать точку оповещения только таким образом02:53:56
Объясните, объясните людям, почему вы02:53:59
поместите сюда JS02:54:01
разместите это здесь в основном потому, что02:54:05
Мы хотим, чтобы JavaScript был02:54:07
последнее что загрузилось правильно02:54:10
Итак, как мы собираемся двигаться?02:54:13
подскажи, как мы будем транслировать вещи из02:54:14
Сам HTML нам нужен HTML02:54:17
загружаться первым, потому что если вы02:54:19
поместите туда скрипт на C, вы можете поместить02:54:21
сценарий там другими способами, ок02:54:23
но мы не покажем это, но если ты02:54:25
поставил скрипт сверху и страница не открывается02:54:28
загрузилось, но мы не будем02:54:29
уметь захватывать элементы на экране02:54:32
кнопка в любом случае, что нам нужно получить02:54:34
в JavaScript, чтобы иметь возможность покинуть страницу02:54:37
интерактивный Итак, если есть JS02:54:40
внизу Сначала загружается страница02:54:42
потому что он, он заряжается, сделан из02:54:44
сверху вниз02:54:46
да, по крайней мере, в том, где мы находимся02:54:48
и он загрузит весь HTML и02:54:50
затем он загрузит JS, а затем02:54:52
Мы готовы использовать JS02:54:55
в общем, это да, положи это туда и02:54:59
доверься нам, тогда доверься нам02:55:02
в основном это и вот это здесь02:55:05
Мы уже запускаем код02:55:07
JavaScript уже загружает код02:55:09
правильно, как мы видели в нашем02:55:11
тест02:55:13
вот нажми F5 и он выдаст одно02:55:15
предупреди там, чтобы я знал, что все в порядке02:55:17
ссылка правильная, так что я могу даже заплатить за это02:55:19
здесь и сейчас мы начнем кодить02:55:21
хорошо, напишем наш собственный код, ладно?02:55:24
первое, что нужно сделать перед отъездом02:55:26
передай код, который мы всегда говорим02:55:28
ты думаешь о том, как он себя чувствует02:55:30
работа, в которой мы любим писать02:55:33
форма комментария, что за код02:55:35
нужно сделать, это в основном подумать02:55:38
логика, которую будет иметь код, а затем02:55:40
Вы можете удалить эти комментарии, если хотите02:55:42
Если хочешь, да? Они будут еще одним гидом.02:55:44
чтобы ты мог следовать, когда захочешь02:55:46
напишите свой код, затем комментарий02:55:49
фрагмент текста, который будет02:55:52
интерпретируется JavaScript как текст02:55:54
сам по себе, а не как код, так почему02:55:56
пример я могу02:55:58
[Музыка]02:55:59
напиши привет02:56:02
мир Если я отмечу здесь весь этот текст02:56:05
ох, и дай мне контрольную точку и запятую02:56:10
Я комментирую код, так что вот он02:56:13
комментарий02:56:15
Две полоски, я комментирую строку, и если я02:56:17
кнопка косой черты звездочки и нет и закрыть02:56:21
Я заканчиваю косой звездочкой, тогда я02:56:25
Я могу комментировать онлайн здесь02:56:28
Так это комментарий02:56:30
multilinha и это будет комментарий от02:56:33
одна строка02:56:36
О, когда я прихожу сюда, я уже02:56:38
Я не могу писать больше, потому что тогда это не так02:56:39
еще один комментарий, а затем комментарии02:56:42
поэтому они остаются в этом цвете, а затем02:56:44
Следовательно, они не интерпретируются02:56:46
браузере, ничего не произойдет. Возможно,02:56:48
ваш комментарий Оставайтесь в одном цвете02:56:51
разные в зависимости от темы, которую вы02:56:53
они его используют, но дело в цвете, а не в цвете02:56:57
Это обязательно будет этот светло-фиолетовый02:56:58
Хорошо, но не волнуйся, это произойдет02:57:00
правильно, в любом случае только одно даетОписание:
⚠️ Arquivos do projeto AQUI - https://drive.google.com/drive/folders/1ZBzN4M_XEMVE3okj1tZlLNZH1Zjn7bpy?usp=drive_link Ao invés da nossa aula ao vivo de sempre hoje teremos o - Intensivo do Zero ao Código: Construindo um projeto de programação completo 💻 Nesse intensivo vamos te ensinar a criar um site de seletores de personagens com o tema One Piece do zero usando HTML, CSS e JavaScript e isso tudo DE GRAÇA aqui no nosso canal do YouTube! 🚀 🚨 INSCREVA-SE NA SEMANA DO ZERO AO PROGRAMADOR CONTRATADO ➡️ De 1 a 7 de abril Semana de imersão para programadores iniciantes. Aulas teóricas e práticas. Direto ao ponto. Te dando o mapa com o passo a passo do ZERO até seu primeiro emprego dev em até 7 meses! 🔗 https://devemdobro.com/evento/?li15_source=youtube&li15_campaign=organico&li15_medium=youtube&li15_term=video&li15_content=video-conteudo ☻ ☻ ☻ ☻ ☻ ☻ ☻ ☻ ☻ ☻ ☻ ☻ ☻ ☻ ☻ ☻ ☻ ☻ ☻ 🎙 PODCAST DEV EM DOBRO - Terças-feiras no Youtube, Spotify e Deezer 🔴 AULA AO VIVO - Toda quinta-feira no youtube, 18h! 📱 Nos segue no Insta pra acompanhar nossos storys diários e nossos carrosséis de dicas de programação! - https://www.facebook.com/unsupportedbrowser 🛡️ Participe da comunidade para programadores iniciantes e aspirantes, a Guilda Dev em Dobro no Discord https://devemdobro.com/comunidade-dev-em-dobro/ 📚 Livros recomendados - https://devemdobro.com/livros-recomendados/ ➡️ Ajudamos QUALQUER PESSOA a aprender programação e conseguir seu PRIMEIRO EMPREGO na área em ATÉ 7 MESES! 🚨 ✨ Nos acompanhe nas redes para dias, conteúdos e vídeos diários. 🙃
Готовим варианты загрузки
* — Если видео проигрывается в новой вкладке, перейдите в неё, а затем кликните по видео правой кнопкой мыши и выберите пункт "Сохранить видео как..."
** — Ссылка предназначенная для онлайн воспроизведения в специализированных плеерах
Вопросы о скачивании видео
Как можно скачать видео "Intensivo do Zero ao Código: Construindo um projeto de programação completo - PROJETO ONE PIECE"?
Сайт http://unidownloader.com/ — лучший способ скачать видео или отдельно аудиодорожку, если хочется обойтись без установки программ и расширений. Расширение UDL Helper — удобная кнопка, которая органично встраивается на сайты YouTube, Instagram и OK.ru для быстрого скачивания контента.
Программа UDL Client (для Windows) — самое мощное решение, поддерживающее более 900 сайтов, социальных сетей и видеохостингов, а также любое качество видео, которое доступно в источнике.
UDL Lite — представляет собой удобный доступ к сайту с мобильного устройства. С его помощью вы можете легко скачивать видео прямо на смартфон.
Какой формат видео "Intensivo do Zero ao Código: Construindo um projeto de programação completo - PROJETO ONE PIECE" выбрать?
Наилучшее качество имеют форматы FullHD (1080p), 2K (1440p), 4K (2160p) и 8K (4320p). Чем больше разрешение вашего экрана, тем выше должно быть качество видео. Однако следует учесть и другие факторы: скорость скачивания, количество свободного места, а также производительность устройства при воспроизведении.
Почему компьютер зависает при загрузке видео "Intensivo do Zero ao Código: Construindo um projeto de programação completo - PROJETO ONE PIECE"?
Полностью зависать браузер/компьютер не должен! Если это произошло, просьба сообщить об этом, указав ссылку на видео. Иногда видео нельзя скачать напрямую в подходящем формате, поэтому мы добавили возможность конвертации файла в нужный формат. В отдельных случаях этот процесс может активно использовать ресурсы компьютера.
Как скачать видео "Intensivo do Zero ao Código: Construindo um projeto de programação completo - PROJETO ONE PIECE" на телефон?
Вы можете скачать видео на свой смартфон с помощью сайта или pwa-приложения UDL Lite. Также есть возможность отправить ссылку на скачивание через QR-код с помощью расширения UDL Helper.
Как скачать аудиодорожку (музыку) в MP3 "Intensivo do Zero ao Código: Construindo um projeto de programação completo - PROJETO ONE PIECE"?
Самый удобный способ — воспользоваться программой UDL Client, которая поддерживает конвертацию видео в формат MP3. В некоторых случаях MP3 можно скачать и через расширение UDL Helper.
Как сохранить кадр из видео "Intensivo do Zero ao Código: Construindo um projeto de programação completo - PROJETO ONE PIECE"?
Эта функция доступна в расширении UDL Helper. Убедитесь, что в настройках отмечен пункт «Отображать кнопку сохранения скриншота из видео». В правом нижнем углу плеера левее иконки «Настройки» должна появиться иконка камеры, по нажатию на которую текущий кадр из видео будет сохранён на ваш компьютер в формате JPEG.
Сколько это всё стоит?
Нисколько. Наши сервисы абсолютно бесплатны для всех пользователей. Здесь нет PRO подписок, нет ограничений на количество или максимальную длину скачиваемого видео.