Hallo, alle, willkommen zurück.
Noch einmal werde ich dich bitten, aufzuhören zu lernen und zu programmieren und zu üben.
Und wir werden das gleiche Beispiel verwenden, das wir in unserem ersten Codierungsbruch verwendet haben.
Also wollte ich Ihnen zeigen, was unsere alte Seite ist, genau hier.
Und sehen Sie, wie wir es in etwas ändern können, das ein bisschen mehr
wie unsere neue Seite hier aussieht,
wo wir einige unserer Ränder, Polsterungen und Breiten und Höhen implementiert haben.
In Ordnung, also lasst uns weitermachen und loslegen.
Das erste, was ich tun möchte, ist genau das gleiche Stylesheet zu verwenden, das ich für
das erste verwendet habe.
Es gibt absolut keine Notwendigkeit, Ihr Stylesheet neu zu erstellen, wenn Sie entweder einfach
dieses verwenden und es ändern können, oder wenn Sie möchten, verwenden Sie zwei Stylesheets.
Ich werde nur einen benutzen.
Und das erste, was ich beheben werde, ist die Tatsache
, dass ich in meiner früheren Version einen Fehler gemacht habe.
Ich habe zwei Regeln Styling h1.
Das ist kein Problem.
Der Browser wendet alle diese Stile an.
Aber was ich wirklich tun wollte, war, dass ich das Body-Tag stylen wollte.
Werfen wir einen Blick darauf, wie es jetzt aussieht.
Und gehen wir zurück zu unserer aktuellen Version.
Und da gehen wir.
Das sieht schon ein bisschen besser aus als das, was wir früher hatten.
Also, jetzt, wo ich auf einem guten Startplatz bin, wenn ich anfange,
reden wir über die verschiedenen Dinge, die wir auf unserer Seite stylen können, okay?
Eines der ersten Dinge, die ich tun möchte, ist, dass ich
meiner Seite ein wenig Rand hinzufügen möchte.
Wenn Sie hier rüber schauen, gibt es nicht viel Platz zwischen dem Rand der Seite und
dem eigentlichen Browser.
Ich will nur ein bisschen hinzufügen.
Sie können ein wenig hinzufügen, Sie können eine Menge hinzufügen.
In der Tat, während wir heute codieren, werde ich eine Menge hinzufügen, nur damit Sie die Effekte sehen können.
Also, wie machst du das?
Wie fügen Sie diesen Raum zwischen dem Element und seinen Nachbarn hinzu?
Sie gehen rein und wir werden eine Marge hinzufügen.
Und wie gesagt, ich denke, ich werde es ein bisschen ausgeprägter machen als in
dem Code, den ich dort gezeigt habe.
Ich mach es 4%.
Also, wenn wir das machen, gehe ich zurück auf die Seite.
Ich werde nachladen.
Und du siehst, dass alles irgendwie eingezogen ist, okay?
Margin fügt nur ein wenig Platz hinzu und macht es optisch ansprechender für Ihre Benutzer, in
Ordnung?
Denken wir an ein paar andere Dinge, die wir tun wollen.
Offensichtlich möchte ich wahrscheinlich ein wenig Abstand zwischen
meinen Links und dem unteren Teil des Textes hinzufügen.
Das ist also ein bisschen anders.
Ich sage nicht, die Elemente zu trennen,
ich sage, ich brauche mehr Platz zwischen meiner Grenze und dem Element selbst.
In diesem Fall ist das, was wir verwenden wollen, nicht Marge, wir wollen die Polsterung ändern.
Also lasst uns reingehen und sehen, wo wir denken, dass wir das tun würden.
Alles klar, also muss ich Padding innerhalb des gesamten Headers hinzufügen.
Also lassen Sie uns hier gehen und
ich werde es ändern, Polsterung, wieder können Sie alles auswählen, was Sie wollen.
Sie können Pixel verwenden, Sie können Prozentsätze verwenden.
Ich werde in diesem Fall voran gehen, ich werde nur in Pixel setzen.
Und ich werde sagen, bitte füge 15 Pixel Abstand zwischen der Grenze und der Unterseite hinzu.
Also, aktualisieren Sie, oh, stellen Sie sicher, dass ich spare.
Und aktualisieren, und
Sie können sehen, dass ich den ganzen Weg um die ganze Sache ergänzt habe.
Wenn ich wirklich nur wollte, dass die Polsterung auf der Unterseite ist,
hätte ich sagen können, Polsterung unten, oder Polsterung rechts oder Polsterung links.
Na gut, lass uns weitermachen und etwas anderes stylen.
Eines der großen Dinge, die ich geändert habe, ist, dass ich
diese geändert habe, anstatt eins untereinander zu haben, so dass sie nebeneinander sind.
Denken Sie also daran, dass Abschnitte standardmäßig Block sind, sie sind Anzeigeblock,
was bedeutet, dass niemanden neben mich kommen lassen.
Um es so zu ändern, dass
sie nebeneinander sind, können wir entweder Inline oder Inline-Block verwenden.
Fast immer, wenn diese Wahl gegeben wird, werden Sie inline verwenden,
denn wenn Sie Inline verwenden, können Sie eine Höhe und eine Breite einschließen.
In Ordnung, geh zurück zu meiner CSS-Datei.
Ich will die Kopfzeile nicht ändern.
Ich denke, ich bin ziemlich gut mit h1.
Das nav, die h2, oh, weißt du was?
Ich habe nichts, was ich hier ändern kann, also lasst uns weitermachen und
ein neues Etikett eintragen.
Abschnitt, in Ordnung, ich will alle drei dieser Abschnitte nebeneinander.
Also, was ich tun könnte, ist, dass ich vielleicht 400 Pixel pro.
Nun, das würde bedeuten, dass der Browser mindestens 1.200 Pixel haben muss.
Ich könnte je 150 Pixel auswählen.
Nun, das bedeutet, dass sie wirklich dünn werden, auch wenn sie es nicht brauchen.
Also lassen Sie uns Prozentsätze verwenden.
Ich werde 30% verwenden, nicht 33%, weil ich ein wenig Ellenbogenraum für
Polsterungen, Ränder, Grenzen usw. geben will.
Alles klar, gehen wir voran und schauen es uns jetzt an, ich will sehen, wie es aussieht.
Sie können sehen, dass ich es 30% gemacht habe, aber sie sind immer noch nicht nebeneinander.
Das liegt daran, dass sie immer noch blockiert sind.
Lassen Sie uns sie in Inline-Block ändern, Anzeige.
Und hoffen wir auf das Beste.
Da gehen wir.
Ich habe alle drei Dinge nebeneinander.
Immer noch nicht genau so, wie wir wollen, aber es ist Schritt für Schritt.
Es macht dieses kleine Stück Fortschritt auf einmal.
Ich werde diese Tatsache reparieren, dass sie nicht alle oben aufgereiht sind.
Und ich sage Float: links; erfrischen und
wir kommen näher, wir kommen näher, aber da ist noch etwas falsch.
Zuerst werden sie zerquetscht.
Ich mag nicht, dass sie alle zusammen zerquetscht werden.
Wie trennt man also verschiedene Elemente voneinander?
Wie fügen Sie ein wenig Abstand zwischen den Elementen hinzu? In
Ordnung, wenn wir im Unterricht wären, hätte ich diesen einen Schüler, der wie oh, oh,
ich weiß, ja, es ist Marge, okay?
Margin, ich werde nur eine Marge auf einer Seite setzen, sagen wir Margin-rechts.
Und ich werde es etwas Kleines machen, wie 2%.
Alles klar, wir kommen näher.
Wir kommen näher.
Immer noch nicht ganz, was wir wollten, aber so funktioniert es.
Du fügst ein bisschen hinzu.
Sie passen sich an.
Du fügst ein bisschen hinzu.
Eines der großen Probleme hier ist, dass, wenn Sie Dinge nach links schweben oder
wenn Sie Dinge schweben,
sobald Sie fertig sind, schweben, wenn Sie nicht möchten, dass diese nächsten Elemente schweben.
Du musst eigentlich reingehen und sagen, oh, aber ich will diesen Teil nicht schweben.
Wenn wir also mit diesen drei Abschnitten fertig sind,
wollen wir nicht, dass die Fußzeile auch neben ihnen hat.
Also lassen Sie uns hineingehen und den Fußzeilencode anpassen.
Hier unten.
In Ordnung, wenn Sie sich erinnern, wenn Sie nicht wollen, dass Dinge neben Ihnen schweben,
werden wir klar verwenden: beides,
was bedeutet, lassen Sie nichts auf beiden Seiten von mir schweben.
Oh, viel besser, oder?
Es sieht viel, viel besser aus.
Und abgesehen von der Tatsache, dass ich seltsame Farben habe,
sind wir hier ganz nah dran.
Ich mag das Grau auf der Kopfzeile und der Fußzeile, also
werde ich es verlassen.
Aber was ich will, ist, dass ich das Bild kleiner machen will.
Dieses kleine Symbol hier, lassen Sie es ein bisschen mehr so aussehen.
Und das ist sehr einfach für den Ansatz, den wir jetzt verwenden werden.
Lass uns weitermachen.
Ich werde ein Bild hinzufügen.
Und ich werde es jetzt nur hart programmieren.
Also, ich werde es 75 Pixel machen.
Hoppla, muss Breite sagen: 75px.
Werfen wir einen Blick darauf, wie wir es geschafft haben.
Ja, das sieht gut aus.
Wenn es mir nicht gefallen würde und ich damit spielen wollte, würde ich nicht hier reingehen und
100 und dann 80 und dann 52 versuchen.
Was ich tun würde, ist, dass ich hier reingehe und erneut Inspect Element mache.
Und ich würde das viel größer machen, sonst sieht alles wirklich verrückt aus.
Und ich würde in das Bild gehen und
sagen, okay wie sieht es aus, wenn ich es stattdessen 150 Pixel mache?
Sieht das besser aus?
Oder Oops, will das nicht tun.
Oder was ist, wenn ich es 125 Pixel mache?
Gefällt mir das?
Wählen Sie einen Wert aus, den Sie mögen, und
wenn Sie etwas gefunden haben, das gut für Sie aussieht, kopieren Sie diesen Wert in das Stylesheet.
Wenn ich es jetzt aktualisiere, gehen meine Inspect-Elementwerte weg.
Alles klar, lassen Sie uns hier reingehen, reparieren, speichern und aktualisieren.
Alles klar, das ist großartig,
das sind die Arten von Dingen, die ich will, dass du in dieser Klasse tust.
Ich möchte, dass Sie eine HTML-Datei packen und sagen, ooh, kann ich das ändern?
Was kann ich tun, um es anders zu machen?
Offensichtlich ist diese Seite, die wir hier erstellt haben, kein fertiges Produkt.
Es ist nicht genau so, wie Sie wollen, dass es draußen im Internet ist.
Also werden wir immer wieder neue Dinge lernen und
wir werden Dinge auf unterschiedliche Weise stylen.
Und während du weiter praktizierst, bist du Selbstvertrauen und
deine Fähigkeiten werden wirklich wachsen.
Und das ist es, was ich will.
Ich möchte, dass Ihr Vertrauen bis
Ende der vierten Woche sehr, sehr hoch ist, dass Sie dies tun können.
So viel Glück.