Willkommen zurück, alle.
Es ist an der Zeit, dass wir aufhören, neue Dinge zu lernen und
die Dinge, über die wir in der letzten Woche gesprochen haben, in die Praxis umzusetzen.
Wir werden einige der neuen Komponenten hinzufügen, an denen wir gearbeitet haben.
Aber wir werden es zusammen tun, während wir programmieren, also werde ich noch einmal betonen, dass ich
wirklich hoffe, dass du aufhörst, alles, was du sonst tust, peitsche deinen Laptop oder
was auch immer du programmierst, und
codiere mit mir, anstatt nur zuzusehen, was ich tue.
Als wir das letzte Mal zusammen codiert haben,
haben Sie hoffentlich etwas erstellt, das wie dieser Bildschirm hier aussieht.
Wir sind eingegangen und wir hatten Breite und verschiedene Displays,
Polsterung und Rand verwendet und wir machten unsere Seite ein bisschen besser.
Heute werden wir einen Schritt weiter gehen und einige verschiedene Elemente
wie Gradient hinzufügen, anstatt drei gleiche Breite Abschnitte haben wir einige
Abschnitte nehmen die Hälfte der Seite, einige nehmen die ganze Seite, kleine Dinge wie diese.
Und wir werden diese neuen Selektoren nutzen, die wir studiert haben.
Also, lassen Sie uns voran und beginnen.
Das erste, was ich tun möchte, ist in diesen linearen Farbverlauf oder
die neue Farbe, die sowohl in die Kopf- als auch in die Fußzeile geht.
Also, wenn ich zu meinem Stylesheet gehe, und ich komme hierher.
Eines der ersten Dinge, die ich tun möchte, ist, dass wir einen neuen
Hintergrund für die Kopf- und Fußzeile benötigen.
Und ich werde damit beginnen, es hier zu setzen.
Ich weiß, dass ich betrogen, kopiert und eingefügt habe.
Aber das wollte ich tun, tut mir leid.
Ich wollte das tun, weil ich immer wieder vermasselt habe, als ich tippte.
Also, was ich hier reingesteckt habe, ist, dass ich angefangen habe, indem ich eine Hintergrundfarbe einfüge.
Sie möchten das immer tun, denn wenn Sie es nicht tun, wenn
der Browser aus irgendeinem Grund nicht mit einem linearen Farbverlauf umgehen kann, haben Sie es einen Fallback gegeben.
Dann hatte ich meine lineare Verlaufsregel in jedem der verschiedenen Webkits.
Also, sobald ich das hinzufüge und ich auf Speichern klicke, können wir die Seite aktualisieren und
sehen, ob wir diese Art von grauer bis blauer Farbe haben, nach der wir gesucht haben.
Hey, toll, das haben wir.
Nun, als ich diese Regel schrieb, erinnern Sie sich vielleicht, dass ich Kopf-
und Fußzeile eingefügt habe, und das bedeutet, dass es für beide Elemente gelten soll.
Aber es galt nur für den Header.
Wir müssen darüber nachdenken, warum das passiert ist.
Der Grund ist, wenn wir nach unten scrollen, können Sie sehen, dass weiter unten auf der Seite, die
ich gesagt habe, ich möchte, dass mein Fußzeilenhintergrund diese besondere Farbe hat.
Das überschreibt frühere Regeln, also gehe ich hier rein.
Und ich werde das löschen und sagen, lasst uns das loswerden.
Aktualisieren, und großartig.
Jetzt sieht es viel besser aus.
Okay, also haben wir diese eine Änderung vorgenommen, und hoffentlich gewöhnen Sie sich an die Idee,
beide das Komma zu verwenden, um zwei Elemente gleichzeitig zu stylen. Sie können noch mehr tun und
diese Web-Kit-Präfixe oder Browser-Präfixe einfügen.
Wenn Sie es loswerden, kann es in Ihrem Browser funktionieren,
aber es gibt eine wirklich gute Chance, dass es nicht auf dem anderen Browser funktioniert.
Also wollen wir das üben.
In Ordnung, schauen wir uns mal an und sehen, was wir haben.
Ich habe den Gradienten in.
Das nächste, was ich angehen möchte, ist das Styling dieser Links
, und wieder, ich style nicht alle Links auf der
Seite, denn wenn Sie bemerken, dieser hier unten sieht immer noch genau gleich aus.
Ich möchte nur die Links formatieren, die sich innerhalb des Navigationsabschnitts befinden.
Also, ich werde hier gehen und, ich habe mein Navi gestylt.
Sieht gut aus.
Nächstes Mal werde ich sagen,
hey, lasst uns nur die Links stylen, die sich im Navi befinden.
Und wir haben einige Änderungen vorgenommen.
Wenn ich hier runterkomme, können wir es sehen.
Eins haben wir etwas hinzugefügt, das irgendwie wie eine Kastenstruktur aussieht.
Normalerweise konntest du das nicht tun, weil in Linienelementen keine Breite und
Höhe nehmen, aber wir werden voran gehen und damit spielen.
Lassen Sie uns voran und beginnen, ich werde zuerst sagen, ich möchte, dass die Breite jedes
meiner Links etwa 22% beträgt, speichern Sie das.
Aktualisieren, nein, kein Glück.
Also noch einmal, denken Sie daran, eines der Dinge, die ich gesagt habe, ist, dass Links inline sind und
man ihnen keine Breite oder Höhe geben kann.
Also jetzt, wenn ich reingehe und sage, lasst uns unser Display in
Inline-Block ändern, sollten wir viel mehr Glück haben.
Fast zu viel Glück, denn der Bildschirm passt nicht ganz dazu.
In Ordnung? In Ordnung.
So toll, das ist ein Schritt näher.
Lassen Sie uns die andere Hintergrundfarbe hinzufügen.
Und ich glaube, ich habe es weiß gemacht.
Aber Sie können alles verwenden, was Sie wollen.
Bumm.
Wir kommen definitiv näher.
Kleine kleine Schritte bringen uns viel näher.
Das nächste, was ich anpacken möchte, wenn wir versuchen, unsere Seite zu ändern,
ist diese Idee, dass einige der Abschnitte den halben Bildschirm einnehmen
sollten, während einige der Abschnitte weiter gehen und die gesamte Breite des Bildschirms einnehmen sollten.
Und die Art und Weise, wie wir das tun werden, ist die Verwendung von Klassen.
Wenn Sie sich erinnern,
sind Klassen eine Möglichkeit, bestimmte Gruppen von Elementen auf ähnliche Weise zu gestalten.
Also lass uns voran gehen und sehen, wie wir das machen werden.
Das erste, was ich tun muss, ist eine neue Klasse zu machen, und diese Klasse wird sagen,
statt alle Abschnitte nehmen 30%, ich will nur einige von
ihnen, ich werde sie zur Hälfte anrufen, sagen wir, 45% der Seite.
Auf diese Weise wird es nur einige der Abschnitte aufnehmen, nicht alle von ihnen.
Wenn ich aktualisiere, wird es noch nicht funktionieren, weil das Problem darin besteht, dass ich
mein Abschnittsstyling losgeworden bin und es durch diese Klasse ersetzt habe und
nirgendwo in meinem HTML habe ich mich daran erinnert, die Klasse zu referenzieren.
Zum ersten Mal werden wir nun in unsere HTML-Datei
gehen und einige Änderungen vornehmen.
Wenn ich hierher gehe, möchte ich, dass dieser nur den halben Bildschirm nimmt,
also werde ich sagen, Klasse = halb.
Und ich möchte, dass dieser die Hälfte des Bildschirms einnimmt.
Das haben wir.
Wir werden den anderen nicht ändern, also
wenn ich mich erneuere, können Sie sehen, dass zwei von ihnen jetzt nebeneinander sind.
Also, wenn ich und erfrischt es sieht ein wenig näher, außer ich habe
einige seltsame Dinge vor sich mit ein paar blauen und verschiedenen Dingen.
Das liegt daran, dass ich Float benutzt habe.
Und wenn Sie sich erinnern, wenn Sie float verwenden, führt es manchmal
dazu, dass Dinge, die nebeneinander liegen, im Grunde in Positionen sind, in denen Sie nicht wollen, dass sie sich befinden.
Also unser unterer Abschnitt, der, von dem wir wussten, dass wir nicht schweben wollen,
wir müssen hineingehen und sagen, hey, es gibt bestimmte Abschnitte, die wir ganz sein wollen.
Gehen wir zurück zu unserem Stylesheet.
Und ich werde hier nur ein wenig kopieren und einfügen.
Und ich werde sagen, weißt du was?
Dieser eine Abschnitt, ich brauche es, um Klasse gleich ganz zu sein.
Also geh wieder hier rüber.
Abschnitt Klasse = ganz, was bedeutet, dass dieser die ganze Breite aufnehmen sollte,
versuchen Sie nicht, es nebeneinander zu schweben.
Und lasst uns weitermachen und erfrischen.
Das sieht viel besser aus.
Es sieht sehr so aus, als wollten wir, dass die Dinge am Ende stehen.
Und nochmal, achte auf.
Nur die nav Links sind gestylt, nicht alle Links.
Wir haben den Gradienten eingelegt.
Wenn Ihr Farbverlauf nicht funktioniert, liegt
dies möglicherweise daran, dass Sie Ihre Browserpräfixe nicht eingegeben haben.
Wir haben wirklich eine Menge Kleinigkeiten auf dieser Seite vor sich.
Und wieder bin ich kein Grafiker, also mache ich nicht die schönsten Dinge.
Aber es macht Spaß, verschiedene Dinge zu kreieren und zu
sehen, wie man sie selbst stylen kann.
Also, machen Sie weiter und viel Glück und machen Sie sich keine Sorgen, wenn Sie diese Tippfehler treffen. Das
tun wir alle.