Hallo alle, willkommen zurück.
In der Vergangenheit haben wir Segmente zusammenprogrammiert, in denen ich codiert
habe, Sie mit mir codiert haben, und wir haben viele kleine Fehler zusammen gemacht.
Heute möchte ich stattdessen wirklich eine Code-Überprüfung durchführen.
Ich möchte, dass Sie sich zurücklehnen und einen Teil des Codes ansehen, den ich geschrieben habe, und
sehen, wie sich die kleinen Dinge, die
wir gelernt haben, zusammenfügen, um komplexere Webseiten zu erstellen.
Beginnen wir also mit etwas HTML.
Hier drüben habe ich Code, der nur eine Reihe verschiedener divs erstellen wird.
Die eine Sache, die neu sein könnte, die Sie noch nicht gesehen haben, ist diese Idee des
Tab-Index.
Was der Tab-Index tut, ist es, dass der Browser wissen lässt, dass, wenn jemand
durch Ihre Seite Tabulatoren führt,
Sie tatsächlich verschiedene Elemente in einer anderen Reihenfolge in den Fokus stellen möchten.
In diesem Fall wäre das erste, was A und dann C und dann B usw.
Es ist nur eine weitere Ebene der Zugänglichkeit, die ich
Ihnen in unserem Code vorstellen wollte.
Das einzige andere, was ich wollte, dass Sie in diesem HTML wissen, ist, dass das allerletzte div
eine Klasse animiert hat.
Ich habe dies ein wenig anders gemacht, so dass Sie Übergänge und
Transformationen in Aktion betrachten können.
Also, lassen Sie uns voran gehen und schauen Sie sich das CSS an und spielen mit dem Browser.
Nun, wenn wir oben anfangen, können Sie sehen, dass ich gerade das div gewählt habe, so
dass es kleine Boxen sind, in denen Sie den Inhalt sehen können, und
es ist nicht allzu zusammengequetscht.
Die eine Sache, die Sie vielleicht noch nicht
selbst in Ihrem Code verwendet haben, ist diese Idee des Übergangs von zwei Sekunden Leichtigkeit.
Dies wird den Browser wissen lassen, dass, wenn wir Zustände ändern,
wir wollen etwa zwei Sekunden dauern und es erleichtern.
Aber zuerst schauen wir uns den Fokus an.
In meinem Fokus sage ich, ändern Sie die Hintergrundfarbe.
Also, wenn ich jetzt zu meinem Browser gehe,
werde ich anfangen, die verschiedenen Elemente zu durchblättern.
Und wenn ich das tue, siehst du, dass sie alle leuchten.
Ich werde die Seite aktualisieren, weil die, von der ich zuerst erwartet hatte, nicht.
Das liegt daran, dass ich getippt hatte, bevor wir anfangen zu tippen.
Also, hier geht's.
A ändert die Farbe, und dann C, und dann B.
Dies geben Sie dem Benutzer die Macht, zuerst zu den wichtigsten Abschnitten zu springen.
In Ordnung, also nach dem Fokus, reden wir über Schweben.
Jetzt, wenn Hover in den Fall kommt, ist das, was ich sage, die Breite 200 Pixel zu machen,
es war 100, und ändern Sie die Hintergrundfarbe.
Also schauen wir uns mal an.
Ich werde hier über C markieren, und dann B, und dann A,
und Sie können sehen, dass es ein sehr schöner, reibungsloser Übergang ist.
Aber eines der Dinge, die ich möchte, dass Sie bemerken, ist, dass, wenn ich nicht über
irgendetwas schwebe, wir tatsächlich A bis F in der oberen Zeile und
dann G durch I unten haben.
Wenn Sie anfangen, ein wenig zu verrückt zu gehen, die Größe der Dinge
dynamisch zu ändern, können Sie alles aus der Position werfen.
Stellen Sie also sicher, dass Sie dies sparsam verwenden.
In Ordnung, lasst uns zum coolen, dem letzten.
Wenn Sie sich erinnern, habe ich ein div erstellt, und
ich habe es so eingestellt, dass es animiert wird, weil ich die animierte Klasse verwendet habe. Im
Moment ist der einzige Unterschied, dass die Hintergrundfarbe ein bisschen grün ist,
aber ich möchte Ihnen zeigen, was passiert, wenn ich den Mauszeiger darüber führe.
Wenn ich das tue, werde ich eine Transformation starten, bei der ich sagen werde, um
360 Grad zu drehen.
Und außerdem, anstatt eine Deckkraft von 0,4 zu haben, was bedeutet, dass es irgendwie verwischen wird
, löschen Sie es ein wenig, stellen Sie es auf die volle Farbe.
Los geht's.
Ich finde, das ist ziemlich cool.
Wir haben es gedreht.
Wenn wir aus dem Schweben gehen, dreht es sich zurück.
Dies sind die Art von lustigen Dingen, die Sie Ihrer Seite hinzufügen können, wenn
Sie zum ersten Mal lernen, wie man codiert, die Ihnen wirklich dieses Gefühl geben
, hey, ich mache es, ich mache Dinge ändern.
Was ich Sie jetzt wirklich ermutigen würde, ist zurückzugehen, die Übergangs-Vorlesung
zu überprüfen, die Transformationsvorlesung zu überprüfen, sicherzustellen und zu sehen, ob diese Konzepte
jetzt ein wenig mehr Sinn machen, dass Sie den Code in Aktion gesehen haben.
Und ich hoffe, Sie werden mit diesem Code spielen, die Werte ändern und
wirklich Spaß damit haben.
So viel Glück.