Тёмный

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

Школа itProger / Программирование
Просмотров 102 тыс.
50% 1

Для создания красивого дизайна сайта необходимо уметь корректно располагать блоки. За урок мы изучим разные форматы позиционирования блоков и создадим небольшой веб сайт.
✅ Полезные ссылки:
🔫 Курс на сайте 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

Опубликовано:

 

15 май 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 94   
@vlad_gnom
@vlad_gnom 2 месяца назад
Блин, очень инстересный материал. Сам CSS с первым опытом даёт незабываемые положительные чувства. Так рад что заглянул сюда.
@user-jp4qt7wd1e
@user-jp4qt7wd1e 3 года назад
Спасибо огромное! Ты меня спас ! Теперь спокойно можно идти спать, а завтра повторение!
@user-rs5bg3jb3t
@user-rs5bg3jb3t 3 года назад
Просто топчик, не останавливайся пж🙏
@adamm4739
@adamm4739 3 года назад
Я ждал этот урок, спасибо, всё понятно!
@ksenrix
@ksenrix 9 месяцев назад
Спасибо всё понятно ! Очень понятный Урок !!!
@moscow8881
@moscow8881 Год назад
крутой фокус с fixed ) спасибо за полезный контент )
@nels8511
@nels8511 3 года назад
спасибо автору за старания
@main_idler
@main_idler 3 года назад
Отличный урок!
@povshensky4080
@povshensky4080 10 месяцев назад
Как же доступно объясняет автор, на этом этапе прям всё очень легко. Я думаю главное сейчас понять как работают свойства, а запомнить их можно будет в дальнейшем при работе.
@crafters2454
@crafters2454 Год назад
Автору respect
@livius0653
@livius0653 3 года назад
Thanks for lesson
@kulakalex4001
@kulakalex4001 2 года назад
Класный урок получился
@user-rq4pp4ss3k
@user-rq4pp4ss3k 3 года назад
Вот бы почаще а так с каким интервалом выходят видио по ксс?
@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 месяца назад
О, спасибо
@shaomi2000
@shaomi2000 3 года назад
Произошла концепция, круто
@user-ee1os4mc6k
@user-ee1os4mc6k 3 года назад
В конце рассказа про float лучше было сказать про flexbox и grid, т.к. float устарел.
@user-zr8ib4ib9u
@user-zr8ib4ib9u 2 года назад
Что за теги ? Оба
@migelonio292
@migelonio292 2 года назад
@@user-zr8ib4ib9u такиое теги. Такими родились
@shaykhinurov
@shaykhinurov 9 месяцев назад
Прикольно
@TheBigChannel_
@TheBigChannel_ Год назад
🙏🏻
@kristomatsumoto5039
@kristomatsumoto5039 2 года назад
Вообще, ту ошибку с float вы исправили не совсем корректно. Для того, чтобы границы (и отступы внутри по желанию) не учитывались можно использовать box-sizing как border-box (padding-box) А вообще float довольно косячный и устаревший. Лучше использовать flexbox :т
@KDAngel43
@KDAngel43 Год назад
Flexbox наше все
@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 легче и привычней чем теги
@Pavel_Derevyanko
@Pavel_Derevyanko 3 года назад
👍
@beeprodaction9601
@beeprodaction9601 Год назад
Кто - нибудь знает почему изначально основная часть не прижалась к верхней кромке а выровнялась по середине время 10:32 ( мы же отступ прописали только слева ?????
@eyes_in_ice
@eyes_in_ice 17 дней назад
2:32 Я ЗНАЛ ЧТО itProger НАШ ЖИВЧИК!!! НЕ ПРОСТО ТАК ТАМ ФЛАГ РОССИИ!
@alanwilliams800
@alanwilliams800 Месяц назад
Сегодня пробовал повторить всё тоже самое, что в уроке - у меня в результате получились разбросанные по странице блоке. Попробовал вместо float прописать overflow - header и footer встали на намеченные места, а вот main и aside остались в свободном плавании. Работаю я с brackets и opera. Когда пойму в чём дело - напишу
@4ebupek067
@4ebupek067 8 месяцев назад
В момент Float это намёк на правых и левых
@user-xw6wj7it3l
@user-xw6wj7it3l 7 месяцев назад
Кто подскажет почему не работает блок, не отображается div .Все было норм.,Пока не уперся в блоки . хрень какая-то пошла. Атом переустанавливал.?HTML отображается, а CSS нет.
@ClipDash5
@ClipDash5 Месяц назад
Ребята стоит этот курс смотреть?
@bakhramilakhunov1743
@bakhramilakhunov1743 9 месяцев назад
у меня не получается ошибок нет но блоки не вызодят что делать
@alexandermetadonov
@alexandermetadonov 3 года назад
HTML: Поставить лайк CSS: button { color: grey; } button:pressed { color: blue; }
@nejestoky3026
@nejestoky3026 Год назад
кто
@ariku23
@ariku23 Год назад
Почему мои стили css подключаются только через link? Автор не указывает stylesheet в head у него все работает, а у меня нет В чем проблема? Объясните пожалуйста 🙏
@goncharov__alex
@goncharov__alex Год назад
указывает. эти строки свернуты. смотри по нумерации строк.
@pledger73
@pledger73 2 года назад
все это весело, вот только при сворачивании окна структура блоков не сохраняется и все ломается, тоесть страница не адаптивна если я правильно выражаюсь
@user-yq5hz4kz4b
@user-yq5hz4kz4b 2 года назад
Агась, нужны флексы или гриды
@Alex-mo3nk
@Alex-mo3nk Год назад
смотрите программировании и создавайте сайты!
@kinolife605
@kinolife605 3 года назад
Проблема с css файлов, на сайте не отображается мои стили( я включал его )
@kusoviktoriia9047
@kusoviktoriia9047 3 года назад
А через link
@3dtravel291
@3dtravel291 3 года назад
ctrl+f5
@Gravityfallsed
@Gravityfallsed 8 месяцев назад
я чёт не понял, почему ты сематику не юзнул?
@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 ладно
@neyarickman
@neyarickman 9 месяцев назад
Будни новичка: Сидит пишет код. Запускает. Ничего нету. Ничего не понимает, все смотрит ищет, что не так? После перевода кода с редактора в обычный блокнот, тот замечает, что не связал html с css. Блин комом. Бывает. -30 минут жизни. 🤣🤣🤣🤣
@linker7176
@linker7176 8 месяцев назад
АХАХААХАХАХПАХ,ЧЕЛ,СПАСИБО ТЕБЕ,Я ПОЛЧАСА МУЧАЛСЯ
@user-hi7mm1jw2c
@user-hi7mm1jw2c 3 года назад
1:02
@user-bf2pd4qw9k
@user-bf2pd4qw9k Год назад
Крайне удивлен, что 0 информации о флекс бокасках
@user-md1gw5wx2y
@user-md1gw5wx2y 3 года назад
привет, при помощи какого тега сдвинуть блок внутри блока? спасибо за ранее.
@grokgrok6148
@grokgrok6148 3 года назад
padding - для родительского; margin - для дочернего
@KDAngel43
@KDAngel43 Год назад
@@grokgrok6148 нет, что за бред
@KDAngel43
@KDAngel43 Год назад
С помощью flexbox
@grokgrok6148
@grokgrok6148 Год назад
@@KDAngel43 как же раньше двигали, когда не было flexbox
@user-nh4kg1du4k
@user-nh4kg1du4k Год назад
У меня не получается, хоть все и прописала в css, просто не работает. По видео # одного цвета с названием, а у меня белым просто, а название синим
@mariiachyrva7588
@mariiachyrva7588 4 месяца назад
у меня тоже самое . вы как то решили эту проблему ?
@artesartes3563
@artesartes3563 Год назад
Почему то не работает обращение ни как к * ни как к html, что это может быть?
@grovestreet2126
@grovestreet2126 2 месяца назад
не подключил css файл наверное
@fivegrandtheftauto4581
@fivegrandtheftauto4581 2 года назад
Ютуб заблокируют где можно посмотреть твои видосы
@user-zk1ce2rl6m
@user-zk1ce2rl6m Год назад
Уже заблокували (
@itcode2803
@itcode2803 Год назад
впн
@musicchannel1907
@musicchannel1907 3 года назад
А как все запоминать ведь когда учишься новому старое забываеться(
@motay8103
@motay8103 3 года назад
У тебе в голове откладывается это, просто повторяй потом все запомнишь
@youngtea5706
@youngtea5706 3 года назад
Повторение - мать учения
@Anekdots_memes
@Anekdots_memes Год назад
заведи тетрадь и пиши там все выучил за урок , так сразу запоминается все
@Sadness27
@Sadness27 Год назад
@@youngtea5706 ага
@igorbiryk8204
@igorbiryk8204 7 месяцев назад
А почему 2 id на одной странице?
@pwelsi
@pwelsi 7 месяцев назад
Все дело в том,что он указал,2 один айди,чтобы к обоим применились одинаковые стили,так удобнее.
@smileofnight9187
@smileofnight9187 Год назад
п
@LikeChel
@LikeChel Год назад
казалось бы, причем тут Россия? 2:39
@user-mk2uu3zx2x
@user-mk2uu3zx2x 7 месяцев назад
2:38 флаг России
@mshqnull
@mshqnull 7 месяцев назад
гавно фигма лучше
@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_ Год назад
🙏🏻
Далее
За кого будете болеть ? ✊🏻
00:21
За кого будете болеть ? ✊🏻
00:21