Die Grundlagen des Web-Design-Layouts: Erfahre, wie du dein Design mit HTML und CSS beschreibst

1. Gründe für diesen Kurs: Hey, hier ist Rich. Ich erinnere mich daran, meine erste Website zu gestalten. Es war lustig und genial, aber es war ein Albtraum zu programmieren. Ich verstand nicht, wie man die Dinge richtig macht. Einer von ihnen, ich wusste nicht, warum alles oben links angefangen hat. Ich wusste nicht, wann ich Float oder Position verwenden sollte. Ich habe die Tiefe nicht verstanden. Ich wusste nicht, warum einige Elemente breiter sind, als ich sie eingestellt habe, und ich wusste sicherlich nicht, wie ich meine Inhalte in der Mitte des Bildschirms bekommen sollte . Kurz gesagt, Es war überhaupt nicht wie Photoshop. Die Sache ist, das war 2007 und obwohl Web-Design-Apps sind genial, was Sie entwerfen und dann noch nie die endgültige Website. Die endgültige Website ist diejenige, die Sie durchsuchen können. Es ist derjenige vor Ihrem Kunden und die Fähigkeit zu wissen, wie man ein Design mit HTML und CSS in einem Browser beschreibt , wird zu einer grundlegenden und oft erforderlichen Fähigkeit. HTML und CSS sind ein beschreibendes Designsprachenpaar, das genau so erlernt werden kann , wie Sie Sketch oder Photoshop verwenden. Also, nach dieser Klasse werden Sie das HTML-Box-Modell, Floats, Anzeigetypen, Positionierung und Tiefe verstehen . Sie werden wissen, wann Sie den Browser legen die Dinge, bei denen es einen wirklich guten Job macht, und wann Sie die Kontrolle übernehmen sollten. Sie erfahren mehr darüber, wie der Browser funktioniert und wie er sich von Design-Apps unterscheidet. Wenn Sie entwerfen, können Sie diese Dinge wissen, fundierte Designentscheidungen treffen und wenn Sie HTML und CSS schreiben, macht es alles leichter zu verstehen. Kurz gesagt, diese Klasse deckt fünf verschiedene Arten von Positionierung, Tiefenmanagement, gängige Anzeigetypen, Padding, Ränder, Grenzen, übersetzen X und Y, HTML und CSS Terminologie und viele Beispiele. Wir werden es beenden, indem wir eine Webseite mit dem erstellen, was wir während des Unterrichts gelernt haben. Also, wenn das lustig klingt, dann folgen Sie. 2. HTML-Box-Theorie: Lassen Sie uns abdecken, was ich gerne HTML Box Theory nenne. Es ist nützlich, dies zu tun, damit Sie verstehen, wie HTML funktioniert. In den meisten Design-Apps wie Photoshop, Sketch und Illustrator wird eine Ebene visuell in einer höheren Tiefe zu einer anderen angezeigt , wenn sie im Ebenenfenster höher ist. Dies gilt auch für Gruppen und Unter-Layer. In HTML ist es etwas anders. Wenn ein HTML-Element, das ähnlich einer Ebene ist, im HTML-Dokument höher ist als ein anderes, erscheint es vor nachfolgenden Elementen auf der Seite. Wenn es zuerst im Dokument kommt, kommt es zuerst visuell, es ist höher. Der Code korreliert mit dem, was wir sehen. In HTML sind Elemente wie Felder und werden standardmäßig vom oberen Teil des Dokuments nach unten gestapelt. Ein HTML-Element wird durch ein öffnendes Tag und ein schließendes Tag gekennzeichnet. Wenn Sie ein anderes Element hinzufügen, ist es wie das Hinzufügen eines anderen Feldes über allen anderen. Jetzt können Sie Elemente in andere Elemente einfügen, und dies ist genau das gleiche wie das Setzen einer Box in eine Box. In HTML können Sie beliebig viele Felder innerhalb und dieselbe Regel gilt in einem Feld. Standardmäßig werden diese Felder von oben nach unten gestapelt. Was an HTML-Boxen erstaunlich ist, dass sie sich erweitern, um alles zu enthalten, was Sie in sie setzen. Standardmäßig sind keine eingestellten Bemaßungen vorhanden. Die meisten Arten von HTML-Feldern, die in anderen Feldern platziert werden , erweitern ihre Breite, um den verfügbaren Platz zu füllen. Wir werden jedoch ein paar Ausnahmen später abdecken. Was fantastisch daran ist, dass wir als Menschen keinen Code schreiben müssen, um die X- und Y-Positionen jeder dieser Boxen zu verwalten. Der Browser macht das alles für uns. Die Boxen stapeln sich ordentlich und erweitern sich, wenn sie es brauchen. Es gibt natürlich Ausnahmen, und dann machen wir unsere eigenen Ausnahmen weil wir wollen, dass unsere Größe eine bestimmte Art und Weise aussieht. Wir können alle Arten von Eigenschaften einstellen und haben eine super feine Kontrolle darüber, wie unsere Webseiten aussehen und funktionieren. Es macht super Spaß und es ist lohnend und es ist auch ein bisschen entmutigend zur gleichen Zeit. Diese Klasse geht von der Standard-Art und Weise, wie HTML-Boxen arbeiten, um Boxen zu erhalten, um alle Arten von Dingen wie schweben, kleben und ändern Tiefe zu tun . Wir fangen an, die Kontrolle über den Browser zu übernehmen, wo es uns zugute kommt. 3. HTML- und CSS-Terminologie: Also, ich mag es normalerweise nicht, offizielle Web-Terminologie zu verwenden. Es klingt geeky, es klingt seltsam, und es führt oft dazu, dass Menschen sich den Kopf kratzen. Aber ich denke, für diese Klasse und für Ihre Vorteile, auf die gleiche Seite zu bekommen, wäre wirklich hilfreich. In HTML haben Sie eine Reihe von Tag-Sets, aus denen Ihre Dokumente bestehen. Jeder Tag-Satz hat einen Namen, ein öffnendes Tag, ein schließendes Tag und vielleicht einige Inhalte. Ein Tag kann auch Attribute haben, die aus einem Attributeigenschaftsnamen und -wert bestehen. Ein Attributname gefolgt von einem Gleichheitszeichen mit Informationen in einfachen oder doppelten Anführungszeichen ist das, was dieses Attribut ausmacht. Attribute geben dem Browser zusätzliche Informationen über das Tag gesetzt wie, wie man es formatiert, wohin der Browser als nächstes gehen soll und wo die Quelle eines Bildes ist, et cetera. Einige Tag-Sets, sie brauchen kein schließendes Tag, so dass Sie nur ein spezielles Tag wie dieses schreiben können. In CSS können Sie ein HTML-Element oder mehrere HTML-Elemente mit einem Regelsatz formatieren. Aber wie beziehen wir uns auf all diese Teile in einem Regelsatz? Zunächst haben wir unseren Selektor, der dem Regelsatz mitteilt, welche Elemente zu stylen sind. Dazu können Klauseln, IDs, Tags, Pseudoklauseln, mehrere ausgewählte, verschachtelte untergeordnete Elemente und vieles mehr gehören. Dann kommt der Deklarationsblock, alles in den geschweiften Klammern. Hier schreiben wir die Regeln, um unsere ausgewählten Elemente zu stylen. Jede Regel, die wir schreiben, wird als Deklaration bezeichnet und besteht aus einem Eigenschaftsnamen und einem Eigenschaftswert. Sie sind durch einen Doppelpunkt getrennt und enden mit einem Semikolon, und all diese werden als Regelsatz bezeichnet. Also, ich hoffe, das hilft für diese Klasse und für zukünftige Informationen, die Sie konsumieren. 4. Box-Modell und Box-sizing: Was ich in der Vergangenheit oft getan habe, ist, ein Element auf 100 Prozent Breite zu setzen und dann einen anderen Rahmen und etwas Auffüllen zu geben, und dann wird es über die Grenzen der Dokumente hinaus erweitert. Super frustrierend. Also, zu verstehen, wie das Box-Modell funktioniert, ist super wichtig. Sie können Frustration und endlose dumme Hacks vermeiden. Sie können den meisten Elementen Rand, Polsterung und Rahmen hinzufügen . Diese drei Dinge bilden das Box-Modell und beeinflussen die Breite und die Höhe eines Elements. Marge ist der Atemraum. Das Element gibt sich von anderen Elementen. Es ist, als wäre es ein persönlicher Raum. Rahmen ist dann die äußere Ebene, die Sie stylen können. Es ist wie die erste Schicht der Kleidung. Dann gibt es eine Polsterung, die der Atemraum ist den das Element zwischen seiner Grenze und seinem Inhalt gibt. Wenn Sie also die Breite eines Elements auf 400 Pixel festlegen und dann etwas Padding und einen Rahmen hinzufügen,erhöht sich die tatsächliche Breite des Elements standardmäßig 400 Pixel festlegen und dann etwas Padding und einen Rahmen hinzufügen, über 400 Pixel, da die von Ihnen eingestellte Breite die Breite des inneren Inhalts ist. Gleiches gilt für die Höhe. Wenn Sie jedoch den Wert für die Boxgröße in border-box ändern, wird die von Ihnen festgelegte Breite auf der Rahmenebene und nicht auf der inneren Inhaltsebene angewendet. Der Standardwert für die Box-Größenbestimmung ist content-box. Aber ich mag es selten, Border-Box für die Box-Dimensionierung zu verwenden. Also, hier ist ein Live-Beispiel für CodePen. Wir haben diese Box eins, es hat eine Breite von 400 Pixeln, Polsterung von 50 Pixeln, und es hat einen festen schwarzen Rahmen, der 20 Pixel in der Breite ist. Also, wenn wir dieses Feld inspizieren, mit der rechten Maustaste klicken, inspizieren, können wir sehen, dass, wenn wir den Mauszeiger über dieses Feld bewegen, es eine Breite von 540 Pixel hat. - Warum? Es hat keine Breite von 540 Pixeln? Nun, wenn wir hier nach unten ziehen, können wir sehen, dass die h2, die Teil des Inhalts ist, eine Breite von 400 Pixeln hat. Das ist es, was diese Linie hier macht. Es setzt die innere Breite auf 400 Pixel und fügt dann die Polsterung hinzu, die links von 50 Pixeln auffüllen und rechts von 50 Pixeln auffüllen würde, die 100 Pixel zu den vorhandenen 400 Pixeln hinzufügt. Dann fügt es einen weiteren Rand links von 20 Pixeln und Rand rechts von 20 Pixeln, was Ihnen eine Gesamtsumme von 540 Pixeln. Also, gut zu wissen. Sie können damit arbeiten und viele haben in den letzten paar Jahren. Aber wir haben diese großartige neue Art, mit dem Box-Modell zu arbeiten, und es heißt Box-Dimensionierung: Border-Box. Erstaunlich. Wenn Sie wissen wollten, wie ich das gerade gemacht habe, können Sie bz eingeben und Tab drücken, und mit etwas namens Emmet, das in allen Arten von Code-Editoren verfügbar ist. Es erweitert es einfach. Sie können content-box eingeben, wenn Sie die Dinge auf die alte Weise bevorzugen und explizit sein möchten, aber für mich mag ich einfach box-sizing: border-box die meiste Zeit. Das ist wirklich einfach für mich. Ich setze die Breite und dann sage ich, ich will 50 Pixel Polsterung und ich möchte einen Rand von 20 Pixeln und es funktioniert alles für mich. Ich danke Ihnen vielmals. 5. Margin, Padding und Ränder: Die Rand-, Padding und Rahmendeklarationen haben alle vier Seiten der Box, die Sie festlegen können. Sie können Margin-top oder padding-links oder border-unten festlegen. Wenn Sie beispielsweise alle vier Seiten festlegen möchten, können Sie dies mit vier separaten Deklarationen tun. Sie können aber auch Kurzschriftendeklarationen verwenden. Durch die Verwendung von Rand können Sie alle vier Seiten gleichzeitig festlegen. Sie können die horizontalen und vertikalen Werte festlegen, oder Sie können für alle vier Seiten eindeutige Werte festlegen. Die Reihenfolge für die Verknüpfung ist oben, rechts, unten, links. Wenn es sich nur um einen Wert handelt, wendet er sie auf alle Seiten an. Wenn zwei Werte vorhanden sind, wird der erste Wert oben und unten und ein zweiter Wert rechts und links angewendet . Wenn drei Werte vorhanden sind, wird der erste Wert auf oben, der zweite Wert zwei rechts und links und der dritte Wert auf unten angewendet der zweite Wert zwei rechts und links . Die gleichen Regeln gelten für das Auffüllen. Die Typen von Werten, die Sie für Marge und Padding verwenden können , sind typische CSS-Längenwerte: Pixel, Prozentsätze, em, rem oder em und rem, et cetera. Die Grenz-Kurzschrift-Deklaration unterscheidet sich etwas, da die border-bottom oder border-top Deklaration ebenfalls eine Abkürzung ist. Wenn Sie beispielsweise border-bottom verwenden, können Sie die Rahmenbreite, die Rahmenfarbe und den Rahmenstil gleichzeitig festlegen . Wenn Sie also die Grenzdeklaration verwenden, können Sie nur für alle vier Seiten festlegen. Aber Sie können die Farbe, die Breite und den Stil aller vier Seiten gleichzeitig festlegen. Bei den meisten Elementen beträgt die Breite normalerweise 100 Prozent, und die Höhe ist normalerweise hoch genug, damit der Inhalt passt. Diese 100-prozentige Breite ist jedoch nicht festgelegt. Es füllt nur die verfügbare Breite. Es ist also ziemlich einfach, Ränder, Polsterungen und Rahmen festzulegen und das Element standardmäßig den Raum auffüllen zu lassen. Komplexität wird eingeführt, wenn ein Element dies nicht standardmäßig tut. Elemente wie Eingaben sind Hauptbeispiele. Es ist wieder ein Beispiel. Also, wir haben diese Kiste. In der Box haben wir diese h2. Nun, diese h2 ist etwas Besonderes. Es hat eine Hintergrundfarbe. Also, wenn wir das einfach entfernen müssen, werden Sie sehen, dass die Hintergrundfarbe der Box durchkommt. Nun fügen wir ein paar Pads, einige Ränder und lassen Sie uns mit der Abkürzung für Ränder, Polsterungen, Grenzen spielen. Also, zuerst, lassen Sie uns etwas Polsterung hinzufügen. Wir können 20 Pixel Polsterung hinzufügen. Ja, das sieht toll aus. Jetzt können wir sehen, wie das Blau durchkommt. Cool. Lassen Sie uns den Rand als nächstes hinzufügen. Lassen Sie uns 40 Pixel Rand hinzufügen. Fantastisch. Nun, wenn wir anfangen, die Polsterung zu ändern, können wir dies auf 30 Pixel ändern. Lassen Sie uns es auf 70 Pixel ändern. Wir können anfangen zu sehen, was hier passiert. Das ist wirklich großartig. Was passiert, wenn wir dieses auf 50 Pixel ändern? Ziemlich cool. So, Sie können sehen, wie wir Kurzschrift verwenden können, und das ist viel besser als zu gehen padding-top 20 Pixel und padding-rechts von 40 Pixeln und padding-bottom von 100 Pixeln und padding-left 30 Pixel. Das hat wirklich lange gedauert, aber Sie können auch sehen, dass Sie nur eine Polsterung wie padding-right angeben möchten, können Sie es ausschreiben. Manchmal, wenn Sie alte HTML schreiben, insbesondere für HTML-Newsletter, ist diese Syntax notwendig. Also, es ist gut zu wissen. Einige Margen können so ziemlich dasselbe tun. Jetzt versuchen wir es mit der Grenze. Also, Grenze, lasst uns für 10 Pixel schwarz gehen. Das spielt keine Rolle, auf welche Weise Sie es ausdrücken. Wir können sagen, solide. Das ist ziemlich cool. Wir können für gestrichelt gehen. Auch ziemlich cool. Du wirst sehen, dass, wenn ich den Schwarzen entferne und ihn hierher lege, keinen Unterschied macht. Ich kann dies zu rot ändern, ich kann in Gelb oder irgendetwas anderes, das ich wirklich ändern möchte, um sie zu ändern. Also, das ist ziemlich cool, und dann können wir auch Border-Top sagen, wir können die Grenze oben auf, sagen wir, 20 Pixel massiv schwarz ändern . So können Sie sehen, wie das geschieht. Es ist wirklich cool und was wir hier nicht einmal tun können, ist sogar noch spezifischer zu werden. Also, Grenze ist eine Abkürzung, border-top ist eine Abkürzung. Aber jetzt können wir border-top-width sagen, und wir können so etwas wie 30 Pixel sagen. Wir können Rand-Top-Farbe sagen, und wir können rot sagen. Also, das ist der Unterschied zwischen Shortcuts und wirklich Longhand-Syntax, es ist wirklich gut, beides zu kennen. Also, das zweite Beispiel hier ist, wie man negative Margining macht. Nun, wir haben diese h2 und er nennt das negative h2. Im Moment sieht er nicht zu negativ aus, er hat keine Negativität an ihm. Wir nehmen das raus. Also, wir gehen einfach so etwas wie Marge, oder vielleicht können wir einfach Tab drücken, wenn wir m für Marge haben. Fantastisch. Dann können wir eine negative 20 Pixel setzen. Wow, sieh dir das an. Was passiert, wenn wir 120 Pixel negativ sind? Los geht's, 0,0,0. Also, jetzt ist es buchstäblich nur an der Spitze, dass es ein negativer Betrag ist. Nun, wir könnten auch den Boden machen, aber das würde wirklich nicht helfen. Was ist mit der Linken? Also, lassen Sie uns dort negativ 120 Pixel gehen, und was, wenn ich eine Polsterung von 50 Pixeln habe. Also, wenn wir das nur auf eine negative 50 setzen, sollte es rechts auf der linken Seite ausgerichtet sein. Ziemlich cool. Wenn wir eine weitere negative 100 gehen, sollte es ganz nach links ausgerichtet werden. Das ist eine ziemlich einfache Möglichkeit, negative Margining zu machen. Voila. Das negative h2. Dies ist unser drittes Beispiel. Ich wünschte, jemand hätte es mir so früher in meiner Frontend-Entwicklungskarriere gesagt. Es frustrierte mich kein Ende. Die Frage, die ich beantworten wollte und ich selbst ausarbeiten musste, war, wie bekomme ich etwas horizontal zentriert? Ich möchte, dass dieser große blaue Block in der Mitte der Seite ist. Wie bekomme ich sie in die Mitte? ist es wirklich einfach. Überprüfe das. Sie gehen einfach m für den Rand, drücken Sie die Tabulatortaste, und dann gehen Sie „0 auto“. Bumm. Es ist in der Mitte. Was das sagt, ist, dass es für die Ränder links und rechts automatisch ist. Also, der Browser funktioniert es nur für Sie. Fantastisch. Sie haben eine Breite von 400 Pixeln, wir können diese auf 600 Pixel ändern. Bumm. Tut das Gleiche, auch wenn wir die Breite nehmen, die. Immer noch ziemlich süß. Rückgängig, sieh dir das an. Wenn Sie es manuell schreiben wollten, können Sie es so tun. Also, ml für margin-left, auto und mr, auch auto, dann können wir das herausnehmen. Tut das Gleiche. Süß. Lassen Sie mich Ihnen sagen, dass die Margen zusammenbrechen. Also, was wir hier haben, ist eine Reihe von p, sie haben alle eine Klasse von Box und jede Box hat eine Zahl, und diese Zahlen korrelieren mit einer Hintergrundfarbe. Fantastisch. Jetzt hat jede Box auch eine Polsterung von 10 Pixeln und einen Rand oben und unten von 30 Pixeln. Aber wenn Sie diese Boxen genau betrachten müssen, denken Sie vielleicht, dass das nicht 30 Pixel auf der Unterseite sind. Also, wenn wir das untersuchen, werden wir sehen, dass dieser orangefarbene Bereich über Feld zwei, das ist etwa 30 Pixel. Cool. Aber sicherlich sollte es weitere 30 Pixel vom Rand unten von Box eins geben. Also, wenn wir den Mauszeiger über Box eins bewegen, werden wir sehen, dass es einen Randboden hat, aber es überlappt sich. Also, was zum Teufel hier los ist. Nun, einer der Ränder bricht zusammen und es ist der kleinere der beiden Ränder. Es verschwindet einfach, was manchmal cool ist, aber wenn man es nicht erwartet und man nicht weiß, was los ist, ist es frustrierend. Also, seien Sie sich dessen bewusst. 6. Anzeigentypen, Standardstile und Überschreiben: Jedes Tag hat einen Standardanzeigetyp. Die meisten Tags haben die Standardeinstellung „display“: block. Andere gebräuchliche Werte sind Inline und Inline-Block. Es gibt auch super tolle Anzeigetypen wie Flex und Grid, aber ich führe diese aus diesen Klassen. Sie sind etwas komplexer. Andere Anzeigetypwerte, auf die Sie stoßen können, sind Tabelle, Listenelement, Run-in, Tabellenzelle. Es gibt auch noch eine Menge mehr. Die gute Sache ist, dass jedes Element das Standard-Anzeige-Styling außer Kraft setzen kann, genau wie jede andere Eigenschaft. Lassen Sie mich Ihnen also über die Unterschiede zwischen der Anzeige erzählen : Block inline und Inline-Block und Blockelemente wie ein div, ein p-Tag oder ein, auf das Sie eine Anzeige eingestellt haben: block-Deklaration. Wir beginnen mit einer neuen Zeile und füllen den gesamten verfügbaren horizontalen Raum, den sie gegeben hat. Die Höhe reicht aus, um seinen Inhalt zu passen. Es ist eine ziemlich magische Schachtel. Selbst wenn Sie eine Breite und eine Höhe festlegen, beginnt das Element auf einer neuen Linie. Ein Inline-Element, wie ein Tag, eine Spanne, ein em-Tag oder ein, auf das Sie eine Inline-Inline-Deklaration festgelegt haben, funktioniert fast genauso wie ein Textstück. Sie nehmen so wenig Platz wie möglich ein und sitzen neben anderen Inline-und Inline-Block-Elementen. Inline-Elemente sind primär für Text und Daten gedacht. Sie sollten ein Blockelement nicht innerhalb eines Inline-Elements verschachteln. Inline-Elemente werden auch nicht auf einer neuen Zeile beginnen. Beim Festlegen von Rändern und Füllständen auf Inline-Elementen werden vertikale Änderungen nicht angezeigt. Horizontale werden jedoch sein. Wenn Sie einen Rahmen hinzufügen, können Sie sehen, was wirklich vor sich geht. Es ist ziemlich erstaunlich. Ein Inline-Block-Element, ähnlich wie Eingaben, Auswahlen oder eines, für das Sie eine Anzeige Inline-Blockdeklaration festgelegt haben, hat das Beste aus Block- und Inline-Welten. Es kann neben Inline-und Inline-Block-Elementen sitzen. Wenn Sie Ränder, Füllstände und Rahmen darauf festlegen , nimmt es sowohl horizontalen als auch vertikalen Raum ein. Dieser Anzeigetyp sollte in der Regel auch mit Text- und Datenelementen verwendet werden. Als zusätzlichen Bonus, wenn Sie jemals etwas einfach verstecken wollen, verwenden Sie Display: keine. Was ist hier los? Sieht aus wie ein absolutes Chaos. Nun, es ist ein Chaos. Es gibt eine Reihe von Inline-Elementen, es gibt diese Blockelemente, und dann gibt es diese Eingabe, die ein Inline-Block-Element ist, das nur in der Mitte des Nirgendwo abkühlt. Also, was ist der Sinn davon? Ich zeige Ihnen nur, wie Sie die Standard-Anzeigetypen überschreiben. Also, das erste, was ich tun werde, ist Ihnen zu zeigen, wie Sie den div-Anzeigetyp ändern. Also, lasst uns zum Tab d gehen. Ich werde mich ändern, ist Inline-Block. Genau so verliert es seine Fähigkeit, die volle Breite zu erweitern. Es beginnt nicht auf einer neuen Zeile. Wenn wir Inline-Block in Inline ändern, ändert sich dort nichts viel. Also, das ist ziemlich cool. Was passiert, wenn wir unser Em holen? Wir ändern dies, um anzuzeigen: Block. Genau so nimmt es die volle Breite ein. Sie beginnen eine neue Linie. Fantastisch. Es ist wirklich einfach. Sieh dir das an. Wenn wir dies ändern, um anzuzeigen: none, die ems sind weg. Lassen Sie uns das einfach rückgängig machen, ändern Sie es zurück zu blockieren, und dann ist die letzte Sache diese Eingabe der Art des Textes. Lassen Sie uns diesen Kerl ändern, um anzuzeigen: Block. Sie können sehen, dass es auf einer neuen Zeile beginnt, aber es nimmt nicht die volle Breite ein. Was ist damit los? Nicht ganz sicher. Also, lasst uns mit w gehen und das erweitern. Lassen Sie uns auf 100 Prozent Breite setzen. Da gehen wir. Aber wir wissen, dass dies ein Problem sein kann, wenn Sie sich entscheiden, Padding hinzuzufügen. Also, lassen Sie uns etwas Polsterung hinzufügen. Oberer und unterer Polsterung, 10 Pixel. Linke und rechte Polsterung, lassen Sie uns für 40 Pixel gehen. Aber jetzt geht es irgendwie vom Rand der Seite, was wir nicht tun wollen. Also, wie ändern wir das? Wir gehen für die bz, die box-sizing ist, und wir setzen unsere box-sizing auf border-box. Genau so, es sind fixierte Dinge. Wir können eine Marge hinzufügen. Also, oben und unten, lassen Sie uns für 20 Pixel gehen. Links und rechts, gehen wir für Null. Da gehen wir. Unsere Eingabe, die einen Anzeigetyp von Inline-Block hatte, hat jetzt eine Anzeige von Block und funktioniert perfekt. Also, da gehen wir. So überschreiben Sie Ihre Anzeigetypen. Es ist wirklich einfach. 7. Floating: Das nächste Thema, das wir behandeln werden, ist schweben, was ziemlich genial ist, aber es kann ziemlich schwierig werden, wenn Sie es für die falschen Dinge verwenden. Wofür es wirklich gut ist, verwendet zu werden, ist Text, um ein Element zu wickeln. Wenn Sie ein übergeordnetes div-Element mit einem p-Element im Inneren haben , fügen Sie dem übergeordneten Element ein anderes Element wie ein div oder ein Bild hinzu und geben Sie ihm eine Breite und Höhe. Als nächstes geben Sie ihm eine Float-linksdeklaration. Sie können zwischen einem Gleitkommawert von links, rechts oder keiner wählen. Wir können ein weiteres Element hinzufügen und es richtig schweben. Sie werden sehen, wie die Texturen um sie herum fließen. Wir können diesen schwebenden Elementen dann einen gewissen Rand geben, so dass der Text nicht super nahe dran ist. Was schweben bedeutet, ist, dass ein Element aus dem normalen Fluss ausbricht und den Rest so lässt, wie er ist, oder Inline-Elemente werden um ihn herum wickeln. Ich schlage nicht vor, Mischungen von Inline-und Block-Elementen zu verwenden, wenn es um Floating geht. Ein schwebendes Element wird links oder rechts schweben, wenn Platz dafür vorhanden ist. Andernfalls wird es zu einer neuen Zeile gehen. Manchmal möchten Sie, dass ein Element ein schwebendes Element ist, aber Sie möchten, dass es nach einem anderen schwebenden Element beginnt, oder Sie möchten, dass ein reguläres Element nach einem schwebenden Element angezeigt wird, das ihm vorangeht. Der beste Weg, dies zu tun, ist eine klare Erklärung zu verwenden. Sie können festlegen, welche Seite es löschen soll, links, rechts, beide oder keine, und es wird nach dem letzten Element angezeigt das eine klare linke oder rechte Deklaration hatte, oder es wird nach allen vorhergehenden schwebenden Elementen kommen. Aber pass auf. Da ein schwebendes Element aus dem normalen Fluss ausbricht, kann es, wenn ein übergeordnetes Element nur schwebende Elemente enthält, seine Höhe nicht korrekt berechnen. Es wird also oft so aussehen, als gäbe es keine übergeordneten Elemente. Es gibt einige Hacks und Fixes dafür, aber Vorsicht. Es ist beispielhaft Zeit. Ok. Also, was haben wir hier? Nun, wir haben dieses div-Tag und in diesem div-Tag haben wir ein weiteres div-Tag mit der Klasse von Bild eins, und dann haben wir ein Bild-Tag mit der Klasse von Bild zwei, und es hat eine Quelle, die auf diese Kleiner hier. Wir bekamen dann ein p-Tag mit einem Haufen Text darin. Was wir wollen, dass es diese beiden Zeichen innerhalb des Textes schwebt. Also, lasst uns zu unserem CSS gehen. Wir gehen zuerst zum Bild eins, ist das div und wir gehen fl für float, drücken Sie Tab, um das zu erweitern, Standard auf schwebende links, was fantastisch ist. Wir könnten es auch richtig schweben, was großartig wäre. Also, vielleicht lasst uns das versuchen. Dann Bild zwei, wir gehen für Schwimmer, über die wir reden können, wenn Sie wollen, und wir können sagen, Float links, und Sie werden sehen, dass alle Texte nur um sie wickeln und sieht wirklich schön aus. Wenn wir das etwas kleiner machen, werden Sie das sehen, weil es nicht genug Platz gibt, wird es einfach gehen und nach etwas anderem anfangen, das davor schwebt. Also, das ist wirklich einfach, das ist großartig. Sie können auch ein paar Margen auf diesen Kerl setzen. Also, wir wollen Rand links, Rand unten. Also, Null, Null, 20 Pixel und 20 Pixel. Das ist großartig. Dann unser Bild zwei, so ziemlich umgekehrt. Denken Sie daran, ein Semikolon nach Float dort links zu setzen, und wir werden Null gehen, und dann wollen wir 20 Pixel auf der rechten Seite, 20 Pixel unten und Null auf der linken Seite. Also, das sieht toll aus. Was hier wirklich wichtig ist, ist, dass dies funktioniert weil diese beiden Bilder an der Spitze dieses div sind, sie kommen vor dem p-Tag. Also, wenn ich sie schneiden und unter das p-Tag in diesem div setzen muss, nun, es würde nicht wirklich funktionieren, weil sie noch nicht irgendwo schweben. Sie schweben nach diesem P. Also, wenn wir dieses p-Tag hier kopieren würden, dann gehen wir. Es wird anfangen, genau dort zu schweben, wo sich das p-Tag befindet. Also, ziemlich wichtig zu wissen, ob Sie wollen, dass Sachen schweben, legen Sie es über die Dinge, die Sie wollen, dass es in und unter schweben. Ok. Also, wir wissen, wie man Dinge schwebt, aber wie gehen wir jetzt gegen das Getreide? Wie lassen wir die Dinge nicht schweben? Wie lassen wir Dinge nach anderen Elementen schweben, die schweben? Nun, sieh dir das an. Lassen Sie uns die beiden einfach nochmal nach oben kopieren. Also, jetzt habe ich ein paar Bilder oben, einige Bilder unten. Jetzt gehen wir zu unserem CSS. Denken Sie daran, Bild zwei, das ist das, das tatsächlich an zweiter Stelle kam. Also, es gibt Bild eins, es gibt Bild zwei. Was passiert, wenn wir beide links umdrehen wollten? Wir wollen nicht, dass sie nebeneinander sind, das sieht einfach seltsam aus. Also, was wir hier tun können, ist, dass wir sagen können, rechts schweben, wie wir hatten, oder wir könnten so etwas wie klar links sagen. Auf diese Weise geht es in die nächste Zeile. Nun, wir sind wie, was ist hier los? Wir haben überall in der Show Dinge passiert. Nun, wieder, auf Bild eins, können wir sagen, klar links, und jetzt geht es zu den neuen Linien. Also, Sie werden nie zwei Bilder oder zwei Dinge nebeneinander auf der linken Seite schweben. Also, das ist wirklich hilfreich. Jetzt können wir einen Haufen Text haben und es wird all diese Bilder umwickeln. Wir können die gleiche Menge an Margings auf beide setzen, und da gehen wir. Sieht wirklich schön aus. Es wickelt sich um diese Bilder wirklich, wirklich schön. Die andere Sache, die wir tun können, ist, dass wir Float einfach auf keine setzen können. So etwas wie das. Aber wenn Sie möchten, dass Text um ihn herum fließt, lassen Sie uns das einfach auslassen. Nun, wieder, wenn die Dinge richtig schweben, können Sie auch Dinge wie klare beides tun, was in diesem Fall den gleichen Effekt haben wird. Aber vielleicht haben wir Rechte und links und, jetzt wollen wir nur sagen, tatsächlich nur klar beide Seiten von ihnen. Nur für den Fall ändern wir das schwebende auf die rechte Seite. Also, wenn wir hier keine Klärungen hätten, würde das passieren. Also, nehmen Sie das hier wieder raus. Wenn wir dieses Bild zwei ändern, um rechts löschen oder beides zu löschen, wird es dann auf einer neuen Zeile beginnen, und dann ist dieses eine schwebende rechts. Also, wir wollen klares Recht sagen, oder beides klar. Ok. Es geht weiter zu einer neuen Linie. Das ist also fantastisch. So machen wir das Clearing. Manchmal hilft es wirklich. Dann, wieder, dieses p-Tag, wenn wir nicht wollen, dass er mit diesen klaren Elementen beteiligt ist, werden wir das überprüfen. Wir würden beide klären, und, Voila, es geht nach unten. Es will nichts mit diesen klaren Elementen zu tun haben. Ziemlich einfach, richtig? Also, wir haben diese drei Bilder, diesen Kerl und zwei von diesen blauen Kerlen, und wir wollen sie nebeneinander schweben. Manchmal ist das sehr nützlich, und Sie werden im nächsten Beispiel sehen, warum dies besonders nützlich sein kann. Also, was passiert hier? Wir gehen schwimmen links, was großartig ist, und dann, wir schwimmen links, was großartig ist. Aber wohin geht unser Hintergrund? Wohin geht unser Eltern-Div? Es ist einfach verschwindet. Wo ist sie? Nun, weil es schwebt, Eltern gehen. Nun, ich weiß nicht wirklich, wie hoch es sein sollte. Das ist ein Problem. Also habe ich ein paar Korrekturen erwähnt, die Sie tun können. Die erste, die wir tun können, um zu unseren Eltern zu gehen, und wir gehen einfach überlaufen und wir gehen versteckt, was großartig ist. Außer, wenn Sie dann Ihr Bild ändern, wenn Sie beginnen, sie zu übersetzen. Also, transformiere und übersetze Y, sagen wir, und du gehst zu etwas wie 50 Pixel. Es hackt es ab, und wenn wir zu etwas wie vielleicht 100 Pixel gehen. Mann, das wird es einfach nicht schneiden. Also, wenn du hier drüben siehst, entfernen wir das einfach noch einmal. Du kannst seine Beine sehen, und wenn wir das zurücklegen, kannst du seine Beine nicht sehen. Also, was wir hier tun, ist, dass wir Dot Eltern gehen, wir werden jetzt eine After-Pseudo-Klasse setzen. Dann setzen wir seinen Inhalt auf nichts. Wir setzen dann seinen Anzeigetyp auf Tabelle und wir werden sagen, beide löschen. Nun, das sollte den Trick tun, und das nennt sich wirklich Clearfix. Wir können unseren Überlauf verborgen entfernen, und genau so funktionieren die Dinge wieder. Ziemlich süß. Nun, wenn Sie dies in allen Browsern funktionieren wollen, gibt es viele verschiedene Möglichkeiten, dieses Ding namens Clearfix zu tun, aber für moderne Browser ist das alles, was Sie tun werden. Nur auf dem übergeordneten div oder dem übergeordneten Element, setzen Sie einfach eine Pseudo-Klasse von after, setzen Sie seinen Inhalt auf nichts, zeigen Typtabelle an, nur ziemlich seltsam, und dann werden Sie beide löschen. Fantastisch. Also, worum geht es in diesem Beispiel? Nun, ich werde tatsächlich einige Spalten innerhalb eines Eltern-Div oder eines Zeilendivs erstellen. Also, das erste, was ich tun werde, ist, ich werde diese 1, 2, 3 Spalten in einer Zeile div setzen . Lasst uns das schneiden, lasst uns einfach unseren Code einrücken. Wir werden eine Zeilenklasse wie so erstellen, und dann meine Col, ich werde so links schweben, und das sieht tatsächlich ziemlich viel wie eine Menüstruktur oder eine Navbar-Struktur aus. Behalten Sie das im Hinterkopf. Dann, was ich tun möchte, ist, dass ich hier ein bisschen Marge dazwischen setzen möchte. Also, Margin-links, ich möchte 20 Pixel sagen. Cool. Das sieht wirklich gut aus. Dann gehen wir zu meiner Reihe. Ich möchte eine Hintergrundfarbe festlegen. Das ist cool. Ich werde vorerst nur rot sagen. Was ist los? Nun, weil sie schweben, brauchen wir jetzt einen Clearfix. Also, gehen wir Punkt Zeile und lassen Sie uns nach Pseudo-Klasse gehen. Ok. Wir werden dann sagen, Inhalt ist nichts. Wir werden den Anzeigetyp zwei Tabelle einstellen, und dann werden wir sagen, dass beide gelöscht werden sollen. Ok. Also, da gehen wir. Wir haben jetzt einen Hintergrund, wir haben jetzt einige Höhen, und unsere Reihe. Aber was ich jetzt tun möchte, ist, dass ich diesen Rand links vom Col 1 entfernen möchte. Also, was ich tun kann, ist, dass ich Dot Col First-Kind sagen kann, das ist eine andere Pseudo-Klasse, und ich kann Margin-links sagen, nichts. Da gehen wir. Also, ich habe gerade eine Margin-links zwischen Col 2 und Col 1 und zwischen Col 3 und Col zwei. Nun, was ich tun kann, ist, dass ich die Breite dieser beiden einstellen kann. Sagen wir 100 Pixel. Fantastisch. Aber denken Sie daran, dass wir unsere Box-Größe noch nicht festgelegt haben. Also, Box-Dimensionierung Border-Box. Wir werden diese einfach etwas kleiner machen, oder wir machen sie einfach 100 Pixel in der Breite. So können wir jetzt unsere Zeilenbreite einstellen. Es wären also 100 Pixel,100 Pixel,100 Pixel plus 20 plus 20, was uns 340 geben wird. Also, Breite von 340 Pixel. Perfekt. Dann können wir Marge sagen, wir können Null und Auto sagen. Es hat es für uns zentral gesäumt. Fantastisch. Jetzt können wir unsere Reihe kopieren. Da gehen wir. Vielleicht, unsere Reihe, wollen wir vielleicht nur ein bisschen Rand oben oder Rand unten setzen. Also, lassen Sie uns für 20 Pixel gehen. Fantastisch. Wir können unsere Hintergrundfarbe entfernen, und da gehen wir. Wir haben diese ziemlich tabellarische Struktur, außer dass es keine Tabelle ist, sie besteht aus divs, die schweben. Fantastisch. 8. Transform & Translate: Sie können die Transformationsdeklaration für alle Arten von Dingen verwenden: Rotationen, Skalierung, 3D-Material und einfaches Verschieben von Elementen. Wir werden nicht viel von dem, was die Transformationsdeklaration tun kann , abgesehen von den TranslateX- und TranslateY-Werten. Die Transformationsdeklaration ist ein wenig seltsam, da der Wert Teildeklaration und Teilewert selbst ist. Wir fügen Klammern am Ende des TranslateY- oder TranslateX-Wertes hinzu und fügen einen Messwert ein. Es ist wirklich einfach zu bedienen, und es ist fast wie relative Positionierung, die wir bald abdecken werden. Die Sache bei der Verwendung von translate ist, dass sich das Element entweder auf der horizontalen oder vertikalen Achse bewegt , ohne andere Elemente zu beeinflussen. Es ist fast so, als ob die anderen Elemente immer noch denken, dass es dort ist, wo es ist, aber es bewegt sich tatsächlich. Es ist sehr hinterhältig. Lassen Sie uns bereits dieses Beispiel machen. Also, was wir tun werden, ist, dass wir etwas „tf“ für Transformation tun, erweitern Sie das und gehen Sie zu „TranslateX“, und dann in Klammern, können wir etwas wie 30 Pixel setzen. Es geht auf die rechte Seite, wenn wir negativ gehen 30 Pixel. Da gehen wir. Wir können auch etwas wie 90 Prozent tun. Ganz nach rechts, 100 Prozent, noch mehr, ganz nach rechts. Also, das ist ziemlich cool. Was wir jetzt tun können, ist, dass wir, wie Sie denken, „transformieren“ und „Translatey“ gehen und dann 40 Pixel negativ ausdrücken können . Aber was passiert hier? Nun, was hier passiert, ist, dass diese Transformationsdeklaration diese überschreibt. Also, wie schreiben wir eigentlich Translatey und TranslateX zusammen? Oder wir können diese Linie hier nehmen. Ich kopiere es, füge es hier drüben ein, und da gehen wir. Also, wir können das vielleicht auf 50 Pixel ändern. Dann können Sie TranslateX und Translatey in derselben Zeile haben. Du könntest auch etwas mehr Transformationsarbeit machen. Also, lassen Sie uns für eine Skala von 1,5 gehen. Da gehen wir. Ziemlich cool, stimmt's? Wenn Sie dies viel kürzer machen wollten, könnten wir einfach „translate ()“ gehen und hier zwei Werte einfügen, X-Wert, also 30 Pixel. 50 Pixel. Da gehen wir. Übersetzen mit Transformation ist also wirklich einfach, die X- und Y-Position zu übersetzen , und keines der anderen Elemente ist betroffen. Fantastisch! 9. Positionierungs-Terminologie: Bisher haben wir einige Möglichkeiten gelernt, Dinge mit HTML und CSS zu gestalten. Nun, jetzt werde ich die Positionierung abdecken, was meiner Meinung nach super wichtig ist und der Kern dieser Klasse. Also möchte ich einige Terminologie erklären, die ich gerne benutze. Ich habe es auch in einen Cheatsheet-Download aufgenommen, auf den Sie sich beziehen können, während Sie gehen. Für ein Element, das eine Deklaration enthält, die aus einer Positionseigenschaft und einem statischen Wert besteht , würde ich es ein statisch positioniertes Element oder ein statisches Element nennen. Für ein Element, das einen Positionswert von relativ hat, würde ich es entweder ein relativ positioniertes Element oder ein relatives Element nennen. Ich würde ein Element nennen, das einen Positionswert von absolut, ein absolut positioniertes Element oder ein absolutes Element hat. Für ein Element, das einen Positionswert von fest hat, würde ich es nur ein festes Element nennen. Schließlich würde ich dann ein Element mit einem Positionswert von klebrig, ein klebriges Element, nennen. 10. Statische Positionierung: Standardmäßig ist die Position eines Elements statisch. Es gibt also keine Notwendigkeit, es selbst festzulegen, es sei denn, Sie möchten einen zuvor festgelegten Wert überschreiben. Statische Elemente, die zuerst in HTML angezeigt werden, sollten zuerst im Browser angezeigt werden. Ähnlich wie ein Stapel von Boxen würde visuell. Vor allem, wenn alle Elemente auch statisch sind. Der Browser positioniert statische Elemente dynamisch nach dem vorherigen statischen oder relativen Element. Es berechnet auch die Breite und Höhe. Die Breite beträgt in der Regel 100 Prozent und die Höhe ist in der Regel hoch genug, um den Inhalt zu passen. Sie können die Breite und Höhe auch manuell einstellen, wenn Sie möchten. Statische Elemente sind super praktisch und entfernen die meiste harte Arbeit, die wir in den meisten der Design-Apps, die wir verwenden, gewohnt sind. Bei statischen Elementen funktionieren die Deklarationen oben, unten, links und rechts sowie die Z-Index- oder Z-Index-Deklarationen nicht. Sie können diese Position immer noch mit Rändern und einer Transformation und einer Übersetzungsdeklaration versetzen , wenn Sie möchten. Wenn Sie margin-left und margin-right verwenden, wird die neue Breite für Sie berechnet. Während die Verwendung von Transform und Translation die Breite nicht ändert. Statische Elemente eignen sich hervorragend für Textstücke, Bilder, Anführungszeichen, Listen und Tabellen. Grundsätzlich alles, was eine variable Länge haben kann. 11. Relative Positionierung: Relativ von Elementen sind fast genau die gleichen wie statische Elemente, mit Ausnahme einiger zusätzlicher Vorteile. Wenn Sie Elemente relativ positionieren, sagen Sie im Grunde: „Wenn wir Sie positionieren, wird es relativ zu dem, wo Sie sind“, was absolut keinen Sinn ergibt, aber hören Sie mich an. Also, mit einem relativen Element, sind die oben, unten, links und rechts Deklarationen jetzt verfügbar. Sie sehen auch in Chrome, dass diese Positionswerte im Boxmodelldiagramm sichtbar sind. Was das bedeutet, ist, dass wir in Elementen von oben, unten, links und rechts bewegen können , wenn wir wollen. Es ist fast wie transformieren und übersetzen. Wenn Sie möchten, dass es 10 Pixel von unten entfernt sein, wählen Sie das aus. Wenn Sie 10 Pixel von rechts haben möchten, wählen Sie das aus. Wenn Sie ein relatives Element mit einer dieser Deklarationen positionieren, wird die Breite oder Höhe nicht automatisch angepasst. Die Typen von Werten, die Sie für die obere, untere, linke und rechte Deklaration verwenden können , sind typische CSS-Längenwerte, Pixel, Prozentsätze, EM, REM, et cetera. Ok. Es ist wieder ein Beispiel. Also, was wir hier tun werden, ist in eine relative Positionierung zu bekommen. Also, auf Feld drei, können wir Pause R gehen. Wenn wir einfach Pause machen und Tab drücken, relativ zu, aber wir könnten Pause R für Position relativ gehen. Fantastisch, dann können wir einen linken Wert setzen, vielleicht können Sie für 20 Pixel gehen und es bewegt ihn um 20 Pixel nach oben. Sie werden sehen, dass sich die Breite nicht ändert. Wir können dies in einen negativen Wert zwei ändern. Wir können auch die richtigen Werte ändern, wo man 20 Pixel sagen kann. Aber das ist irgendwie seltsam, denn das ist irgendwie das, was die Linke wirklich tut. Also, lassen Sie uns für 50 Pixel gehen. Es tut immer noch nichts und das liegt daran, dass Sie einen linken und einen richtigen Wert haben. Also, lasst uns das einfach rausnehmen. Da gehen wir, richtig. Wir werden jetzt arbeiten. Also, entweder nach links oder rechts gehen, Sie können auch 50 Pixel nach rechts negativ gehen, was ähnlich ist wie eine linke von 50 Pixeln. Wir können dann die Spitze von 30 Pixel sehen und Sie können sehen, dass dies viel wie transformieren und übersetzen ist. Wir können auch eine Unterseite von Pixeln oder negative 30 Pixel setzen. Ziemlich einfach. Es ist wirklich, wirklich praktisch. Sie werden auch sehen, dass es sich nicht auch auf die anderen Elemente auswirkt. Fantastisch. 12. Absolute Positionierung: Absolute Elemente sind, wo die Dinge super interessant werden. Die Art und Weise, wie es funktioniert, ähnelt den meisten Design-Apps und gibt Menschen viel Kontrolle und Macht ähnlich wie Spiderman. Wenn wir ein Element absolut positionieren, bitten wir Sie im Grunde, aus dem normalen Dokumentfluss zu gehen, wird jeder andere Inhalt um ihn herum so positioniert, als ob das absolute Element überhaupt nicht da wäre. Sie werden sehen, dass die Breite und Höhe verkleinert werden, so dass sie ihren Inhalt enthält. Wir haben jetzt die Kontrolle über seine Breite, Höhe und wo dieses Element im Dokument positioniert ist. Es liegt alles an uns. Wenn wir das mit jedem einzelnen Element tun müssten, könnten wir tagelang hier sein. Deshalb ist die statische und relative Positionierung die meiste Zeit so erstaunlich. Ein absolutes Element wird relativ zu seinen ersten nicht statischen und Schwesterelementen positioniert. Dies kann nicht seine direkten Eltern sein. Es wird den Dokumentbaum hinauflaufen, bis er ein Element findet, das nicht statisch positioniert ist. Also, das erste Element, das einen Positionswert von absolut, relativ, fest oder klebrig hat , wird seine Position Eltern. Wenn es keine nicht-statischen Elemente in der Abstammung der Elemente gibt, wird das Browserfenster als seine Position übergeordnete Elemente ausgewählt. Dies bedeutet, dass das absolute Element dorthin geht, wo das übergeordnete geht und von den Werten für Breite und Höhe des übergeordneten Elements beeinflusst werden kann. Wir können jetzt die oben, unten, links und rechts Deklarationen verwenden, um ein absolutes Element relativ zu seiner Position übergeordnetes Element zu positionieren. Wenn wir also den obersten Wert auf 20 Pixel setzen, positioniert er sich 20 Pixel von der Oberseite des Elternteils. Wenn keine Breite und Höhe eingestellt ist oder wenn sie auf auto eingestellt sind, können wir die oben, unten, links und rechts Deklarationen verwenden, um die Breite und Höhe dynamisch festzulegen. Wie immer 10 Pixel von oben sein und immer 10 Pixel von unten sein. Okay, also, erstes Beispiel ist dieses Kind 12, dieser absolute Kerl, der ein bisschen weißen Text hat. Also, das erste, was wir tun, ist, dass wir Pos A gehen, absolut positionieren, drücken Sie Tab, um zu erweitern und Sie werden automatisch sehen, dass es aus dem dokumentierten Fluss geht. Es ist fast so, als ob es Geschwister sind, gehen Sie einfach : „Nun, Sie sind nicht mehr Teil der Familie. Wir sehen dich nicht mal.“ Und du wirst sehen, dass es so aussieht, als ob es nur über seinen Geschwistern schwebt. Okay, jetzt ist es einfach nur kühl, weil wir keinen Top-Wert, eine linke, eine rechte, einen unteren Wert gesetzt haben. Beginnen wir also mit dem Spitzenwert. Lassen Sie uns Null Pixel für jetzt gehen und Sie werden sehen, dass es an den Anfang des übergeordneten Feldes geht, und das übergeordnete Feld hat eine Position von relativ. Nun, es wählt dieses Element und wir können hier sehen, dass dieses Kind 12 jetzt wählt dieses übergeordnete Feld seine Position Eltern zu sein. Es wählt nicht dieses Kind fünf, weil dieses Kind fünf eine statische Position hat. So. Wenn wir die fünf Position unseres Kindes auf relativ ändern müssen, werden Sie sehen, dass jetzt Kind 12 nach oben geht oder an der Spitze von Kind fünf kleben wird. Ziemlich beeindruckend. Also, wenn wir das wieder herausnehmen müssen, werden Sie sehen, dass es bis zum übergeordneten Feld springt. Und wenn wir die Position der übergeordneten Box einnehmen müssen, geht es den ganzen Weg bis zum Anfang des Dokuments, was ziemlich cool ist. Und jetzt, wenn wir hier eine linke Position setzen, so. Es ist buchstäblich an der Spitze des Dokuments und so wählt es seine Position übergeordneter. Okay, was ich hier tun möchte, ist, dass ich Kind fünf auch zu einem absoluten Element machen möchte. Also pos A, es wird ein absolutes Element und jetzt kann es aussehen, als ob ein verrücktes Zeug vor sich geht. Lassen Sie uns schnell einen Blick auf den HTML werfen und Sie werden sehen, dass Kind 12, das hier drüben ist, sich in diesem Kind-Fünf-Element befindet, das hier drüben ist, und wir haben gerade dieses Kind fünf Elemente auf absolute Position gesetzt. Also, wenn wir den obersten Wert des Kindes fünf auf Null ändern, wird es uns irgendwie zeigen, wo die übergeordnete Position ist, die das Dokumentfenster zu sein scheint. Also, wenn wir hier nach oben scrollen und wir die übergeordnete Box auf Position relativ setzen, okay, da gehen wir. Also, Kind fünf positioniert sich jetzt entsprechend der übergeordneten Box und dann positioniert sich Kind 12 nach Kind fünf. Nun, es kann ein bisschen kompliziert werden, ich weiß. Bären Sie mit mir. Also, bei unserem Kind fünf, werden wir jetzt die Breite vorübergehend auf 100 Prozent setzen. Okay, das gibt uns ein bisschen mehr Atemraum. Es sieht jetzt nicht so kompliziert aus. Ok. Also, was ich hier tun werde, ist, ich auch den Boden auf Null setzen werde, und was das tut, ist, dass es sagt, dass ich Null Pixel von unten positioniert werden werde. Also, wenn wir diese Position relativ auf der Elternbox herausnehmen müssten, ist das jetzt wirklich cool. Es positioniert sich jetzt relativ zum Dokumentfenster, und anstelle der Breite 100 Prozent können wir dies in rechts, Null und links, Null ändern . Und lasst uns einfach die Breite herausnehmen und einfach so sollte es keinen Platz um sie herum geben. Fantastisch. Wir können diese auch auf 30 Pixel einstellen und das sieht nicht so richtig aus, 30 Pixel, und diese Art von wirkt wie eine Margining. Also oben, rechts, unten, links ist das wirklich cool. So können wir Breite und Höhe einstellen, ohne tatsächlich Breiten- und Höhendeklarationen zu verwenden. Wir verwenden oben, unten, rechts, links und ich habe Ihnen gerade gezeigt, wie Sie ein Element innerhalb eines absoluten Elements positionieren. Also, jetzt, wenn wir zu unserem absoluten Kind gehen und sagen unten Null Pixel, fantastisch. Das nächste, was ich tun werde, ist Ihnen zu zeigen wie man ein absolutes Element negativ positioniert. Dies ist sehr nützlich für Schließen von Schaltflächen und solche Dinge. Also haben wir dieses Kind 12, dieses glorreiche Kind 12, Sie waren ein fantastisches Beispiel, vielen Dank. Also, lasst uns das wieder von unten nach oben ändern und wir können dies auf negative 30 Pixel setzen, vielleicht gehen wir negativ 50 Pixel und links negativ 50 Pixel, da gehen wir. Und wenn wir diese Breite auf so etwas wie 30 Pixel setzen müssten, da gehen wir und die Höhen von 30 Pixeln, auch, das wäre groß und Überlauf von versteckten. Dort bekommt man irgendwie die. „ Hey, das ist ein Beispiel für die Schließtaste.“ Also gehen wir hin. Es ist wirklich nützlich. Eine Sache, die Sie sich bewusst sein müssen, ist, wenn Sie einen Überlauf auf der Position Eltern versteckt haben, ist es weg. Du kannst es nicht mehr sehen. Also seien Sie sich dessen bewusst. Also, jetzt kommen wir zu etwas fortgeschritteneren Sachen. Wir haben jedoch ein einfacheres Beispiel, wir haben gerade diese eine Box, es ist Box eins mit ein paar Box zwei Kindern drin und jetzt werde ich Ihnen zeigen, wie man eine Pseudo-Klasse in Verbindung verwendet mit absoluter Positionierung. Also, Sie gehen.box-1 und eine Pseudoklasse von nach, und dann innerhalb dieses können wir normalerweise einfach nur Inhalte gehen und Ihnen zeigen, was das tut, können Sie sagen: „Hallo da!“ Und genau so gibt es einige Inhalte im HTML, aber wir können ihn nicht auswählen und das ist, was wirklich cool dieser Inhaltsdeklaration innerhalb der Nachher oder innerhalb der vorher Pseudo-Klasse ist. Es ist wirklich cool. Also gehen wir zurück nach und jetzt, was wir hier tun können ist, dass wir Pos A für Positionsabsoluten sagen können, okay. Und vielleicht können wir ihm eine Hintergrundfarbe geben, also Hintergrundfarbe, lassen Sie uns eine dieser wählen, gehen wir für diese blaue Farbe, und dann können wir vielleicht links sagen, Null; rechts, Null und was hier passiert, Nun, die Position Eltern ist nicht wirklich unsere Box eins. Also, sagen wir Position relativ und da gehen wir. Wir können sagen, es ist unten, Null. Fantastisch. Nun, wo dies sehr nützlich ist, können Sie beginnen, Grenzen wie diese zu setzen. Also, wenn wir unseren Inhalt herausnehmen müssten, haben wir im Grunde eine Grenze hierher gebracht. Okay, es gibt momentan keine, aber lass uns für eine Höhe von vier Pixeln gehen und da ist unsere Grenze. Und wenn wir unseren Boden auf minus vier Pixel setzen müssen und was ist mit unseren rechten, minus vier Pixel, links minus 4 Pixel. Wir haben jetzt diesen blauen Rand. Wir können auch seine Deckkraft 2,5 einstellen und jetzt haben wir diese Art von grünem Rand. Wirklich interessant, es mischt sich jetzt mit unserer Hintergrundfarbe. Wirklich cool. So können Sie sehen, dass wir absolute Positionierung mit einer After-Pseudo-Klasse verwenden. Wirklich, wirklich cool. 13. Tiefe und Z-Index: Nun, da wir absolute Elemente behandelt haben. Wir können beginnen, Tiefe abzudecken, die ein bisschen verwirrend werden kann. Also, hör mal zu! Allen nicht statischen Elementen wird vom Browser automatisch eine Tiefe zugewiesen. Wenn Sie nichts dagegen tun, tiefer in der Dokumentstruktur und in den Elementen, desto höher ist der Tiefenwert. Grundsätzlich wird es eine höhere Höhe haben. Denken Sie daran, dass HTML das Gegenteil von Design-App-Layern ist. Es ist eine umgedrehte Box-Welt. Also, weil unser absolutes Element nicht schwebt, denken Sie vielleicht, dass es vor allem schweben sollte, aber es tut nicht unbedingt. Wenn sich im HTML-Baum nicht statische Elemente darunter befinden, haben diese Elemente einen höheren Tiefenwert als die absoluten Elemente und können über dem absoluten Element erscheinen. Wenn Sie zwei oder mehr absolute Elemente an der gleichen Position auf einer Seite schweben, werden Sie sehen, dass diejenige, die niedriger im HTML-Baum ist eine höhere Höhe hat und scheint oben zu sein. Aber wir können manuell alle nicht-statischen Elemente Tiefe ändern. Wir tun dies, indem wir dem Element einen zed Indexwert oder einen Z-Indexwert geben. Z-Index ist der vom Menschen zugewiesene Tiefenwert eines Elements. Sobald wir einen Wert von einem oder höher angegeben haben, wird es in einer höheren Höhe im Vergleich zu den anderen Elementen in seiner Box sein. Wenn alle nicht statischen Elemente in einem Feld denselben zed-Index oder Z-Index erhalten, wird die Tiefe erneut durch die Position im HTML-Baum bestimmt. Z-Indizierung ist jedoch nicht nur für absolute Elemente. Alle nicht statischen Elemente können einen Z-Indexwert haben. Einen Z-Index zu setzen ist ziemlich magisch. Aber Sie müssen die Verantwortung des Tiefenmanagements übernehmen , bei dem der Browser normalerweise wirklich gut funktioniert. Wenn Sie Z-Indizierung verwenden, verwenden Sie Ganzzahlwerte nur 1, 2, 5, 10 usw. Sie verwenden keine Pixel oder andere Messwerte. Eine sehr wichtige Sache zu beachten ist, dass, wenn Sie den Z-Index verwenden, die meiste Zeit eine Elementhöhe durch die Höhe des übergeordneten Elements begrenzt wird. Also, wenn es zwei absolute Elemente und sie überlappen und es gab ein Kind absolute Element in der unteren dieser beiden Elemente, die maximale Höhe wird die seiner Position Eltern sein, obwohl Sie sagte, eine verrückte hohe Z-Indexwert . Der Z-Indexwert bestimmt seine Tiefe im Bereich des übergeordneten Positionsfelds, nicht das gesamte Dokument, es sei denn, es ist übergeordnetes Dokument das Dokumentfenster. Dies gilt sogar für feste Elemente, auf die wir als nächstes gelangen. 14. Feste Positionierung: Ein festes Element ist genau das gleiche wie ein absolutes Element. Abgesehen davon, dass wir es positionieren, wird es immer relativ zum Browserfenster sein. Dies ist ziemlich mächtig, und es wird oft mit Dingen wie festen Navigationsleisten, Menüs und Popups verwendet. Ok. Also haben wir wieder unsere Boxen. Fantastisch. Was ich Ihnen jetzt zeigen werde ist, wie man mit fester Positionierung und absoluter Positionierung arbeitet. Es gibt Tonnen von Beispielen, die wir durchmachen könnten. Aber ich denke, eine, die wirklich gut funktioniert, ist Ihnen zu zeigen, wie Sie ein Popup erstellen. Also lasst uns unser HTML machen. Lassen Sie uns für ein div für die Klasse des Popups gehen, und innerhalb des Popups wir ein div für die Klasse der Decke haben, und unsere Decke wird dieses Rechteck sein, das die gesamte Breite und Höhe des Fensters umfasst. Es wird schwarz und halbtransparent sein. Wir haben dann unser Content-Div bekommen, und in diesem Content-Div können wir vielleicht einige Inhalte haben und dann wollen wir auch einen geschlossenen Button. Also lasst uns für eine Knopfklasse von Kleidung gehen. Ich werde einen geschlossenen Text da reinbringen. Fantastisch. Nun, lassen Sie uns unser CSS machen. Das erste, was ich tun möchte, ist für mein Popup zu gehen. Ich möchte dies in die Position der festen ändern und dann lassen Sie uns unsere Spitze auf Null setzen und lassen Sie uns unseren Boden auf Null setzen. Links, hey Elizabeth, auch auf Null, und unser Recht auf Null. Fantastisch. Das ist alles, was wir wirklich für das Popup tun müssen. Dann haben wir unsere Decke in das Popup bekommen. Alles in Ordnung. Dies wird ziemlich genau das gleiche wie unser Popup sein , außer es wird absolut sein. Lasst uns gehen. Ich bin tatsächlich buchstabieren, dass alles aus. Absolute. Fantastisch. Für diesen werde ich eine Hintergrundfarbe festlegen und wir werden RGBA verwenden, die rot, grün, blau, alpha-Kanal ist und 0, 0, 0 und 0,7 sagen . Dies ist also schwarz mit einer 0,7 Opazität, die fantastisch ist. Wir gehen dann zu sagen.popup.content. Nun, der Inhalt wird eine Position von Absoluten haben. Also könnten wir das kopieren, oder wir könnten einfach selbst etwas davon schreiben. Da haben wir pos absolut, und wir werden die Hintergrundfarbe auf weiß setzen. Das ist großartig. Lassen Sie uns dann eine Breite von 400 Pixeln und eine Höhe von 300 Pixeln festlegen. Fantastisch. Nun, ich möchte das in der Mitte meines Browserfensters bekommen. Wie mache ich das? Nun, wir könnten es mit Flex machen, aber in dieser Klasse geht es nicht um Flex. Also lassen Sie uns das als eine Möglichkeit ausschließen. Sieh dir das an. Ich werde sagen, oben, ich werde ihm einen Wert von 50% geben. Jetzt würde es auf halbem Weg nach unten beginnen. Es ist nicht wirklich in der Mitte. Aber wenn wir Rand oben setzen und wir gaben ihm einen negativen Wert, und weil wir die Höhe kennen, können wir negative 150 Pixel sagen, was die Hälfte der Höhe ist. Es bedeutet, dass es immer in der Mitte ist. Wir können jetzt dasselbe für unsere Linke tun. Setzen wir das auf 50%, und dann sagen wir Marge links minus 200 Pixel, weil wir die Breite kennen. Was wirklich cool ist daran ist, dass, wenn wir unser Popup ändern müssen, das nicht behoben ist, wir oben setzen können, sagen wir 100 Pixel. Sie werden sehen, dass unsere Popup-Inhalte in der Mitte bleiben. Selbst wenn wir dies auf 200 ändern, wird es immer in der Mitte sein, was richtig und erstaunlich ist. Also gehen wir hin. Wir haben etwas Inhalt. Wir haben unsere Decke. Lassen Sie uns nun die geschlossene Schaltfläche stylen. So decke.schließen. Ok. Das erste, was ich tun möchte, ist, dieses Standard-Styling abzuheben. Also werde ich sagen, Grenze keiner, und dann werde ich sagen, Hintergrundfarbe und wir können eine Farbe von hier oben stehlen. Da gehen wir. Anstatt Decke zu sagen, werde ich Popup sagen. Da gehen wir. Viel besser. Ich werde seine Farbe auf Weiß setzen und ihm etwas Polsterung geben. Sagen wir, 10 Pixel. Geben Sie ihm eine Schriftgröße von 30 Pixeln. Ok. Schriftgewicht- Lassen Sie uns für fett gehen. Lassen Sie uns die Schriftgröße auf 20 Pixel ändern. Fantastisch. Dann können wir sagen, Position absolut, und wir können oben sagen. Lassen Sie uns für minus 20 Pixel gehen. Also wird es etwas außerhalb des Inhalts von gesetzt, und dann können wir sagen, richtig. Es soll minus 30 Pixel oder so gehen, und da gehen wir. Wir haben einen Schließknopf. Vielleicht können wir Cursor, Zeiger sagen. Da gehen wir. Fantastisch. Vielleicht können wir unseren Inhalt auch einfach in eine Box-Größe ändern. Legen Sie eine Schachtel und wir können etwas Polsterung drinnen legen. Sagen wir, 20 Pixel. Voila, wir haben dieses perfekte kleine Popup. Nun, Sie würden wahrscheinlich keinen engen Text in Ihrer Schließen-Schaltfläche haben. Du hättest wahrscheinlich ein X oder so etwas. Aber zum Beispiel funktioniert das perfekt. 15. Die Calc-Funktion: Nachdem ein Schüler eine wirklich gute Frage gestellt hatte, dachte ich, es wäre eine gute Idee, dieses Video über die Calc-Funktion zur Klasse hinzuzufügen. Wir können die CSS calc Funktion verwenden, um den Browser Zahlen für uns faule Menschen zu berechnen. Zum Beispiel können wir Messwerte wirklich, ganz einfach berechnen. Was super cool an der calc-Funktion ist, dass wir verschiedene Arten von Werten wie Pixel und Prozentsätze in der gleichen Summe kombinieren können . Wir können die addieren, subtrahieren, dividieren und multiplizieren Operatoren verwenden sowie Klammern verwenden , um dem Browser mitzuteilen, welche Teile der Summe zuerst berechnet werden sollen. Es ist empfehlenswert, jeden Teil der Summe mit etwas Weißen Tempo zu umgeben. Sie also vor und nach jedem Operator ein Leerzeichen hinzu. Jetzt haben wir dieses Bild schon mal gesehen. Es ist alles Popup. Fantastisch. Aber jetzt werde ich Ihnen ein wenig über die calc-Funktion zeigen. Also, zum Beispiel, wir haben diese Breite, die 400 Pixel, lassen Sie uns die calc-Funktion verwenden, um einige Berechnungen durchzuführen. Also, wir können 200 Pixel plus 200 Pixel sagen, die 400 Pixel gleich wären, oder? Wir können sagen, dass etwas wie 600 Pixel minus 200 Pixel uns wieder 400 Pixel geben würde. Wir können dies in der ganzen Show ändern und der Browser berechnet es nur für uns. Fantastisch. Jetzt können wir auch Dinge wie prozentuale Basis tun, also plus sagen wir 20 Prozent, lassen Sie gehen für 300. Fantastisch. Dann, wenn wir das klein oder größer machen müssen, können Sie sehen, dass sich die Breite tatsächlich ändert, wirklich cool, richtig? Wir könnten hier auch ein paar mehr hinzufügen, also vielleicht wie minus sagen wir 150 Pixel. Okay, lassen Sie uns etwas wie 50 Prozent hinzufügen, wirklich cool. Wir können auch etwas tun wie 100 Pixel multipliziert mit vier, das wäre 400 Pixel oder zwei, das wäre 200 Pixel. Sie können sehen, wohin ich hingehe. Wir können auch Klammern machen, also können wir dort Klammer sagen, Klammer dort, so dass es mit zwei multipliziert wird, aber wenn wir zu plus fünf gehen, geht es zu 700 Pixel. Wenn wir diese Klammern nicht drin hätten, würden es 100 Pixel multipliziert mit zwei plus fünf, in dieser Reihenfolge. Also, wenn wir die Klammern in, dann macht es zuerst die Klammern, also macht es diese zuerst und dann berechnet es 100 Pixel multipliziert mit diesem Wert, der sieben sein würde. Okay, also haben wir ein bisschen herumgespielt, was großartig ist, aber jetzt, wie ist das eigentlich nützlich? Nun, also wollen wir für eine Breite von einem Prozentwert gehen. Also, sagen Sie etwas wie 80 Prozent und dann wollen Sie für eine Margin-links gehen, lassen Sie für minus 40 Prozent gehen. Das macht Sinn, versuchen wir jetzt nach oben. Also, gehen wir für einen Wert von 80 Prozent wieder und dann margin- top, lassen Sie uns für minus 40 Prozent gehen. Das funktioniert nicht, warum funktioniert es nicht? Nun, es funktioniert nicht, weil der Margin-top-Prozentwert es nicht auf der Höhe seines Elternteils funktioniert, es funktioniert es auf der Breite seines Elternteils, irgendwie verrückt. Also, wie beheben wir das? Nun, ich werde das nur so auskommentieren und dann werde ich die Calc-Funktion von hier benutzen. Also, Calc und ich sagen 50 Prozent minus 40 Prozent, und Sie sehen, dass das nicht ganz funktioniert, und das liegt daran, dass wir keinen zusätzlichen Abstand zwischen dem Minus und den 40 Prozent haben. Da gehen wir, das sollte alle Probleme lösen und jetzt haben wir calc verwendet und wir verwenden prozentuale Werte innerhalb unseres Popups. Das bedeutet, wenn wir das wachsen, wächst auch unser Popup. - Fantastisch. 16. Fixierte Positionierung: Was die stinkende Positionierung tut, ist es erlaubt, dass ein Element irgendwo bleiben kann, wenn es eine bestimmte Position erreicht. Es wechselt automatisch zwischen relativer und fester Positionierung für Sie und fügt zusätzlichen Platz hinzu, um herauszufinden wo es in den Dokumenten positioniert wurde. Aber die Sache ist, dass die klebrige Positionierung Sie fächert und es funktioniert nicht in allen Browsern, es kann ein Browser-Präfix oder etwas Javascript-Hilfe benötigen. Weitere Informationen darüber, welcher Browser es unterstützt und welche nicht, finden Sie auf caniuse.com. Verwendung von Sticky Positionierung ist eine wirklich schöne Technik um Ihre Websites subtil und schrittweise zu verbessern. heißt, wenn es nicht unterstützt wird, ist es nicht so auffällig, aber wenn es unterstützt wird, fügt es zur Erfahrung hinzu. Um die klebrige Positionierung zum Laufen zu bringen, müssen Sie eine Position festlegen, an der sich die Sticks befindet. Versuchen Sie einen oberen oder unteren Wert und denken Sie daran, dass Sie immer noch die Tiefe verwalten müssen. Okay, lasst uns etwas klebrige Positionierung machen. Wir haben alle unsere Kisten wieder hier. Es gibt eine Menge von ihnen. Was wir tun werden, ist wie ein Adress-Brickfield zu replizieren. Wenn Sie nach oben scrollen, dann klebt etwas an der Spitze. Ich werde in erster Linie mit Box zwei arbeiten. Also, was wir tun müssen, ist, dass wir ihm eine Position von klebrig geben müssen. Klebrig, fantastisch und dann brauchen wir eine Einrichtungsposition, an der es bleiben sollte. Also, wir werden sagen, oben. Lasst uns auf Null gehen. wir scrollen, werden Sie sehen, dass, hey, es klebt, wenn es auf Null Pixel von oben kommt. Was passiert hier? Sie werden sehen, dass dieser eine höhere Tiefe hat und so überquert er die Spitze und dann bedeckt es es. Wenn dieser über die Spitze geht, bedeckt er es, ziemlich cool. Also, was hier wirklich los ist. Lassen Sie uns dies auf 60 Pixel oben einstellen. Scrollen Sie erneut nach oben und lassen Sie uns scrollen. Jetzt ist es bei 60 Pixeln, großartig und dann-. Sehen Sie, was dort passiert wie es so ziemlich aufnimmt. Wirklich cool, nicht wahr? Was passiert, wenn wir die Deckkraft auf 0,5 setzen müssen und dann sehen können, was los ist. Also, Box 2a, geht hier, aber es bleibt dort, du siehst, es geht nicht zurück, weil es oben ist, es bewegt sich nicht. Es ist nur, dass Box 2b jetzt oben drauf ist. Ziemlich cool, stimmt's? Also, nehmen wir die Deckkraft weg. Dann werden Sie sehen, dass, hey, es funktioniert, dass es diese große Lücke über sie bleiben sollte, Browser ist ziemlich Intelligenz. Bevor diese Position klebrig herauskam, müssten Sie dies mit JavaScripts tun, es war ein wenig schwierig. Nun müssen Sie dies möglicherweise immer noch tun, wenn Sie ältere Browser ansprechen möchten. Also, das ist wirklich einfach zu tun, oder? Schauen wir uns den Boden an. Untere 60 Pixel, was passiert hier? Nun, der beste Weg, um herauszufinden, was hier passiert, ist, wenn wir den ganzen Weg nach unten gehen müssen und wir nach oben scrollen. Da es auf 60 Pixel von unten kommt, klebt es. Da 2e 60 Pixel von unten bekommt, klebt es. Aber die Sache ist, dass Box 2f eine höhere Tiefe hat als Box 2e und deshalb funktioniert es nicht wirklich so gut. Also, wir könnten hier tatsächlich ein manuelles Tiefenmanagement durchführen. Also, lassen Sie uns hier nach unten scrollen, Feld 2e. Lassen Sie uns hier einen Stil setzen. Wir könnten so etwas wie Z-Index machen; 2. Wie wär's damit? Das hat ihm nicht wirklich gefallen, oder? Okay, scrollen Sie den ganzen Weg nach unten. Ok. Daher ist Feld 2e über Feld 2f. Also, manchmal ist es wirklich gut, ein manuelles Tiefenmanagement zu tun , und das ist klebrige Positionierung. Es gibt viele andere Verwendungen dafür, aber das ist ein wirklich praktisches Beispiel. 17. Wie alles zusammenkommt: In den nächsten Videos werde ich Sie durch die Erstellung einer Website mit den verschiedenen Arten von Layout-Techniken, die wir in den vorherigen Videos gelernt haben. Sie können folgen und dann Ihre eigene Webseite erstellen, indem Sie das, was Sie in der Klasse gelernt haben. 18. Projekt: Das Setup: Um alles zusammenzubringen, was wir in den letzten paar Videos gelernt haben, werde ich Sie durch den Aufbau eines Beispiel-Sites nehmen. Es ist einfach, es ist mutig, es ist groß und es ist bunt. Es hat auch diese wirklich coolen kleinen Charaktere und es wird ein großartiges Beispiel dafür sein , wie man ein paar dieser Web-Layout-Techniken implementiert , die wir gelernt haben. Also, wo fängst du an? Nun, für mich werde ich von der Skizze beginnen, manchmal können Sie von Photoshop oder Illustrator starten, andere Design-App, manchmal alles, was Sie haben könnte, ist ein Scribbled auf einer Serviette, manchmal haben Sie einige Mockups, manchmal haben Sie einige Wireframes, manchmal starten Sie einfach direkt im Browser. Es liegt wirklich an dir und ob du eher ein Designer, ein Entwickler oder ein Einhorn bist, wie ich. So kann ich ganz einfach vom Design zur Entwicklung gehen, und ich kann oft viele meiner Entwürfe im Browser fertigstellen und den Browser als Design-Tool verwenden. Also, was haben wir hier? Nun, ich habe dieses Banner und in diesem Banner habe ich einige Informationen, ich habe einen Call-to-Action-Button, ich habe ein paar dieser Charaktere, die absolut positioniert werden können. Ich habe dann diese NAV-Leiste, die ein klebriger NAV ist, und Sie sehen tatsächlich, wie groß das ist, wenn ich nur auf 100% zoomen, es ist ziemlich groß. Nun, ja. Ok. Dann habe ich noch ein bisschen mehr Informationen. Ich habe einen „Anmelden“ -Button. Dann gehe ich zu einer Geschichte und Dingen, die die Bande wirklich wichtig findet. Ok. Dann bekam ein nettes kleines Gangbild am unteren Rand mit einer wirklich, wirklich einfachen Fußzeile. Das ist großartig. Wenn jemand klickt auf mich anmelden oder mich auf der rechten Seite hier anmelden, wird es dieses kleine Pop-up öffnen. Also, das ist wirklich einfach. Was ich in der Zwischenzeit getan habe, ist, dass ich alle Assets, die ich brauche, in einen Bild-Ordner exportiert habe. Ich habe Charakter eins, Charakter zwei, Zeichen drei und ich zitiere diesen Schließknopf. All das Extra auf dem Schließknopf, ich habe auch das Bandenbild, ich habe dieses Handbild, ich habe diese seltsame Datei, weiß nicht, was das ist und dann das Banden-Logo. Dies könnten alle SPGs sein, weil ihr Vektor innerhalb der Skizze, aber für diese Klasse gibt es alle nur Bilder, ich habe sie auf einer Netzhautanzeigeebene exportiert, so dass sie doppelt so groß sind wie sie innerhalb der Skizze sind. Nun öffnen wir unseren WWW-Ordner. können wir in erhabenem öffnen. Ich werde sublime verwenden, Sie könnten Code-Stift verwenden, Sie können den Code-Editor oder die IDE verwenden, die Sie mögen. Das erste, was ich tun werde, ist, ich werde eine neue Datei erstellen und ich werde diese speichern. Also Command S als index.html, und das bedeutet nur, dass der Browser nach dieser index.html Datei sucht, wenn er sie findet, öffnet er sie zuerst. Fantastisch. Und dann mit Emmetts habe ich eine ganze Klasse dazu. Sie können dieses Ausrufezeichen erweitern, indem Sie die Tabulatortaste oder das Steuerelement E drücken und all diesen schönen Code für Sie einfügen. Dann sage ich die Bande. Das nächste, was ich tun werde, ist, dass ich etwas CSS einfüge und ich werde style.CSS sagen. Fantastisch. Ich werde das retten. Ich werde dann eine neue Datei erstellen, gehen Sie zu einem speichern dies als style.CSS. Cool. Dann nur um zu überprüfen, dass alles funktioniert, möchte ich eine Hintergrundfarbe auf meinem Körper so BGC Tab setzen. Das ist wieder Emmett. Ich werde sagen, Yellow. Speichern Sie das. Gehen wir zurück zu einem Finder versuchen, einen Index für HTML in Chrome und es ist gelb. Ok. Das sind also gute Neuigkeiten. Gehen wir zurück zu Sublime Text. Lassen Sie uns unsere Datei style.CSS schließen. Das letzte, was wir tun müssen, um alles einzurichten und bereit für uns zu programmieren, ist, dass wir unser Projekt und unsere Codebasis in ein Repository übertragen müssen. Ich mag es, git und git hub zu verwenden und ich mag es, git hub desktop. Es bedeutet, dass ich wirklich nichts über git wissen muss, es bedeutet, dass ich eine App verwenden kann, um Dinge zu tun, anstatt das Terminal und lassen Sie uns das öffnen. Es ist cool, Github Desktop. Ok. Fantastisch. Nun, wenn wir zu unserem Finder gehen, haben wir als WWW. Aber wir ziehen einfach in Github Desktop. Sagt: „Dieses Verzeichnis scheint kein gutes Repository zu sein, möchten Sie stattdessen ein Repository hier erstellen?“ „Ja, bitte.“ Und wir können es nennen, die Bande. Und die Beschreibung, können wir sagen die Websites der Bande und dann können wir sagen, initialisieren Sie dieses Repository mit dem echten Ich. Und Sie können sagen, erstellen Sie Repository. Jetzt haben wir dieses Repository auf unserem lokalen Computer. Als nächstes veröffentlichen wir das Repository auf GitHub.com. Und das ist wirklich cool, weil es bedeutet, dass wenn unser Computer abstürzt, etwas Schlimmes passiert, wir haben unseren Code online in der Cloud, im Internet, auf GitHub.com. Das bedeutet auch, dass wir mit Github-Seiten unsere Webseiten unter einer Github-URL kostenlos veröffentlichen können . Es ist ziemlich cool. Ich versuche hier den gleichen Namen zu verwenden, ich werde meinen Code nicht privat halten und dann werde ich sagen, Repository veröffentlichen. Und das sendet es buchstäblich an das Internet. Fantastisch. Ich kann dann zu Google Chrome gehen, ich kann zu GitHub.com/mrra gehen, es ist mein Benutzername. Kann in Repositories gehen und Bande ist da. Jetzt ist index.html hier und unsere style.css ist hier. Fantastisch. 19. Projekt: Das HTML: Was wir in diesem Video tun werden, ist, dass wir die allgemeine Struktur unserer Website aufbauen. Ich beziehe mich oft auf Skizze, nur um all die verschiedenen Elemente zu sehen , die ich in mein HTML einfügen muss. Und dann werde ich es innerhalb des erhabenen Textes codieren. Also, was haben wir? Nun, wir haben so eine große Sache wie Held Banner-Typ. Wir haben diese Navigationsleiste. Wir haben noch mehr Informationen, kleiner Abschnitt hier. Wir haben diese kleinen Separatoren und dann haben wir den Story-Bereich. Jetzt das Trennzeichen, ein Bild und eine Fußzeile. Also fangen wir an, in HTML zu kommen. Okay, also in unserem Körper, vielleicht können wir hier sagen. Herobanner, so etwas. Das ist großartig. Gehen wir zur Skizze und wir können sehen, dass wir eine Navigationsleiste haben. Also können wir nav sagen, okay. Dann haben wir weitere Info-Abschnitte, so.moreinfo. Okay, was kommt als Nächstes? Wir haben ein Trennzeichen, also können Sie vielleicht sagen, .sep für Separator. Okay. Und dann haben wir unsere Geschichte Sektion so.story. Da gehen wir. Und unter unserer Geschichte haben wir noch einen Separator, so.sep. Und darunter haben wir ein Bild, also gehen wir IMG. Und hier können wir Bild sagen und dann können wir gang.PNG sagen. Okay, und dafür, sieh dir das an. Es ist 1426 von 796, aber wir wissen, dass das nicht wirklich der Fall ist. Also, wenn wir zurück zur Skizze gehen und nur einen Blick auf dieses Bild in 735 von 399 werfen. Also werde ich das kopieren und mich an 399 erinnern. Okay, mit der 735 und einem Alt können wir die Bande sagen. Und dann haben wir unsere Fußzeile. Fantastisch. Und dann haben wir auch unser Pop-up. Also lasst uns eine.popup machen und hier drinnen können wir sagen, Decken. Und das haben wir bereits in dieser Klasse gemacht, also sollte das nichts zu Neues sein. Wir haben dann Inhalte, und in unserem Inhalt können wir eine button.close haben. Alles in Ordnung. Jetzt können wir mit dem Füllen aller dazwischen befindlichen Teile beginnen. Gehen wir zurück. Okay, in unserem Heldenbanner haben wir ein, zwei, drei, vier Elemente und wir haben ein paar dieser Charaktere. Was hier passiert ist, ist, dass dieses Element etwa 960 Pixel breit ist, was eine Art Standardgröße ist. Ich will etwas Marging auf der linken Seite und einige Margings auf der rechten Seite. Ich wollte immer in der Mitte sein, aber ich möchte, dass der Text links ausgerichtet ist. Also 960 Breite ist die Breite, aber ich möchte, dass dies alles in einem Container ist. Und Sie werden weiter unten sehen, obwohl dies auch 960 Breite ist und so ist dies. So können wir tatsächlich eine Klasse dieser 960 Breite machen. Also in unserem Heldenbanner können wir etwas wie.wrapper sagen und dann können wir tun, was das sein würde. Dies ist eine lustige Größe von 20 Pixeln, so können wir vielleicht ein H3 oder ein H4 sagen und einfach kopieren, fügen Sie es ein. Tippen Sie auf kabum ist ein A-Tag, also gehe ich zu Control W, um es mit Emmett zu wickeln , und geben Sie dann meine URL ein. Okay. Und dann nach dem H4 haben wir das H1, das wir kopieren können. Also H1, Raum das. Und hier können wir das in einen Verstärker ändern. Okay. Jetzt können wir da drüben einen Zeilenumbruch machen. Setzen Sie hier einen Zeilenumbruch. Kann tatsächlich Schrägstriche dort setzen, wenn Sie möchten. Die dümmste fantastischste Bande der Welt. Das ist ein H1. Dann haben wir das, was vielleicht ein H2 sein könnte, oder es könnte nur ein P. sein Vielleicht können wir es sogar zu einem H3 machen. Setzen Sie einen Zeilenumbruch und konvertieren Sie dies in ein tatsächliches kaufmännisches Und-Zeichen. Du hast also H1, H3. Dann brauchen wir diesen CTA, also lasst uns einen Knopf suchen und ihn einen CTA nennen. Aber es gibt auch einen anderen CTA hier unten, welcher wird die Alternative sein? Nun, es gibt auch noch einen CTA in unserem Pop-up, ich will rein. Vielleicht kann dieser die Alternative sein. Also werde ich sagen, CTA und einfach sagen, Alt für Alternative. Und wir können sagen, lesen Sie mehr. Okay. Das sieht also ziemlich gut aus, denke ich. Und dann in dieses Heldenbanner, können wir diese Charaktere setzen. Also, unten hier, im Inneren des Helden Banner können wir sagen.character1, erweitern Sie das, wir kopieren und fügen es zweimal ein. Zeichen 2, Zeichen 3. Und das müssen keine Bilder sein, sie können nur divs sein. Wir können ihren Hintergrund einstellen, macht die Dinge einfach ein bisschen einfacher. Ich habe hier unten eine andere Methode mit diesem Bild verwendet , nur weil wir anders sein können. Ich werde auf Speichern drücken, gehen wir einfach zu Chrome hier und aktualisieren. Okay, fängt an, Gestalt anzunehmen. Ja, es sieht gut aus. Also, wenn wir zurück zu erhabenen Text innerhalb unseres nav wir - so haben wir das Logo und wir haben ein paar dieser Links auf der rechten Seite. Also gehen wir für eine.logo und vielleicht können wir einfach einen Hash dort vorerst setzen. Das könnte uns wieder an den Anfang der Seite führen. Hier können wir sagen, die Bande. Und dann mit CSS können wir tatsächlich Hintergrundbild darauf einrichten. Und dann, wenn wir das Logo aussortiert haben, müssen wir jetzt diese Links erstellen, die wir wirklich einfach nur mit etwas Floating tun könnten . Also müssen wir nicht wirklich eine Liste verwenden, aber ich verwende gerne eine Liste, wenn es um Navigationselemente geht. Also in einer ungeordneten Liste und innerhalb kann es Listenelemente geben und dann innerhalb kann es Links geben. Wir haben drei davon. Also mit Emmett machen wir das einfach. Ich werde nur Hashes hier für jetzt und dann haben wir die Geschichte und weitere Informationen anmelden. Lassen Sie uns anmelden und wir werden das vielleicht richtig schweben. Melde dich an, der Story Spot genau dort, wo wir gehen, und mehr Infos, und so richtig vor Ort. Also, das ist die Navigation, wir haben die Bande, wir haben eine URL da drin. Fantastisch. Dann unsere weiteren Informationen, ich werde das speichern, gehen Sie zurück zur Skizze. Wir haben eine Überschrift von 50 Pixeln, die so ziemlich wie nur H1 ist. Also drehen wir wirklich ein zwei H1s auf Seite, ich werde das zu einem H2 machen und sagen, dass wir unserem Fanclub beitreten. Also werde ich das einfach kopieren und einfügen. Okay. Und dann werde ich das alles kopieren und einfügen und das in ein P-Tag einfügen. Okay. Ich werde einfach den zusätzlichen Platz dort entfernen und eine Party machen. Wir wollen etwas anderes damit machen. Also, ja, es enthält den tatsächlichen vollen Stopp oder die Periode. Also lasst uns das einfach mit einer Klasse von Highlight umschließen. Ist das, wie Sie schreiben Highlight? Ich glaube schon. Und es wird Spannweite einer Klasse von Highlight sein. Okay, also haben wir unser H2, wir haben ein P, und dann unter dem P werden wir diesen CTA-Button haben. Also button.cta und der Inhalt der Schaltfläche wird mich anmelden. Lasst uns das erweitern. Okay, das sieht gut aus. Gehen wir nach Chrom. Auffrischung. Okay, melden Sie sich für die Geschichte mehr Informationen. Warum ist das nicht alles in ihren separaten Artikeln? Lass uns zurückgehen und nachsehen. Okay. Also haben wir tatsächlich drei als innerhalb eines Listenelements. Nicht gut. Also hier können wir einfach einen einfügen, den anderen einfügen. Okay, speichern wir das und gehen wieder tot zu Chrom, aktualisieren. Da gehen wir. Und das ist wirklich wichtig, denn das ist fast so, wie Ihr Browser es ohne CSS sieht. Und wenn Sie wirklich guten Sinn für Ihre Webseite machen können, wenn es kein CSS gibt, ist es im Allgemeinen eine gute Webseite. Also, hier ist es. Es sieht ziemlich gut aus, wir sehen einfach nicht unsere freundlichen Gesichter hier drüben. Aber das ist okay. Treten Sie unserem Club bei. Melde mich an. Nichts passiert mit diesen. Das ist großartig. Gehen wir zurück zur Skizze, um zu sehen, was wir als Nächstes tun können. Okay. Dann haben wir den Separator, was Sie schon getan haben. Und dann haben wir diesen Abschnitt. Schauen wir uns das an. Dies ist Größe 40. Vielleicht ist es ein H2 oder ein H3. Wir haben das zu einem H3 gemacht, denke ich. Also haben wir es zu einem H4 gemacht und das war Größe 20. Das ist Größe 40, okay und das ist Größe 50. Viele lustige Größen zu erinnern. Okay. Also in der Geschichte sagen wir, wir haben ein H3 hier und wir können es einfach kopieren und einfügen und einen weiteren Zeilenumbruch hier setzen. Okay. Danach können wir ein P-Tag haben, das großartig ist. Lassen Sie uns das alles kopieren und einfügen und ich werde nur dieses P-Tag schließen und dann ein anderes hier öffnen. Okay. Dann das letzte, schreibe einfach manuell aus. Diese Formen waren, da gehen wir, sehr traurig, also lasst uns das machen und einfach das P wieder schließen. Dann gehen wir. Also, wenn wir zurück zu Chrome und aktualisieren, das sieht ziemlich gut aus. Wir haben dann diese Liste von Dingen, die wir für wichtig halten. Wie wird das aussehen? Nun, das kann links schweben. Also, vielleicht können wir das hier drüben setzen und sagen, div.list von nb oder vielleicht kannst du einfach nb-list sagen. Fantastisch. Vielleicht können wir es von einem div zu einer ul ändern. Ja, machen wir das. Dann haben wir hier drin ein paar Listenelemente. Also, wir haben Rock and Roll, also gehe ich einfach Rock 'n Roll. Vielleicht gibt es dort einen Apostroph. Ich bin mir nicht sicher. Dann haben wir Lachen bekommen. Wir haben dann Square Offs. Ich werde nicht in der Lage sein, das zu buchstabieren, Circuitous Routes, Trigonometrie, Rad-Hüte, ich meine, Dumm zu sein. Da gehen wir. Dann wähle ich mit erhabenem einfach das aus. Ich gehe zur Auswahl, dann gehe ich in Zeilen oder Befehlshalt L, und dann drücke ich Befehl und linke O, tippe Alt LI ein und ende dann mit einem LI. Drücken Sie die Flucht. Da gehen wir. In der Skizze, wir haben dieses Lachen, was ziemlich speziell ist. Also, was werden wir hier tun? Nun, vielleicht können wir dieses Element besonders und dieses Element besonders machen. Also, hier können wir LI gehen, und es wird nichts hier drin sein, also werde ich sagen, und nicht brechen Raum und nicht-nbsp, non-breaking Raum. Also, das sind im Grunde HTML-Begriffe für den Raum, der nicht zusammengebrochen werden sollte. Dann haben wir dieses Gelächter, was wir vielleicht sagen können: „Klasse der besonderen für jetzt“ oder vielleicht ziehen. Wie wär's damit? Okay, das sieht ziemlich gut aus. Wie sollen wir ihnen sagen, welche Farben das sind? Also, gehen wir für eine Klasse von Blau, und lassen Sie uns einfach kopieren und einfügen. Rock 'n Roll, dieser hier. Das geschützte Leerzeichen ist grau. Gelächter, ich glaube, das war gelb. quadratischen Offs sind rot. Umlaufende Routen sind rosa. Trigonometrie ist, was ist das? Lachs. Dann blau und dann wieder gelb. Fantastisch. Also, lassen Sie uns das retten. Gehen wir zurück zur Skizze, dann gehen Sie zum Trennzeichen, dann haben wir in unserer Fußzeile wieder Made by Rich from Tap Kaboom. Ich gehe einfach an die Spitze und kopiere dieses A Tag, ich bin faul. Ziemlich gut, ziemlich süß. Ich denke, das ist alles, was wir aus HTML-Sicht brauchen. Gehen wir zurück zum Verbrechen. Lassen Sie uns hier auffrischen. Ja, das sieht toll aus. Was ist das für ein Ding? Ich weiß nicht, was das ist. Also, lasst uns mit der rechten Maustaste klicken, inspizieren. Da ist ein Knopf, in Ordnung. Es ist ein Knopf zu schließen. Cool, das ist großartig. Vielleicht können wir vorerst kurz da hineinlegen, damit wir wissen, was es ist. Dann innerhalb unseres Pop-Up, können wir tatsächlich einige Inhalte setzen. Also, das sind 50 Pixel. Es ist so ziemlich dasselbe wie dieser. Um unserem Club beizutreten war ein h2. Also, lasst uns unser h2 hier reinlegen. Füllen Sie Ihre Daten aus, und dort haben wir ein Formular. Also, gehen wir für Form, Aktion für jetzt, lassen Sie uns das einfach auslassen. Wir können ein Etikett haben. Das Etikett kann Ihr Vorname sein. Dann können wir unter der Beschriftung eine Eingabe, die Art des Textes und einen Platzhalter mit haben die Art des Textes , was sollte ein Platzhaltername sein? Vielleicht können wir einfach sagen, ehrfürchtiges Gesicht. Ja, das ist gut. Wir können ihm einen Wert von Shirley geben. Dies ist nur so, dass wir es wirklich einfach stylen können. Dann, als nächstes, so ziemlich kopieren und fügen Sie alle diese. Aber davor können wir vielleicht einfach das Label und die Eingabe in ein div so umwickeln. Also, es ist eigentlich ein Formularelement. Dann können wir diese nebeneinander schweben. Kopieren Sie das einfach und fügen Sie es ein. Also, dein Vorname, dein Nachname und es ist Kreisgesicht. Wir können einfach die Werte aus diesen Eingaben entfernen. Deine Lieblingsfarbe. Sie können dort einfügen. Dein Lieblingsessen. Kann dort kleben. Apfelkuchen, das ist einige meiner Lieblingsspeisen. Außerdem gibt es Apfelkuchen. Dieser ist rosa anstelle von genial Gesicht. Deine Lieblingsfarbe, Rosa. Dein Lieblingsessen, Apfelkuchen. Das sieht alles wirklich gut aus. Dann haben wir noch einen Knopf. Also, wir können sagen, button.cta und der Inhalt kann sein: Ich will In, und erweitern Sie das. Fantastisch. Jetzt gehe ich zu Google Chrome und aktualisiere. Da gehen wir. Das ist es. Dann können wir diese Fors tatsächlich entfernen. Sie sind in diesem Beispiel nicht wirklich notwendig. Okay, sparen Sie. Das letzte, was ich tun möchte, ist, wenn ich eine bestimmte Taste drücke, wenn ich gehe, um mehr zu lesen, ich möchte, dass es an verschiedene Stellen auf der Seite springt. Kann ich das mit einem Knopf tun? Nicht ganz sicher, also schauen wir es uns an. Wenn wir hier zu mehr Informationen gehen und wir geben diesem eine ID von mehr Informationen, und wir ändern dies zu href. Nicht sicher, ob Sie dies auf einen Knopf setzen können. Mehr Info, Auffrischung, nein. Also, lassen Sie uns dies von einer Schaltfläche zu einem A Refresher ändern. Klicken Sie auf Mehr lesen. Whoah! Wohin hat uns das gebracht? Ich hätte dort einen Hashtag setzen sollen. Aktualisieren, lesen Sie mehr. Da gehen wir. So springt es zum Teil „Mehr Info“. Das ist fantastisch. Also, ich werde nur nach Knopf suchen. Das ist okay, der Sign Me Up Teil, das ist großartig. Die Geschichte, wir können sagen, Geschichte, und dann können wir hier Id of Story sagen. Melden Sie sich an, das ist okay, und zeigen Sie ihnen dasselbe, Mehr Info. Also, wenn wir hier aktualisieren und das ist unser Menü, Sign Up wird uns einfach an die Spitze bringen. Es wird tatsächlich das Pop-up öffnen. Die Geschichte wird uns zu der Geschichte führen, die dieser Teil hier drüben ist. Dann werden uns weitere Informationen zu unserem Fanclub bringen. Fantastisch. Dann ist das letzte, was wir tun müssen, dass wir unseren Code verpflichten müssen. Also, gehen wir zu, gehen Sie auf den Desktop, nicht zu holen, okay. Dann haben wir diese index.html Datei geändert. Also, wir können einfach sagen, schrieb richtig geschrieben, schrieb HTML für Website. Begehren Sie sich zu meistern. Fantastisch. Wir werden sagen Push to Origin, um es an github.com zu senden, was immer eine gute Idee ist. Da gehen wir. Also, wir haben unser HTML eingerichtet. Jetzt müssen wir nur unsere Website stylen, was Spaß machen wird, es wird sein, wenn die Dinge ein bisschen knifflig werden. Also, das HTML gemacht, das ist super cool. 20. Projekt: Das Hero-Banner CSS: Jetzt können wir ein bisschen CSS machen. Beginnen wir mit unserem Heldenbanner ganz oben. Das erste, was ich tun muss, ist diese Schriftart zu bekommen. Also, welche Schriftart ist das? Es ist Open Sans. Also, in Google, gehen wir für Open Sans Google-Schriften. Lassen Sie uns darauf klicken, und dann lädt es für ein wenig. Eine Familie ausgewählt. Lassen Sie es uns anpassen. Es gibt einiges hier, einige regelmäßige ich will und extra mutig und mutig. Das ist großartig, lassen Sie es uns einbetten. Aber ich möchte es importieren, also lassen Sie uns für einen Import wie so gehen. Kopieren Sie das. Ich gehe zu Sublime Text und öffne dann meinen Stil, der CSS ist, und ich werde es einfach dort einfügen. Für meinen Körper Hintergrundfarbe von Gelb, kann ich das entfernen. Lass uns das retten. Gehen Sie zurück zu Chrome Refresher. Was müssen wir dann hier tun? Kopieren Sie das, fügen Sie ein. Fantastisch, wir sind im Geschäft. Nun, ein paar Dinge, die ich zuerst tun muss. Dieser Körper und HTML, ich werde nur eine Polsterung von Null Marge von Null setzen. Speichern Sie das, aktualisieren, cool. Das klappt wirklich gut, und dann gehen wir zurück zur Skizze. Ich habe sogar diesen großen, blauen Hintergrund und was ich hier beabsichtigte, ist es 100% Höhe des Browsers zu machen. Also, was ich gerne mache, ist, in meinem HTML, ich kopiere einfach das Helden-Banner und füge dann einige Kommentare ein, ich mag es einfügen, anstatt die ganze Zeit darauf verweisen zu müssen. Also, du kannst gehen.hero-banner und dann eine.wrapper bekommen, auf den ich später verweisen kann, dann habe ich ein h4, das ziemlich Standard ist, ich habe dann ein h1 bekommen. Dann habe ich einen mit cta. Also, ich kann gehen, a.cta und a.cta.alt. Wir können auch einige Tasten haben, die so sind. Also, Sie können sagen, button.cta, und wir können sagen button.cta.alt. Wir haben dann Charakter eins, zwei und drei, was großartig ist. Character1, Zeichen2, Zeichen3, und das ist aus Held Banner so ziemlich auf den Punkt gebracht. Wir müssen es jetzt stylen. Also, Heldenbanner, lasst uns für die Hintergrundfarbe gehen, welche Hintergrundfarbe ist das? Es ist dieser hier, also lasst uns das kopieren. Dann werden wir sagen, Höhe von 100vh, die die Höhe des Ansichtsfensters ist, und lassen Sie uns dies speichern. Lass uns sehen, wie das aussieht. Das sieht wirklich gut aus. Also, was kommt jetzt als Nächstes? Lass uns gehen und unseren Wrapper machen. Also, das hatte eine Breite von 960 Pixeln und wir können einen Rand von Null und Auto setzen, und dann für unser Heldenbanner können wir eine Polsterung für den Moment von Null oben und unten setzen , vielleicht wie 20 Pixel links und rechts. Fantastisch. Das sieht gut aus. Jetzt gehen wir für unser h4. Was ist das für ein h4? Fett und Größe von 20 und es ist weiß. Also, lasst uns Schriftgewichte gehen. Es ist wahrscheinlich schon fett und die Schriftgröße beträgt 20 Pixel. Dann, weil es im Heldenbanner ist, werde ich sagen, .hero-banner.h4 und ich werde es weiß machen. Schauen wir uns das an. Es ist nicht eine.h4, es ist nur ein h4. Da gehen wir. Dann lassen Sie uns das gleiche sagen.hero-banner h4 a, kann auch eine Farbe von weiß haben. Das sieht wirklich schön aus und dann lässt sich jetzt für unsere h1 gehen. Schriftgewichte können super fett sein, also lassen Sie uns vielleicht für 800 gehen und skizzieren, welche Größe das war, 50. Also, Schriftgröße 50 Pixel. Lass uns das retten. Schauen wir uns mal an. Bumm. Das sieht gut aus. Dann können wir das Gleiche dafür tun, außer es ist ein h1. Also, lasst uns es einfach in h1 ändern, Farbe weiß, aktualisieren. Ja, das sieht gut aus. Was ist dann der Rand von diesem Text zu diesem Text? Es sagt 14 Pixel und es sind 20 Pixel darunter. Also, was wir hier tun können, ist, dass wir sagen können, der Held h4, und h4 a, wir können das auf Marge setzen, Null. Dann die h1, können wir seinen Rand oben zwei setzen 14 Pixel links und rechts, Null, dann 20 Pixel am unteren Rand. Da gehen wir. Dann gehen wir zurück zur Skizze. Was ist das jetzt? Es sind 30 Pixel, und das ist die h3. Ist es das h3? Es ist die h3, wir haben hier keine h3s gemacht, also lasst uns für h3 gehen. Sagen Sie Schriftgewicht; fett, Schriftgröße; 30 Pixel. Dann das Gleiche hier. Wir färben es einfach weiß. Jetzt können wir auch die Marge auf Null setzen. Cool, fantastisch. Also, das ist die h1, nicht die h3. Hey, das sieht ziemlich gut aus. Jetzt werde ich mehr Knopf lesen. Es ist ein CTA. Schauen wir uns diesen Kerl an. Es ist also eine Schriftgröße von 30 Pixeln. Es ist fett, also Schriftgröße 30 Pixel, Schriftgewicht ist fett. Der normale hat eine Farbe von Weiß und einen Hintergrund von diesem schönen Blau. Also, lass es uns da reinlegen. Ich werde sagen, Anzeige und ich werde sagen, blockieren, oder vielleicht kann ich Inline-Block tatsächlich sagen, Inline-Block. Ich werde ihm auch eine Grenze geben. Dieser hat einen Rahmen von 10 Pixeln. Es hat eine Deckkraft von 15%. Also, wir werden sagen Grenze; 10 Pixel solid rgba, 0, 0, 0 und 0,15, was ziemlich subtil ist. Schauen wir uns einfach an, wie das aussieht. Cool, das sieht toll aus. Hier, mal sehen, wie viel Platz es hat. Etwa 20 Pixel oben und unten und 30 Pixel links und rechts. Also, lassen Sie es etwas Polsterung geben, also 20 Pixel und 30 Pixel. Mal sehen, wie das aussieht. Hey, das sieht gut aus, und dann können wir ihm ein paar abgerundete Ecken geben. Also, Grenze Radius, die nicht Grenze rechts. Der Grenzradius, was ist das für eine Skizze? Hier sind es 10 Pixel. Mal sehen, wie das aussieht. Ja, das ist ziemlich gut. Wir können Textdekoration sagen; keine. Also, es wird von der Unterstreichung befreit. Ja, das sieht gut aus. Was gibt es sonst noch an diesem Kerl zu tun? Wir müssen jetzt die Alternative machen. Also, lassen Sie uns für die Alternative gehen und jetzt nur einige der Standardstile außer Kraft setzen, die wir bereits geschrieben haben. Also, Hintergrundfarbe, gehen wir für dieses Gelb. Lassen Sie uns das kopieren, legen wir das da rein. Dann die Rahmenfarbe. Was ist die Rahmenfarbe? Ich denke, es ist dasselbe, tatsächlich könnte dieser schwarz sein, und dieser hier könnte blau sein. Ja, das ist der Fall. Also, diese Grenze, lasst uns das hier drüben ändern. Lasst uns diese Farbe so einstellen, dass sie hier drüben ist. Lass uns gehen, wenn rgb. RGB Null, 127, 255. Also, Null und 255, ich werde mich erinnern. Null und 255. Okay. Also, es ist wieder hierher gekommen. Aktualisieren. Interessant. Nun, die Grenze auf der Außenseite und Skizze funktioniert nicht wirklich mit der Grenze auf der Innenseite im Browser. Wie sollen wir das beheben? Vielleicht hast du es falsch verstanden. Vielleicht ist es keine Grenze, vielleicht ist es Umriss. Also, ich werde eine kurze Gliederung CSS-Suche machen, da ich Outline nicht so viel verwende. Lassen Sie uns für den Umriss über Indianer gehen und das ist, was ich tue, wenn ich stecken bin. Ich habe nur Google-Zeug. Umrisskörper, Umriss gestrichelt. Es sieht ziemlich ähnlich wie Grenze. Cool, lass es uns benutzen. Also, anstelle des Rahmens, lassen Sie sich für Umriss- und Umrissfarbe gehen. Okay, lassen Sie das retten. Gehen wir zurück zu Chrome. Ja. Das sieht ziemlich gut aus. Es hat einfach keine schönen abgerundeten Ecken. Für den Radius, jetzt möchte ich Umriss, Radius, wie mache ich das? Okay. Gibt es eine Möglichkeit, abgerundete Ecken zu bekommen? Was ist mit Box-Shadow? Da gehen wir. Lassen Sie uns das versuchen. Kastenschatten. Also, box-shadow x y und blau lassen Sie uns für zwei Pixel gehen, lassen Sie sich für rgba gehen, Lassen Sie uns diese hier kopieren, einfach überschreiben, dass für unsere alternative Schaltfläche, aktualisieren. Das sieht ziemlich gut aus und überprüfe diesen Knopf, ziemlich gut auch. Also, da gehen wir. Das ist, wie Sie ein bisschen googeln, ein bisschen Stiel überlaufen. Du musst nicht alles wissen. Nicht ohne alternative Taste müssen wir auch nur die Farbe ändern. Ziemlich sicher, dass es schwarz ist. Aber stellen wir sicher, dass eins , eins, eins, eins, eins, cool. Wir können es einfach dabei lassen, aber lassen Sie uns einfach alle da rein, um doppelt sicher zu sein. Ja, es fängt an, richtig gut zu sehen. Ich brauche etwas Marging zwischen dem Read More Button, nur nicht schwarz und nur aktualisieren und diese Überschrift. Also, in der Skizze, was ist das? 47, es ist wahrscheinlich ungefähr 37, also können wir es wie 35 oder so machen. Also, lasst uns für unser Helden-Banner gehen, h3 war es? Wir können den Rand unten auf 35 Pixel setzen. Lassen Sie uns hier erfrischen. Okay. Sieht wirklich schön aus. Fantastisch. Jetzt in meinem Helden werde ich ein bisschen Top-Polsterung setzen. Also, gehen wir zum Helden-Banner. Ich werde gehen für, sagen wir 50 Pixel oben und unten. Ich werde das auch in Box- Sizing, Border-Box ändern. Vielen Dank, erhabene oder das, ich will nur eine für jetzt, Box- Dimensionierung, Border-Box, aktualisieren. Ja. Das sieht ziemlich gut aus. Ja, das funktioniert. Fantastisch, gehen wir zurück. Lesen Sie mehr. Da gehen wir. Okay, also, es kommt gut mit. Jetzt müssen wir ein paar Zeichen hinzufügen. Lass uns das machen. Also, in der Skizze Charakter dieser Kerl. Nun, wer war er? Nun, schauen wir uns Bilder an und seinen Charakter eins. Also, Charakter eins ist der rosa Kerl und er hat eine Breite von 363 und 344 ist seine Höhe. Also, Zeichen eins, Breite und seine Höhe, ich habe es vergessen, 344, 344 Pixel. Charakter zwei ist der Hut-Typ. Also, gehen wir zum Hut Kerl und 309 von 371. Es waren 371 Pixel, richtig? Ich glaube schon. Dann ist Charakter drei 297 mal 286, wie wär's damit? Fantastisch. Dann können wir einfach sagen „Position absolut“, und wir können sagen, etwas wie oben und wir geben ihm einen Wert 10 Pixel und rechts, einen Wert von 10 Pixel und kann einfach kopieren und einfügen diese für jetzt. Dann hat dieser von der rechten Seite eine Drehung. Also, lassen Sie uns einfach die Drehung für jetzt abnehmen und Sie werden sehen, dass es 89 Pixel von der rechten Seite ist. Also, gehen wir für 89 Zeichen 309 und dieser Typ ist 277. Wir können diese Werte wahrscheinlich ändern. Dann von oben, dieser Typ ist 117, dieser Typ ist 213 und dann Charakter drei, dieser Typ von unten ist 74. Mal sehen, wie das aussieht, also aktualisieren. Hier ist nichts. Was ist los? Also, ich weiß nicht, was los ist, also werde ich inspizieren. Mal sehen, ob hier irgendwelche Charaktere sitzen. Sie sind hier, aber sie haben keine Hintergrundbilder. Ziemlich Rookie-Fehler. Also, bg lässt für URL gehen und hier können wir zu Bild und Charakter eins gehen. Wir können die Wiederholung auf, no-repeat und sagen, es wird bei Null Pixel x und Null Pixel y beginnen. Wir können sagen, Hintergrundgröße, wir tun das wieder, ich will nur Hintergrundgröße, weil sie 100 Prozent sind oder wir könnte so etwas wie Abdeckung sagen oder enthalten. Aber ich werde nur für 100 Prozent gehen. Wir können das kopieren, zu Zeichen 2 gehen, das in Zeichen 2 ändern und dann in Zeichen 3 ändern. Speichern Sie das, gehen Sie zurück zu Chrome und aktualisieren, und es gibt unsere Charaktere. Sie werden das sehen, wenn ich inspiziere und ich meinen Browser bewegen. Weil dieser Typ von unten ist, wird er sich ein wenig ändern, was vollkommen cool ist. Was ich nicht will, ist, ich will nicht, dass dieser Kerl vom Rand der Seite fährt. Also, um zurück zu erhabenen Text und gehen wir zu unserem Helden-Banner und wir können sagen Position relativ, dass alle diese absoluten Elemente wählen ein Helden-Banner als ihre Position Eltern. Dann können wir sagen „Überlauf: versteckt“. Aktualisieren Sie hier. Sieht ziemlich gut aus. Oder wir können hier tun, nur um sicherzustellen, dass der Read More Button nicht abgehackt wird, ist, dass wir eine Min-Höhe setzen können. Mein Helden-Banner. Also, lasst uns hier auffrischen. Da gehen wir. Das sieht ziemlich cool aus. Wenn wir die Größe ändern müssen, werden Sie sehen, dass alle diese Kerle mit uns zusammenziehen. Wir können Prozentsätze verwenden, also können wir vielleicht einen Prozentwert für dieses Zeichen verwenden. Also, von der rechten Seite gehen wir vielleicht 10 Prozent. Lassen Sie uns speichern und aktualisieren. Jetzt sehen Sie, dass er sich mit einer etwas anderen Geschwindigkeit bewegt, wenn wir anfangen unseren Browser zu ändern. Das ist total cool. Also, das sind unsere Charaktere, und jetzt müssen wir diesen Kerl einfach drehen. Also, schauen wir uns ihn an. Er hatte eine 15-Grad-Drehung, glaube ich. Also, lass uns gehen und das anziehen. Also, es ist Transformation und es dreht sich. Wir werden also 15 Grad drehen. Aktualisieren. Da gehen wir. Ich möchte diesen Spitzenwert ein wenig ändern, vielleicht lassen Sie uns diesen Spitzenwert auch auf 10 Prozent ändern. Aktualisieren. Da gehen wir. Nicht ganz wie das Design, aber hey, es sieht wirklich gut aus. Das ist also unser Heldenbanner, worum es in diesem Video ging. Das nächste Video werden wir auf die mehr Informationen Abschnitt zu tun, um unsere Fanclub Abschnitt beitreten, Es war wirklich gut. Wir haben gesehen, wie viel davon funktioniert hat. Im nächsten Video wird immer auf die Navigationsleiste und die lesen mehr Abschnitt. Bisher sieht es wirklich gut aus. Das letzte, was wir tun müssen, ist, dass wir uns dazu verpflichten müssen. Also, lasst uns gehen, um einen Desktop zu bekommen, stylen das CSS geändert und wir gehen Held Banner-Styling und verpflichten uns, um zu meistern, und dann zum Ursprung zu drücken. Warte, und da gehen wir. Es ist online. Wir können uns gerne unseren Computer abstürzen lassen. Also, auf jetzt Styling und lesen Sie mehr Styling im nächsten Video. 21. Projekt: Fixierte Navigation und der Abschnitt „Mehr erfahren“: Also, als nächstes ist die navbar und die beitreten unserem Fanclub oder mehr Info Bereich hier. Also, lasst uns zuerst die Navigationsleiste machen. Das erste, was ich tun möchte, ist, dass ich mein Logo überprüfen möchte. Ich weiß, dass es 600 mal 80 ist, ja. Das bedeutet wahrscheinlich, dass es 300 mal 40 ist. Es ist etwa 300 mal 40. Ok. Gehen wir zu Sublime Text und myindex.html. Ich habe meine Navigationsleiste hier drüben, wir können das kopieren und es einfach in ein paar Kommentaren hier drüben schreiben. Wir können diesen Helden-Banner HTML herausnehmen, und lassen Sie uns nav setzen und wie groß ist unser Nav? Gehen wir zurück zur Skizze. Es ist 100 hoch. Also, Höhe von 100 Pixel, fantastisch, und es hat eine Hintergrundfarbe von weiß, und es hat auch einen Schlagschatten oder einen Kastenschatten und erinnern sich an seine x, also nichts und y. was ist das? Also, 5J. Also, fünf Pixel und dann acht Pixel Unschärfe, und was ist dann die Farbe? Es ist schwarz und hat eine Deckkraft von 20 Prozent. So können wir zu unserer RGBA gehen, Null, Null, Null, Null und eine 0,2 Deckkraft. Fantastisch. Mal sehen, wie das aussieht. Gehen Sie einfach zu Google Chrome. Aktualisieren. Ja, das sah ziemlich gut aus. Sieht aus, als wäre ein leichter Schatten darüber. Das ist okay für jetzt, und dann machen wir ein Logo. Also, wir haben nav.logo, Sie können ein dort setzen, aber wenn wir es jemals von einem a geändert haben, wäre nur eine Klasse von Logo großartig, und wir können sagen, Display und ich werde sagen, Anzeigeblock, und ich werde die Breite zu setzen, ich Ich kann mich jetzt nicht mehr erinnern. Keiner. Ok. Das waren 300. Also, 300 und eine Höhe von 40 Pixel. Fantastisch. Sagen wir, Position absolut. Da gehen wir, und dann bekam es einen Spitzenwert von, und was wir tun konnten, ist, dass wir einfach den Spitzenwert auf 30 setzen könnten, oder wir könnten es einfach mitten in einer ganzen Zeit schaffen. Also, weil wir wissen, dass die Höhen 40 sind, können wir tatsächlich 50% sagen, und dann sagen wir Marge oben. Wir können dies einen negativen Wert von 20 Pixeln geben. Okay, das ist perfekt. Dann können wir auch eine linke von sagen 30 Pixel setzen. Wir könnten das auch als Null Pixel setzen und dann den Rand links von 30 Pixel setzen. Was auch immer du wirklich tun willst, also um das zu speichern und dann lass uns unser Bild hinzufügen. Also, bg ist auf die URL, es ist innerhalb des Bildes und es ist ein Logo. Poom, wir werden das Gleiche tun. Also, keine Wiederholung Null, Null. Dann sagen wir, die Hintergrundfarbe ist 100 Prozent. Es ist wirklich gut, Ihre Browser-Präfixe wie Webkit oder Mozilla zu setzen, was auch immer, wenn Sie auf ältere Browser zielen. Aber dafür, nicht wirklich mehr benötigt. Also haben wir eine Hintergrundgröße, die fantastisch aussieht. Mal sehen, wie das aussieht. Es gibt nichts. Es ist weg. Warum ist das? Es liegt daran, dass unser Navi überprüft, wo es ist. Es liegt daran, dass unser Navi keine Position oder einen Verwandten oder Absoluten hat. Also, wir werden es tatsächlich klebrig machen. Also, machen wir es klebrig, und dann schauen wir mal, was hier passiert. Die Bande. Ja, das sieht ziemlich gut aus. Lassen Sie uns das einfach untersuchen. Sieht nicht ganz in der Mitte aus, oder? Sieht aus, als wäre es ein bisschen Polsterung oder etwas, das hier vor sich geht, aber es sieht vorerst richtig aus. Ok. Das nächste, was ich tun möchte, ist, dass ich zu meiner Navs ungeordnete Liste gehen möchte, und hier können wir einfach die Polsterung auf 0 setzen, den Rand auf Null. Wir können auch zum nav uli gehen, und wir können hier die Marge auf Null setzen, die Polsterung auf Null. Mal sehen, was das tut. Ok. Viel besser, und dann können wir sagen, okay, das li in diesem Display u als Block, und lässt schweben u rechts. Ja. Das ist großartig. Fantastisch. Also, wir haben die Bande oben auf der Bande. Was machen wir dagegen? Nun, wir können einfach einen Überlauf von versteckten setzen, und sie können einen Texteinzug von minus 999 Pixeln oder so etwas machen , und es ist weg. Dann müssen wir diese Typen aussortieren, welche Schriftgröße ist das? Dreißig Pixel, und es ist Großbuchstaben. Ok. Gehen wir für das nav ul. Ich habe einen, also das A innerhalb des Listenelements, innerhalb der ungeordneten Liste, innerhalb der Navigationselemente, und wir können sagen, Anzeigeblock. Ja, das sollte gut sein. Also, wir können sagen, Höhe geht für 100 Prozent, und wir sagen, Box Größe ist Grenze Box, dann können wir sagen, Schriftgröße, 30 Pixel, und Text transformieren Großbuchstaben, Schriftgewicht fett, fantastisch. Lassen Sie uns auffrischen. Ok. Dann können wir auch sagen, Farbe #111111. Okay, und Textdekoration und speichern. Aktualisieren. Wir bekommen diese Kerle in der Mitte, sie haben eine Schriftgröße von 30 Pixeln, das Navi ist 100 Pixel hoch. Das bedeutet, dass 70 geteilt durch zwei, 35 Pixel oben und unten Polsterung oder Margining, ich bin hier zum Padding. Also, lassen Sie uns für Padding gehen, und 35 Pixel. Cool, und dann vielleicht nur 10 Pixel links und rechts. Save. So aktualisieren wir hier. Sieht nicht ganz richtig aus. Jemand inspiziert diesen Kerl, nicht Rede, inspiziert. Es geht ihm nicht so gut. Also, ich sage, Höhe ist 100 Prozent mit einer Polsterung von 35 und 10. Also, was passiert, wenn wir anfangen, dies zu verringern. Noch einmal. Also, 30 plus 30 plus 30. Keine Sorge, was das ist. Aber, hey, du hast, dass 30 Pixel jetzt aussieht. Fantastisch, erfrischend. Vielleicht ist es wegen der geringen Strichhöhe. Also, um dies in der Zeilenhöhe, Zeilenhöhe auf 30 Pixel zu ändern , und dann ändern wir dies. Dann können wir dies wahrscheinlich wieder auf 35 Pixel ändern. Ja. Also, lasst uns das machen. Ich habe gerade eine Linie Höhen. Dreißig Pixel und ändern Sie dies in 35 Pixel. Aktualisieren, fertig. Das sieht wirklich gut aus und dann, auf ul, können wir vielleicht etwas Margining auf der rechten Seite setzen. Also, lasst uns Null gehen, gehen wir 20 Pixel, Null Null, aktualisieren. Mehr Info. Die Geschichte. Melden Sie sich an. Mann, das ist nicht gut. Jetzt lasst uns meine Navigationsleiste dazu bringen, etwas zu kleben, also nav , nav, nav, los geht's. Setzen wir die Spitze auf Null. Speichern Sie das. Lassen Sie uns erfrischen und es klebt. Ja, sieh dir das an. Die Bande hat eine Navigationsleiste, die klebrig ist. Das ist echt cool. Ich mag es. Also, als Nächstes ist unsere weitere Info Sektion. Das ist ein bisschen ein Problem, ich werde es nur verstecken. Also, was machen wir hier? Nun, lassen Sie uns gehen und unsere weitere Info-Abteilung kopieren. Gehen wir zu unserem Stil hier. Wir können dies einfach ersetzen und gehen for.moreinfo. Ich glaube nicht, dass ich hier tatsächlich einen Wrapper reingesteckt habe. Ich zeige dir, warum der Wrapper so cool ist. Also, wir haben noch mehr Informationen, wir haben ein h2. Ich weiß nicht, ob wir etwas für die h2 tun müssen. Wir haben ein P-Tag. Ich kann eigentlich nur das P-Tag stylen. Dann haben wir einen Knopf. Was ein CTA ist, also sieht es nicht so aus, als müssten wir so viel tun. Okay, versuchen wir es. Also, wenn Sie stylen unsere Ps und unsere Ps sind 30. Sind sie 30? Ja. Also P, lasst uns für ein Schriftgewicht von fett gehen, lasst uns für eine lustige Größe von 30 Pixeln gehen und dann gehen wir hier runter und lassen Sie uns sehen, was die Zeilenhöhe ist, 41? Ich möchte sehen, ich stelle mir vor, zwischen jedem P-Tag ist, also fürs jetzt werde ich dies nur als 30 Pixel Null setzen. Wir können es etwas später ändern, wenn wir müssen. Dann verschiebe ich es etwas höher dahin, wo sich die anderen Standardtypografie befindet. Okay, damit wir das retten können. Schauen wir es uns an. Mal sehen, wie es aussieht. Ja, das sieht ziemlich gut aus. Treten Sie unserem Fanclub bei. Das sieht wirklich klein aus. Das sieht wirklich groß aus, ich bin mir nicht sicher, ob es so groß ist. Also, unser P ist Spaß Größe 30 Pixel und dann setzen wir dies als ein h2. Wir haben eigentlich kein h2 Styling noch so, lassen Sie uns etwas h2 Styling machen und das h2 Styling ist extra fett 50 also, es ist ziemlich das gleiche wie unser h1. Es ist einfach kein H1. Okay, gehen wir zurück zu Chrome, aktualisieren. Ja, das sieht ziemlich gut aus. Dann können wir jetzt einige Überschreibungen schreiben. Also, lasst uns wieder nach unten gehen. Mehr info.more-info h2. Oder vielleicht können wir sogar einfach gehen und sagen, mehr Info text-align: center. Lass uns das speichern, aktualisieren. Fast tat den Trick, es ist nur den ganzen Weg bis zum Rand des Bildschirms, fast. Also, ich möchte es mit einem Wrapper umwickeln, den wir bereits hier oben haben. Also, Sie haben diese Klasse von Wrapper, der den Inhalt und das Heldenbanner umschließt. Also, ich werde dasselbe in unserem mehr Info div.wrapper tun, cool, cool. Dann rücken Sie einfach unseren Code ein. Lass uns das retten. Einfach so, alles aufgeräumt, wirklich schön. Also, ich kann sehen, mehr Info, wow, es verbirgt die mehr Informationen. Wie können wir das umgehen? Eigentlich ist es eine wirklich gute Frage. Ich zeige Ihnen, wie in einer Sekunde. Aber im Moment sieht das aus, ja, es sieht wirklich, wirklich gut aus. Nur um diesen Wrapper ein wenig mehr zu erklären, werde ich nach Wrapper suchen. Wenn wir eine Hintergrundfarbe von Gelb darauf setzen müssen, können Sie das sehen, es ist in der Mitte. Das Gleiche wie dieser. Es ist auch in der Mitte. Cool. Also nehmen wir das einfach aus. Nun, das Problem, auf mehr Informationen zu klicken und den ganzen Weg nach unten zu springen, ist problematisch. Wie sollen wir das beheben? Nun, eine Sache, die wir versuchen könnten, ist, die mehr Info-ID von unserem Fanclub in etwas anderes zu ändern . Also, lasst uns das mal ausprobieren. Also, wir haben diese Idee von mehr Informationen, vielleicht, was wir tun können, ist, dass wir es auf das Navi setzen könnten. Lassen Sie uns das versuchen. Also, lasst uns hier aktualisieren, mehr Informationen. Da gehen wir. Das war ziemlich gut. Nun, wenn ich zur Geschichte gehe, oder wenn ich zu mehr Informationen gehe, funktioniert das nicht ganz. Also, anstatt es dort zu ändern, können wir vielleicht einfach ein hinterhältiges kleines Etwas hier drüben setzen. Vielleicht wie ein br mit einer ID von mehr Informationen, mal sehen, ob das funktioniert. Ok. Was passiert, wenn es nur ein div ist? Lassen Sie uns auffrischen, mehr Informationen. Da gehen wir, das funktioniert. Die Geschichte, weitere Infos melden Sie sich an. Cool, wird mehr lesen. Da gehen wir, sortiert. Also, wir haben unsere Navigationsleiste gemacht, wir haben unsere Lesen mehr Abschnitt gemacht und wir haben unseren Helden Bit gemacht. Was für dieses Video noch zu tun ist, ist nur zu verpflichten. Also, lasst uns gehen, um GitHub Desktop zu bekommen und wir haben index.html und style.css geändert. Wir können also sagen, dass wir „Nav Styling und mehr lesen“ getan haben. Dann können wir in der Beschreibung auch sagen: „Auch einige HTML-Änderungen vorgenommen. Boom. Commit to master, Push to Origin, sendet es ins Internet, fantastisch. Aber wir haben nur keine Sache gemacht. Was wir vergessen haben, ist, wenn du das skizzierst, hat eine Party diese tolle rosa Grenze Ding um sie herum. Wie machen wir das? Okay, also geh einfach zu erhabenem Text, erinnere dich an Stil, wir haben dieses kleine bisschen HTML hier, ich habe das Span-Klassen-Highlight, das großartig ist. Also, lassen Sie uns für Highlight gehen, sagen wir, Hintergrundfarbe, wir gehen zur Skizze, um zu sehen, welche Farbe das ist. Okay, das ist es. Lass es uns reinlegen, und dann sagen wir, Farbe und es ist eine Art rote Farbe. Ok. Fantastisch. Dann können wir sagen, ein Padding von, vielleicht ist es wie 10 Pixel. Mal sehen, wie das läuft. Dann eine Anzeige von Inline-Block. Lassen Sie uns hier auffrischen. Das sieht ziemlich gut aus. Eigentlich ziemlich nah. Lassen Sie uns rückgängig machen, vielleicht nicht so hoch, also können wir so etwas wie fünf Pixel, 10 Pixel gehen. Ok. Ja, das sieht ziemlich gut aus. Dann können wir nicht einmal eine Zeilenhöhe von machen, wie war die Zeilenhöhe hier? 50. Also, ich werde 50 Pixel machen. Ja, das sieht ziemlich gut aus. Ich denke. Es gibt immer noch einen seltsamen Abstand hier. Also, vielleicht ändern wir das in Inline. Mal sehen, was passiert. Ja, Inline funktioniert viel besser als Inline-Block. Fantastisch. Dann lassen Sie uns einfach unsere Margen 18 und 40. Das sieht nicht ganz richtig aus. Also lassen Sie uns mehr Info h2 Rand unten tun, lassen Sie uns für 18 Pixel gehen. Dann können wir auch tun, nein, vielleicht tun wir einfach das P, und sagen wir, Rand oben, und dann Rand unten kann 40 Pixel oder 35 Pixel sein. Schauen wir uns das an. Aktualisieren. Cool, das sieht wirklich gut aus. Dann kommen Sie unserem Fanclub nach oben, 50 Pixel? Nicht sicher, ob das der Fall ist, also lassen Sie uns das einfach überprüfen. Ok. Mehr Info, nicht so sehr, dass ich nicht denke. Nav ist hier, und dann geht es um weitere Informationen. Also, was wir hier tun können ist, dieser Kerl, wir können wahrscheinlich sagen, Marge und wir können sagen, 50 Pixel, Null. Okay, das sieht gut aus. Also, lassen Sie uns für weitere Informationen gehen p, ändern Sie das zu mehr Info h2 Rand oben 50 Pixel und dann kann der Rest Null sein. Ok. Schauen wir uns mal an. Ok. Also, das Highlight muss nur ziemlich fett sein und wir können das hier tun und wir können sagen, Schriftgewichte 800. Aktualisieren, fertig. Okay, jetzt können wir uns wieder verpflichten. Also, lasst uns einfach gehen und sagen: „Verschärft den Abschnitt „Lesen Sie mehr“. Commit und schieben Sie es dann erneut an den Ursprung. Fertig. Für echt, diesmal. 22. Projekt: Der Abschnitt „Geschichte“: Als nächstes, auf unserer Liste der Dinge, die zu tun ist, ist der Abschnitt Geschichte. Also lasst uns reingehen. Was ich zuerst tun werde, ist dieser Listenabschnitt. Es ist 470 Pixel breit, was großartig ist, und jeder von ihnen ist 70 Pixel hoch und sie haben 20 Pixel zwischen jedem. Die Schriftart, fett und 40 Pixel, 20 Pixel nach links und rechts, würde ich mir vorstellen. Okay, also überprüfen Sie einfach, dass 70 Pixel hoch und dann habe ich die 470 Pixel breit kopiert. Ok. Also, ich werde das einfach dort einfügen und ich werde gehen und den Separator in all dem Zeug holen, ich werde es hier drüben einfügen. Fantastisch. Wir können zuerst den Separator machen, schätze ich. Wir werden es vorerst dort lassen. Dann sagen wir unsere nb-Liste, okay, das hat eine Breite von 470 Pixeln. Okay, dann die NB-Liste li. Was ist das? Es hat also eine Höhe von 70 Pixel. Cool. Ich denke, es hat einen Grenzradius von 10 oder 4. Umrandungsradius von 10 Pixeln. Mal sehen. Ja, 10 Pixel und denken Sie daran, es hat eine Schriftgröße von 40. Also, Schriftgröße von 40 Pixel. Die meiste Zeit ist es weiß. Also, Farbe weiß. Und dann, was wir hier tun können, ist, unsere Schriftgewichte fett zu setzen. Ok. Wir können auch seinen Anzeigetyp einstellen, also Anzeigeblock. Fantastisch. Und dann wird es für jede Farbe verschiedene Hintergrundfarben geben. Also denke ich, es gibt so rot, bgc. Ich suche meine rote Farbe und dann gibt es Blau, Grau, Gelb, Rosa und Lachs. Okay, also gehen wir für Blau, gehen wir für Grau, gehen wir für Gelb und Rosa und Lachs. Okay, so rot, holen wir uns das, kopieren Sie die Farbe. Fantastisch, gehen wir blau, kopieren Sie die Farbe. Okay, der graue, er ist irgendwie seltsam. So hat es eine Deckkraft von 10%. Also, was wir hier tun können, ist rgba. Ich versuche, 0,0,0 zu verwenden und auf 0.1 zu setzen. Das sollte in Ordnung sein. Dann das Gelb, welche Farbe ist das? Füge das einfach ein, Pink. Gut. Und dann benutze ich Lachs. Ok. Alle von denen sind schwarz, nur gelb. Ok. So hat es eine Hintergrundfarbe von Gelb, dann hat es auch eine Textfarbe von Einsen. Ok. Fantastisch. Lassen Sie uns einen kurzen Blick darauf werfen, wie das aussieht, aktualisieren. Hey, das sieht ziemlich gut aus, muss ich sagen. Wir haben hier auch eine Polsterung von 20 Pixeln. Also, lassen Sie unshier eine Polsterung von 20 Pixelnsetzen hier eine Polsterung von 20 Pixeln und setzen Sie uns die Box-Größe auf Rahmenbox. Vielen Dank. Ok. Und aktualisieren, nichts hat sich geändert, weil wir keine Hintergrundfarbe darauf haben. Lassen Sie uns diese Hintergrundfarbe kopieren, bgc. Fantastisch. Refresh, das sieht gut aus. Und dann, was wir tun können, ist, dass wir unseren unteren Rand hier setzen können, Rand unten auf 20 Pixel. Fantastisch und dann vielleicht auf der Liste, kann die Polsterung um 20 Pixel herum mit Ausnahme des unteren und wir werden uns auf die letzte Kachel verlassen, um diese Illusion der zusätzlichen Polsterung am unteren Rand zu geben. Ja, das sieht gut aus. Und dann, was wir hier tun können, ist, dass wir einfach ein wenig Polsterung setzen können, also Polsterung von 20 Pixeln auf der linken Seite. Vielleicht können wir wie fünf Pixel oben und unten tun. Mal sehen, wie das aussieht. Es wurde zu Box-Dimensionierung, Box-Dimensionierung, Border-Box geändert. Ok. Lassen Sie uns das untersuchen und sehen, was los ist. Ok. Also, wir werden das ändern. Also, das war eigentlich fünf Pixel und vielleicht sind das 20 Pixel. Ja, das sieht gut aus. Sechs Pixel und 20 Pixel. Fantastisch, ja. Innerhalb des HTML jetzt können wir auch noch ein paar Wrapping machen. Also, lassen Sie uns das in einen Dot Wrapper geben und dies wird alles zentrieren. Ok. Boom! Und was wir dann mit unserer NB-Liste machen wollen, ist, dass wir sie schweben wollen. Also, schweben Sie links, speichern Sie das, aktualisieren Sie. Sieht ziemlich gut aus, oder? Und dann wollen wir ihm einen Rand geben, sagen wir, Null oben, 20 Pixel in den Rechten und 20 Pixel darunter, nichts links, aktualisieren. Das sieht toll aus. Nun, was ist mit dem hier links und unten? Was ist das links und unten? Es ist ein h3. Was ist unser Standard-Styling für ein h3? Oben oben, 30 Pixel. Nun, sind es 30 Pixel? , 40 Pixel. Was ist mit dem anderen h3? Ich glaube, das war nicht h3, oder? , Ok. Also, was wir hier tun können, ist, dass wir einfach einige Stile überschreiben können, wir werden die Schriftgröße auf 40 Pixel setzen nur für unsere nb-Liste. Na ja, sowieso nur für unsere Geschichte. Also, in Punktgeschichte, setzen wir ein h3 und wir wollen sagen, die Schriftgröße ist 30 Pixel, nein, die Schriftgröße ist 40 Pixel. Ja, da gehen wir. Das sieht ziemlich gut aus. Lass uns das schließen. Das sieht fantastisch aus. Fantastisch. Alles, was wir tun können, ist, dass wir die Trennzeichen machen können. Also, mal sehen, was diese sind, 10 Höhe, 470 Breite. Sieht aus wie etwa 60 oder 70 Rand oben, Rand unten. Also, 470 Breite und eine Höhe von 10 Pixel, Hintergrundfarbe, lassen Sie uns für diejenigen gehen. Okay, und dann setzen Sie einen Rand von, was war es, 60 Pixel oder 70 Pixel und dann Autos, die wir an Lynette senden können. Ok. Sieh dir das an. Und der andere unten hätte auch funktionieren sollen. Fantastisch. Ok. Nun, wir haben dieses Bild, also geben wir ihm eine Klausel, sagen wir, Gangbild, img. Das ist großartig. Speichern Sie das. Ok. Gang-Bild, können wir sagen Anzeige als Block und wir werden den Rand auf Null und Auto setzen. Speichern Sie das, aktualisieren, das ist jetzt in der Mitte. Okay, das läuft gut. Und dann sagen wir vielleicht Fußzeile. Was machen wir mit der Fußzeile? Wir sagen, Text ausrichten Mitte. Okay, vielleicht können wir auch in der Fußzeile einen Wrapper hinzufügen. Also, Dot Wrapper und das bedeutet nur, dass es zentriert ausgerichtet sein wird. Was ist da los? Schauen wir uns das an. Der Wrapper ist also nicht zentriert ausgerichtet. Das ist okay. Also, wenn wir nur speichern, text-align center. Mal sehen, ob das etwas ändert. Ja, tut es. In unserer Fußzeile, wie groß ist die Schriftgröße hier? Die Schriftgröße beträgt 20 Pixel, alle fett, sieht aber so aus, als gäbe es eine Deckkraft von 40 Prozent. Also, wir werden Farbe sagen, rgba. Gehen wir für Schwarz, und lassen Sie uns für 0,4, für 40 Prozent. Dann Schriftgröße, lassen Sie uns für 20 Pixel gehen, und dann, ziemlich viel Platz. Also, vielleicht 80 Pixel nach oben, 45 nach unten. Also, wir werden sagen, Rand, 85 Pixel, 0, und 45 Pixel nach unten. Speichern Sie das. Lassen Sie uns auffrischen. Ja, es ist aber nicht fett, also Font-Gewicht lassen Sie uns für eine kühne gehen. Ja, das sieht toll aus. Dann, vielleicht können wir auch sagen, Fußzeile a, und lassen Sie es die gleiche Farbe machen. Ziemlich süß. Das ist fast unsere Seite fertig. Wir müssen jetzt mit diesem Lachen arbeiten. Also, wie sollen wir das machen? Nun, ich denke, dass es als absolute Position funktionieren könnte. Es könnte auch als Transformation funktionieren. Obwohl transformiert und relativ, kommen sie nicht aus dem Dokumentfluss heraus. Also werde ich meine NB-Liste in Position relativ ändern. Was wir dann tun können, ist, wie heißt das? Ziehen. Also, wir haben eine special.nb-list li.dragging, und wir können dies auf absolute Position setzen, und wir sagen top, wir können 30 Pixel vorerst sagen. Sagen wir, lassen Sie uns auch von 30 Pixeln links gehen. Mal sehen, was hier passiert. Da gehen wir, und vielleicht können wir einfach, vorerst, ich sage einfach Null, Null, und geben ihm eine Breite von 100 Prozent. Fast. Also, sagen wir 20 Pixel, 20 Pixel, und dann rechts auch 20 Pixel. Ja, mal sehen, was das macht. Fast richtig. können wir das einfach rausnehmen, denke ich. Fantastisch. Jetzt, mit unserer Transformation, können wir sie ein wenig drehen. Also, drehen, wie viel ist das gedreht? Das ist eine gute Frage. Schauen wir es uns an, und es ist um sechs Grad gedreht. Also, sechs Grad, und es hat einen Schlagschatten, also Kastenschatten, und was haben wir hier? Nun, wir haben 2 und 14, und es ist bei 50 Prozent Deckkraft. Also, 0, 2, 14 Pixel und RGBA, 0, 0, 0, 0.3. Mal sehen, wie das aussieht. Sieht ziemlich gut aus. Also, jetzt von oben, können wir sagen, ich weiß nicht, 70 Pixel? Ja, das sieht ziemlich gut aus. Jetzt können wir einfach den Browser verwenden, um den Rest hier zu erledigen. Also, von links eins, zwei, drei, vier, fünf, von rechts, minus eins, zwei, drei, vier, fünf. Ja, das sieht gut aus. Also, links von 70, rechts von minus 30. Also, das haben wir in Gang. Jetzt müssen wir nur die Hand da reinbringen. Wie sollen wir das machen? Nun, wir könnten ein zusätzliches Element da hineinlegen oder wir könnten versuchen, die Off to Pseudo-Klasse zu verwenden. Lassen Sie uns das versuchen. Also, lassen Sie uns das so sagen, und lassen Sie uns nachgehen. Wir setzen den Inhalt auf nichts, und dann sagen wir, Anzeige; Block, und dann sagen wir Position; absolut, und dann geben wir ihm eine Breite, und wir geben ihm eine Höhe, und wir gehen, um zu skizzieren finden Sie heraus, was das sind; 54 von 50. Lassen Sie uns das versuchen. Vierundfünfzig Pixel, 60 Pixel. Fantastisch, und dann Hintergrund, lassen Sie uns für URL gehen, innerhalb von Bild und Hand. Wo ist Hand? Da gehen wir, dann können wir für 'no-repeat 0 0' gehen und dann auf die Hintergrundgröße, wieder, wird es 100 Prozent sein. Lassen Sie uns das speichern, und geben wir ihm einen Spitzenwert von Null, nur für den Moment. Nun, vielleicht können wir einfach den unteren Wert festlegen. Okay, und dann können wir sagen, links, gehen wir für 60 Prozent, und ziemlich nah, ziemlich nah. Also, schauen wir uns diesen Kerl nach der Pseudoklasse an. Hier ist es. Lassen Sie uns die Unterseite auf minus 30 Pixel ändern. Ja, das sieht ziemlich gut aus. Ja. Unten von minus 30 Pixel. Okey-Dokey. Also, wir haben Dinge, die wir auf der linken Seite und unter unserer Geschichte wichtig finden. Sieht das richtig aus? Es ist extra fett. Also, gehen wir zur NB-Liste, Geschichte. Los geht's. Also, Schriftgewicht 800. Speichern Sie das. Also, Lachen ist offensichtlich wichtiger als alles andere für diese Jungs vor allem. Wir haben ein bisschen Fließ- und Textumbruch vor sich, aber whoa, was passiert hier? Unser Navi soll oben sein. Also, gehen wir zurück zu unserem Navi. Geben wir ihm einen Z-Index von 1. Lasst uns sie auffrischen, und das hat es ausgeklügelt. Fantastisch. Das andere, was ich bemerkte, war, als ich auf den Anmelde-Button klickte, es hat diesen seltsamen blauen Rand drauf. Das ist komisch, das will ich nicht. Ich denke, es hat etwas mit Zugänglichkeit zu tun, aber im Moment mag ich es nicht, und auch gibt es keinen Cursor auf dieser Schaltfläche. Also, lasst uns das ändern. Also, auf den CTA, können wir einfach gehen, Grenze; keine, und wir sagen Cursor, und wir ändern dies in Zeiger. Also aktualisieren Sie das. Es gibt jetzt noch eine Grenze. Vielleicht ist es keine Grenze, vielleicht ist es ein Umriss. Wie wäre es mit einem Umriss; keiner? Aktualisieren. Ja. Da gehen wir, aber ich möchte auch eine Grenze von keiner sagen. Sieht aus, als wäre dort auch eine kleine Grenze. Aktualisieren. Da gehen wir. Fantastisch. Ich kann auch eine Hover-Klasse darauf oder eine aktive Klasse setzen. Also, lasst uns das machen. Aktiv. Wir werden nur die Deckkraft ändern, es ist wirklich einfach, auf etwas wie 0,7. Ja, das sieht gut aus. Fantastisch. Dies ist unsere Seite, die im Moment wirklich gut aussieht. Wir haben buchstäblich nur das Popup zu erledigen. Also, was ich jetzt tun werde, ist, ich werde nur das Popup für den Moment verstecken. Also, wie heißt unser Popup? Hier ist es, und wir können einfach so etwas sagen wie, dass Popup, und sagen Anzeige; keine. Fantastisch. Speichern Sie das. Aktualisieren. Los geht's. Dies ist unsere Website, die sichtbar ist. Im nächsten Video gehe ich und klicke auf Anmelden, und es wird mir mein Popup zeigen, oder ich klicke hier anmelden, und es wird mir mein Popup zeigen. Bevor wir das tun, lassen Sie uns unseren Code übergeben. Also, was wir hier getan haben, haben wir die Geschichte Abschnitt Fußzeile Styling gemacht. Auch etwas HTML hinzugefügt und ein paar andere Bits von CSS geändert. Also verpflichten wir uns, zu meistern, und wir drücken zum Ursprung, senden es an github.com. Fantastisch. Da gehen wir. Wir sehen uns im nächsten Video. 23. Projekt: Das Popup: Also, das einzige, was wir tun können, ist unser Popup. Ziemlich aufregend, oder? Also, lasst uns hineingehen. Innerhalb von Sublime Text möchte ich das erste, was ich tun möchte, nur auskommentieren, weil ich jetzt keine anzeigen möchte, aber ich möchte in einer Weile keines anzeigen. Also, was ist das und wie werden wir das tun? Also, das erste, was ich gerne tun würde, ist, eine Decke reinzulegen und diese Decke, mal sehen, sie hat eine 70 Prozent Deckkraft und sie ist schwarz. Also, wir gehen zu gehen.popup.blanket. Rechtschreibung hilft immer und wir setzen eine Hintergrundfarbe von rgba (0,0,0, .7). Das ist großartig. Wir setzen seine Positionen auf absolut und wir sagen, obere Null, untere Null, rechte Null und linke Null. Das sollte den Trick machen. Popup selbst kann repariert werden, also gehen wir poff und ja, ziemlich das Gleiche hier. Fantastisch. Wir haben den Inhalt, also wenn wir das einfach kopieren, und es wird hier drüben eingefügt. Dort haben wir den Inhalt, so.popup.content. Okay, was machen wir mit diesem Kerl? Nun, lassen Sie uns ihn überprüfen. Also, er ist 961 Pixel breit. Wahrscheinlich soll es 960 sein. Also, lassen Sie uns für die Breite von 960 Pixeln gehen. Ich werde eine Box-Größe von Border-Box setzen, fantastisch. Dann sieht es so aus, als hätte es etwa 40 Pixel und 30 Pixel oben mit Padding zu tun, also lassen Sie uns für das Auffüllen von 30 Pixeln und 40 Pixeln gehen. Wir werden sehen, wie das funktioniert. Wir haben dann diesen Kerl, der auch ein H3 ist, glaube ich, ein H2. H2, wie Join Our Fanclub. Also, wir haben das. Wir möchten unsere Hintergrundfarbe auf Weiß setzen. Ich werde sagen, Text ausrichten Mitte. Mal sehen, wie das aussieht. So erfrischen. Okay, es sieht ziemlich gut aus. Der Z-Index befindet sich unterhalb der Navigationsleiste. Ich will, dass es oben ist. Also, lassen Sie uns den Z-Index des Popups auf zwei ändern. Ziemlich einfach, erfrischen, da gehen wir. Immer noch irgendwie seltsam, oder? Also, der Inhalt, es hat keine Position von absolut. Also, lasst uns diese Position des absoluten ändern. Wir wissen, dass seine Breite 960 ist. Was ist die Hälfte von 960? Ich habe keine Ahnung, 480. Also, lassen Sie uns für ein Modul links von 480 Pixeln oder negativen 480 Pixeln gehen. Wir werden dann diesen linken Wert auf 50 Prozent setzen. Speichern wir das und überprüfen Sie es. Ja, fantastisch. Wie hoch sollte es dann sein? Nun, ich schätze, wir können es hier wirklich klären. Wir können sehen, dass diese ganze Sache etwa 540 Pixel ist. Also, lassen Sie es in Höhe von 540 Pixel ändern. Wieder setzen wir ihn auf den höchsten Wert auf 50 Prozent und 540 dividieren durch zwei ist 270. Also, wir gehen Rand oben negativ 270 Pixel. Schauen wir uns das an, fantastisch. Sieht vorerst ziemlich gut aus. Lassen Sie uns unsere Schließen-Schaltfläche anpassen. Das ist aufregend. Popup.Schließen. Hat es eine enge Klausel drin? Ich glaube, das tut es. Ja, okay. Schauen wir uns an und skizzieren, wie groß das ist, 80 mal 80. Lassen Sie uns also eine Breite von 80 Pixeln, eine Höhe von 80 Pixeln festlegen . Ich möchte eine Hintergrundfarbe von haben, da gehen wir. Dann wollen wir einen Hintergrund oder wir wollen, dass dies eine URL und Bild sein und schließen. Wir können diese Farbe hier drüben setzen. Wir können sagen, keine Wiederholungen. Ich kann sagen, Zentrum, fantastisch. Dann können wir wahrscheinlich seine Hintergrundgröße auf etwa 100 Prozent einstellen, aber es könnte 80 Prozent oder 70 Prozent sein, nicht ganz sicher im Moment. Wir werden es überprüfen und dann oben, wir werden auf minus 40 Pixel setzen und rechts, wir werden auf minus 40 Pixel setzen. Lass uns das retten. Da ist es, sagt Close. Wir wollen einen Grenzradius. Oh, Mann. Ich verstehe das nie richtig. Grenzradius von, sagen wir einfach 50 Prozent. Ja, das sieht ziemlich gut aus. Nehmen wir an, Grenze von keiner und skizzieren keine. Ja, das sieht toll aus. Vielleicht kann unsere Hintergrundgröße 50 Prozent betragen. Mal sehen, was dann passiert. Ja, 50 Prozent sehen gut aus. Wir können einen Kapazitätsüberlauf von versteckten setzen. Dann sagen wir Texteinzug minus 999 Pixel, und das wird unseren engen Text ins Nirgendwo einrücken. Da gehen wir. Wir haben keine Position von Absoluten festgelegt, und deshalb funktioniert der Spitzenwert nicht. Also, lasst uns Position absolut gehen, erfrischen, erstaunlich. Um jetzt, unser Cursor, lassen Sie uns für Cursor-Zeiger gehen, und da gehen wir. Nun, was wir tun müssen, ist, dass wir hier an diesen Elementen arbeiten müssen. Also, wir haben gerade diese Elemente, so können wir ein Popup das Element und innerhalb des Artikels haben, vielleicht können wir sie schweben. Also, wir können sie einfach nach links schweben. Ja, lassen Sie uns das versuchen, also schweben Sie links. Okay, wie groß wird die Breite sein? Gute Frage. Die Breite wird sein, sagen wir 415 Pixel. Ja, lassen Sie uns das versuchen, dann am Rand links, nun mal sehen, was ist der Rand links, 40 Pixel. Okay, mal sehen, wie das läuft. Was passiert? Wow, was ist hier los? Nicht wirklich, was ich will. Also, Popup-Element vielleicht, na ja, das ist eigentlich ein div, das Label und die Eingabe vielleicht nicht. Also, lassen Sie uns dieses Item.Label und Eingabe mit einer Art von Text ändern Item.Label und Eingabe mit . Ich werde sagen, Anzeigeblock auf beiden von ihnen. Mal sehen, ob sich das überhaupt etwas ändert. Nein, es ändert überhaupt nichts. Also, mal sehen, was hier passiert. Okay, so dass sie nicht zu gut schweben, der Knopf ist auch nicht wirklich genießen, es sieht so aus, als ob er in Linienelementen ist. Also müssen wir sagen, Anzeigeblock. Hey, er ist immer noch kühl. Ich schätze, alle werden auf der linken Seite schweben. Problematisch. Also, was können wir hier tun? Mal sehen, ob Veränderung, was, da wir gehen, das hilft sehr. Also, mit den 400 Pixel, funktioniert wirklich gut, für jetzt. Vielleicht können wir die Hintergrundfarbe auf Gelb setzen, um herauszufinden, was los ist. Okay, sieht so aus, als gäbe hier nur viel Platz auf der linken Seite. Was wir also tun können, ist unsere Indexdatei einzufügen, wir können diese beiden Zeilen direkt hier setzen. Und dann lasst es uns einfach hier einrücken. Okay, dann können wir tatsächlich die Elemente in den Zeilen schweben und dann werden die Zeilen einfach nacheinander beginnen. Okay, was wir hier haben, haben wir ein Pop-up. erscheinen in einer Reihe und das wird ein Anzeigeblock und seine Höhe, es wird 111 sein. Also, Höhe von vielleicht lassen Sie uns einfach ein 110 Pixel gehen. Okay, oder vielleicht brauchen wir nicht mal eine Höhe. Vielleicht kann es einfach wie eine klare Lösung sein, also vielleicht, was wir hier tun können, ist einfach zu gehen, zu einer Reihe zu springen und nachdem wir sagen können, Inhalt ist nichts. Wir können dann sagen, zeigen Tabelle und dann können wir klare Pfad sagen. Da gehen wir. Okay, jetzt haben wir diese Gegenstände in den Reihen schweben. Wir können dies zurück auf 415 Pixel ändern und dann können wir sagen, dass jedes Element, das auch ein erstes Kind ist, kein Modul mehr hat. Los geht's, und lasst uns das sehen. Da gehen wir, funktioniert ein bisschen besser. Dann habe ich mein Label als Block angezeigt, aber ich habe dort einen kleinen Klassennamen anstelle eines tatsächlichen Tag-Namens. Also lasst uns das speichern, aktualisieren. Viel besser. Und dann innerhalb jedes Artikels kann ich sagen, nimmt die Linie links, oder es dauert nur die letzte Zeile, nimmt die Linie links. Da gehen wir. Aktualisieren Erstaunlich. Die Dinge sehen viel besser aus. Und was ist die Schriftgröße hier? 20 Pixel und 30 Pixel. Also, lassen Sie uns für die Schriftgröße gehen, 20 Pixel und war es fett? Ja, mutig und mutig. Süß. Okay, die Schriftgröße beträgt also 20 Pixel und das Schriftgewicht ist fett. Und das gleiche für den Text, 30 Pixel und Schriftgewicht fett. Ja, das sieht wirklich gut aus. Es war ein bisschen ein Rand dort, also vielleicht etwas wie 10 Pixel, Rand unten 10 Pixel. Ja, super toll. Wir können jetzt wahrscheinlich dieses Gelb rausnehmen, also ja. Danke. Sieht jetzt ein bisschen besser aus. Okay, jetzt, wenn wir zurück zur Skizze gehen müssen, sind diese Dinger ziemlich große Grenzen. So 111 ist die Farbe und Dicke von 4. Also, lassen Sie uns für die Art von Text gehen. Gehen wir für eine Grenze, und es ist ein 4 Pixel solide und es ist 111. Okay, das sieht ziemlich gut aus, aber jetzt, wie hoch ist die Höhe? Die Höhe beträgt 70 Pixel. Also, lassen Sie uns für eine Höhe von 70 Pixel gehen, gehen wir für eine Box, die Größe für eine Box anpasst und dann aktualisieren. Sieht ziemlich gut aus. Etwas sieht nicht ganz richtig aus. Vielleicht sind es die Zeilen, der Inhalt, es gibt eine Polsterung von 30 oben und 40 auf der linken Seite. Diese sehen ein bisschen kurz aus. Also, vielleicht können wir diese Eingaben einstellen, die Ihre Breite 100 Prozent betragen sollte, und dann sind Sie Polsterung oder Ihre Margining Polsterung 15 oben und 20 links und rechts. Also, lasst uns zum Polstern gehen. Also, 15 und 20 Pixel und mal sehen, wie das aussieht. Hey, das sieht viel besser aus. Fantastisch. Und ich kann jetzt nirgendwo wirklich scrollen. Es ist ein bisschen Budget, aber wenn ich das schließe. Da gehen wir. Ich kann sehen, was los ist. Also, vielleicht möchte ich die Höhe ein wenig auf diesem Pop-up verringern. Also, gehen wir zum Pop-up-Inhalt hier, ändern Sie dies in 500. Dann werde ich meinen Rand oben auf 250 ändern, also aktualisieren Sie das einfach. Ja, das sieht ziemlich gut aus. Und dann mein Pop-up, ich werde mein H ändern, um zu sagen, der Rand ist 0 0 und vielleicht, wenn wir 20 Pixel unten gehen können, mal sehen, wie das aussieht. Vielleicht können wir 10 Pixel an der Spitze machen. Ja, das sieht ziemlich gut aus. Und dann will ich auch mein Pop-up. CTA. Ich möchte, dass etwas Rand oben geben, lassen Sie uns für 50 Pixel gehen. Vielleicht noch weniger, 40 Pixel. Super! Geben Sie Ihre Daten ein, ich will in Boom! Okay. Das ändert ein Haufen Zeug. Also, was wir jetzt tun können, ist, dass wir tatsächlich anfangen können, ein bisschen JavaScript zu machen. Denken Sie daran, dass dies keine JavaScript-Klasse ist, also werde ich ein schnelles und schmutziges JavaScript machen, aber mit mir tragen. Alles, was ich hier tun muss, ist in unserem Index, alles, was das Pop-up öffnet oder schließt, muss eine Art von Funktion haben. Okay, also gehen wir und suchen nach allem, was einen Hash hat. Da gehen wir, Logo, das ist okay, melden Sie sich an. Also hier, was wir tun können, ist, dass wir vielleicht etwas wie JavaScript sagen können. Logo. Ja, das ist okay. Melden Sie sich an. Los geht's. Also, hier können wir vielleicht etwas wie JavaScript sagen, und wir können einfach nichts einfügen. Ich glaube, das funktioniert. Hey, vielleicht ist es einfach so JavaScript. So wie das? Ich weiß es nicht. Dann können wir sagen, onclick, und hier sagen wir, ShowPopup. Da gehen wir. Lassen Sie uns das alles nochmal kopieren. Suchen wir nach der Anmeldung. Okay. Da gehen wir. Onclick, ShowPopup. Okay. Ich denke, das braucht ein paar umgekehrte Kommas. Okay. Es gibt also nur zwei Anmelde-Buttons. Okay. Nun, was wir tun werden, ist eine neue JavaScript-Datei zu erstellen. Also, New File, speichern wir es als script.js. Okay. In unserer index.html, was wir tun werden, ist, dass wir das Skript unten hinzufügen. Also, Skript und Quelle ist script.js, und sagen Typ. Ich denke, es ist ein Text JavaScript. Da gehen wir. Script, wir werden nur console.log sagen, hey da. Jetzt werden wir das nur tun, damit wir wissen, dass das JavaScript funktioniert. Lassen Sie uns auffrischen. Ich werde nur meine Konsole freigeben. He da! Also, es funktioniert. Fantastisch. Was wir jetzt tun können, ist zurück zum Stil zu gehen. Wir gehen zu Popup, und wir werden dies wieder kommentieren. Wir werden dann eine Klasse zu unserem Popup hinzufügen, um popup.show zu sagen, und wir werden sagen, Anzeigeblock. Okay. Also, das ist ziemlich cool. Also, wenn wir hier aktualisieren, kein Popup. Also, was wir jetzt tun können, ist, innerhalb unserer index.html, unserem Popup, geben Sie ihm einfach eine ID von Popup, und so werden wir es in JavaScript mit einer ID referenzieren. Also, in unseren Skripten können wir tatsächlich Code schreiben, aber ich werde es zuerst im Browser tun. Also, ich werde sagen, document.getElementById, und dann werde ich sagen, bekommen Sie es durch Popup. Drücken Sie die Eingabetaste Da ist nichts. Also, lasst uns einfach auffrischen. Ich werde den Pfeil nach oben drücken, es wieder tun, und wir haben unser Popup. Also, ich werde etwas Code schreiben. Ich werde Var sagen. Vielleicht kann ich das etwas größer für dich machen. Var Popup ist gleich, und wenn ich das einfach kopieren könnte, okay. Also, das ist, was das Popup gleich ist. Ich werde dann Popup.ClassList.add sagen, und dann werde ich zeigen sagen. Genau so, hey, unsere Popups sind angekommen. Dann, was ich noch einmal sagen kann, kann ich sagen entfernen show, und das wird mein Popup entfernen. Ziemlich einfach, richtig? Also, lassen Sie uns das kopieren. Gehen wir zu unserem Drehbuch. Jetzt können wir ein Skript schreiben, das so etwas wie Show Popup sagt. Da gehen wir. So können wir sagen Funktion ShowPopup, und wir können dies schreiben. Davor können wir sagen, var popup gleich, und lassen Sie uns zurück zu Chrome, und lassen Sie uns den Pfeil nach oben hier drücken, nur um zu sehen, was wir das erste Mal schreiben. Da gehen wir. Kopieren wir das und fügen Sie es ein. Also, wir werden das entfernen. In diesem Fall werden wir es hinzufügen. Dann können wir das kopieren, und Sie können HidePopup sagen. Okay. Lassen Sie das speichern und dann onclick, wir können tatsächlich all das kopieren. Suchen Sie dann nach unserem Close-Button und machen Sie genau das Gleiche hier. Onclick, ShowPopup. Okay. Also, lassen Sie uns das schließen. Lassen Sie uns auffrischen. Lesen Sie mehr. Melde mich an! Da gehen wir. Unser Popup funktioniert. Lass uns das schließen. Das funktioniert nicht. Warum funktioniert das nicht? Gute Frage. Also, gehen wir zurück zu unserem Drehbuch. Es steht immer noch hinzufügen. Also, lassen Sie uns sagen, entfernen. Was dies tut, ist im Grunde, es fügt und entfernt genau dies wie ein Stück Code und CSS. Es nimmt die Show weg. Daher wird standardmäßig keine angezeigt. Wenn es eine Klasse von Show hinzufügt, geht es dann und sagt: „Hey, zeige dieses Element zur Anzeige des Blocks an.“ Okay. Aktualisieren. Melde mich an! Schließen. Immer noch nichts. Also, gibt es irgendwelche Fehler? Was ist hier los? Nun, lassen Sie uns einfach dieses Element untersuchen. Mal sehen. Das ist eigentlich das Richtige. Es steht immer noch ShowPopup. Also, gehen wir zurück zu hier, und sagen wir HidePopup. Blendet Popup aus. ShowPopup. Okay. Aktualisieren. Schließen. Melde mich an! Ich will rein! Fantastisch. Schließen. Melde mich an! Schließen. Huh! Melden Sie sich an. Schließen. Wirklich cool, richtig? Jetzt haben wir ein festes Element. Wir haben ein klebriges Element. Wir haben alle Arten von Web-lauten Sachen los in dieser Webseite. Wir haben unser Beispiel ziemlich fertiggestellt. Lass uns einfach ein letztes Commit machen. Wir können sagen: „Sie haben es gehört! Fertig! Meistens fertig.“ Also, es gibt immer noch eine Menge Dinge, die dazu führen, eine Website erstaunlich zu machen. Es gibt wahrscheinlich ein paar Dinge, die Sie so sagen : „Warum haben Sie das nicht getan?“ Nun, wir könnten tagelang hier sein, um die perfekte Website zu machen, aber ich hoffe, Sie haben dabei viel gelernt. Eine Sache, die ich tun möchte, ist einfach dieses Konsolenprotokoll herauszunehmen. Okay. Verpflichten Sie sich zu Monster. Drücken Sie auf GitHub. Boom! Fertig. 24. Teile es mit anderen.: Also, jetzt, da Sie eine Webseite oder Website erstellt haben , mit dem, was wir in der Klasse gelernt haben, warum nicht teilen? Laden Sie es entweder auf Ihre eigene Website hoch, verwenden Sie Surge- oder Github-Seiten. Die Verwendung der Versionskontrolle mit Github oder Bitbucket ist auch eine gute Idee. Sie erhalten nicht nur, um Versionen Ihres Projekts in verschiedenen Phasen zu halten, sondern es ist auch ein großartiges Backup-Tool. Also, jetzt, da Sie Ihre Website erstellt haben, ist es ein Meisterwerk, Sie möchten es teilen. Wenn Sie nicht für Ihre eigene Website und Hosting bezahlen möchten, wenn Sie es einfach in die Wildnis, in die Welt, und Sie haben Github und vielleicht Github Desktop verwendet, gibt es gute Nachrichten, Sie können es einfach kostenlos online veröffentlichen mit Github-Seiten. Also, was Sie tun, ist auf diesen Master-Zweig zu tippen und Sie sagen gh-Pages, erstellen Sie einen neuen Zweig, erstellen Sie diesen Zweig mit gh-Pages und dann können Sie zwischen Ihrem Master-Zweig und Ihrem gh-Pages Zweig wechseln und dann gehen Sie, boom , veröffentlichen Zweig, und es geht zu Origin, fantastisch, und Sie gehen zu Google Chrome und in einem neuen Tab, können Sie Ihren Benutzernamen, Ihren Github-Benutzernamen verwenden, so mrra.github.io/the-gang und da ist es. Es ist online für die ganze Welt zu sehen. Hübscher Mörder, ziemlich süß und, haha, unser Pop-Up funktioniert. Yay, yay für Github-Seiten. Eine der einfachsten Möglichkeiten, Ihre Websites online zu bekommen, besonders wenn Sie Github nicht verwendet haben, ist die Verwendung von Surge. Ich werde dir nicht alles darüber erzählen. Es ist ziemlich erstaunlich. Also, was ich gerne tun würde, ist, dass ich gerne eine neue Datei erstellen möchte. Ich werde es als etwas wie http speichern und dann werde ich the-gang.surge.sh sagen. Ich werde dies als CNAME speichern und Sie werden sehen, warum in nur einer Sekunde. Ich gehe zurück zum Finder, ziehe meinen www-Ordner in das Terminal und dann gehe ich einfach auf Suche und einfach so drücke ich, okay. Wenn Sie sich noch nicht angemeldet haben, führen Sie eine Reihe von Schritten durch, schauen Sie sich search.sh an und dann geht es, baam. Das Projekt wird veröffentlicht und läuft auf the-gang.surge.sh und wir können hier rüber gehen und boom, es ist online. Die-gang.surge.sh, super, super einfach. Also, ja. Schauen Sie sich surge.sh an. 25. Ende: Ok. Ich hatte Spaß, diese HTML- und CSS-Layout-Klasse zu unterrichten. Ich hoffe, Sie haben viel gelernt und haben Spaß gemacht. Sie sollten jetzt besser in der Lage sein, die Welt zu übernehmen und tolle Websites zu erstellen. Du kannst mehr von meinen Klassen sehen und dem Fanclub auf taptapkaboom.com beitreten. Also, tschüss vorerst, und wir sehen uns bald mit mehr Klassen. Wenn dir die Klasse gefallen hat, gib ihm einen Daumen hoch und schreibe eine schöne Rezension. Es bedeutet mir wirklich viel.