Молниеносное создание сайтов landing page. Урок 9 | Блочные и строчные элементы часть 2

Автор Maksim Inshakov
Молниеносное создание сайтов landing page. Урок 9 | Блочные и строчные элементы часть 2

Добро пожаловать в очередной урок и в этом видео как я говорил вам — это будет продолжение предыдущего урока мы здесь будем более детально разбирать на явном примере нашей блочные и строчные элементы сайт в этом уроке.

Я не буду использовать редактор. КВН буду использовать редактор который стоит у меня уже на локальном компьютере через несколько уроков. Вы тоже себе его.

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

Как работает весит пример и так я открыл этот текст в браузере Firefox и здесь у меня установлены дополнительные расширения сколько уроков вы также их. Установите вместе со мной, но сейчас речь конечно же не об этом. Давайте посмотрим как всё — это работает я использую свои расширить и нажимаю здесь кнопочку outline outline Block Elements. Итак давайте теперь зайдём в структуру нашего кода. Я открываю, а наш кот. Как вы видите здесь на штахет ничего нового. Я думаю нет также тот же самый doctype открывается HTML, но нас интересует, что происходит в теге Body, а перед вами здесь находится новый тык-тык называется див див — это базовая структура элемента блоков на сайте то есть любой блок который вы хотите открыть. Как правильно называется диван конечно сейчас. МРК там есть другие блоки которые служат для правильная структура сайта если вы будете развивать таким образом текст тегами которому я вам покажу следующим в следующих видео с которым мы знакомиться. Они служат для семантической разбивки то есть поисковикам потом будет удобнее ваш сайт находить и соответственно он быстрее будет выскакивать в топы используется практически повсеместно он пришел на замену табличной верстки которая раньше использовалась. Что такое табличная верстка табличная верстка осуществлялась другим тегом через таблицы сайт разделялся на равные либо не равные колонки и потом в этих колонках всё складывалось not Tag div. Уже убрал эту необходимость и когда мы пишем Def допустим сейчас пока — это всё уберем pro100 Def вот у нас здесь открылся так и здесь снизу закрылся я могу сейчас просто пока, что — это убрать чтобы вас не смущало и может сказать уже мой первый сайт. Да и так нам необходимо увидеть, что происходит перед вами Tag div понятно, что никакой информации больше здесь не будет на сайте кроме тега. Если разве, что я здесь поставлю что-нибудь допустим единичку чтобы что-нибудь хотя бы отображалось нажимаю обновить outline outline icons и смотрим, что перед нами появился Tag div и здесь вот единичка так. Отлично Теперь давайте разместим здесь немного текст как я говорил вам, что ты где в является блочным элементом подразумевается — это то, что было. Как вы видите растягивается полностью на всю страничку и в нём уже. Мы можем позиционировать элементы. Давайте теперь с позиционированием другой элемент. Допустим мы хотим разместить здесь заголовок. Как вы знаете H1 — это блочный элемент H1 поэтому. Давайте проведем эксперимент нажимаем вводим вернее здесь какой-нибудь текст допустим. Пусть — это будет текст рыба и обнови нажимаем outline outline icons и теперь мы видим, что в теге div содержится этот H1 давайте для наглядности. Я сейчас добавлю бегу div Class с классами мы с. Вами познакомимся буквально в следующем уроке. Я сейчас хочу сделать просто пример чтобы по. Как — это работает пока не V читы войти в класс и мы с вами пройденных буквально в следующем уроке. Я просто хочу и правильно всё с позиционировать и так outline outline Block Elements теперь на наглядном примере вы видите как позиционируется — это всё дело и так вы видите как у нас теперь стоит H1 красным подсвечивается и находится. ВТБ Да — это всё блочные элементы. Обратите внимание, что он распространяется на всю страницу сразу основная разница между блочным и элементом состоит именно в том, что у нас сам тигр и контент который в нём находится то есть содержимое распространяется полностью на всю страницу полностью занимает всё область кроме конечно тех отступов которые мы напишем чтобы он не занимал — это уже задаётся вручную и так давайте сделаем ещё какой-то, тогда наглядности допустим сделаем. ТГП так же напишем какой-нибудь текст и. Обратите внимание, что всё. Весь концерт полностью у нас вложен в этот. Диф — это обязательно. Мы Сейчас разберёмся сами случай когда мы перестанем и, что произойдет если мне правильно закроем давайте сейчас обновим посмотрим как outline и вы видите, что у нас всё вот blockido стоят в этом дифтонги. Давайте ещё возьмём пары элементов срочно срочных допустим. Нам необходимо выделить. Вот этот текст жирным берём наш строчный элемент этот. ЕКБ текст жирным берём б открываем и закрываем его и вставляем здесь какой-то текст. Давайте обновим ся и видите, что у нас стал жирным. Давайте посмотрим на outline и выйдите, что после применения данного тела у нас только поменялась жирность текста никакого блока у нас не добавилась и структура текста. Как шла в одну строчку так она и пошла ты здесь у нас никаких прерываний нету переноса строки то есть блок нам даёт момент — это то, что он переносит строку на новом. То есть получается как бы с нового абзаца всё происходит если допустим я сейчас сделаю вот здесь где-нибудь новый то всё перенесет. Но к сожалению — это будет. Неправильно если я уже не.

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

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