Изучение CSS для новичков / Урок #8 - Позиционирование блоков

  Переглядів 102,245

Школа itProger / Программирование

Школа itProger / Программирование

День тому

Для создания красивого дизайна сайта необходимо уметь корректно располагать блоки. За урок мы изучим разные форматы позиционирования блоков и создадим небольшой веб сайт.
✅ Полезные ссылки:
🔫 Курс на сайте itProger: itproger.com/course/css/8
⏰ Тайм коды:
00:00 - Начало
00:17 - Создание нескольких объектов
01:50 - Свойство «float». Обтекание объектов
04:40 - Создание каркаса сайта
06:23 - Написание стилей
12:48 - Позиционирование объектов
15:07 - Свойство «position»
20:30 - Заключительная часть
✔ Сообщество программистов: itproger.com/
✔ -------------
Вступай в группу Вк - prog_life 🚀
Группа FaceBook - goo.gl/XW0aaP
Инстаграм itProger: / itproger_official
Instagram: / gosha_dudar
Telegram: t.me/itProger_official
Twitter - / goshadudar
- Уроки от #itProger 👨🏼‍💻
- Все уроки по хештегу #itprogerLessons

КОМЕНТАРІ: 94
@vlad_gnom
@vlad_gnom 2 місяці тому
Блин, очень инстересный материал. Сам CSS с первым опытом даёт незабываемые положительные чувства. Так рад что заглянул сюда.
@user-jp4qt7wd1e
@user-jp4qt7wd1e 3 роки тому
Спасибо огромное! Ты меня спас ! Теперь спокойно можно идти спать, а завтра повторение!
@user-rs5bg3jb3t
@user-rs5bg3jb3t 3 роки тому
Просто топчик, не останавливайся пж🙏
@adamm4739
@adamm4739 3 роки тому
Я ждал этот урок, спасибо, всё понятно!
@ksenrix
@ksenrix 9 місяців тому
Спасибо всё понятно ! Очень понятный Урок !!!
@povshensky4080
@povshensky4080 10 місяців тому
Как же доступно объясняет автор, на этом этапе прям всё очень легко. Я думаю главное сейчас понять как работают свойства, а запомнить их можно будет в дальнейшем при работе.
@moscow8881
@moscow8881 Рік тому
крутой фокус с fixed ) спасибо за полезный контент )
@nels8511
@nels8511 3 роки тому
спасибо автору за старания
@main_idler
@main_idler 3 роки тому
Отличный урок!
@crafters2454
@crafters2454 Рік тому
Автору respect
@mail2aleksey
@mail2aleksey 2 роки тому
Автор, в твоем полном курсе меня удивило твое непонимание механизма работы float. Как пример в твоем уроке по верстке(номер 11) ты тегу header даешь float: left, мотивируя тем, что у всех блоков в нем есть float: left и так надо, потому что иначе почему то все работает неверно.. Ещё в 2010 году на сайте htmlbook появились замечательные статьи по этому поводу. Вся фишка в том, что блоки с тегом float не участвуют в потоке документа, соответственно их высота не учитывается в расчете высоты блока header и ты наблюдал то, что макет ползет. Для этого достаточно прописать в header например overflow: hidden или добавить пустой div с тегом clear: both в конце заголовка. Overflow: hidden отменяет действие float и все работает корректно. Мне кажется ученикам стоит давать понимание потока документа. То же касается позиционирования Position: absolute убирает блок из потока документа.
@reshikino
@reshikino 2 місяці тому
О, спасибо
@livius0653
@livius0653 3 роки тому
Thanks for lesson
@user-ee1os4mc6k
@user-ee1os4mc6k 3 роки тому
В конце рассказа про float лучше было сказать про flexbox и grid, т.к. float устарел.
@user-zr8ib4ib9u
@user-zr8ib4ib9u 2 роки тому
Что за теги ? Оба
@migelonio292
@migelonio292 2 роки тому
@@user-zr8ib4ib9u такиое теги. Такими родились
@user-rq4pp4ss3k
@user-rq4pp4ss3k 3 роки тому
Вот бы почаще а так с каким интервалом выходят видио по ксс?
@kulakalex4001
@kulakalex4001 2 роки тому
Класный урок получился
@shaykhinurov
@shaykhinurov 9 місяців тому
Прикольно
@shaomi2000
@shaomi2000 3 роки тому
Произошла концепция, круто
@user-kg8cy4rj1p
@user-kg8cy4rj1p 3 роки тому
А не легче сделать теги и уже к ним писать разные CSS свойства? Я думаю что так будет чуть чуть правильнее
@user-zr8ib4ib9u
@user-zr8ib4ib9u 3 роки тому
Тег main ? Или же article?
@fraiztv1429
@fraiztv1429 2 роки тому
Таких тегов нет
@JakeAdvenTime
@JakeAdvenTime 2 роки тому
@@fraiztv1429 есть
@ismailovmarat
@ismailovmarat Рік тому
тоже так подумал
@KDAngel43
@KDAngel43 Рік тому
разницы нет, но до HTML 5 этих тегов не было и юзали div с class или id. И для кого-то просто div легче и привычней чем теги
@kristomatsumoto5039
@kristomatsumoto5039 2 роки тому
Вообще, ту ошибку с float вы исправили не совсем корректно. Для того, чтобы границы (и отступы внутри по желанию) не учитывались можно использовать box-sizing как border-box (padding-box) А вообще float довольно косячный и устаревший. Лучше использовать flexbox :т
@KDAngel43
@KDAngel43 Рік тому
Flexbox наше все
@beeprodaction9601
@beeprodaction9601 Рік тому
Кто - нибудь знает почему изначально основная часть не прижалась к верхней кромке а выровнялась по середине время 10:32 ( мы же отступ прописали только слева ?????
@TheBigChannel_
@TheBigChannel_ Рік тому
🙏🏻
@bakhramilakhunov1743
@bakhramilakhunov1743 8 місяців тому
у меня не получается ошибок нет но блоки не вызодят что делать
@alanwilliams800
@alanwilliams800 Місяць тому
Сегодня пробовал повторить всё тоже самое, что в уроке - у меня в результате получились разбросанные по странице блоке. Попробовал вместо float прописать overflow - header и footer встали на намеченные места, а вот main и aside остались в свободном плавании. Работаю я с brackets и opera. Когда пойму в чём дело - напишу
@eyes_in_ice
@eyes_in_ice 14 днів тому
2:32 Я ЗНАЛ ЧТО itProger НАШ ЖИВЧИК!!! НЕ ПРОСТО ТАК ТАМ ФЛАГ РОССИИ!
@ClipDash5
@ClipDash5 28 днів тому
Ребята стоит этот курс смотреть?
@Pavel_Derevyanko
@Pavel_Derevyanko 3 роки тому
👍
@ariku23
@ariku23 Рік тому
Почему мои стили css подключаются только через link? Автор не указывает stylesheet в head у него все работает, а у меня нет В чем проблема? Объясните пожалуйста 🙏
@goncharov__alex
@goncharov__alex Рік тому
указывает. эти строки свернуты. смотри по нумерации строк.
@Gravityfallsed
@Gravityfallsed 8 місяців тому
я чёт не понял, почему ты сематику не юзнул?
@user-xw6wj7it3l
@user-xw6wj7it3l 7 місяців тому
Кто подскажет почему не работает блок, не отображается div .Все было норм.,Пока не уперся в блоки . хрень какая-то пошла. Атом переустанавливал.?HTML отображается, а CSS нет.
@pledger73
@pledger73 2 роки тому
все это весело, вот только при сворачивании окна структура блоков не сохраняется и все ломается, тоесть страница не адаптивна если я правильно выражаюсь
@user-yq5hz4kz4b
@user-yq5hz4kz4b 2 роки тому
Агась, нужны флексы или гриды
@4ebupek067
@4ebupek067 8 місяців тому
В момент Float это намёк на правых и левых
@kinolife605
@kinolife605 3 роки тому
Проблема с css файлов, на сайте не отображается мои стили( я включал его )
@kusoviktoriia9047
@kusoviktoriia9047 3 роки тому
А через link
@3dtravel291
@3dtravel291 3 роки тому
ctrl+f5
@Alex-mo3nk
@Alex-mo3nk Рік тому
смотрите программировании и создавайте сайты!
@YNASMNOGODEL
@YNASMNOGODEL Рік тому
как разместить текст в блоке по центру по вертикали?
@polardi69
@polardi69 Рік тому
внутри div
@andreasdekadnt7140
@andreasdekadnt7140 Рік тому
Через свойство vertical-align с атрибутом middle.
@DeBalzac
@DeBalzac Рік тому
Я дико извиняюсь конечно, но где строчка ? Как вообще реализуется проект в браузере, если нет этого тега?
@stain9600
@stain9600 Рік тому
Свернута эта строка
@EFIM_immersive_fun
@EFIM_immersive_fun 11 місяців тому
типа умный, а то, что в редакторе содержимое тега свернуто не увидел xD
@DeBalzac
@DeBalzac 11 місяців тому
@@EFIM_immersive_fun а мы с вами на "ты"?
@DeBalzac
@DeBalzac 11 місяців тому
@@stain9600 ясно... спасибо.
@EFIM_immersive_fun
@EFIM_immersive_fun 11 місяців тому
@@DeBalzac ладно
@user-nh4kg1du4k
@user-nh4kg1du4k Рік тому
У меня не получается, хоть все и прописала в css, просто не работает. По видео # одного цвета с названием, а у меня белым просто, а название синим
@mariiachyrva7588
@mariiachyrva7588 4 місяці тому
у меня тоже самое . вы как то решили эту проблему ?
@artesartes3563
@artesartes3563 Рік тому
Почему то не работает обращение ни как к * ни как к html, что это может быть?
@grovestreet2126
@grovestreet2126 2 місяці тому
не подключил css файл наверное
@user-md1gw5wx2y
@user-md1gw5wx2y 3 роки тому
привет, при помощи какого тега сдвинуть блок внутри блока? спасибо за ранее.
@grokgrok6148
@grokgrok6148 3 роки тому
padding - для родительского; margin - для дочернего
@KDAngel43
@KDAngel43 Рік тому
@@grokgrok6148 нет, что за бред
@KDAngel43
@KDAngel43 Рік тому
С помощью flexbox
@grokgrok6148
@grokgrok6148 Рік тому
@@KDAngel43 как же раньше двигали, когда не было flexbox
@user-hi7mm1jw2c
@user-hi7mm1jw2c 3 роки тому
1:02
@alexandermetadonov
@alexandermetadonov 3 роки тому
HTML: Поставить лайк CSS: button { color: grey; } button:pressed { color: blue; }
@nejestoky3026
@nejestoky3026 Рік тому
кто
@user-bf2pd4qw9k
@user-bf2pd4qw9k Рік тому
Крайне удивлен, что 0 информации о флекс бокасках
@neyarickman
@neyarickman 9 місяців тому
Будни новичка: Сидит пишет код. Запускает. Ничего нету. Ничего не понимает, все смотрит ищет, что не так? После перевода кода с редактора в обычный блокнот, тот замечает, что не связал html с css. Блин комом. Бывает. -30 минут жизни. 🤣🤣🤣🤣
@linker7176
@linker7176 8 місяців тому
АХАХААХАХАХПАХ,ЧЕЛ,СПАСИБО ТЕБЕ,Я ПОЛЧАСА МУЧАЛСЯ
@musicchannel1907
@musicchannel1907 3 роки тому
А как все запоминать ведь когда учишься новому старое забываеться(
@motay8103
@motay8103 3 роки тому
У тебе в голове откладывается это, просто повторяй потом все запомнишь
@youngtea5706
@youngtea5706 3 роки тому
Повторение - мать учения
@Anekdots_memes
@Anekdots_memes Рік тому
заведи тетрадь и пиши там все выучил за урок , так сразу запоминается все
@Sadness27
@Sadness27 Рік тому
@@youngtea5706 ага
@fivegrandtheftauto4581
@fivegrandtheftauto4581 2 роки тому
Ютуб заблокируют где можно посмотреть твои видосы
@user-zk1ce2rl6m
@user-zk1ce2rl6m Рік тому
Уже заблокували (
@itcode2803
@itcode2803 Рік тому
впн
@igorbiryk8204
@igorbiryk8204 7 місяців тому
А почему 2 id на одной странице?
@pwelsi
@pwelsi 7 місяців тому
Все дело в том,что он указал,2 один айди,чтобы к обоим применились одинаковые стили,так удобнее.
@smileofnight9187
@smileofnight9187 Рік тому
п
@user-mk2uu3zx2x
@user-mk2uu3zx2x 7 місяців тому
2:38 флаг России
@mshqnull
@mshqnull 7 місяців тому
гавно фигма лучше
@LikeChel
@LikeChel Рік тому
казалось бы, причем тут Россия? 2:39
@user-hp6th9rx5r
@user-hp6th9rx5r Рік тому
слишком быстро обьясняешь, для новичков не советую.
@supermonstor2141
@supermonstor2141 5 місяців тому
скорость поменяй, я вообще на х1,5 скорости смотрю
@mashhouse5160
@mashhouse5160 3 місяці тому
Еб*ал я этот html и css, ничего не понятно что как работает, вроде по логике так должно быть, но применение каких то свойств разбросает все элементы к чертям. Намного легче учить какой-то язык программирования чем это
@mike.excavator
@mike.excavator 3 місяці тому
dpaskf;sl'kfgsl;kfl;bmc
@AnderPython-tw3kp
@AnderPython-tw3kp Рік тому
Отличный урок!
@TheBigChannel_
@TheBigChannel_ Рік тому
🙏🏻
Изучение CSS для новичков / Урок #9 - Работа со списками
8:27
Школа itProger / Программирование
Переглядів 71 тис.
skibidi toilet 73 (full episode)
09:41
DaFuq!?Boom!
Переглядів 21 млн
Изучение CSS для новичков / Урок #7 - Стили для блоков
19:14
Школа itProger / Программирование
Переглядів 89 тис.
Изучение CSS для новичков / Урок #2 - Форматы подключения стилей
14:26
Школа itProger / Программирование
Переглядів 179 тис.
Основы CSS для Начинающих (в 2024)
19:21
Сергей Дмитриевский про IT
Переглядів 81 тис.
Изучение CSS для новичков / Урок #5 - Работа с фоновыми картинками
12:31
Школа itProger / Программирование
Переглядів 104 тис.