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