Всем привет. В сегодняшнем обзоре кода мы поговорим о создании календаря. Потому что мне действительно нравится в календарях то, что есть все эти маленькие, крошечные вещи, о которых вы должны думать, чтобы сделать вашу страницу профессиональной. То, что я имею прямо здесь, на экране, это очень, очень простой календарь, где вы можете видеть, у меня есть все дни в месяце. У меня также, в некоторые дни, небольшие встречи. Так что я пообедаю с мамой, или встречусь с деканом, или буду библиотечным помощником. И, 31, это Хэллоуин, так что буй! Что мы можем сделать, чтобы взять эту информацию, этот контент из нашего HTML5, и превратить ее в нечто, что действительно приятно? Давайте взглянем на то, что я с ним сделал. Здесь я использовал CSS для создания календаря , в котором много разных вещей происходит. Во-первых, я пошел вперед, и я хорошо стилизовал его. Я включил такие вещи, как радиус границы, выделенный в эти дни прямо здесь. Я понимаю, что это действительно трудно увидеть на экране прямо сейчас, но у меня на самом деле есть фоновое изображение для тех дней, чтобы он выглядел немного по-другому. Другое, что я добавил, это то, что в дни, которые имеют эти маленькие звездочки, если я нажму на них, фактическое назначение появляется. Так что, как вы можете видеть, я буду иметь дело с множеством различных элементов CSS. И я собираюсь медленно пройти через код, чтобы дать вам представление о том, что происходит. Теперь вам было бы невозможно следовать вместе со мной с этим кодом и точно знать, что я делаю. Вместо этого, я даю его вам в качестве ресурса, чтобы выбрать и понять различные части, как вам нужно, и как вы хотите включить их в свою страницу. Итак, давайте посмотрим на CSS. Вы можете видеть, что это очень, очень занятая страница. Так что просто сидеть сложа руки, и ты можешь услышать, как я говорю о разных вещах вместо того, чтобы пытаться прочитать код. Я вошел, и я хотел сделать свой календарь с очень хорошим радиусом границы, чтобы у меня было что-то вокруг. Дело в том, что сам стол на самом деле только эта часть. Это не подпись. То, что я сделал, так это я вошел и сказал: не беспокойтесь о двух верхних углах, здесь и здесь. Только кривая нижние два угла, все в порядке. Как мне получить эту крутую идею чередования между своего рода светло-серого и этого цвета и идти туда и обратно? Ну с этим вы можете идти вперед и использовать некоторые из различных псевдоэлементов. Так что в этом случае я вошел. И это не я. Это браузер говорит: эй, я собираюсь посмотреть на все разные строки таблицы. И всякий раз, когда я увижу странного ребенка, я сделаю его одним цветом, каждый раз, когда увижу ребенка, который будет четным, я сделаю его другим цветом. Это намного приятнее, чем вам нужно идти в свою таблицу и ставить класс равным четным, класс равен нечетному, класс равен даже, особенно если позже вы решите добавить больше информации, и он сбрасывает ваши строки. Это что-то действительно мощное, что вы должны попытаться воспользоваться. Как насчет того, когда вы пытаетесь сделать вашу страницу действительно профессиональной, элементы, которые перекрываются? Поэтому прямо здесь я смотрю на таблицу, строку таблицы и элемент таблицы. Я должен был пройти и подумать о каждом из них и думать о таких вещах, как, хм, ну, в моей последней строке таблицы, самый последний элемент таблицы, который имеет другую кривую, чем первый ребенок. Так что идите вперед, скачайте этот код и посмотрите на него и играйте с ним. Что произойдет, если вы прокомментируете это? Что будет происходить? Ладно, у меня довольно простой код для подписи, я пошел вперед и просто добавил радиус границы и цвета. То, что я действительно хочу показать тебе, так это идея о том, когда ты хочешь что-то скрывать. Давайте вернемся к HTML. Я поместил все свои элементы внутри тега span. Так вот, у меня есть помощник библиотеки span. Я надеюсь, что вы сейчас думаете, почему они не появятся, когда я впервые взгляну на календарь? Почему его там нет? Ну, причина будет в том, что по умолчанию я собираюсь идти вперед и скрыть все разные встречи. Я собираюсь идти вперед и сказать, видимость скрыта. Теперь это отличается от отображения none. Если бы у меня ничего не было, вся эта площадь просто исчезла бы, ее бы там не было. Видимость скрытая говорит, что я хочу оставить все это пространство, но я не хочу показывать, что там. Это очень мало нюансов, и именно поэтому я сделал этот пример, чтобы вы могли видеть разницу. Ладно, теперь он спрятан. Но как только я сделаю его активным, и активным означает, как только вы нажимаете на него, я меняю видимость со скрытой на видимую. Так что давайте нажмем на него. И вы можете видеть, что обед с мамой появляется. Помощник библиотеки, а также здесь, на Хэллоуин, у меня есть небольшое сообщение. Таким образом, с этим CSS много происходит. И я не хочу спускаться по каждой строчке, и ты тоже не хочешь, чтобы я это делал. Было бы очень скучно. Поэтому я надеюсь, что я показал вам некоторые из способов, которые эти псевдо-классы, псевдоэлементы, разные состояния, все идут вместе, чтобы создать страницу, которая может выглядеть намного лучше, чем простой HTML сам по себе. Поэтому я надеюсь, что вы будете использовать этот код и создать что-то отличное для себя. Удачи.