Hi, alle.
In der heutigen Code-Überprüfung werden wir darüber reden, einen Kalender zu erstellen.
Denn was ich an Kalendern wirklich mag, ist, dass es all diese kleinen,
winzigen Dinge gibt, über die Sie nachdenken müssen, um Ihre Seite wirklich professionell aussehen zu lassen.
Also, was ich hier auf dem Bildschirm habe, ist ein sehr, sehr einfacher Kalender,
wo Sie sehen können, ich habe alle Tage im Monat.
An manchen Tagen habe ich auch kleine Termine.
Also werde ich mit Mom zu Mittag essen oder mich mit dem Dekan treffen oder Bibliothekshelfer sein.
Und am 31. ist es Halloween, also boo!
Was können wir tun, um diese Informationen,
diese Inhalte aus unserem HTML5 zu nehmen und sie in etwas zu verwandeln, das wirklich angenehm ist?
Werfen wir einen Blick darauf, was ich damit gemacht habe.
Hier habe ich CSS verwendet, um einen Kalender zu erstellen
, der viele verschiedene Dinge vor sich hat.
Zuerst habe ich vorangegangen und ich habe es schön gestylt.
Ich habe Dinge wie Grenzradius aufgenommen, die in diesen Tagen genau hier hervorgehoben wurden.
Mir ist klar, dass es jetzt wirklich schwer ist, auf dem Bildschirm zu sehen, aber ich habe tatsächlich
ein Hintergrundbild für diese Tage, um es ein bisschen anders aussehen zu lassen.
Die andere Sache, die ich hinzugefügt habe, ist, dass an Tagen, die diese kleinen Sternchen haben,
wenn ich auf sie klicke, der eigentliche Termin erscheint.
Wie Sie sehen können, werde ich es mit vielen verschiedenen CSS-Elementen zu tun haben.
Und ich werde langsam den Code durchgehen,
nur um dir eine Vorstellung davon zu geben, was vor sich geht.
Jetzt wäre es unmöglich für Sie, mit mir mit diesem Code zu folgen und
genau zu wissen, was ich tue.
Stattdessen gebe ich es Ihnen als Ressource, um
die verschiedenen Teile wie Sie benötigen und
wie Sie sie in Ihre Seite integrieren möchten, zu verstehen.
Lassen Sie uns also einen Blick auf das CSS werfen.
Sie können sehen, dass dies eine sehr, sehr beschäftigte Seite ist.
Also lehnen Sie sich einfach zurück und
Sie können mich über die verschiedenen Dinge sprechen hören, anstatt zu versuchen, den Code zu lesen.
Ich bin reingegangen und wollte meinen Kalender mit einem sehr schönen Randradius machen, damit
ich etwas an der Spitze haben würde.
Die Sache ist, der Tisch selbst ist wirklich nur dieser Teil.
Es ist nicht die Beschriftung.
Also, was ich getan habe, ist, dass ich reingegangen
bin und sagte, mach dir keine Sorgen um die beiden oberen Ecken, hier und hier.
Nur die unteren zwei Ecken kurven, in Ordnung.
Wie bekomme ich diese coole Idee, zwischen einer Art Hellgrau und
dieser Farbe zu wechseln und hin und her zu gehen?
Nun, damit können Sie voran gehen und einige der verschiedenen Pseudo-Elemente verwenden.
Also in diesem Fall bin ich reingegangen.
Und ich bin es nicht.
Es ist der Browser, der sagt, hey, ich werde mir all die verschiedenen Tabellenzeilen ansehen.
Und jedes Mal, wenn ich ein Kind sehe, das seltsam ist, werde ich es in einer Farbe machen,
jedes Mal, wenn ich ein Kind sehe, das sogar ist, werde ich es eine andere Farbe machen.
Dies ist so viel schöner, als Sie in Ihre Tabelle gehen müssen und die
Klasse gleich eben setzen müssen, Klasse ist gleich ungerade, Klasse ist sogar gleich,
besonders wenn Sie sich später entscheiden, weitere Informationen hinzuzufügen und es Ihre Zeilen abwirft.
Dies ist etwas wirklich mächtiges, das Sie versuchen sollten, die Vorteile zu nutzen.
Was ist, wenn Sie versuchen, Ihre Seite wirklich professionell aussehen zu lassen,
die Elemente, die sich überlappen?
Also genau hier schaue ich mir eine Tabelle und eine Tabellenzeile und
ein Tabellenelement an.
Ich musste über jedes von ihnen nachdenken und über Dinge wie,
hm, gut in meiner allerletzten Tabellenzeile, dem allerletzten Tabellenelement,
das eine andere Kurve hat als das erste Kind.
Also gehen Sie weiter, laden Sie diesen Code herunter und werfen Sie einen Blick darauf und spielen Sie damit.
Was passiert, wenn Sie es auskommentieren?
Was wird denn los?
Alles klar, ich habe ziemlich einfachen Code für die Beschriftung, ich ging voran und
fügte nur einige Randradius und Farben hinzu.
Was ich dir wirklich zeigen will, ist diese ganze Idee, wann du Dinge verbergen willst.
Gehen wir zurück zum HTML.
Ich habe alle meine Elemente in ein span -Tag gesetzt.
Also hier, ich habe Span-Bibliothekshelfer.
Ich hoffe, dass du jetzt denkst und gehst,
warum tauchen die nicht auf, wenn ich mir den Kalender anschaue?
Warum ist es nicht da?
Nun, der Grund wäre, weil ich standardmäßig
die verschiedenen Termine verbergen werde.
Ich werde voran gehen und sagen, Sichtbarkeit versteckt.
Jetzt ist dies anders als Anzeige keines.
Wenn ich keine Anzeige hätte, wäre dieses ganze Quadrat einfach weg, es wäre nicht da.
Verborgene Sichtbarkeit sagt, ich will den ganzen Raum verlassen, aber
ich will nicht zeigen, was da drin ist.
Es ist eine sehr kleine nuancierte Sache, und genau deshalb habe ich dieses Beispiel gemacht,
damit Sie den Unterschied sehen können.
Alles klar, jetzt ist es versteckt.
Aber sobald ich es aktiv mache, und aktiv bedeutet, sobald Sie
darauf klicken, ändere ich die Sichtbarkeit von ausgeblendet zu sichtbar.
Also lasst uns darauf klicken.
Und du kannst sehen, wie das Mittagessen mit Mom auftaucht.
Bibliothekshelfer, und auch hier, an Halloween,
habe ich eine kleine Nachricht dort.
Also gab es viel los mit diesem CSS.
Und ich will nicht jede Zeile durchgehen, und
du willst auch nicht, dass ich das tue.
Es wäre sehr langweilig.
Also hoffe ich, dass ich Ihnen einige der Möglichkeiten gezeigt habe, wie diese
Pseudo-Klassen, Pseudoelemente, die verschiedenen Zustände, alle zusammenpassen, um
eine Seite zu erstellen, die so viel besser aussehen kann als nur einfaches HTML von selbst.
Also hoffe ich, dass Sie diesen Code verwenden und etwas Großartiges für sich selbst erstellen.
Viel Glück.