Всем привет, с возвращением.
В прошлом мы делали код вместе сегменты, где я кодировал,
вы кодировали вместе со мной, и мы сделали много маленьких ошибок вместе.
Сегодня я действительно хочу сделать обзор кода.
Я хочу, чтобы вы отдохнули и посмотрели на некоторые из кода, который я написал, и
увидели, как мелочи, которые мы изучали,
складываются вместе, чтобы создать более сложные веб-страницы.
Итак, давайте начнем с некоторого HTML.
Здесь у меня есть код, который просто собирается создать кучу разных div.
Единственная вещь, которая может быть новой, которую вы не видели раньше, это идея
индекса вкладки.
То, что делает индекс вкладки, это позволяет браузеру знать, что если кто-то
просматривает вашу страницу,
вы действительно хотите поместить различные элементы в фокус в другом порядке.
Итак, в этом случае первым делом будет A, а затем C, а затем B и т. Д.
Это еще один уровень доступности, который я хотел
представить вам в нашем коде.
Единственное, что я хотел, чтобы вы знали в этом HTML, - это то, что самый последний div
имеет класс, анимированный в нем.
Я сделал это немного другим, чтобы вы могли смотреть на переходы и
преобразования в действии.
Итак, давайте посмотрим на CSS, и играем с браузером.
Теперь, когда мы начинаем сверху, вы можете видеть, что я только
что набрал div, чтобы они были маленькими ящиками, где вы можете видеть содержимое, и
это не слишком скверны вместе.
Единственная вещь, которую вы, возможно, еще не использовали
в своем коде, это идея перехода на две секунды легкости.
Это позволит браузеру знать, что, когда мы меняем состояния,
мы хотим занять около двух секунд и облегчить его.
Но сначала давайте посмотрим на фокус.
В моем фокусе, я говорю, изменить цвет фона.
Так что теперь, когда я захожу в свой браузер,
я начну просматривать различные элементы.
И когда я это сделаю, вы увидите, что они все загораются.
Я собираюсь обновить страницу, потому что тот, который я ожидал пойти первым, не сделал.
Это потому, что я трахал до того, как мы начали печатать.
Так вот, мы идем.
Изменение цвета, а затем C, а затем B.
Это вы даете пользователю право перейти к наиболее важным разделам сначала.
Ладно, после фокуса, давайте поговорим о наведении.
Теперь, когда наведение приходит в дело, я говорю, что это сделать ширину 200 пикселей,
это было 100, и изменить цвет фона.
Так что давайте взглянем.
Я собираюсь выделить на «С» прямо здесь, затем «Б», а затем «А»,
и вы можете видеть, что это очень хороший, плавный переход.
Но одна из вещей, которые я хочу, чтобы вы заметили, это то, что когда я
ничего не зависаю, у нас на самом деле есть A-F в верхней строке, а
затем G через I внизу.
Когда вы начинаете немного сходить с ума, меняя размер вещей
динамически, вы можете выбросить все с позиции.
Поэтому убедитесь, что вы используете это экономно.
Ладно, давай перейдем к классной, последней.
Если вы помните, я сделал один div, и
я установил его анимированным, потому что я использовал класс animate.
Прямо сейчас, единственное отличие - цвет фона немного зеленый,
но я хочу показать вам, что происходит, когда я наведите на него курсор.
Когда я это сделаю, я начну трансформацию, где я скажу,
повернуть это на 360 градусов.
И кроме того, вместо того, чтобы иметь непрозрачность 0,4, что означает, как бы размыть
его, очистить его немного, установить его на полный цвет.
Вот мы идем.
Я думаю, это довольно круто.
Мы повернули его.
Когда мы сходим с зависания, он вращается назад.
Это те забавные вещи, которые вы можете добавить на свою страницу, когда
вы впервые узнаете, как кодировать, что действительно дает вам такое чувство
, эй, я делаю это, я делаю вещи меняются.
То, что я действительно призываю вас сделать сейчас, это вернуться, просмотреть лекцию о переходе,
просмотреть лекцию о преобразовании, убедиться и посмотреть, имеют ли эти концепции
немного больше смысла, что вы видели код в действии.
И я надеюсь, что вы сыграете с этим кодом, измените значения и
действительно повеселитесь с ним.
Так что удачи.