0:00
Здравствуйте!
В предыдущих видео мы рассмотрели различные системы позиционирования,
такие как относительная, абсолютная и фиксированная.
Также узнали что такое плавающие элементы,
и какие правила существуют при наложении элементов.
В этом видео я хочу рассказать вам про некоторые приемы и практики из верстки.
Первая задача звучит так: подсветить строку и колонку при наведении на ячейку.
Ну со строкой все довольно просто,
то есть при наведении на элемент tr мы просто-напросто меняем цвет фона.
С колонкой все немного сложнее.
Есть как минимум два решения.
Первое из них выглядит как-то так: мы в ячейки устанавливаем псевдоэлемент
со свойствами position: absolute, left: 0, top: −5000 пикселей.
Ширину устанавливаем в ширину колонки и задаем высоту 10 000 пикселей.
Конечно, это решение не универсальное в случаях, если таблица очень длинная.
Но иногда может помочь.
Далее, задаем z-index: −1, то есть псевдоэлемент находится за таблицей.
Выглядит это как-то вот так.
Вроде бы все, что нужно, но есть некоторые нюансы.
Например, построчно...
некоторые строки, точнее, они другого цвета.
В этом случае при наведении на эту строку и колонку,
эта строка должна перекрашиваться.
Для этого приходится для каждой второй ячейки
также задавать псевдоэлемент, который будет по ширине и по высоте,
который будет лежать за элементом, который появляется при наведении.
Второй способ выглядит так.
Вместо z-index: −1, мы указываем z-index: 1.
Тем самым элемент находится перед таблицей, и выглядит это как-то вот так.
Это решение не очень красивое, потому что блок, находящийся перед,
– ему приходится задавать прозрачность, что как бы не дает полного эффекта.
Следующая задача.
Для этой задачи используются float-элементы.
Задача звучит так: нужно поменять порядок элементов.
В коде элементы идут следующим образом: сначала идет элемент b1, b2, b3, b4.
А отобразить нам нужно их наоборот: b4, b3, b2, b1.
Эта задача решается довольно просто.
Мы просто-напросто всем элементам задаем свойства float: right.
И тогда все элементы выстраиваются в противоположном порядке.
При помощи этого подхода можно решить задачу со звездочками.
То есть при наведении на элемент мы выделяем элементы, которые находятся
после, но визуально они находятся перед элементом, на который навели.
Задача № 3.
Она звучит так: нужно сделать трехколоночный макет так,
чтобы центральная колонка менялась в зависимости от ширины экрана.
Решается она следующим образом: создаются три элемента — left,
right и centre, именно в таком порядке.
Далее, задаем элементу left свойство float: left,
правому — float: right, и самому блоку задаем свойства overflow: hidden.
После чего центральный блок начинает избегать крайние блоки,
и при изменении ширины правая и левая колонка остаются фиксированы,
а внутренний контент начинает меняться.
Четвертая задача звучит следующим образом: нам нужно сделать так,
чтобы блочный элемент начал замечать float-элемент, который лежит внутри него.
Но при условии, что мы не можем использовать overflow hidden.
Потому что внутри этого блока могут располагаться блоки,
которые абсолютно позиционируются и выходят за его пределы.
В этом случае верстка выглядит следующим образом.
Есть box и внутри лежит float-элемент.
У float-элемента, соответственно, свойства float: left, ну и задана какая-то высота.
Самому боксу мы задаем псевдоэлемент after.
И задаем два свойства: display: block и clear: both.
То есть этот элемент устанавливается в конец страницы,
начинает работать свойство clear: both, тем самым создается эффект,
что блочный элемент начинает замечать плавающий элемент.
Этот прием очень часто используют и называют его clearfix.
На этой неделе вы узнали, какие системы позиционирования существуют,
что такое плавающие элементы, для чего нужны z-index,
и также разобрали некоторые примеры, которые часто используются на практике.
Олег Семичевразработчик интерфейсов, Яндекс
Артем Кувалдинразработчик интерфейсов, Яндекс
Мохов Олегразработчик интерфейсов, Яндекс
