Erstelle deine erste Website mit HTML, CSS und JavaScript

1. Willkommen!: In diesem Kurs für absolute Anfänger werde ich Ihnen zeigen, wie Sie mit HTML, CSS und JavaScript beginnen, indem Sie diese einfache, schöne und responsive Produktseite, Website erstellen . Machen Sie sich keine Sorgen, wenn Sie keine Erfahrung mit Web-Entwicklung haben, denn wir werden absolut alles Schritt für Schritt durchgehen. Also beginnen wir mit der Installation des Texteditors, den wir verwenden, um unsere Website zu erstellen, die VS Code ist, den Sie hier links sehen. Und dann werden wir nur an HTML arbeiten. Wir werden diese Webseite erstellen, indem wir nur HTML verwenden. Und an diesem Punkt wird so etwas aussehen. Nicht sehr hübsch. Und dann werden wir zu CSS übergehen. Wir werden die Magie von CSS nutzen und diese Seite in so etwas verwandeln. Wir werden auch CSS verwenden, um es reaktionsschnell zu machen, so dass sich das Layout auf Mobilgeräten ändert. Diese Webseite sieht also gut aus für alle, die sich ansehen, unabhängig von ihrem Gerät. Sobald wir mit CSS fertig sind, werden wir zu JavaScript übergehen, und wir werden nur ein wenig JavaScript hinzufügen, um dieses Cookie-Bannernach etwa zwei Sekunden erscheinenzu lassen nach etwa zwei Sekunden erscheinen und es verschwinden zu lassen, wenn der Benutzer klickt auf dieser Schaltfläche „Schließen“. Und dann werden wir am Ende einige letzten Schliff hinzufügen, wie zum Beispiel das Hinzufügen einer zweiten Seite. Diese About Seite, die Sie hier sehen. 2. Installieren und Einrichten von VSCode: Beginnen wir mit der Installation des Texteditors, den wir verwenden, um diese Website zu erstellen, die Visual Studio Code oder VS-Code ist, wie es allgemein bekannt ist. Sie möchten also nur zu Google gehen und nach VS Code suchen. Und Sie möchten zu diesem Code dot Visual Studio.com-Website springen. Und Sie möchten dies für Ihre Plattform herunterladen und installieren. Okay, also ist es fertig, den Zip herunterzuladen. Also werde ich das nur auf einem Spott öffnen. Ich muss das nur in meinen Anwendungsordner ziehen. Oder wenn Sie unter Windows sind und Sie möglicherweise ein Installationsprogramm ausführen müssen. Nun, ich ziehe diesen Visual Studio-Code einfach in meinen Anwendungsordner. Ich sollte jetzt in der Lage sein, das zu starten. Also werde ich einfach zu Anwendungen gehen. Starten Sie Visual Studio Code, klicken Sie auf Öffnen und Sie sollten so etwas sehen. Jetzt mit VS Code können wir Erweiterungen installieren, die uns bei unserer Entwicklung helfen. Es gibt eine Erweiterung, die wir in diesem Video benötigen, das ist die Live Server-Erweiterung, die uns hilft, unsere Website im Browser zu starten und auch alle Änderungen, die wir an unserer Website in Echtzeit vornehmen, zu sehen. Sie wollen also nur auf diesen Erweiterungs-Button klicken oben auf der linken Seite hier. Oder wenn Sie das nicht sehen, können Sie zu View extensions gehen. Ich klicke einfach auf diesen Knopf. Und Sie möchten nach Live Server suchen. Hey, antworte dem Kommunisten obersten Punkt. Und Sie möchten nur auf diesen Install Button klicken. Und das ist jetzt installiert. Und wenn Sie aufgefordert werden, VS Code neu zu starten, dann schließen Sie einfach, die neu gestartet werden. 3. Seite Create und starten von: Okay, ich habe gelesen, dass es auf Sets installiert ist, also lassen Sie uns unsere erste HTML-Seite erstellen. Also werden wir irgendwo brauchen, um diese Website zu speichern. Also brauchen wir einen Ordner. Also werde ich einen Ordner auf meinem Desktop erstellen. Und Sie können einen Ordner überall erstellen, wo Sie wollen. Es muss nicht auf dem Desktop sein, oder ich werde es auf dem Desktop erstellen. Und ich werde es HTML, CSS, JavaScript, Bindestrich Grundlagen nennen . Und du brauchst diesen Namen nicht zu benutzen. Sie können einen beliebigen Namen verwenden. Und jetzt möchten wir diesen Ordner nur in VS-Code ziehen. Also werde ich nur VS-Code wieder hochholen und dann diesen Ordner hineinziehen. Und es ist jetzt offen falten Virus. Und dieses Haar ist, wo alle unsere Akten zu sehen sind. Lassen Sie uns also unsere erste HTML-Datei erstellen. Also wollen Sie hier nur mit der rechten Maustaste in diesen Bereich klicken. Übrigens, wenn Sie dieses Explorer-Panel nicht sehen und einfach zum View Explorer gehen und es sollte es für Sie anzeigen. Wir möchten mit der rechten Maustaste klicken und auf Neue Datei klicken. Und wir werden diese Datei index.html nennen. Und dieser Dateiname muss nicht mit Punkt-HTML enden , da dies dem Browser mitteilt, dass dies eine HTML-Datei ist. Und ich würde empfehlen, dass Sie den Namen index.html verwenden, weil, wenn Sie eine Website wie co dot Visual Studio.com Schrägstrich besuchen, dann die erste Webseite, nach der es suchen wird, index.html, okay, so können wir sehen, dass es bereits geöffnet ist diese Datei Gesamtstruktur index.html. Wir können es hier sehen. Wir können index.html in dieser Spitze sehen. Ich werde nur diesen Begrüßungs-Tab schließen. Unser VS-Code macht es wirklich einfach für uns, erste HTML-Seite Gerüst zu erstellen und alle grundlegenden Tags hinzuzufügen, die wir brauchen. Sie möchten also nur Doc eingeben und Sie sollten dieses Emmet Abkürzung Pop-up auf ADA sehen , ist eine Erweiterung, die in VS Code integriert ist, die uns hilft, HTML und CSS schneller zu schreiben. Nun, wenn du das kleine Popup siehst, drücke einfach die Eingabetaste. Es wird eine anfängliche HTML-Seite Anhänger Gerüst. Ich erkläre in einer Minute, was hier los ist. Aber für jetzt möchten wir nur speichern, indem Sie auf Datei Speichern gehen, oder Sie können die Tastenkombination verwenden, die Sie hier sehen. Also werde ich nur diese Tastenkombination verwenden, um dies zu speichern. Und nun lassen Sie uns diese Webseite mit der Live Server-Erweiterung starten , die wir zuvor installiert haben. Um dies zu tun, möchten Sie nur zur Befehlspalette Ansicht gehen. Oder Sie können diese Tastenkombination verwenden, die Sie hier sehen. Und dies wird die Befehlspalette starten, in der wir alle Befehle starten können , die uns in VS-Code zur Verfügung stehen, einschließlich aller Befehle von allen Erweiterungen, die wir installiert haben. Und du willst einfach nur nach dem Leben suchen. Und Sie können diese Option hier mit Live-Server öffnen sehen. Also werde ich nur darauf klicken und es ist jetzt unsere HTML-Seite im Browser geöffnet. Wir sehen nichts auf der Seite. Ich werde erklären, warum das in ein bisschen ist. 4. Was ist HTML?: Nun, vor allem, was ist HTML? Html steht für Hypertext Markup Language. Html ist keine Programmiersprache wie JavaScript, so dass wir keine Logik in HTML verwenden können, wie wenn diese Sache wahr ist, dann tun Sie dies, oder wenn diese andere Sache wahr ist, dann tun Sie das ist rein eine Präsentationssprache, die den Browser, welche Elemente auf der Seite angezeigt werden sollen. Und mit Elementen meine ich Dinge wie Überschriften, Absätze, Tabellen, Bilder, Listen, immer noch fliegen, dass HTML dem Browser auch nicht sagt, wie diese Elemente aussehen sollen. Das ist, was CSS fällt, zu dem wir später am Ende dieses HTML-Abschnitts des Videos bekommen werden, unsere Webseite wird ungefähr so aussehen. Und man kann sagen, es ist ziemlich hässlich. Alles, was HTML tut, ist, dem Browser mitzuteilen, welche Elemente auf der Seite sein sollten, wie diese Überschriften in diesem Absatz, auf diesem Bild. Aber es sagt dem Browser nicht, wie diese Elemente aussehen sollen. Es spuckt sie nur auf der Seite mit dem Standardstil des Browsers für diese Elemente aus. HTML besteht also aus Tags, und wir können bereits einige Tags auf der Seite hier sehen. Ich werde das nur ein bisschen kleiner machen. Und in der Tat, ich werde nur diese Sidebar verstecken. So gehen Sie einfach zu Ansicht Erscheinungsbild, klicken Sie auf Seitenleiste anzeigen, oder verwenden Sie die Tastenkombination. Dann wird es die Seitenleiste verstecken, so dass wir mehr Platz haben. Die meisten Tags bestehen also aus einem Pat eines öffnenden Tags und einem schließenden Tag wie diesem Titel-Tag, das wir hier sehen können. Das öffnende Tag besteht also nur aus einer linken Winkelhalterung, dann dem Namen des Tags als einer rechtwinkligen Klammer. Und dann besteht das schließende Tag aus linker Winkelhalterung und dann Schrägstrich, dann dem Namen des Tags und dann einer schließenden rechtwinkligen Klammer. Wir haben auch selbstschließende Tags, wie diesen Metatag, den Sie hier sehen können. Sie können sehen, dass dieses Tag kein schließendes Tag hat. Ich werde nur erklären, was diese Tags sind. Und nur um es ein bisschen klarer zu machen, was los ist, werde ich nur meinen Cursor nach diesem schließenden Körper-Tag hier platzieren. Klicken Sie mit der linken Maustaste und ziehen Sie bis zum Anfang dieses Kopf-Tags, drücken Sie die Tabulatortaste, um das einzurücken. Also sagt dieses HTML-Tag im Grunde nur dem Browser, dass dies eine HTML-Seite ist. Wir können das schließende Tag für diesen Zweifel sehen, Hey, auf diesem HTML-Tag muss das Root-Tag auf unserer Seite sein. Alle anderen Tags sollten in diesen beiden Tags enthalten sein. 5. Kopf (HTML): Dieses head-Tag dient zum Hinzufügen von Tags, die dem Browser Informationen über unsere Seite geben. Dieses Titel-Tag teilt dem Browser beispielsweise welcher Titel oben im Browser angezeigt werden soll. So können Sie innerhalb dieses Titel-Tag sehen, können wir das Word-Dokument sehen, und das ist, was wir hier in diesem Tab-Dokument sehen. Und wenn wir diesen Text in diesem Tag ändern, sagen wir orange, und wir speichern, können wir sehen, dass er im Browser zu orange wechselt. Tags, die sich jedoch innerhalb dieses head-Tags befinden und nicht auf der Seite angezeigt werden, geben sie nur den Browser-Informationen wie den Titel der Seite. Dieser Metatag hier, es sagt nur dem Browser, welchen Zeichensatz zu verwenden, und wir müssen uns nicht wirklich darum zu viel kümmern. Dieser andere Metatag sagt dem Browser im Grunde nur , wie er diese Seite im Browser rendert. Und wir müssen uns nicht zu sehr darum kümmern. Aber das sagt im Grunde nur dem Browser, die Breite unserer Seite auf die Breite des Gerätseinzustellen die Breite unserer Seite auf die Breite des Geräts und auch nicht auf die Seite zu vergrößern oder zu verkleinern. Stellen Sie einfach den anfänglichen Zoom oder den Anfangsmaßstab auf eins ein. Wir können hier auch andere Meta-Tags hinzufügen, z. B. ein Metatag, um eine Beschreibung unserer Webseite für Suchmaschinen bereitzustellen. Oder ein Metatag, um auch eine Liste von Schlüsselwörtern für Suchmaschinen bereitzustellen. 6. Body und Elemente (HTML): Nun, wenn wir ein Tag oder ein Element erstellen möchten, das tatsächlich auf der Seite erscheint, dann müssen wir es in die Body-Tags einfügen. Also alle Elemente, die wir tatsächlich auf der Seite sagen, werden in diese Body-Tags gehen. Also werde ich nur schnell einige der Tags abdecken, die wir nicht hören können. Die erste Art von Tags, auf die wir unsere Überschriften-Tags hinzufügen können, ist die wichtigste Überschrift das H1-Tag. Also, wenn wir nur eine linke Winkelhalterung hatten und dann eine und dann eine schließende rechtwinklige Klammer. Und Sie können sehen, dass es automatisch das schließende Tag hinzugefügt wurde, aber wenn es ein Audit hat, das dann einfach ausgibt. Also linke Winkelhalterung, Schrägstrich eins, rechtwinklige Klammer. Und so können wir einige Überschrift Text in diesem Tag spielen. Das ist also eine Überschrift. Speichern Sie das. Und wir können diese Überschrift auf der Seite sehen. Wir haben auch H2, H3, H4, H5 und H6. Also werde ich diese einfach auch hinzufügen. Und übrigens, eine Verknüpfung zum Hinzufügen von HTML-Tags besteht nur darin, den Namen des Tags wie H2 einzugeben. Und Sie sollten diese Abkürzung Sache Pop-up sehen und Sie können einfach Tab oder Enter auf dem oberen Virus drücken. Also werde ich einfach einen Text da reinlegen. Eine Menge von H3 und H4, H5 und H6. Speichern Sie das. Und wir können alle diese Überschriften auf der Seite sagen. Und Sie können sehen, dass der Text standardmäßig für jede Ebene der Überschrift kleiner wird. Wir haben auch ein Absatz-Tag zum Hinzufügen von Absätzen. Das ist also nur ein p-Tag, also tippen Sie einfach PE ein, drücken Sie Tab auf eine Menge, ein Absatz-Tag auf einer schnellen Möglichkeit, etwas Dummy-Text in VS Code hinzuzufügen , ist nur lorem einzugeben. Und Sie können sehen, dass ich eine Abkürzung bin. Ich werde einfach eine Reihe von Texten eingeben drücken. Also werde ich das retten. Angenommen, wir haben hier einen Absatz und wir haben auch ein paar verschiedene Listenelemente für die Anzeige von Listen. Also zuerst haben wir eine ungeordnete Liste. Und wenn Sie nur UL für ungeordnete Listen eingeben und die Eingabetaste drücken und darin ein LI-Element-Listenelement hinzufügen möchten und Sie können dort etwas Text einfügen. Ich füge einfach einen anderen Verbündeten in irgendeinem Text hinzu und dann einen anderen Verbündeten, speichern Sie das. Und Sie können eine Liste mit Aufzählungspunkten sehen. Hör auf. Wir haben auch eine bestellte Liste, die die Artikel beginnend bei einem nummeriert. Also werde ich hier nur eine neue Zeile hinzufügen und dieses UL-Element auswählen und es mit Befehl kopieren und sagen, oder könnte gesteuert werden und sagen, auf Ihrem Gerät und dann fügen Sie es hier unten. Ich werde nur dieses öffnende und schließende Tag auf OL anstelle von UL ändern und das speichern. Und Sie können sehen, diese Liste hat nummerierte Elemente. Diese Elemente sind alles, was als Block-Level-Elemente bekannt ist. Elemente auf Blockebene werden immer auf einer neuen Linie platziert. So können Sie sehen, dass alle diese Elemente auf einer neuen Linie platziert werden, dann nicht nebeneinander von links nach rechts platziert werden, sie werden nur nacheinander gestapelt. Das sind also Blockelemente, aber wir haben auch Inline-Elemente, die nicht auf einer neuen Zeile platziert werden, wie das starke Tag, das Text fett macht. Also, wenn ich dieses Wort hier in einigen starken Tags umgeben, , werde ich nur auf dieses Wort doppelklicken und es dann in die Mitte dieser Tags ziehen und speichern. Und wir können sehen, dass dieses Wort fett ist. Was diesen Text nicht in einer neuen Zeile platziert, da es sich um ein Inline-Tag oder ein Inline-Element handelt. Und wir haben auch das E M-Tag, das ein Inline-Element ist. Also, wenn ich dieses Wort einfach in diese AN-Tags ziehe und das speichere, sehen Sie, dass dies den Text kursiv Stil gibt. Es gibt auch eine Reihe von anderen Elementen, die wir verwenden können, wie Tabellen auf Eingaben auf Ich werde jetzt nicht in die Mall kommen. Nun, das sind einige der wichtigsten. 7. Semantische / Strukturelemente (HTML): Dies sind also einige der Elemente, die wir tatsächlich auf der Seite sehen. Aber wir haben auch semantische oder strukturelle Elemente, die wir nicht wirklich auf der Seite sehen, aber die verschiedenen Abschnitte unserer Seite geben. Das heißt, sie helfen auch Suchmaschinen, die Struktur unserer Seite zu verstehen. Also werde ich nur alle diese Tags löschen, die wir im body-Tag hinzugefügt haben. Also nur um einige dieser semantischen oder strukturellen Elemente zu demonstrieren, haben wir ein Header-Element, das ist, wo Sie Ihre Websites platzieren könnte ein, wir haben ein Fußzeilenelement, wo Sie das Foto platzieren könnten. Wir haben ein Abschnittelement, das Sie verwenden könnten, um einen Blog-Abschnitt zu umgeben. In diesem Abschnitt, talk, können Sie beispielsweise ein Artikel-Tag haben, in dem Sie jeden Blogartikel in einem dieser Artikel anzeigen würden . Wir haben auch genug Element, wo Sie einige Navigation hinzufügen können. Wir haben ein beiseite Element, wo Sie eine Sidebar platzieren könnten. Und wenn wir einen Abschnitt unserer Seite haben, der nicht wirklich in einen dieser semantischen Tags passt . Und wir können einfach ein div-Tag verwenden. Ich werde das nur retten. Und Sie können sehen, dass wir jetzt absolut nichts auf der Seite sehen weil diese Tags nichts zu der Seite hinzufügen. Sie erlauben uns nur, unsere Seite in einer logischen Weise zu strukturieren die uns als Entwickler hilft zu verstehen, was los ist, auf der Seite, und auch Suchmaschinen auf SEO, Suchmaschinenoptimierung sowie helfen . Es gibt auch eine Reihe von anderen Tags, für die wir verwenden können. Ich werde diese vorerst nur abdecken. 8. Header (HTML): Beginnen wir mit der Einstufung des HTML-Codes für unseren Header. Und wenn ich gerade auf die fertige Seite sprang, so werden wir nur eine wirklich einfache Kopfzeile mit einem tollen Hintergrund, ein Logo auf der linken und ein paar Navigationselemente auf der rechten Seite haben, die wir auf die beiden verschiedenen -Seiten. Es macht also Sinn, einen Header in ein Header-Element zu setzen. Also werde ich einfach zurück auf unsere Webseite springen. Ich werde alle diese Elemente löschen. Abgesehen von dem Header-Element. Ich werde nur meinen Cursor zwischen diesen beiden Tags hier platzieren. Und so werde ich alle unsere Header-Elemente hier platzieren. Und im Moment werden wir dieses Logo nicht hinzufügen. Wir werden nur ein H1-Tag hinzufügen, ein Überschrift-Tag mit dem Namen unserer Website darin. Es ist eine gute Idee, den Namen Ihrer Website oder Ihres Unternehmens innerhalb eines innerhalb der Kopfzeile zu haben , da Suchmaschinen davon ausgehen, dass dies Ihr Website-Name oder Firmenname ist. Also werden wir nur H1-Tag hinzufügen, indem wir H eins eingeben und Enter oder Tab drücken. Und wir werden nur den Namen unserer Website setzen. Und ich werde diese Website nur orange nennen. Und ich werde das retten. Und wir können jetzt diese Überschrift auf der Seite sehen. Jetzt werden wir diese Navigationselemente hinzufügen. In der Regel setzen wir Navigationselemente innerhalb eines nav -Tags. Also nach diesem H1-Tag werde ich eine neue Zeile hinzufügen und ein Navigationselement hinzufügen. Also geben wir genug ein, geben Sie eine neue Zeile ein und wir werden unsere Navigationselemente hier platzieren. Ich mache dies normalerweise innerhalb einer ungeordneten Liste. Also werde ich ein UL-Tag darin hinzufügen. Ich werde einige LI-Tags hinzufügen. Wir werden nur diese LI-Tags kopieren, sie auf der nächsten Folie einfügen. Also müssen wir, wir können Links zu unserer Seite hinzufügen, indem wir die a Tag oder Leukozyten verwenden. Also werde ich meinen Cursor in diese ersten LI-Tags setzen, einen Treffer eingeben und es wurde auf einen Archetyp-Virus hinzugefügt. Wir setzen den Text, den wir in diesem Link in diesen Architekten anzeigen möchten. Also werde ich einfach nach Hause in diese Tags stecken und „Speichern“ drücken. Und wir können dort einen Link sehen. Also werde ich nur dieses Anker-Tag kopieren, es in den zweiten Verbündeten einfügen, den Text in etwa ändern, weil dies ein Link zu unserer Über Seite sein wird , und ich werde das speichern. Und ich werde diese orangefarbenen Texte auch in einem Anker-Tag umschließen. Eine Möglichkeit, dass wir schnell einige Texte und ein Tag umgeben können, besteht darin, die Texte auszuwählen, die Befehlspalette zu starten, indem Sie Ansicht und Befehlspalette auswählen oder den Tastaturkurzbefehl in Umbruch verwenden. Und wir können diesen Wrap mit Abkürzungsbefehl verwenden, den ich auslösen werde , indem er eine Antwort trifft und dann den Namen des Tags eingibt, das wir umwickeln möchten, was ein Tag beim Drücken erneut ist. Und jetzt ist dieser Text in einen Archetyp eingewickelt. Viele Tags haben Attribute, und dies ist ein Attribut hier, dieses href Attribut. Die Struktur eines Attributs ist in der Regel der Name des Attributs und dann gleich und dann einige Sprachzeichen. Aber er legt in der Regel den Wert in diese Sprachzeichen. Und dieses href-Attribut teilt dem Browser mit, zu welchem Pfad dieser Link gehen soll. Und jetzt werde ich nur alle diese H Ref-Attribute setzen , um zum Wurzel unserer App zu gehen. Also zur Homepage auf der Wurzel unserer Website ist immer nach oben Schrägstrich. Also werde ich nur einen Schrägstrich in jedem von ihnen vorlegen und das speichern. Und wenn wir nun auf diese Links klicken, sie alle nehmen geht auf die Homepage. Und Sie können auch in der Adressleiste sehen, wir sehen hier nicht mehr Schrägstrich index.html. Da, wie ich bereits erwähnt habe, wenn Sie die Website aufrufen, ohne eine bestimmte Seite wie einen Schrägstrich über Punkt-HTMLanzugeben eine bestimmte Seite wie einen Schrägstrich über Punkt-HTML , wird es immer zuerst nach index.html suchen weshalb diese Seite in der -Browser. Okay, schließlich fügen wir einfach ein weiteres Tag nach unserem Header hinzu, das eine horizontale Linie über die Seite hinzufügt, nur um die Dinge ein wenig für uns aufzuteilen. Also nach diesem Header werde ich eine neue Zeile in einer anderen neuen Zeile hinzufügen. Und wir werden einen Hass R-Typ oder horizontale Regel hinzufügen. Ich werde Antwort auf Speichern Sie das. Wir können jetzt eine Zeile über die Seite sehen und ich werde diese HR verwenden, um die verschiedenen Abschnitte unserer Seite aufzuteilen , damit wir sehen können, was los ist, bevor wir anfangen, unsere Website mit CSS hübsch aussehen zu lassen, aber wir werden diese horizontalen Regeln später mit CSS verbergen. 9. Produkt (HTML): Okay, lassen Sie uns jetzt etwas HTML für unser Produkt hinzufügen. Also gehe ich einfach auf die fertige Seite. So haben wir hier eine Liste von Produkten. Daher ist es wahrscheinlich sinnvoll, alle diese Produkte innerhalb eines Bereichselements zu ziehen und dann jedes einzelne Produkt in ein Artikelelement zu gießen. Innerhalb dieser Artikelelemente können wir alle diese Elemente platzieren. Also werde ich wahrscheinlich Sinn machen, H1-Überschrift für diese Überschrift hier zu verwenden, H2-Überschrift für diese Preisüberschrift, und dann einen Absatz für diesen Text hier und dann ein Navigationselement für diese Navigationselemente hier mit einem UL-Element darin, mit einigen Verbündeten auf einigen Links, genau wie wir es für unsere Header-Navigation getan haben. Und dann brauchen wir ein Bildelement für dieses Bild. Also werde ich zurück auf die Seite springen. Danach, hey Char, wir werden ein Abschnittelement hinzufügen. Ich werde alle diese Produkte innerhalb des Abschnittelements platzieren, und ich werde jedes einzelne Produkt innerhalb des Artikelelements platzieren. So viel, dass, also für diesen Text hier, könnten wir wahrscheinlich H1-Überschrift verwenden. Also lassen Sie uns hier ein H1 hinzufügen und ich werde diese Texte einfach stoppen. Der neue Olmec. Erstaunlich. Wir hören auf und ich werde diesen Preis in H2 setzen. Also werde ich eine neue Zeile auf H2 hinzufügen. Wird von 20069 $9 ziehen, eine Menge neuer Zeile und fügen Sie einen Absatz-Tag für diese Texte. Nur um Lorem Ipsum hinzuzufügen, tippe ich einfach Lorem ein und drücke Enter, und ich werde das speichern. Mal sehen, wie das aussieht. Okay, das sieht gut aus, also lassen Sie uns unsere Navigationselemente hinzufügen. Also werde ich eigentlich nur dieses Navigationselement aus unserer Kopfzeile kopieren, fügen Sie es nach diesem Absatz ein. Und übrigens, wenn Sie die Einrückung für irgendetwas ändern müssen, können Sie einfach etwas HTML auswählen und Tab drücken, um es nach rechts einzurücken, Shift und Tab, um es zurück nach links zu schieben. Ich werde nur den Text in diesen Links zu ändern, um zu kaufen. Erfahren Sie mehr. Also, was dieses kleine rechtwinklige Klammersymbol, können wir nicht einfach in Licht eingeben, das, weil dies den Browser verwirren wird , weil unsere Tags aus linken und rechten eckigen Klammern bestehen. So können wir HTML-Entitäten verwenden, um Symbole wie diese auszuspucken, um dieses größer als Symbol, das wir starten können, und dann GT für größer als und dann ein Semikolon. Also werde ich das retten. Mal sehen, wie das aussieht. Ja, das sieht ziemlich gut aus. Und wir wollen wahrscheinlich nicht, dass diese Links auf unsere Homepage gehen. weiß noch nicht, wohin ich Links gehen werde. Sie sind nur vorübergehend, wir können einfach einen Hash in dieses H-Ref-Attribut einfügen, das wir sie einfach auf die Seite verlinken lassen, auf der sich der Benutzer gerade befindet. Also werde ich das einfach retten. Jetzt brauchen wir nur dieses Produktbild hier. Also, um ein Bild kostenlos zu bekommen, werde ich auf eine Website namens pixabay.com gehen. Ich will nicht nach iMac suchen. Blättern Sie nach unten. Das ist das Bild, das ich hier benutze, also werde ich darauf klicken. Klicken Sie auf Download, laden Sie es erneut herunter. Ich nehme dieses Feld und klicke auf Herunterladen. Und es hat unser Bild heruntergeladen. Also möchten wir das irgendwo zu dem Ordner hinzufügen, in dem sich unser Projekt befindet. Ich bin zurück zu VS Code. Zeigen Sie die Seitenleiste erneut an, indem Sie zu Ansicht gehen und die Eltern zeigen die Seitenleiste an. Oder Sie können die Tastenkombination verwenden. Und ich würde sehr empfehlen, dass Sie alleTastenkombinationen für Ihre Plattformkennen lernen Tastenkombinationen für Ihre Plattform weil Sie einfach so viel schneller arbeiten können. Nun, ich werde nur die Sidebar zeigen. Das ist unsere Mappe hier. Also werde ich eigentlich nur mit der rechten Maustaste klicken und einen neuen Ordner erstellen , indem ich dieses neue Ordnerelement auswähle, und ich werde dieses Ordner-Assets aufrufen. Ich werde alle unsere Assets, wie Bilder, CSS und JavaScript in diesem Ordner ablegen. Also werde ich mit der rechten Maustaste auf diesen Assets-Ordner klicken. Ich erstelle einen anderen Ordner. Und ich werde diesen Ordner IMG für Bild nennen. Wir werden unseren Ordner in Bilder Ordner zu platzieren. Also werde ich nur das Bild ziehen heruntergeladen und es in diesen Bild-Ordner ablegen. Standardmäßig macht VS-Code diese Art von ärgerlicher Sache, wo er Ihre Ordner zusammenfügt, was es mir schwierig macht, dieses Bild innerhalb des Bild-Ordners zu platzieren , befindet sich gerade im Asset-Ordner. Also, wenn wir auf die Einstellungsseite gehen, indem wir zu Einstellungen gehen oder die Tastenkombination verwenden. Und wir suchen nach Kompaktmappen oder kompakten Ordnern. Wir können diese kompakte Ordner-Option um Ihrer selbst willen sehen, dass dann wird es nun alle unsere Ordner auf untergeordneten Ordnern trennen, was viel besser ist. Also schließen wir das und es sieht so aus, als hätte es es in diesem Bild-Ordner platziert. Also, das ist okay. Also werde ich das schließen. Ich werde die Seitenleiste verstecken. Und lassen Sie uns dieses Bild nach diesem nav Element platzieren. Und wir tun dies mit dem Image-Tag oder IMG-Tag. Also werde ich IMG eingeben, drücken Sie Enter in diesem Quellattribut hier wir platzieren nur den Pfad zu dem Bild, das wir anzeigen möchten, keine. Wenn ich einfach die Seitenleiste wieder öffne, wird unser Bild im Pfadschrägstrich Assets Schrägstrich Bild sein. Und dann der Name der Datei auf Fuchs. Ich werde diese Datei hier umbenennen. Ich werde mit der rechten Maustaste darauf klicken und es in Olmec umbenennen, PNG bekommen, Enter drücken, und ich bin zurück zu diesem Bild-Tag und diesem Quellattribut. Wir können dies einfach festlegen, um Assets Slash IMG Slash oem, OK, Punkt PNG zu schrägen. Ich werde das speichern und sehen, dass das Bild auf der Seite im Moment ziemlich groß ist, aber wir werden in einer Sekunde dieses alle Attribut lösen. Wir können hier einen alternativen Text spielen, nur für den Fall, dass der Browser nicht in der Lage ist, das Bild zu laden sagen wir, das Bild wird gelöscht oder etwas, dann können wir etwas Text als Backup anzeigen. Also werde ich einfach o MAC und dieses Attribut eingeben, speichern Sie das. Also, wenn ich dieses Quellattribut in einen falschen Pfad ändere, indem ich dies in alle MUX-Punkt-PNG ändere. Wir können hier alternative Texte sagen. Anstelle des Bildes. Ich werde das einfach wieder auf den richtigen Weg ändern. Speichern Sie das. Und es ist normalerweise am besten, Dinge mit CSS zu stylen. Wir werden nur für den Moment, nur um zu verhindern, dass dieses Bild so lächerlich riesig ist, ich werde nur ein Width-Attribut zu diesem Bild hinzufügen, das es uns ermöglicht, eine Breite dafür anzugeben. Ich werde das auf 400 einstellen, was 400 Pixel bedeutet. Also werde ich das retten. Das sieht jetzt ein bisschen besser aus. Okay, das ist also das ganze Mock-up für unsere Produkte. Ich werde nur die einen Produkte auf dem Markt lassen, obwohl wir später noch ein paar weitere Produkte hinzufügen werden. 10. Footer (HTML): Also, jetzt müssen wir nur noch diese Fossa hinzufügen. Also haben wir hier einfach ein sehr einfaches Foto mit einem Rand oben, ein bisschen Text. Es macht also Sinn, dies in ein Fußzeilenelement zu setzen. Also nach diesem Abschnittelement, gehen, um eine neue Zeile hinzuzufügen, fügen wir eine weitere Seite sind nur zwei getrennte Dinge aus ein wenig. Wir fügen ein viertes Element hinzu. Und ich werde hier nur einen Text schreiben, um meinen Namen Dani Connell darauf zu setzen , ein Copyright-Symbol. Und ein bisschen wie mit dem Größer-als-Symbol vorher, um ein Copyright-Symbol hinzuzufügen, das wir tun können und kopieren und dann Semikolon. Und dann werde ich einfach das aktuelle Jahr 2021 setzen und das speichern. Wir haben jetzt eine einfache Fossa. 11. Was ist CSS?: Okay, also sind wir vorerst ziemlich fertig mit HTML. Wir haben unseren Header hinzugefügt. Produkte sind Fossa. Das sieht nicht sehr hübsch aus. Lassen Sie uns also etwas CSS hinzufügen, um diese Seite schön aussehen zu lassen und sie von diesem in dieses zu ändern. Nun, vor allem, was ist CSS? Nun, CSS steht für Cascading Style Sheets und mach dir vorerst keine Sorgen um den Namen zu viel. Aber im Grunde können wir CSS ein Element auswählen , das auf der Seite ist oder eine Reihe von Elementen, die sich auf der Seite befinden. Und geben Sie ihm einige Stil-Eigenschaften, wie Hintergrundfarbe, Text , Farbe, Breite, Höhe, Schriftgröße usw. 12. Base und Schriftart (CSS): Der einfachste Weg, CSS hinzuzufügen, besteht darin, nur ein Style-Tag zu unserem Kopf zu studieren. Also werde ich das jetzt nach dem Titel-Tag tun. Sie möchten also nur ein öffnendes und schließendes Style-Tag hinzufügen. Wir können alle unsere CSS setzen. Daher besteht CSS aus einer Liste von Regeln. Auf jeder Regel besteht ein Selektor, der dem Browser mitteilt, welche Elemente wir auswählen möchten, welche Elemente wir Stile hinzufügen möchten. Eine Reihe von Eigenschaften, die dem Browser sagen wie es mit Element oder wie die Reihe von Elementen aussehen sollte. Also lassen Sie uns nicht eine echte, die unserem Body-Tag etwas Stil hinzufügt, das im Grunde das Tag ist, das die gesamte Seite umgibt. Also für diese Regel, der Selektor wird einfach Körper sein, so dass sah ausgewählt. Und dann wollen wir hier nur doppelte geschweifte Klammern wie diese hinzufügen. Wir können unsere Eigenschaften in Haar legen. Wir haben Tonnen von verschiedenen Eigenschaften wie Cola, Hintergrund, Farbe, Schriftgröße, Breite, Höhe. Ich werde nicht alle von ihnen in diesem Video abdecken, aber wir werden einige der wichtigsten abdecken. So ist die Textfarbe auf einer Seite momentan überall schwarz, was etwas zu dunkel aussieht. Lassen Sie uns stattdessen all diesen Text zu einer dunkelgrauen Farbe machen. Und wir können die Farbeigenschaft verwenden, um dies zu tun. Also in diesen geschweiften Klammern, können wir einfach mit der Farbe beginnen. Wir können jetzt eine Cola zuweisen. Und es gibt eine Reihe von Möglichkeiten, wie wir das tun können. Wir können den Namen einer Farbe wie blau hinzufügen. Übrigens möchten wir jede Eigenschaft mit einem Semikolon wie diesem beenden. Also werde ich das retten. Sie können nun sehen, dass der gesamte Text blau ist. Und warum wird der gesamte Text auf der Seite blau , wenn wir nur einen Stil zum Body-Tag hinzugefügt haben. Nun, das liegt daran, dass Stile, die wir zwei Elemente hinzufügen auf die untergeordneten Elemente kaskadieren. Da jedes Element auf unserer Seite ein Kind des Körpers ist, hat jedes Element auch diese Cola-Eigenschaft geerbt. Wenn eines dieser untergeordneten Elemente jedoch über eine eigene Farbeigenschaft verfügt, die sich von dieser unterscheidet, überschreibt diese Eigenschaft diesen Stil, der nach unten kaskadiert. Also zum Beispiel, wenn wir stylen die p-Tags, indem wir zahlen uns den Selektor und wir setzen die Farbe auf rot. Ich werde das retten. Wir sagen, dass der Absatz jetzt rot ist, während die Überschriften immer noch blau sind, weil diese Formatvorlagen vom body-Tag herabkommen, das auf diese Überschriften kaskadiert. Und sie werden auch auf diesen Absatz kaskadiert, aber wir haben das gerade überschrieben, indem wir dem Absatzelement eine Farbeigenschaft hinzugefügt haben. Insbesondere werde ich nur diese Absatzregel für den Moment löschen. Speichern Sie das und zurück zu dieser Farbeneigenschaft. So können wir den Namen einer Farbe wie blau oder rot verwenden. Es gibt eine Reihe von verschiedenen Spaltennamen, die wir verwenden können, und wir können auch den hexadezimalen Farbcode verwenden, wie hart 000, 000, 000, 0, was der hexadezimale Farbcode für Schwarz ist oder wer hart FF, FF, FF, FF, FF. Und das ist die Farbe für Weiß. So können Sie sehen, dass unser Text verschwindet, weil unser Hintergrund weiß ist. Und wir können auch RGB-Farbcodes verwenden. Wenn ich das also lösche und RGB und dann Klammern hinzufüge, dann können wir eine Zahl für die rote Komponente hinzufügen, gefolgt von einem Komma, dann eine Zahl für die grüne Komponente, gefolgt von einem Komma, und dann eine Zahl für das blaue -Komponente. Also setzen wir dies auf 0 rot, 0 grün und 0 blau, was im Grunde schwarz ist auf diesen Zahlen gehen zu 55. Also, wenn ich all diese auf 55 ändere, speichern Sie das. Der Text ist jetzt warum? Nun, ich werde dafür einen hexadezimalen Farbcode verwenden. Also werde ich das entfernen. Ich werde das zu hart machen. Und dann sechs 3s, was eine ziemlich dunkelgraue Farbe ist, die nicht ganz schwarz ist. So sieht das jetzt ganz schön aus, auf unserem Körper hat auch etwas Platz den ganzen Weg um den Rand. Sie können sehen, dass diese horizontale Regel, die wir hinzugefügt haben, nicht ganz an den Rand der Seite geht, sind auch keiner von diesem Text. Und das liegt daran, dass der Browser in irgendeinem Standardstil zu den meisten Elementen, können wir Chrome DevTools verwenden, um zu sehen, was hier vor sich geht. Öffnen Sie also Chrome DevTools, Sie möchten nur zu View Developer Developer Tools gehen oder Sie können die Tastenkombination hier verwenden. Und das wird Entwickler-Tools öffnen. Eine Sache, die wir in Entwicklertools tun können, ist alle verschiedenen Elemente auf der Seite zu inspizieren. Wir können sehen, welcher Stil zu ihnen hinzugefügt wird, und wir können auch den Stil anpassen. Wenn ich also auf das Körper-Tag klicke, können wir unsere Farbeigenschaft sehen, die wir zuvor hinzugefügt haben. Wir können das von hier aus ändern, wenn wir sehen wollen, wie es aussieht. Hoppla, zu viele 6 sind da. So können wir auch in diesem Stil herumspielen. Aber wie auch immer, Sie können hier sehen, sagt es User-Agent-Style Sheet und wir können sehen, ist das Hinzufügen eines Rands von acht Pixeln in den Körper. Dieser Stil kommt also vom Browser selbst, von Chrome. In jedem Browser hat etwas andere Standardstile für verschiedene Elemente. Aber jedenfalls möchte ich diese Marge loswerden, die hinzugefügt wird. Und wenn wir den Mauszeiger über das Körperelement bewegen, können wir diesen orangefarbenen Rand um die Seite sehen. Ich bin nicht orange Grenze ist der Rand, der hinzugefügt wird. Also möchte ich den Rand auf 0 setzen. Also, wenn wir hier nach dieser Farbeigenschaft klicken, können wir eine Margin-Eigenschaft hinzufügen und diese auf 0 setzen. Und wir sehen den ganzen Rand verschwinden. Und jetzt müssen wir diesen Stil zu unserem Stylesheet hinzufügen. Also werde ich diese Randeigenschaft kopieren, sie nach dieser Farbeneigenschaft einfügen und speichern. Und diese Marge wird nun dauerhaft entfernt. Diese Formel, die wir verwenden, ist nicht sehr nett. Also werde ich das durch eine ausgefallene Form ersetzen. Und wir können jede Menge kostenlose Phantasie Schriftarten auf der Google Fonts Website finden. Also gehe ich einfach zu Google. Google-Schriftarten Die Google Fonts-Website wird nicht angezeigt. Ich werde diese Roboto-Schriftart verwenden, die eine der beliebtesten Schriftarten ist. Also in dem Moment, also werde ich darauf klicken. Wir müssen diese Dateien auswählen, die wir wollen, und wir werden nur regelmäßig brauchen. Also werde ich Kommunisten Engpässe auf die regulären klicken. Und wir werden auch mutig brauchen. Was ist, wenn wir uns einen Stil neben der fett formatierten Schrift einfallen lassen? Und wenn wir auf der rechten Seite schauen, gibt uns etwas Code für die Implementierung dieser Schriftart in unsere Webseite. Also gibt es uns ein paar Link-Tags hier. Die müssen reingehen. Also, wenn eine Kopie dieser Link-Tags, und ich werde sie über diesem Style-Tag in unserem Kopf auf speichern, dass einfügen. Und es gibt uns auch eine CSS-Regel, aber wir müssen hinzufügen, und das wird in unserem CSS gehen. Also werde ich das kopieren und wir fügen es dem hier ausgewählten Körper hinzu. Also füge ich das da rein. Und wenn wir das sparen, haben wir jetzt einen viel besser aussehenden Spaß. Und ich möchte auch diese Personalabteilung, diese horizontalen Regeln verbergen. Um diese auszuwählen, können wir einfach Hass Jar oder doppelte geschweifte Klammern eingeben, so dass Sie sie verstecken. Wir können die Anzeigeeigenschaft verwenden. Wir wollen dies so einstellen, dass das nicht gespeichert wird. Diese horizontalen Regeln sind jetzt verschwunden. Was wir hier getan haben, ist eine Art von Basisstilen für die ganze Seite festzulegen. Also werde ich einen Kommentar über diesen hinzufügen, um diese Stile als unsere Basisstile zu beschriften. Und so fügen Sie einen Kommentar hinzu, einfach eine neue Zeile an der Spitze hinzufügen, um einen Kommentar in CSS hinzuzufügen, wir haben gerade begonnen Schrägstrich und Sternchen, und dann schließen wir es mit einem Sternchen, Schrägstrich. Wir können alles, was wir wollen, in dieses gemeinsame stecken. Also werde ich nur Basisstile setzen. Dies ist nur ein Kommentar, also macht unser CSS nichts zu tun. Es ist nur ein Kommentar, der vom Browser vollständig ignoriert wird. Wir verwenden dies nur, um unser CSS zu beschriften es in eine Reihe von verschiedenen Abschnitten aufzuteilen. 13. Header – Hintergrundfarbe (CSS): Lassen Sie uns jetzt einige Stile für unsere Kopfzeile hinzufügen. Also wollen wir, dass es so aussieht. Also wollten wir einen dunkelgrauen Hintergrund haben und wir wollen, dass ein Titel oder ein Logo auf der linken Seite vorbei ist. Navigationselemente auf der rechten Seite zu sein. Also nach unseren Basisstilen hier gehe ich zu einem weiteren Kommentar, der eigentlich eine Verknüpfung ist, die wir verwenden können, um einen Kommentar hinzuzufügen, der auf einem Mac Command Schrägstrich in einem Labor ist, das Foren unter Windows kommentiert, ich denke, die Verknüpfung ist Schrägstrich und Schrägstrich. Und wenn Sie alle Tastenkombinationen sehen möchten, geben Sie mir jetzt einfach VS Code Tastenkombinationen. Und ich werde einfach auf diesen Visual Studio Code Tastenbindungen Link klicken. Und dann auf der rechten Seite hier sprang nach unten zu Tastenkombinationen Referenz. Und Sie können hier alle verschiedenen Plattformen sehen. Also, wenn Sie die Fenster Kurzwahlnummern sehen wollen, klicken Sie auf Windows, und Sie können hier eine nette kleine Spickzettel sehen. Also, wenn eine der Verknüpfungen, die ich verwende, unter Windows arbeiten und Sie unter Windows sind und dann einfach die richtige Tastenkombination hier finden. Okay, also werden wir einige Stile für die Kopfzeile hinzufügen. Also werde ich das Wort Header in diesem Kommentar aus einer neuen Zeile setzen. Und so wollen wir dieses Header-Element Stil, das diese orange Krawatte hat, all diese Navigationslinks. Wir könnten einfach Header für unseren Selektor wie folgt verwenden und beginnen, einige Stile hinzuzufügen. Später können wir jedoch andere Header-Elemente auf unserer Seite oder auf unserer Website haben. Zum Beispiel haben Sie einen Produkt-Header oder so etwas. Und wenn wir nur das Header-Element so auswählt verwenden, wird es jedes einzelne Header-Element, das auf unserer Website ist, Stil. Und im Moment wollen wir nur diesen Header stylen. Was wir tun können, um spezifischer mit unseren Selektoren zu sein, ist, indem eine Klasse zu einem Element hinzufügen und dann diese Klasse als unseren Selektor verwenden. Also werde ich hier zu diesem Header-Element gehen, kurz vor der schließenden Winkelhalterung. Ich werde ein Leerzeichen hinzufügen, und dann werde ich ein Attribut namens Klasse hinzufügen. Ich werde den Wert dieser beiden Header setzen, um einen Klassenselektor zu verwenden. In unserem CSS können wir einfach Punkt und dann den Namen der Klasse und den Namen der Klassen Header tun. Also wollen wir nur Header tun, und wir wählen jetzt nur dieses spezifische Element aus. Okay, also wollen wir, dass das eine schöne dunkle Hintergrundfarbe wie diese hatte. Und wir könnten dies mit der Eigenschaft Hintergrundfarbe tun. Also innerhalb dieser Auswahl, also werde ich nur eine Hintergrundfarbe hinzufügen. Übrigens, in VS Code, können Sie diese IntelliSense sehen, die Ihnen hilft, zu sehen, welche Eigenschaften verfügbar sind, schnell sind, fügen Sie sie der Seite hinzu und fügen Sie auch den Doppelpunkt, die Semikolon-Gesamtstruktur hinzu. Ich werde dies auf die gleiche Farbe setzen, die wir auf unserem Körpertext verwendet haben. So hart. 3, 3, 3, 3, 3, 3, 3, weil alle diese Zahlen gleich sind, könnten wir es tatsächlich auf dieser drei, 3's Leichtigkeit zeigen. Ich werde es auch hier ändern. Ich werde das retten. Und wir können jetzt diese graue Hintergrundfarbe auf unserer Kopfzeile sehen. 14. Header – Logo und Header (CSS): Ich überlege derzeit Navigationselemente entsprechend übereinander gestapelt, aber wir möchten, dass die Überschrift auf der linken Seite vorbei ist, die Navigation auf der rechten Seite, wie Sie auf der fertigen Seite hier sehen können. Und wir können dies tun, indem wir die Anzeigeeigenschaft auf einer Kopfzeile verwenden. Also werde ich eine Eigenschaft namens display hinzufügen, und wir möchten dies auf flex setzen. Diese Flex-Eigenschaft wird dieses Element in eine Zeile mit allen seinen direkten untergeordneten Elementen verwandeln . Also dieses und dieses Navigationselement wurden in dieser Zeile nebeneinander angezeigt. So können Sie diesen Titel und diese nav Elemente sehen. Und jetzt Seite an Seite, aber wir wollen nicht, dass diese Gegenstände direkt nebeneinander wie diese. Wir wollen, dass die Nav-Artikel hier drüben sind. Um dies zu tun, können wir die Eigenschaft „Rechttify Inhalt“ verwenden und wir können dies auf eine Reihe von verschiedenen Dingen wie Mitte setzen , um diese Elemente in der Mitte des Seils zu platzieren. Oder wir können es sagen, um zu biegen und alle untergeordneten Elemente nach rechts zu zwingen. Nun, was wir tun wollen, ist, unsere Gegenstände über die ganze Reihe zu verteilen. Also im Wesentlichen wollen wir Raum zwischen den Elementen setzen. Um das zu tun, können wir das auf Abstand zwischen setzen, und ich werde das speichern. Und wir können jetzt sehen, dass unser Titel auf der linken Seite vorbei ist, auf unserer nav Artikel sind über auf der rechten Seite. 15. Header – Textstile: Also lassen Sie uns etwas Stil zu diesen Links in unserer Kopfzeile hinzufügen , weil sie derzeit diese schreckliche lila Farbe haben. Und wieder, das ist der Standardstil, der vom Browser kommt. Und wenn Sie Ihre Chrome DevTools geöffnet haben und klicken Sie auf diesen kleinen Button hier oben. Wir können auf ein Element klicken, um zu sehen, was los ist. Wenn wir also hier nach unten scrollen, können wir diese violette Farbe nirgendwo sehen, aber sie wird vom Browser hinzugefügt. Und wenn wir zu diesem berechneten Tab gehen, können wir es hier sehen, diese lila Farbe. Also werde ich die Farbe dieser Beine auf eine schöne hellgraue Farbe setzen. Also wollen wir alle diese ein Tags auswählen, die in diesem Header sind. Um das zu tun, können wir einfach wieder unseren Header. Und dann danach ein, weil wir die a-Tags auswählen möchten, die sich innerhalb der Kopfzeile befinden. Also, das heißt im Grunde nur, wählen Sie alle a-Tags, die in diesem Elternteil mit einer Klasse von Header sind. Also werde ich die Farbeigenschaft auf eine hellgraue Farbe setzen. Also werde ich Hush CCC benutzen. Ich werde das retten. Und das sieht ein bisschen besser aus. Und ich möchte auch diese Unterstreichungen loswerden. Und das könnten wir mit der Text-Dekoration-Eigenschaft machen. Also werde ich die Textdekoration auf NADH setzen. Wir sehen, wie die auf den Linien verschwinden. Wir werden auch die Schriftgröße auf diesen zu reduzieren. Ich könnte das mit der Schriftart-Dash-Größe-Eigenschaft tun. Es gibt eine Reihe von verschiedenen Arten von Werten, die wir nicht können, wir können nicht Pixelwerte wie 14 Pixel Pixel, die im Grunde die Höhe des Textes auf 14 Pixel setzen. Wir können auch rems auf EMs verwenden. Ich werde mich jetzt nicht zu sehr auf diese einlassen. Also haben wir Rems, wir haben Atome. Aber am einfachsten zu verstehen, sind Pixel. Also werde ich nur Pixel in diesem Video verwenden. Ich werde die Schriftgröße auf 14 Pixel setzen, und ich werde das speichern. 16. Header – Hover-Effekte und Animation: Ich möchte auch, dass diese Links die Farbe ändern, wenn wir über sie schweben, gerade jetzt bleiben sie gleich. Und es ist besser, wenn sich die Farbe ändert, so dass der Benutzer weiß, dass diese angeklickt werden können, um ein Element zu stylen, das schwebt. Wir können einen Pseudo-Selektor verwenden. Also was wir tun können, ist wieder, ich hatte eine, ein, aber jetzt wollen wir einen Doppelpunkt hinzufügen und dann als unser Selektor schweben. Dies sagt also im Grunde bei diesen Stilen zu allen Tags, die innerhalb des Elements sind , das eine Klasse von Header hat, die derzeit schwebt. Also diese Stile, die wir hinzufügen, Hey, wir werden nur hinzugefügt, wenn wir den Mauszeiger über ein Element bewegen. Wenn wir also den Mauszeiger über das Element bewegen, möchte ich die Farbe ändern. Also werde ich die Farbe in Weiß ändern, und ich werde das speichern. Und wenn ich über diese Elemente schwebe, können wir sehen, wie sie zu weiß werden, wenn wir den Mauszeiger über sie bewegen. Wir können auch ein wenig Animation hinzufügen, so dass sich die Farbe nicht plötzlich ändert. Buch ändert sich allmählich von hellgrau zu weiß, indem die Übergangseigenschaft verwendet wird. Und wir möchten diese Übergangseigenschaft dem Element selbst und nicht dem Pseudo-Selektor hinzufügen . Also fügen wir das hier hinzu, wo wir das ein Tag innerhalb der Kopfzeile auswählen. Also möchten wir eine Übergangseigenschaft hinzufügen. Wir können eine CSS-Eigenschaft angeben, die wir animieren möchten. Und wir wollen die Farbeneigenschaft animieren. So können wir hier einfach mit der Farbe beginnen. Und dann können wir eine Dauer für diese Animation hinzufügen. Wenn ich dies also auf eins in 1 Sekunde setze, speichere ich das und bewege den Mauszeiger über einen dieser Links. Wir können sagen, dass es sehr langsam von grau zu weiß wechselt, wenn wir den Mauszeiger darüber bewegen. Nun, das ist ein bisschen zu lang. Also werde ich das auf nichts mehr als 0,3 Sekunden ändern. Ich werde das retten. Wir erhalten jetzt eine schöne subtile kleine Animation, wenn wir den Mauszeiger über diese Links bewegen. 17. Header – -: Okay, lassen Sie uns den Stil dieser Navigationsliste hier verbessern. Derzeit sind diese Gegenstände übereinander gestapelt. Muss, weil LI-Elemente Elemente standardmäßig blockieren, was wir wollen, dass sie nebeneinander so gehen. Und wieder können wir die Display-Flex-Eigenschaft verwenden, um dies zu tun. Also werde ich zurück zu dieser Seite springen. Ich werde einen neuen Selektor hinzufügen. Was wir tun möchten, ist, dass diese URL flex angezeigt wird, so dass die Elemente darin nebeneinander in einer Reihe anstelle von Lager platziert werden. Also der Selektor, also wieder, wir wollen Header hinzufügen. Wir wollen das nav-Element und dann das UL-Element innerhalb dieses auswählen. Wir möchten dies so einstellen, dass es angezeigt wird, flex. Speichern Sie das. Und wir können sehen, dass diese Gegenstände jetzt nebeneinander gestapelt sind. Wir haben noch einige Aufzählungspunkte auf diesen Listenelementen wie diese Aufzählungszeichen, Sie können dort sehen, wir können eine Kugel sehen, die das Wort zu Hause verdeckt. Und um das loszuwerden, können wir eine Eigenschaft namens list-style auf nicht setzen. Ich werde das retten und wir sehen, dass die kleine Kugel jetzt verschwinden wird. 18. Header – Marge und Padding: Standardmäßig haben URLs einen gewissen Rand und Padding hinzugefügt. Wenn wir den Mauszeiger über das Element hier zeigen, können wir den Rand in orange oben und unten sehen. Und wir können die Polsterung auf der linken Seite in dieser grünen Farbe sehen. Also werde ich auch den Rand auf 0 und die Polsterung auf 0 setzen. By the way, Marge ist im Grunde Abstand, der um die Außenseite eines Elements geht. Und Polsterung ist Abstand, der innerhalb des Elements geht. Nur um zu demonstrieren, dass ich nur eine Rahmeneigenschaft zu den a-Tags in der Kopfzeile hinzufügen werde . Also werde ich die Grenze zwei Pixel setzen, einfarbig weiß. Speichern Sie das. Und wir können jetzt einen kleinen Rahmen um jedes dieser Tags sehen, also wenn ich eine Auffüllung von 10 Pixeln setze, können Sie sehen, dass es 10 Pixel um die Innenseite des Elements hinzugefügt wurde, weil der Rand, den wir hinzugefügt haben, sich auf der äußersten Außenseite des Elements befindet. Und wir können sehen, dass der Raum innerhalb des Elements hinzugefügt wurde. Aber wenn ich diese Regel in einen Rand von zehn Pixeln ändere, anstatt das aufzufüllen und zu speichern, können Sie sehen, dass jetzt dieser Raum um die Außenseite des Elements hinzugefügt wurde. Das ist also der Unterschied zwischen Marge und Padding. Ich werde nur diese Randregel und diese Grenzregel loswerden und das speichern. Dieses Überschriften-Tag, das wir hier verwenden, wird auch einen Standard-Rand haben. Und wir können den Rand in orange an der Spitze und Unterseite des Elements dort sehen. Also werde ich dies auch anvisieren und den Rand und das Auffüllen auf 0 setzen. Also werde ich diese Regel hier setzen. Also Header H1, weil dieser Titel in einem H1-Element ist, setzen wir dies auf Marge 0, Padding 0. Jetzt, da wir alle Polsterung und den Rand um diese Elemente entfernt haben, wird der Header ein wenig klein aussehen. Wir hatten keine Polsterung um den Rand. Lassen Sie uns also etwas Padding zum Header hinzufügen. Also werde ich das Header-Element auf einer padding-Eigenschaft anvisieren. Und wenn wir die Polsterung in alle Richtungen um das Element setzen möchten, können wir einfach einen einzelnen Pixelwert wie diesen hinzufügen. Also zehn Pixel, ich werde das speichern. Dies wird also 10 Pixel Polsterung auf der linken Seite, 10 Pixel oben, 10 Pixel rechts und zehn Pixel unten hinzufügen 10 Pixel oben, 10 Pixel rechts . Aber wir können auch alle diese Richtungen der Polsterung individuell angeben. Also, wenn ich dies auf 10 Pixel, 20 Pixel, 30 Pixel und 40 Pixel setze , dann wird das tun, sind unsere 10 Pixel Polsterung nach oben, 20 Pixel nach rechts, die Pixel für den unteren und 40 Pixel nach links. So geht es im Uhrzeigersinn, beginnend an der Spitze. Also oben, rechts, unten und links auf Margin funktioniert genauso gut. Oder wenn wir nur den vertikalen Rand mit einem Wert auf dem horizontalen Rand oder Auffüllung mit einem Wert setzen wollen , dann können wir einfach zwei Werte angeben. Also, wenn wir dies auf 10 Pixel und 20 Pixel setzen, wird dies Fette hinzufügen. Ich werde das einfach retten. Dies wird 10 Pixel an den oberen und unteren und 20 Pixel nach links und rechts hinzufügen. Ich bin jetzt mit dieser Menge an Polsterung zufrieden, übrigens, ich werde hier auf die Seite gezoomt. Wenn Sie also auf einem Mac vergrößern oder verkleinern möchten, können Sie den Befehl plus zum Vergrößern oder Befehls-Minus zum Verkleinern verwenden. Also werde ich nur auf 100 Prozent verkleinern damit wir sehen können, wie das wirklich aussehen wird. Okay, das sieht ziemlich gut aus. Wir brauchen ein wenig Platz zwischen diesen Navigationselementen. Also werde ich nur nach unten zu diesen UL-Stilen scrollen. Nach diesem werde ich die a-Tags anvisieren , die sich innerhalb dieser UL befinden, diese ungeordnete Liste. So Dot Header nav UL. Und ich werde nur einen Rand auf der linken Seite hinzufügen. Und um das zu tun, können wir den Rand Strich links Eigenschaft verwenden. Und wir werden das auf 50 Pixel setzen. Speichern Sie das. Und wir können sagen, ist 50 Pixel auf der linken Seite von jedem dieser Links hinzugefügt. Also haben wir jetzt ein schönes bisschen Platz zwischen unseren Links. 19. Header – Beschränkung des Inhalts: Okay, also dieser Header sieht jetzt bei dieser Größe ziemlich schön aus, wenn ich die DevTools schließe und das ausdehne, kannst du auf einem wirklich breiten Display sagen, wir haben unseren Titel hier drüben, auf unseren Links da drüben, was nicht zu gut aussieht. Daher müssen wir den Inhalt dieser Kopfzeile auf eine bestimmte Breite in der Mitte des Bildschirms beschränken . Okay, also werde ich eine wiederverwendbare Klasse dafür begleichen. Also werde ich einen weiteren Abschnitt von Stilen zwischen unseren Basisstilen und unseren Header-Stilen hinzufügen . Also, wenn ich hier einen Kommentar hinzufüge, und ich werde dies wiederverwendbar nennen. Oder du könntest es generisch nennen oder so etwas. Ich werde eine Klasse einrichten, die als Constraint bezeichnet wird, um Inhalt zu beschränken. In die Mitte der Seite. Ich werde dieser Klasse eine maximale Breite mit der max width Eigenschaft geben. Und wir werden dies auf 960 Pixel setzen, was eine standardmäßige maximale Breite für Webseiten oder für den Inhalt von Webseiten ist. Also werde ich das retten. Ich werde zu unserem Header im HTML springen. Ich werde alles, was in der Kopfzeile ist, mit einem div mit einer Klasse von Constraint umgeben . Das div ist nur ein Element, das wir verwenden können, wenn etwas, das wir der Seite hinzufügen, es passt nicht ordentlich in etwas wie Header, Abschnitt oder Artikel oder so etwas. So sehen Sie viele Dibs auf Webseiten. Also ersetzen wir alles, was in der Kopfzeile ist, in diesem div. Übrigens habe ich gerade alles ungenutzte Alt beim Öffnen nach unten ausgewählt um es in dieses div zu verschieben, damit Ihre Verknüpfung unter Windows anders sein könnte. Also werde ich das retten. Dies hat ein bisschen falsche Masse gelaufen, weil wir diese Header-Elemente hatten, um flex anzuzeigen, was dies in eine Reihe änderte und alle seine direkten untergeordneten Elemente nebeneinander entlang des Seils anzeigen ließ. Aber jetzt, da wir dieses div hinzugefügt haben, ist dies jetzt das direkte untergeordnete Element des Headers. Also müssen wir jetzt tatsächlich die Display-Flex-Regel zu diesem div anstelle der Kopfzeile hinzufügen , da dies jetzt das Element ist, das wir eine Zeile sein möchten. Dies sind die Elemente, die wir nebeneinander anzeigen möchten. Also werde ich einfach wieder zu unseren Styles springen. Nachdem dieser Punkt eine Regel hatte, werde ich nur Punktbeschränkung. Wir werden diese Display-Flex-Regel verschieben und dies rechtfertigen Content-Regel nach unten in das. Also rufen wir die an, kleben die hier rein. Ich werde speichern, dass Elemente jetzt wieder korrekt angezeigt werden, obwohl wir aufgrund dieser Constraint-Klasse hinzugefügt haben, dass dieser Inhalt in unserem Header jetzt eine maximale Breite von 960 Pixeln hat. Wenn ich also einfach mit der rechten Maustaste darauf klicke und auf Inspect klicke, dehne den Browser ein wenig aus und bewege den Mauszeiger über die beschränkten Elemente. Sie können dieses kleine Dropdown-Ding sehen, das besagt, dass dies 960 Pixel breit ist. Wir möchten jedoch, dass dies in der Mitte der Kopfzeile und nicht auf der linken Seite so liegt. Um dies zu tun, können wir einfach zu dieser Constraint-Klasse zurückspringen. Wir können die Margin-Eigenschaft setzen. Ich werde dies oben und unten auf 0 setzen. Nun, dann werden wir es auch auf der linken und rechten und setzen Sie dies auf auto, wird dieses Element zwingen, diese Beschränkungselemente in der Mitte zu sein. Also werde ich das retten. Nun, wenn ich dies ausdehne, können Sie sehen, dass der gesamte Inhalt unseres Headers in der Mitte der Seite ist. Okay, also werde ich nur unser CSS hier ein wenig anpassen. Wir werden diese Constraint-Klasse später wiederverwenden, um alle unsere Produktinhalte auch hier im Mittelpunkt zu halten. Also diese Polsterung, die wir dem Header hier hinzugefügt haben, werde ich es in diese Constraint-Klasse verschieben, weil, was auch immer Sie diese einschränkenden Elemente in Klassen verwenden, Sie normalerweise ein wenig Polsterung auf diesen Elementen benötigen. Also, was tun wir das in diesen Constraint-Selektor einbauen, und ich werde das speichern. Alles sieht immer noch genau gleich aus. 20. Header – Hinzufügen eines Logos hinzufügen: Okay, jetzt möchte ich nur diesen orangefarbenen Titel durch ein Logo wie dieses Orange ersetzen , das Sie dort sehen können. Also werde ich auf eine Seite namens Icon finder.com springen. Ich werde nach Orange suchen. Wir scrollen nach unten, damit ich etwas finden kann, das schöne Artefakte aussieht. Ich werde zurück nach oben scrollen. Ändern Sie diese Option hier, um frei zu machen, so dass wir nur die freien Symbole sehen. Diese Orange sieht ziemlich schön aus. Also werde ich darauf klicken. Ich werde 64 Pixel wählen, weil wir das nicht brauchen, um zu groß zu sein. Wir werden das herunterladen. Ich öffne die Seitenleiste in VS Code, ziehe dieses Symbol in unseren Bild-Ordner. Ich werde das in orange Punkt PNG umbenennen. Also werde ich mit der rechten Maustaste Umbenennen und orangefarbenen Punkt PNG. Lassen Sie uns dieses Bild in unserer Kopfzeile anstelle dieses Titels platzieren. Also werde ich nur noch mal die Seitenleiste verstecken. Springen Sie zu dieser Überschrift, in der der orangefarbene Text enthalten ist. Lassen Sie diesen Text hier. Diese orangefarbene Steuer, weil das der Titel unserer Website ist. Es ist also eine gute Idee für SEO-Zwecke, diesen Text hier zu lassen, aber wir können ihn später mit CSS verstecken. Also werde ich diese Elemente einfach in zwei neuen Zeilen wie dieser aufteilen. Und ich werde den Text darin aufteilen, ein Tag auch auf neue Zeilen. Was ich tun werde, ist diesen Text in ein Span-Tag zu wickeln, das nur eine Art generisches Inline-Element ist, das wir verwenden können. Also werde ich nur die Wrap mit Abkürzung befohlen abfeuern. Wickeln Sie das in eine Spanne und ich werde das speichern. Und Sie können sagen, dass ich es nicht getan habe, dieses span Tag hat hier nichts geändert , weil dies ein Inline-Element ist, im Grunde wie die Inline-Version eines div ist. Es fügt keinen bestimmten Stil oder irgendetwas hinzu, gibt uns nur eine Möglichkeit, einen bestimmten Teil unserer Inhalte anzusprechen und ihn dann zu stylen. Also werde ich zu Stilen springen. Und nach diesem Header H1, Stil aus Punkt-Header H1. Und dann werde ich diesen Ort ins Visier nehmen. Also lasst uns hier laichen. Stellen Sie das einfach so ein, dass keine angezeigt wird. Speichern Sie das. Wir können sagen, dass Text jetzt verschwunden ist, obwohl er immer noch auf der Seite für SEO, für Suchmaschinen und solche Sachen ist. Danach werde ich ein Bild-Tag hinzufügen, indem ich IMG Hit Tab auf eintippe. Unser Bild wird Schrägstrich Assets Schrägstrich Bild Schrägstrich orange Punkt PNG sein. Also im Quellattribut wird Schrägstrich Assets Schrägstrich IMG Schrägstrich orange Punkt PNG im Alt-Attribut hinzufügen oder einfach orange hinzufügen. Speichern Sie das. Wir können jetzt die Orange auf der Seite sehen. Es sieht jedoch ein bisschen groß aus. Also werde ich nur ein Width-Attribut zu diesem Bild hinzufügen. Und in der Tat, lassen Sie uns CSS verwenden, um das zu tun. Das ist der richtigere Weg, dies zu tun. Hier ist also, wo wir zielen, dass dieser Ort im H1 ist. Also lassen Sie uns eine Regel nach diesem Punkt-Header H1 hinzufügen und dann I und j Ich setze die Breite auf, sagen wir 30 Pixel, und ich werde das speichern. Dieses Bild hat jetzt 30 Pixel. Dieses Bild hat unseren Header etwas größer gemacht. Und obwohl das Bild die vertikale Mitte dieser Kopfzeile ist, diese Elemente auf der linken Seite, bin ich nicht ganz in der Mitte. Wir können dies beheben, indem wir eine Flex-Eigenschaft zu unserem Flex-Element hinzufügen, das dieses Constraint-Element ist, das sich hier befindet, die sich innerhalb der Kopfzeile befindet. Also in diesem Header Constraint Selektor können wir eine neue Eigenschaft namens Align-Elemente hinzufügen. Und wenn wir das auf Zensur setzen, speichern Sie das, können wir jetzt sehen, dass alle diese Elemente in unserem Header jetzt in der vertikalen Mitte. Okay, also denke ich, wir sind vorerst mit diesem Header in Bezug auf CSS fertig. 21. Produkt - Text und Bild-: Lassen Sie uns jetzt etwas Stil zum Produktangebot hinzufügen, wenn ich einfach auf die fertige Seite zurückspringe, was wir tun wollen, ist die Stile aller Überschriften zu verbessern. Absatz aus einige Formatvorlagen für die Schaltflächen. Und wir wollen wieder Display Flex verwenden, um all diese technischen Sachen auf der linken Seite, auf dem Bild, rechts zu zeigen . Und wir wollen auch den Inhalt auf die Mitte der Seite beschränken, wie wir es mit unseren Header-Elementen getan haben. Also springe ich einfach zurück zu unserer Seite. Und das erste, was wir tun wollen, ist zufrieden. Und wir können diese Constraint-Klasse verwenden, die wir zuvor hinzugefügt haben. Wiederverwendbarer Abschnitt. Wir können diese Klasse auf diesem Abschnittelement verwenden , da alle unsere Produkte Artikel innerhalb dieses Elements sein werden. So können wir einfach über die Klasse zu diesem Abschnitt sprechen. Also Klasse gleich Constraint. Speichern Sie das. Und jetzt ist der gesamte Produktinhalt auf die Mitte der Seite auf eine maximale Breite von 960 Pixeln beschränkt . Und übrigens, der Grund, dass wir die maximale Breite in dieser Klasse anstelle von nur Breite verwendet haben, liegt darin, dass, wenn das Ansichtsfenster kleiner als 960 Pixel wird, das div nach unten skaliert, aber es wird nicht größer, ein breiter, ich sollte sagen, 960 Pixel. Okay, also haben wir unseren Inhalt eingeschränkt. Jetzt möchten wir Display Flex verwenden, um all diesen Text auf der linken Seite, auf dem Bild auf der rechten Seite anzuzeigen . Also werde ich runter zum Mockup für diesen Artikel springen. Und wenn wir diesen Artikel so einstellen, dass er alle direkten Kinder nebeneinander in einer Reihe angezeigt werden. Und wir wollen nicht, dass die H1 und H2 und das Absatz-Tag alle nebeneinander von links nach rechts gehen, wir wollen nur alle Texte dieser Schaltflächen auf der linken Seite, auf dem Bild, auf der rechten Seite. Also in diesem Artikel werde ich ein div hinzufügen und wir geben ihm eine Klasse von sagen Produkten, Bindestrich Texte, Wanne. Ich werde den gesamten Textinhalt auf diesen Navigationslinks innerhalb dieses div platzieren. Und dann werde ich dieses Bild auch innerhalb eines div umgeben. Und wir geben diesem eine Klasse von Produkten, Strichbild, verschieben Sie das Bild nach oben in dieses div. Ich werde das retten. Und wir möchten nun dieses Artikelelement so einstellen, dass es flex angezeigt wird, was dieses Element in eine Zeile verwandelt und dieses div mit unserem Text auf diesem div mit unserem Bild nebeneinander anzeigt . Also zuerst werde ich nur eine Klasse zu diesem Artikel hinzufügen. Ich nenne es einfach „Produkt“. Und wir werden einige CSS zu diesem Element hinzufügen. Also lassen Sie uns einen neuen Abschnitt von CSS mit einem Kommentar hinzufügen, und ich werde einfach Produkt dort einfügen. Wir wollen also die Produktklasse anvisieren. Wenn wir es zu diesem Artikelelement haben, möchten wir dies so einstellen, dass anzeigen, flex, speichern. Und wir können jetzt sehen, dass alle technischen Sachen auf der linken Seite vorbei sind, und das Bild ist auf der rechten Seite vorbei. Nur um sicherzustellen, dass beide Texte Konzept auf dem Bild vertikal zentriert, können wir wieder die align Items Eigenschaft verwenden. Stellen Sie also fest, dass auf Sensor ausgerichtet werden sollte Elemente. Also muss ich im Zentrum stehen. Und wir können sehen, dass der Text auf dem Bild beide vertikal zentriert sind. 22. Produkt – Schränke, Padding und Positionierung (CSS): Ich möchte nicht einen kleinen Rand zwischen jedem Produkt anzeigen. Also werde ich eine Rahmenbodeneigenschaft hinzufügen, die einen Rahmen direkt am unteren Rand dieses Produktelements hinzufügt. Ich werde dies auf ein Pixel setzen, was im Grunde bedeutet, dass die Grenze ein Pixel dick ist. Also zwei solide, was bedeutet, dass es einen festen Rahmen geben wird , weil wir dies auch auf gestrichelt setzen können. Ein paar andere verschiedene. Was wir in der Regel verwenden solide. Also ein Pixel fest und dann geben wir die Farbe an. Und ich werde es auf CCC setzen. Speichern Sie das. Wir haben jetzt diese kleine Grenze. Und ich denke, wir könnten es ein wenig Polsterung an der Ober- und Unterseite jedes Produkts machen oder dass wir eine schöne Lücke zwischen dem Inhalt an der Grenze haben. Also werde ich hier auch eine padding-Eigenschaft hinzufügen, fast am oberen und unteren Padding, sagen Sie 100 Pixel und die linke und rechte Polsterung auf nur 0. Also werde ich das retten. Wir haben jetzt ein wenig Platz oben und unten sind gerade jetzt dieser Text auf der linken Seite, auf diesem Bild auf der rechten Seite, ich bin nicht 5050. Der TextContent ist etwas breiter als das Bildkonzept. Was muss 5050 sein. Was wir also tun können, ist, sowohl das Produkttext-div auf dem Produktbild-div als auch andere Eigenschaft auf diese zu zielen . Und wenn wir auf verschiedene Selektoren gleichzeitig zielen wollen, können wir das einfach so machen. Also wollen wir die Produkttexte DIV ausrichten, Lassen Sie mich einfach ein Komma hinzufügen und fügen Sie dann unseren zweiten Selektor für das Produktbild div hinzu. So Punkt-Produkt-Text-Komma dann Produkte Strich Bild übernehmen. Wir können die Flex-Eigenschaft verwenden, um diesen Elementen zu sagen, wie, warum sie in diesem Flussseil sein sollten und ob sie wachsen oder schrumpfen sollten. Die Flex-Eigenschaft hat also drei Werte. Die erste Eigenschaft bestimmt die Basisbreite des Elements und wir wollen es auf 50 Prozent setzen. Der zweite Wert bestimmt, ob dieses Element wachsen soll. Und ich will nicht, dass auch diese Elemente auf ihnen wachsen, um 5050 zu bleiben. Also werde ich 0 setzen. Und dann bestimmt der dritte Wert ob dieses Element verkleinern soll, und ich möchte nicht, dass es verkleinert wird. Also wieder, wir setzen das auf 0 im Semikolon, speichern, dass diese jetzt 5050 sind. Ich möchte nicht sicherstellen, dass dieses Bild den vollen Platz dieser 50% dieser Zeile einnimmt. Also werde ich nur auf dieses Bild zielen. Also eine Menge anderer Selektor hier. Also möchte ich das Punktproduktbild div ausrichten, und dann möchte ich das Bild darin ausrichten, was dieses Bild hier ist. Wir möchten die Breite auf eine 100 setzen und dann speichern, um sicherzustellen, dass dieses Bild immer den verfügbaren Platz in dieser 50% der Zeile füllt , die dieses div belegt ist. 23. Produkt – Textstile (CSS): Okay, jetzt lassen Sie uns die Stile unserer Texte hier verbessern, diese beiden Überschriften in diesem Absatz. Also nach diesem Selektor werde ich auf diese Seite warmes Tag zielen. Also werde ich Produkttext übernehmen, einen, weil wir einen auswählen möchten, der in diesem div mit einer Klasse von Produkttext ist. Ich werde die Schriftgröße auf 48 Pixel einstellen. Lasst uns das schön groß machen. Speichern Sie das. Wir werden die Marge unter dieser Rubrik des Abets reduzieren. Also werde ich den Rand unten auf 25 Pixel setzen. Speichern Sie das. Und das bringt diese Überschrift etwas näher an die erste Einstellung. Jetzt werde ich die Schriftgröße dieser zweiten Überschrift ändern. Also viele neue selektive Produkte, niederländische Texte als H2, weil dies ein H2 ist und wir werden die Schriftgröße auf 21 Pixel setzen und das letzte bisschen kleiner speichern. Nun möchte ich die Größe dieser Absatzschriftart nicht auf die gleiche Größe wie die zweite Überschrift festlegen . So erlaubt Produkt Bindestrich Texte und dann zahlen Ursache dies ist ein Absatz-Tag, p Tag. Stellen Sie die Schriftgröße erneut auf 21 Pixel ein und speichern Sie diese. Und wir können mit ein wenig mehr Abstand zwischen den Zeilen in diesem Absatz tun. Und wir können das mit der Linienhöhe Eigenschaft tun. Also, wenn wir dies auf eins setzen, speichern Sie es, das werde ich im Grunde keinen Raum zwischen den Zeilen. Also werde ich das auf 1.4 erhöhen und das speichern. Und lassen Sie uns einfach ein wenig einfacher zu lesen mit diesem kleinen Stück Zeilenhöhe. Okay, lassen Sie uns diese Navigationslinks ein wenig wählen. Wir werden nach unten zu der Mockup Grad-Klasse zu diesem nav Element scrollen. Wir nennen dieses Produkt Bindestrich genug. Speichern Sie das. Ich werde diese Klasse verwenden, um diese Links ein wenig zu stylen. So viel die wählen Sie sowohl das Bild des Produkts. Denn im Allgemeinen versuchen Sie, Ihre Stile in der Reihenfolge der Elemente zu halten , die sich auf Ihrer Seite befinden. Also erlaubte der Selektor hier. Also werden wir auf die Produkte abzielen. Ich werde die UL darin anvisieren, die ungeordnete Liste. Lasst uns diese Kugeln loswerden. Ich werde die Listenstil-Eigenschaft auf NADH setzen und das speichern. Ich werde den Standard-Rand und Padding und Marge und Padding auf 0 entfernen , um diese Verbündeten innerhalb der UL-Anzeige nebeneinander zu machen, ich werde diese URL so einstellen, dass auch flex angezeigt wird. So eine Menge. Zeigen Sie Flex an und sagen Sie, dass diese Elemente jetzt nebeneinander sind. Ich habe nur ein bisschen Marge rechts von jedem dieser Seen. Also werden wir das Produkt nav Element, die URL und dann das a -Tag in diesem Ziel anvisieren. Weil Sie sehen können, dass wir diese Tags in jedem dieser Verbündeten haben. Sie können den Rand auch zum LI-Element hinzufügen, wenn Sie möchten. Ich werde es dem a-Tag hinzufügen. Wir werden das nur auf Marge setzen, richtig? Setzen Sie das auf 20 Pixel, speichern Sie das. Wir haben jetzt ein wenig Platz zwischen diesen Links. 24. Schaltflächen (CSS): Okay, lassen Sie uns etwas Stil für unsere Boxen hinzufügen jetzt machen diese schön aussehen. Also sprang ich auf die fertige Seite. Wir haben diese schönen Tastenstile. Wir haben eine orangefarbene Box um einen weißen Knopf mit einigen schönen Hover-Effekten, Animationen. Und es macht Sinn, diese Klassen auf wiederverwendbare Weise hinzuzufügen , da sie die Seite später neu laden. Wir werden diese Cookies mit j hinzufügen, und wir haben den gleichen Stil Button auch hier. Also werde ich zurück zu unserer Seite springen. Wir werden eine Klasse zu jedem dieser ein Tags hinzufügen, diese Anker-Tags der Schaltfläche. Und übrigens habe ich dort eine Mehrfachauswahl gemacht, indem meinen Cursor platzierte und die Alt-Taste gedrückt hielt und erneut klickte. Dies ermöglicht es uns, an zwei Orten gleichzeitig zu tippen. Und das kurze Zitat könnte auf Ihrer Plattform anders sein. Also überprüfe einfach den Spickzettel. Okay, also lassen Sie uns etwas Stil für diese Boltzmann-Klasse hinzufügen. Dies wird wiederverwendbar sein, also legen wir es in unseren Wiederverwendbare-Abschnitt. So Punktknopf. Für jetzt werde ich nur diese beiden Tasten orange machen, aber wir werden später einen orangefarbenen auf einem weißen erstellen. Also wollen wir eine Hintergrundfarbe setzen. Also werde ich eine Hintergrundfarbe Eigenschaft hinzufügen, und ich werde dies auf hart E F6 900 setzen. Ich werde das retten. Und übrigens können Sie diesen kleinen Farbwähler verwenden wenn Sie eine andere Farbe auswählen möchten. Ich möchte, dass die Textfarbe in diesen Flaschen weiß ist. Also werde ich die Farbeigenschaft auf Weiß setzen, speichern Sie das. Und ich möchte diese Unterstreichungen nicht entfernen. Also, wie wir es vorher getan haben, werde ich Textdekoration so einstellen, dass diese Unterstreichungen nicht entfernt werden. Gehen, um ein wenig Polsterung zu diesen Schaltflächen hinzuzufügen. Also viel padding Eigenschaft und erlaubt acht Pixel Polsterung nach oben und unten, 16 Pixel Polsterung nach links und rechts, wir haben jetzt eine Eisberg-Polsterung. Ich möchte keine abgerundeten Kanten hinzufügen. Diese Schaltflächen können Sie hier sehen. Und wir können dies mit der border-radius Eigenschaft tun. Also wollen wir den Grenzradius einstellen. Lassen Sie uns es auf 20 Pixel setzen. Speichern Sie das. Und jetzt haben wir diese schönen abgerundeten Kanten. Ich möchte orangefarbene Knöpfe und weiße Knöpfe haben, nicht nur orangefarbene Knöpfe. Also haben wir einen orangefarbenen, den weißen. Was wir also tun könnten, ist, dass wir unsere grundlegenden Schaltflächenstile in dieser Button-Klasse haben könnten. Und dann könnten wir einige zusätzliche Klassen haben , um die Farben auf den verschiedenen Tasten auszuschalten. Also zusätzlich zu dieser Bone-Klasse ohne ein Leerzeichen auf der Unterseite, andere Klasse, werde ich eine Klasse von Knopf gestrichelt orange hinzufügen, und fügen Sie auf diesem Learn More Button, die wir weiß sein wollen. Eine Menge Klasse von Knopf Bindestrich, weiß. Speichern Sie das, und ich werde viel zurück zu Schaltflächenstilen springen. Der Watson orange Selektor, und wir werden unsere Hintergrundfarbe, Farbe Eigenschaften nach unten in diesen Selektor verschieben . Und wenn ich das speichere, sehen wir jetzt nur diese Farben auf dieser Schaltfläche auf der linken Seite, die Schaltfläche orange Klasse hat. Wir fügen ein Selektiv für den weißen Watson hinzu. Watson hat weißen Fleck gestrichelt und es wird einfach weiß sein. Also setze ich die Hintergrundfarbe auf Weiß. Ich setze die Farbe auf die gleiche orangefarbene Farbe, die wir im Hintergrund dieser Schaltfläche haben. Also kopiere ich diesen Farbcode und füge ihn dort ein. Und das sieht jetzt ziemlich gut aus. Also brauchen wir jetzt nur noch einige Hover-Effekte auf diese Schaltflächen. Nach dem Watson-orangefarbenen Selektor fügen wir einen Hover-Pseudo-Selektor hinzu. So setzt Industrie orange Doppelpunkt schweben, schweben Sie es. Wir werden die Hintergrundfarbe etwas ändern. Ich werde nur diesen Farbcode kopieren, ihn hier einfügen. Und dann werde ich sehen, ob ich diesen Picker verwenden kann, um eine hellere orange Farbe auszuwählen. Also werde ich einfach das Ding bewegen, die Gemeinkosten Liste, eine Art hellorange und mal sehen, wie das aussieht. Ja, das sieht ziemlich gut aus. Lassen Sie uns bald eine Hover-Farbe für unser Whiteboard hinzufügen. Also nach der Schaltfläche wird der weiße Selektor Schaltfläche Bindestrich y hinzufügen, Doppelpunkt schweben. Ich werde die Hintergrundfarbe einstellen. Ich werde ihm nur eine hellgraue Farbe geben. Also werde ich nur einen Farbcode Bewertungen vor, die drei e ist. Sie ist fast weiß, aber nicht ganz. Und das sieht ziemlich gut aus. Wir möchten Übergänge zu diesen Hovers hinzufügen, wie wir es auf unseren Links in der Kopfzeile getan haben. So können wir einfach diese Schaltflächenklasse verwenden, die sich auf beiden Schaltflächen in der Übergangseigenschaft befindet. Und wir wollen die Hintergrundfarbe Eigenschaft übergehen. Also mit dieser Hintergrundfarbe. Und wieder, wir machen diesen Übergang nur 0,3 Sekunden lang. Speichern Sie das. Wir haben jetzt einen schönen Hover-Effekt auf jede dieser Schaltflächen. Diese Schaltflächen sehen dort etwas nahe am Absatz aus. Also werde ich einfach ein wenig Marge an der Spitze dieses Navigationselements hinzufügen. Also lassen Sie uns den CSS-Selektor dafür finden. Also haben wir keinen Selektor für das Produkt nav direkt. Also füge ich das hier hinzu. Produkt Strich genug, Rand oben oder wurde versucht, 20 Pixel, vielleicht 30 Pixel. Ja, das sieht ein bisschen besser aus. Jetzt habe ich ein wenig Abstand zwischen den nav Elemente, Dieser Text, und wir haben eine ganze Menge von Texten hier in diesem Absatz. Also werde ich nur ein wenig von diesem Text entfernen. Und standardmäßig, Text in Ihrem Editor in VSCode, wir bewegen uns einfach weiter nach rechts wie in einer Zeile. Aber wir können den Text auf mehrere Zeilen umbrechen, wenn wir zu Ansicht gehen und dann den Zeilenumbruch umschalten, oder Sie können die Tastenkombination verwenden. Und die Steuer in diesem Absatz ist jetzt alle Verpackung. Also werde ich nur ein bisschen von diesem Text loswerden, vielleicht so viel. Ich werde das retten. Das sieht jetzt ein bisschen besser aus. 25. Füge weitere Produkte (HTML und CSS): Okay, unser Produkt, das sieht dann ziemlich schön aus jetzt. Also lassen Sie uns ein paar weitere Produkte auf unserer Seite hinzufügen. Also werde ich das gesamte Artikelelement auswählen und das kopieren. Fügen Sie eine andere danach und dann eine andere ein. Wieder. Ich werde das retten. Und wir können jetzt drei Produkte auf der Seite sehen. Ich werde dieses zweite Produkt ändern, zwei verschiedene Produkte mit einem anderen Bild. Also werde ich zurück auf die pixabay-Website springen und ich werde nach einem MacBook suchen. Sehen Sie, wir können ein schönes Bild von einem MacBook finden. Das hier sieht ziemlich gut aus. Wenn ich also darauf klicke, lade herunter, dass ich meine Seitenleiste öffnen werde, ziehe dieses Bild in unseren Bild-Ordner. Im Ordner „Assets“. Ich benenne diese Datei in Overbook Punkt PNG um. Dann schließe ich dieses Bild und verdecke die Seitenleistenseite wieder auf dem Bildschirm. Also werde ich das mittlere Produkt ändern. Also der mittlere Artikel, werde ich das Quellattribut auf diesem Bild auf das Bild ändern, das wir gerade heruntergeladen haben, das ist Asset Schrägstrich 0 Buch Punkt PNG. Und ich ändere den alten Text auch auf 0 Buch. Sagen Sie, dass wir das Bild dort sehen können. Und ich ändere einfach den Text hier in das neue OH, Buch. Und das hier, ich werde einfach erstaunlich zu unglaublich ändern. Ich werde das retten. So haben wir jetzt zwei verschiedene Produkte aus, um gut zu sein, wenn wir die Bestellung auf einigen dieser Produkte umkehren könnten , so dass das Bild auf der linken Seite und der Text auf der rechten Seite ist. Eine Möglichkeit, das zu tun, besteht darin, diese beiden Divs zu tauschen. Also tauschen Sie das Produktbild und das Textdiv so aus, und wir könnten es so machen. Was wir das tatsächlich mit CSS machen könnten. Also machen wir das einfach rückgängig und bringen sie dahin zurück, wo sie waren. Speichern Sie das. Und wir verwenden CSS, um dies stattdessen zu tun. Also, was wir tun werden, ist auf diesem mittleren Produkt, auf diesem Artikel-Tag mit einer zusätzlichen Klasse namens Produkte umgekehrt. Und wir werden diese Klasse verwenden, um die Elemente in dieser Flex-Zeile umzukehren. So ist das Bild auf der linken Seite, auf dem Text ist auf der rechten Seite. Also werde ich wieder zu unserem CSS springen. Nach dieser Produktauswahl werde ich Punktprodukte rückwärts hinzufügen, um die Reihenfolge der Elemente umzukehren. Diese Flex-Zeile können wir einfach eine Flex-Richtungseigenschaft hinzufügen und dies auf Zeilenstrich rückwärts setzen. Und ich werde das retten. Wir können sagen, diese beiden Elemente in dieser Flex-Reihe von jetzt umgeschaltet. Der Abstand zwischen diesen Produkten sieht ziemlich schön aus. Ich denke, wir haben ein wenig zu viel Platz an der Spitze des ersten Produkts hier, es gibt ein wenig zu viel Platz zwischen dem Konzept hier auf der Kopfzeile, aber ich möchte immer noch die Polsterung behalten, die an der Spitze aller anderen Artikel ist. Also, wie können wir das tun? Nun, wir können einen anderen Pseudo-Selektor verwenden, der der erste untergeordnete Selektor ist. Dieser Artikel hier ist also das erste Kind dieses Abschnittselements. Wir können den ersten untergeordneten Pseudo-Selektor verwenden, um nur diesen Artikel auszuwählen, diesen ersten Artikel. Also werde ich wieder zu den Stilen springen. Nach diesem Produkt-Selektor werde ich Produkte und dann einen Doppelpunkt und dann zuerst Bindestrich Kind übernehmen. Dies wird also nur das erste Kind auswählen, das eine Produktklasse hat. Also nur dieses Produkt hier. Bei diesem ersten Produkt werde ich nur die obere Polsterung reduzieren. Also werde ich Putting Desktop einstellen. Versuchen wir es mit 20 Pixeln, speichern Sie das. Und das sieht jetzt ein bisschen besser aus. Und ich möchte auch diese Grenze aus dem letzten Produkt in der Liste lesen. Also das letzte Kind, und wir haben auch einen letzten untergeordneten Pseudo-Selektor, den wir verwenden können. Also werde ich nur diesen ersten untergeordneten Selektor duplizieren , indem ich Alt und Shift gedrückt halte und erneut unter Windows gedrückt halte, Verknüpfung könnte anders sein. Ich werde das zum letzten Kind ändern und ich werde nur die Grenze dieses letzten Kindes entfernen. Also setze ich Randstrich unten, um zu nicken. Ich werde das retten. Und wir können jetzt sehen, dass die Grenze auf dem letzten Produkt verschwindet, aber wir können immer noch die Grenze an der Unterseite der beiden anderen Produkte sehen. Okay, also bin ich jetzt mit diesem Produktangebot zufrieden. Ich denke, es sieht ziemlich gut aus. 26. Footer (CSS): Lassen Sie uns einfach beenden, indem Sie diese Fossa stylen. Das wird wirklich einfach sein. Wenn ich mir die fertige Seite anschaue, haben wir nur einen Rand ganz oben und ein wenig Polsterung um sie herum. Das erste, was wir tun wollen, ist, das Konzept der Flecken als Ursache einzuschränken. Sie können sehen, dass dieser Text rechts oben auf der linken Seite ist. Wir werden also zum Markup für die Fossa springen, die hier ist. Und ich möchte, dass dieses Foto einen Rand über die Oberseite des Fotos hat. Aber Sie können hier sehen. Also möchte ich, dass diese Grenze über unser beschränktes Gebiet hinausgeht , von links nach rechts. Also wollen wir der Fossa keine Einschränkung hinzufügen. Wir möchten stattdessen ein div in diesem Wasser hinzufügen, diesen Inhalt in dieses div einfügen und dann die Constraint-Klasse zu diesem div hinzufügen. Also viel div mit einer Klasse von eingeschränkten. Und wir werden diesen Inhalt öffnen und speichern ihn. Springen Sie zurück zur Seite. Dieser Inhalt ist jetzt eingeschränkt. Es steht im Einklang mit den anderen Inhalten. Lassen Sie uns diesem Wasser ein wenig Stil hinzufügen. Und wieder möchten wir das Fußzeilenelement nicht anvisieren , da Sie möglicherweise andere Kräfte auf unserer Website haben. Also lassen Sie uns eine Klasse von Wasser zu dieser Fußzeile hinzufügen, und wir werden stattdessen diese Klasse verwenden. Also werde ich zu unseren Stilen springen. Eine Menge neuer Kommentar, der Foto sagt. Und wir werden die Fußzeile anvisieren. Und ich werde nur einen Rand von einem Pixel-Solid hinzufügen. Und wir werden diese hellgraue Farbe so hart CCC verwenden. Und das können wir jetzt sehen, dass die Grenze. Ich müsste nur ein wenig Polsterung hinzufügen. So sind die padding-Eigenschaft. Ich darf 20 Pixel Polsterung oben und unten und dann 0 links und rechts. Speichern Sie das. Dieses Foto hat nun ein wenig Polsterung um ihn herum. 27. Umsetzen von CSS in die Trennung von Datei (CSS): Okay, also sind wir vorerst fertig mit CSS, obwohl wir später etwas mehr hinzufügen werden. Aber wir haben unsere Seite im Grunde fertig gestylt und es sieht ziemlich schön aus, aber wir haben viel Stil. Hier sind unsere HTML-Seite. Das ist ziemlich lang und macht unsere HTML-Seite ein wenig chaotisch. Dies ist normalerweise nicht, wie wir Stile zu einer Webseite in einem Style-Tag wie diesem hinzufügen, was wir normalerweise tun, ist unser CSS in eine separate Datei zu legen. Und es gibt viele Gründe dafür. Es hält unser Projekt organisiert. Und auch wenn wir unseren Stil inline halten, die HTML-Seite wie diese, dann, wenn wir mehr Seiten erstellen , zum Beispiel später werden wir eine Info Seite erstellen. Jedes Mal, wenn wir die Stile ändern möchten, müssten wir die Stile in diesem Style-Tag sowohl auf der Seite index.html als auch auf der Seite „Über“ ändern , was nur ein Albtraum wäre. Also werden wir alle diese CSS in eine separate Datei verschieben. Also werde ich die Sidebar zeigen. Innerhalb des Assets-Ordners werde ich einen neuen Ordner namens CSS erstellen. Dann, wenn ich eine neue Datei namens styles.css erstelle, und Sie müssen diesen Namen nicht verwenden. Diese Datei muss in Punkt-CSS enden. Ich werde zurückspringen. Index.html kopiert alles in diesem Style-Tag. Also wähle ich all das aus, indem du die Umschalttaste gedrückt hältst und unten klickst. Und eigentlich werde ich viel zitieren, und ich werde dieses Style-Tag entfernen. Sichern Sie sich das. Unsere Seite sieht wieder furchtbar aus. Aber keine Sorge, denn wir werden es in diese style.css Datei einfügen. Ich werde das nur wieder nach links einrücken, indem ich die Umschalttaste oben gedrückt halte. Ich werde das speichern, gehen Sie zurück zu index.html. Jetzt müssen wir diese CSS-Datei in diese HTML-Seite ziehen, die die Seitenleiste verbergen wird. Wir können dies tun, indem wir ein Link-Tag zu unserem Kopf hinzufügen. Und wenn ich gerade beginne, den Link einzugeben und die Eingabetaste drücke, wird automatisch eine Stylesheet-Link-Gesamtstruktur hinzugefügt. Also zieht es eine CSS-Datei ein. Wir möchten nur ein Link-Tag zum Kopf dieses rel-Attributs hinzufügen und es auf Stylesheet setzen , damit der Browser weiß, dass dies ein Stylesheet ist. Lassen Sie mich nur dieses hates href Attribut auf den Pfad unserer CSS-Datei setzen. Und unsere CSS-Datei ist Punkt Schrägstrich Assets Schrägstrich CSS style.css. Und wenn ich das speichere, sollten wir einen Webseite-Kamm sehen, wieder schön ist, was es tut. 28. Was ist JavaScript?: Okay, gehen wir jetzt zu JavaScript. Wenn also HTML dem Browser mitteilt, welche Elemente auf der Seite angezeigt werden sollen, und CSS dem Browser mitteilt, wie diese Elemente aussehen sollen und was der Flip ist, fällt JavaScript? Nun, Javascript ist eine Skriptsprache, die es uns ermöglicht, Dinge tatsächlich auf unserer Seite geschehen zu lassen, wie das Anzeigen eines Elements oder das Ausblenden eines Elements oder das Laden von Inhalten innerhalb eines bestimmten Teils der Seite. Wir können es verwenden, um Karussells, animierte Bildergalerien und solche Sachen zu erstellen. Und es ermöglicht uns auch, auf Benutzereingaben zu hören, darauf zu reagieren, zum Beispiel, wenn der Benutzer auf eine Schaltfläche klickt oder wenn der Benutzer die Seite nach unten scrollt, oder wenn der Benutzer Drogen in Element oder so etwas. Eine einfache Sache, die wir mit JavaScript auf dieser Seite tun können , ist, ein Cookie-Banner am unteren Rand der Seite anzuzeigen. Nach ein paar Sekunden könnten wir diesem Banner eine Schaltfläche hinzufügen. Und dann, wenn der Benutzer auf diese Schaltfläche klickt, können wir dann das Banner mit JavaScript ausblenden. 29. Script (JS) hinzufügen: Der schnellste Weg, um JavaScript zu Ihrer Seite zu erstellen, besteht darin, einfach ein Skript-Tag zu Ihrer HTML-Datei hinzuzufügen. Und wir können ein Skript-Tag entweder im Kopf oder im Körper hinzufügen. Alles in Ihrer HTML-Seite wird jedoch von oben nach unten geladen. Wenn Sie also eine wirklich große JavaScript-Datei haben, die in Ihrem Kopf geladen wird, dann wird der Browser warten, bis diese JavaScript-Datei geladen wird, bevor es beginnt, alle Ihre Seitenelemente zu laden. Platzieren von JavaScripts in Ihrem Kopf kann also verhindern, dass die Elemente auf Ihrer Seite geladen werden. Eine gängige Praxis besteht also darin, Ihre Skript-Tags am unteren Rand Ihrer Body-Tags zu platzieren. Also lassen Sie uns ein Skript-Tag direkt am unteren Rand unseres Körpers hinzufügen. Also müssen wir nur ein Skript-Tag wie dieses hinzufügen, öffnen und schließen Tag. Und wir können all unser JavaScript hier platzieren. 30. Wait: Bevor wir anfangen, JavaScript zu Dinge auf der Seite anzuzeigen, möchten wir sicherstellen, dass alle unsere Seite geladen wurde. Und wir könnten dies tun, indem wir einen Ereignis-Listener zu unserem Dokument auf unserer Seite hinzufügen. Also innerhalb des Skript-Tags, wollen wir zuerst das Dokument erreichen, und wir tun das einfach, indem wir es in Dokument eingeben. Und dann möchten wir dem Dokument einen Ereignis-Listener hinzufügen. Und um das zu tun, feuern wir eine Methode namens Art Event Listener. Durch diesen Ereignis-Listener müssen Sie sicherstellen, dass Sie das a und das L großschreiben und dann fügen wir Klammern wie folgt hinzu. Diese Methode erwartet zwei Parameter und wir trennen Parameter mit Kommas. Und der erste Parameter ist das Ereignis, auf das wir hören wollen. Wir müssen die gleichen Zitate setzen. Sie können einfache Anführungszeichen oder doppelte Anführungszeichen für das Ereignis verwenden, auf das wir hören möchten, ist der DOM-Inhalt geladen. Ereignis auf DOM steht nur für Document Object Model, was im Grunde nur Ihre HTML-Seite auf allen Elementen bedeutet. Wir möchten also etwas Code auslösen, nachdem dieses Ereignis vom Browser ausgelöst wurde. Also fügen wir hier einen zweiten Parameter hinzu, indem wir ein Komma hinzufügen. Ich werde das nur ein bisschen ausstrecken. Und was wir hier tun wollen, ist eine Funktion zu feuern. Also fügen wir Funktion hinzu und dann Klammern, und dann ein Leerzeichen, und dann doppelte geschweifte Klammern aufgereiht. Und dann mit dem Cursor in diesen doppelten geschweiften Klammern drücken Sie einfach den Editor. Wir können nun einige Code innerhalb dieser Funktion auslösen nachdem dieses DOM Inhalt geladen Ereignis ausgelöst wurde. Also im Grunde, nachdem alles auf unserer Seite geladen wurde, nur um sicherzustellen, dass dies funktioniert, werde ich nur eine Konsolenanmeldung auslösen. Dies sind Protokolle des Benutzers sieht nicht, was wir sehen können , obwohl in unserem Browser, in unseren DevTools. Und es ist nur eine sehr praktische Möglichkeit für uns herauszufinden , ob die Dinge funktionieren und unser JavaScript. Also, um ein Protokoll auszulösen, wir nur über Konsolenpunktprotokoll und wir werden nur einen Text hier abmelden. Also wollen wir einige Anführungszeichen in diese Klammern setzen. Und Sie können einfache Anführungszeichen oder doppelte Anführungszeichen verwenden. Und ich werde mich einfach ausloggen. Dom ist, ich bin bereit und ich werde das retten. Und wenn wir zurück zum Browser springen und unsere Entwicklungstools öffnen, laden wir die Seite neu. Wir können in unserer Konsole hier sehen, DOM ist bereit. Und wenn Sie diese Konsole nicht sehen können, wenn er möglicherweise nur die Escape-Taste drücken muss. Sie können es mit der Escape-Taste so umkreisen. 31. Cookie Banner – HTML: Okay, also bevor wir ein paar mehr JavaScript hier hinzufügen, um ein Cookie-Banner anzuzeigen, gehen müssen tatsächlich eine Cookies mit HTML und CSS zuerst erstellen. Also lassen Sie uns einige HTML für unsere Cookies hinzufügen, so nach dem Out, was, Ich werde einen Abschnitt Element mit einer Klasse von Cookies hinzufügen, niederländische Art und Weise, Ich werde unsere Cookies, aber unsere Inhalte hier, und ich werde einfach hinzufügen H1 Überschrift auf. Ich werde nur die Texte stellen. Diese Website verwendet Cookies und dann eine Menge Absatz mit etwas Text darin. Das ist wirklich nervig, sinnlos. Plätzchen Banner Speichern Sie das. Ich werde nach unten scrollen. Und das können wir jetzt unten sehen. Und wir werden auch eine Schaltfläche benötigen, auf die der Benutzer klicken kann, um dieses Banner zu schließen. Wir haben bereits einige Kurse für Personen eingerichtet. Diese Schaltfläche Klasse auf der Unterseite, orange Klasse für eine orangefarbene Taste. Also werde ich zu diesem Banner zurückkehren, Ladd an, einem Tag. Und ich setze den Hassentwurf auf nur Hash, weil diese Schaltfläche nirgendwo verlinken wird. Es wird nur etwas JavaScript auslösen. Wir müssen diese Klassen hinzufügen. So viel Glas Wasser und eine Klasse von Knopf Holländisch, Orange. Wir werden nur die Texte, Kleidung in dieses Etikett stecken. Und ich werde sagen, dass wir den Schließknopf dort sehen können. 32. Cookies – CSS: Und das erste, was wir tun wollen, ist, den Inhalt einzuschränken , der sich in diesem Panel befindet, weil er so nach links geht. Also werden wir ein div in diesen Cookies stecken Teil mit unserer eingeschränkten Klasse, die wir verwendet haben, um das Constraint-Konzept zu beschränken. Und ich werde alles andere in dieses Div verschieben und das speichern. Dieser Inhalt ist jetzt eingeschränkt. Also lassen Sie uns etwas Stil zu diesem Cookie-Banner hinzufügen. So können wir diese Cookies Banner-Klasse verwenden, um etwas Stil hinzuzufügen. Also werde ich an den Boden von style.css springen erlaubt einen neuen Abschnitt hier mit einem Kommentar, der sagt, Cookies Banner wird die Cookies Banner-Klasse Ziel. Ich werde ihm einen dunkelgrauen Hintergrund wie eine Kopfzeile geben. Stellen Sie also die Hintergrundfarbe auf die gleiche Farbe ein. Sie 333. Sagen Sie, dass es jetzt einen grauen Hintergrund hat. Allerdings können wir den Text jetzt nicht sehen, also lassen Sie uns dem Text eine helle Farbe geben. Also eine Menge Farbe Eigenschaft, und ich werde dies auf d, d, d, Also eine hellgraue Farbe, weil diese Überschrift auf diesem Absatz innerhalb, diese Cookies waren ein Element, diese Farbe Eigenschaft, die wir auf Dieser Cookie-Bonusbereich kaskadiert jetzt auf die Elemente darin. Okay, also werde ich auf diese Weise ein bisschen Polsterung hinzufügen. Also fügen wir eine padding-Eigenschaft hinzu, viele 30 Pixel Polsterung oben und unten auf 0, Polsterung nach links und rechts. Speichern Sie das. Und wir haben jetzt ein wenig Platz oben und unten. Im Moment befindet sich dieses Banner direkt am Ende unserer Seite. Wenn wir also ganz oben auf unserer Seite stehen, sehen wir es nicht. Wir möchten also, dass es am unteren Rand der Seite fixiert wird , unabhängig davon, wo wir uns in diesem Dokument befinden. Selbst wenn wir ganz oben sind, sollten wir in der Lage sein, dieses Banner hier unten zu sehen. Wir können dies mit der Position Eigenschaft tun. Also werde ich dem Schraubenschlüssel eine Positionseigenschaft hinzufügen. Und wir wollen das auf „behoben“ setzen. Und ich werde das retten. Wir zählen jetzt sehen das Banner auf der Seite, weil wir dem Browser mitteilen müssen , wo dieses Element fixiert werden soll. Also wollen wir, dass es an der Unterseite befestigt wird. So können wir die bottom Eigenschaft verwenden, setzen Sie das auf 0, weil wir dieses Element auf 0 Pixel von unten fixieren möchten. Also im Grunde rechts unten. Also sparen, wir können jetzt sehen, dass dieses Banner an der Unterseite befestigt ist. Es nimmt nun jedoch nicht mehr die gesamte Breite der Seite ein. Denn wenn wir ein Element fixieren, wird es standardmäßig nur die Größe des Inhalts in Anspruch nehmen, der darin ist. Also müssen wir jetzt explizit die Breite dieses Elements einstellen. Ich kann das mit der Width-Eigenschaft tun. Wir wollen die Breite auf 100 Prozent setzen. Wir werden das retten. Beansprucht nun die volle Breite der Seite. Wir haben oben auf diesem Banner etwas mehr Platz als unten. Und das liegt wahrscheinlich daran, dass diese Richtung hierher geht. Also oberer Rand drauf. Also werde ich nur mit der rechten Maustaste auf diese Überschrift klicken und wir können auf Inspect klicken. So springen Sie direkt zu diesem Element in unserem Elementinspektor in den DevTools. Und wir können hier sehen, dass das User Agent Stylesheet einen oberen Rand und unteren Rand zu dieser Überschrift hinzufügt . Also werde ich hier nur eine neue Regel hinzufügen, um nicht H1 zu zielen. Also Cookies waren ein H1 und wir werden einfach die Marge oben 200. Wir haben jetzt eine gleiche Menge an Platz oben und unten. Und ich möchte, dass dieser Knopf rechts hier drüben ist, anstatt unter den Texten. Und wieder können wir Display Flex verwenden, um dies zu tun. Also werde ich nur zu unserem Markup auf index.html springen. Also wollen wir diesen Text, dieses H1 und dieses P also wirst du auf der linken Seite sein, ist ein Tag, um auf der rechten Seite zu sein. Was wir also tun könnten, ist diese Einschränkung zu setzen, wenn flex angezeigt wird und dann unsere Texte an einem Tag platziert und dann diese Schaltfläche und ein div platziert werden. Und dann sollten wir ein div mit dem Text auf der linken Seite haben. Ich will div mit dem Watson auf der rechten Seite. Also werde ich nur den Text in einem div mit einer Klasse von Cookies umgeben, ein sext gewesen oder den auf dem P-Lager in selektiven und vielen anderen div mit einer Klasse von Cookies Dash-Button verschieben . Und wir setzen unseren Knopf hinein, und ich werde das speichern. Und jetzt möchten wir dieses div mit der Klasse von eingeschränkten setzen, um flex anzuzeigen, aber nur, wenn es in diesem Abschnitt mit einer Klasse von Cookies Mutter ist. Springen Sie also zurück zu style.css, scrollen Sie nach unten. Also eine Menge neue Regel hier. Also wollen wir Cookies machen, niederländischer Maler, und ich möchte vielleicht diese Einschränkung Klasse anvisieren. Also schränken Sie sich nicht ein. Und wir wollen dies so einstellen, dass Flex angezeigt wird. Speichern Sie das. Und jetzt sehen wir den Text links, auf den Booten und auf der rechten Seite. Aber wir wollen Raum zwischen allen Elementen hinzufügen, die in dieser Flex-Zeile sind. So, wie wir es früher getan haben, können wir die Eigenschaft „Rechttify Content“ verwenden und sich auf den Raum zwischen setzen. Ich werde das retten. Und jetzt ist der Knopf nach rechts. Und jetzt haben wir ein wenig mehr Platz am unteren Rand dieser Binärdatei, die wir oben haben. Und ich denke, das liegt daran, dass dieser Absatz einen unteren Rand hinzufügt, nur gehen, um mit der rechten Maustaste auf diesen Absatz, klicken Sie auf Inspect. Und ja, es hat einen gewissen Rand auf der Unterseite, der vom User Agent Stylesheet hinzugefügt wird. Nach dieser Seite wird ein Stil auf das Absatz-Tag innerhalb dieses Keks-Banner-Abschnitts ausgerichtet und den unteren Rand auf 0 gesetzt. Speichern Sie das. Und das sieht jetzt ziemlich süß aus. 33. Hide mit CSS verbergen: So gerade jetzt wird dieses Banner immer auf der Seite angezeigt, aber wir wollen nicht immer auf der Seite angezeigt. Wir möchten, dass es standardmäßig ausgeblendet wird und dann nach ein paar Sekunden auf der Seite angezeigt wird. Was wir also tun könnten, ist CSS zu verwenden, um dieses Element am unteren Rand der Seite zu drücken , so dass wir es nicht sehen können. Und dann könnten wir unser JavaScript verwenden, um dem Element nach ein paar Sekunden eine Klasse hinzuzufügen . Und wir könnten diese CSS-Klasse verwenden, um das Banner zurück auf die Seite zu ziehen. Lassen Sie uns zunächst dieses Element am unteren Rand der Seite mit CSS standardmäßig schieben . Und wir könnten dies mit der Transformationseigenschaft tun, die eine Eigenschaft ist, die es uns erlaubt, Elemente zu bewegen, ihre Breite und Höhe und so etwas zu ändern. Also werde ich eine Eigenschaft namens transformieren hinzufügen und die Eingabetaste drücken. Und wir könnten eine Reihe von verschiedenen Dingen mit transformieren tun, wir können Elemente drehen und Elemente auseinander nach unten schiefe Elemente skalieren, wo wir diese übersetzen y Eigenschaft verwenden, die es uns ermöglicht, die vertikale Position zu ändern, die y-Position des Elements. Also werden wir diese übersetzen y Eigenschaft verwenden. Und wenn ich hier nur 50 Prozent reinstelle und das speichern würde, können Sie sehen, dass es das Banner auf halbem Boden des Bildschirms geschoben hat. So können wir jetzt nur die Hälfte des Banners sehen, aber wir werden es den ganzen Weg schieben. Also werden wir das auf 100 Prozent ändern. Und ich werde das retten. Und wir können das Banner jetzt nicht mehr sehen. 34. Erstelle einen Kurs, um die Cookie-Banner zu zeigen: Was wir jetzt tun werden, ist eine CSS-Klasse einzurichten, die das Banner zurück auf die Seite zieht. Und dann später werden wir JavaScript verwenden, um dem Element nach ein paar Sekunden zurück Klasse hinzuzufügen , diejenigen, die das Banner auf der Seite anzeigen. Also nach diesem Cauchys Balance Selektor, Ich werde Cookies Bindestrich hinzufügen, Banner, dass ich dunkle Schatten hinzufügen werde. Also zielen wir im Grunde auf das Cookie-Banner-Element ab, wenn es eine Klasse von Show hinzugefügt hat, was es standardmäßig nicht tut, aber wir werden diese Klasse mit JavaScript hinzufügen. Und was wir tun wollen, ist, diese Transformationseigenschaft wieder zu ändern. Also kopiere ich das und füge es hier ein. Und wir wollen dieses Translate Y auf 0% setzen, wodurch es vollständig auf die Seite zurückgebracht wird. Also werde ich das retten. Und wenn ich meine Dev-Tools öffne, finden Sie diese Cookies Banner-Element, das hier ist. Und dann, wenn ich hier auf diese CLS-Sache klicke, können wir tatsächlich eine Klasse hinzufügen und sehen, was passiert. Also heißt unsere Klasse Show. Also werden wir in Show tippen und wir können jetzt das Banner auf der Seite sehen. Wenn wir diese Klasse entfernen. Und Sie können sehen, dass die Klasse auch hier hinzugefügt wurde. Wenn wir die Klasse entfernen, wird das Banner wieder von unten ausgeblendet. Es wäre schön, wenn dies animiert wäre, wie es erscheint und auf und außerhalb der Seite verschwindet. So wie wir es früher getan haben, können wir die Übergangseigenschaft verwenden, um dies zu tun. Also in unserem Cookie-Banner wählen, werde ich eine Übergangseigenschaft hinzufügen. Die Eigenschaft, die wir animieren möchten, ist die Transformationseigenschaft. Also werden wir das transformieren. Wir möchten eine Dauer hinzufügen. Also werde ich 0,3 Sekunden und mein Semikolon hinzufügen, und ich werde das speichern. Also jetzt, wenn wir unsere Cookies durch das Element in der Registerkarte Elemente wählen hier, klicken Sie auf Klasse. In der Showklasse, sagen wir, wir haben jetzt eine schöne Animation, wenn es erscheint. Und wenn wir die Klasse entfernen, haben wir wieder eine schöne Animation, wenn sie verschwindet. Also jetzt brauchen wir nur JavaScript zu verwenden, um diese Show Klasse zu den Cookies Banner nach ein paar Sekunden hinzuzufügen . 35. Banner in eine Banner (JS) setzen: Okay, Lassen Sie uns JavaScript verwenden, um diese Klasse der Show auf die Cookies durch das Element nach ein paar Sekunden zu erhöhen. Also springen wir zurück zu unserem JavaScript in index.html, das hier ist. Und wir werden dieses Konsolenprotokoll loswerden, weil wir das nicht wirklich brauchen. Bevor wir etwas mit diesen Cookies Palette tun können, müssen wir Zugriff darauf bekommen. Und wir können das tun, indem Sie die Abfrage auslösen, wählt eine Methode für das Dokument. Also, was wir tun können, ist Dokument Punkt, Abfrage , Auswählen, und dann Klammern, und dann Anführungszeichen. Und dann können wir einen Selektor in diese Anführungszeichen übergeben. Ähnlich wie die Selektoren, die wir in unserem CSS verwenden. Also, wenn wir wollen, um Cookies zu greifen, die eine Klasse von Cookies Power BI hat, wir können einfach Punkt-Cookies Balance verwenden. Also in diesen Zitaten können wir einfach Dot Cookies starten, Strich Butter. Und das wird die Cookies bona Element greifen, so dass wir tatsächlich etwas damit tun können. Aber zuerst müssen wir dies in eine Variable setzen. Und ich bin, was ist eine Variable? Im Grunde ist es nur ein kleiner Datenblock mit einem Namen. Und wir können alle Arten von verschiedenen Arten von Daten in einer Variablen aufhalten. Die Art und Weise, wie wir eine Variable einrichten, ist, dass wir einfach das Wort let verwenden und dann geben wir einen Namen für unsere Variable ein. Nehmen wir an, wir wollten das Alter von jemandem speichern. Vielleicht wollen wir das veränderliche Alter nennen. Und wir können das auf eine Zahl wie 30. Und wir könnten auch Text oder String in einer Variablen speichern. Sagen wir mal, wir wollten den Namen eines Menschen speichern. Wir könnten uns den Namen gleich machen. Dann wollen wir Anführungszeichen verwenden, wenn wir eine Zeichenfolge machen. Also Dani, und wir könnten auch boolesche Werte speichern, true und false Werte in einer Variablen. Also wollen wir vielleicht etwas tun wie, lassen Sie uns, ist Benutzer abonniert. Und wir können festlegen, dass das wahr ist, oder wir könnten es auf falsch setzen. Aber in diesem Fall wollen wir nur dieses Dokumentelement in einer Variablen speichern. Also werde ich all das einfach loswerden. Ich werde das in einer Variablen aufhalten. Also nennen wir diese Kekse bada. Hallo da, Diese Kekse. Aber unser Element wird jetzt in diesem Cookie sein ist über eine Variable, wo wir einige Dinge damit machen können. Bevor wir ein paar Sachen damit machen, wollen wir sicherstellen, dass es existiert. Denn wenn wir versucht haben, Code für dieses Element auszulösen und es auf der Seite nicht existiert, wird dies einen Fehler auslösen. So können wir eine if-Anweisung verwenden, um dies zu tun. Was wir also tun können, ist f einzugeben und dann Klammern. Und dann in den Klammern können wir einfach Cookies hinzufügen gewesen ein. also mit anderen Worten, wenn es etwas in dieser Variablen gibt, also wenn dieses Element auf der Seite gefunden wurde, dann könnten wir etwas tun. Für den Moment werde ich mich nur ausloggen. Also werde ich console.log verwenden und nur abmelden Barna existiert. Und wenn wir etwas Code auslösen wollten, wenn das Banner nicht existiert, könnten wir danach, wenn Anweisung doppelte geschweifte Klammern hinzufügen, können wir console.log einfach abmelden, aber a existiert nicht. Ich werde das retten. Und wir können jetzt in unserer Konsole hier sehen, Banner existiert oder wenn ich einfach diese Cookies Bannerabschnitt-Element von der Seite entfernen und dann speichern. Wir sehen jetzt, aber es existiert nicht ausgesperrt. So ein Ort, dass Cookies Banner zurück auf der Seite und speichern Sie, dass. Ich werde diese andere Aussage nicht wirklich brauchen. 36. Cookie-Banner in 2 Sekunden anzeigen (JS): Also, wenn die Cookies, aber es existiert, dann wollen wir die Klasse der Show zu diesem Cookie-Art Element nach ein paar Sekunden hinzufügen . Um ein paar Sekunden zu wiegen, können wir die setTimeout-Methode verwenden. Also werde ich nur dieses Konsolenprotokoll entfernen und ich werde einfach Satz eingeben. Wir können in unserem IntelliSense hier sagen wir setTimeout Funktion. Also werde ich die Antwort darauf treffen, darauf eine Menge. Diese setTimeout-Funktion folgt. Diese Funktion erwartet zwei Parameter. Der erste Parameter ist eine Funktion. Dies ist also nur eine andere Art, eine Funktion zu schreiben, die sich ein wenig von der Art unterscheidet, wie wir diese Funktion geschrieben haben. Diese Art von Funktion wird als Pfeilfunktion bezeichnet, aber wir könnten dies auch ändern, um doppelte geschweifte Klammern zu funktionieren und dann diesen Pfeil loszuwerden. Das würde auch funktionieren, nun, ich werde nur den Spot in eine Pfeilfunktion ändern, damit wir Code innerhalb dieser Funktion finden können , nachdem das Timeout beendet ist. Dieser zweite Parameter hier ist eine Zahl, die die Menge der Zeit ist, die wir in Millisekunden warten sollten. Wenn wir also fünf Sekunden warten wollten, könnten wir hier 5000 hinstellen. Also ändere ich dieses Timeout auf 5000. Ich werde vorerst nur ein paar Texte rauslaufen. Der Timer ist fertig. Wenn wir diese speichern und die Seite neu laden, warten Sie ein paar Sekunden, dann können wir sagen, dass Timer beendet ist gesperrt. Ich werde diese Zeit nur auf zwei Sekunden verkürzen. 2000, hey, Arafat, lass uns das 2000 in eine Variable setzen. Also nach diesem Cookie ist eine Variable, andere Variable genannt Cookies, aber eine Verzögerung, Beginn oder gleich 2000. Und jetzt können wir diese Variable einfach hier verwenden, anstatt die Zahl hart zu codieren. Also kopiere ich diesen Variablennamen, füge ihn hier ein. Und jetzt, wenn wir später auf diesen Code zurückkommen, wird es für uns sehr einfach sein, die Verzögerung zu ändern, wenn wir wollen. Aber wie auch immer, sobald dieses Timeout beendet ist, wollen wir die Showklasse hinzufügen, die wir eingerichtet haben, das Cookie-Banner, diejenigen, die den Teig auf der Seite zeigen. Und wir haben Zugriff auf das Cookie-Banner-Element hier. Also werde ich dieses Konsolenprotokoll loswerden. Und was wir tun können, ist Cookies Banner, und wir wollen die Klassenliste auf diesen Cookies Produkte zugreifen, können wir Dot Klasse Liste tun. Und in der Tat werde ich das nur abmelden, damit Sie sehen können, was hier vor sich geht. Also werde ich console.log hinzufügen und dann diese Cookies Banner-Punktklassenliste in Klammern umgeben und speichern Sie das. Und wenn wir ein paar Sekunden warten, können wir sehen, dass diese DOM-Token Listen abgemeldet werden. Und wenn wir auf diesen kleinen Pfeil klicken, um ihn zu öffnen, was wir hier sehen, ist ein Array. Und ein Array ermöglicht es uns im Grunde, mehrere Variablen in einem Datenelement zu speichern. Also, wenn ich wieder zu diesem Cookie-Banner springen und wir hatten eine andere Klassenseite neue gestrichelte Klasse. Und wir speichern das und laden neu. Sie können sehen, dass dies wieder abgemeldet wird. Jetzt haben wir zwei Elemente in diesem Array, Cookies von unserer neuen Klasse. Also werde ich nur diese neue Klassenklasse lesen und das speichern. Springen Sie zurück zu unserem JavaScript. Und ich werde dieses Konsolenprotokoll entfernen. Also haben wir Zugriff auf die Klassenliste dieses Keks-Teigs. Jetzt möchten wir eine Klasse hinzufügen. Ich möchte diese Show-Klasse hinzufügen, die wir einrichten. So können wir jetzt Punkt entscheiden, hinzufügen und dann Klammern. Und dann können wir in Anführungszeichen die Klasse hinzufügen, die wir hinzufügen möchten, und wir möchten die Klassenshow hinzufügen. Also werde ich das Nachladen speichern. Und wenn wir ein paar Sekunden warten, können wir unsere durch Paarung sehen. Und wenn wir hier in den Elementinspektor schauen, können wir sehen, dass Show Klasse hinzugefügt wurde. 37. Unsere Logic in Funktionen auflösen (JS): Es ist jedoch eine gute Idee, unsere Logik in Funktionen aufzuteilen. Und eine Funktion ist nur ein Codeblock, den wir einen Namen geben können. Und Sie möchten im Allgemeinen, dass jede Funktion nur einen Zweck hat. Also nach dieser if-Anweisung hier werde ich eine Funktion hinzufügen. Wir tun dies, indem wir nur Funktion eingeben, und dann können wir der Funktion einen Namen geben. Damit wir es „Show Banner“ nennen können. Dann fügen wir Klammern hinzu und dann doppelte geschweifte Klammern. Und dann könnten wir den Code für unsere Funktion in diese geschweiften Klammern setzen. Also werde ich nur diese Linie schneiden, wo wir die Klasse hinzugefügt haben. Ich füge es stattdessen in diese Funktion ein. Was wir jetzt auf diesem festgelegten Timeout tun können, auf diesem ersten Parameter können wir auf diesem ersten Parametereinfach alle diese Funktion auswählen. Also die zwei doppelten geschweiften Klammern, der Pfeil und diese beiden Klammern. Und wir können das einfach löschen, und wir können stattdessen einfach den Namen dieser Funktion eingeben. Es wird nun diese Funktion ausgelöst, nachdem das Timeout beendet ist. So können wir einfach in Show Banner tippen. Hey, lassen Sie uns speichern, dass NCBI noch funktioniert, und laden Sie die Seite neu. Und doch funktioniert es immer noch. Ich werde hier nur einige Kommentare hinzufügen, um unseren Code ein wenig zu brechen. Wir können die gleiche Tastenkombination verwenden, um einen Kommentar in JavaScript hinzuzufügen, die auf einem Mac ist es Befehl und Schrägstrich. Und ich werde dieses Zeug einfach oben darin beschriften, weil wir hier etwas initialisieren und Zugang zu unseren Elementen bekommen. Und dann eine Menge Kommentar über unsere Funktionen, die nur Funktionen sagt. Übrigens können wir auch Kommentare zu HTML hinzufügen. Also wollten wir einen Kommentar über diesem Cookie-Banner hinzufügen. Wir können einfach den Shortcut-Befehl und Schrägstrich oder ich denke, es ist Kontrolle und Schrägstrich unter Windows, dann können wir einfach einen Kommentar hier eingeben, wie Cookies Banner. 38. Enge Knöpfe in eine Button (JS): Okay, also möchten wir dieses Panel ausblenden, wenn der Benutzer auf diese Schaltfläche zum Schließen klickt. Also, wenn der Benutzer klickt dies geschlossen, und wir wollen im Grunde die Showklasse entfernen, die Sie hier von diesen Cookies gekauft sehen können, die dann paaren sich mit der Bio zurück am Ende der Seite. So können wir dies tun, indem wir einen Klick-Handler zu dieser Schaltfläche hinzufügen. Zuerst müssen Sie Zugriff auf diese Schaltfläche erhalten, genau wie wir es getan haben, wenn wir Zugriff auf die Cookies Banner mit der Abfrage eine Methode ausgewählt haben . Also nach dieser Zeile werde ich hinzufügen, lassen Sie uns, nennen wir es Cookies auf Close-Button. Gesetz gleich dem Dokumentabfrageselektor und in Klammern und Anführungszeichen darin. Und so brauchen wir einen Selektor, um diese Schließen-Schaltfläche auszuwählen. Und wir können nicht einfach diese Boote oder die Klasse verwenden, weil dieser Abfrage-Selektor nur das erste Element auswählen wird , das ähnlich wie der Selektor, den wir hier einfügen. Wenn wir also Punkt Watson hier reinsetzen, dann würde es tatsächlich diesen Boden auswählen, der das erste Watson-Element auf unserer Seite ist, diese Bibel. Wir müssen also spezifischer sein als das. Und wir haben dieses Div rund um Appleton Charterklasse von Cookies, Barbara Watson. Was wir also für unseren Selektor tun könnten, sind Punkt-Cookies, Art und Weise Watson und dann ein Leerzeichen, und dann Watson. Mit anderen Worten, es wird das Element auswählen, das eine Klasse von Schaltfläche hat , die innerhalb des Elements ist, das eine Klasse von Cookies, aber eine Schaltfläche hat. Also werde ich das retten. Und wir werden einen Klick-Handler auf dieser Flasche einrichten. Also werde ich nach dieser if-Anweisung einen neuen Abschnitt hinzufügen, und ich werde diese Ereignisse aufrufen. Und ich bin zuerst wollen wir überprüfen, ob dieser Schließen-Knopf existiert, wie wir es mit der Cookie-Art getan haben. Also, wenn Kekse eine enge Watson gewesen. 39. Kicker auf Knopf-Klick ausblenden (JS): Und wenn es existiert und wir einen Click-Handler hinzufügen möchten. Und wir können dies tun, indem wir einen Ereignis-Listener zu der Schließen-Schaltfläche hinzufügen, indem wir diese addEventListener Methode verwenden, die wir zuvor verwendet haben. Also, was wir tun können, ist Cookies ein schließender Button Punkt hinzufügen Ereignis-Listener, dann Klammern. Nun wollen wir dieses Mal den Click-Ereignis-Listener hinzufügen. Also werden wir dort Anführungszeichen hinzufügen und klicken Sie dann auf Folgen Sie dem zweiten Parameter. Wir brauchen eine Funktion. So könnten wir eine Funktion wie diese direkt hier hinzufügen und hier etwas Code hinzufügen. Aber es ist wahrscheinlich schlecht, eine separate Funktion auszulösen, so dass wir alle unsere Logik gut in verschiedene Funktionen getrennt halten können . Also möchte ich alle diese Funktion auswählen, die ich gekauft habe und stattdessen eine Funktion namens schließen Watson angeklickt auslösen. Und ich in der Tat, nennen wir es Cookies, wurde eine Schließen-Schaltfläche geklickt, um es ein bisschen spezifischer zu machen. Und dann kopiere ich das und wir werden diese Funktion hier unten erstellen. Eine Menge von dieser Funktion. Also, wenn Sie die Funktion starten, dann fügen Sie Cookies durch meine Schaltfläche Schließen klickt Klammern. Für jetzt lassen Sie uns einfach einige Texte ausloggen. So wurde die Schaltfläche „console.log schließen“ geklickt, um sicherzustellen, dass dies funktioniert. Also werde ich das retten. Warten Sie, bis der Stimmzettel erscheint. Klicken Sie auf die Schaltfläche „Schließen“. Und wir können sagen, dass die Schaltfläche Schließen angeklickt wurde. Also, das funktioniert. Wenn wir unten am unteren Rand der Seite und wir klicken auf diese Schließen-Schaltfläche springt Nase nach oben. Und das ist, weil, wenn wir darauf klicken, was ist ein H ref ist zu hart gesetzt. Wir können den Hash verwenden, um zu verschiedenen Ankern auf unserer Seite zu springen. werde ich jetzt nicht hineinkommen. Was ist, wenn wir keinen Namen für eine ANCA angeben, dann wird es nur Pose an den Anfang der Seite springen. Also, was wir in diesem Click-Handler tun müssen, ist das Standardverhalten dieser Schaltfläche zu verhindern, wenn wir darauf klicken, die dem Link folgen, der diesem Wasser zugewiesen ist. In diesem Fall ist Hash. Also, wenn wir so EventListener saßen, wie ein Click-Ereignis-Listener, wird dies zurückgeben, was als Ereignisobjekt bekannt ist, das wir an die Funktion weitergeben können, die wir auslösen. Ich werde nicht zu viel in das Ereignisobjekt kommen. Nun, was wir das übergeben können, indem wir einfach einen Variablennamen in diese Klammern setzen und Sie können es nennen, was Sie wollen. So könnten Sie es Ereignis nennen oder Sie könnten es einfach ein nennen. Ich werde es nur ein nennen. Und jetzt, da wir Zugriff auf dieses Ereignisobjekt haben, das von diesem AddEventListener zurückgegeben wurde, wenn auf die Schaltfläche geklickt wurde, können wir eine Methode auf diesem -Ereignisobjekte, um das Standardverhalten des Klicks auf diese Schaltfläche zu verhindern. Also müssen wir nur einen Punkt hinzufügen, verhindern Standard, und dann Klammern. Und ich werde das retten. Hoffentlich jetzt, wenn wir auf diese Schaltfläche klicken, springt es nicht mehr an den Anfang der Seite, aber wir sehen immer noch, dass unser Protokoll abgemeldet wird. Schaltfläche „Schließen“ wurde angeklickt. Okay, Also, sobald die Schließen-Schaltfläche angeklickt wurde, wollen wir dann eine andere Funktion auslösen, die dann das Cookie-Banner verbirgt. Lassen Sie uns also eine Funktion namens Hide Banner-Anzeigen auslösen, um eine Funktion von woanders auszulösen, wir können einfach den Namen der Funktion eingeben und dann Klammern wie diese. Also lassen Sie uns diese Funktion hier unten erstellen. So Funktion verbergen Banner, Klammern, doppelte geschweifte Klammern. Also, was müssen wir tun, um dieses Banner zu verstecken? Nun, wir müssen nur diese Show-Klasse daraus entfernen. So ähnlich wie in dieser Show war eine Funktion. Wir können nur Cookies Banner tun, weil daran erinnern, dass wir Zugriff auf die Cookies durch das Element mit diesem Cookie-Ort eine Variable haben. Und dann wollen wir auf die Klassenliste zugreifen. Und dieses Mal möchten wir die remove-Methode anstelle der Add-Methode auslösen. Also wollen wir nur Klammern und Anführungszeichen innerhalb der Klammern entfernen und dann zeigen, weil wir die Klasse Show entfernen möchten. Also werde ich das retten. Also sagen wir die Bindung, die ich repariere. Nach ein paar Sekunden, klicken Sie auf die Schaltfläche und wir sehen das Banner verschwinden. 40. Move JS in die Trennung von Datei (JS): Okay, also haben wir jetzt mit JavaScript fertig. Und ich bin genau so, als hätten wir unser CSS in eine separate Datei verschoben. Es ist eine gute Idee, unser JavaScript auch in eine separate Datei zu verschieben. Denn wenn wir gehen, werde ich Javascripts in diesem Skript-Tag und wir erstellen einige neue Seiten, die wir in ein wenig tun werden, dass, wenn wir Änderungen an unserem JavaScript vornehmen wollen, wir müssten Änderungen an mehreren verschiedenen HTML-Dateien vornehmen. Es macht also Sinn, alles über JavaScript in einer Datei zu haben , so dass wir es nur einmal ändern müssen. Also werde ich die Sidebar auf dem Explorer öffnen. Und innerhalb des Assets-Ordners werde ich einen neuen Ordner namens JS für JavaScript erstellen. Ich werde mit der rechten Maustaste eine neue Datei erstellen. Und wir könnten dieses globale Doc js nennen. Und Sie können es nennen, was Sie wollen, aber es muss in dot js enden. Und es ist eine Datei für Zeilen geöffnet. Also werde ich zurück zu index.html springen. Und ich werde den ganzen Code aufrufen, der sich in diesem Skript-Tag befindet. Speichern Sie das, springen Sie zu dieser globalen Punkt-js-Datei, die wir erstellt haben. Ich werde es hier reinkleben. Ich werde das speichern und dann zurück zu index.html springen. Ich werde nur die neue Zeile dieses Skript-Tags entfernen. Also haben wir einfach die öffnenden und schließenden Skript-Tags so gestoppt. Und was wir tun können, ist, einfach ein Quellattribut zu den Skripten hinzuzufügen und dann den Pfad zu unserer JavaScript-Datei zu beantworten. Das wird also Schrägstrich Assets Slash js Slash global ab.js sein. Also werde ich das speichern und sehen, ob es noch funktioniert. Also lade ich die Seite neu. Wir sehen immer noch ein Banner zahlen und wenn wir klicken, es, verschwindet immer noch. 41. Responsive CSS (CSS): Okay, Also diese Webseite sieht toll aus jetzt auf dem Desktop, aber es gibt ein paar letzten Schliff. Also möchte ich eine zweite Seite hinzufügen, eine Info Seite, die wir erreichen können, indem Sie auf diesen Link in der Kopfzeile klicken. Nun, zuerst möchte ich diese Webseite reaktionsschnell machen. Ich mache es auf Mobilgeräten gut aussehen. Denn wenn wir unsere Chrome DevTools öffnen, klicken Sie auf dieses kleine Gerätesymbol hier. Wir können aus diesem Dropdown-Menü wählen, ein mobiles Gerät. Ich habe gerade das iPhone 6, 7, 8 plus gewählt. Dies zeigt uns, wie diese Seite auf Mobilgeräten aussieht. Auf dem Kopf sieht es gut aus auf dem Keksbanner, sieht gut aus. Die vierte Zelle sieht gut aus. Nun, diese Produkte sehen nicht sehr gut aus, weil der Text für Mobilgeräte zu groß ist. Und wir haben den ganzen Text so nach links gequetscht. Und wir haben dieses kleine Bild nach rechts gequetscht. Also ist es besser, wenn wir die Textgröße für mobile auf Lager, den Textbereich oben auf dem Bild reduzieren und die Texte über die Breite des Geräts strecken könnten. Und dehnen Sie das Bild auch über die Breite des Geräts. Und wir könnten auch damit tun, ein wenig Platz zwischen den Produkten zu reduzieren. Also zeige ich dir hier einfach die fertige Seite. Und Sie können sehen, dass ich alle Texte reduziert habe, und wir haben jetzt den Textbereich auf dem Bild gestapelt, um das Bild zu dehnen, so dass es viel größer ist, und wir haben den Abstand über und unter jedem Produkt sowie reduziert . Das sieht auf Mobilgeräten viel besser aus. 42. Medien-Abfragen erklärt (CSS): Wie können wir also verschiedene Stile für mobile Geräte hinzufügen? Was wir das mit Medienanfragen tun können. Also werde ich zurück zur Seite springen. Ich komme gerade aus der mobilen Ansicht für den Moment. Und wir werden zur CSS-Datei style.css springen. Und dann am Ende werde ich eine Medienabfrage hinzufügen. Also eine Menge Kommentar hier, der nur Medienabfragen sagt. Und ich werde eine Medienabfrage hinzufügen. Auf einer Medienabfrage erlaubt es uns, einige CSS-Regeln hinzuzufügen. Nur für Geräte sind Browsen mit einer bestimmten Breite. Also hatten wir eine Medienabfrage durch Hinzufügen von Medien. Dann fügen wir einige Klammern, doppelte geschweifte Klammern hinzu. Und in diesen Klammern können wir eine Regel setzen, die dem Browser mitteilt, auf welche Bildschirmgrößen die Regeln, die wir hier einfügen, angewendet werden sollen. Und wir können entweder min-width oder max width verwenden. Also, wenn ich dachte, Mann, Strich Breite, und dann einen Doppelpunkt, und ich kann einen Pixelwert angeben. Wenn ich dies also auf, sagen wir, 500 Pixel setze, werden alle Regeln, die wir hier einfügen, nur auf die Seite angewendet, wenn der Browser breiter als 500 Pixel ist. In diesen doppelten geschweiften Klammern können wir einfach CSS-Regeln wie gewohnt hinzufügen. Wenn wir also das body-Tag anvisieren wollten, wenn Sie nur einen Body-Selektor hinzufügen, lassen Sie uns einfach die Hintergrundfarbe auf Rot setzen. Ich werde das retten. Und wir können sehen, dass der Hintergrund auf rot gedreht wird. Wenn ich die Größe des Browsers auf unter 500 Pixel reduziere, ändert es sich zurück zu warum Again, weil es diese Regel nur hinzufügen wird, wenn der Browser 500 Pixel oder breiter ist. Wir können auch max-Breite anstelle von min-width verwenden. Wenn ich dies also auf maximale Breite ändere und das speichere, dann werden jetzt die Regeln, die wir in dieser Medienabfrage angeben, nur auf die Seite angewendet, wenn der Browser 500 Pixel oder weniger ist. So sind wir derzeit breiter als 500 Pixel. Nun, Sie können sagen, öffnen Sie die Spitze, wir sind etwa 130 Pixel. Wenn wir nach unten gehen, siehe unten 500 Pixel, dann sehen wir die rote Hintergrundfarbe. 43. Eine Media und mobile Stile hinzufügen (CSS): Also werde ich eine Medienabfrage hinzufügen, die Geräte abzielt , die so breit wie ein typisches Tablet im Hochformat sind. So ist eine typische Breite für ein Tablet im Hochformat, wie zum Beispiel das iPad 768 Pixel. Also werde ich dies auf die maximale Breite 768 Pixel setzen. Sichern Sie sich das. Ich werde das nur ein bisschen ausstrecken. Wenn wir also auf die Gerätetaste klicken, wählen wir iPad. Wir können sagen, dass diese Regel angewendet wird. Also werden wir hier einige Regeln hinzufügen, die auf Geräten angewendet werden , die so breit oder weniger sind. Aber wir wollen den Körper nicht auf eine rote Hintergrundfarbe setzen. Also lasst uns diese Regel loswerden und das speichern. Eigentlich sieht dieses Layout ziemlich gut auf einem iPod aus, dass. Also werde ich eigentlich nur auf alle Geräte abzielen, die kleiner sind als das. Also werde ich diesen MUX mit 2767 Pixeln ändern. Sichern Sie sich das. Wir wechseln zu einem der mobilen Geräte wie dem iPhone 6, 7, 8 Plus. Lassen Sie uns also einige Regeln hinzufügen, um dieses Layout zu verbessern. Also, so ist jedes unserer Produkte in einem Artikel-Tag mit einer Klasse von Produkten. Und wenn wir uns das CSS für die Produktklasse ansehen, die Hey ist haben wir diesen Satz, um Flex anzuzeigen wodurch seine direkten untergeordneten Elemente nebeneinander angezeigt werden. Also bewerten wir wollen das Produkt div ausrichten und die Anzeigeeigenschaft auf jemand anderen setzen. Und wir werden es auf Block setzen, was verhindert, dass das Produktelement Zeile ist und es einfach in ein normales Blockelement verwandelt. Also werde ich auf die Medienabfrage springen. Und wir wollen die Produktelemente gezielt ansprechen. Und wir wollen nur die Anzeige auf Block setzen. Und ich werde das retten. Und wir können jetzt sehen dass der Text auf dem Bild übereinander gestapelt sind. Und ich möchte auch die Textgröße ein wenig dieser Überschriften in diesem Absatz reduzieren. Also nach diesem Produkt wird unser Punkt-Produkt H1, weil diese Überschrift in einem hohen ist, werden wir die Schriftgröße reduzieren. Stellen Sie also die Schriftgröße auf 34 Pixel ein und speichern Sie das, und das sieht besser aus. Ich werde auch die Schriftgröße dieses H2 reduzieren. So eine Menge Punkt-Produkt. H2 setzt die Schriftgröße auf 16 Pixel. Speichern Sie das, und ich werde auch den Absatz auf 16 Pixel reduziert. Also machen wir Punktprodukte, zahlen Schriftgröße 16 Pixel, speichern Sie das. Und wir haben ein kleines Problem mit unseren Booten und sagen, dass Mitautor der Boden. Und das ist, weil das acht Umarmungen sind. Und standardmäßig sind ein Tags Inline-Elemente. Und Inline-Elemente sind manchmal Clips wie diese, wenn sie umgebende Elemente sind oder diese übergeordneten Elemente zu klein sind. Und wir können dies beheben, indem wir einfach diese beiden Inline-Block anstelle von aufgeklärt setzen. Also werde ich wieder zu unserem Produkt CSS springen. Wir haben unsere Produkte nav. - Hier. Wir zielen auf diese Links hier, Produkt jetzt VLA. Also werde ich nur diese beiden einstellen. In der Tat, lassen Sie uns einfach die Tastenklasse ändern, so dass wir dieses Problem nirgendwo anders ohne Schadstoffe sehen. Also gehe ich zu unserem wiederverwendbaren Abschnitt auf unserer Schaltfläche. Und wir werden nur dies festlegen, um Inline-Block anzuzeigen, Speichern Sie, dass diese Schaltflächen sind jetzt nicht mehr. Clips sind die Basu. Okay, also möchte ich auch die Polsterung auf diesen Produkten reduzieren , weil dieser Platz ein bisschen zu groß für mobile Soldaten ist. Zurück zu unserer Medienabfrage. In unserem Produkt wählt eine Menge Putting Eigenschaft und das Padding ist derzeit auf eine 100 Pixel auf der Oberseite und 0 auf der Seite eingestellt. Lassen Sie uns dies also auf 30 Pixel oben und 0 auf der Seite reduzieren. Und wir haben jetzt einen vernünftigeren Platz zwischen jedem Produkt, aber wir haben immer noch ziemlich viel Platz an der Spitze des ersten Produkts. Denn wenn wir zu unserem anfänglichen CSS zurückspringen, verwenden wir diesen ersten untergeordneten Pseudo-Selektor um dem ersten Produkt in der Liste etwas aufzufüllen, und das ist derzeit auf 20 Pixel gesetzt. Also werde ich diese Regel einfach kopieren. Wird es unten einfügen, sind produktiv in der Medienabfrage. Und wir werden das auf 0 reduzieren. Und ich werde das retten. Und jetzt haben wir etwas weniger Platz an der Spitze der Büroprodukte. Okay, also bin ich glücklich damit, jetzt denke ich, dass das auf Handy ziemlich gut aussieht. Sieht immer noch gut auf dem Desktop aus. 44. Über die Seite hinzufügen (HTML und CSS): Okay, das letzte, was ich tun möchte, ist eine zweite Seite zu dieser Website hinzuzufügen. Also eine Über Seite, die wir erreichen können, indem Sie auf diesen Link in der Kopfzeile klicken. Also werde ich zu index.html springen, zum Header springen. Hier ist unser About Link, der in der Kopfzeile ist. Ich möchte den Hassentwurf ändern, um über Punkt-HTML zu schlüpfen. Und das wird unsere über Seite sein. Also werde ich das retten. Wir werden die Sidebar öffnen. Dann werde ich mit der rechten Maustaste auf die Datei index.html klicken. Klicken Sie auf Kopieren. Und ich mit der rechten Maustaste und klicke auf Einfügen. Und dann werde ich diese Datei umbenennen, ist nur zu Punkt HTML erstellt. Wenn wir auf den Link über klicken, können wir in der Browserleiste sehen, wir sind jetzt auf Über Punkt HTML. Wir sind derzeit diese Seite ist genau die gleiche wie unsere Homepage. Also lassen Sie uns zu etwa Punkt HTML springen. Es wird die Seitenleiste verstecken. Ich werde nur alles in diesem Abschnittelement mit einer Klasse von Constraint entfernen , die derzeit alle diese Produkte hat. Also werde ich einfach alles auswählen, löschen Sie das. Und stattdessen werde ich einen Artikel mit einer Klasse von Konzeptkosten hinzufügen. Dies wird eine Inhaltsseite sein. Ich werde etwas Inhalt da drin stecken. Also noch eine, und ich werde nur etwa Orange da reinlegen. Eine Menge von Absatz-Tags mit einigen Lorem Ipsum. Nur gehen, um den Zeilenumbruch zu aktivieren, indem Sie auf Ansicht umschalten Zeilenumbruch. Ich werde nur diesen Absatz kopieren. Fügen Sie ein paar mehr in. Vielleicht könnten wir unten eine dieser weißen Buttons haben , die zurück zur Homepage verlinken. Also viel, ein, ein Tag mit einer Klasse von Taste, eine Klasse von Watson, gestricheltes Weiß geben Sie in das heat href Attribut ein. Wir wollen nur nach Hause. das zu tun, können wir einfach auf den Weg nach vorne Schrägstrich gehen. Und dann für die Texte in dem Buch und ich werde einfach nach Hause gehen. Und ich werde das retten. Und wir haben jetzt About Seite kann zurück auf die Homepage springen. Allerdings ist dieser Text ein wenig zu klein und so könnte ich einfach die Textilien von Up-Produkten entführen. Also werde ich zurück zu style.css springen, zu unseren Produkten, Textilien springen. Also hier sind wir Produkttexte H1, H2, und zahlen. Wir haben hier gerade einen Artikel mit einer Klasse von Inhalten erstellt. Was wir hier tun könnten, ist, jedem dieser Regeln einen zusätzlichen Selektor hinzuzufügen. So wie auch Produkttexte h, Nun konnten wir Inhalt ein hinzufügen. Und dann auf dieser Seite könnten wir Dot Content Seite zwei machen. Und dann Komma Punkt-Konzept, um diese Stile zu stehlen oder zurück zur About Seite zu springen. Speichern Sie das. Und jetzt haben wir einen schönen großen Text. Wir müssen jedoch auch unsere Medienabfragen aktualisieren da dieser Text für ein Handy etwas zu groß ist. Also werde ich zu unserer Medienabfrage springen. Und wieder wird diese Stile hier zu entführen. Also nach diesem Produkt H1, werden wir Punkt Inhalt H1 starten. Und dann auf dieser Einpunktkonsole Seite zwei. Und dann wird auf diesem einen Punkt Inhalt zahlen sagen , dass der Text schön und klein und mobil aussieht. Schön und groß auf dem Desktop. 45. Ein Doctype hinzufügen (HTML): Es gibt eine wichtige Sache, die ich zu Beginn dieses Videos vergessen habe, nämlich eine DOCTYPE Deklaration an die Spitze unserer HTML-Seiten hinzuzufügen. Wenn Sie also einfach index.html direkt am Anfang dieser Datei öffnen, müssen wir einen Doctype hinzufügen. Doctype teilt dem Browser mit, welche Art von HTML-Seite dies ist, wo HTML5 hier verwendet wird. Also müssen wir HTML5 Doctype an den Anfang jeder unserer Seiten hinzufügen. Um dies zu tun, fügen wir einfach die linke Winkelklammer und dann Ausrufezeichen und den DOCTYPE in Großbuchstaben hinzu, dann ein Leerzeichen und dann HTML in Kleinbuchstaben und dann eine schließende Winkelklammer. Und ich werde das retten. Ich werde das auch kopieren und über kein HTML öffnen und es auch an den Anfang dieser Datei hinzufügen und speichern. Und das hat ein leichtes Problem mit unserem Header verursacht. Wir haben mehr Platz am unteren Ende unseres Kopfes und draußen. Und das liegt daran, dass wir dieses Bild hier haben. Standardmäßig sind Bilder in HTML5 Inline-Elemente, die ein wenig Platz am unteren Rand haben. So können wir dies beheben, indem wir dieses Bild auf ein Blockelement mit der display-Eigenschaft setzen. Also, wenn Sie einfach zu Assets, CSS, style.css gehen, scrollen Sie nach unten zu den Header-Stilen und Sie können sehen, wo dieses Bild hier ausgerichtet ist, wo wir seine Breite einstellen. Und wir wollen hier nur eine neue Regel hinzufügen, Beginn anzeigen nicht blockieren, und ich werde das speichern. Der Header ist jetzt fixiert.