Build 10 vollständige und moderne UI-Design-Vorlagen

1. Einführung: Willkommen zu dem brandneuen Kurs, in dem Sie lernen können, wie Sie moderne und schöne Designvorlagen für Ihre Websites erstellen . Wenn Sie Ihr Portfolio aufbauen und anpassen möchten, ein erfahrener Entwickler werden und eingestellt werden möchten, dann ist dies der richtige Kurs für Sie. Wir werden gemeinsam zehn Mega- und Konflikt - und Responsive-Websites mit den drei Kerntechnologien HTML, CSS und Java erstellen zehn Mega- und Konflikt - und Responsive-Websites mit den drei Kerntechnologien HTML, . Wenn Sie über einige Grundkenntnisse dieser Technologien verfügen und immer noch Probleme beim Erstellen ihrer Websites haben. Oder wenn Sie Ihre Fähigkeiten als Entwickler und Designer verbessern möchten , sind Sie bei uns genau richtig. Wir haben diesen Kurs entwickelt, um den Studierenden die besten Erfahrungen drei Kerntechnologien zu bieten und ihnen die Möglichkeit zu geben, die besten Designvorlagen zu erstellen , denen sie ihre Kunden begeistern Wir werden Tangy für unvollständige Websites erstellen und nicht alle Teile davon von Grund auf neu Sie werden voller moderner, schöner und schöner Effekte und Designs sein. Wir werden mit relativ einfachen Projekten beginnen und uns auch mit einigen fortgeschrittenen Teilen befassen. Wir können Ihnen garantieren , dass Sie nach Abschluss dieses Kurses die Frontend-Webentwicklung beherrschen werden die Frontend-Webentwicklung . In diesem Kurs können Sie sich inspirieren lassen, die Ihnen helfen wird, Ihre Projekte zu verbessern und sie in Ihr Portfolio aufzunehmen. Beherrschen Sie nur diese Kerntechnologien der Frontend-Webentwicklung Du kannst tolle und moderne Themes erstellen und einfach angestellt werden. Außerdem werden Sie über genügend Wissen verfügen, um weiterzumachen und andere Technologien wie einige Frontend-Frameworks und Bibliotheken zu erlernen andere Technologien wie , die heutzutage sehr beliebt und sehr gefragt sind Der Kurs ist definitiv nicht klein. Seien Sie also geduldig und versuchen Sie, das Beste aus diesem Kurs herauszuholen , ohne den Code einfach zu kopieren und einzufügen Wenn ich an deiner Stelle wäre, würde ich auf jeden Fall von einem Kurs wie diesem träumen. Also schließ dich uns an 2. SET-UP: Hallo und willkommen zum Kurs. Wir freuen uns, dass Sie hier sind und hoffen, dass Ihnen der Kurs gefällt , bevor wir tiefer tauchen und mit der Erstellung unserer Projekte beginnen. Zuallererst müssen wir unser Arbeitsumfeld vorbereiten. Ich bin mir sicher, dass die meisten von Ihnen bereits bereit sind , den Code zu schreiben. Wenn ja, können Sie dieses Video gerne überspringen und sofort mit den Projekten beginnen. Aber wenn nicht, dann ist das nicht das Problem. Lassen Sie uns weitermachen und einige Tools einrichten. In diesem Kurs benötigen wir zwei Haupttools, nämlich einen modernen Webbrowser und einen Texteditor. Als Webbrowser werde ich hauptsächlich Google Chrome verwenden. Und in einigen Fällen benötigen wir auch die Hilfe von Mozilla Firefox. Ich bin mir sicher, dass Sie bereits wissen, wie man diese Webbrowser installiert, und ich denke, Sie haben sie alle bereits. Aber wie dem auch sei, schauen wir uns an, wie man sie herunterlädt. Um Google Chrome zu erhalten, müssen wir hier zu dieser URL gehen und den Webbrowser herunterladen. Der Installationsvorgang ist ziemlich einfach, daher werde ich ihn nicht durchführen. Für Mozilla Firefox müssen Sie diese URL verwenden und den Webbrowser von hier herunterladen Beide Links werden dieser Vorlesung beigefügt. In Ordnung, lassen Sie uns weitermachen und über den Texteditor sprechen. Wir werden Visual Studio Code verwenden, weil es derzeit einer der besten Texteditoren der Welt ist. Natürlich können Sie sich frei fühlen und Ihren Lieblingstexteditor verwenden. Es liegt an Ihnen, aber ich empfehle, den VS-Code zu verwenden. Um den VS-Code herunterzuladen, müssen Sie diese Website besuchen und den Texteditor entweder für Windows oder Mac oder Linux herunterladen. Dieser Link wird ebenfalls dieser Vorlesung beigefügt. Der Installationsvorgang von Visual Studio Code ist ebenfalls sehr einfach, daher bin ich mir sicher, dass er damit keine Probleme haben wird. In Ordnung, sobald Sie beide Tools installiert haben, können Sie loslegen Also lasst uns gleich zu den Projekten springen 3. Projekt 1 - Projektvorschau: Ordnung, sobald wir alle benötigten Tools eingerichtet haben, wir jetzt mit der Erstellung unseres ersten Projekts beginnen In dem Projekt wird es um einige Lebensmittel gehen. Ich meine, so etwas wie der Verkauf verschiedener Lebensmittel. Und es wird aus ein paar verschiedenen Abschnitten bestehen. Bevor wir anfangen, den Code zu schreiben, werde ich das Projekt durchgehen und jeden Abschnitt beschreiben. Der erste Abschnitt wird die Diashow mit verschiedenen Schriftarten und Awesome-Symbolen Als nächstes folgt der Kartenbereich, in dem wir drei verschiedene Karten mit 3D-Formen und auch mit einigen schönen Schwebeeffekten haben werden drei verschiedene Karten mit 3D-Formen und auch mit einigen schönen Schwebeeffekten Als nächstes kommt die Galerie. Sie besteht aus sechs verschiedenen Galerieobjekten. Wir haben hier Bilder mit mehrstufigen Schatteneffekten. Wenn wir den Mauszeiger über sie bewegen, werden einige Informationen mit schönen und coolen Effekten angezeigt Danach haben wir einen einfachen Filter mit einigen Textelementen und ein Eingabefeld mit einer Schaltfläche. Ordnung, das sind also alle Abschnitte, die wir erstellen werden Aber außerdem haben wir hier eine nette Navbar. Sie können hier das Menüsymbol sehen. Wenn ich darauf klicke, wird es von der Nummer oben auf der Webseite angezeigt. Und die Navigationselemente werden mit einigen schönen Fade-Effekten angezeigt . Wenn ich zurück auf das Symbol klicke, wird sich Albert nicht verstecken. Okay, das war's mit den Projekten. Wir werden es mit einem Desktop-Force-Ansatz erstellen. Ich meine, es wird auf einem extra großen Bildschirm basieren, aber dann werden wir es für verschiedene Bildschirmgrößen anpassen. Wenn ich mir die Seite anschaue und das Projekt auf verschiedenen Bildschirmgrößen überprüfe, werden Sie feststellen, dass es responsiv ist und gut aussieht. Eine weitere Sache, die zu beachten ist, ist, dass das Projekt, wie gesagt, auf einem extra großen Bildschirm basiert. Wenn Sie also die relativ kleinere Bildschirmgröße als das Projekt verwenden , sieht das während der Vorlesungen möglicherweise nicht gut aus. Aber am Ende des Tages müssen Sie sich keine Sorgen machen, wir werden dafür sorgen, dass es reaktionsschnell ist. In der Zwischenzeit können Sie den Responsive-Modus verwenden, Breite und Höhe auf 1920 Pixel und 1080 Pixel einstellen und den Videos folgen. Das Letzte, was ich erwähnen möchte, ist, dass Sie diese Starter - und Endquelldateien herunterladen können . Sie sind dieser Vorlesung beigefügt. Lass uns weitermachen. 4. Projekt 1 - HTML-Markup für die Landung erstellen und gemeinsame Stile definieren: In Ordnung, wir sind bereit, mit dem Bau unserer Projekte zu beginnen. Ich habe auf dem Desktop einen neuen Ordner namens Foods erstellt, in dem ich einen weiteren Ordner für die Bilder habe. Lassen Sie uns weitermachen und diesen Ordner im VS-Code öffnen. Das erste, was ich tun werde, ist, unsere Arbeitsdateien für HTML, CSS und JavaScript zu erstellen . Ich nenne sie index.html, style.css, script.js. Öffnen Sie dann die Datei index.html und erstellen Sie ein einfaches HTML-Dokument. Dafür verwende ich ein integriertes VS-Codepaket namens Image. Wir müssen das Urin-Ausrufezeichen platzieren und die Tabulatortaste oder die Eingabetaste drücken Also los geht's. Wir haben hier die grundlegenden HTML-Tags. Lassen Sie uns zunächst den Titel ändern. Ich füge hier Lebensmittel ein. Als Nächstes verknüpfen wir CSS - und JavaScript-Dateien. Also werde ich den Link-Tag öffnen. Und dann müssen wir hier den Pfad der Datei angeben. Wir brauchen nur den Namen der Datei, style.css. Was das JavaScript angeht, öffne ich das Script-Tag direkt über dem abschließenden Body-Tag. Und im Quellattribut müssen wir script.js angeben. Außerdem werde ich hier noch einen Link für Font, Awesome Icons einfügen. Gehen wir also zu Google und suchen nach Font Awesome, CDN, JS und holen uns von hier aus den ersten Link Öffnen Sie dann ein Link-Tag in den Kopfelementen und fügen Sie den Link als Wert des h-Referenzattributs ein. Okay, also alle drei Dateien sind miteinander verbunden und jetzt ist es an der Zeit, das Projekt im Browser auszuführen. Dafür verwende ich eines der VS-Codepakete, das als Live-Server bezeichnet wird Damit können wir das Projekt live im Browser ausführen und Aktualisierungen und Änderungen vornehmen, ohne die Seite jedes Mal zu Aktualisierungen und Änderungen vornehmen, ohne aktualisieren. Okay, zum Schluss werde ich den Texteditor und den Browser so platzieren . Und fang an. Wir werden das Projekt Abschnitt für Abschnitt aufbauen. Wir erstellen das Markup für jeden Abschnitt und gestalten dann jeden Abschnitt. Ich fange mit dem ersten Abschnitt an. Es besteht aus der Überschrift und ein paar Font Awesome-Symbolen, die, wie Sie sehen können, gut animiert sind Lassen Sie uns also weitermachen und mit der Erstellung des HTML-Markups beginnen . Lassen Sie uns zunächst die div-Elemente öffnen, die der Container sein werden. Weisen wir ihm ein Container-Event mit Klassennamen zu. Ich füge Ihre Kommentare in den ersten Abschnitt ein. Und Abschnitt eins. Öffnen Sie dann das Abschnittselement mit einer Klasse, Abschnitt eins. Wie gesagt, dieses Abschnittselement wird die Überschrift und einige Font Awesome-Symbole enthalten . Öffnen wir also das H1-Überschrift-Tag mit der Überschrift des Klassenabschnitts . Wie der Inhalt. Lassen Sie uns eine Vielzahl von Lebensmitteln einfügen. Als Nächstes müssen wir Ihre Schrift, Awesome Icons, einfügen. Aber zuerst öffnen wir das div-Tag, das die Hülle dieser Icons sein wird Ich werde ihm Symbole für den ersten Abschnitt der Klasse zuweisen. Insgesamt werden wir also zehn verschiedene Icons haben. Lassen Sie uns also weitermachen und sie schnell erstellen. Ich eröffne, ich tagge mit den Klassen FAS, FAA Ei. Dann lassen Sie uns diese Codezeile neunmal duplizieren und schnell die Klassennamen ändern. Die zweite wird Stroop-Waffel sein. Dann essen wir Käse, Hotdog. Der nächste wird Drumstick Byte sein. Dann essen wir Apfel raus, Eiscreme. Als nächstes essen wir Fisch, Plätzchen und Geschwister. Ordnung, das war's also mit dem HTML-Markup des ersten Jetzt müssen wir anfangen, etwas CSS zu schreiben. Während dieses Projekts werde ich eines der Google-Telefone verwenden, das als Non-Metal bezeichnet wird Gehen wir also auf die Google Fonts-Website und suchen wir nach Nieto Dann werde ich mir hier alle Styles außer Italica schnappen alle Styles außer Italica Also lassen Sie uns sie überprüfen. Dann. Ich hole mir die URL. Dafür. Wir müssen auf Import klicken und dann diese URL hierher kopieren. Fügen wir es in die CSS-Datei ein. In Ordnung, als Nächstes werde ich ein paar gängige und standardmäßige Stile erstellen ein paar gängige und standardmäßige Stile Also werde ich Ihre Kommentare einfügen. Gängige Stile. Dann Ende der üblichen Stile. Wählen Sie dann jedes Element dafür aus. Ich werde ein Sternchen verwenden. Also werde ich zuerst den Standardrand und das Padding von jedem Element entfernen Standardrand und das Padding von jedem Element Setze beide auf Null. Dann lege ich die Größe der Boxen fest. Grenzbox. Entfernen Sie auch die Standardwerte in den Zeilen der Link-Elemente. Dafür müssen wir Textdekoration verwenden . Wir kriegen keinen Gegenwert. Entfernen Sie dann die Standardkontur. Wir müssen es auf Null setzen. Ändern Sie auch die Schriftfamilie. Stellen wir es auf das neue Nieto sans-Serif um. Und schließlich ändern Sie die Schriftstärke. Ich mache 400 draus. Ordnung, wie Sie sehen können, werden einige der üblichen Stile auf die Elemente angewendet Als Nächstes lege ich die Schriftgröße fest. Während dieses Projekts werde ich also eine Rampe als Maßeinheit verwenden. Standardmäßig entspricht ein RAM 16 Pixeln, da die Schriftgröße des HTML-Elements 16 Pixeln entspricht. Ich werde einen Lauf in zehn Pixel umwandeln. Und um das zu tun, müssen wir die Schriftgröße des HTML-Elements verringern. Wir müssen es auf 62,5 Prozent bringen. In diesem Fall entspricht ein RAM also zehn Pixeln. Okay? Wie Sie sehen können, wurden die Elemente kleiner und hatten tatsächlich einen gemeinsamen und standardmäßigen Stil. Wir sind fertig. Lassen Sie uns weitermachen und mit dem ersten Abschnitt beginnen 5. Projekt 1 - Style Landing Page und erstelle eine Diashow: Also werde ich das Abschnittselement selbst anpassen. Aber zuerst fügen wir hier neue Kommentare ein, Abschnitt eins. Und aus Abschnitt eins. Wählen Sie dann Abschnittselemente aus. Also werde ich zuerst die Breite und Höhe festlegen. Machen wir mit wie habe ich präsentiert. Das ist wahrscheinlich Höhe. Ich mache es zu 100 Prozent aus dem Viewport. Stellen wir es daher auf 200 VH ein. Dann ändere die Hintergrundfarbe. Lass uns deine Farbe 333 verwenden. Okay, es ist also zu sehen, dass dieser erste Abschnitt auf die gesamte Seite ausgedehnt wurde und die Hintergrundfarbe geändert wurde. Als Nächstes platziere ich den Inhalt in der Mitte. Und dafür werde ich Flexbox verwenden. Wir müssen die Display-Eigenschaft auf Flex setzen. Gerade jetzt. Elemente werden horizontal in einer Reihe angeordnet, und eigentlich brauchen wir sie nicht. Also müssen wir die Biegerichtung und die Spalte Make It ändern . Weiter. Um die Elemente horizontal in der Mitte zu platzieren , müssen wir die Option Elemente mittig ausrichten verwenden. Die Elemente werden also in der Mitte platziert. Und jetzt füge ich etwas Abstand zwischen ihnen hinzu. Dazu verwenden wir die Eigenschaft justify content mit einem gleichmäßigen Wertebereich. In Ordnung, lassen Sie uns das Abschnittselement betrachten. Lassen Sie uns weitermachen und die Überschrift anpassen. Ich wähle es aus. Stellen wir zunächst die Schriftgröße auf 12 RAM ein. Ändern Sie auch die Schriftstärke. Ich werde die Überschrift fett machen. Setzen wir es auf 900. Ändere auch die Farbe, mach es weiß. Und ich werde den Text in der Mitte ausrichten. Danach lassen Sie uns Ihre Wörter mithilfe der Texttransformation großschreiben mithilfe der Texttransformation Außerdem werde ich etwas Abstand zwischen den Buchstaben schaffen , indem ich den Buchabstand mit dem Wert 0,5 Miete verwende Okay, lassen Sie uns zum Schluss einen kleinen Schatteneffekt erzeugen. Ich werde Text Shadow mit einem Wert von 0,3 RAM dreimal verwenden . Und als Farbe füge ich hier 000 hinzu, das ist das schwarze Hallo. Ordnung, die Überschrift ist also angepasst und jetzt müssen wir weitermachen und uns um die Icons kümmern Lassen Sie uns also weitermachen und sie auswählen. Lassen Sie uns zunächst die Schriftgröße erhöhen, 35 RAM und dann die Farbe ändern. Ich nehme deine Farbe, einen 7982d. Okay, wir haben hier unsere Icons, sie sind viel größer und nenne es wie du dich erinnerst, diese Icons sollten in der Mitte platziert werden und wir müssen sie animieren Zuerst. Lassen Sie uns ihnen die absolute Position zuweisen. Im Moment werde ich also übereinander gelegt. Dies passiert, weil Position Absolute standardmäßig die Elemente aus dem normalen Seitenfluss herausspringt die Elemente aus dem normalen Seitenfluss Außerdem müssen wir die Positionen der Icons korrigieren. Ich denke, im Moment wäre es besser wenn wir alle Symbole bis auf eines ausblenden, weil das unseren Arbeitsprozess komfortabler macht. Also werde ich alle Icons außer dem ersten auskommentieren . Gleich danach. Lassen Sie uns die Position des Symbols korrigieren. Wir müssen es in der Mitte platzieren. Also müssen wir es ein bisschen nach oben und nach links bewegen . Verwenden wir dazu die Transformationseigenschaft mit der Übersetzungsfunktion. Tatsächlich ermöglicht uns eine Funktionsstörung , die Elemente in horizontaler oder vertikaler Richtung zu bewegen . Ich meine, nach X-Achse und Y-Achse. Wie die Werte. Lassen Sie uns -50 Prozent für beide Richtungen festlegen. In Ordnung, das war's mit der Position des Symbols. Abschließend möchte ich seinen Schatteneffekt verstärken. Verwenden wir also wieder Textschatten. Platziere deinen Punkt im RAM oder dreimal. Verwenden Sie erneut schwarze Farbe. In Ordnung? Wie ich sehen kann, sind die Symbole angepasst und jetzt ist es an der Zeit , die Diashow zu erstellen Lassen Sie uns zunächst alle Symbole zurückholen. Also werden wir die Symbole mithilfe der Skalierungsfunktion aus- und einblenden . Lassen Sie uns zunächst alle Symbole ausblenden. In der Standardeinstellung ist der Wert für die Skalenfunktion auf eins gesetzt. Und um die Elemente zu verbergen, müssen wir die Skala auf Null setzen Also jetzt das Ikosaeder Als Nächstes zeige ich das erste Symbol an da die Diashow mit dem ersten Symbol beginnt Dafür werde ich dem ersten Symbol einen zusätzlichen Klassenwechsel zuweisen . Und dann wähle ich den ersten aus, den ich mit diesem Klassennamen verwenden kann. Wir brauchen Symbole für Abschnitt eins. Ich ändere mich. Um das Symbol sichtbar zu machen. Wir müssen die Skala auf eins setzen. Aber außerdem müssen wir die Übersetzungsfunktion erneut verwenden, da sie sonst überschrieben würde und sich die Position des Symbols ändern würde In Ordnung? Das erste Symbol ist sichtbar und alle anderen konserviere ich, erhitze sie. Jetzt müssen wir die Slideshow erstellen, und dafür verwende ich JavaScript Lassen Sie uns also weitermachen und die Datei script.js öffnen. Um zwischen den Symbolen zu wechseln. Wir müssen eine Edge-Klassenänderung an allen Symbolen der Reihe nach und auch mit einem gewissen Intervall entfernen . Als erstes müssen wir alle Symbole auswählen. Lassen Sie uns also weitermachen und eine neue Variable erstellen. Ich rufe die Icons an. Um sie auszuwählen, verwende ich eine der Methoden, die als Abfrageselektor bezeichnet werden als Abfrageselektor bezeichnet Alles, was wir hier brauchen, ist der Klassenname: Abschnitt 1, Icons, gefolgt vom Ion. Im Allgemeinen gibt die Methode Query Selector, All ein Array-ähnliches Objekt mit dem Namen Note Least zurück ein Array-ähnliches Objekt mit dem Namen Seine Elemente haben auf Null basierende Indexnummern wie Array. Außerdem hat dieses Objekt eine Längeneigenschaft, die wir etwas später verwenden werden. Wie gesagt, wir werden die Symbole mit einigen Integralen verschieben. Ich werde eine der eingebauten Methoden namens setInterval verwenden der eingebauten Methoden namens setInterval Es ermöglicht uns, die Funktion in einigen Intervallen immer wieder auszuführen . Diese Methode benötigt also zwei Argumente. Die erste wird eine Callback-Funktion sein, die immer wieder ausgeführt wird Was das zweite Argument betrifft, so wird es die Zeitdauer sein und es sollte in Millisekunden ausgedrückt werden In unserem Fall setze ich das Intervall auf 4.000 Millisekunden Okay, wie du dich erinnerst, hat das erste Symbol gerade einen Klassenwechsel Wir müssen dieses Symbol auswählen , um die Klassenänderung daraus zu entfernen, und dann die Klasse zum nächsten Symbol hinzufügen. Lassen Sie uns also weitermachen und eine neue Variable erstellen. Ich nenne es Icon. Verwenden Sie dann die Abfrage und wählen Sie eine Methode aus , um das Element auszuwählen. Wählen wir dieses Element mithilfe des Klassenwechsels aus. Danach mussten wir auf die Klassen dieses Symbols zugreifen, um die Klassenänderung zu entfernen . Also werde ich eine der Eigenschaften verwenden die Klassenliste heißt. Es gibt uns alle Klassen , die das Element hat. Wir müssen es an das Symbol anhängen. Und jetzt müssen wir eine der Methoden verwenden, die als entfernt bezeichnet werden. Geben wir hier den Klassenwechsel an. Jetzt, nach 4 s, wird der Gegenstand ausgeblendet da der Klassenwechsel entfernt wird. Okay, als Nächstes müssen wir andere Symbole ein - und ausblenden. Dazu müssen wir Zugriff auf das nächste Symbol erhalten. Um das zu tun, verwende ich eine der Eigenschaften, die als nächstes Element Sibling bezeichnet wird Lass es uns an das Symbol anhängen. Andererseits müssen wir auf die Klassen dieser Elemente zugreifen. Und schließlich müssen wir zu jeder Klassenänderung etwas hinzufügen. Eigentlich möchte ich den gesamten Zyklus der Slideshow zeigen den gesamten Zyklus der und ich möchte es schnell machen Lassen Sie uns also 4 s in eins umwandeln. Wie ich sehe, ändern sich die Symbole nach jeder Sekunde. Wenn ich mir die Seite anschaue und die Elemente ansehe, wirst du sehen, wie Klassenwechsel hinzugefügt werden und zwar unabhängig von jedem Symbol. Sobald es vom letzten Symbol entfernt wurde, erhalten wir eine Fehlermeldung, die besagt, dass die Eigenschaftsklassenliste von Null nicht gelesen werden kann. Das passiert, weil das letzte Symbol kein nächstes Geschwistersymbol Um dieses Problem zu beheben, müssen wir einige zusätzliche Arbeit leisten, da es irgendwie jeden Schalter des Symbols verfolgt. Dafür erstelle ich eine neue Variable. In diesem Fall deklariere ich es mit einem Hauptschlüsselwort, da der Wert dieser Variablen geändert wird. Diese Variable wird ein Zähler sein und ich setze sie standardmäßig auf eins. Bei jeder Ausführung der Funktion und bei jeder Änderung sollte dieser Kommentar also um eins erhöht werden. Sobald es größer als die Länge der Symbole ist, sollten wir den Zähler wieder auf eins setzen. Außerdem müssen wir das erste Symbol mit Hintergrundbeleuchtung anzeigen. Um den Wert also um eins zu erhöhen, müssen wir den Inkrementsoperator verwenden , der durch zwei Pluszeichen ausgedrückt wird Als Nächstes müssen wir eine IF-Aussage erstellen. Und als Bedingung müssen wir überprüfen, ob I größer als die Punktlänge des Symbols ist. Wenn diese Bedingung also zutrifft, bedeutet das, dass ein Zyklus der Diashow beendet war Wir müssen also das erste Symbol wieder anzeigen und den Zähler auf eins setzen. Um auf das erste Symbol zuzugreifen, verwende ich die Knotenlistensymbole. Und dann müssen wir die Indexnummer des ersten Symbols angeben , die Null sein wird. Dann brauchen wir wieder mindestens Klasse als die Methode add. Und wir müssen hier die Änderung des Klassennamens angeben. Außerdem müssen wir die Variable IBEC auf eins setzen. Okay? Wenn diese Bedingung also nicht zutrifft , müssen wir diese Codezeile ausführen. Lassen Sie uns also Else-Statements erstellen und hier diese Codezeile einfügen. Okay? Sobald der gesamte Zyklus vorbei ist, beginnt er von vorne. Sie können es hier in Dev Tools sehen. In Ordnung, wir sind fast fertig mit der Diashow. Das einzige, was getan werden muss, ist , einen Übergangseffekt hinzuzufügen. Verwenden wir also Transition. Dann. Wir müssen hier die Transformation angeben. Und als Dauer füge ich hier 0,3 s hinzu . Außerdem müssen wir unten noch den Übergang hinzufügen. Denn sobald die Skala des ICD-10s abgenommen hat, sollte das nächste Icon 4,3 s warten. Daher benötigen wir eine gewisse Verzögerungszeit benötigen wir eine gewisse Lassen Sie uns also Ihre 0,3 s einsetzen. Wie Sie sehen, haben wir jetzt einen viel schöneren Effekt Und das Einzige, was ich tun werde, ist, die Uhrzeit zu ändern und es auf 4 s zu stellen . In Ordnung, das war's Wir sind mit dem ersten Abschnitt fertig. Lass uns weitermachen und uns um den nächsten kümmern. 6. Projekt 1 - 3D-Karten erstellen und stillieren: Der nächste Abschnitt , den wir erstellen werden, wird der Kartenbereich sein. Wir werden eine Abschnittsüberschrift und drei verschiedene Kosten haben. Sie werden einige beliebte Mahlzeiten darstellen. Die Karten werden 3D-Formen haben und außerdem verschiedene Elemente wie Bilder, Namen und Schaltflächen enthalten . Sobald wir den Mauszeiger über die Karten bewegen, bewegen sie sich leicht nach oben und es entsteht ein gewisser Schatteneffekt In Ordnung, schauen wir uns diesen Abschnitt an. Lassen Sie uns anfangen, ein HTML-Markup zu erstellen. Fügen wir neue Kommentare ein, Abschnitt zwei und Abschnitt zwei. Öffnen Sie dann die Abschnittselemente. Ich werde ihm die zweite Klasse zuweisen. Als Nächstes erstelle ich ein H1-Überschriftenelement. Eigentlich wird diese Überschrift der vorherigen ähnlich sein. Sie werden die gleichen Stile haben. Also werde ich ihm den gleichen Klassennamen, die Abschnittsüberschrift, zuweisen . den Inhalt angeht, lassen Sie uns hier beliebte Gerichte zusammenstellen. Also werde ich mir diese Handtücher mit dieser Abschnittsüberschrift schnappen und sie in gängige Stile einfügen. In Ordnung, also wie gesagt, wir werden drei verschiedene Karten haben Ich werde sie mit einem Div-Element umwickeln, das als Kartencontainer dienen wird. Als Nächstes öffne ich ein weiteres div-Tag, das die eigentliche Karte sein wird. Es ist also seiner Klassenkarte zugewiesen. Wie gesagt, die Karte wird aus drei verschiedenen Elementen bestehen. Das erste wird ein Bild sein. Es ist also Open Image Tag. Dann wählen wir im Quellattribut das Bild aus, das wir hier benötigen, Karte IMG eins. Und außerdem werde ich einer Image-Klasse namens IMG zuweisen. Okay, als Nächstes haben wir den Kartennamen , der durch die Überschrift dargestellt wird. Öffnen wir das h3-Heading-Tag mit einer Klasse namens name. Was den Inhalt angeht, fügen wir ihn hier ein. Sagen wir Fisch. Lassen Sie uns abschließend hier unten erstellen. Ich werde ihr eine Klasse namens BTN zuweisen. Was den Inhalt angeht, machen wir ihn jetzt zu einer Grenze. In Ordnung, hier haben wir unsere erste Karte. Sie können auch feststellen, dass die Überschrift überall in diesem Stil befindet, da wir sie demselben Klassennamen, der Abschnittsüberschrift, hinzufügen. Wie gesagt, wir werden drei Karten haben. Also werde ich die Karte zweimal duplizieren und die Bildnamen und auch die Namen der Karten ändern . Also brauchen wir hier img2, Cake und dann IMG Three, Hummer Okay, schauen wir uns das HTML-Markup an. Lassen Sie uns diesen Abschnitt anpassen. Ich werde neue Kommentare einfügen, Abschnitt zwei und Abschnitt zwei. Wählen Sie dann das Abschnittselement aus. Also werde ich zunächst Breite und Höhe definieren. Ich werde es jetzt viel zu hart ansetzen. Für die Höhe. Ich mache es zu 100 Prozent aus dem Viewport. Also lass uns 3.200 Vh. Und ändere auch die Hintergrundfarbe. Ich werde auch eine neue Farbe verwenden. In Ordnung, als Nächstes werde ich Elemente mit Flexbox ausrichten. Ich meine die Überschrift der Elemente und den Behälter der Karten. Also brauchen wir hier Display-Flex. Wie Sie wissen, werden Elemente nebeneinander platziert. In diesem Fall müssen wir also die Richtung ändern. Machen wir es zu einer Kolumne. Außerdem werde ich mithilfe von Justify Content etwas Abstand zwischen den Flex-Elementen schaffen . Abstand dazwischen. Und schließlich schaffen Sie mithilfe von Polstern etwas Platz in diesem Abschnitt Setzen wir es oben und unten auf zehn Rem und links und rechts auf Null. Okay, schauen wir uns dieses Abschnittselement an. Als Nächstes kümmere ich mich um die Karten. Wählen wir zunächst den Container aus. Ich lege die Karten nebeneinander in eine Reihe. Dafür. Auch hier werde ich Flexbox verwenden. Um dann etwas Abstand zwischen den Objekten zu schaffen, verwende ich Inhalt mit einem gleichmäßigen Werteabstand Okay, also die Karten werden horizontal in einer Reihe angeordnet, und jetzt werde ich die Karte selbst anpassen Wählen wir es aus. Zuerst. Ich definiere Breite. Machen wir es zum Laufen. Und dann ändere die Hintergrundfarbe. Ich werde deine Farbe a 79, a bis D verwenden . Wie du siehst, sind die Bilder momentan zu groß. Also lasst uns weitermachen und das beheben. Ich wähle Bild aus. Und dann setzen wir die Breite auf 100%. In diesem Fall nimmt das Bild 100 Prozent der Welle seiner übergeordneten Elemente ein, denen es sich um die Karte handelt. Okay, jetzt haben wir ein viel besseres Ergebnis. Lass uns weitermachen und die Karte weiter stylen. Ich werde mit Polsterung etwas Platz in der Karte schaffen mit Polsterung etwas Platz in der Karte Stellen wir es auf RAM auf allen vier Seiten ein. Dann richte ich Elemente mit Flexbox aus. Lassen Sie uns die Display-Eigenschaft auf Flex setzen. Außerdem müssen wir die Richtung ändern, da Display-Flex standardmäßig Elemente horizontal in einer Reihe ausrichtet Lassen Sie uns dann mithilfe von Justify Content etwas Abstand zwischen den Elementen schaffen . Abstand dazwischen. Und schließlich, um die Elemente in der Mitte horizontal auszurichten, verwenden wir die Option Elemente mittig ausrichten. In Ordnung, zum Schluss werde ich einen Schatteneffekt erzeugen. Verwenden wir Box Shadow mit den Werten ein RAM dreimal und mit einer schwarzen Farbe. Im Moment, das war's mit der Karte. Lassen Sie uns weitermachen und den Namen und die Schaltfläche anpassen. Wählen wir zunächst den Kartennamen aus. Ich werde die Schriftgröße erhöhen. Machen wir drei RAM draus. Ändern Sie auch die Schriftstärke. Ich werde den Text fett färben. Ordnen wir ihm eine 900 zu. Verwandle Text auch in Großbuchstaben und schaffe etwas Abstand zwischen den Buchstaben, indem du elektrische Abstände mit dem Wert 0,5 rampe Danach ändere ich die Farbe. Verwenden wir hier 111. Und schaffen Sie oben und unten mit Hilfe von Rändern etwas Platz . Ich setze die Marge auf RAM Null. Okay, lassen Sie uns abschließend einen kleinen Schatteneffekt mit Textschatten erstellen . Lassen Sie uns einmischen. 0.15 lief dreimal. Und dann wieder die schwarze Farbe. In Ordnung, das war's mit dem Kartennamen. Lassen Sie uns weitermachen und die Schaltfläche anpassen. Wählen wir den Namen BTN aus. Zunächst setze ich die Breite auf 70%. Dann ändere ich die Hintergrundfarbe. Verwenden wir hier 111, ändern Sie auch die Farbe des Textes. In diesem Fall verwende ich Color oder 888. Und dann mache ich die Ecken der Box und runde sie ab, indem ich den Randradius mit dem Wert fünf Richtig. Danach. Ich kümmere mich um den Text des Buttons. Ändern wir die Schriftgröße und machen Sie 1,5 RAM daraus. Außerdem werde ich die Schriftstärke erhöhen. Stellen wir es auf 800 ein. Dann schaffe etwas Abstand zwischen den Buchstaben. Stellen wir es so ein, dass es auf RAM zeigt. Als Nächstes werde ich die Wörter mithilfe von Text großschreiben, transformieren, großschreiben und auch den Standardrahmen entfernen Setzen wir es auf „Null“. Richtig? Der Button sieht also gut aus, aber wir müssen ihm noch ein paar Styles hinzufügen. Ich werde mithilfe von Padding Platz innerhalb der Schaltfläche schaffen mithilfe von Padding Platz innerhalb der Schaltfläche Setzen wir es oben und unten auf 0,5 rem und links und rechts auf Null. Als Nächstes ändere ich den Typ des Cursors, mache ihn zu einem Zeiger und erstelle auch einen Schatten. In diesem Fall erstelle ich es auf der linken Seite. Dafür füge ich u -0,2 RAM ein, dann wieder Minuspunkt auf RAM als Punkt auf Rampe Und die schwarze Farbe. Wenn Sie auf der linken Seite einen Schatten erzeugen möchten, müssen Sie die negativen Werte verwenden. Okay, der Button ist personalisiert und jetzt ist es an der Zeit, der Karte eine 3D-Form zu geben Dafür verwende ich Vorher- und Nachher-Pseudoelemente Lass uns weitermachen und mit der linken Seite beginnen. Ich werde vorher Pseudoelemente verwenden. Zunächst müssen wir den Inhalt definieren , der leer sein soll. Dann ändere ich die Höhe und Breite. Ich setze die Körpergröße auf 100 Prozent. Lassen Sie uns für die Breite ein RAM daraus machen und dann die Hintergrundfarbe ändern. Ich werde deine Farbe 817824 verwenden. Okay, im Moment ist das Element nicht sichtbar. Und um das zu beheben, werde ich seine Position auf absolut setzen. Außerdem müssen wir die Position der Karte auf einen Relativen setzen . Das brauchen wir, um das vorherige Pseudoelement entsprechend seinem übergeordneten Element zu positionieren das vorherige Pseudoelement entsprechend seinem übergeordneten Element zu Jetzt ist das Element sichtbar, aber wir müssen seine Position ändern. Wir müssen es auf die linke Seite der Karte legen. Lassen Sie uns also weitermachen und Top-Immobilien definieren. Setzen wir es auf Null. Außerdem müssen wir das übrig gebliebene Eigentum definieren. Machen wir es minus einen Lauf. Jetzt ist die Position des Elements festgelegt, aber wie Sie sehen können, müssen wir es ein wenig verzerren Lassen Sie uns die Transformationseigenschaft mit der Skew-Funktion verwenden. In diesem Fall müssen wir die Elemente vertikal verzerren. Also müssen wir hier die Y-Achse verwenden. Töten wir die Elemente um 45 Grad. Ordnung, das Element ist also schief, aber seine Position ist immer noch nicht korrekt Es wird standardmäßig leicht übersehen, wenn wir die Transformationseigenschaft verwenden , dass sich das Element entsprechend seinem Mittelpunkt bewegt. Der Ursprung der Transformation wird also in den Mittelpunkt gestellt. Aber in diesem Fall müssen wir es ändern und korrigieren. Betrachten wir nun, dass das Problem behoben ist. Das Element ist perfekt positioniert. Und das Letzte, was ich tun werde , ist , einen kleinen Schatteneffekt hinzuzufügen. Verwenden wir Box-shadow mit den Werten -0.1 RAM. Dann wieder -0,1 RAM , den wir für 0,1 rem benötigen und die schwarze Farbe Okay, das war's mit der linken Seite. Jetzt kümmere ich mich um den ersten. Und dafür verwenden wir After-Pseudoelemente. Eigentlich müssen wir dieselben Eigenschaften auch für das Pseudoelement verwenden , aber mit unterschiedlichen Werten Also werde ich diesen Code hier duplizieren und dann werde ich einige Änderungen vornehmen. Also müssen wir die Höhe zu einem RAM machen. Was die Breite angeht, so wird sie 100% betragen. Als Nächstes ändern wir die Hintergrundfarbe. In diesem Fall verwende ich 8f83, 17. Dann lass uns die absolute Position so leben, wie sie ist. Sowohl für die obere als auch für die linke Eigenschaft benötigen wir minus einen RAM als Wert der obersten Eigenschaft. Was das linke Eigentum betrifft, so wird es Null sein. Ordnung, als nächstes kommt die Transformationseigenschaft mit dieser Q-Funktion In diesem Fall müssen wir das Element horizontal skalieren. Daher müssen wir hier die X-Achse verwenden. Was den Transformationsursprung angeht, müssen wir ihn nach unten bringen. Lassen Sie uns außerdem den Kastenschatten so bei der Form der Karten ist. Wir sind fertig. Schließlich werde ich einen Hover-Effekt erzeugen. Vorher werde ich den Code ein wenig rotieren und skalieren. Verwenden wir also die Transformationseigenschaft. Ich werde mich vertikal entsprechend der Y-Achse drehen. Geben wir Ihre 20 Grad ein. Was die Skew-Funktion angeht, werde ich die Elemente horizontal verzerren Also brauchen wir hier die X-Achse. Lassen Sie uns einmischen minus zwei Grad. In Ordnung, jetzt erstelle ich einen Hover-Effekt. Sobald wir den Mauszeiger über die Karte bewegen, müssen wir sie leicht nach oben bewegen Wir müssen uns transformieren. Wieder mit den Funktionen Drehen und Skalieren. Wir brauchen hier 20 Grad und dann minus zwei Grad. Außerdem müssen wir hier die Übersetzungsfunktion mit der Y-Achse und als Wert Let's interviewer minus drei Rampen hinzufügen Übersetzungsfunktion mit der Y-Achse und als Wert Let's interviewer minus drei Außerdem werde ich die Schatteneffekte beim Schweben ändern die Schatteneffekte beim Schweben Verwenden wir also Box-Shadow mit zwei Rampen dreimal und mit einer schwarzen Farbe Okay, sobald wir den Mauszeiger über die Karte bewegen, bewegen sie sich nach oben und auch der Schatten ändert sich Tatsächlich passieren diese Dinge ohne einen reibungslosen Effekt. Und um das zu beheben, verwenden wir Transition. Wir müssen hier eine Transformation mit einer Dauer von 0,5 s angeben . Außerdem benötigen wir einen Boxschatten mit der gleichen Dauer. Ordnung, der Übergangseffekt funktioniert also einwandfrei, und eigentlich sind wir mit diesem Abschnitt fertig Lass uns weitermachen und uns um den nächsten kümmern. 7. Projekt 1 - Lebensmittelgalerie erstellen und stylen: Der nächste Abschnitt wird die Galerie sein , in der wir sechs verschiedene Lebensmittelbilder mit einigen schönen Effekten haben werden . Jedes Bild wird mehrere farbige Schatten haben. Wenn wir den Mauszeiger über das Bild bewegen, werden einige Informationen wie der Name des Lebensmittels, eine Beschreibung und zwei verschiedene Zeilen angezeigt Beschreibung und zwei verschiedene Zeilen Das Bild selbst wird einen gewissen verschwommenen Effekt haben. Und auch der Schatten des Bildes wird sich gut ausdehnen. Und all diese Defekte werden reibungslos auftreten. Ordnung, lassen Sie uns anfangen, das HTML-Markup zu erstellen Lassen Sie uns wie gewohnt neue Kommentare einfügen, Abschnitt drei. Und von Abschnitt drei. Das jeder Klasse zugewiesene Element des offenen Abschnitts, Abschnitt drei. nächsten Minute hier die Überschrift dieses Abschnitts, die den anderen Abschnittsüberschriften ähneln wird Also werde ich es aus dem vorherigen Abschnitt kopieren und dann werde ich den Inhalt ändern. Fügen wir hier die Galerie ein. In Ordnung, also insgesamt werden wir sechs Kalorienpunkte haben. Sie werden durch die Link-Elemente dargestellt. Und bevor wir sie erstellen, öffne ich das div-Tag, das der Wrapper dieser Links sein wird Ich werde der Klassengalerie zuweisen. Als Nächstes öffne ich das Link-Tag, das den Link zur Klassengalerie enthalten wird. Neben dem Klassenattribut werde ich auch das Titelattribut verwenden. Es ermöglicht uns, Text anzuzeigen , sobald wir den Mauszeiger über den Link Fügen wir jetzt Ihre Bestellung Ordnung, also jedes Link-Element besteht aus einer Bildüberschrift und dem Absatz Öffnen wir das Bild-Tag und wählen Sie dann Gallery IMG one aus dem Bilderordner aus. Außerdem werde ich der Imageklasse food IMG zuweisen . Als nächstes kommen H3-Überschriftenelemente. Weisen wir der Klasse einen Lebensmittelnamen als Inhalt zu. Lass uns deine Pfannkuchen hineinlegen. Und zum Schluss füge ich Ihren Absatz mit einer vollständigen Beschreibung der Klasse ein. Und als Inhalt werde ich hier einen Blindtext einfügen Okay, hier haben wir den ersten Artikel. Wie gesagt, insgesamt werden wir sechs davon haben. Also werde ich das Link-Element fünfmal duplizieren und dann einige Änderungen vornehmen. Wir brauchen hier, img2. Und der Name wird Cupcakes sein. Dann werden wir ein oder drei AMG haben. Harmlos. Dann füge ich für den vierten Artikel hier Hamburger ein. Der nächste wird Sahlman sein. Was den sechsten Punkt angeht, werde ich dein Gemüse essen. In Ordnung, das war's also mit dem HTML-Markup. Jetzt sind wir bereit, mit dem Schreiben von CSS zu beginnen. Ich werde neue Kommentare erstellen, Abschnitt drei. Und Abschnitt drei. Wählen Sie dann Abschnittselemente aus. Zuerst ändere ich die Hintergrundfarbe. Machen wir es dunkelgrau mit der Farbe 333. Außerdem werde ich in diesem Abschnitt oben und unten etwas Platz schaffen . Die Verwendung von Padding mit dem Wert ist fünf, rem und Null. In Ordnung? Bevor wir mit der Anpassung der Galerie beginnen, möchte ich mich um die Größe der Bilder kümmern da sie im Moment zu groß sind. Wählen wir also Bild aus. Ich setze auf 220, 4% des Viewports von der Breite ab die Höhe angeht, werde ich sie auf eine Viewport-Breite von 15 Ich meine 15% der Viewport-Breite. Außerdem werde ich Object Feed Cover verwenden , damit wir die Bildqualität beibehalten können. Es wird nicht gestreckt. Okay, dann wähle Galerie, ich meine den Container mit den Links Insgesamt werden wir also sechs Links haben und ich werde sie in Reihen platzieren. Ich werde das mit Flexbox machen. Wir müssen die Display-Eigenschaft auf Flex setzen. Und um Bilder auf zwei Rollen zu platzieren, müssen wir einen Flex-Wrap mit einem Werteumbruch verwenden Jetzt werden die Bilder also in zwei Zeilen platziert. Als Nächstes platziere ich sie in der Mitte und schaffe auch etwas Platz zwischen den Bildern. Um sie also in der Mitte zu platzieren, müssen wir die Elemente in der Mitte ausrichten Um einen gewissen Abstand zwischen den Bildern zu schaffen, müssen wir den Inhaltsbereich gleichmäßig begründen. Abschließend werde ich etwas Abstand zwischen der Überschrift und der Galerie schaffen . Verwenden wir Margin Top mit der Rampe für den Wert 10. In Ordnung, mit dem Layout sind wir fertig. Lassen Sie uns weitermachen und die Elemente des Handelns anpassen. Fangen wir mit den Fußnamen an. Der Name des Fußes sollte also in der oberen linken Ecke des Bildes abgespielt werden der oberen linken Ecke des Bildes Also werde ich seine Position auf absolut setzen. Dann müssen wir die Position der Link-Elemente auf relativ setzen , da es sich um ein übergeordnetes Element handelt und wir müssen die Überschrift entsprechend dem Link positionieren. Und dann setzen Sie die oberen und linken Eigenschaften für den Lebensmittelnamen auf drei Rampen. Ich meine, beide Immobilien. In Ordnung. Überschriften sind also richtig positioniert . Lassen Sie uns weitermachen und sie anpassen. Ich werde die Schriftgröße ändern. Machen wir es zu Ram. Lassen Sie uns also die Schriftstärke erhöhen. Ich setze es auf 700. Dann transformieren wir Text in Großbuchstaben. Schaffen Sie etwas Abstand zwischen den Buchstaben, indem Sie Buchstabenabstand verwenden, 0,1 RAM. Und zum Schluss ändere die Farbe, mache sie weiß. Okay, das war's mit der Überschrift. Als Nächstes werde ich den Absatz anpassen. Also lass uns weitermachen und es auswählen. Zunächst definiere ich ihre Position als absolut. Und dann definiere ich die Eigenschaften von unten und links. Ich werde die Button-Eigenschaft zwei oder drei, die Viewport-Breite, Was das linke Eigentum angeht, werde ich es nach dem Zufallsprinzip sortieren. Der Absatz ist also positioniert. Aber wie Sie sehen können, ist das Layout der Galerie durcheinander Ich werde das reparieren. Lassen Sie uns weitermachen und mithilfe von Margin etwas Abstand zwischen den Links schaffen . Ich mache es für Rem oben und unten und ein Rem auf der linken und rechten Seite. In Ordnung, jetzt ist das Problem behoben. Lassen Sie uns weitermachen und dem Absatz einige weitere Stile hinzufügen. Als Nächstes definiere ich die Breite und mache sie auf 70%. Dann ändern wir die Schriftgröße, machen 1,5 RAM daraus und ändern auch die Schriftstärke. Ich mache es ein bisschen leichter. Setzen wir es auf 300. Danach lassen Sie uns etwas Abstand zwischen den Buchstaben schaffen und daraus 0,1 RAM machen. Außerdem werde ich Text in Großbuchstaben N umwandeln . Schließlich ändere ich die Farbe und mache ihn weiß In Ordnung, mit einem Absatz sind wir fertig. Es ist gestylt. Und jetzt werde ich zwei Linien erstellen. Eine unter der Überschrift und die zweite auf der rechten Seite des Absatzes. Ich werde diese Zeilen mit Vorher- und Nachher-Pseudoelementen erstellen Vorher- und Nachher-Pseudoelementen Lassen Sie uns zunächst eine Zeile auf der rechten Seite des Absatzes erstellen . Verwenden wir die vorherigen Pseudoelemente. Zunächst müssen wir den Inhalt definieren. Lass es uns leer machen. Dann setze ich die Position auf absolut. Und um die Linie sichtbar zu machen, definieren wir eine Breite machen sie zu einem Punkt auf RAM. Außerdem müssen wir die Höhe auf 80 Prozent setzen und dann die Hintergrundfarbe ändern und sie weiß machen. Die Linie ist also machbar, aber wir müssen ihre Position ändern. Wir müssen es auf der rechten Seite des Absatzes platzieren. Also setzen wir die obere Position auf, auf die Breite des Viewports. Was das verlassene Eigentum angeht, werde ich es zu 80% machen. Okay, schauen wir uns die vorherigen Pseudoelemente an. Jetzt werde ich eine zweite Zeile erstellen. Eigentlich werden beide Linien die gleichen Eigenschaften haben. Lassen Sie uns also diesen Code duplizieren und dann einige Änderungen vornehmen. Ich werde die Spitzenposition ändern. Machen wir 30% draus. Ebenfalls. Wir müssen das linke Grundstück ändern. Stellen wir es auf, um das auszuführen, ändere ich die Breite. Machen wir 90% draus. Was die Höhe angeht, so wird sie von Punkt zu Rampe sein. In Ordnung? So werden die Linien erstellt und eigentlich sind alle Elemente fast maßgeschneidert. Das einzige, was ich tun werde, bevor wir einen Hover-Effekt erstellen , ist, einen mehrstufigen Schatteneffekt zu erzeugen Dazu müssen wir nur die Box-Shadow-Eigenschaft mit mehreren Werten wie diesem verwenden . Ich werde den ersten Shadow erstellen . Fügen wir Ihre 0,3, 0,3 RAM als 0,1 RAM und die Farbe E9 in neun bis neun ein Also wird der erste Schatten erstellt, dann mach weiter und erstelle den nächsten. Ich füge hier 0,5 rem, 0,5 rem 0,1 RAM und die Farbe A2 e946 Dann wird der nächste 0,7 Rem, 0,7 Rem, 0,1 RAM sein . Und sie rufen bis zu 97 CE 9 an. Das ist wahrscheinlich der letzte. Machen wir eine Rampe von 0,9. 0.9 lief mit 0,1 RAM und mit der Farbe e92 999. Ordnung, hier haben wir die Schatten und jetzt sind wir bereit, einen Schwebeeffekt zu erzeugen Standardmäßig sollten diese Elemente ausgeblendet sein. Fangen wir also mit der Überschrift an. Ich mache seine Breite auf Null. Außerdem müssen wir Ihr überlaufendes Grundstück mit dem versteckten Wert nutzen Ihr überlaufendes Grundstück mit dem versteckten Wert Die Überschrift ist also versteckt. Als Nächstes werde ich den Absatz ausblenden. Im Falle eines Absatzes verwende ich Juice Opazität mit dem Wert Null und auch die versteckte Sichtbarkeit Wie Sie sehen können, ist der Absatz ebenfalls ausgeblendet. Und jetzt werde ich diese beiden Zeilen verstecken. Ich setze die Höhe für die vertikale Linie auf Null. Was die horizontale Linie betrifft, setzen wir ihre Breite auf Null. In Ordnung, also sind alle Elemente versteckt, und jetzt können wir einen Hover-Effekt erzeugen Ich fange mit den Zeilen , weil sie zuerst erscheinen sollten. Wählen wir also den Galerie-Link mit dem Mauszeiger aus, gefolgt vom vorherigen Pseudoelement Wir müssen hier die Höhe auf acht Prozent festlegen. Lassen Sie uns diesen Code duplizieren. Ich werde mich davor und nachher ändern. Und außerdem brauchen wir statt Höhe Breite mit dem Wert neun Prozent. Außerdem müssen wir Transition nutzen, um den Effekt intelligenter zu machen . Wir benötigen hier eine Höhe von 0,5 s. Und auch in einem Übergang von 0,5 s. Okay, sobald wir den Mauszeiger über das Bild bewegen, erscheinen Tangentenlinien schön Als Nächstes zeige ich die Überschrift an. Lassen Sie uns also weitermachen und den Galerie-Link mit dem Mauszeiger auswählen, gefolgt vom Namen des Lebensmittels Wie Sie sich erinnern, haben wir die Größe der Überschrift auf Null reduziert . Wir müssen uns also auf 200 Prozent festlegen. Auch um den Effekt glatter zu machen, brauchen wir wieder einen Übergang mit den Werten mit 1,5 s. Und außerdem brauchen wir hier eine gewisse Verzögerungszeit weil zuerst die Linien , weil zuerst die Linien erscheinen sollten und danach müssen wir die Überschrift anzeigen. Stellen wir also die Verzögerungszeit auf 2,5 s ein. Tatsächlich tritt dieser Übergangseffekt ein, sobald wir den Mauszeiger über das Bild Wie Sie sehen, wird die Überschrift angezeigt , sobald die Linien erscheinen. Aber wenn wir die Maus rausziehen , wird die Überschrift sofort angehoben. Und um das zu beheben, brauchen wir einen weiteren Übergang , der Teil der Überschrift selbst sein sollte. Stellen wir es auf 2,3 s ein. Okay, jetzt funktioniert alles einwandfrei. Lassen Sie uns weitermachen und dasselbe für den Absatz tun. Wählen wir mit dem Mauszeiger den Galerie-Link aus, gefolgt von der Lebensmittelbeschreibung Im Moment hat der Absatz also die Opazität Null und die Sichtbarkeit ist ausgeblendet Und jetzt brauchen wir Opazität mit dem Wert eins. Sichtbarkeit sichtbar. Außerdem benötigen wir hier die Transitions-Opazität als die Dauer einer Sekunde und die Verzögerungszeit, aber in diesem Fall 1 s. Und genauso müssen wir den zweiten Übergang verwenden Wir werden die Opazität mit einer Dauer von 0,3 s überschreiten. Ordnung, die Potenz der Gruppe funktioniert also Und jetzt müssen wir weitermachen und uns um das Bild kümmern. Lassen Sie uns zunächst den Schatten ändern, wenn Sie mit der Maus darüber fahren. Gehen wir also weiter und wählen Sie erneut den Galerie-Link mit dem Mauszeiger Dann brauchen wir Food Image. Eigentlich werde ich diesen Code von hier kopieren und einfach die Werte ändern. Wir brauchen hier 1 g zweimal. Dann müssen wir für den zweiten Schatten rennen. Dann wird der nächste drei RAM sein. Dann brauchen wir für den letzten RAM. Außerdem müssen wir auch hier den Übergang nutzen. Lassen Sie uns alle mischen und die Dauer 0,5 s. In Ordnung, wie Sie sehen können, ändert sich der Schatten, sobald wir den Mauszeiger über das Das ist natürlich nicht alles, wir müssen dem Bild noch ein paar Dinge hinzufügen. Wir müssen es verschwommen machen. Und dafür müssen wir eine der Eigenschaften verwenden, die als Filter mit der Gebläsefunktion bezeichnet werden. Verwenden wir Blau und den Wert, ich platziere deine 0,5-Rampe. Wie Sie sehen können, wird das Bild verschwommen. Und sobald wir den Mauszeiger darüber bewegen, können wir diesen Effekt viel schöner machen, wenn wir die Opazität des Bildes verringern Machen wir 0,5 draus. In Ordnung, jetzt haben wir viel bessere Ergebnisse. Und das einzige, was wir tun müssen, ist, den Maßstab des Bildes leicht zu vergrößern , wenn wir mit der Maus darauf zeigen Verwenden wir dafür Transform. Mit der Skalenfunktion. Ich werde den Maßstab des Bildes auf 1,1 erhöhen. In Ordnung, wir sind fast fertig. Alles funktioniert perfekt. Aber wir haben hier ein kleines Problem. Wie Sie sehen können, ist die vertikale Linie nicht ganz sichtbar, da sie hinter dem Bild gelandet ist. Um das zu beheben, müssen wir die Eigenschaft z-index verwenden Lassen Sie uns ihn höher als Null setzen, was der Standardwert ist. Ich werde zehn draus machen. In Ordnung, das war's also. Wir sind fertig mit der Galerie. Ich finde es sieht wirklich nett aus. Wir haben hier ein paar coole Effekte verwendet, also ich denke, du wirst es mögen. Okay, jetzt ist es an der Zeit , weiterzumachen und sich um den nächsten Abschnitt zu kümmern. 8. Projekt 1 - Fußzeile erstellen und anpassen: Der nächste Abschnitt wird die Fußzeile sein, die einfach sein wird Wir werden unten einen Abschnitt mit einer Überschrift, Eingabefeld mit einer Schaltfläche und einen ein Eingabefeld mit einer Schaltfläche und einen Copyright-Text haben Lass uns weitermachen und anfangen , das HTML-Markup zu schreiben. Ich werde Ihren neuen Kommentarbereich am Ende von Abschnitt vier einfügen . Öffnen Sie dann das Abschnittselement mit einer Klasse, Abschnitt vier. Insgesamt werden wir also drei verschiedene Teile und die Fußzeile haben drei verschiedene Teile und die Fußzeile Der erste ist die Überschrift und der Absatz, die auf der linken Seite platziert werden Öffnen wir das div-Element, das der Wrapper dieser beiden Elemente sein wird Ich werde ihm einen Klassenabschnitt für Text zuweisen. Öffnen Sie dann die H2-Überschriftenelemente mit dem Klassenabschnitt für die Überschrift Und als Inhalt werde ich einrichten, melde mich für den Absatz an. Es sollte einen Klassenabschnitt für Absatz haben. Und als Inhalt werde ich Sie anweisen, werde ich Sie anweisen Erster von neuen Produkten zu erfahren In Ordnung, das war's mit dem ersten Teil. Das nächste sind die geformten Elemente, zu denen das Eingabeelement und der Boden gehören. Es ist also ein offenes Formular mit dem Anmeldeformular für die Klasse. Dann füge ich Ihre Eingabe mit dem Typ E-Mail ein. Als Nächstes füge ich Ihre Eingaben für das Anmeldeformular für Ihre Klasse ein. Und lassen Sie uns auch ein Platzhalterattribut mit einem Wert verwenden und Ihre E-Mail-Adresse eingeben In Ordnung, das war's mit der Eingabe-Schaltfläche „Nächste Spalten“. Lassen Sie uns den Typ auf Senden festlegen und jedem Klassenattribut zusätzlich mit einem Wertanmeldeformular BTN zugewiesen mit einem Wertanmeldeformular BTN Tatsächlich wird die Schaltfläche durch das Font Awesome-Symbol dargestellt. Öffnen wir also I-Elemente mit den Klassennamen FAS, FAA, Arrow, richtig? Okay, das war's mit den Formularelementen. Schließlich werde ich den Absatz für den Copyright-Text erstellen . Es ist also ein offenes P-Element mit der Klasse Copyright. Und dann fügen wir als Inhalt Code ein und erstellen, gefolgt vom Copyright-Zeichen. Ich werde hier HTML5, Entity, Ampersand, Copy, Semikolon und dann Unsecure verwenden Entity, Ampersand, Copy, Semikolon und Alle Rechte vorbehalten. Ordnung, mit dem HTML-Markup sind wir fertig und können diesen Abschnitt anpassen Lassen Sie uns neue Kommentare in die CSS-Datei einfügen. Wir müssen Abschnitt vier machen. Abschnitt vier. Wählen Sie dann Abschnittselemente aus. Zuerst definiere ich Breite und Höhe. Fangen wir mit 200 Prozent an. Was die Höhe angeht, werde ich 30% des Viewports daraus machen 30% des Viewports Und ändere auch die Hintergrundfarbe. Verwenden wir hier 222. Okay, als Nächstes kümmere ich mich um das Layout aller drei Teile. Ich werde Flexbox verwenden. Lassen Sie uns die Display-Eigenschaft auf Flex setzen. Und dann, um etwas Platz um die Elemente herum zu schaffen , verwende ich „Justify -Content mit Wertebereich um die Objekte herum. Außerdem werde ich oben und unten in diesem Abschnitt etwas Platz schaffen . Verwenden wir dazu Padding mit den Werten drei, rem und Null In Ordnung? Moment sind also alle drei Teile horizontal in einer Reihe angeordnet, aber das brauchen wir eigentlich nicht. Ich werde den Copyright-Absatz am Ende dieses Abschnitts platzieren . Kümmern wir uns also um die Ausstellung. Ich werde jeder Position absolute Werte zuweisen. Um den Absatz dann an seinem übergeordneten Element auszurichten , setze ich die Position des Abschnittelements auf ein Relativ. Und danach definieren wir die untere Position des Absatzes und machen drei Runden. Okay, mit dem Layout sind wir fertig. Lassen Sie uns fortfahren und beginnen, jedes der Elemente anzupassen. Ich werde die Wrapper-Div-Elemente auswählen. Lassen Sie uns der Texttransformation einen Großbuchstaben zuweisen , da wir beide Elemente benötigen, ich meine, dass die Überschrift und der Absatz in Großbuchstaben geschrieben werden müssen Als Nächstes kümmere ich mich um die Wählen wir es also aus. Ich werde die Schriftgröße erhöhen. Machen wir es mit vollem RAM. Machen Sie den Text auch fett oder verwenden Sie eine Schriftstärke mit einem Wert von 900. Und schließlich ändere die Farbe. Ich werde deine Farbe H7N9, A2 verwenden. Sie sind also unterwegs. Sieht gut aus. Lassen Sie uns weitermachen und den Absatz beginnen. Wählen wir es aus. Ändern Sie die Schriftgröße, machen Sie sie 1,5 rund. Was die Farbe angeht, werde ich 888 verwenden. In Ordnung, das war's mit dem ersten Teil. Lassen Sie uns weitermachen und uns um das Formularelement kümmern. Innerhalb des Formularelements haben wir eine Eingabe und eine Schaltfläche, und ich werde sie nebeneinander platzieren Dafür werde ich Flexbox verwenden. Und um beide Elemente zu zentrieren, verwenden wir insbesondere die Option Elemente zentriert ausrichten. Im Moment haben wir hier ein kleines Problem. Wie Sie sehen können, ist das Formularelement etwas nach unten gerutscht. Und um das zu beheben, werde ich dem Abschnitt die Eigenschaft elemente, align items mit dem Wert flex, start zuweisen . In diesem Fall landen beide Flex-Artikel oben im Behälter. In Ordnung, lassen Sie uns weitermachen und das Eingabeelement anpassen. Wählen wir es aus. definiere ich Breite und Höhe. Fangen wir mit 235 Ran an. Was die Höhe angeht, werde ich fünf RAM draus machen. Schaffen Sie mit Padding etwas Platz innerhalb der Eingabe. Setzen wir es auf allen vier Seiten auf ein Rem und ändern auch den Rand. Ich werde Interferenzpunkt verwenden, um einen 7982d in Vollfarbe zu rammen. Okay, als Nächstes kümmern wir uns um den Text. Lassen Sie uns die Schriftgröße ändern und daraus 1,6 RAM machen. Machen Sie die Texte auch etwas fetter , indem Sie die Schriftstärke mit einem Wert von 700 Als Nächstes werde ich mit einem Buchstabenabstand von 0,1 RAM etwas Abstand zwischen den Buchstaben schaffen . Und ändere auch die Farbe. Machen Sie wieder eine 79a bis D. In Ordnung, das war's mit den Eingabeelementen Und bevor ich die Schaltfläche anpasse, ändere ich die Farbe des Platzhalter-Attributs Wählen wir also das Eingabeelement aus, gefolgt vom Platzhalter und weisen ihm die Farbe H7N9, a bis D zu. Okay, jetzt ist es an der Zeit, sich zuerst um den Button zu kümmern, lassen Ich setze seine Position auf relativ. Wir verwenden hier Position Relative , weil wir das linke Eigentum verwenden müssen. Und im Falle einer statischen Position, die die Standardposition ist, können wir auf diese Eigenschaft zugreifen. Lassen Sie uns die linke Eigenschaft auf -4,5 random setzen. Okay, die Schaltfläche ist also positioniert und jetzt müssen wir sie anpassen. Definieren wir zunächst die Breite und Höhe. Ich werde beide für RAM machen. Dann ändere die Hintergrundfarbe, mache 333 daraus. Und ändere auch die Farbe. Du benutzt wieder H7N9 a bis D. Okay, der Button sieht also schon gut aus, aber wir müssen ihm noch ein paar Styles hinzufügen Ich werde die Standardgrenze abschaffen. Setzen wir es also auf Null. Erhöhen Sie dann die Schriftgröße und machen Sie 1,8 RAM daraus. Und ändern Sie auch den Typ des gröberen, machen Sie ihn zum Zeiger. In Ordnung, das war's mit den Formularelementen. Jetzt müssen wir das letzte Element in diesem Abschnitt anpassen , nämlich den Absatz. Also lass uns die Schriftgröße ändern und es 1.7 laufen lassen. Außerdem werde ich Telefone leichter machen, indem ich die Schriftstärke mit dem Wert 200 verwende Dann ändere die Farbe, mache es e. Und schaffe auch etwas Abstand zwischen den Buchstaben. Lass uns 0,1 ran machen. Ordnung, als Nächstes erstelle ich den Rahmen am oberen Rand des Absatzes Verwenden wir also die Eigenschaft border top mit den Werten point 1 g, solid. Und als Farbe verwenden wir 888. Und lassen Sie uns auch etwas Platz schaffen, indem wir eine Polsterung mit dem Wert sechs rann verwenden Polsterung mit dem Wert sechs rann Der Rahmen wird erstellt, aber wie Sie sehen, wird er entsprechend der Breite des Absatzes verlängert. Wir benötigen den Rand , der die gesamte Breite der Seite einnimmt . Also werde ich die Breite des Absatzes erhöhen. Stellen wir es auf hundert Prozent ein. Jetzt ist der Rand vergrößert, aber der Absatz ist auf der linken Seite gelandet. Und um das zu beheben, verwenden wir Text Align Center. In Ordnung, mit der Fußzeile sind wir fertig. Als nächstes müssen wir uns um die Navigation kümmern . Also lass uns weitermachen. 9. Projekt 1 - Erstelle und Stil festen Navbar: Die Navigation wird ziemlich interessant sein. Wie Sie sehen können, ist es standardmäßig ausgeblendet und das Menüsymbol wird in der oberen linken Ecke der Seite angezeigt. Es hat eine feste Position. Sobald ich darauf klicke, wird die Zahl von oben schön angezeigt. Und alle Navigationselemente werden mit einem gewissen Fade-Effekt angezeigt. Wenn ich den Mauszeiger über sie bewege, ändern sie außerdem ihre Farbe Wenn ich wieder unten in Alberta auf das Menüsymbol klicke , wird es wieder ausgeblendet. Schauen wir uns an, was wir erstellen werden. Lassen Sie uns also mit dem HTML-Markup beginnen. Ich werde es vor dem Container schreiben. Fügen wir neue Kommentare ein. Jetzt Bar. Und von Navarra. Öffnen Sie dann HTML5-Navigationselemente mit der Klasse jetzt par. Insgesamt werden wir also fünf verschiedene Navigationspunkte haben. Sie werden durch die Link-Ions dargestellt, und jedes von ihnen enthält ein Font Awesome-Symbol mit einigen Texten. Okay, lassen Sie uns die Link-Elemente mit der Klasse jetzt pro Link öffnen . Dann hier rein, ich Element mit einer Klasse ist FAS ein Zuhause, dann folgen auf das Font Awesome-Symbol die Span-Elemente Lassen Sie uns hier nach Hause einfügen. Okay, insgesamt werden wir also fünf Navigationspunkte haben. Lassen Sie uns das Link-Element viermal duplizieren und dann die Klassennamen und auch den Inhalt der Span-Elemente ändern . Das zweite wird Utensilien sein. Und als Inhalt schreiben wir Mahlzeiten. Dann essen wir Hamburger. Der Artikel wird ein Burger sein. Dann wird die nächste Pizza Pizza sein. Und der letzte Punkt wird langweiliger oder telefonischer Kontakt sein. In Ordnung, hier haben wir die Navigationspunkte. Das einzige, was Sie tun müssen, ist ein div-Element für das Menüsymbol zu erstellen , das Class Menu zugewiesen ist. Eigentlich wird dieses Element leer sein. Wir werden es anhand von CSS anpassen. In Bezug auf das HTML-Markup sollten wir jedoch anfangen, CSS zu schreiben Ich werde direkt nach den gängigen Stilen, die wir hier brauchen, Navbar und von Navarre, neue Kommentare einfügen nach den gängigen Stilen, die wir hier brauchen, Navbar und von Navarre, Navbar und von Navarre Wählen Sie dann genügend Elemente aus. Und definieren Sie zunächst Breite und Höhe. Ich setze die Breite auf 100%. Was die Höhe angeht, lassen Sie uns 14 RAM daraus machen und auch die Hintergrundfarbe ändern, sie schwarz machen. Okay, hier haben wir die Navbar. Eigentlich sollte es behoben werden. Also müssen wir seine Position auf fest setzen und auch die oberste Eigenschaft auf Null setzen. Ordnung, wenn ich also auf der Seite nach unten scrolle, behält die Zahl ihre feste Position bei Wie Sie sehen können, sobald wir nach unten scrollen, dann einige Elemente und oben in der Navigationsleiste Und um das zu beheben, verwende ich die Index-Eigenschaft mit einem höheren Wert, sagen wir 100. Jetzt ist das Problem behoben. Lassen Sie uns weitermachen und uns um das Layout der Navigationselemente kümmern . Dafür werde ich Flexbox verwenden. Stellen wir die Anzeigeeigenschaft so ein, dass Elemente gebeugt und dann horizontal und somit vertikal zentriert werden, indem wir den Inhalt zentrieren und Elemente ausrichten, zentrieren und Elemente ausrichten In Ordnung, die Gegenstände werden also in der Mitte platziert. Und das Letzte, was ich mit dem Navigationselement tun möchte , ist, einen kleinen Schatteneffekt zu erzeugen. Verwenden wir Box Shadow. Das scheint dreimal auf RAM und als Farbe hinzudeuten. Verwenden wir Schwarz. Okay, innerhalb dieses Elements sind wir fertig. Lassen Sie uns weitermachen und die Link-Elemente anpassen. Wählen wir jetzt pro Link aus. Zuallererst werde ich die Farbe ändern. Machen wir es hellgrau mit der Farbe AAA. Außerdem werde ich auf der linken und rechten Seite etwas Platz schaffen , indem ich Margin mit einem Wert von 0,4 rampe verwende. Ordnung, als Nächstes passen wir die I-Elemente und auch die Spanne an Ich möchte sie größer machen. Also wähle ich zunächst Font, Awesome icon. Erhöhen wir die Schriftgröße, machen wir sieben RAM daraus. Was das Span-Element betrifft, ändern wir seine Schriftgröße. 2,5 ARBEITSSPEICHER. Dann werde ich die Dinge mutiger machen. Lassen Sie uns die Schriftstärke auf 900 setzen. Außerdem werde ich mit dem Buchstabenabstand, dem Wert 0,5 RAM, etwas Abstand zwischen den Buchstaben schaffen mit dem Buchstabenabstand, dem Wert 0,5 RAM, etwas Abstand zwischen den Buchstaben . Und dann schaffen Sie oben etwas Platz , indem Sie den Rand oben um 0,5 rund verwenden. Okay, lassen Sie uns also davon ausgehen die Navigationselemente viel besser aussehen, aber wir müssen das Layout ändern Ich meine, wir müssen, ich kann das Span-Element übereinander platzieren . Verwenden wir dafür Flexbox. Dann. Um Elemente in der Spalte zu platzieren, müssen wir die Richtung ändern. Machen wir es zu einer Kolumne. Und dann lege Gegenstände in die Mitte. Ich meine sowohl vertikal als auch horizontal. Verwenden Sie das Justify-Content Center und richten Sie die Elemente in der Mitte aus. Die Navigationselemente sehen gut aus. Bevor wir weitermachen und das Menüsymbol anpassen, möchte ich einen kleinen Hover-Effekt erzeugen Sobald wir den Mauszeiger über die Elemente bewegen, möchte ich die Farbe leicht ändern Wählen wir also einen Albert-Link aus, indem wir den Mauszeiger bewegen und die Farbe ändern, ihn weiß machen Um den Effekt glatter zu machen, verwenden wir außerdem Transition mit den Werten Farbe und 0,3 s. In Ordnung, das war's. Im Moment sind wir mit den Navigationselementen fertig. Lassen Sie uns weitermachen und das Menüsymbol anpassen. Zunächst definiere ich Breite und Höhe. Stellen wir die Breite auf fallendes RAM ein. Was die Höhe angeht, werde ich sechs RAM daraus machen. Und ändere auch die Hintergrundfarbe, mache sie schwarz. Im Moment ist das Menüsymbol also nicht sichtbar, da es sich hinter der Navigationsleiste befindet Also werde ich es etwas weiter unten platzieren, so dass das Navigationsleisten-Menüsymbol ebenfalls eine feste Position haben sollte Lassen Sie uns also die Position festlegen, die repariert werden soll. Definieren Sie dann die Top-Eigenschaft und machen Sie sie zu 15 RAM. Was das verlassene Grundstück angeht, werde ich fünf Rampen daraus machen. Ordnung, wie Sie sehen können, ist das Menüsymbol jetzt sichtbar Als Nächstes kümmere ich mich um seine Form und ändere seine Form mithilfe des Randradius Tatsächlich können Sie auf verschiedenen Seiten unterschiedliche Grenzradien definieren . Verwenden wir Border-Radius. Der erste Wert gehört zur oberen linken Ecke. Ich werde 30 RAM draus machen. Dann ist der nächste für die obere rechte Ecke. Lass es uns auch bis Ram schaffen. Dann haben wir die untere rechte Ecke. Ich mache es mit 15 RAM Asphalt in der unteren linken Ecke. Machen wir auch 15 RAM draus. Okay, wie Sie sehen können, die Form des Menüsymbols geändert. Als Nächstes füge ich einen kleinen Schatteneffekt hinzu. Verwenden wir also Box-Shadow. Das entspricht 0,13 mal Institute mit schwarzer Farbe. Und außerdem füge ich hier einen weiteren Schatten hinzu, aber auf der linken Seite. Also werde ich hier 0.1 run zweimal mit dem Minuszeichen verwenden , dann 0.1 RAM und wieder die schwarze Farbe. Und zum Schluss ändern wir den Typ des Cursors und machen ihn zum Zeiger. In Ordnung, das war's, mit dem Menüsymbol. Als Nächstes erstelle ich eine Linie, die Teil des Symbols sein wird. Und wir erstellen es mit dem vorherigen Pseudoelement. Also lass uns vorher benutzen. Definieren Sie zunächst den Inhalt und machen Sie ihn leer. Dann gehe ich los , wir können uns verstecken. Machen wir mit 0,3 RAM. Was die Höhe angeht, mache ich 15 Rampen, ändere dann die Hintergrundfarbe und mache es schwarz. Und setzen Sie die Position auch auf absolut. Die Linie ist also sichtbar. Wie Sie sehen, müssen wir seine Position korrigieren. Stellen wir die obere Position ein, zwei -15 RAM Asphalt die linke Position, wir müssen die Linie in der Mitte platzieren Die Breite der Linie entspricht 0,3 RAM. Wir müssen es um 50 Prozent nach links verschieben. Aber wir müssen auch die Breite der Linie berücksichtigen , um sie perfekt zu zentrieren. Um das zu tun, verwende ich die Funktion calc, bei der wir 50 Prozent -0,15 RAM berechnen sollten, was der halben Breite der Linie entspricht Auch in diesem Fall wird die Linie perfekt zentriert sein Okay, lassen Sie uns zum Schluss der Linie einen Schatteneffekt hinzufügen. Verwenden Sie Box-shadow mit den Werten 0,1 RAM, Null, dann 0,1 RAM und der schwarzen Farbe Okay? Mit diesem Stil sind wir also fertig. Jetzt müssen wir ein Nickerchen machen oder arbeiten. Und dafür werde ich ein bisschen JavaScript verwenden . Vorher werde ich die Leiste und das Menüsymbol jetzt an ihren Standardpositionen platzieren . Ich meine, wenn die Pore jetzt versteckt sind und das Menüsymbol etwas höher platziert ist. Ändern wir die oberste Position von Naropa und machen sie zu -14 Was das Menüsymbol betrifft, müssen wir seine Position, die oberste Position, ändern und es zu einer Runde machen. In Ordnung, alles ist bereit, um unsere Arbeit wieder gutzumachen. Wir werden ein Klickereignis an das Menüsymbol anhängen. Gehen wir also zur JavaScript-Datei und wählen das Menü mit der Methode querySelector Als Nächstes müssen wir den Event-Listener hinzufügen. Es braucht zwei Argumente. Die erste ist die Art der Veranstaltung. In diesem Fall brauchen wir Clique. Das zweite Argument wird die Callback-Funktion sein, die ausgeführt wird, sobald wir auf das Element klicken Jetzt müssen wir es jetzt auswählen und das Menüsymbol, eigentlich können wir das getrennt machen, aber wäre es besser, wenn wir beiden Elementen dieselbe Klasse zuweisen , wenn wir beiden Elementen dieselbe Klasse zuweisen und dann beide gleichzeitig auswählen würden. Also lasst uns ihnen ein Klassenziel zuweisen. Um nun in Napa und dem Menüsymbol auszuwählen, verwende ich die Methode Query Selector all Dann werde ich in der Klammer als Klassenname Ziele angeben Wir werden also beiden Elementen einige neue Stile hinzufügen , sobald wir auf das Symbol klicken , und diese Stile dann beim nächsten Klick entfernen . Dazu müssen wir uns die Knotenliste ansehen, die von der Methode all des Query Selectors zurückgegeben wird Wir müssen zu jedem Element eine neue Klasse hinzufügen , indem wir die Toggle-Methode verwenden Danach definieren wir mit dieser Klasse aus CSS neue Stile. Um also die Knotenliste durchzusehen, verwende ich eine der Array-Hilfsmethoden, die für jeden Knoten aufgerufen werden für jeden Knoten aufgerufen Tatsächlich benötigt die forEach-Methode ein Argument, das eine Callback-Funktion ist Und diese Funktion wird für jedes Element in der Knotenliste ausgeführt . Fügen wir hier also eine Pfeilfunktion ein. Diese Callback-Funktion selbst benötigt ein Argument, das das aktuelle Element in der Liste ist Während des Loops werde ich es Item nennen. Also, wie gesagt, müssen wir beiden Elementen eine neue Klasse hinzufügen , indem wir die Toggle-Methode verwenden Verwenden wir dazu eine der Eigenschaften namens Klassenliste. Wir müssen es dem Artikel beifügen. Es gibt uns alle Klassen , die das Element hat. Außerdem können wir auf verschiedene Methoden zugreifen , um die Klassen des Elements zu manipulieren In diesem Fall müssen wir eine Toggle-Methode verwenden, die es uns ermöglicht, dem Element eine Klasse hinzuzufügen , wenn es sie nicht hat, und die Klasse zu entfernen, wenn das Element sie hat Okay, jetzt müssen wir hier den Klassennamen weitergeben, nennen wir es Änderung. Das war's mit JavaScript. Jetzt müssen wir etwas CSS schreiben. Aber vorher werde ich zeigen, dass beide Elemente bei Click eine Klassenänderung erhalten Wenn ich also die Seite untersuche und die Elemente anzeige und dann auf das Symbol klicke, wirst du sehen, dass beide Elemente Klassen erhalten. Wenn ich erneut klicke, werden sie entfernt. Okay, jetzt müssen wir mithilfe des Klassenwechsels neue Stile definieren . Wählen wir das Menü mit Änderung aus. Sobald wir auf das Symbol klicken, müssen wir es nach unten bewegen. Ändern wir die oberste Position und machen es zu 15 RAM. Wenn ich also auf das Symbol klicke, bewegt es sich nach unten. Und in der nächsten Woche wird es wieder steigen. Lassen Sie uns diesen Effekt glatter machen. Übergang. Mit einem Wert ist top und 0,4 s. Jetzt kann man sehen, dass wir ein viel besseres Ergebnis haben. Als Nächstes zeige ich die Navigationsleiste an. Wählen wir es also mithilfe des Klassenwechsels aus. Ich werde die Spitzenposition definieren. Machen wir es auf Null. Und verwenden Sie auch den Übergang für einen glatten Effekt Die Werte top und 0,4 . Die Werte top und 0,4 s. Wenn wir also auf das Symbol klicken, wird der Roman glatt angezeigt und beim nächsten Klick ausgeblendet . Um diesen Effekt ein bisschen schöner zu machen, füge ich dem Menüsymbol eine gewisse Verzögerungszeit hinzu Fügen wir hier 0,2 s hinzu. Jetzt bewegt sich das Symbol mit einiger Verzögerung, aber das wollen wir nicht. Wir brauchen die Wartezeit bei der nächsten Clique nicht. Also werde ich einen anderen Übergang verwenden, aber mit Klassenwechsel und ohne Wartezeit. Okay, jetzt haben wir ein besseres Ergebnis, aber es ist immer noch nicht das, was wir wollen. Wir benötigen auch eine Wartezeit innerhalb des aktuellen Hafens. Lassen Sie uns also weitermachen und einen neuen Übergang mit einem Wert zwischen den oberen 0,4 s und 0,2 s hinzufügen einen neuen Übergang mit einem Wert zwischen den , was der Verzögerungszeit entspricht. In Ordnung? Wie Sie sehen, funktioniert jetzt alles perfekt. Das einzige, was getan werden musste, war Navigationselemente mit einem gewissen Fade-Effekt anzuzeigen . Zuallererst müssen wir alle Symbole verstecken. Setzen wir also die Opazität auf Null. Dann müssen wir Elemente beim Klicken anzeigen, jedoch mit unterschiedlicher Verzögerungszeit. Also müssen wir die Nummer auswählen, die mit dem Klassenwechsel verknüpft ist. Stellen wir die Opazität auf eins ein. Und danach müssen wir die Übergangseigenschaft für jedes Navigationselement mit einer anderen Verzögerungszeit definieren . Lass uns weitermachen und mit dem ersten Punkt beginnen. Wir brauchen. Erneut ändern. Geben Sie dann den Link gefolgt vom n-ten Child-Selektor als Wert Lass uns einen interviewen. Das bedeutet, dass wir den ersten Nobel-Link ausgewählt haben. Wie gesagt, wir brauchen hier einen Übergang mit einer Opazität von 0,4 s. Und als Verzögerungszeit fügen wir Ihre 0,5 s ein. Insgesamt haben wir fünf Elemente Lassen Sie uns diesen Code also viermal duplizieren und die Werte ändern. Für den zweiten Artikel benötigen wir 0,6 s. Dann ist der nächste 0,7 s. Für den vierten Artikel werde ich hier 0,8 s übergehen. Und für den letzten Artikel legen wir eine Verzögerungszeit von 0,9 s fest. Wenn ich also auf das Symbol klicke, werden die Navigationselemente schön mit einem gewissen Fade-Effekt angezeigt. Eigentlich sind wir fast fertig. Wir haben hier winzige Probleme. Wenn ich den Mauszeiger über die Elemente bewege, wird kein glatter Schwebeeffekt mehr Und auch, wenn wir die Novel-Itemhöhe ohne Übergang schließen . Der Grund für die erste Ausgabe ist, dass die alte Verbindung zwischen Navarra und Navarra überschrieben Lassen Sie uns also weitermachen und allen Elementen unten einen Übergang hinzufügen, ich meine, Farbe. Lassen Sie uns die Dauer auf 0,3 s festlegen. Was die zweite Ausgabe betrifft, müssen wir dem Navajo-Link standardmäßig Opazität hinzufügen Machen wir die Dauerpunkte auf 2 s. In Ordnung, jetzt funktioniert alles perfekt Und schließlich sind wir jetzt fertig, wo wir den Bau dieses Projekts abgeschlossen haben. Das einzige, was Sie tun müssen, ist, es auf verschiedene Bildschirmgrößen reagieren zu lassen . 10. Projekt 1 - Projekt reaktionsfähig machen: Wie wir zu Beginn dieses Projekts sagten, basiert es auf einem extra großen Bildschirm. Ich habe die Bildschirmgröße mit 1920 Pixeln Breite und zehn ADB, denen der Höhe Jetzt werden wir es für verschiedene Bildschirmgrößen responsiv machen . Wir müssen ein paar verschiedene Breakpoints erstellen. Und wir werden das Projekt mithilfe von CSS-Medienabfragen responsiv gestalten . Ich habe bereits die Breakpoints vorbereitet , an denen wir einige Änderungen vornehmen müssen, also werde ich keine Zeit damit verschwenden, sie zu finden. Okay, lassen Sie uns weitermachen und die Seite überprüfen. Und dann wechseln Sie in den Responsive-Modus. Wie Sie sehen können, sind Breite und Höhe auf 1920 Pixel und zehn ADP eingestellt Okay, der erste Breakpoint, an dem wir einige Änderungen vornehmen müssen , wird bei 1.400 Pixeln Wir müssen also eine CSS-Medienabfrage mit einer maximalen Breite von 1.400 Pixeln erstellen eine CSS-Medienabfrage mit einer maximalen Breite von 1.400 Pixeln Aber zuerst füge ich neue Kommentare ein, die ansprechend sind und nicht reagieren Erstellen Sie dann eine CSS-Medienabfrage und geben Sie die maximale Breite auf 1.400 Pixel Also der Breakpoint, ich werde die Schriftgröße des HTML-Elements verringern die Schriftgröße des HTML-Elements Machen wir 50 Prozent draus. Dadurch werden die Elemente verkleinert, für die wir RAM als Maßeinheit verwendet haben. In Ordnung, der erste Abschnitt sieht also gut aus. Wir müssen hier nichts tun. Was den zweiten Abschnitt betrifft, in dem wir die Einkaufswagen haben, werde ich den Platz unten in diesem Abschnitt vergrößern unten in diesem Abschnitt Aber um das zu tun, müssen wir zuerst die Höhe unserer Zeile festlegen. Wählen wir also den Abschnitt aus, um die Höhe auf automatisch einzustellen, da sonst der Abstand am unteren Rand nicht angewendet wird Also brauchen wir hier Padding, zehn Rem oben, Null, dann 12 RAM unten und dann wieder Null Als Nächstes müssen wir etwas Abstand zwischen der Überschrift und den Karten schaffen . Wählen wir also den Kartencontainer aus und weisen ihm den oberen Rand mit dem Wert zehn zu. In Ordnung, das war's mit Abschnitt zwei. Lassen Sie uns weitermachen und den nächsten Abschnitt anpassen, nämlich die Galerie. Derzeit sind für jeden Galerie-Link Breite und Höhe als Viewport-Breite definiert Sie werden kleiner, wenn wir die Breite des Browserfensters verringern. Also werde ich die Viewport-Breite im RAM ändern. Wählen wir den Galerie-Link und definieren dann Breite und Höhe. Ich setze die Breite auf vier, um zu rammen. Was die Höhe angeht, lassen Sie uns 25 Rem daraus machen. Außerdem müssen wir die Breite und Höhe für die Bilder definieren . Wir müssen beide auf 100% setzen. Okay, wir haben also die Breite und Höhe geändert. Ich meine die Maßeinheit. Eine weitere Sache, die ich hier tun möchte, ist, einen kleinen Spielraum um Gebäude herum zu schaffen. Denn sobald wir den Browser kleiner machen , kommen sich die Bilder zu nahe. Und um das zu vermeiden, setzen wir die Marge auf fünf Runs. In Ordnung, mit diesem Breakpoint sind wir eigentlich fertig. All diese Abschnitte sehen gut aus. Und jetzt müssen wir weitermachen und den nächsten Breakpoint finden , der aus tausend Pixeln bestehen wird Lassen Sie uns also weitermachen und eine neue CSS-Medienabfrage mit einer maximalen Breite von tausend Pixeln erstellen neue CSS-Medienabfrage mit einer maximalen Breite von tausend Pixeln Am Breakpoint werde ich die Größe der Abschnittsüberschriften ändern die Größe der Abschnittsüberschriften Wählen wir dieses Element aus und setzen Sie die Schriftgröße auf neun RAM. Außerdem müssen wir deinen Rand auf der linken und rechten Seite verwenden , da die Überschriften sonst später umbrochen werden und es nicht schön Setzen wir also die Marge oben und unten auf Null und links und rechts auf fünf Rem . In Ordnung, die Überschrift ist also kleiner. Als Nächstes werde ich das Symbol auch kleiner machen. Also lass uns weitermachen und sie auswählen und ihre Schriftgröße auf 25 rem setzen. In Ordnung, das war's mit dem ersten Abschnitt. Lassen Sie uns weitermachen und den zweiten anpassen. Ich wickle die Karten und lege sie auf verschiedene Linien. Also lasst uns weitermachen und Karten auswählen. Container Und ihm eine der Flex-Eigenschaften zugewiesen, ich meine Flex-Wrap mit dem Wert Rab Als Nächstes wähle ich die Karte selbst weil ich um jede Karte herum etwas Platz schaffen möchte. Verwenden wir Margin und setzen sie auf fünf Rem. Okay, das ist es also. Karten sehen gut aus. Und das einzige, was ich am Breakpoint tun möchte, ist, die Höhe der Fußzeile leicht zu erhöhen Wählen wir also Abschnitt vier und weisen dieser Höhe den Wert bis zur Rampe zu. Richtig? Mit tausend Pixeln sind wir also fertig. Lassen Sie uns weitermachen und uns um den nächsten Breakpoint kümmern , der tatsächlich 900 Pixel sein wird Lassen Sie uns also weitermachen und neue CSS-Medien erstellen. Geben Sie dann die maximale Breite als 900 Pixel an. Am Breakpoint nehme ich hier die Null, wo alle anderen Abschnitte gut aussehen Also lass uns weitermachen und jetzt Bar Link auswählen. Ich werde die RAM-Marge festlegen. Dann. Also wie das Ich-Element, weil ich es leicht verringern möchte. Also die Schriftgröße. Lass es uns auf Forum setzen. Und lassen Sie uns auch das Span-Element auswählen. Ich bin in den Textwerten und stelle die Schriftgröße auf Ausführen ein. In Ordnung, das ist es jetzt, aber es sieht gut aus. Und wir müssen weitermachen und den nächsten Breakpoint finden , der meiner Meinung nach bei 700 Pixeln liegen wird Lassen Sie uns also neue CSS-Medien erstellen und die maximale Breite auf 700 Stück angeben Am Breakpoint werde ich also die Größe dieser Abschnittsüberschrift verkleinern Lassen Sie uns weitermachen und die Abschnittsüberschrift auswählen. Stellen Sie die Schriftgröße auf sieben RAM ein. Außerdem werde ich die Gewinnspanne auf der linken und rechten Seite erhöhen. Es ist also Zero und Tan Run zugewiesen. Okay, als Nächstes kümmern wir uns um die Icons. Ich werde auch ihre Größen verkleinern. Wählen wir sie also aus und setzen ihre Schriftgröße auf 20 Rampe. Ordnung, bevor wir mit dem nächsten Abschnitt fortfahren, verschiebe ich das Menüsymbol ein wenig auf die linke Seite des Auges Wählen wir also das Menü aus und definieren wir seine linke Position. Mach es zum Laufen. Ordnung, das Symbol sieht also gut aus und eigentlich sehen alle anderen Abschnitte außer der Fußzeile gut Also lass uns weitermachen und uns darum kümmern. Zuallererst werde ich die Höhe erhöhen. Abschnitt vier, setze die Höhe auf vier, um zu laufen. Als Nächstes platziere ich die Elemente in der Spalte übereinander. Dafür müssen wir die Biegerichtung ändern. Machen wir es zu einer Kolumne. Dann müssen wir Flex-Artikel oben im Behälter platzieren . Verwenden Sie hier Justify Content Flex Start. Außerdem müssen wir sie horizontal zentrieren, indem wir die Elemente mittig ausrichten. Wie Sie sehen können, werden die Elemente vertikal in einer Spalte platziert, aber wir müssen etwas Abstand zwischen diesen Texten und dem Eingabefeld schaffen . Wählen wir also einen Abschnitt für Texte aus und definieren den unteren Rand mit dem Wert acht Ran. In Ordnung, das war's am Breakpoint. Jetzt müssen wir unser Projekt am letzten Breakpoint anpassen , der 550 Pixel groß sein wird Lassen Sie uns also weitermachen und neue CSS-Medien erstellen und eine Breite von 550 Pixeln angeben. Lassen Sie uns weitermachen und die Schriftgröße der HTML-Elemente noch einmal verringern . Ich werde es zu 40 Prozent schaffen. Als Nächstes müssen wir den Abstand zwischen den Navigationselementen verringern . Wählen wir nun nach Link aus und setzen den Rand auf Null und die Rampe 0,7. In Ordnung, eigentlich sind wir fast fertig. Aber ich sehe hier ein kleines Problem. Sie können feststellen , dass das Menüsymbol hinter den Galerie-Links landet. Diese könnten auch an anderen Breakpoints ein Problem sein. Also lasst uns weitermachen und das beheben. Ich werde ihm standardmäßig eine Z-Index-Eigenschaft zuweisen. Machen wir 100 draus. In Ordnung, das Problem ist also behoben. Und schließlich haben wir die Arbeit an unserem Projekt abgeschlossen. Ich denke, es sieht auf verschiedenen Bildschirmgrößen gut aus, also können wir sagen, dass es responsiv ist. Okay, also ich hoffe, dass dieses Projekt interessant war. Es hat dir Spaß gemacht und du hast ein paar neue Sachen gelernt. Jetzt müssen wir weitermachen und mit dem Bau des nächsten Projekts beginnen. 11. Projekt 2 - Projektvorschau: In Ordnung, jetzt ist es an der Zeit Bau unseres zweiten Projekts zu beginnen Ich nenne es kreatives Design, weil wir während dieses Projekts einige nette und coole Effekte verwenden werden. Bevor wir anfangen, den Code zu schreiben. Lassen Sie uns weitermachen und das Projekt beschreiben. Es wird aus verschiedenen Abschnitten bestehen. Lassen Sie uns also jeden von ihnen durchgehen. Im Moment sehen Sie sich den ersten Abschnitt an , der aus verschiedenen Teilen besteht. Wir haben hier vier verschiedene Navigationspunkte. Sie sind vertikal ausgerichtet und sobald wir den Mauszeiger über sie bewegen, beginnen sie, sich horizontal zu platzieren und sie erhalten auch den Hintergrund Als nächstes haben wir hier eine gut aussehende Überschrift. Unten sehen Sie das Logo der Website. Und wir haben hier auch einen schwebenden Hintergrund, der wie die Wellen aussieht. Und ich finde, es sieht ziemlich gut aus. In Ordnung, als Nächstes haben wir Karren mit den Kunden. Jedes Auto enthält einige Font- und Fantastic-Symbole. Außerdem hatten wir Bilder von den Kunden und den Bewertungen. Die Karten haben einen schönen Schwebeeffekt. Als nächstes kommt der Teambereich. Es enthält auch die Karten, aber diese Karten sind anders und repräsentieren die Teammitglieder. Außerdem enthalten sie einige Geschichten über die Mitglieder, die wir anzeigen können, indem wir auf diese Schaltfläche klicken. Richtig. Danach haben wir einen Kontaktbereich. Es enthält das Bild und ein paar Eingabefelder. Sie befinden sich in einer 3D-Umgebung und haben auch einen schönen Schwebeeffekt Unten haben wir eine einfache Fußzeile mit etwas Copyright-Text Okay, das war's mit diesen Abschnitten des Projekts. Die Navigationselemente ermöglichen es uns, zu den richtigen Abschnitten zu navigieren. Wenn ich sie anklicke, gelangen wir reibungslos zu den entsprechenden Abschnitten. Außerdem haben wir hier einen festen Button in der unteren rechten Ecke der Seite. Wenn ich darauf klicke, scrollt es bis Seite zwei, dem ersten Abschnitt. In Ordnung, das war's also mit dem Projekt. Es wird auf alle verschiedenen Bildschirmgrößen reagieren . Wenn ich die Seite überprüfe, den Responsive-Modus wechsle und das Projekt überprüfe, dann werden Sie feststellen , dass es auf verschiedenen Bildschirmgrößen gut aussieht . In Ordnung, wir sind bereit, mit dem Bau dieses Projekts zu beginnen. Sie können die Starter - und die finalen Quelldateien herunterladen. Sie sind dieser Vorlesung beigefügt 12. Projekt 2 - HTML-Markup für die Landung erstellen und gemeinsame Stile definieren: In Ordnung, wir sind bereit, mit dem Bau unserer Projekte zu beginnen. Ich habe auf dem Desktop einen neuen Ordner namens Creative Design erstellt , in dem ich einen weiteren Ordner für die Bilder habe. Lassen Sie uns diesen Ordner in VS-Code öffnen und unsere Arbeitsdateien für HTML, CSS und JavaScript erstellen . Ich nenne sie index.html, style.css und script.js. Öffnen Sie dann die Datei index.html und erstellen Sie ein einfaches HTML-Dokument. Dafür verwende ich m it Fügen wir hier ein Ausrufezeichen ein und drücken Sie dann die Tabulatortaste oder die Eingabetaste In Ordnung, hier haben wir also grundlegende HTML-Tags. Zunächst ändere ich den Titel. Lassen Sie uns Ihr kreatives Design einfügen. Danach. Lassen Sie uns CSS- und JavaScript-Dateien verknüpfen. Ich öffne das Link-Tag und gebe den Pfad der CSS-Datei an. Was das JavaScript angeht, öffne ich das Script-Tag direkt über dem abschließenden Body-Tag. Und dann müssen wir den Pfad der Datei im Quellattribut angeben. Außerdem werde ich noch einen Link für die Font Awesome-Icons einfügen. Gehen wir also zu Google suchen nach Font Awesome, CDN, JES. Dann schnapp dir den ersten Link, öffne das Link-Tag in den Kopfelementen und füge den kopierten Link hier ein. Okay, lassen Sie uns abschließend das Projekt im Browser ausführen. Dafür verwende ich eines der VS-Codepakete, das als Live-Server bezeichnet wird. Es ermöglicht uns, das Projekt live im Browser auszuführen und Aktualisierungen und Änderungen vorzunehmen , ohne die Seite zu aktualisieren. Okay, lassen Sie uns weitermachen und den Editor und den Browser platzieren . So wie. Und fang an. Wir werden das Projekt Abschnitt für Abschnitt aufbauen. Wir erstellen das HTML-Markup für jeden Abschnitt und gestalten ihn dann Lassen Sie uns also weitermachen und das HTML-Markup für den ersten Abschnitt erstellen das HTML-Markup für den ersten Abschnitt Zunächst öffne ich ein div-Tag, das der Container sein wird. Öffnen Sie dann das Abschnittselement mit einem Klassenabschnitt eins. Der erste Abschnitt wird also ein paar verschiedene Teile enthalten. Wir werden eine Navigationsleiste als Überschrift haben , gefolgt vom Logo Und wir werden auch diesen schwebenden Hintergrund haben. Lassen Sie uns weitermachen und die Navigationsleiste erstellen. Ich werde jetzt das HTML5-Navigationselement mit der Klasse für dieses Interferenz-Link-Element mit der Klasse jetzt pro Link öffnen für dieses Interferenz-Link-Element mit der Klasse jetzt pro Link Und als ersten Artikel fügen wir Ihr Design ein. Insgesamt werden wir also vier Navigationselemente haben. Lassen Sie uns diese Codezeile dreimal duplizieren und dann den Inhalt ändern. Der zweite werden Kunden sein. Dann werden wir Team und Inhalt haben. Okay, darum geht es jetzt. Als Nächstes füge ich ein div-Tag ein, das der schwebende Hintergrund sein wird. Ich werde jedem Cluster Floating PG zuweisen. Danach erstelle ich eine Überschrift. Es ist also ein offenes H1-Überschrift-Tag mit einer Überschrift für einen Klassenabschnitt Und wie der Inhalt, der genau hier ist, kreatives Design. Und zum Schluss erstellen wir ein Logo, das das Font Awesome-Symbol sein wird. Lassen Sie uns zunächst das Div-Tag mit dem Klassenlogo öffnen. Es wird die Hülle des Symbols sein. Und dann fügen Sie Ihr Augenelement mit der Klasse FAS ein. Ich habe eine Bezier-Kurve. In Ordnung, das ist es. In Bezug auf diesen Abschnitt wird eines der Elemente vorbereitet. Und jetzt müssen wir anfangen, CSS zu schreiben. Zunächst werde ich einige gängige und standardmäßige Stile erstellen . Tatsächlich werden wir während dieses Projekts zwei verschiedene Google-Schriftarten verwenden. Also müssen wir den Link einfügen. Gehen wir zur Google Fonts-Website. Dann suche ich nach einer Schrift namens Monotone. Außerdem benötigen wir folgenden Text. Eigentlich werde ich hier ein paar Stile auswählen. Wählen wir alle diese Stile außer Italienisch aus. Dann nimm den Link von hier und füge ihn in die CSS-Datei ein. Ordnung, also wie gesagt, wir werden einige gängige Stile kreieren Daher wähle ich jedes Element mit einem Sternchen Lassen Sie uns zunächst Standard, Rand und Padding von jedem Element entfernen Rand und Padding von jedem Element Lassen Sie uns beide auf Null setzen. Dann werde ich Box-Größe Border-Box setzen. Entfernen Sie auch die Standardwerte die den Linkelementen zugrunde liegen, indem Sie Textdekoration verwenden. Keine. Der nächste wird ein List-Stil-Typ sein Keine. Es entfernt die Standardaufzählungszeichen der LI-Elemente Ich meine die Listenelemente. Danach entferne ich die Standardkontur von jedem Element. Lassen Sie uns also die Gliederung auf Null setzen. Als Nächstes definiere ich die Schriftfamilie. Verwenden wir hier die Tonart, Texte, Kursivschrift. Und zum Schluss setzen wir die Schriftstärke auf 400. Okay, wie Sie sehen können, werden alle Stile angewendet. Also projiziere ich einfach, ich werde RAM als Maßeinheit verwenden. Moment entspricht ein RAM 16 Pixeln, da die Schriftgröße des HTML-Elements standardmäßig 16 Pixeln entspricht. Ich werde ein RAM in zehn Pixel umwandeln weil ich denke, dass es bequemer und einfacher zu bedienen sein wird . Um das zu tun, müssen wir die Schriftgröße des HTML-Codes auf 62,5 Prozent reduzieren 62,5 Prozent Wie Sie sehen können, wurden die Elemente kleiner und jetzt entspricht 1 g zehn Pixeln 13. Projekt 2 - Erstelle Welleneffekt mit dem schwebenden Hintergrund: Ordnung, endlich können wir mit dem Styling des ersten Abschnitts beginnen Bevor wir das tun, werde ich einige Kommentare hinzufügen , weil ich es vergessen habe. Lassen Sie uns Kommentare in die HTML-Datei einfügen. Wir brauchen hier, Abschnitt eins, Ende von Abschnitt eins. Dann füge ich in die CSS-Datei hier allgemeine Stile und gängige Stile ein. Und dann müssen wir zu Abschnitt eins und zu Abschnitt eins gehen. Okay, lassen Sie uns weitermachen und Abschnittselemente auswählen. Zunächst definiere ich Breite und Höhe. Fangen wir mit 200 Prozent an. Was die Höhe angeht, werde ich sie zu 100% aus dem Viewport machen 100% aus dem Viewport Dann setze ich den Hintergrund auf Weiß. Eigentlich ist der Hintergrund standardmäßig weiß, aber lassen Sie uns ihn trotzdem definieren. Okay, jetzt kümmere ich mich um den schwebenden Hintergrund und zeige, wie er funktioniert. Zuerst werde ich es kleiner machen und Ihnen zeigen, wie es funktioniert, und danach wird es größer. Also lasst uns weitermachen und div elements auswählen, die Klasse Floating Background. Definieren wir zunächst Breite und Höhe. Ich werde beiden 70 RAM geben. Dann ändere die Hintergrundfarbe. Ich werde den RGBA-Wert verwenden. Lassen Sie uns Ihre 50231255 und dann die Opazität 0,8 einfügen. Okay, hier haben wir einen Hintergrund. Als Nächstes platziere ich es in der Mitte. Lassen Sie uns die Position auf absolut setzen. Um das Element entsprechend seinem übergeordneten Element zu positionieren , werde ich die relative Position für das Abschnittelement festlegen . Danach müssen wir die Eigenschaften oben und links definieren . Lassen Sie uns auf 15% setzen. Was die linke Eigenschaft angeht, zentrieren verwende ich die Calc-Funktion, um das Element perfekt zu Wir müssen die Hälfte der Breite der Elemente auf 50 Prozent subtrahieren der Elemente auf 50 Prozent In diesem Fall wird das Element horizontal zentriert. Also brauchen wir hier Calc und die Berechnung wird eine 50-prozentige Rampe bis 35 sein Okay, also im Moment, das war's mit dem ersten Hintergrund. Als Nächstes müssen wir eine zweite erstellen. Und ich werde das mit dem vorherigen Pseudoelement machen. Lassen Sie uns also weitermachen und das schwebende PG auswählen , gefolgt von den vorherigen Pseudoelementen Lassen Sie uns zunächst den Inhalt definieren und ihn leer machen. Dann definiere ich Breite und Höhe. Machen wir beide zu 100%. Ändern Sie auch die Hintergrundfarbe. Ich werde dieselbe Farbe verwenden aber mit unterschiedlicher Opazität Wir benötigen also RGBA 50231255 und die Opazität 0,1. Danach setze ich die Position auf absolut. Und dann müssen wir die Positionen oben und links definieren. Ich werde beide auf Null setzen. Im Moment ist das Element nicht sichtbar, da es sich hinter dem ersten Hintergrund befindet. Und um das zu beweisen, können wir einfach die linke Position ändern Lass uns das machen, sagen wir 20%. Jetzt kannst du es also deutlich sehen. Jetzt das Vorher, damit das Element, in dem ich mich im zweiten Hintergrund befinde, sichtbar ist. Okay, kommen wir zurück zu Null. Als Nächstes müssen wir die Form dieser Elemente ändern. Wir müssen sie mit dem Grenzradius umrunden, aber wir werden für jedes Element unterschiedliche Werte verwenden Für den Haupthintergrund setze ich den Grenzradius also auf 45%. Was das zweite Element betrifft, lassen Sie uns den Randradius Okay, jetzt ist alles bereit. Wir müssen nur beide Elemente animieren. Dann werde ich CSS-Keyframes verwenden. Es ermöglicht uns, einige CSS-Regeln zu erstellen und sie dann mithilfe der Animationseigenschaft auf die Elemente anzuwenden. Lassen Sie uns CSS-Keyframes erstellen. Wir müssen ein Zeichen hinzufügen, dann das Schlüsselwort Keyframes, gefolgt vom Namen der Animation Ich nenne es Rotate. Wir werden zwei verschiedene Schritte definieren, den Startpunkt und den Endpunkt. Ich meine 0% und 100 Prozent. Und wir müssen das Element um 360 Grad drehen. Also bei 0%, ich meine, am Startpunkt müssen wir die Transformation mit der Rotationsfunktion und mit dem Wert Null durchführen. Was die 100% angeht, als Endpunkt. Wir müssen uns transformieren, um 360 Grad drehen. Während der Animation dreht sich das Element also einmal um 360 Grad. Okay, um diesen Stil auf die Hintergründe anzuwenden, müssen wir die Animationseigenschaft für beide Elemente verwenden Zuerst müssen wir den Namen der Animation definieren, der Rotation lautet. Dann müssen wir die Dauer definieren. Es werden dreißig Sekunden dauern. Außerdem müssen wir die Animation unendlich machen. Also lass uns dein Unendliches einfügen. Wie Sie sehen können, drehen sich die Elemente und wir haben einen schönen Animationseffekt. Jetzt müssen wir die Größe und Position dieser Hintergründe ändern . Übrigens verwenden wir die Viewport-Breite als Maßeinheit da wir so das Element an unterschiedliche Bildschirmgrößen anpassen können das Element an unterschiedliche Bildschirmgrößen Um zu demonstrieren, warum wir die Viewport-Breite verwenden, ändern wir den RAM, machen ihn zur Viewport-Breite und verringern auch die Machen wir es, sagen wir 40 Viewport-Breite. Und auch hier ändern, 35 rammen auf 20 Viewport-Breite Wenn ich also das Fenster kleiner als den Hintergrund mache, ändere ich ihre Größe entsprechend. In Ordnung? Eigentlich müssen wir die Breite und Höhe erhöhen. Lass uns beide machen. Breite des Sichtfensters: 150. Ändern Sie außerdem 20 in 75 Viewport-Breite. Außerdem müssen wir die Position korrigieren. Lassen Sie uns die obere Position auf eine Viewport-Breite von -125 setzen. Okay? Der Hintergrund ist also korrekt platziert. Wir haben hier nur ein Problem. Wir brauchen diesen Scrollbalken hier unten nicht. Um das zu beheben, ich dem Körper das Element overflow x hidden zu Okay, lassen Sie uns über den schwebenden Hintergrund sprechen. Es sieht ziemlich nett und modern aus, also ich hoffe es gefällt euch. Jetzt müssen wir uns um den Rest der Elemente kümmern. Ich meine, jetzt zur Überschrift und zum Logo 14. Projekt 2 - Landingpage anpassen: Lass uns weitermachen und mit der Jetzt-Leiste beginnen. Wir haben vier verschiedene Navigationselemente, und ich werde sie horizontal in einer Reihe platzieren, aber jedes Element wird vertikal ausgerichtet. Lassen Sie uns weitermachen und Navbar auswählen. Im Moment befindet sich die Navigationsleiste hinter dem schwebenden Hintergrund Um es also sichtbar zu machen, verwende ich die Eigenschaft z-index. Aber vorher müssen wir die Position definieren, da sonst die Z-Index-Eigenschaft nicht funktioniert Lassen Sie uns also die Position auf relativ setzen. Und dann verwende den Index mit dem Wert, der höher als Null sein wird . Machen wir 20 draus. Okay, also dann, jetzt sind vier machbar und ich werde ihre Position ändern. Lass es uns ein bisschen nach unten legen. Also werde ich die Spitzenposition auf vier Rampen setzen. Als Nächstes werde ich etwas Abstand zwischen den Navigationselementen schaffen und sie mithilfe von Flexbox ausrichten Lassen Sie uns also weitermachen und die Display-Eigenschaft auf Flex setzen. Und um dann Platz zwischen den Elementen zu schaffen, begründe ich die Inhaltseigenschaft einfach mit dem Wert, der gleichmäßig verteilt In Ordnung, das war's mit der Navbar. Lassen Sie uns weitermachen und den Link in Alba anpassen. Wählen wir es aus. Und zuallererst deutet eine erhöhte Schriftgröße auf RAM hin. Außerdem werde ich die Links fetter machen , als etwas Abstand zwischen den Buchstaben zu schaffen Lass es auf RAM zeigen. Und ändere die Farbe. Lassen Sie uns die Farbe auf Weiß setzen. Okay, die Artikel sehen also gut aus. Wie ich mich an das fertige Projekt erinnere, sollte das Objekt eine vertikale Linie sein Sobald wir den Mauszeiger darüber bewegen, sollten sie wieder horizontal platziert Und sie sollten auch eine Hintergrundfarbe bekommen, oder? Um sie vertikal zu platzieren, werde ich die Breite der Nanoporenverbindung verringern Und außerdem werde ich eine der Eigenschaften namens Word Wrap mit dem Wertebruch Word verwenden . Stellen wir also die Breite auf 1,5 RAM ein. Und dann verwende einen Zeilenumbruch mit dem Wort „Wertebruch“. In Ordnung, das war's mit dem Napal-Link. Jetzt ist es an der Zeit, einen Hover-Effekt zu erzeugen. Sobald wir den Mauszeiger über das Objekt bewegen, müssen wir die Breite vergrößern und auch die Hintergrundfarbe ändern Lassen Sie uns also weitermachen und Noble Link mit dem Mauszeiger auswählen. Dann mit 215 RAM einstellen. Für die Hintergrundfarbe verwende ich den RGBA-Wert Ich meine, die weiße Farbe. Und die Opazität deutet darauf hin. Sobald wir den Mauszeiger über die Gegenstände bewegen, spielen sie es horizontal ab und sie erhalten auch eine neue Hintergrundfarbe Wie Sie sehen können, sind die Elemente nicht in der Mitte der Box angeordnet. Und wir brauchen auch einen Übergang , um diesen reibungslosen Effekt zu erzielen. Richten wir sie also zunächst in der Mitte aus. Verwenden Sie die Textausrichtung in der Mitte. Wir benötigen zwei verschiedene Übergänge, einen beim Zeigen mit der Maus und den zweiten für den Link selbst Verwenden wir also Transition mit den Werten alle 2,5 s. Und wir müssen auch alle 0,5 s übergehen. diesem zweiten Übergang können wir die Elemente etwas schneller vertikal ausrichten. In Ordnung, also funktioniert alles gut. Wir haben hier einen schönen Schwebeeffekt. Tatsächlich stellen Sie hier vielleicht fest, dass wir auf der rechten Seite einen Scrollbalken bekommen. Aber das ist kein Problem. Es wird behoben, sobald wir fortfahren und dem Projekt einen weiteren Abschnitt hinzufügen. Okay, als Nächstes werde ich ein Überschriftenelement gestalten. Also lass uns weitermachen und es auswählen. Zuerst. Erhöhen wir die Schriftgröße, machen wir acht RAM daraus und ändern dann die Schriftfamilie. In diesem Fall verwende ich Telefon namens Monotone Corrosive Als Nächstes kümmere ich mich um die Position der Überschrift. Wir müssen es in der Mitte platzieren. Dafür werde ich Position Absolute verwenden, anstatt dass wir die Spitzenposition brauchen. Stellen wir es auf eine Viewport-Breite von 18 ein. Und ich werde auch eine linke Position mit einem Wert von 50% definieren . Im Moment ist die Überschrift nicht zentriert. Wir müssen es um 50 Prozent seiner Breite nach links verschieben . Und dafür müssen wir die Transformationseigenschaft mit der Translate-Funktion verwenden . In diesem Fall müssen wir mit X-Richtung übersetzen. Und als Wert gebe ich hier -50 Prozent ein. Jetzt ist das Element perfekt zentriert. Okay, danach erstellen wir einen Schatteneffekt. Ich werde Text Shadow verwenden. Wir brauchen 0,33 mal und die Farbe 888. Als Nächstes ändere ich die Farbe. Lass es uns weiß machen. Ebenfalls. Ich werde die Hintergrundfarbe auch auf Weiß setzen. Und dann erhöhen Sie die Breite des Elements. Machen wir 85 Rem daraus. Okay, jetzt sieht die Überschrift viel besser aus. Wir müssen es in der Box zentrieren. Und dafür verwenden wir Text-Align Center. Schafft auch etwas Platz in der Box. Ich werde das Padding oben und unten für die linke und rechte Seite auf 0,8 rem einstellen oben und unten für die linke und rechte Seite Machen wir daraus 1,6 RAM Außerdem werde ich die Ecken der Box mit dem Randradius mit dem Wert 0,8 leicht abgerundet machen Randradius mit dem Wert 0,8 leicht abgerundet mit dem Wert 0,8 Das Letzte, was ich tun werde, ist, die Opazität leicht zu verringern Machen wir 0,9 draus. In Ordnung, mit der Überschrift sind wir fertig Lassen Sie uns weitermachen und das letzte Element in diesem Abschnitt anpassen , nämlich das Logo. Kümmern wir uns zunächst um seine Position. Ich werde es unten in der Mitte der Seite platzieren . Lassen Sie uns erneut dieselbe Technik anwenden , bei der die Position auf absolut gesetzt wird. Definieren Sie dann die Spitzenposition und machen Sie sie zu 70%. Was die verlassene Eigenschaft angeht, müssen wir sie auf 50% setzen. Und dann müssen wir mit der Translate X-Funktion transformieren . Fügen wir hier -2% ein. Das Logo ist also positioniert, und jetzt lassen Sie uns weitermachen und es anpassen. Wählen wir I-Elemente aus und erhöhen Sie die Schriftgröße auf 15 RAM. Dann ändere ich die Farbe. Verwenden wir hier den RGBA-Wert 50.231.255,8. Und ich werde auch Textschatten verwenden. In diesem Fall verwende ich einen mehrstufigen Textschatten. Also erster Instinkt zu 0,1 RAM, 0,1 REM-Punkt zu RAM Und sie riefen oder D, D, D S für den zweiten Schatten. Machen wir es auf der linken Seite. Wir brauchen hier negative Werte, -0,1 RAM, -0,1 RAM, dann zeigen wir auf Und derselbe Anruf. In Ordnung, das ist es Das Logo ist maßgeschneidert und mit dem ersten Abschnitt sind wir fertig. Lassen Sie uns weitermachen und uns um den nächsten Abschnitt kümmern. 15. Projekt 2 - Kundenabschnitt erstellen und anpassen: Der nächste Abschnitt wird der Kundenbereich sein. Es wird aus der Überschrift und drei verschiedenen Karten bestehen. Auf jeder der Karten werden wir ein paar verschiedene Elemente haben . Ich meine, die Zitate, dann der Absatz, auf den diese Touren folgen , und das Bild des Kunden mit seinem Namen. Ordnung, lassen Sie uns weitermachen und mit der Erstellung des HTML-Markups beginnen der Erstellung des HTML-Markups Fügen wir neue Kommentare ein, Abschnitt zwei und Abschnitt zwei. Öffnen Sie dann auch das Abschnittselement mit einem Klassenabschnitt. Ich werde H1-Überschriftenelemente mit der Überschrift des Klassenabschnitts und mit dem Inhalt erstellen mit der Überschrift des Klassenabschnitts und mit dem Inhalt Kunden. Öffnen Sie dann das div-Element, das die Hülle der Karten sein wird, die ich der Klasse Customers Wrapper zuweisen werde zuweisen Dann benötigen wir einen weiteren Div-Tag, der die Karte selbst sein wird , die Ihrem Klassenkunden zugewiesen wird. Okay, also wie gesagt, wir werden hier ein paar verschiedene Elemente haben. Das erste werden die Anführungszeichen sein, die durch das Font Awesome-Symbol dargestellt werden . Es ist also offen. Das Element mit einer Klasse ist FAS, FAA, Anführungszeichen links. Als nächstes benötigen wir einen Absatz mit den Kundentexten der Klasse. Und dann verwenden wir stattdessen einen Scheintext. Danach werde ich eine Kundenbewertung erstellen. Wir werden fünf Sterne haben. Vier von ihnen werden gefüllt sein. Was den letzten betrifft, wird nur der halbe Teil gefüllt. Also öffne ich zuerst den Div-Tag, die Zusammenfassung der Bewertung sein wird , die ihm zugewiesen wurde Klasse Kundenbewertung als offene I Elemente und den Klassen FAS zugeordnet, ein Stern Ich werde es viermal duplizieren. Dann ändere den Klassennamen für das letzte Element. Wir brauchen hier, wenn ich anfange, die Hälfte raus. Okay, das war's mit der Bewertung. Als nächstes füge ich hier ein Bild ein. Wählen wir ein Bild aus dem Bilderordner aus, das wir hier benötigen, und weisen dem Bild außerdem das Klassenattribut mit dem Wert Kunden-IMG zu Bild außerdem das Klassenattribut mit dem Wert Kunden-IMG Danach öffnen wir das H4-Heading-Tag mit einem Klassenkundennamen Und geben Sie hier den Namen des Kunden ein. Sagen wir Jane Lee. In Ordnung, das war's mit der ersten Karte. Insgesamt werden wir drei davon haben. Also lass uns weitermachen und die Karte zweimal duplizieren und dann einige Änderungen vornehmen. Also hier, für den fünften Stern, brauchen wir einen Stern der Klasse A, weil er genauso gefüllt sein wird, wie die vier anderen Sterne. Dann ändere den Namen des Bildes, das wir hier benötigen, img2, und ändere auch den Namen des Kunden Das ist das Institut, Bob Smith. die dritte Karte angeht, ist der fünfte Stern leer. Also ich ändere hier den Klassennamen statt FAS, wir brauchen hier FAR. Dann f einen Stern, dann änderte ich den Namen des Bildes. Wir brauchen hier drei, und auch als Namen des Kunden, lass uns Institute und Brown nennen. Okay, also alle drei Karten sind erstellt und jetzt müssen wir diesen Abschnitt anpassen Lassen Sie uns einen neuen Kommentar erstellen, Abschnitt zwei und Abschnitt zwei. Wählen Sie dann Abschnittselemente aus. Und definieren Sie zunächst Breite und Höhe. Ich werde mit 200 Prozent beginnen. Was die Höhe angeht, machen wir sie zu 100% aus dem Viewport. Bevor ich mit diesem Abschnittselement beginne, lassen Sie uns die Größe der Bilder verringern da sie im Moment zwei Mal größer sind. Lassen Sie uns also weitermachen und Customer IMG auswählen. Ich werde beide in der Höhe auf zehn Rampen stellen. Außerdem werde ich hier das Object-Feed-Cover verwenden Object-Feed-Cover , um die Qualität des Bildes beizubehalten. Okay, danach lassen Sie uns die Elemente innerhalb dieses Abschnitts ausrichten , das ist in Flux-Büchern. Ich setze die Display-Eigenschaft auf Flex. Dann müssen wir Elemente in der Spalte platzieren, also müssen wir die Richtung ändern. Lass uns eine Kolumne machen. Und um etwas Platz um die Flex-Elemente herum zu schaffen , verwende ich justify-Content, Space around. In Ordnung, das ist es. Abschnitt 1, es ist maßgeschneidert. Als Nächstes kümmere ich mich um das Überschriftenelement. Wählen wir es also mit der Überschrift des Klassenabschnitts aus. Zuallererst werde ich die Schriftgröße erhöhen. Lass uns zehn RAM draus machen Ändere auch die Schriftstärke. Ich werde es mutig machen. Dann möchte ich Text in Großbuchstaben N umwandeln. Schließlich ändere ich die Farbe, mache 999 daraus Als nächstes müssen wir die Überschrift in der Mitte platzieren. Und dafür verwende ich Text-Align Center. Lassen Sie uns außerdem die Opazität verringern und sie auf 0,1 erhöhen. Und schließlich fügen Sie der Überschrift einen Schatteneffekt hinzu, indem Textschatten mit den Werten für RAM verwenden, für RAM und die Farbe AAA ausgeführt wird. In Ordnung, die Überschrift ist also gestylt. Ich finde es sieht ganz nett aus. Also lass uns weitermachen und uns um die Karten kümmern. Zunächst wähle ich das Wrapper-Div-Element aus, das einen ClassName hat , den Wrapper für Kunden Also werde ich die Karten horizontal in einer Reihe platzieren. Und dafür verwenden wir Flexbox. Um dann etwas Abstand zwischen den Flex-Elementen zu schaffen , verwenden wir Justify Content. Wir werten gleichmäßige Abstände ab. Und um die Elemente in der Mitte auszurichten, verwenden wir zuerst die Option und dann die Artikelmitte. Okay, die Elemente sind aufeinander abgestimmt und jetzt müssen wir das Auto selbst starten. Wählen wir es aus. Definieren Sie zunächst die Breite und machen Sie 35 RAM daraus. Dann setze ich die Höhe auf 50 RAM. Und ändere auch die Hintergrundfarbe, mach es e. Okay, als Nächstes richte ich die Elemente innerhalb der Karte mit Flexbox Verwenden wir also Display Flex. Dann müssen wir Elemente in einer Spalte platzieren. Ändern wir also die Richtung, machen wir es zu einer Spalte. Danach zentrieren wir die Elemente horizontal, indem wir die Elemente mittig ausrichten. Okay, außerdem werde ich die Ecken der Karte abgerundet machen Verwenden Sie Border-Radius mit einem Wert von 0,5 RAM. Außerdem werde ich mithilfe von Polsterung etwas Platz auf der Karte schaffen mithilfe von Polsterung etwas Platz auf der Karte Stellen wir es auf allen vier Seiten auf zwei RAM ein. Und schließlich benutze Box Shadow. Ich werde einen mehrstufigen Schatten erstellen. Fügen wir hier einen RAM ein, dann einen RAM als RAM. Und die Farbe oder D, d, D. Und erstelle auch einen Schatten auf der linken Seite. Wir brauchen hier minus ein Zimmer, dann wieder minus ein Rem für RAM und Farbe E. In Ordnung, also mit den Karten sind wir fast fertig Wir müssen sie nur anders ausrichten. Und dann passen wir die Elemente auf der Karte an. Also werde ich die Position der ersten und dritten Karte ändern . Ich lege die erste Karte etwas nach unten. Und dafür verwenden Sie wiederum Flux-Bücher. Ich wähle die erste Karte aus. Also brauchen wir hier einen Kunden, gefolgt von der Pseudoklasse Es wählt die erste Karte aus. Und um dann ein bisschen nach unten zu platzieren, müssen wir uns selbst am Value Flex End ausrichten. Die Karte wird auf den Boden des Containers gelegt. Moment hat sich also nichts geändert , da wir die Höhe des Wrappers definieren müssen Weisen wir ihm also eine Höhe mit dem Wert 70% zu. Jetzt wird die erste Karte etwas nach unten gelegt. Lassen Sie uns weitermachen und auch die dritte Karte bewegen. Eigentlich werde ich diesen Code duplizieren und dann das erste Kind und das letzte Kind ändern Und anstatt uns zu verändern, und wir müssen flexibel sein, fangen wir an. In Ordnung, die Karten sind also ausgerichtet. Lassen Sie uns damit beginnen, die Elemente auf der Karte anzupassen. Fangen wir mit den Zitaten an. Ich werde es auswählen, aber es ist Klasse FA, Zitat links. Lassen Sie uns die Schriftgröße erhöhen, sie für RAM einrichten und auch die Farbe ändern. Ich werde hier die Farbe f080f verwenden. In Ordnung, als Nächstes kümmere ich mich um den Absatz. Lassen Sie uns die Schriftgröße erhöhen und es auf 1,8 RAM erhöhen. Dann werde ich oben und unten mithilfe von Margin etwas Platz schaffen . Setzen wir es auf 2,5 rem und Null. Außerdem werde ich den Text mit Text-Align begründen, um ihn zu begründen Okay, bevor ich weitermache und die Bewertungen formatiere, werde ich eine kleine Vertiefung hinzufügen Also wähle ich den ersten Buchstaben des Absatzes aus. Wählen wir den Absatz selbst aus und fügen Sie dann den ersten Buchstaben hinzu, der die Pseudoelemente darstellt Dann definierter Rand auf der linken Seite. Mach einen Lauf draus. Okay, das war's mit dem Absatz. Lass uns weitermachen und mit den Bewertungen beginnen. Wählen Sie Elemente aus, vergrößern Sie die Schrift, lassen Sie es laufen. Was die Farbe angeht, verwenden wir wieder f080f Okay, die Bewertungen sehen also gut aus und wir müssen zum Bild übergehen. Lassen Sie uns oben und unten im Bild etwas Platz schaffen und es auch abgerundet machen. Wir brauchen eine Marge mit Werten zum Laufen und Null. Um das Bild dann zu runden, benötigen wir einen Randradius mit einem Wert von 50 Prozent. Okay, das mit den Bildern ist albern. Schließlich müssen wir den Namen des Kunden anpassen. Wählen wir also dieses Element aus. Erhöhen Sie die Schriftgröße, machen Sie es zu Ram und machen Sie die Schrift mit der Schriftstärke 700 etwas In Ordnung, das war's. Wir sind fast fertig mit diesem Abschnitt. Das einzige, was ich tun möchte, ist einen kleinen Schwebeeffekt zu erzeugen Sobald wir den Mauszeiger über die Karten bewegen, möchte ich den Schatten ändern Wählen wir also die Karte mit dem Mauszeiger aus. Dann definiere Box-Shadow. Die folgenden Werte brauchen wir hier zweimal, dann drei REM, und wir nennen es d d t. Dann brauchen wir minus zwei REM. Nochmals minus zwei, drei Rem und die Farbe II. Außerdem verwenden wir Transition mit den Werten Box Shadow und der Dauer 0,5 s. In Ordnung, wir haben hier also einen schönen Hover-Effekt Und eigentlich sind wir mit diesem Abschnitt fertig. Jetzt können wir weitermachen und uns um den nächsten kümmern. 16. Projekt 2 - Teamabschnitt erstellen und Stil: Im nächsten Abschnitt werden wir wieder Karten haben. In diesem Abschnitt wird es um das Team gehen. Es besteht aus der Überschrift und drei Karten, die die Teammitglieder repräsentieren. Jede Kurve enthält also das Bild des Teammitglieds. Dann erhalten wir einen vollständigen Namen mit der Position des Teammitglieds, gefolgt von diesen Fähigkeiten. Und wir werden auch einen Knopf an der Unterseite des Autos haben. Außerdem siehst du hier einen weiteren Button in der oberen rechten Ecke des Autos. Und wenn ich darauf klicke, dreht sich diese Linie und einige Informationen werden gut angezeigt. Okay, das war's mit diesem Abschnitt. Lassen Sie uns weitermachen und mit der Erstellung des HTML-Markups beginnen . Ich füge Ihre neuen Kommentare ein, Abschnitt drei. Und Abschnitt drei. Öffnen Sie dann das Abschnittselement mit der Überschrift Klasse Abschnitt drei und Institut H1. Ich werde dieselbe Klasse zuweisen, die wir für die vorherige Abschnittsüberschrift verwendet haben. Weil beide den gleichen Stil haben werden. Lassen Sie uns also jeder Abschnittsüberschrift den Inhalt zuweisen. Ich füge dein Team ein. Okay? Als nächstes müssen wir Karten erstellen. Öffnen Sie also zunächst ein div-Tag, das der Wrapper sein wird Ich werde einem Kursteam den Wrapper zuweisen. Dann öffne ein weiteres Div, das die Karte selbst sein wird. Ordnen wir ihm ein Klassenmitglied zu. Die Karte wird aus verschiedenen Elementen bestehen. Die Person eins wird das Bild sein. Lassen Sie uns also das Bildelement öffnen und das Teammitglied mit einem Punkt im JPG-Format auswählen. Außerdem werde ich einem Klassenmitglied IMG zuweisen. Ordnung, als Nächstes öffne ich die H2-Überschrift, die den vollständigen Namen und die Position des Mitglieds enthält und die Position des Mitglieds Also werde ich einem Klassenmitglied den Namen eines Teammitglieds zuweisen. Lass uns deinen Nick Smith einfügen. Dann öffne ich den Span-Tag und füge hier die Position des Teammitglieds ein. Lass uns Designer schreiben. Danach kommen Fähigkeiten. Ich werde eine Liste erstellen. Lassen Sie uns einer Klasse die Fähigkeiten der Teammitglieder zuweisen. Insgesamt werden wir also fünf Listenpunkte haben. Lassen Sie uns also den ersten erstellen. Es wird Photoshop sein. Schreiben wir hier die Abkürzung P, S, duplizieren Sie das LI-Element viermal und ändern Sie den Inhalt. Der zweite wird Figma sein. Dann werden wir HTML5, CSS3 und dann Ai haben , was für Adobe Illustrator steht In Ordnung, als Nächstes erstelle ich eine Schaltfläche für Projekte. Es wird das Link-Element sein. Ordnen wir den Klassen nun Projekte zu und als Inhalt hier Projekte Okay, jetzt kümmere ich mich um die Geschichte des Teammitglieds. Zuerst erstelle ich einen Button. Öffnen wir also das Div-Tag mit einer Klassengeschichte btn. Außerdem werde ich ein anderes Attribut namens title verwenden . Sobald wir den Mauszeiger über die Schaltfläche bewegen, werden einige Texte angezeigt. Also lass uns meine Geschichte einfügen. Als Nächstes benötigen wir ein weiteres div-Tag. Dabei handelt es sich um die Zeile, die jeder BTN-Zeile im Cluster Story zugewiesen wird jeder BTN-Zeile im Cluster Story zugewiesen Und lassen Sie dieses div-Element leer. Okay, und dieser Teil wird also aus zwei verschiedenen Elementen bestehen, eine Überschrift und den Absatz haben. Lassen Sie uns ein Div-Element mit einer Klassengeschichte erstellen. Es wird die Verpackung sein. Öffne dann H4 und verstecke Elemente mit einer Überschrift für die Klassengeschichte und dem Inhalt über mich Danach brauchen wir einen Absatz mit dem Klassen-Tory-Absatz. Und dann liegt es an dir, irgendein Blindtext. Okay, die erste Karte ist fertig, wie gesagt, insgesamt werden wir drei davon haben Also werde ich es zweimal duplizieren und dann einige Änderungen vornehmen. Ich werde den Namen des Bildes ändern. Es wird auch Teammitglied sein. Dann ändere den vollständigen Namen, den wir hier benötigen. Sagen wir Bob Brown. Was die Fähigkeiten angeht, fügen wir hier After Effects und dann PR ein , was für Premiere Pro steht. Lassen wir dann HTML und CSS für das letzte Element unverändert, fügen wir es hier ein, sagen wir Inkscape Okay, das war's mit dem zweiten Teammitglied. Lassen Sie uns einige Änderungen vornehmen. Für den dritten brauchen wir hier Teammitglied drei als den Namen John Doe? Als Nächstes ändere ich die Position, die wir hier brauchen. Entwickler. Was die Fähigkeiten angeht, fügen wir Ihr JavaScript ein. Dann reagiere uns. Der nächste wird kein JS als MongoDB sein. Und für den letzten Punkt fügen wir Python ein. Okay, das HTML-Markup ist also fertig, und jetzt können wir beginnen, diesen Abschnitt anzupassen Lassen Sie uns weitermachen und neue Kommentare erstellen. Abschnitt drei. Und Abschnitt drei. Definieren Sie dann Breite und Höhe. Ich setze die Breite auf 100%. Was die Höhe angeht, machen wir sie zu 100% aus dem Viewport. Danach richte ich die Überschrift und den Rapper mithilfe von Flexbox Wir müssen das Display auf Flex einstellen. Dann. Wir müssen Flex-Elemente vertikal in einem Doppelpunkt platzieren , also müssen wir die Richtung ändern. Machen wir es zu einer Kolumne. Und danach, um einen gewissen Abstand zwischen den Elementen zu schaffen , müssen wir den Inhalt mit dem Werteraum dazwischen begründen. Und schließlich schaffen Sie oben und unten in diesem Abschnitt etwas Platz . Verwenden wir Polsterung. Setzen wir es auf fünf RAM und Null. Okay, schauen wir uns die Elemente dieses Abschnitts an. Als Nächstes haben wir eine Überschrift , die bereits formatiert ist. Und bevor wir zum nächsten Element übergehen, nehme ich die Stile aus dem vorherigen Abschnitt und füge sie in gängige Stile ein. Wir werden den Code sauberer und verständlicher machen. Okay, lassen Sie uns weitermachen und den Team-Wrapper auswählen. Ich werde die Karten horizontal in einer Reihe ausrichten. Verwenden wir also Flexbox. Dann. Ich werde etwas Abstand zwischen den Karten schaffen, indem ich den Inhaltsbereich gleichmäßig ausrichten verwende. Außerdem werde ich Karten mithilfe der Funktion „Objekte mittig ausrichten“ vertikal in der Mitte platzieren . Außerdem werde ich auch die Größe des Rappers definieren, weil wir die Karten so ausrichten werden, wie es im vorherigen Abschnitt der Fall war Stellen wir die Höhe also auf 70% ein. Okay? Danach wählen wir die Karte selbst aus. Ich meine, ein Teammitglied. Definieren wir zunächst diese Breite, machen sie auf 35 RAM und ändern dann die Hintergrundfarbe. Ich werde deine Farbe F, F, F, E, E verwenden . Okay, als Nächstes erstelle ich den Raum innerhalb der Karte. Verwenden wir also Padding mit den folgenden Werten. Wir brauchen einen Lauf, dann einen RAM. Stellen Sie dann die Polsterung so her , dass sie an der Unterseite haftet. Dann wieder, verwende einen Lauf. Außerdem verwenden wir Box Shadow. Ich werde mehrstufige Box Shadow verwenden. Also lass uns deinen 1RM einfügen, dann wieder einen RAM als zu rammen, und sie nennen es t, t, t. Was den zweiten Schatten angeht, so wird er auf der linken Seite platziert. wird er auf der linken Seite platziert Lassen Sie uns also Ihre negativen Werte minus ein RAM verwenden, dann wieder minus ein RAM für RAM und die Farbe E. Ordnung? Bevor wir weitermachen, wäre es meiner Meinung nach besser, wenn wir die Geschichte für eine Weile verstecken Das wird unseren Arbeitsprozess komfortabler machen. Wählen wir also eine Geschichte aus und weisen Sie zu, dass keine angezeigt wird. Okay? Die Geschichte ist also versteckt. Und jetzt werde ich jedes Element des Autos stylen . Lass uns weitermachen und mit dem Bild beginnen. Ich werde seine Breite definieren. Machen wir es zu 100 Prozent. Außerdem werde ich die Ecken des Bildes leicht abgerundet machen , indem ich den Randradius mit dem Wert 0,5 rampe verwende Randradius mit dem Wert 0,5 Okay, als Nächstes passe ich den Namen des Mitglieds an. Wählen wir es also aus. Zuerst. Lassen Sie uns die Schriftgröße erhöhen und sie auf 2,3 RAM erhöhen. Dann werde ich das Telefon mit der Schriftstärke 700 mutiger machen Schriftstärke 700 mutiger Ändere auch die Farbe. Ich werde deine Farbe 796717 verwenden. Und schaffen Sie oben auch etwas Platz indem Sie Margin Top mit einem Wert zum Ausführen verwenden. Okay, der Name sieht also gut aus. Lass uns weitermachen. Und Kunden die Position des Mitglieds. Wählen wir den Namen gefolgt von der Spanne aus. Und dann ändere die Schriftgröße, mache es 1,7 rem. In Ordnung, lass uns weitermachen und uns um die Fähigkeiten kümmern. Ich werde die Listenelemente horizontal in einer Reihe platzieren. Wählen Sie also zunächst die UL-Elemente aus. Ich werde Flexbox wieder benutzen. Wir müssen die Display-Eigenschaft auf Flex setzen. Es platziert die Flex-Elemente in einer Reihe Um einen gewissen Abstand zwischen den Elementen zu schaffen, verwenden Sie dann die Option Inhalt mit einem Werteabstand dazwischen ausrichten. Außerdem werde ich oben und unten etwas Platz schaffen . Verwenden wir also Margin setzen es oben auf ein Rem als Null, auf Ram unten. Und dann wieder Null. Ordnung, die Listenelemente sind aufeinander abgestimmt und jetzt werde ich sie stylen. Wählen wir das LI-Element aus, ändern Sie die Schriftgröße, setzen Sie es auf 1,5 RAM und ändern Sie dann die Farbe. Ich werde deine Farbe 5050 verwenden, dann wieder 50. Okay, lass uns weitermachen und nach unten gehen. Wählen wir es aus. ändere ich die Hintergrundfarbe. Verwenden wir hier F, a b348. Dann ändere die Farbe des Textes und mache ihn weiß. Außerdem werde ich innerhalb der Schaltfläche etwas Platz schaffen . Verwenden wir Padding und stellen Sie es oben und unten auf 0,5 Rem und dann auf 1,5 Rem auf der linken und rechten Seite Außerdem werde ich die Schaltfläche mit dem Randradius mit dem Wert fünf rem abgerundet machen Randradius mit dem Wert fünf rem abgerundet Wie Sie sehen können, sieht der Button All or D also gut aus. Lassen Sie uns weitermachen und die Schriftgröße erhöhen. Mach 1,5 RAM draus. Außerdem werde ich etwas Abstand zwischen den Buchstaben schaffen den Buchstabenabstand als Punkt zum Umbruch verwende. Okay, das war's also mit dem ersten Teil der Karte. Als Nächstes werde ich die Schaltfläche anpassen, die in der oberen rechten Ecke der Karte platziert wird. Also lass uns weitermachen und Story btn auswählen. Und definieren Sie zunächst seine Breite und Höhe. Ich werde beide auf Herbst laufen lassen und dann die Hintergrundfarbe ändern, es auch machen. Also hier haben wir den Button. Zuallererst müssen wir seine Position festlegen. Lassen Sie uns seine Position also auf absolut setzen. Um es dann entsprechend dem übergeordneten Element auszurichten , müssen wir die relative Position für die Karte definieren. Und dann definiere die oberen und die richtigen Eigenschaften. Ich setze beide auf minus eine Wiederholung. Okay? Der Knopf ist also richtig positioniert. Machen wir es rund. Verwenden Sie den Grenzradius. Wir werten fünf Runden ab. Okay, also jetzt, das war's mit dem Button. Jetzt kümmere ich mich um die Leitung. Also lass uns weitermachen und es auswählen. Definieren wir seine Breite und Höhe. Mit 100% machen. Was die Höhe angeht, werde ich sie auf 0,1 RAM einstellen. Und ändere auch die Hintergrundfarbe und mache sie weiß. Im Moment ist die Linie also nicht sichtbar da sie oben unten platziert ist. Also müssen wir seine Position korrigieren. Eigentlich platziere ich es in der Mitte des Buttons. Und dafür verwenden wir Flexbox. Jetzt ist die Linie sichtbar und als Nächstes möchte ich ein wenig Platz innerhalb der Schaltfläche schaffen. Verwenden wir Padding mit dem Wert 0,5 RAM. Und ändern Sie auch den Typ des gröberen, machen Sie ihn zum Zeiger. In Ordnung, also mit einem Knopf sind wir endlich fertig. Jetzt kümmere ich mich um diese Tori, die gerade versteckt sind. Machen wir es also zuerst sichtbar. Ich werde Display None von hier aus loswerden. Wie Sie jetzt sehen können, ist es sichtbar und wir müssen es anpassen. Definieren wir seine Breite und Höhe. Ich werde beide zu hundert Prozent machen. Und dann ändere die Hintergrundfarbe. Lassen Sie uns Ihren RGBA-Wert verwenden. Fügen wir hier 2536969 und dann die Opazität und dann die Als Nächstes kümmere ich mich um seine Position. Es sollte auf die gesamte Karte ausgedehnt werden. Lassen Sie uns also die Position auf absolut setzen. Und dann machen Sie die linken und oberen Eigenschaften, beide auf Null. Danach richten wir die Elemente in dieser Geschichte mithilfe von Flexbox Ich werde sie in die Mitte stellen. Lassen Sie uns also die Display-Eigenschaft auf Flex setzen. Dann müssen wir die Richtung ändern, sie zu einer Spalte machen. Und danach, um die Flex-Elemente sowohl horizontal als auch vertikal in der Mitte zu platzieren , verwende ich justify-content center und alignitems center und alignitems Okay, lassen Sie uns abschließend etwas Platz in der Geschichte schaffen . Verwenden wir Padding und setzen es auf Ram Alright, mit diesem Tory, ich meine, mit dem Wrapper sind wir fertig Lassen Sie uns weitermachen und die Überschrift und den Absatz anpassen . Wählen wir diese Tori-Überschrift aus und erhöhen Sie die Schriftgröße, sodass sie voll RAM ist. Dann erstelle ich den Schriftordner mit font-weight 700 Ändere die Farbe und mache es weiß. Und außerdem werde ich unten etwas Platz schaffen, Margin Bottom verwende, wir werten ab, um zu rennen Okay, danach wählen wir den Absatz aus. Erhöhen Sie die Schriftgröße, machen Sie sie 1,8 Gramm. Dann ändere ich die Farbe. Machen wir es e. Außerdem werde ich den Text mit text-align, justify begründen Und dann schaffen Sie etwas Abstand zwischen den Buchstaben, indem Sie den Buchstabenabstand 0,1 Rampe verwenden. In Ordnung, der Absatz ist also ebenfalls angepasst. Das einzige, was ich tun werde, ist eine kleine Einkerbung zu machen Und dafür werde ich Text verwenden. Eingezogenes Eigentum würde an Wert verlieren, wenn es weggelaufen wäre. Okay, das mit der Geschichte gesagt, jetzt müssen wir dafür sorgen, dass es funktioniert. Aber davor haben wir hier ein kleines Problem. Der Knopf befindet sich hinter diesem Tori. Um das zu beheben, verwende ich die Eigenschaft z-index. Wir müssen es auf einen höheren Wert als Null setzen , sagen wir 50. In Ordnung, wir sind bereit, diesen Button zum Laufen zu bringen. Also dann werde ich JavaScript verwenden. Zuerst. Lass uns die Geschichten dafür verstecken. Ich werde Transform mit der Skalenfunktion verwenden. Um das Element zu verbergen, müssen wir die Skala auf Null setzen. Okay, also wie Sie sehen können, der Speicher oder versteckt, gehen wir zur JavaScript-Datei und zunächst zu den ausgewählten Schaltflächen. Dafür verwende ich die Methode Query Selector, All. Wir müssen hier den Klassennamen, die Geschichte und BTN angeben. Tatsächlich gibt die Methode Query Selector All die Knotenliste zurück, bei der es sich um ein Array-ähnliches Objekt handelt Jedes Element hat seine Indexnummer und auch die Liste selbst als Längeneigenschaft. Okay, wir müssen uns diese Schaltflächen ansehen und an jeden von ihnen einen Event-Listener mit dem Click-Event Um die Liste durchzugehen, verwende ich jeweils eine der Array-Hilfsmethoden, die ich aufrufe Es ermöglicht uns, eine Funktion für jedes Listenelement separat auszuführen . Lassen Sie uns also weitermachen und forEach verwenden. Es benötigt einen Parameter , der die Callback-Funktion sein wird Und diese Funktion wird für jedes Listenelement ausgeführt. Diese Callback-Funktion selbst benötigt einen Parameter, das aktuelle Element aus der Liste sein wird, ich meine die Schaltfläche Also lass uns deine BTN einfügen. Und als Nächstes müssen wir einen Event-Listener an die Schaltfläche anhängen einen Event-Listener an die Schaltfläche Geben wir hier die Art der Veranstaltung an, bei der es sich um eine Clique handeln wird Und abgesehen davon, dass der Event-Listener den zweiten Parameter ausnimmt, nämlich die Pfeilfunktion, meine ich die Callback-Funktion Und es wird ausgeführt, sobald wir schnell Elemente hinzugefügt haben. Okay, lassen Sie uns jetzt testen, ob das Click-Event funktioniert Ich werde zur Konsole laufen. Sagen wir geklickt. Wenn ich also die Seite überprüfe und zur Registerkarte Konsole wechsle und dann auf die Schaltfläche klicke, werden wir in der Konsole angeklickt Es bedeutet also, dass alles gut funktioniert und wir jetzt dafür sorgen müssen, dass die Geschichte funktioniert. Ich meine, wir müssen es anzeigen, abklicken und wir müssen auch den Knopf drehen Lassen Sie mich erklären, was wir tun werden. Wir werden eine neue Klasse und CSS erstellen und mit dieser Klasse Stile definieren. Dann fügen wir diesen Klassennamen zur Story und zum Button selbst Wir werden das mit der Toggle-Methode tun , da wir die Geschichte beim ersten Klick anzeigen und beim nächsten ausblenden müssen die Geschichte beim ersten Klick anzeigen und beim nächsten ausblenden Wie gesagt, dafür müssen wir eine Methode namens Toggle verwenden Lassen Sie uns also weitermachen und unten eine neue Klasse hinzufügen. Wir brauchen BTN. Und jetzt müssen wir eine der Eigenschaften namens Klassenliste verwenden. Es gibt uns alle Klassen , die die Frau hat. Außerdem können wir auf die verschiedenen Methoden wie Umschalten, Hinzufügen und Entfernen zugreifen die verschiedenen Methoden wie Umschalten, Hinzufügen und Entfernen Wir brauchen eine Klassenliste, gefolgt von der Toggle-Methode. In der Klammer müssen wir den Klassennamen angeben Nennen wir es Veränderung. Also, wenn ich Elemente und die schöne Geschichte anzeige, BTN Und dann klicke ich darauf Sie werden sehen, dass der Klassenwechsel mit einem Klick erfolgt. Und dann auf der nächsten Schicht wird es entfernt. Okay, jetzt können wir den Button bei Klick drehen. Gehen wir zur CSS-Datei und wir müssen Story BTN mit Klassenwechsel auswählen Verwenden Sie dann Transformieren mit der Rotationsfunktion. Ich werde Elemente um 405 Grad drehen. Dann verwende Transition mit Transformation und mit der Dauer 0,5 s. Wenn ich also auf den Button klicke, wird er sich schön drehen. Jetzt müssen wir auf die gleiche Weise die Geschichte anzeigen. Kehren wir zur JavaScript-Datei zurück und fügen Sie dieser Geschichte weitere Änderungen hinzu. Eigentlich ist dieser Tori das Geschwisterchen des Buttons. Also werde ich eine der Eigenschaften verwenden , die als nächstes Element Sibling bezeichnet Wir brauchen BTN, gefolgt vom nächsten Element (Geschwister). Dann müssen wir wieder die Klassenliste verwenden, gefolgt von der Toggle-Methode Und als Klassenname müssen wir Ihre Änderung einfügen. Okay, gehen wir zur CSS-Datei und wählen Story with Change aus. Verwenden Sie dann transform. Um die Geschichte sichtbar zu machen, werde ich die Skala wieder auf eins erhöhen. Und verwende Transition mit den Werten all und 0,5 s. Okay, wenn ich jetzt auf die Schaltfläche klicke, wird die Geschichte angezeigt Es funktioniert also gut, aber das ist nicht das, was wir wollen, wird berücksichtigt. Die Skala nimmt von der Mitte aus zu. In unserem Fall müssen wir es jedoch von der oberen rechten Ecke der Karte aus erhöhen . Um das zu erreichen, müssen wir die Eigenschaft Transformationsursprung ändern. Standardmäßig ist es auf die Mitte gesetzt und in unserem Fall wird es oben rechts sein. Okay, jetzt kommt es aus der oberen rechten Ecke, aber es ist immer noch nicht das, was wir wollen. Um den Effekt viel schöner zu machen. Ich werde mit dem Grenzradius manipulieren. Standardmäßig setze ich den Randradius auf 50 RAM. Es gehört in die obere linke Ecke. Dann brauchen wir Null für die obere rechte Ecke. Und dann lief 50 für die untere rechte Ecke und auch für die untere linke Ecke. Außerdem werde ich beim Klassenwechsel den Grenzradius auf Null setzen . Okay, jetzt funktioniert alles perfekt und bevor wir diesen Abschnitt beenden, werde ich noch ein paar Dinge tun. Ich werde die Autos anders ausrichten. Ich lege die erste Karte oben auf den Rapper Was die dritte Karte angeht, werde ich sie unten auf der Verpackung platzieren Lassen Sie uns also weitermachen und die erste Karte auswählen eine dieser Pseudoklassen verwenden, die als erstes Kind bezeichnet werden Um die Karte am oberen Rand des Wrappers zu platzieren, verwenden wir eine Linie selbst mit dem Wert flex start Dann lass uns diesen Code duplizieren. Ich werde das erste Kind und das letzte Kind ändern. Und statt Flex-Start müssen wir auch flexen. Und wie Sie sehen können, sind die Karten ausgerichtet. Abschließend werde ich einen kleinen Schwebeeffekt erzeugen. Eigentlich werde ich die Opazität standardmäßig verringern. Setzen wir es auf 0,7. Erhöhen Sie dann die Acht, wenn Sie den Mauszeiger bewegen. Wählen wir also ein Teammitglied aus, indem wir den Mauszeiger bewegen. Stellen Sie die Opazität auf eins und verwenden Sie dann den Übergang mit den Werten Opazität 0,5 s. Okay, endlich sind wir fertig Wir haben die Arbeit an diesem Abschnitt abgeschlossen. Also lass uns weitermachen und uns um den nächsten kümmern. 17. Projekt 2 - Kontaktabschnitt und Fußzeile erstellen und stillieren: Der nächste Abschnitt wird der Kontaktbereich sein. Werfen wir einen Blick auf das fertige Projekt. Wie Sie sehen, besteht der Abschnitt „Verhalten“ aus drei verschiedenen Teilen. Wir haben ein Bild auf der linken Seite und ein paar Eingabefelder auf der rechten Seite. Und unten haben wir eine kleine Fußzeile mit einigen Copyright-Texten Die ersten beiden Teile, ich bin im Bild und Eingabefelder sind in einer 3D-Umgebung platziert und haben einen schönen Schwebeeffekt Eigentlich möchte ich hier eine Sache erwähnen, während wir an dem Projekt gearbeitet haben, habe ich festgestellt, dass manchmal aus irgendeinem Grund die gesamte Seite auf die linke Seite geht, und das passiert in Google Chrome. Die Lösung, die ich mir ausgedacht habe, bestand also darin, versteckten Überlauf zuzuweisen Behälter einen versteckten Überlauf zuzuweisen, anstatt der Karosserie Außerdem werde ich die Breite definieren. Machen wir es zu 100%. In Ordnung, das ist alles. Lassen Sie uns weitermachen und mit der Erstellung des HTML-Markups beginnen . Ich werde Ihren neuen Kommentarbereich am Ende von Abschnitt vier einfügen . Dann wird ein offenes Abschnittselement mit einem Klassenabschnitt für dieses Abschnittselement aus verschiedenen Teilen bestehen. Der erste Teil, den ich erstellen werde, ist eine Überschrift, die den vorherigen Abschnittsüberschriften ähnlich sein wird Öffnen wir also das H1-Überschriftenelement mit einer Klassenabschnittsüberschrift Und als Inhalt fügen wir Ihren Kontakt ein. Als Nächstes. Ich kümmere mich um das Formular. Aber lassen Sie uns zunächst ein div-Tag erstellen , das der Container des Formulars sein wird. Verwenden wir hier einen Schaumbehälter der Klasse. Fügen Sie dann ein Bild ein. Ich wähle Form IMG dot PNG aus dem Bilderordner aus. Und lassen Sie uns dem Bildelement auch die Klasse Form IMG zuweisen . Okay? Danach erstelle ich das Formular selbst. Ordnen wir ihm das Kontaktformular der Klasse zu. Die Formel besteht also aus vier verschiedenen Elementen. Wir werden zwei Eingabefelder haben als den Textbereich und auch den Senden-Button. Lassen Sie uns also ein Eingabeelement mit Typtext erstellen. Außerdem verwende ich Ihr Platzhalterattribut mit dem Wert Ihres Namens Dann werde ich diese Codezeile duplizieren. Ändern Sie das Typattribut , wenn es E-Mail ist. Was den Platzhalter angeht, füge ich hier Ihre E-Mail Als nächstes kommt der Textbereich. Ich werde ihm ein Platzhalterattribut mit dem Wert Ihrer Nachricht zuweisen ein Platzhalterattribut mit dem Wert Ihrer Nachricht Okay? Danach erstelle ich eine Schaltfläche zum Senden, und zwar mithilfe von Eingabeelementen, aber mit dem Typ Submit. Und wir brauchen hier auch einen Wert , der gesendet wird. Okay, das letzte Element, das wir erstellen müssen, ist die Fußzeile Ich bin in dem Absatz. Fügen wir es außerhalb des Formularelements mit dem Klassencopyright ein. Und dann fügen Sie einige Texte wie Copyright ein, gefolgt vom Copyright-Zeichen, das die HTML5-Entität sein wird Wir brauchen hier ein Ampersand, Kopieren, Semikolon, dann codieren Und auch alle Rechte vorbehalten. In Ordnung, das ist es. Alles ist bereit, um zu beginnen, um diesen Abschnitt zu beginnen. Lassen Sie uns weitermachen und neue Kommentare in die CSS-Datei einfügen. Wir brauchen Abschnitt vier. Dann Ende von Abschnitt vier. Wählen Sie dann die Abschnittselemente und definieren Sie deren Breite und Höhe. Ich setze die Breite auf 100%. Was die Höhe angeht, machen wir sie auf 130% des Viewports aus. Okay. Danach richte ich die Abschnittsüberschrift , den Formularcontainer und die Fußzeile mithilfe von Flexbox Wir benötigen Display-Flex Dann müssen wir Elemente vertikal in einer Spalte platzieren. Also werde ich die Richtung ändern. Lass es uns anrufen. Ebenfalls. Um etwas Platz um die Flex-Elemente herum zu schaffen, verwenden wir „justify content space around“. Und um Elemente dann horizontal in der Mitte zu platzieren, verwenden wir die Option Elemente mittig ausrichten. Okay, das war's mit diesem Abschnittselement. Lassen Sie uns weitermachen und den Telefoncontainer anpassen. Definieren wir zunächst diese Breite und Höhe. Machen wir Breite zu acht Prozent. Was die Höhe angeht, werde ich sie auf 40% setzen. Und ändere auch die Hintergrundfarbe. Verwenden wir Ihre Farbe oder E5, E9, F, F. Okay, jetzt müssen wir das Bild und diese Eingabefelder nebeneinander platzieren diese Eingabefelder Und dafür werde ich wieder Flux-Bücher verwenden. Wir brauchen Display Flex. Um die Elemente dann vertikal in der Mitte zu platzieren , verwenden wir die Option Elemente mittig ausrichten. Und dann schaffen Sie etwas Abstand zwischen den Elementen, indem Sie den Inhaltsbereich gleichmäßig ausrichten. Okay, lassen Sie uns zum Schluss einen kleinen Schatten erstellen und den Behälter leicht abgerundet machen Also werde ich Box-Shadow verwenden. Es wird der mehrstufige Schatten sein. Fügen wir hier also zweimal 0,3 RAM zeigen dann auf RAM und die Farbe CCC Was den zweiten Schatten angeht, werde ich ihn auf der linken Seite machen. Wir müssen also negative Werte verwenden, -0,1 Gramm zweimal als Nullpunkt für RAM und dieselbe Farbe Und verwende auch Border-Radius mit dem Wert 0,5. Rampe. In Ordnung, jetzt können wir das Bild anpassen. Also lass uns weitermachen und es auswählen. Und lassen Sie uns zuerst seine Breite definieren. Ich mache 55 Rem draus. Als Nächstes ändere ich die Hintergrundfarbe. In diesem Fall verwenden wir den RGBA-Wert. Wir benötigen hier 50231255 und die Opazität 0,8. Und schaffen Sie auch etwas Platz innerhalb der Elemente, indem Sie Polster verwenden Machen wir fünf Rem auf allen vier Seiten. Okay, lassen Sie uns weitermachen und dem Bild ein paar weitere Stile hinzufügen . Ich werde die Opazität verringern. Machen wir es auf 0,8 und erzeugen Sie auch einen Schatteneffekt. Es wird auf der linken Seite sein. Also wir brauchen hier minus drei RAM als drei RAM für RAM und die Farbe AAA. Und erstellen Sie auch einen kleinen Randradius. Stellen wir es auf 0,5 Runden ein. Okay, lassen Sie uns jetzt das Bild betrachten, ich werde ein Formularelement anpassen Wählen wir es aus und definieren wir seine Breite. Ich werde 45 RAM machen. Ändern Sie nun die Hintergrundfarbe und machen Sie sie weiß. Okay, als Nächstes richte ich die Elemente innerhalb des Formulars aus. Und dafür lassen Sie uns noch einmal entspannen, Flexbox. Stellen Sie die Anzeige auf Flex und ändern Sie dann die Richtung. Machen Sie sie zu einer Spalte, um die Elemente vertikal auszurichten. Es wird also davon ausgegangen, dass die Elemente vertikal in einer Spalte platziert sind. Lassen Sie uns fortfahren und dem Formular ein paar weitere Stile hinzufügen . Ich werde mithilfe von Padding Platz innerhalb des Elements schaffen mithilfe von Padding Platz innerhalb des Elements Machen wir drei RAM draus. Stellen Sie dann den Randradius 2,5 RAM ein. Und ich werde auch Schatten erzeugen. Die Werte drei RAM zweimal und dann für RAM mit der Farbe AAA. In Ordnung, das war's mit dem Formularelement. Lassen Sie uns weitermachen und die Eingabefelder anpassen. Eigentlich haben wir hier zwei Eingaben und den Textbereich und auch den Submit-Button, der durch das Eingabeelement repräsentiert wird. All diese Elemente werden einige gemeinsame Stile haben. Lassen Sie uns also weitermachen und die Eingabe und auch den Textbereich auswählen . Zunächst definiere ich Rand und Padding. Wir müssen Raum um die Elemente herum und auch innerhalb von ihnen schaffen . Lassen Sie uns den Spielraum also auf einen RAM festlegen. Was das Padding angeht, werde ich es ebenfalls auf ein Rem einstellen Als Nächstes ändere ich die Schriftgröße und mache daraus 1,3 RAM. Außerdem werde ich etwas Abstand zwischen den Buchstaben schaffen. Stellen wir es auf 0,1 RAM ein. Dann entfernen Sie den Standardrahmen. Ich setze es auf Null. Ich werde die Ecken abgerundet machen. Lassen Sie uns den Grenzradius so einstellen, dass er ausgeführt wird. Und zum Schluss werde ich Box Shadow erstellen. In diesem Fall brauchen wir Schatten von der Innenseite. Also füge ich dein Inset ein. Der Wert ist 0,1, rem, 0,1 RAM, dann zeig auf RAM und die Farbe di, di, di. Und außerdem werde ich den gleichen Schatten auf der linken Seite erstellen . Mir kommt es also so vor, als ob du es einfügst -0,1 RAM, -0,1 RAM als 0,2 rem und die gleiche und die In Ordnung, das war's mit den gängigen Stilen. Jetzt möchte ich den Textbereich The Button separat anpassen . Fangen wir mit einem Textbereich an. Wie Sie wissen, können wir die Größe des Textbereichs manuell ändern , aber dann wird das Layout durcheinander gebracht. Also möchte ich seine Breite und Höhe begrenzen. Lassen Sie uns also weitermachen und den Textbereich auswählen. Ich werde die maximale Höhe und auch die Min-Höhe definieren. Lassen Sie uns die maximale Höhe auf 15 RAM setzen. Was die mittlere Höhe angeht, werde ich sie auf zehn RAM setzen. Außerdem definiere ich die maximale Breite und die Mindestbreite Lassen Sie uns also eine maximale Breite auf 100% setzen. Was die Mindestbreite angeht, machen wir sie auf 70% Jetzt funktioniert es also viel besser. Lassen Sie uns weitermachen und den Senden-Button starten. Wählen wir es mit dem Typattribut aus. In diesem Fall wähle ich Kontaktformular aus , gefolgt von den Eingabeelementen. Und in eckigen Klammern müssen wir den Typ als Submit angeben. Lassen Sie uns die Hintergrundfarbe ändern. Verwenden wir hier RGBA, 50231255 und 0.8, ändern Sie auch die Farbe, Jetzt sieht der Button viel besser aus. Lassen Sie uns weitermachen und einige weitere Stile hinzufügen . Ich werde die Schrift mutiger machen. Lassen Sie uns also die Schriftstärke auf Boulder setzen. Schaffen Sie auch etwas Abstand zwischen den Buchstaben. Mach 0,5 Rem draus. Und schließlich ändern Sie den Typ des gröberen, machen Sie es deutlich Ordnung, die Schaltfläche ist also angepasst und bevor wir weitermachen, füge ich noch einen kleinen Schwebeeffekt hinzu Also schnappen wir uns diesen Selektor von hier aus. Und dazu schweben. Ich werde die Hintergrundfarbe ändern. Machen wir 327ff draus. Verwenden Sie dann den Übergang mit Hintergrundfarbe und einer Dauer von 0,5 s. Ordnung, die Formel ist also angepasst Und bevor wir weitermachen und mit dem folgenden Absatz beginnen, werde ich einige 3D-Effekte erstellen. Um eine 3D-Umgebung zu erstellen, müssen wir zunächst eine der Eigenschaften verwenden, die als Perspektive bezeichnet werden. Wir müssen es dem übergeordneten Element zuweisen, dem Schaumbehälter. Stellen wir also die Perspektive ein, 200 lief. Im Allgemeinen definiert eine potenzielle Eigenschaft, wie weit das Element vom Benutzer entfernt ist. Jetzt müssen wir beide Elemente drehen. Ich bin im Bild und in der Form. Also werde ich Transform verwenden. Mit Drehfunktion. Wir müssen Elemente vertikal entsprechend der Y-Achse drehen vertikal entsprechend der Y-Achse Lassen Sie uns 20 Grad einführen. Dann brauchen wir dieselbe Transformationsrotation für das Formular. Aber in entgegengesetzter Richtung brauchen wir -20 Grad. Ordnung, wie Sie sehen können, sind die Elemente gedreht und das einzige wir tun müssen , ist einen Schwebeeffekt zu erzeugen Ich werde die Elemente ein wenig nach oben verschieben , sobald wir den Mauszeiger über ihnen Und außerdem werde ich den Schatten ändern. Lassen Sie uns also weitermachen und mit dem Mauszeiger Form IMG auswählen. Verwenden Sie dann Transform. Wir brauchen hier die Übersetzungsfunktion mit Y-Richtung. Um das Element also nach oben zu bewegen, müssen wir Ihren negativen Wert einfügen, sagen wir minus zwei Rampen. Und außerdem müssen wir Y wieder um 20 Grad drehen. Als Nächstes ändere ich den Boxschatten. Das ist Institute oder minus fünf RAM als fünf RAM. Widder. Und die Farbe AAA. Verwenden wir außerdem Transition mit dem Wert 0,5 s. Als Nächstes benötigen wir den gleichen Hover-Effekt mit dem Formularelement Wählen wir also Kontaktformular aus, indem wir den Mauszeiger bewegen. Dann werde ich mir diese Styles von hier aus holen. Wir müssen hier 20 Grad in -20 Grad ändern. Und außerdem brauchen wir statt minus fünf RAM fünf Ran. Lassen Sie uns außerdem Transition mit den Werten 0 und 0,5 s verwenden. Ordnung, also sieht alles ziemlich gut aus Und das einzige, was wir tun müssen , ist diesen Absatz hier anzupassen. Wählen wir es also mit dem Copyright für den Klassennamen aus. Erhöhen Sie dann die Schriftgröße und machen Sie es zu Ram. Ändern Sie den Buchstabenabstand. Lass es auf RAM zeigen. Außerdem setze ich die Farbe auf 444 und schaffe Platz am oberen Rand, indem ich den oberen Rand verwende und den Wert fünf Rampe verwende. In Ordnung, das war's mit dem Kontaktbereich. Wir sind damit fertig und tatsächlich haben wir bereits alle Abschnitte dieses Projekts erstellt. Das nächste , was ich jetzt tun werde, ist, die NEP zum Laufen zu bringen Außerdem werde ich eine Schaltfläche erstellen der wir problemlos nach oben scrollen können 18. Projekt 2 - Erstelle einen nach oben scrollen-Button und lass Navbar arbeiten: In Ordnung, lass uns weitermachen und mit der Navigation beginnen. Wir haben hier vier verschiedene Navigationspunkte und die entsprechenden Abschnitte. Sobald ich also auf die Navigationspunkte geklickt habe, sollten wir reibungslos zum entsprechenden Abschnitt navigieren. Um das zu tun, müssen wir Navigationslinks mit diesen Abschnitten verbinden, indem wir die Attribute h reference und id verwenden. Die Werte dieser Attribute sollten übereinstimmen. Lassen Sie uns also weitermachen und allen Nofollow-Links h Referenzattribute zuweisen allen Nofollow-Links h Referenzattribute Der erste wird zu Hause sein. Dann werden wir Kunden haben. Das nächste wird Team als Körper sein. Der letzte wird Kontakt sein. Danach müssen wir allen vier Abschnittselementen ID-Attribute mit den gleichen Werten zuweisen allen vier Abschnittselementen . Also lassen Sie uns dem ersten Abschnitt Ihr Zuhause zuweisen. Im zweiten Abschnitt geht es dann um Kunden. Als nächstes werden wir ein Team haben. Und schließlich Kontakt. Okay, wenn ich jetzt auf die Navigationselemente klicke, navigieren wir zum richtigen Abschnitt. Aber im Moment ohne jeglichen reibungslosen Effekt. Um das zu beheben, müssen wir eine der Eigenschaften namens Scrollverhalten verwenden namens Scrollverhalten und sie dem HTML-Element zuweisen. Der Wert wird glatt sein. Wenn wir jetzt auf die Navigationslinks klicken, werden wir reibungslos navigieren. In Ordnung, lassen Sie uns jetzt über die Navigation sprechen. Wie versprochen, werden wir eine feste Schaltfläche erstellen , mit der wir zum ersten Abschnitt scrollen können. Ich meine zu Hause. Lassen Sie uns zunächst eine Schaltfläche in der HTML-Datei erstellen. Es wird das Link-Element sein. Ordnen wir ihr eine Klasse zu, scrollen Sie nach oben BTN. Als Nächstes füge ich hier das Font Awesome-Symbol ein. Ordnen wir den Klassen FAS, FAA, Pfeil nach oben zu. Wählen Sie es dann in der CSS-Datei aus. Definieren wir zunächst Breite und Höhe. Ich mache aus beiden fünf Rem. Dann ändere die Hintergrundfarbe. Ich werde hier den RGBA-Wert verwenden. Das entspricht Tier 50231255 und der Opazität 0,8. Der Knopf wird also repariert. Es sollte in der unteren rechten Ecke platziert werden. Lassen Sie uns also die Position auf fest setzen und dann die unteren und rechten Eigenschaften definieren , beide als fünf ausgeführt wurden. Nochmals. Hier haben wir also den Knopf , der eine feste Position hat. Fügen wir noch ein paar Stile hinzu. Ich werde es rund machen. Nehmen wir an, der Grenzradius beträgt 50%. Das erhöhte die Schriftgröße. Stellen wir es auf 1,6 RAM ein. Ändere auch die Farbe, mach es weiß. Abschließend platziere ich das Symbol in der Mitte. Verwenden wir also Flexbox. Wir brauchen Flexibilität beim Display, Justify Content Center und Alignment Items Center. Ordnung, die Schaltfläche ist also angepasst und bevor ich sie zum Laufen bringe, fügen wir ihr einen kleinen Schwebeeffekt hinzu Wählen wir die Schaltfläche mit dem Mauszeiger aus. Sobald wir den Mauszeiger über die Schaltfläche bewegen, ändere ich die Hintergrundfarbe geringfügig Lassen Sie uns also Ihre Farbe drei-zwei e7ff verwenden und dann den Übergang mit Hintergrundfarbe und der Dauer 0,5 s verwenden. In Ordnung, verwenden und dann den Übergang mit der Hintergrundfarbe und der Dauer 0,5 s verwenden. In Ordnung, alles ist fertig. Jetzt müssen wir nur noch dafür sorgen, dass dieser Button funktioniert. Und dafür müssen wir das h-Referenzattribut angeben . Wir müssen Ihr Zuhause einfügen. Wenn ich jetzt nach unten scrolle und dann auf die Schaltfläche klicke, scrollt es zurück zum ersten Abschnitt. In Ordnung, das war's also. Wir haben den Bau unseres Projekts abgeschlossen. Das einzige, was wir tun müssen, ist, es auf verschiedene Bildschirmgrößen reagieren zu lassen. 19. Projekt 2 - Projekt reaktionsfähig machen: Ordnung, wie Sie wissen, basiert dieses Projekt auf der extra großen Bildschirmgröße Ich bin dabei. Dies entspricht einer Breite von 1920 Pixeln und einer Höhe von 1080 Pixeln Jetzt müssen wir es auf verschiedene Bildschirmgrößen ansprechen. Lassen Sie uns die Seite überprüfen und in den responsiven Modus wechseln. Ich habe also alle bereits verschiedene Breakpoints vorbereitet , an denen wir einige Änderungen vornehmen müssen Also werde ich keine Zeit damit verschwenden, sie zu finden. Der erste Breakpoint , an dem ich einige Änderungen vornehmen werde , wird 1.400 Pixel sein Wie Sie sehen, benötigt das Projekt einige Änderungen. Lassen Sie uns also weitermachen und neue Kommentare einfügen , die ansprechend sind und nicht reagieren Erstellen Sie dann eine neue CSS-Medienabfrage und geben Sie die maximale Breite als 1.400 Pixel Das erste, was ich tun werde, ist, den schwebenden Hintergrund ein wenig nach unten zu bewegen. Lassen Sie uns also weitermachen und es auswählen und seine oberste Position ändern. Ich werde es auf eine Viewport-Breite von -120 einstellen. Als Nächstes kümmern wir uns um die Überschrift. Also lass uns weitermachen und es auswählen. Zuerst. Ich werde die Schriftgröße verkleinern. Machen wir sechs RAM draus. Ändere auch seine Position. Stellen wir die obere Breite des Viewports auf 225 ein. Und ich werde auch die Breite ändern. Machen wir es sieben bis zum Rennen. Ordnung, wie Sie sehen können, sieht Abschnittsüberschrift gut aus Als Nächstes werde ich die Schriftgröße der Navigationselemente leicht verringern . Also lass uns weitermachen und jetzt per Link auswählen und die Schriftgröße so einstellen, dass sie läuft. Okay, das war's mit der Navbar. Lass uns weitermachen und uns um das Logo kümmern, das im Moment zu groß ist. Und ich werde es auch ein bisschen nach unten verschieben. Wählen wir also Logo aus. Setze seine Spitzenposition auf 75 Prozent. Danach wähle ich das Font Awesome-Symbol aus. Verkleinern wir die Schriftgröße. Lass es sich umdrehen. Okay, das war's mit dem ersten Abschnitt. Als Nächstes werde ich mich um den zweiten Abschnitt kümmern. Lassen Sie uns zunächst die Überschrift anpassen. Ich meine, alle Abschnittsüberschriften. Wählen wir sie aus. Ich werde die Schriftgröße verkleinern und acht RAM draus machen. Ändern Sie auch den unteren Rand und drehen Sie ihn um. Okay? Die Überschrift sieht also im Moment gut aus, jeder Abschnitt hat die Höhe, die in der Höhe des Viewports definiert Und ich werde es ändern und die Höhe anpassen. In diesem Fall nimmt dieser Abschnitt jedoch die Höhe ein , die für die Anzeige des Inhalts erforderlich ist . In Ordnung, als Nächstes kümmere ich mich um die Karten. Ich möchte sie auf verschiedenen Linien platzieren. Außerdem werde ich um jede Karte herum etwas Platz schaffen. Wählen wir also zunächst den Wrapper aus. Ich meine Kundenverpackung. Um die Karten auf verschiedenen Linien zu platzieren, müssen wir die Flex-Wrap-Eigenschaft verwenden und sie auf Wrapping einstellen. Danach wählen wir das Kabel selbst aus. Wir brauchen Kunden und definieren Marge als fünf Rem oben und unten und zehn RAM links und rechts. Okay, das war's mit dem zweiten Abschnitt. Lass uns weitermachen und dasselbe für den dritten machen. Wählen wir Abschnitt drei aus und sagen Hallo zu Auto. Dann müssen wir einen Rapper auswählen, ich meine Team-Wrapper und Flex Wrap auf Wrap setzen Wählen Sie zum Schluss die Karte selbst aus, ich meine Teammitglied, und definieren Sie den Rand als fünf Rem oben als fünf Rem oben und unten und versuchen Sie, auf der linken und rechten Seite zu rampen. Okay, zum Schluss kümmere ich mich um den Kontaktbereich. Lassen Sie uns den Hintergrund vergrößern. Wählen Sie Formularcontainer aus und legen Sie seine Höhe auf 60% fest. Als Nächstes werde ich das Bild überhaupt ausblenden. Wählen wir also Form IMG Assigned aus, um den Wert anzuzeigen, keinen. Es kann also sehen, dass das Bild versteckt ist. Außerdem denke ich, dass wir das Formular selbst nicht mehr drehen müssen. Wählen wir also Kontaktformular aus. Verwenden Sie dann die Transformationseigenschaft mit der Translate-Funktion. Wir müssen es auf Null setzen. Und zum Schluss ändern wir den Hover-Effekt. Im Moment bewegt sich das Formular um zwei Rampen nach oben und ich werde es ändern und es zu einer machen. Wählen wir also Kontaktformular aus, indem wir den Mauszeiger bewegen. Dann schnappen wir uns diese Codezeile und statt Null fügen wir hier minus einen Lauf ein. Lassen Sie uns abschließend etwas Platz am Ende des Absatzes schaffen . Im Moment hat es eine Margenobergrenze mit dem Wert fünf Rem. Ich werde auch den Rand am unteren Rand hinzufügen. Wählen wir also Absatz und definierten Rand mit den folgenden Werten aus. Wir brauchen fünf Rem oben als Null auf der rechten Seite für RAM unten und Null auf der linken Seite. In Ordnung, das ist es. Ich denke, das Projekt sieht an diesem Breakpoint gut aus. Lassen Sie uns also weitermachen und den nächsten suchen , der meiner Meinung nach 1.150 Pixel groß sein wird Lassen Sie uns also weitermachen und neue CSS-Medien erstellen und eine maximale Breite von 1.150 Pixeln angeben Lassen Sie uns zunächst den schwebenden Hintergrund nach unten bewegen. Wählen wir es also aus und richten es auf eine Viewport-Breite von -110 Danach. Wie Sie sehen, müssen wir das Überschriftenelement anpassen. Wählen wir es also aus. Ich setze die Schriftgröße auf fünf RAM. Dann ändere die obere Position und mache sie auf 30. Bericht. Was die Breite angeht, werde ich H.263 rund um die Uhr verkleinern Okay, lassen Sie uns abschließend die Größe des Logos leicht verringern die Größe des Logos leicht Wählen wir das Font Awesome-Symbol und stellen die Schriftgröße auf neun Rampen ein. Ordnung, wie Sie sehen können, sieht der erste Abschnitt gut aus und eigentlich sehen auch alle anderen Abschnitte gut aus Also werde ich mich um den nächsten Breakpoint kümmern. Der nächste wird 950 Pixel haben. Lassen Sie uns also neue CSS-Medien erstellen und hier die maximale Breite mit 950 Pixeln angeben. An diesen Breakpoints. Ich werde mich wieder um den ersten Abschnitt kümmern. Wählen wir also den schwebenden Hintergrund und ändern wir erneut seine Position. Ich werde es bewegen. Das wird runter gehen. Setzen wir den oberen Wert also auf die Viewport-Breite von -100. Und bringt dich auch von der Überschrift ab. Ich werde seine Position ändern. Lassen Sie uns die oberen beiden Werte für die Breite des Viewports festlegen. Richtig? Das einzige, was ich am Breakpoint tun werde, ist, den Abstand zwischen den Navigationselementen zu vergrößern . Also lasst uns nun Power und Use Justify Content Property mit den Werten auswählen , die sich bewegen. Okay, das war's also am Breakpoint. Lass uns weitermachen und den nächsten finden. Ich denke, es werden 750 Pixel sein. Also noch einmal, ich werde eine neue CSS-Medienabfrage mit der maximalen Breite von 750 Pixeln erstellen neue CSS-Medienabfrage mit der maximalen Breite von 750 Pixeln Das erste , was ich am Breakpoint tun werde , ist, die Schriftgröße des HTML-Elements zu verringern. Setzen wir es auf 50%. Tatsächlich wird es alle Elemente beeinflussen. Wie Sie sehen können, werden die Elemente verkleinert. Als Nächstes werde ich den schwebenden Hintergrund wieder ein wenig nach unten verschieben . Wählen wir es also aus und legen Sie die oberste Position fest. In diesem Fall beträgt die Breite des Viewports zwei minus neun. Danach werde ich die Überschrift auch ein wenig nach unten verschieben . Wählen wir es also aus. Wir finden ein erstklassiges Grundstück, machen es auf 48 Viewport-Breite Und schließlich werde ich den Platz am Ende dieser Abschnittsüberschrift verkleinern . Lassen Sie uns die Margenuntergrenze auf fünf Runs setzen. In Ordnung, das war's also. An einem Breakpoint sehen all diese Abschnitte gut aus. Und jetzt müssen wir weitermachen und einige Änderungen am letzten Breakpoint vornehmen , der 550 Pixel sein wird Okay, lassen Sie uns neue CSS-Medien erstellen und die maximale Breite auf 550 Pixel angeben Lassen Sie uns die Schriftgröße des HTML-Elements erneut verringern. In diesem Fall setze ich ihn auf 45%. Danach kümmern wir uns auch um den schwebenden Hintergrund und die Überschrift. Ich werde die Spitzenposition ändern. Machen wir eine Viewport-Breite von -70. Wählen Sie dann die Überschrift des ersten Abschnitts aus. Ich werde seine oberste Position ändern. Machen wir 65. Breite des Viewports Ändern Sie auch die Breite, machen Sie 42 RAM daraus und verringern Sie dann die Schriftgröße, machen Sie 3,5 Ran. Okay, der erste Abschnitt sieht also gut aus. Als Nächstes werde ich die Schriftgröße der Abschnittsüberschriften verringern der Abschnittsüberschriften Wählen wir sie also aus und setzen Sie die Schriftgröße auf sechs RAM. Danach werde ich die Karten anpassen. Wie Sie sehen, müssen wir die Breite der Karten erhöhen . Aber eigentlich hat jede Karte schon genug Breite. Und das Problem hier ist der Rand auf der linken und rechten Seite. Wählen wir also den Kunden aus. Ich definiere Marge als fünf Rem oben und unten und Null auf der linken und rechten Seite. Lassen Sie uns dasselbe auch für das Teammitglied tun. Lassen Sie uns die Marge auf fünf rem und Null setzen. Ordnung, das war's mit dem zweiten und dritten Abschnitt Karten sehen gut aus. Lassen Sie uns weitermachen und den vierten Abschnitt anpassen. Ich habe den Kontaktbereich erstellt. Zuerst ändere ich die Höhe und setze sie auf „Allgemein“. Als Nächstes werde ich den Hintergrund ausblenden. Wählen wir also Formularcontainer aus. Ich setze die Hintergrundfarbe auf transparent. Und werde auch Box Shadow los. Setzen wir es auf Null. In Ordnung, es wird also davon ausgegangen, dass der Hintergrund versteckt ist. Als nächstes kümmern wir uns um das Formular selbst. Ich werde den Kastenschatten verringern. Wählen wir Contact Form und setzen Box Shadow zweimal auf 1 g, um die Farbe AAA auszuführen. Als Nächstes ändere ich auch den Boxschatten beim Hover Lassen Sie uns diesen Code hier beim Hover to Kontaktformular duplizieren und die Werte ändern Verwenden wir hier zweimal RAM. Dann drei rannten. Okay, das war's mit dem Formularelement. Schließlich werde ich den Absatz anpassen und außerdem möchte ich die Scroll-Schaltfläche in die Ecke verschieben. Wählen wir also zunächst Absatz mit dem Klassen-Copyright aus. Ich werde die Schriftgröße leicht verkleinern. Machen wir 1,8 RAM draus. Stellen Sie dann die Marge auf fünf Rem ein. Und verwenden Sie auch Text zentriert ausrichten. Für den Button. Ich werde beide Positionen festlegen. Ich bin unten und rechts, um zu rennen. In Ordnung, das ist es. All diese Abschnitte sehen gut aus und wir haben die Arbeit daran abgeschlossen. Ich hoffe es hat dir gefallen und du hast etwas Neues und Interessantes gelernt . Lass uns weitermachen. 20. Projekt 3 - Projektvorschau: Ordnung, es ist an der Zeit, unser nächstes Projekt zu erstellen, das der Klon einer der beliebtesten und am häufigsten verwendeten Websites namens Paypal sein der beliebtesten und am häufigsten verwendeten wird, um die Benutzeroberfläche der verschiedenen Seiten zu erstellen Ich bin auf der Hauptseite, auf Anmelde- und Anmeldeseiten. Natürlich wird es nicht der exakte Klon mit der vollen Funktionalität sein . Wie gesagt, wir werden nur eine Benutzeroberfläche mit HTML, CSS und JavaScript erstellen . Paypal sieht in verschiedenen Ländern anders aus. Die Benutzeroberfläche ändert sich häufig von Zeit zu Zeit. Sie sich also keine Sorgen, wenn dies nicht der exakte Klon der aktuellen Benutzeroberfläche ist. Okay, also bevor wir direkt mit dem Schreiben des Codes beginnen, lassen Sie uns zunächst beschreiben , wie das Projekt aussieht Also wie gesagt, wir werden drei verschiedene Seiten erstellen, Haupt-Login und Registrierung. Wir beginnen mit der Hauptseite. Es wird aus verschiedenen Abschnitten bestehen. Der erste Abschnitt wird das Banner mit Navigation sein . Wir haben hier mehrere Navigationspunkte. Wenn ich den Mauszeiger über sie bewege, wird das Drop-down-Menü angezeigt Es wechselt, sobald wir Mauszeiger über ein anderes Navigationselement Außerdem werden wir hier zwei verschiedene Buttons zum Einloggen und Registrieren haben. Wenn ich sie anklicke, werden wir zur richtigen Seite navigieren. Auf das Banner folgt also der zweite Abschnitt. Es wird drei verschiedene Teile mit Schrift, fantastischen Symbolen, einigen Textelementen und Schaltflächen enthalten . Dann haben wir diesen blauen Abschnitt mit einigen verschiedenen Absätzen. Als Nächstes werden wir diesen kleinen Abschnitt hier mit einem Bild und drei verschiedenen Schritten erstellen . Unten finden Sie eine Schaltfläche zur Registrierung, gefolgt von der Fußzeile In Ordnung, schauen wir uns die Hauptseite an. Schauen wir uns die Anmeldeseite an. Es wird der ursprünglichen Anmeldeseite ziemlich ähnlich sein. Wir werden hier zwei Eingabefelder mit Schaltflächen haben. Das ist wahrscheinlich die Anmeldeseite. Es wird aus zwei Teilen bestehen. Auf der linken Seite werden wir mehrere Bilder der Kunden haben . Was die rechte Seite betrifft, so wird sie zwei verschiedene Optionen enthalten. Egal, ob wir ein persönliches oder ein Geschäftskonto erstellen möchten. In Ordnung, das war's also mit dem Projekt. Wie üblich werden wir dafür sorgen, dass es auf verschiedene Bildschirmgrößen reagiert. Wenn ich die Seite überprüfe und in den Responsive-Modus wechsle, werden Sie feststellen, dass sie responsiv ist. Eine Sache, die hier zu beachten Auf kleineren Bildschirmgrößen werden wir die Dropdowns nicht mehr haben Sie werden sich so auf das Menü umstellen. Okay, das ist es also. Wir sind bereit, mit dem Bau des Projekts zu beginnen . Also lass uns weitermachen. 21. Projekt 3 - Erstelle und passe die Landung an: In Ordnung, sobald wir unser nächstes Projekt beschrieben haben, können wir jetzt anfangen, es zu bauen Ich habe auf dem Desktop einen neuen Ordner namens Business Agency erstellt , in dem ich einen weiteren Ordner für die Bilder habe. Lassen Sie uns diesen Ordner in VS Code öffnen und unsere Arbeitsdateien für HTML, Index oder HTML erstellen . Nennen wir es dann für CSS style.css und script.js. Öffnen Sie dann die Datei index.html und erstellen Sie ein einfaches HTML-Dokument. Dafür verwende ich wie üblich ein oder zwei Ansichten Codepaket heißt emmet Wir müssen hier ein Ausrufezeichen einfügen und dann Tab oder Enter drücken Los geht's. Wir haben hier die grundlegenden HTML-Tags. Zunächst ändere ich den Titel. Fügen wir ein Jahr, Wirtschaftsagentur und verknüpfen dann die CSS - und JavaScript-Dateien. Lassen Sie uns das Link-Tag öffnen und den Teil der Datei angeben. Das ist wahrscheinlich JavaScript. Ich öffne den Script-Tag direkt über dem abschließenden Body-Tag. Und dann spezifizieren wir den Teil der Datei im Quellattribut. Also sind alle drei Dateien miteinander verbunden. Als Nächstes möchte ich einen weiteren Link einfügen. Während des gesamten Projekts werde ich die Font Awesome-Symbole verwenden. Also lass uns weitermachen und nach Font Awesome, CDN, js suchen. Dann nimm den Link von hier, öffne das Link-Tag in den Kopfelementen und füge den Link als Wert der h-Referenzattribute ein. Ordnung, jetzt können wir das Projekt dafür im Browser ausführen das Projekt dafür im Browser Wie Sie bereits vermutet haben, werde ich eines der VS-Codepakete verwenden, das als Live-Server bezeichnet wird Es ermöglicht uns, das Projekt für den Browser auszuführen und die Änderungen vorzunehmen, ohne die Seite zu aktualisieren. Okay, lassen Sie uns abschließend den Browser und den Texteditor so platzieren und den Texteditor so Und fang an. Also werden wir das Projekt Abschnitt für Abschnitt erstellen. Wir erstellen das HTML-Markup für jeden Abschnitt und passen es dann mithilfe von CSS Der erste Teil, den wir bauen werden, wird die Landung sein. Öffnen wir den Geschenkanhänger , der der Behälter sein wird. Geben Sie dann neue Kommentare für den ersten Abschnitt ein. Und dann öffne das Abschnittselement mit einem Klassenabschnitt eins. Der erste Abschnitt wird also das Banner enthalten, das selbst aus der Überschrift, dem Absatz und einer Schaltfläche besteht . Öffnen wir also das Div-Tag mit dem Klassenbanner. Dann öffne ich in diesem Element H1-Überschriftenelemente mit einem Klassenband, das wir überleiten Wie Sie sich erinnern, wird die Überschrift die CSS-Animation enthalten. Es wird aus vier verschiedenen Textelementen bestehen vier verschiedenen Textelementen , die durch die Spanelemente dargestellt werden. Also füge ich die Jahresspanne mit einer Klassenüberschrift eins ein. Und mit den Inhalten Geschäftsideen. Lassen Sie uns diesen Code dreimal duplizieren und die Klassennamen und auch den Inhalt ändern. Die zweite wird Beratung sein. Dann haben wir digitales Marketing. Und der letzte wird Strategie sein. In Ordnung, das war's mit der Überschrift. Als Nächstes müssen wir den Absatz erstellen. Es öffnet also Elemente mit dem Klassenbanner-Absatz und stört dann etwas Blindtext Schließlich müssen wir noch einen Button erstellen, also einen offenen Button-Tag mit dem Klassenbanner btn. Und dann fügen Sie Ihren Content Discover ein. Jetzt. Okay, also das HTML-Markup wird für den ersten Abschnitt erstellt, und jetzt müssen wir anfangen, etwas CSS zu schreiben Zuallererst werde ich einige gängige Stile erstellen und zurücksetzen. Fügen wir neue Kommentare ein, gängige Stile. Von gängigen Stilen. Wählen Sie dann jedes Element mit einem Sternchen aus. Zuallererst werde ich die Standardränder und den Abstand von jedem Element entfernen Standardränder und den Abstand von jedem Element Also lassen Sie uns beide auf Null setzen Dann werde ich die Box Sizing Border-Box setzen Lassen Sie uns die Standardgliederung loswerden. Setzen wir es auf „Null“. Als Nächstes werde ich die standardmäßig unterstrichenen Elemente aus den Link-Elementen entfernen unterstrichenen Elemente aus den Link-Elementen Verwenden wir also Textdekoration mit dem Wert none. Und schließlich werde ich die Standardaufzählungszeichen aus den Listenelementen entfernen Verwenden wir den List-Style-Type, keinen. Okay, wie Sie sehen können, werden alle gängigen Stile auf die Elemente angewendet. Als Nächstes kümmere ich mich um die Schriften. Während des gesamten Projekts werden wir verschiedene Schriftarten verwenden. Einige davon werden Google-Schriftarten sein, aber darüber hinaus werden wir auch andere Formen verwenden. Lassen Sie uns weitermachen und die Google Fonts-Website besuchen. Und dann suche nach unter dA2. Ich werde hier all die verschiedenen Stile auswählen. Als Nächstes suche ich nach Oswald. Lassen Sie uns auch all diese Stile auswählen. Dann nehme ich den Link und füge ihn in den Kopf ein. Die Google-Schriften sind also verlinkt. Aber abgesehen davon werde ich andere Telefone verwenden, die Saul Maize genannt werden, was ich ziemlich nett finde Dieses Telefon wird an mehreren Stellen im Projekt verwendet. Ich meine zum Beispiel das Logo der Webseite. Ich habe diese Schrift bereits installiert. Es ist dieser Vorlesung beigefügt. Sie können es also herunterladen und installieren. Okay, das Letzte, was ich hier tun werde, ich meine, die Stile jedes Elements sind, die Schriftfamilie zu definieren Standardmäßig lege ich die Schriftfamilie so fest, dass Lu Da zwei Kurse gekauft werden. Wie Sie sehen können, hat sich die Schriftfamilie geändert. Während des gesamten Projekts. Wir werden RAM als Maßeinheit verwenden. Moment entspricht 1 g 16 Pixeln, da die Schriftgröße des HTML-Elements standardmäßig 16 Pixeln entspricht. Ich möchte einen Lauf in zehn Pixel umwandeln. Und dafür müssen wir die Schriftgröße der HTML-Elemente verringern . Setzen wir es auf 62,5 Prozent. Okay, wie Sie sehen können, wurden alle Elemente kleiner. Und jetzt entspricht ein RAM zehn Spitzen. Lassen Sie uns weitermachen und uns um den ersten Abschnitt kümmern. Ich füge Ihre neuen Kommentare ein, Abschnitt eins. Und Abschnitt eins. Wählen Sie dann das Abschnittelement aus. Definieren wir zunächst Breite und Höhe. Ich setze die Breite auf 100%. Was die Höhe angeht, machen wir sie zu 100% aus dem Viewport. Außerdem werde ich das Bild als Vollbild-Hintergrund festlegen Geben wir hier also die URL des Bildes an. Wir haben also den Ordner Images und müssen Dark BG Dot JPEG auswählen. Fügen wir hier auch keine Wiederholungen ein. Außerdem werde ich die Hintergrundgröße so einstellen , dass sie abdeckt. Wie Sie sehen können, hat dieses Abschnittselement ein Vollbild-Hintergrundbild Das war's also mit diesem Abschnittselement. Lass uns weitermachen und uns um das Banner kümmern. Zunächst definiere ich die Position und platziere sie in der Mitte der Seite. Wählen wir also ein Banner aus und definieren dessen Breite, machen wir es zu 100%. Dann setze ich seine Position auf absolut. Um es dann entsprechend seinen übergeordneten Elementen zu positionieren , werde ich die relative Position für dieses Abschnittselement festlegen . Und dann definiere Top-Immobilien, mache 20% draus. Was die Linke angeht, werde ich sie auf 50 Prozent setzen. Für die perfekte Zentrierung müssen wir das Element jetzt um 50 Prozent nach links bewegen 50 Prozent nach links Lassen Sie uns Transform verwenden dann mit X-Richtung übersetzen, und wir müssen hier -50% platzieren. Und schließlich richten wir den Text mithilfe von Textalign Center in der Mitte aus Okay, nehmen wir an, dass das Banner zentriert ist und wir jetzt jedes Element anpassen müssen Ich habe die Überschrift, den Absatz und die Schaltfläche erstellt. Derzeit enthält die Überschrift vier verschiedene Spanelemente. Irgendwann werden wir schöne Animationen mit diesen Span-Elementen erstellen . Aber jetzt müssen wir nur noch die Elemente anpassen. Also werde ich dieses Panelelement kommentieren und nur eines davon übrig lassen. Wählen Sie dann die Überschrift aus und schaffen Sie unten etwas Platz. Margin-Bottom verwenden. Für RAM. Außerdem werde ich die Höhe der Überschrift definieren. Stellen wir es auf Rampe 20 ein. Danach wählen wir dieses Span-Element selbst aus. Also werde ich zunächst die Schriftfamilie definieren. In diesem Fall verwenden wir eine Schrift namens Oswald San-Serif, die die Schriftgröße auf 12 RAM erhöht . Außerdem definiere ich die Schriftstärke als 400. Okay, fügen wir ein paar weitere Stile hinzu. Die Span-Elemente, ich werde Text in Großbuchstaben umwandeln Ändere auch die Farbe und mache sie weiß. Und außerdem werde ich Little Shadow Effect verwenden. Verwenden wir Text. Shadow mit einem Wert ist 0,3 Runden zweimal als 0,6 RAM. Und als Farbe verwende ich den RGBA-Wert mit schwarzer Farbe und mit der Opazität 0,5 In Ordnung, schauen wir uns jetzt die Überschrift an. Lassen Sie uns weitermachen und uns um den Absatz kümmern. Ich wähle den letzten Absatz aus. Lassen Sie uns zunächst eine Schriftgröße definieren und daraus einen vollen Rang machen. Ändern Sie dann die Schriftstärke. Ich mache 400 draus. Transformiere auch Text in Großbuchstaben. Dann ändere die Farbe, mache es weiß. Außerdem werde ich die Hintergrundfarbe auf den RGBA-Wert einstellen Hintergrundfarbe auf den RGBA-Wert Verwenden wir hier die schwarze Farbe und die Opazität 0,6. Okay, lassen Sie uns weitermachen und dem Absatz ein paar mehr Stil hinzufügen . Soweit ich die Breite verringern werde. Machen wir 30% draus. Als Nächstes werde ich unten etwas Platz schaffen. Und dafür müssen wir den Absatz auch zentrieren. Verwenden wir Margin. Ich setze es oben auf Null. Dann brauchen wir Aldol auf der rechten und linken Seite. Und für RAM unten. Danach werde ich oben und unten innerhalb des Absatzes etwas Platz schaffen , indem ich Padding verwende Padding auf einen Rem und Null und erzeugt auch einen gewissen Schatteneffekt Verwenden wir Box-shadow mit den Werten, die eins zweimal ausgeführt hat , als fünf RAM Und verwende wieder den RGBA-Wert mit einer schwarzen Farbe und einer Opazität In Ordnung, der Absatz ist also angepasst. Und als nächstes müssen wir den unteren Teil nehmen . Wählen wir es aus. Definieren wir zunächst Breite und Höhe. Ich gehe mit 23 Startplätzen los. Was die Höhe angeht, lassen Sie uns sechs RAM daraus machen. Dann ändere die Hintergrundfarbe. Ich werde hier die lineare Gradientenfunktion verwenden. Es wird aus zwei verschiedenen Farben bestehen. Und ich möchte, dass die Richtung des Übergangs der Farben darin liegt, zu schreiben. Was die Farben angeht, fügen wir hier die erste ein, sie wird 90 e0e sein Beim zweiten unterbreche ich Sie 71010 und ändere dann die Farbe des Textes, mache ihn Also hier haben wir den Button. Lassen Sie uns weitermachen und einige weitere Stile hinzufügen. Ich werde die Schriftgröße erhöhen. Lassen Sie es uns zum Laufen bringen und auch Text in Großbuchstaben umwandeln Dann werde ich den Knopf mithilfe des Randradius abgerundet machen den Knopf mithilfe des Randradius abgerundet Stellen wir es auf drei Marken ein und ändern Sie auch den Standardrahmen. Ich werde die Rampe von Border 2.1 auf Solid setzen. Und als Farbe verwenden wir 800505. Okay, danach werde ich einige Schatteneffekte erstellen. Ich möchte Schatten für die Schaltfläche und auch für den Text erstellen . Also verwenden wir Box-Shadow als Werte, die einmal ausgeführt werden, dann drei RAM und den RGBA-Wert mit der schwarzen Farbe und mit der Opazität Als Nächstes erstelle ich einen Textschatten. Stellen wir die Werte 2,6 RAM als 0,3, 0,2 RAM ein. Und verwende wieder RGBA mit einer schwarzen Farbe und mit der Opazität 0,4 Lassen Sie uns abschließend den Cursor auf eine Position setzen. Ordnung, der Button ist also gestylt und er sieht ziemlich gut aus Jetzt müssen wir die Animation und einige Effekte zu den Bannerelementen hinzufügen . Also lass uns weitermachen. 22. Projekt 3 - Animationen zur Landung hinzufügen: Ordnung, wir haben die Landingpage angepasst, und jetzt müssen wir weitermachen und den Bannerelementen einige Animationen hinzufügen den Bannerelementen einige Animationen hinzufügen Lass uns weitermachen und mit der Überschrift beginnen. Wie Sie wissen, besteht es aus vier verschiedenen Spannelementen. Im Moment sind drei von ihnen kommandiert und versteckt. also zunächst Lassen Sie uns sie also zunächst sichtbar machen. Hier sehen wir also alle vier Überschriften. Als nächstes müssen wir sie übereinander legen. Und dafür müssen wir ihre Position absolut festlegen. Jetzt werden die Überschriften übereinander gelegt, aber wir müssen sie in der Mitte platzieren Verwenden wir dafür Flexbox. Zunächst setze ich die Breite auf 100%. Und dann brauchen wir Display Flex und Justify Content Center. In Ordnung, das war's also. Die Überschriften sind positioniert und jetzt müssen wir weitermachen und mit der Arbeit an den CSS-Animationen beginnen Lassen Sie mich erklären, was wir tun werden. Wir werden die Überschriften in die Nähe des Benutzers verschieben, um die Funktion in der 3D-Umgebung zu übersetzen Und wir werden sie auch verstecken. Dies wird der Standardstatus der Überschrift sein. Danach werden wir die Überschriften in der Reihenfolge mit einigen Intervallen anzeigen Reihenfolge mit einigen Intervallen Lassen Sie uns also zunächst eine 3D-Umgebung erstellen. Dafür müssen wir eine der Eigenschaften verwenden, die als Perspektive bezeichnet werden. Es zeigt uns, wie weit das Element vom Benutzer entfernt ist. Ich werde es den Überschriftenelementen zuweisen. Also lasst uns die Perspektive auf 50 Rampe setzen. Danach verschieben wir die Überschriften und auch nach oben. Dann verwenden wir Transform mit der Funktion Translate Z. Ich werde hier acht RAM verwenden. Und um Überschriften auszublenden, verwenden wir Opazität Null Und außerdem werde ich den Abstand zwischen den Buchstaben vergrößern, damit der Effekt schöner aussieht werde ich den Abstand zwischen den Buchstaben vergrößern, damit der Lassen Sie uns diesen Abstand auf drei Rampen festlegen. Okay, die Überschriften sind versteckt, aber im Moment haben wir hier ein kleines Problem Diese Scrollleiste erschien hier unten. Um das zu beheben, verwende ich overflow hidden und wir müssen es dem Überschriftenelement zuweisen Wie Sie sehen können, haben wir hier die Scrollleiste nicht mehr. Jetzt ist es an der Zeit, die CSS-Animationen zu erstellen. Und dafür werde ich CSS-Keyframes verwenden. Wir müssen ein Zeichen gefolgt vom Schlüsselwort Keyframes hinzufügen. Und dann müssen wir den Namen der Keyframes festlegen. Nennen wir es animierte Überschrift. Also machen wir ein paar Schritte. Schauen wir uns das fertige Projekt an. Im ersten Schritt, von 0% auf 3%, werden die Überschriften ausgeblendet Sie werden genau dieselben Eigenschaften haben , die wir ihnen standardmäßig zugewiesen haben. Ich bin in diesen drei Grundstücken. Danach, zwischen 3% und 25 Prozent, zeigen wir die Überschrift wieder an die Standardposition an. In der Standardposition befinde ich mich in der Position, an der die Überschrift sichtbar ist. Lassen Sie uns also weitermachen und den ersten Schritt definieren . Null Prozent. Wir brauchen hier Transform, Translate Z acht RAM als Opazität auf Null Seitlicher Abstand zwischen den Enden, drei Schenkel. Als nächstes brauchen wir drei Prozent. Bei drei Prozent brauchen wir also Transform Translate Z mit Null. Dann müssen wir das Element sichtbar machen. Lassen Sie uns die Opazität auf eins setzen und auch den seitlichen Abstand verringern Machen Sie 1,5€ Miete draus. Danach von 3% bis 25% ist die Überschrift sichtbar. Und dann von 25 Prozent auf 28 Prozent. Während dieser 3% wird es sich wieder verstecken. Wir brauchen hier 25%. Nehmen wir diese drei Werte und fügen sie hier ein. Was die 28% angeht, müssen wir einige Änderungen vornehmen. Wir müssen eine Funktion mit einer Straßenbahn übersetzen, dann Opazität Null und Seitenabstand drei Rampen Und schließlich wird die Überschrift zwischen 28 und 100 Prozent ausgeblendet. Bei 100 Prozent benötigen wir Transform Translate Z, eine Straßenbahn, Opazität Null und eine Rampe mit Buchstabenabstand von drei Wir werden diesen Zyklus also zu allen Überschriften hinzufügen, jedoch mit unterschiedlichen Verzögerungszeiten Daher werden sie der Reihe nach in der Höhe angezeigt. Auch hier werden alle Überschriften den Zyklus ausführen, ich meine Ausblenden statt Anzeigen Und dann wieder verstecken. Aber das werden sie mit unterschiedlichen Verzögerungszeiten tun. In Ordnung, es ist Zeit, diese Animation auszuführen. Wir müssen alle Überschriften separat auswählen und ihnen Animationseigenschaften zuweisen Fangen wir mit der ersten Überschrift an. Weisen wir ihr Animation zu, gefolgt vom Namen der Animation , also animate header. Dann benötigen wir die Dauer 12 s. Dann beträgt die Verzögerungszeit 3 s für die erste Fahrt. Außerdem müssen wir die Animation unendlich ausführen. Also fügen wir hier unendlich hinzu. Okay? Lassen Sie uns diesen Code dreimal duplizieren und die Klassennamen ändern. Und auch die Höhe der Verzögerungszeit. Wir brauchen Überschrift 2,6 s. Dann brauchen wir für die dritte Überschrift 9 s. Für die fehlerhafte Einstellung benötigen wir 12 s. Wie Sie sehen können, haben wir hier einen ziemlich coolen Animationseffekt. In Ordnung, das war's also mit den Überschriftenelementen. Als Nächstes erstelle ich Animationen für den Absatz und den unteren und erstelle mit der Schaltfläche einen schönen und coolen Schwebeeffekt Sobald wir die Seite neu geladen haben, zeige ich den Absatz und die Schaltfläche mit einigen falschen Fehlern der Reihe nach an. Also nochmal, wir müssen die CSS-Keyframes definieren und wir müssen diese CSS-Regeln mit Animationseigenschaften ausführen diese CSS-Regeln mit Animationseigenschaften Lassen Sie uns weitermachen und mit einem Absatz beginnen. Zunächst werde ich den Absatz standardmäßig ausblenden. Lassen Sie uns die Opazität auf Null setzen und die Sichtbarkeit auf ausgeblendet setzen. Wie Sie sehen können, ist der Absatz versteckt und jetzt müssen wir die CSS-Keyframes erstellen Nennen wir es Fade-Animation. Eigentlich werden wir diese Animation für beide Elemente verwenden. Ich bin in dem Absatz und Boston auch. Insgesamt werden wir also zwei verschiedene Schritte haben. Die anfänglichen 0,0 Prozent und die Endung 0,1%. Das einzige, was wir tun müssen , ist, das Element bei Null Prozent zu verstecken und es bei hundert Prozent sichtbar zu machen. Wir brauchen also eine Opazität von Null und eine versteckte Sichtbarkeit von 0%. die 100% angeht, brauchen wir die erste Opazität und die sichtbare Sichtbarkeit Die Keyframes sind also bereit. Jetzt müssen wir diesen Code mit der Animationseigenschaft ausführen . Weisen wir es also dem Absatz mit den Werten Fade-Animation 1 s Dauer zu, und dann benötigen wir eine verzögerte Zeit 1,5 s. Wie Sie sehen können, funktioniert die Animation also. Der Absatz wird mit einem Fade-Effekt angezeigt. Aber wir haben hier ein Problem. Sobald die Animation beendet ist, dann wieder die Absatzhöhen. Es bekommt wieder die Standardstile. Ich meine Opazität auf Null und versteckte Sichtbarkeit. Das brauchen wir nicht. Wir benötigen den Absatz , um die im zweiten Schritt definierten Stile beizubehalten . Ich meine, das sagt, dass die 100%, um das zu erreichen, wir hier einen weiteren Wert hinzufügen müssen, nämlich den Wert der Eigenschaft Animationsfilmmodus, und dieser wird vorwärts aufgerufen Also wenn ich jetzt die Seite neu lade, dann wird alles perfekt funktionieren Okay. Das war's also mit dem Absatz. Machen wir dasselbe auch für den Button. Wie gesagt, wir benötigen dieselbe Animation, sodass wir die Keyframes nicht noch einmal definieren müssen Wir müssen nur Bateson und die Animationseigenschaft zuweisen Bateson und die Animationseigenschaft Aber vorher verstecken wir den Button. Wir brauchen Opazität Null und versteckte Sichtbarkeit. Und dann benutze Animationen. Mit den folgenden Werten. Wir benötigen eine Fade-Animation als die Dauer von 1 s als Verzögerungszeit. Ich benutze 2 s. Und dann brauchen wir wieder Stürmer In Ordnung, jetzt funktioniert alles gut und wir haben hier nette Animationseffekte Ordnung, als Nächstes erstelle ich einen schönen Hover-Effekt für den Button Schauen wir uns das fertige Projekt an. Sobald wir den Mauszeiger über den Button bewegen, leuchtet er Dieser leuchtende Effekt wird mit einem Pseudoelement erzeugt, entstehen diese kleinen weißen Elemente, und wir bewegen den Mauszeiger weiter Lassen Sie uns also weitermachen und eine Schaltfläche mit einem vorherigen Pseudoelement auswählen Schaltfläche mit einem vorherigen Pseudoelement Machen Sie ihn als definierten Inhalt zunächst leer. Dann lege ich Breite und Höhe fest, beide zu 200 Prozent. Was den Hintergrund betrifft, werde ich die lineare Gradientenfunktion verwenden. Die Richtung des Farbübergangs wird also von links nach rechts sein. Und ich werde drei verschiedene Farben verwenden. Der erste wird transparent sein. Dann haben wir die weiße Farbe. Und der dritte wird wieder transparent sein. Im Moment ist das Element also nicht sichtbar , weil wir die Position definieren müssen. Setzen wir die Position auf absolut. Dann. Um es entsprechend seinem übergeordneten Element, dem Button, zu positionieren , müssen wir die Position des Buttons als relativ definieren. Verwenden Sie dann die Top-Position und machen Sie sie auf Null. Was die linke Eigenschaft angeht, werde ich sie auf -100% setzen Okay, hier haben wir also die vorherigen Pseudoelemente. Bevor wir es zum Laufen bringen, werde ich es ein wenig horizontal verzerren Verwenden wir also die Transformation mit der Skew x-Funktion. Und als Wert setzen wir ihn auf 30 Grad. In Ordnung, also ist alles bereit, um einen Schwebeeffekt zu erzeugen. Ich werde das vorherige Pseudoelement beim Bewegen der Maus auf die rechte Seite verschieben das vorherige Pseudoelement beim Bewegen der Maus auf die rechte Seite Wählen wir also die Schaltfläche mit dem Mauszeiger aus, gefolgt vom vorherigen Pseudoelement Und dann das verlassene Eigentum auf 100 Prozent setzen. Außerdem müssen wir uns umstellen. Wir haben Werte am linken Ende, 0,5 s. Okay? Es funktioniert also alles perfekt. Das einzige, was wir tun müssen, ist dieses Element standardmäßig auszublenden. Verwenden wir dafür Overflow Hidden. In Ordnung, das war's also. Mit dem ersten Abschnitt sind wir fertig. Jetzt werde ich weitermachen und das Napa erstellen 23. Projekt 3 - Navbar erstellen und anpassen: Okay, jetzt müssen wir anfangen, an der Navbar zu arbeiten. Schauen wir uns das fertige Projekt an. Hier haben wir also den Napa mit einem Logo und dem Menüsymbol. Wenn ich darauf klicke, erscheint die Navigation mit ein paar Navigationselementen. Sie werden einen kleinen Schwebeeffekt haben. Wir werden die Farbe der Artikel in Harvard ändern. Außerdem verwandelt sich das Menüsymbol hier in diesen Pfeil. Wenn ich drauf klicke, dann um ein Nickerchen zu machen oder werde schließen. Jetzt wird Paul auch die Animation haben. Wenn wir die Seite neu laden, wird sie standardmäßig ausgeblendet und dann von oben angezeigt Ordnung, lassen Sie uns anfangen das HTML-Markup zu erstellen Ich werde die Navbar außerhalb des Containers platzieren. Also lass uns deine Kommentare, Navbar und von Navarra einfügen Navbar und von Navarra Öffnen Sie dann HTML5-Navigationselemente mit der Klassennavigationsleiste. Die Nummer wird also aus einem Logo und den Navigationspunkten bestehen . Lassen Sie uns weitermachen und ein Logo erstellen. Ich werde das Div-Tag öffnen. Das Logo wird der Textcode sein und erstellt. Das einzige, was ich tun werde, ist, für drei Buchstaben einen anderen Stil zu verwenden. Also werde ich sie mit Span-Elementen umwickeln. Lassen Sie uns zunächst ein Link-Tag einfügen. Und dann brauchen wir Textcode und erstellen. Ich werde den ersten Buchstaben mit Span-Elementen umschließen. Fügen Sie dann ODE ein. Andererseits werde ich den Buchstaben a und dann den Buchstaben C mit span umschließen. Als Nächstes öffnen wir ein div-Tag, das die Navigationselemente enthält. Ordnen wir es der Klassennavigationsliste zu. Öffnen Sie dann das Link-Tag mit dem Link zur Klassennavigation und dem Inhalt. Insgesamt werden wir also fünf verschiedene Navigationspunkte haben. Lassen Sie uns die Linkelemente viermal duplizieren und dann den Inhalt ändern. Im zweiten wird es darum gehen, dann werden wir die Preise haben. Der nächste wird Blog sein. Das ist wahrscheinlich der letzte. Fügen wir hier Kontakt ein. In Ordnung, das war's mit dem Napa. Die andere Sache, die ich tun werde, ist ein Menüsymbol zu erstellen. Fügen wir neue Kommentare für das Menü ein. Öffnen Sie dann das Div-Tag mit dem Klassenmenü. Das Menüsymbol wird aus drei verschiedenen Zeilen bestehen. Ich werde sie anhand von Entwicklungen erstellen , die der Linie jeder Klasse zugewiesen sind, was der gemeinsame Klassenname sein wird. Und auch hier brauchen wir Zeile eins. Lassen Sie uns diese Codezeile zweimal duplizieren und die Klassennamen ändern. Wir brauchen Zeile zwei, Zeile drei. In Ordnung, das war's also mit dem HTML-Markup. Jetzt müssen wir anfangen, den Roman zu beginnen. Lassen Sie uns weitermachen und neue Kommentare in die CSS-Datei einfügen. Dann Navbar. Und von Navbar. Wählen Sie dann Navigationselemente aus. Ich werde Breite und Höhe definieren. Fangen wir mit 200% an. Was die Höhe angeht, werde ich acht RAM daraus machen und auch die Hintergrundfarbe ändern. Verwenden wir hier den RGBA-Wert mit schwarzer Farbe und mit der Opazität 0,9. Okay? Die Nummer wird also eine feste Position haben. Es wird oben auf der Seite platziert. Setzen wir also die Position auf Fest. Und außerdem werde ich die Spitzenposition auf Null setzen. Jetzt ist die Navigationsleiste versteckt weil sie hinter dem Banner gelandet Um das zu beheben, verwende ich die Z-Index-Eigenschaft, der ein höherer Wert als Null zugewiesen wurde, sagen wir zehn Als Nächstes lassen Sie uns mithilfe von Padding etwas Platz in der Navigationsleiste schaffen mithilfe von Padding etwas Platz in der Navigationsleiste Setzen wir es auf allen vier Seiten auf drei Rem. Okay, also jetzt ist es soweit mit der Navbar. Lassen Sie uns weitermachen und das Logo anpassen. Zuallererst werde ich mich um seine Position kümmern. Wählen wir es aus und setzen seine Position auf absolut. Dann definiere ich die Eigenschaften oben und links. Ich werde die Spitzenposition auf 1,5 RAM setzen. Was die linke Eigenschaft angeht, setzen wir sie auf vier Runs. Okay, als Nächstes werde ich das Logo stylen. Wählen wir also Link-Elemente und definieren dann die Schriftfamilie. In diesem Fall verwende ich eine Schrift namens May Seoul Maze San-Serif. Erhöhen Sie dann die Schriftgröße und machen Sie 2,5 RAM daraus. Ändere die Farbe. Ich benutze Ihren Anruf oder E. Und lassen Sie uns außerdem etwas Abstand zwischen den Buchstaben schaffen. Verwenden Sie den Ledger-Abstand mit dem Wert 0,1 ran. Okay, jetzt sieht das Logo viel besser aus, aber wie Sie sehen können, müssen wir diese drei Buchstaben anpassen Lassen Sie uns also weitermachen und das Span-Element auswählen. Definieren wir die Schriftfamilie. Ich werde San-Serif verwenden, Again Mated Soulmates Dann erhöhen Sie die Schriftgröße. Ich werde 3,5 RAM draus machen. Lassen Sie uns auch das Telefon mutiger machen. Verwenden Sie die Schriftstärke, würde Fett abwerten. Dann ändere ich die Farbe. Nennen wir neun E 0, E 09. In Ordnung, das ist also eine Silbe, das Logo. Lassen Sie uns weitermachen und das Menüsymbol anpassen. Bevor wir das tun, werde ich die Navigationselemente für eine Weile ausblenden die Navigationselemente für eine Weile Wählen wir also den Romanautor aus , dem keiner angezeigt werden soll Wie Sie sehen können, sind die Navigationselemente versteckt. Lassen Sie uns weitermachen und das Menüsymbol anpassen, das im Moment nicht sichtbar ist, da wir hier nur ein leeres Div-Element haben. Lassen Sie uns also weitermachen und neue Kommentare für das Menü einfügen. Wählen Sie dann die Wrapper-Div-Elemente mit dem Klassenmenü aus. Zunächst definiere ich Breite und Höhe sowie die Hintergrundfarbe. Stellen wir also Breite und Höhe ein, beide auf fallendes RAM. Was die Hintergrundfarbe angeht, werde ich hier eine temporäre Hintergrundfarbe verwenden . Lass es uns sterben lassen. Moment ist das Menüsymbol nicht ganz sichtbar, da es hinter dem Napa gelandet Ich werde das mit der Z-Index-Eigenschaft beheben. Aber wie Sie wissen, müssen wir zunächst die Position für das Element definieren, um die Z-Index-Eigenschaft verwenden Z-Index-Eigenschaft müssen wir zunächst die Position für das Element definieren, um die Das Menüsymbol sollte eine feste Position haben. Lassen Sie uns also die Position festlegen, um sie zu korrigieren. Und dann definiere die Indexeigenschaft. Ich werde ihm einen höheren Wert zuweisen , sagen wir hundert. In Ordnung, hier haben wir das Menüsymbol. Wir müssen es in der oberen rechten Ecke der Seite platzieren. Lassen Sie uns also weitermachen und die oberen und rechten Eigenschaften definieren. Und ich werde die Position auf rammen setzen. Was die richtige Position angeht, lassen Sie uns vier Rampen daraus machen. In Ordnung, das Menüsymbol ist also positioniert. Jetzt kümmere ich mich um die Leitungen. Zuerst. Lassen Sie uns diesen temporären Hintergrund loswerden. Und dann wähle die Linie aus. Definieren wir seine Breite und Höhe. Ich setze die Breite auf 100%. Was die Höhe angeht, lassen Sie uns darauf achten, dass sie auf die Rampe zeigt. Und verwende auch die Hintergrundfarbe E. E. E. Jetzt sind die Linien sichtbar, aber wie du siehst, müssen wir etwas Abstand zwischen ihnen schaffen und sie trennen. Ich werde das mit Flexbox machen. Stellen wir also das Display auf Flex ein. Um die Linien dann vertikal in einer Spalte zu platzieren, müssen wir die Richtung ändern. Machen wir daraus eine Kolumne. Um einen gewissen Abstand zwischen den Elementen zu schaffen, die wir benötigen, sollten Sie Inhaltsbereich gleichmäßig begründen. Außerdem möchte ich den Typ des gröberen Geräts ändern , sobald wir den Mauszeiger über Also lassen Sie uns dem Menü den Cursorzeiger zuweisen. Ordnung, wie Sie sehen können, sind die Linien getrennt Als Nächstes ändere ich die Größen der ersten und dritten Zeile da sie kleiner sind als die zweite Zeile. Wählen wir also Zeile eins aus. Stellen Sie die Breite auf 50 Prozent ein. Dann dupliziere ich diesen Code und ändere Zeile eins in Zeile drei. Und neben der Breite füge ich hier Margin-Left Auto hinzu, damit wir die Linie auf der rechten Seite platzieren In Ordnung, das war's also mit dem Menüsymbol. Es ist maßgeschneidert und positioniert. Und jetzt kümmere ich mich um die Navigationselemente. Schauen wir uns das fertige Projekt an. Daher sind die Navigationselemente standardmäßig ausgeblendet. Sobald wir auf das Menüsymbol klicken, wird die Zahl auf die gesamte Seite ausgedehnt und die Navigationselemente werden mit einem Fade-Effekt angezeigt. Zunächst werde ich die Navigationselemente anpassen. Wir werden sie so aussehen lassen. Und dann programmieren wir das Menüsymbol. Lassen Sie uns also zunächst einen Flughafen auf die gesamte Seite erweitern. Im Moment ist die Höhe auf acht RAM eingestellt und ich werde sie ändern und die Höhe des Viewports auf hundert Ordnung, jetzt ist es an der Zeit, die Navigationselemente anzupassen , da sie jetzt ausgeblendet sind Lassen Sie uns also Display None loswerden. Das erste, was ich tun werde, ist die Elemente zu positionieren. Ich werde sie in die Mitte stellen. Lassen Sie uns also die Position auf absolut setzen. Dann definiere ich Top-Immobilien. Machen wir 25 Prozent draus. Die linke Position wird bei 50 Prozent liegen. Und um die Elemente zu zentrieren, müssen wir, wie Sie wissen, Transform mit der Funktion translate x verwenden. Und wir müssen die Elemente um -50% verschieben. In Ordnung, die Liste ist also positioniert. Jetzt richte ich die Navigationselemente vertikal in einer Spalte aus. Verwenden wir Display Flex. Dann platziere ich die Elemente vertikal in einer Spalte. Ändern wir die Richtung, machen wir es zu einer Spalte. Außerdem müssen wir die Elemente in der Mitte ausrichten mithilfe von Align Items Center ausrichten. In Ordnung, das war's mit der Liste. Jetzt werde ich die Navigationselemente anpassen. Wählen wir Link-Elemente aus. Lassen Sie uns zunächst die Schriftfamilie ändern. Ich werde hier die von mir erstellte Schrift verwenden. Also Mais, San-Serif. Erhöhen Sie dann die Schriftgröße und machen Sie sie für RAM. Schaffen Sie außerdem etwas Abstand zwischen den Buchstaben mit einem Buchstabenabstand von 0,3 RAM und machen Sie ihn weiß, um die Farbe zu ändern. Wie Sie sehen können, sehen die Navigationselemente jetzt viel besser aus. Als Nächstes werde ich etwas Abstand zwischen ihnen schaffen. Verwenden wir den Rand und setzen ihn oben und unten auf zwei Rem und links und rechts auf Null. In Ordnung, das ist es. Die Navigationselemente sind gestylt und jetzt erstelle ich einen Hover-Effekt Ich möchte die Farbe der Elemente ändern, wenn Sie mit der Maus darauf zeigen. Wählen wir also den Nav-Link mit der Maus aus und ändern die Farbe. Du siehst deine Farbe 99. Und wir müssen auch den Übergang nutzen, um einen reibungslosen Effekt zu erzielen. Ordnen wir der Farbe und der Dauer 0,4 s zu. Okay? Der Hover-Effekt funktioniert also einwandfrei. Und jetzt müssen wir das Napa zum Laufen bringen. 24. Projekt 3 - Navbar arbeiten lassen: Okay, sobald wir den Pourer angepasst haben, müssen wir ihn jetzt zum Laufen bringen Zuallererst werde ich die Navigationsleiste standardmäßig ausblenden, ich meine, um ihre Höhe zu verringern Sobald wir auf das Menüsymbol klicken, sollte es erweitert werden. Außerdem müssen wir diese Linien in einen Pfeil umwandeln . Lassen Sie uns zunächst die Navigationselemente ausblenden. Ich verwende Opazität Null und Visibility Hidden. Als Nächstes verringere ich die Höhe der Nanopore und gebe ihr die Standardform Lassen Sie uns die Höhe auf ein Gramm festlegen. Okay, jetzt ist es an der Zeit, das Menüsymbol dafür zu programmieren, ich werde JavaScript verwenden. Sobald wir auf das Symbol klicken, sollte sich die Navigationsleiste auf die gesamte Seite erstrecken und die Navigationselemente sollten angezeigt werden Gehen wir also zur JavaScript-Datei und wählen wir zuerst das Menüsymbol aus. Ich werde neue Kommentare einfügen. Jetzt weit weg, jetzt Bar, und dann erstelle ich eine neue Variable, ich nenne es Menü. Wählen wir das Menüsymbol mit der Methode querySelector aus. Wir müssen hier das Klassennamenmenü angeben. Außerdem werde ich jetzt auch den Port auswählen. Lassen Sie uns also eine weitere Variable erstellen, sie jetzt Bar nennen und Zahl erneut mit der QuerySelector-Methode auswählen Lass uns jetzt deine Klasse einfügen. Okay, jetzt ist es an der Zeit einen Event-Listener an das Menüsymbol anzuhängen Geben wir hier das Klickereignis und übergeben auch eine Pfeilfunktion, die ausgeführt wird, sobald wir auf das Symbol klicken. Lassen Sie mich erklären, was wir tun werden. Wir werden der Navbar eine neue Klasse namens Change hinzufügen. Mit dieser Klasse erstellen wir neue Stile und CSS, die bei Klick auf die Navigationsleiste angewendet werden Beim nächsten Klick wird die Klassenänderung entfernt und daher werden auch die neuen Styles entfernt. Wir werden dies mit einer Umschaltmethode verwalten. Im Allgemeinen fügt die Methode toggle dem Element eine neue Klasse hinzu, wenn es sie nicht hat, und entfernt die Klasse, wenn das Element sie hat Um dem Element eine neue Klasse hinzuzufügen, verwende ich eine der Eigenschaften namens Klassenliste. Es gibt uns alle Klassen , die das Element hat. Außerdem können wir auf verschiedene Methoden wie Hinzufügen, Entfernen und Umschalten zugreifen verschiedene Methoden wie Hinzufügen, Entfernen und Umschalten Lassen Sie uns also die Klassenliste an die Nummer anhängen und dann die Umschaltmethode verwenden Geben wir hier die Änderung des Klassennamens an. In Ordnung, das war's also mit JavaScript. Lass uns weitermachen und CSS schreiben. Also müssen wir das Napa onclick erweitern. Deshalb brauchen wir hier jetzt mit einem Klassenwechsel. Und dann müssen wir die Höhe angeben. Machen wir es mit einer Viewport-Höhe von 100. Und außerdem werde ich Transition verwenden. Lassen Sie uns die Dauer von 0,5 s ausblenden. Okay, wenn ich jetzt auf das Menüsymbol klicke, wird die Navigationsleiste erweitert und beim nächsten Klick geschlossen Ordnung, als Nächstes werde ich die Navigationselemente anzeigen Lassen Sie uns diese Technik anwenden. Wir brauchen Veränderung. Nicht zuletzt. In diesem Fall brauchen wir hier Platz, weil nicht zuletzt das Kind der Navbar ist Setzen wir also die Opazität auf eins, und dann brauchen wir Sichtbarkeit sichtbar Außerdem werde ich Transition mit den Werten 0.7 verwenden . S ist die Dauer. Und außerdem werde ich wenig Verzögerungszeit nutzen. Fügen wir hier 0,5 s ein. Wenn ich also auf das Symbol klicke, werden die Navigationselemente anzeigen, dass sie in der nächsten Woche ausgeblendet werden. Aber in diesem Fall ohne Fade-Effekt. Um das zu beheben, brauchen wir wieder einen Übergang, aber in diesem Fall zumindest nur für den Kern Geben wir hier also die gesamte Dauer 0,2 s an. Ordnung, jetzt funktioniert alles einwandfrei Und als nächstes müssen wir uns um das Menüsymbol kümmern. Wie Sie sich erinnern, müssen wir es in den Pfeil umwandeln , um ihn zu entfernen Die erste Linie sollte sich nach unten zur rechten Seite bewegen und sich dann drehen. Wir müssen die zweite Zeile überhaupt nicht berühren. Was die dritte Zeile betrifft, müssen wir sie drehen. Fangen wir mit der ersten Zeile an. Zuerst erstelle ich den Pfeil und dann sorgen wir dafür, dass das Symbol funktioniert. Verwenden wir Transform mit der Übersetzungsfunktion. Um die Elemente auf die rechte Seite zu verschieben, gebe ich die Jahreszahl zu 100% als Wert der X-Richtung weiter 100% als Wert der X-Richtung Was die Y-Richtung angeht, setzen wir sie auf eine Miete. Die Linie ist also nach unten auf die rechte Seite gerückt Moment sind beide Linien, ich bin in der ersten und dritten ich bin in der ersten und dritten Zeile, übereinander gelegt. Und jetzt drehe ich die erste Zeile um -35 Grad Also müssen wir die Funktion als Wert rotieren. Lass uns hier eine Pause machen -35 Grad. Wie Sie sehen können, ist die Linie gedreht, aber nicht richtig platziert. Die Linie wird von ihrem Mittelpunkt aus gedreht, da der Ursprung der Transformation, wie Sie wissen, standardmäßig auf die Mitte gesetzt ist In diesem Fall werde ich es ändern und machen, oder? Endlich wird die erste Zeile korrekt gespielt. Lass uns weitermachen und uns um die dritte Zeile kümmern. Wir müssen es nach oben bewegen und rotieren. Also müssen wir uns transformieren. Dann übersetze die Funktion mit Y-Richtung. Fügen wir hier minus ein RAM ein. Außerdem müssen wir die Funktion um den Wert 45 Grad drehen . Wie bei der ersten Zeile müssen wir den Ursprung der Transformation ändern. Stellen wir es auf, oder? Jetzt haben wir hier den perfekten Pfeil. Okay, jetzt ist es an der Zeit, das Menü zu erstellen, an dem ich arbeiten kann. Wir müssen all diese Dinge tun. Sobald wir auf das Symbol klicken, verwende ich erneut den Klassenwechsel. Wir müssen es mit der Umschaltmethode zum Menüsymbol hinzufügen mit der Umschaltmethode zum Menüsymbol Gehen wir also zur JavaScript-Datei und zur Dichte im U-Menü, Punktklassenliste, Punkt Toggle Und der Klassenname wurde geändert. Danach müssen wir die erste und dritte Zeile mithilfe des Klassenwechsels auswählen . Nehmen wir diese beiden Zeilen und fügen sie hier ein. Wählen Sie dann die dritte Zeile aus und machen Sie dasselbe. Wie Sie sehen, die Linien in einen Pfeil, sobald wir auf das Symbol klicken verwandeln sich die Linien in einen Pfeil, sobald wir auf das Symbol klicken. Das einzige, was wir tun müssen, ist, diesen Effekt glatter zu machen. Und dafür verwenden wir Transition mit Transformation und der Dauer 0,3 s. Okay, alles funktioniert gut. Wir haben hier einen schönen und coolen Effekt. Bevor wir mit dem nächsten Teil unseres Projekts fortfahren, werde ich noch eine Sache tun. Ich schiebe die gesamte Nagelstange nach oben und verstecke sie. Sobald wir die Seite neu geladen haben, möchte ich, dass sie von oben auf der Seite glatt erscheint, als wäre sie im fertigen Projekt Also werde ich zuerst den Nullteil verstecken. Ich meine, ich werde es nach oben verschieben. Setzen wir die oberste Position auf minus acht RAM. Dann müssen wir CSS-Keyframes erstellen. Ich werde es animate navbar nennen. Insgesamt werden wir also zwei verschiedene Schritte haben. Wir werden dann von 0 auf 100% nach unten gehen, Albert. Bei Null Prozent müssen wir also die Standardposition verwenden. Setzen wir die oberen zwei minus acht RAM ein. Was die 100% angeht, brauchen wir einen Top mit Null. Okay, die Keyframes sind also bereit. Lassen Sie uns die Animationseigenschaft verwenden. Wir müssen hier den Namen der animierten Navigationsleiste der Keyframes als die Dauer der Animation 1 s angeben animierten Navigationsleiste der Keyframes als die Dauer der Animation 1 . Außerdem werde ich eine kleine Verzögerungszeit verwenden Machen wir 0,5 s. Wenn ich die Seite neu lade , bewegt sich die Navigationsleiste reibungslos nach unten Aber irgendwann wird es sich wieder verstecken. Wir müssen die Position, die wir zu 100% angegeben haben, beibehalten . Dazu müssen wir einen der Werte der Eigenschaft für den Animationsfilmmodus verwenden, der als Forwards bezeichnet wird Wie Sie jetzt sehen können, funktioniert alles perfekt und wir haben die Arbeit am Napa abgeschlossen Lassen Sie uns hier im nächsten Teil unseres Projekts zur Antike übergehen nächsten Teil unseres Projekts zur 25. Projekt 3 - Erstelle und Stil Über uns Abschnitt: Ordnung, wir haben die Arbeit an der Navigationsleiste abgeschlossen, und jetzt ist es an der Zeit, weiterzumachen und uns um den zweiten Abschnitt unseres Projekts zu kümmern , der der Abschnitt Über uns sein wird Schauen wir uns die fertigen Projekte an und erinnern uns daran, wie dieser Abschnitt aussieht. Wie Sie sehen können, haben wir hier drei verschiedene Teile. Auf der linken Seite dieser Aktion. Dort wird die Überschrift mit einer Linie platziert. Dann haben wir hier das Video mit Kostümspiel, Pausensteuerung. Und unten haben wir einen Absatz mit etwas Blindtext. Lassen Sie uns noch einmal fortfahren und mit der Erstellung des HTML-Markups beginnen der Erstellung des HTML-Markups Ich werde auch einen neuen Kommentarbereich einfügen. Und aus dem Abschnitt, um dann den Abschnitt zu öffnen, Tag mit einer Klasse, Abschnitt zwei. Wie gesagt, dieser Abschnitt wird aus verschiedenen Teilen bestehen. Die erste wird die Überschrift sein. Öffnen wir also das H1-Überschriftenelement mit der Überschrift des Klassenabschnitts Und mit den Inhalten über uns. Dann haben wir die Zeile, die auf der linken Seite der Überschrift platziert wird . Öffnen wir das Div-Tag mit einer Überschriftenzeile für einen Klassenabschnitt. Okay, danach richten wir das Video ein. Ich öffne ein div-Tag, das als Wrapper des Videos dienen wird Ordnen wir der Klasse Video-Wrapper zu. Dann fügen wir das HTML-Five-Video-Tag mit einem Klassenvideo ein. Dann müssen wir den Teil des Videos spezifizieren. Es befindet sich im Ordner Images. Wählen wir das Video „Über uns“ aus. Im Allgemeinen können Sie die Steuerelemente also mithilfe des Attributs Controls aus HTML erstellen . Aber in diesem Fall erstelle ich die benutzerdefinierten Steuerelemente, die dann mit JavaScript programmiert werden. Ich denke also, es wird interessanter sein. Öffnen wir ein div-Tag, das der Wrapper der Steuerelemente sein wird Es wird die Dauerleiste des Videos und die Wiedergabetaste enthalten . Öffnen wir also ein weiteres div-Tag. Es wird die Verpackung der Bar sein. Lassen Sie uns ihm ein Klassenvideo über Wrapper zuweisen. Und dann richte ein neues Div-Element ein, das die Bar selbst sein wird. In Ordnung, als Nächstes müssen wir die Schaltflächen erstellen. Ich bin in den Play-Pause-Buttons. Es wird mit den Font Awesome-Symbolen erstellt. Lassen Sie uns zuerst ein div-Tag öffnen, das der Wrapper sein wird Weisen wir den Klassen Schaltflächen zu. Dann füge hier ein Button-Tag , in das ich das Font Awesome-Icon übergebe. Standardmäßig füge ich hier nur die Play-Schaltfläche ein. Wir werden es später mithilfe von JavaScript in die Pause-Schaltfläche umschalten . Ordnen wir also Irland den FAR FAA-Spielkreis zu. In Ordnung, schauen wir uns das Video an. Das einzige, was wir tun müssen, ist den Absatz zu erstellen. Es ist also ein offenes P-Tag mit dem zweiten Absatz des Klassenabschnitts. Innerhalb des Absatzes werden wir den Text und auch die Font Awesome-Symbole für die Anführungszeichen haben . Öffnen wir das I-Tag mit einer Klasse, die FAS ist, ein Anführungszeichen übrig. Dann werde ich einen Scheintext einrichten. Und zum Schluss lassen Sie uns hier das zweite Font Awesome-Symbol weitergeben . Wir brauchen Unterricht, FIS, ein Angebot, oder? In Ordnung, das Markup wird also gerade erstellt. Es sieht wirklich chaotisch aus, also müssen wir uns darum kümmern Als erstes werde ich die Größe des Videos verringern , weil es im Moment zu groß ist. Lassen Sie uns neue Kommentare in die CSS-Datei für Abschnitt zwei einfügen. Wählen Sie dann den Video-Wrapper und definieren Sie Breite und Höhe Ich werde mit 200 Rampen beginnen. Was die Höhe angeht, lassen Sie uns 50 Rampen daraus machen. Wählen Sie dann das Video selbst aus und definieren Sie Breite und Höhe als 100%. Und außerdem werde ich Objektfußschutz verwenden. Wie Sie jetzt sehen können, ist die Größe des Videos kleiner und wir können beginnen , diesen Abschnitt anzupassen. Lassen Sie uns also weitermachen und das Abschnittselement auswählen. Zunächst definiere ich Breite und Höhe dieses Abschnitts. Fangen wir mit 200 Prozent an. Was die Höhe angeht, werde ich sie zu 100% aus dem Viewport machen Und lassen Sie uns auch die Hintergrundfarbe definieren. Ich mache es dunkelgrau. Verwenden wir Farbe für 22020. Okay, als Nächstes richte ich die Elemente mit Flexbox Stellen wir das Display auf Flex ein. Es wird Elemente horizontal ausrichten. Dann platziere ich sie vertikal in der Mitte. Verwenden Sie also die Option „Elemente mittig ausrichten und schaffen Sie durch die Polsterung auch etwas Platz auf der linken und rechten Seite Setzen wir es auf Null und tanken die Rampe. In Ordnung, das ist es. In Bezug auf das Abschnittselement gehen wir weiter und passen die Überschriftenelemente an. Wählen wir die Abschnittsüberschrift aus. Zuallererst werde ich die Schriftfamilie festlegen. Machen wir es fett und seriflos. Das erhöht die Schriftgröße. Lass es sich umdrehen. Und ändern Sie auch die Schriftstärke, machen Sie es leichter. Setzen wir es auf 300 und ändern die Farbe, D. D. Also, wie Sie sehen können, ist die Überschrift gestylt, aber sie sieht momentan nicht ganz gut weil nicht genug Platz vorhanden ist Ich kümmere mich um die Ausrichtung des Videos und des Absatzes. Ich setze die Position für den Video-Wrapper auf absolut Dann benötigen wir die relative Position für dieses Abschnittselement, da es das übergeordnete Element ist. Und wir müssen den Video-Wrapper entsprechend dem Abschnitt positionieren entsprechend dem Abschnitt Und danach definieren Sie die oberen und rechten Eigenschaften. Ich werde die Top-Eigenschaft an Fibrin weitergeben. Was die richtige Position angeht, lassen Sie uns 15 Rampen daraus machen. Okay. Das Video ist also positioniert. Jetzt kümmere ich mich um den Absatz. Lassen Sie uns weitermachen und dieses Element auswählen. Stellen wir die Breite 200 ran ein. Dann setze ich die Position auf absolut. Dann definierte die unteren und rechten Eigenschaften. Ich setze die unterste Position auf acht, rannte, was die richtige Position angeht, lass uns eine 15-Rampe daraus machen. Der Absatz ist also auch Position. Und jetzt sieht die Überschrift gut aus. Lassen Sie uns weitermachen und die Zeile anpassen , die auf der rechten Seite der Überschrift platziert wird. Wählen wir also die Abschnittsüberschrift aus. Ich werde seine Breite und Höhe definieren, eingestellt auf 215 RAM. Was die Höhe angeht, werde ich es mir zur Aufgabe machen, die Rampe zu benutzen. Und ändere auch die Hintergrundfarbe, mache es di, di, di. Okay, hier haben wir die Zeile, wie Sie sehen können, müssen wir etwas Abstand zwischen der Überschrift und der Zeile schaffen . Verwenden wir also Margin-Right. Ich werde es dem Überschriftenelement zuweisen. Stellen wir es zur Miete ein. In Ordnung, jetzt haben wir ein besseres Ergebnis. Als Nächstes füge ich dem Video-Wrapper einen Schatteneffekt Lassen Sie uns Box-shadow mit den Werten drei verwenden und dreimal ausführen Und dann der RGBA-Wert mit einer schwarzen Farbe und mit der Opazität 0,7 Lassen Sie uns außerdem die Opazität des Videos verringern . Machen wir 0,3 draus. In Ordnung, das war's vorerst mit dem Video. Es ist an der Zeit, weiterzumachen und die Videosteuerung anzupassen. Zuallererst werde ich mich um ihre Position kümmern. Wählen wir die Wrapper-Div-Elemente aus. Definiert zunächst , welche es zu 100% machen. Setzen Sie dann die Position auf absolut und definieren Sie dann die untere Eigenschaft, machen Sie sie auf Null. Außerdem werde ich die Hintergrundfarbe ändern. Verwenden wir wieder den RGBA-Wert mit einer schwarzen Farbe und einer Opazität Okay, der Wrapper der Steuerelemente ist also maßgeschneidert. Als nächstes kümmern wir uns um den Button. Danach passen wir die Leiste für die Videodauer an. Lassen Sie uns die schnelle Entwicklung auswählen und darin etwas Platz schaffen. Ich werde mit Polsterung Platz schaffen. Stellen wir es oben auf zwei Rem und dann auf ein RAM ein. Dreimal. Danach werde ich das Muster selbst beenden. Ich werde Standard, Hintergrund und Rahmen loswerden. Lassen Sie uns beide auf Null setzen. Und ändern Sie auch den Typ des gröberen, machen Sie ihn zum Zeiger. Gleich danach passen wir das Symbol selbst an. Ich werde die Schriftgröße erhöhen. Machen wir 2,8 RAM draus und ändern dann die Farbe. Mach es weiß. Okay, der Button ist personalisiert, er sieht gut aus. Und jetzt kümmere ich mich um die Videoleiste. Wählen wir das Video über den Wrapper aus , der eine Art Hintergrund für die Videoleiste sein wird Hintergrund für die Videoleiste Also werde ich seine Breite definieren. Machen wir es zu 100 Prozent. Stellen Sie dann die Höhe ein , zwei 0,7-Lauf und ändern Sie dann die Hintergrundfarbe, sodass Schwarz entsteht. Danach kümmere ich mich um seine Position. Setzen wir die Position auf absolut. Und dann finden wir die oberen und linken Eigenschaften. Ich setze beide auf Null. In Ordnung, das war's mit dem Hintergrund. Jetzt werde ich die Bar selbst stylen. Lassen Sie uns die Höhe auf 100% setzen. Standardmäßig ist die Breite der Videoleiste Null, und dann sorgen wir dafür, dass sie mit JavaScript funktioniert. Aber jetzt werde ich es etwas breiter machen, sagen wir mal 20 Prozent. Und ändere auch die Hintergrundfarbe. Mach es D3, 0819. In Ordnung, die Videoleiste ist also angepasst. Bevor wir es zum Laufen bringen, beginne ich unten mit dem ersten Absatz. Stellen wir also die Schriftgröße auf RAM ein und ändern auch die Farbe. Verwende deine Farbe D, D, D. Als Nächstes erstelle ich die Ränder oben und unten. Verwenden wir also border top, setzen ihn auf 0,3, führen doppelt aus und geben die Farbe AAA an. Dann werde ich diese Codezeile duplizieren. Lassen Sie uns von oben nach unten wechseln. Danach werde ich mithilfe von Padding Platz innerhalb des Absatzes schaffen mithilfe von Padding Platz innerhalb des Absatzes Stellen wir es auf allen vier Seiten auf zwei RAM ein. Okay, danach werde ich die Anführungszeichen und den Text mit Flexbox ausrichten Anführungszeichen und den Text mit Flexbox Ich möchte sie vertikal in der Mitte platzieren. Stellen wir also das Display auf Flex ein. Dann verwende ich Flex Direction. Machen wir daraus eine Kolumne. Um Elemente vertikal und horizontal zu zentrieren, müssen wir Justify-Content Center verwenden und die Elemente zentriert ausrichten Wie Sie sehen können, sind die Elemente aufeinander abgestimmt. Als Nächstes begründe ich den Text des Absatzes. Verwenden wir also Texte, die auf den Wert justify ausgerichtet sind. Und lassen Sie uns auch einen kleinen Schatteneffekt erstellen, indem wir einen Textschatten mit Werten verwenden , bei denen einer zweimal ausgeführt wurde als bei einem Lauf. Und der RGBA-Wert mit der schwarzen Farbe und mit der Opazität 0,7 In Ordnung, jetzt ist es an der Zeit , sich um die Codes zu kümmern. Ich werde den ersten auf der linken Seite platzieren. Was den zweiten betrifft, wird auf der rechten Seite platziert. Wählen wir also das linke Zitat aus. Um es auf der linken Seite zu platzieren, müssen wir align self mit einem Wert von flex start verwenden. Außerdem füge ich hier die Schriftgröße fünf rem und schaffe auch etwas Platz am unteren Rand. Lassen Sie uns die Marge auf den unteren Rand setzen, um zu beginnen. Ordnung, lassen Sie uns weitermachen und uns um das zweite Element kümmern Ich meine, schreibe Code. In diesem Fall müssen wir uns selbst so ausrichten, dass es flexibel ist, und dann die Schriftgröße erhöhen, sodass es fünfmal läuft. Die Anführungszeichen sind also angepasst und der Absatz sieht insgesamt gut aus. Schließlich werde ich die Zeilenhöhe leicht verringern. Setzen wir es also auf 1,5. Ordnung, der Absatz auch, wir sind fertig. Es ist maßgeschneidert. Und jetzt kümmere ich mich um das Video. Ich meine, ich werde dafür sorgen, dass es mit JavaScript funktioniert. 26. Projekt 3 - Benutzerdefinierte Videosteuerungen funktionieren lassen: Ordnung, wir haben den Abschnitt Über uns angepasst und jetzt werde ich dafür sorgen, dass das Video funktioniert Dieser Teil wird mit Hilfe von JavaScript erstellt. Vorher werde ich ein paar Dinge in CSS machen. Ich möchte die Bedienelemente etwas nach unten bewegen und sie auch teilweise ausblenden. Sobald wir den Mauszeiger über das Video bewegen, werden die Steuerelemente angezeigt Um die Steuerelemente zu verschieben, verwende ich die Funktion Transformieren mit Translate. In diesem Fall benötigen wir die Y-Richtung. Also wie gesagt, ich werde die Steuerung teilweise ausblenden. Wir müssen das Element also nicht um 100% verschieben . Um das zu erreichen, verwende ich die Calc-Funktion Ich subtrahiere den Punkt für RAM auf 100%. In diesem Fall wird also nur ein kleiner Teil der Steuerelemente sichtbar sein. wir also davon aus, dass die Steuerelemente platziert sind und um sie auszublenden, Gehen wir also davon aus, dass die Steuerelemente platziert sind und um sie auszublenden, verwende ich Overflow Hidden In Ordnung, die Bedienelemente sind also versteckt. Als Nächstes zeige ich sie an, sobald wir den Mauszeiger über das Video Wählen wir also Video Wrapper mit der Maus aus, gefolgt von den Und ich setze transform translate y auf Null. Lassen Sie uns außerdem Transition verwenden. Wir müssen 0,4 s transformieren. Okay? Der Hover-Effekt funktioniert also einwandfrei. Als Nächstes werde ich dafür sorgen, dass die Kontrollen funktionieren. Gehen wir zur JavaScript-Datei. Lassen Sie uns zunächst Ihren neuen Kommentarbereich in ein Video integrieren. Dann Ende des Videos aus Abschnitt zwei. Dann erstelle ich ein paar verschiedene Variablen, um mehrere Elemente auszuwählen. Das erste wird das Video sein. Erstellen wir also eine neue Variable und wählen das Video mithilfe der Abfrageauswahlmethode Der nächste wird Button sein. Erstellen wir also eine neue Variable, btn, und wählen wir Hi Elements Wählen wir es mit der Methode querySelector aus. Und ich werde auch eine Videoleiste auswählen. Wir werden uns etwas später darum kümmern . Aber wie dem auch sei, lassen Sie uns es auch auswählen. Lassen Sie uns eine neue Variable erstellen, ich nenne sie Bar, und wählen Sie dann Elemente aus, und wählen Sie dann Elemente aus erneut die Abfrageauswahlmethode verwenden In Ordnung, also sind alle benötigten Elemente ausgewählt. Als Nächstes erstelle ich eine Funktion, in der wir programmieren, ob das Video abgespielt oder angehalten werden soll. Und wir werden diese Funktion ausführen sobald wir auf die Schaltflächen klicken. Lassen Sie uns also eine neue Funktion erstellen. Ich nenne es Play-Pose. Wenn wir also auf die Play-Schaltfläche klicken, müssen wir sie auf die Pause-Schaltfläche umschalten. Und wir müssen das Video auch abspielen. Um das Video abzuspielen, können wir eine der integrierten Methoden namens Play verwenden. Wir brauchen also Video Dot Play. Um die Ergebnisse zu sehen, müssen wir diese Funktion aufrufen, aber wir müssen sie aufrufen, sobald wir auf das Symbol klicken. Also werde ich mit einem Klick-Event einen Event-Listener an die Schaltfläche anhängen mit einem Klick-Event einen Event-Listener an die Schaltfläche Außerdem müssen wir hier die Pfeilfunktion übergeben, die ausgeführt wird, sobald wir auf die Schaltfläche klicken. Jetzt müssen wir die Funktion Playbooks aufrufen. Wenn wir also auf die Schaltfläche klicken, wird das Video abgespielt. Im Moment ändert sich der Button nicht. Also lassen Sie uns weitermachen und uns darum kümmern. Wie Sie wissen, wird die Schaltfläche durch ein Font Awesome-Symbol dargestellt. Sobald wir darauf klicken, müssen wir den Klassennamen ändern , damit er sich in die Pause-Schaltfläche verwandelt. Ich werde den Klassennamen der Schaltfläche ändern eine der Eigenschaften verwende, die als Klassenname bezeichnet wird. Wir brauchen einen Btn-Punkt-Klassennamen. Und wir müssen hier die Klassen FAR, FAA, Pose, Circle bestehen FAR, FAA, Pose, Circle Wenn ich jetzt auf die Schaltfläche klicke, wechselt sie zur Pause-Schaltfläche und das Video wird abgespielt. Aber beim nächsten Klick passiert nichts. Sobald wir also auf die Pause-Schaltfläche klicken, müssen wir das Video pausieren. Und außerdem müssen wir den Knopf wieder auf die Platte schalten. Wir müssen also eine If-else-Anweisung verwenden , in der wir definieren müssen, ob das Video pausiert ist oder nicht, dann müssen wir die Klassennamen der Icons entsprechend festlegen , um zu überprüfen, ob das Video angehalten ist oder nicht Ich verwende eine der Wir brauchen also Video Dot Post als Bedingung. Wenn es also wahr ist, bedeutet dies, dass das Video nicht abgespielt wird und das Abspielsymbol angezeigt wird. Also müssen wir das Video abspielen und das Symbol auf die Pause-Schaltfläche umschalten. Wir müssen diese Linien einführen. Wenn diese Bedingung falsch ist, bedeutet dies, dass das Video abgespielt wird. Also mussten wir es posieren und wir mussten das Icon auf das Theaterstück umstellen. Aber lassen Sie uns eine else-Anweisung erstellen Kopieren Sie dann diese beiden Zeilen und fügen Sie sie in die else-Anweisung ein. Also statt des Methodenspiels brauchen wir Pose. Und außerdem müssen wir den Klassennamen ändern , statt die Beiträge, wir brauchen Lehm. Wenn ich jetzt auf die Schaltfläche Abspielen klicke, wird das Video abgespielt und die Schaltfläche ändert sich. Und beim nächsten Klick wird das Video angehalten und das Symbol wechselt zurück zur Play-Schaltfläche. Bisher funktioniert also alles einwandfrei. Als Nächstes ändere ich die Opazität des Videos je nachdem, ob es abgespielt wird oder nicht Wenn es Post ist, werden wir die Opazität unverändert lassen. Aber wenn es läuft, werden wir es erhöhen. Im Moment ist die Opazität auf 0,3 eingestellt. Also müssen wir es in den If-Statements erhöhen weil wir hier sagen , dass wir das Video abspielen müssen. Die Opazität der Punkte im Videopunktstil entspricht, sagen wir, 0,7 Und dann müssen wir in der else-Anweisung die Opazität auf 0,3 setzen, weil wir das Video pausieren Also werde ich mir diese Codezeile schnappen. Fügen wir es hier ein und ändern Sie die Opazität. Wir brauchen 0,3. Wie Sie sehen können, war alles in Ordnung. Das einzige, was wir tun müssen, ist, den Effekt mithilfe von Transition glatter zu machen . Verwenden wir den Übergang mit einer Opazität von 0,3 s. In Ordnung, jetzt haben wir ein viel besseres Ergebnis Jetzt ist es an der Zeit, sich um die Videoleiste zu kümmern. Im Moment hat es eine feste Breite. Setzen wir es also zunächst auf Null. Wir müssen also die Breite der Videoleiste entsprechend der Aktualisierung der Videodauer erhöhen . Ich werde eines der DOM-Ereignisse namens Time Update verwenden . Dieses Ereignis tritt ein, sobald das Video oder Audio abgespielt wird. Fügen wir also dem Video- und Event-Listener eine Zeitaktualisierung Ereignisse. Geben Sie hier auch die Pfeilfunktion ein. Bei jeder Aktualisierung der Uhrzeit des Videos. Diese Funktion wird ausgeführt. Okay, jetzt müssen wir die Breite der Videoleiste definieren die Breite der Videoleiste Dafür werde ich zwei verschiedene Eigenschaften verwenden. Sie sind aktuell, Uhrzeit und Dauer. Zuerst zeige ich sie dir in der Konsole. Lass uns die Konsole durchgehen. Videopunkte, aktuelle Uhrzeit und Dauer der Videopunkte. Lassen Sie uns die Seite überprüfen und zum Konsolen-Tab wechseln. Sobald ich also auf die Schaltfläche Abspielen klicke, erhalten wir die aktuell abgespielte Zeit und auch die Dauer des Videos. Um die Breite der Videoleiste zu definieren, müssen wir die aktuelle Zeit des Videos durch die Dauer dividieren . Und wir müssen diesen Betrag in Prozent ausdrücken. Erstellen wir also eine neue Variable, ich nenne sie Bar. Die Breite entspricht den Zweifeln des Videos, aktuellen Zeit geteilt durch die Dauer des Videopunkts. Jetzt müssen wir diesen Betrag mit 200 multiplizieren und ihn in Prozent ausdrücken. Das Ergebnis dieser Berechnung ist die Breite des Balkens. Geben wir also Ihre Punktbreite im Balkenpunktstil ein, die der Balkenbreite multipliziert mit 100 entspricht, gefolgt vom Prozentzeichen Okay, wenn wir jetzt das Video abspielen, wird die Videoleiste geladen. Moment funktioniert also alles einwandfrei Im Moment funktioniert also alles einwandfrei, der Ladeeffekt sieht nicht ganz glatt aus. Wir müssen den Übergang nutzen. Lassen Sie uns hier also die Breite als die Dauer 0,2 s angeben. Und außerdem werde ich den Übergang linear machen. Okay? Jetzt haben wir bessere Ergebnisse. Eigentlich sind wir mit diesem Abschnitt fast fertig. Wir müssen dem Video nur ein paar Dinge hinzufügen. Sobald es gespielt ist. Ich meine, sobald es beendet ist, möchte ich das Symbol wieder in den Play-Button ändern. Außerdem werde ich die Opazität verringern um herauszufinden, ob das Video beendet ist oder nicht. Ich werde eine der Eigenschaften verwenden, die als beendete Zelle bezeichnet Lassen Sie uns eine If-Aussage erstellen, in der wir überprüfen müssen, ob das Video beendet ist oder nicht. Also als Voraussetzung, die wir hier brauchen, Video Dot Android. Wenn diese Bedingung also zutrifft, müssen wir das Symbol ändern. Wir brauchen einen Btn-Punkt-Klassennamen. Es wird bei weitem ein Spielkreis sein. Und wir müssen auch die Opazität verringern. Wir benötigen eine Punktopazität im Videopunktstil, 0,3. Wenn ich also das Video abspiele und warte, bis es soweit ist, wirst du sehen dass das Symbol geändert wird und auch die Opazität verringert wird Ordnung, endlich haben wir die Arbeit am zweiten Abschnitt abgeschlossen Gehen wir zum nächsten über. 27. Projekt 3 - Preiskarten erstellen und anpassen: Okay, wir haben die Arbeit am zweiten Abschnitt abgeschlossen, der ein Abschnitt über uns war. Und jetzt müssen wir weitermachen und mit dem Bau des nächsten beginnen. Der nächste Abschnitt wird der Abschnitt mit den Preisen sein. Erinnern wir uns, wie dieser Abschnitt aussieht. Wir haben hier also eine Überschrift und für verschiedene Preiskarten mit unterschiedlichen Preisangeboten konnten wir sie mit der Maus ziehen, um diesen Effekt mit einem der JavaScript-Plugins namens Swipe oder JS zu erzeugen der JavaScript-Plugins namens Swipe oder JS Zuallererst wollte ich die Karten erstellen und anpassen. Und dann werden wir das Plugin verwenden und es zum Laufen bringen. Lassen Sie uns weitermachen und mit der Erstellung des HTML-Markups beginnen . Ich werde neue Kommentare einfügen, Abschnitt drei. Und Abschnitt drei. Öffnen Sie dann das Abschnittselement mit der Klasse Abschnitt drei. Wie gesagt, dieser Abschnitt wird aus der Überschrift und der Preisgestaltung für Autos bestehen . Die Überschrift mit ihrer Zeile wird der Überschrift ähneln , die wir im vorherigen Abschnitt erstellt haben. Und es wird auch der Überschrift des nächsten Abschnitts ähnlich sein. Also öffne ich das H1-Überschrift-Tag und weisen wir ihm einen ähnlichen Klassennamen zu , eine Abschnittsüberschrift Was den Inhalt angeht, werde ich Ihre Preisgestaltung weitergeben und dann ein Div-Tag mit der Überschrift des Klassenabschnitts öffnen . Wie Sie sehen können, die Überschrift alle bereits einige Stile. In Ordnung, lass uns weitermachen und die Karten erstellen. Öffnen wir ein div-Tag, das die Hülle der Karten sein wird Ich werde es der Klasse Pricing Card Wrapper zuweisen. Dann brauchen wir ein weiteres div-Tag für den Aufruf selbst. Jedes Auto wird also aus einer Vorderseite und einer Rückseite bestehen. Öffnen wir das Div-Tag, das die Vorderseite sein wird, die der Vorderseite der Cluster-Preiskarte zugewiesen ist . Die Vorderseite wird aus verschiedenen Elementen bestehen . Wird zwei Überschriften für den Namen des Autors und den Preis Dann folgt die Liste, in der Sie einige Angebotsartikel mit den Symbolen Font, Awesome finden . Und schließlich werden wir einen Knopf haben. Was die Rückseite angeht, werden wir nur ein einziges Link-Element haben. In Ordnung, lassen Sie uns weitermachen und all diese Elemente hier einfügen all diese Elemente hier Ich fange mit den Überschriften an. Öffnen wir die H1-Überschrift, das Tag und die Überschrift der Klassenpreiskarte Das wird der gebräuchliche Klassenname sein , aber darüber hinaus werde ich ihm eine weitere Klasse hinzufügen einige Personen Kacheln anlegen können In der ersten Kolumne wird es um ein kostenloses Angebot gehen. Also ist ihm eine kostenlose Klassenüberschrift zugewiesen. Okay, als Nächstes benötigen wir ein weiteres Überschriftenelement für den offenen Kurs. H3-Überschrift mit der Klassenpreiskarte, Preis. Und den Preis, ich gebe dir Null ein. Das ist die Silbe der Überschriften. Lassen Sie uns weitermachen und die Liste erstellen. Ich öffne das UL-Etikett mit der Liste der Klassenpreise. Außerdem werde ich eine weitere Klasse für das individuelle Styling verwenden . Geben wir Ihre kleinste freie Zahl ein. Öffnen Sie dann das LI-Tag. Ich bin im Listenpunkt. Jedes Listenelement besteht also aus einem Font Awesome-Symbol und einigen Texten. Öffnen wir I-Tags mit einer Klasse wie FAS, FA, check. Es wird das Häkchen sein. Öffnen Sie dann den Span-Tag. Eigentlich werde ich hier keine verschiedenen Punkte spezifizieren. Fügen wir einfach den Artikel der Preiskarte ein. Sie können sich frei fühlen und verschiedene Artikel verwenden, aber ich werde keine Zeit damit verschwenden. In der ersten Karte werden wir also fünf Listenelemente haben. Lassen Sie uns das LI-Element viermal duplizieren. Das einzige, was ich tun werde, ist, die Font Awesome-Symbole für die letzten drei Elemente zu ändern die Font Awesome-Symbole für die letzten drei Elemente Die ersten beiden Symbole sind Häkchen Was die letzten drei Symbole betrifft, wird auf sie zugegriffen. Wir brauchen also mal FIS. Ordnung, das letzte Element auf der Vorderseite wird also ein Button sein , der der Cluster-Preiskarte zugewiesen ist , übrigens Und außerdem brauchen wir hier noch einen Kurs für individuelle Styles, übrigens kostenlos. Und als Inhalt, den ich hier einfügen werde , wähle Plan. Okay, das war's mit der Vorderseite. Lass uns weitermachen und dich vom Hintern nehmen. Öffnen wir den Div-Tag mit einer Klassenpreiskarte auf der Rückseite. Und auch hier brauchen wir wieder einen freien Kurs. Lassen Sie uns jetzt Ihre Link-Elemente mit der Inhaltsreihenfolge einfügen . Okay? Also hier haben wir die erste Karte. Insgesamt werden wir vier Karten haben, also werde ich den Code dreimal duplizieren. Dann müssen wir einige Änderungen vornehmen Die zweite Karte wird also einfach sein. Dann ändere ich die Klasse der Überschrift , die wir hier brauchen, wird die Überschrift einfach sein. Anderer Preis, sagen wir 299$. Ändere auch die Klasse der Listenelemente, die wir hier benötigen, zumindest basic. Was die Font Awesome Icons betrifft. In diesem Fall werden die ersten vier Elemente Häkchen sein Was den letzten betrifft, sollte es x sein. Lassen Sie uns außerdem die Klasse der Schaltfläche ändern. Wir brauchen hier, btn basic. Und dann brauchen wir dich zurück zur Grundversorgung. In Ordnung, schauen wir uns die zweite Karte an. Gehen wir zur dritten Karte über, die Standard sein wird. Ändere auch die Klasse der Überschrift. Wir brauchen einen Überschriftenstandard. Der Preis wird 699$ betragen. Ändern Sie dann die Klasse der UL-Elemente. Wir brauchen mindestens Standard. In diesem Fall haben wir also alle Elemente mit einem Häkchensymbol Als Nächstes ändere ich die Klassen für den Button und für die Rückseite In beiden Fällen brauchen wir Standards. Okay, gehen wir zum letzten Akkord über. Es wird Premium sein. Ändert die Klasse der Überschrift. Wir brauchen die Überschrift Premium und haben auch die Preisgestaltung geändert. Wir brauchen hier 999$. Dann brauchen wir hier mindestens Premium. Im Falle eines Premium-Angebots werden wir also sechs Artikel haben. Lassen Sie uns also die Wünsche des LI-Elements duplizieren. Markieren Sie alle Symbole. Als Nächstes ändern wir die Klassen von Bateson und Backside Wir brauchen Premium. In Ordnung, das war's mit dem HTML-Markup, alle Elemente sind erstellt und jetzt können wir mit dem Styling beginnen Fügen wir neue Kommentare in die CSS-Datei für Abschnitt drei ein. Wählen Sie dann ein Abschnittselement aus. Definieren Sie zunächst innerhalb der Höhe und ich setze die Breite auf 100%. Was die Höhe angeht, so wird sie 100 Prozent des Viewports ausmachen Und ändere auch die Hintergrundfarbe. Also werde ich Farbe 0, 3o7oe verwenden. Okay, als Nächstes richte ich die Elemente mit Flexbox horizontal in einer Reihe Stellen wir das Display auf Flex ein. Und platzieren Sie die Elemente auch vertikal in der Mitte. Dafür müssen wir die Artikel in der Mitte ausrichten. Und zum Schluss werde ich auf der linken Seite innerhalb dieses Abschnitts etwas Platz schaffen . Lassen Sie uns das Auffüllen nach links mit dem Wert Tan-Ramp verwenden Okay, wie wir bereits gesagt haben, wir müssen die Überschrift und die Zeile nicht berühren. Das sind all diese Tabs. Das einzige, was ich tun werde, ist, den CSS-Code beider Elemente zu den CSS-Code beider übernehmen und ihn in die gängigen Stile einzufügen. Okay, als Nächstes wähle ich den Courts Wrapper aus. Ich werde die Karten horizontal nebeneinander platzieren. Definieren wir zunächst die Breite des Wrappers. Ich werde es zu 100% schaffen. Stellen Sie dann das Display auf flexibel ein und schaffen Sie außerdem Platz zwischen den Karten, indem Sie den Inhaltsbereich gleichmäßig ausrichten. Okay, wie ihr sehen könnt, sind die Karten ausgerichtet und jetzt fange ich an, sie zu stylen. Wählen wir die Karte aus und definieren sie ihre Breite und Höhe. Ich setze die Breite auf 28 RAM. Da es ziemlich hoch ist, werden es 45 RAM sein. Und ändere auch die Hintergrundfarbe. Ich werde hier Farbe 181, B1 verwenden. Okay, jetzt sind die Karten also alle schon ganz gut sichtbar Als Nächstes werde ich sie abgerundet machen und ihnen auch einen Schatteneffekt hinzufügen. Setzen wir den Radius also auf ein RAM. Und dann verwende Box-Shadow mit Werten für RAM, zweimal als sechs RAM Und als Farbe verwenden wir RGBA mit einer schwarzen Farbe und einer Opazität Okay, das war's mit der Karte. Als Nächstes kümmere ich mich um die Vorderseite. Wählen wir es also aus und definieren es innerhalb der Höhe. Ich mache beide zu 100% Als Nächstes richte ich die Elemente wieder mit Flexbox Stellen wir das Display auf Flex ein. Um die Elemente vertikal in einer Spalte zu platzieren, müssen wir die Biegerichtung als Spalte angeben. Dann platziere ich sie horizontal in der Mitte. Dazu verwenden wir die Option „Elemente mittig ausrichten und schließlich mithilfe von „Inhalt ausrichten“ etwas Abstand zwischen ihnen schaffen . Abstand dazwischen. Okay, das war's mit der Vorderseite. Als Nächstes nehme ich hier die Überschrift. Ich bin im ersten Überschriftenelement des Autos. Wählen wir es aus. Lassen Sie uns zunächst die Schriftgröße definieren und sie zum Laufen bringen. Dann mache ich die Schrift heller. Lassen Sie uns die Schrift auf 300 setzen. Und ändere auch die Farbe, mach es weiß. Okay, als Nächstes definiere ich die Breite und Höhe der Überschrift. Und ich werde auch die Position der Texte leicht ändern . Lassen Sie uns also mit 200 Prozent beginnen. Was die Höhe angeht, machen wir fünf Ram daraus. Als Nächstes möchte ich den Text mit Flexbox vertikal in der Mitte platzieren mit Flexbox vertikal in der Mitte Also stelle ich die Anzeige auf Flex ein und richte die Elemente dann in der Mitte aus. Lassen Sie uns abschließend mithilfe von Padding etwas Platz auf der linken Seite des Textes schaffen mithilfe von Padding etwas Platz auf der linken Seite des Textes Polsterung links. Lassen Sie es laufen. Okay, jetzt ist es an der Zeit, den Überschriftenelementen die Hintergrundfarbe hinzuzufügen . Wie Sie sich erinnern, haben sie unterschiedliche Hintergrundfarben. Ich habe ihnen einen individuellen Klassennamen zugewiesen. Also lasst uns weitermachen und sie separat auswählen und die Hintergrundfarben definieren. Ich beginne mit Überschrift drei. Die Hintergrundfarbe wird also einen gewissen Farbverlauf haben. Verwenden wir den linearen Gradienten. Die Richtung des Übergangs wird von links nach rechts sein. Was die Anrufer angeht, verwenden wir hier 087285. Und wir brauchen auch ODA fünf, D3. Die erste Überschrift hat die Hintergrundfarbe. Aber im Moment haben wir hier ein kleines Problem. In der oberen linken und oberen rechten Ecke. Wir haben den Grenzradius nicht mehr. Also lasst uns weitermachen und das beheben. Ich werde Border-Radius verwenden. Lassen Sie uns die folgenden Werte für Sie verwenden. Wir brauchen 1 g zweimal, ich meine, ein RAM als Wert der oberen linken, oberen rechten Ecke Was die übrigen Werte betrifft, so sollte dieser Null sein. In Ordnung, jetzt ist das Problem behoben. Lassen Sie uns weitermachen und die Hintergrundfarben für die restlichen Überschriften ändern die Hintergrundfarben für die restlichen Überschriften Ich werde diesen Code dreimal duplizieren und dann einige Änderungen vornehmen. Die zweite Überschrift wird einfach sein. Und als Farben verwenden wir 946809. Dann wird der nächste Bd, be AOE sein. Dann haben wir Standard. Was die Farben angeht, das werden 1014 sein. Dann haben wir a0 bis a3. Sei Werbegeschenk. Für die letzte Überschrift wird es Premium mit den folgenden Farben geben. 0748 und dann drei be286. In Ordnung? Alle Überschriftenelemente haben also die richtigen Hintergrundfarben. Und eigentlich sind wir mit den ersten Überschriften fertig. Lass uns weitermachen und uns um den Preis kümmern. Wählen wir den Preis der Preiskarte aus. Zuallererst werde ich die Schriftfamilie definieren. Lassen Sie uns Ihre Telefonanrufe verwenden, die so serifenrein sind, als die Schriftgröße zu erhöhen, sieben RAM draus serifenrein sind, als die Schriftgröße zu erhöhen, zu machen Machen Sie die Schrift heller. Setzen wir es auf 300. Und dann ändere die Farbe, mache es weiß. In Ordnung, der Preis sieht also gut aus. Als nächstes müssen wir uns um die Listenpunkte kümmern 28. Projekt 3 - Preiskarten mit Swiper funktionieren lassen: Ordnung, lassen Sie uns weitermachen und die restlichen Elemente der Karte anpassen Als nächstes haben wir die Liste, die aus der Schrift, den Awesome-Symbolen und einigen Textwerten besteht . Lassen Sie uns zunächst die Insel auswählen und ihre Schriftgröße auf 1,8 erhöhen. Lauf. Schauen wir uns als Nächstes die Span-Elemente an. Wählen wir sie aus. Ich definiere die Schriftgröße und mache es auf 1,8 RAM. Stellen Sie dann die Schriftstärke auf 300 ein. Und schaffen Sie auch etwas Abstand zwischen den Buchstaben. Mach 0,1 Rem draus. In Ordnung. Jetzt werde ich den gleichen Abstand zwischen den Symbolen und den Textelementen erstellen . Definieren wir dazu die Breite der I-Elemente. Ich mache drei Rampen draus. Okay, jetzt ist es an der Zeit, die Farben der Listenelemente zu ändern. schätze, ich werde für jede Liste eine andere Farbe definieren . Moment hat jedes Listenelement den individuellen Klassennamen. Lassen Sie uns also weitermachen und die Listenelemente separat auswählen. Wir brauchen mindestens drei, gefolgt vom LI-Element. In diesem Fall ändern wir die Farbe für beide Elemente. Ich bin im Font Awesome-Symbol und auch im Span-Element. Setzen wir die Farbe auf Null, d Phi d drei. Lassen Sie uns diesen Code dreimal duplizieren und dann die Klassennamen und die Anrufer ändern Wir brauchen also am wenigsten Grundlegendes. Und die Farbe wird BD BA II sein. Dann haben wir einen Listenstandard. Und die Farbe wird a0 bis a3 sein. Sei Werbegeschenk. Schließlich brauchen wir mindestens Premium mit der Farbe 3286. In Ordnung, die Listenelemente sehen also gut aus. Das einzige, was ich tun werde, ist, den Abstand zwischen ihnen leicht zu vergrößern. Wählen wir also LI-Elemente und legen Sie die Margin-Boost-Rampe von 2,5 fest. Okay, das war's mit der Liste, sie sehen gut aus. Und jetzt müssen wir zum nächsten Element übergehen, und das wird ein Batson sein Wählen wir es also aus. Zunächst definiere ich seine Breite und Höhe. Fangen wir mit 218 RAM an. Was die Höhe angeht, lassen Sie uns fünf RAM daraus machen. Dann schaffen Sie unten etwas Platz , indem Sie Margin Bottom mit dem Wert drei Ran verwenden. Okay, lassen Sie uns weitermachen und der Schaltfläche einige andere Stile hinzufügen . Lassen Sie uns es mit einem Randradius mit einem RAM-Wert von drei abgerundet Randradius mit einem RAM-Wert von drei Ich werde auch den Standardrand loswerden. Setzen wir es auf „Null“. Erhöhen Sie dann die Schriftgröße des Textes. Machen wir es zu 1,6 RAM und machen es auch in Großbuchstaben In Ordnung, die Knöpfe sehen also nett aus. Jetzt müssen wir, wie bei anderen Elementen, verschiedene Hintergrundfarben für die Schaltflächen definieren . Sie haben auch die einzelnen Klassennamen. Lassen Sie uns also weitermachen und sie separat auswählen. Ich fange mit einer kostenlosen BTN an. Setzen wir die Farbe auf Null, DA fünf, D3. Die Hintergrundfarbe der ersten Schaltfläche wird geändert. Eigentlich müssen wir die Farbe des Textes ändern. Und ich werde noch einen kleinen Schatteneffekt hinzufügen. Lassen Sie uns die Farbe auf Weiß setzen. Verwenden Sie dann Textschatten mit einem Wert von 0,3. Lauf zweimal, dann brauchen wir 0,6 RAM. Und der RGBA-Wert mit der schwarzen Farbe und mit der Opazität 0,5 Okay, jetzt haben wir ein viel besseres Ergebnis. Lassen Sie uns weitermachen und die Hintergrundfarben für die restlichen Schaltflächen ändern . Ich werde diesen Code dreimal duplizieren und dann die Klassennamen und die Farben ändern. Der zweite Button wird BTN Basic sein. Eigentlich benötigen wir die gleichen Farben , die wir für die Liste verwendet haben. Also werde ich sie von hier aus holen. Die nächste Schaltfläche wird Standard sein. Kopieren wir die Farbe. Und der letzte wird mit dieser Farbe ziemlich hochwertig sein mit dieser Farbe ziemlich hochwertig Okay, das gesagt mit den Knöpfen und eigentlich mit der Vorderseite der Karte sind wir fertig Als Nächstes werde ich die Rückseite anpassen. Und danach verwenden wir das JavaScript-Plugin namens swipe oder dot js Zunächst drehe ich die Karte um 180 Grad Zeigen Sie die Rückseite der Karte an. Wir müssen also in Y-Richtung drehen und hier den Wert unendlich haben, also 180 Grad. Als Nächstes wähle ich die Rückseite aus. Lassen Sie uns zunächst diese Position definieren. Ich setze es auf absolut. Definieren Sie dann die Eigenschaften oben und links. Ich setze beide auf Null. Um dann die Rückseite auf die gesamte Karte auszudehnen, müssen wir Breite und Höhe festlegen, beide auf 200 Prozent Und dann verwende eine temporäre Hintergrundfarbe. Stellen wir es auf weiß. Also hier haben wir die Rückseite. Ich werde den Inhalt mit Flexbox in der Mitte platzieren mit Flexbox in der Mitte Wie Sie wissen, müssen wir Display Flex verwenden, gefolgt von Justify-Content Center und Alignment Items Center und Alignment Wie Sie sehen können, wird das Link-Element in der entgegengesetzten Richtung angezeigt. Also müssen wir es drehen. Verwenden wir Transform, Rotate Y als Wert abzüglich Institute 180 Grad. Und außerdem werde ich die Rückseite abgerundet machen. Wir benötigen einen Grenzradius mit dem Wert eins ist abgelaufen. In Ordnung, jetzt ist es an der Zeit, das Link-Element anzupassen. Aber bevor wir das tun, werde ich die Hintergrundfarben ändern. Alle vier Karten sollten die unterschiedlichen Hintergrundfarben haben . Sie werden der Hintergrundfarbe ähneln, die wir für die ersten Überschriftenelemente der Karte verwendet haben . Wählen wir also Bug-Free und holen uns dann die Hintergrundfarbe aus dem Überschriftenelement Lassen Sie uns diesen Code dreimal duplizieren. Wir müssen die Klassennamen ändern. Der zweite wird wieder in den Grundzustand zurückkehren. Dann geh wieder hoch und nimm die Hintergrundfarbe. Als nächstes werden wir Standard haben. Und schließlich müssen wir die Prämie unterstützen. Und ich werde auch die temporäre weiße Hintergrundfarbe loswerden . Okay, es kann also sein alle Rückseiten der Karten eine unterschiedliche Hintergrundfarbe haben. Abschließend beginne ich mit den Link-Elementen. Wählen wir es aus. Ich werde die Schriftgröße erhöhen. Machen wir 2,5 Reime draus. Und stellen Sie die Farbe auch auf Weiß ein. In Ordnung, die Karten sind also maßgeschneidert. Ich meine beide Seiten, vorne und hinten. Und jetzt ist es an der Zeit, das Java-Plugin namens Swipe oder das JS zu verwenden das Java-Plugin namens Swipe oder das JS Vorher drehe ich die Karten zurück. Lassen Sie uns also von hier aus die Transformation mit der Rotate-Funktion loswerden . Lassen Sie uns weitermachen und die Website besuchen. Ich suche nach Swipe oder Dot JS. Das ist also die Website dieses Plugins. Lassen Sie uns weitermachen und auf die Demos klicken. Hier können wir uns also verschiedene Demoversionen dieses Sliders ansehen verschiedene Demoversionen dieses Sliders Auf der linken Seite der Webseite haben wir eine Seitenleiste, in der Sie viele verschiedene Versionen dieses Sliders finden Ich werde keine Zeit damit verschwenden. Sie können sich frei fühlen und sie ausprobieren. Ich werde einen Schieberegler namens 3D-Cover-Flow-Effekt verwenden . Also hier ist es. Um diesen Slider zu verwenden, gibt es verschiedene Möglichkeiten Sie können entweder die Quelldateien herunterladen und mit dem Projekt verknüpfen, oder wir können einfach die CDN-Links verwenden Gehen wir zur ersten Seite. Ich meine, fang an. Also hier haben wir die CDN-Links für CSS und JavaScript. Du findest hier zwei Versionen des Plugins. Die erste ist unregelmäßig. Was die zweite betrifft, so ist es die minimierte Version. Ich hole mir die ersten Links. Also müssen wir den CSS-Link in die Kopfelemente einfügen. Was den JavaScript-Link betrifft, wird unten platziert. Ordnung, als Nächstes kehren wir zu den Demos zurück und klicken Sie hier auf den Quellcode. Wir werden zu einer GitHub-Seite navigieren, auf der Sie den Quellcode für HTML, CSS und JavaScript finden Schauen wir uns den HTML-Code an. Wir haben hier also einen Swipe pro Container und Swipe einen Rapper, gefolgt von diesen Diese Wischbewegungen oder Folien werden unsere Preiskarten sein. Dann wird dieses Y pro Container erstellt. Was den Swipe oder Wrapper angeht, wird es unser Preiskarten-Wrapper sein Lassen Sie uns also weitermachen und dem Preiskarten-Wrapper eine neue Klasse, einen Swipe oder einen Wrapper zuweisen dem Preiskarten-Wrapper eine neue Klasse, einen Swipe oder Erstellen Sie dann außerhalb des Swipe ein neues Div-Element , einen Wrapper Wir benötigen ClassName Swipe pro Container. Lassen Sie uns mit diesem Element, dem gesamten Inhalt, abschließen. Außerdem mussten wir jeder Preiskarte den Klassennamen zuweisen , Swipe Slide Wie Sie sehen, ist hier alles durcheinander , weil hinter den Kulissen und anderer Code vom Plug-in aus funktioniert Was wir diese Dinge in einer Minute reparieren werden. Im Moment sind die Karten zu groß. Die Breite und Höhe gelten für sie nicht mehr entsprechend. Um das zu beheben, werde ich beide Werte addieren. wichtig. Jetzt ist das Problem behoben. Als Nächstes hole ich mir den JavaScript-Code von der GitHub-Seite Gehen wir zur Datei script.js und fügen Sie Ihre neuen Kommentare ein. Abschnitt drei Preiskarten. Teilen Sie drei Preiskarten ab und fügen Sie sie hier ein. Der JavaScript-Code. Eigentlich brauchen wir die Paginierung nicht, also lassen Sie uns diese Eigenschaften von Ihnen loswerden Wie Sie sehen können, funktioniert jetzt alles gut. Bevor wir mit der Arbeit an diesem Abschnitt fertig sind, möchte ich ein paar Dinge erledigen. Wie Sie sehen können, haben wir hier ein Objekt namens Overflow-Effekt Hier gibt es einige verschiedene Eigenschaften. Eines davon ist Rotate. Im Moment ist es auf 50 eingestellt und ich werde a erhöhen. Machen wir sieben draus. Jetzt denke ich, dass wir ein besseres Ergebnis haben. Das Letzte, was ich tun werde, ist, etwas Platz innerhalb des Wrappers zu schaffen etwas Platz innerhalb des Wrappers Lassen Sie uns also weitermachen und das Padding auf fünf Rem einstellen. In Ordnung, das war's also. Schließlich haben wir die Arbeit an diesem Abschnitt abgeschlossen . Lass uns weitermachen. 29. Projekt 3 - Kontaktabschnitt erstellen und stillieren: Ordnung, also Schritt für Schritt gehen wir voran und jetzt ist es an der Zeit, einen der letzten Abschnitte dieses Projekts zu erstellen , der als Kontexte bezeichnet wird Werfen wir einen Blick auf das fertige Projekt. Der Kontaktabschnitt besteht also aus verschiedenen Teilen. Wir haben eine Überschrift auf der linken Seite. der rechten Seite finden Sie hier einige Kontaktdaten und einige Eingabefelder mit einer Schaltfläche zum Senden. Lassen Sie uns weitermachen und mit der Erstellung des HTML-Markups beginnen . Lassen Sie uns wie üblich neue Kommentare für Abschnitt vier einfügen. Öffnen Sie dann den Abschnittsnamen, den Abschnitt Klassenname. Als Nächstes erstelle ich die Überschrift und die Zeile. Öffnen wir also das H1-Überschrift-Tag mit der Überschrift des Klassenabschnitts Und mit dem inhaltlichen Kontakt. Als nächstes brauchen wir die Leitung. Öffnen wir also das Div-Tag mit einer Überschrift für einen Klassenabschnitt. Okay, als Nächstes öffne ich das div-Tag, das der Wrapper des Inhalts sein wird Den Inhalt auf der rechten Seite dieses Abschnitts nenne ich Contact Wrapper Dieses Element wird also aus drei verschiedenen Teilen bestehen, aber wir haben die Kontaktdaten, Überschrift und das Formular selbst. Öffnen wir ein weiteres div-Tag für die Kontaktdaten. Dieses Element wird also Telefonnummern, Adressen und E-Mails mit Font- und Awesome-Symbolen enthalten . Öffnen wir ein Div-Tag mit dem Klassentelefon. Wir werden hier also ein Font Awesome-Symbol haben , das in die Absätze übergeht. Öffnen wir das I-Element mit einer Klasse ist ein s, ein mobiles Alt. Dann öffne ich das h3-Heading-Tag mit dem Inhaltstelefon Erstellen Sie dann einen Absatz mit einer falschen Telefonnummer. Und dann erstelle wieder einen Absatz mit etwas Domino. Danach werden wir Adressen haben. Öffnen wir also das Div-Tag mit einer Klassenadresse. Dann brauchen wir das Font Awesome Icon. Es ist also ein offenes I-Element mit den Klassen FAS, Map, Marker, ALT Als Nächstes benötigen wir das h3-Heading-Tag mit der Inhaltsadresse. Und schließlich erstellen Sie zwei Absätze mit zwei verschiedenen Scheinadressen Okay, der nächste Teil wird also eine E-Mail sein , die ein offenes Div-Tag mit der Klassen-E-Mail enthält. Andererseits brauchen wir IS-Elemente mit der Klasse FAR FA, Umschlag, dann wird die Überschrift E-Mail sein. Lassen Sie uns abschließend zwei Absätze mit zwei verschiedenen E-Mail-Adressen einrichten. Die erste wird supported@gmail.com sein. Und dann nennen wir diese zweite E-Mail-Adresse sales@gmail.com. In Ordnung, das war's mit den Kontaktdaten. Als Nächstes erstelle ich eine Überschrift. Öffnen wir das H1-Überschrift-Tag mit einem Inhalt. Nehmen Sie Kontakt auf. Und jetzt müssen wir den letzten Teil des Vertragsabschnitts erstellen , der deformiert werden soll Öffnen wir das Formular-Tag zusammen mit dem Kontakt-Formular für die Klasse. Also füge ich Sie in die Eingabeelemente, den Textbereich und die Schaltfläche „ Senden“ ein. Lassen Sie uns das Eingabe-Tag öffnen, indem Sie Text mit dem Platzhalterattribut eingeben Geben wir deinen Namen ein. Dann duplizieren Sie diese Codezeile und ändern Sie den Typ. Es wird E-Mail sein. Was den Wert des Platzhalter-Attributs angeht, so wird es Ihre E-Mail-Adresse sein Als Nächstes benötigen wir den Textbereich, das Platzhalter-Attribut haben wird, der Ihre Nachricht wertschätzen würde Schließlich benötigen wir die Schaltfläche Senden. Es wird mithilfe von Eingaben erstellt. Element. Der Typ wird eingereicht. Und wir müssen auch die gesendete Nachricht wertschätzen. Okay, hier haben wir also das HTML-Markup, Überschrift und die Zeile sind alle schon Was die restlichen Elemente angeht, sehen sie wirklich hässlich aus. Also lassen Sie uns weitermachen und uns darum kümmern. Ich füge neue Kommentare in die CSS-Datei ein, Abschnitt vier. Und aus Abschnitt vier. Wählen Sie dann diese Abschnittselemente aus und definieren Sie deren Breite, Höhe und auch die Hintergrundfarbe. Die Breite wird 100 Prozent betragen. Dann brauchen wir die Höhe, die 100% des Viewports beträgt, wahrscheinlich als Hintergrundfarbe Lass uns deine Farbe 171718 verwenden. Es wird das Dunkelgrau sein. Okay, als Nächstes richte ich die Elemente horizontal in einer Reihe aus, und ich möchte sie auch vertikal in der Mitte platzieren. Dafür. Wie immer werde ich Flexbox verwenden. Stellen wir das Display auf Flex Dann müssen wir die Elemente in der Mitte ausrichten. Und außerdem werde ich anstelle dieses Abschnitts auf der linken und rechten Seite etwas Platz schaffen dieses Abschnitts auf der linken und rechten Seite Verwenden wir Padding mit einem Wert von Null und drehen Okay, lass uns weitermachen und uns um den Kontakt-Rapper kümmern. Sie besteht aus drei Teilen. Wir haben Kontaktdaten, Überschrift und Formular. Ich werde sie mit Flexbox ausrichten. Wählen wir also das Wrapper-Div-Element aus. Ich habe Kontakt zum Rapper. Zunächst setze ich die Breite auf 80 Prozent. Dann benutze Flexbox. Wir brauchen Display Flex. Dann müssen wir die Elemente vertikal in Spalten platzieren , sodass wir die Richtung ändern müssen, in der die Spalte erstellt wurde. Und verwenden Sie dann die Option „Elemente in der Mitte ausrichten“. Okay, im Moment sind alle drei Teile aufeinander abgestimmt. Als Nächstes werde ich mich um jeden von ihnen kümmern. Fangen wir mit den Kontaktdaten an, wie dem Wrapper. Also werde ich alle drei Teile horizontal in einer Reihe platzieren . Stellen wir also die Anzeige auf Flex ein und schaffen dann unten etwas Platz, indem wir den Rand Bottom Eight Ran verwenden . Eigentlich haben wir hier nicht das Symbol für die Adresse. Lass uns den Code überprüfen. Wie Sie sehen, müssen wir das Armaturenbrett von hier aus loswerden. Ordnung, danach werde ich die Einzelheiten trennen Wählen wir also div-Elemente aus. Stellen Sie die Breite auf 25 RAM ein. Dann platziere ich den Text in der Mitte und erstelle diesen Raum um die Elemente mithilfe von Rändern. Stellen wir es zur Miete ein. Okay, also jedes div-Element besteht aus einer Font Awesome-Symbolüberschrift und leeren Absätzen. Lassen Sie uns weitermachen und sie anpassen. Ich fange mit den Icons an. Wählen wir I-Elemente aus. Erhöhen Sie die Schriftgröße, machen Sie fünf RAM daraus und ändern Sie dann die Farbe, machen Sie 781010 Die Icons sind gestylt. Als Nächstes werde ich die Überschriften anpassen. Wählen wir H3-Überschriftenelemente aus. Zuallererst werde ich die Schriftfamilie ändern. Verwenden wir hier made Soul Maze San-Serif, um die Schriftgröße zu erhöhen daraus zu machen Außerdem werde ich oben und unten am Hering etwas Platz schaffen oben und unten am Hering Lassen Sie uns den Rand auf RAM und Null setzen und auch die Farbe ändern. Ich werde deine Farbe ccc verwenden. In Ordnung, das war's mit Überschriften. Lassen Sie uns weitermachen und uns um die Absätze kümmern. Wählen wir p Elemente aus. Ich werde die Schriftgröße definieren. Machen wir 1,6 RAM draus und ändern dann die Farbe. In diesem Fall verwende ich Farbe oder AAAA. Okay, wie Sie anhand der Kontaktdaten sehen können , sind wir fertig. Jetzt ist es an der Zeit, mit der Überschrift zu beginnen. Und dann das Formular selbst. Wählen wir H1-Überschriftenelemente aus. Ich werde die Schriftgröße erhöhen. Machen wir es mit vollem RAM. Dann ändere die Farbe. Verwenden wir hier Call oder CCC. Dann wandle ich Text in Großbuchstaben um. Und schafft endlich etwas Platz an der Unterseite. Verwenden Sie den unteren Rand mit einer Rampe für den Wert drei. In Ordnung? Wie Sie sehen können, ist die Überschrift formatiert und jetzt müssen wir weitermachen und uns um das Formular kümmern Wählen wir also Kontaktformular aus. Zuerst. Ich werde die Breite auf sieben bis RAM setzen. Dann richte ich die Elemente mit Flexbox aus. Stellen wir das Display so ein, dass es sich biegt und die Richtung ändert. Lass es sie anrufen. Okay, die Eingabefelder werden also vertikal in einer Spalte platziert. Wie Sie wissen, haben wir hier zwei Eingabefelder, einen Textbereich. Sie werden einige gemeinsame Stile haben. Lassen Sie uns also fortfahren und sowohl den Eingabe- als auch den Textbereich auswählen. Also werde ich zunächst etwas Platz innerhalb der Felder schaffen . Lassen Sie uns den Abstand auf 1,5 ran setzen und dann die Hintergrundfarbe ändern Ich mache es dunkelgrau und verwende es für vier. Ändern Sie dann die Farbe des Textes. Machen wir es e. Außerdem werde ich den Standardrahmen entfernen. Setzen wir es auf Null. Und dann etwas Platz am unteren Rand schaffen , um zu laufen. Jetzt sehen die Elemente viel besser aus und wir müssen uns um die Schriften kümmern. Lassen Sie uns die Schriftfamilie auf Oswald San-Serif setzen. Dann werde ich die Schriftgröße erhöhen. Stellen wir es auf 1,8 RAM ein. Machen Sie die Schrift außerdem heller. Lassen Sie uns die Schriftstärke auf 300 setzen und den Abstand zwischen den Buchstaben vergrößern. Stellen wir die Rampe auf 0,1 ein. Ordnung, also die Eingaben und der Textbereich oder ein Stil, sie sehen gut aus Wir haben einige gängige Stile für Eingaben und Textbereich verwendet, aber wir benötigen ein paar andere Stile für den Textbereich und die Schaltfläche Senden. Wie Sie wissen, können Sie die Breite und Höhe des Textbereichs manuell von der unteren rechten Ecke aus ändern . Wenn wir das tun, wird es das Layout durcheinander bringen. Wir müssen also die Breite und Höhe des Textbereichs irgendwie einschränken . Dafür verwende ich Eigenschaften wie maximale Breite, maximale Höhe und eine mittlere Höhe Wählen wir also den Textbereich aus. Ich setze die maximale Breite auf 100%. Dann definieren wir die maximale Höhe und setzen sie auf 15 RAM. Was die Mindesthöhe angeht, werde ich sie auf eine Rampe von 5,5 setzen. Wie Sie jetzt sehen können, können wir den Textbereich nur ein wenig vergrößern . Ordnung, das letzte Element, das wir anpassen müssen, ist der Senden-Button Also kümmern wir uns darum. Und ich wähle die Schaltfläche Senden mit dem Typattribut aus, das wir hier benötigen Senden. Lassen Sie uns die Hintergrundfarbe ändern. Ich werde deine Farbe 781010 verwenden, dann Text in Großbuchstaben umwandeln und auch den Typ des Kurses ändern , indem ich einen Zeiger mache Der Submit-Button ist also gestaltet, er sieht gut aus. Und zum Schluss werde ich einen kleinen Schwebeeffekt erzeugen. Ich möchte die Hintergrundfarbe der Schaltfläche leicht ändern, wenn Sie mit der Maus darüber fahren Wählen wir also die Schaltfläche „Senden“ mit der Maus. Ändern Sie die Hintergrundfarbe. Lass uns deine Farbe 50303 verwenden. Und dann verwende Transition mit der Hintergrundfarbe. Und mit einer Dauer von 0,3 s. In Ordnung, das war's Der Kontaktbereich ist gestaltet und gestaltet. Also lass uns weitermachen. 30. Projekt 3 - Fußzeile erstellen und stilvoll: In Ordnung, wir sind fast fertig mit dem Bau unserer Projekte Es ist Zeit, den letzten Teil zu erstellen, der die Fußzeile sein wird Es wird einfach sein. Wir werden die Navigationspunkte auf der linken Seite haben. Was die rechte Seite betrifft, werden wir hier den Absatz mit einigen Copyright-Texten platzieren . Außerdem werden wir dafür sorgen, dass diese Links funktionieren. Wenn ich sie anklicke, werden wir reibungslos zum richtigen Abschnitt navigieren. Okay, lassen Sie uns weitermachen und mit der Erstellung des HTML-Markups beginnen . Ich werde neue Kommentare einleiten. Fußzeile und eine Fußzeile. Öffnen Sie dann das HTML5-Fußzeilenelement mit einer Klassenfußzeile. Das Foto wird also aus zwei verschiedenen Teilen bestehen. Wir werden die Fußzeile, Navigation und den Absatz Erstellen wir also div-Elemente mit dem Klassenfußzeilen-Navi Linkelemente von Institute mit der Inhaltsstartseite Insgesamt werden wir also vier verschiedene Links haben. Lass es uns dreimal duplizieren und den Inhalt ändern. Im zweiten wird es um uns gehen, dann werden wir die Preise haben. Und der letzte wird Kontakt sein. Das war's mit dem ersten Teil. Öffnen wir ein p-Tag mit einem Klassen-Copyright und fügen dann einen Copyright-Text ein. Wir brauchen hier eine HTML5-Entität, ich meine das Copyright-Zeichen, gefolgt von Code und Create Alle Rechte vorbehalten. In Ordnung, das war's also mit dem HTML-Markup. Lassen Sie uns weitermachen und die Fußzeile anpassen. Ich werde neue Kommentare in der CSS-Datei für die Fußzeile erstellen der CSS-Datei für die Fußzeile Wählen Sie dann die Fußzeile aus und definieren Sie deren Breite und Höhe. Ich setze die Breite auf 100%. Für die Höhe. Machen wir etwa 12 draus. Und ändere auch die Hintergrundfarbe. Ich werde deine Farbe auf 0 bis eins bis zwei anwenden. Als Nächstes richte ich die Elemente mit Flexbox aus. Stellen wir das Display auf Flex ein. Dann werde ich etwas Abstand zwischen den Flex-Elementen schaffen, zwischen denen wir den Inhaltsabstand begründen müssen. die Elemente dann vertikal in der Mitte aus, um die Elemente in der Mitte zu platzieren Richten Sie die Elemente dann vertikal in der Mitte aus, um die Elemente in der Mitte zu platzieren. Und ich werde auch etwas Platz auf der linken und rechten Seite schaffen . Verwenden wir Padding mit dem Wert 0,10 ramp. Ordnung, die Elemente sind also aufeinander abgestimmt und jetzt müssen wir sie stylen. Beginnen wir mit den Navigationslinks in der Fußzeile. Ich werde die Schriftfamilie ändern. Machen wir es so Mais-San-Serif. Dann erhöhe die Schriftgröße, mach es zu Ram und ändere die Farbe. Ich werde hier die Farben C, C, C verwenden . Wie Sie sehen können, müssen wir etwas Abstand zwischen den Linkelementen schaffen. Verwenden wir also Margin, richtig, mit einem Wert von drei rem. Und vergrößern Sie auch den Abstand zwischen den Buchstaben. Verwenden Sie den Buchstabenabstand, Rampe 0,1. Okay, also die Link-Elemente oder der Stil, bevor wir zum Absatz übergehen, werde ich einen kleinen Hover-Effekt erzeugen Ich ändere die Farbe, wenn ich mit der Maus darüber fahre. Wählen wir also Linkelemente aus, indem wir den Mauszeiger bewegen. Dann ändere die Farbe, die ich hier verwenden werde, Farbe: Alter sechs bis drei bis drei. Und benutze Transition mit den Werten color 0.3 s. In Ordnung, das war's also mit den Nav-Elementen Gehen wir zum Absatz über. Ich werde die Schriftgröße erhöhen. Stellen wir es auf zwei RAM ein. Und ändere auch die Farbe. Mach es d, d, d. Okay, das war's. Die Fußzeile ist benutzerdefiniert. Und bevor wir fertig sind, werde ich dafür sorgen, dass diese Navigationsgegenstände funktionieren. Sobald wir sie angeklickt haben, müssen wir zum richtigen Abschnitt navigieren. Um das zu erreichen, müssen wir die Abschnitte mit den Links verbinden. Wir werden das mit den Attributen h-Referenz und ID tun. Wie Sie wissen, hat das H-Link-Element ein H-Referenzattribut. Wir müssen jedem Abschnitt ein Element und ein ID-Attribut zuweisen . Und dann sollten die Werte beider Attribute übereinstimmen. Fügen wir also ein neues Zuhause ein. Dann Über uns, Preise und Kontakt. Danach weisen wir jedem Abschnitt Elemente und ID-Attribute mit den richtigen Werten zu. Der erste Abschnitt sollte eine ID mit dem Wert home haben , dann geht es im zweiten um uns. Als Nächstes werden wir die Preisgestaltung haben. Was den letzten Abschnitt betrifft, so wird er inhaltlich sein. Wenn ich jetzt auf die Links klicke, navigiere ich zum Eigenschaftenbereich, aber ohne reibungslosen Effekt. Um das zu beheben, müssen wir eine dieser CSS-Eigenschaften verwenden, die als Scrollverhalten bezeichnet wird. Wir müssen es dem HTML-Element zuweisen und wir müssen es auf glatt setzen. Jetzt ist das Problem behoben. Und endlich sind wir fertig. Das Projekt ist abgeschlossen. Alle diese Abschnitte werden erstellt und angepasst. Und jetzt müssen wir zum letzten Teil übergehen. Ich meine, wir müssen ein Projekt so gestalten es auf verschiedene Bildschirmgrößen reagiert. Also lass uns weitermachen. 31. Projekt 3 - Projekt reaktionsfähig machen: In Ordnung, wir haben den Bau unserer Projekte abgeschlossen. Und wie gesagt, jetzt ist es an der Zeit, es an verschiedene Bildschirmgrößen anzupassen. Wie üblich haben wir dieses Projekt mit dem Desktop erstellt. Der erste Ansatz ist für eine extragroße Bildschirmgröße konzipiert. Bildschirmgröße mit 90, 20 Pixeln Breite und 1080 Pixeln Höhe. Und jetzt müssen wir es auf kleinere Bildschirmgrößen reagieren lassen . Lassen Sie uns die Seite überprüfen und in den Responsive-Modus wechseln. Wie Sie sehen können, sind Breite und Höhe auf 1.920,10, 80 Pixel festgelegt Wir müssen also die Breakpoints finden, an denen das Projekt einige Änderungen und Anpassungen benötigt Ich habe die Breakpoints bereits vorbereitet, also werde ich keine Zeit damit verschwenden, sie zu finden. Der erste Breakpoint, an dem wir einige Änderungen vornehmen müssen, wird also wir einige Änderungen vornehmen müssen 1.800 Pixel sein Denn wie Sie sehen, sieht der zweite Abschnitt nicht gut aus. Lassen Sie uns also weitermachen und eine CSS-Medienabfrage erstellen. Vorher füge ich neue Kommentare ein, responsiv, nicht reagierend Erstellen Sie dann die CSS-Medienabfrage. Ich werde die maximale Breite mit 1.800 Pixeln angeben. Am Breakpoint werde ich also die Breite des Video-Wrappers und des Absatzes verringern Video-Wrappers und des Und ich werde auch ihre Positionen leicht ändern. Wählen wir also den Video-Wrapper aus. Ich werde die Breite so einstellen, dass sie läuft. Dann wird die Höhe 45 Marke betragen. Was die richtige Position angeht, lassen Sie uns zehn Rampen daraus machen. Das war's also mit dem Video-Wrapper. Gehen wir zum Absatz über. Wählen wir es aus. Ich werde seine Breite definieren. Machen wir 90 RAM draus. Und dann ändere die richtige Position, mach es zu einer braunen Rampe. Okay, der zweite Abschnitt sieht also gut aus. Das einzige, was ich tun werde, ist, auf der rechten Seite der Linie in der Lebensmittelabteilung ein wenig Platz zu schaffen auf der rechten Seite der Linie in der Lebensmittelabteilung ein wenig Platz . Wie Sie wissen, haben die Zeilen den gemeinsamen Klassennamen, die Abschnittsüberschrift. Um also die Linie des Fußabschnitts auszuwählen, müssen wir die Kombination dieser Elektroden wie folgt verwenden . Zuerst müssen wir hier den Abschnitt drei und die Abschnittsüberschrift angeben . Stellen wir den Rand an der rechten Rampe 23 ein. Ordnung, mit diesem Bruchpunkt sind wir fertig, weil alle anderen Abschnitte gut aussehen Der nächste Breakpoint wird bei 1.650 Pixeln liegen. Lassen Sie uns also weitermachen und eine neue CSS-Medienabfrage erstellen und angeben, wer die maximale Breite hat. Am Breakpoint müssen wir uns also wieder um den zweiten Abschnitt kümmern Aber vorher werde ich die Schriftgröße des HTML-Elements verringern . Dadurch werden die Elemente kleiner. Ich gehöre zu den Elementen, die im RAM gemessen werden. Setzen wir also die Schriftgröße auf 57 Prozent. Also wurden die Elemente kleiner. Jetzt kümmere ich mich um den zweiten Abschnitt. Holen wir uns diesen Code von hier und fügen ihn unten ein. Also die Breite des Video-Wrappers, die 85 sein wird, ausgeführt, dann ändere ich den Wert der Höhe Machen wir vier zum Rammen. Was die richtige Position angeht, werde ich fünf Rennen daraus machen. Dann ändere die Breite für den Absatz, mache 85 RAM als wir brauchen, richtige Position. Mach fünf Rem draus. Und ich füge hier hinzu, Immobilie im Wert von zehn Ran gekauft habe. In Ordnung, das war's also mit diesem Breakpoint. Der nächste wird 1.500 Pixel haben. Am Breakpoint werde ich einfach die Überschriftenzeilen ausblenden Lassen Sie uns also eine neue CSS-Medienabfrage erstellen und die maximale Breite auf 1.500 Pixel angeben Wählen Sie dann die Überschriftenzeilen und weisen Sie sie ihnen zu. Keine anzeigen. In Ordnung, die Linien sind also versteckt. Lass uns weitermachen und den nächsten Breakpoint finden. Der nächste Breakpoint wird also 1.400 Pixel sein. Wie Sie sehen, haben wir eine Menge zu tun, weil das Projekt auf einer so kleineren Bildschirmgröße fast durcheinander ist auf einer so kleineren Bildschirmgröße fast durcheinander Lassen Sie uns eine neue CSS-Medienabfrage erstellen Die maximale Breite beträgt 1.400 Pixel Zunächst werde ich die Schriftgröße des HTML-Elements erneut verringern . Setzen wir es auf 45 Prozent. Wie Sie sehen, haben wir bereits ein viel besseres Ergebnis erzielt. Manipulieren der Schriftgröße des HTML-Elements ist wirklich hilfreich, wenn Sie versuchen, das Projekt responsiv zu gestalten Als Nächstes werde ich die Schriftgröße der Bannerüberschrift verkleinern . Also müssen wir das Span-Element auswählen. Stellen wir die Schriftgröße so ein, dass sie sich dreht. Okay, danach werde ich mich um den Absatz kümmern. Wir müssen es breiter machen. Wählen wir B9 oder Absatz aus. Erhöhen Sie die Breite, 45 RAM, und ändern Sie dann die Schriftgröße. Machen Sie daraus eine 3D-Rampe. Der Absatz sieht gut aus. Jetzt werde ich mich um den Rest der Abschnitte kümmern . Ab diesem Breakpoint möchte ich das Layout ein wenig ändern. Enthauptet jetzt eine Stelle auf der linken Seite, und ich werde sie oben in den Abschnitten in der Mitte platzieren oben in den Abschnitten in der Mitte Um das zu erreichen, wählen wir alle drei Abschnitte aus. Von Abschnitt zu Abschnitt drei und Abschnitt vier, und ändern Sie die Richtung des Fluss-Layouts. Ich werde es schaffen, sie anzurufen. Ordnung, jetzt befinden sich die Überschriften oben in diesem Abschnitt Lassen Sie uns weitermachen und den zweiten Abschnitt anpassen. Ich werde seine Höhe erhöhen. Stellen wir es auf eine Viewport-Höhe von 120 ein. Dann platziere ich das Video und den Absatz in der Mitte der Seite. Wählen wir den Video-Wrapper und definieren zwei Positionen, machen ihn zu 20 Prozent Dann brauchen wir die linke Position. Ich werde es zu 50% schaffen. Und um das Element perfekt zu zentrieren, müssen wir Transform Translate mit der X-Richtung transformieren Und als Wert werde ich angeben oder -50 Prozent. Und verringern Sie wahrscheinlich auch die Breite des Video-Wrappers. Machen wir eine Rampe mit zwei Rampen daraus. Okay, lassen Sie uns weitermachen und dasselbe für den Absatz tun. Wählen wir es aus. In diesem Fall definiere ich nur die linke Position. Machen wir 50 Prozent draus. Andererseits müssen wir transformieren, mit der X-Richtung und mit einem Wert von -50% übersetzen Ändern Sie dann zuletzt die Breite und machen Sie 80 RAM daraus. In Ordnung, das war's mit dem zweiten Abschnitt. Fahren wir mit dem nächsten Abschnitt fort. Ich setze die Höhe des dritten Abschnitts auf oral und definiere auch die Polsterung Ich setze es oben auf fünf Rem dann auf Null auf der rechten Seite. Dann brauchen wir zehn Rampen unten und Null auf der linken Seite. Als Nächstes werde ich am unteren Rand der Überschrift etwas Platz schaffen . Um speziell die Überschrift des dritten Abschnitts auszuwählen , müssen wir den ersten Abschnitt drei auswählen, gefolgt von dieser Abschnittsüberschrift. Definieren wir März als wichtig mit dem Wert sieben Ramp. Okay, lassen Sie uns abschließend die Breite des Swipes pro Container auf 100% erhöhen des Swipes pro Container auf 100% Wählen wir es aus und setzen die Breite auf 100%. Okay, mit dem dritten Abschnitt sind wir fertig. Lassen Sie uns weitermachen und den Kontaktbereich anpassen. Ich werde die Höhe auch auf Auto setzen. Dann definiertes Padding, ich setze es oben und unten auf fünf Rem und links und rechts auf Null. Ordnung, das war's also mit 1.400 Pixeln oder diese Abschnitte sehen Lass uns weitermachen und den nächsten Breakpoint finden. Ich denke, es werden 900 Pixel sein. Erstellen wir also eine neue CSS-Medienabfrage und geben die maximale Breite auf 900 Pixel an. Das erste, was ich tun werde, ist die Schriftgröße der HTML-Elemente zu verringern. Setzen wir es auf 40%. Dann. Ich werde die Schriftgröße der Bannerüberschrift verkleinern. Wählen wir dieses Pfadelement und seine Schriftgröße auf acht Durchläufe aus. Ich denke also, wir haben einen großen Abstand zwischen der Überschrift und dem Absatz. Und es wäre auch besser, wenn wir das Banner leicht nach unten bewegen würden. Wählen wir also zunächst das Banner aus und ändern wir seine oberste Position. Ich mache 25% und dann werde ich die Höhe der Bannerüberschrift verringern . Stellen wir es auf 15 Lauf ein. Jetzt sieht die Binärdatei viel besser aus. Außerdem müssen wir den zweiten, dritten und vierten Abschnitt nicht berühren . Gehen wir zur Fußzeile über. Wählen wir es aus und wir finden das Polster. Ich werde den Abstand auf der linken und rechten Seite verkleinern . Lassen Sie uns Padding auf 0,5 ran setzen. Wählen Sie dann die Link-Elemente aus und ändern Sie deren Schriftgröße. Ich werde es 1.8 Ran machen. Ordnung, schauen wir uns diesen Bruchpunkt dieser Abschnitte an Sieh gut aus. Lass uns weitermachen und den nächsten finden. Der nächste Breakpoint wird 700 Pixel sein. Lassen Sie uns weitermachen und eine neue CSS-Medienabfrage mit der maximalen Breite von 700 Pixeln erstellen eine neue CSS-Medienabfrage mit der maximalen Breite von 700 Pixeln Zuerst werde ich die Schriftgröße der HTML-Elemente verringern . Im Moment ist es auf 40% eingestellt, also reduzieren wir es und machen es auf 35 Prozent. Also wurden die Elemente kleiner. Eigentlich sieht der erste Abschnitt gut aus. Gehen wir zum zweiten über. Ich denke, wir müssen die Höhe dieses Abschnitts verringern. Machen wir daraus eine Viewport-Höhe von 100. Der zweite Abschnitt, er sieht gut aus. Wir müssen den Abschnitt mit den Preisen also nicht berühren. Was den Inhaltsbereich betrifft, werde ich wahrscheinlich den Abstand zwischen den Kontaktdaten verringern . Wählen wir also div-Elemente aus und geben Rand mit den Werten drei rem oben und unten und zwei rem links und rechts an. In Ordnung, zum Schluss kümmern wir uns um die Fußzeile. Ich werde die Navigationselemente und den Absatz vertikal übereinander platzieren . Also lasst uns die Richtung ändern. Ich mache daraus eine Kolumne. Als Nächstes platziere ich sie vertikal in der Mitte. Verwenden wir dafür das Justify-Content Center. Und schließlich schaffen Sie etwas Platz unter den Links. Wählen wir die Fußzeilennavigation und weisen ihr den unteren Rand mit dem auszuführenden Wert zu. Ordnung, die gesamte Laufzeit sieht gut aus und am Breakpoint sind wir fertig Jetzt ist es an der Zeit, unser Projekt am letzten Breakpoint, der 500 Pixel lang sein wird , gut aussehen am letzten Breakpoint, der 500 Pixel lang sein wird , gut zu lassen Lassen Sie uns also eine neue CSS-Medienabfrage erstellen und eine neue CSS-Medienabfrage die maximale Breite auf 500 Pixel angeben. Also noch einmal, zunächst werde ich die Schriftgröße der HTML-Elemente verringern. Setzen wir es auf 30%. Bevor wir den ersten Abschnitt anpassen, werde ich eigentlich den Leerraum entfernen , den wir auf der rechten Seite der Seite haben Es wird durch den zweiten und den Leitungsabschnitt verursacht. Wählen wir also den Video-Wrapper und setzen seine Breite auf 60 RAM Wählen Sie dann Absatz und stellen Sie die Breite ebenfalls auf sechs Dram ein. Der zweite Abschnitt sieht gut aus. Kümmern wir uns um den Kontaktbereich. Ich wähle ein Div-Element aus. Ich meine die Div der Kontaktdaten. Stellen wir die Breite auf 18 RAM ein. Ändern Sie auch den Rand. Ich setze es auf drei Rem oben und unten und ein Rem auf der linken und rechten Seite. Und verringern Sie auch die Breite des Kontaktformulars. Stellen wir es auf 60 Run ein. In Ordnung, der Kontaktbereich sieht also auch gut aus. Und schließlich müssen wir uns um den ersten Abschnitt kümmern. Wählen wir die Bannerüberschrift, span. Ich werde die Schriftgröße verkleinern. Machen wir 4,5 RAM draus. Und ich werde auch den Abstand zwischen den Buchstaben verringern . Machen wir es zum Laufen. Eigentlich. Wie Sie wissen, ändern die Span-Elemente in einer Überschrift den Buchstabenabstand während der Animation. Also müssen wir es auch in den CSS-Keyframes reduzieren. Andernfalls können Sie sehen, dass einige dieser Spanelemente zweizeilig unterbrochen sind und nicht gut aussehen. Ich werde die gesamten CSS-Keyframes kopieren. Fügen wir sie hier ein und ändern Sie die Größe des Buchstabenabstands, den wir ausführen müssen. Und dann ein RAM statt 1,5 g. Also jetzt funktioniert alles richtig gut und eigentlich sind wir fertig. Das Projekt reagiert auf verschiedene Bildschirmgrößen. Also haben wir die Arbeit daran abgeschlossen. Hoffentlich war es interessant und es hat dir gefallen. Jetzt muss ich weitermachen und mit dem Bau des nächsten Projekts beginnen. 32. Projekt 4 - Projektvorschau: Ordnung, es ist an der Zeit, mit dem Bau unseres nächsten Projekts zu beginnen, das eines der größten und interessantesten sein wird größten und interessantesten Wir werden so etwas wie die APL-E-Commerce-Website erstellen . Bevor wir wie gewohnt beginnen, den Code zu schreiben, lassen Sie uns das Projekt beschreiben. Es wird aus verschiedenen Abschnitten bestehen. Wir beginnen mit der Landung. Es wird mehrere Teile umfassen. Wir werden hier ein Logo und die Navigation mit Hover-Effekten Dann bauen wir hier diese nette Box mit Controllern. Wir können die Box mit diesen Controllern in einer 3D-Umgebung bewegen . Wir werden dies mit CSS und JavaScript verwalten. Außerdem werden wir hier einige Textelemente und diese schönen Teile haben , was, wie Sie sehen können, einen schönen Schwebeeffekt hat Außerdem werden bei der Ausleihe animierte Hintergrundbilder zur Verfügung stehen. Sie werden sich mit Fade-Effekten ändern. Ordnung, der nächste Abschnitt enthält die Überschrift und die Bilder des iPhone 12s Wenn wir den Mauszeiger über das Bild bewegen, ändert es sich mit einem schönen Schwebeeffekt Außerdem haben wir hier zwei Buttons, und wenn wir den Mauszeiger darüber bewegen, werden einige Links abgespielt Danach folgt der Abschnitt über das MacBook Air. Sobald wir nach unten scrollen, öffnet das MacBook das Logo und der Ladefortschrittsbalken erscheint. Und dann schaltet sich Mark Wu erstellt all diese Dinge nur mit CSS und JavaScript. Okay, fahren wir mit dem nächsten Abschnitt in dem Sie die Apple Watches finden. In diesem Abschnitt können Sie Ihre bevorzugten Gehäuse und auch die Bänder auswählen , die diese Controller verwenden. Okay, als Nächstes haben wir einen Abschnitt über Flughäfen, gefolgt von der Fußzeile, wo wir die Symbole und den Copyright-Text haben werden Und tatsächlich sind diese Symbole mit den richtigen Abschnitten verbunden. Wenn ich sie anklicke, navigieren wir zum entsprechenden Abschnitt. Abgesehen davon funktioniert auch die Navigation. Wenn ich auf die Navigationspunkte klicke, navigieren wir zum richtigen Abschnitt. In Ordnung, das war's mit diesem Projekt. Natürlich werden wir es an verschiedene Bildschirmgrößen anpassen. Jetzt ist es an der Zeit, mit dem Aufbau eines Projekts zu beginnen. Also lass uns weitermachen. 33. Projekt 4 - Erstelle und passe die Landingpage an: In Ordnung, lassen Sie uns weitermachen und mit dem Aufbau eines Projekts beginnen. Ich habe auf dem Desktop einen neuen Ordner namens Pool E-Commerce erstellt , in dem ich einen weiteren Ordner für die Bilder habe. Lassen Sie uns diesen Ordner in Visual Studio Code öffnen und dann unsere Arbeitsdateien erstellen. Ich nenne sie index.html, style.css und script.js. Öffnen Sie dann die Datei index.html und bereiten Sie das grundlegende HTML-Dokument vor. Dafür verwende ich eines der VS-Codepakete namens Ahmed Wir müssen hier ein Ausrufezeichen platzieren und Tab oder Enter drücken Okay, hier haben wir alle grundlegenden HTML-Tags. Zunächst ändere ich den Titel. Mal sehen, E-Commerce im April einführen. Und danach verknüpfen wir CSS- und JavaScript-Dateien. Ich öffne den Link-Tag. Und dann müssen wir den Pfad der Datei im h-Referenzattribut angeben. Was die JavaScript-Datei betrifft, öffnen wir das Script-Tag direkt über dem abschließenden Body-Tag. Und dann geben wir im Quellattribut den Pfad der Datei an. Außerdem werde ich noch einen Link hinzufügen, da ich während des gesamten Projekts Font Awesome-Symbole verwenden werde . Also lass uns weitermachen und nach Font Awesome, CDN, js suchen. Schnappen Sie sich dann den Link, öffnen Sie das Link-Tag in den Kopfelementen und fügen Sie den Link als Wert des h-Referenzattributs ein. Ordnung, schließlich werde ich das Projekt über einen Live-Server im Browser ausführen das Projekt über einen Live-Server im Browser Es ermöglicht uns, den Projektverlauf im Browser auszuführen und die Änderungen vorzunehmen, ohne die Seite jedes Mal zu aktualisieren. Bevor wir weitermachen, platzieren wir den Browser und den Texteditor wie folgt. Und fang an. Wie üblich werden wir das Projekt Abschnitt für Abschnitt erstellen. Der erste Abschnitt enthält ein paar verschiedene Teile, wie die Diashow der Hintergrundbilder, auch den Würfel Ich bin in dieser Kiste. Diese Teile werden ziemlich komplex sein. Also werde ich mich zunächst um den Rest der Teile kümmern . Und danach werden wir sie auch erstellen. Lassen Sie uns weitermachen und mit der Erstellung des HTML-Markups beginnen . Ich öffne das div-Tag, das der Container sein wird. Fügen Sie dann Ihre neuen Kommentare ein, Abschnitt eins und Abschnitt eins. Und dann öffne das Abschnitt-Tag mit dem Klassenabschnitt eins. Also fange ich mit einem Logo an. Lassen Sie uns Ihre neuen Kommentare, Ihr Logo und Ihr Logo einfügen. Also werde ich ein Logo mit dem Link und dem Font Awesome-Symbol erstellen . Öffnen wir also ein Tag mit dem Klassenlogo und fügen dann Ihre Augenelemente mit den Klassen FAB, FA Apple ein. Okay, hier haben wir das Logo. Lassen Sie uns weitermachen und die Navigation erstellen. Lassen Sie uns neue Kommentare eingeben, Navbar. Und jetzt ab Pore. Dann öffne ich HTML5-Navigationselemente mit der Klasse navbar Und dann füge hier den ersten Navigationspunkt ein, öffne den Link-Tag mit der Klasse jetzt pro Link. Und als Inhalt legen wir Ihr iPhone 12 ein. Insgesamt werden wir also vier verschiedene Navigationspunkte haben. Daher werde ich diese Codezeile dreimal duplizieren . Und dann ändere den Inhalt. Ich lege dein MacBook Air ein. Dann wird der nächste Watch AirPods sein. Okay, das war's mit der Navigation. Als Nächstes erstelle ich ein Banner. Ich meine die Textelemente und den Boden. Lassen Sie uns also neue Kommentare, Banner und Of-Banner erstellen . Öffnen Sie dann das Div-Tag mit dem Banner „ Class Section One“. Das Banner wird vier verschiedene Elemente enthalten. Ich meine die Überschrift, den Absatz, das Spanelement und den unteren Teil. Es ist also ein offenes H1-Überschrift-Tag. Und wir werden hier eine HTML5-Entität einfügen, die der Linkspfeil sein wird Also brauchen wir ein Ampersand, dann das Hashzeichen 8592, Semikolon, gefolgt Semikolon Als Nächstes öffne ich das p-Tag, den Absatz mit dem folgenden Text. Kreativität verbindet einfach Dinge Als nächstes kommen Span-Elemente. Fügen wir hier den Autor dieser Wörter ein, Steve Jobs. Und jetzt endlich Button mit Type-Button erstellen und mit dem Inhalt. Okay, das war's jetzt mit dem Aufschlag. Wie gesagt, wir werden uns etwas später um diese Diashow und die Box kümmern etwas später um diese Diashow und die Box Es ist Zeit, mit dem Schreiben von CSS zu beginnen. Zuallererst werde ich einige gängige Stile erstellen und zurücksetzen. Tatsächlich werden wir während dieses Projekts eine der Google-Schriftarten verwenden. Lassen Sie uns also weitermachen und den Link einfügen. Besuchen wir die Google Fonts-Website. Suchen Sie dann nach den Telefonen, die Exons genannt werden. Ich werde alle diese Kacheln außer Italica auswählen. Wählen wir sie also aus und importieren Sie dann die URL. Von hier aus. Wir müssen diese URL in die CSS-Datei einfügen. Okay, danach erstellen wir Kommentare, allgemeine Stile. Und von gängigen Stilen. Wählen Sie dann jedes Element mit einem Sternchen aus. Zuallererst werde ich den Standardrand und das Padding von jedem Element entfernen Standardrand und das Padding von jedem Element Lassen Sie uns also weitermachen und beide auf Null setzen. Dann mache ich eine Border-Box in Boxgröße. Entfernt dann die Standardaufzählungszeichen aus dem Listenelement, indem Sie den List-Style-Type None verwenden Außerdem benötigen wir keine Standardgliederung. Setzen wir es auf „Null“. Als Nächstes werde ich die standardmäßigen, den Link-Elementen zugrunde liegenden Elemente entfernen Link-Elementen zugrunde liegenden Elemente keine Textdekoration verwende. Und zum Schluss stellen wir die Schriftfamilie so ein, dass sie funktioniert. Sans-Serif. Wie Sie sehen, werden in diesem Projekt alle gängigen Stile auf alle Elemente angewendet . Wie bei den anderen werde ich den RAM als Maßeinheit verwenden. Moment entspricht ein RAM 16 Pixeln, da die Schriftgröße des HTML-Elements 16 Pixeln entspricht. Ich möchte 1 g in zehn Pixel umrechnen. Und dafür müssen wir die Schriftgröße des HTML-Elements verringern . Setzen wir es auf 62,5%. In Ordnung? Wie Sie sehen können, wurden alle Elemente kleiner und jetzt entspricht 1 g den Tan Peaks. Als Nächstes erstelle ich ein paar CSS-Variablen für die Farben, da wir mehrere Farben häufig verwenden werden. Ich denke es wäre besser, wenn wir CSS-Variablen verwenden. Im Allgemeinen können CSS-Variablen einen globalen oder lokalen Geltungsbereich haben. In diesem Fall benötigen wir globale Variablen, da auf sie über das gesamte Dokument zugegriffen werden kann . Was die lokalen Variablen betrifft, können sie nur innerhalb des Selektors verwendet werden Um Variablen mit einem globalen Gültigkeitsbereich zu erstellen, müssen wir sie im Root-Selektor deklarieren Der Stammselektor entspricht dem Stammelement des Dokuments. Danach müssen wir die Namen der Variablen und die Werte angeben . Die Namen der Variablen sollten doppelte Bindestriche haben. Ich nenne die erste Variable Primärfarbe. Und als Wert verwenden wir hier sechs, e, d e sechs. Als Nächstes erstelle ich eine weiße Farbe. Und der dritte wird schwarz sein. In Ordnung, das war's also mit den gängigen Stilen. Lassen Sie uns damit beginnen, dieses Abschnittselement anzupassen. Fügen Sie Ihre neuen Kommentare ein, Abschnitt eins. Und Abschnitt eins. Definieren wir zunächst seine Breite und Höhe. Ich werde mit 200 Prozent beginnen. Was die Höhe angeht, machen wir sie zu 100% aus dem Viewport. Dann ändere ich die Hintergrundfarbe. In diesem Fall verwenden wir eine temporäre Hintergrundfarbe, aber dann erstellen wir die Diashow Also werde ich jetzt eine der Variablen verwenden. Und um das zu tun, müssen wir eine Funktion namens var verwenden, was für Variable steht. Dann müssen wir den Namen der Variablen in der Klammer angeben Variablen in der Klammer Verwenden wir hier die Primärfarbe. In Ordnung? Wie Sie sehen können, wurde die Hintergrundfarbe geändert. Danach werde ich die Elemente mit Flexbox ausrichten Elemente mit Flexbox ausrichten Stellen wir also das Display auf Flex ein. Dann platziere ich die Elemente vertikal in der Mitte. Dafür müssen wir das Alignment Items Center verwenden. Und um Platz zwischen den Elementen zu schaffen, setzen wir Justify Content To auf gleichmäßige Abstände Wie Sie sehen können, werden die Elemente horizontal in der Mitte platziert. Das Letzte, was ich in Bezug auf dieses Abschnittselement tun möchte , ist, seine Form ein wenig zu ändern. Schauen wir uns die fertige Version des Projekts an. Wie Sie sehen können, ist der Teil dieses Abschnitts in der unteren rechten Ecke abgeschnitten. Um das zu erreichen, müssen wir eine der Eigenschaften namens Clip-Path mit Polygonfunktion verwenden Clip-Path mit Polygonfunktion Um die Form auszuwählen und die richtigen Werte zu erhalten. Wir können eine der Websites besuchen. Suchen wir nach Clip-Path-CSS. Dann besuche den ersten Link. Also hier ist die Website, oder Sie können eine beliebige Form wählen und von hier aus die richtigen Werte abrufen. In unserem Fall verwende ich ein Fünfeck, weil wir hier fünf verschiedene Punkte haben und mit deren Hilfe wir verschiedene Formen definieren können In unserem Fall brauchen wir also eine Form wie diese. Wir müssen die untere rechte Ecke abschneiden. Dann nimm den Code von hier und weise ihn dem Abschnittselement zu. In Ordnung, es wird davon ausgegangen, dass sich die Form geändert hat. Und eigentlich sind wir mit diesem Abschnittselement fertig. Lassen Sie uns weitermachen und das Logo anpassen. Ich werde neue Kommentare für das Logo einfügen. Wählen Sie dann Logo aus. Zuallererst werde ich mich um die Position des Logos kümmern. Es wird in der oberen linken Ecke der Seite platziert . Lassen Sie uns also weitermachen und seine Position auf absolut setzen. Um dann seine Position entsprechend seinem übergeordneten Element zu definieren , muss ich diesem Abschnitt eine relative Position des Elements zuweisen . Und dann definiere die Eigenschaften oben und links. Ich werde beide auf drei Runden einstellen. Okay, es wird also davon ausgegangen, dass ein Logo positioniert ist. Als Nächstes werde ich das Symbol selbst anpassen. Wählen wir also I-Elemente aus. Lassen Sie uns zuerst die Schriftgröße erhöhen, zehn Mal durchgehen und dann die Farbe ändern. Ich werde deinen RGBA-Wert mit der schwarzen Farbe und mit der Opazität 0,8 verwenden mit der schwarzen Farbe und mit der Opazität Okay, das war's mit dem Logo. Lass uns weitermachen und uns um die Navbar kümmern. Fügen wir neue Kommentare für die Navigationsleiste ein. Jetzt wird die Leiste in der oberen rechten Ecke platziert. Wählen wir es aus und setzen seine Position auf absolut. Dann definiere ich die oberen und rechten Positionen. Lassen Sie uns die Top-Eigenschaft auf drei RAM setzen. Was die richtige Position angeht, machen wir 10% draus. Okay, die Navigationsleiste ist also positioniert, sie befindet sich in der oberen rechten Ecke Lass uns weitermachen und den Link anpassen, einen oberen Link auswählen und seine Schriftgröße erhöhen, um ihn zu Ram zu bringen. Als Nächstes werde ich mithilfe von Margin Platz zwischen den Navigationselementen schaffen . Im Allgemeinen handelt es sich bei dem Link-Element ein Inline-Element um ein Inline-Element , auf das kein Rand angewendet wird Wir müssen also Links in Zeilenblockelementen erstellen. Stellen wir die Anzeige auf Inline-Block ein. Wenn es sich bei dem Element also um eine Inline-Blockebene handelt, können Sie ihm Höhe, Rand und Abstand zuweisen Und sie werden sich immer noch wie ein Inline-Element verhalten. Ich meine, sie nehmen nicht die gesamte Breite im Inneren des Containers ein und sie werden nicht in verschiedenen Zeilen platziert. Lassen Sie uns den Rand oben und unten auf Null und auf drei Rem auf der linken und rechten Seite setzen den Rand oben und unten auf Null und . Okay, danach ändern wir die Farbe der Links. Und ich werde auch einen Hover-Effekt erzeugen. Ich werde die Größe der Elemente erhöhen, wenn Sie mit der Maus darauf zeigen. Lassen Sie uns also zunächst die Farbe ändern. Ich werde hier eine variable schwarze Farbe verwenden. Wählen Sie dann jetzt pro Link mit dem Mauszeiger aus. Um die Größe der Elemente zu erhöhen, verwenden wir Transformieren mit der Skalierungsfunktion denn wenn wir die Schriftgröße erhöhen , werden andere Elemente verschoben und das Layout wird unterbrochen. Stellen wir also die Skala auf 1,5 ein und verwenden den Übergang für einen gleichmäßigen Effekt. Wir müssen uns hier transformieren. Und als Dauer geben wir 0,5 s ein. In Ordnung, das war's mit dem Napa Lassen Sie uns weitermachen und das Banner anpassen. Lassen Sie uns Ihre neuen Kommentare für das Banner einfügen Wählen Sie dann ein Banner mit dem ersten Banner für den Klassenbereich aus. Also werde ich Elemente vertikal ausrichten und sie auch in der Mitte platzieren. Dafür werde ich Flexbox verwenden. Tatsächlich werden wir diese Technik während des gesamten Projekts häufig anwenden. Und um zu vermeiden, dass dieselben Eigenschaften und Werte immer wieder verwendet werden, werde ich eine neue Klasse und allgemeine Stile erstellen. Nennen wir es Center und weisen ihm Display-Flex zu. Sie dann die Inhaltsmitte für die horizontale Zentrierung aus und richten Sie die Elemente für die vertikale Zentrierung ebenfalls in der Mitte Weisen Sie dann dieser Klasse ein Do-Banner im HTML-Dokument zu. Das einzige, was wir tun müssen, ist die Richtung zu ändern , da wir Elemente vertikal in einer Spalte platzieren müssen . Also müssen wir die Biegerichtung auf Spalte setzen. Gehen wir also davon aus, dass die Elemente aufeinander abgestimmt sind. Lassen Sie uns weitermachen und jeden von ihnen anpassen. Ich fange mit einer Überschrift an. Wählen wir es aus. Zuallererst werde ich die Schriftgröße erhöhen. Lass uns 13 RAM draus machen, als die Schrift heller zu machen. Stellen Sie die Schriftstärke auf 300 ein. Verwandeln Sie Text auch in Großbuchstaben und schaffen Sie mithilfe des Buchstabenabstands etwas Abstand zwischen den Buchstaben 0,5 rem. Okay, schauen wir uns die Überschrift an. Lassen Sie uns weitermachen und den Absatz anpassen. Ändern wir die Schriftgröße, machen wir sie für RAM. Außerdem setze ich die Schriftstärke auf 400, schaffe dann Platz zwischen den Buchstaben, mache 0,1 RAM draus Und zum Schluss werde ich oben und unten mithilfe von Margin etwas Platz schaffen . Setzen wir es oben auf sechs Rem, auf der rechten Seite auf Null, unten auf den Unterarm und auf Null auf der linken Seite Okay, nehmen wir an, dass der Absatz ebenfalls formatiert ist. Und danach werde ich dieses Span-Element anpassen . Wählen wir es aus. Ich werde die Schriftgröße erhöhen. Lassen Sie uns drei RAM daraus machen und dann etwas Platz am unteren Rand des Elements schaffen. Lassen Sie uns den unteren Rand auf fünf Reime setzen. Ordnung, das einzige Element, das wir anpassen werden, ist dieser Button hier. Also lass uns weitermachen und es auswählen. Zuallererst werde ich mithilfe von Padding etwas Platz innerhalb der Schaltfläche schaffen Stellen wir es oben und unten auf zwei Rem und links und rechts auf Forum ein. Als Nächstes werde ich die Schriftgröße erhöhen es zu Ram machen. Ändern Sie auch die Hintergrundfarbe. Verwenden wir hier schwarze Farbe. Dann ändere ich die Farbe des Textes. Lassen Sie uns Ihre Primärfarbe verwenden. Und dann ändere die Schriftstärke, mache es auf 400. Okay, lass uns weitermachen und unten ein paar weitere Styles hinzufügen . Als Nächstes werde ich etwas Abstand zwischen den Buchstaben schaffen. Stellen wir es auf 0,1 RAM ein. Außerdem werde ich den Standardrahmen loswerden. Setzen wir es auf „Null“. Machen Sie dann die Ecken des Bateson leicht abgerundet, indem Sie den Randradius mit dem Wert Und schließlich ändern Sie den Typ des Cursors und lassen Sie ihn darauf zeigen. Jetzt müssen wir die Form des Musters ändern. Wenn wir uns das fertige Projekt ansehen, werden Sie feststellen, dass es eine andere Form hat. Und seine Form ändert sich. Sobald wir den Mauszeiger über die Schaltfläche bewegen, verwende ich wieder eine Clip-Pfad-Eigenschaft Aber ich werde die Form nicht manuell erstellen , da es zu lange dauern kann. Ich habe bereits vorbereitet, dass sie Werte benötigen. Kopieren wir sie einfach und fügen sie ein. Hier. Ich werde diese Datei an diese Vorlesung anhängen, damit Sie diese Werte leicht finden können. Wie Sie sehen können, sich die Form geändert. Jetzt müssen wir einen Schwebeeffekt erzeugen. Wählen wir die Schaltfläche aus, über der der Mauszeiger schweben soll. Dann schnapp dir nochmal die Werte von hier. Und schließlich benutze Transition. Wir brauchen hier Clip-Path und die Dauer 0,5 s. Okay? Wie Sie sehen können, haben wir hier einen schönen Hover-Effekt und mit einem Banner sind wir fertig Kümmern wir uns nun um diese Diashow 34. Projekt 4 - Hintergrundbilder erstellen Diashow: Ordnung, einige Teile der Landingpage sind fertig Jetzt müssen wir uns um diese Diashow des Hintergrundbildes kümmern diese Diashow des Hintergrundbildes den meisten Diashows, an denen ich teilnehme, wird die Funktionalität mit JavaScript erstellt Im HTML-Dokument wird nur ein einziges div-Element erstellt nur ein einziges div-Element , das die Diashow darstellt Lassen Sie uns also weitermachen und neue Kommentare einfügen. Diashow und Off-Diashow. Und erstelle ein Div-Element mit einer Klassen-Diashow. Okay, das war's mit dem HTML. Gehen wir weiter und gehen wir zur JavaScript-Datei. Es werden auch die Kommentare, die Slideshow und die Off-Slideshow eingerichtet. Insgesamt werden wir also fünf Entwicklungen erstellen und für jede Entwicklung ein Hintergrundbild definieren. Wir könnten das mit HTML und CSS machen. Ich meine, wir könnten fünf verschiedene Entwicklungen entwickeln. Und dann könnten wir jedem von ihnen ein Hintergrundbild aus CSS zuweisen . Aber wir werden dasselbe bequemer und dynamischer mit JavaScript machen. In Ordnung, lassen Sie uns weitermachen und eine Funktion erstellen. Ich nenne es Diashow-Deeds. Wie gesagt, wir werden fünf Div-Elemente erstellen. Und dafür werde ich for-Loop verwenden. Wir werden 1-5 durchgehen. Und bei jeder Iteration erstellen wir ein div-Element mit einer der Dome-Methoden namens create element Lassen Sie uns also für Loop erstellen. Dann brauchen wir hier Zähler I , der gleich eins sein wird. Dann brauchen wir als Bedingung weniger als oder gleich fünf. Und schließlich ich plus, plus. Danach erstelle ich eine neue Variable. Nennen wir es div. Wie gesagt, wir werden eine der Kuppelmethoden verwenden , die als Create Element bezeichnet wird. Verwenden wir es also und geben Sie dann den Tag-Namen in der Klammer an. Wir brauchen Tiefe. Okay, hier geht es darum, neue Elemente zu erstellen. Jetzt müssen wir den neu erstellten Elementen ein richtiges Hintergrundbild zuweisen . Verwenden wir dafür die Eigenschaft style. Wir müssen es dem Div zuweisen. Und dann sollte das Hintergrundbild für den Eigenschaftsnamen folgen . Wir müssen es in den Camel Case schreiben. Jetzt müssen wir den Pfad des Bildes definieren. Wenn wir in unserem Bilderordner nachschauen, finden Sie hier einen weiteren Ordner namens Slideshow, in dem wir fünf verschiedene Hintergrundbilder haben Wie Sie sehen, sind die Zahlen hier der einzige Unterschied zwischen den Namen. Also müssen wir all diese Hintergrundbilder dynamisch auf die neu erstellten div-Elemente setzen . Wir benötigen Ihre URL, dann den Ordnernamen images. Als nächstes haben wir einen weiteren Ordner, Slideshow. Und dann müssen wir den Namen des Bildes angeben , der Abschnitt eins, B, g sein wird . Und statt der Zahl müssen wir die Variable i übergeben, gefolgt vom Extinktions-JPG In der ersten Iteration werde ich also gleich eins sein und das erste Hintergrundbild wird verwendet Dann wird bei der zweiten Iteration das zweite Bild verwendet und so weiter For Loop wird so lange weiterarbeiten bis alle fünf Bilder verwendet sind. In Ordnung? Um also neu erstellte Div-Elemente hinzuzufügen, müssen wir für das Wrapper-Div-Element das wir im HTML-Dokument erstellt haben, eine andere Dome-Methode verwenden, die als Parent-Child bezeichnet wird Zunächst müssen wir den Wrapper auswählen. Verwenden wir die Methode Query Select und geben Sie hier die Diashow mit dem Klassennamen Dann wurde eine Methode namens append child und als Argumente an dein D angehängt . Okay, um diese Funktion auszuführen, müssen wir sie aufrufen Wenn wir uns also die Seite ansehen und den Reiter Elemente überprüfen, werden Sie feststellen, dass wir hier fünf verschiedene Entwicklungen haben . Und jeder von ihnen hat eine Hintergrundbildeigenschaft mit dem richtigen Bild. Okay, bis jetzt funktioniert alles gut. Jetzt müssen wir dafür sorgen, dass diese Diashow funktioniert. Im Moment sind die Hintergrundbilder nicht sichtbar. Kümmern wir uns also zunächst darum und schreiben etwas CSS. Eigentlich sehe ich hier, dass mir aus irgendeinem Grund die abschließenden Kommentare für das Banner fehlen . Und auch diesen abschließenden Kommentar im Common-Stil brauchen wir hier nicht . Also lasst uns weitermachen und diese Dinge reparieren. Fügen Sie dann Ihre neuen Kommentare für die Diashow ein. Und wählen Sie dann Wrapper-Div-Elemente aus. Zunächst definiere ich die Breite und Höhe. Machen wir beide zu hundert Prozent und setzen dann ihre Position auf absolut. Außerdem müssen wir die Eigenschaften oben und links definieren. Beide sollten gleich Null sein. Im Moment sind Bilder immer noch nicht sichtbar, da sie keine Breite und Höhe haben. Lassen Sie uns also die DB selbst auswählen und ihre Breite und Höhe festlegen, beide 200 Prozent. Okay, jetzt wird also eines der Bilder angezeigt. Die anderen sind hier unten platziert, aber sie sind nicht sichtbar. Wir müssen alle Bilder übereinander platzieren. Und dafür verwenden wir Position Absolute. Außerdem werde ich ein paar Hintergrundeigenschaften verwenden . Die erste wird die Hintergrundfarbe sein. Wir müssen es in Deckung bringen. Dann verwende ich als Position des Hintergrunds die Mitte. Und auch hier brauchen wir eine Wiederholung im Hintergrund mit Wert, keine Wiederholung. Okay, jetzt haben wir hier ein Problem. Der Inhalt der Landingpage landete hinter den Bildern und das ist nicht machbar. Um das zu beheben, verwenden wir die Z-Index-Eigenschaft mit einem niedrigeren Wert als Null Also machen wir es minus eins. Ordnung, jetzt ist das Problem behoben und wir müssen weitermachen und diese Diashow Wir werden also standardmäßig alle Bilder ausblenden und sie dann mit Opazität anzeigen Wir werden eine neue Klasse in CSS verwenden, wir Opazität mit dem Wert eins definieren Und wir werden diese neue Klasse in der Reihenfolge von JavaScript aus zu den Entwicklungen hinzufügen . Lassen Sie uns also weitermachen und alle div-Elemente mit Opazität Null ausblenden alle div-Elemente mit Opazität Null Wie Sie sehen können, sind Bilder versteckt. Als Nächstes zeige ich standardmäßig das erste Bild an. Dafür werden wir die oben erwähnte neue Klasse verwenden. Um also der ersten Entwicklungsklasse zuzuordnen, die wir Veränderung nennen werden, brauchen wir hier eine kleine Bedingungserklärung. Wenn I also gleich eins ist, bedeutet das, dass es sich um die erste Iteration handelt Das erste div-Element wird erstellt. Dies ist der Moment, in dem wir jedem Klassenwechsel zuweisen müssen . Dafür brauchen wir hier den AND-Operator. Und dann müssen wir den Klassenwechsel in der Entwicklung noch verstärken. Dafür verwende ich eine der Eigenschaften namens Klassenliste, die uns alle Klassen gibt, die das Element hat. Außerdem können wir damit auf verschiedene Methoden zugreifen. Einer von ihnen ist bei. Geben wir hier also den Klassenwechsel an. Wenn wir also noch einmal auf der Registerkarte Elemente nachschauen, werden Sie feststellen, dass das erste Element eine Klassenänderung hat. Um das Bild anzuzeigen, müssen wir nun zur CSS-Datei gehen und das div-Element mit einer Klassenänderung auswählen. Und wir müssen die Opazität auf eins setzen. Okay, wie Sie sehen können, ist das erste Hintergrundbild sichtbar. Und jetzt müssen wir endlich dafür sorgen, dass diese Diashow funktioniert. Also müssen wir die Div-Elemente entfernen und in einigen Intervallen Klassenänderungen hinzufügen . Und wir müssen es unendlich machen. Gehen wir also zur JavaScript-Datei und wählen alle div-Elemente aus. Ich werde eine neue Variable erstellen, nennen wir sie d, dz. Und um dann alle div-Elemente auszuwählen, verwende ich die Methode Query Selector, All Wir müssen hier die Klasse slideshow angeben, gefolgt vom Tagnamen D. Okay, Nächstes erstelle ich eine neue Funktion namens slideshow, in der wir eine der eingebauten Methoden verwenden müssen, in der wir eine der eingebauten Methoden verwenden müssen die als set interval bezeichnet wird Dadurch können wir die Funktion immer wieder mit einigen Intervallen ausführen immer wieder Diese Methode benötigt zwei Argumente. Die erste ist die Callback-Funktion, die mit Intervallen ausgeführt wird Was das zweite Argument betrifft, so wird es das Intervall selbst sein. Und es sollte in Millisekunden ausgedrückt werden. Fügen wir also Ihre Pfeilfunktion ein. Und als Zeitmenge des Integrals fügen wir 1.000 Millisekunden Irgendwann werden wir es ändern und erhöhen. Jetzt müssen wir also die Entwicklung auswählen , bei der der Klassenwechsel stattfindet. Dann müssen wir die Klasse aus diesem Element entfernen und sie zum nächsten div-Element hinzufügen. Lassen Sie uns also eine neue Variable erstellen. Ich nenne es div und wähle dann die Entwicklung mit der Methode querySelector Wir müssen hier die gläserne Diashow mit anschließendem Klassenwechsel angeben . Sobald also das div-Element mit Klassenänderung ausgewählt ist, müssen wir die Klasse aus diesem Element entfernen. Also brauchen wir wieder Klassenlisteneigenschaft. Aber in diesem Fall geben wir mit der Methode namens remove hier die Klassenänderung an. Und schließlich müssen wir es zu den nächsten div-Elementen hinzufügen. Dafür verwende ich eine der Eigenschaften, die als nächstes Element Sibling bezeichnet wird Wir müssen sie an die div-Elemente anhängen Andererseits müssen wir die Eigenschaft class least verwenden und eine Klassenänderung hinzufügen. Um diesen Code auszuführen, müssen wir also die Funktion slideshow aufrufen Ordnung, wie Sie sehen können, ändert sich das Hintergrundbild nach jeder Sekunde Sobald alle fünf Bilder angezeigt werden, erhalten wir eine Fehlermeldung und diese Diashow funktioniert nicht mehr. Das passiert, weil die JavaScript-Engine, sobald wir das letzte Element erreicht haben , kein anderes Geschwisterelement finden kann Es existiert nicht. Sobald wir das letzte Hintergrundbild erreicht haben, müssen wir diese Diashow erneut mit dem ersten Hintergrundbild beginnen . Also lass uns weitermachen und das tun. Wir müssen eine neue Variable erstellen , die der Zähler sein wird. In diesem Fall verwende ich Let's Declaration, weil sich ihr Wert ändern wird. Nennen wir diese Variable a und machen sie standardmäßig gleich eins. Also müssen wir den Zähler um eins erhöhen. Und sobald es größer als die Länge der Div-Elemente ist , bedeutet das, dass wir diese Diashow erneut mit dem ersten Bild beginnen müssen diese Diashow erneut mit dem ersten Bild Und wir müssen wieder eins gleich machen. Um a um eins zu erhöhen, müssen wir also den Inkrementsoperator verwenden , der durch doppelte Pluszeichen ausgedrückt wird Dann müssen wir IF-Anweisungen erstellen, in denen wir vergleichen müssen , ob a kleiner als zwei ist die Länge der div-Elemente. Wenn es also stimmt, dann bedeutet das, dass es noch andere Entwicklungen gibt. Also müssen wir diese Codezeile ausführen. Wenn es falsch ist, bedeutet das, dass wir kein weiteres Geschwisterkind mehr haben Und wir müssen die Diashow mit dem ersten Bild starten. Wir brauchen also eine Qelse-Anweisung, in der wir auf die erste Entwicklung zugreifen müssen und dazu einen Klassenwechsel hinzufügen müssen. Und wir müssen auch gleich eins machen. Um also die ersten Div-Elemente auszuwählen, benötigen wir Entwickler, gefolgt von der Indexnummer Null. Dann brauchen wir wieder Klassenlisteneigenschaft mit der Methode add. Und wir müssen deinen Klassenwechsel angeben. Außerdem müssen wir eins gleich machen. Jetzt können Sie sehen, dass die Diashow unendlich ohne Fehler läuft unendlich ohne Fehler läuft Und dafür müssen wir einen Fade-Effekt erzeugen. Verwenden wir Transition. Ordnen wir der Opazität und der Dauer 1 s zu. Jetzt funktioniert also alles perfekt Das einzige, was ich tun werde, ist das Intervall zu erhöhen. Machen wir 20 Sekunden statt eins. Und auch eine längere Dauer des Übergangs. Machen Sie 5 s. Okay, das war's. Diese Diashow wurde erstellt, sie funktioniert einwandfrei. Also lass uns weitermachen. 35. Projekt 4 - Würfel erstellen und anpassen: Okay, sobald wir mit dieser Diashow fertig sind , müssen wir weitermachen und uns um den letzten Teil der Landingpage kümmern , der diese iPhone-Box übertreffen wird Ich nenne es den Würfel. Eigentlich heißt es in echter Mathematik Quader, aber der Einfachheit halber nenne ich es nur den Würfel Wie Sie sehen können, hat es eine 3D-Form. In der Standardeinstellung rotiert es. Unten. Wir haben Controller. Sobald wir den Mauszeiger über sie bewegen, stoppt der Würfel Und dann können wir es mit diesen Controllern auf verschiedenen Seiten drehen . Setzen wir uns hin, was wir tun werden. All diese Dinge werden mit reinem CSS und JavaScript erstellt . Lassen Sie uns zunächst ein HTML-Markup erstellen. Wir müssen es vor das Banner schreiben , weil es auf der linken Seite der Kreditvergabe platziert wird. Lassen Sie uns zunächst neue Kommentare erstellen, Cube und Off Cube. Öffnen Sie dann die Elemente, die der Wrapper sein werden Also werde ich ihm die Klasse Cube Wrapper zuweisen. Als nächstes brauchen wir ein weiteres Div, das der Würfel selbst sein wird. Danach erstelle ich ein weiteres div-Element, das die Vorderseite sein wird. Und es wird ein Bild des iPhone 12 enthalten. Fügen wir also Ihr Bild und wählen Sie iPhone Dot PNG aus dem Bilderordner aus. Als Nächstes müssen wir eine Rückseite erstellen. Öffnen wir also ein weiteres div-Tag mit der Klassenrückseite. Auf der Rückseite werden wir ein Symbol des Apfels haben. Fügen wir also Ihr Augenelement mit einer Klasse FAB, FA, Apple ein. In Ordnung, das war's also mit der Markierung des Würfels. Wir werden uns etwas später um die Steuerung kümmern , denn jetzt werde ich den Würfel stylen. Lassen Sie uns weitermachen und Ihre neuen Kommentare einfügen. Würfel und von Würfel. Wählen Sie dann den Würfel aus und definieren Sie seine Breite und Höhe. Ich werde die Breite festlegen, die geworfen werden soll, um zu rammen. Was die Höhe angeht, werde ich eine 55 Rampe daraus machen. Und ich werde ihm auch eine temporäre Hintergrundfarbe zuweisen . Lass es uns rot machen. Also hier haben wir den roten Hintergrund. Im Moment ist das Bild zu groß, also lassen Sie uns weitermachen und uns darum kümmern. Ich wähle die erste Vorderseite aus und lege ihre Breite und Höhe fest, beide zu 200 Prozent. Und dann schaffen Sie mit einer Polsterung etwas Platz auf der Vorderseite Machen wir 2,5 Rem auf allen vier Seiten. Danach wähle ich das Bild aus. Definieren wir seine Breite und Höhe. Ich setze beide auf 200 Prozent. Und dann werde ich auch Objektfüße mit dem enthaltenen Wert verwenden . Okay, jetzt wurde das Bild kleiner und wir sehen hier den roten Hintergrund des Würfels. Als Nächstes kümmere ich mich um die Vorderseite. Lassen Sie uns also weitermachen und die Hintergrundfarbe ändern. Lassen Sie uns Ihre Farbe F verwenden. Als Nächstes erstelle ich eine 3D-Umgebung, um besser zu sehen, wie der Würfel gebaut wird. Um eine 3D-Umgebung zu erstellen, müssen wir eine der Eigenschaften verwenden, die als prospektiv bezeichnet werden, und wir müssen sie dem Cube-Wrapper zuweisen Wählen wir es also und verwenden wir dann die Perspektive mit dem Wert 100 rampe. Im Allgemeinen definiert die Eigenschaftsperspektive wie weit das Element vom Benutzer entfernt ist. Jetzt müssen wir uns mit der Vorderseite in einer 3D-Umgebung bewegen . Und dafür brauchen wir auch den Platz für die Vorderseite. Und dafür müssen wir eine der Eigenschaften verwenden , die als Transformationsstil mit dem Wert Preserve 3D bezeichnet werden. Wir müssen es dem Würfel zuweisen. Danach teilt es die 3D-Umgebung mit seinen untergeordneten Elementen. Okay, danach müssen wir die Vorderseite bewegen und ein bisschen nach vorne Dafür verwende ich Transform, wo sie die Funktion übersetzen und als Wert Let's Entity oder Five ran. Im Moment ist hier nichts sichtbar, wir haben nur einen weißen Hintergrund. Um also klar zu sehen, was vor sich geht, werde ich den Würfel drehen. Drehen wir es entsprechend der Y-Achse. Und als Wert geben wir, sagen wir, 72 Grad ein. Richtig? Jetzt können Sie die Vorderseite des Würfels im 3D-Raum deutlich sehen. Lass uns weitermachen und uns um die Rückseite kümmern. Ich werde die Breite und Höhe festlegen, beide zu 200 Prozent. Ändern Sie auch die Hintergrundfarbe. Benutze hier die Farben F, E. Und dann müssen wir die Rückseite wie die Vorderseite bewegen In diesem Fall müssen wir eine Funktion mit dem Wert minus fünf Runden übersetzen Funktion mit dem Wert minus fünf Runden Hier haben wir also die Rückseite, aber ihre Position ist nicht korrekt Das müssen wir korrigieren. Und dafür sollten wir die Positionen beider Seiten auf absolute Werte setzen . Wie Sie sehen können, die meisten Eigenschaften und sind die meisten Eigenschaften und Werte für beide Seiten gleich. Also können wir hier die Rückseite hinzufügen. Dann können wir die Vorderseite separat auswählen. Lassen Sie uns 2D-Padding- und Transformationseigenschaften zuweisen. Was die Rückseite angeht, lassen wir Sie einfach das Eigentum transformieren. Okay, jetzt sehen beide Seiten gut aus. Um es besser zu sehen, werde ich die Seite überprüfen und den Tab Elemente verwenden. Wählen wir einen Würfel aus. dann unten Konzentrieren Sie sich dann unten auf den Wert der Rotate-Funktion. Und dann mit dem oberen Pfeil ändern wir den Wert. Es kann also sehen, dass sich der Würfel dreht und beide Seiten gut aussehen. Okay, bevor ich zu den anderen Seiten übergehe, werde ich das April-Symbol auf der Rückseite anpassen Kümmern wir uns zunächst darum. Die Position des Symbols. Ich werde es in die Mitte der Rückseite legen. Also lasst uns weitermachen und das Klassenzentrum nutzen. Lassen Sie uns tatsächlich den Wert der Rotationsfunktion ändern , um das Symbol zu sehen. Nun, machen wir 140 Grad draus. Okay, lass uns weitermachen und das Symbol stylen. Wählen wir es aus. Zuerst. Erhöhen wir die Schriftgröße, machen wir daraus 12 Reime Dann ändere die Farbe. In diesem Fall verwende ich die Primärfarbe. Außerdem verwenden wir Textschatten. Ich werde einen mehrstufigen Schatten erstellen. Der erste wird zweimal 0,1 Rem sein und dann auf RAM zeigen. Und die Farbe AAA. Was den zweiten Schatten angeht, wird er ein linker Schatten sein. Fügen wir hier also zweimal -0,1 Gramm ein und zeigen dann auf RAM mit derselben Farbe Das Symbol ist also gestylt, aber wie Sie sehen können, müssen wir es um 180 Grad drehen Verwenden wir also Transformieren mit der Funktion „y drehen“ und fügen als Wert Ihre 180 Grad ein. Das war's mit der Rückseite. Jetzt müssen wir uns um die anderen Seiten kümmern. Als Nächstes kümmere ich mich um die Ober- und Unterseite und wir erstellen sie mit Vorher-Nachher-Pseudoelementen Zunächst werde ich den Würfel anders drehen , um beide Seiten anzuzeigen. Also ändern wir, drehen wir y hinein, drehen x als positiven Wert. Fügen wir hier 91 Grad ein. Im Moment ist die Unterseite also in unserer Nähe. Und ich werde Sie von der oberen Seite nehmen es mit dem vorherigen Pseudoelement erstellen Wählen wir also die Vorderseite damit vor den Pseudoelementen Lassen Sie uns zunächst den Inhalt definieren und ihn leer machen. Dann lege ich fest, wir können die eingestellte Breite auf 100% ausblenden. Was die Höhe angeht, werde ich dafür sorgen , dass sie sich umdreht. Und ändere auch die Hintergrundfarbe. Mach es F E. Im Moment ist das Element nicht sichtbar. Wir müssen seine Position definieren. Lassen Sie uns seine Position also auf absolut setzen. Definieren Sie danach die Eigenschaften oben und links Lassen Sie uns beide auf Null setzen. In Ordnung? Wie Sie sehen können, ist das Element immer noch nicht sichtbar. Dies passiert, weil die 3D-Umgebung für das vorherige Pseudoelement nicht gemeinsam genutzt Und um das zu beheben, müssen wir erneut transform style preserve 3D verwenden und es dem übergeordneten Element zuweisen. Drehen Sie dann nach unten die Elemente entsprechend X-Achse um -90 Grad Jetzt ist das Element sichtbar, aber es ist nicht ganz richtig platziert , da es entsprechend der Mitte gedreht ist Es ist ein Standardursprung der Transformation. Also müssen wir es ändern und es an die Spitze bringen. Wir müssen den Ursprung in das Value-Top transformieren. In Ordnung, das war's also mit der Oberseite. Lass uns weitermachen und uns um den unteren kümmern. Tatsächlich werden die meisten Eigenschaften und Werte für beide Seiten gleich sein. Also füge ich hier nach Pseudoelementen wähle es dann separat vor Pseudoelementen Schnappen Sie sich diese vier Eigenschaften und fügen Sie sie hier ein. Dann werde ich diesen Code duplizieren. Verwandle das Vorher in das Nachher. Dann brauchen wir unten statt oben. Als nächstes entfernen wir das Minuszeichen von hier aus. Wie wahrscheinlich wird der Transformationsursprung den Tiefpunkt erreichen. Okay? Wenn wir also den Würfel drehen, werden Sie sehen, dass die Ober - und Unterseite fertig sind. Lass uns weitermachen und uns um die linke und rechte Seite kümmern. Ich werde sie mit Vorher - und Nachher-Pseudoelementen auf der Rückseite erstellen - und Nachher-Pseudoelementen auf der Rückseite Lassen Sie uns den Würfel also erneut entsprechend der Y-Achse drehen. Mit dem Wert -91 Grad. Wir werden diese Seiten erstellen. In ähnlicher Weise beginnen wir mit der linken Seite. Ich werde es mit dem vorherigen Pseudoelement erstellen. Wählen wir also die Rückseite mit dem Pseudoelement davor als Inhalt aus Ich stecke dein iPhone ein. Definieren Sie dann Breite und Höhe. Ich stelle die Breite ein, um mich umzudrehen. Was die Höhe angeht, machen wir sie zu 100%. Dann ändere die Hintergrundfarbe, mache es F. Also im Moment ist die linke Seite nicht sichtbar, weil wir auch hier Positionen und die Rotationsfunktion verwenden müssen. Lassen Sie uns also die Position auf absolut setzen. Definieren Sie dann die Eigenschaften oben und links. Ich setze beide auf Null. Und danach müssen wir mit der Rotation-Y-Funktion mit dem Wert -90 Grad transformieren Rotation-Y-Funktion mit dem Wert -90 Grad Jetzt ist das Element also sichtbar, aber wie Sie sehen können , müssen wir auch hier den Ursprung der Transformation ändern . Stellen wir es auf links. Okay, jetzt ist das Element positioniert und jetzt müssen wir uns um seinen Inhalt kümmern. Ich werde dem iPhone eine SMS schicken. Lassen Sie uns zunächst den Würfel erneut drehen. Lassen Sie uns das Minuszeichen von hier aus loswerden. Und dann mach weiter und passe den Text an. Ich platziere es in der Mitte. Verwenden wir dafür Flexbox. Wir brauchen Display Flex. Und für eine perfekte Zentrierung müssen wir Justify Content Center verwenden, gefolgt vom Alignment Items Center Danach erhöhen wir die Schriftgröße und machen es zu Ram. Außerdem werde ich die Schriftstärke 300 etwas leichter machen . Und als Farbe verwenden wir Ihre Farbe EC 1919. In Ordnung, das war's mit der linken Seite. Jetzt müssen wir auf die gleiche Weise die rechte Seite erstellen, die der linken ähnlich sein wird. Also füge ich hier nach Pseudoelementen hinzu. Wählen Sie dann die vorherigen Pseudoelemente separat aus. Und schnapp dir diese vier Zeilen von hier aus. Wählen Sie danach Pseudoelemente aus und fügen Sie die folgenden Eigenschaften und Werte ein, wir benötigen obere Null, und schreiben Sie dann Null Dann müssen wir die Drehung von Y um 90 Grad transformieren. Und schließlich müssen wir den Ursprung und den Wert transformieren, oder? Okay, das war's mit dem Würfel. Alle Seiten sind vorbereitet. Wenn ich es in beide Richtungen drehe, werden Sie sehen, dass alle Seiten erstellt sind. Jetzt werde ich die rote Hintergrundfarbe des Würfels entfernen . Lass es uns entfernen. Außerdem erstelle ich einen Box-Shadow, um die Kanten dieser Seiten darzustellen Erstellen Sie also zunächst einen Schatten für die Vorder- und Rückseite. Es wird ein mehrstufiger Schatten sein. Zunächst benötigen wir hier inset is going to be inner shadow mit den Werten 0,1 RAM dreimal und der Farbe D, D, D. Dann kopiere diesen Wert und füge ihn hier Und fügen Sie ein Minuszeichen ein, wo die ersten beiden Werte stehen. Wir brauchen den gleichen Schatten auch für Vorher- und Nachher-Pseudoelemente. Also schnappen wir uns diesen Code und fügen ihn für sie ein. Okay? Wenn wir den Würfel erneut drehen, werden Sie sehen, dass alles gut aussieht. Richtig? Als Nächstes werde ich die Steuerelemente anpassen und auch dafür sorgen, dass der Würfel funktioniert 36. Projekt 4 - Cube-Controller erstellen und anpassen: Okay, nachdem wir die Endkunden erstellt haben, den Würfel, werde ich mich jetzt um die Steuerung kümmern Lassen Sie uns weitermachen und ein HTML-Markup erstellen. Die Steuerelemente werden Teil des Cube-Wrappers sein, also müssen wir sie hineinlegen Lassen Sie uns Ihre Kommentare und Steuerelemente erstellen. Öffnen Sie dann die Div-Elemente mit den Klassensteuerelementen. Insgesamt werden wir also sechs verschiedene Kontrollen haben. Sie werden durch die Font Awesome-Icons dargestellt und sie werden mit den Link-Elementen umhüllt. Lassen Sie uns also weitermachen und den Link-Tag öffnen. Dann ist das IS-Element des Instituts mit einer Klasse FAS , ein Pfeil nach oben Außerdem werde ich eine weitere Klasse hinzufügen. Tatsächlich drehen wir den Würfel mit diesem Symbol in X-Richtung Also füge ich dein oberes X-Steuerelement ein. Wie gesagt, wir werden sechs Pfeile haben. Also lass uns das Link-Element fünfmal duplizieren und dann die Klassennamen ändern. Der zweite wird ein Pfeil nach unten sein , als wir hier brauchen, unterste X-Kontrolle. Der nächste wird Pfeil links sein. Links. Warum kontrollieren, als wir dich brauchen? Pfeil rechts und rechts? Warum kontrollieren? Der nächste sollte eingegrenzt werden. Top-Z-Steuerung. Und für den letzten brauchen wir die Z-Steuerung mit Pfeil nach oben und unten. Okay, also hier haben wir unsere Kontrollen. Lassen Sie uns weitermachen und sie anpassen. Ich werde hier neue Kommentare, Steuerelemente und Steuerelemente einfügen . Wählen Sie dann die Wrapper-Div-Elemente aus. Also werde ich mich zunächst um die Position der Bedienelemente kümmern . Lassen Sie uns seine Position auf absolut setzen. Eigentlich sollten die Steuerelemente entsprechend dem übergeordneten Element positioniert werden , bei dem es sich in diesem Fall um einen Cube-Wrapper handelt Sie denken vielleicht, dass wir eine relative Position für den Wrapper benötigen , aber aus diesem Grund handelt es sich um ein flexibles Objekt. Da das Sektionselement einen Display-Flex hat, brauchen wir die relative Position des Würfelwickels nicht mehr , da Sie uns zeigen können, dass es entsprechend dem Würfel-Wrapper positioniert wird positioniert Definieren wir also die unteren und linken Positionen. Ich setze den unteren Wert auf -15 RAM. Was die Linke betrifft, so werden es 50% sein. Und um dann zu den Elementen zu gelangen, müssen wir acht um -50 Prozent nach links bewegen Also müssen wir hier transformieren, X mit dem Wert -50 Prozent übersetzen Die Hülle der Bedienelemente ist also korrekt positioniert. Lassen Sie uns weitermachen und es anpassen. Ich werde es innerhalb der Höhe definieren. Lassen Sie uns beide auf zehn RAM setzen und auch die Hintergrundfarbe ändern. In diesem Fall verwende ich den RGBA-Wert mit der schwarzen Farbe und mit der Opazität 0,9 Danach mache ich den Hintergrund drum herum und erstelle auch den Rand. Wir brauchen hier also einen Grenzradius mit einem Wert von 50 Prozent. Und dann erstelle eine Grenze mit den Werten one RAM, solid. Und als Farbe verwende ich wieder den RGBA-Wert, die schwarze Farbe und die Opazität 0,8 In Ordnung, lassen Sie uns über die Verpackung sprechen. Eigentlich brauchen wir etwas Platz zwischen dem Würfel und den Steuerelementen. Lassen Sie uns also weitermachen und den Würfel nach oben bewegen. Ich werde jeder Position einen Verwandten zuweisen. Und dann setze die oberste Position auf minus zwei RAM. Bei relativer Position bewegt sich das Element also von seiner aktuellen Position um zwei Rampen nach oben . Okay, lass uns weitermachen und die Pfeile anpassen. Zuallererst werde ich mich um ihre Positionen kümmern. Wählen wir das Link-Element aus und setzen dann die Position auf absolut. Als Nächstes definiere ich die Position für jeden Pfeil separat. Lassen Sie uns also mit den ersten Linkelementen beginnen. Ich wähle es mit dem nth Child Selector aus. Wir müssen hier eines für das erste Link-Element angeben. Dieser Pfeil wird also in der Mitte oben auf der Verpackung platziert der Mitte oben auf der Verpackung Setzen wir die Spitzenposition also auf Null. Und dann brauchen wir wieder die linke Position zu 50%. Und dann transformiere Translate x -50%. Okay, der erste Pfeil ist also positioniert, aber wie Sie gerade sehen können, ist er nicht ganz sichtbar. Lassen Sie uns also weitermachen und das Problem beheben. Ich wähle I-Elemente aus. Lassen Sie uns die Schriftgröße erhöhen und sie auf 1,5 RAM erhöhen. Dann ändere die Farbe. Du siehst deine Primärfarbe. Und außerdem werde ich die Opazität verringern . Machen wir 0,5 draus. Okay, wie Sie sehen können, sieht es jetzt viel besser aus. Lassen Sie uns weitermachen und den zweiten Pfeil positionieren. Es wird in der Mitte platziert, aber am unteren Rand der Verpackung Also lass uns diesen Code hier duplizieren. Verwandle eins in zwei. Und auch hier brauchen wir unterste Position mit dem Wert Null. Okay, lass uns weitermachen und den dritten Pfeil positionieren. Es wird in der Mitte platziert, aber auf der linken Seite der Verpackung Wählen wir also das dritte Verbindungselement und definieren dann die schwierige Position. Machen Sie 50 Prozent draus. Die linke Position wird Null sein. Und um dann an die Elemente zu senden, müssen wir uns erneut transformieren. Aber in diesem Fall müssen wir die Funktion nach Y-Richtung mit dem Wert -50% übersetzen nach Y-Richtung mit dem Wert -50% Der nächste Pfeil wird ebenfalls in der Mitte platziert, aber auf der rechten Seite. Lassen Sie uns also weitermachen und diesen Code duplizieren. Es wird das vierte Linkelement sein. Und wir müssen die richtige Position mit dem Wert Null hören. Okay? Wie Sie sehen können, sind vier Pfeile oder Positionen übrig, nur zwei davon. Lassen Sie uns weitermachen und den fünften Pfeil auswählen. Eigentlich wird es in der Mitte dieser beiden Pfeile platziert . Wir brauchen hier also die besten und die richtigen Positionen, beide zehn Prozent. Dann müssen wir uns transformieren. Aber in diesem Fall verwende ich die Rotationsfunktion. Ich werde das Element um 45 Grad drehen. Okay? Also müssen wir das letzte Symbol positionieren. Lassen Sie uns diesen Code hier duplizieren. Es wird der sechste Artikel sein. Statt oben und rechts brauchen wir hier Boltzmann links Wie Sie sehen können, sind alle sechs Pfeile bereit, sie sind positioniert. Das einzige, was wir tun müssen, ist einen kleinen Schwebeeffekt zu erzeugen Ich werde die Opazität der Icons wieder auf eins erhöhen der Icons wieder auf eins Wählen wir also die Steuerelemente aus. Ein Schwebeflug, gefolgt von den I-Elementen. Lassen Sie uns die Opazität auf eins setzen. Dann verwende Transition mit den Werten Opazität 0,5 s. Okay, schauen wir mal, die Steuerelemente sind angepasst und jetzt müssen wir sie zum Laufen bringen Also lass uns weitermachen. 37. Projekt 4 - Würfel arbeiten lassen: Ordnung, also ist alles bereit, um mit der Programmierung des Würfels und der Steuerung zu beginnen Zuerst lasse ich den Würfel automatisch rotieren, und dann programmieren wir die Steuerung. Moment ist der Würfel in Y-Richtung um 91 Grad gedreht Y-Richtung um 91 Grad Also werde ich diese Zeile kommentieren. Weiter. Gehen wir zur JavaScript-Datei und fügen neue Kommentare für den Würfel ein. Wählen Sie dann den Würfel aus. Ich werde eine neue Variable erstellen. Wählen wir den Würfel mit der Methode querySelector aus. Wir müssen hier den Klassennamen q angeben. Also drehen wir den Würfel entlang der Y-Achse um ein Grad Und wir werden es mit sehr kleinen Intervallen drehen. Ich meine, nur hundert Millisekunden. Also werde ich eine neue Funktion erstellen. Nennen wir es Play-Pose. Lassen Sie uns eine neue Variable erstellen und ihr eine Pfeilfunktion zuweisen. Jetzt müssen wir eine Methode namens set interval verwenden. Wie Sie wissen, sind zwei Argumente erforderlich. Die erste ist eine Callback-Funktion, die in einigen Intervallen ausgeführt wird Was die zweite betrifft, ist die Höhe des Intervalls selbst. Wie gesagt, das Intervall wird 100 Millisekunden betragen Okay, jetzt müssen wir den Würfel entsprechend der Y-Achse drehen den Würfel entsprechend der Y-Achse Also müssen wir die Stileigenschaft verwenden. Befestigen wir es am Würfel und es folgt der Transport. Jetzt müssen wir den Wert der Rotationsfunktion angeben. Wie gesagt, wir müssen den Würfel nach jedem Intervall um ein Grad drehen . Um das zu tun, erstelle ich zunächst eine neue Variable. Nennen wir es y und setzen es standardmäßig auf Null. Als Nächstes müssen wir an dieser Stelle die Y-Funktion drehen übergeben. Nach jedem Intervall müssen wir den Wert also um eins erhöhen. Also brauchen wir hier ein Dollarzeichen. Dann brauchen wir die Variable y. Und um sie um eins zu erhöhen, müssen wir hier den Inkrementoperator verwenden , der durch doppelte Pluszeichen ausgedrückt wird Darauf werden Abschlüsse folgen. Okay? Rufen wir nun die Funktion auf. Wie Sie sehen können, dreht sich der Würfel. Wenn wir die Seite untersuchen und den Würfel auf der Registerkarte Elemente überprüfen, werden Sie feststellen, dass sich der Wert der Rotationsfunktion nach jeweils hundert Millisekunden um eins erhöht Moment sieht der Rotationseffekt nicht ganz gut aus , weil wir Transition verwenden müssen. Fügen wir also Ihre Transformation und die Dauer 0,5 s ein. In Ordnung, jetzt haben wir einen viel besseren Effekt Als Nächstes kümmere ich mich um die Kontrollen. Eigentlich werden wir eine ähnliche Technik anwenden. Wir werden den Würfel in verschiedene Richtungen drehen. Aber in diesem Fall machen wir das, sobald wir auf die Steuerelemente geklickt haben Lassen Sie uns weitermachen und an jeden Pfeil den Event-Listener mit dem Klick-Ereignis anhängen jeden Pfeil den Event-Listener mit dem Klick-Ereignis Fangen wir mit der oberen Steuerung an. Wir müssen ein Klickereignis an die Link-Elemente anhängen. Im vorherigen Video haben wir den I-Elementen zusätzliche Klassen hinzugefügt und es wäre eigentlich besser, wenn wir diese Klassen dem Aufbau von Link-Elementen zuweisen würden. Denn auch hier müssen wir Link-Elemente auswählen und nicht das Symbol. Ordnen wir diese Klassen also Lean-Elementen zu. Schnell. Ich schneide sie aus und füge sie als Werte der Klassenattribute ein. Okay, danach wählen wir die ersten Link-Elemente Ich werde erneut die Abfrageauswahlmethode verwenden. Und dann spezifizieren Sie hier die Klasse Top X Control und die Paranthese Als Nächstes füge ich einen Event-Listener hinzu . Klicken Sie auf Ereignis Außerdem müssen wir hier die Pfeilfunktion übergeben, die ausgeführt wird, sobald wir auf das Symbol klicken. Sobald wir also auf das obere Steuerelement klicken, müssen wir den Würfel in X-Richtung drehen Also werde ich mir diese Codezeile von hier aus holen. Dann ändere y in x. Hier. Wir brauchen kein Pluszeichen, weil wir den Wert um eins erhöhen werden, sondern um 20 Grad. Wir können hier also entweder x gleich x plus 20 schreiben. In diesem Fall erhöht sich der Wert bei jedem Klick um 20. Oder wir können einfach hier ein Plusgleichheitszeichen schreiben . Diese Ausdrücke sind dieselben. Okay? Außerdem müssen wir eine neue Variable erstellen. Nennen wir es x und setzen es auf Null. Bevor wir alle Steuerungen programmieren, werde ich diese Funktion tatsächlich für eine Weile unterbrechen , um die Ergebnisse besser sehen zu können. Wenn wir also auf das obere Steuerelement klicken, dreht sich der Würfel in X-Richtung um 20 Grad. Okay, machen wir weiter und machen dasselbe für die Bottom Control. Lassen Sie uns diesen Code duplizieren. Verwandle das Ober in das Untere. Und statt des Pluszeichens brauchen wir hier Minus, weil wir den Würfel in die entgegengesetzte Richtung drehen müssen . Okay, also alles funktioniert gut. Lass uns weitermachen und das linke Steuerelement programmieren. Lassen Sie uns diesen Code noch einmal duplizieren. Wir brauchen hier links Y. Ändere auch die Richtung. Wir brauchen die Y-Achse. Wenn ich jetzt auf das linke Steuerelement klicke , dreht sich der Würfel. Aber wir haben hier ein kleines Problem, wenn wir auf den Linkspfeil und dann auf das obere Steuerelement klicken, erhält der Würfel zuerst seine Standardposition und dann dreht er sich. Das brauchen wir nicht. Wir müssen die vorherige Position des Würfels beibehalten. Und um das zu tun, müssen wir alle drei Richtungen definieren , egal welche Richtung wir ändern. Also müssen wir hier rotieren y hinzufügen. Fügen wir Ihre y-Grad ein. Dann müssen wir Z mit Z Grad drehen . Eigentlich müssen wir eine Variable für die Z-Richtung erstellen eine Variable für die Z-Richtung Also lass es uns erstellen und auf Null setzen. Okay, fügen wir hier auch die Rotationsfunktion hinzu. Wir müssen x drehen und dann z drehen. Okay? Wenn wir jetzt nachschauen, werden Sie feststellen, dass alles perfekt funktioniert. In Ordnung. Lassen Sie uns weitermachen und uns um den Rest der Kontrollen kümmern . Lassen Sie uns diesen Code duplizieren und von links nach rechts wechseln. Und auch hier statt des Minuszeichens plus. In Ordnung, die richtige Steuerung funktioniert also einwandfrei. Lassen Sie uns weitermachen und diese beiden Pfeile programmieren. Lassen Sie uns diesen Code noch einmal duplizieren. Also brauchen wir hier oben Z. In diesem Fall müssen wir also den Würfel in Z-Richtung drehen. Also werde ich hier nur y leben. Was die Rotation-Z-Funktion angeht, brauchen wir hier, z minus gleich 20. Okay? Diese Steuerung funktioniert also gut. Lass uns weitermachen und uns um den letzten kümmern. Lassen Sie uns diesen Code hier duplizieren. Dann von oben nach unten wechseln. Und statt des Minuszeichens fügen wir hier Plus ein. In Ordnung, also alle Steuerungen haben perfekt funktioniert. Wir sind fast fertig mit dem Würfel. Wir müssen nur noch ein paar Dinge hinzufügen. Lassen Sie uns den Kommentar von hier entfernen. Wie Sie sehen, hat die Transformationseigenschaft hier nur die Funktion „ y-drehen“. Also müssen wir hier auch andere Richtungen hinzufügen. Sonst funktioniert es nicht richtig. Also müssen wir hier x drehen und dann Z drehen. In Ordnung, jetzt funktioniert alles einwandfrei Das einzige, was ich tun werde, ist zu verhindern, dass sich der Würfel dreht. Sobald wir den Mauszeiger über die Steuerelemente bewegen. Dazu müssen wir eine neue Variable erstellen, die den booleschen Wert haben wird Lass es uns wahr machen. Und dann müssen wir eine if-else-Anweisung innerhalb der Funktion erstellen eine if-else-Anweisung innerhalb der Als Bedingung setze ich Ihren Pool ein. Wenn es also stimmt, müssen wir diese Funktion ausführen. Also schnappen wir uns diesen Code und fügen ihn hier ein. Und wenn es falsch ist, benötigen wir eine else-Anweisung, in der wir die Ausführung dieser Funktion mit der Clear-Interval-Methode beenden müssen. Um das Intervall also zuerst zu löschen, müssen wir es in der Variablen speichern und dann müssen wir diese Variable an die klare Integralfunktion übergeben . Lassen Sie uns also weitermachen und eine neue Variable erstellen. Wir müssen es ohne Wert deklarieren. Dann speichere und verkaufe eine integrale Funktion in diese Variable. Und schließlich übergeben Sie es an die klare Integralfunktion in der else-Anweisung. Also im Moment funktioniert alles gut. Der Würfel dreht sich. Wenn wir jedoch den Wert der Startvariablen ändern und ihr standardmäßig false zuweisen, hört der Würfel auf zu rotieren. Okay, lass uns auch wieder hierher zurückkehren. Jetzt müssen wir das Mouse-Over-Event verwenden. Lassen Sie uns weitermachen und die Steuerelemente auswählen. Ich werde erneut die Methode querySelector verwenden. Geben wir hier die Klassensteuerungen an und fügen Sie dann den Event-Listener ein, indem Sie mit der Maus über das Ereignis fahren Sobald wir also mit der Maus über die Steuerelemente fahren, müssen wir aufhören zu rotieren. Daher müssen wir Boolean auf true, false setzen. Außerdem müssen wir die Funktion erneut aufrufen, um das Intervall zu löschen und die Drehung zu beenden. Wenn ich jetzt den Mauszeiger über die Steuerelemente bewege, hört der Würfel auf zu rotieren Aber sobald wir herausgefunden haben, dass es sich nicht weiter dreht, müssen wir das beheben. Lassen Sie uns diesen Code duplizieren und das Ereignis ändern. Wir brauchen die Maus raus. Und anstatt falsch zu sein, müssen Sie es tun. Okay, jetzt funktioniert alles perfekt. Das einzige, was ich tun werde, ist den Wert der Y-Variablen zu ändern Wert der Y-Variablen Machen wir 20 daraus, denn sobald wir die Seite neu geladen haben, möchte ich, dass der Würfel am Startpunkt leicht gedreht wird Außerdem müssen wir diesen Wert standardmäßig von CSS ändern . Lassen Sie uns also den Kommentar von hier loswerden und hier die Funktionen Rotate X und Rotate Z hinzufügen . Wir müssen beide auf Null setzen. Was die Y-Drehung betrifft, so wird sie 20 Grad betragen. Okay? Das ist es also. Alles funktioniert perfekt. Und eigentlich haben wir die Arbeit am Würfel abgeschlossen. Lassen Sie uns weitermachen und Sie vom nächsten Abschnitt abbringen. 38. Projekt 4 - iPhones-Abschnitt erstellen und anpassen: Okay, sobald wir mit dem ersten Abschnitt fertig sind, ist es jetzt an der Zeit, weiterzumachen und den nächsten zu erstellen Schauen wir uns die fertige Version des Projekts an. Dieser Abschnitt wird relativ einfach sein. Wir werden ein paar Elemente wie die Überschrift haben. Dann bewegen sich die Bilder, die sich beim Schweben verändern , mit einem gewissen Fade-Effekt Und diese beiden Buttons auch mit dem Hover-Effekt. Okay, das ist es also, was wir erstellen werden. Lassen Sie uns anfangen, ein HTML-Markup zu erstellen. Ich werde neue Kommentare einfügen, Abschnitt zwei und Abschnitt zwei. Und dann öffne das Abschnittselement mit einem Klassenabschnitt zwei. Als nächstes werden wir eine Überschrift haben. Und eigentlich werde ich alle Teile dieses Abschnitts noch einmal mit Kommentaren trennen . Fügen wir also eine riesige Überschrift für Abschnitt zwei der Überschrift von Abschnitt zwei ein. Und dann öffne das H1-Tag mit einer Überschrift für den zweiten Klassenabschnitt mit dem Inhalt iPhone 12. Okay, als Nächstes haben wir die Bilder. Fügen wir erneut neue Kommentare ein, Abschnitt zwei Bilder. Dann Ende des Abschnitts zu den Bildern. Und öffne das div-Tag, das wird der Wrapper sein, den ich der Klasse iPhones zuweisen werde Also werde ich Sie einfügen, um Bildelemente zu verschieben. Öffnen wir das erste und wählen das Bild aus. Wir haben einen Ordner namens Images. In diesem Ordner haben wir dann einen weiteren Ordner namens iPhones, in dem wir das iPhone One auswählen müssen, Im2 Außerdem werde ich dem Bildelement ein Klassenattribut mit dem Wert iPhone IMG eins zuweisen . Lassen Sie uns das Bildelement duplizieren und den Namen des Bildes ändern. Wir brauchen hier, iPhones bis IMG. Und ich werde auch den Klassennamen ändern. Wir brauchen hier, img2. Okay, das war's mit den Bildern. Als Nächstes müssen wir den letzten Teil dieses Abschnitts erstellen. Ich meine die Knöpfe. Lassen Sie uns also neue Kommentare erstellen. Schaltflächen in Abschnitt zwei, dann Schaltflächen am Ende des zweiten Abschnitts. Öffnen Sie dann das div-Tag, das der Wrapper sein wird Ich werde ihm die Klasse iPhone BTS zuweisen. Wir werden also zwei verschiedene Schaltflächen haben und sie werden durch die Link-Elemente dargestellt. Öffnen wir also einen Tag mit der Klasse iPhone btn. Außerdem benötigen wir für jede Schaltfläche ein Span-Element. Sie werden angezeigt, sobald wir den Mauszeiger über die Schaltflächen als Inhalt bewegen. Fügen wir Sie lernen mehr als nur Elemente zu duplizieren und den Inhalt des Span-Elements zu ändern. Wir müssen hier einkaufen. Okay, das war's mit dem HTML-Markup. Lass uns weitermachen und anfangen , etwas CSS zu schreiben. Lassen Sie uns Ihre neuen Kommentare für Abschnitt zwei einfügen. Zunächst definiere ich Breite und Höhe. Wählen wir einen Abschnitt mit zwei Elementen und setzen die Breite auf 100%. Was die Höhe angeht, werde ich sie auf 120% des Viewports setzen Lassen Sie uns außerdem mithilfe von Polstern oben und unten in diesem Abschnitt etwas Platz schaffen mithilfe von Polstern oben und unten in diesem Abschnitt Lassen Sie uns ihn oben und unten auf 10% des Viewports und links und rechts auf Null setzen oben und unten auf 10% des Viewports und . Die Höhe dieses Abschnitts beträgt also 120% des Viewports. Die Konstante selbst nimmt jedoch eine Viewport-Höhe von 100 ein. Eine Polsterung oben und unten gibt uns Platz zwischen den Abschnitten Weil die Box-Sizing-Eigenschaft in gängigen Stilen auf Border-Box gesetzt ist auf Border-Box gesetzt Gleich danach werde ich die Elemente mit Flexbox ausrichten Stellen wir also das Display auf Flex ein. Dann müssen wir die Elemente vertikal in einer Spalte ausrichten , sodass wir die Richtung des Flusses ändern müssen. Machen wir eine Kolumne daraus. Als Nächstes richte ich Elemente in der Mitte horizontal aus, indem ich „Elemente mittig ausrichten“ verwende. Um etwas Platz um die Flex-Elemente herum zu schaffen, verwenden wir abschließend etwas Platz um die Flex-Elemente herum zu schaffen, „Inhalt ausrichten“ mit dem Wert space around. Okay, das war's mit diesem Abschnittselement. Lassen Sie uns weitermachen und die Überschrift anpassen. Lassen Sie uns neue Kommentare verfassen. Überschrift des zweiten Abschnitts. Aus der Überschrift des zweiten Abschnitts. Wählen Sie dann die Überschriftenelemente und erhöhen Sie die Schriftgröße auf zehn RAM. Dann werde ich die Schrift mithilfe der Schriftstärke heller machen . Machen wir 200 draus. Und lassen Sie uns die Farbe des Textes auf Schwarz setzen . Okay, das war's jetzt mit der Überschrift, lass uns weitermachen und uns um die Bilder kümmern Fügen wir neue Kommentare ein. Abschnitt zwei Bilder. Dann und aus Abschnitt zwei Bilder. Und wählen Sie das Wrapper-Div-Element aus, das die Klasse iPhones hat Ich werde Breite und Höhe definieren. Stellen wir die Höhe auf 60% des Viewports ein. Das ist für die Breite. Ich mache es zu 50% des Viewports Wir benötigen eine Viewport-Breite von 50. Okay, als Nächstes wähle ich das Bild selbst aus. Und wir müssen Breite und Höhe definieren. In diesem Fall werde ich beide Werte erben. Wir müssen also Breite und Höhe erben . Und ich werde auch Object Contains verwenden. Jetzt sind die Bilder kleiner. Und als nächstes lege ich sie übereinander. Verwenden wir dafür die absolute Position. Okay, das war's vorerst mit den Bildern. Lassen Sie uns weitermachen und die Schaltflächen anpassen. Ich werde neue Kommentare einfügen. Abschnitt zwei Schaltflächen. Und von Abschnitt zwei Schaltflächen. Wählen Sie dann die Wrapper-Div-Elemente aus. Also werde ich mich ausrichten. Aber da wir Flexbox verwenden, brauchen wir hier Display-Flex Danach werde ich den Button selbst anpassen. Wählen wir es also aus. Aber lassen Sie uns vorher die Span-Elemente für eine Weile ausblenden Wählen wir sie aus und setzen die Anzeigeeigenschaft auf „Keine“. Und dann fange an, die Schaltflächen anzupassen. Zunächst setze ich Breite und Höhe, beide auf sechs RAM. Dann ändere den Hintergrund. Ich werde deinen linearen Gradienten verwenden. Definieren wir zunächst die Richtung des Übergangs. Ich werde es nach rechts schaffen. Dann verwende die erste Farbe. In diesem Fall verwende ich den RGB-Wert. Lass uns deine 5013 mal einfügen. Außerdem füge ich einen zusätzlichen Wert ein, nämlich 60%, was bedeutet, dass der Übergang der Anrufer nach 60% der ersten Farbe beginnt Als Nächstes füge ich die zweite Farbe ein. Verwenden Sie erneut den RGB-Wert. Fügen wir hier zwei bis drei Mal ein. Lassen Sie uns als Nächstes etwas Abstand zwischen den Schaltflächen schaffen und sie ebenfalls abgerundet machen. Verwenden Sie den Rand. Ich setze es oben und unten auf Null und dann auf drei Rem auf der linken und rechten Seite. Was den Randradius angeht, setzen wir ihn auf 50% Okay, im Moment, das war's mit den Knöpfen. Als Nächstes erstelle ich diese Frames innerhalb der Schaltflächen mithilfe der After-Pseudoelemente Wählen wir also iPhone btn aus, gefolgt von den Pseudoelementen danach Zunächst müssen wir den Inhalt definieren. Lass es uns leer machen. Dann definiere ich die Breite und Höhe. Lassen Sie uns beide auf 50% setzen. Außerdem werde ich die Anzeige auf Block setzen, um die Elemente durchführbar zu machen. Und schließlich erstellen Sie eine Grenze mit dem Wert 0,1 RAM Solid. Und als Farbe verwenden wir sechs E D a, E6. Hier haben wir also die Frames, aber wie Sie sehen, müssen wir ihre Positionen korrigieren. Sie sollten in der Mitte der Tasten platziert werden. Und ich werde sie auch leicht abgerundet machen. Lassen Sie uns also zunächst border-radius mit dem Wert eins RAM verwenden border-radius mit dem Wert eins Um die Rahmen innerhalb der Schaltflächen zu zentrieren, müssen wir Flexbox verwenden Wie Sie wissen, haben wir alle bereits ein Cluster-Center mit einigen Flexbox-Eigenschaften erstellt ein Cluster-Center mit einigen Flexbox-Eigenschaften Also werde ich beiden Tasten das Klassenzentrum zuweisen. In Ordnung, das war's mit dem Pseudoelement danach. Jetzt werde ich mich um diese Panelelemente kümmern . Standardmäßig sollten sie ausgeblendet sein und wir müssen sie anzeigen, sobald wir den Mauszeiger über die Schaltflächen Bevor wir den Hover-Effekt erstellen, werde ich zunächst die Span-Elemente anpassen Machen wir sie also sichtbar und lassen Sie uns von hier aus keine anzeigen. Wie Sie sehen, die Span-Elemente, sobald sie sichtbar sind, haben die Span-Elemente, sobald sie sichtbar sind, das Layout durcheinander gebracht Zuallererst müssen wir uns um ihre Positionen kümmern. Ich werde sie oben auf den Knöpfen platzieren. Lassen Sie uns also ihre Position auf absolut setzen , dann müssen wir, um Span-Elemente entsprechend ihrem übergeordneten Element zu positionieren, das ist Span-Elemente entsprechend ihrem übergeordneten Element zu positionieren, das ist die Schaltfläche, eine Position relativ zur Schaltfläche zuweisen . Danach lege ich die oberste Position fest. Machen wir es minus drei Rampen. In Ordnung, also diese Pan-Elemente sind positioniert. Als Nächstes werde ich sie anpassen. Lassen Sie uns die Schriftgröße ändern und sie auf 1,6 RAM erhöhen. Außerdem werde ich die Schriftstärke auf 400 setzen. Dann wandle Text in Großbuchstaben um. Schaffen Sie auch etwas Abstand zwischen den Buchstaben. Lass es uns 0,1 laufen lassen. Und dann ändere die Farbe. Ich werde hier die Primärfarbe verwenden. Jetzt die Elemente oder kundenspezifisch. Aber wie Sie sehen, haben wir hier ein kleines Problem. Das erste Spanelement ist in zwei verschiedenen Linien unterbrochen. Und um das zu beheben, definieren wir eine Breite mit dem Wert max content. In diesem Fall nimmt das Element also, wie der Name dieses Werts schon sagt , die Breite ein, die erforderlich ist, um den Inhalt des Elements anzuzeigen. Ordnung, die Span-Elemente sind also angepasst und jetzt müssen wir einen Hover-Effekt erzeugen Zuallererst werde ich diese Span-Elemente standardmäßig ausblenden . Und dafür verwende ich die Transformationseigenschaft mit der Skalenfunktion. Um die Elemente zu verbergen, müssen wir die Skala auf Null setzen. Das Element ist also versteckt. Als Nächstes wählen wir mit dem Mauszeiger eine Schaltfläche aus, gefolgt vom Span-Element Um das Tier sichtbar zu machen, müssen wir die Skala also auf eins setzen. Und verwenden wir auch Transition mit dem Wert ist Transformation 0,5 s. Ordnung? Sobald wir den Mauszeiger über die Schaltflächen bewegen, werden die Span-Elemente schön angezeigt größte Teil dieses Abschnitts ist also erledigt, aber wir müssen noch ein paar Dinge tun. Wir müssen der Überschrift und den Bildern einen Hintergrund hinzufügen. Außerdem müssen wir einen weiteren Ganzzeileneffekt für die Bilder erstellen . Lassen Sie uns mit dem Hintergrund der Überschrift beginnen , die dem Pseudoelement before erstellt werden soll Also lass uns weitermachen und es auswählen. Zunächst müssen wir den Inhalt definieren. Lass es uns leer machen. Und dann definiere Breite und Höhe. Ich werde die Breite des Hintergrunds auf 130% erhöhen. Geben wir für die Höhe eine Viewport-Breite von 30 an. Außerdem benötigen wir einen Hintergrund mit linearer Gradientenfunktion. Ich füge deine beiden Farben ein. Die erste wird die Primärfarbe sein. Für den zweiten wird es weiße Farbe sein. Im Moment ist das Element also nicht sichtbar. Wir müssen ihre Position definieren. Setzen wir es also auf absolut. Außerdem müssen wir die Überschrift relativ positionieren, da es sich um ein übergeordnetes Element handelt , und wir müssen den Hintergrund entsprechend dem übergeordneten Element positionieren . Also hier haben wir den Hintergrund. Als Nächstes definiere ich die Eigenschaften oben und links. Lassen Sie uns beide auf Null setzen. Außerdem müssen wir das Element in X-Richtung verzerren Also verwenden wir Transform, dann die Funktion Skew X. Und als Wert füge ich hier -50 Jetzt sieht der Hintergrund viel besser aus, aber wir müssen ihm noch ein paar weitere Stile hinzufügen. Gerade jetzt. Es ist je nach Mittelpunkt schief, da, wie Sie standardmäßig wissen, der Ursprung der Transformation in der Mitte liegt In diesem Fall müssen wir es ändern und nach links oben ziehen. Lassen Sie uns also weitermachen und den Transformationsursprung auf links oben setzen. Der Hintergrund ist also richtig positioniert. Aber wir haben hier ein kleines Problem. Sie waren nicht hinter dem Hintergrund gelandet. Und um das zu beheben, verwenden wir die Eigenschaft z-index. Ich setze es auf einen niedrigeren Wert als Null. Also machen wir es minus eins. Und außerdem werde ich die Ecken des Hintergrunds mit Border-Radius mit dem Wert eins rep gestalten Ecken des Hintergrunds . In Ordnung, schauen wir uns den Hintergrund an Bevor wir zu den Bildern übergehen, möchte ich den Abstand zwischen der Überschrift und den Bildern vergrößern . Also ist es ihm zugewiesen, Margin Bottom mit dem Wert fünf rangiert. Richtig? Jetzt können wir uns um die Bilder kümmern. Zunächst erstelle ich den Hintergrund. Ich werde wieder einen linearen Farbverlauf mit zwei verschiedenen Farben verwenden . Die erste wird die Primärfarbe sein. Was den zweiten betrifft, sollte er weiß sein. Und dann verwende border-radius mit dem Wert 0,5 rant. Okay, hier haben wir den Hintergrund und das Einzige, was wir tun müssen ist einen Hover-Effekt zu erzeugen Standardmäßig blende ich das zweite Bild aus und zeige es an, wenn der Mauszeiger darauf Also lass uns weitermachen und dieses zweite Bild verstecken. Wählen wir es aus und setzen die Opazität auf Null. Jetzt müssen wir einen Schwebeeffekt erzeugen. Wählen wir die Wrapper-iPhones aus, indem wir den Mauszeiger bewegen, gefolgt vom ersten Bild Setzen wir die Opazität auf Null. Dann werde ich diesen Code duplizieren. Wir brauchen hier G2 und den Opazität One. Und schließlich verwende Transition mit den Werten Opazität 3 s. Wenn wir jetzt also den Mauszeiger über die Bilder bewegen, werden Sie sehen, dass alles perfekt funktioniert Mit diesem zweiten Abschnitt sind wir fertig. Lass uns weitermachen und uns um den nächsten kümmern. 39. Projekt 4 - MacBook-Abschnitt erstellen und stillieren - Teil 1: Ordnung, sobald wir mit dem zweiten Abschnitt fertig sind ist es an der Zeit, weiterzumachen und mit der Arbeit am nächsten Abschnitt zu beginnen , der der MacBook-Bereich sein wird Schauen wir uns zunächst die abgeschlossenen Projekte an und sehen, wie dieser Abschnitt aussieht. Sobald wir auf der Seite nach unten scrollen , öffnet sich das MacBook, das Logo und der Fortschrittsbalken werden angezeigt. Danach wird das Magma eingeschaltet und einige Inhalte werden angezeigt Schauen wir uns also an, was wir erstellen werden. Lassen Sie uns weitermachen und mit dem HTML-Markup beginnen. Ich werde neue Kommentare für Abschnitt drei einfügen. Öffnen Sie dann die Abschnittselemente mit der Klasse Abschnitt drei. Dieses Abschnittselement wird aus zwei Hauptteilen bestehen. Wir werden die Überschrift und den Inhalt haben, wiederum aus verschiedenen Teilen bestehen wird. Lassen Sie uns also Ihre neuen Kommentare für die Überschrift von Abschnitt drei einfügen . Öffnen Sie dann das H1-Überschrift-Tag mit der Überschrift des dritten Klassenabschnitts Und als Inhalt legen wir Ihr MacBook Air ein. Als Nächstes müssen wir den Inhalt erstellen. Fügen wir also neue Kommentare ein. Inhalt des dritten Abschnitts. Öffnen Sie dann das Div-Tag mit einem Inhalt von Class, Abschnitt 3. In diesem Teil werden wir Bilder haben. Ich bin auf den Bildern der oberen und unteren Teile des MacBook zu sehen. Anfangs war es ein Bild und ich habe es in zwei Teile aufgeteilt , um einen MacBook-Öffnungseffekt zu erzielen. Fügen wir neue Kommentare ein. Abschnitt drei Bilder. Dann Ende von Abschnitt drei Bilder. Ich öffne das Bild-Tag und spezifiziere hier den Teil des Bildes. Wir haben einen Bilderordner. Dann müssen wir den MacBook-Ordner und das Bild MacBook-Bildschirmpunkt PNG auswählen . Lassen Sie uns außerdem das Klassenattribut mit dem Wert MacBook IMG one verwenden . Lassen Sie uns diese Codezeile duplizieren und den Bildnamen ändern wir benötigen hier mehrere Tastaturen, viel PNG als öffentlichen Klassennamen. Es wird MacBook img2 sein. Okay, als Nächstes erstelle ich dein Logo und den Fortschrittsbalken beim Laden. Lassen Sie uns also neue Kommentare abgeben. Abschnitt drei wird geladen. Dann Ende des dritten Abschnitts beim Laden. Richten Sie dann das Div-Tag mit einem Wrapper zum Laden der Klasse ein. Als Nächstes erstelle ich ein weiteres div-Tag. Mit einer Klasse, die geladen wird. Es wird aus zwei verschiedenen Elementen bestehen. Das erste wird das Logo sein. Ich bin im Symbol Schrift, Fantastisch, das geöffnet ist. Das Element mit einer Klasse ist FAB, FA, Apple. Was das zweite Element betrifft, wird div sein, das wird der Fortschrittsbalken sein. Ordnung, danach werde ich den letzten Teil des Inhalts erstellen . Er wird Abschnitt drei sein. Lassen Sie uns Ihre Kommentare einfügen. Also öffne ich den Div-Tag, der der Wrapper sein wird Ordnen wir seiner Klasse MacBook-Informationen zu. Innerhalb dieses Elements werden wir drei verschiedene Elemente haben. Ich meine den Überschriftenabsatz und den unteren Absatz. Öffnen wir das H2-Überschrift-Tag mit einer Klassenüberschrift für MacBook Info als Inhalt Fügen wir hier die Lichtgeschwindigkeit ein. Als Nächstes öffne ich das P-Tag mit einem erstklassigen MacBook-Preis als Inhalt. Fügen wir hier ab 999$ ein. Danach müssen wir eine Schaltfläche erstellen. Ordnen wir ihr übrigens die Klasse MacBook zu und mischen uns dann inzwischen Okay, also das HTML-Markup ist erstellt und jetzt müssen wir etwas CSS schreiben Lassen Sie uns weitermachen und Ihre neuen Kommentare für Abschnitt drei einfügen . Dann wähle ich Abschnittselemente aus. Und lassen Sie uns zunächst definieren, dass wir uns verstecken können Ich werde beide auf 200 Prozent einstellen und auch die Hintergrundfarbe ändern. Stellen wir es auf Schwarz. Okay, als Nächstes richte ich die Elemente mithilfe von Flexbox in der Mitte Verwenden wir das Clustercenter, das wir in den gängigen Stilen vorbereitet haben , und weisen es dem Abschnittselement zu. Außerdem müssen wir die Richtung ändern, um Elemente in einer Spalte vertikal auszurichten. Stellen wir also die Flexrichtung ein, um sie anzurufen. Abschließend werde ich oben und unten in diesem Abschnitt etwas Platz schaffen . Verwenden wir Polsterung. Stellen Sie es oben und unten auf 15 RAM und links und rechts auf Null ein. In Ordnung, das war's mit diesem Abschnittselement. Lassen Sie uns weitermachen und die Überschrift anpassen, die derzeit nicht sichtbar ist , da der Hintergrund schwarz ist. Fügen wir also Ihre neuen Kommentare ein, Überschrift für Abschnitt drei. Ende der Überschrift von Abschnitt drei. Wählen Sie dann dieses Abschnittselement aus. Zuallererst werde ich die Schriftgröße erhöhen. Machen wir zehn RAM draus. Dann mache ich die Schrift heller. Stellen wir die Schriftstärke 200 ein. Ändere auch die Farbe. Ich werde deine Primärfarbe verwenden. Und zum Schluss lassen Sie uns unten etwas Platz schaffen, indem wir den Margin Bottom 15 Run verwenden. In Ordnung, schauen wir uns die Überschrift an. Weiter. Ich kümmere mich um den Inhalt. Schauen wir uns das fertige Projekt an. Also werde ich das MacBook zunächst so anpassen, ohne dass es zu Öffnungs - und Ladeeffekten kommt. Wir fügen das Hintergrundbild zum Lade-Wrapper Außerdem werden wir die MacBook-Informationen anpassen. Zuallererst werde ich wahrscheinlich die Größe der MacBook-Bilder verringern . Lassen Sie uns Ihre neuen Kommentare für den Inhalt des Abschnitts einfügen. Dann wähle ich den Inhalt von Abschnitt drei aus und setze seine Breite auf 80 Prozent. Als Nächstes werde ich neue Kommentare für die Bilder einrichten. Wir benötigen Bilder aus Abschnitt drei von Bildern aus Abschnitt drei. In diesem Fall möchte ich also, dass das Bild die Breite vom übergeordneten Element erbt Lassen Sie uns also Inherit einrichten. Wie Sie jetzt sehen können, ist das MacBook kleiner. Als Nächstes richte ich die Elemente des Inhalts mithilfe von Flexbox Fügen wir dem Inhalt ein Klassenzentrum hinzu und ändern wir auch die Richtung, machen wir ihn farbig. Außerdem werde ich Ihre Eigenschaft Perspektive verwenden , weil wir irgendwann einige 3D-Effekte erstellen werden. Ich meine, wir werden das MacBook in einer 3D-Umgebung öffnen. Ich werde die Perspektive setzen, 2000 lief. In Ordnung. Als Nächstes füge ich dem Lade-Wrapper den Hintergrund hinzu, aber vorher müssen wir ihn auf den Bildschirm übertragen Fügen wir also neue Kommentare für Abschnitt drei ein, der geladen wird. Wählen Sie dann den Wrapper aus und setzen Sie seine Position auf absolut. Um es dann entsprechend seinem übergeordneten Element zu positionieren , setzen wir die Position für den Inhalt dieses Abschnitts auf relativ. Als Nächstes lege ich die Breite und Höhe des Wrappers fest und Höhe des Wrappers Lassen Sie uns die Breite auf 60% setzen. Was die Höhe angeht, machen wir es auf 85%. Ich habe diese Werte manuell ausgewählt, um den Lade-Wrapper an den Bildschirm des MacBook anzupassen. Ich verwende für Ihre Prozentwerte, damit das Hintergrundbild auf verschiedene Bildschirmgrößen reagiert auf verschiedene Bildschirmgrößen Lassen Sie uns ein Bild als Hintergrund festlegen. Zuallererst werde ich einen linearen Gradienten verwenden. Fügen wir hier den RGBA-Wert ein. Ich meine die weiße Farbe und stelle die Opazität auf 0,4 ein. Dann verwende hier die gleiche Farbe. Danach definiere ich den Pfad des Bildes. Wir haben einen Bilderordner als einen anderen Ordner, MacBook, und wählen Sie dann MacBook einen Desktop-Punkt-PNG aus. Außerdem werde ich das Positionszentrum definieren. Und auch hier brauchen wir keine Wiederholung. Okay, hier haben wir das Hintergrundbild, aber im Moment passt es nicht zum Bildschirm, weil wir unten einige Inhalte haben. Ich platziere es in der Mitte. Lassen Sie uns also neue Kommentare abgeben. Wir benötigen Abschnitte, die wir informieren, als Ende von Abschnitt drei Informationen und wählen Sie MacBook-Informationen aus. Ich werde seine Position auf absolut setzen. Gehen wir nun davon aus, dass wir viel bessere Ergebnisse erzielt haben, aber wir müssen diesen kleinen Teil des Hintergrundbilds trotzdem ausblenden . Außerdem müssen wir es leicht nach oben bewegen , um den unteren Teil des Bildes zu verbergen. Ich platziere es hinter dem Bildschirm. Und dafür verwenden wir die Z-Index-Eigenschaft. Ich setze es auf einen niedrigeren Wert als Null. Machen wir minus eins. Als Nächstes verschiebe ich das Bild mit der oberen Position ein wenig nach oben. Wenn Sie absolute Position verwenden, werden die Positionen oben und links im Allgemeinen standardmäßig auf Null gesetzt. In diesem Fall handelt es sich bei der Ladeverpackung jedoch um einen flexiblen Artikel. Es wird mit Flexbox zentriert, sodass die Position geändert wird und die Oberseite nicht mehr gleich Null ist Lassen Sie uns also weitermachen und die oberste Position auf 6% setzen. Dadurch werden die Elemente ein wenig nach oben verschoben. Okay, mal sehen, der Hintergrund ist richtig positioniert. Als Nächstes werde ich die MacBook-Informationen anpassen 40. Projekt 4 - MacBook-Abschnitt erstellen und stillieren - Teil 2: Okay, jetzt müssen wir ihnen die MacBook-Informationen stylen, aber vorher werde ich das Logo für eine Weile ausblenden Wählen wir also Laden und weisen Sie zu , dass nichts angezeigt wird. Okay, als Nächstes kümmere ich mich um die MacBook-Informationen. Ich definiere Breite. Stellen wir es auf sieben, um zu laufen. Außerdem werde ich Elemente mithilfe von Textalign Center in der Mitte platzieren Okay, lassen Sie uns als Nächstes weitermachen und die Überschrift gestalten. Wählen wir die Überschrift MacBook-Info aus. Zuallererst werde ich die Schriftgröße erhöhen. Machen wir sechs RAM draus. Dann mache ich die Schrift etwas heller. Also lass uns die Schrift auf 400 setzen und auch die Farbe ändern. In diesem Fall verwende ich die Hauptspalte. Also die Überschrift, sie sieht gut aus, aber ich denke, sie ist nicht ganz sichtbar. Deshalb werde ich die Opazität der linearen Verlaufsfarben leicht erhöhen die Opazität der linearen Verlaufsfarben leicht Im Moment sind es 0,4. Erhöhen wir sie also und machen sie zu 0,6. Okay, jetzt denke ich, dass es besser ist. Gehen wir zum Absatz über. Wählen wir den MacBook-Preis aus. Erhöhen Sie dann die Schriftgröße 2,5 Rem. Außerdem werde ich die Schrift heller machen. Lassen Sie uns die Schriftstärke auf 200 setzen. Außerdem werde ich oben und unten mithilfe von Margin etwas Platz schaffen . Setzen wir es oben und unten auf drei Rem und links und rechts auf Null. In Ordnung, das war's mit dem Absatz. Lassen Sie uns weitermachen und die Schaltfläche anpassen. Ich wähle MacBook BTN aus. Stellen wir die Breite auf 25 RAM ein. Dann definiere ich die Höhe. Machen wir fünf Rem draus. Als Nächstes ändere ich den Hintergrund. Verwenden wir das Hintergrundbild und dann lineare Verlaufsfunktion mit zwei verschiedenen Farben. Der erste wird D, D, D sein . Ich bin hellgrau. Was die zweite betrifft, wird die weiße Farbe sein. Als Nächstes werde ich den Standardrahmen entfernen. Lassen Sie uns die Grenze auf Null setzen. Außerdem werde ich die Ecken der Schaltfläche mithilfe des Randradius abrunden Wir legen Wert auf 0,5 rem. Außerdem verwenden wir Box-Shadow. Ich werde mehrstufige Box-Shadow verwenden. Die erste Runde wird dreimal eine 0,1-Runde geben. Und die weiße Farbe. Was den zweiten betrifft, wird es derselbe Schatten sein, aber auf der linken Seite. Also brauchen wir hier zweimal -0,1 Raum, dann 0,1 RAM und dieselbe weiße Farbe Okay, es wird davon ausgegangen, dass Button viel besser aussieht, aber ich werde ein paar weitere Stile hinzufügen. Definieren wir also die Schriftgröße, machen wir 1,5 RAM daraus. Dann setze ich die Schriftstärke auf 500. Schaffen Sie auch etwas Abstand zwischen den Buchstaben. Lassen Sie es uns auf RAM hinweisen. Ändern Sie auch die Farbe des Textes. Verwenden wir hier die Primärfarbe. Und dann zum Schluss den Typ des gröberen Geräts ändern, es spitz machen In Ordnung, schauen wir uns die MacBook-Informationen an. Es ist maßgeschneidert und jetzt kümmere ich mich um den Ladeteil. Im Moment ist das Apple-Symbol versteckt, also machen wir es sichtbar. Ich werde Display None von hier aus loswerden. Stellen Sie dann Breite und Höhe ein, beide zu 200 Prozent. Als Nächstes kümmere ich mich um seine Position. Lassen Sie uns die Position auf absolut setzen. Und dann definiere die Eigenschaften oben und links. Ich setze beide auf Null. Lassen Sie uns außerdem die Hintergrundfarbe ändern. Ich mache es schwarz. Es ist also klar, dass wir uns in den MacBook-Informationen verstecken müssen. Ich werde das mit Opazität machen. Setzen wir es auf Null. In Ordnung, lassen Sie uns weitermachen und das Logo anpassen. Wählen Sie das Font Awesome-Symbol aus. Erhöhen wir die Schriftgröße, machen wir zehn RAM daraus. Und ändere auch die Farbe. Lass es uns weiß machen. Hier haben wir also das Logo, aber wir müssen seine Position korrigieren. Ich werde das Logo und auch den Fortschrittsbalken in der Mitte platzieren . Dafür füge ich dem Laden ein Clusterzentrum hinzu. Und wir müssen auch die Richtung ändern. Machen wir es zu einer Spalte, weil wir die Elemente vertikal platzieren müssen. Nicole. Okay, kümmern wir uns um den Fortschrittsbalken. Moment ist es nicht sichtbar, weil wir hier nur das leere div-Element haben. Also lass uns weitermachen und es auswählen. Und definieren Sie zunächst die Breite und Höhe. Ich werde mit 222 RAM loslegen. Was die Höhe angeht, lassen Sie uns 0,3 RAM daraus machen. Und ändere auch die Hintergrundfarbe, mache es 888. Jetzt ist der Fortschrittsbalken also machbar, aber er ist zu nahe am Logo platziert. Lassen Sie uns das mit Margin beheben. Ich werde die Marge von unten bis zur Rampe festlegen. Ordnung, das Einzige, was ich mit einem Fortschrittsbalken machen werde , ist, ihn abgerundet zu machen Verwenden wir also den Grenzradius mit dem Wert von fünf rem. Ordnung, das war's mit dem Fortschrittsbalken, wie Sie sich erinnern, wenn wir die Seite nach unten scrollen und das MacBook geöffnet wird, sollte der Fortschrittsbalken das Gefühl haben, dass wir sollte der Fortschrittsbalken das Gefühl haben, dass wir diesen Effekt mit den Pseudoelementen danach erzeugen Wählen wir es also aus. Definieren Sie zunächst den Inhalt. Wir müssen es leer machen. Als Nächstes setze ich die Position auf absolut. Um das Element dann entsprechend seinem übergeordneten Element zu positionieren , weisen wir dem Fortschrittsbalken eine relative Position zu. Und dann füge den nachfolgenden Pseudoelementen einige weitere Stile den nachfolgenden Pseudoelementen Ich werde die Eigenschaften oben und links definieren. Lassen Sie uns beide auf Null setzen. Als Nächstes definiere ich die Breite und mache sie für eine Weile auf 50 Prozent Irgendwann wird es Null sein und es wird steigen, sobald wir nach unten scrollen und der Fortschrittsbalken erscheint. Danach setzen wir einen hohen Wert von 200 Prozent und ändern auch die Hintergrundfarbe. Mach es weiß. Also ist alles bereit. Und jetzt müssen wir dem MacBook einige Effekte hinzufügen. Gehen wir zur Java-Datei und fügen Sie Ihre neuen Kommentare ein, Abschnitt drei. Und Abschnitt drei. Wir müssen also Effekte erstellen und sie anzeigen sobald wir auf der Seite nach unten zum dritten Abschnitt scrollen. Wir werden also Scroll-Events verwenden. Und außerdem werde ich eine neue Klasse hinzufügen. Es ist der Inhalt von Abschnitt drei. Und dann werden wir mit dieser neuen Klasse verschiedene CSS-Stile definieren. Lassen Sie uns zunächst den Inhalt von Abschnitt drei auswählen. Ich erstelle eine neue Variable und wähle diese Elemente dann mit der Methode querySelector Wir müssen hier den Klassennamen angeben , Abschnitt drei Inhalt. Danach füge ich den Event-Listener mit dem Scroll-Ereignis an das Fensterobjekt Eigentlich ist Fenster das globale Objekt. Geben wir hier die Scroll-Ereignisse und übergeben hier auch die Pfeilfunktion, die ausgeführt wird, sobald wir die Seite nach unten scrollen. Danach müssen wir IF-Anweisungen erstellen , in denen wir definieren müssen, ob wir zu diesem Abschnitt nach unten scrollen Drei Inhalte entsprechen nicht dem Zustand der IF-Anweisung. Wir werden ein paar verschiedene Eigenschaften verwenden . Auf einen Blick. Es mag ein bisschen schwierig aussehen, aber ich werde versuchen, es zu erklären. Die erste Eigenschaft , die ich verwenden werde, heißt Page Y Offset. Wir müssen es an das Fensterobjekt anhängen. Diese Eigenschaft gibt die Pixel zurück. Das aktuelle Dokument wurde vom oberen Fensterrand aus gescrollt oberen Fensterrand aus Mit anderen Worten, es ist die Länge des Teils der Webseite , der nach oben gescrollt wurde Als Nächstes müssen wir eine andere Eigenschaft verwenden, die als innere Höhe bezeichnet wird. Diese Eigenschaft gibt die Höhe des Viewports des Fensters zurück Viewports des Fensters Und wir müssen diese Eigenschaft zum Seitenoffset hinzufügen. Dieser Ausdruck gibt uns also die Gesamtentfernung vom oberen Rand der Webseite. Ich meine, der Teil , der nach oben gescrollt wurde , plus die Höhe des Viewports Wir müssen diese Entfernung mit der Position dieses Inhalts in Abschnitt drei vergleichen diese Entfernung mit der Position dieses Inhalts in Abschnitt drei , um herauszufinden, ob wir zum gewünschten Teil der Webseite nach unten scrollen oder nicht. Wir brauchen hier also ein Größeres als- oder Gleichheitszeichen. Und jetzt müssen wir eine andere Eigenschaft verwenden , die Offset Top heißt. Aber in diesem Fall benötigen wir hier oben im Abschnitt drei Inhalte. Diese Eigenschaft gibt uns also die Position der Elemente in Pixeln. Ich meine, es misst den Abstand vom oberen Rand der Webseite. Wenn diese Bedingung also zutrifft, bedeutet das, dass wir zum Inhalt dieses dritten Abschnitts herunterscrollen . Aber eigentlich ist das nicht ganz genug, denn ich möchte die Effekte starten , wenn wir nach unten scrollen und die Hälfte des Inhalts von Abschnitt drei erreichen. Und um diesen Punkt zu definieren, verwende ich eine andere Eigenschaft namens Offset-Höhe. Es gibt uns die Höhe des Elements in Pixeln. Und wir müssen es durch zwei teilen Okay, also wenn diese Bedingung wahr ist, dann bedeutet das, dass wir die Auswirkungen anzeigen müssen. Vorher werde ich testen, ob das gut funktioniert. Also werde ich die Konsole durchkritzelt durchgehen. Lassen Sie uns die Seite überprüfen und zum Konsolen-Tab wechseln. Sobald wir also nach unten scrollen und die Hälfte dieses Abschnitts für Inhalte erreicht haben, werden wir in der Konsole gekritzelt In Ordnung, alles funktioniert gut. Jetzt müssen wir dem Inhalt von Abschnitt drei eine neue Klasse hinzufügen . Verwenden wir hier eine der Eigenschaften namens Klassenliste. Wie Sie wissen, gibt es uns alle Klassen, die das Element hat. Und es ermöglicht uns auch den Zugriff auf die verschiedenen Methoden wie Hinzufügen, Entfernen und Umschalten, die wir hier benötigen. Und ich werde hier die Änderung des Klassennamens angeben. In Ordnung, das war's mit dem JavaScript. Gehen wir zurück zu CSS. Also müssen wir ein paar Dinge tun. Zuallererst werde ich den Lade-Wrapper verstecken. Also weisen wir ihm die Opazität Null zu. Als nächstes müssen wir das MacBook schließen. Dazu drehe ich das erste Bild, das ist der Bildschirm. Wählen wir also das erste Bild und verwenden Sie dann Transformieren, Drehen. Wir müssen es entsprechend der X-Achse drehen. Als Wert gebe ich Ihre -80 Grad ein. Wie Sie sehen können, ist das Bild gedreht, aber das wollen wir natürlich nicht Wie Sie wissen, wird das Element standardmäßig von seiner Mitte aus transformiert. Aber in unserem Fall müssen wir es von unten transformieren. Lassen Sie uns also weitermachen und den Ursprung der Transformation ändern . Mach es Watson. Okay, jetzt ist das MacBook teilweise geschlossen und wir müssen es öffnen, sobald wir nach unten scrollen. Und das ist der Moment, in dem wir den Klassenwechsel nutzen müssen. Wählen wir das MacBook IMG One aus. Als Nächstes müssen wir x transformieren, drehen und wir müssen es auf Null setzen. Außerdem übergehen wir mit Transformation und mit der Dauer 3 s. Wenn ich also nach unten scrolle und den Inhalt von Abschnitt drei erreiche , öffnet sich das MacBook. Okay, das war's mit dem ersten Effekt. Jetzt müssen wir das Logo und den Fortschrittsbalken anzeigen. Lassen Sie uns noch einmal Class Change verwenden, gefolgt vom ladenden Rapper Im Moment ist die Opazität Null und wir müssen sie auf eins setzen Als nächstes müssen wir Transition mit den Werten Opazität statt Dauer 1 s verwenden . Außerdem müssen wir eine kleine Verzögerungszeit hören, da sich das MacBook zunächst öffnen sollte und wir darauf warten müssen Fügen wir hier also 2 s hinzu. Okay, sobald wir nach unten scrollen, öffnet sich das MacBook. Danach werden das Logo und der Fortschrittsbalken angezeigt. Im Moment funktioniert der Fortschrittsbalken nicht. Die Hälfte seiner Breite ist Feld. Also lassen Sie uns weitermachen und uns darum kümmern. Ich mache seine Breite auf Null. Verwenden Sie dann erneut Klassenwechsel, gefolgt von den Pseudoelementen danach Sobald also der Fortschrittsbalken erscheint, müssen wir die Breite des After-Pseudoelements erhöhen die Breite des After-Pseudoelements Lassen Sie uns den Wert auf 100% setzen und dann den Übergang verwenden. Wir müssen uns mit dieser Dauer von einer Sekunde befassen. Und wieder brauchen wir eine gewisse Verzögerungszeit. Stellen wir es auf 3 s. Wenn ich jetzt nach unten scrolle, werden Sie sehen, dass alles perfekt funktioniert. In Ordnung. Danach müssen wir das Logo und den Fortschrittsbalken ausblenden und die MacBook-Informationen anzeigen. Verwenden wir also wieder Change. Dann. Wählen Sie Laden und setzen Sie die Opazität auf Null. Verwenden Sie erneut Übergang 1 s und dann die Verzögerungszeit 5 s. Okay, sobald wir nach unten scrollen, werden das Logo und der Fortschrittsbalken ausgeblendet. Das Hintergrundbild wird angezeigt. Danach müssen wir die MacBook-Informationen anzeigen. Verwenden wir also wieder Change. Mit MacBook-Informationen. Wir müssen die Opazität auf eins setzen. Und wieder müssen wir die Übergangsopazität 1 s und die Verzögerungszeit 6 s verwenden Übergangsopazität 1 s und die Verzögerungszeit . Okay? Es ist also zu sehen, dass alles perfekt funktioniert und wir sind mit diesem Abschnitt fast fertig. Das einzige, was ich tun werde, ist die Form des Hintergrunds dieses Abschnitts mithilfe der Eigenschaft Clip Path zu ändern . Eigentlich habe ich die Werte bereits vorbereitet, also werde ich sie aus dieser Textdatei kopieren und sie an diese Vorlesung anhängen. Sie können es also entweder herunterladen und kopieren die Werte sind genau richtig manuell. In Ordnung, also endlich sind wir mit diesem Abschnitt fertig. Hoffentlich war es interessant, weil wir ein paar nette und coole Effekte kreiert haben. Lassen Sie uns weitermachen und uns um den nächsten Abschnitt kümmern. 41. Projekt 4 - Uhren erstellen und stilen Abschnitt: Ordnung, ich habe die Arbeit am MacBooks-Bereich abgeschlossen In Ordnung, ich habe die Arbeit am MacBooks-Bereich abgeschlossen, und jetzt ist es an der Zeit, sich um den nächsten Abschnitt zu kümmern , der der Apple Watch-Bereich sein wird Schauen wir uns das fertige Projekt an. Also hier haben wir die Apple-Uhren. Ich meine, der Kunde kann mithilfe dieser Steuerelemente verschiedene Groß - und Kleinschreibung ausprobieren mithilfe dieser Steuerelemente verschiedene Groß - um die bevorzugte Kombination auszuwählen diese Effekte mithilfe von CSS und JavaScript zu erzeugen. Zunächst müssen wir mit dem HTML-Markup beginnen. Lassen Sie uns also weitermachen und Ihre neuen Kommentare für Abschnitt vier einfügen . Dieses offene Abschnittelement mit einer Klasse, Abschnitt 4. Als Nächstes müssen wir ein Div-Tag erstellen, das die Hülle der Uhren sein wird Ich bin in den Bands und Cases. Aber lassen Sie uns vorher neue Kommentare einfügen. Bereich für Uhren und Off-Sektion für Uhren. Und dann öffne den Div-Tag mit einer Klassenuhr. Dieses Element wird aus zwei verschiedenen Teilen bestehen, ich meine die Bänder und Hüllen. Fügen wir neue Kommentare für Uhrenarmbänder ein. Öffnen Sie dann den Div-Tag , der die Bilder der Bands umschließt. Also werde ich ihr eine Klasse zuweisen, Wachhosen. Öffnen Sie dann das Bild-Tag und wählen Sie das Bild aus. Wir benötigen Ordnerbilder. Dann schaut ein anderer Ordner zu. Und wir müssen Watch Band One JPG auswählen. Außerdem werde ich dem Bildelement ein Klassenattribut mit einem Werteüberwachungsband, IMG, zuweisen Bildelement ein Klassenattribut mit . Insgesamt werden wir also neun verschiedene Bilder haben. Ich werde diese Codezeile achtmal duplizieren und dann schnell die Bildnamen ändern. Wir brauchen Zahlen von zwei bis neun. Okay, das war's mit der Band. Als nächstes müssen wir uns Fälle ansehen. Lassen Sie uns also Ihre neuen Kommentare einfügen. Uhrengehäuse damals und von Uhrengehäusen. Dann hole ich mir den gesamten Code von hier, füge ihn ein und lass uns zuerst die Klasse ändern. Ich meine, wann wir Bänder in Hüllen umwandeln müssen, dann brauchen wir Koffer, anstatt überall verboten zu werden. Und außerdem werde ich die Erweiterung ändern. Wir brauchen PNG statt JPG. Okay, schauen wir uns die Bands und Fälle an. Als Nächstes erstelle ich die Steuerelemente. Wir werden vier verschiedene Kontrollen haben. Lassen Sie uns also Ihre neuen Kommentare einfügen. Uhr steuert mehr als n von Uhren-Bedienelementen. Als Nächstes öffne ich das Link-Tag mit der Klassenüberwachungssteuerung. Eigentlich wird es der gebräuchliche Klassenname sein. Aber darüber hinaus brauchen wir individuelle Klassenüberwachung, höchste Kontrolle. Und dann übergebe ich im Link-Element das Font Awesome-Symbol mit der Klasse FAS , FAA, angle up Insgesamt werden wir also vier verschiedene Kontrollen haben. Ich werde das Link-Element dreimal duplizieren und dann müssen wir die Klassen ändern. Der zweite wird also Watch, Right Control sein. Was das Font Awesome-Symbol angeht, wird es nach rechts abgewinkelt sein. Dann brauchen wir die untere Steuerung der Uhr, die nach unten abgewinkelt ist. Und zum Schluss schauen Sie sich Left Control an. Was das betrifft, wird das Symbol nach links abgewinkelt sein. Okay, endlich müssen wir den Boden schaffen. Fügen wir wieder neue Commons ein, schauen wir uns Batson und Watchbutton an Und dann erstelle jetzt Button-Elemente mit der Klassenuhr, btn und mit dem Inhalt In Ordnung, das war's mit dem HTML-Markup. Lassen Sie uns weitermachen und mit der Anpassung dieses Abschnitts beginnen. Zuerst werden wir es stylen und dann werden wir es mit JavaScript zum Laufen bringen. Lassen Sie uns also weitermachen und Ihren neuen Kommentarbereich für das Ende von Abschnitt vier einfügen . Wählen Sie dann Abschnittselemente und definieren Sie die Höhe dieses Abschnitts. Ich werde 140% des Viewports daraus machen. Außerdem werde ich oben und unten in diesem Abschnitt Platz schaffen , indem ich Polsterungen verwende Stellen wir es oben und unten auf 20 und dann links und rechts auf Null ein. Bevor wir weitermachen, werde ich die Größe der Bilder verringern Ich meine sowohl Bands als auch Koffer. Fügen wir also einen neuen Kommentarbereich für Uhren ein als das Ende von Abschnitt vier Uhren. Außerdem füge ich hier noch einen Kommentar zu Uhrenhosen ein. Wählen Sie dann das Uhrenarmband IMG. Ich werde die Breite und Höhe definieren. Stellen wir beide auf 35 RAM ein. Und ich werde auch Object Fit Contain verwenden. Als nächstes, wenn es auch für Uhrengehäuse gilt. Also werde ich diesen Code hier duplizieren und dann Bänder in Groß- und Kleinbuchstaben umwandeln. Und statt des Uhrenarmbands IMG schauen wir uns einfach das Gehäuse IMG an. Okay, wie Sie sehen können, wurden die Bilder kleiner und jetzt müssen wir uns um die Ausrichtung kümmern. Ich werde Flexbox verwenden. Also müssen wir den Sektionselementen ein Klassenzentrum hinzufügen, auch bei Uhren und dann bei Kurven und Gehäusen Als Nächstes müssen wir die Biegerichtung für die Sektionselemente und auch für die Gehäuse ändern . Wählen wir Uhrengehäuse aus und stellen die Biegerichtung auf Spalte ein. Im Moment sind die Kurven also horizontal angeordnet. Was die Gehäuse angeht, sie sind vertikal angeordnet, aber das Layout ist immer noch durcheinander Jetzt müssen wir die Positionen manipulieren. Ich werde zwei Div-Elemente zuweisen, Position Absolute, ich meine, Wrapper von Bändern und Und ich werde einen dieser CSS-Kombinatoren namens Child Selector verwenden , die direkten untergeordneten Elemente auswählt, in diesem Fall die direkten Div-Elemente in diesem Fall die direkten Div-Elemente Lassen Sie uns die Position auf absolut setzen. Als Nächstes benötigen wir die relative Position für die übergeordneten Elemente, die ich in Uhren habe. Wählen wir es also aus und setzen die Position auf relativ. Und außerdem definiere ich Breite und Höhe. Lassen Sie uns beide auf 100% setzen. Okay, jetzt sind die Bilder gut ausgerichtet und wir müssen nur einige davon ausblenden , denn wie Sie sehen, haben wir hier einen Scrollbalken und auch einige der Hüllen sind im MacBooks-Bereich platziert Um das zu beheben, müssen wir Overflow Hidden verwenden In Ordnung, lassen Sie uns jetzt über die Uhren sprechen. Ich kümmere mich um die Kontrollen. Lassen Sie uns Ihre neuen Kommentare für die Watch-Bedienelemente einfügen. Zuallererst werde ich mich um ihre Positionen kümmern. Wie Sie wissen, sind sie direkte untergeordnete Elemente des Abschnittelements. Also werde ich sie entsprechend diesem Abschnitt positionieren. Wählen wir die Uhrensteuerung und weisen ihr die absolute Position zu. Dann benötigen wir die relative Position für dieses Abschnittselement. Jetzt definiere ich die Positionen für jedes Steuerelement separat. Lass uns weitermachen und mit der ersten beginnen. Definieren wir zunächst die obere und linke Position. Ich werde die obere 222-Viewport-Höhe als wahrscheinlich linke Position festlegen als wahrscheinlich linke Position Ich werde 50 Prozent draus machen. Und außerdem müssen wir vertikal an die Steuerung senden . Und dafür müssen wir es bewegen. Ich meine, Sie müssen hier die Funktion translate x mit dem Wert -50% verwenden Funktion translate x mit dem Wert -50% Hier haben wir also die oberste Kontrolle. Im Moment ist es sehr klein und schwer zu erkennen, also werde ich es stylen. Definieren wir seine Breite und Höhe. Ich werde beide auf RAM setzen. Dann ändere die Hintergrundfarbe. Lassen Sie uns Ihren RGBA-Wert verwenden. Fügen wir hier 22013 Mal und dann die Opazität 0,4 und machen sie dann mit dem Randradius abgerundet Setzen wir es auf fünf Rem. Als Nächstes platziere ich das Symbol in der Mitte. Und dafür nutzen wir das Klassenzentrum. Ich werde es allen Elementen zuweisen. Danach passen wir das Symbol selbst an. Wählen wir also Elemente aus. Zuallererst werde ich die Schriftgröße erhöhen. Machen wir drei RAM draus und ändern dann die Farbe. Machen wir es primär. Okay, die Steuerung ist also gestylt. Ich werde weitermachen und die zweite Steuerung positionieren. Ich meine die richtige Kontrolle. Definiere die Spitzenposition als 50 Prozent. Dann stelle ich die richtige Position ein, um zu rennen Außerdem müssen wir vertikal an die Steuerung senden. Also brauchen wir hier Transform, Translate, Y -50%. Okay, als nächstes kommt die untere Steuerung. Wählen wir es aus. Ich werde die linke Position definieren. Machen wir 50% draus. Dann brauchen wir Boden. Ich werde es auf eine Viewport-Höhe von 20 setzen. Und wieder müssen wir mit der Translate-Funktion transformieren. In diesem Fall benötigen wir die X-Richtung mit einem Wert von -50 Prozent. Ordnung, nehmen wir also an, dass das unterste Steuerelement positioniert ist Eigentlich. Wir haben hier den Knopf, der hinter der Steuerung gelandet ist. Und darum werden wir uns etwas später kümmern . Lassen Sie uns vorher das letzte Steuerelement positionieren, das ist das linke. Wählen wir es also aus und definieren wir die Eigenschaften oben und links. Ich werde die Spitzenposition auf 50 Prozent setzen. Was das verlassene Grundstück angeht, werde ich es bis Ram schaffen. Und außerdem müssen wir erneut mit der Translate-Funktion transformieren, in diesem Fall mit der Y-Achse und mit demselben Wert von -50 Prozent Okay, schauen wir uns die Kontrollen an. Lass uns weitermachen und uns um den Knopf kümmern. Fügen wir neue Kommentare für die Watch-Schaltfläche ein. Wählen Sie dann die Schaltfläche und definieren Sie die Position. Ich setze es auf absolut. Außerdem müssen wir die unteren und rechten Positionen definieren. Ich setze die untere Eigenschaft auf eine Viewport-Höhe von 30. Was die richtige Position angeht, lassen Sie uns sie auf 25 Prozent setzen. Der Knopf ist also positioniert, und jetzt werde ich ihn gut aussehen lassen. Definieren wir zunächst innerhalb der Höhe, ich setze die Breite auf 13 RAM. Was die Höhe angeht, machen wir fünf RAM daraus. Dann ändere die Hintergrundfarbe. Ich setze es auf Schwarz. Außerdem müssen wir die Farbe des Textes ändern . Machen wir es primär. Okay, danach ändere ich den Standardrahmen. Verwenden wir hier eine Grenze mit den Werten 0.1 room. Ich mache es gestrichelt und ändere auch die Farbe, mache es weiß Als Nächstes runden wir die Schaltfläche ab, indem wir den Randradius mit einem Wert für Okay, Button sieht also gut aus. Fügen wir noch ein paar Zellen hinzu. Ich kümmere mich um den Text. Lassen Sie uns die Schriftgröße ändern und daraus 1,6 RAM machen. Außerdem werde ich die Schrift heller machen. Machen wir uns bereit, nicht 200 zu warten. Und zum Schluss ändern Sie den Typ des gröberen Geräts, machen Sie es deutlich In Ordnung, das war's also. Der gesamte Abschnitt ist maßgeschneidert und wie funktioniert er jetzt? 42. Projekt 4 - Den Uhrenabschnitt funktionieren lassen: Okay, sobald wir den Uhrenbereich angepasst haben , müssen wir ihn jetzt zum Laufen bringen Wir haben hier vier verschiedene Steuerungen. Und sobald wir sie anklicken, bewegt sich das Bild und Sie können Ihre bevorzugte Hülle und Ihr Lieblingsband auswählen. Also werden wir diese Dinge mit JavaScript erstellen. Gehen wir zur Datei script.js und fügen einen neuen Kommentarbereich am Ende des Abschnitts ein. Zunächst wähle ich alle benötigten Elemente aus. Ich mache Bands, Koffer und alles für verschiedene Steuerungen. Lassen Sie uns eine neue Variable erstellen. Ich nenne es Uhrenbands. Wählen Sie dann das Element mit der Methode querySelector aus. Wir müssen hier die Klasse der Uhrenarmbänder angeben. Lassen Sie uns diese Codezeile duplizieren und Bänder in Groß- und Kleinschreibung umwandeln. Danach wähle ich die Steuerelemente aus. Fangen wir mit der oberen Steuerung an. Erstellen Sie eine neue Variable und nennen Sie sie Watch Top Control. Wählen wir es erneut mit der Abfrageauswahlmethode aus. Ich gebe hier den Klassennamen an, Watch Tab Control. Lassen Sie uns diese Codezeile dreimal duplizieren und Codezeile dreimal duplizieren und die Namen und Klassennamen ändern, die wir hier benötigen, oder? Dann wird der nächste ganz unten sein. Und schließlich müssen wir gehen. So sind alle Elemente vorbereitet, wie Sie wissen, werden Steuerelemente mithilfe der Link-Elemente erstellt. Und sobald wir sie anklicken, navigieren wir standardmäßig zum Anfang der Seite. Und eigentlich haben wir auch das gleiche Problem mit den Cube-Controls. Wenn wir sie anklicken, navigieren wir zum Anfang der Seite. Wählen wir all diese Steuerelemente aus. Ich werde diesen Code oben schreiben. Lassen Sie uns Ihre neuen Kommentare einfügen, commonJS als n von common JS Dann wähle ich alle Steuerelemente mit der Methode querySelector Geben wir hier zunächst den Klassennamen an. Achte auf die Kontrolle, dann brauchen wir Kontrollen über den Würfel, wenn wir diese Klassen durch Koma trennen sollen. Und schließlich Integer a. Um dieses Problem zu beheben, müssen wir uns die Knotenliste ansehen, die von der Methode all des Query Selectors zurückgegeben wird Es ist ein Array-ähnliches Objekt. Dann müssen wir ein Klickereignis an die Steuerelemente anhängen und eine der Methoden verwenden, die als Prevent Default bezeichnet werden. Um die Liste durchzusehen, verwende ich eine der Array-Hilfsmethoden, die für jede Methode aufgerufen werden für jede Methode aufgerufen Es benötigt ein Argument, nämlich die Callback-Funktion Diese Callback-Funktion selbst wird ein Argument haben. Es wird das aktuelle Steuerelement in der Liste sein. Und als Nächstes müssen wir den Controll-Event-Listener mit Klickereignissen anhängen den Controll-Event-Listener mit Klickereignissen Außerdem brauchen wir hier eine Callback-Funktion. Ich werde hier ein Event-Objekt übergeben. Und dann müssen wir die Methode prevent default an das Event-Objekt anhängen . Wenn ich jetzt auf die Steuerelemente klicke, werden sie nichts tun und wir nicht zum Anfang der Seite navigieren. In Ordnung? Sobald wir also auf die Steuerelemente klicken, müssen wir die Wrapper-Elemente verschieben Ich meine Uhrenarmbänder und Uhrengehäuse. Und das machen wir mit Margin. Also die Breite und Höhe jedes Bildes oder gleich 35 rem. Und um ein Bild zu verschieben und es an das Band anzupassen, müssen wir das gesamte Element um sieben verschieben, bis es rappt. Um also die Entfernung zu kontrollieren, also die Bewegung der Elemente, werde ich zwei verschiedene Variablen erstellen. Eine für die vertikale Richtung, ich meine für die Fälle, und die zweite für die horizontale Richtung für die Bänder. Nennen wir die Variable x deshalb ist sie für die vertikale Richtung. Ich setze es auf Null. Und dann brauchen wir x ist x mit einem Wert von Null. Diese Werte werden also je nach Richtung um sieben erhöht oder verringert , um zu rammen. Ich fange mit der oberen Steuerung an. Sobald wir darauf klicken, sollten wir die Uhrengehäuse nach oben verschieben. Lassen Sie uns also weitermachen und eine Verbindung zum Controll-Event-Listener herstellen. Wir müssen hier das Click-Event und die Pfeilfunktion übergeben. Jetzt müssen wir die Elemente mit dem Rand nach oben verschieben. Das bedeutet, dass wir den Wert von Margin Top um sieben auf RAM reduzieren müssen. Und das müssen wir bei jedem Klick machen. Also brauchen wir hier das Uhrengehäuse , auf Also brauchen wir hier das Uhrengehäuse das das Style-Attribut folgt. Und dann müssen wir Margin Top als Wert verwenden. Ich subtrahiere sieben RAM vom aktuellen Wert der Y-Achse Also brauchen wir hier x ist y gleich x ist y -70. Lauf. Oder wir können diesen Ausdruck einfach so schreiben. X ist y minus entspricht 70. Lauf, richtig? Wenn ich auf das obere Steuerelement klicke, ändern sich die Fälle. Aber im Moment ohne einen kleinen Defekt. Um das zu beheben, werde ich Transition verwenden. Wir brauchen die Margen der oberen 1 s. Jetzt haben wir also einen viel besseren Effekt. Okay, also wir brauchen dasselbe für die restlichen Kontrollen. Lassen Sie uns diesen Code duplizieren. Die nächste Kontrolle wird die unterste sein. Und auch statt Minus-Gleichheiten brauchen wir hier Plus-Gleichheiten. Als Nächstes werden wir die richtige Kontrolle haben. Also lass uns diesen Code duplizieren. In diesem Fall müssen wir die Uhrenhose bewegen. Lassen Sie uns also Uhrengehäuse in Uhrenarmbänder verwandeln. Dann brauchen wir statt Margin Top Margin, oder? Auch bei Bändern müssen wir die Richtung ändern, die wir hier benötigen, die X-Achse. Lassen Sie uns diesen Code duplizieren. Wechseln Sie von rechts nach links. Und wir brauchen hier auch ein Minuszeichen. Okay? Wie bei den Uhrengehäusen müssen wir auch bei Uhrenarmbändern umstellen. Wählen wir also die Uhrenarmbänder aus, denen der Übergang zugewiesen ist. Die Wertespanne, richtig? 1 s. Wenn wir sie jetzt alle testen, funktionieren die Kontrollen einwandfrei. Wie Sie sehen können, bewegen sich die Bänder für den Fall, dass sich einige reibungslos bewegen. Aber sobald wir das letzte Bild erreicht haben, ich meine in beide Richtungen, wird sich das Element unendlich weiterbewegen Das brauchen wir also nicht. Sobald wir das letzte Bild erreicht hatten, mussten wir die Steuerung verstecken. Dafür werde ich eine neue Funktion erstellen. Nennen wir es Höhenkontrolle. Wir müssen also überprüfen, ob wir das letzte Bild erreichen oder nicht. Es wird passieren. Möchte, dass der Wert der Y-Achse oder X-Achse je nach Richtung 280 RAM beträgt. Ich meine, manchmal brauchen wir 280 RAM oder manchmal sind es -280 Um zu beweisen, dass wir diesen Betrag benötigen, führe ich die Y-Achse zur Konsole Bei jedem Klick verringert sich der Wert also um 70 RAM. Und sobald wir das letzte Bild erreicht haben, entspricht der Wert einer Rampe von -280 Also müssen wir das Steuerelement verstecken, damit der Wert der Y-Achse -280 RAM entspricht Lassen Sie uns eine If-Anweisung erstellen, bei der wir überprüfen müssen, ob x y gleich -280 RAM ist Um das Steuerelement auszublenden, erstelle ich eine neue Klasse und CSS, denen wir einige CSS-Stile definieren , um die Elemente auszublenden. Ich nenne diese Klasse Hide Control und weise ihr dann Opazität Null und Visibility Hidden zu Null und Visibility Hidden Wenn diese Bedingung also zutrifft, müssen wir diese neu erstellte Klasse zum Steuerelement hinzufügen. Also brauchen wir Watch Top Control, gefolgt von der Klassenlisteneigenschaft. Als Nächstes müssen wir eine der Methoden namens Add verwenden. Und wir müssen den Klassennamen in der Klammer angeben den Klassennamen in der Klammer Und wenn die Bedingung falsch ist, müssen wir die Steuerung wieder anzeigen. Also müssen wir die klassenhohe Kontrolle abschaffen. Verwenden wir L-Aussagen. Dann kopiere ich diese Codezeile. Wir müssen ändern, etwas hinzufügen und entfernen. Richtig? Lassen Sie uns abschließend diese Funktion onclick aufrufen Wenn wir also auf das obere Steuerelement klicken und dann das letzte Bild erreichen, wird es ausgeblendet. Das Gleiche benötigen wir für den Rest der Kontrollen. Lassen Sie uns weitermachen und die IF-Aussagen duplizieren. Dann entfernt man das Minuszeichen und wechselt auch das Oben in das Untere. Als Nächstes werden wir die richtige Kontrolle haben. In diesem Fall benötigen wir die X-Achse. Und wir müssen auch die Steuerung ändern. Wir brauchen hier, richtig. Als nächstes kommt die linke Kontrolle. Fügen wir hier das Minuszeichen hinzu. Und statt einer rechten Kontrolle ist das hier Entität, linke Kontrolle. Das Einzige, was wir tun müssen, ist, diese unten stehende Funktion für jede Steuerung aufzurufen . Wenn ich nun alle Steuerelemente teste und anklicke, werden Sie feststellen, dass alles einwandfrei funktioniert. Okay, das ist alles. Wir haben die Arbeit an diesem Abschnitt abgeschlossen. Lass uns weitermachen und uns um den nächsten kümmern. 43. Projekt 4 - AirPods-Abschnitt erstellen und stillieren: Okay, wir haben die Arbeit an der Uhrenabteilung abgeschlossen und jetzt müssen wir weitermachen und ein Jahr lang davon ausgehen, dass der nächste Abschnitt, der die Flughäfen sein wird, eine Art einfacher, aber netter Abschnitt sein Wir werden hier die Überschrift mit zwei verschiedenen Bildern und auch mit zwei verschiedenen Schaltflächen haben. Lassen Sie uns weitermachen und wie gewohnt mit dem HTML-Markup beginnen Fügen wir neue Kommentare ein. Abschnitt fünf von Abschnitt fünf. Öffnen Sie dann die Abschnittselemente mit der Klasse. Abschnitt fünf. Als Nächstes füge ich unter Neue Kommentare für diesen Abschnitt fünf Inhalte einen Typen ein . Öffnen Sie dann den Div-Tag mit einer Klasse Airports. Dieses Element wird den gesamten Inhalt dieses Abschnitts enthalten . Wir werden hier also eine Überschrift, Bilder und Schaltflächen haben. Lassen Sie uns neue Kommentare für die Überschrift erstellen. Wir brauchen die Überschrift von Abschnitt fünf der Überschrift von Abschnitt fünf. Und dann öffnen Sie das H1-Überschrift-Tag mit einer Überschrift für Klassenabschnitt fünf mit dem Inhalt, Flughäfen Okay, danach werden wir die Bilder haben. Lassen Sie uns also neue Kommentare für Abschnitt fünf erstellen. Bilder. Öffnen Sie dann das Bild-Tag und wählen Sie Bilder aus dem Bildordner. Dann ein weiterer Ordner, Flughäfen, und dann Flughäfen auswählen, ein PNG. Lassen Sie uns diese Codezeile duplizieren und den Namen des Bildes, das wir hier benötigen, Flughäfen in PNG ändern . In Ordnung, endlich werde ich die Knöpfe einführen. Lassen Sie uns neue Kommentare erstellen. Abschnitt fünf Schaltflächen. Dann Ende von Abschnitt fünf Schaltflächen. Ich öffne das Div-Tag, das die Hülle der Schaltflächen sein wird Ordnen wir der Klasse Flughäfen Watsons zu. Und dann Open-Button-Tag mit der Klasse Airports btn. Und mit dem Inhalt erfahren Sie mehr. Lassen Sie uns den Button duplizieren und den Inhalt ändern. Ich füge hier ein von. Okay, das HTML-Markup ist vorbereitet, alle Elemente sind erstellt und jetzt werde ich diesen Abschnitt mithilfe von CSS anpassen Lassen Sie uns weitermachen und neue Kommentare für Abschnitt fünf einfügen. Wählen Sie dann das Abschnittelement und definieren Sie dessen Breite und Höhe. Ich setze auf 200%. Was die Höhe angeht, machen wir sie zu 100% aus dem Viewport. Okay, als Nächstes kümmere ich mich um die Wrapper-Div-Elemente Ich meine den Content Wrapper. Lassen Sie uns Ihre neuen Kommentare einrichten. Inhalt von Abschnitt fünf Inhalt. Und dann wähle Div-Elemente mit der Klasse Airports aus. Zunächst definiere ich Breite und Höhe. Lassen Sie uns mit zwei 90% beginnen. Was die Höhe angeht, werde ich es auf 80% ankommen lassen. Und dann richte ich die Elemente horizontal in einer Reihe aus. Stellen wir dafür das Display auf Flex ein. Richtig. Danach kümmere ich mich um die Ausrichtung der Elemente. Fangen wir mit der Überschrift an. Ich werde es horizontal in der Mitte platzieren. Fügen wir neue Kommentare für die Überschrift ein. Wir brauchen Abschnitt fünf, Überschrift. Aus der Überschrift von Abschnitt 5. Wählen Sie dann die Überschriftenelemente und setzen Sie die Position auf absolut. Okay, um die Position entsprechend den übergeordneten Elementen zu positionieren, haben wir unsere ganze Tiefe in Position entsprechend den übergeordneten Elementen zu positionieren, uns , dass wir dem übergeordneten Element oft eine relative Position zuweisen müssen. Danach definieren wir die obere und linke Position. Ich setze den Top auf Null. Was die Linke betrifft, lassen Sie uns 50 Prozent daraus machen. Um die Elemente perfekt zu zentrieren, müssen wir sie dann auf die linke Seite verschieben. Also müssen wir die Funktion transformieren und dann in X-Richtung übersetzen. Und wir müssen hier durchgehen -50 Prozent Okay, also wird die Überschrift als Nächstes positioniert Ich werde mich um die Batsons kümmern, die sich im Moment auf der rechten Seite dieses Abschnitts befinden auf der rechten Seite dieses Abschnitts Ich werde sie in die Mitte stellen. Lassen Sie uns also neue Kommentare für die Schaltflächen in Abschnitt fünf erstellen. Wählen Sie dann die Wrapper-Div-Elemente aus, die den Klassennamen Airports Buttons Zuallererst werde ich mich um ihre Positionen kümmern. Lassen Sie uns die Position auf absolut setzen. Und dann platziere ich dafür die Knöpfe perfekt in der Mitte, ich setze die Eigenschaften oben und links, beide auf 50 Prozent. Dann müssen wir transformieren, übersetzen und wir müssen beide Richtungen angeben. Wir müssen sie auf -50% setzen. Ordnung, die Elemente sind aufeinander abgestimmt und jetzt können wir weitermachen und sie stylen. Kehren wir zu den Überschriftenelementen zurück. Ich werde die Schriftgröße erhöhen. Stellen wir es auf Rampe 15 ein. Dann mache die Schrift heller. Ich setze die Schriftstärke auf 300. Dann ändere die Farbe. Verwenden wir hier weiße Farbe. Und zum Schluss werde ich einen Schatteneffekt erzeugen. Verwenden wir Text Shadow mit den Werten 0,1, 0,1, RAM ungleich Null und kalt oder 999 Okay, sie haben also einen Stil. Lass uns weitermachen und uns um die Bilder kümmern. Ich werde neue Kommentare erstellen, Abschnitt fünf und Bilder für Abschnitt fünf. Und wählen Sie dann Bildelemente aus. Ich werde sie verkleinern. Lassen Sie uns mit 250 Prozent beginnen. Dann mache die Höhe zu 100%. Und verwenden Sie auch Objektfüße, enthalten. Das Bild wird kleiner. Und wie Sie jetzt sehen können, sind sie nicht perfekt in der Mitte dieses Abschnitts platziert . Um das zu beheben, werde ich das Klassenzentrum benutzen. Ordnen wir es dem Abschnittelement zu. In Ordnung, jetzt haben wir ein besseres Ergebnis. Das einzige, was ich mit den Bildern tun möchte , ist die Hintergrundfarbe des zweiten Bildes zu ändern . Zuallererst werde ich einen Kurs zum Essen vereinbaren. Nennen wir es Flughäfen img2. Wählen Sie es dann aus und ändern Sie die Hintergrundfarbe. In diesem Fall verwende ich die Hauptspalte. Okay, das war's mit den Bildern. Lass uns weitermachen und uns um die Knöpfe kümmern. Ich werde oben auf den Schaltflächen etwas Platz schaffen. Verwenden wir hier also Margin Top mit einem Wert von fünf rem. Wählen Sie dann die Schaltfläche selbst aus. Zuallererst werde ich mich um die Breite und Höhe kümmern. Ich setze die Breite auf 15 RAM. Für die Höhe. Machen wir es für RAM. Und ändere auch die Hintergrundfarbe. Verwende deine Primärfarbe. Gleich als Nächstes werde ich etwas Abstand zwischen den Schaltflächen schaffen. Und ich werde auch die Standardgrenze loswerden. Lassen Sie uns also mithilfe von Margin Platz schaffen. Ich setze es oben und unten auf Null und links und rechts auf zwei Rem. Und setze auch die Grenze auf Null. Ordnung, lassen Sie uns weitermachen und Schaltflächen ein paar weitere Stile hinzufügen Ich werde sie rund machen. Stellen wir den Grenzradius 2,5 rem ein. Ändern Sie auch die Farbe des Inhalts. Mach es weiß. Und schließlich ändern Sie den Typ des gröberen Geräts und machen Sie es zum Zeiger Okay, im Moment sieht der erste Button über D gut aus. Was den zweiten betrifft, müssen wir die Hintergrundfarbe und auch die Farbe des Textes ändern . Um also die zweite Schaltfläche auszuwählen, verwende ich eine der Pseudoklassen, die als verlorenes Kind bezeichnet wird Ändern Sie dann die Hintergrundfarbe und machen Sie sie weiß als Farbe des Textes. Ich werde es primär machen. In diesem Fall werden die gemeinsame Hintergrundfarbe und die Farbe des Textes überschrieben Okay, das ist es also. Alles sieht gut aus. Und mit diesem Abschnitt sind wir fertig. Lass uns weitermachen und uns um den nächsten kümmern. 44. Projekt 4 - Fußzeile erstellen und anpassen: Es ist also an der Zeit, den letzten Teil unserer Projekte zu erstellen, der die Fußzeile sein wird Es wird ein einfacher Filter sein, fünf verschiedene Symbole für die fünf verschiedenen Abschnitte relevant sind. Und sie ermöglichen es uns, zu den richtigen Abschnitten zu navigieren. Außerdem wird es einen Absatz mit einem Copyright-Text geben. Okay, lassen Sie uns weitermachen und mit der Erstellung des HTML-Markups beginnen Ich werde neue Kommentare für Abschnitt sechs einfügen. Öffnen Sie dann den Abschnittsnamen mit einem Klassennamen, Abschnitt sechs. In diesem Abschnittselement werden wir also zwei verschiedene Teile haben. Die erste wird die Entwicklung sein, die alle Icons einschließen wird. Ordnen wir jedem Klassenabschnitt sechs Symbole zu. Insgesamt werden wir also fünf verschiedene Icons haben mithilfe von Link-Elementen dargestellt werden. Also werde ich den Link-Tag mit der Klasse öffnen. Ich kann verlinken. Das Symbol selbst wird ein Bild sein. Lassen Sie uns hier das Bild-Tag anhalten und dann das richtige Bild auswählen. Wir brauchen einen Bilderordner, dann Symbole und wir müssen Home icon dot PNG auswählen. In Ordnung, wie gesagt, insgesamt werden wir fünf verschiedene Icons haben Lassen Sie uns die Linkelemente viermal duplizieren und die Namen der Bilder ändern. Das zweite wird das iPhone sein. Dann haben wir ein MacBook als Uhr. Und das letzte Bild werden AirPods sein. Okay, lassen Sie uns zum Schluss weitermachen und den Absatz erstellen. Es wird Klassenurheberrecht haben. Dann füge ich ein, um etwas Text-Copyright als unsichere HTML5-Entität zu verwenden etwas Text-Copyright als unsichere HTML5-Entität Emilys Copyright-Schild, wir brauchen eine Briefmarke und eine Kopie. Auf das Semikolon folgt Code und Create. Alle Rechte vorbehalten. In Ordnung, das war's mit dem HTML-Markup. Lassen Sie uns weitermachen und diesen Abschnitt anpassen. Ich werde Ihre neuen Kommentare einfügen, Abschnitt sechs. Von Abschnitt sechs. Wählen Sie dann die Abschnittselemente und definieren Sie deren Breite und Höhe. Ich werde die Breite auf 200 Prozent einstellen. Was die Höhe angeht, machen wir sie auf 40% des Viewports aus. Okay, lass uns weitermachen und die Elemente stylen. Eigentlich werden wir in diesem Abschnitt nicht viele Stile haben. Lassen Sie uns die Größe der Bilder verringern. Wählen Sie sie aus und stellen Sie sie mit zwei GB RAM ein. Dann werde ich den Abstand zwischen den Symbolen vergrößern. Ich kann Margin mit den Werten 0,5 rem verknüpfen und verwenden. Okay? Im Moment befinden sich die Elemente auf der linken Seite dieser Aktion und wir müssen sie in der Mitte platzieren. Lassen Sie uns also weitermachen und das Klassenzentrum den Abschnittselementen zuweisen . In Ordnung, jetzt werde ich den Absatz anpassen. Kümmern wir uns zunächst um seine Position. Wählen wir es aus und setzen seine Position auf absolut. Dann müssen wir die Position für diese Abschnittselemente definieren , da es sich um das übergeordnete Element handelt. Setzen wir also die Position auf relativ. Und danach definieren wir die untere Position für den Absatz. Stellen wir es auf fünf Rampen ein. Okay, der Absatz ist also positioniert. Und zum Schluss lassen Sie uns weitermachen und es stylen. Ich werde die Schriftgröße erhöhen. Machen wir 1,5 RAM daraus und schaffen dann etwas Platz zwischen den Buchstaben. Lassen Sie uns den Buchstabenabstand auf 0,1 Rampe setzen. In Ordnung, also sind alle Elemente gestylt. Und jetzt, wie gesagt, werde ich dafür sorgen, dass diese Icons funktionieren. Sobald wir sie angeklickt haben, müssen wir zum richtigen Abschnitt navigieren. Dazu müssen wir zu jeder Sektion die Element-ID hinzufügen und dann müssen wir h Referenzattribute der Link-Elemente mit diesen IDs verbinden . Ordnen wir also den Atrien für uns Attribute zu, richtige Abschnittsnamen Wir müssen Ihre Abschnittsnamen von Abschnitt eins bis Abschnitt fünf weitergeben . Dann fahren Sie fort und weisen Sie jedem Abschnitt die Element-ID das Attribut mit denselben Werten zu. Fangen wir mit dem ersten Abschnitt an. Dann nehme ich diesen Code und füge ihn für jedes Abschnittselement ein und ändere auch die Abschnittsnamen. Wir müssen Abschnitt fünf machen. Okay, wenn ich jetzt auf das Löffelsymbol klicke, navigiere zum richtigen Abschnitt. Aber das wollen wir nicht. Wir wollen mit einem reibungslosen Ablauf navigieren. Dazu müssen wir eine dieser CSS-Eigenschaften namens Scrollverhalten mit dem Wert smooth verwenden . Und eigentlich müssen wir es dem HTML-Element zuweisen. Okay, wie Sie jetzt sehen können, funktioniert alles einwandfrei. Sobald wir auf das I klicken , navigieren wir zu den entsprechenden Abschnitten mit kleinen Fehlern. Bevor wir weitermachen, werde ich dasselbe auch für die Navigationselemente tun . Wir haben hier vier verschiedene Links und wir müssen die richtigen Abschnitte angeben, beginnend mit Abschnitt zwei bis Abschnitt fünf. Lassen Sie uns hier die Abschnittsnamen weitergeben. Sobald wir also auf die Navigationspunkte klicken, navigieren wir zu den entsprechenden Abschnitten. Okay, wir sind fast fertig. Aber ich werde hier noch ein paar Dinge tun. Wie Sie sehen, hat das fertige Projekt das Apple-Symbol in der Titelleiste. Fügen wir es also auch zu unserem Arbeitsprojekt hinzu. Wir müssen das Link-Tag im Hauptelement öffnen. Dann müssen wir dein Shortcut-Icon weitergeben. Und dann müssen wir den Pfad der Datei angeben. Es wird das Home-Symbol sein, das sich im Ordner des Symbols befindet. Okay, jetzt haben wir das Logo in der Titelleiste. Das Letzte, was ich tun werde, ist die Standardaktionen dieser beiden Link-Elemente im iPhone-Bereich zu verhindern dieser beiden Link-Elemente im iPhone-Bereich Denn sobald wir sie anklicken, navigieren wir zum Anfang der Seite. Dazu müssen wir nur ihre Klassennamen hier in der Abfrageauswahl hinzufügen hier in der Abfrageauswahl Alle Methoden müssen Ihre iPhone-Taste übergeben. Okay, jetzt ist das Problem behoben und eigentlich ist das gesamte Projekt erstellt Das einzige, was wir tun müssen, ist, es auf verschiedene Bildschirmgrößen reagieren zu lassen . 45. Projekt 4 - Projekt reaktionsfähig machen: Okay, sobald wir mit der Erstellung unseres Projekts fertig sind, ist es jetzt an der Zeit, weiterzumachen und es an verschiedene Bildschirmgrößen anzupassen Wie Sie wissen, basiert das Projekt auf einem extra großen Bildschirm. Wir verwenden den Desktop-First-Ansatz, und jetzt müssen wir ihn auf verschiedene Breakpoints reagieren lassen verschiedene Breakpoints reagieren Lassen Sie uns die Seite überprüfen und in den Responsive-Modus wechseln. Im Moment sind Breite und Höhe eine extra große Bildschirmgröße eingestellt. Ich habe alle bereits die Breakpoints vorbereitet , an denen ich einige Änderungen vornehmen werde Also werde ich keine Zeit damit verschwenden, sie zu finden. Im Allgemeinen gibt es keine strengen Regeln für Breakpoints. Einige Entwickler legen die Breakpoints entsprechend den gängigen Geräten fest. Es ist jedoch besser, die Bruchpunkte auf jeder Website einzeln festzulegen , damit sie auf jedem Gerät gut aussieht. Okay, lass uns weitermachen und den ersten Breakpoint setzen. Ich denke, wir müssen einige Änderungen vornehmen sobald die Bildschirmgröße weniger als 1.500 Pixel beträgt. Lassen Sie uns also weitermachen und eine CSS-Medienabfrage erstellen. Aber zuerst füge ich Ihre neuen Kommentare ein, responsive und responsives Angebot. Erstellen Sie dann eine CSS-Medienabfrage und geben Sie die maximale Breite auf 1.500 Pixel an. Am Breakpoint werde ich die Schriftgröße der HTML-Elemente verringern die Schriftgröße der HTML-Elemente Dadurch werden die im RAM gemessenen Elemente verkleinert . Lassen Sie uns diese Schriftgröße also auf 45% setzen. Wie Sie sehen können, sehen alle Abschnitte gut aus. Und jetzt müssen wir den nächsten Breakpoint finden, meiner Meinung nach bei 1.100 Pixeln liegen wird Lassen Sie uns also weitermachen und ein neues CSS-Medium mit der maximalen Breite von 1.100 Pixeln erstellen mit der maximalen Breite von 1.100 Pixeln Zuerst werde ich die Schriftgröße des HTML-Elements verringern und es auf 40% erhöhen. Als Nächstes werde ich diese Navigationselemente fett formatieren , da sie nicht ganz sichtbar sind Wählen wir es jetzt pro Link aus und setzen die Schriftstärke auf 700. Okay, danach werde ich die Größe der Überschrift auf dem Banner verringern und außerdem müssen wir den Absatz verkleinern. Also lasst uns weitermachen und mit der Überschrift beginnen. Wählen wir es aus und setzen seine Schriftgröße auf acht RAM. Was den Absatz betrifft, werde ich die Schriftgröße um drei Stufen erhöhen. Okay, das war's mit dem ersten Abschnitt. Das einzige, was ich am Breakpoint tun werde , ist, den Button im Bereich Uhren nach rechts zu bewegen den Button im Bereich Uhren nach rechts zu Wählen wir also watch btn und setzen die richtige Position auf 25% Ordnung, das war's mit diesem Breakpoint, alle anderen Abschnitte sehen Lassen Sie uns weitermachen und uns um den nächsten kümmern , der 900 Pixel groß sein wird. Lassen Sie uns also erneut eine neue CSS-Medienabfrage erstellen und eine neue CSS-Medienabfrage die maximale Breite auf 900 Pixel angeben. An den Breakpoints werde ich also die Größe des MacBook erhöhen Wir müssen also den Inhalt von Abschnitt drei auswählen. Und ich setze die Breite auf 90%. Als nächstes müssen wir die Ladehülle vergrößern , da sie, wie Sie sehen können, nicht ganz gut passt Wählen wir also den Loading Wrapper aus und setzen seine Breite auf 70%. Okay, zum Schluss werde ich die Größe des Logos verkleinern. Wählen wir das Font Awesome-Symbol und stellen die Schriftgröße auf sechs Rampen ein. Okay, das war's mit diesem Abschnitt. Das einzige, was ich am Breakpoint tun werde, ist die Größe der Überschrift im Flughafenbereich zu verringern im Flughafenbereich Lassen Sie uns also weitermachen und die Überschrift für Abschnitt 5 auswählen und die Schriftgröße auf 12 festlegen. Lauf. Okay, mit 900 Pixeln sind wir fertig. Lass uns weitermachen und den nächsten Breakpoint finden. Es werden 700 Pixel sein. Lassen Sie uns also weitermachen und ein neues CSS-Medium erstellen und die maximale Breite auf 700 Pixel angeben. An diesem Breakpoint werde ich die Cube-Steuerelemente überhaupt ausblenden Verwenden wir display none. Wie Sie sehen können, sind die Steuerelemente versteckt und jetzt müssen wir den Würfel ein wenig nach unten bewegen. Wählen wir es also aus. Ich werde es verschieben, indem ich die oberste Position verwende. Im Moment ist es auf minus zwei r1 eingestellt. Und ich mache daraus eine 3D-Rampe. Als Nächstes. Ich werde die Größe des Logos verkleinern und auch seine Position ändern. Also schiebe ich es in die Ecke. Setzen wir die Spitzenposition also auf Null. Was den linken betrifft, werde ich es bis zur Rampe schaffen. Außerdem wähle ich ein Element aus und lass uns die Schriftgröße auf acht Ran setzen. Okay, das war's mit dem Logo. Als Nächstes ändere ich das Layout des Banners und des Würfels. Ich werde die Warteschlange hinter dem Banner platzieren. Dafür setze ich die Position des Banners auf absolut. Es wird also davon ausgegangen, dass der Würfel hinter dem Banner gelandet ist. Im Moment ist der Text der Batterie nicht ganz lesbar. Und um das zu beheben, werde ich die Opazität der Würfelhülle verringern Wählen wir es also aus und setzen die Opazität auf 0,7. Jetzt haben wir also ein viel besseres Ergebnis. Als Nächstes werde ich diesen Pfeil hier verstecken. Wie Sie sich erinnern, handelt es sich um eine HTML5-Entität, die Teil der Überschriftenelemente ist Und um es auszuwählen, verwende ich eines dieser Pseudoelemente, das als erster Buchstabe bezeichnet wird Wählen wir also zuerst die H1-Überschriftenelemente aus, gefolgt vom ersten Buchstaben Um das Element auszublenden, verwende ich Visibility Hidden und Opazität Zero Okay? Der Pfeil ist also versteckt, aber jetzt befindet sich das Überschriftenelement nicht in der Mitte. Wir müssen es leicht nach links bewegen. Verwenden wir dafür Positionen. Wählen wir H1-Überschriftenelemente aus. Und zuerst setze ich die Position auf relativ und dann setze ich die linke Eigenschaft auf minus fünf Rampen. In diesem Fall verschieben wir das Element also von seiner aktuellen Position. Okay, jetzt sieht es viel besser aus. Bevor wir zum nächsten Abschnitt übergehen, werde ich mich um den Button der Werbebanner kümmern. Denken Sie daran, dass die Schaltfläche ihre Form ändert, sobald wir den Mauszeiger darüber bewegen die Schaltfläche ihre Form ändert, sobald wir den Das brauchen wir nicht mehr, weil der Würfel hinter dem Banner platziert ist. Sobald wir den Mauszeiger über die Schaltfläche bewegen und ihre Standardform beibehalten müssen, wählen wir die Schaltfläche aus, indem wir den Mauszeiger Gehen Sie dann nach oben und suchen Sie die Eigenschaft Clip Path mit ihren Werten. Ich kopiere es und füge es dann hier ein. Okay, das war's mit dem ersten Abschnitt. Gehen wir zum zweiten über. Ich werde die Größe der iPhones erhöhen. Ich meine das Wrapper-Div-Element. Wählen wir es also aus und definieren wir seine Höhe und Breite. Ich setze die Höhe auf 70 Viewport-Höhe. Was die Breite angeht, so wird sie 70 Viewport-Breite sein. Okay, das war's mit diesem Abschnitt. Als nächstes kommt der MacBook-Bereich, der gut aussieht. Was den Uhrbereich angeht, werde ich den Knopf auf die rechte Seite bewegen. Wählen wir es also aus und setzen die richtige Position auf 15%. Okay, der Uhrenbereich sieht also gut aus. Lass uns weitermachen und uns um die Flughäfen kümmern. Ich werde das erste Bild unter verstecken. Ordnung, jetzt hat das erste Bild keinen Klassennamen. Also lass uns weitermachen und einer Klasse mit einem Wert Airports, IMG One, zuweisen . Wählen Sie es dann aus und blenden Sie es mit Display None aus. Was das zweite Bild angeht, werde ich seine Breite vergrößern und es zu 100 Prozent vergrößern. Wählen wir also das zweite Bild und setzen seine Breite auf 100 Prozent. Wie Sie sehen können, funktioniert dieser Code nicht weil wir anfangs, als wir die Breite der Bilder definiert haben, sie immer noch gerne verwenden, indem wir den Klassennamen der übergeordneten Elemente verwenden, gefolgt vom Tag-Namen. Und tatsächlich hat es eine höhere Priorität. Also müssen wir hier die Klasse des übergeordneten Elements, AirPods, hinzufügen die Klasse des übergeordneten Elements, AirPods, Okay, jetzt ist das Problem behoben und die Breite des Bildes wurde zu 100% Als Nächstes ändere ich die Hintergrundfarbe der ersten Schaltfläche und mache sie weiß. Wählen wir die Schaltfläche aus. Ändere die Hintergrundfarbe, mache es weiß. Was die Farbe selbst angeht, werde ich hier die Primärfarbe verwenden. Es wird also als Hintergrund betrachtet und die Farbe hat sich geändert. Außerdem werde ich den Buttons einen kleinen Schatteneffekt hinzufügen . Verwenden wir also Box-Shadow und Institute 0.1 RAM dreimal. Und als Farbe verwende ich das D. Okay, das war's mit dem Flughafenbereich. Das Letzte, was ich am Breakpoint tun werde , ist, mich um die Icons und die Fußzeile zu kümmern Icons und die Fußzeile zu kümmern Wir müssen den Abstand zwischen ihnen verringern. Also lass uns weitermachen und Ich kann verlinken und Margin verwenden auswählen. Ich setze es oben und unten auf Null und rechts und links auf zwei RAM. In Ordnung, das ist es. Über diesen Breakpoint der Abschnitte. Sieh gut aus. Lassen Sie uns weitermachen und uns um den nächsten kümmern , der 550 Pixel groß sein wird. Lassen Sie uns also weitermachen und eine neue CSS-Medienabfrage mit der maximalen Breite von 550 Pixeln erstellen neue CSS-Medienabfrage mit der maximalen Breite von 550 Pixeln Als erstes müssen wir also den Abstand zwischen den Navigationselementen verringern. Wählen wir also Number Link und setzen den Rand oben und unten auf Null und links und rechts auf 1,5 RAM. Der erste Abschnitt sieht also gut aus. Gehen wir zum nächsten über. Ich werde die Schriftgröße der Überschrift verkleinern. Wählen wir also die Überschrift des zweiten Abschnitts und die gewünschte Größe bis acht Ran aus. Okay, fahren wir mit dem nächsten Abschnitt fort. Lassen Sie uns auch die Schriftgröße dieser Abschnittsüberschrift verringern . Wählen wir die Überschrift für Abschnitt drei aus. Stellen Sie die Schriftgröße auf acht ein. Lauf. werde ich die Schriftgröße der Überschrift MacBook Info verkleinern . Und ich werde auch die Größe der Schaltfläche verringern. Also lass uns weitermachen und die Überschrift MacBook Info auswählen und die Schriftgröße auf Fibrin setzen Wählen Sie anschließend die MacBook-Taste und definieren Sie deren Breite und Höhe. Ich setze die Breite auf 15 RAM. Was die Höhe angeht, lassen Sie uns drei RAM daraus machen. Und verringern Sie auch die Schriftgröße. Mach es auf die 1,3 Rampe. Okay, das war's mit dem MacBook-Bereich. Fahren wir mit dem nächsten Abschnitt fort. Es sieht gut aus. Also müssen wir zum Flughafenbereich übergehen. Wie Sie sehen können, sind die Knöpfe übereinander angeordnet. Wir müssen sie trennen. Wählen wir also einen Rapper, Airport-Buttons und definieren dessen Breite, machen wir daraus 50 RAM Und um den Inhalt dann in der Mitte zu platzieren, benötigen wir die Textausrichtung in der Mitte Okay, das war's mit dem Abschnitt Flughäfen. Das Letzte, was wir an diesem Breakpoint tun müssen , ist, die Größe der Symbole und der Fußzeile zu verringern die Größe der Symbole und der Fußzeile Lassen Sie uns also immer noch den gesperrten Icon-Link gefolgt vom Bild haben. Und stellen Sie die Breite auf acht RAM ein. In Ordnung, das war's also. Wir sind fertig mit diesem Breakpoint. Jetzt müssen wir weitermachen und uns um den letzten Breakpoint kümmern , der 450 Pixel betragen wird Lassen Sie uns also eine neue CSS-Medienabfrage erstellen und die maximale Breite auf 450 Pixel angeben. Zunächst werde ich die Schriftgröße der HTML-Elemente verringern . Setzen wir es auf 35 Prozent. Jetzt kümmere ich mich um das Logo und die Navigationsleiste. Ich möchte sie vertikal übereinander platzieren, und ich möchte sie auch in der Mitte platzieren. Also lass uns weitermachen und Logo auswählen und seine Positionen definieren. Ich setze die Spitzenposition auf zehn RAM, dann brauchen wir die linke Position, 50 Prozent. Und um das Element horizontal zu zentrieren, verwenden wir Transform Translate mit X-Richtung Und bei diesem Wert werde ich das Jahr um -50 Prozent überschreiten. Das Logo ist also richtig positioniert. Als nächstes kümmern wir uns um genügend Bar. Ich werde die Lag-Position auf 50 Prozent festlegen. Andererseits müssen wir X transformieren und mit -50 Prozent übersetzen Die Zahl wird also in der Mitte platziert, aber wir müssen ihre Breite definieren, da die Ausrichtung der Navigationselemente durcheinander ist Ich möchte jetzt bar sein, um das Maximum herauszuholen, mit dem ich verfügbar bin. Lassen Sie uns also mit zwei Mux-Inhalten beginnen. Okay, das war's mit der Navigation. Wie Sie sehen können, haben wir hier das Leerzeichen auf der rechten Seite der Webseite Und tatsächlich wird es durch die MacBook-Informationen verursacht. Im Moment hat es eine große Breite und wir müssen sie verringern. Wählen wir also die MacBook-Informationen aus und stellen wir die Breite auf 40 Rampe ein. Okay, jetzt ist das Problem behoben. Gehen wir zurück zum ersten Abschnitt. Wir müssen den Absatz in der Mitte platzieren. Wählen wir also p Elemente aus und weisen ihnen den Mittelpunkt der Textausrichtung zu Das war's also mit dem ersten Abschnitt. Gehen wir zum zweiten über. Ich werde die Breite des Wrappers der Bilder erhöhen Wrappers der Bilder Wählen wir also iPhones und setzen die Breite auf 75 Viewport-Breite Jetzt sieht es also besser aus. Lassen Sie uns weitermachen und die Schriftgröße der Überschrift des dritten Abschnitts verringern . Wählen wir es aus und setzen die Schriftgröße auf sechs Rampen. Außerdem werde ich die Größe der Überschrift und des Absatzes der MacBook-Informationen ändern . Fangen wir mit der Überschrift an. Ich werde die Schriftgröße auf drei RAM setzen als der Preis des Silizium-MacBook. Definieren Sie die Schriftgröße, machen Sie es zu Ram. Außerdem werde ich die Schrift etwas fetter machen. Im Moment ist die Schriftstärke auf 200 eingestellt und ich werde sie auf 300 setzen. Okay, das war's mit dem MacBook-Bereich. Als nächstes müssen wir uns um die Uhren kümmern. Gehen wir erneut zur Schaltfläche auf der rechten Seite, wählen Sie BTN beobachten und setzen Sie die rechte Position auf 5% Okay? Schließlich werde ich die Breite der Symbole und der Fußzeile verringern Symbole und der Fußzeile Wählen wir also den Icon-Link gefolgt vom Bild aus. Und definiere Breite. Mach sechs Ran draus. Okay, das war's mit unserem Projekt. Es reagiert auf verschiedene Bildschirmgrößen. Und eigentlich sind wir damit fertig. Hoffe, dir haben diese Projekte gefallen, denn wir verwenden viele interessante und coole Sachen. Gehen wir also zum nächsten Projekt über. 46. Projekt 5 - Projektvorschau: Ordnung, es ist an der Zeit, unser nächstes Projekt zu erstellen, das der Klon einer der beliebtesten und am häufigsten verwendeten Websites namens Paypal sein der beliebtesten und am häufigsten verwendeten wird, um die Benutzeroberfläche der verschiedenen Seiten zu erstellen Ich bin auf der Hauptseite, auf Anmelde- und Anmeldeseiten. Natürlich wird es nicht der exakte Klon mit der vollen Funktionalität sein . Wie gesagt, wir werden nur eine Benutzeroberfläche mit HTML, CSS und JavaScript erstellen . Paypal sieht in verschiedenen Ländern anders aus. Die Benutzeroberfläche ändert sich häufig von Zeit zu Zeit. Sie sich also keine Sorgen, wenn dies nicht der exakte Klon der aktuellen Benutzeroberfläche ist. Okay, also bevor wir direkt mit dem Schreiben des Codes beginnen, lassen Sie uns zunächst beschreiben , wie das Projekt aussieht Also wie gesagt, wir werden drei verschiedene Seiten erstellen, Haupt-Login und Registrierung. Wir beginnen mit der Hauptseite. Es wird aus verschiedenen Abschnitten bestehen. Der erste Abschnitt wird das Banner mit Navigation sein . Wir haben hier mehrere Navigationspunkte. Wenn ich den Mauszeiger über sie bewege, wird das Drop-down-Menü angezeigt Es wechselt, sobald wir Mauszeiger über ein anderes Navigationselement Außerdem werden wir hier zwei verschiedene Buttons zum Einloggen und Registrieren haben. Wenn ich sie anklicke, werden wir zur richtigen Seite navigieren. Auf das Banner folgt also der zweite Abschnitt. Es wird drei verschiedene Teile mit Schrift, fantastischen Symbolen, einigen Textelementen und Schaltflächen enthalten . Dann haben wir diesen blauen Abschnitt mit einigen verschiedenen Absätzen. Als Nächstes werden wir diesen kleinen Abschnitt hier mit einem Bild und drei verschiedenen Schritten erstellen . Unten finden Sie eine Schaltfläche zur Registrierung, gefolgt von der Fußzeile In Ordnung, also schauen wir uns die Hauptseite an. Schauen wir uns die Anmeldeseite an. Es wird der ursprünglichen Anmeldeseite ziemlich ähnlich sein. Wir werden hier zwei Eingabefelder mit Schaltflächen haben. Das ist wahrscheinlich die Anmeldeseite. Es wird aus zwei Teilen bestehen. Auf der linken Seite werden wir mehrere Bilder der Kunden haben . Was die rechte Seite betrifft, so wird sie zwei verschiedene Optionen enthalten. Egal, ob wir ein persönliches oder ein Geschäftskonto erstellen möchten. In Ordnung, das war's also mit dem Projekt. Wie üblich werden wir dafür sorgen, dass es auf verschiedene Bildschirmgrößen reagiert. Wenn ich die Seite überprüfe und in den Responsive-Modus wechsle, werden Sie feststellen, dass sie responsiv ist. Eine Sache, die hier zu beachten Auf kleineren Bildschirmgrößen werden wir die Drop-down-Menüs nicht mehr haben Sie werden sich so auf das Menü umstellen. Okay, das ist es also. Wir sind bereit, mit dem Bau des Projekts zu beginnen . Also lass uns weitermachen. 47. Projekt 5 - Erstelle und passe die Landingpage an: In Ordnung, ich denke, wir sind bereit zu beginnen. Ich habe auf dem Desktop einen neuen Ordner namens Portfolio-Website erstellt , in dem ich einen weiteren Ordner für die Bilder habe. Lassen Sie uns dieses Projekt im VS-Code öffnen und unsere Arbeitsdateien erstellen. Insgesamt werden wir also drei verschiedene Dateien für HTML, CSS und JavaScript haben. Lassen Sie uns sie erstellen. Danach öffne ich die Datei index.html und füge ein einfaches HTML-Dokument ein. Verwenden wir dafür Emirates. Wir müssen ein Ausrufezeichen setzen und dann die Eingabetaste oder die Tabulatortaste drücken Lass uns den Titel ändern. Ich füge Ihre Portfolio-Website ein. Dann verknüpfe ich die CSS- und JavaScript-Datei mit dem HTML. Geben Sie hier den Pfad der Serie als Datei an. Dann öffne ich das Script-Tag direkt über dem abschließenden Body-Tag. Und lassen Sie uns hier einen Teil der JavaScript-Datei in das Quellattribut einfügen . Außerdem müssen wir ein paar Links hinzufügen. Während des gesamten Projekts werden wir Font, Awesome Icons und auch eine der Google-Schriftarten verwenden . Also lasst uns weitermachen und nach Font Awesome, CDN js suchen. Dann gehe zum ersten Link und wähle hier CSS aus. Dann schnapp dir den Link. Als Nächstes öffne ich ein Link-Tag in den Kopfelementen. Dann füge hier die URL ein. Danach gehe ich zur Google Fonts-Website. Während des gesamten Projekts werde ich also eine Schrift namens Geost verwenden Wählen Sie dann alle verschiedenen Stile außer dem Italica aus. Schnappen Sie sich den Link und fügen Sie ihn in den Kopf ein. Okay, lassen Sie uns abschließend das Projekt im Browser ausführen. Dafür verwende ich eines der VS-Codepakete namens Live Server. Es ermöglicht uns, den Projektverlauf im Browser auszuführen und Änderungen und Aktualisierungen vorzunehmen ohne die Seite jedes Mal aktualisieren zu müssen. Daher empfehle ich, dieses Paket zu verwenden. Okay, das Letzte, was ich tun werde , ist, den Editor und den Browser so zu platzieren und den Browser so Und dann leg los. Wir werden das Projekt Abschnitt für Abschnitt aufbauen. Zuerst erstellen wir das HTML-Markup und dann passen wir diesen Abschnitt mithilfe von CSS Lassen Sie uns mit der Kreditseite beginnen. Lassen Sie uns die Entwicklungen öffnen, das wird der Container sein. Eigentlich möchte ich Kommentare verwenden, um den Anfang und das Ende jedes Abschnitts zu definieren. Das wird also der erste Abschnitt sein. Dann brauchen wir hier N von Abschnitt eins, der das Abschnittselement mit einer Klasse öffnet. Erster Abschnitt. Wie gesagt, der erste Abschnitt wird die Landingpage sein. Wir werden hier die Überschriften, das Bild und den Button Öffnen wir das H1-Überschriftenelement mit einem Klassenabschnitt und einer Überschrift mit dem Text-Webentwickler Als nächstes werden wir ein Bild haben. Ich wähle Bild, den Namen John Smith Punkt JPG aus dem Ordner Images aus. Dann gebe ich hier den Wert des Alt-Attributs an, John Smith. Und wir brauchen auch Klassenattribut, Wertperson, IMG. das Bild folgt also eine weitere Überschrift , in der wir den vollständigen Namen der Person haben werden. Öffnen wir also das h3-Überschriftenelement mit dem Namen der Klassenperson und dem Institut John Smith Und schließlich benötigen wir einen Button, durch das Link-Element dargestellt wird. Ordnen wir es zu. Klasse mit Wert ist Abschnitt eins, btn. Und fügen Sie auch Ihre Textprojekte ein. Ordnung, das HTML-Markup wird also für den ersten Abschnitt erstellt Jetzt ist es an der Zeit, mit dem Schreiben von CSS zu beginnen. Öffnen wir die Datei style.css und fügen Sie zunächst einige Reset - und allgemeine Styles hinzu. Vorher füge ich Ihre Kommentare, Ihren Reset und Ihre allgemeinen Stile ein. Und dann n von Reset und Common Styles Als Nächstes wähle ich jedes Element mit einem Sternchen Also werde ich die standardmäßigen Margen und Padding loswerden. Lassen Sie uns beide auf Null setzen. Als Nächstes entferne ich die Standardgliederung ohne Gliederung. Lassen Sie uns außerdem die Randbox in Boxgröße festlegen. Als Nächstes werde ich die Standardstile für den Link entfernen und auch Elemente auflisten. Lassen Sie uns keine Textdekoration verwenden. Und Typ im Listenstil, keiner. Danach setzen wir die Schriftfamilie auf Joseph sans-Serif, das sind die Google Fonts die Schriftfamilie auf Joseph sans-Serif, das sind die Google das sind die Und schließlich setze ich die Schriftstärke auf 400. Okay, sehen wir uns also an, wie die Rosette und üblichen Stile angewendet werden. Wie immer. Ich werde jetzt einen RAM als Maßeinheit verwenden , ein RAM entspricht 16 Pixeln, weil die Schriftgröße von HTML standardmäßig 16 Pixeln entspricht Ich möchte ein RAM in zehn Pixel umwandeln. Und dafür müssen wir die Schriftgröße von HTML verringern. Setzen wir es auf 62,5 Prozent. Wie Sie sehen, haben sich die Schriftgrößen der Elemente verringert. Lassen Sie uns damit beginnen, die Elemente dieses Abschnitts anzupassen. Ich füge Ihre Kommentare ein, Abschnitt eins. Und dann Ende von Abschnitt eins. Wählen Sie dann Abschnittselemente aus. Zunächst definiere ich Breite und Höhe. Lassen Sie uns die Breite auf 100 Prozent setzen. Was die Höhe angeht, werde ich sie auf 100% des Viewports setzen auf 100% des Viewports Also brauchen wir 100 Vh. Dann lege ich das Bild als Vollbild-Hintergrund fest Bild als Vollbild-Hintergrund Lassen Sie uns also zuerst den linearen Gradienten verwenden. Ich verwende deinen RGBA-Wert mit weißer Farbe und mit Opazität von Punkt Als nächstes benötigen wir wieder RGBA mit weißer Farbe und mit der Opazität 0,3 Danach definieren wir die URL des Bildes. Wir brauchen hier den Pfad des Bildes. Der Bildname wird bg dot JPG sein. Auf die URL folgt die Mitte und keine Wiederholung. Okay, lassen Sie uns abschließend die Größe des zu verdeckenden Hintergrunds festlegen . Wie Sie sehen können, hat dieser Abschnitt den Vollbildhintergrund Als Nächstes platziere ich diese Elemente in der Mitte der Seite. Verwenden wir dafür Flexbox. Wir brauchen Display Flex. Dann ändere ich die Richtung weil wir die Elemente in der Spalte platzieren müssen. Wir brauchen also eine Spalte mit flexibler Richtung. Um dann Artikel innerhalb des Containers an die Flex-Gruppe zu senden , müssen wir den Inhalt in der Mitte ausrichten und die Artikel in der Mitte ausrichten. Richtig? Das war's also mit diesem Abschnittselement. Lassen Sie uns weitermachen und die einzelnen Elemente anpassen. Ich fange mit der ersten Überschrift an. Wählen wir es aus. Erhöhen Sie die Schriftgröße. Ich mache sechs RAM draus. Ändere auch die Schriftstärke, mache sie auf 700. Dann setze ich die Farbe des Textes auf Weiß. Und ändere auch die Hintergrundfarbe. Ich verwende hier Call oder E für 1c6f. Die Überschrift sieht gut aus, aber wir müssen ihr einige weitere Stile hinzufügen. Ich werde mithilfe von Polsterungen etwas Platz innerhalb der Elemente schaffen mithilfe von Polsterungen etwas Platz innerhalb der Elemente Lassen Sie uns oben und unten den Abstand auf Null setzen. Und drei liefen auf der linken und rechten Seite. Außerdem werde ich am unteren Rand der Elemente etwas Platz schaffen, indem ich den Rand am unteren Ende der Elemente verwende. Als Nächstes wandle ich den Text in Großbuchstaben um. Und ich werde auch etwas Abstand zwischen den Buchstaben schaffen . Wir benötigen also einen Abstand zwischen Großbuchstaben für die Texttransformation mit einem Wert von einer Wiederholung. erstellen wir einen Rahmen am unteren Rand der Überschrift und erzeugen auch einen Schatteneffekt. Stellen wir das unterste 2.3 RAM ein, durchgehend und die weiße Farbe. Und dann definiere Textschatten mit den Werten, die auf RAM zeigen. Point to RAM als ein RAM. Und die Farbe 555. Ordnung, das Letzte, was ich mit der Überschrift machen werde , ist, sie ein wenig zu verzerren Verwenden wir dafür Transform oder diese Q-Funktion. Ich schiebe die Elemente um minus zehn Grad. Okay, wir machen uns auf den Weg, wir sind fertig. Gehen wir zum Bild über. Wählen wir es aus. Definieren Sie zunächst Breite und Höhe. Ich werde beide auf 25 RAM setzen. Um die Qualität des Bildes zu erhalten, benötigen wir ein Object-Feed-Cover. Und um seine Form zu einem Kreis zu machen, verwenden wir den Randradius, den Wert 50% Okay? Als Nächstes erstelle ich eine Grenze. Stellen wir die Größe 2,7 , dann wird der Stil gepunktet, und die Farbe ist E für eins, C6, f. Ändere auch die Hintergrundfarbe. Ändere auch die Hintergrundfarbe Ich werde den RGBA-Wert mit weißer Farbe und einer Opazität von 0,7 verwenden weißer Farbe und einer Opazität von 0,7 Und dann mit Padding etwas Speicherplatz schaffen, 0,5 RAM draus machen Und schließlich verringern Sie die Opazität leicht. Machen wir 0,9 draus. In Ordnung, das war's mit dem Bild. Als Nächstes werde ich Anpassungen und andere Überschriftenelemente vornehmen. Wählen wir es also aus, vergrößern wir die Schriftgröße und machen es zu einer Rampe. Dann ändere die Farbe, mache es weiß. Und ändere auch die Hintergrundfarbe. Verwenden Sie erneut die Farben E4 eins, c, sechs. Als Nächstes werde ich oben in der Überschrift und auch innerhalb der Überschrift etwas Platz schaffen . Verwenden Sie den Rand und stellen Sie ihn oben und unten auf fünf Rem und links und rechts auf Null ein. Was die Polsterung angeht, werde ich sie oben und unten auf 0,5 Rem und links und rechts auf drei Rem einstellen . Danach lassen Sie uns mit einem Buchstabenabstand von 0,3 RAM etwas Abstand zwischen den Buchstaben schaffen . Und außerdem werde ich die Überschrift leicht verzerren wie die erste Überschrift Verwenden Sie Transform Skew mit dem Wert minus zehn Grad. Okay, mit der zweiten Überschrift sind wir fertig und jetzt ist es an der Zeit, das letzte Element dieses Abschnitts anzupassen , nämlich die Schaltfläche Lassen Sie uns weitermachen und dieses Element auswählen. Lassen Sie uns zunächst die Schriftgröße ändern, es 1.7 laufen lassen und auch die Schriftstärke auf 700 setzen Als Nächstes ändere ich die Farbe. Machen wir 333 und setzen die Hintergrundfarbe auf Weiß. Danach erstellen wir eine Grenze. Der Wert ist 0,3, ist solide gelaufen und wir nennen sie 333. Außerdem möchte ich mithilfe von Padding etwas Platz innerhalb der Schaltfläche schaffen mithilfe von Padding etwas Platz innerhalb der Schaltfläche Stellen wir es oben und unten auf 0,5 Rem rechts und links auf ein Rem ein. Dann wandle Text in Großbuchstaben um und schaffe etwas Abstand zwischen den Buchstaben Machen wir 0,3 Runden draus. Ordnung, mit dem ersten Abschnitt sind wir fertig. Es sieht gut aus. Und jetzt müssen wir weitermachen und uns um den nächsten Teil kümmern, die Navbar sein wird 48. Projekt 5 - Navigation erstellen und stillieren: Zuerst werde ich es erstellen und stylen und dann werden wir die Navbar später zum Laufen bringen Lassen Sie uns weitermachen und das HTML-Markup erstellen. Ich werde Ihre neue Kommentar-Navigationsleiste einfügen. Dann funktioniert es nicht. Dann lassen Sie uns HTML5-Navigationselemente öffnen wobei die Klasse jetzt getrennt ist Insgesamt werden wir also für Navigationselemente haben, sie werden als Links dargestellt. Es ist also ein offenes Link-Element mit dem Klassennummer-Link mit dem Text Home. Lassen Sie uns weitermachen und das Link-Element dreimal duplizieren und den Inhalt ändern. Der zweite Punkt wird sich mit dem Thema befassen. Dann werden wir ein Portfolio haben. Schließlich müssen wir Kontakt aufnehmen. Ordnung, jetzt steht die Nummer am Ende der Seite Es ist also nicht ganz machbar. Ich brauche etwas Platz am Boden der Nanopore, damit ich dir die Dinge klar zeigen Also werde ich ein paar B-Are-Tags verwenden. Nehmen wir Emmet. Wir müssen mehr als ein Sternchen und 50 sein. Also jetzt haben wir hier etwas Platz. Das ist also über HTML gesagt. Lass uns weitermachen und anfangen, das CSS zu schreiben. Lassen Sie uns weitermachen und neue Kommentare einfügen. Navbar und dann n oder edler als ausgewählte Navigationselemente. Zunächst definiere ich die Breite und Höhe. Lassen Sie uns die Breite auf 100 Prozent setzen. Was die Höhe angeht, machen wir es für RAM. Und ändere auch die Hintergrundfarbe. Verwenden wir hier Called oder E für ein, C, F. Okay, Nächstes positioniere ich die Navigationselemente im Sinne des Napa Und dafür werde ich Flexbox verwenden. Tatsächlich haben wir diese Technik bereits angewendet und werden sie im Laufe des Projekts ein paar Mal anwenden . Und um zu vermeiden, dass ich es immer wieder schreibe, werde ich eine neue Klasse mit gängigen Stilen erstellen. Nennen wir es Zentrum. Und dann hier einfügen, flexibel anzeigen, Inhalt mittig ausrichten und Elemente mittig ausrichten. Um diese Kacheln dann anzuwenden, müssen wir den Elementen ein Klassenzentrum zuweisen. Wir verwenden diese Kacheln mit Abschnitt eins. Lassen Sie uns also weitermachen und ihm ein Clusterzentrum zuweisen. Dann werde diese Styles von hier aus los. Und dann weisen Sie dem Navigationselement auch das Klassenzentrum zu. In Ordnung? Wie Sie sehen, hat sich an der Kreditvergabe nichts geändert. Was die Navigationsleiste betrifft, werden die Elemente in der Mitte platziert. Moment ist das Letzte, was Napa angeht , einen kleinen Schatteneffekt zu erzeugen Verwenden wir also Box Shadow, wobei die Werte auf Ram zeigen. Zeigen Sie auf RAM als 0,5 RAM. Und die Farbe 555. Okay, das war's mit dem Navbar-Navigationselement. Lassen Sie uns die Link-Elemente anpassen. Also werde ich zunächst die Schriftgröße ändern. Machen wir 1,7 Rem draus. Außerdem setze ich die Schriftstärke auf 600 und ändere dann die Farbe des Textes auf 333 Okay, als nächstes brauchen wir etwas Platz zwischen den Gegenständen. Lassen Sie uns diesen Raum mithilfe von Margin erstellen. Ich setze oben und unten die Marge auf Null. Und dann drei RAM auf der rechten und linken Seite. Lassen Sie uns außerdem einen Abstand zwischen den Buchstaben schaffen. Verwenden wir den Buchstabenabstand mit dem Wert 0,3 RAM und wandeln Text in Großbuchstaben Ordnung, das Letzte, was ich in Bezug auf die Navigationsleiste tun werde , ist, einen Hover-Effekt zu erzeugen Werfen wir einen Blick auf das fertige Projekt. Sobald wir den Mauszeiger über die Gegenstände bewegen, ändern sie ihre Farbe Und auch die Zeile wird unter dem Artikel angezeigt. Diese Zeile wird unter Verwendung von vorherigen Pseudoelementen erstellt unter Verwendung von vorherigen Pseudoelementen Lassen Sie uns also weitermachen und das Link-Element mit den vorherigen Pseudoelementen auswählen das Link-Element mit den vorherigen Pseudoelementen Lassen Sie uns zunächst den Inhalt definieren. Ich werde es leer machen. Dann setze ich die Breite auf 130%. Definieren Sie außerdem die Höhe, stellen Sie sicher, dass sie auf den RAM zeigt, und ändern Sie die Hintergrundfarbe. Lass es uns weiß machen. Im Moment ist das Element also nicht sichtbar. Und um das zu beheben, setzen wir die Position auf absolut. Dann müssen wir den oberen Link relativ positionieren, weil ich die Linie entsprechend dem übergeordneten Element positionieren werde , bei dem es sich um einen Nap oder Link handelt. Die Linien sind sichtbar, aber sie sind nicht richtig platziert . Ich werde die Positionen rechts und unten definieren. Also setze ich die richtige Position auf -15%, da die Breite der Linie 130% entspricht Und wenn es angezeigt werden die Gegenstände in der Mitte platziert. Was die unterste Position angeht, setzen wir sie auf -0,3 Runden In Ordnung, also ist alles bereit, um einen Schwebeeffekt zu erzeugen. Standardmäßig verstecke ich die Zeilen. Lassen Sie uns also weitermachen und ihre Breite auf Null setzen. Wählen Sie dann den Zahlenlink mit der Maus aus, gefolgt vom vorherigen Pseudoelement und setzen Sie die Breite auf Lassen Sie uns außerdem Transition verwenden. Wir brauchen hier Breite und 0,2 s. Okay? Wie Sie sehen können, funktioniert der Hover-Effekt einwandfrei Und zum Schluss ändere ich die Farbe der Elemente, wenn Sie mit der Maus darauf zeigen Also lass uns weitermachen und jetzt Berlin mit dem Mauszeiger auswählen. Dann ändere die Farbe, mach es weiß. Und verwende Transition auch mit den Werten Farbe und 0,2 s. In Ordnung, also funktioniert alles perfekt Der Roman ist maßgeschneidert, und jetzt ist es an der Zeit, mit dem nächsten Abschnitt fortzufahren. 49. Projekt 5 - Fortschrittsbalken erstellen und anpassen: Der nächste Abschnitt wird der Abschnitt Über mich sein. Es wird aus einer Überschrift, einigen Fortschrittsbalken, die die verschiedenen Fähigkeiten des Entwicklers zeigen, und mehreren Social-Media-Symbolen mit einigen Diensten bestehen einigen Fortschrittsbalken, die die verschiedenen Fähigkeiten des Entwicklers zeigen , und . Lassen Sie uns weitermachen und mit der Erstellung des HTML-Markups beginnen . Fügen wir neue Kommentare ein, Abschnitt zwei und Abschnitt zwei. Dieser Open-Section-Element-Klassenabschnitt auch. Innerhalb des Abschnitts wird das Element also aus drei Hauptteilen bestehen. Die erste wird die Überschrift sein. Lassen Sie uns die H1-Überschrift Regierung mit der Überschrift des zweiten Klassenabschnitts öffnen mit der Überschrift des zweiten Klassenabschnitts und hier über mich einfügen Als Nächstes werden wir Fortschrittsbalken haben. Also öffne ich ein div-Element, das der Wrapper sein wird, unterschreibe ihm Klassenfortschrittsbalken, Wrapper Insgesamt werden wir also sieben Fortschrittsbalken haben. Lassen Sie uns weitermachen und den ersten erstellen, und dann werden wir ihn sechsmal duplizieren. Also dem Fortschrittsbalken der Entwicklung zugewiesen. Fügen Sie dann Ihren Absatz mit dem Text zum Klassenfortschritt ein. Wir werden hier verschiedene Technologien haben. Das erste wird HTML sein, dann ein Open-Span-Element, das die Nummer des Prozentsatzes enthält. Schreiben wir hier 97, gefolgt vom Prozentzeichen. Und schließlich brauchen wir das Div-Element für den Fortschritt. Gegenwart. Der erste Fortschrittsbalken wird erstellt. Lass es uns sechsmal duplizieren und dann den Inhalt ändern. Das zweite wird also CSS mit 89% sein. Dann werden wir zu 85 Prozent JavaScript haben. Dann wird der nächste Sass sein, 87%. Dann liegt React bei 80 Prozent , NodeJS bei 70 Und schließlich werden wir Mongo DB mit 50 Prozent haben. Okay? Wir haben hier also Überschriften und Fortschrittsbalken. Als Nächstes müssen wir den dritten Teil des zweiten Abschnitts erstellen . Es wird Services sein. Lassen Sie uns also die Entwicklungen mit den Clusterdiensten eröffnen. Insgesamt werden wir also vier verschiedene Dienste haben. Lassen Sie uns die erste erstellen, eine offene Entwicklung mit dem Klassenservice. Es wird zwei verschiedene Elemente beinhalten. Das erste wird Font, Awesome Icon sein. Also öffne ich das Element mit den Klassen, FAR, eine Glühbirne. Dann benötigen wir ein H2-Überschriftenelement mit der Überschrift Class Service Fügen wir hier erstellt ein. Der erste Service ist fertig. Lass es uns dreimal duplizieren, die Klassennamen und die Überschriften ändern Die zweite Option wird die Lösung von Problemen durch die FASFA sein. Dann haben wir FAS, einen Taco-Meter draußen, und es wird schnell gehen Und für den letzten Service werde ich seine Econ-Klassen verwenden, FAS, eine Und als Überschrift fügen wir hier Dynamik ein. In Ordnung, das HTML-Markup ist fertig. Als Nächstes müssen wir weitermachen und diese Elemente anpassen. Lassen Sie uns weitermachen und neue Kommentare einfügen. Abschnitt zwei und Abschnitt zwei. Wählen Sie dann Abschnittselemente aus. Und zuallererst definierte Breite und Höhe. Ich werde beide aufstellen. 200%. Schafft auch etwas Platz durch Polsterung Ich setze das Padding auf 15 RAM oben und auf Null auf der rechten Seite Zehn liefen unten und Null auf der linken Seite. Außerdem setze ich die Hintergrundfarbe auf Weiß. Standardmäßig ist es weiß. Aber wie dem auch sei, ich werde es definieren. In Ordnung, als Nächstes zentriere ich die Elemente horizontal. Verwenden wir Flexbox. In diesem Fall benötigen wir kein Cluster Center, da wir nicht alle Styles aus dieser Klasse verwenden werden. Wir brauchen also Display-Flex, dann müssen wir die Flexrichtung ändern. Machen wir daraus eine Kolumne. Platzieren Sie dann Elemente horizontal in der Mitte , indem Sie die Elemente mittig ausrichten Ordnung, sehen wir uns das Abschnittelement Über Lassen Sie uns weitermachen und die Überschrift anpassen. Wählen Sie die Überschrift des zweiten Abschnitts aus. Lassen Sie uns die Schriftgröße erhöhen und fünf RAM daraus machen. Ändere auch die Farbe, die wir hier benötigen. 333. Transformiere dann Text in Großbuchstaben und schaffe etwas Abstand zwischen den Buchstaben, indem du den Buchstabenabstand verwendest, den Wert 0,5 rem Als nächstes brauchen wir etwas Platz am unteren Rand der Überschrift. Außerdem werde ich unten einen Rand und etwas Schatten hinzufügen . Lassen Sie uns also die Margenuntergrenze auf 15 Rampe setzen. Erstellen Sie dann unten einen Rahmen mit den Werten 0,3 RAM Solid und der Farbe 333. Und verwende auch Text Shadow mit den Werten point to ram, point to ram 0.5 rem und der Farbe 555. In Ordnung, das war's also mit dem Überschriftenelement. Lassen Sie uns weitermachen und benutzerdefinierte Fortschrittsbalken erstellen. Ich wähle den Wrapper aus, der den Klassennamen Progress Bars Wrapper hat Und schaffen Sie unten etwas Platz, indem Sie Rand, unterster Wert Tan around verwenden. Als Nächstes wähle ich den Fortschrittsbalken selbst aus. Definieren wir zunächst Breite und Höhe. Ich setze die Breite auf 60 RAM. Was die Höhe angeht, lassen Sie uns drei RAM daraus machen. Und ändere auch die Hintergrundfarbe. Benutze dein C. C, C. Okay. Jetzt haben wir zwei separate Fortschrittsbalken, also brauchen wir etwas Abstand zwischen ihnen. Lassen Sie uns mithilfe von Margin Platz schaffen. Ich setze es auf 1,5, lief als Ober- und Unterseite und Null auf der linken und rechten Seite. Außerdem werde ich die Ecken leicht abgerundet machen. Verwenden Sie Border-Radius mit dem Wert 0,3 RAN. Verwenden Sie abschließend Box-shadow mit den Werten point to ram, point to ram, einem RAM und der Farbe 555 Okay, das war's mit dem Fortschrittsbalken. Lassen Sie uns weitermachen und den Text anpassen. Wählen Sie also Absatz und setzen Sie seine Position auf absolut. Außerdem müssen wir das übergeordnete Element relativ positionieren . Stellen Sie dann die linke Eigenschaft auf einen Lauf ein. Danach werde ich die Schriftgröße erhöhen. Lassen Sie uns 1,5 Rem daraus machen und den Text auch weiß machen. In Ordnung, danach werde ich Span-Elemente anpassen Ich meine diese Zahlen. Also lass uns weitermachen und es auswählen. Zunächst werde ich mit Hilfe von Margin etwas Platz auf der linken und rechten Seite schaffen . Setzen wir es auf Null, da es oben und unten ist. 0,5 Rem auf der linken und rechten Seite. Diese erhöhte Schriftgröße macht es zu 1.8 Ran. Und ändern Sie auch die Schriftstärke. Ich setze es auf 700. In Ordnung, mit dem Text sind wir fertig. Lassen Sie uns weitermachen und den Fortschritt in Prozent der Div-Elemente formatieren. Im Moment werde ich den Prozentsatz manuell festlegen. Ich meine, alle Fortschrittsbalken werden den gleichen Prozentsatz haben, aber irgendwann werden wir ihn mit JavaScript ändern. Wählen wir also den aktuellen Fortschritt aus. Stellen Sie die Breite auf neun Prozent ein. Das ist wahrscheinlich Höhe. Machen wir es zu 100%. Dann ändere ich die Hintergrundfarbe. Verwenden wir Ihre Farbe, E4, e1, siehe sechs F. Und runden Sie auch die Ecken ab, indem Sie den Randradius mit dem Wert 0,3 rat verwenden Randradius mit dem Okay, sehen wir uns den Balken an, die Fortschrittsbalken. Gehen wir zum dritten Teil dieses Abschnitts über, der sich mit den Diensten befassen wird. Wählen wir die schnelle Entwicklung. Definieren Sie zunächst Breite und Höhe. Ich setze die Breite auf 100%. Was die Höhe angeht, machen wir sie auf 30% des Viewports aus. Als Nächstes platziere ich Dienste horizontal in einer Reihe mit etwas Abstand. Und dafür werde ich Flexbox verwenden. Verwenden wir hier Display Flex. Das, um Raum zu schaffen. Ich meine sogar den Abstand zwischen den Gegenständen. Lassen Sie uns den Inhaltsbereich „Rechtfertigen“ gleichmäßig verwenden. Sie dann für die vertikale Zentrierung die Option Verwenden Sie dann für die vertikale Zentrierung die Option Elemente mittig ausrichten In Ordnung, mit dem Wrapper sind wir fertig. Lassen Sie uns weitermachen und den Service selbst anpassen. Ich werde Elemente in der Mitte platzieren. Verwenden wir also Text Align Center. Okay, lassen Sie uns weitermachen und die Font Awesome-Symbole anpassen. Also werde ich zunächst die Schriftgröße erhöhen. Machen wir zehn RAM draus. Dann ändere die Farbe. Benutze dein Alter, aß, aß. Schaffen Sie auch unten Platz. Verwenden Sie Margin-Bottom, um zu laufen. Und dann einen Schatteneffekt erzeugen. Verwenden Sie Text. Schatten mit einem Wert von 0,11, 0,1, 0,5 rem und der Farbe 555 In Ordnung, schauen wir uns die Schrift an, Fantastische Symbole. Danach müssen wir uns um die Überschriften kümmern. Wählen wir also Service H2 aus, erhöhen die Schriftgröße und bringen es zu Ram Farbe ändern. Mach es weiß. Außerdem werde ich die Hintergrundfarbe ändern. Ich nehme Farbe oder 777. Und dann definiere die Breite, mache 25 Runs draus. Als Nächstes werde ich etwas Abstand zwischen den Buchstaben schaffen , indem ich einen Buchstabenabstand mit dem Wert 0,3 RAM verwende . Ich werde auch die Überschrift leicht verzerren. Verwenden wir also Transform Skew mit einem Wert von minus zehn Grad. Abschließend erstelle ich mit Box Shadow einen Schatten mit den Werten point to ram, points to run 0.5 RAM, und wir nennen sie 555. In Ordnung, die Dienste sind also gestylt. Wir sind fast fertig mit diesem Abschnitt. Das einzige, was ich tun werde, ist, die Positionen des ersten und letzten Dienstes geringfügig zu ändern . Ich werde sie nach oben verschieben. Wählen wir diese Elemente mithilfe von Pseudoklassen für das erste Kind und das letzte Kind aus. Ich wähle beide gleichzeitig aus. Verwenden Sie dann align self, flex, start. Okay, endlich sind wir mit diesem zweiten Abschnitt fertig. Es ist maßgeschneidert. Sieht gut aus, und jetzt müssen wir mit dem nächsten Abschnitt fortfahren. 50. Projekt 5 - Projektabschnitt erstellen und anpassen: Der nächste Abschnitt wird der Projektabschnitt sein. Es besteht aus einer Überschrift und einigen verschiedenen Projekten. Wenn wir den Mauszeiger über sie bewegen, werden einige Details mit schönen Übergangseffekten angezeigt Wir haben hier auch einen Button, gehe zum Video. Es enthält den Link zum richtigen Video auf unserem YouTube-Kanal. Ordnung, lassen Sie uns weitermachen und wie gewohnt der Erstellung des HTML-Markups beginnen Lassen Sie uns Ihre neuen Kommentare einfügen. Abschnitt drei. Dann Ende von Abschnitt drei. Öffnen Sie dann das Abschnittselement mit der Klasse Abschnitt drei. In diesem Abschnitt werden wir zwei Hauptteile haben. Die erste wird die Überschrift sein. Was den zweiten Teil angeht, so wird es das Projekt sein. Öffnen wir H1-Überschriftenelemente mit der Klasse, Abschnitt drei Überschrift mit dem Text, meinen Projekten Als Nächstes öffne ich ein div-Element, das der Wrapper der Projekte sein wird Du solltest einen Wrapper für Klassenprojekte haben. Insgesamt werden wir also neun ähnliche Projekte haben. Ich werde den ersten erstellen und dann werden wir ihn achtmal duplizieren. Öffnen wir also ein div-Tag mit einem Klassenprojekt. Jedes Projekt wird aus drei verschiedenen Teilen bestehen. Die erste werden die Projekttexte sein, in denen wir zwei verschiedene Überschriften haben werden Der erste wird der Projektname sein. Lassen Sie uns das H2-Überschriftenelement mit einem Klassenprojektnamen öffnen und Ihre Architekten-Website einfügen In den nächsten Überschriftenelementen werden die Technologien aufgeführt, die zur Erstellung eines Projekts verwendet werden. Also werde ich H4-Überschriftenelemente mit der Klasse Project Technologies öffnen H4-Überschriftenelemente mit der Klasse Project Technologies Lassen Sie uns Ihr HTML, CSS und JavaScript einfügen. In Ordnung, lassen Sie uns über den ersten Teil sprechen. Als nächstes haben wir ein Bild, offene Bildelemente. Geben wir hier den Pfad des Bildes an. Wir brauchen. Projizieren Sie ein Punkt-JPG aus dem Bilderordner. Und außerdem werde ich dem Image ein Klassenattribut mit dem Wert Project IMG zuweisen . Was den dritten Teil betrifft, wird es eine Schaltfläche sein , die als Link dargestellt wird. Also lassen Sie uns der Klasse einen Projektlink zuweisen. Außerdem verwende ich das Zielattribut mit einem leeren Unterstrich Dadurch können wir den Link in einem neuen Tab öffnen. Abschließend fügen wir hier den Text „Gehe zum Video“ ein. Okay, das erste Projekt ist fertig. Ich werde es achtmal duplizieren und dann einige Änderungen vornehmen. Als erstes füge ich den Link des Videos ein. Eigentlich habe ich diese Links in einer Textdatei vorbereitet. Also werde ich sie mir schnappen und hier einfügen. Tatsächlich können Sie diese Links einschließen oder nicht. Es liegt an dir. Das zweite Projekt wird budgetiert von React js erstellt. Dann brauchen wir hier ein Projekt im JPEG-Format. Und füge dir auch den Link ein. Okay, das nächste wird das Weiße Haus sein, das auf der Grundlage von HTML, CSS und JavaScript erstellt wurde. Lassen wir sie also so wie sie sind. Ändern Sie dann den Bildnamen. Wir müssen dreipunktiges JPG projizieren und hier den YouTube-Link einfügen. Okay, als nächstes haben wir den Task-Manager mit React js. Außerdem brauchen wir hier Projekt vier. Und dann der Link. Das nächste Projekt wird die Straße mit HTML, CSS und JavaScript sein. Dann brauchen wir Projekt fünf. Und auch der Link. Als nächstes haben wir das Essensrezept. Es wurde mit React js erstellt. Wir müssen Projekt sechs hier haben. Und der Link. Als nächstes haben wir eine Diashow Es wurde auf der Grundlage von HTML, CSS und JavaScript erstellt Ändern Sie den Bildnamen, wir benötigen Projekt 7 und dann den Link. Das nächste Projekt wird ein Hamburger-Menü sein. Es wurde mit HTML, CSS und JavaScript erstellt. Lassen Sie uns auch den Bildnamen ändern. Wir brauchen Projekt acht und haben die Verbindung hergestellt. Und das letzte Projekt wird das CSS-Grid-Menü sein, das erneut mit HTML, CSS und JavaScript erstellt wurde. Und der Bildname wird Project Night sein. Fügen Sie hier auch den letzten Link ein. Okay, das HTML-Markup ist vorbereitet und jetzt müssen wir anfangen, etwas CSS zu schreiben Fügen wir neue Kommentare ein. Abschnitt drei. Dann Ende von Abschnitt drei. Wählen Sie dann Abschnittselemente aus. Definieren Sie seine Breite und Höhe. Ich setze beide auf 200 Prozent. Außerdem werde ich mithilfe von Padding etwas Platz in diesem Abschnitt schaffen mithilfe von Padding etwas Platz in diesem Abschnitt Setzen wir es oben und unten auf zehn Rem und machen es rechts und links auf Null. Und ändere auch die Hintergrundfarbe. Ich werde hier die Farbe E, F verwenden . Als Nächstes platziere ich den Inhalt in der Mitte dieses Abschnitts. Verwenden wir dafür Flexbox. Wir brauchen Fakten. Dann ändere ich die Richtung. Sie sehen die Spalte mit der Flexrichtung. Und schließlich verwenden Sie die Option „Elemente in der Mitte ausrichten“. Ordnung, der Inhalt wird in der Mitte platziert, und jetzt werde ich die Überschrift anpassen Eigentlich wird es der Überschrift des vorherigen Abschnitts ähneln . Anstatt also immer wieder dieselben Stile zu schreiben , werde ich beiden Überschriften dieselben Klassennamen zuweisen , und die Stile werden auf beide gleichzeitig angewendet Verwenden wir also die Überschrift des Klassenabschnitts und ändern wir auch die Klasse in der CSS-Datei. Und dann platziere diese Kacheln in die allgemeinen Statistiken. Wie Sie sehen können, ist die Überschrift des dritten Abschnitts formatiert. Gehen wir zu den Projekten über. Ich wähle das Wrapper-Div-Tag aus. Definieren wir die Breite, machen sie zu 80%. Also werde ich Projekte in der Mitte des Wrappers platzieren Projekte in der Mitte des Wrappers Und dafür möchte ich Flexbox verwenden. Und anstatt diese Handtücher hier zu schreiben, sollten wir einfach das Clusterzentrum verwenden, das wir zuvor vorbereitet haben. Und außerdem werde ich Flex Wrap zusammen mit Value Wrap verwenden . Wie Sie sehen können, sind die Projekte schön nebeneinander platziert Lassen Sie uns weitermachen und das Projekt selbst anpassen. Zuallererst werde ich den Inhalt des Projekts in den Mittelpunkt stellen , dafür müssen wir wieder verwenden, Flux-Bücher. Wir können entweder jedem Projekt-Cluster Center zuordnen jedem Projekt-Cluster Center oder wir können es neu definieren, das steht hier. In diesem Fall verwenden wir die Flexbox-Eigenschaften hier in CSS, da das Zuweisen von Clustern zu jedem Projekt mehr Zeit in Anspruch nimmt Wir brauchen also Display-Flex, dann Flexrichtung, Spalte. Wir müssen das Inhaltszentrum ausrichten und das Artikelzentrum ausrichten. Als Nächstes werde ich etwas Platz zwischen den Projekten schaffen. Machen wir das mit Margin. Ich werde es auf ein RAM einstellen. Auch als definierte Hintergrundfarbe. Mach es weiß. Und schließlich verwende Box Shadow mit den Werten 0,3, 0,3 RAM als 0,5 rem. Und wir nennen diese 777. In Ordnung, das war's jetzt mit dem Projekt. Lassen Sie uns weitermachen und die Elemente des Projekts anpassen. Und dann erzeugen wir einen Schwebeeffekt. Ich werde Projekttexte auswählen. Lassen Sie uns einer Textausrichtung den Mittelpunkt zuweisen Außerdem benötige ich Seitenabstände für alle Elemente, die darin enthalten Lass uns 0,1 ran machen. Danach wählen wir den Projektnamen aus. Ändere die Schriftgröße, mache drei Runden. Dann setze ich die Schriftstärke auf 700. Definieren Sie auch die Farbe, machen Sie daraus 333. Und schließlich werde ich Projektnamen mithilfe der Texttransformation groß schreiben lassen Projektnamen mithilfe der Texttransformation groß schreiben Großschreiben. Die Überschrift sieht gut aus. Lassen Sie uns weitermachen und die ausgewählten Technologien anpassen . Ich werde die Schriftgröße ändern. Machen wir 1,8 RAM daraus und setzen dann die Farbe auf E4, e1 Siehe sechs F. Okay, als Nächstes werde ich die Breite des ausgewählten Bildes verringern und die Breite für DRAM anpassen. Okay, also endlich müssen wir den Link anpassen. Also lass uns weitermachen und es auswählen. Zuerst. Definieren wir die Schriftgröße, lassen Sie es laufen. Dann ändere die Schriftstärke und mache es auf 500. Ich werde ein Set namens a2, a3, a3, a3 verwenden. Und schafft auch Platz zwischen den Buchstaben. Lass uns 0,1 ran machen. Danach werde ich eine Grenze erstellen. Lassen Sie uns die Wahrheitswerte Punkt zuweisen, wir sind durchgehend und die Farbe E4, e1, siehe sechs F. Dann werde ich mit Padding etwas Platz innerhalb des Links schaffen Machen wir oben und unten Null und rechts und links jeweils einen Rem. Und schließlich setzen Sie die Hintergrundfarbe auf Weiß. In Ordnung, also sind alle Elemente angepasst und jetzt müssen wir einen Hover-Effekt erzeugen Lassen Sie uns mit einem Projekttext beginnen. Ich werde diese Position definieren. Machen wir es absolut. Dann benötigen wir die relative Position für das Projekt, das das übergeordnete Element ist. Und dann setze ein Top-Grundstück auf minus zehn Rampe. Wie Sie sehen, hat sich die Position der Projektsteuer geändert. Wählen wir das Projekt mit dem Mauszeiger aus, gefolgt von den Projekttexten Nehmen wir an, Spitzenposition bei fünf RAM. Und dann verwende Transition mit einem Wert von über 0,3 s. Okay? Sobald wir den Mauszeiger über die Projekte bewegen, bewegt sich die Projektsteuer von oben nach unten Jetzt möchte ich dasselbe für das Link-Element tun. Lassen Sie uns seine Position ändern. Ich setze es auf absolut. Dann brauchen wir die unterste Position minus fünf RAM. Danach wähle ich Projekte mit dem Mauszeiger aus, gefolgt vom Projektlink Wenn Sie also mit der Maus darüber fahren, setze ich die Taste auf Fibrin. Und ich werde Transition mit den Werten Partisan 0.37 verwenden mit den Werten Partisan Ordnung, wenn ich jetzt den Mauszeiger über das Projekt bewege, wird das Standard-Link-Element ebenfalls verschoben Danach werde ich die Opazität des Bildes verringern die Opazität des Bildes Lassen Sie uns weitermachen und das Projekt auswählen, über das sich der Mauszeiger bewegen soll , gefolgt vom Projektbild Also setze ich die Opazität auf 0,2. Lassen Sie uns außerdem Transition mit den Werten Opazität 0,3 s verwenden . Jetzt sieht der Effekt also besser aus Und als Nächstes werde ich den Inhalt standardmäßig ausblenden. Dazu weisen wir dem Projekt einen versteckten Überlauf zu. Jetzt ist der Inhalt standardmäßig ausgeblendet. Und sobald wir den Mauszeiger über die Projekte bewegen, werden sie angezeigt. Wir haben hier ein kleines Problem. Die Projekttexte landen hinter dem Bild und wir können es nicht auswählen. Also werde ich einen Z-Index mit einem Wert verwenden, sagen wir zehn. Okay? Jetzt ist das Problem behoben. Als Nächstes möchte ich den Projekttexten und auch dem Link eine gewisse Verzögerungszeit hinzufügen . Sobald wir den Mauszeiger zuerst über das Projekt bewegen, möchte ich die Opazität des Bildes verringern und dann den Inhalt anzeigen Aber sobald wir mit der Maus raus sind, brauchen wir keine Verzögerung mehr. Daher müssen wir Transition mit der Hover-Pseudoklasse verwenden mit der Hover-Pseudoklasse Lassen Sie uns Ihr Oberteil mit einer Dauer von 0,3 s verwenden. Und dann wird die Verzögerungszeit 0,3 s angegeben . Als nächstes müssen wir Unterseite und mit einer Dauer von 0,3 s und der Verzögerungszeit ebenfalls 0,3 s übergehen . In Ordnung, jetzt haben wir einen viel besseren Effekt. Das Letzte, was ich mit diesem Abschnitt machen möchte, ist Maus einen Schatteneffekt zu erzeugen Wählen wir also ein Projekt mit Hauler aus und setzen Box Shadow auf einen Lauf Dann ein Rem und dann wieder ein RAM mit der Farbe 777. Und zum Schluss verwenden wir Transition mit den Werten Box Shadow, 0,5 s. Okay? Der Schatteneffekt funktioniert also einwandfrei. Und eigentlich sind wir mit diesem Abschnitt fertig. Jetzt müssen wir weitermachen und den Inhaltsbereich erstellen 51. Projekt 5 - Kontaktabschnitt erstellen und stillieren: Der Kontaktbereich wird einfach sein. Wir werden eine Überschrift und ein paar Eingabefelder mit dieser Senden-Schaltfläche haben. Lassen Sie uns weitermachen und mit der Erstellung des HTML-Markups beginnen . Fügen wir neue Kommentare ein. Abschnitt vier, dann n von Abschnitt vier. Und offenes Abschnittselement mit einer Klassenabschnittsgabel. Insgesamt werden wir also zwei verschiedene Teile haben. Die erste wird die Überschrift sein. Es sind also offene H1-Überschriftenelemente. Ich werde der Überschrift zwei verschiedene Klassen zuordnen. Die erste wird die Überschrift des Abschnitts mit den allgemeinen Klassennamen sein . Was den zweiten betrifft , so wird es der einzelne Klassenabschnitt als Überschrift als Text sein. Lass uns hier einfügen, kontaktiere mich. Okay, das war's mit der Überschrift. Der zweite Teil dieses Abschnitts wird sich mit den geformten Elementen befassen. Öffnen wir es mit dem Klassenkontaktformular. Das Formularelement wird also zwei Eingaben, einen Textbereich und die Schaltfläche „Senden“ enthalten . Öffnen wir das Eingabeelement mit dem Typtext. Und wo ist das Platzhalterattribut, das einen Wertnamen haben wird , dass ich dieses Element duplizieren werde Ändern Sie den Typ. Ich verwende Ihre E-Mail-Adresse und ändere dann den Wert des Platzhalter-Attributs. Machen wir es per E-Mail. Als nächstes werden wir einen Textbereich haben. Ich werde ihm ein Platzhalterattribut mit einer Wertmeldung zuweisen Platzhalterattribut mit einer Wertmeldung Und schließlich benötigen wir einen Senden-Button , der mithilfe der Eingabeelemente erstellt wird. In diesem Fall wird der Typ eingereicht. Dann brauchen wir Value Submit. Und außerdem werde ich deinen Klassenkontakt für BTN verwenden. Okay, das HTML-Markup ist also vorbereitet. Wie du siehst, hat die Überschrift einige Stile, aber sie sieht momentan nicht ganz gut aus. Wir werden das in einer Minute beheben. Lassen Sie uns weitermachen und neue Kommentare in den Abschnitt mit der CSS-Datei für das Ende von Abschnitt vier einfügen . Wählen Sie dann Abschnittselemente aus. Und definieren Sie zunächst Breite und Höhe. Ich werde die Breite auf 200 Prozent einstellen. Für die Höhe. Machen wir 70% des Viewports daraus. Und ändere auch die Hintergrundfarbe. Mach 33 draus. Okay, als Nächstes platziere ich den Inhalt in der Mitte. Und dafür verwenden wir Flexbox. Wir benötigen die Spalte Display-Flex und Flexrichtung. Als Nächstes zentriere ich den Inhalt horizontal. Richten Sie dazu die Elemente mittig aus. Und schließlich, um etwas Abstand zwischen den Flex-Elementen zu schaffen , verwenden wir den gleichmäßigen Inhaltsbereich „Justify Content“. In Ordnung, das war's also mit diesem Abschnittselement. Lassen Sie uns weitermachen und uns um die Überschrift kümmern. Gerade jetzt. Es enthält einige Standardstile aus dieser Klasse für Abschnittsüberschriften. Und ich werde seine Farbe ändern. Wählen wir also den Abschnitt für die Überschrift aus und machen wir die Farbe weiß. Dann wird Box Shadow entfernt. Ich setze es auf „Keine“ und ändere auch die Farbe des Rahmens mithilfe der Eigenschaft „ Rahmenfarbe“. Machen wir es weiß. Okay, die Überschrift ist also angepasst und jetzt müssen wir zu den Formularelementen übergehen. Lassen Sie uns weitermachen und es auswählen und die Breite definieren. Ich setze es auf 50 Rem. Als Nächstes werde ich die Elemente vertikal in einer Spalte platzieren, und ich werde sie auch in der Mitte platzieren. Also müssen wir Flexbox verwenden. Und in diesem Fall weisen wir dem Formularelement das Klassenzentrum zu . Und dann ändere die Biegerichtung, mache daraus eine Spalte. Die Eingabefelder und Schaltflächen sind ausgerichtet, und jetzt werde ich sie formatieren. Lassen Sie uns gemeinsam Eingaben und Textbereich auswählen. Definieren Sie dann die Breite, machen Sie sie zu 100%. Schaffen Sie dann mithilfe von Padding etwas Platz innerhalb der Felder Machen wir 0,5 Rem auf allen vier Seiten. Und außerdem werde ich mithilfe von Margin Platz am oberen und unteren Rand der Felder schaffen Platz am oberen mithilfe von Margin Platz am oberen und unteren Rand der Felder Lassen Sie uns ihn oben und unten auf 0,5 rem und auf Null auf rechts und links setzen . Als Nächstes ändere ich die Hintergrundfarbe. Nehmen wir Ihre Farbe E F. Ändern Sie auch die Schriftgröße, machen Sie 1,5 g. Dann erstellen Sie einen Rand, sodass die Werte durchgehend verlaufen. Und die Farbe E4, e1, C6, F. Und schließlich ändere die Farbe des Textes, mache In Ordnung, als Nächstes werde ich den Textbereich anpassen. Wie Sie wissen, können Sie die Breite und Höhe manuell erhöhen oder verringern. Und eigentlich brauchen wir es nicht, weil es das Layout kaputt machen wird. Wählen wir also den Textbereich aus. Lassen Sie uns zunächst diese Höhe definieren daraus eine Rampe mit zehn Rampen machen. Und dann definiere ich eine maximale Höhe und eine maximale Breite. Lassen Sie uns den Höchstwert auf 15 RAM setzen. Was die maximale Breite angeht, machen wir sie zu 100% Okay, das war's mit dem Textbereich. Das letzte Element , das ich gestalten werde, ist der Senden-Button. Also lass uns weitermachen und es auswählen. Wir müssen hier das erste Kontaktformular auswählen, gefolgt vom Kontaktformular BTN. Lassen Sie uns die Hintergrundfarbe ändern. Du siehst deine Farbe. Wenn für 1c6f, ändern Sie die Farbe des Textes und machen Sie ihn weiß Außerdem werde ich Text in Großbuchstaben umwandeln. Dann schaffe etwas Abstand zwischen den Buchstaben. Machen wir ein RAM daraus. Und schließlich ändere ich den Typ des gröberen, mache ihn Also sind alle Elemente gestylt und mit dem Inhaltsbereich sind wir fertig Als Nächstes müssen wir weitermachen und den letzten Abschnitt des Projekts anpassen, die Fußzeile sein wird 52. Projekt 5 - Fußzeile erstellen und stilvoll: Bevor wir zur Fußzeile übergehen, möchte ich den Abstand zwischen der Überschrift und den Eingabefeldern verringern , weil ich denke, dass er zu groß ist Lassen Sie uns also die Margenuntergrenze auf fünf Ran setzen. Okay, jetzt ist es besser. Die Fußzeile wird also einfach sein , wie der Kontaktbereich, wo wir ein paar Social-Media-Symbole und den Copyright-Text haben werden Social-Media-Symbole und den Copyright-Text Lassen Sie uns weitermachen und mit der Erstellung des HTML-Markups beginnen . Fügen Sie Ihre neuen Kommentare in Abschnitt fünf ein. Abschnitt fünf. Öffnen Sie dann das HTML5-Fußzeilenelement mit dem Klassenabschnitt Wir werden zwei verschiedene Teile haben. Das erste werden die Social-Media-Icons sein. Öffnen wir das Div-Element mit einer Klasse für soziale Medien. Insgesamt werden wir vier verschiedene Icons haben. Lassen Sie uns das Link-Element mit einem klassischen Social-Media-Link öffnen. Und fügen Sie Ihr Font Awesome-Symbol ein. Die Klassen werden FAB, A, GitHub, Square sein. Dann duplizieren Sie das Link-Element dreimal und ändern Sie die Klassennamen. Das zweite wird f a b, f a YouTube sein. Dann haben wir f a b, f ein Facebook-Quadrat. Und schließlich wird die letzte die Instagram-Quadratwurzel sein. Okay, das war's mit dem ersten Teil. Als Nächstes erstelle ich einen Absatz, der einen Copyright-Text enthält. Ordnen wir der Klasse das Urheberrecht zu und fügen ein neues Copyright ein, gefolgt vom Copyright-Zeichen. Es wird die HTML5-Entität sein . Wir brauchen Ampersand, Kopieren, Semikolon, dann Alle Rechte vorbehalten. In Ordnung, mit HTML-Markup sind wir fertig. Lassen Sie uns weitermachen und diesen Abschnitt anpassen. Fügen wir hier neue Kommentare ein, Abschnitt fünf. Und der ganze fünfte Abschnitt. Wählen Sie dann die Fußzeilenelemente und definieren Sie Breite und Höhe Die Breite wird 100% betragen. Was die Höhe angeht, werde ich sie auf 30% der Ansicht einstellen . Ändern Sie dann abschließend die Hintergrundfarbe. Es wird 222 sein. Okay, als Nächstes platziere ich den Inhalt mit Flexbox in der Mitte Weisen wir also dem Fußzeilenelement die Klasse Mitte zu dem Fußzeilenelement die Klasse Mitte und ändern dann die Spalte mit der Flexrichtung Mit einem Fußzeilenelement. Wir sind fertig. Lassen Sie uns weitermachen und die Social Media-Symbole anpassen. Lassen Sie uns weitermachen und den Wrapper-Div-Elemente auswählen, die Klasse Social Media hat, und legen Sie den Abstand am unteren Rand auf fünf Runden Als Nächstes wähle ich die Link-Elemente aus. Also werde ich mithilfe von Margin Platz auf der linken und rechten Seite der Links schaffen . Setzen wir es oben und unten auf Null und rechts und links auf zwei Rem. Außerdem werde ich mithilfe von Padding etwas Platz innerhalb des Links schaffen mithilfe von Padding etwas Platz innerhalb des Links Setzen wir es auf 0,7. Rem auf allen vier Seiten. Ändern Sie auch die Hintergrundfarbe. Ich werde hier Farbe E für 1c6f verwenden. Und schließlich verwenden wir den Randradius mit einem Wert von 0,5 g. Okay, lassen Sie uns weitermachen und die Symbole gestalten und Elemente auswählen Erhöhen wir die Schriftgröße, machen wir drei Durchläufe und ändern auch die Farbe, machen wir es weiß. Wie Sie gerade sehen können, Link-Elemente nicht ganz gut aus. Standardmäßig sind es Inline-Elemente und wir müssen sie zu Inline-Blöcken machen Jetzt sehen sie viel besser aus. Okay, mit den Social Media-Symbolen sind wir fertig. Und schließlich müssen wir den Copyright-Text anpassen. Lassen Sie uns weitermachen und einen Absatz auswählen. Lass uns die Farbe ändern, eine daraus machen. Dann werde ich die Schriftgröße erhöhen und es zu Ram machen. Schaffen Sie etwas Abstand zwischen den Buchstaben indem Sie Buchstabenabstandspunkte zum RAM verwenden. Außerdem werde ich die Schrift heller machen. Lassen Sie uns die Schriftstärke auf 300 setzen. Und schließlich ausgerichteter Text in der Mitte. Okay, mit der Fußzeile sind wir fertig und eigentlich sind all diese Abschnitte Jetzt sind wir bereit, unserer Website mithilfe von JavaScript einige Funktionen hinzuzufügen unserer Website mithilfe von JavaScript einige Funktionen 53. Projekt 5 - Navbar und Fortschrittsbalken mit JavaScript arbeiten lassen: Okay, das Erste, was ich tun werde, ist, die Navbar zu fixieren , monatlich nach unten zu scrollen und zu ihr zu greifen Also werden wir eine neue Klasse und CSS erstellen, ich nenne es Sticky. Definieren wir die Position, fixieren wir sie. Und setzen Sie auch die Top-Eigenschaft auf Null. Also fügen wir diese Clusternummer sobald wir nach unten scrollen und acht erreicht haben. Öffnen wir die Datei script.js und wählen Sie zunächst genügend Elemente aus. Erstellen Sie eine neue Variable, nennen Sie sie jetzt Bar und wählen Sie das Navigationselement mit der Abfrageauswahlmethode Also nochmal, sobald wir nach unten scrollen und die Zahl erreicht haben, müssen wir ihr eine neue Klasse zuweisen. Wir müssen also Scroll-Events verwenden. Wir müssen an das globale Fenster eine Objektmethode namens Event Listener anhängen , die zwei Argumente benötigt Der erste wird Event Scroll sein. Was die zweite betrifft, so wird es die Callback-Funktion sein, die ausgeführt wird, sobald das Scroll-Ereignis ausgelöst wird Also werde ich jetzt zwei verschiedene Eigenschaften verwenden. Sie werden Page Offset und Offset Top genannt. Also werde ich die beiden Konsolen durchgehen und Ihnen zeigen, wie sie tatsächlich funktionieren. Gehen wir zur Punktseite, zum Offset und zum Offset-Top im Konsolenfenster . Schauen wir uns die Seite an. Wechseln Sie zur Registerkarte Konsole und beginnen Sie zu scrollen. Die erste Eigenschaft, ich meine Page Y Offset, gibt also ich meine Page Y Offset, den Abstand in Pixeln zurück, die ebenfalls vertikal nach oben gescrollt wurden ebenfalls vertikal nach oben gescrollt Die zweite Eigenschaft, sie zeigt den Abstand vom oberen Rand der Seite zum Element, in diesem Fall dem Naropa Sobald diese Werte gleich sind, bedeutet dies, dass jetzt der obere Rand der Seite erreicht ist. Und um das zu beweisen, verwende ich eine If-Anweisung: Geben wir an, dass der Y-Offset des Fensterpunktes größer oder gleich ist. Jetzt Balkenpunkt nach oben versetzt. Und dann führe zur Konsole einen Text, sagen wir, klebrig. Sobald wir anfangen, nach unten zu scrollen und die Navigationsleiste zu erweitern, werden wir in der Konstanten stecken Wenn diese Bedingung also zutrifft, müssen wir der Navbar-Klasse Sticky hinzufügen Und wenn es falsch ist, müssen wir es entfernen. Also lass uns ein Konsolenprotokoll loswerden und es hier einfügen. Jetzt Upwork Dot Class List. Eigentlich listen Klassen die Eigenschaftsspeicher der Klassen auf, über die das Element verfügt. Als Nächstes benötigen wir eine Methode namens add, und ich muss Clustered Sticky in der Klammer angeben Was die Else-Aussage angeht, müssen wir, wie gesagt, Sticky aus der Navigationsleiste entfernen Wir brauchen jetzt Bar Dot Class List, Punkt remove. Und dann ist die Klasse klebrig. Wenn wir also nach unten scrollen, wird die Zahl klebrig. Aber wir haben hier ein paar Probleme. Es landet hinter den Elementen. Und auch wenn wir nach oben scrollen, wird die Zahl immer noch oben auf der Seite eingeklebt. Um das zu beheben, müssen wir jetzt den Balkenversatz in der Variablen speichern . Erstellen wir also eine neue Variable und nennen sie jetzt more offset top, ihr jetzt zugewiesen, nicht offset top. Übergeben Sie die Variable auch hier. Wir tun das also, weil wir den Seitenversatz mit der Anfangsposition der Navigationsleiste vergleichen werden den Seitenversatz mit der Anfangsposition der Navigationsleiste Außerdem müssen wir vorerst den Z-Index definieren. Lassen Sie uns zunächst die Position auf absolut setzen. Und dann verwenden Sie einen Z-Index mit einem höheren Wert, sagen wir 300. Okay, die Navbar funktioniert also einwandfrei. Als Nächstes werde ich die Links in der Navigationsleiste hervorheben, wenn wir zum richtigen Abschnitt gelangen Aber das zuerst Lassen Sie uns all diese Abschnitte und auch alle Links in der Navigationsleiste auswählen all diese Abschnitte und auch alle Links in der Navigationsleiste Lassen Sie uns eine neue Variable und Abschnitte für Kollegen erstellen. Ich werde alle Abschnitte mit der Methode Query Selector All auswählen mit der Methode Query Selector All Wir müssen hier den Abschnitt mit dem Tagnamen angeben. Als Nächstes wählen wir jetzt Bar Links aus. Ich werde erneut die Methode Query Selector All verwenden. Geben wir hier den Klassennamen an. Jetzt Balkenlink. Wir werden in CSS eine neue Klasse namens Change erstellen, in der wir dieselben Stile definieren , die wir beim Hover verwendet haben Also lass uns weitermachen und hier einfügen. Plus Änderung, gefolgt vom Navajo-Link. Wie Sie sehen, nutzen wir hier den Platz nicht. Lassen Sie uns die Farbe auf Weiß setzen. Als Nächstes wähle ich erneut den Link Mit Navarre ändern, gefolgt vom vorherigen Pseudoelement Stellen Sie die Breite auf 130% ein. Okay, danach müssen wir uns diese Abschnitte ansehen und prüfen, ob wir den richtigen Abschnitt erreichen Also müssen wir für jede Array-Helper-Methode zwei Abschnitte anhängen für jede Array-Helper-Methode zwei Abschnitte Lassen Sie uns eine Callback-Funktion mit einem Parameterabschnitt übergeben , der während der gesamten Schleife der aktuelle Abschnitt sein wird gesamten Schleife der aktuelle Abschnitt Jetzt müssen wir überprüfen, ob wir zum richtigen Abschnitt heruntergescrollt Wir benötigen also jede Aussage mit einer folgenden Bedingung. Fenster. Der Y-Versatz der Seite ist größer oder gleich dem oberen Abschnittsversatz. Eigentlich möchte ich die Berliner Tinte etwas früher hervorheben , wenn wir nach unten scrollen. Also subtrahiere ich zehn Pixel von der Offset-Eigenschaft. Wenn diese Bedingung also zutrifft, müssen wir den Navbar-Link hervorheben Und um das zu tun, müssen wir der Callback-Funktion einen neuen Parameter I hinzufügen , der der Index sein wird Und jetzt müssen wir zwei neue Links hinzufügen, den Klassenwechsel. Wir brauchen jetzt Bar Links. Dann müssen wir die Indexnummer in den eckigen Klammern angeben . Als Nächstes sollte die Klassenlisteneigenschaft mit der ADD-Methode folgen . Und wir müssen den Klassenwechsel in der Klammer angeben. Wenn wir also nach unten scrollen, wird die Anzahl der Links hervorgehoben. Aber wie ihr seht, haben wir hier ein kleines Problem, sobald wir weiter nach unten scrollen, werden die vorherigen Abschnitte hervorgehoben und das brauchen wir eigentlich nicht. Um dieses Problem zu beheben, müssen wir die neuen Links durchgehen und den Klassenwechsel von allen entfernen. Dann müssen wir dem benötigten Link einen Klassenwechsel hinzufügen. Also müssen wir für jede Array-Hilfsmethode neue Links anhängen für jede Array-Hilfsmethode neue Links Dann übergeben Sie hier die Callback-Funktion mit dem Parameter, der während der gesamten Schleife das aktuelle Element sein wird gesamten Schleife das aktuelle Element Wie gesagt, wir müssen den Klassenwechsel aus den Navbar-Links entfernen Also brauchen wir jetzt Balkenlink, Knotenklassenliste, Punkt entfernen, Klassenwechsel. Okay? Jetzt ist das Problem behoben und unsere Links sind korrekt hervorgehoben. In Ordnung, es gibt noch eine weitere Sache zur Navbar. Wenn wir auf die Anzahl der Links klicken, sollten wir zum richtigen Abschnitt mit glattem Scroll-Effekt Um das zu tun, müssen wir dem HTML-Element zunächst die Eigenschaft Scrollverhalten mit dem Wert smooth zuweisen . Als Nächstes müssen wir jedem Abschnitt Elemente und ein ID-Attribut zuweisen . Ich werde den Multi-Cursor verwenden. Auch hier benötigen wir ein ID-Attribut, und jedes von ihnen sollte den richtigen Wert haben. Ich bin in diesem Abschnittsnamen, den wir in Abschnitt eins, Abschnitt zwei, Abschnitt drei und Abschnitt vier benötigen Abschnitt zwei, . Danach müssen wir den h-Referenzattributen der Navbar-Links die richtigen Werte zuweisen den h-Referenzattributen der Navbar-Links die richtigen Werte Diese Werte sollten mit den Werten der Attribute übereinstimmen. Deshalb brauchen wir hier Abschnitt eins, Abschnitt zwei, Abschnitt drei und Abschnitt vier. Und schließlich werde ich dem Referenzattribut h des untersten Bereichs des Projekts drei zuweisen , denn wenn wir auf die Schaltfläche Projekte klicken, sollten wir zum Abschnitt Projekte navigieren. Wenn ich auf den Knopf oder Link klicke, navigieren wir zu den verschiedenen Abschnitten Wenn ich auf die Schaltfläche Projekte klicke, gelangen wir außerdem zum Projektbereich. Eigentlich haben wir hier ein kleines Problem. Wenn ich auf die Social-Media-Symbole und die Fußzeile klicke, navigieren wir mit glattem Scrollen zum Anfang der Seite Eigentlich brauchen wir es nicht. Also füge ich keins als Wert der h-Referenzattribute ein. Jetzt ist das Problem behoben und in Alberta sind wir fertig Als Nächstes kümmere ich mich um die Fortschrittsbalken. Wir müssen also die Fortschrittsbalken spüren , sobald sie auf der Seite erscheinen. Und um das zu verwalten, benötigen wir wiederum die Hilfe der Eigenschaften page Y, Offset und Offset Top Zuerst wähle ich den Fortschrittsbalken-Wrapper Lassen Sie uns eine neue Variable erstellen. Ich nenne es Fortschritt. Und wählen Sie dann den Fortschrittsbalken-Wrapper mit der QuerySelector-Methode Geben wir hier den Klassennamen Progress Bars Wrapper an. Als nächstes benötigen wir eine IF-Anweisung , in der wir die folgende Bedingung benötigen. Y-Versatz der Fensterpunktseite plus Innenhöhe des Fensterpunkts. Diese Summe sollte also größer oder gleich sein, um den Fortschritt auszugleichen. Wir haben hier die innere Höhe des Fensterpunktes verwendet und sie dem Fenster hinzugefügt, den Seitenversatz. Das Fenster, die innere Höhe, gibt also die Höhe des Fensters zurück, Höhe des Inhalts, der auf der Seite sichtbar ist. Wenn diese Bedingung zutrifft, bedeutet das, dass Fortschrittsbalken erscheinen und wir sie entsprechend ihren Prozentwerten füllen müssen. Ich werde ein Array erstellen, in dem wir diese Prozentwerte speichern. Lassen Sie uns eine neue Variable erstellen und sie Fortschrittsbalken-Präsente nennen. Lassen Sie uns hier die folgenden Werte übergeben. Wir brauchen 90, 780-985-8780 Dann setze ich die Breite der Div-Elemente der Fortschrittsperson auf Null. Im Moment sind es 90%. Also werde ich den Fortschritt und die aktuellen Entwicklungen auswählen. Dann werde ich sie durchsehen und ihre Breite anhand dieses Arrays definieren. Wählen wir also den aktuellen Fortschritt mit der Methode querySelector all aus Das ist der Klassenname Progress Present des Instituts. Darauf sollte die forEach-Methode folgen . Lassen Sie uns Ihre Callback-Funktion übergeben, die zwei Parameter benötigt Der erste wird der aktuelle Eintrag auf der Liste sein . Nennen wir es Elemente, ich meine EL. Außerdem benötigen wir einen Index, um die richtige Breite aus dem Array für jedes Element zu definieren . Als Codeblock müssen wir hier das Element Punktstil, Punktbreite einfügen. Dann öffne die hinteren Zecken. Rufen Sie die Werte aus der Fortschrittsleiste auf, die das Array anzeigt. Wir müssen die Indexnummer in eckigen Klammern als i angeben, gefolgt von der Gegenwart. Wie Sie sehen können, werden die Fortschrittsbalken entsprechend den Prozentwerten gefüllt. Lassen Sie uns weitermachen und ihnen einen Übergangseffekt hinzufügen. Hier ist der Übergang mit den Werten width. Dann brauchen wir die Dauer 0,5 s. Dann die Verzögerungszeit 0,5 s. Und verwenden Sie auch eine der Übergangs-Timing-Funktionen namens Ease In, Out. Jetzt fühlen sich die Fortschrittsbalken an und bieten einen schönen Übergangseffekt. Das Letzte, was ich tun möchte, ist, diese Prozentwerte aus JavaScript dynamisch anzuzeigen . Im Moment sind es fest codierte Werte in einem HTML-Dokument. müssen wir also zunächst Zugriff auf diese Span-Elemente erhalten, um Zugriff auf den Absatz zu erhalten. Also müssen wir hier Elemente auf vorherige Elemente schreiben , die Geschwister sind Sobald wir Zugriff auf den Absatz haben, müssen wir die untergeordneten Elemente finden, nämlich die Spanne. Wir müssen also eine Eigenschaft verwenden, die als erstes Element Child bezeichnet wird. Und wir müssen den Inhalt mithilfe von Text ändern. Eigentum des Inhalts. Es sollte den Fortschrittsbalken mit der Indexnummer i entsprechen . Um deutlich zu sehen, dass wir die GI-Werte einer Person in JavaScript anzeigen, entfernen wir sie aus der HTML-Datei mit dem Indexpunkt. In Ordnung, wie Sie sehen können, war alles perfekt und mit den Fortschrittsbalken sind wir fertig Bevor ich weitermache und anfange , das Projekt responsiv zu gestalten, muss ich ein paar Dinge in JavaScript erledigen. Also all diese Dinge, ich meine, dieser gesamte Codeblock hier läuft. Sobald wir die Seite scrollen. Eigentlich möchte ich diesen Code standardmäßig einmal ausführen , bevor wir scrollen. Um ein unerwartetes und seltsames Verhalten der Webseite zu vermeiden . Dafür erstelle ich eine Funktion, nennen wir sie Main F, und nehme dann den gesamten Codeblock und füge ihn hier ein. Also werde ich diese Funktion zweimal aufrufen. Nennen wir es zunächst außerhalb dieses Scroll-Events auf globaler Ebene. Und beim zweiten Mal sollte es innerhalb eines Scroll-Events aufgerufen werden . Ich meine innerhalb der Callback-Funktion. Okay? Aus diesem Grund funktioniert der gesamte JavaScript-Code auf der Grundlage von Eigenschaften wie page offset und offset top. Dann könnten wir auf einige Probleme stoßen, wenn wir die Größe des Fensters ändern. Also müssen wir die Seite neu laden. Sobald wir die Größe des Fensters geändert haben, verwende ich das Resize-Event Lassen Sie uns den Event-Listener an das globale Fensterobjekt anhängen. Geben Sie dann den Ereignistyp an. Die Größe wird geändert. Außerdem benötigen wir hier eine Callback-Funktion. Um die Seite neu zu laden, benötigen wir die Position des Fensterpunktes und das Neuladen des Punktes Wenn ich also die Größe des Fensters ändere, revoltiert die Seite Okay, das war's mit JavaScript. Jetzt ist es an der Zeit, mit dem letzten Teil unseres Projekts fortzufahren. Ich werde das Projekt an verschiedene Bildschirmgrößen anpassen. 54. Projekt 5 - Projekt reaktionsfähig machen: Bevor wir anfangen, den Code zu schreiben, werde ich den letzten Code, den wir in JavaScript geschrieben haben , pausieren wir in JavaScript geschrieben haben , weil wir die Größe des Fensters viele Male ändern müssen Als Nächstes werde ich die Seite überprüfen und in den Responsive-Modus wechseln. Wie bereits zu Beginn dieses Tutorials erwähnt, haben wir dieses Projekt auf einem großen Bildschirm mit einer Breite von 1920 Pixeln und einer Höhe von 1080 Pixeln erstellt . Ich habe bereits die Breakpoints vorbereitet , an denen wir die Änderungen vornehmen müssen, also werde ich hier keine Zeit damit verschwenden Der erste Breakpoint, an dem wir einige Änderungen vornehmen müssen, wird also 1.200 Pixel sein Fügen wir also neue Kommentare ein, ansprechend sind und nicht reagieren Dann erstelle ich eine CSS-Medienabfrage, in der wir die maximale Breite angeben müssen. Wie gesagt, es werden 1.200 Pixel sein. Wir müssen den zweiten Abschnitt anpassen. Ich werde die Dienste auf zwei Linien platzieren. Lassen Sie uns also weitermachen und sie auswählen. Ich meine, das Wrapper-Div-Element. Stellen wir die Körpergröße auf oral ein. Und außerdem werde ich Flex Wrap auf Wrap setzen. Lassen Sie uns außerdem den Service selbst auswählen und die Marge verfeinern. Ich setze es oben und unten auf drei RAM und rechts und links auf zwei RAM. Der zweite Abschnitt sieht gut aus. Lassen Sie uns weitermachen und den Kontaktbereich anpassen. Das einzige, was ich tun werde, ist die Höhe dieses Abschnitts zu ändern. Machen wir daraus eine Viewport-Höhe von 80. Also ich denke, das war's am Breakpoint. Der nächste wird 800 Pixel haben. Lassen Sie uns also weitermachen und eine neue CSS-Medienabfrage erstellen. Geben Sie die maximale Breite auf 800 Pixel an. An diesem Breakpoint werde ich die Größe der Überschrift auf der Landingpage verringern die Größe der Überschrift auf der Landingpage Außerdem werde ich die Breite der Fortschrittsbalken verringern . Lassen Sie uns also weitermachen und die Überschrift des ersten Abschnitts auswählen. Stellen Sie die Schriftgröße zwei für RAM ein. Wählen Sie dann den Fortschrittsbalken aus und lassen Sie ihn mit einer Breite von 50 laufen. Alle anderen Abschnitte sehen also gut aus und wir müssen zum nächsten Breakpoint übergehen Der nächste Breakpoint wird 600 Pixel sein. Lassen Sie uns also weitermachen und eine neue CSS-Medienabfrage erstellen und die maximale Breite angeben. Mach 600 Pixel draus. Lassen Sie uns weitermachen und die Überschrift auf der Kreditvergabe verkleinern . Wählen Sie die Überschrift für Abschnitt 1 und stellen Sie die Schriftgröße auf drei Rampen ein. Dann müssen wir die Navigationsleiste anpassen. Wählen wir also den von Number Link definierten Rand aus. Ich setze es oben und unten auf Null und links und rechts auf zwei Rem. Ändere auch die Schriftgröße, lass es 1,5 laufen. Süd-Alberta. Sieht gut aus. Gehen wir zum Abschnitt, um ihn auszuwählen, und stellen Sie die Polsterung an allen vier Seiten so ein, dass sie sich drehen Ich wähle die Überschrift des zweiten Abschnitts aus. Das ist gesunken. Rand an der Unterseite. Mach es, dich umzudrehen. Und dann werde ich die Breite des Fortschrittsbalkens verringern. Machen wir 45 Rem daraus. Als Nächstes lege ich die Breite des Projektbildes auf 200 Prozent fest . Verringern Sie auch die Breite der Formularelemente. Stellen Sie die Breite auf 40 RAM ein. Und schließlich werde ich die Breite des Copyright-Textes verringern . Machen wir 70% draus. In Ordnung, am Breakpoint sieht also alles gut aus. Lassen Sie uns weitermachen und mit der nächsten Arbeit beginnen , die 500 Pixel groß sein wird. Tatsächlich werde ich am Breakpoint die Schriftgröße des HTML-Codes jetzt um 62,5 Prozent reduzieren jetzt um 62,5 Prozent Und ich werde es zu 55 Prozent schaffen. Okay, wir müssen also auf 500 Pixeln nichts weiter tun. Gehen wir zum nächsten Breakpoint über , der der letzte sein wird Lassen Sie uns neue CSS-Medien erstellen und maximale Breite auf 450 Pixel festlegen. Ich werde die Schriftgröße des HTML-Codes erneut verringern. Machen wir 45% draus. Verkleinern Sie dann die Größe dieses Abschnitts um eine Überschrift. Ich werde 2,5 RAM draus machen. Danach werde ich den Abstand zwischen den Links in der Navigationsleiste verringern den Abstand zwischen den Links in der Navigationsleiste Wählen wir jetzt Bro Link und setzen den Rand oben und unten auf Null und rechts und links auf 1,5 Rem. Okay, als Nächstes richten wir die Überschrift dieses zweiten Abschnitts vCenter Verwenden Sie die zentrierte Ausrichtung des Texts und verringern Sie außerdem die Breite des Fortschrittsbalkens. Mach es zum Laufen. In Ordnung, ich denke, wir sind fertig, weil alles gut aussieht Wir können also sagen, dass unser Projekt auf verschiedene Websites reagiert. Wir haben die Arbeit an unserem Projekt abgeschlossen. Schließlich werde ich diese Kommentare von hier aus loswerden . In Ordnung, das Projekt ist abgeschlossen. Hoffentlich war es interessant und hilfreich und du wirst einige neue Dinge lernen. Jetzt können wir weitermachen und das nächste Projekt bauen. 55. Projekt 6 - Projektvorschau: In Ordnung, es ist an der Zeit, mit der Erstellung unseres nächsten Projekts zu beginnen Es wird um so etwas wie klassische Autos gehen. In diesem Video werde ich das Projekt durchgehen und Ihnen zeigen, worum es geht. Das Projekt besteht aus mehreren Abschnitten. Der erste Abschnitt ist einfach. Wir haben hier nur die Überschrift und das Bild des Autos. Als nächstes haben wir einen Abschnitt namens Beliebter Kurs , der drei verschiedene Karten des beliebten Kurses enthält . Karten haben einen kleinen Schwebeeffekt. Danach kommt die Videogalerie. Wir haben hier zwei Reihen der Videos. Standardmäßig spielen sie nicht, aber sobald wir den Mauszeiger über sie bewegen, beginnen sie zu spielen Okay, also nach der Videogalerie werden wir eine Bildergalerie haben, werden wir eine Bildergalerie haben das wird ein interessanter Bereich sein Wie Sie sehen können, haben wir hier zwei verschiedene Regale mit jeweils drei Bildern. Die Bilder haben einige nette Schwebeeffekte. In diesem Abschnitt erfahren Sie, wie Sie 3D-Elemente mithilfe von CSS erstellen. Als nächstes folgt der Kontaktbereich mit einigen Eingabefeldern und der Schaltfläche „Senden“. Und unten haben wir den Absatz mit einem Copyright-Text. Okay, das sind also alle fünf Abschnitte dieses Projekts. Außerdem siehst du hier das feste Menüsymbol. Wenn ich darauf klicke, verwandeln sich die Linien in ein X. Die Zahl wird angezeigt. Diese Aktionen werden sich in der 3D-Umgebung gut drehen. Wenn ich auf die verschiedenen Navigationslinks klicke, navigieren wir reibungslos zu den richtigen Abschnitten . Richtig? Das ist also das Projekt, das wir in diesem Abschnitt aufbauen werden. Außerdem reagiert das Projekt auf verschiedene Bildschirmgrößen. Wenn ich die Seite überprüfe, den responsiven Modus wechsle und das Projekt überprüfe, werden Sie feststellen, dass es responsiv ist und auf verschiedenen Bildschirmgrößen gut aussieht. Okay, wie bei den vorherigen Projekten möchte ich Sie an eine Sache erinnern Das Projekt wurde mit einem Desktop-First-Ansatz erstellt. Es ist für extra große Bildschirme konzipiert. Bildschirmgröße mit 1920 Pixeln Breite und 1080 Pixeln Höhe. Wenn Sie also eine relativ kleinere Bildschirmgröße verwenden und das Projekt während der Vorlesungen möglicherweise nicht gut aussieht. Aber am Ende des Tages müssen Sie sich keine Sorgen machen, wir sorgen dafür, dass es responsiv ist. In der Zwischenzeit können Sie den responsiven Modus verwenden, die Breite und Höhe der extragroßen Bildschirmgröße angeben der extragroßen Bildschirmgröße und dem Projekt folgen 56. Projekt 6 - HTML-Markup für die Landung erstellen und gemeinsame Stile definieren: Ordnung, sobald wir bereit sind , mit der Erstellung der Projekte zu beginnen, werde ich damit beginnen, das HTML-Markup der Navigation und aller fünf Ich meine, nur diese Abschnittselemente werden es schaffen, das Geld zum Laufen zu bringen. Und dann werden wir diesen Abschnitt selbst anpassen. Lassen Sie uns weitermachen und unseren Arbeitsordner in VS Code öffnen. Wie Sie sehen, haben wir hier nur einen Ordner für die Bilder. Lassen Sie uns drei verschiedene Dateien für HTML, CSS und JavaScript erstellen . Ich nenne sie index.html, style.css und script.js. Gehen Sie dann zur Datei index.html und erstellen Sie zunächst ein einfaches HTML-Dokument. Dafür verwende ich eines der Pakete namens Emmet , ein in VS-Code integriertes Paket Ich setze hier ein Ausrufezeichen. Und nachdem Sie die Eingabetaste oder die Tabulatortaste gedrückt haben, werden die grundlegenden HTML-Tags generiert. Lass uns weitermachen und den Titel ändern. Ich füge hier klassische Autos ein. Als Nächstes verknüpfe ich die CSS- und JavaScript-Dateien. Öffnen wir also das Link-Tag und geben Sie hier den Pfad der Datei style.css an. die JavaScript-Datei angeht, werde ich direkt über dem abschließenden Body-Tag ein Script-Tag öffnen . Und dann gebe ich den Pfad der Datei und das Quellattribut an. Ordnung, lassen Sie uns weitermachen und das Projekt im Browser öffnen Dafür verwende ich eines der VS-Codepakete, das als Live-Server bezeichnet wird. Es ermöglicht uns, den Projektverlauf im Browser auszuführen und Aktualisierungen und Änderungen vorzunehmen ohne die Seite jedes Mal aktualisieren zu müssen. Also werde ich reinkommen, um dieses Paket zu installieren und zu verwenden. Okay, lassen Sie uns zum Schluss den Editor und den Browser so spielen . Und fang an. Wie gesagt, wir werden die Navigation und alle fünf Abschnitte erstellen . Fangen wir mit dem Menüsymbol an. Ich füge Ihr Kommentarmenü und dann das Ende des Menüs ein. Öffnen Sie dann das Div-Tag, das zwei verschiedene Klassen haben wird. Das erste wird das Menü sein. Asphalt ist ein zweitklassiger Name. Ich füge dein Ziel ein. Wir werden diese Klasse und die JavaScript-Datei verwenden. Das Menüsymbol wird also aus zwei verschiedenen Zeilen bestehen. Öffnen wir das div-Tag mit zwei Klassen, Menüzeile, das wird der allgemeine Klassenname sein. Und dann, wenn meine neue Zeile eins für individuelles Styling, lass uns diese Codezeile duplizieren und den Klassennamen ändern. Wir brauchen hier auch eine Menüzeile. Okay, also im Moment ist das Menüsymbol nicht sichtbar weil wir hier nur die leeren Div-Elemente haben. Lassen Sie uns weitermachen und die Navigationsleiste erstellen. Lassen Sie uns Ihre Kommentare einfügen. Navigationsleiste. Dann Ende der Navigationsleiste. Öffnen Sie dann das HTML5-Navigationselement mit der Klassennavbar und verwenden Sie dann erneut Klassenziele Insgesamt werden wir also fünf verschiedene Navigationspunkte haben. Öffnen wir das Link-Tag mit dem Link in der Klassennavigationsleiste. Geben Sie dann Q home ein. Ich werde das Link-Element viermal duplizieren und dann den Inhalt ändern. Der zweite Artikel werden beliebte Autos sein. Dann haben wir eine Videogalerie, dann eine Bildergalerie. den letzten Punkt angeht, wird es Kontakt sein. Ordnung, das war's also der Nummer, die wir hier haben, mit den Navigationspunkten Lassen Sie uns weitermachen und die Abschnitte erstellen. Lassen Sie uns hier noch einmal die Kommentare in Abschnitt eins einfügen, dann das Ende des ersten Abschnitts. Jeder Abschnitt wird also seinen Wrapper haben. Es ist also ein offenes Div-Tag mit dem Klassen-Wrapper. Und dann interferiert das Abschnittselement mit einer Klasse ist Abschnitt eins und dann Ziel Okay, insgesamt werden wir also fünf verschiedene Abschnitte haben. Lassen Sie uns weitermachen und diesen Code viermal duplizieren. Und dann ändere die Zahlen. Dementsprechend. Wir müssen die Anzahl der Kommentare und auch die Klassennamen ändern Kommentare und auch die Klassennamen Okay, schauen wir uns jetzt den Markt Lass uns weitermachen und anfangen , etwas CSS zu schreiben. Zuallererst werde ich ein paar gängige und standardmäßige Stile erstellen . Lassen Sie uns Kommentare, also gängige Stile und gängige Stile interviewen . Als Nächstes müssen wir jedes Element auswählen. Und dafür verwende ich ein Sternchen. Dann gib ihm ein paar Styles. Lassen Sie uns zunächst Standard, Rand und Padding loswerden Standard, Rand und Padding Ich setze beide auf Null. Dann entfernen wir die Standardkontur aus jedem Element, indem wir Outline None verwenden. Außerdem werde ich ein Box-Format für die Border-Box festlegen. Als Nächstes entfernen wir die standardmäßige Unterstreichung der Link-Elemente , indem wir die Textdekoration ohne Textdekoration verwenden Und entfernen Sie auch Standardstile aus den Listenelementen, indem Sie den List-Style-type none verwenden Okay, danach werde ich für jedes Element dieses Projekts eine Schriftfamilie definieren für jedes Element dieses Projekts eine Schriftfamilie Wir werden zwei verschiedene Google-Schriftarten verwenden Gehen wir also zur Google Fonts-Website. Dann werde ich nach einer speziellen Elite suchen. Wählen Sie diesen einzelnen Stil hier aus. Als Nächstes suchen wir nach Josephine Sans. Ich werde hier ein paar Stile auswählen. Schriftgewichte 400-700. Schnappen Sie sich den Link und fügen Sie ihn in das Hauptelement ein. Okay, danach definiere ich die Schriftfamilie. Standardmäßig. Ich werde die Schriftfamilie auf Special Elite, Coercive einstellen und auch die Schriftstärke definieren Machen wir 400 draus. Ordnung, also lassen Sie uns sehen die üblichen und standardmäßigen Stile auf die Elemente angewendet werden Während dieses Projekts werden wir RAM als Maßeinheit verwenden . Moment entspricht eine Rampe 16 Pixeln, da die Schriftgröße des HTML-Elements standardmäßig 16 Pixeln entspricht. Ich werde einen Lauf in zehn Pixel umwandeln. Und dafür müssen wir die Schriftgröße des HTML-Elements auf 62,5 Prozent reduzieren die Schriftgröße des HTML-Elements 62,5 Prozent Okay, wie Sie sehen können, hat sich die Größe der Elemente verringert. Als Nächstes ändere ich die Hintergrundfarbe der Körperelemente. Wählen wir also dieses Element und machen es mit der Farbe ccc hellgrau als Hintergrundfarbe mit der Farbe ccc hellgrau Ordnung, also im Moment, das war's mit den gängigen Stilen Als nächstes müssen wir uns um das Menüsymbol kümmern. Und jetzt auch für 57. Projekt 6 - Erstellen und Navigationsarbeit: In Ordnung, also zuerst werden wir dafür sorgen, dass das Menü funktioniert. Ich meine, sobald wir auf das Menüsymbol klicken, müssen wir die Navigationsleiste anzeigen und diese Abschnitte auch drehen Sobald wir das geschafft haben , werden wir das gesamte Projekt stylen und es gut aussehen lassen. Lassen Sie uns weitermachen und die Kommentare hier einfügen . Wir brauchen ein Menü. Dann und aus dem Menü. Ich werde das Menüsymbol sichtbar machen. Lassen Sie uns also weitermachen und es auswählen und seine Breite und Höhe festlegen, beide auf fallendes RAM. Und verwenden Sie auch eine temporäre Hintergrundfarbe, sagen wir Rot. Als nächstes kümmern wir uns um seine Position. Ich werde es reparieren lassen. Und lassen Sie uns auch die Eigenschaften top und left festlegen, die beide ausgeführt werden sollen. In Ordnung, das Menüsymbol ist also positioniert. Als nächstes kümmern wir uns um den Klopfer. Ich füge hier die neuen Kommentare ein, jetzt vier, dann n von Navarra Jetzt wird Korea also auf der linken Seite der Seite platziert und das Problem sollte behoben sein. Also lass uns weitermachen und es auswählen. Zuerst definiere ich seine Breite. Machen wir es mit einer Viewport-Breite von 15 aus. In diesem Fall nehmen wir jetzt aber 15% der Breite des Viewports Höhe. Ich mache es zu 100% aus dem Viewport Also lass es uns auf h setzen und auch die Hintergrundfarbe ändern, es weiß machen. Danach werde ich seine Position festlegen. Lassen Sie uns außerdem die Eigenschaften top und left setzen, beide auf Null. Wie Sie sehen können, ist das Menüsymbol dahinter gelandet, sobald wir die Navigationsleiste repariert haben Menüsymbol dahinter gelandet, sobald wir die Navigationsleiste repariert Dies ist darauf zurückzuführen, dass die Navigationsleiste im HTML-Dokument hinter dem Menüsymbol platziert ist im HTML-Dokument hinter dem Menüsymbol und daher eine höhere Priorität hat Lassen Sie uns dieses Problem mithilfe der Z-Indexeigenschaft beheben . Ich setze es auf einen höheren Wert als Null, sagen wir zehn. Jetzt ist das Menüsymbol sichtbar, aber wir müssen seine Position ändern, wenn die Zahl angezeigt wird sollte das Menüsymbol auf der rechten Seite platziert werden. Nehmen wir also die linke Position ein. 15, Breite des Viewports. Okay, als Nächstes werde ich die Navigationselemente platzieren, insbesondere in einer Spalte. Und dafür verwenden wir Flexbox. Wir brauchen Display Flex. Und dann müssen wir die Biegerichtung ändern und sie zu einer Spalte machen da Display-Flex Elemente in einer Reihe ausrichtet Lassen Sie uns abschließend mithilfe von Polsterungen etwas Platz im Klopfer schaffen mithilfe von Polsterungen etwas Platz im Klopfer Ich setze das Padding oben auf volles Rem als auf Null auf der rechten Seite, Null unten und volles Rem auf der linken Seite Wie Sie sich erinnern, legen wir die Boxgröße, und die gängigen Deshalb wird die Größe der Navbar nicht erhöht. Wenn Sie eine Borderbox in Boxgröße mit Polsterung verwenden. Dass die Elemente innerhalb der Box verschoben werden und die Box nicht vergrößert wird. In Ordnung, lassen Sie uns weitermachen und uns um diese Abschnitte kümmern. Ich werde hier die neuen Kommentare, Abschnittsstile, einfügen . Und dann Ende der allgemeinen Abschnittsstile. Wählen Sie dann den Wrapper dieses Abschnitts aus. Moment werde ich es mit Immobilien im Wert von hundert Prozent zuordnen Im Moment werde ich es mit Immobilien im Wert von hundert Prozent zuordnen. Eigentlich fragen Sie sich vielleicht warum wir dieses Element überhaupt brauchen? Im Grunde werden wir damit eine 3D-Umgebung für die Abschnitte erstellen . In Ordnung, lassen Sie uns weitermachen und dieses Abschnittselement auswählen. Zunächst definiere ich seine Breite und Höhe. Ich möchte die Breite auf die Breite des A25-Viewports festlegen, da wir jetzt die Navigationsleiste auf der linken Seite haben und ihre Breite der Viewport-Breite von 15 entspricht Viewport-Breite von 15 entspricht Ich möchte sie Seite an Seite platzieren. Was die Höhe angeht, machen wir sie zu hundert Prozent des Viewports aus Und ändere auch die Hintergrundfarbe. Ich werde hier E F , E, F, E F verwenden . Okay, jetzt sind diese Abschnitte hinter dem Napa gelandet Und um das zu beheben, müssen wir ihre Position ändern. Setzen wir es auf relativ. Dann setze ich die linke Eigenschaft auf eine Viewport-Breite von 15. Jetzt ist das Problem behoben. Als Nächstes trennen wir die Abschnitte mithilfe von Margin Ich verwende Margin Bottom mit der Rampe für den Wert drei. Wie Sie sehen können, sind diese Abschnitte getrennt und jetzt beginnt es , sie zu drehen und eine 3D-Umgebung zu erzeugen. Lassen Sie uns zunächst die Transformationseigenschaft mit der Rotate-Funktion verwenden . Eigentlich müssen wir hier y drehen. Weil wir das Element in vertikaler Richtung drehen müssen , ich meine die Y-Achse Moment ist dieser Abschnitt also so gedreht, aber wir sehen hier keinen 3D-Effekt Um eine 3D-Umgebung zu erstellen, müssen wir also eine dieser CSS-Eigenschaften verwenden, die als Perspektive bezeichnet wird. Wir müssen es dem übergeordneten Element zuweisen, das ein Wrapper ist Stellen wir es auf Rampe 50 ein. Im Allgemeinen definiert die perspektivische Eigenschaft also, wie weit das Element vom Benutzer entfernt ist , und erstellt schließlich die 3D-Umgebung. Jetzt haben wir ein viel besseres Ergebnis, aber das wollen wir eigentlich nicht. Gerade jetzt. Diese Abschnitte werden entsprechend der Mitte gedreht , da der Ursprung der Transformation standardmäßig Ursprung der Transformation standardmäßig auf die Mitte gesetzt ist Eigentlich müssen wir es ändern und es links machen. In diesem Fall werden die Elemente also entsprechend der linken Seite gedreht Und deshalb sind die Abschnitte und der Roman nebeneinander angeordnet Ordnung, lassen Sie uns weitermachen und die Breite dieser Abschnitte vergrößern Machen Sie es hundertprozentig. Und erzeugen Sie auch einen Schatteneffekt. Verwenden Sie Ihren Boxschatten mit dem Wert 0,5 rem. Dann wieder 0,5 Rem, ein RAM und die Farbe AAA. Bevor wir anfangen, das Geld zum Laufen zu bringen, möchte ich hier noch eine Sache erledigen. Wie Sie sehen können, wird der Schatten über die Navigationsleiste gelegt. Und um das zu beheben, werde ich wieder die Z-Index-Eigenschaft mit dem Wert zehn verwenden In diesem Fall hat die Zahl eine höhere Priorität und der Schatten landet dahinter In Ordnung? Das ist also die Situation nach dem Klick, dem Menüsymbol. Standardmäßig müssen wir die Navigationsleiste ausblenden und diese Abschnitte wieder in die normale Position drehen diese Abschnitte wieder in die normale Position Lassen Sie uns weitermachen und die Nummer verstecken, die ihr zugewiesen ist. Breite des Ansichtsfensters von links -15. Dann ändere die Position des Menüsymbols, das wir hier links benötigen, mit einem Wert von zwei rem. Als Nächstes müssen wir die Position dieses Abschnitts ändern. Setzen wir das auf Null. Und kommentiere auch diese Zeile. Wir sind also bereit, das Menüsymbol zu programmieren. Aber vorher werde ich noch eine Sache tun. Ich werde auf der rechten Seite innerhalb des Körperelements etwas Platz schaffen . Lassen Sie uns dafür Polsterung verwenden, oder? Mit einem Wert von drei Rampen. In Ordnung? Die Stile, die wir gerade geändert haben, sollten also auf die Elemente angewendet werden sobald wir auf das Menüsymbol klicken. Außerdem sollten sie entfernt werden, sobald wir auf diese Abschnitte selbst klicken. Also werde ich diese Stile mit einer neuen Klasse namens Change erstellen . Dann fügen wir diese Klasse als Elemente hinzu und entfernen sie mit JavaScript. Lassen Sie uns weitermachen und mit dem Menüsymbol beginnen. Wir müssen ein Menü mit dem Klassenwechsel auswählen. Wie Sie hier sehen können, haben wir kein Leerzeichen zwischen diesen Klassen verwendet , da wir diese Klasse zum Menü selbst hinzufügen müssen . Lassen Sie uns die linke Position auf eine Viewport-Breite von 15 setzen. Als Nächstes müssen wir die Position der Navigationsleiste ändern. Also lasst uns jetzt bert with change auswählen und die linke Position auf Null setzen. Was die Sektionen angeht, so müssen wir ihre Positionen ändern und wir müssen sie auch rotieren. Wählen wir also den Abschnitt mit einem Klassenwechsel aus. Stellen Sie dann die linke Eigenschaft auf eine Viewport-Breite von 15 ein und verwenden Sie hier die Funktion Transformieren, Drehen In Ordnung, also ist alles bereit. Gehen wir zur JavaScript-Datei und wählen das Menüsymbol aus. Dafür verwende ich die Abfrageauswahlmethode. Wir müssen hier die Klasse des Menüs angeben. Dann müssen wir den Event-Listener daran anhängen. Diese Methode benötigt zwei Argumente. Der erste ist Klick. Die zweite wird die Callback-Funktion sein, die ausgeführt wird, sobald wir auf das Element klicken Sobald wir also auf das Symbol klicken, müssen wir dem Menünetzwerk einen Klassenwechsel hinzufügen. Und diese Abschnitte, denken Sie daran, dass all diese Elemente das gemeinsame Klassenziel haben. Also werden wir sie mithilfe von Class Target auswählen und Class Change hinzufügen ich werde hier die Methode Query Selector All verwenden Und wir müssen hier das Klassenziel angeben. Tatsächlich gibt Query Selector alle Methoden ein Array-ähnliches Objekt namens Node List zurück Array-ähnliches Objekt namens Wir müssen diese Liste durchsehen und zu jeder Listenelementklassenänderung hinzufügen. Um die Knotenliste durchzusehen, verwende ich eine der Array-Hilfsmethoden, die für H aufgerufen werden. Sie benötigt einen Parameter , der die Callback-Funktion sein wird Diese Funktion wird für jedes Element in der Liste ausgeführt. Die Callback-Funktion benötigt ein Argument und es wird das aktuelle Element aus der Liste während der Schleife sein Jetzt müssen wir die Änderung der Objektklasse hinzufügen. Und dafür verwende ich eine der Methoden namens Toggle Im Fall der Toggle-Methode fügen wir dem Element eine Klasse hinzu, wenn es nicht existiert, und entfernen es, falls es existiert Beim ersten Klick erhält das Element also erhält das Element die Klassenänderung und beim nächsten wird es entfernt. Wir müssen also item verwenden gefolgt von der Eigenschaft class list, die alle Klassen speichert , die das Element hat. Als nächstes, wenn Sie die Methode wechseln. Und wir müssen den Klassenwechsel innerhalb der Klammer angeben den Klassenwechsel innerhalb der Klammer Wenn ich jetzt auf das Menüsymbol klicke, funktioniert alles einwandfrei. Um diesen Effekt schöner zu machen, verwenden wir Transition. Für das Menüsymbol. Wir müssen den Übergang mit verbleibenden Werten, 0,5 s, durchführen. Als Nächstes benötigen wir den gleichen Übergang auch für die Navigationsleiste Asphaltieren Sie den Abschnitt. Wir müssen den Übergang dort vornehmen, wo der Wert noch übrig ist, 0,5 s, und dann mit derselben Dauer transformieren. Okay, jetzt haben wir einen viel besseren und glatteren Effekt. In Ordnung, mit dem Menüsymbol sind wir fertig. Jetzt müssen wir das Menü schließen. Sobald wir auf die Abschnitte klicken, werden wir eine ähnliche Technik anwenden. Lassen Sie uns zunächst all diese Aktions-Wrapper auswählen und ihnen Event-Listener anhängen Wir brauchen wieder Query Selector All Method. Dann gib hier den Klassennamen-Wrapper. Um den Event-Listener an jeden Wrapper anzuhängen, müssen wir sie zuerst durchschauen , denn Query Selector, All Method gibt eine Knotenliste zurück Lassen Sie uns das für jede Methode erneut verwenden. Übergeben Sie dann Ihre Callback-Funktion mit dem Argument item. Als Nächstes müssen wir dem Element einen Event-Listener mit dem Klick-Event und einer weiteren Callback-Funktion zuordnen mit dem Klick-Event und einer weiteren Callback-Funktion Jetzt müssen wir den Klassenwechsel aus allen drei Elementen entfernen . Eigentlich mache ich weiter und hole mir diesen Code von hier aus und ändere dann die Umschalttaste auf Entfernen Wenn ich jetzt auf das Menüsymbol und dann auf das Auswahlmenü klicke, wird eine Klausel angezeigt. Also alles funktioniert perfekt und mit der Speisekarte sind wir fertig. Als Nächstes werde ich dafür sorgen, dass diese Links funktionieren. Ich meine, sobald wir sie anklicken, sollten wir zu den richtigen Abschnitten navigieren. Dafür müssen wir ein paar Dinge tun. Lassen Sie uns zunächst die Größe der ausgewählten Links erhöhen . Jetzt Berlin, setze die Schriftgröße auf 1,5 RAM. Außerdem werde ich Links mithilfe von Margen trennen. Setzen wir es oben und unten auf zwei Rem und links und rechts auf Null. Ordnung, als Nächstes gehen wir zur Datei index.html und weisen jedem Abschnitt das Element-ID-Attribut zu Um zu den richtigen Abschnitten zu gelangen, die Werte der Referenzattribute id und sollten die Werte der Referenzattribute id und h übereinstimmen. Lassen Sie uns also weitermachen und ihnen mithilfe eines Multi-Cursors ähnliche Werte zuweisen . Für den ersten Artikel werde ich an Ihrem Haus vorbeikommen. Dann brauchen wir für den zweiten Artikel beliebte Autos. Als nächstes kommt die Videogalerie. Dann werden wir eine Bildergalerie haben. Und schließlich brauchen wir Inhalte. Wenn ich nun auf die Links klicke, navigieren wir zum richtigen Abschnitt. Auf den ersten Blick ist es schwer zu erkennen. Aber wenn Sie sich diese Scrollleiste ansehen, werden Sie feststellen, dass wir zu den entsprechenden Abschnitten navigieren Um diesen Effekt glatter zu machen, können wir eine dieser CSS-Eigenschaften verwenden, die als Scrollverhalten bezeichnet wird. Und wir müssen es an das HTML-Element mit dem Wert small anhängen . Wie Sie sehen können, navigieren wir jetzt reibungslos zwischen den verschiedenen Abschnitten 58. Projekt 6 - Stil und das Hamburger-Menü funktionieren lassen: Okay, sobald wir es geschafft haben, die Navigation zum Laufen zu bringen, ist es jetzt an der Zeit, das Menüsymbol und auch die Navigationselemente zu gestalten das Menüsymbol und auch die Navigationselemente Schauen wir uns das fertige Projekt an. Wie du sie überall sehen kannst. Sie können aus zwei Linien bestehen. Sobald wir darauf klicken, drehen sie sich und verwandeln sich in das X. Das werden wir jetzt tun. Wir haben hier nur ein rotes Kästchen. Lassen Sie uns fortfahren und Zeilen mit einer gemeinsamen Klassenmenüzeile auswählen . Definieren wir zunächst Breite und Höhe. Ich werde die Breite für die Präsentation festlegen. Was die Höhe angeht, legen wir Wert auf die Rampe. Ändern Sie auch die Hintergrundfarbe. Mach es weiß. Dann werde ich mithilfe von Margin etwas Platz am oberen und unteren Rand der Linien schaffen etwas Platz am oberen und . Setzen wir es auf 0,3 rem und Null. Und dann erstelle einen Schatteneffekt mit Box Shadow mit einem Wert von 0,1, 0,1 RAM als 0,3 Rampe. Und die Farbe auch. Okay, hier haben wir die Zeilen. Als Nächstes richte ich diese Linien aus. Und dafür möchte ich Flexbox verwenden. Lassen Sie uns die Display-Eigenschaft auf Flex setzen. Ändere auch die Richtung. Lassen Sie uns eine Spalte erstellen, die um die Linien in der Mitte des Menüs zu platzieren, verwenden, um die Linien in der Mitte des Menüs zu platzieren, Inhaltszentrum ausrichten und Elemente in der Mitte ausrichten. Okay, wie Sie sehen können, sind die Linien ausgerichtet und es ist an der Zeit, diesen roten Hintergrund zu entfernen und auch den Typ des Kurszeigers zu ändern. Also, wie gesagt, wir drehen diese Linien, um X zu bekommen. Und das sollte passieren, sobald wir auf das Symbol klicken , Wald hinzufügen, die Leben transformieren und zu x wählen. Die erste Zeile befindet sich in der ersten Zeile des Klassenmenüs. Eigentlich werden wir die Linien in ein Kreuz umwandeln und dann werden wir das Menü selbst drehen. Verwenden wir also Transform mit der Rotationsfunktion. Ich drehe die erste Zeile um 270 Grad. Lassen Sie uns diesen Code duplizieren. Ändere den Klassennamen. Was den Wert angeht, werde ich diese zweite Linie um 360 Grad drehen . Im Moment haben wir hier also nicht das perfekte Kreuz. Und um das zu beheben, verschieben wir die Linien ein wenig. Ich werde das mit der Übersetzungsfunktion tun, die es uns tatsächlich ermöglicht, das Element sowohl vertikal als auch horizontal entsprechend der X- und Y-Achse zu bewegen vertikal als auch horizontal entsprechend der X- und Y-Achse zu Im Fall der ersten Zeile müssen wir also X mit dem Wert Minuspunkt für RAM übersetzen . Für die zweite Zeile benötigen wir Translate Y mit einem Minuspunkt für RAM. Jetzt haben wir hier das perfekte x. Und zum Schluss müssen wir das Menüsymbol selbst drehen. Also lasst uns nochmal die Transformation verwenden, bei der sie die Funktion rotieren als Wert verwenden. Lassen Sie uns hier 45 Grad passieren. Okay, endlich haben wir die Linien in x umgewandelt. Aber das sollte passieren, sobald wir auf das Symbol klicken Dafür verwende ich wiederum class change, das mithilfe von JavaScript zum Element onClick hinzugefügt wird Fügen wir beiden Zeilen eine geänderte Klasse hinzu. In diesem Fall haben wir Leerzeichen zwischen den Klassen, da die Zeilen die untergeordneten Elemente des Menüs sind. Lassen Sie uns zum Schluss diese Codezeile nehmen und sie einfügen. Wenn ich auf das Icon klicke, erhalten wir ein x. Okay, um diesen Effekt glatter zu machen, verwenden wir Transition mit Transformation und 0,5 s. Was das Menü angeht, haben wir hier schon den Übergang, aber dort die linke Eigenschaft Also werde ich es ändern und alles machen. In Ordnung, mit der Speisekarte sind wir fertig. Lassen Sie uns weitermachen und diese Links anpassen. Wir haben alle ausgewählt. Jetzt per Link. Fügen wir hier ein paar Stile hinzu. Wir benötigen eine Schriftstärke mit einem Wert von 600. Ändere auch die Farbe, mach 777 draus. Dann werde ich mit dem seitlichen Abstand, 0,3 RAM, etwas Abstand zwischen den Buchstaben schaffen mit dem seitlichen Abstand, 0,3 RAM, etwas Abstand zwischen den Buchstaben und dann Text in Großbuchstaben umwandeln Wie Sie sehen können, sind die Links also angepasst. Und zum Schluss werde ich einen kleinen Schwebeeffekt erzeugen. Ich ändere die Farbe beim Zeigen mit der Maus. Also lasst uns weitermachen und auswählen, wird jetzt mit einem Mauszeiger verlinkt, Farbe ändern, es zu 111 machen Und verwenden Sie auch den Übergang für einen gleichmäßigen Effekt mit dem Wert Farbe und dem Dauerpunkt. Okay, mit der Navigation sind wir fertig und jetzt ist es an der Zeit , die Abschnitte anzupassen 59. Projekt 6 - Erstelle und passe die Landingpage an: Ich fange mit dem ersten Abschnitt an. Werfen wir einen Blick auf das fertige Projekt. Wie Sie sehen, wird der erste Abschnitt ziemlich einfach sein. Wir werden einen dunklen Hintergrund und zwei verschiedene Elemente haben , die Überschrift und das Bild. Lassen Sie uns also weitermachen und das HTML-Markup erstellen. Moment haben wir hier den Wrapper und nur das leere Abschnittelement Fügen wir also Ihr H1-Überschriftenelement ein. Es sollte zwei verschiedene Klassen haben. Die erste wird die Abschnittsüberschrift als Paul sein. Die zweite Überschrift wird als Inhalt die Überschrift des ersten Abschnitts sein . Fügen wir hier klassische Autos ein. Als nächstes füge ich hier das Bild ein. Wählen wir das Bild aus dem Bilderordner aus, das wird Abschnitt eins sein. Lassen Sie uns auch daran festhalten, dass der Wert des Klassenattributs Abschnitt eins Bild ist. Das war's also mit dem HTML-Markup. Gehen wir zur Datei style.css und fügen neue Kommentare ein, Abschnitt eins. Und Abschnitt eins. Tatsächlich werden alle fünf Abschnitte die ähnlichen Überschriften haben Beim ersten werden wir einige zusätzliche individuelle Styles haben . Ich denke also, anstatt immer wieder dieselben Stile zu schreiben wieder dieselben Stile , wäre es besser, wenn wir einige gemeinsame Stile entwickeln würden. Lassen Sie uns die Klasse und die Abschnittsüberschrift verwenden und einige Stile einhalten. Ich werde die Schriftgröße erhöhen. Machen wir zehn RAM draus. Machen Sie dann die Schriftstärke fetter. Ändere auch die Farbe, mach es weiß. Dann füge ich mit Margin Bottom etwas Platz am unteren Rand der Elemente hinzu. Zehn Rampen. Schaffen Sie auch etwas Abstand zwischen den Buchstaben, indem Sie den Buchstabenabstand verwenden. Eine Rampe. Richten wir den Text in der Mitte aus. Und schließlich verwende Text Shadow mit einem Wert von 0,3, 0,3 um 0,5 Ramp Caller 555 Okay, danach werde ich diese beiden Elemente aufeinander abstimmen und mich auch um den Hintergrund kümmern Lassen Sie uns also weitermachen und das Abschnittselement mit der Klasse Abschnitt eins auswählen . Um die Elemente in der Mitte dieses Abschnitts auszurichten, werde ich wieder Flux-Bücher verwenden. Eigentlich müssen wir ähnliche Eigenschaften und Werte verwenden , die wir im Fall des Menüs verwendet haben. Um zu vermeiden, dass hier dieselben Flexbox-Stile geschrieben werden, erstelle ich eine neue Klasse und die gängigen Styles, nennen wir sie Center und weisen ihr Display Flex statt Justify-Content Center und Alignments Center zu Flex statt Justify-Content Center und Alignments Center Dann füge ich diese Klasse dem Menü hinzu. Und Abschnitt eins auch. Werde auch diese drei Zeilen los. Komm her und verlasse einfach die Spalte mit flexibler Richtung. Außerdem müssen wir die Richtungsspalte für den ersten Abschnitt anpassen. Ordnung, die Elemente sind also ausgerichtet und jetzt kümmere ich mich um den Hintergrund Geben wir hier die URL an. Ich wähle BG section one dot JPG aus dem Bilderordner aus. Außerdem fügen wir hier die Mitte hinzu und ich wiederhole es. Und definiere auch die Hintergrundgröße. Machen Sie es zu einem Cover, das in Bezug auf den Hintergrund und eigentlich auf dieses Abschnittselement passt. Lassen Sie uns fortfahren und der ausgewählten Überschrift ein paar Sterne hinzufügen . Lassen Sie uns hier Abschnitt eins verwenden. Überschrift des ersten Abschnitts. Ich habe hier Abschnitt eins verwendet. Und wenn ich es verpassen würde, Dan, wäre diese Aufgabe nicht erledigt, weil wir alle bereits gemeinsame Stile für Abschnittsüberschriften erstellt In diesem Fall werden einige der definierten Styles überschrieben Fügen wir hier also unteren Rand mit einem Wert von drei RAM hinzu. Dann wandle Text in Großbuchstaben um. Und verwenden Sie auch Text Shadow mit den Werten ein RAM, dreimal. Und die schwarze Farbe. Eigentlich werde ich hier zusätzliche Schatten hinzufügen, wodurch irgendwann ein mehrstufiger Schatteneffekt entsteht Also lasst uns daran festhalten, dreimal zu laufen. Und die Farbe 111. Dann füge ich drei Rem hinzu, wieder dreimal mit einer Farbe zu zwei. Wie Sie sehen können, haben wir hier einen schönen Schatteneffekt. Schließlich definiere ich die Breite des ausgewählten Bildes und setze seine Breite auf sieben Prozent. Früher habe ich den Prozentwert gehört, weil das Bild dadurch auf verschiedene Bildschirmgrößen reagiert. Ordnung, also schauen wir uns den ersten Abschnitt an, fahren wir fort und fahren mit dem nächsten 60. Projekt 6 - Erstelle und passe den Abschnitt für beliebte Autos an: Der nächste Abschnitt wird sich mit beliebten Autos befassen. Schauen wir uns das fertige Projekt an. In diesem Abschnitt werden wir also eine Überschrift und drei verschiedene Karten haben . Jede Karte besteht aus Bild, Auto, Namen, Preis und dem Button. Lassen Sie uns weitermachen und das HTML-Markup erstellen. Ich fange mit einer Überschrift an. Öffnen wir die H1-Überschriftenelemente mit der Überschrift des Klassenabschnitts und mit dem Inhalt Beliebte Autos. Fügen wir hier div ein, das die Hülle der Karten sein wird Als Nächstes erstelle ich die Karte selbst. Öffnen wir also den Div-Tag mit der Klassenkarte. Ich füge Ihnen ein paar Elemente ein. Das erste wird ein H2-Überschriftenelement mit dem Klassennamen als Inhalt sein dem Klassennamen als Inhalt Ich gebe hier nur Karbonat rein. Als nächstes werden wir ein Bild haben. Wählen wir Car One Dot JPEG aus dem Bilderordner aus. Und außerdem werde ich dem Bild eine Elementklasse namens IMG zuweisen . Als Nächstes haben wir das H3-Überschriftenelement, das der Preis des Autos sein wird Lassen Sie uns 200.000 hierher legen. Und schließlich werde ich die Taste mit der Typtaste mit einer Klasse namens btn einrichten. Damit können Sie auch mehr sehen. In Ordnung, das ist also unsere erste Karte. Insgesamt werden wir drei davon haben. Lassen Sie uns also weitermachen und es zweimal duplizieren und dann einige Änderungen vornehmen. Das zweite Bild wird als JPG aufgerufen. Ändere auch den Preis. Dann haben wir Auto drei. Und der Preis wird 150.000$ betragen. In Ordnung, das war's also in Bezug auf HTML-Markup. Lassen Sie uns weitermachen und diesen zweiten Abschnitt gestalten. Fügen wir hier einen neuen Kommentar ein, Abschnitt zwei und Abschnitt zwei. Wählen Sie dann das Abschnittelement aus. Eigentlich werde ich die Elemente mit Flexbox ausrichten, aber vorher legen wir die Karten nebeneinander Dafür werde ich dem Carts Wrapper Class Center zuweisen , das wir bereits zuvor definiert haben Danach erstellen wir diesen Abschnittselement-Flex-Container mithilfe von Display-Flex. Dann müssen wir die Richtung ändern. Setzen wir es auf Spalte. Lassen Sie uns abschließend etwas Platz um die Flex-Elemente herum schaffen , indem wir den Inhalt mit den Werten begründen, die sich bewegen. In Ordnung, das ist über die Elemente dieses Abschnitts gesagt. Lass uns weitermachen und den Cop anpassen. Ich setze die Breite auf 50 Rampe. Bevor wir dem Auto andere Stile hinzufügen, definieren wir zunächst die Breite des Bildes. Wählen wir es aus und machen es zu 100% breit. In diesem Fall nimmt das Bild 100% der Breite seines übergeordneten Elements ein, bei dem es sich um den COD handelt. Okay, lass uns weitermachen und der Karte einige weitere Stile hinzufügen. Ich werde auf der linken und rechten Seite etwas Platz schaffen , indem ich einen Rand mit einem Wert von 0,3 rampe verwende. Ändere auch die Hintergrundfarbe und mache sie weiß. Dann setze ich das Padding auf ein RAM auf allen vier Seiten Und zum Schluss erstellen wir einen Schatten, indem wir Box-Shadow mit den Werten 0,6 RAM dreimal und dann die Farbe BBB Als Nächstes erstelle ich einen Hover-Effekt. Ich möchte den Schatten beim Schweben ändern. Lassen Sie uns also weitermachen und die Karte mit dem Mauszeiger auswählen. Dann definierte Box Shadow, wo die Werte 0,8 RAM dreimal und die Farbe BBB Und lassen Sie uns auch Transition verwenden. Wir brauchen hier Box Shadow, wo die Dauer 0,5 s ist. Okay, das war's mit der Karte Lass uns weitermachen und die Überschriftenelemente anpassen, das ist der aktuelle Name Lass uns ihn auswählen und die Schriftgröße ändern, ihn ins RAM bringen. Dann setze ich die Schriftstärke auf 600. Transformiere auch Text in Großbuchstaben. Dann ändere die Farbe und mache es weiß. Moment ist die Überschrift nicht mehr sichtbar, da sie weiß ist. Ich lege es ein bisschen nach unten. Lassen Sie uns also weitermachen und seine Position auf absolut setzen. Um es dann entsprechend seinem übergeordneten Element, der Karte , zu positionieren es dann entsprechend seinem übergeordneten Element, der Karte , , müssen wir diese Position auf relativ setzen. Definieren Sie dann die Eigenschaften „oben“ und „links“ für die Überschrift. Ich werde beide zum Laufen bringen. Und damit der Autoname immer ganz oben im Bild steht, verwende ich die Z-Index-Eigenschaft mit einem relativ höheren Wert, sagen wir zehn In Ordnung, jetzt ist die Überschrift sichtbar. Als Nächstes erstelle ich einen Hover-Effekt. Ich möchte die Opazität des Bildes erhöhen, wenn der Mauszeiger darauf zeigt. Stellen wir es zunächst auf, sagen wir, 0,8 ein. Wählen Sie dann die Karte mit einem Mauszeiger aus. Darauf folgt das Autobild. Und dann setzen Sie die Opazität auf eins. Außerdem verwende ich Transition mit den Werten Opazität und 0,5 s. In Ordnung? Transition mit den Werten Opazität und 0,5 s. Ordnung Der Hover-Effekt funktioniert also einwandfrei. Lassen Sie uns weitermachen und den Preis anpassen. Wählen wir dieses Element aus und ändern Sie zunächst die Schriftgröße, um es auf 1,8 RAM zu erhöhen. Dann setze ich die Farbe auf 777. Und schafft auch oben und unten etwas Platz , indem ein Rand mit den Werten Punkt Fibrin und Okay, das letzte Element , das wir stylen müssen , wird der Button sein. Wählen wir es aus. Zuerst. Ich setze die Breite auf 100%. Dann ändere die Hintergrundfarbe und mache ihn weiß. Außerdem setze ich die Schriftgröße auf 1,7 rem. Dann schaffe etwas Abstand zwischen den Buchstaben. Machen wir 0,3 Runden und transformieren dann Text in Großbuchstaben Okay, Button sieht also gut aus, aber wir müssen noch ein paar Styles hinzufügen. Lassen Sie uns den Standardrand loswerden. Es wird kein Rahmen verwendet. Dann werde ich oben auf der Schaltfläche etwas Platz schaffen , indem ich Margin, Top, One Rank verwende. Als Nächstes lassen Sie uns mithilfe von Padding etwas Platz innerhalb der Schaltfläche schaffen mithilfe von Padding etwas Platz innerhalb der Schaltfläche Ich setze es auf 0,5 rem und ändere dann die Farbe, mache es weiß. Abschließend werde ich einige Schatteneffekte erstellen. Zuerst verwenden wir Text Shadow, wobei der Wert 0,1 ist, 0,1 Rampe, dann Punkt, wir haben schwarze Farbe verwendet. Und danach verwende ich Box Shadow mit den Werten 0.1, 0.1 run, dann Point Fibrin und die Farbe Und zum Schluss ändern wir den Titel des Kurses oder machen wir es deutlich. In Ordnung, mit dem Button sind wir fertig. Und eigentlich ist es das mit diesem Abschnitt. Es ist gestylt und sieht gut aus. Lassen Sie uns weitermachen und mit dem nächsten Abschnitt fortfahren. 61. Projekt 6 - Videogalerie erstellen und stilvoll: Der nächste Abschnitt wird die Videogalerie sein. Wir haben hier eine Abschnittsüberschrift und sechs verschiedene Videos. Standardmäßig sind sie Post und sobald wir den Mauszeiger über sie bewegen, werden sie abgespielt Ordnung, lassen Sie uns weitermachen und wie gewohnt das HTML-Markup erstellen Ich beginne mit der Abschnittsüberschrift. Öffnen wir das H1-Überschriftenelement mit einer Überschrift für den Klassenabschnitt Und wenn Sie darüber nachdenken, fügen Sie hier eine Videogalerie Lassen Sie uns als Nächstes die Entwicklungen öffnen. Es wird der Wrapper der Videos sein. Insgesamt werden wir zwei dieser Wrapper haben und jeder von ihnen wird drei Videos enthalten Öffnen wir das Video-Tag mit einem Klassenvideo und geben den Pfad der Datei an. Wir haben ein Video namens Auto, Video eins im Ordner Images. Außerdem werde ich zwei verschiedene Attribute verwenden. Der erste wird stummgeschaltet. Der Ton des Videos wird stummgeschaltet. Was den zweiten betrifft, wird es der Loop sein. Es ermöglicht uns, das Video unendlich abzuspielen. Außerdem können wir ein anderes Attribut namens Controls verwenden . Definieren wir auch die Breite des Videos. Mach 500 Pixel draus. Also hier haben wir ein Video mit Steuerungen. Wie Sie sehen, ist dieser Sound Mildred, und er wird auch wegen des Attributs immer wieder abgespielt . Okay, eigentlich werde ich die Kontrollen abschaffen. Ich werde sie nicht benutzen. Verwenden wir einfach Hear, Muted und Loop. Wir werden drei Videos in diesem Wrapper haben. Lass es uns zweimal duplizieren und die Videonamen ändern. Wir brauchen hier 2.3. Dann dupliziere ich den Wrapper selbst und ändere erneut die Videonamen Wir brauchen hier 45,6. In Ordnung, das HTML-Markup ist jetzt fertig. Hier ist alles durcheinander , weil die Videos von hoher Qualität und zu groß sind. Lassen Sie uns weitermachen und diesen Abschnitt anpassen. Fügen wir Ihre neuen Kommentare ein, Abschnitt drei. Und Abschnitt drei. Bevor wir mit der Anpassung dieses Abschnitts beginnen , verringern wir zunächst die Größe der Videos. Lassen Sie uns weitermachen und sie auswählen und die Breite auf 25% setzen. Okay, jetzt sind die Videos kleiner und Sie können das Abschnittselement anpassen. Wählen wir es aus. Ich werde es mit Display-Flags zu einem Flex-Container machen. Dann müssen wir die Richtung ändern. Machen wir es zu einer Kolumne. Ebenfalls. Ich werde etwas Platz um die Flex-Gegenstände herum schaffen. Lassen Sie uns „justify content space around“ verwenden. Und ändern Sie auch die Hintergrundfarbe, machen Sie es dunkelgrau mit bis zu zwei. Das war's mit diesem Abschnittselement. Als Nächstes richte ich die Videos aus, die ich wieder verwenden möchte, Flexbox Gehen wir also zur HTML-Datei und weisen dem Video-Wrapper das Klassenzentrum zu Ordnung, wie Sie auf der Website sehen können, sind die Videos aufeinander abgestimmt, aber wir müssen ihnen ein paar Stile hinzufügen. Lassen Sie uns zunächst etwas Platz auf der linken und rechten Seite der Videos schaffen , indem wir den Rand mit den Werten Null verwenden. Und um zu starten, werde ich die Ecken der Videos mit dem Border-Radius mit dem Wert 0,5 rem abgerundet machen der Videos mit dem Border-Radius mit dem Wert 0,5 rem abgerundet Border-Radius mit dem Wert 0,5 Lassen Sie uns außerdem die Opazität leicht verringern . Machen wir 0,8 draus. Und zum Schluss erstelle ich einen kleinen Schatteneffekt mit Boxschatten mit den Werten 0,3, 0,3 rem. Als nächstes wird es 0,5 RAM und die Farbe 111 sein. In Ordnung, wir sind fast fertig. Wir müssen nur Schwebeeffekte erzeugen. Außerdem müssen wir die Videos abspielen, wenn wir mit der Maus darauf zeigen. Dafür werden wir ein bisschen JavaScript verwenden. Lassen Sie uns zunächst die Opazität erhöhen und den Schatten ändern, wenn Sie mit der Maus darauf zeigen Wählen wir das Video mit der Hover-Pseudoklasse aus, die die Opazität erhöht, die Opazität erhöht Und ändere auch den Boxschatten. Ich füge die Werte wie 0,5, 0,5 RAM als ein RAM und die Farbe eins zu eins ein Und benutze auch Transition. Der Wert beträgt alle 0,5 s. In Ordnung, wie Sie sehen können, funktionieren die Hover-Effekte einwandfrei, und jetzt ist es an der Zeit, die Videos abzuspielen, wenn Sie mit der Maus darauf zeigen Gehen wir weiter und gehen wir zur JavaScript-Datei. Wählen Sie zunächst alle Videos aus. Ich erstelle eine neue Variable, nennen wir sie Videos, und wähle dann alle Videos mit der Methode Query Selector All Wir müssen hier das Klassenvideo spezifizieren. Um die Videos beim Hover abzuspielen, müssen wir die Ereignisse „Maus über“ und „Maus aus“ verwenden Und auch die Methode heißt Play and Pulse. Vorher müssen wir uns die Videos ansehen und ihnen den Event-Listener beifügen Also werde ich eine der Array-Hilfsmethoden namens for-each verwenden der Array-Hilfsmethoden namens for-each Es sollte einen Parameter annehmen. Es wird die Callback-Funktion sein. Wir müssen ein Argument übergeben , das das aktuelle Video während der Schleife sein wird . Dann müssen wir das Video an den Listener des Video-Events anhängen. Lassen Sie uns Ihre Maus über das Ereignis führen. Und übergeben Sie hier auch die Callback-Funktion, die ausgeführt werden soll, sobald wir den Mauszeiger über das Video bewegen Um das Video abzuspielen, müssen wir nun eine der HTML5-Video-APIs verwenden, die als Abspielen bezeichnet wird Wenn ich jetzt mit der Maus über das Video fahre, wird es abgespielt. Aber sobald wir die Maus rauslassen, wird es weiterspielen. Eigentlich brauchen wir das nicht. Wir müssen das Video unterbrechen, sobald wir die Meile verlassen haben. Also müssen wir ein anderes Event namens Miles Out nutzen. Fügen wir das Video dem Listener des Video-Events das Ereignis meilenweit Und dann verwende eine Methode namens Pulse. Okay, jetzt funktioniert alles gut. Und eigentlich sind wir mit diesem Abschnitt fertig. Lass uns weitermachen und mit dem nächsten fortfahren. 62. Projekt 6 - Bildergalerie erstellen und stil: Okay, es ist an der Zeit, den nächsten Abschnitt zu erstellen, der die Bildergalerie sein wird Diese Galerie wird etwas anders und interessant sein. Eins. Wir werden zwei Regale haben, von denen jedes drei verschiedene Bilder der Autos enthält. In diesem Abschnitt erfahren Sie, wie Sie 3D-Elemente mithilfe von CSS erstellen. Lassen Sie uns weitermachen und das HTML-Markup erstellen. Ich beginne mit der Abschnittsüberschrift. Öffnen wir das H1-Überschriftenelement mit der Überschrift des Klassenabschnitts mit der Inhaltsbildergalerie Als Nächstes öffne ich ein div-Tag, das als Hülle für die Galerie dienen wird Es ist der Klassengalerie zugewiesen. Insgesamt werden wir also zwei Rapper haben, als wäre es nicht der vorherige Abschnitt Jeder von ihnen kodiert das Regal und drei Bilder. Lassen Sie uns also weitermachen und ein div-Tag öffnen, das das Regal sein wird, das ich dem Galerie-Regal der Klasse zuweisen werde. Es sollte das leere Element sein. Auf die Schale werden also die Bilder folgen. Öffnen wir das Image-Tag und geben Sie hier den Teil des Bildes an. Wir brauchen. Galerieauto mit einem Punkt im JPG-Format aus dem Bilderordner. Außerdem werde ich dem Bildelement-Klassenattribut einen Wert in der Galerie IMG zuweisen dem Bildelement-Klassenattribut . Lassen Sie uns es zweimal duplizieren und die Bildnamen und auch die Klassennamen ändern . Wir müssen drei hinzufügen. Als Nächstes dupliziere ich die Galerie selbst. Und dann ändere ich wieder die Namen der Bilder. Was die Klassennamen angeht, müssen wir sie so lassen, wie sie sind. Ordnung, das war's mit dem HTML-Markup. Lassen Sie uns damit beginnen, diesen Abschnitt anzupassen Zuerst werde ich die Bilder nebeneinander in einer Reihe platzieren die Bilder nebeneinander in einer Verwenden wir dafür Flexbox. Ich werde beiden Galerien eine Klasse zuweisen. Ordnung, lassen Sie uns weitermachen und neue Kommentare in die CSS-Datei einfügen Es wird eine Sektion für sie sein. Und aus Abschnitt vier. Wählen Sie dann das Abschnittselement aus. Ich werde es mit Display Flex zu einem Flex-Container machen. Außerdem werde ich die Elemente in der Spalte platzieren. Lassen Sie uns also weitermachen und die Spalte mit der Flexrichtung ändern. Außerdem werde ich mithilfe von justify content space between etwas Abstand zwischen den Elementen schaffen . Als Nächstes möchte ich die Größe der Bilder verringern , weil sie im Moment zu groß sind. Also lass uns weitermachen und sie auswählen und mit zwei 15% festlegen. Jetzt ist es viel besser. Lassen Sie uns weitermachen und Galerie auswählen. Ich möchte oben und unten etwas Platz schaffen. Machen wir das mit Margin. Ich setze es oben und unten auf zehn Rem und links und rechts auf Null. Ordnung, jetzt ist es an der Zeit, das Regal zu erstellen und ich denke, es wäre besser, wenn wir die Bilder für eine Weile verstecken Also lass uns dein Display benutzen. Keine. Wählen Sie dann das Regal aus. Zunächst definiere ich seine Breite und Höhe. Lassen Sie uns mit 280 Prozent beginnen. Was die Höhe angeht, werde ich eine 3D-Rampe daraus machen. Definieren Sie dann die Hintergrundfarbe. Ich werde hier den RGBA-Wert verwenden. Fügen wir hier 38126199 und die Opazität 0,8 ein. Und schließlich, um das Regal in der Mitte dieses Abschnitts zu platzieren, verwenden wir Margin, den Wert R0 In Ordnung, das ist also der vordere Teil des Regals. Was den Rest des Teils betrifft, werden wir ihn mit einem vorher-Pseudoelement erstellen Lassen Sie uns also weitermachen und das Galerieregal mit dem Pseudoelement davor auswählen Galerieregal mit dem Pseudoelement davor Lassen Sie uns zunächst die Spalte leer machen. Dann setze ich seine Position auf absolut. Und um dieses Element entsprechend seinem übergeordneten Element, dem Galerieregal, zu positionieren dieses Element entsprechend seinem übergeordneten Element, dem Galerieregal, zu , müssen wir dem übergeordneten Element eine relative Position zuweisen. Danach fügen wir ein paar Sterne hinzu, um das Pseudoelement zu erledigen . Ich definiere seine Breite und Höhe Machen wir die Breite zu hundert Prozent. Was die Höhe angeht, werde ich sie auf zehn Rampen einstellen. Und ändere auch die Hintergrundfarbe. Ich werde hier Farbe mit dem RGBA-Wert verwenden. Fügen wir hier 34152248 und die Opazität 0,7 ein. In Ordnung? Im Moment ist es also nicht richtig positioniert. Ich werde es nach oben verschieben Definieren wir also die oberste Position. Eigentlich müssen wir es oben auf dem Vorderteil platzieren . Ihre Höhe entspricht zehn Rampen. Also brauchen wir hier eine Top-Immobilie mit dem Wert minus zehn Rep Richtig? Danach müssen wir das Pseudoelement horizontal entsprechend der X-Achse drehen Pseudoelement horizontal entsprechend der X-Achse Also werde ich die Eigenschaft Transform mit der Funktion rotate x verwenden . Und ich werde hier 20 Grad angeben. Das Element wird also gedreht, aber das wollen wir nicht Das Problem ist, dass das Element standardmäßig entsprechend seiner Mitte gedreht wird Ich meine, der Ursprung der Transformation ist zentriert und wir müssen ihn ändern und ihn zum Stillstand bringen. Also lasst uns Transform Origin verwenden und es kaufen lassen. Jetzt ist das Problem behoben und das Element ist korrekt gedreht. Das einzige, was getan werden musste, war eine 3D-Umgebung zu erstellen und diese Regale wie die echten aussehen zu lassen. Um eine 3D-Umgebung zu erstellen, müssen wir, wie Sie bereits wissen, eine Eigenschaft namens Perspektive verwenden. Stellen wir es auf zehn Durchläufe ein. In Ordnung, wie Sie sehen können, haben wir jetzt ein viel besseres Ergebnis mit einem Shouts Wir sind fast fertig. Das einzige, was ich tun möchte, ist einen Schatteneffekt zu erzeugen. Lassen Sie uns also weitermachen und Box Shadow mit den Werten eins rann, einer Rampe, Fibrin und der Farbe für vier verwenden Box Shadow mit den Werten eins rann, einer Rampe, Fibrin und der Farbe für In Ordnung, also endlich, mit dem Regal, sind wir fertig. Lassen Sie uns weitermachen und die Bilder wieder anzeigen. Lassen Sie uns Display None loswerden. Wie Sie gerade sehen können, ist das Layout durcheinander, also kümmern wir uns darum Ich setze die Position auf absolut. Jetzt werden die Bilder hintereinander platziert. Lassen Sie uns sie zuerst nach oben bewegen und in die Regale stellen. Ich werde die untere Position definieren , wo der Wert sechs RAM beträgt. Dann wähle ich jedes Bild einzeln aus und definiere die linke Position. Lass uns weitermachen und mit der Galerie IMG one beginnen. Ich setze die linke Position auf 50 Prozent. Dann lass uns weitermachen und diesen Code zweimal duplizieren. Lassen Sie uns den Klassennamen ändern. Wir brauchen Kalorien img2. die Führungsposition angeht, werden wir hier 30% verwenden. Was das dritte Bild angeht, nehmen wir die linke Position auf sieben Prozent. Jetzt sehen wir also alle Bilder, aber sie sind nicht ganz richtig positioniert. Um das zu beheben, werde ich sie auf die linke Seite verschieben. Und dafür verwenden wir Transform mit der Funktion Translate X, wodurch die meisten Elemente horizontal dargestellt werden. Ich gebe hier -50 Prozent an. Und außerdem möchte ich das Bild horizontal drehen, ich meine, entsprechend der X-Achse Verwenden wir also Rotate X mit dem Wert 0,5 Grad. Lassen Sie uns außerdem ein paar Schatteneffekte erzeugen und die Bilder abgerundet machen. Verwenden wir den Boxschatten mit Abwertungen von Punkt zu Runde. Dann verwende ich einen Punkt mit negativem Wert im RAM, um die Richtung des Schattens zu ändern. Als nächstes wird eine 0,5 als Farbe eingegeben. Verwenden wir 888. Lassen Sie uns außerdem das Bild mithilfe des Randradius mit einem Wert von 0,5 ran abgerundet Ordnung, das Letzte, was wir tun müssen, ist einen Schwebeeffekt zu erzeugen Sobald wir den Mauszeiger über die Bilder bewegen, müssen wir sie wieder in die normale Position drehen Und wir müssen auch den Schatten ändern. Lassen Sie uns also weitermachen und das Galeriebild mit der Hover-Pseudoklasse auswählen und dann Transform verwenden . Eigentlich müssen wir hier die Übersetzungsfunktion erneut verwenden , denn wenn wir sie verpassen, ändert sich die Position der Bilder. Also müssen wir x mit -50% übersetzen. Dann müssen wir x um den Wert Null drehen. Außerdem verwenden wir Box Shadow mit den Werten 0,2, 0,3 RAM und der Farbe 888. Um den Effekt glatter zu machen, verwenden wir die Übergangswerte all und 0,3 s. Wir haben hier also einen Schwebeeffekt Aber eigentlich sieht es nicht ganz gut aus, weil die Bilder von der Mitte aus rotieren und wir sie von unten drehen müssen. Also nochmal, wir müssen uns ändern, Ursprung transformieren, ihn leihen Okay, jetzt ist das Problem behoben und wir haben hier eine schöne Mulde Oder bevor wir diesen Abschnitt beenden, habe ich festgestellt, dass wir oben und unten in diesem Abschnitt etwas Platz benötigen oben und unten in diesem Abschnitt etwas Platz , weil die Überschrift nicht gut positioniert ist. Und außerdem denke ich, dass wir auch Platz für die anderen Abschnitte brauchen . Also gehe ich zu den Kommentaren, zu den Abschnittsstilen und weise sie dem Abschnittselement zu. Polsterung Der Wert ist Fibrin und Null. Okay, jetzt haben wir viel bessere Ergebnisse. Und eigentlich sind wir mit der Bildergalerie fertig. Lassen Sie uns weitermachen und mit der Arbeit am nächsten Abschnitt beginnen , der der letzte sein wird 63. Projekt 6 - Kontaktabschnitt und Fußzeile erstellen und anpassen: Ordnung, es ist an der Zeit, einen fünften Abschnitt zu erstellen , der der Kontaktbereich sein wird Wir werden den Bau des Projekts mit diesem Abschnitt abschließen. Und danach werden wir es für verschiedene Bildschirmgrößen anpassen. Schauen wir uns das fertige Projekt an. Dieser Abschnitt wird also einfach sein. Wir werden ein Vollbild-Hintergrundbild mit einer Abschnittsüberschrift, Formularelement und einem kleinen Copyright-Text Lassen Sie uns weitermachen und ein HTML-Markup erstellen. Fügen wir hier ein H1-Überschriftenelement mit einer Klassenabschnittsüberschrift ein Und wo uns die Inhalte kontaktieren. Als nächstes benötigen wir Formularelemente mit dem Klassenkontaktformular. Das Formular wird also aus vier verschiedenen Elementen bestehen. Wir werden zwei Eingaben für den vollständigen Namen und die E-Mail-Adresse haben. Dann haben wir einen Textbereich und die Schaltfläche „Senden“. Lassen Sie uns also das Eingabeelement mit einer Klasse für Eingaben interferieren. Und auch mit dem Platzhalterattribut, das den Wert Ihres vollständigen Namens hat Dann werde ich diese Codezeile duplizieren. Lassen Sie uns hier ändern, geben Sie ein, erstellen Sie eine E-Mail und auch den Wert des Platzhalter-Attributs Geben wir Ihre E-Mail-Adresse ein. Als Nächstes benötigen wir einen Textbereich mit einer Klasse von Formulareingaben. Und verwenden Sie auch erneut Platzhalterattribut mit einem Wert. Geben Sie eine Nachricht ein Lassen Sie uns abschließend eine Schaltfläche erstellen, die anhand eines Eingabeelements dargestellt wird , das dem Clusterformular BTN als Typ zugewiesen ist , den ich als Submit verwenden werde Und wir brauchen auch Value Submit. In Ordnung, das war's mit den Formularelementen. Als Nächstes müssen wir einen Absatz mit dem Klassen-Copyright erstellen . Fügen wir hier einen Copyright-Text ein. Ich werde es hier verwenden. Das Copyright-Zeichen mit HTML5-Entität. Es sollte Amper/Copy, Semikolon sein. Dann füge ich deinen Code ein und erstelle alle Rechte vorbehalten. In Ordnung, das war's also mit dem Markup. Alles ist bereit, um mit der Anpassung dieses Abschnitts zu beginnen. Lassen Sie uns weitermachen und neue Kommentare in die CSS-Datei einfügen. Wir brauchen Abschnitt fünf und außerhalb von Abschnitt F5. Wählen Sie dann die Elemente dieses Abschnitts aus. Das erste, was ich tun möchte, ist, das Bild als Vollbild-Hintergrund hinzuzufügen Lassen Sie uns zunächst den linearen Gradienten verwenden. Wir benötigen hier einen RGBA-Wert, bei dem die schwarze Farbe und die Opazität 0,6 beträgt Als nächstes benötigen wir die ähnliche Farbe. Aber mit Opazität 0,8. Okay, danach definieren wir den URL-Pfad des Bildes Es wird BG Section Five Dot JPG sein. Lassen Sie uns auch Ihre Mitte einfügen und wiederholen Sie es nicht. Und schließlich definiere ich die Größe des Hintergrunds. Lass es uns abdecken. Also hier haben wir ein Bild. Als Nächstes möchte ich die Elemente mit Flexbox ausrichten. Lassen Sie uns den Flex-Container für das Abschnittselement mithilfe von Display-Flex erstellen. Dann müssen wir Elemente in einer Spalte vertikal ausrichten. Ändern wir also die Richtung, machen wir es zu einer Spalte. Schaffen Sie dann etwas Platz um die Elemente herum , indem Sie den Inhaltsbereich ausrichten. Und schließlich platziere ich die Elemente mithilfe von Align Items, Center in der Mitte. Ordnung, die Elemente sind also ausgerichtet und jetzt werde ich weitermachen und die geformten Elemente anpassen Lassen Sie uns weitermachen und es auswählen. Zunächst definiere ich seine Breite und Höhe. Lassen Sie uns mit 260 RAM beginnen. Was die Höhe angeht, werde ich es auf 45 Rem machen. Als Nächstes ändere ich die Hintergrundfarbe. Lassen Sie uns Ihr RGBA mit der weißen Farbe mit dem Opazitätspunkt verwenden der weißen Farbe mit dem Opazitätspunkt Zu. Schließlich werde ich die Grenze mit Werten erstellen, um solide zu rammen. Und dann verwende wieder den RGBA-Wert mit der weißen Farbe. Und mit der Opazität 0,8 Als Nächstes werde ich dafür die Elemente innerhalb des Formulars ausrichten dafür die Elemente innerhalb des Formulars Lassen Sie uns erneut Flexbox verwenden In diesem Fall erstelle ich den Formularflex-Container mithilfe von Display-Flex. Dann noch einmal, ändere die Richtung. Ich werde die Elemente vertikal in einer Spalte platzieren. Als Nächstes platziere ich Elemente vertikal in der Mitte. Verwenden Sie das Justify-Content Center. Und schließlich schaffen Sie etwas Platz innerhalb des Formularelements, Sie auf allen vier Seiten einen Padding mit einem Wert von fünf rem In Ordnung, das war's mit dem Formularelement. Jetzt müssen Sie den Eingabetextbereich und den Bateson anpassen den Eingabetextbereich und den Bateson Zuerst wähle ich die Eingabeelemente und den Textbereich aus, da sie einige gemeinsame Stile haben werden. Wählen wir also beide Elemente aus. Definieren wir zunächst Breite und Höhe. Fangen wir mit 200 Prozent an. Für die Höhe. Ich mache es bis zur Rampe. Danach lassen Sie uns oben und unten mit Hilfe von Rand etwas Platz schaffen . Setzen wir es auf Ram und Null. Außerdem werde ich die Hintergrundfarbe der Eingabeelemente und des Steuerbereichs transparent machen die Hintergrundfarbe der Eingabeelemente und des . Ordnung, lassen Sie uns weitermachen und diesen Elementen ein paar weitere Stile hinzufügen diesen Elementen ein paar weitere Stile hinzufügen Lassen Sie uns mithilfe von Polsterungen etwas Platz in ihnen schaffen. Der Wert 0,5 RAM auf allen vier Seiten. Dann ändere die Grenze. Ich werde 2.1 Run Solid und die weiße Farbe zuweisen. Als Nächstes ändere ich die Schriftgröße. Machen wir 1,5 RAM draus. Schaffen Sie dann etwas Abstand zwischen den Buchstaben mit einem Buchstabenabstand von 0,1 RAM. Und schließlich ändere die Farbe, mache es weiß. In Ordnung, also die Eingaben und der Textbereich oder Stil. Und bevor wir weitermachen und die Schaltfläche gestalten, werde ich dem Textbereich noch ein paar weitere Stile hinzufügen . Gerade jetzt. Es hat nur Breite und Höhe, was zu Problemen im Layout führen kann , da wir die Größe des Textbereichs manuell ändern können. Also müssen wir die maximale Breite und Höhe definieren. Wählen wir also den Textbereich aus und definieren die maximale Breite. Machen Sie es zu 100 Prozent. Was die Mindestgröße angeht, werde ich acht Rennen machen. Okay, jetzt ist das Problem mit dem Textbereich behoben. Aber wir haben hier ein anderes Problem. Die Höhe der Eingabeelemente hat sich verringert und das passiert , weil jetzt der Textbereich größer wurde und die restlichen Elemente verschoben wurden. Um solche Dinge zu vermeiden, können wir eine der Flex-Item-Eigenschaften verwenden, die als Flex-Schrumpfung bezeichnet wird , und wir müssen sie auf Null setzen In Ordnung? Als Nächstes möchte ich die Hintergrundfarbe für die Eingaben und den Textbereich ändern , sobald wir sie fokussiert haben. Wählen wir also Eingaben und den Textbereich mit einem gemeinsamen Klassennamen für einen Put aus, auf den die Pseudoklasse defocus folgen sollte Lassen Sie uns die Hintergrundfarbe ändern. Ich werde RGBA mit der weißen Farbe und mit der Opazität 0,5 verwenden der weißen Farbe und mit der Opazität Außerdem benötigen wir einen Übergang mit Hintergrundfarbe und einer Dauer von 0,5 s. Okay, endlich können wir den Button anpassen. Lassen Sie uns weitermachen und es auswählen. Wir müssen zuerst die Klasse des Formularelements verwenden da sonst einige dieser Stile nicht auf die Schaltfläche angewendet werden. Wie Sie wissen, wird der Button mithilfe des Eingabeelements erstellt, und wir haben wahrscheinlich alle einige Styles für den April-Down. Lassen Sie uns die Hintergrundfarbe ändern. Ich werde RGBA verwenden, wo die weiße Farbe und die Opazität 0,8 Dann ändern wir die Schriftstärke und machen sie auf 600. Lassen Sie uns also etwas Abstand zwischen den Buchstaben schaffen , indem wir die Rampe für den Buchstabenabstand 0,3 verwenden. Dann ändere die Farbe, mache 444 draus. Und ändern Sie auch den Typ des Cursors. Machen Sie es deutlich. In Ordnung, also mit dem Knopf sind wir fertig. Und jetzt müssen wir uns um das letzte Element kümmern, nämlich um den Absatz. Also lass uns weitermachen und es auswählen. Lassen Sie uns zunächst die Schriftgröße erhöhen und es zum Laufen bringen. Ändern Sie auch die Schriftstärke. Ich werde 300 draus machen. Dann lass uns es weiß färben. Und richten Sie auch den Textsatz aus. Ordnung, der Absatz ist also maßgeschneidert und eigentlich sind wir mit diesem Abschnitt und mit einem Projekt selbst fast fertig Bevor wir weitermachen und das Projekt responsiv gestalten, möchte ich noch ein Schwein machen. Der Kontaktbereich ist der letzte Abschnitt des Projekts und ich möchte den Platz unten loswerden. Lassen Sie uns also weitermachen und ihm eine Margenuntergrenze mit einem Wert von Null zuweisen . In Ordnung, also endlich sind wir fertig. Das Projekt wurde erfolgreich erstellt und jetzt müssen wir zum letzten Schritt übergehen und das Projekt an verschiedene Bildschirmgrößen anpassen. 64. Projekt 6 - Projekt reaktionsfähig machen: Okay, also bevor wir anfangen, CSS-Medienabfragen an verschiedenen Breakpoints zu erstellen CSS-Medienabfragen an und das Projekt responsiv zu gestalten Schauen wir uns das fertige Projekt noch einmal an. Wenn ich also die Seite überprüfe, wechsle ich in den Responsive-Modus und überprüfe, ob sich die Projekte auf unterschiedlichen Bildschirmgrößen befinden. Dann werden Sie feststellen, dass es gut aussieht und auf Anzeigen reagiert. In Ordnung, also müssen wir dieses Ergebnis erzielen. Lassen Sie uns weitermachen und die Seite überprüfen. Wie Sie wissen, basiert das Projekt auf einer extra großen Bildschirmgröße. Ich habe die Bildschirmgröße mit 1920 Pixeln Breite und 1080 Pixeln Höhe. Ich habe bereits verschiedene Breakpoints vorbereitet , an denen wir einige Änderungen vornehmen müssen, also werde ich keine Zeit damit verschwenden, sie zu finden. Der erste Breakpoint wird 1.500 Pixel sein. Wie Sie am Breakpoint sehen können, müssen wir uns um die Navbar kümmern Und auch einige dieser Abschnitte müssen geändert werden. Lassen Sie uns weitermachen und neue Kommentare einfügen. Responsiv und nicht responsiv. Bevor ich hier irgendeinen Code schreibe, teilen wir das Fenster des VS-Codes in zwei Teile auf. Und zeigen Sie die Datei style.css auf beiden Seiten an. Ich denke, es wird unsere Arbeit erleichtern und komfortabler machen , da wir aktuelle Styles schnell finden und dann eine neue CSS-Medienabfrage erstellen Ich gebe hier die maximale Breite an. Machen wir 1.500 Pixel draus. Das erste, was wir tun müssen, ist die Navigationsleiste zu vergrößern Ich meine die Breite der Navbar. Lassen Sie uns weitermachen und es auswählen. Lassen Sie uns die Breite auf 20 festlegen, die Breite des Viewports. Außerdem werde ich die Polsterung etwas verringern. Lass es uns auf RAM als 00.2-Rampe schaffen. Die Breite des Romans wird also vergrößert, aber jetzt ist das Menüsymbol ausgeblendet. Und auch, sobald wir nah genug sind oder es teilweise sichtbar ist. Also müssen wir die linke Position ändern. Machen wir es auf eine Viewport-Breite von -20. Außerdem müssen wir die Position des Menüsymbols beim Klicken ändern . Wählen Sie das Menü mit dem Klassenwechsel aus. Und lassen Sie uns seine Spitzenposition auf 20 setzen. Breite des Viewports. In Ordnung, das war's mit Navbar Kümmern wir uns um die Abschnitte. Sobald die Zahl angezeigt wird, dann ist dieser Abschnitt, also teilweise ausgeblendet. Also kümmern wir uns darum. Ich werde den Abschnitt mit dem Klassenwechsel auswählen. Und ich setze die linke Position auf Viewport-Breite von 20. Außerdem werde ich den Wert der Rotate-Funktion ändern . Machen wir 15 Grad draus. Okay, das war's mit diesem Abschnittselement. Lassen Sie uns weitermachen und uns um den ersten Abschnitt kümmern. Ich denke, wir müssen etwas Abstand zwischen der Überschrift und dem Bild hinzufügen . Gerade jetzt. Abschnitt eins hat das Clusterzentrum. Sie rechtfertigen also, dass die Inhaltseigenschaft auf die Mitte gesetzt ist und ich werde sie ändern und Megan Space gleichmäßig verteilen Okay. Lassen Sie uns weitermachen und uns um diese Abschnittsüberschrift kümmern. Ich möchte die Schriftgröße leicht verringern. Wählen wir also dieses Element aus und setzen Sie die Schriftgröße auf sieben. Lauf. In Ordnung, das war's mit dem ersten Abschnitt. Lass uns weitermachen und uns um den zweiten kümmern. Ich werde die Karten auf mehreren Linien ausrichten. Und dafür müssen wir die Flex-Wrap-Eigenschaft auf Wrap setzen . Wählen wir also Karten Wrapper aus und weisen sie dem Flex-Wrap mit dem Value-Wrap zu Wie ihr seht , sind die Karten eingewickelt und auf verschiedenen Linien platziert, musste aber auf die Höhe dieses Abschnitts achten. Ich werde es auf Auto stellen und auch die Polsterung an der Unterseite erhöhen Ich setze das Padding oben auf fünf Rem und auf der rechten Seite auf Null Tan lief unten und Null auf der linken Seite. Okay, als Nächstes müssen wir etwas Platz zwischen den Karten schaffen Und ich werde auch ihre Breite verringern. Wählen wir also die Karte und setzen ihre Breite auf vier, damit sie ausgeführt werden kann. Außerdem werde ich die Marge auf drei Runden festlegen. In Ordnung, das war's mit dem zweiten Abschnitt. Lassen Sie uns weitermachen und diesen dritten anpassen. Ich werde die Breite des Videos erhöhen. Lassen Sie uns weitermachen und es auswählen. Also werde ich Breite zwei setzen, um es vorwegzunehmen. Und ich werde auch die Marge ändern. Machen wir es auf allen vier Seiten zum RAM. Außerdem werde ich die Polsterung auf der linken und rechten Seite dieses Abschnitts erhöhen auf der linken und rechten Seite dieses Abschnitts Wählen wir Abschnitt drei und setzen das Padding auf fünf Rem. Und dann drei Rampen links und rechts. Mit einer Videogalerie. Unter dem Breakpoint sind wir fertig. Lassen Sie uns weitermachen und die Bildergalerie anpassen. Als erstes werde ich den Abstand zwischen den Regalen vergrößern. Wählen wir also Galerie und setzen den Rand oben und unten auf 12 Rem und links und rechts auf Null. Siehst du es gerade, das Layout ist durcheinander, weil die Höhe dieses Abschnitts nicht mehr ausreicht Also müssen wir es zu R0 machen. Wählen wir Abschnitt vier aus und stellen die Höhe auf automatisch ein. In Ordnung, als Nächstes möchte ich das Regal vergrößern Wählen wir es also aus und setzen seine Breite auf 90%. Außerdem werde ich das Bild vergrößern. Wählen wir also Gallery IMG aus und setzen die Breite auf 20%. Die Bilder wurden größer, aber sie sind zu nahe beieinander platziert. Um das zu beheben, werde ich die Positionen des zweiten und dritten Bildes ändern . Wählen wir also die Galerie aus, in der sich zwei befinden. Lassen Sie uns die linke Position auf 25% setzen. Was das dritte Bild angeht, werde ich die linke Position auf 75% festlegen. Okay, jetzt sehen sie gut aus und wo die Bildergalerie ist, sind wir fertig Lassen Sie uns weitermachen und uns um den letzten Abschnitt kümmern , der der Kontaktbereich sein wird. Als erstes müssen wir die Höhe des Abschnitts ändern. Wählen wir also Abschnitt fünf aus und legen wir seine Höhe auf R0 fest Als Nächstes kümmern wir uns um die Formularelemente. Wählen Sie Kontaktformular aus. Ich werde die Größe am Set mit 255 Runs ändern. Was die Höhe angeht, die ich zum Laufen angeben werde. Und ändere auch die Polsterung. Machen wir es bis zur Rampe. Schließlich müssen wir am Anfang des Absatzes etwas Platz schaffen. Wählen wir es also mit der Klasse Copyright aus und setzen den oberen Rand auf fünf Runden. Ordnung, ich denke, wir sind wegen dieser Abschnitte mit dem Breakpoint fertig . Sieh gut aus. Gehen wir also weiter und gehen wir zum nächsten Breakpoint über , der aus tausend Pixeln bestehen wird Ich werde eine neue CSS-Medienabfrage erstellen. Geben wir die maximale Breite an, machen wir daraus tausend Pixel. Das erste , was ich am Breakpoint tun werde , ist, die Polsterung auf der rechten Seite zu entfernen Wählen wir also den Körper aus und setzen die Polsterung auf Null. Okay, als nächstes passen wir genug an oder weil es nicht ganz gut aussieht Eigentlich werde ich mir den Code vom vorherigen Breakpoint holen den Code vom vorherigen Breakpoint Und lassen Sie uns die Breite des Viewports von 20 in 25 ändern . Breite des Viewports Ich werde auch den Wert der Rotationsfunktion erhöhen . Machen wir es auf 20 Grad und entfernen diese Polsterung von hier aus. In Ordnung, die Nummer sieht also gut aus. Lassen Sie uns weitermachen und uns um den ersten Abschnitt kümmern. Ich werde die Breite des Bildes vergrößern. Wählen wir also Abschnitt eins, IMG, und setzen wir seine Breite auf 90%. Ich finde, der erste Abschnitt sieht gut aus und wir müssen nichts weiter ändern. Das Gleiche können wir über den zweiten Abschnitt sagen. Was die Videogalerie angeht, lassen Sie uns weitermachen und sie anpassen. Ich werde die Videos vertikal in einer Spalte platzieren. Also lass uns weitermachen und den Video-Wrapper auswählen und dann die Flexrichtung ändern, es anrufen Die Videos sind in einer Spalte platziert, aber jetzt reicht die Höhe dieses Abschnitts nicht aus. Also werde ich alles durchziehen. Wählen wir Abschnitt drei aus und legen wir seine Höhe auf unsere Zeile fest. Erhöhen Sie dann die Breite der Videos. Machen wir 70% draus. Und ich werde auch die Marge ändern. Machen wir drei Durchläufe oben und unten und Null links und rechts. In Ordnung, die Videogalerie sieht gut aus. Wenn wir uns andere Abschnitte ansehen, werden Sie feststellen, dass sie ebenfalls gut aussehen. Es ist also an der Zeit, zum nächsten Breakpoint überzugehen , der 750 Pixel betragen wird Lassen Sie uns also eine neue CSS-Medienabfrage maximalen Breite von 750 Pixeln Also noch einmal, wir müssen die Navigationsleiste anpassen. Lassen Sie uns weitermachen und den Code vom vorherigen Breakpoint abrufen Ich werde die Breite des Viewports von 25 in ändern. An dritter Stelle nach der Breite des Viewports. Was die Rotationsfunktion angeht, legen wir ihren Wert auf 25 Grad fest. Okay? Also dann, jetzt sieht die Bar gut aus. Als Nächstes kümmere ich mich um die Überschriften. Wählen wir die Abschnittsüberschrift aus. Stellen Sie die Schriftgröße auf 5,5 g ein. In Ordnung, also sehen die ersten drei Abschnitte auch gut aus Die Bildergalerie, wir müssen einige Änderungen vornehmen. Ich denke, wir müssen die Regale dünner machen. Wählen wir also das Galerieregal aus. Lassen Sie uns seine Höhe auf 1,5 RAM als Polybreite festlegen. Ich setze es auf 95%. Dann kümmere ich mich um den zweiten Teil der Regale, der vor dem Pseudoelement steht Wählen wir also das Galerie-Regal aus, gefolgt vom vorherigen Pseudoelement Machen wir aus seiner Höhe fünf RAM. Was die oberste Position angeht, werde ich sie auf minus fünf setzen. Rann. Die Regale sehen gut aus, aber jetzt müssen wir uns um die Bilder kümmern. Und lassen Sie uns das Galeriebild auswählen. Ich definiere seine Breite als 25%. Was die untere Position angeht, lassen Sie uns sie im Herbst wickeln. Schließlich müssen wir die Positionen der Bilder ändern. Wählen wir also die Galerie aus, in der sich zwei befinden. Ich werde seine linke Position 22 präsentieren. Was das dritte Bild betrifft, machen wir es zu 78% an der Spitze. Eigentlich sind wir mit diesem Abschnitt fast fertig. Und bevor wir weitermachen, denke ich, als es verkleinert wurde, wurde der Raum am Ende dieses Abschnitts verkleinert. Wählen wir also Abschnitt vier aus. Und definiertes Auffüllen mit einem Wert ist sechs RAM 01 run und dann wieder Null In Ordnung, das ist es. Bezüglich dieses Breakpoints lassen Sie uns den nächsten erstellen, der 600 Pixel groß sein wird Lassen Sie uns also eine neue CSS-Medienabfrage erstellen und die maximale Breite als 600 Pixel angeben. Zuallererst werde ich die Schriftgröße des HTML-Elements verringern, da dadurch die Größe aller Elemente verringert wird. Setzen wir also die Schriftgröße auf 55,5%. Als Nächstes verringern wir die Schriftgröße aller Abschnittsüberschriften. Wählen wir also die Abschnittsüberschrift aus und legen die Schriftgröße auf 4,5 Ram fest. Als Nächstes werde ich mich um den ersten Abschnitt kümmern. Wählen wir den ersten Abschnitt aus und legen dessen Breite auf 200 Prozent fest. Gehen Sie dann zur Videogalerie. Ich möchte die Breite des Videos erhöhen. Setzen wir also die Breite auf 100%. Was den Rand angeht, werde ich es bis Ram oben und unten und Null auf der linken und rechten Seite schaffen . Okay, lassen Sie uns über die Videogalerie sprechen. Als Nächstes werde ich die Bildergalerie anpassen. Wählen wir also Galerie und setzen den Spielraum auf neun RAM und Null. Das war's mit der Bildergalerie. Lassen Sie uns weitermachen und die geformten Elemente anpassen. Wählen Sie es aus. Soweit ich die Breite ändern werde, machen wir vier bis RAM daraus. Und ich werde auch die Grenze zu einem soliden Lauf setzen. Und die weiße Farbe mit der Opazität 0,8. Ordnung, also all diese Abschnitte sind angepasst und jetzt müssen wir uns um die Navigationsleiste kümmern Ich werde wieder größer werden. Nehmen wir also den Code vom vorherigen Breakpoint. Eigentlich werde ich die Breite und die Positionen für das Napa- und das Menüsymbol ändern Positionen für das Napa- und das Menüsymbol Machen wir es auf vier bis zur Breite des Viewports. Was die Elemente dieses Abschnitts angeht, wollen wir sie nicht mehr drehen. Setzen wir die let-Position also auf Null. Was die Rotationsfunktion angeht, setzen wir ihren Wert auf Null. In Ordnung, das war's also mit diesem Breakpoint. Lassen Sie uns weitermachen und den letzten erstellen , der 400 Pixel groß sein wird. Lassen Sie uns eine neue CSS-Medienabfrage erstellen und die maximale Breite angeben. Mach 400 Pixel draus. An diesem Breakpoint werde ich die Schriftgröße des HTML-Elements verringern die Schriftgröße des HTML-Elements Machen wir 40 Prozent draus. Und schließlich verringern wir die Breite des Copyright-Textes. Machen wir 2% draus. In Ordnung, also endlich sind wir fertig. Das Projekt reagiert auf verschiedene Bildschirmgrößen, und wir haben die Arbeit daran abgeschlossen 65. Projekt 7 - Projektvorschau: Ordnung, es ist an der Zeit, weiterzumachen und mit dem Bau des nächsten Projekts zu beginnen, das eines der größten sein wird Bevor wir uns eingehender mit unserem Projekt befassen und mit der Erstellung beginnen , wollen wir es wie üblich unserem Projekt befassen und mit der Erstellung beginnen , wollen wir es beschreiben. Wenn ich also die Seite neu lade, kommen wir dieser Maler für ein paar Sekunden anzeigt Danach wird das Projekt geladen. Das erste, was Sie hier sehen, ist eine Landingpage mit einem animierten Banner und dem Menüsymbol. Sobald das Projekt angezeigt wird, bewegt sich das Banner von unten bietet einen schönen und reibungslosen Übergang. Außerdem haben wir hier einen animierten Vollbild-Hintergrund Der Maßstab des Bildes nimmt mit einem Übergang ab. Okay, wie gesagt, wir haben hier das Menüsymbol, das der oberen rechten Ecke befindet Wenn ich darauf klicke, wird die Seitenleiste von der rechten Seite angezeigt Auch das Menü-Icon wird sich in ein X verwandeln. Die Navigation wird einfach sein, aber wir haben hier einen schönen und coolen Effekt. Wenn ich den Mauszeiger über die Navigationselemente bewege, ändern sie ihre Farbe von links nach rechts Außerdem haben wir hier ein paar Social-Media-Symbole am Ende von Decidable mit einigen Horroreffekten Wenn ich den Mauszeiger über die Schaltfläche zum Schließen von X bewege, wird der Tooltip mit einem Text zum Schließen angezeigt Und wenn ich auf das X klicke, wird die Seitenleiste geschlossen Okay, schauen wir uns die Kreditvergabe und die Seitenleiste an. Gehen wir zum nächsten Abschnitt über, dem es um uns geht. Wir haben hier die Überschrift mit einer Unterstreichung gefolgt von einigen Texten und Symbolen In der Mitte dieses Abschnitts haben wir ein kleines Bild des Hauses. Dieser Abschnitt wird auf der Grundlage des CSS-Layoutmoduls CSS-Grid erstellt . Als nächstes kommt der Code-Abschnitt. Wir haben hier drei Karten mit einem schönen und coolen Schwebeeffekt Es wird mit einem der JavaScript-Plugins namens tilde dot js erstellt der JavaScript-Plugins namens tilde dot js So können Sie lernen, wie Sie diese Plug-ins verwenden. Nach dem Kartenabschnitt werden wir den Kontaktbereich erstellen. Wie Sie sehen können, haben wir hier das Hintergrundbild auf der linken Seite dieser Box. Was die rechte Seite betrifft, gibt es ein paar Elemente. Ich habe die Überschriften, mehrere Eingaben und die Schaltfläche Senden erstellt, wobei jedes der Eingabefelder als Bezeichnung dient Und wenn ich den Input fokussiere wird das Label mit einem gewissen Übergang nach oben verschoben. Dieser Effekt ist sehr beliebt und wird heute häufig verwendet. So können Sie lernen, wie man es erstellt. Direkt nach dem Kontaktbereich werden wir diese einfache Fußzeile erstellen, in der wir den Copyright-Text und einige Social-Media-Symbole haben den Copyright-Text und einige Social-Media-Symbole Die letzte Sache, die ich hier erwähnen möchte, ist diese feste gelbe Schaltfläche mit dem Aufwärtspfeil. Wenn ich darauf klicke, scrollt die Seite sanft nach oben rechts. Das Projekt wird also auf alle verschiedenen Bildschirmgrößen reagieren. Wenn ich die Seite untersuche, wechsle ich in den responsiven Modus und überprüfe das Projekt auf verschiedenen Bildschirmgrößen. Dann werden Sie feststellen, dass es ansprechend ist und gut aussieht. Wie immer. Ich möchte dich an eine Sache erinnern. Das Projekt basiert auf dem Desktop-First-Ansatz, und wir haben es auf der größeren Bildschirmgröße erstellt. Ich habe die Bildschirmgröße mit Fahrzeugen aus den 1920er Jahren der Breite und zehn AD großer Höhenquelle Wenn Sie also eine relativ kleinere Bildschirmgröße verwenden, sieht das Projekt während der Vorlesungen möglicherweise nicht gut aus, aber das ist kein Problem. Irgendwann werden wir es responsiv machen. In der Zwischenzeit können Sie den Responsive-Modus verwenden und die Breite auf 1920 Pixel und die Höhe auf Pixel einstellen und so arbeiten 66. Projekt 7 - Erstelle und passe die Landingpage an: In Ordnung, ich denke, wir sind startklar. Lass uns anfangen. Ich habe auf dem Desktop einen neuen Ordner namens Architect Website erstellt , in dem ich einen weiteren Ordner für die Bilder habe. Lassen Sie uns weitermachen und den Ordner im VS-Code öffnen. Ich werde drei verschiedene Dateien für HTML, CSS und JavaScript erstellen . Nennen wir sie HTML-Index, dann style.css und script.js. Als Nächstes füge ich das grundlegende HTML-Dokument in die Datei index.html ein. Lass uns meinen benutzen. Wir müssen hier ein Ausrufezeichen platzieren und dann die Eingabetaste oder die Tabulatortaste drücken. Also los geht's. In Ordnung, das grundlegende HTML-Dokument ist fertig. Es ist Zeit, das Projekt im Browser auszuführen. Um das zu tun, werde ich eines der VS-Codepakete namens Live Server verwenden . Dieses Paket und auch, um das Projekt im Browser laufen zu lassen und Änderungen oder Aktualisierungen vorzunehmen, ohne die Seite jedes Mal neu zu laden Daher empfehle ich, dieses Paket zu installieren und zu verwenden. Okay, das Projekt läuft also. Wir müssen noch ein paar Dinge einrichten. Lassen Sie uns zunächst diese drei Dateien verknüpfen. Ich öffne den Link-Tag. Dann gebe ich in den h-Referenzattributen den Pfad der CSS-Datei an. Was das JavaScript angeht, öffnen wir ein Script-Tag direkt über dem abschließenden Body-Tag und im Quellattribut, um den Pfad der Skriptdatei anzugeben. Außerdem ändern wir den Titel. Ich füge Ihre Architekten-Website ein. In Ordnung, also sind alle drei Dateien miteinander verbunden. Und als nächstes werde ich ein paar Links einfügen. Während des gesamten Projekts. Ich werde einige Schriftarten, Awesome-Icons und auch ein paar Google-Schriftarten verwenden . Kümmern wir uns zuerst um den Link Font Awesome. Ich suche nach Font Awesome, CDN, js. Gehen wir zu diesem Link. Wählen Sie CSS aus und holen Sie sich den Link. Ich öffne hier ein Link-Tag und füge den Link als Wert des h-Referenzattributs ein. Richtig? Danach suche ich nach Google-Schriftarten. Das ist also die Google Fonts-Website. Insgesamt werde ich drei verschiedene Schriftarten verwenden. Suchen wir nach Lu dA2 und wählen einige dieser verschiedenen Stile Als nächstes brauchen wir Josephine Slab. Ich werde hier auch ein paar Stile auswählen. Und schließlich suche nach einem Film. Dann nehme ich den Link und füge ihn in das Hauptelement ein. In Ordnung, ich denke, wir sind startklar. Ich werde das Projekt Abschnitt für Abschnitt erstellen. Zuerst bereiten wir die HTML-Markups vor und schreiben dann etwas CSS Schauen wir uns das fertige Projekt an. Der erste Teil unseres Projekts, der erstellt werden wird, ist also ein Header. Es hat das Banner mit einer Überschrift, einem Absatz und einer Schaltfläche. Sobald wir die Seite neu geladen haben. Und der Spinner ist fertig geladen, dann erscheint das Banner mit einer schönen Animation Außerdem haben wir hier ein Vollbildbild, das gewissen Animationseffekt hat. Außerdem werde ich ein Menüsymbol erstellen. Technisch gesehen ist es kein Teil des Headers. Es hat eine feste Position. Aber wie dem auch sei, ich werde es erstellen. In Ordnung, genug zum Reden, lass uns anfangen. Ich öffne ein div-Tag, das der Container sein wird. Als Nächstes öffnen wir das HTML5-Header-Tag. Mit einem Klassenheader. Der Header wird aus zwei Hauptteilen bestehen. Das erste wird das Bild sein. Was den zweiten Teil betrifft, sollte es das Banner sein. Ich werde das div-Tag mit dem IMG-Wrapper der Klasse öffnen. Es wird die Hülle des Bildes sein. Und dann öffnen wir in diesem div-Element das Image-Tag und die Quellattribute. Ich werde den Pfad des Bildes angeben. Wir benötigen bydot JPG aus dem Bilderordner. Okay, als nächstes werden wir ein Banner haben. Es ist also ein offenes Div-Tag mit dem Klassenbanner. Es wird aus drei verschiedenen Elementen bestehen. Die erste besteht aus H1-Überschriftenelementen mit Text, Architektur und Innenarchitektur Als nächstes haben wir einen Absatz mit etwas Blindtext und auch eine Schaltfläche mit einer Steuer-Discover Now Okay, hier haben wir den Header mit seinen Elementen. Als Nächstes erstelle ich das Markup für das Menüsymbol. Öffnen wir also den Div-Tag mit einem erstklassigen Hamburger-Menü. Die Linien des Symbols werden also mit Div-Elementen dargestellt. Öffnen wir das div-Tag mit der Klassenzeile, die der allgemeine Klassenname sein wird. Aber abgesehen davon brauchen wir hier die erste Zeile für ein bisschen individualistisches Styling Dann duplizieren Sie diese Codezeile zweimal und ändern Sie die Klassennamen. Wir brauchen Zeile zwei und Zeile drei. Ordnung, das war's also mit dem HTML-Markup für den Jetzt ist es an der Zeit, etwas CSS zu schreiben. Zunächst werde ich einige Reset- und gängige Styles interviewen . Lassen Sie uns den Standardrand und den Abstand für alle Elemente loswerden und den Abstand für alle Elemente Um jedes Element auszuwählen, müssen wir ein Sternchen verwenden und dann Rand und den Abstand auf Null setzen. Außerdem werde ich die Standardkontur der Elemente entfernen . Wir müssen keine skizzieren. Lassen Sie uns außerdem die Boxgröße und die Border-Box festlegen. Als Nächstes werde ich die Standardstile loswerden. Für die Liste. Ich meine, wir brauchen keine im Listenstil Und ich werde auch die Standardstile für die Link-Elemente loswerden . Lassen Sie uns Ihre Textdekoration weitergeben. Keine. Okay, wie Sie sehen können, werden in diesem Projekt alle gängigen und zurückgesetzten Stile angewendet Ich werde RAM als Maßeinheit verwenden Derzeit entspricht ein RAM 16 Pixeln, da die Schriftgröße des HTML-Elements standardmäßig die Schriftgröße des HTML-Elements standardmäßig 16 Pixeln entspricht. Ich möchte ein RAM in zehn Pixel umwandeln, weil ich denke, dass dies bequemer und einfacher zu berechnen ist. Dazu müssen wir die Schriftgröße des HTML-Elements verringern. Machen wir 62,5 Prozent draus. Jetzt entspricht ein RAM zehn Pixeln. Sie können sehen, dass die Größe der Elemente abgenommen hat. Lassen Sie uns weitermachen und den Header anpassen. Wählen wir es aus. Zunächst definiere ich seine Breite und Höhe. Das setzte mit 200 Prozent als wahrscheinlicher Höhe fest. Ich werde es auf eine Viewport-Höhe von 100 erhöhen. Das bedeutet, dass wir die Höhe des Headers auf 200% des Viewports festlegen des Headers auf 200% des Viewports Als Nächstes kümmere ich mich um das Bild. Wählen wir den Wrapper aus und legen Breite und Höhe fest, jeweils 200 Prozent Außerdem definiere ich die Hintergrundfarbe, damit das Bild gut aussieht. Lassen Sie uns Ihren RGBA-Wert mit schwarzer Farbe und mit einer Opazität von 0,8 verwenden mit schwarzer Farbe und mit einer Opazität Schließlich werde ich das Bild selbst anpassen. Wählen wir es also aus. Stellen Sie dann Breite und Höhe ein, beide zu 200 Prozent. Außerdem benötigen wir hier eine Objektabdeckung für die Füße , um die Bildqualität zu erhalten. Und schließlich werde ich die Opazität verringern. Machen wir 0,5 draus. Wie Sie sehen können, sieht das Bild gut aus. Wir haben hier keine Scrollbalken mehr, und jetzt ist es an der Zeit, das Banner anzupassen. Zunächst ändere ich die Position des Banners. Wählen wir es aus und setzen die Position auf absolut. Um die Position des Banners anhand des Headers zu definieren , der sein übergeordnetes Element ist. Wir müssen die Position des Headers auf einen Relativen setzen. Dann mache ich die oberste Position des Banners zu 30% S für Position. Machen wir 15 Prozent draus. Das Banner ist also positioniert und jetzt werde ich seine Elemente anpassen. Fangen wir mit der Überschrift an. Wählen wir es aus. Zuallererst werde ich diese Schriftfamilie definieren. Verwenden wir eine Schrift namens bellow dA2, die Schriftgruppe Dann werde ich die Schriftgröße erhöhen. Machen wir acht RAM draus. Ebenfalls. Ich werde die Schrift mit der Schriftstärke 300 etwas leichter machen mit der Schriftstärke 300 etwas leichter Und dann ändere die Farbe, mache es weiß. Die Überschrift sieht also gut aus. Ich werde die Breite verringern, um es in zwei verschiedene Linien zu unterteilen. Machen wir die Breite auf 50 Prozent Außerdem müssen wir die Zeilenhöhe verringern, da zwischen den Linien zwei große Zwischenräume sind. Also lass uns die Zeilenhöhe neun laufen lassen. Okay? Jetzt sieht es viel besser aus. Fügen wir hier ein paar weitere Stile hinzu. Ich werde etwas Abstand zwischen Buchstaben schaffen , indem ich den Buchstabenabstand vom Punkt zum RAM verwende. Und erzeugen Sie auch einen kleinen Schatteneffekt indem Sie Textschatten mit den Werten 0,3, 0,5 RAM und RGBA mit schwarzer Farbe und einer Opazität In Ordnung, das war's mit dem Überschriftenelement. Gehen wir zum Absatz über. Wählen wir es aus. Ich werde die Schriftfamilie auf Josephine Slab Serif setzen. Diese vergrößerte Schriftgröße macht sie fremd und verändert die Farbe. Mach es weiß. In Ordnung, als Nächstes werde ich auch die Breite des Absatzes verringern Machen wir 70% draus. Und schaffen Sie auch etwas Abstand zwischen den Buchstaben indem Sie den seitlichen Abstand mit dem Wert 0,1 ran verwenden. Danach lassen Sie uns am Ende des Absatzes etwas Platz schaffen und ihm auch etwas Schatten hinzufügen. Also brauchen wir Margin Bottom mit einem Wert von drei rem. Und auch Textschatten. Der Wert ist 0,3, 0,5 Rampe und RGBA mit schwarzer Farbe und einer Opazität Das war's mit dem Absatz. Gehen wir nach unten über. Wählen wir es aus. Und zunächst definiere ich seine Breite und Höhe. Fangen wir mit 225 RAM an. Was die Höhe angeht, werde ich sieben Rennen draus machen. Und ändere auch die Hintergrundfarbe. Ich werde hier Farbe verwenden, siehe 29525. Okay, lass uns weitermachen und einige weitere Sterne am unteren Rand hinzufügen . Ich werde die Standardgrenze loswerden. Verwenden wir border none. Ändern Sie auch die Schriftfamilie. In diesem Fall verwende ich eine Schrift namens Molly. Erhöhen Sie dann die Knochengröße und bringen Sie es zu Ram. Verwandeln Sie auch Text in Großbuchstaben und ändern Sie die Farbe. Mach es weiß. Okay, also Schritt für Schritt, der Ballon wird viel schöner Ich werde ein paar Schatteneffekte hinzufügen. Verwenden wir zunächst einen Textschatten mit einem Wert von 0,2 RAM, Punkt für RAM. Und das RGBA mit schwarzer Farbe und der Opazität zeigt auf, Lass uns diese Codezeile duplizieren, Textschatten in Boxschatten umwandeln Außerdem benötigen wir statt 0,2 0,3, dann 0,5 und die Opazität 0,4 Und schließlich legen wir den Typ des Cursorzeigers fest. Okay, das war's also damit, der Batson ist maßgeschneidert und ich finde ihn ziemlich nett Als Nächstes werde ich das Menüsymbol gestalten. Und danach kümmern wir uns um die Animation. Wählen wir also das Hamburger-Menü aus und definieren dessen Breite und Höhe. Ich werde beiden 23 RAM einrichten. Und verwenden Sie auch den temporären Hintergrund von Hear. Lass es uns rot machen. Wir müssen uns also um die Position des Symbols kümmern. Es wird in der oberen rechten Ecke der Seite platziert . Also setze ich die Position des Symbols auf Fest. Und dann definiere die oberen und rechten Eigenschaften. Ich werde beide auf fünf Durchläufe einstellen. Das Symbol ist positioniert. Wie Sie sehen können, ist es nicht ganz sichtbar. Lassen Sie uns das mit der Z-Index-Eigenschaft beheben. Und ich werde auch die Linien sichtbar machen. Verwenden wir hier also Z-Index mit einem höheren Wert, sagen wir 200. Wählen Sie dann Zeile aus. Wie Sie wissen, ist das für alle Leitungen üblich und teuer. Definieren wir also zunächst Breite und Höhe. Ich werde mit 200 Prozent beginnen. Was die Höhe angeht, lassen Sie uns darauf achten, zu rennen. Ändere dich auch. Hintergrundfarbe ist hier, weiß Und dann benutze Box Shadow mit den Werten 0.1 RAM als zeige auf RAM. Und der RGBA mit drei Nullen und einer Opazität von 0,2. Okay, jetzt sind die Linien sichtbar, aber sie sind übereinander gelegt Wir brauchen etwas Platz zwischen ihnen. Und ich werde es mit Flexbox erstellen. Lassen Sie uns also das Hamburger-Menü zu einem flexiblen Behälter machen. Dann müssen wir die Biegerichtung ändern. Machen wir es zu einer Kolumne. Um einen gleichmäßigen Abstand zwischen den Zeilen zu schaffen, verwenden wir den Inhalt ausrichten, wobei die Werte gleichmäßig verteilt sind Ändern Sie dann den Typ des Cursorzeigers. Und ich werde auch die rote Hintergrundfarbe loswerden . In Ordnung, mit dem Menüsymbol sind wir fertig. Es ist maßgeschneidert und sieht gut aus. Nun, wie gesagt, werde ich einige Animationen erstellen. Ich beginne mit der Vollbildanimation. Es wird ziemlich einfach sein. Ich werde den Maßstab des Bildes vergrößern und ihn dann während der Animation verkleinern. Also werde ich CSS-Keyframes als Namen der Animation erstellen CSS-Keyframes als Namen der Animation Verwenden wir die Skala. Insgesamt werden wir also zwei Schritte haben, Startpunkt und den Endpunkt. Wir werden den Maßstab des Bildes auf 1,3 erhöhen und ihn während der Animation auf eins verkleinern. Bei Null Prozent müssen wir also mit der Skalenfunktion transformieren. Ich füge hier 1.3 ein. Und all die hundert Prozent. Wir müssen den Wert Eins erneut transformieren, skalieren. Die Animation ist also fertig. Wir müssen es nur auf das Bild anwenden. Dafür müssen wir ein paar Animationseigenschaften verwenden . Ich meine den Namen der Animation und die Dauer der Animation. Als Namen der Animation müssen wir also eine Skala verwenden. Was die Dauer der Animation angeht. Machen wir 25 s. Wir haben hier zwei verschiedene Eigenschaften verwendet, aber eigentlich können wir hier nur die Animationseigenschaft verwenden. Und vermeiden Sie es, ein paar verschiedene Eigenschaften zu schreiben. Wir müssen hier den Namen der Animation angeben, gefolgt von der Dauer, 25 s. Wie Sie sehen können, funktioniert die Animation. Der Maßstab des Bildes nimmt ab. Aber wir haben hier ein kleines Problem. Möchte, dass der Maßstab des Bildes vergrößert wird. Wir sehen hier diese Scrollbalken. Und um das zu beheben, mussten wir overflow hidden verwenden und es dem Image-Wrapper zuweisen Nun wird geprüft, das Problem ist behoben. In Ordnung, die erste Animation funktioniert also einwandfrei. Gehen wir zum zweiten über. Ich werde das Banner animieren. Es sollte sich von unten bewegen, will die Seite ist geladen. Also werde ich weitere CSS-Keyframes erstellen. Nennen wir es bewegtes Banner. Wie in der vorherigen Animation werden wir zwei Schritte an einem Ausgangspunkt haben. Ich werde die Elemente nach unten bewegen und sie auch ein wenig drehen. Während der Animation erscheinen sie dann von unten und drehen sich zurück. Lassen Sie uns zunächst alle drei Bannerelemente standardmäßig ausblenden . Verwenden wir Opazität Null. Tatsächlich wird der Rotationseffekt ein 3D-Effekt sein. Wir müssen also eine 3D-Umgebung erstellen. Und dafür müssen wir eine dieser CSS-Eigenschaften namens Perspective verwenden . Ich werde es dem Header zuweisen. Machen wir hundert Dram draus und fügen dann den Keyframes einige Styles hinzu Bei Null Prozent müssen wir uns also transformieren. Mit der Funktion „Y übersetzen“. Es bewegt die Elemente entsprechend der Y-Achse. Fügen wir hier für 2M ein. Außerdem müssen wir y drehen. Dadurch werden Elemente sowohl um die Y-Achse als auch im vergangenen Jahr um -20 Grad gedreht die Y-Achse als auch im vergangenen Jahr um -20 Zu hundert Prozent. Wir müssen beide Funktionen auf Null setzen. Also müssen wir Y transformieren, Y Null übersetzen und auch y Null drehen. Außerdem müssen wir die Elemente mit Opazität One sichtbar machen die Elemente mit Opazität One sichtbar Okay, die Keyframes sind also bereit. Jetzt müssen wir die Animationseigenschaften für jedes Bannerelement definieren . Sie sollten denselben Namen und dieselbe Dauer haben, aber eine andere Verzögerungszeit haben. Ordnen wir also allen drei Elementen zu. Eigenschaft „Animation“. Innerhalb eines Move-Banners. Dauer wird 1 s betragen. Und danach definiere ich verschiedene Verzögerungszeiten für die Überschrift, definiere ich verschiedene Verzögerungszeiten wir benötigen 0,5 s. Dann verwende ich für den Absatz 0,7 s. Was die Schaltfläche betrifft, lassen Sie uns die Verzögerungszeit auf 0,9 s festlegen. Ordnung? Wie Sie sehen können, sind die Elemente standardmäßig ausgeblendet. Wenn ich die Seite neu lade , werden sie von unten angezeigt Sobald die Animation beendet ist und die Elemente wieder verschwinden. Auch während der Animation sehen wir den Scrollbalken. Also müssen wir diese Probleme beheben. Sobald die Animation abgeschlossen ist, sollten die Bannerelemente diese Kacheln aus dem zweiten Schritt der Keyframes beibehalten aus dem zweiten Schritt der Keyframes Ich meine Funktionen zum Übersetzen und Drehen mit Nullwerten und Opazität eins Um das zu erreichen, können wir zu diesen Werten einen zusätzlichen Wert hinzufügen , der als vorwärts bezeichnet wird Es gehört zur Eigenschaft Animationsfilmmodus. Und um diese Scrollleiste loszuwerden, müssen wir Overflow Hidden verwenden In Ordnung, jetzt funktioniert alles perfekt. Und mit einem Header sind wir fertig 67. Projekt 7 - Seitenleiste erstellen und arbeiten: Lassen Sie uns weitermachen und mit der Arbeit am nächsten Teil der Projekte beginnen . Ich werde die Seitenleiste erstellen und auch dafür sorgen, dass das Hamburger-Menü funktioniert Schauen wir uns das fertige Projekt an. Sobald ich also auf das Menüsymbol klicke, wird die Seitenleiste, die wir anzeigen , von rechts nach links verschoben Wir haben hier ein paar Menüpunkte. Wenn ich mit der Maus über sie fahre, ändern sie ihre Farbe schön Außerdem haben wir hier unten in der Seitenleiste mehrere Social-Media-Symbole unten in der Seitenleiste Wenn ich den Mauszeiger über die Schaltfläche zum Schließen von X bewege, erscheint ein kleiner Tooltip, während der Text geschlossen Und wenn ich auf das X, die Seitenleiste, klicke , schließen wir Das ist das, was wir in diesem Teil erstellen werden. Lassen Sie uns zunächst das HTML-Markup erstellen. Ich öffne den Abschnitt-Tag direkt nach dem Header. Weisen wir ihr die Klassen-Sidebar zu. Die Seitenleiste wird aus zwei verschiedenen Teilen bestehen. Wir werden die Navigationspunkte und einige Social-Media-Symbole haben. Öffnen wir also das UL-Element mit dem Klassenmenü. Dann benötigen wir ein LI-Element mit einem Klassennamen-Menüpunkt, gefolgt von den Link-Elementen, die einen Klassenmenü-Link haben sollten. Und als ersten Menüpunkt füge ich hier Home ein. Insgesamt werden wir also fünf verschiedene Menüpunkte haben. Lassen Sie uns also das LI-Element viermal duplizieren und den Inhalt ändern. In der zweiten geht es um uns. Dann werden wir die Preise und Kontexte für das Team haben. Wie Sie hier sehen können, haben wir die Links. Als Nächstes fügen wir der Seitenleiste einige Social-Media-Symbole hinzu Ich werde das Div-Element mit einer Klasse öffnen, Social Media. Dann übergebe ich Ihre Link-Elemente, zu denen Font und Awesome Icon gehören. Das erste wird Facebook sein. Also brauchen wir hier die Klasse FAB, a, Facebook, F. Lass uns das Link-Element zweimal duplizieren. Und um die Klassennamen zu ändern, brauchen wir hier, FAB, FAA, Instagram Und der dritte wird f a b, f ein Hochtöner sein. In Ordnung, mit dem HTML-Markup sind wir fertig. Lassen Sie uns anfangen , die Seitenleiste anzupassen. Ich wähle es aus und definiere seine Breite und Höhe. Lassen Sie uns die Breite für zwei RAM festlegen. Was die Höhe angeht, so wird es hundert Viewport-Höhe sein Außerdem werde ich die Position definieren , die festgelegt werden soll. Und dann müssen wir Immobilien nach oben und nach rechts korrigieren. Beide sind gleich Null. In Ordnung? Die Seitenleiste ist also richtig platziert . Und um es besser zu sehen, ändern wir die Hintergrundfarbe. Verwenden wir hier weiße Farbe. Okay, lassen Sie uns weitermachen und mit der Anpassung der Menüelemente beginnen. Ich wähle das Menü selbst und positioniere es irgendwo in der Mitte der Seitenleiste Definieren wir also seine Position, machen wir sie absolut. Dann setzen Sie die Spitzeneigenschaft auf 40 Prozent fest. Als nächstes brauchen wir einen Wert von 50 Prozent. Und um das Element in den Mittelpunkt zu stellen, verwenden wir Transform, Translate und pass year -50 Prozent zweimal Das Menü ist positioniert. Als Nächstes werde ich die Artikel anpassen. Lassen Sie uns weitermachen und die LI-Elemente auswählen, die über den Menüpunkt Klasse verfügen und der Textausrichtung in der Mitte zugewiesen sind. Danach wähle ich die Links aus. Lassen Sie uns zunächst die Schriftfamilie definieren. In diesem Fall verwende ich eine Schrift mit dem Namen value dA2. Serifen. Erhöhen Sie dann die Schriftgröße und machen Sie sie für RAM. Und ändere auch die Farbe. Mach es dunkelgrau mit 555. Okay, das war's jetzt mit den Menüpunkten Lassen Sie uns weitermachen und uns um die Social Media-Symbole kümmern . Ich werde das Div-Element auswählen, das die Hülle der Symbole ist Lassen Sie uns zunächst die Position definieren und sie absolut machen. Wie Sie wissen, sollten Social-Media-Symbole am unteren Rand der Seitenleiste platziert werden Also definiere ich die untere Eigenschaft mit einem Wert von drei rem und mache auch die Breite zu hundert Prozent. Okay, als Nächstes lege ich das Auge dafür ständig in die Mitte. Verwenden wir Flexbox. Wir brauchen Display Flex und Justify Content Center. In Ordnung, lassen Sie uns weitermachen und die Symbole anpassen. Ich wähle Elemente aus. Lassen Sie uns zunächst die Schriftgröße erhöhen und sie so gestalten, dass sie auf RAM zeigt. Und Marge schaffen. Drei rannten davon. Danach definieren wir die Breite und Höhe. Ich werde beide auf 4,5 RAM einstellen. Ändern Sie auch die Hintergrundfarbe. Mach es dunkelgrau mit 777. Und dann ändere die Farbe. Machen Sie die Symbole weiß. Also werde ich die Symbole in der Mitte dieser Felder platzieren . Und wir werden die Boxen auch zu Kreisen machen. Um die Symbole zu zentrieren. Ich werde Flexbox verwenden. Lassen Sie uns Display Flex verwenden und dann Content Center rechtfertigen. Und richten Sie die Artikel in der Mitte aus. Was die Herstellung von Kästchen betrifft, Kreise als Randradius mit dem Wert 50% Okay? Die Icons sehen also gut aus. Und das Letzte, was ich in Bezug auf sie tun möchte , ist, einen einfachen Schwebeeffekt zu erzeugen Ich werde die Hintergrundfarbe ändern, wenn Sie mit der Maus darüber fahren. Lassen Sie uns also weitermachen und Elemente mit dem Mauszeiger auswählen und die Hintergrundfarbe ändern Ich werde die Farbe C2 9525 verwenden. Außerdem benötigen wir Übergangswerte, Hintergrundfarbe und 0,3 s. Ordnung, mit den Social-Media-Icons sind wir fertig Gehen wir zurück zu den Menüpunkten und erstellen. Der Hover-Effekt wird ein anderer sein. Es wird nicht dieser einfache Mauszeiger sein , den wir vor einer Minute benutzt haben. Sobald wir den Mauszeiger über die Elemente bewegen, sollten sie die Farbe von links nach rechts ändern Lassen Sie mich erklären, was wir tun werden. Wir werden die vorherigen Pseudoelemente für jeden Menüpunkt mit genau demselben Inhalt, aber mit einer anderen Farbe erstellen jeden Menüpunkt mit genau demselben Inhalt, aber mit einer anderen Farbe Zum Beispiel wird das Zuhause das vorherige Pseudoelement mit dem Text Home About Us will have about us usw. Sie werden auf den eigentlichen Menüpunkten platziert, haben aber die Breite von Null Pixeln. Sobald wir den Mauszeiger über die Elemente bewegen, wird die Breite des vorherigen Pseudoelements auf 100 Prozent erhöht Und es wird den Farbwechseleffekt erzeugen. Okay, lass uns den Code schreiben und es wird klarer Wählen wir es vor Pseudoelementen aus. Das erste, was wir tun müssen, ist den Inhalt zu definieren. Wie gesagt, jedes Pseudoelement wird den gleichen Inhalt haben Wir können also entweder die Pseudoelemente für alle Menülinks separat mit dem n-ten Child-Selektor auswählen Menülinks separat mit dem n-ten Child-Selektor Oder wir können einen kleinen Trick anwenden. Ich werde allen Menülinks das Attribut Dateninhalt zuweisen . Dann spezifiziere ich den Inhalt für jeden Menü-Link separat. Für den ersten brauchen wir WHO. Dann über uns? Dann brauchen wir ein Team. Preise und Kontakt. müssen wir der Inhaltseigenschaft nur noch eine Funktion namens Attribut zuweisen , die als TTR ausgedrückt wird Und wir müssen hier den Attributnamen angeben, der Dateninhalt ist. In Ordnung? Danach definiere ich die Position. Machen wir es absolut. Wir benötigen die relative Position für den Menülink, da es sich um die übergeordneten Elemente handelt. Und wir müssen uns vor dem Pseudoelement entsprechend dem Menü-Link positionieren Pseudoelement entsprechend dem Menü-Link Danach definieren wir die Eigenschaften oben und links. Wir müssen beide auf Null setzen und die Farbe It ändern , C2 9525 Ordnung, also was wir hier sehen, sind die vorherigen Pseudoelemente Jetzt setze ich die Breite standardmäßig auf Null und erhöhe sie beim Zeigen mit der Maus um 200 Prozent Im Moment sind die vorherigen Pseudoelemente also immer noch sichtbar Und auch der zweite Punkt ist zweizeilig unterbrochen. Um diese Probleme zu beheben, müssen wir overflow hidden verwenden, wodurch es vor Pseudoelementen ausgeblendet wird Und um Textumbrüche zu vermeiden, benötigen wir Leerzeichen mit dem Wert no rep. In Ordnung, jetzt sind wir bereit zu gehen Verwenden wir den Hover-Effekt. Ich wähle den Menülink mit dem Mauszeiger aus, gefolgt von den vorherigen Pseudoelementen Und wir müssen mit hundert Prozent machen. Außerdem werde ich Transition mit den Werten Breite 0,3 s verwenden . Außerdem verwende ich eine der Übergangs-Timing-Funktionen namens Ease In, Out. Wie Sie sehen können, funktioniert der Hover perfekt und es entsteht ein wirklich netter und cooler Effekt In Ordnung, mit den Menüpunkten sind wir fertig. Als nächstes müssen wir dafür sorgen, dass das Hamburger-Menü funktioniert. Ich werde diese Seitenleiste standardmäßig ausblenden und einblenden, sobald wir auf das Menüsymbol klicken Außerdem müssen wir die Linien in X umwandeln und den Tooltip anzeigen, sobald wir den Mauszeiger über das X bewegen. Zunächst werde ich es schaffen , die Seitenleiste einzublenden und auszublenden Und das werden wir mit ein bisschen JavaScript tun. Also werden wir eine neue Klasse und ein neues CSS namens Change erstellen, die einige Stile für die Seitenleiste enthalten werden Wir fügen diesen Klassennamen zum Container hinzu, wenn wir auf das Menüsymbol klicken. Gehen wir also zur Datei script.js und wählen zunächst das Menüsymbol aus. Ich werde das mit der Abfrageauswahlmethode tun. Wir müssen hier den Klassennamen angeben, das ist Hamburger-Menü. Als Nächstes müssen wir den Event-Listener mit der Methode add event listener an die Elemente anhängen Event-Listener mit der Methode add event listener an die Elemente , die zwei Argumente benötigt Die erste wird die Art der Veranstaltung sein. Klick. Das zweite Argument wird die Pfeilfunktion sein, die ausgeführt wird, sobald wir auf die Elemente klicken. Danach müssen wir den Container auswählen. Lassen Sie uns erneut die Abfrageauswahlmethode verwenden und Ihren Klassennamencontainer übergeben Also noch einmal, wir müssen die Klasse dem Container hinzufügen , wenn wir auf das Symbol klicken, und dann müssen wir sie beim nächsten Klick entfernen. Wir müssen also eine Umschaltmethode verwenden. Zuerst werde ich hier die Klassenlisteneigenschaft verwenden. Diese Eigenschaft gibt alle Klassen zurück , die das Element besitzt. Als Nächstes müssen wir eine Methode namens Toggle anhängen. Und wir müssen hier den Klassennamen angeben. Veränderung. In Ordnung, das war's also mit dem JavaScript. Gehen wir zurück zu CSS. Ich werde die Seitenleiste standardmäßig ausblenden. Lassen Sie uns dafür die richtige Position ändern. Moment ist es gleich Null und wir brauchen hier -40 Rampen, weil die Breite der Seitenleiste 40 entspricht Rann. Danach müssen wir einen Klassenwechsel auswählen, gefolgt von der Seitenleiste Wir müssen die richtige Position auf Null setzen. Lassen Sie uns abschließend den Übergang mit den Werten rechts und 0,5 s verwenden den Werten rechts und 0,5 . Wenn ich also auf das Symbol klicke, wird die Seitenleiste mit einem glatten Übergang angezeigt und sie wird geschlossen, sobald wir erneut auf das Eigen klicken Ordnung, die Seitenleiste bewegt sich, aber das Menüsymbol ändert sich nicht Wie Sie wissen, mussten wir es in x umwandeln. Aber vorher werde ich dafür sorgen, dass sich das Menüsymbol beim Klicken bewegt. Ich meine, es sollte sich in die gleiche Richtung bewegen wie die Seitenleiste. Auch dafür müssen wir einen neuen Klassenwechsel vornehmen, gefolgt vom Hamburger-Menü. Und ich werde die richtige Position ändern. Machen wir die 33. Rampe draus. Verwenden Sie auch Transition. Wir brauchen hier, oder? Und die Dauer 0,7 s wird etwas höher sein als die Dauer des Übergangs der Seitenleiste Es wird einen schönen Effekt erzeugen Stellen wir uns also vor, das Symbol bewegt sich mit einem schönen Übergang. Okay, lassen Sie uns zum Schluss weitermachen und das Symbol in x umwandeln. Wir müssen die erste und dritte Zeile transformieren Was die zweite Zeile betrifft, müssen wir sie zuerst verstecken. Lassen Sie uns die Hintergrundfarbe ändern, da die Seitenleiste einen weißen Hintergrund hat und das Symbol nicht ganz sichtbar ist Ich werde die Zeile noch einmal auswählen, weil wir irgendwann den Klassenwechsel hinzufügen werden. Lassen Sie uns also die Hintergrundfarbe ändern. Ich werde hier den RGBA-Wert mit einer schwarzen Farbe und einer Opazität von 0,8 verwenden RGBA-Wert mit einer schwarzen Farbe und einer Opazität von 0,8 Dann wähle ich die Zeilen mit den einzelnen Klassennamen aus. Wählen wir die erste Zeile aus. Sobald wir auf das Symbol klicken, sollte sich die erste Zeile drehen und sich ebenfalls leicht in beide Richtungen bewegen Ich bin auf der X- und Y-Achse. Wir müssen also mit der Rotationsfunktion transformieren. Ich werde Linien um 45 Grad drehen. Was die Übersetzungsfunktion angeht, übergebe ich hier 0,3 RAM und dann 0,8 Rampe. Wie gesagt, die zweite Zeile wird versteckt. Wählen wir es also aus und weisen ihm die Opazität Null und die Sichtbarkeit ausgeblendet Okay, das war's mit der zweiten Zeile. Als nächstes haben wir Zeile drei. Ich kopiere diesen Code von hier. Lassen Sie uns den Klassennamen ändern. Wir brauchen Zeile drei. Und wir brauchen auch -45 Grad und -0,8 RAM. Okay? Wie Sie sehen, haben wir hier das x. Und damit es funktioniert, müssen wir zu allen drei Zeilen die Klassenänderung hinzufügen. In Ordnung, das Hamburger-Menü funktioniert also perfekt. Und eigentlich entscheiden wir , wo wir fast fertig sind. Das einzige, was ich erstellen möchte, ist der Tooltip, der angezeigt werden sollte, sobald wir den Mauszeiger über das x bewegen. Zunächst füge ich dem Hamburger-Menü ein Span-Element Lass uns deine Klamotten hineinlegen. Wie Sie gerade sehen, hat es die Linien ein wenig durcheinander gebracht Wir müssen es stylen. Lassen Sie uns also weitermachen und die Wirbelsäulenknochen auswählen. Lassen Sie uns zunächst seine Position definieren und sie absolut machen. Und dann das linke Grundstück auf fünf Ran setzen. Das Spannelement ist positioniert. Lassen Sie uns weitermachen und seine Breite und Höhe definieren. Ich setze die Breite auf zehn RAM. Was die Höhe angeht, machen wir sie für RAM und ändern auch die Hintergrundfarbe. Ich werde hier Farbe E verwenden, um 646 zu sein. Okay, als Nächstes platziere ich den Text in der Mitte und passe ihn an. Verwenden wir Flexbox. Wir brauchen Display Flex und dann Justify Content Center. Richten Sie die Elemente auch mittig aus. Lassen Sie uns die Farbe des Textes ändern und uns auch um die Schrift kümmern. Ich mache die Farbe weiß. die Schriftfamilie angeht, werde ich bellow dA2-Serif verwenden Ändern Sie dann die Schriftgröße und machen Sie 1,6 RAM daraus. Und schaffen Sie auch etwas Abstand zwischen den Buchstaben indem Sie einen Gitterabstand mit dem Wert 0,1 ran In Ordnung, der Tooltip ist fast fertig. Wir müssen einen kleinen Pfeil auf der linken Seite hinzufügen. Und ich werde es mit früheren Pseudoelementen erstellen Pseudoelementen Wählen wir also das Span-Element mit den vorherigen Pseudoelementen Lassen Sie uns den Inhalt leeren. Und definierte Position. Mach es absolut. Im Moment ist das Pseudoelement also nicht sichtbar, aber das werden wir beheben Ich werde seine Form mit Hilfe der Grenzen erstellen . Wir müssen also auf allen vier Seiten eine Grenze definieren. Fangen wir mit der linken Seite an. Wir brauchen einen linken Rand mit den Werten, die man hatte, einfarbig und transparent. Als Nächstes verwende ich Grenze, oder? Wertet ein RAM, solid, und der Aufrufer e wird auf 646 gesetzt Als Nächstes verwende ich Border Bottom. Lassen Sie uns diese Werte tatsächlich von hier abrufen und einfügen. Dann duplizieren Sie diese Codezeile und ändern Sie von unten nach oben. Jetzt ist das Element sichtbar, aber wir müssen seine Position definieren. Machen wir seine Spitzenposition zu 50 Prozent. Dann definiere ich die linke Position. Machen wir es minus zwei RAM und verwenden wir auch Transform. Übersetze y mit dem Wert -50%. In Ordnung, das war's also. Der Tooltip ist fertig. Ich werde es standardmäßig verstecken. Und sobald wir den Mauszeiger über das Symbol bewegen, sollte es angezeigt werden. Also brauchen wir hier Opazität Null, Sichtbarkeit versteckt. Dann wähle ich das Symbol mit dem Mauszeiger aus, gefolgt von diesem Span-Element Lassen Sie uns die Opazität eins und die Sichtbarkeit sichtbar machen. Und außerdem werde ich Transition mit den Werten all und 0,2 s verwenden . Ordnung, sobald wir den Mauszeiger über das Symbol bewegen, wird ein Tooltip Aber eigentlich haben wir hier ein winziges Problem. Wenn ich den Mauszeiger über das Symbol bewege, während die Seitenleiste ausgeblendet ist, wird der Tooltip trotzdem angezeigt Das brauchen wir nicht, wir müssen es anzeigen sobald das Symbol in ein X umgewandelt wurde. Und um das zu erreichen, müssen wir wieder Klassenwechsel verwenden. Okay, jetzt funktioniert alles perfekt mit dieser Seite, aber wir sind fertig 68. Projekt 7 - Erstelle und Stil über uns Abschnitt mit CSS-Grid: Es ist Zeit, mit dem nächsten Abschnitt fortzufahren , der der Abschnitt Über uns sein wird. Schauen wir uns das fertige Projekt an und sehen uns noch einmal an, was wir bauen werden Das ist also der Abschnitt Über uns. Es besteht aus einem Header, der die Überschrift, die Basisüberschrift, enthält. Dann unten haben wir ein paar Absätze mit Überschriften und einigen Font Awesome-Symbolen In der Mitte dieses Abschnitts sehen wir das Bild des Hauses. Dieser Abschnitt wird ziemlich einfach, aber gleichzeitig interessant sein , weil wir das Layout mithilfe eines CSS-Grid erstellen werden . Ordnung, lassen Sie uns anfangen, das HTML-Markup zu erstellen Ich öffne diesen Abschnitt-Tag direkt nach der Seitenleiste mit dem Klassennamen über uns Als nächstes füge ich hier den Header ein. Eigentlich werden wir den gleichen Header auch in einem anderen Abschnitt haben. Also werde ich hier einige gebräuchliche Klassennamen verwenden, sagen wir die Abschnittsüberschrift. Wie gesagt, der Header wird aus einer Überschrift und der anderen Zeile bestehen. Also werde ich H1-Überschriftenelement mit der Überschrift des Klassenabschnitts mit dem Inhalt über uns einrichten Und unten öffnen Sie das div-Tag mit der zugrunde liegenden Klasse. In Ordnung, als Nächstes müssen wir uns um die Dienstleistungen kümmern. Insgesamt werden wir sechs davon haben. Jeder Dienst besteht aus einer Überschrift, einer Schrift, einem Awesome-Symbol und dem Absatz. Zuallererst öffne ich ein div-Tag, das als Wrapper der Dienste dienen wird Öffnen Sie dann ein div-Tag für den Dienst selbst. Wir werden also in jedem Service zwei Hauptteile haben. Der erste wird der Service-Header sein, der das Font Awesome-Symbol und die Überschrift enthalten wird. Dann öffne ich darin Elemente mit den Klassennamen, FAS, Stift, Feder Als Nächstes öffne ich h3-Überschriftenelement mit dem Inhalt im Inneren Und wir brauchen auch einen Absatz mit den Texten für den Unterricht und mit etwas Blindtext In Ordnung, wie gesagt, insgesamt werden wir sechs Oberflächen haben Also werde ich diesen Code fünfmal duplizieren und die Klassennamen der I-Elemente und auch die Überschriften ändern der I-Elemente und auch die Überschriften Der zweite wird also FAS sein, ein Farbroller, der wahrscheinlich unterwegs Lass es uns draußen machen. Als nächstes haben wir FAS, einen Bleistift raus und sie leiten das Design Als nächstes folgt FASFA-Farbe, Pinseldekoration Als Nächstes werden wir FASFA-Herrscher kombinieren. Und die Überschrift wird Planung sein. Was den letzten Dienst betrifft, verwenden wir die Klasse FAR a building und die Headerausführung. In Ordnung, also hier haben wir die Dienste. Das einzige, was Sie in Bezug auf das HTML-Markup tun müssen , ist das Hinzufügen des Bilds Also öffne ich das div-Tag, das die Hülle des Images sein wird Ordnen wir der Klasse über uns den Image-Wrapper zu, der das Image-Tag selbst öffnet Im Quellattribut. Geben wir den Pfad des Bildes an. Wir benötigen House Dot PNG aus dem Bilderordner. Okay, das war's mit dem HTML-Markup. Alles ist bereit, um mit dem Schreiben des CSS zu beginnen. Wie gesagt, das Layout des größten Teils dieses Abschnitts wird kreativ sein, indem das CSS-Grid verwendet wird. Also werde ich das Projekt für eine Weile auf den Mozilla Firefox umstellen für eine Weile auf den Mozilla Firefox Denn heutzutage hat Mozilla Firefox die besten Entwicklertools für das CSS-Grid-Modul Es wird unseren Arbeitsprozess komfortabler und flexibler machen . Wenn Sie mit dem CSS-Grid-Modul nicht vertraut sind, können Sie sich unser CSS-Kurztutorial auf YouTube ansehen. Sie finden den Link in der Beschreibung. In Ordnung, lass uns weitermachen und anfangen, das CSS zu schreiben. Zunächst wähle ich die Elemente dieses Abschnitts aus. Definieren wir seine Breite. Machen Sie es zu 100 Prozent Ändern Sie auch die Hintergrundfarbe. Ich werde eine hellgraue Farbe verwenden, F5, F5. Und schaffen Sie auch unten etwas Platz, indem Sie den Boden mit einer Rampe mit dem Wert 15 polstern Okay, jetzt werde ich den Header anpassen. Wählen wir die Abschnittsüberschrift aus. Zuerst müssen wir die Elemente zentrieren. Und dafür werde ich Flexbox verwenden. Lassen Sie uns also den Abschnittsheader zu einem Flex-Container machen. Dann müssen wir die Richtung ändern . Machen wir es zu einer Kolumne. Und um flexible Artikel zu zentrieren, müssen wir die Artikel in der Mitte ausrichten. Außerdem werde ich mithilfe von Padding etwas Platz innerhalb des Headers schaffen mithilfe von Padding etwas Platz innerhalb des Headers Machen wir Padding auf den oberen sieben RAM als Null auf der rechten Seite, tan Rome unten und Null auf der linken Seite Ordnung, die Kopfzeile ist also zentriert und jetzt werde ich die Überschrift anpassen und dann die Unterstreichung Lass uns weitermachen und mit der Überschrift beginnen. Wählen wir es aus. Und definieren Sie zunächst die Schriftfamilie In diesem Fall verwende ich eine Schrift namens Movie Serif. Erhöhen Sie dann die Schriftgröße, machen Sie es zu fünf Rem. Außerdem werde ich die Schrift mit der Schriftstärke 300 leichter machen mit der Schriftstärke 300 leichter Dann ändere die Farbe. Ich werde Farbe für B verwenden, für B, für B. Und am unteren Rand Platz schaffen , die unteren sechs runden ab. In Ordnung, die Überschrift sieht also gut aus. Lassen Sie uns weitermachen und uns um das Basiswissen kümmern. Wählen wir die Elemente aus. Definieren Sie seine Breite und Höhe. Ich setze die Breite auf 12 RAM. Was die Höhe angeht, lassen Sie uns 0,3 Runs daraus machen. Und um das Zugrundeliegende durchführbar zu machen, müssen wir außerdem die Hintergrundfarbe definieren. Verwenden wir hier C2 9525. In Ordnung, mit dem Header sind wir fertig. Lassen Sie uns weitermachen und uns um diese Dienste kümmern. Wie gesagt, ich werde sie am CSS-Grid ausrichten. Lassen Sie uns also weitermachen und den Wrapper mit den Klassendiensten auswählen den Wrapper mit den Klassendiensten Definieren wir zunächst die Breite und Höhe, machen beide zu hundert Prozent und machen dann die Dienste mithilfe von Display Grid zu einem Grid-Container. Im Moment hat sich hier also nichts geändert, da wir noch keine Zeilen und Spalten definiert haben. Insgesamt werden wir also 16 Spalten und sechs Zeilen haben. Also müssen wir Spalten für die Rastervorlage definieren. Verwenden wir die Wiederholungsfunktion und geben Sie hier die Nummer der Spalte 16 und dann die Größe der Spalte an, eine Brucheinheit Als Nächstes haben wir Rasterschablonenzeilen. Wir werden also sechs Rollen haben. Verwenden Sie erneut die Funktion wiederholen, wobei das Argument sechs ist, die Größe angeht, werde ich sechs RAM verwenden. Schließlich werde ich mithilfe des Rasterzeilenabstands mit dem Wert für R1 Abstand zwischen den Zeilen einen Abstand zwischen den Zeilen schaffen mithilfe des Rasterzeilenabstands mit dem Wert für R1 Abstand zwischen den Zeilen einen Abstand In Ordnung? Wie Sie sehen können, haben die Elemente ihre Positionen geändert. Es ist automatisch passiert und jetzt müssen wir ihre Positionen manuell definieren und das Layout erstellen. Bevor wir das tun, werde ich die Seite überprüfen und das Rasterlayout anzeigen. Auf der rechten Seite der Entwicklertools haben wir einen Layoutbereich, haben wir einen Layoutbereich in dem wir ein Div-Element mit der Klasse Service finden Wenn ich also hier, das kleine Kästchen, ankreuze, dann wird das Rasterlayout angezeigt. Sie finden hier die Spalten und die Zeilen mit den richtigen Zeilennummern. Also Mozilla, Firefox, sie werden das Raster-Layout auch so anzeigen Okay, ich werde das Bild für eine Weile verkleinern , weil ich finde, dass es gerade zu groß Wählen wir also Bild aus und setzen die Breite auf 50 RAM. Danach definieren wir die Positionen für die Dienste separat. Um sie separat auszuwählen, verwende ich den n-ten Child-Selektor. Fangen wir also mit dem ersten Service an. Wählen wir es mit dem n-ten Child-Selektor aus. Und als Nummer des Dienstes geben wir eine an. Jetzt müssen wir die Zeilennummern der Rasterspalten und die Zeilennummern der Rasterzeilen definieren . Beginnen wir mit der Rasterspalte. Ich werde Forest Service zwischen 4,7 Linien platzieren . Verwenden wir es also hier für Schrägstrich sieben. Was die Rasterzeile betrifft, wird der Dienst zwischen der ersten und dritten Reihe platziert . Gehen wir zum zweiten Service über. Ich werde diesen Code duplizieren, die Nummer des Dienstes und auch die Anzahl der Flüssigkeitsspalten und -zeilen ändern . Im Falle eines zweiten Dienstes benötigen wir also die Rasterspaltenzeilennummern 3.6. die Rasterzeile angeht, wird es 3,5 sein. Eigentlich werde ich schnell die Zeilennummern für die restlichen Dienste definieren die Zeilennummern für die restlichen , weil ihr alle das seid. Also die Art und Weise, die ich verwenden werde , um sie auszurichten. Für den dritten Dienst benötigen wir also die Rasterspalte für sieben und die Rasterzeile fünf minus eins. Als Nächstes kommt es auf den Service an. Wir brauchen eine Rasterspalte mit den Zeilennummern 11.14. Asphaltieren Sie die Rasterreihe. Wir brauchen 1.3. Für den fünften Gottesdienst. Ich definiere die Rasterspalte als 12, 15, S4, die Rasterzeile, die wir benötigen, drei und 5.4, das letzte Element. Für den sechsten Dienst benötigen wir die Rasterspaltenzeilennummern 11.14 Was die Rasterzeile betrifft, brauchen wir fünf minus eins. In Ordnung? Alle sechs Dienste sind also aufeinander abgestimmt, aber das ist nicht das, was wir wollen , weil das Bild das Layout beschädigt hat. Lassen Sie uns weitermachen und auch seine Position definieren. Ich werde die Position für den Wrapper definieren. Verwenden wir die Rasterspalte und setzen sie auf 7.11. Was die Rasterzeile angeht, setze ich sie auf 2,6. Jetzt haben wir eine viel bessere Situation, aber wir müssen dem Image-Wrapper und dem Bild selbst ein paar weitere Stile hinzufügen Image-Wrapper und dem Bild selbst um das Layout perfekt zu machen Also werde ich die Breite des Image-Wrappers auf 200 Prozent festlegen des Image-Wrappers auf 200 Prozent Was das Bild angeht, lassen Sie uns auch seine Breite zu hundert Prozent erhöhen. Außerdem benötigen wir ein Feedcover für Objekte , um die Bildqualität zu erhalten. Außerdem werde ich die Opazität leicht verringern. Machen wir 0,8 draus. In Ordnung, jetzt ist das Bild perfekt platziert und wir sind fertig damit Kümmern wir uns um die Dienstleistungen. Ich möchte, dass sie in ihren Gitterzellen 100% einnehmen. Wählen wir also den Service aus und machen wir mit 100 Prozent. Und schafft auch unten etwas Platz. Verwenden Sie den unteren Rand, um zu laufen. Danach passen wir die einzelnen Elemente des Dienstes an. Beginnen wir mit dem Service-Header, wo wir die Schrift, das Awesome-Symbol und die Überschrift haben. Wählen wir also dieses Element aus. Ich werde es mit Display Flex zu einem Flex-Container machen. Lassen Sie uns außerdem die Elemente in der Mitte ausrichten und unten etwas Platz schaffen , indem wir den Rand unter einer Rampe verwenden. Eigentlich stimmt hier etwas nicht, weil das Da am Anfang des Absatzes stehen sollte. Lassen Sie uns das HTML-Markup überprüfen. Wie Sie sehen können, befindet sich der Absatz in der Kopfzeile und das ist der Fehler. Es sollte sich außerhalb des Headers befinden. Lassen Sie uns das also schnell für alle Dienste beheben. Richtig? Danach werde ich das Font Awesome-Symbol stylen. Lassen Sie uns also weitermachen und dieses Element auswählen. Lassen Sie uns zunächst die Schriftgröße erhöhen und sie für RAM einrichten. Dann ändere die Farbe. Ich werde es dreimal für B verwenden. Und schaffen Sie auch etwas Platz auf der rechten Seite des Symbols, indem Sie den rechten Rand verwenden, um zu laufen. Ordnung, die Icons sehen also gut aus und als nächstes kommt die Überschrift Lassen Sie uns also weitermachen und diese Elemente auswählen. Zuallererst werde ich die Schriftfamilie definieren. Verwenden wir hier von Lou dA2. Serifen. Dann ändere die Schriftgröße und mache 2,6 RAM daraus. Und definieren Sie auch die Zeilenhöhe mit dem gleichen Wert, 2,6 RAM. Außerdem werde ich die Schrift mit der Schriftstärke 400 heller machen . Und erzeugt unten ein Leerzeichen , wobei der Rand unten zum Laufen verwendet wird. In Ordnung, also auch der Überschriftenstil. Und schließlich müssen wir uns um die Absätze kümmern und Servicetexte auswählen. Definieren Sie zunächst die Schriftfamilie. Und in diesem Fall werde ich Josephine Slab Serif verwenden. Definieren Sie dann die Schriftgröße und machen Sie 1,6 RAM daraus. Außerdem werde ich die Eigenschaft text align mit einem Wert justifizieren verwenden . In Ordnung, die Absätze sehen also gut aus. Und tatsächlich haben wir die Arbeit am Abschnitt Über uns abgeschlossen . Jetzt ist es an der Zeit, weiterzumachen und mit der Arbeit am nächsten Abschnitt zu beginnen , der der Teambereich sein wird 69. Projekt 7 - Karten mit Tilt erstellen und anpassen: Zuallererst werde ich Sie daran erinnern, was wir bauen werden. Schauen wir uns also das fertige Projekt an. Also hier haben wir den Teambereich. Es besteht aus dem Header und drei Karten. Wenn ich den Mauszeiger über die Karten bewege , erscheinen einige Informationen mit einer Schaltfläche Und außerdem kann man sehen, dass wir hier einen schönen und coolen Schwebeeffekt haben hier einen schönen und coolen Schwebeeffekt Der Strom bewegt sich entsprechend der Richtung des Cursors. Dieser Effekt wird mit einem der JavaScript-Plugins namens JS erstellt . In Ordnung, also schauen wir uns an, was wir bauen werden. Beginnen wir wie immer mit dem HTML-Markup. Ich werde direkt unter dem Abschnitt Über uns ein Abschnitt-Tag öffnen . Ordnen wir es dem Klassenteam zu. Insgesamt werden wir in diesem Abschnitt also zwei Teile haben. Der erste wird der Header sein. Eigentlich werde ich mir den Code aus dem vorherigen Abschnitt holen. Fügen wir es hier ein und ändern Sie einfach die Überschrift, die wir hier benötigen, unser Team. Der zweite Teil dieses Abschnitts wird die Kartenhülle sein, die alle drei Karten enthalten wird Es ist also ein offener Div-Tag mit einem Klassenkarten-Wrapper. Dann brauchen wir ein weiteres Div, das die Karte selbst sein wird. Jede Karte wird also aus zwei verschiedenen Teilen bestehen. Das erste wird das Bild sein. Öffnen wir ein div-Tag, das der Wrapper des Images sein wird, dem ich die Klasse card image wrapper zuweisen werde Klasse card image wrapper zuweisen Öffnen Sie dann, in welchem Ziel selbst. Lassen Sie uns die Teile des Bildes spezifizieren. Wir benötigen ein Bild mit dem Namen Person One Dot JPEG aus dem Bilderordner. Und außerdem werde ich dem Alt-Attribut den Wert zuweisen , sagen wir CEO. Der zweite Teil der Karte wird die Karteninformation sein , in der wir einige Informationen über die Person haben. Also werde ich hier H2-Überschriftenelemente übergeben, die den vollständigen Namen der Person enthalten werden Dann haben wir eine weitere Überschrift, ich meine, H3-Überschriftenelemente, die die Position der Person spezifizieren Fügen wir Ihren CEO ein. Dann haben wir einen kleinen Absatz mit etwas Blindtext. Und zum Schluss füge ich Ihren Button mit dem Text ein, lesen Sie mehr. Okay, hier haben wir die erste Karte, die momentan ziemlich hässlich aussieht weil wir hier nur reines HTML haben Insgesamt werden wir also drei Karten haben. Also lass uns die erste Karte zweimal duplizieren und dann einige Änderungen vornehmen. Ich werde den Namen des Bildes, das Person sein wird , in JPG ändern . Ändern Sie auch das Alt-Attribut, das wir hier benötigen, Designer. Der vollständige Name der Person wird n Brown sein. Und der Positionsdesigner. Als Nächstes müssen wir den Namen des Bildes für die dritte Karte ändern den Namen des Bildes für die dritte Karte Es wird Person Three Dot JPG sein. Außerdem wird das Alt-Attribut Architect sein. Dann ändere ich den vollen Namen, wird verheiratet sein MIT. Und schließlich ändere die Position, oder? Architekt. Das HTML-Markup ist erstellt und alles ist bereit, um mit dem Schreiben des CSS zu beginnen Zuerst werde ich den gesamten Abschnitt anpassen und dann werden wir weitermachen und die Tilde J als Plugin verwenden Lassen Sie uns also weitermachen und die Elemente dieses Abschnitts auswählen. Ich werde es mit Display Flex zu einem Flex-Container machen. Ändere auch die Richtung, die wir hier in der Spalte benötigen. Und um Elemente horizontal und vertikal zu zentrieren, verwenden wir „ Inhaltsmitte ausrichten“ und „Elemente mittig ausrichten“. Abschließend werde ich mithilfe von Padding etwas Platz in diesem Abschnitt schaffen mithilfe von Padding etwas Platz in diesem Abschnitt Lass uns oben eine Polsterung machen. Null, dann fünf Rem auf der rechten Seite, 20 Rampen unten und fünf Rem auf der linken Seite. Richtig. Als Nächstes kümmere ich mich um die Kartenverpackung. Lassen Sie uns also weitermachen und dieses Element auswählen. Machen Sie ihn zu einem flexiblen Behälter. Als Nächstes werde ich etwas Abstand zwischen den Karten schaffen , indem ich den Inhaltsbereich gleichmäßig ausrichten verwende. Und zum Schluss lassen Sie uns oben auf den Karten etwas Platz schaffen , indem wir den Rand oben mit dem Wert acht Ran verwenden. Okay, wie Sie sehen können, sind die Karten horizontal in einer Reihe angeordnet. Lassen Sie uns weitermachen und sie anpassen. Ich gehe Solo-Karte. Definieren wir seine Breite und Höhe. Ich setze mit 237 RAM Was die Höhe angeht, machen wir 45 rem. Wie ihr jetzt sehen könnt, hat jede der Karten eine andere Breite und Höhe, weil wir die Bilder zu groß haben. Also müssen wir ihre Größen definieren. Wählen wir Image Wrapper und definieren Breite und Höhe. Ich setze beide auf 200 Prozent. Wählen Sie dann das Bild selbst aus und definieren Sie Breite und Höhe. Machen wir beide hundertprozentig und verwenden wir zusätzlich eine Abdeckung der Objektfüße. Wie Sie sehen können, haben wir hier keinen Abstand zwischen den Karten, da wir die Breite für den Keras-Wrapper nicht definiert haben Breite für den Keras-Wrapper Weisen wir ihm also eine Breite zu und setzen sie auf 100%. In Ordnung, jetzt haben wir viel bessere Ergebnisse. Alle Bilder haben die gleiche Größe. Lassen Sie uns weitermachen und ein paar weitere Stile verwenden. Ich werde Schatten hinzufügen, indem ich Box Shadow mit den Werten 01 run for RAM verwende. Und dann RGBA-Wert mit der schwarzen Farbe und mit dem Opazitätspunkt. Für. Als Nächstes füge ich dem Image-Wrapper und dem Bild selbst einige Sterne Image-Wrapper und dem Bild selbst Für den Wrapper definiere ich also die Hintergrundfarbe Machen wir 262626 daraus. Außerdem benötigen wir einen Randradius, um die Ecken abgerundet zu machen Machen wir 0,5 Rampe draus. Als Nächstes füge ich dem Bild einige Sterne hinzu. Ich werde die Opazität leicht verringern. Machen wir 0,8 draus. Außerdem müssen wir den Grenzradius mit dem Wert 0,5 rem verwenden Außerdem benötigen wir auch den Randradius für den Einkaufswagen , um den Radius für die Karte perfekt Also machen wir es auch mit einer Rampe von 0,5. In Ordnung, jetzt müssen wir uns um die Karteninformationen kümmern. Wie Sie bereits wissen, wird es unten platziert und sollte versteckt werden. Und sobald wir den Mauszeiger über die Karte bewegen, sollte sie angezeigt werden. Jetzt lege ich es auf die Karte. Und sobald wir es angepasst haben, kümmern wir uns um den Hover-Effekt Also lass uns weitermachen und Karteninformationen auswählen. Und möge seine Position absolut sein. Als Nächstes benötigen wir die relative Position der Karte, da ich die Karteninformationen entsprechend der Karte positionieren werde , die das übergeordnete Element ist. Definieren Sie dann die untere Eigenschaft für die Autoinformationen und machen Sie sie zu Ram. Und schaffen Sie auch etwas Platz innerhalb der Elemente, indem Sie eine Polsterung verwenden, um den Wert der Rampe zu erhöhen Ordnung, lassen Sie uns weitermachen und die einzelnen Elemente in den Karteninformationen anpassen die einzelnen Elemente in den Karteninformationen Ich fange mit einer Überschrift an. Also lass uns weitermachen und es auswählen. Definieren Sie seine Schriftfamilie. Ich werde eine Schrift namens Bellow verwenden, die A2-Serif. Ändern Sie dann die Schriftgröße und machen Sie es mit Ram auf zwei Punkte. Außerdem müssen wir Ihre Zeilenhöhe mit dem gleichen Wert verwenden , der 2,5 ausgeführt wurde Machen Sie die Schrift mit der Schriftstärke 300 heller und ändern Sie auch die Farbe. Mach es e. In Ordnung, also die erste Überschrift sieht gut aus Ich möchte einen kleinen Schatten hinzufügen. Eigentlich will ich den Schatten auch für die restlichen Elemente. Also werde ich es den Karteninformationen selbst zuordnen. Definieren wir also Textschatten mit den Werten 0,2, 0,5 RAM und den RGBA-Wert mit schwarzer Farbe und mit Opazität In Ordnung, lassen Sie uns weitermachen und die zweite Überschrift anpassen. Wählen wir es aus. Definierte Schriftfamilie. Ich werde hier Moly Serif verwenden. Dann ändere die Schriftgröße, mach es zu Ram. Machen Sie die Schrift auch heller, indem Sie die Schriftstärke 500 verwenden, ändern Sie die Farbe des Textes. Ich nehme hier die sogenannte A5 bis A12 acht. Und zum Schluss lassen Sie uns etwas Platz am unteren Rand der Elemente schaffen, indem wir mit dem Wert von Margin Bottom mit dem Wert eins Durchlauf verwenden. Okay, das war's mit der zweiten Überschrift. Gehen wir zum Absatz über . Wählen wir es aus und definieren die Schriftfamilie Verwenden wir hier unten eine 2-Serif. Als Nächstes ändere ich die Schriftgröße. Machen wir einen Punkt für RAM. Außerdem werde ich die Zeilenhöhe definieren. In diesem Fall machen wir 1,6 RAM draus. Ändern Sie die Schriftstärke. Benutze hier 300. Dann ändere ich auch die Farbe des Textes. Machen wir es z. B. Danach werde ich die Breite des Absatzes leicht verringern. Machen wir 80 Prozent draus. Und schaffen Sie auch unten etwas Platz, indem Sie den Rand verwenden, von unten bis zum Ram. In Ordnung, der Absatz sieht also gut aus. Und das letzte Element , das wir hier anpassen müssen , ist der Button. Wählen wir es also aus. Definieren Sie seine Breite und Höhe. Ich setze die Breite auf zehn RAM. Was die Höhe angeht, lassen Sie uns drei RAM daraus machen. Und ändere auch die Hintergrundfarbe. Machen wir es c29, 525. Okay, fügen wir dem Button noch ein paar Sterne hinzu. Ich werde eine reduktive Voltgrenze bekommen. Verwenden wir border none. Dann ändere die Schriftfamilie. Verwenden wir unten die A2-Serif. Als Nächstes definiere ich die Schriftgröße. Machen wir einen Punkt für RAM. Und definiere auch die Zeilenhöhe. Mach 1,5 Rem draus. Was die Farbe angeht. Machen wir es e. In Ordnung, also zum Schluss werde ich die Knöpfe leicht abgerundet machen und einen kleinen Schatteneffekt erzeugen Verwenden wir border-radius mit dem Wert 0.3 ramp. Und verwenden Sie auch Box-Shadow mit den Werten 0,1 rem, 0,8 RAM und dem RGBA-Wert mit flacher Farbe und wobei der Opazitätspunkt für die Schaltfläche angepasst ist , und schon sind wir bereit, einen Hover-Effekt zu erzeugen Lassen Sie uns zunächst die Position der Fahrzeuginformationen ändern und sie auch ausblenden. Wir brauchen hier, dass die Watson-Eigenschaft gleich Null ist. Außerdem brauchen wir Opazität Null und versteckte Sichtbarkeit. Dann wähle ich eine Karte mit jedoch aus, gefolgt von den Karteninformationen. Sobald wir den Mauszeiger über die Karte bewegen, müssen wir die Karteninformationen nach oben bewegen und sie sichtbar machen Wir müssen also eine Immobilie kaufen, deren Wert RAM ist, dann Opazität auf Null und Sichtbarkeit sichtbar Und außerdem verwenden wir Transition mit den Werten all und 0,3 s. In Ordnung, also wie Sie sehen können, funktioniert der Hover-Effekt einwandfrei Eigentlich möchte ich hier noch eine Sache hinzufügen. Sobald wir den Mauszeiger über die Karte bewegen, möchte ich sie etwas dunkler machen Wählen wir also eine Karte mit. Dann sollte das Bild folgen. Lassen Sie uns die Opazität verringern und sie auf 0,5 erhöhen. Und benutze auch Übergangswerte, Opazität und 0,3 s. In Ordnung, also wie du sehen kannst, funktioniert alles perfekt und wir sind bereit, das Plugin namens Tilde J S zu verwenden . Zuerst werde ich die Website besuchen und nach tilde dot js suchen Also hier ist die Website des Tildes JS-Plug-ins. Sie finden hier verschiedene Informationen. Ich bin in den verschiedenen Verwendungen des Plugins mit unterschiedlichen Optionen Außerdem haben wir hier die Anleitung zur Verwendung dieses Plug-ins. Ich klicke auf den Download-Link. Wir werden zum GitHub-Repository navigieren , wo wir verschiedene Dateien und Ordner finden können Wir müssen zum Quellordner gehen. Die Datei finden Sie hier. Lass es uns öffnen. Das ist also der gesamte Code dieses Plug-ins. Ich werde es kopieren. Klicken wir hier auf die Schaltfläche Bearbeiten, wählen Sie den gesamten Code aus und kopieren Sie ihn. Gehen Sie dann zum VS-Code und erstellen Sie eine neue Datei namens tilde dot js und fügen Sie hier den Code Danach müssen wir diese Datei mit dem HTML-Dokument verknüpfen . Öffnen wir also das Script-Tag. Und geben Sie im Quellattribut den Pfad der Datei an. Außerdem müssen wir auch die jQuery einbauen. Also lasst uns weitermachen und nach jQuery CDN suchen. Gehe zum ersten Link. Eigentlich kannst du hier verschiedene jQuery-Versionen wählen. Ich klicke auf die unkomprimierte Version und hole mir den Link Fügen wir es hier ein. In Ordnung, das war's also mit dem Setup von Tilt JS. Gehen wir zurück zur Website. Also wie gesagt, hier haben wir einige unterschiedliche Effekte mit der Anleitung. Sie können einen Parallaxeneffekt verwenden, Blendung, weiterstimmen usw. In unserem Fall werde ich das Basismodell verwenden. Wenn wir also verschiedene Optionen verwenden möchten, finden Sie die Anweisungen hier. Das einzige, was wir tun müssen, ist, allen Karten das Attribut namens Datentilde zuzuweisen allen Karten das Attribut namens Datentilde Lassen Sie uns also weitermachen und den Multi-Cursor verwenden und für alle Karten ein Attribut einfügen, das als Datenneigung bezeichnet wird. Ordnung, wenn ich also den Mauszeiger über die Karten bewege, funktioniert der Effekt einwandfrei Ich finde es ziemlich nett und cool. Okay, endlich sind wir mit dem Teambereich fertig und können weitermachen und mit der Arbeit am nächsten Abschnitt beginnen. 70. Projekt 7 - Kontaktabschnitt erstellen und stillieren: Schauen wir uns die fertige Version des Projekts an. Der nächste Abschnitt wird also der Kontaktbereich sein. Es hat einen dunklen Hintergrund und das Kontaktformular selbst befindet sich in der Mitte dieser Aktion. Sie besteht aus zwei Teilen. Auf der linken Seite haben wir ein Bild als Hintergrund. der rechten Seite seht ihr hier die Überschrift, ein paar Eingabefelder und den Absenden-Button. Jedes Eingabefeld hat die Bezeichnung, die sich gut nach oben bewegt, sobald wir uns auf die Felder konzentrieren. Das werden wir also erstellen bevor wir mit der Erstellung des HTML-Markups beginnen Ich werde ein kleines Problem beheben Wenn ich auf das Menüsymbol klicke und die Seitenleiste einblende, wirst du feststellen, dass sie hinter den Karten landet Um dieses Problem zu beheben, verwende ich die Z-Index-Eigenschaft mit einem höheren Wert, sagen wir 100 Okay, jetzt ist das Problem behoben und wir können anfangen, das HTML-Markup für den Kontaktbereich zu schreiben Öffnen wir die Abschnittselemente mit dem Klassenkontakt. Dann öffne ich den Div-Tag, der die Hülle des Kontaktformulars sein wird Wie gesagt, das Kontaktformular, wir werden zwei Seiten haben, links und rechts. Öffnen wir also das Div-Tag, das wird die linke Seite sein. Ordnen wir der Klasse den verbleibenden Kontakt zu. Als nächstes brauchen wir das Open-Div-Tag auf der rechten Seite mit dem Klassenkontext, oder? Die rechte Seite wird also aus zwei Hauptteilen bestehen. Die erste wird die Überschrift sein. Was den zweiten betrifft, sollte er deformiert sein. Öffnen wir also die H1-Überschriftenelemente mit der Überschrift Klassenkontakt Und wie der Inhalt hier, Inhalt. Danach öffnen wir die geformten Elemente. Das Formular wird drei verschiedene Eingabegruppen und den Submit-Button enthalten , das ist ein offener Div-Tag mit der Klasse input-group Die erste Eingabegruppe, die das Eingabeelement für den vollständigen Namen und die Bezeichnung haben wird . Öffnen wir also das Eingabe-Tag mit einem Typtext und einem Klassenfeld. Als nächstes müssen wir beschriften. Lassen Sie uns der Klasse Input, Label und auch den vollständigen Namen des Textes zuweisen . Okay, lass uns diesen Code duplizieren. Ändern Sie dann den Typ von taxed in email. Und statt des vollständigen Namens geben wir Ihre E-Mail-Adresse ein. Ordnung, die dritte Eingabegruppe wird anders sein , weil wir anstelle des Eingabeelements einen Textbereich haben werden Öffnen wir das div-Tag mit einer Klasseneingabegruppe. Dann einfügen. Wir brauchen einen Textbereich, in dem der Klassenname steht. Danach werde ich ein Label erstellen. Lassen Sie uns ihr eine Klassennachricht zuweisen und auch die Inhaltsnachricht einrichten. Okay, schließlich werde ich den Senden-Button erstellen. Lassen Sie uns das tun, indem wir ein Eingabeelement vom Typ submit verwenden. Außerdem benötigen wir hier die Klasse submit, btn und als Wert , der in dir steckt, submit Ordnung, das war's also mit dem HTML-Markup des Kontaktbereichs Jetzt müssen wir anfangen, etwas CSS zu schreiben und diese Elemente anzupassen. Lassen Sie uns fortfahren und die Elemente dieses Abschnitts auswählen. Definieren Sie zunächst Breite und Höhe. Ich werde mit 200 Prozent beginnen. Was die Höhe angeht, machen wir sie zu 100% aus dem Viewport. Verwenden Sie hier 100 vh und ändern Sie dann die Hintergrundfarbe. Ich werde hier Farbe für sieben, für sieben , für sieben verwenden . Ordnung, als Nächstes platziere ich den Inhalt in der Mitte Und dafür verwenden wir Flexbox. Zunächst erstelle ich den Flex-Container für das Abschnittselement mithilfe von Display-Flex. Und um den Inhalt vertikal und auch horizontal zu zentrieren , verwenden Sie Justify-Content Center und richten Okay, der Inhalt ist also zentriert und mit diesem Abschnitt sind wir fertig Gehen wir zum Kontaktwrapper über. Definieren wir zunächst Breite und Höhe. Ich mache die Breite zu 60 Prozent S für die Höhe. Machen wir 75 Rampe draus. Außerdem werde ich die linken und rechten Teile mithilfe von Display Flex nebeneinander platzieren Teile mithilfe von Display Flex nebeneinander Und dann verwenden wir temporäre Hintergrundfarbe um den Kontext richtig sichtbar zu machen. Verwenden wir weiße Farbe. Und zum Schluss werde ich einen kleinen Schatteneffekt erzeugen. Verwenden wir Box Shadow mit den Werten 03 RAM Sudden Run und dem RGBA-Wert, der schwarzen Farbe und mit der Opazität 0,5 Ordnung, so sieht der Kontakt-Rapper gerade aus Lassen Sie uns anfangen, die linke Seite anzupassen. Wählen Sie Kontakt aus. Gelacht. Definieren wir zunächst seine Breite. Ich werde 35% draus machen. Dann lege ich das Bild als Hintergrund fest. Aber lassen Sie uns zunächst den linearen Gradienten verwenden. Dann gebe ich Ihnen den RGBA-Wert. Fügen wir hier 153 mal ein und die Opazität 0,6. Dann verwende ich einen anderen RGBA-Wert. Fügen Sie hier 2023 Mal ein und die Opazität 0,9. Danach geben wir die URL des Bildes an. Wir brauchen. Wenden Sie sich aus dem Bilderordner an PG dot JPG. Lassen Sie uns hier auch in der Mitte platzieren und nicht wiederholen. Und schließlich müssen wir die Hintergrundgröße definieren. Umschlag. In Ordnung, das war's also mit der linken Seite. Lass uns weitermachen und uns um die rechte Seite kümmern. Wählen Sie einen Vertrag aus, oder? Es sollte den Rest der Breite einnehmen. Lassen Sie uns also mit 65 Prozent die Hintergrundfarbe ändern. Ich verwende deine Farbe E. Und definiere auch die Polsterung. Ich werde in den ersten drei Runden Polster machen. Und dann RAM auf den restlichen Websites. Lassen Sie uns auch den temporären weißen Hintergrund vom Contact-Rapper entfernen den temporären weißen Hintergrund vom Contact-Rapper Ordnung, jetzt werde ich die einzelnen Elemente auf der rechten Seite anpassen Lass uns weitermachen und mit der Überschrift beginnen. Zuerst. Definieren wir diese Schriftfamilie. Ich werde hier unten dA2-Serifen als vergrößerte Schriftgröße verwenden , daraus sechs RAM machen Machen Sie die Schrift auch heller. Verwenden Sie die Schriftstärke 300. Ändere die Farbe, mach es auf sieben, auf sieben bis sieben. Dann werde ich unten etwas Platz schaffen, indem ich die Marge verwende, die am unteren Ende fünf rangierten. Und schließlich platzieren wir es mit Text Align Center in der Mitte. Die Überschrift ist also gestylt. Es sieht gut aus und ich werde zu den Formularelementen übergehen. Also lass uns weitermachen und es auswählen. Definieren wir zunächst die Breite und machen sie zu 100%. Lassen Sie uns den Formularflex-Container mithilfe von Display Flex erstellen. Dann ändere die Richtung, mache es zu einer Spalte. Und richten Sie Artikel mittig aus, indem Sie „Artikel mittig ausrichten“ verwenden. In Ordnung, das ist also über die geformten Elemente gesagt. Als Nächstes passe ich die Eingabefelder an. Ich meine die Eingaben und den Textbereich. Sie haben das gemeinsame Klassenfeld. Also lass uns weitermachen und es auswählen. Definieren wir die Breite, machen wir es auf 45 rem. Machen Sie dann die Hintergrundfarbe transparent. Entfernt auch den Standardrahmen. Und dann definiere den unteren Rand mit Wertepunkten. Zu rennen. Ich werde den Stil der Grenze zweigestrichelt festlegen Definieren Sie dann die Farbe 636363. Okay, fügen wir den Feldern noch ein paar Sterne hinzu. Ich werde oben und unten mit Hilfe von Margin etwas Platz schaffen . Machen wir drei RAM und Null daraus. Außerdem werde ich Polsterung verwenden. Stellen wir die Polsterung oben auf einen Rem ein. Auf der rechten Seite, unten. Was die linke Seite angeht, machen wir es auf Null. Als Nächstes definiere ich die Schriftfamilie. In diesem Fall verwenden wir eine Schriftart namens Molly Serif. Definieren Sie dann die Schriftgröße und machen Sie 1,6 RAM daraus. Und ändere die Farbe. Benutze hier für b dreimal. In Ordnung, die Eingabefelder sehen also ziemlich gut aus. Jetzt definiere ich die Höhe für die Eingaben und den Textbereich separat. Wählen wir also zuerst die Eingänge aus und sagen Hallo zu RAM. Wählen Sie dann den Textbereich aus. Im Fall des Textbereichs definiere ich also die maximale Höhe und maximale Breite. Denn wie Sie wissen, können wir die Größe des Feldes manuell ändern , was das Layout beeinträchtigen würde. Also müssen wir diese Option deaktivieren. Stellen wir die maximale Höhe auf sieben Rampen Was die maximale Breite angeht, legen wir sie auf 45 Brand fest. Okay, schauen wir uns die Eingaben und den Textbereich an. Als nächstes müssen wir uns um die Etiketten kümmern. Sie sollten standardmäßig in den Eingabefeldern platziert werden. Wählen wir das Label und die definierende Position aus. Ich werde es absolut machen. Dann müssen wir die relative Position für die Eingabegruppe festlegen. Weil es das übergeordnete Element ist. Definieren Sie dann die linke Eigenschaft als Null. Gemäß der untersten Position. Wir werden es separat für die Eingaben und den Textbereich definieren . Definieren wir hier also zunächst die Schriftfamilie. Machen Sie es schmackhafter, dA2-Serif als vergrößerte Schriftgröße. Mach es 1.8 zum Laufen. Ändere die Farbe. Ich werde hier Farbe für B, für B, für B verwenden und dann Text in Großbuchstaben umwandeln. und dann Text in Großbuchstaben umwandeln Wie Sie wissen, sollten Beschriftungen innerhalb der Eingabeelemente platziert werden. Und wir werden uns nicht auf die Eingaben konzentrieren können. Deshalb werde ich hier Zeigerereignisse verwenden, keine. Okay, wählen wir die Beschriftungen der Eingaben und des Textbereichs getrennt aus und definieren die untere Position Ich beginne mit dem Eingabe-Etikett. Nehmen wir die unterste Position ein. Wir sind abgehauen. Was den Textbereich betrifft. Ich meine die Bezeichnung des Textbereichs, die Klassennachricht enthält. Lassen Sie uns die unterste Position sechs erreichen. In Ordnung, also ist alles bereit, um einen Fokuseffekt zu erzeugen Ich werde zwei verschiedene Dinge tun. Wenn ich mich auf die Eingabefelder konzentriere, möchte ich den gestrichelten Rand in einen durchgehenden Rahmen umwandeln und ihn auch mehrfach beschriften und etwas kleiner machen Also wähle ich das Feld mit der Fokus-Pseudoklasse aus und definiere den Stil der Randschaltfläche Mach es solide. Sobald ich mich also auf die Eingabefelder konzentriere, ändert sich die Grenze und es wird sich so transformieren, dass es gelöst wird. Okay, als nächstes gehen wir zum Etikett über. Ich wähle das Feld aus, auf das der Fokus gerichtet ist. Jetzt müssen wir das Label auswählen. Und in diesem Fall müssen wir einen dieser CSS-Kombinatoren verwenden , den sogenannten General Sibling Selector, der durch das Tildezeichen ausgedrückt wird Also werde ich mit der Funktion Transform Translate zum Label übergehen . Also müssen wir Y übersetzen. Lassen Sie uns den Wert minus drei berechnen. Außerdem werde ich die Schriftgröße des Etiketts verringern. Machen wir es uns zur Aufgabe, zu rennen. Und schließlich verwende Transition mit den Werten 0 und 0,3 s. Wenn ich also erneut klicke und mich auf die Eingabefelder konzentriere, bewegen sich die Beschriftungen gut. In Ordnung, wir sind fast fertig mit dem Kontaktbereich. Das Letzte , was wir tun müssen, ist den Senden-Button zu gestalten. Lassen Sie uns also weitermachen und diese Elemente auswählen. Definieren Sie zunächst die Breite und Höhe. Ich setze die Breite auf 45 RAM. Was die Höhe angeht. Machen wir fünf Rem draus. Dann ändere die Hintergrundfarbe. Lass uns deine Farbe verwenden. Siehe 2955 Dann ändere die Farbe des Textes und mache ihn weiß. Löscht den Standardrahmen mit Port oder None. Und schaffen Sie oben etwas Platz, indem Sie Margin Top to Run verwenden. Der Button sieht viel besser aus, aber wir müssen ihm noch ein paar Styles hinzufügen. Definieren wir die Schriftfamilie. Ich werde hier eine Schrift namens Moly Serif verwenden. Dann ändere die Schriftgröße, mach es zu Ram. Machen Sie die Schrift auch heller, indem Sie die Schriftstärke 300 verwenden. Wandelt Text in Großbuchstaben um. Danach werde ich etwas Abstand zwischen den Buchstaben schaffen, den Buchstabenabstand mit dem zu rundenden Wertpunkt verwende . Dann mache den Cursorzeiger Zum Schluss werde ich einige Schatteneffekte für den Text und für die Schaltfläche selbst erstellen einige Schatteneffekte für . Verwenden wir also Textschatten mit den Werten 0,1 rem, 0,3 rem und dem RGBA-Wert mit einer schwarzen Farbe und einer Opazität Dann dupliziere ich diese Codezeile, ändere Text und Box und mache auch die Opazität 0,3 In Ordnung, das war's also. Der Kontaktbereich ist fertig und wir können mit dem nächsten Teil unseres Projekts fortfahren , der Fußzeile Die Fußzeile wird einfach sein. Wir haben hier nur den Copyright-Text und ein paar Social-Media-Icons. Sobald wir einen Filter erstellt haben , erstellen wir die feste Scrollschaltfläche , mit der wir auf der Seite nach oben scrollen können Ordnung, lassen Sie uns anfangen, das HTML-Markup zu erstellen Und ich werde das Fußzeilen-Tag zusammen mit der Fußzeile der Klasse öffnen. Als Nächstes öffne ich das Div-Tag, das den Inhalt des Fotos umschließt. Also lassen Sie uns dieser Klasse den Inhalt der Fußzeile zuweisen. Innerhalb des div-Elements werden wir zwei Teile haben. Der erste wird der Absatz mit einem Copyright-Text sein . Öffnen wir also ein Element mit einem Klassen-Copyright. Und dann einfügen, etwas Text verwenden. Ich meine das Urheberrecht, gefolgt vom Copyright-Zeichen, das durch die HTML5-Entität ausgedrückt werden sollte Wir müssen hier Ampersand schreiben, kopieren, Semikolon, dann Alle Rechte vorbehalten. Was den zweiten Teil betrifft, wird es die Liste der Social-Media-Icons sein. Öffnen wir das Div-Tag mit der sozialen Klassenliste. Und übergebe hier ein paar Link-Elemente mit den Font-, Awesome-Symbolen. Das erste wird Facebook sein. Lassen Sie uns also Ihre Klassennamen verwenden. Fab, FA Dash, Facebook, Dash F. Lassen Sie uns diese Codezeile zweimal duplizieren und die Klassennamen ändern. Für den zweiten brauchen wir einen BFA, Instagram. Was den dritten betrifft, so wird es Twitter sein. In Ordnung, das HTML-Markup ist bereit für die Fußzeile. Lassen Sie uns weitermachen und es schnell anpassen. Lassen Sie uns die Fußzeile auswählen und ihre Breite und Höhe definieren. Ich werde mit 200 Prozent beginnen. Was die Höhe angeht, lassen Sie uns 15 RAM daraus machen. Dann ändere die Hintergrundfarbe. Ich werde hier die Farbe 17181 verwenden. Als Nächstes platziere ich den Inhalt des Filters in der Mitte. Und dafür verwenden wir Flexbox. Wir brauchen Display Flex. Richten Sie dann das Inhaltszentrum aus und richten Sie die Elemente in der Mitte aus. In Ordnung, lassen Sie uns weitermachen und den Inhalt der Fußzeile anpassen. Lassen Sie uns diese Elemente auswählen und die Breite definieren. Ich werde es zu 60% schaffen. Erstellen Sie dann mithilfe von Display Flex den Flex-Container für den Fußzeileninhalt mithilfe von Display Flex den Flex-Container für den Fußzeileninhalt Und dann schaffen Sie Platz zwischen den Flex-Artikeln. Ich meine den Absatz und die Social-Media-Symbole, die den Inhalt rechtfertigen der Abstand zwischen den Elementen ist richtig angeordnet. Lass uns weitermachen und sie stylen. Ich beginne mit einem ausgewählten Absatz und definiere zunächst die Schriftfamilie Ich verwende hier, unten, dA2-Serif. Definieren Sie dann die Schriftgröße, stellen Sie 1,6 für die Farbe ein. Ich mache es A7, A7, A7. Wie Sie sehen können, ist der Absatz formatiert. Gehen wir zu den Social-Media-Symbolen über. Ich wähle das Link-Element , dessen Rand definiert ist. Ich setze es oben und unten auf Null. Was die linke und rechte Seite angeht, lasst uns rennen. Wählen Sie dann Ionen aus, vergrößern Sie die Schrift und lassen Sie es laufen. Und ändere die Farbe. Hier. Dreimal A7 färben, oder? Mit der Fußzeile sind wir also fertig. Es ist maßgeschneidert und jetzt müssen wir uns um diesen Crawling-Button kümmern Lassen Sie uns zunächst die Schaltfläche in der Datei index.html erstellen. Eigentlich wird der Button als Link dargestellt. Ordnen wir ihr also die Klasse Scroll, BTN zu Dann fügen wir hier I Elemente mit den Klassen FAS ein, Pfeil In Ordnung, lass uns weitermachen und den Button stylen. Wählen Sie es aus. Es sollte eine feste Position haben. Dann definierte Rechte und Grundeigenschaften. Ich mache aus beiden fünf Rem. Stellen Sie dann Breite und Höhe ein. Ich setze beide auf 4,5 rem. Und definiere auch die Hintergrundfarbe. Benutze deine Farbe E2, B64, sechs. Okay, hier haben wir den Button und jetzt müssen wir das Font Awesome-Symbol stylen Es sollte in der Mitte der Box platziert werden. Lassen Sie uns Flexbox verwenden. Wir müssen hier das Inhaltszentrum begründen und auch die Artikelmitte ausrichten. Die vergrößerte Schriftgröße, mach es zu Ram. Ändere die Farbe, mach es weiß. Außerdem werde ich einen kleinen Schatteneffekt erzeugen, indem Box Shadow mit den Werten 0,11, 0,6 RAM und RGBA mit schwarzer Farbe und mit der Opazität Und schließlich verwende den Grenzradiuswert 0,3 ran. Richtig? Der Button ist also fertig, wir müssen ihn nur noch zum Laufen bringen. Dafür werde ich ein paar Zeilen JavaScript verwenden . Sobald wir also auf die Schaltfläche klicken , weisen wir dem HTML-Element die Eigenschaft Scrollverhalten zu. Und wir werden es glatt stellen. Dann, nach einer Sekunde, werden wir es entfernen. Denn wenn wir das nicht tun, funktioniert das glatte Scrollen. Wenn wir auf einen der Links auf der Seite klicken. Lassen Sie uns weitermachen und zunächst die Scroll-Schaltfläche mit der Abfrageauswahlmethode auswählen Hängen Sie dann den Event-Listener an. Ich übergebe dein Klick-Event und die Pfeilfunktion. Als nächstes müssen wir die HTML-Elemente auswählen. Lassen Sie uns erneut die Abfrageauswahlmethode verwenden. Verwenden Sie dann den Stil und die Eigenschaft Scrollverhalten. Wie gesagt, wir müssen es glatt stellen. Danach, um die Eigenschaft aus den HTML-Elementen zu entfernen . Nach 1 s verwende ich die Methode setTimeout, die ein Argument benötigt nämlich die Callback-Funktion Und es wird nach 1 s ausgeführt . Sobald wir auf die Schaltfläche klicken. Lassen Sie uns diese Codezeile von hier aus abrufen. Füge es ein. Und statt glatt verwenden wir onset. Außerdem müssen wir das zweite Argument verwenden, tausend, was tausend Millisekunden entspricht Wenn ich also auf die Schaltfläche klicke, navigieren wir reibungslos zum Anfang der Seite. In Ordnung, das war's also. Wir haben alle Abschnitte unserer Projekte erstellt, und jetzt ist es an der Zeit, sie an verschiedene Bildschirmgrößen anzupassen. 71. Projekt 7 - Machen Sie das Projekt responsiv und erstellen Sie Lade-Spinner: Lassen Sie uns weitermachen und die Seite überprüfen. Wechseln Sie dann in den Responsive-Modus. Eigentlich habe ich schon verschiedene Breakpoints vorbereitet. Wo sollen wir einige Änderungen vornehmen? Wir werden also keine Zeit damit verschwenden. Der erste Breakpoint, an dem wir einige Änderungen vornehmen müssen, wird 1.500 Pixel sein Lassen Sie uns also weitermachen und eine CSS-Medienabfrage erstellen und die maximale Breite als 1.500 Pixel angeben Am Breakpoint werde ich die Position des Bildes im Abschnitt Über uns leicht ändern die Position des Bildes im Abschnitt Über uns Lassen Sie uns weitermachen und den Wrapper des Bildes auswählen und die Zeilennummern der Rasterzeilen auf drei setzen , n minus eins Als Nächstes werde ich die Breite der Karte leicht verringern . Wählen wir es also aus und legen die Breite fest. Für RAM. Danach kümmere ich mich um den Kontakt-Rapper. Ich werde die Breite erhöhen und die Höhe verringern. Wählen wir also Contact Rapper aus. Stellen Sie die Breite auf acht Prozent ein. Was die Höhe angeht, werde ich 65 Rampen daraus machen. Ordnung, das Letzte, was ich tun werde , ist, die Breite des Fußzeileninhalts zu erhöhen Wählen wir also dieses Element und setzen seine Breite auf 8%. Okay, das ist es also. Bei 1.500 Pixeln benötigen wir keine weiteren Änderungen. Lassen Sie uns weitermachen und am nächsten Breakpoint arbeiten, bei 1.400 Pixeln liegen wird Also werde ich eine neue CSS-Medienabfrage mit einer maximalen Breite von 1.400 Pixeln erstellen eine neue CSS-Medienabfrage mit einer maximalen Breite von 1.400 Pixeln Das erste, was ich tun werde, ist die Bannerelemente anzupassen. Ich habe den Überschriftenabschnitt und den Bateson gemacht. Also lasst uns weitermachen und mit der Überschrift beginnen. Ich werde die Schriftgröße ändern. Machen wir sechs RAM draus. Verringern Sie dann die Zeilenhöhe. Mach sieben draus. Lauf. Als Nächstes wähle ich den Banner-Absatz aus. Verkleinern wir die Schriftgröße und machen sie dreistufig. Und wähle auch unten aus. Verkleinern wir die Breite, machen wir 20 RAM daraus. Dann ändere die Höhe. Ich setze es auf fünf Rem. Was die Schriftgröße angeht, lassen Sie uns 1,6 rund machen. In Ordnung, der Header sieht also gut aus. Schauen wir uns die Seitenleiste an. Wie Sie sehen, müssen wir die Schriftgröße der Menüpunkte leicht verkleinern . Lassen Sie uns also weitermachen und den Menülink auswählen und die Schriftgröße um drei Rampen festlegen. Richtig? Danach kümmern wir uns um den Abschnitt Über uns. Ich werde das Layout der Dienste leicht ändern. Nehmen wir also den Code von hier, fügen ihn ein und ändern Sie die Zeilennummern der Rasterspalten. Eigentlich müssen wir Grid Row von jedem Dienst entfernen. Ändern Sie dann die Zeilennummern der Rasterspalten. Für den Forest Service brauchen wir also 37. Dann werden es 26 sein. Für den dritten Artikel benötigen wir 37. Dann wird es für den nächsten 11, 15, dann 16 sein. Nochmals, 11, 15. In Ordnung, der Abschnitt Über uns sieht also gut aus. Und eigentlich brauchen wir keine weiteren Änderungen an diesem Breakpoint Fahren wir mit dem nächsten fort, der 1.300 Pixel groß sein wird Lassen Sie uns also weitermachen und eine neue CSS-Medienabfrage mit einer maximalen Breite von 1.300 Pixeln erstellen eine neue CSS-Medienabfrage mit einer maximalen Breite von 1.300 Pixeln Wir müssen uns um das Team und die Konfliktabteilung an diesem Breakpoint kümmern und die Konfliktabteilung an diesem Breakpoint Alle anderen Abschnitte sehen gut aus. Fangen wir mit dem Teambereich an. Wählen wir es aus und die Polsterung unten verringert Machen wir fünf Rampen draus. Wählen Sie dann den Kartenwickel aus. Also am Breakpoint werde ich die Richtung ändern Machen wir eine Kolumne daraus. Um Karten in der Mitte zu platzieren, verwenden Sie außerdem die Option Elemente mittig ausrichten und den Rand oben ändern. Machen wir es für Ran. Okay, als Nächstes müssen wir etwas Platz zwischen den Karten schaffen. Wählen wir es aus und definieren den unteren Rand mit dem Wert acht rund. Okay, danach kümmern wir uns um den Kontaktbereich. Wählen wir den Kontakt-Rapper aus. Ich werde es breiter machen. Machen wir 90 Prozent draus. Und verringern Sie auch die Höhe. Ich werde es auf 55 Runden einstellen. Danach wählen wir die Kontaktüberschrift und ändern den Bereich unten. Lassen Sie uns die Marge von unten bis zur Rampe festlegen. Als Nächstes wähle ich das Feld aus. Ich meine Eingaben und den Textbereich und ändere den Rand. Machen wir zwei Rem oben und unten und Null auf der linken und rechten Seite. In Ordnung? Wie Sie sehen, sind wir mit 1.300 Pixeln fertig Gehen wir zum nächsten Breakpoint über, der aus tausend Pixeln bestehen wird Lassen Sie uns also weitermachen und ein neues Medium erstellen. Geben Sie hier die maximale Breite als tausend Pixel an. Also werde ich zuerst das Banner anpassen. Wählen wir das Überschriftenelement aus. Ändere die Schriftgröße, mache fünf Rampen draus. Verringern Sie dann die Zeilenhöhe. Mach sechs draus. Rann. Danach wähle ich den Absatz aus. Verkleinern wir die Schriftgröße, lassen wir es 2,5 laufen. Danach brauchen wir einen Button. Ich werde es verkleinern. Machen wir eine Rampe mit einer Breite von 18. Stellen Sie dann die Höhe auf vier RAM ein. Und ändere auch die Schriftgröße, mache 1,5 Runden. In Ordnung, die Binärdatei sieht also gut aus. Fahren wir mit dem Abschnitt Über uns fort. Unter dem Breakpoint benötigen wir also das Raster-Layout nicht mehr Ich werde Flexbox verwenden. Ich werde alle Dienste und das Bild vertikal in einer Spalte platzieren . Lassen Sie uns also weitermachen und Dienste auswählen und daraus einen Flex-Container machen. Dann ändere die Richtung, mache daraus eine Spalte. Und verwenden Sie auch die Option „Elemente mittig ausrichten“. Richtig? Wie Sie sehen, müssen wir die Breite der Dienste verringern. Wählen wir also den Service aus. Stellen Sie die Breite für zwei RAM ein. Und definiere auch die unterste Marge als sechs Runs. Als nächstes müssen wir uns um das Bild kümmern , denn im Moment ist es zwei größer. Wählen wir also zunächst den Wrapper aus und setzen die Breite auf vier, um ihn auszuführen Als Nächstes müssen wir das Bild selbst auswählen und seine Breite auf 200 Prozent festlegen. In Ordnung, mit dem Abschnitt Über uns sind wir fertig. Es sieht gut aus. Außerdem müssen wir nichts mit dem Teambereich machen. Lassen Sie uns also weitermachen und den Kontaktbereich anpassen. Eigentlich werde ich die linke Seite überhaupt verstecken. Wählen wir also „Nach links leiten“ und setzen die Breite auf Null. Laut Vertrag, richtig? Wir müssen seine Breite zu 100% erreichen. In Ordnung, kümmern wir uns um die Eingaben und den Textbereich. Ich wähle das Feld aus. Machen wir die Breite auf 55 rem. Dann wähle ich den Textbereich da wir die maximale Breite für den Textbereich definieren müssen. Setzen wir es auf 55 rem. Und ändern Sie auch die Breite der Senden-Schaltfläche. Machen wir es auch auf 55 Rem. In Ordnung, das war's mit dem Kontaktbereich. Lassen Sie uns weitermachen und die Fußzeile anpassen. Ich werde den Absatz und die Social-Media-Symbole vertikal in einer Spalte platzieren . Wählen wir den Inhalt der Fußzeile aus und ändern die Richtung, machen ihn zu einer Spalte Als Nächstes müssen wir die Elemente mittig ausrichten Auch zentriert den Text ausrichten. Und ich setze die Breite auf 50%. Danach. Wählen wir den Absatz aus , weil ich die Stellen für den Absatz und die Social Media-Symbole ändern möchte . Ich möchte Symbole oben platzieren. Ändern wir also die Reihenfolge des Absatzes und machen ihn zu einem. Und definieren Sie auch die Marge der ersten drei Runs. Ordnung, das war's mit der Fußzeile und wir haben Arbeit an tausend Pixeln abgeschlossen Lassen Sie uns weitermachen und den nächsten Breakpoint erstellen. Es werden 700 Pixel sein. Lassen Sie uns also neue Medien erstellen und die maximale Breite angeben. Mach 700 Pixel draus. Eigentlich müssen wir an einem Breakpoint nicht viel tun. Wir müssen nur mehrere Elemente anpassen. Wählen wir also die Überschrift des Banners aus. Ich werde seine Größe ändern. Lassen Sie uns die Schriftgröße für RAM festlegen. Und die Linienhöhe fünf. Rem. Wählen Sie als Nächstes Absatz und stellen Sie die Schriftgröße auf, um ausgeführt zu werden. In Ordnung, als Nächstes kümmern wir uns um den Kontaktbereich. Ich wähle das Feld aus. Machen wir die Breite auf 35 RAM. Wählen Sie auch den Textbereich aus. Denn auch hier müssen wir die maximale Breite definieren. Machen wir 35 RAM draus. Und dann ändere die Breite der Schaltfläche Senden. Ich werde es auch auf Five Rem setzen. In Ordnung, das war's mit den Breakpoints. Und schließlich müssen wir das Projekt anpassen. Am letzten Breakpoint wird es 500 Pixel geben Erstellen wir also ein neues Medium und geben die maximale Breite auf 500 Pixel an. Zuerst werde ich die Schriftgröße des HTML-Codes verringern , da sie sich auf alle Elementgrößen auswirkt. Lassen Sie uns diese Schriftgröße also auf 45% erhöhen. Als Nächstes kümmern wir uns um die Seitenleiste. Ich möchte es auf die gesamte Seite erweitern. Machen wir es also zu hundert Prozent breit. Eigentlich haben wir hier ein kleines Problem denn wenn die Seitenleiste einmal geschlossen ist, ist sie immer noch sichtbar Wir müssen also die richtige Position festlegen und sie auf minus hundert Prozent setzen. Jetzt ist das Problem behoben. Als Nächstes ändere ich die Position des Menüsymbols, da es zu weit vom Rand entfernt ist. Wir müssen also ein Hamburger-Menü auswählen, aber mit dem Klassenwechsel setzen wir die richtige Position auf Runde 38 fest. Ordnung, also lassen Sie uns als Nächstes die Breite der Dienste verringern Wählen Sie den Dienst aus und legen Sie dessen Breite fest, um ihn zu rammen. Das Letzte, was ich tun werde, ist, die Höhe der Fußzeile leicht zu erhöhen Machen wir 18. Lauf. In Ordnung, also endlich sind wir fertig. Wir haben das Projekt für alle verschiedenen Bildschirmgrößen optimiert. Wenn Sie es überprüfen, werden Sie feststellen, dass es auf allen verschiedenen Bildschirmgrößen gut aussieht . Okay, wir sind fast fertig mit unserem Projekt. Das letzte, was ich tun werde, ist, einen Spinner zu erstellen , der erscheint, bevor das Projekt geladen Lassen Sie uns also weitermachen und mit der Erstellung des HTML-Markups beginnen . Aber zuerst werde ich den gesamten Container verstecken. Lassen Sie uns also weitermachen und einen Container auswählen und ihm zuweisen, keinen anzeigen. Der Behälter ist also versteckt. Aber eigentlich sehen wir hier den Scroll-Button. Ich nehme an, ich habe es außerhalb des Containers platziert. Also lass uns weitermachen und hineinfügen Okay, wir sind bereit, das HTML-Markup für den Spinner zu erstellen Ich werde es außerhalb des Containers erstellen. Es sind offene Entwicklungen, die der Spinner-Container sein werden Als Nächstes benötigen wir ein Div-Element mit Klassenkreisen , in denen ich acht leere Div-Elemente platzieren werde. Moment sehen wir hier nur eine leere Seite, weil die Entwicklungen leer sind und sie keinen Stil haben. Lass uns weitermachen und anfangen , etwas CSS zu schreiben. Ich wähle diese Malercontainer aus. Machen wir seine Position absolut. Dann Top gesetzt und es fehlten Eigenschaften, beide auf Null Außerdem werde ich Breite und Höhe definieren. Machen wir es mit hundert Prozent. Was die Höhe angeht, werde ich sie zu 100% aus dem Viewport machen 100% aus dem Viewport Danach ändere ich die Hintergrundfarbe. Machen wir es dunkel mit 262626. Und außerdem werde ich den Inhalt in die Mitte legen. Und dafür verwenden wir Flexbox. Wir brauchen hier das Justify-Content-Center und das Alignment Items Center und das Alignment Items Ordnung, was wir hier sehen , ist nur der dunkle Hintergrund Jetzt fangen wir an, die Kreise zu erstellen und dann werden wir sie funktionieren lassen. Die Kreise werden als hintere Pseudoelemente der Entwicklungen dargestellt Pseudoelemente der Entwicklungen Wählen wir zunächst unsere Wrapper-Kreise aus und definieren deren Breite und Höhe Mach ihnen acht RAM. Und ändere auch die Hintergrundfarbe. Ich werde hier einen temporären Hintergrund verwenden. Machen wir es weiß. Also werde ich jetzt die Kreise erstellen. Wählen wir div-Elemente aus. Waren sie hinter Pseudoelementen her? Lassen Sie uns zunächst den Inhalt definieren. Ich mache es leer. Dann ändere die Position, mache sie absolut. Außerdem werde ich den Kreisen eine relative Position zuweisen , weil ich sie nach Pseudoelementen entsprechend den Kreisen positionieren möchte nach Pseudoelementen entsprechend den Kreisen positionieren Als Nächstes definiere ich Breite und Höhe. Lassen Sie uns beide zu einer Rampe von 0,7 machen. Dann, um die Form des Elements zu ändern und es zu einem Kreis mit einem US-Grenzradius mit dem Wert 50 Prozent zu machen . Und ändere die Hintergrundfarbe. Mach es C2 955. In Ordnung, jetzt kannst du die Kreise sehen. Tatsächlich werden sie übereinander gelegt weil bei allen die Position auf absolut gesetzt ist. Lassen Sie uns weitermachen und ihre Positionen manuell definieren. Ich wähle die ersten Pseudoelemente mit dem n-ten Child-Selektor aus. Lassen Sie uns auf 6,3 RAM setzen. Das ist wahrscheinlich übrig. Ich werde es auch 6.3 Rama machen. Lassen Sie uns weitermachen und den zweiten Kreis positionieren. Ich werde diesen Code duplizieren. Wir brauchen hier n-tes Kind, um ich werde schwierige Position machen 6.8 RAM Was die Linke betrifft, so wird es eine Runde von 5,6 sein. Ordnung, lassen Sie uns weitermachen und schnell die Positionen für die restlichen Kreise definieren schnell die Positionen für die restlichen Kreise Für das dritte Element benötigen wir eine Spitzenposition von 7,1 RAM. Was die Laborposition angeht, so werden es 4,8 RAM sein. Dann setze ich für die nächsten Elemente den oberen Punkt auf sieben Punkte , um zu rammen. Wie wahrscheinlich links. Es wird für RAM sein. Für den fünften Artikel liegt die oberste Position dann bei 7,1 RAM. Da die linke Position wahrscheinlich drei Punkte vor dem Rennen sein wird. Als nächstes folgt der sechste Punkt. Machen wir es zur Stoppposition 6.8 RAM. Was die Linke betrifft, so wird es 2,4 sein. Und dann für das siebte Element Machen wir eine schwierige Position von 6,3 RAM. Und der linke, 1.7 Lauf. Für den letzten Artikel. Ich setze die Position auf 5,6 Rampe und die linke Position auf 1,2 Rampe. Richtig? Das sind also die Startpositionen für die Kreise. Eigentlich brauchen wir diesen weißen Hintergrund nicht mehr. Also werde ich es loswerden. Okay? Jetzt müssen wir also die CSS-Keyframes erstellen. In den Keyframes müssen wir nur eine CSS-Regel definieren. Die Kreise sollten sich um 360 Grad drehen. Lassen Sie uns also Keyframes erstellen ich werde sie Kreise nennen Also bei Null Prozent, am Ausgangspunkt, müssen wir uns transformieren, um Null zu sein. Für die 100%. Ich werde die Transformation um 360 Grad drehen lassen. Die Keyframes sind fertig. Wählen wir die div-Elemente aus und weisen ihnen die Animationseigenschaft zu, damit diese CSS-Stile funktionieren. Wir benötigen also den Namen der Animation, also Kreise, gefolgt von der Dauer 1,2 s. Als Animations-Timing-Funktion verwende ich jetzt Cubic Bezier, mit dem wir benutzerdefinierte Animationseffekte erstellen können Tatsächlich können Sie die Cubic Bezier-Website besuchen die Cubic Bezier-Website Sie die verschiedenen Animationseffekte manuell definieren können die verschiedenen Animationseffekte Und sobald Sie den definiert haben, können Sie die Werte von hier abrufen. Ordnung, in unserem Fall verwende ich den kubischen Bezier mit den Das ist einfacher als 0,50, 0,5 und dann eins Außerdem werde ich hier einen anderen Wert namens Infinity verwenden , dem wir die Animation unendlich ausführen können. Wie Sie sehen können, bewegen sich die Kreise, aber das ist natürlich nicht das, was wir wollen. Als Nächstes werde ich den Ursprung der Transformation definieren . Wenn wir die Transformationseigenschaft verwenden , bewegt sich das Element standardmäßig entsprechend der Mitte. Daher ist der Ursprung der Transformation standardmäßig auf die Mitte gesetzt. Sie können den Ursprung wie links oder rechts definieren. Oder Sie können sogar Ursprünge für die getrennte X-Achse und Y-Achse definieren die getrennte X-Achse und Y-Achse Um mehr Informationen über die Eigenschaft Transform Origin zu erhalten , können Sie nach MTN-Transformursprung suchen und sich diese Seite Hier haben wir also ein paar Beispiele , die zeigen, wie die Eigenschaft Transformationsursprung funktioniert. In unserem Fall verwende ich den dritten Ansatz, bei dem wir den Ursprung der X-Achse und der Y-Achse getrennt definieren Ursprung der X-Achse und der Y-Achse getrennt Also werde ich transform origin mit den folgenden Werten verwenden . Das ist ein schwerer RAM-Sturz. Und dann wieder für RAN. Wie Sie sehen, haben wir jetzt ein viel besseres Ergebnis, aber nicht das perfekte. Wir müssen die Ausrichtung des Kreises leicht ändern. Und dafür verwende ich Margin. Lassen Sie uns die Marge oben auf minus vier Rem als auf Null auf der rechten Seite, Null unten und minus vier Rem auf der linken Seite setzen die Marge oben auf minus vier Rem als auf Null auf der rechten Seite, Null unten . Okay? Jetzt bewegen sich die Kreise also ganz gut. Aber noch einmal, das wollen wir nicht. Ich werde der Animation mithilfe der Eigenschaft Animationsverzögerung einige Effekte hinzufügen . Ich werde den Entwicklungen die unterschiedlichen Verzögerungszeiten separat hinzufügen . Diese Werte werden negativ sein. Wenn wir die negativen Werte mit der Eigenschaft Animationsverzögerung verwenden , beginnt die Animation, als ob sie bereits seit einiger Zeit abgespielt würde. Wenn die Animation z. B. innerhalb von 5 s laufen soll und Sie die Eigenschaft für die Animationsverzögerung auf -2 s definieren, beginnt die Animation direkt bei von 5 s laufen soll und Sie Eigenschaft für die Animationsverzögerung auf -2 s definieren der dritten. Zweiter. Die ersten 2 s werden weggelassen. Okay, also lassen Sie uns das div-Element separat auswählen und die Eigenschaft für die Animationsverzögerung für alle definieren Ich fange mit dem ersten Div an. Verwenden wir den Kinderwähler und setzen Sie die Eigenschaft für die Animationsverzögerung auf -0,036 s. Wenn Sie sich also die Kreise genauer ansehen, werden Sie feststellen, dass sich der erste anders bewegt Lassen Sie uns weitermachen und die Animationsverzögerung auch für die restlichen Kreise definieren . Kopieren wir diesen Code und fügen ihn hier ein. Für die zweite Entwicklung setze ich die Animationsverzögerung auf -0,072 s. Dann benötigen wir für das dritte Div -0,108 s. Dann setze ich für die nächste die Animationsverzögerung auf minus eins für 4 s. Daher das fünfte Element. Daher Lassen Sie uns den Wert auf -0,18 s setzen Der nächste Wert ist -0,216 s. Für das Simons-Item . Verwenden wir -0,252 s. Für den letzten. Ich meine, lassen Sie uns für das achte Element die Animationsverzögerung auf -0,288 s einstellen. Okay, jetzt funktioniert der Spinner perfekt und er erzeugt einen wirklich schönen und In Ordnung, wir sind fast fertig. Das einzige, was wir tun müssen, ist, den Container nach ein paar Sekunden wieder anzuzeigen . Ich werde also eine ähnliche Technik verwenden, die wir zuvor bei der Änderung des Klassennamens verwendet haben . Wir werden mithilfe von JavaScript eine neue Klasse als Körperelemente hinzufügen . Öffnen wir die Datei script.js. Sobald die Seite geladen ist, bewegt sich der Spinner 4 s lang und dann sollte der Container angezeigt werden 4 s lang und dann sollte der Container angezeigt Sobald die Seite geladen ist, müssen wir nach 4 s zwei Bodys hinzufügen, eine neue Klasse, sagen wir Display. In CSS werden wir es schaffen, den Container mit dieser neuen Klasse anzuzeigen . Wir benötigen also das globale Fensterobjekt und müssen den onLoad-Event-Handler daran anhängen Sie sollte einer Pfeilfunktion entsprechen. Diese Funktion wird ausgeführt, sobald die Seite geladen ist. Um die Funktion nach einer gewissen Verzögerung auszuführen, können wir die Methode setTimeout verwenden Lassen Sie uns hier die Callback-Funktion übergeben. Wählen Sie dann Körperelemente mit der Methode querySelector aus. Wie gesagt, wir müssen einen neuen Klassennamen hinzufügen. Also müssen wir die Listeneigenschaft klassifizieren und dann die Methode hinzufügen. Wir müssen hier die Klasse angeben. Sagen wir Display. Die setTimeout-Methode verwendet das zweite Argument, das die Dauer ist In diesem Fall benötigen wir 4.000 Millisekunden. Okay, jetzt müssen wir also eine Klassenanzeige mit diesem Strafcontainer und auch dem Container auswählen eine Klassenanzeige mit diesem Strafcontainer und auch dem Container Fangen wir also mit diesem Erdnussbehälter an. Wir müssen es verstecken. Deshalb brauchen wir hier Opazität Null und versteckte Sichtbarkeit Außerdem werde ich Transition mit allen Werten in einer Sekunde verwenden . Und damit der Übergang funktioniert, verwende ich außerdem die Z-Index-Eigenschaft mit dem höheren Wert, sagen wir 300 Danach müssen wir erneut die Anzeigeklasse auswählen, gefolgt vom Container. Im Moment ist die Display-Eigenschaft auf None gesetzt und wir müssen einen Anzeigeblock erstellen. Wenn ich die Seite jetzt neu lade, wird der Spinner 4 s lang angezeigt und dann erscheint der Container Um diese Effekte perfekt zu machen, werde ich eine kleine Animation für die Kreise erstellen. Ich möchte die Kreise mit einem Fade-Effekt ein- und ausblenden . Lassen Sie uns zunächst die Kreise standardmäßig ausblenden. Verwenden wir hier Opazität Null und Visibility Hidden. Dann erstelle ich neue CSS-Keyframes. Nennen wir es Displaykreise. Wir werden hier also ein paar Schritte von Null Prozent auf 25% machen. Ich verwende Opazität Null und Visibility Hidden. Die Kreise werden also 1 s lang ausgeblendet . Dann werden die Kreise zwischen 25 und 90% eingeblendet. Wir brauchen also Opazität eins und Sichtbarkeit sichtbar. Und dann beginnen sich die Kreise von 9 bis 100 Prozent zu verstecken. Also brauchen wir hier Opazität eins und Sichtbarkeit sichtbar. Und dann, bei 100 Prozent, brauchen wir die Opazität auf Null und die versteckte Sichtbarkeit In Ordnung, die Keyframes sind fertig. Weisen wir den Kreisen die Animationseigenschaft zu. Geben wir den Namen Display-Kreise und die Dauer 4 s an. Jetzt ist also zu sehen, dass wir hier einen viel besseren Effekt haben. Ordnung, endlich haben wir die Arbeit an dem Projekt abgeschlossen Ich hoffe, es war interessant und nützlich. Es hat dir Spaß gemacht und du hast etwas Neues gelernt. Lass uns weitermachen. 72. Projekt 8 - Projektvorschau: Ordnung, es ist an der Zeit, unser nächstes Projekt zu erstellen, das der Klon einer der beliebtesten und am häufigsten verwendeten Websites namens Paypal sein der beliebtesten und am häufigsten verwendeten wird, um die Benutzeroberfläche der verschiedenen Seiten zu erstellen Ich bin auf der Hauptseite, auf Anmelde- und Anmeldeseiten. Natürlich wird es nicht der exakte Klon mit der vollen Funktionalität sein . Wie gesagt, wir werden nur eine Benutzeroberfläche mit HTML, CSS und JavaScript erstellen . Paypal sieht in verschiedenen Ländern anders aus. Die Benutzeroberfläche ändert sich häufig von Zeit zu Zeit. Sie sich also keine Sorgen, wenn dies nicht der exakte Klon der aktuellen Benutzeroberfläche ist. Okay, also bevor wir direkt mit dem Schreiben des Codes beginnen, lassen Sie uns zunächst beschreiben , wie das Projekt aussieht Also wie gesagt, wir werden drei verschiedene Seiten erstellen, Haupt-Login und Registrierung. Wir beginnen mit der Hauptseite. Es wird aus verschiedenen Abschnitten bestehen. Der erste Abschnitt wird das Banner mit Navigation sein . Wir haben hier mehrere Navigationspunkte. Wenn ich den Mauszeiger über sie bewege, wird das Drop-down-Menü angezeigt Es wechselt, sobald wir Mauszeiger über ein anderes Navigationselement Außerdem werden wir hier zwei verschiedene Buttons zum Einloggen und Registrieren haben. Wenn ich sie anklicke, werden wir zur richtigen Seite navigieren. Auf das Banner folgt also der zweite Abschnitt. Es wird drei verschiedene Teile mit Schrift, fantastischen Symbolen, einigen Textelementen und Schaltflächen enthalten . Dann haben wir diesen blauen Abschnitt mit einigen verschiedenen Absätzen. Als Nächstes werden wir diesen kleinen Abschnitt hier mit einem Bild und drei verschiedenen Schritten erstellen . Unten finden Sie eine Schaltfläche zur Registrierung, gefolgt von der Fußzeile In Ordnung, schauen wir uns die Hauptseite an. Schauen wir uns die Anmeldeseite an. Es wird der ursprünglichen Anmeldeseite ziemlich ähnlich sein. Wir werden hier zwei Eingabefelder mit Schaltflächen haben. Das ist wahrscheinlich die Anmeldeseite. Es wird aus zwei Teilen bestehen. Auf der linken Seite werden wir mehrere Bilder der Kunden haben . Was die rechte Seite betrifft, so wird sie zwei verschiedene Optionen enthalten. Egal, ob wir ein persönliches oder ein Geschäftskonto erstellen möchten. In Ordnung, das war's also mit dem Projekt. Wie üblich werden wir dafür sorgen, dass es auf verschiedene Bildschirmgrößen reagiert. Wenn ich die Seite überprüfe und in den Responsive-Modus wechsle, werden Sie feststellen, dass sie responsiv ist. Eine Sache, die hier zu beachten Auf kleineren Bildschirmgrößen werden wir die Dropdowns nicht mehr haben Sie werden sich so auf das Menü umstellen. Okay, das ist es also. Wir sind bereit, mit dem Bau des Projekts zu beginnen . Also lass uns weitermachen. 73. Projekt 8 - HTML-Markup für die Landung erstellen und gemeinsame Stile definieren: Ich habe auf dem Desktop einen neuen Ordner namens Wine House erstellt , in dem ich einen weiteren Ordner für die Bilder habe. Lassen Sie uns weitermachen und diesen Ordner im VS-Code öffnen. Ich werde drei verschiedene Dateien erstellen. Index.html, style.css und Skripte sind nicht richtig. Das öffnet die Datei index.html und generiert das grundlegende HTML-Dokument. Ich werde es benutzen. Lassen Sie uns hier das Ausrufezeichen setzen und Enter oder Tab drücken Als Nächstes verknüpfe ich diese drei Dateien. Öffnen wir also das Link-Tag und geben Sie hier den Pfad der CSS-Datei an. Als Nächstes öffne ich das Script-Tag unten, über dem abschließenden Body-Tag. Und im Quellattribut geben wir den Pfad der Datei script.js an. Okay, außerdem werde ich während des gesamten Projekts eine der Google-Schriftarten verwenden . Also lass uns weitermachen und uns den Link schnappen. Gehen wir zur Google Fonts-Website und suchen nach einer Schrift namens Cormoran Wählen wir hier ein paar verschiedene Schriftstärken aus und greifen dann auf den Link. Ich füge es in das Hauptelement ein. Als Nächstes möchte ich das Logo in der Titelleiste ändern. Wir müssen das Link-Tag als Wert des REL-Attributs öffnen . Wir brauchen hier ein Symbol. Dann spezifiziere ich den Typ. Er wird mit einem Slash-PNG-Bild abgebildet. Und schließlich müssen wir den Pfad des Bildes und die H-Referenzattribute angeben. Wir haben hier einen Bilderordner, und dann müssen wir einen Logo-Punkt-PNG auswählen. Ändern Sie abschließend den Titel. Wir brauchen Wine House. Lassen Sie uns weitermachen und das Projekt im Browser ausführen. Dafür verwende ich eines der VS-Codepakete, das als Live-Server bezeichnet wird. Es ermöglicht uns, den Projektverlauf im Browser auszuführen und Änderungen vorzunehmen, ohne die Seite jedes Mal zu aktualisieren. Sie können diese Erweiterung also installieren und verwenden. Das Projekt ist also live im Browser. Sie können hier auch das Logo in der Titelleiste sehen. Lassen Sie uns zum Schluss unsere Arbeitsumgebungen ein wenig organisieren , den Editor und den Browser so platzieren und loslegen. Ordnung, also werden wir jede der Seiten separat erstellen und anpassen Und danach programmieren wir den Scroll-Effekt und auch einige andere Dinge. Lassen Sie uns damit beginnen, das Open-Div-Tag für HTML-Markup zu erstellen , das der Container sein wird Als nächstes werden wir weitere Div-Elemente haben. Es wird die Verpackung sein. Insgesamt werden wir also fünf verschiedene Seiten haben, ich meine, fünf verschiedene Abschnitte. Lassen Sie uns also weitermachen und diese Abschnittselemente für alle erstellen . Ich werde ihm die erste Klasse zuweisen. Dann duplizieren wir es viermal und ändern die Klassennamen. Wir brauchen Klassennamen von zwei bis fünf. In Ordnung, also fange ich mit dem ersten Abschnitt an. Ich meine die Homepage. Es enthält die unterstrichene Überschrift und den Vollbildhintergrund Sie sehen hier die Navigationspfeile und den Fortschrittsbalken. Sie sind behoben und werden auf allen Seiten angezeigt. Wir werden uns etwas später um sie kümmern. Okay, lassen Sie uns weitermachen und die tiefen Elemente im ersten Abschnitt öffnen . Dieses Element wird zwei verschiedene Klassen haben. Der erste wird der Common Class Section Wrapper sein Common Class Section Wrapper Die zweite wird die Einzelklasse sein. Ich nenne es Abschnitt eins schnell. Eigentlich brauchen wir diesen Abschnitt-Wrapper auch für die restlichen Abschnitte Kopieren wir also dieses Element und fügen es für alle ein. Außerdem müssen wir die Klassennamen ändern. Wir benötigen zwei Zahlen von zwei bis fünf. Okay, gehen wir zurück zum ersten Abschnitt. Wir müssen ein div-Tag einfügen , das die Überschrift umschließt. Weisen wir ihm einen Klassennamen zu, Abschnitt eins, Überschrift-Wrapper Und geben Sie hier H1-Überschriftenelemente ein. Ich werde dem Klassenabschnitt eine Überschrift zuweisen. Und lassen Sie uns hier auch den folgenden Text platzieren. Die besten Weine der Welt. Das war's also mit dem ersten Abschnitt. Jetzt fange ich an, etwas CSS zu schreiben. Zuallererst werde ich einige gängige Stile kreieren. Wählen wir jedes Element mit einem Sternchen aus und fügen hier einige gängige Stile hinzu und setzen sie Ich werde die Ränder und den Abstand von jedem Element entfernen und den Abstand von jedem Element Lassen Sie uns beide auf Null setzen. Außerdem werde ich Box-Größe, Border-Box machen. Als Nächstes werde ich einige Standardstile loswerden. Ich meine, lassen Sie uns die Gliederung auf Null setzen. Außerdem werde ich die Textdekoration einrichten, um zu lernen. Entfernt dann die Standardstile aus den Listenelementen. Lassen Sie uns den Typ List-Style-Type keins machen. Und schließlich werde ich die Schriftfamilie so einstellen, dass sie Moran Caramel Es tut uns leid. Während dieses Projekts werden wir also RAM als Maßeinheit verwenden. Moment entspricht 1 g 16 Pixeln, da die Schriftgröße des HTML-Elements 16 Pixeln entspricht. Standardmäßig möchte ich 1 g in zehn Pixel umwandeln. Und dafür müssen wir die Schriftgröße des HTML-Elements verringern, und zwar auf 62,5% Die Größe der Überschrift hat abgenommen. Danach kümmern wir uns um den Wrapper. Ich werde die Breite und Höhe festlegen, beide machen 200% des Viewports Weisen wir der Eigenschaft width also hundert Viewport-Breite zu Eigenschaft width also hundert Viewport-Breite Was die Höhe angeht, werde ich sie auf hundert Viewport-Höhe festlegen Als Nächstes wählen wir ein Abschnittselement selbst aus und legen Breite und Höhe fest, jeweils 200 Prozent. Dann mache ich seine Position absolut. Außerdem müssen wir die Position des Wrappers relativ machen, Position des Wrappers relativ weil ich Abschnitte entsprechend ihrem übergeordneten Element positionieren möchte , das ist Rapper Danach setzen wir die Lag-Position des Abschnitts auf Null. Danach wähle ich den Abschnitt Wrapper aus. Definieren wir seine Breite und Höhe. Wir müssen beide vom Abschnittselement erben. Lassen Sie uns also Breite und Höhe festlegen, die beide vererbt werden sollen. Im Moment landete der erste Abschnitt also der absoluten Position hinter den anderen Abschnitten aufgrund der absoluten Position hinter den anderen Abschnitten. Wie gesagt, ich werde ihn zuerst anpassen, den ersten Abschnitt. Um es also an der Spitze der anderen Abschnitte zu platzieren, verwenden wir die Z-Index-Eigenschaft. Wählen Sie den ersten Abschnitt aus und setzen Sie den Index auf 50. Danach lege ich das Bild als Vollbild-Hintergrund fest das Bild als Vollbild-Hintergrund Wählen wir den Wrapper für Abschnitt eins aus. Dann verwende ich hier den linearen Gradienten. Geben wir hier schwarze Farbe ein. Ich meine RGBA mit drei Nullen und mit der Opazität 0,5. Als nächstes brauchen wir wieder RGBA, schwarze Farbe, aber mit unterschiedlicher Opazität. Machen wir 0,4 draus. Als Nächstes müssen wir die URL des Bildes und den Pfad des Bildes angeben . Wir haben einen Ordner namens Images und müssen Abschnitt eins auswählen, PG Punkt JPG. Als nächstes brauchen wir Center und auch No-Repeat. Lassen Sie uns abschließend die Größe des Hintergrunds festlegen und ihn abdecken. Ordnung, wie Sie sehen können, haben wir hier ein Vollbild-Hintergrundbild für den ersten Abschnitt Lassen Sie uns nun weitermachen und uns um die Überschrift kümmern und das zugehörige Wrapper-Div auswählen Zunächst nehme ich Sie von der Position des Deckblatts ab Ich werde die Überschrift ganz unten auf der Seite platzieren . Machen wir seine Position also absolut. Definieren Sie dann die Top-Immobilie und machen Sie sie zu 70%. Was das verlassene Eigentum angeht, werde ich es zu 50 Prozent machen. Und wir müssen auch mit der Übersetzungsfunktion transformieren. Wir müssen dich zu 50 Prozent für beide Richtungen überholen. Ich meine, für die X- und Y-Achse. Die Überschrift ist also richtig platziert, aber im Moment ist sie nicht ganz sichtbar. Also lasst uns weitermachen und das beheben. Ich wähle die Überschrift selbst aus. Lassen Sie uns die Schriftgröße festlegen. Zehn RAM. Ändere auch die Schriftstärke, mache 300 und ändere die Farbe. Ich werde es hier verwenden, weiß. Okay, als Nächstes wandle ich Text in Großbuchstaben um. Und schaffen Sie auch etwas Abstand zwischen den Buchstaben, indem Sie den Buchstabenabstand verwenden. Mit dem Wert 0,1 lief es. Danach fügen wir am unteren Rand der Überschrift einen Rahmen hinzu. Verwenden Sie also den unteren Rand mit Wertepunkten, um solide zu rammen. Und als Farbe verwende ich D5 mit vier Nullen In Ordnung, die Überschrift sieht also gut aus. Schließlich möchte ich es auf der rechten Seite ausrichten und die Benutzerauswahl deaktivieren. Also müssen wir den Text an dem Wert ausrichten, oder? Und dann wählt der Benutzer keine aus. Okay, schauen wir uns den ersten Abschnitt an. Es sieht gut aus und wir können mit dem zweiten fortfahren. Lassen Sie uns zunächst das HTML-Markup erstellen. Der zweite Abschnitt wird also zwei verschiedene Bilder und die Schaltfläche enthalten . Lass uns weitermachen und ein Div-Tag mit dem Klassenverkauf eröffnen. Wir werden also in dieser Entwicklung ein Bild und eine Schaltfläche haben , die ein offenes IMG-Element sind. Die Quellattribute. Ich werde den Teil des Bildes spezifizieren. Wir müssen Bag Dot PNG aus dem Bilderordner auswählen. Außerdem werde ich dem Alt-Attribut sailback zuweisen. Und außerdem müssen wir das Attribut mit einem Wert klassifizieren , der zurücksegelt. Als nächstes fügen wir hier eine Schaltfläche mit einem Klassennamen ein, Verkauf, BTN. Und als Steuer werde ich Ihre Bestellung weiterleiten. Jetzt. Außerdem füge ich hier ein weiteres Bild ein, aber es wird außerhalb des Divs platziert. Geben wir hier den Pfad des Bildes an. Wir brauchen Weinflasche Dot PNG. Lassen Sie uns dem Alt-Attribut außerdem den Wert Weinflasche zuweisen . Und außerdem füge ich ein Klassenattribut mit einem Wert für eine Weinflasche hinzu. Okay, das war's mit dem Markup des zweiten Abschnitts Moment landete der zweite Abschnitt hinter dem ersten. Deshalb sehen wir hier einige der Elemente nicht. Ich werde das Problem erneut mit der Indexeigenschaft beheben . Ich werde hier den Klassennamen ändern. Lassen Sie uns Abschnitt zwei verwenden. Moment wollte ich diesen Weg verwenden, aber irgendwann werden wir verschiedene Werte der Indexeigenschaft für all diese Abschnitte definieren . Ordnung, jetzt müssen wir den Hintergrund für den zweiten Abschnitt festlegen Lass uns weitermachen und dir diesen Code von hier holen. Und dann nimm einige Änderungen vor. Wir brauchen den Wrapper für Abschnitt zwei. Ändern Sie dann die Opazitäten. Machen wir sie zu 0,8 und 0,9. Und ändere auch den Namen des Bildes. Wir brauchen Abschnitt zwei, PG. Okay? So sieht der zweite Abschnitt jetzt aus, so wie wir ihn hier haben, die Scrollbalken. Und ich möchte sie loswerden. Dafür müssen wir dem Wrapper-Overflow einen versteckten Befehl zuweisen. Danach kümmern wir uns das Layout dieser Elemente. Ich werde Flexbox verwenden. Verwenden wir hier Display-Flex. Dann müssen wir die Elemente in der Mitte ausrichten , um die Elemente vertikal zu zentrieren. Außerdem werde ich den Inhalt mit dem Wertebereich gleichmäßig ausrichten. Ordnung, lassen Sie uns anfangen jedes der Elemente zu stylen Soweit ich das Div-Element mit dem Klassenverkauf auswählen werde . Lassen Sie uns wieder Flux-Bücher verwenden. Ich möchte ihn zu einem flexiblen Container machen. Dann müssen wir die Richtung des Flusses ändern . Machen wir es zu einer Kolumne. Und danach verwenden wir für die vertikale und horizontale Zentrierung die Befehle „Elemente mittig ausrichten“ und „Inhaltsmitte ausrichten Ordnung, danach passen wir das erste Bild Lassen Sie uns die Opazität leicht verringern und sie auf 0,9 erhöhen. Und ich werde auch die Breite des Bildes ändern. Machen wir es 45 Rem als der ausgewählten Taste. Es gibt übrigens einen Klassenverkauf. Definieren wir zunächst die Breite und Höhe. Ich setze die Breite auf 20 RAM. Was die Höhe angeht, machen wir fünf Rampen daraus. Als Nächstes kümmere ich mich um den Text Erhöhen wir die Schriftgröße. Schaffen Sie es zu Ram. Ändern Sie auch die Schriftstärke. Mach es leichter. Dann wandle Text in Großbuchstaben um und schaffe etwas Abstand zwischen den Buchstaben Machen wir 0,1 Wiederholungen daraus. Okay, danach setze ich die Hintergrundfarbe auf transparent. Ändere auch die Farbe, mach es weiß. Erstellen Sie dann oben auf der Schaltfläche etwas Platz , indem Sie den Wert für RAM verwenden. Und zum Schluss erstellen wir einen Rahmen mit den Werten 0,1, durchgehende Rampe und verwenden die weiße Farbe. In Ordnung, der Buxton ist also maßgeschneidert. Abschließend möchte ich einen kleinen Schwebeeffekt erzeugen. Ich werde die Hintergrundfarbe ändern, wenn Sie mit der Maus darüber fahren. Ausgewählte Schaltfläche mit einem Mauszeiger. Ändern Sie die Hintergrundfarbe. Benutze hier wieder diese rote Farbe. Und dann, um den Effekt etwas glatter zu machen, verwende Transition mit einer Werthintergrundfarbe und damit einer Dauer von 0,2 s. In den Effekt etwas glatter zu machen, verwende Transition mit einer Werthintergrundfarbe und damit einer Dauer von 0,2 s. Ordnung, also der Button ist gestylt und das letzte Element, das ich anpassen möchte , ist das zweite Bild Also lass uns weitermachen und es auswählen. Ich werde die Opazität ändern. Ich meine, ich möchte es auf 0,6 reduzieren und auch die Breite ändern. Machen Sie eine Rampe mit zwei Rampen daraus. In Ordnung, mit diesem zweiten Abschnitt sind wir fertig. Es ist gestylt und wir müssen weitermachen und uns um den dritten Abschnitt kümmern Es wird, wieder, ziemlich einfach sein. Wir werden das Vollbild-Hintergrundbild haben. Außerdem werden wir andere Bilder in der Mitte der Seite und diese Texte hier haben. Lassen Sie uns also zunächst das HTML-Markup erneut erstellen Wir werden hier drei verschiedene Elemente haben. Der erste wird der H1-Tag mit der Überschrift „Open H1“ und der Überschrift „Klassenabschnitt drei“ sein mit der Überschrift „Open H1“ und der Überschrift „Klassenabschnitt drei“ Und gib mir den Text, in bester Qualität. Als nächstes werden wir ein Bild haben. Geben Sie den Pfad des Bildes im Quellattribut an. Wir müssen Frame Dot PNG auswählen. Fügen Sie hier auch den Wert des Alt-Attributs hinzu, sagen wir Grapes Frame. Und dann füge ein Klassenattribut mit einem Wertrahmenstrich IMG hinzu. Lassen Sie uns diese Codezeile duplizieren. Ändere den Namen des Bildes, das wir hier benötigen, Grapes Dot PNG. Auch als Wert des Alt-Attributs. Ich werde nur Trauben von hier lassen. Das Event hat die Klasse verändert. Wir brauchen hier Trauben und G. Okay? Moment ist dieser Abschnitt also nicht sichtbar und der Grund ist derselbe. Es ist hinter dem zweiten Abschnitt gelandet. Lassen Sie uns das erneut mit der Z-Index-Eigenschaft beheben. Ich werde hier den Klassennamen ändern. Wir brauchen Abschnitt drei. Jetzt sind die Elemente sichtbar. Lassen Sie uns weitermachen und diesen Abschnitt anpassen. Lassen Sie uns zunächst das Bild als Vollbild-Hintergrund festlegen das Bild als Vollbild-Hintergrund Wählen wir den Wrapper für Abschnitt drei aus. Eigentlich brauchen wir den ähnlichen Code auch für den Abschnitt von Three Rapper Also holen wir uns diesen Code von hier. Fügen Sie es für den Wrapper des dritten Abschnitts ein und nehmen Sie einige Änderungen vor Lassen Sie uns die Opazitäten ändern. Wir brauchen hier. 0.3, 0.9, dann ändere den Namen des Bildes. Wir brauchen drei. Und schließlich müssen wir hier Inhalte mit dem Value Center statt mit dem Raum gleichmäßig begründen . In Ordnung, das war's mit der Verpackung. Lassen Sie uns weitermachen und jedes der Elemente separat anpassen . Ich fange mit den Bildern an. Wählen wir das erste Bild aus, das die Klasse frame IMG hat. Stellen wir die Breite auf 100 Rampe ein. Ebenfalls. Ich werde seine Position für absolut erklären. Und schließlich verringern Sie die Opazität auf 0,5. Okay, als Nächstes wähle ich dieses zweite Bild aus, Grapes IMG. Eigentlich brauchen wir ähnliche Stile auch für das zweite Bild. Also lasst uns weitermachen und diesen Code von hier holen und einfach die Werte ändern. Ich setze die Breite auf vier, um zu rennen. Was die Opazität angeht, machen wir sie auf 0,7. Abschließend werde ich mich um die Überschriftenelemente kümmern. Lassen Sie uns also weitermachen und diese Elemente auswählen. Lassen Sie uns zunächst die Schriftgröße erhöhen und auf 20 RAM erhöhen. Dann ändere die Farbe. Ich werde hier hellgraue Farbe verwenden, ich meine CCC, und auch Text in Großbuchstaben umwandeln Als Nächstes müssen wir die Überschrift drehen. Verwenden wir also Transform mit der Rotationsfunktion. Ich drehe das Bild um 20 Grad. Verwenden Sie außerdem Ihre Textausrichtung in der Mitte. Die Überschrift sieht also gut aus. Ich möchte einen kleinen Schatteneffekt hinzufügen und die Benutzerauswahl deaktivieren. Lassen Sie uns also weitermachen und Text Shadow mit den Werten 0,5 RAM als 1,5 RAM verwenden . Und als Farbe verwende ich 000, das ist die schwarze Spalte. Und schließlich verwenden Sie Ihre Benutzer, wählen Sie keine aus 74. Projekt 8 - Anpassen und damit die Landingpage funktionieren: Lassen Sie uns die Entwicklungen eröffnen, die Container sein werden. Eigentlich wird es den gesamten Inhalt des Projekts beinhalten . Also erstellen wir das Markup des Headers und fügen dann etwas CSS hinzu Also werden wir unser Projekt Abschnitt für Abschnitt aufbauen. Lassen Sie uns die Header-Elemente öffnen und sie dem Klassenheader zuweisen. Der Header wird aus drei verschiedenen Teilen bestehen. Der erste wird der Text sein, der auf der linken Seite platziert wurde. Öffnen wir also ein div-Element mit einem Klassen-Header-Text. Der Text wird durch eine Überschrift im Absatz dargestellt. Wir müssen also das H1-Überschriftenelement mit Klassenüberschrift und Text auf der ganzen Welt öffnen Klassenüberschrift und Text auf der ganzen Welt Als Nächstes öffne ich p-Elemente mit dem Klassennamen und dem Header-Absatz. Dann lasst uns einige Texte verfassen. Reisen. Es macht dich sprachlos Macht dich dann zu einem Geschichtenerzähler. In Ordnung? Als Nächstes füge ich hier ein Bild ein. Ich bin auf dem Bild des Luftballons. Geben wir hier den Pfad des Bildes an. Wir haben die Ordnerbilder und müssen dann ein PNG-Bild mit Luftballonpunkten auswählen. Als Nächstes füge ich hier das Textheaderbild ein, ich meine als Wert des Alt-Attributs. Und schließlich weisen wir dem Bildelement das Klassenattribut, den Wert Headerbild zu. Hier haben wir also das Luftballon-Bild und schließlich müssen wir ein Logo erstellen. Wie Sie sich erinnern, verwenden wir einen animierten Text als Logo. Lassen Sie uns also eine Entwicklung mit dem Klassenlogo eröffnen. Als Nächstes werde ich die H1-Überschriftenelemente einführen. Jeder Buchstabe und die Überschrift werden also durch dieses Panelelement dargestellt. Weil wir für jeden Buchstaben Animationen mit einer anderen Verzögerungszeit erstellen müssen . Öffnen wir also das Span-Element und fügen Sie hier den ersten Buchstaben T ein. Dann duplizieren Sie es sechsmal und ändern Sie die Buchstaben. Für den zweiten brauchen wir h, dann E, dann R, 0, a und D. Die Straße. In Ordnung, das war's also mit dem Markt für den Header Jetzt ist es an der Zeit, diesen Abschnitt anzupassen. Vorher möchte ich mich um den Container kümmern. Also lass uns weitermachen und es auswählen. Ich werde die Hintergrundfarbe ändern. Wie Sie wissen, haben wir ein paar Variablen für Farben erstellt . Und um sie zu verwenden, müssen wir hier die Funktion var verwenden, die eigentlich für die Variable als Argument steht. Wir müssen hier den Namen der Variablen übergeben, in diesem Fall die Sekundärfarbe. Da die Hintergrundfarbe für den Container geändert wird. Als Nächstes werde ich mithilfe von Margin etwas Platz um ihn herum schaffen . Machen wir 3,5 Rem daraus. Lassen Sie uns außerdem einen Schatteneffekt erzeugen. Verwenden wir Box Shadow mit den folgenden Werten. Wir brauchen Null, dann ein RAM, drei RAM. Und als Farbe verwenden wir wieder die Funktion var, die Farbe. Großartig. Ordnung, also jetzt, das war's mit dem Container Als nächstes müssen wir mit der Arbeit am Header beginnen . Definieren wir zunächst Breite und Höhe. Ich werde die Breite als 100% Asphalt und die Höhe festlegen. Ich werde ein paar Berechnungen anstellen. Werfen wir einen Blick auf das fertige Projekt. Wie ich oben in der Kopfzeile und unten sehe , haben wir den gleichen Speicherplatz. Jeder von ihnen entspricht 3,5 RAM, da die Größe der Marge 3,5 Rem entspricht. Um nun den gleichen Platz am Ende des Headers zu erstellen , verwende ich die folgende Berechnung. Wir müssen die Calc-Funktion verwenden, die für Calculate steht Dann müssen wir 200 Viewport-Höhe und sieben RAM abziehen. Tatsächlich entspricht eine Höhe von 100 Viewport 100% des Viewports Und die sieben RAM sind die Summe des Speicherplatzes oben und unten Wie Sie sehen können, haben wir jetzt den gleichen Speicherplatz um den Header herum. Okay? Als Nächstes definieren wir den Hintergrund für den Header. Ich werde das Bild als Hintergrund festlegen. Lassen Sie uns zunächst den linearen Gradienten verwenden. Ich werde zwei ähnliche Farben verwenden, aber mit unterschiedlichen Opazitäten. Die Farbe wird also 1811455 und die Opazität 0,5 sein 1811455 und die Opazität Als nächstes brauchen wir die gleiche Farbe. Aber mit Opazität 0,3. Danach gebe ich den Pfad des Bildes mithilfe der URL-Funktion an. Wir haben also einen Ordner namens Images und müssen den Header-Dash BG Punkt JPG auswählen. Nächste Minute in der Mitte und keine Wiederholung. Und schließlich definieren wir die Größe des Hintergrunds. Ich mache es farbig. Ordnung, wie Sie sehen können, ist das Bild als Hintergrund festgelegt und es sieht schon gut aus Die nächste Sache in Bezug auf den Header ist die Ausrichtung seiner untergeordneten Elemente, die ich Flexbox verwenden werde Eigentlich werde ich ihm keine Flusseigenschaften manuell zuweisen . Wie Sie wissen, haben wir alle bereits ein Cluster-Center erstellt, und ich werde diesen Klassennamen einfach als Header im HTML zuweisen . Alle drei Teile des Headers befinden sich also mittig darin. Lassen Sie uns weitermachen und den Kopfzeilentext anpassen. Wir brauchen also auch einige gemeinsame Stile für die Überschrift und den Absatz. Und dafür können wir ihren übergeordneten Elementen einige Stile hinzufügen . Also möchte ich den Text in der Mitte des Feldes zentrieren. Fügen wir Ihren Text ein und richten Sie ihn zentriert aus. Dann wandle Text in Großbuchstaben um und schaffe etwas Abstand zwischen den Buchstaben Lassen Sie uns den Buchstabenabstand auf 0,1 Zeilenumbruch setzen. Und jetzt können wir die Überschrift im Absatz separat anpassen. Fangen wir mit der Überschrift an. Ich werde die Schriftgröße erhöhen. Machen wir eine Straßenbahn daraus. Und dann ändere die Farbe. Ich werde deine weiße Säule verwenden. Okay, das war's mit der Überschrift. Als nächstes kümmern wir uns um den Absatz. Lassen Sie uns fortfahren und diese Elemente auswählen. Erhöhen Sie die Schriftgröße und machen Sie drei RAM daraus. Ändern Sie dann die Schriftstärke. Ich werde 500 draus machen. Und schließlich ändere die Farbe. In diesem Fall verwende ich die sekundäre Spalte, oder? Der Absatz ist also ebenfalls formatiert. Aber ich denke, es ist zu sehr gestreckt. Also werde ich die maximale Breite für den Absatz definieren . Verwenden wir die Eigenschaft max-width und machen es bis Ramp auf sieben. Um den Text zu zentrieren, verwenden wir abschließend den Rand R0 Also nein, ich denke, mit Heather-Texten sieht es viel besser aus, wir sind fast fertig Das einzige, was ich tun möchte, ist, beiden Elementen einen Schatteneffekt hinzuzufügen. Fügen wir also dem übergeordneten Element einen Textschatten mit den Werten 0,3, 0,5 RAM hinzu. Und als Farbe verwenden wir die graue Farbe. Okay, endlich sind wir mit dem Header-Text fertig und jetzt müssen wir weitermachen und mit der Arbeit am Logo beginnen Es sollte in der oberen rechten Ecke der Kopfzeile platziert werden. Dafür müssen wir die Position nutzen. Lassen Sie uns das Logo auswählen und seine Position als absolute Position festlegen. Als Nächstes mache ich die Position der Kopfzeile relativ, da wir die Position des Logos entsprechend seinem übergeordneten Element definieren müssen . Und danach definieren wir die oberen und die richtigen Positionen. Ich werde beide zur Miete machen. Das Logo befindet sich also in der oberen rechten Ecke, und jetzt müssen wir es anpassen. Wie Sie wissen, wird jeder Buchstabe von diesem Spanelement umhüllt. Lassen Sie uns weitermachen und es auswählen. Lassen Sie uns die Schriftgröße erhöhen und sie in den RAM bringen. Ändern Sie dann die Schriftstärke. Ich werde sie mutiger machen. Weisen wir also 900 zu und ändern dann die Farbe. In diesem Fall verwende ich die Primärfarbe. Dann transformiere Text in Großbuchstaben Und ändere schließlich die Hintergrundfarbe Mach es weiß. Jetzt müssen wir die Breite und Höhe jedes Buchstabens definieren . Machen wir beide zur Marke 3.5. Wie Sie sehen, werden Breite und Höhe nicht auf Buchstaben angewendet. Der Grund dafür ist, dass dieses Span-Element ein Inline-Element ist Daher können wir die Breite und Höhe dafür nicht definieren. Um das zu beheben, werde ich es vorerst zu einem Element auf Blockebene machen, weil wir irgendwann Flexbox verwenden werden Lassen Sie uns also Ihren Display-Block verwenden. Jetzt werden Breite und Höhe auf die Buchstaben angewendet. Außerdem werden sie vertikal in einer Spalte platziert da dies das Standardverhalten der Elemente auf Blockebene ist. Okay, um sie jetzt horizontal nebeneinander zu platzieren , verwenden wir Flexbox Überschriftenelement „H1 auswählen ist das übergeordnete Element für diesen Bereich , das ihm zugewiesen ist, Display-Flex Okay. Jetzt brauchen wir etwas Abstand zwischen den Buchstaben und machen sie auch abgerundet. Verwenden Sie eine Marge mit dem Wert 0,5 rem. Und dann 50 Prozent Grenzradius. Außerdem werde ich den Display-Block von hier aus loswerden , da diese Span-Elemente im Moment Flex-Elemente sind und wir diese Eigenschaft nicht mehr benötigen. In Ordnung? Das Letzte, was wir hier brauchen, ist Buchstaben in der Mitte dieser Kreise zu platzieren . Verwenden wir dazu erneut das Clusterzentrum und weisen es allen Span-Elementen zu. Richtig? Das Logo ist also maßgeschneidert. Und jetzt ist es an der Zeit, die Animation zu erstellen. Dafür werden wir CSS-Keyframes verwenden. Wir müssen Zeichen-Keyframes hinzufügen, die der Name der Animation folgen sollte Eigentlich kannst du die Animation benennen, wie du willst. In den Keyframes. Wir können einige CSS-Regeln mit einigen Schritten definieren. Und dann können wir diese Regeln mithilfe der Animationseigenschaft auf die Elemente anwenden. Wir werden also fünf verschiedene Schritte haben. Sie werden durch die Prozentwerte dargestellt. Ich fange mit Null Prozent an und mache dann 100 Prozent durch. 0-10% aller Buchstaben sollten sich nicht bewegen. Deshalb brauchen wir hier Folgendes. Wir müssen hier bei 0% angeben. Dann verwende ich innerhalb der geschweiften Klammern die Funktion Transform with Translate Y, die den Wert Null haben sollte Weil wir die Buchstaben nicht verschieben müssen. Der nächste Schritt werden zehn Prozent sein. Und eigentlich brauchen wir hier dieselbe Transformation, die Y Null übersetzt. Danach von 10 auf 15% werde ich die Vorlesungen nach oben verschieben. Der nächste Schritt werden also 50 Prozent sein. Und wir müssen hier transformieren, y mit dem Wert -100% übersetzen Dann müssen wir die Buchstaben von 15 auf 20% an ihre Positionen zurückschicken. Bei 20 Prozent müssen wir also erneut transformieren , Y Null umrechnen. Und schließlich sollten die Buchstaben zwischen 20 und 100% an ihren Positionen verbleiben. Also müssen wir erneut transformieren, Y Null übersetzen. Ordnung, das sind also die Regeln die wir auf die Briefe anwenden sollten, aber mit einer anderen Verzögerungszeit. Wir benötigen eine andere Verzögerungszeit, um sie in die richtige Reihenfolge zu bringen. Wir müssen jedes Spanelement separat auswählen. Und dafür verwende ich die Pseudoklasse für das n-te Kind. Lassen Sie uns also das Logo H1 und dann span verwenden, gefolgt vom n-ten Child-Selektor Und wir müssen hier das erste Spanelement angeben. Jetzt müssen wir dem Element verschiedene Animationseigenschaften zuweisen . Der erste wird der Name der Animation sein. Dann sollte die Dauer der Animation folgen . Dafür müssen wir die Eigenschaft Animationsdauer verwenden . Stellen wir es auf 5 s ein. Als Nächstes benötigen wir die Verzögerungszeit für den ersten Buchstaben. Ich werde 0,1 s verwenden . Um die Verzögerungszeit zu definieren, müssen wir die Animationsverzögerung verwenden. Ordnen wir ihm 0,1 s zu. Schließlich müssen wir den Wert der Eigenschaft Animationsanzahl angeben der Eigenschaft Animationsanzahl In unserem Fall müssen wir die Animation unendlich ausführen. Also brauchen wir hier Unendliches. Ordnung, also haben wir die Animation für den ersten Buchstaben definiert die Animation für den ersten Buchstaben Dafür haben wir hier ein paar Animationseigenschaften verwendet . In der Praxis können wir grundsätzlich einen verkürzten Weg verwenden. Wir benötigen nur eine CSS-Eigenschaft namens Animation, anstatt mehrere Animationseigenschaften zu verwenden. Also können wir es hier benutzen. Animation und die folgenden Werte. Der erste wird der Name sein. Dann brauchen wir eine Dauer von 5 s, gefolgt vom Verzögerungspunkt 1 s. Und schließlich brauchen wir unendlich. Von hier aus können wir all diese Immobilien einfach loswerden. Lassen Sie uns weitermachen und diesen Code sechsmal duplizieren. Weil wir sieben Buchstaben haben. Ändern Sie dann die Anzahl der Delighters und ändern Sie auch die Verzögerungszeit. Für den zweiten brauchen wir 0,2 s. Als nächstes benötigen wir 0,3 s. Dann für den vierten Buchstaben, wenn 0,4 s, 0,5 s. Der nächste ist 0,6 s. Und dann endlich brauchen wir 0,7 s. In Ordnung? Wie Sie sehen können, funktioniert die Animation und wir haben hier nette coole Effekte. Eigentlich sind wir mit dem Logo fertig und jetzt müssen wir weitermachen und uns um das Bild kümmern. Ich meine den Luftballon. Lassen Sie uns weitermachen und ein Bild auswählen. Lassen Sie uns zunächst die Größe verringern. Machen Sie seine Breite auf 35%. Schauen wir uns noch einmal die fertige Version des Projekts an. Wie Sie sehen, bewegt sich der Luftballon durch den Hintergrund der Kopfzeile. Um das zu erreichen, müssen wir eine 3D-Umgebung erstellen Und dafür haben wir in CSS eine Eigenschaft namens perspective, die wir dem Header zuweisen müssen. Im Allgemeinen definiert die Perspektiveigenschaft wie weit das Objekt vom Benutzer entfernt ist. Der niedrigere Wert erzeugt einen intensiveren 3D-Effekt. In unserem Fall brauchen wir also einen etwas höheren Wert. Also lassen Sie uns 100 Riesen darauf verteilen, oder? Wie beim Logo müssen wir auch hier CSS-Keyframes verwenden. Ich werde der Animation den Namen Image Float geben. Insgesamt werden wir also fünf verschiedene Schritte haben. Wir werden den Ballon mithilfe der Transformationsfunktion mit der Funktion translate z durch das Bild bewegen . Es ermöglicht uns, das Objekt im 3D-Raum zu bewegen. Also zwischen 0 und 40 Prozent benötigen wir die folgenden Eigenschaften und Werte. Wir brauchen hier Transform, Translate Z mit einem Wert für die Ausführung. In diesem Fall verwenden wir einen positiven Wert und er bewegt das Objekt tatsächlich in die Nähe des Benutzers. Um es zu zeigen, ich es direkt dem Bild zu. So funktioniert die Funktion Translate Z also. Wenn wir den Wert negativ machen, sagen wir -400 Runden, dann wird das Bild tief in der Kopfzeile platziert Auf den ersten Blick denken Sie vielleicht, dass die Größe des Bildes verringert wird, aber tatsächlich ist das Bild weit vom Benutzer entfernt. In Ordnung, lassen Sie uns diese Codezeile hier zu Hause loswerden. Neben der Transformationseigenschaft verwende ich während der Animation die Opazität, um die Opazität geringfügig auf Null Prozent zu ändern . Machen wir eins daraus. Eigentlich können Sie diese Eigenschaft hier überhaupt weglassen, da standardmäßig die Opazität für jedes Element auf eins gesetzt ist Aber ich benutze es auf jede Art und Weise, um den Arbeitsprozess übersichtlicher zu machen. In Ordnung, das war's, ungefähr die 0%. Im nächsten Schritt werden 40 Prozent, 0-40%, wir müssen den Luftballon tief ins Bild bewegen Deshalb brauchen wir hier Transform, Translate Z einen Wert von -500 g. Außerdem müssen wir das Muster ein wenig nach rechts verschieben das Muster ein wenig nach rechts Also werde ich die Funktion translate x verwenden. Der Wert 150 ist abgelaufen. Wir brauchen das, weil sich der Staffelstab standardmäßig in die Mitte des Bildes bewegt standardmäßig in die Mitte des Bildes Lassen Sie uns abschließend die Opazität verwenden. Ich werde es leicht verringern, machen wir es auf 0,8. In Ordnung, der nächste Schritt werden 70% sein. Lassen Sie uns diesen Schritt hier duplizieren. Ich werde die Werte ändern. Wir brauchen 70% Von 40 bis 70% Wir müssen den Ballon noch tiefer in das Bild bewegen. Also werde ich hier die 1.500 Rampe passieren. Was die X-Richtung angeht, müssen wir gleichzeitig die Richtung des Ballons explizit ändern . Also werde ich den Wert der Translate X-Funktion erhöhen . Machen wir eine 800er-Rampe draus. Und schließlich die Opazität verringern, auf 0,6 erhöhen. Okay, der nächste Schritt werden 80 Prozent sein. Lassen Sie uns diesen Code noch einmal von 70 auf 80% duplizieren. Wir müssen den Ballon zurück und näher an den Benutzer herankommen lassen. Lassen Sie uns also die Werte ändern. Fügen wir hier -50 RAM ein. Dann brauchen wir 100 Rampen und die Opazität 0,8. Und schließlich müssen wir bei 100% den Wert der Eigenschaftsfunktion Translate Z dem Startpunkt gleichsetzen Eigenschaftsfunktion Translate Z . Wenn Sie also Translation Z mit einem Wert für t transformieren, führen Sie den Opazitätswert eins In Ordnung, mit den Keyframes sind wir fertig. Und jetzt müssen wir diese Regeln mithilfe der Animationseigenschaft auf das Bild anwenden . Weisen wir ihm den Namen image fold zu. Moment definiere ich die Dauer als 5 Im Moment definiere ich die Dauer als 5 s. Damit ich den gesamten Animationsprozess schnell sehen kann. Außerdem müssen wir hier die Animation unendlich machen. Wie Sie sehen können, bewegt sich der Ballon also in die richtige Richtung. Das einzige Problem, das wir hier haben, sind diese Scrollbalken. Und eigentlich können wir das einfach beheben, indem wir overflow hidden verwenden, dem Container zugewiesen werden sollte In Ordnung, also funktioniert alles gut. Lassen Sie uns einfach die Dauer der Animation erhöhen. Ich mache es 1/52. In Ordnung, das war's mit dem Header. Alles funktioniert perfekt und jetzt müssen wir weitermachen und mit der Arbeit am nächsten Abschnitt beginnen. 75. Projekt 8 - Erstelle und style den beliebtesten Tour-Abschnitt: Tatsächlich wird der Code Schritt größer, weil das Projekt selbst groß ist. Bevor wir mit der Erstellung des nächsten Abschnitts beginnen , denke ich, dass es besser ist, wenn wir einige Kommentare zu unseren HTML- und CSS-Dateien hinzufügen . Wir haben hier einen Header. Fügen wir den Header ein. Dann von Header. Im nächsten Abschnitt geht es um beliebte Touren. Fügen wir hier beliebte Touren hinzu. Und dann Ende der beliebten Tools. Für das CSS. Zu Beginn haben wir einige gemeinsame Stile. Also werde ich hier gängige Stile zusammenfassen. Und dann am Ende, richtig? Und von gängigen Stilen. Dann haben wir den Header, dann n des Headers. Und zum Schluss füge ich hier beliebte Touren und beliebte Tools hinzu. Okay, schauen wir uns das fertige Projekt noch einmal an Also werden wir den zweiten Abschnitt bauen , den wir die beliebten Touren nennen. Es besteht aus einer Überschrift und drei verschiedenen Karten. Jede Karte hat zwei Seiten, Vorder- und Rückseite. Auf der Vorderseite haben wir ein Button-Bild, Bildhintergrund mit Überschrift. Und unten haben wir einige Bedingungen für H2. Wenn wir den Preisbutton abholen, werden auf der Rückseite der Preis und die Schaltfläche für die Buchung angezeigt Preis und die Schaltfläche für die Buchung Wenn ich hier auf die Schaltfläche Zurück klicke wird die Vorderseite wieder angezeigt. In Ordnung, das ist krank, was wir tun werden. Lassen Sie uns weitermachen und mit der Erstellung des HTML-Markups beginnen . Ich werde den Abschnitt Element mit Klasse, beliebter Tourist eröffnen . Als Nächstes füge ich hier die H1-Überschrift mit dem Klassennamen ein, beliebte Touristenüberschrift Und mit dem Text am beliebtesten. In Richtung. Als Nächstes brauchen wir die Entwicklung, die die Hülle der Karten sein wird Lassen Sie uns ihm also einen Wrapper für Klassennamenkarten zuweisen. Danach erstelle ich die Karte selbst. Lassen Sie uns also weitermachen und ein Div-Tag mit der Klassenkarte öffnen. Also werden wir eine Karte erstellen und sie dann zweimal duplizieren. Wie gesagt, jede Karte besteht aus zwei verschiedenen Teilen, der Vorderseite und der Rückseite Fügen wir also eine weitere Entwicklung mit dem Klassennamen an der Vorderseite ein. In diesem div-Element werden wir also eine Bildüberschrift, eine Liste und die Schaltfläche haben . Fügen wir also Ihr IMG-Element ein, das Quellattribut. Geben wir den Teil der Datei an. Wir haben einen Bilderordner. Und dann wähle ich Forest Dot JPEG aus. Und das Alt-Attribut. Ich werde Wald anlegen. Und außerdem werde ich hier ein Klassenattribut mit einem Wertkartenbild hinzufügen . Als Nächstes benötigen wir die H1-Überschriftenelemente mit einem Klassennamen Fügen wir hier den Namen des Tors ein, das der wilde Wald sein wird. Die Bedingungen des Drehmoments werden also in der Liste dargestellt. Öffnen wir das UL-Element mit der Liste der Klassennamenkarten. Insgesamt werden wir also fünf verschiedene Listenpunkte haben. Öffnen wir das LI-Element mit einer Klassennamenkarte, einem Listenelement. Und füge hier die erste Bedingung ein, sieben Tage Dann werde ich sie viermal duplizieren. Und wir müssen auch den Inhalt ändern. Der zweite Punkt wird sich an bis zu 20 Personen richten. Als nächstes werden wir vier Reiseleiter haben. Versetzen Sie sich auch in private Zeitform. Und zum Schluss werde ich hier die Schwierigkeit angeben. Mittel. Das letzte Element auf der Vorderseite wird der Knopf sein. Öffnen wir also das Button-Tag mit einem Klassennamen, Navigationsschaltfläche. Ich verwende Ihre Navigation, weil wir mit Hilfe dieser Schaltfläche zwischen der Vorder- und Rückseite navigieren . Fügen wir es hier ein. Preis. Außerdem werde ich HTML5-Entitäten verwenden Ich möchte die Schilder zeigen, die größer sind als die anderen. Dazu müssen wir hier GT einfügen und vorstellen, was für größer als steht. Als. Wir brauchen ein Semikolon Wieder die gleichen Charaktere. In Ordnung, das war's mit der Vorderseite. Lass uns weitermachen und die Rückseite erstellen. Es wird kleiner sein, weil wir nur drei verschiedene Elemente haben werden . Lassen Sie uns weitermachen und das Div-Tag mit einem Klassennamen auf der Rückseite öffnen . Dann lass uns weitermachen und diesen Button von hier kopieren. Also statt des Preises müssen wir hier zurücksetzen, aber wir müssen ihn hinter den HTML5-Entitäten schreiben Und statt der Zeichen, die größer sind als Zeichen, brauchen wir weniger als Also statt GT brauchen wir U, L, T. Okay, als nächstes kommt die Überschrift. Lassen Sie uns also die H3-Überschrift mit dem Klassennamen für den Preis öffnen mit dem Klassennamen für den Preis öffnen Ich gebe 399$ her. Und schließlich brauchen wir noch einen Button für die Buchung. Es ist also ein Open-Button-Tag mit dem Klassenkarten-Button. Und dann geben Sie hier die Buchung ein. In Ordnung, das war's also mit der ersten Karte. Insgesamt werden wir drei davon haben. Lass uns weitermachen und die gesamte Karte zweimal duplizieren. Und dann ändere ein paar Dinge. Wir müssen hier auswählen. Flusspunkt JPG. Ändern Sie auch das Alt-Attribut. Wir brauchen hier River. Dann werde ich als Überschrift hier entlang des Flusses angeben. Als Nächstes werde ich die Bedingungen ändern, die wir hier brauchen. Neun Tage haben bis zu 30 Personen, sieben Reiseleiter, zerrissen . Die nächste Bedingung wird dieselbe sein. Also werde ich es so lassen, wie es ist, je nach Schwierigkeit. Machen wir es uns schwer. Und ändere auch den Preis. Machen wir 499$ draus. Okay. Lassen Sie uns weitermachen und diese Dinge auch für die dritte Karte ändern. Wir brauchen hier C-Punkt-JPG. Ändern Sie auch den Wert des Alt-Attributs. Ich füge das hier ein, siehst du, die Überschrift wird der Inselstrand sein. Dann ändere die Bedingungen. Wir brauchen hier fünf Tage Torr. Als nächstes werden bis zu 40 Personen, Essen, Reiseleiter, dann Übernachtung im Hotel sein. Dann werde ich die Schwierigkeit einfach machen. Und schließlich den Preis ändern, 599$ draus machen Ordnung, verkaufen, das HTML-Markup Moment sehen Karten hässlich aus, weil wir hier nur das reine HTML haben. Lass uns weitermachen und anfangen , etwas CSS zu schreiben. Zunächst werde ich oben und unten etwas Platz schaffen. Wählen wir also das Abschnittselement aus, dem die Klasse beliebte Touren und dem Polster zugewiesen ist Ich mache eine Polsterung oben, Fibrin, dann Null auf der Tan rannte nach unten. Und schließlich Null auf der linken Seite. Als Nächstes kümmere ich mich um die Überschrift dieses Abschnitts. Wählen wir dieses Element aus. also zunächst Lassen Sie uns also zunächst die Schriftgröße erhöhen und acht RAM daraus machen. Dann setze ich die Überschrift mithilfe von Text Align Center in die Mitte. Als Nächstes werde ich am unteren Rand der Überschrift etwas Platz schaffen , indem ich Rand, Bottom verwende. Setzen wir es auf acht. Rann. Ändere die Farbe. Lassen Sie uns Ihre Primärfarbe verwenden. Und schließlich werde ich einen Schatteneffekt mithilfe von Textschatten mit den folgenden Werten erstellen . Wir brauchen hier Null, dann 0,1 RAM, zeigen auf RAM und die primäre Spalte. Okay, wie Sie sehen können, ist die Überschrift gestylt und sieht gut aus Als Nächstes kümmere ich mich um die Karten. Lassen Sie uns sie zunächst horizontal nebeneinander ausrichten. Dafür wähle ich den zugewiesenen Kartenwickel , Display Flex Um einen gleichmäßigen Abstand zwischen den Karten zu schaffen, verwenden wir den Inhaltsbereich gleichmäßig ausrichten. Die Karten werden also nebeneinander gelegt, aber im Moment haben wir diesen Abstand zwischen ihnen nicht Der Grund ist die Breite der Bilder. Also lass uns weitermachen und uns um sie kümmern. Wählen Sie zunächst die Karte selbst aus und definieren Sie ihre Breite. Ich setze es auf 35 Ran. Wählen Sie dann ein Bild mit dem Klassenkartenbild aus und definieren Sie seine Breite. Machen Sie es zu 100%. In diesem Fall erbt das Bild also die Breite des übergeordneten Elements Wie Sie sehen können, sind die Bilder jetzt kleiner und wir haben diesen Abstand zwischen den Karten. Okay, jetzt lass uns weitermachen und anfangen, an der Vorderseite zu arbeiten Ich wähle es aus. Zuerst. Lassen Sie uns die Steuer und das Zentrum mithilfe der Textausrichtung in der Mitte platzieren Zentrum mithilfe der Textausrichtung in der Mitte Dann ändere die Hintergrundfarbe. Ich werde hier Angestellte verwenden. Danach werde ich die Vorderseite ein wenig abgerundet machen, indem ich die Randradius-Punkt-Wiederholung verwende . In Ordnung? Moment sehen wir aufgrund des Bildes nur unten einen Randradius Also müssen wir auch die oberen Ecken des Bildes abgerundet machen . Also lassen Sie uns dem Bild den Randradius zuweisen. Wenn Sie die einzelnen Ecken der Elemente um das Element herum gestalten möchten , können Sie der Eigenschaft border-radius mehrere Werte zuweisen der Eigenschaft border-radius mehrere Werte zuweisen Der erste gehört in die obere linke Ecke. Machen wir 0,3 draus. Rem. Als nächstes kommt die obere rechte Ecke. Ich setze es auf den gleichen Wert, 0,3 RAM. Dann haben wir die untere rechte Ecke. Machen wir es auf Null. Und schließlich müssen wir die untere linke Ecke angeben. Machen wir es auch auf Null. In Ordnung, jetzt haben wir an allen vier Ecken des Autos einen Grenzradius Lassen Sie uns weitermachen und das Überschriftenelement anpassen. Zuallererst werde ich die Schriftgröße erhöhen. Machen wir etwa 2,5. Ändern Sie die Schriftstärke, stellen Sie sie auf 700 und wandeln Sie Text in Großbuchstaben Danach ändere ich die Position der Überschrift. Ich möchte es in der unteren rechten Ecke des Bildes platzieren . Machen wir seine Position also absolut. Um es dann entsprechend seinem übergeordneten Element, der Vorderseite , zu positionieren entsprechend seinem übergeordneten Element, der Vorderseite , zu , müssen wir dem übergeordneten Element eine relative Position zuweisen Danach definieren wir die oberen und die richtigen Eigenschaften. Ich werde es auf 30% erhöhen. Was die richtige Position angeht, lassen Sie uns 1,5 daraus machen. Führen Sie die Zelle aus, die Überschrift ist positioniert. Als Nächstes ändere ich die Farbe. Lass es uns weiß machen. Und füge auch einen Schatteneffekt hinzu. Verwenden Sie einen Textschatten mit den Werten 001 run und der schwarzen Spalte. In Ordnung, das war's mit der Überschrift. Lassen Sie uns weitermachen und mit der Liste fortfahren. Lassen Sie uns Listenelemente mithilfe der Kartenliste auswählen. Ich werde seine Breite definieren. Ich meine, ich möchte seine Breite verringern. Machen wir es also zu 80%, denn um die Liste zu zentrieren, müssen wir Margin Auto verwenden. Und zum Schluss lassen Sie uns etwas Platz in der Liste schaffen. Ich werde zum Laufen Polster drüber legen. Dann Null auf der rechten Seite. Drei Rem unten und Null auf der linken Seite. Ordnung, jetzt ist es an der Zeit, die Listenelemente anzupassen . Lassen Sie uns fortfahren und sie auswählen. Definieren wir zunächst die Schriftgröße. Machen Sie 1,6 RAM daraus, ändern Sie dann die Schriftstärke, setzen Sie sie auf 500 und ändern Sie die Farbe. In diesem Fall verwende ich eine hellgraue Spalte. Okay, die Artikel sehen also besser aus, aber wir müssen ihnen einige weitere Stile hinzufügen. Lassen Sie uns am oberen und unteren Rand des Elements etwas Platz schaffen , indem wir Margin mit den Werten für RAM und Null verwenden. Dann erstelle ich unten eine Grenze. Verwenden wir also die Eigenschaft border bottom mit den Werten 0.1 und der primären Spalte. Wie Sie sehen können, hat jedes Listenelement unten einen Rahmen, aber sie liegen zu nahe beieinander. Also müssen wir etwas Platz hinzufügen. Und lassen Sie uns den Raum mithilfe von Polstern erstellen. Unten mit dem Wert 1,5 rampe. In Ordnung, also bis auf den Preisbutton ist alles gestylt. Moment werden wir es nicht stylen , weil beide Knöpfe, ich bin nur der preiswerte Button und der Back-Button, die gleiche Klasse haben. Und ich denke, es wäre besser, wenn wir zuerst mit der Rückseite beginnen und uns dann um die Knöpfe kümmern Also lass uns weitermachen und Rückseite auswählen. Zuallererst werde ich mich um die Position kümmern. Machen wir es absolut. Um die Position entsprechend der Karte zu bestimmen, weisen wir der Karte die relative Position zu. Definieren Sie dann die oberste Position. Machen wir es auf Null und ändern die Hintergrundfarbe. Stellen wir es auf die Primärfarbe ein. Ordnung, so sieht die Rückseite jetzt Ich werde es auf die gesamte Karte ausdehnen. Lassen Sie uns dafür Breite und Höhe auf 200% festlegen. Okay, als nächstes machen wir es abgerundet und fügen noch einen Schatteneffekt Ich werde den Grenzradius mit dem Wert 0,3 ramp verwenden. Und dann Box Shadow mit den Werten Null bis Ram. Für RAM. Und die Farbe 777. Okay, jetzt müssen wir die Elemente auf der Rückseite ausrichten und dann müssen wir sie anpassen. Dafür platziere ich die Elemente in der Mitte. Lassen Sie uns Flexbox verwenden und einfach das Klassennamencenter auf der Rückseite hinzufügen. In HTML. Die Elemente werden in der Mitte platziert. Sie sind Seite an Seite platziert und eigentlich brauchen wir sie nicht Wir müssen die Biegerichtung ändern und daraus eine Spalte machen. Richtig? Als Nächstes passen wir den Preis und die Schaltfläche für die Buchung an. Wählen Sie Gesamtpreis aus. Lassen Sie uns die Schriftgröße erhöhen. Mach fünf Rem draus. Ändern Sie die Schriftstärke. Ich setze es auf 300, mache dann die Farbe weiß und schaffe auch unten etwas Platz, indem ich die Rampe für den Rand unten drei verwende. In Ordnung, der Preis sieht also gut aus. Gehen wir weiter und gehen wir zur Schaltfläche über. Wählen wir es aus. Ich ändere die Farbe. Machen wir es primär. Dann ändere die Hintergrundfarbe. Ich mache es weiß. Entfernen Sie den Standardrahmen mit border none. Und dann ändere die Schriftgröße, mache 2,5 runde. In Ordnung, lassen Sie uns weitermachen und einige weitere Stile hinzufügen. Ich werde mithilfe von Padding etwas Platz innerhalb der Schaltfläche schaffen Padding etwas Platz innerhalb der Schaltfläche Stellen wir es auf einen Rem oben und unten und zwei Rems auf der rechten und linken Seite Außerdem werde ich den Abstand zwischen den Buchstaben vergrößern , indem ich seitliche Abstandspunkte verwende. Dann drehe den Knopf mit dem Randradius um. Setzen wir es auf fünf Rem. Und schließlich ändern Sie den Typ des gröberen Geräts und machen Sie es zum Zeiger Ordnung, der Preis und der Tiefpunkt sind also angepasst, und jetzt ist es an der Zeit, die Navigationsschaltflächen zu gestalten Ich bin in der Zurück-Taste und der Preistaste, die sich auf der Vorderseite befindet. Wählen wir also die Navigationsschaltfläche aus. Zunächst platziere ich es in der oberen linken Ecke der Karte Lassen Sie uns seine Position also auf absolut setzen. Definieren Sie dann die oberen und rechten Eigenschaften. Ich werde für beide eine 2,5-Rampe einrichten. Okay, der Knopf ist also positioniert. Lassen Sie uns nun weitermachen und es anpassen. Ich setze das Padding auf 0,5 RAM ändere dann die Hintergrundfarbe Und in diesem Fall werde ich den RGBA-Wert verwenden. Ich meine die weiße Farbe mit der Opazität 0,8. Dann ändere die Farbe. Ich werde deine hellgraue Farbe verwenden. Machen Sie dann die Taste mit einem Randradius von 0,3 RAM abgerundet. Und entfernen Sie den Standardrahmen mit border none. Okay, lassen Sie uns abschließend den Text anpassen. Definieren Sie die Schriftgröße, machen Sie 1,5 RAM daraus. Stellen Sie dann die Schriftstärke auf 600 ein. Transformieren Sie außerdem Text in Großbuchstaben. Erstellen Sie dann mithilfe des Buchstabenabstands etwas Abstand zwischen den Buchstaben. Zeigen Sie auf RAM. Und zum Schluss machen Sie den Cursorzeiger. Okay, also beide Seiten, ich bin vorne und hinten, sind gestylt. Alles ist vorbereitet , damit die Karte funktioniert. Zuallererst müssen wir die Vorderseite nach hinten anzeigen. Verwenden wir dafür die Index-Eigenschaft. Setzen wir es auf zehn. Danach müssen wir eine 3D-Umgebung erstellen, da sich, wie Sie wissen, die Vorder- und Rückseite im 3D-Raum bewegen sollten Um die 3D-Umgebung zu erstellen, müssen wir also eine Eigenschaft verwenden, die als prospektiv bezeichnet wird. Stellen wir die Rampe auf 150 ein. Dann müssen wir die Rückseite dorthin verschieben, wo die Translate-Z-Funktion liegt Verwenden wir also Transform. Übersetze Z mit einem Wert von minus fünf ran. Und außerdem müssen wir es ein bisschen auf die rechte Seite verschieben. Verwenden wir dazu die Funktion Translate X mit dem Wert three ramp. In Ordnung, also sind beide Seiten richtig platziert. Als Nächstes werde ich die Opazität für beide Seiten verringern, aber mit unterschiedlichen Werten Ich mache die Opazität der Vorderseite auf 0,9. die Rückseite angeht, weisen wir ihr eine Opazität von 0,5 zu Ordnung, jetzt sind wir bereit, das Klick-Event zu erstellen und die harte Arbeit zu machen , dass wir JavaScript verwenden Sobald wir also auf die Schaltfläche klicken , sollte die Rückseite angezeigt werden, und auch die Opazitäten und Schatten Gehen wir also zur Datei script.js. Zunächst müssen wir beide Tasten auswählen. Beide haben den gleichen Klassennamen, die gleiche Navigationsschaltfläche. Und um sie auszuwählen, verwende ich eine Query Selector All-Methode In der Klammer müssen wir den Klassennamen angeben, der die Navigationsschaltfläche ist Diese Methode gibt eine Knotenliste zurück, die ein Array-ähnliches Objekt ist Wir müssen es in ein Array umwandeln. Dann müssen wir uns die Schaltflächen ansehen und an beide den OnClick-Eventhandler anhängen Um die Knotenliste in ein Array umzuwandeln, müssen wir die Methode ES6 Array from verwenden, um die Elemente zu durchsuchen und den OnClick-Event-Handler an sie anzuhängen OnClick-Event-Handler an sie anzuhängen Verwenden wir eine der Array-Hilfsmethoden namens for-each Tatsächlich hilft uns diese Methode, die Funktion für jedes Array-Element separat auszuführen . Wir müssen eine Callback-Funktion übergeben, die ein Argument annehmen sollte Und es wird das aktuelle Objekt des Arrays sein. Und jetzt müssen wir das Objekt an den OnClick-Event-Handler anhängen das Objekt an den OnClick-Event-Handler Also brauchen wir Item Dot OnClick. Wir müssen ihm eine Pfeilfunktion zuweisen. In Ordnung, lassen Sie mich erklären, was wir tun werden. Eigentlich werden wir eine neue Klasse und CSS erstellen, die dann der Karte aus JavaScript zugewiesen werden. Diese Klasse wird uns helfen, neue CSS-Stile zu definieren, die bei Klick auf die Vorder- und Rückseite angewendet werden sollen Klick auf die Vorder- und Rückseite Jetzt müssen wir dem Kartendeck einen schnellen Wechsel zuweisen. Es wird der Name der neuen Klasse sein. Um die Karte auszuwählen, verwende ich die DOM-Navigation. In diesem Fall bezieht sich das Element auf die Navigationsschaltfläche. Dann müssen wir mit der Eigenschaft des übergeordneten Elements eine Ebene nach oben gehen . Dann müssen wir wieder eine Ebene höher gehen. Und schließlich werden wir zur Karte greifen. Jetzt müssen wir eine Eigenschaft namens Klassenliste verwenden, die alle Klassen speichert, die das Element hat. Dann müssen wir die Zelle mit der Umschaltmethode verwenden. Toggle-Methode fügt dem Element den Klassennamen hinzu, wenn es nicht existiert, und entfernt ihn aus dem Element, falls es existiert Abschließend fügen wir hier den Klassennamen ein. Veränderung. In Ordnung, das war's also mit dem JavaScript Kehren wir zur CSS-Datei zurück und wählen die Änderung des Klassennamens aus. Darauf sollte die Vorderseite folgen. Aber wir müssen hier einen dieser CSS-Kombinatoren verwenden , den sogenannten Child Selector, der durch das Größer-Als-Zeichen ausgedrückt wird Tatsächlich wählt der Child-Selektor alle Elemente aus, die einem bestimmten Element untergeordnet sind einem bestimmten Element untergeordnet Sobald wir also auf die Schaltfläche klicken, erhält das Auto einen neuen Klassenwechsel und die gesamte Auswahl ist gültig. Jetzt müssen wir die Styles definieren, die wir der Vorderseite bei Klick zuweisen wollen , beide Seiten tauschen ihre Positionen, Schatten, Opazitäten und die Z-Index-Eigenschaft gegen die Vorderseite aus, wir benötigen hier Transformieren, wir benötigen hier Transformieren, Translate Z Funktionswert Außerdem müssen wir den X-Wert in drei RAM übersetzen. Als nächstes kommt Box Shadow, wo die Werte Null für RAM, Foreign und die Farbe 777 stehen. Als Nächstes setze ich die Opazität auf 0,5. Der Z-Index sollte gleich Null sein. In Ordnung, als nächstes brauchen wir dasselbe für die Rückseite. Ich kopiere diesen Code von hier und füge ihn unten ein. Mit der Rückseite. Wir brauchen Rückseite statt Vorderseite. Lassen Sie uns die Werte hier ändern. Wir brauchen Null. Und Stan wieder Null. Was den Box-Shadow angeht, so sollte er 0,5 Rem zu RAM haben. Und die Farbe AAA. Als Nächstes setze ich die Opazität auf 0,9. Soweit der Z-Index. Ich werde es loswerden. In Ordnung? Wenn ich auf die Schaltfläche klicke, funktioniert die Standardkarte einwandfrei. Das einzige, was wir tun müssen, ist, den Effekt glatter zu machen. Dafür müssen wir Transition nutzen. Fügen wir hier eine Opazität mit einer Dauer von 0,4 s ein. Als Nächstes müssen wir mit derselben Dauer transformieren Und auch Box-Shadow 0.4 s. Eigentlich könnten wir hier alle anstelle dieser Eigenschaften verwenden Aber dann würden wir auch den Index mit einbeziehen und das würde den Effekt zunichte machen. Okay, kopieren wir diese Codezeile und fügen sie auch für die Rückseite In Ordnung, jetzt funktioniert alles perfekt. Wir haben nette coole Übergangseffekte. Eigentlich sind wir mit diesem Abschnitt fertig und es ist an der Zeit , weiterzumachen und mit dem Bau des nächsten zu beginnen. 76. Projekt 8 - Erstelle und passe den Abschnitt mit Erfahrungsberichten an: Im nächsten Abschnitt werden die Geschichten sein, die Geschichten der Kunden. Schauen wir uns das fertige Projekt an. Wir haben also zwei Kunden mit ihren Geschichten und dem Videohintergrund. Also 12, in diesem Teil, wirst du lernen können, wie man das Video als Hintergrund einstellt. Okay, lassen Sie uns wie immer mit der Erstellung von HTML-Markup beginnen Eigentlich werden wir zuerst diesen Torus bauen und uns danach um den Videohintergrund kümmern den Videohintergrund kümmern Fügen wir neue Kommentare und Geschichten ein. Dann von Geschichten. Und öffnen Sie den Abschnitt Klassengeschichten. Als nächstes benötigen wir ein Div-Element , das beide Geschichten umschließt. Lassen Sie uns ihm also einen Wrapper für Klassengeschichten zuweisen. Insgesamt werden wir also zwei Geschichten haben. Lassen Sie uns die Entwicklungen eröffnen, die dazu verwendet werden, den Hintergrund der Geschichte zu erstellen und zu manipulieren Also ordne ihr eine Klassengeschichte zu, sei G. Und dann stell diesen Turm selbst her. Ich werde ein weiteres Div-Tag mit einer Klassengeschichte öffnen. Jede Geschichte wird also aus einer Bildüberschrift, dem Absatz, bestehen . Fügen wir hier IMG-Elemente ein. Im Quellattribut. Ich werde den Pfad des Bildes im Bilderordner angeben. Ich wähle Story, IMG One Dot JPEG. Dann füge ich als Wert des Alt-Attributs hier das Kundenbild ein. Und schließlich füge ich hier hinzu, dass das Klassenattribut das Story-Image abwerten würde Auf das Bild sollte also der Text der Geschichte folgen. Wie gesagt, es werden die Überschrift und der Absatz sein. Sie werden von der Entwicklung abgedeckt. Lassen Sie uns also mit einer Klasse Geschichtstexte erstellen , in die Ihr H1-Überschrift-Tag mit der Überschrift des Klassennamens eingefügt H1-Überschrift-Tag mit der Überschrift des Klassennamens Ich werde hier ein paar Texte schreiben. Nehmen wir an, dies waren die besten Tage dieses Jahres. Als Nächstes erstelle ich einen Absatz mit dem Absatz der Klassengeschichte. Und ich füge hier einen Scheintext ein. In Ordnung, das ist also die erste Geschichte. Wir brauchen zwei davon, also lass es uns einmal duplizieren und dann einige Änderungen vornehmen. Ich werde den Namen des Bildes ändern, das img2-Punkt-JPG speichern wird Ebenfalls. Ändere die Überschrift hier, oder? Die haben mir Spaß gemacht. Großartig. In Ordnung, also jetzt, das war's mit dem HTML-Markup Lass uns weitermachen und anfangen , etwas CSS zu schreiben. Ich werde neue Kommentare einfügen, Geschichten. Und Geschichten. Wählen Sie dann die Elemente dieses Abschnitts und schaffen Sie oben und unten mit Hilfe von Polstern etwas Platz und unten mit Hilfe von Polstern Wir brauchen hier Tan Ran Ran und dann Null auf der linken und rechten Seite. Danach wählen wir den Wrapper der Geschichten aus. Also werde ich Geschichten in den Mittelpunkt dieser Aktion stellen . Und sie sollten vertikal platziert werden. Verwenden wir dafür Flexbox. Ich meine Display-Flex. Im Allgemeinen richtet Display Flex Elemente horizontal nebeneinander aus Deshalb müssen wir die Richtung ändern und wir müssen sie zu einer Spalte machen. Wir brauchen also eine Spalte mit flexibler Richtung. Um die Elemente dann horizontal zu zentrieren, müssen wir die Elemente in der Mitte ausrichten. Als Nächstes wählen wir den Hintergrund der Geschichte aus. Es hat Klassenname, Geschichte PG. Irgendwann wird der Hintergrund der Geschichte also der weißen Farbe ähneln. Aber jetzt, bevor wir uns den Videohintergrund kümmern, lassen Sie uns die Hintergrundfarbe der Geschichten hellgrau machen, um sie sichtbar zu machen. Bevor wir weitermachen und dem Hintergrund weitere Stile hinzufügen, kümmern wir uns um die Bilder denn im Moment sind sie zwei größer. Also wähle ich das Bild aus. Definieren wir zunächst die Breite und Höhe. Lass uns beide zu 20 Runs machen. Außerdem werde ich sie mit dem Randradius mit dem Wert 50 Prozent abgerundet machen Randradius mit dem Wert 50 Prozent Und außerdem müssen wir Objekt verwenden. Wir würden uns damit befassen Okay, gehen wir zurück zum Hintergrund. Ich werde darin etwas Platz schaffen. Dafür verwende ich Polsterung. Setzen wir es auf fünf Rem. Dann brauchen wir etwas Platz um den Hintergrund herum. Dafür. Verwenden wir Margin und setzen es ebenfalls auf fünf RAM. Richtig? Danach vergrößern wir die Breite des Hintergrunds machen ihn zu 70% aus diesem Abschnitt. Und dann erstelle einen Schatteneffekt, indem du Box Shadow mit den Werten Null verwendest, um fünf Rem auszuführen. Und als Farbe verwende ich den RGBA-Wert. Platzieren wir hier 5013 Mal und dann die Opazität, 0,4. In Ordnung, Schritt für Schritt sieht die Geschichte besser aus. Schauen wir uns das fertige Projekt noch einmal an. Wie Sie sehen können, ist die Form des Hintergrunds unterschiedlich. Es ist schief. Und das werden wir mit der Funktion Transform mit der Funktion Skew X erreichen Transform mit der Funktion Skew X Tatsächlich ermöglicht es uns , das Element entsprechend der X-Achse zu skalieren . Also müssen wir uns transformieren. Dann schiefe die X-Funktion. Und in die Klammer füge ich 20 Grad ein Wie Sie sehen können, ist der Hintergrund schief, aber wir haben hier ein kleines Problem Der Inhalt der Geschichte ist ebenfalls verzerrt. Um das zu beheben, können wir die Geschichte selbst im gleichen Maße nach hinten verzerren Also wählen wir die Geschichte aus. Und ich gebe hier Transform Skew x ein. Und als Wert gebe ich -20 Grad In Ordnung, jetzt ist das Problem behoben. Als Nächstes platziere ich das Bild und den Text nebeneinander Verwenden wir dafür Display Flex. Danach passen wir die Überschrift und einen Absatz an. Aber außerdem denke ich, dass wir etwas Abstand zwischen dem Bild und dem Text hinzufügen müssen . Verwenden wir also Margin-Right. Fünf. Lassen Sie uns weitermachen und Überschriftenelemente auswählen. Es hat den Klassennamen Tori Heading. Kümmern wir uns zunächst um die Schriftgröße. Ich mache es bis zum Zeigefibrin und wandle es dann in wandle es dann Ändern Sie auch die Farbe. In diesem Fall verwende ich die Farbe Grau. Lassen Sie uns abschließend etwas Platz am unteren Rand schaffen, indem wir den Rand unten mit dem Wert eine Rampe verwenden. Das war's mit der Überschrift. Lassen Sie uns weitermachen und den Absatz auswählen, den ClassName-Story-Absatz Erhöhen wir die Schriftgröße, machen wir es auf 1,8 Rem. Dann ändere die Farbe. Sie sehen Ihre hellgraue Säule. In Ordnung, die Überschrift und der Absatz sehen also gut aus. Ich möchte hier zwei weitere Dinge hinzufügen. Lassen Sie uns den Absatz ein wenig einrücken und auch etwas Abstand zwischen den Buchstaben schaffen, ich meine, zwischen den Buchstaben der Überschrift und dem Absatz Also wähle ich ihr übergeordnetes Element aus, nämlich div mit einem Klassengeschichtentext. Verwenden wir hier den Buchstabenabstand 0,1. Führen Sie das aus, um den Absatz einzuziehen Ich wähle den ersten Buchstaben Dafür müssen wir ein Pseudoelement verwenden, das als erster Buchstabe bezeichnet wird Wählen wir also zuerst Paragraph und fügen dann hier Pseudoelemente Erster Buchstabe. Wir müssen auf der linken Seite etwas Platz schaffen. Verwenden Sie also den linken Rand mit dem Wert eine Runde. In Ordnung? Das war's also mit den Geschichten. Alles ist bereit, um mit der Arbeit am Videohintergrund zu beginnen . Gehen wir zunächst zur Datei index.html und fügen das HTML-Markup für das Video Ich werde das Div-Tag mit einem Klassenvideocontainer öffnen. Dann müssen wir ein Video-Tag verwenden, was in HTML5 eigentlich neu ist Ich werde ihm ein ClassName-Video zuweisen. Außerdem müssen wir hier ein paar Attribute hinzufügen . Das erste wird Autoplay sein Dieses Attribut ermöglicht es uns, das Video automatisch abzuspielen. Der nächste wird stummgeschaltet. Das Video wird ohne Ton abgespielt. Und schließlich brauchen wir einen Loop, der das Video abspielt, ohne anzuhalten. Danach müssen wir die Quelle des Videos mithilfe eines Quelltags angeben , das ist eigentlich das selbstschließende Tag Dann benötigen wir hier Quellattribute , in denen wir den Pfad des Videos angeben müssen. Es befindet sich im Ordner Images. Neben dem Quellattribut müssen wir auch ein Typattribut verwenden, in dem wir den Typ des Videos angeben sollten. Ich werde es auf Video Slash MP4 einstellen. Ordnung, wie Sie sehen können, wird das Video abgespielt und jetzt müssen wir uns um seine Position kümmern Lassen Sie uns weitermachen und den Container auswählen und seine Position auf absolut setzen. Wir müssen es entsprechend dem übergeordneten Element positionieren, das ist dieser Abschnitt. Fügen wir also die relative Position hinzu. Da das Video also überall als Hintergrund dient, definieren wir die oberen und fehlenden Eigenschaften Ich setze beide auf Null. Außerdem müssen wir Breite und Höhe definieren. Setzen Sie beide auf 200 Prozent. Und außerdem verringern wir die Opazität auf 0,4 Okay, das Letzte ist, ein paar Stile hinzuzufügen, das Video selbst, um die Qualität des Videos beizubehalten Ich meine, um zu vermeiden, dass es sich dehnt oder solche Dinge, müssen wir die folgenden Stile verwenden. Lassen Sie uns das PG-Video auswählen und ihm Breite und Höhe zuweisen. Beide haben auf 100 Prozent gesetzt. Und außerdem brauchen wir hier die Geschwindigkeit des Objekts mit Wertdeckung. Ordnung, lassen Sie uns abschließend die Hintergrundfarbe für diese Geschichten ändern. Ich werde den aktuellen Hintergrund loswerden. Dann setze ich die Hintergrundfarbe auf RGBA. Lass uns hier 2383 mal pausieren. Und die Opazität 0,85. In Ordnung? Wie Sie sehen können, sieht alles sehr gut aus. Und eigentlich haben wir die Arbeit an diesem Abschnitt abgeschlossen. Wenn du ein paar kostenlose Videos finden möchtest, kannst du die Website Cover with two rs.co besuchen , der wir viele verschiedene kostenlose Videos finden können In Ordnung, das war's mit diesen Geschichten. Lassen Sie uns weitermachen und mit dem nächsten Abschnitt fortfahren. 77. Projekt 8 - Erstelle und passe den Kontaktabschnitt mit animiertem Hintergrund an: Schauen wir uns zunächst das fertige Projekt an. Also nach dieser Touristenabteilung werden wir die Kontaktabteilung aufbauen. In der Mitte dieses Abschnitts haben wir ein paar Eingabefelder mit einer Schaltfläche zum Senden. Oben auf dem Formular haben wir eine Überschrift Kontaktieren Sie uns. Außerdem hat ein Abschnitt einen Vollbild-Hintergrund mit einigen Animationseffekten Wie Sie sehen können, verändert sich die Farbe und es entsteht so etwas wie ein Tag- und Nachteffekt. In Ordnung, das war's also, was wir bauen werden. Lassen Sie uns weitermachen und neue Kommentare in die Kontakte der HTML-Datei einfügen in die Kontakte der HTML-Datei und dann den Vertrag beenden. Dann öffne ich das Abschnittselement mit einem Klassennamen, Kontakt. In diesem Abschnittselement werden wir also zwei verschiedene Teile haben. Die erste wird eine Überschrift sein. Was das zweite betrifft, sollten es die geformten Elemente sein. Lassen Sie uns weitermachen und das H1-Überschrift-Tag öffnen, das den Klassennamen und die Kontaktüberschrift enthält Und dann füge dich ein, kontaktiere uns. Als nächstes benötigen wir Formularelemente mit dem Klassenkontaktformular. In diesem Formular werden wir also drei verschiedene Gruppen von Eingaben und eine Schaltfläche zum Senden haben . Lassen Sie uns also weitermachen und das Div-Tag mit der Klasseneingabegruppe öffnen . Die erste Gruppe, die das Label und die Eingabe erhalten wird. Geben wir Ihren vollständigen Namen mit den Sternchen ein. Dann öffne ich das Eingabe-Tag mit Texteingabe. Dann füge ich hier ein Klassenattribut mit einer Wertkonflikteingabe hinzu. Und wir brauchen auch einen Platzhalter mit einem Text. Gib deinen Namen ein. Ordnung, die zweite Gruppe wird also etwas anders sein Es wird aus zwei verschiedenen Eingabegruppen bestehen. Ich werde das Div-Tag mit einer Klasse öffnen, die Gruppen eingibt. Beachten Sie, dass ich eine Gruppe im Plural verwende. Jetzt müssen wir hier zwei verschiedene Eingabegruppen erstellen. Holen wir uns diesen Code von hier und fügen ihn zweimal ein. Ich werde Bezeichnungen, Typen und auch Platzhalterattribute ändern , Typen und auch Platzhalterattribute Wir benötigen deine E-Mail. Dann geben sie E-Mail ein. Außerdem werde ich den Wert des Platzhalter-Attributs ändern den Wert des Platzhalter-Attributs Wir müssen Ihre E-Mail-Adresse eingeben. Was die zweite Eingabegruppe betrifft, so wird sie für das Telefon sein. Lass uns das hier ändern. Der Wert des Platzhalters, der die Telefonnummer beantwortet. Ordnung, jetzt ist es an der Zeit, die dritte Eingabegruppe zu erstellen Es wird aus einem Etikett und einem Textbereich bestehen. Und sobald Sie das div-Tag mit der Klasse input-group geöffnet haben, fügen Sie Ihr Label mit der Auf das Etikett folgt also der Textbereich. Ich werde dazu ein Klassenattribut mit einem Textbereich für Werteformulare hinzufügen . Und wir brauchen auch einen Platzhalter. Deine Nachricht hier. Ordnung, das Letzte, was wir tun möchten, ist die Schaltfläche „Senden“ zu erstellen Ich werde das mit einem Eingabeelement machen. Wir müssen erst „submit“ und dann den Wert „submit“ eingeben. Und ich werde hier das Klassenattribut für BTN hinzufügen. In Ordnung, das HTML-Markup ist fertig. Alle Elemente sind erstellt und jetzt müssen wir weitermachen und anfangen, etwas CSS zu schreiben. Ich werde neue Kommentare für den Kontakt einfügen. Und aus Vertrag. Lassen Sie uns das Abschnittselement auswählen und mithilfe von Padding etwas Platz oben und unten schaffen Ich mache das Auffüllen von 15 RAM oben als Null auf der rechten Seite, 20 RAM unten und Null auf der linken Seite Außerdem werde ich den Inhalt mithilfe der Textausrichtung in der Mitte platzieren mithilfe der Textausrichtung in der Mitte Okay, als Nächstes lege ich das Bild als Hintergrund fest. Geben wir den Teil des Bildes in der URL-Funktion an. Ich wähle eine Hexe namens Contact Us G Dot PNG aus. Dann brauchen wir Mitte und keine Wiederholung Außerdem werde ich die Größe des Hintergrunds definieren . Lass es uns abdecken. Okay, also jetzt, das war's mit dem Abschnittelement. Lassen Sie uns weitermachen und die Überschrift anpassen. Wählen wir es aus. Lassen Sie uns zunächst die Schriftgröße erhöhen. Mach sieben RAM draus. Dann mache ich den Text mit der Schriftstärke mit einem Wert von 700 etwas fetter transformiere Text in Großbuchstaben Und schaffen Sie auch etwas Abstand zwischen den Buchstaben , indem Sie den Buchstabenabstand von 0,5 rem verwenden. Als Nächstes ändere ich die Farbe. Lass uns deine weiße Farbe verwenden. Als Nächstes füge ich dem Text einen Schatten hinzu, Textschatten mit den folgenden Werten verwende 01 RAM zu RAM und schwarze Farbe. Und schließlich schaffen Sie unten etwas Platz, indem Sie am Rand, unten, eine Straßenbahn verwenden. Okay, die Überschrift ist also benutzerdefiniert. Moment ist es nicht ganz machbar, aber sobald wir dem Hintergrund eine Animation hinzufügen, wird sie viel besser aussehen. Als nächstes müssen wir uns um das Formularelement kümmern. Also lass uns weitermachen und es auswählen. Und lassen Sie uns zunächst seine Breite und Höhe definieren. Ich setze die Breite auf sieben, um zu laufen. Was die Höhe angeht, lassen Sie uns 50 RAM daraus machen und dann die Hintergrundfarbe ändern. In diesem Fall verwende ich weiße Farbe. Aber mit dem RGBA-Wert müssen wir hier bis zu 5053 mal platzieren Und außerdem füge ich hier die Opazität 0,95 hinzu. Okay, nehmen wir an, das Formular befindet sich auf der linken Seite und wir müssen es zentrieren. Dafür. Ich werde Margin verwenden. Ordnung, als Nächstes werde ich den Inhalt innerhalb des Formulars zentrieren. Dafür werde ich dem Formularelement Klassenzentrum zuweisen . Der Inhalt ist zentriert, aber Eingabegruppen werden nebeneinander platziert Und um das zu beheben, sollten wir die Richtung des Flusses ändern und ihn abkühlen lassen. Okay? Danach werde ich das Formular leicht abgerundet machen. Dafür verwende ich border-radius mit dem Wert 0,5 rem Und lassen Sie uns auch etwas Schatten hinzufügen, indem Box Shadow mit den Werten 01, RAM, Three Rem und der schwarzen Spalte verwenden. Okay, das war's mit dem Formular. Lassen Sie uns zunächst die Eingabegruppe auswählen. Lassen Sie uns zunächst die Breite auf 200 Prozent festlegen. Dann werde ich Flexbox verwenden. Wir müssen einen Eingabegruppen-Flex-Container mit Display-Flex Und wir müssen auch die Richtung ändern . Machen wir es zu einer Kolumne. Okay? Im Moment sind also die erste Eingabe und der Textbereich gestreckt und nehmen die gesamte Breite des Formulars ein. Was das zweite und dritte Eingabeelement betrifft, sind sie die Teile des Eingabegruppenelements. Wählen wir also Eingabegruppen aus und stellen die Breite auf 100% fest. Okay, also jetzt alle Eingaben und der Textbereich sind gestreckt, wir brauchen etwas Platz innerhalb des Formulars Und das hat Platz geschaffen Füllung mit dem Wert fünf Runden verwendet Okay? Jetzt haben wir ein besseres Ergebnis, aber eigentlich ist es nicht das, was wir wollen. Wir müssen die E-Mail und das Telefon, das Sie angegeben haben, nebeneinander platzieren Und dafür werde ich wieder Display Flex verwenden. Jetzt brauchen wir dafür etwas Platz zwischen den Eingabefeldern Fügen wir zuerst hinzu, verringern wir ihre Breite. Also wähle ich Ausgangsgruppen aus, gefolgt von der Eingabegruppe. Lassen Sie uns weitermachen und mit 248,5 Prozent beginnen. Danach werde ich den Eingabegruppen zuweisen und den Abstand zwischen den Inhalten begründen. Ordnung, die Eingaben sind aufeinander abgestimmt und als Nächstes müssen wir sie anpassen. Schaffen Sie zunächst etwas Abstand zwischen den Eingabegruppen. Lassen Sie uns der Eingabegruppe einen Rand mit den Werten einen Rem oben und unten und Null auf der rechten und linken Seite zuweisen einen Rem oben und unten und Null auf der rechten und Null auf der rechten und Okay, lassen Sie uns weitermachen und die Eingaben und auch den Textbereich anpassen. Ich werde beide auswählen. Zuerst. Wählen wir Eingänge aus. Dann duplizieren Sie diese Codezeile und ändern Sie die Eingabe in den Textbereich. Zuallererst werde ich etwas Platz innerhalb der Felder schaffen. Verwenden wir es für die Polsterung. Eigentlich brauchen wir oben etwas mehr Platz , weil wir die Beschriftungen dort platzieren werden. Also brauchen wir hier die Werte auf folgende Weise. Der erste wird aus drei Rampen bestehen und die restlichen Werte werden aus einem Lauf bestehen. Okay, als Nächstes ändern wir die Hintergrundfarbe. Lassen Sie uns Ihre Sekundärfarbe verwenden. Ebenfalls. Definieren Sie die Grenze. Fügen wir hier 0,1 Rem Solid und erneut die Sekundärfarbe hinzu. In Ordnung, die Felder sehen also viel besser aus. Was brauchen wir, um ihnen weitere Stile hinzuzufügen? Lassen Sie uns die Schriftgröße verringern. Machen Sie einen Punkt für RAM. Ändere auch die Farbe. Verwenden wir hier hellgraue Farbe. Als Nächstes werde ich etwas Abstand zwischen den Buchstaben schaffen. Machen wir 0,1 RAM draus. Und zum Schluss verwenden wir die Eingabe und den Textbereich um sie herum mit dem Randradius 0,5 In Ordnung, wir sind also fast fertig mit den Eingabefeldern. Ich werde sie je nach Fokus anpassen. Ich meine, sobald wir uns auf die Felder konzentrieren, möchte ich die Grenze anzeigen. Wir müssen also einen Gain-Eingang und den Textbereich auswählen, aber mit einer Fokus-Pseudoklasse Fügen wir hier Grenzpunkte hinzu, ein Durchlauf ist durchgehend. Und mit dem Halsband C.C.C kannst du auch deinen kleinen Übergang sehen deinen kleinen Übergang um den Effekt glatter zu machen. Rechter Rand und die Dauer 0,3 s. Okay, das war's mit den Eingabefeldern und dem Textbereich Jetzt müssen wir uns um die Etiketten kümmern. Ich werde sie anpassen und in den Feldern platzieren. Wählen wir sie also zuerst aus, definieren wir die Schriftgröße legen einen Punkt auf RAM fest. Ändern Sie außerdem die Schriftstärke. Mach 600 draus. Dann wandle ich Text in Großbuchstaben um. Verwenden Sie dann den Buchstabenabstand, 0,1 Raum. Und zum Schluss ändere die Farbe. Mach es großartig. Ordnung, die Beschriftungen sehen also gut aus, und jetzt muss ich sie innerhalb der Felder platzieren , die wir benötigen, um ihre Position absolut zu machen Dann müssen wir für die Eingabegruppe relativ positionieren , da wir das Label entsprechend dem übergeordneten Element positionieren müssen . Als Nächstes legen wir die Eigenschaften oben und links fest. Beide in eine Runde. In Ordnung, das war's mit den Labels. Sie sehen gut aus und tatsächlich gibt es noch ein Element zum Anpassen, nämlich ein Senden-Button. Lassen Sie uns also weitermachen und diese Elemente auswählen. Zunächst definiere ich seine Breite. Setzen wir es auf 100%. Schaffen Sie dann etwas Platz innerhalb des Elements, indem Sie ein Padding mit einem Wert von einem RAM Als Nächstes definiere ich die Schriftgröße als 1,6 RAM. Schaffen Sie auch etwas Abstand zwischen den Buchstaben, sodass wir oben etwas Platz benötigen, indem Sie Rand, Top, eine Rampe verwenden. Und dann ändere die Hintergrundfarbe, mache sie hellgrau. Ordnung, so sieht die Schaltfläche „Senden“ gerade aus Wir müssen noch ein paar Stile hinzufügen. Lassen Sie uns die Farbe des Textes ändern. Ich mache es weiß. Außerdem müssen wir die Taste mit einem Randradius von 0,5 RAM abgerundet machen die Taste mit einem Randradius von 0,5 RAM abgerundet 0,5 Dann entfernen Sie den Standardrahmen mit border none. Und schließlich ändern Sie den Typ des Kurses und machen Sie einen Zeiger. Okay, das Letzte, was mit der Schaltfläche zu tun hat, ist, einen Hover-Effekt zu erzeugen Ich werde die Hintergrundfarbe leicht ändern, wenn ich mit der Maus darüber Wählen wir also Form btn mit dem Mauszeiger aus. Und um die Hintergrundfarbe zu ändern, machen Sie sie grau. Lassen Sie uns hier auch den Übergang verwenden. Wir benötigen die Hintergrundfarbe und die Dauer 0,4 s. Okay, jetzt sind wir fast fertig, bevor wir weitermachen und die Animation auf dem Hintergrund erstellen. Ich möchte hier auf ein kleines Problem eingehen. Wie Sie wissen, können Sie standardmäßig die Größe des Textbereichs erhöhen. Und wenn ich das mache, wird das Layout des Formularelements durcheinander gebracht Um das zu vermeiden, lege ich die maximale Höhe und die maximale Breite für den Textbereich fest . Lassen Sie uns weitermachen und es auswählen. Lassen Sie uns die maximale Höhe auf 15 setzen. Lauf. Was die maximale Breite angeht, machen wir sie zu 100%. In Ordnung, jetzt funktioniert alles perfekt mit dem Styling. Wir sind fertig und jetzt müssen wir eine Animation erstellen. Eigentlich wird die Animation einfach sein. Insgesamt werden wir fünf verschiedene Schritte haben und bei jedem Schritt die Hintergrundfarbe ändern. Lassen Sie uns also weitermachen und Keyframes erstellen. Ich werde die Animation als Kontakt PG benennen. Also bei 0% mache ich die Hintergrundfarbe 3D, 3D, 3D. Dann mache ich es bei 25%, c e, d h e, für. Als Nächstes werden wir 50 Prozent haben. Was den Wert angeht, so wird er 181 sein. Um drei. Als nächstes kommen 75 Prozent. Ich mache die Hintergrundfarbe ff78, 42. Und im letzten Schritt, ich meine, bei 100%, werde ich die Hintergrundfarbe erneut festlegen. 3D, 3D, 3D. Okay, das war's mit den Keyframes. Sie sind bereit. Lassen Sie uns diesen Abschnittselementen die Animationseigenschaft zuweisen. Zuerst müssen wir den Namen der Animation angeben, nämlich contact BG. Als Nächstes definieren wir die Dauer. Gerade jetzt. Ich werde es auf 10 s setzen, aber wir werden es später ändern. Außerdem müssen wir die Animation unendlich ausführen. Also müssen wir hier Unendlichkeit schreiben. Ordnung, wie Sie sehen können, funktioniert die Animation einwandfrei Es läuft ein bisschen schneller. Lassen Sie uns also die Dauer ändern. Machen Sie 35 s. In Ordnung, schauen wir uns den Kontaktabschnitt an Wir haben die Arbeit daran abgeschlossen, und jetzt müssen wir weitermachen und uns um den Filter kümmern 78. Projekt 8 - Fußzeile erstellen und stilvoll: Lassen Sie uns zunächst neue Kommentare in HTML einfügen. Fußzeile und Fußzeile. Und dann öffne die HTML5-Fußzeile, semantisches Element mit der Fußzeile des Klassennamens Die Fußzeile wird aus zwei verschiedenen Teilen bestehen. Die erste wird eine Liste mit einigen Navigationselementen sein. Was den zweiten Teil betrifft, so sollte er für einige Copyright-Texte ein Absatz sein . Wenn wir den Mauszeiger über die Objekte bewegen, drehen sie sich und wir erhalten einen 3D-Effekt mit Schatten Auf den ersten Blick scheint es, dass die Positionen steigen. Lassen Sie uns weitermachen und eine Liste erstellen. Es sollte durch ein Div-Element und ein paar Links dargestellt werden. Öffnen wir das Div-Tag und weisen es der Fußzeilenliste der Klasse zu. Dann füge hier ein Link-Element mit Klassen-Fußzeilenlink und mit einem Text ein Insgesamt werden wir also fünf verschiedene Artikel haben. Lass es uns viermal duplizieren und den Inhalt ändern. Der zweite Punkt wird in Richtung gehen. Dann werden wir Angebot und Inhalt über uns haben. Okay, das war's mit dem ersten Teil. Lassen Sie uns weitermachen und einen Absatz erstellen. Weisen wir der Elementklasse p einen Fußzeilenabsatz und fügen hier einige Inhalte ein Urheberrecht. Dann verwende ich für das Copyright-Zeichen die HTML5-Entität Wir brauchen ein Ampersand, Kopieren, Semikolon, Semikolon, Alle Rechte vorbehalten. In Ordnung, das war's mit dem Markup. Lass uns weitermachen und etwas CSS hinzufügen. Zunächst werde ich neue Kommentare einfügen. Fußzeile, Fußzeile. Wählen Sie dann das Fußzeilenelement aus. Und lassen Sie uns zunächst die Hintergrundfarbe ändern. Ich werde graue Farbe verwenden. Außerdem möchte ich mithilfe von Polsterungen etwas Platz im Filter schaffen mithilfe von Polsterungen etwas Platz im Filter Setzen wir es auf vier, laufen wir oben als Null auf der rechten Seite zu Ram unten und Null auf der linken Seite. In Ordnung, als nächstes platziere ich den kleinsten Teil in der Mitte. Und dafür wählen wir die Fußzeilenliste aus. Ich werde es mit Display Flex zu einem Flex-Container machen. Und um die Elemente dann in der Mitte zu platzieren, verwenden wir das Justify-Content Center verwenden wir das Justify-Content Ordnung, die Listenelemente werden in der Mitte platziert und jetzt können wir sie anpassen. Lassen Sie uns weitermachen und den Link auswählen. Zuerst. Lassen Sie uns die Schriftgröße erhöhen und sie auf eine Rampe stellen. Dann ändere die Farbe. Mach es weiß. Außerdem möchte ich auf der rechten und linken Seite der Elemente etwas Platz schaffen auf der rechten und linken Seite der Elemente etwas Platz , indem ich einen Rand mit einem Wert von 0,2 rampe verwende. Danach werden wir mithilfe von Polstern etwas Platz in den Flügeln schaffen mithilfe von Polstern etwas Platz in den Flügeln Aber vorher ändern wir die Hintergrundfarbe der Links für eine Weile, um diesen Raum sichtbar zu machen ändern wir die Hintergrundfarbe Links für eine Weile Lass es uns rot machen. Und dann etwas Platz schaffen. Verwenden Sie Polster Stellen wir den Speicherplatz oben und unten auf 2,3 RAM ein. Und dann drei Rem auf der rechten und linken Seite. Und vergrößern Sie auch den Abstand zwischen den Buchstaben mithilfe des Buchstabenabstands. 0,3 Rampe. In Ordnung, das war's mit den Links Lassen Sie uns die Hintergrundfarbe ändern. Mach es großartig. Okay, bevor wir mit dem Absatz fortfahren, füge ich den Links einen Hover-Effekt hinzu Ich werde sie drehen und beim Schweben auch den Schatten der Box hinzufügen Lassen Sie uns also weitermachen und den Fußzeilen-Link auswählen, indem Sie mit der Maus darauf zeigen. Dann verwende ich die Funktion Transform, Rotate. Lassen Sie uns die Links um minus zehn Grad drehen. Und fügen Sie auch den Boxschatten mit den Werten Null ein, um drei Rem und die schwarze Farbe auszuführen. Und schließlich verwenden wir Transition. Wir brauchen hier die ganze Dauer 0,2 s. Okay? Wenn wir also mit der Maus über die Links fahren, erhalten wir einen schönen und coolen Effekt In Ordnung, das war's mit den Links. Lassen Sie uns weitermachen und uns um den Absatz kümmern. Wählen wir es aus. Zuerst. Ich richte den Text in der Mitte aus. Um dann die Schriftgröße zu finden, lasse es 1,5 laufen. Ändere die Farbe. In diesem Fall verwende ich Sekundärfarbe. Dann lassen Sie uns etwas Abstand zwischen den Buchstaben schaffen. Lass es auf die Rampe zeigen. Und zum Schluss werde ich oben etwas Platz schaffen, indem ich den Rand oben fünf oder n verwende . Okay, wo die Fußzeile ist, sind wir fertig Es war ziemlich einfach, aber ich finde, es sieht gut aus Eigentlich nähern wir uns Schritt für Schritt dem Ende dieses Projekts, aber wir haben noch einiges zu tun. Als nächstes müssen wir anfangen, an der Navigation zu arbeiten 79. Projekt 8 - Erstellen und Navigationsarbeit: Schauen wir uns zunächst das fertige Projekt an. Wie Sie in der oberen linken Ecke der Webseite sehen können, haben wir ein festes Menüsymbol. Wenn ich darauf klicke, wird die Ausgabe angezeigt. Links kommen von oben nach unten mit schönen Übergangseffekten. Sie ändern die Opazität, wenn Sie mit der Maus darauf zeigen. Und auch vier hat jetzt seinen Vollbild-Hintergrund oder wird vom Bild dargestellt. Außerdem haben wir einen Schließknopf in der oberen rechten Ecke der Nanopore Und wenn ich darauf klicke, kehren wir zur Hauptseite zurück. Okay, das war's also, was wir bauen werden. Ich füge diesen Teil direkt über dem Header ein. Fügen wir also neue Kommentare ein. Jetzt Teil von Napa. Dann öffne ein Div-Element und weise ihm ein paar Klassen zu. Der erste wird für das Symbol geöffnet sein. Was den zweiten betrifft , sollte es so sein. Jetzt zum Symbol. Die Menüsymbole werden aus drei Zeilen bestehen. Dort werden die Entwicklungen vertreten sein. Öffnen wir es also mit class line duplizieren Sie diese Zeile dann zweimal. Als Nächstes müssen wir ein weiteres div-Element öffnen, das der Wrapper wäre Also jedem Cluster zugewiesen. Nun zum Wrapper, als Nächstes benötigen wir das Nav-Element mit der Klasse. Was nun das Nav-Element angeht, werden wir zwei verschiedene Teile haben. Der erste wird ebenfalls ein X-Schließknopf sein. Die zweite, es sollte die Navigationsliste sein. Lassen Sie uns also weitermachen und div-Elemente öffnen. Und ihr zugeordnet kreuzt sich in der Nähe. Jetzt pro Symbol und jetzt pro Hektar. Dann richten Sie zwei Linien ein, eröffnen Sie die Entwicklung und weisen Sie ihr zwei Klassen zu. Die erste wird die gemeinsame Klassenlinie sein. Was die zweite betrifft , die eine Weinrebe sein sollte. Dann duplizieren Sie diese Codezeile und ändern Sie den Klassennamen, den wir hier benötigen, Zeile zwei. Okay, lassen Sie uns weitermachen und Ihnen den zweiten Teil einfügen, ich meine die Liste der Navigationspunkte Lassen Sie uns die Entwicklungen öffnen und der Klassenliste zuordnen. Und dann gebe ich dir ein paar Link-Elemente. Weisen wir ihm einen Klassennamen zu, einen Nav-Link. Und fügen Sie hier den ersten Navigationspunkt Home ein. Lassen Sie uns das Link-Element viermal duplizieren und die Elemente ändern. Der zweite wird in Richtung gehen. Dann werden wir uns über uns informieren und Kontakt aufnehmen. In Ordnung, das war's also mit dem HTML-Markup. Ich werde anfangen, etwas CSS zu schreiben. Lassen Sie uns weitermachen und direkt nach den allgemeinen Stilen, die wir hier benötigen, neue Kommentare einfügen , Navbar Dann Ende der Navigationsleiste. Wählen Sie dann das Symbol „Nicht für“. Eigentlich gehört dieser Klassenname zu beiden Buttons. Definieren wir die Breite und Höhe. Ich werde beide auf die Rampe 5,5 einstellen. Und ändere auch die Hintergrundfarbe. Mach es weiß. Im Moment sind beide Schaltflächen sichtbar, es ist schwierig, sie zu unterscheiden. Es könnte also besser sein, wenn wir den zweiten Button sowie die Liste ausblenden . Denn jetzt werden wir am ersten Teil arbeiten. Wählen wir also Nap oder Wrapper aus und weisen sie ihm zu, zeigen wir keins In Ordnung, lassen Sie uns weitermachen und das Symbol positionieren. Ich wähle es mit seiner individuellen Klasse aus, die jetzt für das Symbol geöffnet ist. Lassen Sie uns weitermachen und die Position festlegen, um sie zu korrigieren. Definieren Sie dann die Eigenschaften oben und links. Ich werde beide auf 6,5 Run setzen. Okay, wie ich gerade sehe, ist das Symbol nicht sichtbar, da es hinter der Kopfzeile gelandet ist. Und um das zu beheben, verwenden wir die Z-Index-Eigenschaft und setzen sie auf 200 In Ordnung, jetzt ist das Problem behoben. Als Nächstes mache ich das Symbol abgerundet. Eigentlich müssen beide Knöpfe abgerundet sein. Ordnen wir also dem NAACP oder dem Symbol einen Randradius von 50 Prozent Und ändere auch den Cursor, lass ihn zeigen. Okay, als Nächstes kümmere ich mich um die Leitungen. Lassen Sie uns sie zunächst anzeigen. Ich wähle Zeilen anhand der gemeinsamen Klasse aus. Nun zu Icon Wine. Definieren wir die Höhe, legen wir fest, dass sie verläuft, und setzen dann die Breite auf 3,5 rem. Und ändere auch die Hintergrundfarbe, hellgrau. Im Moment werden die Gegenstände also übereinander gelegt. Wir brauchen etwas Abstand zwischen ihnen und wir müssen sie auch in der Mitte des Auges platzieren. Dafür verwende ich unser vordefiniertes Klassenzentrum. Wir benötigen diese Klasse für beide Symbole Außerdem müssen wir die Biegerichtung ändern und daraus eine Spalte machen. Weil Display Flex die Flex-Elemente standardmäßig horizontal in einer Reihe ausrichtet die Flex-Elemente standardmäßig horizontal in einer Reihe ausrichtet Schließlich brauchen wir dafür Platz zwischen den Zeilen. Wählen wir erneut online aus, aber jetzt mit open, jetzt für die Icon-Klasse und schaffen Platz mit Margin mit den Werten Punkt 3.0. Ordnung, also das erste Nickerchen oder das erste Symbol ist angepasst und jetzt müssen wir weitermachen und anfangen, an der Navigation zu arbeiten Im Moment ist es also versteckt. Lassen Sie uns also Display None loswerden. Der Wrapper nimmt den gesamten Viewport ein. Ich habe die Breite und Höhe des Viewports zu 100% bestimmt. Lassen Sie uns also mit einer Viewport-Breite von 200 beginnen. Was die Höhe angeht, legen wir sie auf eine Viewport-Höhe von 100 fest. Und ändere auch die Hintergrundfarbe. Ich werde hier den RGBA-Wert mit weißer Farbe verwenden. Platzieren wir es 253 mal hier. Und auch die Opazität weist darauf hin. Ordnung, also im Moment In Ordnung, also im Moment sehen Nickerchen oder Wrapper so aus. Wir müssen definieren, welche Position es hätte fixieren sollen. Und außerdem setze ich links und Bots und Eigenschaften beide auf Null. Also im Moment, jetzt ist der Wrapper hinter dem Header gelandet. Und jetzt verwenden wir erneut die Index-Eigenschaft , um dieses Problem zu beheben. Setzen wir den Index auf 300. Okay, lass uns weitermachen und anfangen , am Napa selbst zu arbeiten. Ich meine das Nav-Element. Wählen wir es aus und definieren Breite und Höhe. Ich werde beide auf 200 Prozent einstellen und auch die Hintergrundfarbe ändern. Nehmen wir dein Königsblau. Jetzt nimmt der Now-Port die gesamte Breite und Höhe des Viewports Wir müssen etwas Platz um ihn herum hinzufügen, wie es im Fall des Headers der Fall ist. Denken Sie daran, dass der Platz auf jeder Seite 3,5 Rampen entspricht. Definieren wir also Padding und weisen ihm den ersten Wert zu, 3,5 rem Der Raum wird geschaffen. Aber wie Sie sehen, haben wir ein kleines Problem auf der rechten Seite. Hier haben wir eine Scrollleiste. Jetzt hat der Rapper positioniert, einen festen Wert gesetzt, und dabei wird der Scrollbalken nicht berücksichtigt Wir müssen den Platz auf der rechten Seite vergrößern . Die Größe der Scrollleiste entspricht 20 Pixeln. Also müssen wir die Polsterung auf der rechten Seite machen , 5,5 Rem Dann brauchen wir zweimal 3,5 Runden. Das Problem ist behoben. Lassen Sie uns weitermachen und uns um den Abschluss kümmern. Nun zum Symbol: Es wird der oberen rechten Ecke des Napa platziert Wählen wir es also aus und machen seine Position absolut. Um das Symbol entsprechend seinem übergeordneten Element zu platzieren , weisen wir Napa eine relative Position zu Definieren Sie dann die oberen und rechten Eigenschaften. Ich werde die Top-Eigenschaft auf 2,5 RAM setzen. Was die richtige Position angeht, machen wir drei Runden daraus. Okay, das Symbol ist also positioniert. Platzieren wir diese Linien an der richtigen Stelle und zeigen das x an. Wählen wir zunächst die Linien mit gemeinsamen Kosten aus (Name jetzt schließen) für Symbollinie und machen die Position zu einer absoluten Position. Jetzt müssen wir jede der Linien um 40 Grad drehen, jedoch mit entgegengesetzten Richtungen. Lassen Sie uns weitermachen und die erste Zeile auswählen. Mit Querlinie eins. Wir müssen die Funktion Transform, Rotate verwenden. Geben wir hier vier Grad an. Dann dupliziere ich den gesamten Code und ändere die Klasse, die wir hier brauchen, Zeile zwei. Und statt 40 Grad -40 Grad. Ordnung, das Snapper-Symbol ist also angepasst und es ist an der Zeit, weiterzumachen und den Hintergrund zu ändern den Hintergrund Wir brauchen diesen blauen Hintergrund nicht mehr. Also lass es uns loswerden und hier einfügen. Linearer Gradient mit RGBA-Werten. Ich werde zweimal schwarze Farbe verwenden, aber mit unterschiedlichen Opazitäten. Und im ersten Fall wird die Opazität 0,5 betragen. Als Paul, der zweite RGBA-Wert. Wir benötigen die Opazität 0,3. Als Nächstes gebe ich die URL an. Ich wähle ein Bild mit dem Namen Napa, PNG oder JPEG aus. Es ist eine Klasse im Bilderordner. Dann brauchen wir die Mitte und keine Wiederholung und definieren auch die Größe des Hintergrunds. Lass es uns abdecken. Ordnung, das Bild ist also als Hintergrund festgelegt und jetzt ist es an der Zeit, sich um die Navigationsliste zu kümmern Im Moment sind Links nicht ganz sichtbar. Wählen wir sie also zunächst anhand der Klasse Naphthalin Erhöhen Sie die Schriftgröße, machen Sie drei Rampen daraus. Ändern Sie dann die Schriftstärke. Ich werde einen Links-Ordner erstellen. Lassen Sie uns die Schriftstärke auf 700 setzen. Ändern Sie die Farbe, machen Sie es weiß und wandeln Sie Text in Großbuchstaben Okay, jetzt können wir die Links sehen. Und als Nächstes möchte ich die Hintergrundfarbe für jedes Navigationselement definieren . Wir können es von CSS aus machen. Ich meine, wir können jedes der Elemente mit der n-ten untergeordneten Pseudoklasse auswählen und jedem von ihnen eine andere Hintergrundfarbe zuweisen Aber das werde ich nicht von CSS aus machen. Verwenden wir JavaScript. werde ich eine Reihe von Farben erstellen. Lassen Sie uns hier fünf verschiedene Farben angeben. Der erste wird 6495 ED sein. Dann wird der nächste sieben sein, f, f, f, D4 Dann verwende ich F fa078. Dann brauchen wir als nächstes f08, 080. Und die letzte Farbe wird ein f e, e, e, e sein. Ordnung? Dass wir alle Links auswählen müssen. Dann müssen wir sie durchschauen und jedem der Elemente die Hintergrundfarbe zuweisen . Lassen Sie uns also weitermachen und sie mit der Methode Query Selector all auswählen der Methode Query Selector all Geben wir hier den Klassennamen Naphthalin an. In diesem Fall gibt die Methode Query Selector all also die Methode Query Selector all ein Array-ähnliches Objekt zurück, das als keine Listen bezeichnet wird Ich werde die Knotenliste in ein Array umwandeln. Und dann werden wir das Array mit der foreach-Methode durchgehen Array mit der foreach-Methode Um die Knotenliste in ein Array umzuwandeln, müssen wir die Methode array from verwenden. Danach können wir die forEach-Methode verwenden. For each ermöglicht es uns, ein Array durchzugehen und eine Funktion auszuführen. Für jedes Array-Element müssen wir eine Callback-Funktion übergeben, die einen Parameter annimmt und es wird das aktuelle Element sein Dann müssen wir die Hintergrundfarbe definieren. Dafür verwende ich Stil- und CSS-Texteigenschaften. Wir benötigen einen Punkt-CSS-Text im Punktstil. Jetzt müssen wir hier etwas CSS-Code übergeben. Dafür. Ich werde ES6-Vorlagenzeichenfolgen verwenden. Wir müssen Backticks öffnen. Dann füge hier die Hintergrundfarbe ein. Jetzt müssen wir die Werte aus dem Farbarray separat verwenden . Bei jeder Iteration müssen wir die Indexnummer der Farben definieren Und dafür erstelle ich eine neue Variable namens I. Ich eine neue Variable namens I. bemerkt, dass ich hier die let-Deklaration verwendet habe. Diese Variable wird so etwas wie ein Zähler sein. Standardmäßig sollte es gleich Null sein. Nun, unten, müssen wir das 1-Dollar-Zeichen mit geschweiften Klammern verwenden 1-Dollar-Zeichen mit geschweiften Klammern Jetzt müssen wir deine Farbpalette übergeben. Und in eckigen Klammern müssen wir die Indexnummer angeben. Also müssen wir hier i übergeben, gefolgt vom Inkrementsoperator , der mit doppelten Pluszeichen ausgedrückt wird In der ersten Iteration wird die Indexnummer Null sein und die erste Spalte wird verwendet In der zweiten Iteration wird der Zähler dann zu eins, und die zweite Spalte wird verwendet und so weiter Wie Sie sehen können, hat jedes Navigationselement seine eigene Hintergrundfarbe. Als Nächstes werde ich die Links bis zum Boden der Nanopore erweitern zum Boden der Nanopore Lassen Sie uns also weitermachen und den Romanautor auswählen. Machen Sie seine Höhe zu 100 Prozent. Und außerdem werde ich ihn mithilfe von Display Flex zu einem Flex-Container machen. Jetzt sind die Gegenstände also von oben nach unten gestreckt und nehmen 100% der Höhe ein. Als nächstes müssen wir uns um die Breite kümmern. Diese Artikel sollten ebenfalls über die gesamte Breite verfügen. Definieren wir also die Breite und machen sie zu 100%. In Ordnung, im Moment läuft alles gut Ich möchte diese Elemente in der Mitte dieser Spalten platzieren . Dazu weisen wir jedem Linkelement das Klassenzentrum zu Linkelement das Klassenzentrum Okay, danach verringern wir die Opazität auf 0,8 C. Die Opazität der Schaltfläche hat sich ebenfalls ausgewirkt. Definieren wir also die Z-Indexeigenschaft für die Schaltfläche und machen sie zu 300. In Ordnung, als Nächstes erstelle ich einen Hover-Effekt. Ich möchte die Farbe der Elemente ändern und auch die Opazität erhöhen, wenn der Mauszeiger darauf zeigt Lassen Sie uns also weitermachen und „Nicht mit dem Mauszeiger verknüpfen“ auswählen. Machen Sie seine Opazität zu einer. Und ändere auch die Farbe, mache sie primär. Außerdem werde ich Transition verwenden, bei der die Werte alle und 0,3 s sind. Okay? Der Hover-Effekt funktioniert also einwandfrei. Und jetzt werde ich dafür sorgen, dass die Icons funktionieren. Standardmäßig platziere ich jetzt den Wrapper unten und mache ihn versteckt Dazu ändern wir den Wert des unteren Werts gegen einen oberen, oberen Wert und machen ihn auf -100 Prozent Und machen Sie auch die Opazität auf Null. Der Navbar-Wrapper ist also versteckt. Als Nächstes möchte ich die Navigationselemente nach oben platzieren , denn sobald wir auf das Menüsymbol klicken, sollten sie sich von oben nach unten bewegen. Dazu weisen wir dem Nichts eine relative Position zu. Und dann definiere die Spitzenposition. Mach es zu -100%. Richtig? Jetzt müssen wir JavaScript verwenden. Tatsächlich werden wir eine Klassenänderung in CSS erstellen, die aus JavaScript zum Container hinzugefügt wird. Lassen Sie uns also eine Variable erstellen , in der ich den Container speichern werde. Nennen wir diesen Variablencontainer und wählen diese Elemente dann mithilfe der Abfrageauswahlmethode Jetzt müssen wir das Menüsymbol auswählen und Click-Event daran anhängen. Wählen wir das Element erneut mit der Methode querySelector aus Ich gebe den Klassennamen an öffne genug Balkensymbol. Und dann hängt das daran. Event-Listener. Wir brauchen hier Click-Event und die Pfeilfunktion. Sobald wir also auf das Menüsymbol klicken, müssen wir die Änderung der Containerklasse hinzufügen. Daher müssen wir Ihre Container-Punktklassenliste einfügen . Wie Sie wissen, speichert die Klassenliste alle Klassen , die das Element hat. Darauf sollte die Methode add folgen, die der Klassenliste eine Klasse hinzufügt. Und in der Klammer gebe ich die Änderung des Klassennamens an. Okay, das war's mit dem ersten Punkt. Gehen wir zum zweiten Punkt über. Ich meine den X-Schließknopf. Sobald wir darauf klicken, müssen wir die Klassenänderung aus dem Container entfernen. Lassen Sie uns also weitermachen und diesen Code duplizieren. Dann ändere den Klassennamen, den wir hier brauchen, schließen. Jetzt pro Symbol. Und anstatt Methode hinzuzufügen, verwenden, entfernen. In Ordnung, setzen Sie sich mit JavaScript auseinander. Gehen wir zurück zu CSS. Jetzt müssen wir den Klassenwechsel herbeiführen. Dann müssen wir Napa Wrapper auswählen. Um den Rapper wieder anzuzeigen, müssen wir seine unterste Position auf Null setzen Und wir müssen die Opazität erhöhen. Wir müssen einen machen. Andererseits müssen wir die Klasse wechseln. Aber für den Nav-Link , wie Sie wissen, werden, wie Sie wissen, Links oben platziert und wir müssen die oberste Position auf Null setzen. Wählen wir also Ändern, gefolgt von einem Nominal-Link und setzen die oberste Position auf Null. Wenn ich also auf das Menüsymbol klicke, dann das funktionsunfähige Display, und wenn wir auf das X klicken, sollte es Also eigentlich sind wir fast fertig. Wir müssen die Effekte leicht anpassen. Außerdem müssen wir die Navigationspunkte mit einigen Verzögerungen in der richtigen Reihenfolge anzeigen . Lassen Sie uns Napa einen schnellen Übergang zuweisen. Mit den folgenden Werten. Wir brauchen die unteren 0,5 s. Dann die Opazität 0,2 s. Wir brauchen den gleichen Übergang hier unten, aber mit einer gewissen Verzögerung Nehmen wir also diese Codezeile, fügen sie hier ein und warten Sie hier 0,25 s. Wenn ich jetzt auf das Symbol klicke, wird die Zahl mit einem gleichmäßigen Übergang angezeigt Aber das wollen wir eigentlich nicht. Wir müssen die Navigationselemente in der Reihenfolge anzeigen. Wir müssen also für jedes der Elemente Transitionen durchführen, jedoch mit unterschiedlichen Verzögerungszeiten. Fahren wir fort und wählen Sie erneut Ändern aus. Gefolgt von nun der Link zum Kind der Pseudoklasse F. Geben Sie hier das erste Element, eins, an und fügen Sie Ihre Transition mit den folgenden Werten ein. Wir benötigen eine Top-Eigenschaft mit einer Dauer von 1 s und einer Verzögerungszeit von 0,4 s. Dann Opazität 0,3 s. Die Farbe ebenfalls 0,3 s. Lassen Sie uns diesen Code viermal duplizieren und die Anzahl der Artikel und die Verzögerungszeit ändern . Für den zweiten Artikel benötigen wir 0,6 s. Dann für den dritten Artikel, Sie Ihre 0,8 s sehen können. Für den vierten Artikel benötigen wir 1 s. Für den letzten Artikel, den ich gemacht habe, den fünften Artikel, benötigen wir eine Verzögerung von 1,2 s. In Ordnung, also lassen Sie uns sehen, wie die Artikel der Reihe nach angezeigt werden. die Artikel der Reihe nach angezeigt Und eigentlich sind wir fast fertig. Das Einzige, was Sie tun müssen, ist, die Gegenstände zu verstecken, während sie platziert werden. Dafür verwende ich overflow hidden, aber entsprechend der Y-Richtung In Ordnung, jetzt funktioniert alles perfekt. Und eigentlich sind wir mit unserem Projekt fertig. Alle diese Abschnitte werden gebaut und angepasst. Und schließlich müssen wir das Projekt an verschiedene Bildschirmgrößen anpassen. 80. Projekt 8 - Projekt reaktionsfähig machen: Okay, lassen Sie uns zunächst die Seite überprüfen und den Responsive-Modus aktivieren Wie Sie wissen, haben wir dieses Projekt auf der Auflösung aufgebaut . Und jetzt werde ich verschiedene Bruchpunkte finden verschiedene Bruchpunkte , an denen wir einige Änderungen vornehmen müssen. In diesem Teil werden wir CSS-Medienabfragen verwenden. Lassen Sie uns also weitermachen und den ersten Breakpoint finden. Ich denke, wir müssen einige Änderungen vornehmen, sobald wir die Breite des Fensters unter 1.200 Pixel An den Breakpoints werde ich Karten platzieren, insbesondere in einer Spalte Lassen Sie uns den Nullteil überprüfen. Es sieht gut aus. Das einzige, was wir hier sehen ist ein kleines Leerzeichen auf der rechten Seite. Wir sehen diesen Bereich, weil im Responsive-Modus die Scrollleiste nicht sichtbar ist. Und das ist der Grund für dieses Problem. Sie können es also einfach ignorieren , da es auf kleineren Geräten gut aussieht. Lassen Sie uns eine CSS-Medienabfrage erstellen. Ich gebe die maximale Breite als 1.200 Pixel an. Wählen Sie dann den Kartenwickel aus. Ändern Sie die Biegerichtung. Ich mache daraus eine Kolumne. Außerdem benötigen wir eine Ausrichtung der Gegenstände in der Mitte , um die Karten in der Mitte zu platzieren. Ordnung, die Karten werden also vertikal platziert, und jetzt müssen wir etwas Abstand zwischen ihnen hinzufügen Wählen wir also die Karte selbst aus und fügen Sie einen riesigen Rand hinzu. Drei Rem oben und unten und Null auf der linken und rechten Seite. Okay, zum Schluss werde ich die Breite der Hintergründe dieser Geschichten vergrößern die Breite der Hintergründe dieser Geschichten Wählen Sie also Story BG und legen Sie die Breite auf 85% fest. Okay, an diesem Breakpoint sind wir fertig. Alles andere sieht gut aus. Lass uns weitermachen und den nächsten finden. Ich denke, der nächste sollte aus tausend Pixeln bestehen, da an diesem Breakpoint einige Elemente angepasst werden müssen Verwenden wir es also gegen CSS-Medien und geben Sie die maximale Breite als tausend Lassen Sie uns sie jetzt überprüfen, denn ich denke, es wäre besser, wenn wir Navigationselemente vertikal in einer Spalte platzieren würden. Dafür müssen wir die Biegerichtung ändern. Wählen wir also die Liste und ändern wir die Spalte mit der Biegerichtung. Im Moment sind sie also vertikal platziert, haben hier aber einen leeren Raum. Diese Gegenstände sollten den Platz einnehmen. Und um das zu erreichen, verwenden wir eine der Flexbox-Eigenschaften namens Flex Grow Wählen wir den Nav-Link und setzen Flex Grow auf eins. Diese Eigenschaft ermöglicht es den Flex-Artikeln , den verfügbaren Platz im Container einzunehmen . Okay, lass uns weitermachen und uns um den Header kümmern. Ich werde Überschrift und Absatz in der Mitte der Seite platzieren . Wählen wir also den Kopfzeilentext und definieren seine Position, machen ihn absolut. Dann müssen wir die Immobilien oben und links anordnen, beide zu 50 Prozent. Um perfekt an das Element zu senden. Wir müssen die Funktion Transformieren mit Translate verwenden. Und wir müssen hier -50% für beide Richtungen durchgehen. Ich meine X-Achse und Y-Achse. Die Überschrift und der Fortschritt befinden sich in der Mitte. Aber wie Sie sehen können, sind sie hinter dem Luftballon gelandet. Um das zu beheben, setzen wir den Index auf zehn. Okay, als Nächstes werde ich die Schriftgröße der Überschrift und des Absatzes verringern . Wählen wir also die Überschrift aus. Ändere die Schriftgröße, mach sechs Ram draus. Als Nächstes wähle ich den Header-Absatz aus. Lass uns die Schriftgröße 2,5 laufen lassen. In Ordnung, wir hatten unsere Texte, wir sind fertig. Fahren wir mit dem nächsten Abschnitt fort. Wir müssen hier die Größe der Überschrift verkleinern. Wählen wir es also aus und legen wir seine Schriftgröße fest. Sechs Runden. Okay, das war's mit diesem Abschnitt. Als nächstes folgt der Story-Abschnitt. Ich denke, ab diesem Breakpoint müssen wir den Hintergrund nicht mehr verzerren Also gebe ich ihnen die Form des Rechtecks. Lassen Sie uns weitermachen und Story BAG auswählen. Verwenden Sie dann Transform Skew x und machen Sie es auf Null. Als nächstes brauchen wir die Geschichte selbst. Nehmen wir diese Codezeile und fügen sie ein. Du. In Ordnung? Außerdem werde ich den Inhalt vertikal platzieren. Dafür müssen wir die Biegerichtung ändern. Machen wir es also einer Spalte und richten die Elemente auch in der Mitte aus. Okay, das Letzte, was den Speicher angeht ist, etwas Platz unter den Bildern zu schaffen Lassen Sie uns weitermachen und das Bild auswählen. Und ihm wird der untere Rand mit einem Wert von drei rampen zugewiesen . Okay, das war's mit diesem Abschnitt mit den Geschichten. Schließlich werde ich mich um den Filter kümmern. Ich werde den Platz innerhalb der Links verringern und auch den Abstand zwischen ihnen verringern. Lassen Sie uns also weitermachen und den Link auswählen, der als Padding als 0,3 RAM oben und unten und zwei RAM auf der rechten und linken Seite definiert oben und unten und zwei RAM auf der rechten und linken Seite Und wir müssen auch eine Marge mit 0,1 rem verwenden. In Ordnung, also ich denke, wir sind am Breakpoint fertig. Alles sieht gut aus. Lass uns weitermachen und den nächsten finden. Es sollten also 800 Pixel sein. Lassen Sie uns also weitermachen und neue Medien mit einer maximalen Breite von 800 Pixeln erstellen neue Medien mit einer maximalen Breite von 800 Pixeln An diesem Breakpoint werde ich den Absatz überhaupt ausblenden Lassen Sie uns weitermachen und es auswählen und ihm zuweisen, zeigen Sie keins an. Lassen Sie uns als Nächstes die Größe der Überschrift des Kartenabschnitts verringern . Wählen wir also die Überschrift „ Beliebte Tools“ und geben die Schriftgröße fünf Mal an. Ordnung, also eigentlich scheint alles in Ordnung zu sein , bis auf den Kontaktbereich und die Fußzeile Ich werde die Breite der Formularelemente verringern. Wählen wir es also aus und setzen seine Breite auf 90%. Was die Fußzeile angeht, werde ich die Links vertikal in einer Spalte platzieren die Links vertikal in einer Spalte Lassen Sie uns also weitermachen und die Fußzeilenliste auswählen. Ändern Sie die Spalte mit der Biegerichtung. Außerdem müssen wir die Elemente in der Mitte ausrichten. Lassen Sie uns abschließend etwas Abstand zwischen den Links hinzufügen. Wählen Sie den Fußzeilen-Link aus und fügen Sie ihm einen Rand hinzu. Ein Rem oben und unten und Null auf der rechten und linken Seite. In Ordnung, also eigentlich ist das alles mit diesem Breakpoint. Lass uns weitermachen und den nächsten finden. Der nächste wird also, glaube ich, 650 Pixel haben. Erstellen wir also eine neue Medienabfrage und geben die maximale Breite als 650 Pixel an. In der Pause, am Breakpoint, werde ich diese Abschnitte auf die gesamte Seite ausdehnen diese Abschnitte auf die gesamte Seite Wählen wir also den Container aus und entfernen den Rand. Mach es auf Null Dann kümmere ich mich um die Navbar Fangen wir mit den Symbolen an. Wählen Sie, öffnen Sie unser Symbol und ändern Sie die obere und linke Position. Ich werde beide auf 2,5 ran setzen. Bevor wir mit dem nächsten Symbol fortfahren, möchte ich den Raum um das Napa herum loswerden Wählen wir jetzt den Wrapper aus und setzen das Padding auf Null. Wählen Sie dann das zweite Symbol aus, das über ein geschlossenes Snapper-Symbol verfügt, und ändern Sie die richtige Position Mach 4 Millionen draus. In Ordnung, das war's mit der Navbar. Lassen Sie uns weitermachen und den Header auswählen. Ich werde seine Höhe auf 200 vh einstellen. In Ordnung, wir sind fertig mit dem Header. Gehen wir zum Kontaktbereich über. Ich werde die Größe der Überschrift verkleinern. Wählen wir also die Kontaktüberschrift aus und machen die Schriftgröße sechs rund. Außerdem werde ich dem Kontaktformular einige Stile hinzufügen. Lassen Sie uns die Höhe der Polsterung ändern. Schaffen Sie es zur Rampe. Was die Höhe angeht, machen wir vier bis zur Rampe. In Ordnung, das war's also, ungefähr 650 Pixel. Und schließlich müssen wir das Projekt an den letzten Breakpoints anpassen , die meiner Meinung nach 500 Pixel betragen werden Lassen Sie uns also weitermachen und neue Medien mit der maximalen Breite von 500 Pixeln erstellen neue Medien mit der maximalen Breite von 500 Pixeln Also der einfachste Weg, die Elemente an diesem Breakpoint gut aussehen zu lassen die Elemente an diesem Breakpoint gut aussehen Ich dachte daran, die Schriftgröße der HTML-Elemente zu verringern . Wie Sie wissen, sind es derzeit 62,5% Und ich werde H2 um 45% reduzieren. Dieser Code wird sich auf die Größe jedes Elements auswirken , da wir während des gesamten Projekts RAM als Maßeinheit verwendet haben. Okay, also ich finde, alles sieht ziemlich gut aus. Und endlich sind wir fertig. Wir haben den Bau dieses Projekts abgeschlossen. Also herzlichen Glückwunsch, ich hoffe es hat euch gefallen. Habe viele coole und interessante Sachen gelernt. Wenn Ihnen dieses Projekt gefallen hat, geben Sie bitte die Daumen hoch, kommentieren Sie es unten, teilen Sie das Video, abonnieren Sie unseren Kanal und klicken Sie auf die Glocke, um über kommende Projekte informiert Okay. Wir sehen uns beim nächsten Mal. 81. Projekt 9 - Projektvorschau: Ordnung, es ist an der Zeit, unser nächstes Projekt zu erstellen, das der Klon einer der beliebtesten und am häufigsten verwendeten Websites namens Paypal sein der beliebtesten und am häufigsten verwendeten wird, um die Benutzeroberfläche der verschiedenen Seiten zu erstellen Ich bin auf der Hauptseite, auf Anmelde- und Anmeldeseiten. Natürlich wird es nicht der exakte Klon mit der vollen Funktionalität sein . Wie gesagt, wir werden nur eine Benutzeroberfläche mit HTML, CSS und JavaScript erstellen . Paypal sieht in verschiedenen Ländern anders aus. Die Benutzeroberfläche ändert sich häufig von Zeit zu Zeit. Sie sich also keine Sorgen, wenn dies nicht der exakte Klon der aktuellen Benutzeroberfläche ist. Okay, also bevor wir direkt mit dem Schreiben des Codes beginnen, lassen Sie uns zunächst beschreiben , wie das Projekt aussieht Also wie gesagt, wir werden drei verschiedene Seiten erstellen, Haupt-Login und Registrierung. Wir beginnen mit der Hauptseite. Es wird aus verschiedenen Abschnitten bestehen. Der erste Abschnitt wird das Banner mit Navigation sein . Wir haben hier mehrere Navigationspunkte. Wenn ich den Mauszeiger über sie bewege, wird das Drop-down-Menü angezeigt Es wechselt, sobald wir Mauszeiger über ein anderes Navigationselement Außerdem werden wir hier zwei verschiedene Buttons zum Einloggen und Registrieren haben. Wenn ich sie anklicke, werden wir zur richtigen Seite navigieren. Auf das Banner folgt also der zweite Abschnitt. Es wird drei verschiedene Teile mit Schrift, fantastischen Symbolen, einigen Textelementen und Schaltflächen enthalten . Dann haben wir diesen blauen Abschnitt mit einigen verschiedenen Absätzen. Als Nächstes werden wir diesen kleinen Abschnitt hier mit einem Bild und drei verschiedenen Schritten erstellen . Unten finden Sie eine Schaltfläche zur Registrierung, gefolgt von der Fußzeile Okay, schauen wir uns die Hauptseite an. Schauen wir uns die Anmeldeseite an. Es wird der ursprünglichen Anmeldeseite ziemlich ähnlich sein. Wir werden hier zwei Eingabefelder mit Schaltflächen haben. Das ist wahrscheinlich die Anmeldeseite. Es wird aus zwei Teilen bestehen. Auf der linken Seite werden wir mehrere Bilder der Kunden haben . Was die rechte Seite betrifft, so wird sie zwei verschiedene Optionen enthalten. Egal, ob wir ein persönliches oder ein Geschäftskonto erstellen möchten. In Ordnung, das war's also mit dem Projekt. Wie üblich werden wir dafür sorgen, dass es auf verschiedene Bildschirmgrößen reagiert. Wenn ich die Seite überprüfe und in den Responsive-Modus wechsle, werden Sie feststellen, dass sie responsiv ist. Eines ist hier zu beachten: Auf kleineren Bildschirmgrößen werden wir die Drop-down-Menüs nicht mehr haben Sie werden sich so auf das Menü umstellen. Okay, das ist es also. Wir sind bereit, mit dem Bau des Projekts zu beginnen . Also lass uns weitermachen. 82. Projekt 9 - Erstelle und passe den ersten, zweiten und dritten Abschnitt an: Hallo und willkommen zu unserem neuen YouTube-Video. In diesem Tutorial werden wir die Website namens Wine House erstellen. Das Projekt wird auf Basis von HTML, CSS und JavaScript erstellt . Du wirst lernen, wie man schöne und coole Effekte kreiert. Ich hoffe also, dass das Projekt interessant und hilfreich sein wird . Wie bereits in diesem Tutorial erwähnt, werden wir HTML, CSS und JavaScript verwenden. Ich gehe also davon aus, dass alle bereits einige grundlegende Dinge über diese drei Technologien wissen . Ordnung, lassen Sie uns weitermachen und zunächst das Projekt beschreiben Es besteht aus fünf verschiedenen Seiten unterschiedlich angeordnet sind. Meist stoßen Sie auf Websites, auf denen Sie die verschiedenen Bereiche der Webseite nach oben und unten scrollen können . In unserem Fall können Sie die Seite jedoch horizontal scrollen. Ich meine, sobald Sie scrollen, werden Sie zu den verschiedenen Seiten mit einigen schönen und coolen Übergangseffekten navigieren . Sie können auch sehen, dass wir hier keine Scrollleiste haben. Außerdem kannst du hier die Controller sehen, ich meine, diese kleinen Pfeile. Wenn Sie darauf klicken, gelangen Sie zu den verschiedenen Seiten. Ebenfalls unten haben wir einen Fortschrittsbalken, der uns zeigt, auf welcher Seite wir uns gerade befinden. Außerdem haben wir hier eine feste Navigation. Und die Navigationselemente haben einige nette Hover-Effekte. Okay, das Projekt wird also auf verschiedene Bildschirmgrößen reagieren. Wenn ich die Seite untersuche, wechsle ich in den Responsive-Modus und überprüfe das Projekt an verschiedenen Bruchpunkten. Sie werden sehen, dass es responsiv ist. Auf kleineren Bildschirmgrößen. Wir haben die feste Navigation nicht mehr. Es wird in das Hamburger-Menü umgewandelt. In Ordnung, eigentlich geht es hier nur um unser Projekt. Lass uns weitermachen und loslegen. Ich habe auf dem Desktop einen neuen Ordner namens Wine House erstellt , in dem ich einen weiteren Ordner für die Bilder habe. Lassen Sie uns weitermachen und diesen Ordner im VS-Code öffnen. Ich werde drei verschiedene Dateien erstellen. Index.html, style.css und Skripte sind nicht richtig. Das öffnet die Datei index.html und generiert das grundlegende HTML-Dokument. Ich werde Emmet benutzen. Lassen Sie uns hier das Ausrufezeichen setzen und Enter oder Tab drücken Als Nächstes verknüpfe ich diese drei Dateien. Öffnen wir also das Link-Tag und geben Sie hier den Pfad der CSS-Datei an. Als Nächstes öffne ich das Script-Tag unten, über dem abschließenden Body-Tag. Und im Quellattribut geben wir den Pfad der Datei script.js an. Okay, außerdem werde ich während des gesamten Projekts eine der Google-Schriftarten verwenden . Also lass uns weitermachen und uns den Link schnappen. Gehen wir zur Google Fonts-Website und suchen nach einer Schrift namens Cormoran Wählen wir hier ein paar verschiedene Schriftstärken aus und greifen dann auf den Link. Ich füge es in das Hauptelement ein. Okay, als Nächstes möchte ich das Logo und die Titelleiste ändern. Wir müssen das Link-Tag als Wert des Attributs öffnen , das wir hier benötigen. Dann spezifiziere ich den Typ. Er wird mit einem Slash-PNG-Bild abgebildet. Und schließlich müssen wir den Pfad des Bildes und die H-Referenzattribute angeben. Wir haben hier einen Bilderordner, und dann müssen wir einen Logo-Punkt-PNG auswählen. Ändern Sie abschließend den Titel. Wir brauchen Wine House. Lassen Sie uns weitermachen und das Projekt oder den Browser ausführen. Dafür. Ich werde eines der VS-Codepakete verwenden , das als Live-Server bezeichnet wird. Es ermöglicht uns, den Projektverlauf im Browser auszuführen und Änderungen vorzunehmen, ohne die Seite jedes Mal zu aktualisieren. Sie können diese Erweiterung also installieren und verwenden. Das Projekt ist also live im Browser. Sie können hier auch das Logo in der Titelleiste sehen. Lassen Sie uns abschließend unsere Arbeitsumgebungen organisieren den Editor und den Browser ein wenig platzieren, etwa so, und loslegen. Ordnung, also werden wir jede der Seiten separat erstellen und anpassen Und danach programmieren wir den Scroll-Effekt und auch einige andere Dinge. Lassen Sie uns damit beginnen, das Open-Div-Tag für HTML-Markup zu erstellen , das der Container sein wird Als nächstes werden wir weitere Div-Elemente haben. Es wird der Wrapper sein Also insgesamt werden wir fünf verschiedene Seiten haben, ich meine fünf verschiedene Abschnitte Lassen Sie uns also weitermachen und diese Abschnittselemente für alle erstellen . Ich werde ihm die erste Klasse zuweisen. Dann duplizieren wir es viermal und ändern die Klassennamen. Wir brauchen Klassennamen von zwei bis fünf. In Ordnung, also fange ich mit dem ersten Abschnitt an. Ich habe die Homepage gemacht. Es enthält die unterstrichene Überschrift und den Vollbildhintergrund Sie sehen hier die Navigationspfeile und den Fortschrittsbalken. Sie sind behoben und werden auf allen Seiten angezeigt. Wir werden uns etwas später um sie kümmern. Okay, lassen Sie uns weitermachen und die div-Elemente im ersten Abschnitt öffnen . Diese Elemente werden zwei verschiedene Klassen haben. Der erste wird der Common Class Section Wrapper sein Common Class Section Wrapper Die zweite wird die Einzelklasse sein. Ich nenne es Abschnitt eins schnell. Eigentlich brauchen wir diesen Abschnittswrapper auch für die restlichen Abschnitte Kopieren wir also diese Elemente und fügen sie für alle ein. Außerdem müssen wir die Klassennamen ändern. Wir benötigen zwei Zahlen von zwei bis fünf. Okay, gehen wir zurück zum ersten Abschnitt. Wir müssen ein div-Tag einfügen , das die Überschrift umschließt. Weisen wir ihm einen Klassennamen zu, Abschnitt eins, Überschrift-Wrapper Und geben Sie hier H1-Überschriftenelemente ein. Ich werde dem Klassenabschnitt eine Überschrift zuweisen. Und lassen Sie uns hier auch die folgenden Texte platzieren. Die besten Weine der Welt. Das war's also mit dem ersten Abschnitt. Jetzt fange ich an, etwas CSS zu schreiben. Zuallererst werde ich einige gängige Stile kreieren. Wählen wir jedes Element mit einem Sternchen aus und fügen hier einige gängige Stile hinzu und setzen sie Ich werde die Ränder und den Abstand von jedem Element entfernen und den Abstand von jedem Element Lassen Sie uns beide auf Null setzen. Außerdem werde ich Box-Größe, Border-Box machen. Als Nächstes werde ich einige Standardstile loswerden. Ich meine, sagen wir, skizzieren Sie nichts. Außerdem werde ich die Textdekoration auf „Keine“ setzen. Entfernt dann die Standardstile aus den Listenelementen. Lassen Sie uns den Listenstil zum Typ „None“ machen. Und schließlich werde ich die Schriftfamilie so einstellen, dass sie den Vollidioten Garamond nennt Es tut uns leid. Während dieses Projekts werden wir also RAM als Maßeinheit verwenden. Moment entspricht 1 g 16 Pixeln, da die Schriftgröße des HTML-Elements 16 Pixeln entspricht. Standardmäßig möchte ich ein Mittel in zehn Pixel konvertieren. Und dafür müssen wir die Schriftgröße des HTML-Elements verringern, und zwar auf 62,5% Die Größe der Überschrift hat abgenommen. Danach kümmern wir uns um den Wrapper. Ich werde die Breite und Höhe festlegen, beide machen 200% des Viewports Weisen wir der Eigenschaft width die hundert Viewport-Breite Was die Höhe angeht, werde ich sie auf hundert Viewport-Höhe festlegen Okay, als Nächstes wählen wir dieses Abschnittselement selbst aus und legen Breite und Höhe fest, beide zu 200 Prozent. Dann mache ich seine Position absolut. Außerdem müssen wir die Position des Wrappers relativ machen, Position des Wrappers relativ weil ich Abschnitte entsprechend ihrem übergeordneten Element positionieren möchte , das ist Rapper Danach setzen wir die Lag-Position des Abschnitts auf Null. Danach wähle ich den Abschnitt Wrapper aus. Definieren wir seine Breite und Höhe. Wir müssen beide vom Abschnittselement erben. Lassen Sie uns also Breite und Höhe festlegen, die beide vererbt werden sollen. Im Moment landete der erste Abschnitt also der absoluten Position hinter den anderen Abschnitten aufgrund der absoluten Position hinter den anderen Abschnitten. Wie gesagt, ich werde es für den ersten Abschnitt anpassen. Um es also an der Spitze der anderen Abschnitte zu platzieren, verwenden wir die Z-Index-Eigenschaft. Wählen Sie den ersten Abschnitt aus und setzen Sie den Index auf 50. Danach lege ich das Bild als Vollbild-Hintergrund fest das Bild als Vollbild-Hintergrund Wählen wir also den ersten Wrapper Dann verwende ich hier einen linearen Gradienten Geben wir hier schwarze Farbe ein. Ich meine RGBA mit drei Nullen und mit der Opazität 0,5. Als nächstes benötigen wir wieder RGBA, schwarze Farbe, aber mit unterschiedlicher Opazität. Machen wir 0,4 draus. Als Nächstes müssen wir die URL des Bildes angeben, den Teil des Bildes. Wir haben einen Ordner namens Images und müssen Abschnitt eins auswählen, PG Punkt JPG. Als nächstes brauchen wir Center und auch No-Repeat. Und schließlich legen wir die Größe des Hintergrunds fest und sorgen dafür, dass er bedeckt ist. Ordnung, wie Sie sehen können, haben wir hier ein Vollbild-Hintergrundbild für den ersten Abschnitt Lassen Sie uns nun weitermachen und uns um die Überschrift kümmern und das zugehörige Wrapper-Div auswählen Zunächst nehme ich Sie von der Position des Deckblatts ab Ich werde die Überschrift ganz unten auf der Seite platzieren . Machen wir seine Position also absolut. Definieren Sie dann die Top-Immobilie und machen Sie sie zu 70%. Was das verlassene Grundstück angeht, werde ich es zu 50% machen. Und wir müssen auch mit der Übersetzungsfunktion transformieren. Wir müssen hier -50 Prozent für beide Richtungen passieren. Ich meine, für die X- und Y-Achse. Die Überschrift ist also richtig platziert, aber im Moment ist sie nicht ganz sichtbar. Also lasst uns weitermachen und das beheben. Ich wähle die Überschrift selbst aus. Lassen Sie uns die Schriftgröße festlegen. Zehn RAM. Ändern Sie auch die Schriftstärke, machen Sie sie auf 300. Und ändere die Farbe. Ich werde es hier verwenden. Weiß. Als Nächstes wandle ich den Text in Großbuchstaben um Und schaffen Sie auch etwas Abstand zwischen den Buchstaben, indem Sie Ledger-Abstand mit einem Wert von 0,1 ran Danach fügen wir am unteren Rand der Überschrift einen Rahmen hinzu. Verwenden Sie also border bottom, wobei die Werte auf RAM zeigen. Solide. Und als Farbe verwende ich D5 mit vier Nullen In Ordnung, die Überschrift sieht also gut aus. Schließlich möchte ich es auf der rechten Seite ausrichten und die Benutzerauswahl deaktivieren. Wir müssen also Text verwenden, der am Wert ausgerichtet ist, oder? Und dann wählt der Benutzer keine aus. Okay, schauen wir uns den ersten Abschnitt an. Es sieht gut aus und wir können mit dem zweiten fortfahren. Lassen Sie uns zunächst das HTML-Markup erstellen. Der zweite Abschnitt wird also zwei verschiedene Bilder und die Schaltfläche enthalten . Lass uns weitermachen und ein Div-Tag mit dem Klassenverkauf eröffnen. Wir werden also in ihrer Entwicklung ein Bild und eine Schaltfläche haben , die ein offenes IMG-Element sind. Und die Quellattribute. Ich werde den Pfad des Bildes angeben. Wir müssen Bag Dot PNG aus dem Bilderordner auswählen. Ich werde dem Alt-Attribut sailback zuweisen. Und außerdem benötigen wir dein Klassenattribut mit einem Wert, der zurückkehrt. Als Nächstes richten wir einen Button mit einem Klassennamen ein, Verkauf, BTN. Und was die Steuer angeht, werde ich Ihre Bestellung weiterleiten. Jetzt. Außerdem füge ich hier ein weiteres Bild ein, aber es wird außerhalb des Divs platziert. Geben wir hier den Pfad des Bildes an. Wir brauchen Weinflasche Dot PNG. Lassen Sie uns außerdem dem Alt-Attribut den Wert der Weinflasche zuweisen . Und außerdem füge ich ein Klassenattribut mit einem Wert für eine Weinflasche hinzu. Okay, das war's mit dem Markup des zweiten Abschnitts Moment landete der zweite Abschnitt hinter dem ersten. Deshalb sehen wir hier einige der Elemente nicht. Ich werde das Problem erneut mit der Indexeigenschaft beheben . Ich werde hier den Klassennamen ändern. Lassen Sie uns Abschnitt zwei verwenden. Gerade jetzt. Ich wollte diesen Weg verwenden, aber irgendwann werden wir verschiedene Werte der Indexeigenschaft für all diese Abschnitte definieren . Ordnung, jetzt müssen wir den Hintergrund für den zweiten Abschnitt festlegen Lass uns weitermachen und dir diesen Code von hier holen. Und dann nimm einige Änderungen vor. Wir brauchen den Wrapper für Abschnitt zwei. Ändern Sie dann die Opazitäten. Machen wir sie zu 0.8 und 0.9 und ändern auch den Namen des Bildes. Wir brauchen Abschnitt G, okay? So sieht der zweite Abschnitt jetzt aus, da ich sehe, dass wir hier die Scrollbalken haben, und ich möchte sie loswerden. Dafür müssen wir dem Wrapper-Overflow einen versteckten Wert zuweisen Wrapper-Overflow Danach kümmern wir uns das Layout dieser Elemente. Ich werde Flexbox verwenden. Verwenden wir hier Display-Flex. Dann müssen wir die Elemente in der Mitte ausrichten , um die Elemente vertikal zu zentrieren. Außerdem werde ich den Inhalt mit dem Wertebereich gleichmäßig ausrichten. Ordnung, lassen Sie uns anfangen jedes der Elemente zu stylen Zuerst wähle ich das Div-Element mit der Klasse Sale aus. Lassen Sie uns wieder Flux-Bücher verwenden. Ich möchte ihn zu einem flexiblen Container machen. Dann müssen wir die Richtung des Flusses ändern . Machen wir daraus eine Kolumne. Und danach verwenden wir für die vertikale und horizontale Zentrierung die Befehle „Elemente mittig ausrichten“ und „Inhaltsmitte ausrichten Ordnung, danach passen wir das erste Bild Wo es leicht abgenommen hat, beträgt die Opazität 0,9. Und ich werde auch die Breite des Bildes ändern. Machen wir es auf 45, anstatt die Taste zu wählen. Es gibt übrigens einen Klassenverkauf. Definieren wir zunächst die Breite und Höhe. Ich setze die Breite auf 20 RAM. Was die Höhe angeht, lassen Sie uns fünf Rem daraus machen. Als Nächstes kümmere ich mich um den Text. Lassen Sie uns die Schriftgröße erhöhen. Schaffen Sie es zu Ram. Ändern Sie auch die Schriftstärke. Mach es leichter. Dann wandle Text in Großbuchstaben um und schaffe etwas Abstand zwischen den Buchstaben Machen wir 0,1 Wiederholungen daraus. Okay, danach setze ich die Hintergrundfarbe auf transparent. Ändere auch die Farbe, mach es weiß. Erstellen Sie dann oben auf der Schaltfläche etwas Platz , indem Sie den Rand oben mit einem Wert für RAM verwenden. Und schließlich erstellen wir einen Rahmen mit den Werten 0,1 RAM, durchgehend und verwenden weiße Farbe. In Ordnung, die Schaltfläche ist also angepasst. Abschließend möchte ich einen kleinen Schwebeeffekt erzeugen. Ich werde die Hintergrundfarbe ändern, wenn Sie mit der Maus darüber fahren. Ausgewählte Schaltfläche mit einem Mauszeiger. Ändern Sie die Hintergrundfarbe. Benutze hier wieder diese rote Farbe. Und dann, um den Effekt etwas glatter zu machen , verwende Transition mit einer Werthintergrundfarbe und einer Dauer von 0,2 Sekunden. Ordnung, der Button ist also gestylt und das letzte Element, das ich anpassen möchte , ist das zweite Bild Also lass uns weitermachen und es auswählen. Ich werde die Opazität ändern. Ich meine, ich möchte es auf 0,6 reduzieren und auch die Breite ändern. Machen Sie eine Rampe mit zwei Rampen daraus. In Ordnung, mit dem zweiten Abschnitt sind wir fertig. Es ist gestylt und wir müssen weitermachen und uns um den dritten Abschnitt kümmern Es wird, wieder, ziemlich einfach sein. Wir werden das Vollbild-Hintergrundbild haben. Außerdem werden wir andere Bilder in der Mitte der Seite und diese Texte hier haben. Lassen Sie uns also zunächst das HTML-Markup erneut erstellen Wir werden hier drei verschiedene Elemente haben. Der erste wird der H1-Tag mit der Überschrift „Open H1“ und einer Überschrift für den dritten Abschnitt der Klasse sein mit der Überschrift „Open H1“ und einer Überschrift für den dritten Abschnitt der Klasse Und gib mir den Text, in bester Qualität. Als nächstes werden wir ein Bild haben. Geben Sie den Pfad des Bildes im Quellattribut an. Wir müssen Frame Dot PNG auswählen. Fügen Sie hier auch den Wert des Alt-Attributs hinzu, sagen wir Grapes Frame. Und dann füge ein Klassenattribut mit einem Wertrahmenstrich IMG hinzu. Lassen Sie uns diese Codezeile duplizieren. Ändere den Namen des Bildes, das wir hier benötigen, Grapes Dot PNG. Auch als Wert des Alt-Attributs. Ich werde nur Trauben von hier lassen. Das Event hat die Klasse verändert. Wir brauchen hier die Trauben Dash und G. Okay, also im Moment ist dieser Abschnitt nicht sichtbar und der Grund ist der gleiche. Es ist hinter dem zweiten Abschnitt gelandet. Lassen Sie uns das erneut mit der Z-Index-Eigenschaft beheben. Ich werde hier den Klassennamen ändern. Wir brauchen Abschnitt drei. Jetzt sind die Elemente sichtbar. Lassen Sie uns weitermachen und diesen Abschnitt anpassen. Lassen Sie uns zunächst das Bild als Vollbild-Hintergrund festlegen das Bild als Vollbild-Hintergrund Wählen wir den Wrapper für Abschnitt drei aus. Eigentlich brauchen wir den ähnlichen Code auch für den Rapper der dritten Sektion Also holen wir uns diesen Code von hier. Fügen Sie es für den Wrapper des dritten Abschnitts ein und nehmen Sie einige Änderungen vor Lassen Sie uns die Opazitäten ändern. Wir brauchen hier. 0.3, 0.9, ändern Sie dann den Namen des Bildes. Wir brauchen drei. Und schließlich müssen wir hier Inhalte mit dem Value Center statt mit dem Raum gleichmäßig begründen . In Ordnung, das war's mit dem Wrapper. Lassen Sie uns weitermachen und jedes der Elemente separat anpassen . Ich fange mit den Bildern an. Wählen wir das erste Bild aus, das die Klasse frame IMG hat. Stellen wir die Breite auf 100 Rampe ein. Ebenfalls. Ich werde seine Position für absolut erklären. Und schließlich verringern Sie die Opazität auf 0,5. Okay, als Nächstes wähle ich dieses zweite Bild aus, Grapes IMG. Eigentlich brauchen wir ähnliche Stile auch für das zweite Bild. Also lasst uns weitermachen und diesen Code von hier holen und einfach die Werte ändern. Ich werde mit 240 RAM beginnen. Was die Opazität angeht, machen wir sie auf 0,7. Abschließend werde ich mich um die Überschriftenelemente kümmern. Lassen Sie uns also weitermachen und diese Elemente auswählen. Lassen Sie uns zunächst die Schriftgröße erhöhen und 20 RAM erhöhen. Dann ändere die Farbe. Ich werde hier hellgraue Farbe verwenden, ich meine CCC, und auch Text in Großbuchstaben umwandeln Als Nächstes müssen wir die Überschrift drehen. Verwenden wir also Transform mit der Rotationsfunktion. Ich drehe das Bild um 20 Grad. Sie können auch Ihre Textausrichtung in der Mitte verwenden. Die Überschrift sieht gut aus. Ich möchte einen kleinen Schatteneffekt hinzufügen und die Benutzerauswahl deaktivieren. Lassen Sie uns also weitermachen und Text Shadow mit den Werten 0,5 RAM als 1,5 RAM verwenden . Und als Farbe verwende ich 000, das ist die schwarze Spalte. Und schließlich verwenden wir hier, der Benutzer wählt keinen aus 83. Projekt 9 - Erstelle und passe den vierten und fünften Abschnitt an: In Ordnung, das war's mit dem dritten Abschnitt. Jetzt müssen wir weitermachen und mit der Arbeit an dem Abschnitt beginnen denn dieser Teil besteht nur aus einer Überschrift und dem Bild. Und wir haben auch ein Vollbild-Hintergrundbild. Eigentlich ist es dasselbe Bild mit einem gewissen Unschärfeeffekt. In Ordnung, dieser Abschnitt wird also einfach sein. Lassen Sie uns weitermachen und mit der Erstellung des HTML-Markups beginnen . Öffnen wir div-Elemente mit der Klasse Abschnitt vier, b, g. Wir werden dieses Div-Element verwenden, um einen Unschärfeeffekt für das Hintergrundbild zu erzeugen Als nächstes benötigen wir die Überschrift. Öffnen wir das H1-Tag mit dem Abschnitt „Klasse“ für Überschrift mit dem Text „ Neu veröffentlichte Weine Und zum Schluss möchte ich hier ein Bild einfügen. Geben wir den Teil des Bildes an. Wir müssen einen Abschnitt für Bg-Punkt-JPG aus dem Bilderordner auswählen Bg-Punkt-JPG aus dem Bilderordner dann dem Alt-Attribut den Wert neuer Weine zuweisen . Und außerdem werde ich hier erstklassige neue Weine hinzufügen. Bild. In Ordnung, mit dem Mockup sind wir fertig Aber wie üblich müssen wir einen neuen Abschnitt auf der Seite anzeigen , da er hinter dem dritten Abschnitt gelandet ist . Lassen Sie uns also weitermachen und erneut die Z-Index-Eigenschaft verwenden. Ich werde den Klassennamen von Abschnitt zu Abschnitt ändern . Denn dieser Abschnitt ist sichtbar. Lassen Sie uns anfangen, es anzupassen. Als erstes werde ich die Breite des Bildes verringern , um unseren Arbeitsprozess zu vereinfachen. Lassen Sie uns weitermachen und neue Weine auswählen, IMG, und die Breite auf sieben setzen, um zu laufen. Okay, danach platzieren wir die Elemente in der Mitte der Seite Und dafür müssen wir Flexbox verwenden. Also wähle ich den Abschnitt für den Wrapper aus. Machen wir ihn zu einem flexiblen Container. Dann ändere ich die Richtung. Machen wir daraus eine Kolumne. Weiter. Um die Elemente horizontal und vertikal zu zentrieren, müssen wir justify-content center verwenden und die Elemente zentriert ausrichten Die Elemente werden also in der Mitte der Seite platziert. Und jetzt kümmere ich mich um den Hintergrund. Wie Sie sich erinnern, haben wir ein leeres div-Element für den Hintergrund erstellt . Lassen Sie uns weitermachen und Elemente auswählen. Zunächst definiere ich seine Breite und Höhe. Machen wir beide zu hundert Prozent und machen wir die Position auch absolut. Als Nächstes definiere ich den Hintergrund. Ich bin in einem Vollbildbild. In den vorherigen Abschnitten haben wir den Rappern dieser Sektion den Hintergrund zugewiesen In diesem Fall verwenden wir jedoch einen Unschärfeeffekt. Und wenn wir das für den Abschnittsumschlag tun , werden alle enthaltenen Elemente verschwommen Deshalb verwenden wir ein zusätzliches Element. Lassen Sie uns weitermachen und den Hintergrund definieren. Ich werde einen linearen Gradienten verwenden. Mit RGBA-Werten. Ich meine die schwarze Farbe, aber die Opazität, 0,8 und die erste Farbe und dann 0,7 und die zweite Als Nächstes spezifizieren wir den Teil des Bildes. Ich wähle ein Bild mit dem Namen Abschnitt für PNG oder JPEG aus. Dann brauchen wir Mitte und keine Wiederholung. Ebenfalls. Lassen Sie uns die Größe des zu verdeckenden Hintergrunds festlegen. Hier haben wir also das Hintergrundbild, aber wie Sie sehen können, sind die restlichen Elemente versteckt weil sie hinter dem Hintergrund gelandet sind. Um das zu beheben, verwenden wir die Z-Index-Eigenschaft. Ich setze es auf den negativen Wert, sagen wir minus eins. In Ordnung? Schließlich müssen wir den Hintergrund verwischen. Dafür. Ich werde eine dieser CSS-Eigenschaften namens Filter verwenden . Dann müssen wir ihm eine Funktion namens bluer zuweisen. Und dann als Wert geben wir Punkte für Rampe ein. In Ordnung? Wie Sie sehen können, hat der Hintergrund einen Unschärfeeffekt. Aber wir haben hier ein kleines Problem. Wenn Sie sich die Ränder dieser Aktion ansehen, werden Sie feststellen, dass sie nicht verschwommen sind Deshalb werde ich die Breite und Höhe dieses Abschnitts leicht erhöhen . Gerade jetzt. Sie entsprechen 100 Prozent und ich werde sie zu 110% machen In Ordnung, schauen wir uns den Hintergrund an. Lassen Sie uns weitermachen und zur Überschrift übergehen. Wählen wir diese Elemente aus. Zunächst werde ich die Schriftgröße erhöhen. Lass uns zehn RAM draus machen dann die Steuer etwas niedriger machen, indem du font-weight 300 verwendest Lassen Sie uns den Text auch mittig ausrichten, indem Sie Textausrichtung in der Mitte verwenden Dann werde ich am Ende der Überschrift Platz schaffen , indem ich Margin Bottom mit dem Wert sieben RAM verwende. Ändere auch die Farbe. Sie sehen hier die rote Farbe. Ich bin in D5 mit vier Nullen. Und schließlich werde ich die Benutzerauswahl deaktivieren. Verwenden wir user select mit dem Wert none. Die Überschrift sieht also gut aus. Und bevor wir diesen Abschnitt beenden, werde ich das Bild leicht anpassen. Lassen Sie uns einen Rahmen um das ihm zugewiesene Bild erstellen, 0,1 rund, einfarbig und die weiße Farbe. Dann werde ich auch mit Polsterung etwas Platz in der Box schaffen mit Polsterung etwas Platz in der Box Machen wir es auf allen vier Seiten zu einem Rem. Außerdem werde ich die Opazität des Bildes leicht verringern . Machen wir 0,7 draus. Ordnung, das war's mit dem vierten Abschnitt. Es ist gestylt. Und jetzt müssen wir zum letzten Abschnitt übergehen, der das Foto sein wird. Es besteht also aus einem Bild. Außerdem haben wir einige Kontaktinformationen und unten auf der Seite befindet sich ein Copyright-Text. Lassen Sie uns also damit beginnen , ein HTML-Markup zu erstellen. Ich werde die Liste mit dem Klassenessen oder dem veröffentlichten Essen erstellen . Ich gebe Ihnen ein paar LI-Elemente. Der erste Punkt wird Kontakt sein. Dann haben wir New York als eine Adresse, sagen wir 1049 Stanley Avenue Als Nächstes werde ich hier täglich geöffnet haben. Das ist für den letzten Artikel. Wir fügen Sie nur nach Vereinbarung ein. Direkt nach der Liste. Ich füge hier ein Bild ein. Wählen wir das Bild aus dem Bilderordner aus. Es wird das Bild mit dem Namen Footer, dash IMG dot PNG Außerdem werde ich ein Klassenattribut mit Wertefußzeile hinzufügen , IMG Als Nächstes müssen wir eine weitere Liste erstellen. Eigentlich werde ich die erste Liste von hier kopieren, einfügen und die Elemente ändern. Lass uns hier vorbeigehen, dann die Telefonnummer verbinden. Ich gebe hier eine Scheinnummer ein, sagen wir 516.448,2, sagen wir 516.448,2 Außerdem gebe ich hier die Handynummer ein, sagen wir 63.174.284,2 Nullen Als nächstes kommt die E-Mail. Lassen Sie uns hier ein Beispiel auf whitehouse.com veröffentlichen. Lassen Sie uns abschließend hier einfügen und unserer Mailingliste beitreten. Okay, lassen Sie uns abschließend den Absatz für den Copyright-Text erstellen und p elements mit der Klasse Copyright öffnen Platzieren Sie dann Ihr Copyright, gefolgt von der HTML5-Entität, die das Copyright-Zeichen sein wird Wir brauchen ein Amperemeter und eine Kopie, Semikolon. Dann lass uns deinen Code schreiben und erstellen. Und alle Rechte vorbehalten. Im Moment ist dieser Abschnitt nicht sichtbar. Lassen Sie uns also weitermachen und erneut die Indexeigenschaft verwenden. Ändere den Klassennamen 4-5. So sieht unser neuer Bereich aus. Lassen Sie uns weitermachen und es anpassen. Zunächst stelle ich das Vollbild-Hintergrundbild ein Wählen wir also den Wrapper aus und definieren dann den Hintergrund. Eigentlich werde ich diesen Code von hier kopieren. Lassen Sie uns die RGBA-Werte ändern. Ich meine die Opazitätswerte, die wir hier benötigen, 0,7 und dann 0,5 Ändern Sie auch den Namen des Bildes. Wir müssen Abschnitt fünf verwenden, BG. Ordnung, als Nächstes platziere ich alle Elemente in der Mitte der Seite Verwenden wir also Flexbox. Ich werde den Wrapper-Flex-Container herstellen. Um die Elemente dann perfekt horizontal und vertikal zu zentrieren, verwenden wir ein Einzelartikelzentrum und richten den Inhaltsmittelpunkt aus. In Ordnung, lassen Sie uns weitermachen und die wenigsten Anpassungen vornehmen. Ich meine die Listenelemente. Wählen wir also LI-Elemente aus. Zunächst werde ich die Schriftgröße erhöhen. Lass uns rennen. Ändern Sie dann die Schriftstärke. Verwenden wir hier 700. Als Nächstes werde ich etwas Abstand zwischen den Buchstaben mit dem Wert 0,1 RAM schaffen . Ändern Sie die Farbe, machen Sie sie heller mit den Farben d, d, d. Und schließlich erstellen Sie diesen Raum am oberen und unteren Rand der Elemente mithilfe von Rand mit den Werten eine RAM- und Nullzelle Die Listenelemente sind benutzerdefiniert. Ich möchte den Stil der ersten Listenelemente leicht ändern . Und um sie auszuwählen, verwende ich eine der CSS-Pseudoklassen, die First-Child heißt Wählen wir es also zuerst aus, die daran angehängten LI-Elemente, erste untergeordnete Pseudoklasse Also werde ich den Text in Großbuchstaben schreiben und auch die Farbe ändern Benutze hier, White. Das war's mit der Liste. Lassen Sie uns weitermachen und das Bild anpassen. Wählen Sie es aus. Lassen Sie uns zunächst die Breite definieren und daraus 60 RAM machen. Dann werde ich Platz auf der linken und rechten Seite des Bildes schaffen Platz auf der linken und rechten Seite des , indem ich Margin verwende , dessen Werte 0,20 RAM Und schließlich hat sich die Opazität leicht verringert , auf 0,9 In Ordnung, schauen wir uns das Bild an. Und das letzte Element , das wir gestalten müssen , wird der Absatz sein. Wählen wir es also aus. Machen Sie zunächst seine Position absolut und platzieren Sie sie am Ende der Seite, indem Sie einige Immobilien verwenden, die wir für Ram abgewertet Außerdem werde ich die Schriftgröße erhöhen und es zu Ram machen. Ändern Sie auch die Schriftstärke. Ich setze es auf 600. Als nächstes haben wir den Text mittig ausrichten lassen. Ändern Sie auch die Farbe des Textes, machen Sie ihn hell mit E. Und schließlich schaffen Sie etwas Abstand zwischen den Buchstaben, indem Sie den Buchstabenabstand mit dem zu umschließenden Wertpunkt verwenden . Ordnung, dieser fünfte Abschnitt ist also fertig und lassen Sie uns mit dem nächsten Teil unseres Projekts fortfahren. 84. Projekt 9 - Erstelle und Stil Navbar und mache Fortschrittsbalken: Als Nächstes erstellen wir eine Navigation. Auch der Fortschrittsbalken und die Pfeile links und rechts auf der Seite. All diese Elemente werden eine feste Position haben und auf allen fünf Seiten angezeigt. Lassen Sie uns weitermachen und mit der Erstellung des HTML-Markups beginnen . Ich werde diese Elemente am Anfang im Container platzieren . Öffnen wir also div-Elemente mit einer Klasse navbar. Navbar Wir werden ein Logo und die Liste der Navigationspunkte haben die Liste der Navigationspunkte Fügen wir also ein Link-Element mit dem Klassenlogo-Link , den ich hier und dem Bild einfügen werde. Wählen wir Logo Dot PNG aus dem Bilderordner aus. Außerdem werde ich das Alt-Attribut-Logo zuweisen. Und schließlich fügen wir ein Klassenattribut mit einem Wertelogo hinzu. Danach öffne ich jetzt zumindest den Nav-Tag mit dem Klassennamen. Insgesamt werden wir also fünf verschiedene Navigationspunkte haben. Öffnen wir das Link-Tag mit dem Link zur Klassennavigation. Der erste Navigationspunkt wird die Startseite sein. Dann lassen Sie uns diesen Artikel viermal duplizieren und dann den Inhalt ändern. Das zweite werden Weinberge sein. Dann Trauben als Wein. Und für den letzten Artikel möchte ich Inhalt einfügen. In Ordnung, also hier haben wir ein Logo und die Navigationselemente. Bevor wir die restlichen Elemente erstellen, fügen wir zunächst den Stil der Navigation hinzu. Ich wähle das div-Element mit der Klassen-Navigleiste aus. Wie gesagt, es wird repariert. Im Moment ist die Navbar also nicht mehr sichtbar, weil sie hinter dem Filter gelandet Ich werde dieses Problem beheben, indem die Eigenschaft z-index verwende Nun, da es machbar ist, lassen Sie uns weitermachen und einige weitere Stile hinzufügen . Ich werde es zu hundert Prozent breit machen. Eigentlich denke ich, dass es besser wäre , wenn wir die Größe des Bildes verringern würden. Es ist ziemlich größer. Lassen Sie uns nun Höhe definieren und daraus sechs Rampen machen. Jetzt sieht es viel besser aus und ich werde die Navbar leicht nach unten platzieren Ich werde das mit Top-Eigentum machen. Stellen wir es auf eine Wiederholung ein. Und außerdem werde ich hier Flexbox verwenden Lassen Sie uns den Navbar-Flex-Container mit Display-Flex erstellen. Außerdem werde ich Abstand zwischen dem Logo und der Liste schaffen , indem ich den Inhaltsbereich gleichmäßig ausrichten verwende . Und schließlich verwenden wir „Elemente mittig ausrichten um die Elemente vertikal zu zentrieren. In Ordnung, das war's, ungefähr genug Bar. Lassen Sie uns weitermachen und den Romanautor anpassen. Wählen wir dieses Element aus. Ich werde es mit Display Flex zu einem Flex-Container machen. Und dann brauchen wir das Justify-Content Center. Okay, lassen Sie uns weitermachen und die Navigationselemente gestalten. Ich wähle das Link-Element aus, das den ClassName-Nav-Link hat Lassen Sie uns zunächst die Schriftgröße 1,5 RAM festlegen und auch die Farbe ändern und sie weiß machen. Danach erhöhen wir die Breite. Machen wir 15 RAM draus. Schaffen Sie auch etwas Platz auf der linken und rechten Seite, indem Sie den Rand verwenden. Ich setze es auf Null, da es oben und unten ist. Was die linke und rechte Seite betrifft, lassen Sie uns einen Rand bilden. Wir rampen. Außerdem werde ich den Text in Großbuchstaben schreiben. In Ordnung, die Artikel sehen also gut aus. Und als Nächstes füge ich ihnen die Grenzen hinzu. Verwenden wir also eine Grenze mit den Werten Punkt 1 g, durchgehend, und Sie nennen sie weiß. Wie Sie sehen, müssen wir die Gegenstände in der Mitte platzieren. Dafür verwende ich Text Align Center. Schaffen Sie außerdem durch Polsterung etwas Platz in der Box. Ich werde es mir zum Ziel setzen, oben und unten zu rammen. Was die linke und rechte Seite angeht, machen wir es auf Null. Und schließlich schaffen Sie etwas Abstand zwischen den Buchstaben, indem Sie einen Buchstabenabstand mit dem Wert 0,1 rep verwenden. In Ordnung, die Navigationselemente sind also gestylt Und als Nächstes erstelle ich einen Hover-Effekt. Schauen wir uns die fertige Version des Projekts an. Sobald wir den Mauszeiger über die Elemente bewegen, bewegt sich dieses kleine rote Kästchen von links nach rechts Eigentlich wird es das vorherige Pseudoelement sein Lassen Sie uns also weitermachen und den Nav-Link mit den vorherigen Pseudoelementen auswählen Nav-Link mit den vorherigen Pseudoelementen Zuerst mache ich seinen Inhalt leer dann mache ich seine Position absolut. Außerdem werde ich dem Link eine relative Positionierung zuweisen , da wir das Element entsprechend seinem übergeordneten Element positionieren müssen , was in diesem Fall Link ist. Danach machen wir das Element sichtbar. Ich werde die Breite und Höhe definieren. Lassen Sie uns die Breite auf 150 Prozent setzen. Was die Höhe angeht, werde ich fünf Rem daraus machen. Und ändere auch die Hintergrundfarbe. Ich werde es hier verwenden. Rote Farbe. Ich meine, D5 mit vier Nullen Also so, wie ich das Element zuvor gesehen habe , jetzt sehen wir, lassen Sie uns seine linke Position ändern. Ich werde es schaffen -20 Prozent. Außerdem müssen wir es drehen und leicht bewegen, horizontal, ich meine, entsprechend der X-Achse Also werde ich Transform mit den Funktionen Rotate und Translate x verwenden . Ich gebe hier -40 Grad als Wert für die Spannungsfunktion an Wie wahrscheinlich Translate X-Funktion. Ich werde die Elemente mit minus 4 M verschieben. Okay? Die Elemente sind also gedreht, aber das ist nicht die perfekte Position Gerade jetzt. Sie werden vom Zentrum aus transformiert. Ich bin dabei, der Ursprung der Transformation ist zentriert. Und ich werde es ändern und es links unten machen. Also mussten wir eine dieser CSS-Eigenschaften namens transform origin verwenden . Und wir müssen ihm links unten zuweisen. Und zum Schluss verringern wir die Opazität. Ich werde 0,8 draus machen. In Ordnung? Das war's also gerade vor dem Pseudoelement. Als Nächstes erstelle ich den Hover-Effekt. Ich möchte es von links nach rechts verschieben. Lassen Sie uns also weitermachen und das Link-Element mit dem Mauszeiger und auch mit den vorherigen Pseudoelementen auswählen Mauszeiger und auch mit den vorherigen Pseudoelementen Definieren wir die linke Position und machen sie zu 110 Prozent. Um das Effektmodell zu erstellen, verwenden wir außerdem Transition mit dem Wert am linken Ende 0,3 s. Sobald wir also Mauszeiger über den Item-Stand bewegen, bewegt sich das Pseudoelement von links nach rechts Das Letzte, was Sie tun müssen, ist, den äußeren Teil der Elemente zu verstecken. Und eigentlich werde ich das mit Overflow Hidden machen. In Ordnung, jetzt funktioniert alles perfekt. Und eigentlich sind wir mit der Navbar fertig. Lass uns weitermachen und uns um die Pfeile kümmern. Zunächst erstelle ich das HTML-Markup. Öffnen wir das Button-Tag mit der Klassenseite btn. Es wird die gemeinsame Klasse für beide Knöpfe sein. Und außerdem werde ich hier eine weitere Klasse verwenden, die noch übrig für einige Leute zum Kacheln. Als Nächstes füge ich dein Bild ein. Wählen wir den Pfeilpunkt PNG aus dem Ordner Bilder aus. Dann dupliziere ich den Button. Lass uns den Klassennamen ändern, den wir hier brauchen, oder? BTN. Lassen Sie uns das Bild ziehen das ich hier verwenden werde, dasselbe Bild. Wir werden einfach beide Bilder drehen , um sie in die richtige Richtung zu bringen. Okay, hier haben wir die Pfeile. Lassen Sie uns weitermachen und sie anpassen. Ich wähle beide Schaltflächen auf der Como-Klassenseite BTN Lassen Sie uns die Position der Taste festlegen. Außerdem müssen wir hier den Z-Index verwenden, um Pfeile machbar zu machen. Im Moment befinden sich die Schaltflächen in der oberen linken Ecke der Seite Ich werde sie in der Mitte der Seite platzieren. Ich meine, um sie vertikal zu zentrieren. Dafür nutzen wir die Spitzenposition und machen sie zu 50 Prozent. Und ich werde Transform auch mit der Funktion translate y verwenden . Fügen wir hier -50% ein. Dadurch können wir das Element perfekt der vertikalen Richtung entsprechend senden . Okay, danach entfernen wir den Standardhintergrund und den Rand der Schaltfläche Lassen Sie uns also die Hintergrundfarbe transparent machen. Und um die Standardgrenze loszuwerden, müssen wir border none verwenden. Okay, das war's mit dem Button. Lassen Sie uns weitermachen und die Bilder anpassen. Wählen wir sie aus. Lassen Sie uns zunächst die Breite definieren und sie für RAM festlegen. Außerdem werde ich die Opazität verringern, sie auf 0,4 erhöhen. Und zum Schluss lassen Sie uns den Cursorzeiger in Ordnung bringen , sodass die Bilder angepasst werden. Jetzt müssen wir sie auf der linken und rechten Seite platzieren. Wählen wir also zuerst einen Linkspfeil aus. Ich werde seine linke Position definieren. Machen wir es für RAM. Danach wähle ich das Bild selbst aus. Ich meine das linke Bild. Wir müssen das Bild um 90 Grad drehen. Also müssen wir uns transformieren, rotieren. Und lassen Sie uns hier -90 Grad durchgehen. Wie Sie sehen können, ist der Linkspfeil richtig platziert. Machen wir weiter und machen dasselbe auch für den Rechtspfeil. Eigentlich werde ich diesen Code hier duplizieren und dann die Klassennamen ändern, die wir benötigen, oder? Außerdem brauchen wir hier die rechte statt der linken Position. Und schließlich ändern Sie den Wert der Rotationsfunktion. Wir brauchen 90 Grad statt -90 Grad. In Ordnung, mit den Pfeilen sind wir fast fertig. Das einzige, was ich tun werde, ist einen kleinen Schwebeeffekt zu erzeugen Eigentlich möchte ich die Opazität beim Schweben erhöhen. Lassen Sie uns weitermachen und Bild mit dem Mauszeiger auswählen. Dann wird seiner Opazität der Wert eins zugewiesen. Außerdem verwende ich Transition mit einer Opazität von 0,2 s. In Ordnung, mit den Pfeilen sind wir fertig Als Nächstes müssen wir weitermachen und einen Fortschrittsbalken erstellen. zunächst wie gewohnt Erstellen Sie zunächst wie gewohnt ein HTML-Markup Lassen Sie uns die Entwicklung mit dem Class Progress Wrapper eröffnen. Als Nächstes öffne ich ein weiteres div-Tag, das die Seitenzahlen enthält. Ordnen wir ihm einen Klassenfortschritt zu. Und dann fügen wir darin ein H2-Überschriftenelement ein. Standardmäßig gebe ich hier einen Schrägstrich fünf ein. In Ordnung? Danach erstelle ich die Kreise. Öffnen wir das div-Tag, das der Wrapper sein wird Es ist jedem Klassenzirkel-Wrapper zugewiesen. Und dann lass uns essen. Und hier ist ein leeres div-Element mit Klasse Circle und Circle One. Dann duplizieren Sie diese Codezeile viermal und ändern Sie die Klassen. Wir brauchen die Zahlen 2-5. Okay, das Markup des Fortschrittsbalkens ist also fertig, und jetzt müssen wir es anpassen Ich fange mit dem Wrapper an. Wählen wir den Progress Wrapper aus und fixieren wir zunächst seine Position Der Fortschrittsbalken ist also nicht sichtbar, da er wie die vorherigen Elemente hinter der Fußzeile gelandet ist Lassen Sie uns das erneut beheben, indem wir die Z-Indexeigenschaft verwenden. Machen wir 100 draus. Okay, jetzt ist es sichtbar. Definieren wir diese Position. Ich werde es unten in der linken unteren Ecke der Seite platzieren . Also brauchen wir hier die untere Eigenschaft mit dem Wert zwei rem. Und hat auch Grundstück mit dem Wert drei Runden hinterlassen. In Ordnung, danach passen wir die Überschrift an. Wählen wir es aus. ändere ich die Schriftgröße. Machen wir 2,5 RAM draus. Außerdem werde ich die Überschrift etwas heller machen , indem ich die Schriftstärke mit einem Wert von 300 verwende. Und dann ändere die Farbe, mache es weiß. In Ordnung, die Überschrift ist also gestylt. Gehen wir weiter und gehen wir zu den Kreisen über. Wählen wir sie anhand des gemeinsamen Klassenkreises aus. Definieren wir zunächst die Breite und Höhe. Ich werde für beide einen RAM einrichten. Und dann werde ich ihnen eine Grenze mit den Werten 0.1 RAM solid und der weißen Farbe zuweisen . Okay, jetzt sind die Elemente sichtbar, aber sie haben nicht die Form eines Kreises. Um sie zu Kreisen zu machen, verwenden wir den Randradius mit einem Wert von 50 Prozent. In Ordnung? Jetzt haben wir Kreise. Im Moment werden sie vertikal in einer Spalte platziert. Wir müssen sie horizontal ausrichten. Und dafür verwenden wir Flexbox. Ich wähle Circle Wrapper und weise ihm dann Display Flex zu Als Nächstes schaffen wir etwas Abstand zwischen den Kreisen. Ich werde Margin verwenden. Machen wir oben und unten Null. Und dann 0,3 Rampe auf der linken und rechten Seite. Danach werde ich oben und unten in den Überschriftenelementen etwas Platz schaffen . Und ich möchte es auch in der Mitte platzieren. Also lasst uns weitermachen und It's wrapper div with the class progress auswählen wrapper div with the class progress Weisen Sie ihm dann einen Rand zu, setzen Sie ihn oben und unten auf einen Rem und verwenden Sie dann Null für die linke und rechte Seite. Außerdem werde ich Text verwenden, der an der Wertemitte ausgerichtet ist. In Ordnung, jetzt mit einem Fortschrittsbalken sind wir fertig. Wir werden es später mit JavaScript zum Laufen bringen. 85. Projekt 9 - Erstelle einen horizontalen Scroll-Effekt mit JavaScript: Okay, mit dem Styling sind wir fertig mit allen fünf Seiten oder einer benutzerdefinierten Seite, und jetzt ist es an der Zeit, JavaScript zu verwenden und unser Projekt dynamisch zu machen. Moment wird der Filter auf der Seite angezeigt und die restlichen Abschnitte werden dahinter platziert. Ich ordne die Seiten von der ersten Seite an in die richtige Reihenfolge und wirf die letzte. Und das mache ich mit der Z-Index-Eigenschaft. Lassen Sie uns den Klassennamen ändern. Wir brauchen Abschnitt eins statt Abschnitt fünf. Kopieren Sie dann diesen Code und fügen Sie ihn für die restlichen Abschnitte ein. Für den zweiten Abschnitt mache ich die Z-Index-Eigenschaft 40 Dann wird es für den dritten Abschnitt so sein. Als Nächstes haben wir den vierten Abschnitt. Wir brauchen hier 20. Und schließlich, für Abschnitt fünf, lassen Sie uns den Index gleich zehn machen. Also ist alles in Ordnung und wir können anfangen, JavaScript zu schreiben. Vorher werde ich Sie daran erinnern, was wir tun werden und wie das abgeschlossene Projekt funktioniert. Diese Abschnitte werden also der Reihe nach übereinander gelegt. Wir sehen hier standardmäßig den ersten Abschnitt. Und sobald wir nach unten scrollen, werden wir zum nächsten Abschnitt navigieren. Wir werden den Filter durchgehen. Und wenn wir dann wieder nach unten scrollen, gelangen wir auf die erste Seite. Neben dem Scrollen können wir mit diesen Steuerelementen auch zu den verschiedenen Abschnitten navigieren diesen Steuerelementen auch zu den verschiedenen Abschnitten In Ordnung, also all diese Dinge werden mit JavaScript programmiert Und das erste , was ich tun werde, ist , einen Event-Listener an das globale Fensterobjekt anzuhängen und eines der Ereignisse zu das globale Fensterobjekt anzuhängen und verwenden, das Wheel genannt wird Dieses Ereignis wird ausgelöst, sobald wir den Willen der Maus bewegen. Also lass uns das am Fenster befestigen. Beim Zuhörer der Veranstaltung. Es sollte zwei Argumente erfordern. Die erste wird die Veranstaltung sein. Wie gesagt, wir müssen das Rad benutzen. Was das zweite Argument betrifft, so wird es die Callback-Funktion sein Ich übergebe Ihnen Ihr Event-Objekt. Und dann lassen Sie es uns auf der Konsole ausführen. Sobald wir die Seite durchblättern , erhalten wir das Wheel-Event in der Konsole. Wenn ich es runtergelassen habe, finden Sie hier ein paar verschiedene Immobilien. Und eigentlich interessieren wir uns die Eigenschaft Delta Y. Moment sind es hundert. Das bedeutet, dass wir die Seite nach unten scrollen. Und wenn ich nach oben scrolle und den Wert der Eigenschaft Delta Y überprüfe , ob er gleich -100 sein sollte Wir werden diese Eigenschaft also verwenden , um zwischen den verschiedenen Seiten zu navigieren , wenn wir die Seite nach oben oder unten scrollen. Ordnung, also wenn der Wert der Eigenschaft Delta Y positiv ist, müssen wir zur nächsten Seite navigieren Und wenn es negativ ist, müssen wir zur vorherigen Seite gehen. Ich meine, nach rechts oder links scrollen. Wir müssen überprüfen, ob Delta y größer als Null ist. Als Nächstes erstelle ich eine neue Variable, die der Zähler sein wird. Es hilft uns zu definieren , welcher Abschnitt gerade angezeigt wird. Standardmäßig setze ich es auf Null. Wenn diese Bedingung also zutrifft, müssen wir den Zähler um eins erhöhen. Dafür verwende ich den Inkrementsoperator, der durch doppelte Pluszeichen ausgedrückt wird Wenn die Bedingung falsch ist, müssen wir den Zähler um eins verringern. Also müssen wir andere Aussagen verwenden. Wir müssen Ihren Zähler mit dem doppelten Minuszeichen passieren. Und zum Schluss lassen Sie uns den Zähler zur Konsole ausführen. Sobald wir also nach unten scrollen, erhöht sich der Zähler um eins. Und wenn ich nach oben scrolle, verringert es sich um eins. Ordnung, basierend auf dieser Logik können wir zu den verschiedenen Abschnitten navigieren Und dafür müssen wir Abschnittselemente auswählen. Ich werde die Abfrageauswahlmethode als Wert des Klassennamens verwenden als Wert des Klassennamens Ich werde hier das Folgende weitergeben. Verwenden wir Backticks. Dann werde ich deinen Abschnitt bestehen. Wie Sie sich erinnern, hat jeder Abschnitt einen Klassennamen mit der richtigen Nummer. Abschnitt eins, Abschnitt zwei und so weiter. Und als Nummer dieses Abschnitts müssen wir einen Zähler verwenden Okay, sobald dieser Abschnitt ausgewählt ist, müssen wir seinen Stil ändern. Ich meine, wir müssen diesen Abschnitt um hundert Viewport-Breite nach links verschieben hundert Viewport-Breite nach links Also müssen wir den linken Punkt formatieren und ihn auf eine Viewport-Breite von -100 setzen Okay, wenn ich also nach unten scrolle, werden wir zu den verschiedenen Seiten navigieren. Sobald wir die Fußzeile erreicht haben und erneut scrollen, erhalten wir den weißen Hintergrund Eigentlich ist es der Container. Und beim nächsten Scrollen erhalten wir eine Fehlermeldung , weil wir innerhalb von Nummer sechs keinen Abschnitt haben. Außerdem sehe ich hier den Teil des vierten Abschnitts. Wie Sie wissen, beträgt die Breite des unscharfen Hintergrunds 110 Prozent Um diesen Teil hier auszublenden, müssen wir overflow hidden verwenden und ihn diesem Abschnitt zuweisen Und um dieses Farbeffektmodell zu erstellen, verwenden wir Transition mit den Werten links und 1,5 s. Jetzt haben wir also einen viel schöneren Scroll-Effekt Ordnung, im Moment können wir die Seite nach unten scrollen, aber wir können nicht nach oben scrollen Um das zu erreichen, werde ich etwas Logik anwenden. Wenn der Wert der Delta-Y-Eigenschaft 100 ist, müssen wir nach unten scrollen. Und wenn es -100 ist, müssen wir nach oben scrollen Also anstatt nur minus hundert Viewport-Breite, lassen Sie uns Backticks öffnen Verwenden Sie dann das Dollarzeichen mit den Codeklammern. Wir müssen also überprüfen, ob das Delta y positiv oder negativ ist. Wir brauchen hier die gleiche Bedingung. Ich bin in dem Zustand, den wir in der IF-Aussage verwendet haben. Und eigentlich wäre es besser, wenn wir diese Bedingung in der Variablen speichern diese Bedingung in der Variablen und dann diese Variable verwenden. Lassen Sie uns also ein konstantes Delta y erstellen. Und dem zugewiesenen E-Punktdelta y ist größer als Null. Die verwenden diese Variable in der if-Anweisung. Und gib es auch hier weiter. Wenn das stimmt, müssen wir diesen Abschnitt um -100 Viewport-Breite nach links verschieben -100 Viewport-Breite nach links Und wenn es falsch ist, brauchen wir Null. Wenn ich also nach unten scrolle und dann versuche, nach oben zu scrollen, funktioniert es. Aber mit einem kleinen Problem. Wie Sie sehen, können wir nicht zur vorherigen Seite navigieren. Wenn wir nach oben scrollen, wird die vorherige Seite weggelassen. Das passiert, weil wenn wir nach unten scrollen, der Zähler um eins erhöht wird. Und sobald wir nach oben scrollen, wird es verringert. Wir müssen seinen letzten Wert beibehalten. Mit nur einem Zähler können wir das also nicht erreichen. Also werde ich einen weiteren Zähler erstellen. Nun, lassen Sie uns den Namen dieses Zählers ändern und ihn zu einem Zähler machen. Dann duplizieren Sie diese Codezeile. Ich nenne diese Variable Counter to. Und dann setzen wir es auf eins. Danach verwenden wir diesen Zähler und auch die FL-Anweisung. Okay, lassen Sie uns den Konsolenzähler eins durchgehen und auf zwei stoßen. Und anstatt nur den Zähler zu überprüfen, müssen wir den gleichen Zustand überprüfen. Ich meine, ob das Delta Y positiv oder negativ ist. Wenn es also stimmt, sollten wir den ersten Zähler verwenden. Und wenn es falsch ist, was bedeutet, dass wir nach oben gescrollt haben, dann müssen wir Counter to verwenden Wenn ich jetzt nach unten oder oben scrolle, funktioniert alles einwandfrei bis wir die Fußzeile erreichen und wieder nach oben scrollen Ebenso haben wir die erste Seite erreicht und scrollt nach oben. In Ordnung, jetzt werden wir diese Probleme mit zwei verschiedenen IF-Aussagen beheben diese Probleme mit zwei verschiedenen IF-Aussagen Sobald wir den Filter erreicht haben und nach unten scrollen, müssen wir die erste Seite anzeigen. Und auch alle anderen Abschnitte sollten übereinander ausgerichtet sein, wie es im Standardfall der Fall ist. Lassen Sie uns zunächst alle diese Abschnitte auswählen. Ich werde sie in einer Variablen speichern, nennen wir es Abschnitte. Um all diese Abschnitte auszuwählen, verwende ich die Methode Query Selector All Lassen Sie uns hier den Abschnitt mit den Tagnamen weitergeben. Wenn Zähler eins also fünf entspricht, bedeutet das, dass die Fußzeile angezeigt wird und wir auf dieser Seite nicht mehr scrollen müssen Wir müssen uns diese Abschnitte ansehen und ihre linke Position auf Null setzen. Außerdem müssen wir beide Zähler zurücksetzen. Ich meine, wir müssen beide auf ihre Standardwerte setzen . Lassen Sie uns also weitermachen und eine if-Anweisung als Bedingung erstellen . Wir müssen kontern, dass ein Triple gleich fünf ist Als Nächstes müssen wir uns diese Abschnitte ansehen. Wie Sie wissen, gibt die Methode Query Selector All eine Knotenliste zurück und wir müssen sie in ein Array umwandeln Verwenden wir dafür die Methode array from. Um das Array dieser Abschnitte durchzusehen, verwende ich eine der Array-Hilfsmethoden, die für jeden Abschnitt aufgerufen werden Dann müssen wir eine Callback-Funktion übergeben, die einen Parameter annimmt und es wird das aktuelle Element im Array sein Ich bin in der aktuellen Sektion. Wie gesagt, wir müssen für alle Abschnitte eine linke Position Null festlegen. Deshalb müssen wir Ihren Abschnitt Punktstil Punkt links verwenden , und wir müssen ihn auf Null setzen. Außerdem müssen wir beide Zähler zurücksetzen. Ich meine, wir müssen Zähler eins auf Null setzen und Zähler auf eins. Und schließlich werde ich eine Return-Anweisung verwenden, die es uns ermöglicht, die Ausführung jedes anderen Codes in dieser Funktion zu beenden . In Ordnung, wenn ich also nach unten scrolle und zur Fußzeile greife, werden Sie sehen, dass der Zähler eins gleich Und beim nächsten Scrollen wird die Bedingung in der IF-Anweisung wahr sein. Wir werden zur ersten Seite navigieren und alle anderen Seiten werden wie im Standardfall ausgerichtet. Okay, das erste Problem ist also behoben. Als nächstes müssen wir uns um das zweite Problem kümmern. Ich meine, wenn die erste Seite angezeigt wird und wir nach oben scrollen, erhalten wir die Fehlermeldung, dass der Eigenschaftsstil Null nicht gelesen werden kann. Okay, jetzt müssen wir überprüfen, ob der Zähler eins minus eins ist. In diesem Fall müssen wir all diese Abschnitte um -100 Viewport-Breite nach links verschieben -100 Viewport-Breite nach links Wir müssen das Foto anzeigen Lassen Sie uns also eine weitere if-Anweisung erstellen. Wir müssen also überprüfen, ob Zähler eins minus eins ist. Wenn das stimmt, müssen wir uns diese Abschnittsliste ansehen. Dann müssen wir allen Abschnitten außer diesem Abschnitt fünf geben , eine linke Position mit dem Wert -100 Viewport-Breite Also werde ich zunächst Abschnitte mithilfe der Methode array dot from in ein Array umwandeln . Lassen Sie uns Ihre Abschnitte weitergeben. Verwenden Sie dann die forEach-Methode. Wir müssen Ihre Callback-Funktion mit dem Argumentabschnitt übergeben, das aktuelle Element sein wird, ich meine der aktuelle Abschnitt Wie gesagt, wir müssen die letzte Position für alle diese Abschnitte mit Ausnahme der zweiten fünf Viewport-Breite auf -100 festlegen Lassen Sie uns weitermachen und hier eine weitere if-Anweisung verwenden , bei der wir überprüfen müssen, ob der erstklassige Name des aktuellen Elements im Array Abschnitt fünf entspricht Wir benötigen Abschnitt Punkt Klassenliste. Und wir müssen hier angeben, dass sich die Indexnummer Null auf den ersten Klassennamen bezieht. Dann brauchen wir Triple Equals Abschnitt fünf. Wenn diese Bedingung also zutrifft, müssen wir die Ausführung dieser Funktion beenden , indem wir die Anweisung return verwenden. In allen anderen Fällen müssen wir die linke Position dieser Aktion auf eine Viewport-Breite von -100 festlegen Wir müssen also den linken Punkt im Punktstil abschneiden, der einer Viewport-Breite von -100 entspricht Außerdem müssen wir Zähler eins bis vier setzen, N Zähler zwei bis fünf, weil in diesem Fall die Fußzeile auf der Seite angezeigt wird Wenn wir also testen, werden Sie feststellen, dass alles gut funktioniert. 86. Projekt 9 - Fortschrittsleiste mit JavaScript arbeiten: Ordnung, sobald wir es als Nächstes geschafft haben, durch die Seiten zu blättern, werde ich weitermachen und mit der Arbeit am Fortschrittsbalken beginnen , der sich in der unteren linken Ecke befindet Und im Moment macht es nichts. Der Fortschrittsbalken sollte also anzeigen, welche Seite gerade angezeigt wird und auch der richtige Kreis sollte hervorgehoben sein. Lassen Sie uns weitermachen und eine Funktion erstellen. Ich nenne es einen Fortschrittszähler. Wir müssen also zwei Dinge tun. Wir müssen diese Überschrift dynamisch gestalten und wir müssen uns auch um diese Kreise kümmern. Zuerst werde ich an der Überschrift arbeiten. Lassen Sie uns fortfahren und diese Elemente auswählen. Ich werde es in der Variablen Fortschritt speichern. Lassen Sie uns Elemente mit der Methode querySelector auswählen. Gib deinen Klassenfortschritt gefolgt vom H2-Tagnamen weiter. Also müssen wir den Inhalt der Überschrift so ändern , dass er sich auf der rechten Seite befindet. Ich werde Counter to verwenden, weil es mit eins beginnt und bis fünf geht. Was den zweiten Teil betrifft, so wird es sich um die Länge dieser Abschnittsliste handeln. Um also den Inhalt des Elements zu ändern, verwende ich eine der Eigenschaften, die als Textinhalt bezeichnet werden. Wir brauchen hier Fortschritte. Punktieren Sie den Textinhalt, dann öffnen Sie ihn hier. Backticks, gefolgt vom Dollarzeichen und den farbigen Klammern Wie gesagt, wir werden den Zähler verwenden, um dann den Schrägstrich zu verwenden. Und lassen Sie uns hier die Punktlänge der Abschnitte durchgehen. Also müssen wir diese Funktion hier drinnen aufrufen. Stattdessen Fortschrittszähler. Und wir müssen es auch innerhalb der IF-Aussagen nennen. Wie Sie sehen, funktioniert der erste Teil unseres Fortschrittsbalkens perfekt. In Ordnung, schauen wir uns die Überschrift an. Gehen wir zu den Kreisen über. Zuallererst werde ich sie auswählen. Lassen Sie uns variable Kreise erstellen und dann alle Kreise mit der Methode querySelector all auswählen Methode querySelector Ich werde hier den ClassName-Kreis passieren. Also schauen wir uns diese Kreise an und weisen ihnen eine transparente Hintergrundfarbe zu. Sobald wir dann scrollen, erhält der richtige Kreis einen anderen Hintergrund. In diesem Fall verwenden wir, wieder bis zwei zählen. Zunächst werden Kreise mithilfe der Methode array from in das Array umgewandelt . Lassen Sie uns hier Kreise passieren und dann für jeden Array-Helfer verwenden. Wir haben hier zwei Pfade, Callback-Funktion mit dem aktuellen Element des Arrays, ich meine Kreis Und dann müssen wir als Codeblock die Hintergrundfarbe ändern und ihn transparent machen. Wir brauchen also Kreispunkt, Stil, Punkt, transparente Hintergrundfarbe. Okay, als Nächstes müssen wir die Hintergrundfarbe für den richtigen Kreis ändern . Also lass uns weitermachen und den Kreis auswählen. Wir brauchen eine Dokumentenpunktabfrage, einen Selektor. Dann öffne hier Backticks. Weil wir die Nummer des Kreises definieren müssen. Wir brauchen ein Dollarzeichen, lockige Zahnspangen. Und wieder, entgegen. Danach ändern wir die Hintergrundfarbe. Wir brauchen eine Stilpunkt-Hintergrundfarbe. Lass es uns mit dem D hellgrau machen. Okay, wenn ich also scrolle wird die Hintergrundfarbe für die Kreise geändert Aber eigentlich haben wir hier ein kleines Problem. Wenn ich die Seite neu lade, der erste Kreis keinen Hintergrund Also müssen wir es manuell definieren. Gehen wir zur Datei style.css und wählen den ersten Kreis aus und legen seine Hintergrundfarbe fest. Außerdem werde ich Transition mit Hintergrundfarbe und einer Dauer von 0,3 s verwenden Hintergrundfarbe und . In Ordnung, jetzt funktioniert alles einwandfrei Und mit dem Fortschrittsbalken sind wir fertig. Als Nächstes werde ich weitermachen und mich um die Steuerung kümmern. Lassen Sie uns zunächst beide Schaltflächen auswählen und ihnen Event-Listener mit einem Klick-Event hinzufügen Ich fange mit der linken Taste an. Verwenden wir erneut die Methode querySelector mit einem Klassennamen links btn und angehängten Add-Event, Listener mit Click-Event Click-Event Ich werde diesen Code duplizieren und von links nach rechts wechseln. Ordnung, sobald wir auf die linke Schaltfläche klicken, müssen wir beide Zähler um einen verringern Und im Falle der rechten Maustaste müssen wir sie um eins erhöhen. Also brauchen wir hier Zähler eins, Minus, Minus und dann Zähler zu mit wieder doppelten Minuszeichen. Bei der rechten Maustaste benötigen wir beide Zähler mit Plus-Plus-Zeichen. Um zu den verschiedenen Seiten zu gelangen, müssen wir die Führungsposition für diese Aktionen ändern. Im Fall der linken Taste definieren wir die Abschnittsnummern also mithilfe von Counter to. Für den rechten Knopf benötigen wir Zähler eins. Lassen Sie uns also den Document Dot Query Selector schreiben. Dann öffnen Sie die hinteren Häkchen und geben Sie den unsicheren Abschnitt als Nummer dieses Abschnitts an Verwenden wir Counter to. Als Nächstes müssen wir die linke Position definieren und sie auf Null setzen. Schnappen wir uns diesen Code, fügen ihn hier ein und ändern Zähler in Zähler eins. Und stellen Sie auch die linke Position auf -100 Viewport-Breite ein. Ordnung, wenn ich also auf die Pfeile klicke, navigieren wir zu verschiedenen Abschnitten Und sobald wir zur Fußzeile gelangen und erneut klicken, werden wir auf dieselben Probleme stoßen, die wir im Falle eines Radereignisses hatten Das Gleiche passiert, wenn wir auf den Linkspfeil klicken , wenn die erste Seite angezeigt wird. Um diese Probleme zu beheben, müssen wir also erneut IF-Statements verwenden. Und um zu vermeiden, dass sie zweimal verwendet werden, werde ich eine Funktion erstellen und wir werden diese Funktion mehrmals aufrufen. Lassen Sie uns also eine Funktion in einem Seitencontroller erstellen. Dann hole ich mir beide IF-Anweisungen von hier und füge sie in die Seitencontroller-Funktion ein. Außerdem müssen wir die Fortschrittszählerfunktion aufrufen. Jetzt können wir diese Funktion innerhalb eines Willens Events aufrufen. Und wir können beide Aussagen loswerden. Wie Sie sehen können, funktioniert alles immer noch gut. Wenn wir nach unten scrollen, ich meine, wenn wir das Mundrad benutzen und bis zur Fußzeile greifen, erhalten wir beim nächsten Scrollen die Fehlermeldung, dass der Eigenschaftsstil von Null nicht gelesen werden Eigenschaftsstil von Null nicht gelesen Das passiert, weil beim letzten Aufruf, wenn die Anweisung innerhalb der Seitencontroller-Funktion ausgeführt wurde , der Zähler auf Null gesetzt wurde. Wir haben keinen Abschnitt mit dieser Nummer und daher haben wir eine Fehlermeldung erhalten. Also wenn es passiert, ich meine, wenn eine der if-Anweisungen ausgeführt wird, dann wollen wir diesen Code nicht ausführen. Ordnung, um das zu beheben, müssen wir einen booleschen Wert aus der Seitencontroller-Funktion zurückgeben aus der Seitencontroller-Funktion Dazu erstellen wir eine neue Variable außerhalb der Funktion. Ich nenne es Bu. Und das ist ihm durch zugewiesen. Dann müssen wir diese Variable innerhalb der Funktion auf true setzen. In diesem Fall wird Boolean bei jeder Ausführung der Funktion auf true aktualisiert Aber wenn die if-Anweisung ausgeführt wird, müssen wir Boolean auf false setzen Das müssen wir in beiden Aussagen tun. Und schließlich müssen wir den Booleschen Wert selbst zurückgeben. Also wie wir schon gesagt haben, wir müssen diesen Code ausführen, der Boolesche Wert wahr ist Also brauchen wir hier Pool gefolgt vom logischen Operator und dem Operator. Wenn wir jetzt scrollen, werden Sie sehen, dass alles einwandfrei funktioniert und wir keine Fehler mehr haben. In Ordnung, gehen wir zurück zu den Kontrollen. Wir müssen bei jedem Klick die Seitencontroller-Funktion aufrufen. Aber wir brauchen hier eine bedingte Erklärung. Wenn die Seitencontroller-Funktion den Wert true zurückgibt, müssen wir diesen Code hier ausführen. Und wenn es falsch zurückgibt, wird nur diese Funktion ausgeführt, was völlig ausreichend ist. Also brauchen wir hier den Seitencontroller, gefolgt vom logischen und Operator Okay, lassen Sie uns überprüfen, ob alles einwandfrei funktioniert. Wir können also sehen, dass die Kontrollen perfekt funktionieren. Ordnung, also mit den Kontrollen wurden ein X. Ich werde mich um den dritten Abschnitt kümmern Wenn Sie sich das fertige Projekt ansehen, werden Sie feststellen, dass wir hier einen schönen Schwebeeffekt haben Wir werden diesen Effekt mit CSS und JavaScript erstellen . Gehen wir also zur Datei style.css und weisen dem Abschnitt drei Hintergrundfarbe Schwarz zu. Dann wähle ich das Grabbild mit dem Mauszeiger aus. Und ich werde die Opazität zu einer machen. Außerdem müssen wir die Größe des Bildes mithilfe von Transform Scale erhöhen . Und lassen Sie uns auch hier einfügen. Außerdem müssen wir einen Übergang mit einem Wert 1,5 s durchführen. Okay, schauen wir uns an, wie das funktioniert. Wenn ich also den Mauszeiger über das Bild bewege, wird es größer und die Opazität nimmt Okay, jetzt müssen wir uns um den Hintergrund kümmern und das mit JavaScript. Ich werde die Ereignisse mit der Maus über und mit der Maus ausdrücken. Lassen Sie uns also weitermachen und das Traubenbild auswählen. Verwenden Sie erneut die Abfrageauswahlmethode. Lass uns dir die Gräber übergeben IMG. Dann an einen Event-Listener anhängen. Sobald wir also mit der Maus über das Bild fahren, müssen wir die Opazität des Abschnittsumschlags verringern Und wenn wir die Maus rausziehen, müssen wir sie wieder auf eins erhöhen. Lassen Sie uns also Ihre Maus über das Ereignis führen , dann benötigen wir eine Pfeilfunktion. Und als Codeblock wähle ich den Wrapper für Abschnitt drei mit der Methode querySelector Und dann müssen wir die Opazität auf 0,5 erhöhen. Also müssen wir die Opazität gleich 0,5 gestalten. Lassen Sie uns diesen Code duplizieren und die Ereignisse ändern, die wir hier benötigen, meilenweit entfernt. Und wir müssen auch die Opazität ändern . Machen wir eins daraus. Schließlich werde ich Transition für diesen Abschnitt drei Wrapper verwenden , der Wert auf Opazität und 1,5 s legt. Ordnung, also wie Sie sehen können, funktioniert alles einwandfrei Wir haben hier einen schönen Schwebeeffekt. Tatsächlich wird dieser Abschnitt dunkler , weil wir den Elementen dieses Abschnitts eine schwarze Hintergrundfarbe zugewiesen haben Elementen dieses Abschnitts eine schwarze Hintergrundfarbe 87. Projekt 9 - Projekt reaktionsfähig machen: In Ordnung, der größte Teil unseres Projekts ist abgeschlossen. Und als Nächstes möchte ich unser Projekt an verschiedene Bildschirmgrößen anpassen. Eigentlich wird es nicht der letzte Teil dieses Tutorials sein , weil wir dem Projekt noch ein paar Dinge hinzufügen werden. Lassen Sie uns weitermachen und in den Responsive-Modus wechseln. Das Projekt ist für eine größere Bildschirmgröße konzipiert. Ich bin auf dem Bildschirm mit 1920 Pixeln Breite und 1080 Pixeln Höhe. Der erste Breakpoint, an dem ich einige Änderungen vornehmen möchte, wird also ich einige Änderungen vornehmen möchte 1.600 Pixel sein Ich habe diese Breakpoints bereits überprüft, daher werde ich im Video keine Zeit damit verschwenden Am Breakpoint möchte ich an Abschnitte anpassen. Es sollte die Fußzeile und der zweite Abschnitt sein. Lassen Sie uns also weitermachen und eine CSS-Medienabfrage erstellen. Geben Sie dann die maximale Breite als 1.600 Pixel an. Also werde ich zuerst den zweiten Abschnitt anpassen. Wählen wir Bild, das zurückgesegelt ist, und ändern wir seine Breite, machen wir es zu einer 35. Rampe Wählen Sie dann das zweite Bild aus, das den Klassennamen Weinflasche trägt, und definieren Sie als Breite 65 Marke. Diese Silbe. Der zweite Abschnitt, Gehen wir zur Fußzeile Ich werde die Breite des Bildes und auch die Größe des Randes auf der linken und rechten Seite verringern . Wählen wir also Footer IMG Set mit 245 RAM aus. Was den Rand angeht, machen wir ihn auf 0,12 RAM auf der linken und rechten Seite Ordnung, die Fußzeile sieht also gut aus und wir sind fertig mit einem Der nächste wird 1.300 Pixel haben. An diesem Breakpoint werden wir uns erneut um diese beiden Abschnitte kümmern erneut um diese beiden Abschnitte Also werde ich diesen Code duplizieren und einfach die Werte ändern. Lassen Sie uns die maximale Breite von 1.300 Pixeln als Breite des Segelback-Bilds Fügen Sie hier in den RAM ein. Dann machen Sie die Breite der Weinflasche auf das Bild 60 RAM. Was das Fußzeilenbild angeht, lassen Sie uns seine Breite auf 35 RAM festlegen Was den Rand angeht, lassen Sie uns zehn Runs auf der linken und rechten Seite machen. Okay, das war's, ungefähr 1.300 Pixel. Beide Abschnitte sehen gut aus. Gehen wir zum nächsten Breakpoint über. Wir werden nur 1.200 Pixel groß sein. Lassen Sie uns also weitermachen und mit ihnen eine neue Medienabfrage mit maximaler Breite von 1.200 Pixeln erstellen mit ihnen eine neue Medienabfrage mit maximaler Breite von 1.200 Pixeln Das erste, was ich tun möchte, ist, den Abstand zwischen den Navigationselementen zu verringern. Lassen Sie uns weitermachen und den Nav-Link auswählen und den Rand auf 0,1 setzen, 0,5 GB RAM auf der linken und rechten Seite. Dann kümmern wir uns um die Überschrift des ersten Abschnitts. Also wähle ich zunächst diesen Wrapper mit dem Klassennamen Abschnitt eins, Überschrift Gummi Das ist Make mit 80 Prozent. Wählen Sie danach die Überschrift selbst aus. Ändere die Schriftgröße, mach einen Terraner Okay, das war's mit dem ersten Abschnitt. Gehen wir zum zweiten über. Ich werde die Größe dieser drei Elemente verringern. Ich meine die Bilder und den Boden. Fangen wir also mit dem Zurücksegeln an. Lass uns seine Breite bestimmen. 25 RAM, die ich aussuchen werde , Verkauf BTN. Ich werde die Breite ändern. Machen wir 15 Rennen draus. Dann ändere die Höhe und setze es auf Forum. Und ich werde auch die Schriftgröße ändern. Machen wir eine Rampe von 1,7. Und zum Schluss wähle ich eine Weinflasche aus. Lass uns seine Breite bestimmen. 50 Ran. Okay, das ist alles. Über den zweiten Abschnitt. Es sieht nett aus. Und die einzige Seite, die wir am Breakpoint anpassen werden, ist die Fußzeile Lassen Sie uns weitermachen und Footer Image auswählen. Ändere seine Breite, mach es zu 25 RAM Was den Rand angeht, werde ich ihn 0,7 laufen lassen. In Ordnung, mit 1.200 Pixeln sind wir fertig. Diese Abschnitte sehen gut aus und funktionieren einwandfrei. Wir müssen also zum nächsten Breakpoint übergehen, der aus tausend Pixeln bestehen wird Lassen Sie uns also weitermachen und neue Medien erstellen und maximale Breite als tausend Pixel angeben Am Breakpoint müssen wir ein paar Dinge tun. Zuerst werde ich all diese Abschnitte mit Ausnahme des ersten anpassen . Und dann kümmern wir uns um die Navigation. Ich werde die Navbar in das Hamburger-Menü umwandeln Navbar in das Hamburger-Menü Lassen Sie uns auch mit diesem Abschnitt beginnen. Ich wähle Sektion Zwei Rubber aus. Moment werden die Bilder horizontal in einer Reihe platziert und ich möchte die Richtung von Zeile zu Spalte ändern. Also müssen wir die Richtung ändern. Und wir müssen es so einstellen, dass es sie anruft. Außerdem werde ich die Reihenfolge des Verkaufs ändern , der dem Verkauf zugewiesen ist. Eins. Das ist alles. Über den zweiten Abschnitt. Gehen wir zum nächsten über. Wie Sie sehen können, müssen wir die Größe der Elemente verringern , da sie zwei größer sind. Ich fange mit der Überschrift von Abschnitt drei an. Ändern wir die Schriftgröße, lassen wir es 12 laufen. Außerdem wähle ich das Rahmenbild aus. Lassen Sie uns die Breite ändern und es auf sieben laufen lassen. Soweit das Traubenbild. Ich setze die Breite auf 25 Durchläufe. In Ordnung, mit diesem dritten Abschnitt sind wir fertig. Fahren wir mit dem nächsten Abschnitt fort. Ich werde sowohl die Größe der Überschrift als auch die Größe des Bildes verringern . Wählen wir also die Überschrift für Abschnitt vier aus und runden die Schriftgröße acht ab. Was das neue Wein-Image angeht, machen wir es auf 60 Ran breit. Okay, gehen wir zur Fußzeile über. Im Moment sind die Elemente horizontal in einer Reihe angeordnet. Und ich möchte die Richtung ändern und sie in einer Spalte platzieren. Und ich möchte auch eine Reihenfolge der Elemente ändern. Ich möchte das Bild unter diesen Listen platzieren. Lassen Sie uns also weitermachen und Abschnitt fünf Wrapper und Make It die Spalte „ Flexrichtung erstellen“ auswählen Wrapper und Make It die Spalte „ Flexrichtung Wählen Sie auch Footer IMG aus. Stellen wir die Breite auf 20 RAM ein. Und ändere auch die Reihenfolge. Ich werde es auf ein Ende setzen. Abschließend wähle ich am wenigsten die Fußzeile aus. Definieren wir seine Breite als 20 RAM. Und ich werde auch Margin verwenden. Stellen wir es oben und unten auf zwei REM und dann auf R0 auf der linken und rechten Seite Okay, die Fußzeile ist Customize und eigentlich ist es an der Zeit, ein Hamburger-Menü zu erstellen Werfen wir zunächst einen Blick auf die abgeschlossenen Projekte. Ich werde die Seite überprüfen und in den Responsive-Modus wechseln. Nach tausend Pixeln sind die Navigationselemente also nicht mehr sichtbar. Und wir haben hier ein Menüsymbol. Wenn ich darauf klicke, werden diese Linien in ein X umgewandelt und es wird werden diese Linien in ein X umgewandelt und entschieden, wo wir innerhalb der Navigationselemente von der rechten Seite aus angezeigt werden . Schauen wir uns also an, was wir tun werden. Gehen wir zunächst zur Datei index.html und erstellen das HTML-Markup Das Menüsymbol wird also als Link dargestellt , in dem wir drei Abteilungen als Linien des Symbols haben werden . Öffnen wir also ein Element mit der Klasse Menu. Dann füge ich die Entwicklung in den Link ein. Es sollte zwei verschiedene Klassen haben. Die erste wird die Menüzeile für das allgemeine Styling sein . Was die zweite betrifft, so wird es die erste Menüzeile sein. Es wird für das individuelle Styling verwendet. Insgesamt werden wir also drei verschiedene Linien haben. Lassen Sie uns diese Codezeile zweimal duplizieren und die Klassennamen ändern. Wir brauchen hier Menüzeile zwei und Menüzeile drei. Okay, also zuerst müssen wir das Symbol standardmäßig ausblenden, da wir es erst anzeigen möchten, wenn die Bildschirmgröße weniger als tausend Pixel beträgt. Wählen wir also Menü und weisen Sie zu , dass keines angezeigt wird. Okay, bevor wir anfangen, das Menüsymbol zu gestalten, kümmern wir uns um die Navigation selbst Ich werde die Sidebar erstellen. Lassen Sie uns also weitermachen und die Navigationsliste auswählen und ihre Position als absolut Definieren Sie außerdem die oberen und rechten Eigenschaften. Ich setze auf Fibrin. Was das Recht angeht, so wird es Null sein. Ändere auch die Richtung. Ich werde die Elemente in einer Spalte platzieren. Also müssen wir die Richtungsspalte biegen. Wie ich sehe, befinden sich die Navigationselemente auf der rechten Seite in einer Spalte. Als Nächstes definiere ich die Höhe der Liste. Ich werde hier einige Berechnungen verwenden. Wie Sie wissen, haben wir die oberste Position auf fünf RAM gesetzt und ich möchte die Höhe der Liste auf hundert Viewport-Höhe minus fünf Runs setzen die Höhe der Liste hundert Viewport-Höhe minus fünf Runs Um diese Berechnung durchzuführen, verwenden wir die Funktion calc Wir brauchen hier hundert Sichtfensterhöhen minus fünf R&. Ändern Sie auch die Hintergrundfarbe. Ich mache es dunkelgrau mit 333. Okay, so sieht die Sidebar jetzt aus. Die Navigationselemente landeten in der Mitte, und ich werde sie dafür nach oben verschieben Verwenden wir Justify Content. Beginne. Und außerdem werde ich etwas Platz in der Liste schaffen, indem ich den Füllwert zum Ausführen verwende In Ordnung, damit schaffen wir etwas Abstand zwischen den Objekten. Außerdem werde ich die obere linke Ecke der Seitenleiste leicht abgerundet machen die obere linke Ecke der Seitenleiste leicht abgerundet Verwenden wir also den Grenzradius mit Werten von 0,5 g, gefolgt von drei Wählen Sie dann den Nav-Link und setzen Sie den Margin auf einen Lauf. Die Navigationsliste ist Anpassen und jetzt ist es an der Zeit, sich um das Menüsymbol zu kümmern . Aber vorher möchte ich das Logo in der oberen linken Ecke der Seite platzieren Logo in der oberen linken Ecke der Seite Dazu wählen wir Navbar und weisen sie der Ausrichtung von Inhalten zu Beginne. Und schaffen Sie auch etwas Platz, indem Sie eine Polsterung verwenden, die links vom Wert zur Rampe steht In Ordnung, das war's mit dem Logo. Lassen Sie uns weitermachen und mit der Arbeit am Menüsymbol beginnen. Wählen wir es also aus. Zuallererst werde ich es auf Display-Block setzen, denn wie Sie wissen, denn wie Sie wissen, gerade in diesem Hidden Using Using Display Kone. Als Nächstes definiere ich seine Breite und Höhe. Lassen Sie uns mit zwei für RAM beginnen. Was die Höhe angeht, lassen Sie uns eine 2,5-Rampe daraus machen. Und zum Schluss machen Sie die Hintergrundfarbe weiß. Ich verwende diese Farbe, um das Menüsymbol sichtbar zu machen. Wie Sie sehen, landete das Menüsymbol in der oberen linken Ecke der Seite Also müssen wir seine Position definieren. Machen wir es absolut. Und dann verwende die oberen und rechten Positionen. Ich werde die Spitzenposition auf einen RAM setzen. Was die richtige Position angeht, lasst uns die Rampe erreichen. Okay, jetzt ist das Symbol richtig platziert. Und als nächstes müssen wir die Linien anzeigen. Lassen Sie uns also weitermachen und die Menüzeile auswählen. Es ist der gemeinsame Klassenname für alle drei Zeilen. Fangen wir mit 200 Prozent an. Dann. Ich definiere die Höhe als Rampe 0,3 und definiere auch die Hintergrundfarbe. Ich mache es rot, indem ich D5 und vier Nullen verwende. Wie Sie sehen können, sind die Linien sichtbar, aber sie liegen übereinander. Wir brauchen etwas Platz zwischen ihnen. Lassen Sie uns also weitermachen und Flexbox verwenden. Ich setze die Display-Eigenschaft auf Flex. Dann müssen wir die Richtung ändern. Machen wir daraus eine Kolumne. Und um etwas Abstand zwischen den Zeilen zu schaffen, verwenden wir den Inhalt mit dem Werteabstand zwischen den Zeilen begründen. Und entferne auch den weißen Hintergrund. Also haben wir hier das Menüsymbol. Alles ist maßgeschneidert und bereit, damit diese Sidebar und das Hamburger-Menü funktionieren Sobald wir also auf diese Linien klicken, die erste und die dritte Zeile sollten die erste und die dritte Zeile in X umgewandelt werden Was die zweite Zeile betrifft, sollte sie unter dem X nach unten verschoben Lassen Sie uns also zunächst Zeilen auswählen und sie anpassen. Und danach sorgen wir dafür, dass das Menüsymbol mithilfe von JavaScript funktioniert. Ich wähle die erste Zeile mit der ersten Zeile des ClassName-Menüs Also müssen wir die Linie drehen und sie auch leicht bewegen. Also werde ich die Funktion Transformieren mit Rotate verwenden. Das sind hier 40 Grad. Außerdem werde ich die Funktion Translate verwenden, der wir die Elemente entlang der X- und Y-Achse bewegen können Elemente entlang der X- und Y-Achse Also werde ich hier 0,5 RAM und dann eine Rampe passieren . Gleich danach wähle ich die zweite Menüzeile Im Falle einer zweiten Zeile müssen wir die Funktion nicht drehen, wir müssen nur die Funktion Translate verwenden. Verwenden Sie also transform translate mit den Werten Minuspunkt auf RAM. Dann zu R& S für die dritte Zeile Lassen Sie uns diesen Code von hier kopieren und einfügen. Ich ändere den Klassennamen. Wir brauchen Menüzeile drei statt eins. Außerdem müssen wir die dritte Linie um -40 Grad drehen. Während die Translation funktioniert, benötigen wir Q minus ein RAM statt einer Rampe. In Ordnung, wir haben hier standardmäßig X, aber das brauchen wir nicht Wir mussten das Symbol in X umwandeln, sobald wir darauf klicken. Also werde ich eine neue Klasse in CSS definieren , die mit einer Toggle-Methode zur Navbar hinzugefügt wird In dieser neuen Klasse werden wir neue Stile definieren , die auf die Elemente angewendet werden. Sobald wir auf das Symbol klicken werden sie entfernt, sobald wir erneut auf das Symbol klicken. Gehen wir also zur Datei script.js. Und zuallererst fehlte immer noch das Menüsymbol. Ich werde eine Variable erstellen, nennen wir sie Menu. Wählen Sie dann das Element mit der Methode querySelector aus. Wir müssen deinen Klassennamen Menu weitergeben. Danach. Fügen wir ihm einen Event-Listener hinzu. Wir müssen die Methode add event listener verwenden, die zwei Argumente benötigen sollte Das erste wird das Klick-Event sein. den zweiten betrifft, lassen Sie uns hier eine Pause einlegen, die Pfeilfunktion. Dann müssen wir in den geschweiften Klammern Navbar auswählen Lassen Sie uns erneut die Abfrageauswahlmethode verwenden. Wie gesagt, wir müssen der Navbar eine neue Klasse hinzufügen. Dafür verwende ich eine der Eigenschaften namens Klassenliste, die alle Klassen der Elemente enthält, in diesem Fall Navbar Als nächstes müssen wir die Methode umschalten. Und schließlich müssen wir Ihnen den Klassennamen übergeben, der geändert werden soll Okay, das war's mit JavaScript. Jetzt müssen wir den Zeilen einen Klassenwechsel hinzufügen. Verwenden wir den Multi-Cursor und fügen ihn hier ein. Für alle drei Linien: Klassenwechsel. Dann werde ich die Sidebar standardmäßig ausblenden, und zwar sofort. Die richtige Position ist auf Null gesetzt und wir brauchen einen Lauf von -21. Und schließlich müssen wir es anzeigen, sobald Sie auf das Symbol klicken. Also müssen wir uns wieder ändern. Gefolgt vom Romanautor. Wir müssen die richtige Position Null erreichen. Okay? Wenn ich also auf das Symbol klicke, wird es in X umgewandelt und entscheide auch, wo wir von der rechten Seite angezeigt werden . Das einzige, was wir tun müssen, ist, diese Effekte mithilfe von Übergängen glatter zu machen diese Effekte mithilfe von Übergängen glatter Nicht zuletzt brauchen wir einen Wandel, bei dem die Werte stimmen. Und 0,5 s. Was die Menüzeile angeht, benötigen wir einen Übergang mit Transformation mit einer Dauer von 0,5 s. Also funktioniert alles einwandfrei. Und mit der Navigation sind wir fertig. Wir müssen zum nächsten Breakpoint übergehen, der 800 Gipfel sein wird Lassen Sie uns also neue Medien mit einer maximalen Breite von 800 Pixeln erstellen. Zunächst ändere ich die Position der Controls. Platzieren wir sie in der Nähe der Seitenränder. Wählen wir den fehlenden Button und stellen wir seine linke Position auf Ausführen ein Dann wähle ich die richtige BTN und stelle die richtige Position ein, um ebenfalls zu rennen Als Nächstes werde ich die Größe der Überschrift der ersten Seite verkleinern . Lassen Sie uns also weitermachen und es anhand der Überschrift „Klassenabschnitt 1“ auswählen . Machen wir die Schriftgröße sechs rund. Okay, das war's mit dem ersten Abschnitt. Gehen wir zum zweiten Abschnitt über. Ich werde die Größe dieser Bilder verkleinern. Also noch fehlt Segel zurück und macht seine Breite auf 20 RAM Außerdem werde ich eine Weinflasche auswählen. Machen wir die Breite so, dass sie ausgeführt werden kann. In Ordnung, Abschnitt zwei sieht also gut aus. Gehen wir zum nächsten über. Ich werde die Größe der Überschrift und ihre Opazität ändern der Überschrift und ihre Opazität Außerdem werde ich die Größe des Rahmenbilds verringern . Also lasst uns weitermachen und mit der Überschrift beginnen. Wählen wir es aus. Ändere die Schriftgröße, mache es zu 11 RAM. Und dann die Opazität 2.7 einstellen. Danach wählen wir das Frame-Bild aus und machen seine Breite um 60 rund. In Ordnung. Als nächstes haben wir Abschnitt vier, in dem wir die Größe des Bildes verringern müssen. Also lasst uns weitermachen und ein neues Weinbild auswählen und es Breite von 45 auf Abschnitt vier ausrichten und auch die Fotos sehen gut aus. Und das einzige, was ich am Breakpoint tun werde, ist, die Position des Fortschrittsbalkens zu ändern Ich möchte es oben auf der Seite platzieren. Lassen Sie uns also weitermachen und den Progress-Wrapper auswählen. Setze dann seine obere Position auf Null. Außerdem brauchen wir 50 Prozent übrig. Und um die Elemente perfekt zu zentrieren, verwenden wir Transform, Translate X und fügen Sie -50 Prozent Okay, das war's mit 800 Pixeln, wir sind fertig und es ist Zeit, zum nächsten Breakpoint überzugehen , der 600 Pixel sein wird Wählen wir also „Neue Medien und setzen die maximale Breite auf 600 Pixel Fangen wir mit der ersten Seite an. Ich werde die Größe der Überschrift verkleinern. Wählen wir also die Überschrift aus und machen Sie die Schriftgröße vierunddreißig. Als Nächstes fahren wir mit dem zweiten Abschnitt fort und wiederholen Verkleinern Sie diese Bilder und Schaltflächen. Fangen wir mit dem Rücksegeln an. Stellen Sie die Breite auf 15 ein. Lauf. Dann wähle ich eine Weinflasche aus. Lass uns seine Breite bestimmen. Also zu rennen und zwar gewaltig. Kümmere dich um den Button, lass uns ihn auswählen. Machen Sie seine Breite auf 12 RAM und definieren Sie die Höhe als drei RAM. Und ändere auch die Schriftgröße. Mach einen Punkt für Ran. Als nächstes folgt Abschnitt drei. Ich werde die Größe der Überschrift und auch des Rahmenbilds verkleinern . Wählen wir die Überschrift aus und legen wir die Schriftgröße auf zehn RAM fest. Was das Frame-Bild angeht, werde ich seine Breite von 35 auf eine Rampe stellen. Okay, dieser Abschnitt drei sieht also gut aus. Und als nächstes haben wir einen vierten Abschnitt. Ich werde die Größe der Überschrift verkleinern und ich möchte auch das Bild verkleinern. Lassen Sie uns also weitermachen und die Überschrift Abschnitt vier auswählen. Machen Sie die Schriftgröße sechs rund. Was das neue Image angeht, werde ich die Breite auf 35 g setzen. In Ordnung, also ich denke, das war's mit diesem Breakpoint Und jetzt müssen wir die letzten Breakpoints definieren, die 500 Pixel betragen werden Lassen Sie uns also neue Medien mit einer maximalen Breite von 500 Pixeln erstellen. Zuallererst möchte ich die Schriftgröße der HTML-Elemente verringern . Moment entspricht N 62,5 Prozent, und ich möchte ihn auf 45% senken Lassen Sie uns also die Schriftgröße des HTML-Codes auf 45% erhöhen. Als Nächstes ändern wir die Position der Steuerelemente geringfügig. Also fehlte der linke Knopf. Nehmen Sie seine linke Position ein. 0,5 RAM. Was die rechte Taste angeht, werde ich ihre richtige Position einstellen, ebenfalls 2,5. Okay, danach werde ich die Position der Seitenleiste leicht ändern die Position der Seitenleiste leicht Lassen Sie uns nicht zuletzt auswählen und die oberste Position einnehmen. 6,5 g. In Ordnung, als Nächstes kümmern wir uns um diesen dritten Abschnitt Ich fange mit der Überschrift von Abschnitt drei an. Lassen Sie uns die Schriftgröße festlegen. Acht RAM Auch wie Grapes Image, mache seine Breite auf 15 rann. Außerdem ändere ich die Breite des Bildes, wenn Sie mit der Maus darauf zeigen Wählen wir das Traubenbild mit über und stellen wir es mit der Rampe 225 ein. In Ordnung, also haben wir unser Projekt endlich auf verschiedene Bildschirmgrößen abgestimmt Ich finde es sieht gut aus. Wir können also sagen, dass wir mit den Projekten fast fertig sind. Aber bevor wir dieses Tutorial beenden, möchte ich dem Projekt noch einen schönen Effekt hinzufügen. Okay, lassen Sie uns weitermachen und einen Blick auf die fertigen Projekte werfen. Wenn ich also die Seite scrolle wird der Maßstab dieser Abschnitte problemlos geändert. Standardmäßig sind diese Abschnitte größer und sobald wir scrollen oder auf die Steuerelemente klicken, verringert sich die Skala insgesamt, wodurch ein netter und cooler Effekt entsteht. Das einzige Problem, das wir mit diesem Effekt haben, ist, dass Browser ein wenig Probleme haben , diesen Effekt auszuführen. Manchmal kann man also sagen, dass es nicht ganz perfekt funktioniert. Wie dem auch sei, ich werde diesen Effekt erstellen und Sie können ihn dem Projekt hinzufügen oder nicht. Es liegt an dir. Okay? Das erste , was ich tun muss, ist, die Anzahl der Rapper in dieser Sektion standardmäßig zu erhöhen Also lassen Sie uns ihnen zuweisen, mit dieser Skalenfunktion transformieren und die Skala auf 1,5 stellen. Außerdem werde ich Transition mit den Werten all und 2 s verwenden . Wie Sie sich erinnern, weisen wir Transition dem Wrapper dieses dritten Abschnitts zu dem Wrapper dieses dritten Abschnitts Und ich werde es loswerden, weil es den Übergang überschreibt, den wir gerade diesem Abschnittswrapper zugewiesen haben gerade diesem Abschnittswrapper zugewiesen Wie Sie sehen, haben sich die Größen aller Seiten erhöht. Wenn wir das Projekt laden, müssen wir es tatsächlich so skalieren, dass es für die erste Seite standardmäßig eins ist. Und das mache ich mit JavaScript. Wählen wir den Rapper der ersten Sektion aus. Ich werde eine neue Variable erstellen. Nennen wir es Section One Wrapper und wählen dann die Elemente mit der Methode querySelector Lass uns hier eine Pause machen, Klasse, Rapper. Danach machen wir es auf die erste Skala. Wir benötigen also eine Style-Punkttransformation, die der Skalenfunktion mit dem Wert eins entspricht . In Ordnung? Also müssen wir den Maßstab der Seiten ändern, wollen Scrollen und sobald wir auf die Controls klicken. Aber zuerst kümmern wir uns um das Wheel-Event. Hier haben wir ein paar konditionelle Aussagen , in denen wir überprüfen, ob der Bulle wahr oder falsch ist. Wenn es also stimmt, müssen wir den Maßstab des richtigen Abschnitts verkleinern. Also müssen wir diese bedingte Aussage in eine If-Aussage umwandeln . Lassen Sie uns das Jahr Bu als Bedingung durchgehen. Zuerst schreibe ich den Code und dann erkläre ich, wie er funktioniert. Also müssen wir diesen Abschnitt-Wrapper auswählen. Lassen Sie uns QuerySelector verwenden, um hier Backticks zu öffnen und Ihren Klassennamen Section Dash zu übergeben Jetzt müssen wir die Nummer dieses Abschnittswrappers definieren. Und um das zu tun, müssen wir erneut die Bedingung verwenden, bei der wir überprüfen, ob Delta Y wahr oder falsch ist. Wenn es wahr ist, brauchen wir Gegenspieler eins. Und wenn es falsch ist, brauchen wir Zähler zwei, gefolgt vom Wrapper Okay, sobald der richtige Abschnittsumschlag ausgewählt ist, müssen wir den Maßstab verkleinern oder ihn so lassen, wie er ist Also brauchen wir hier Style Dot Transform, das nochmal, offene Backticks Verwenden Sie die Skalenfunktion. Und als Wert übergebe ich hier noch einmal die Bedingungsaussagen, bei denen wir überprüfen, ob Delta Y wahr oder falsch ist. Wenn es wahr ist, müssen wir als Wert der Skalenfunktion 1,5 übergeben. Und wenn das Delta Y falsch ist, dann brauchen wir eins. Wenn wir also auf der Seite nach unten scrollen, die Nummer dieses Abschnittswrappers wird die Nummer dieses Abschnittswrappers zu Zähler eins Angenommen, wir sprechen über die erste Seite. Also wählen wir die erste Seite und ihre Skala wird 1,5 sein. Denn auch hier ist Delta Y wahr. Wenn wir nach oben scrollen, ist Delta Y falsch. Die Anzahl dieser Abschnittsumschläge wird entgegengesetzt, auf der anderen Seite sinkt sie um eins Und wir werden wieder die erste Seite auswählen. Und in diesem Fall ist es skalierbar und verringert, weil Delta Y falsch ist. Macht das Sinn? In Ordnung, der Skaleneffekt funktioniert also teilweise Ich meine, die kommenden Seiten werden nicht erweitert. Und um das zu beheben, werde ich diesen Code duplizieren. Aus diesem müssen wir die nächste Seite manipulieren Wir müssen beide Zähler um einen erhöhen. Also fügen wir hier plus eins hinzu. Und außerdem müssen wir die Position dieser Werte ändern . Okay, wenn wir jetzt nach unten scrollen , werden die nächsten Seiten auch die Skalen ändern. Und lassen Sie uns dasselbe passieren, wenn wir nach oben scrollen. Also alles funktioniert gut, bis wir zur Fußzeile gelangen und dann erneut scrollen. Wie Sie sehen, wird die erste Seite einem größeren Maßstab angezeigt. Dies passiert, weil boolean falsch ist und wenn Anweisungen in der Seitencontroller-Funktion funktionieren Wir müssen auch die Skalen in den IF-Aussagen definieren . Moment müssen wir an den Umschlägen von Abschnitt eins und Abschnitt fünf arbeiten den Umschlägen von Abschnitt eins und Abschnitt fünf Wir haben all diese ausgewählten Wrapper für Abschnitt eins. Lassen Sie uns dasselbe auch für diesen Abschnitt fünf tun. Ich werde diese Codezeile duplizieren und einfach aus einer fünf machen. Wenn also die Bedingung in der ersten If-Aussage wahr ist, ich meine, wenn wir von der Fußzeile zur ersten Seite navigieren , müssen wir den Maßstab des Umschlags für den ersten Abschnitt verringern den Maßstab des Umschlags für den ersten Abschnitt Und gleichzeitig müssen wir die Größe der Fußzeile erhöhen Also brauchen wir Abschnitt eins, Punkttransformation im Rapper-Punkt-Stil, Skala mit dem Wert eins Lassen Sie uns diese Codezeile duplizieren. Ändern Sie den Wrapper für Abschnitt eins in den Wrapper für Abschnitt fünf. Und auch als Wert der Skalenfunktion benötigen wir 1,5. Okay, wir brauchen eine ähnliche Aussage in der zweiten If-Aussage, aber mit entgegengesetzten Skalenwerten Schnappen wir uns diesen Code, fügen ihn hier ein und ändern die Werte. Wir brauchen 1,5 und weniger als eins. Wenn wir jetzt hoch und runter scrollen, funktioniert alles gut. In Ordnung? Also, ich meine, mit dem Scrollen sind wir fertig Und schließlich müssen wir uns um die Kontrollen kümmern. Wir benötigen dieselben Übergangseffekte sobald wir auf die lateinischen weißen Pfeile klicken. Wenn also der boolesche Wert wahr ist, müssen wir die Skalen für diese Abschnittswrapper definieren die Skalen für diese Abschnittswrapper Wenn es falsch ist, verwaltet die Seitencontroller-Funktion es automatisch. Wir brauchen Aussagen, in denen wir überprüfen, ob Bull wahr oder falsch ist. Wenn dies zutrifft, müssen wir im Fall der linken Taste diesen Abschnittswrapper mit Zähler zwei auswählen Verwenden wir also querySelector. Öffne dann Backticks und füge deinen Abschnitt ein. Als Nummer dieser Aktion. Wir müssen Ihren Schalter zwei übergeben, gefolgt von der Verpackung Wir müssen die Skala auf eins reduzieren. Wir brauchen also Style, der nicht gleich der Skala mit dem Wert eins transformiert wird. Dieser Code bezieht sich also auf die kommende Seite. Was die nächste betrifft, duplizieren wir diesen Code. In diesem Fall brauchen wir Zähler zwei plus eins und wir müssen die Skala auf 1,5 erhöhen. Okay, schauen wir uns die Schaltfläche „ Über die linke Seite“ an. Lassen Sie uns die gesamten IF-Anweisungen kopieren und sie ebenfalls für die rechte Schaltfläche einfügen. Wir müssen also den ersten Teil so belassen, wie er ist, als Teil den zweiten Teil, anstatt Zähler zwei plus eins, wir brauchen nur Zähler eins. Wenn wir also auf Controls klicken, funktioniert es perfekt. In Ordnung, also herzlichen Glückwunsch. Endlich haben wir das Projekt abgeschlossen. Hoffentlich war es interessant und nützlich. Vielleicht war es ein bisschen schwierig, aber ich hoffe, du hast es geschafft 88. Projekt 10 - Projektvorschau: Ordnung, es ist an der Zeit, unser nächstes Projekt zu erstellen, das der Klon einer der beliebtesten und am häufigsten verwendeten Websites namens Paypal sein der beliebtesten und am häufigsten verwendeten wird, um die Benutzeroberfläche der verschiedenen Seiten zu erstellen Ich bin auf der Hauptseite, auf Anmelde- und Anmeldeseiten. Natürlich wird es nicht der exakte Klon mit der vollen Funktionalität sein . Wie gesagt, wir werden nur eine Benutzeroberfläche mit HTML, CSS und JavaScript erstellen . Paypal sieht in verschiedenen Ländern anders aus. Die Benutzeroberfläche ändert sich häufig von Zeit zu Zeit. Sie sich also keine Sorgen, wenn dies nicht der exakte Klon der aktuellen Benutzeroberfläche ist. Okay, also bevor wir direkt mit dem Schreiben des Codes beginnen, lassen Sie uns zunächst beschreiben , wie das Projekt aussieht Also wie gesagt, wir werden drei verschiedene Seiten erstellen, Haupt-Login und Registrierung. Wir beginnen mit der Hauptseite. Es wird aus verschiedenen Abschnitten bestehen. Der erste Abschnitt wird das Banner mit Navigation sein . Wir haben hier mehrere Navigationspunkte. Wenn ich den Mauszeiger über sie bewege, wird das Drop-down-Menü angezeigt Es wechselt, sobald wir Mauszeiger über ein anderes Navigationselement Außerdem werden wir hier zwei verschiedene Buttons zum Einloggen und Registrieren haben. Wenn ich sie anklicke, werden wir zur richtigen Seite navigieren. Auf das Banner folgt also der zweite Abschnitt. Es wird drei verschiedene Teile mit Schrift, fantastischen Symbolen, einigen Textelementen und Schaltflächen enthalten . Dann haben wir diesen blauen Abschnitt mit einigen verschiedenen Absätzen. Als Nächstes werden wir diesen kleinen Abschnitt hier mit einem Bild und drei verschiedenen Schritten erstellen . Unten finden Sie eine Schaltfläche zur Registrierung, gefolgt von der Fußzeile In Ordnung, also schauen wir uns die Hauptseite an. Schauen wir uns die Anmeldeseite an. Es wird der ursprünglichen Anmeldeseite ziemlich ähnlich sein. Wir werden hier zwei Eingabefelder mit Schaltflächen haben. Das ist wahrscheinlich die Anmeldeseite. Es wird aus zwei Teilen bestehen. Auf der linken Seite werden wir mehrere Bilder der Kunden haben . Was die rechte Seite betrifft, so wird sie zwei verschiedene Optionen enthalten. Egal, ob wir ein persönliches oder ein Geschäftskonto erstellen möchten. In Ordnung, das war's also mit dem Projekt. Wie üblich werden wir dafür sorgen, dass es auf verschiedene Bildschirmgrößen reagiert. Wenn ich die Seite überprüfe und in den Responsive-Modus wechsle, werden Sie feststellen, dass sie responsiv ist. Eine Sache, die hier zu beachten Auf kleineren Bildschirmgrößen werden wir die Drop-down-Menüs nicht mehr haben Sie werden sich so auf das Menü umstellen. Okay, das ist es also. Wir sind bereit, mit dem Bau des Projekts zu beginnen . Also lass uns weitermachen. 89. Projekt 10 - Landingpage erstellen und stil - Teil 1: In Ordnung, wir sind bereit, mit dem Bau der Projekte zu beginnen. Ich habe auf dem Desktop einen neuen Ordner namens Papal Clone erstellt , in dem ich einen weiteren Ordner für die Bilder habe Lassen Sie uns weitermachen und es im VS-Code öffnen und unsere Arbeitsdateien für HTML, CSS und JavaScript erstellen. Ich nenne sie index.html, style.css und script.js. Öffnen Sie dann die Datei index.html und erstellen Sie das grundlegende HTML-Dokument. Dafür verwende ich eines der in VS Code integrierten Pakete namens Image. Wir müssen Ihr Ausrufezeichen platzieren und dann die Tabulatortaste oder die Eingabetaste drücken. Also los geht's. Wir haben hier die grundlegenden HTML-Tags. Das erste , was ich tun werde, ist den Titel zu ändern. Es wird Geld überwiesen, online bezahlt oder ein Händlerkonto eingerichtet. Als Nächstes müssen wir die CSS- und JavaScript-Dateien mit HTML verknüpfen . Lassen Sie uns also ein Link-Tag öffnen und den Teil der CSS-Datei angeben, für den wir style.css benötigen. Was das JavaScript angeht, öffne ich das Script-Tag direkt über dem abschließenden Body-Tag. Und dann müssen wir den Pfad der JavaScript-Datei im Quellattribut angeben. In Ordnung, also sind alle drei Dateien verknüpft. Als Nächstes füge ich einen weiteren CDN-Link ein. Während des gesamten Projekts. Ich werde Font, Awesome Icons verwenden. Gehen wir also zu Google und suchen nach Font Awesome CDN js Dann schnapp dir den ersten Link. Öffnen Sie von hier aus ein Link-Tag in den Hauptelementen und fügen Sie den Link als Wert der h-Referenzattribute ein. Okay, schließlich werde ich das Projekt im Browser ausführen , indem ich eines der Views-Codepakete verwende , das als Live-Server bezeichnet wird und es uns ermöglicht, das Projekt im Browser laufen zu lassen und die Änderungen und Updates vorzunehmen, ohne die Seite zu aktualisieren. Jedes Mal. Platzieren wir den Schauspieler und den Browser. So wie. Und fang an. Wir werden das Projekt Abschnitt für Abschnitt aufbauen. In jedem Abschnitt erstellen wir das HTML-Markup. Dann werden wir etwas CSS schreiben. Ich fange mit dem ersten Abschnitt an, der genug Pore und das Banner beinhalten wird. Lassen Sie uns zunächst das div-Tag öffnen, das der Container sein wird. Es wird den gesamten Inhalt einwickeln. Als Nächstes öffne ich ein weiteres div-Tag , das den Inhalt der Titelseite enthält. Aber lassen Sie uns zuerst Ihre Kommentare für die Titelseite einfügen. Öffnen Sie dann das Div-Tag mit einer Klassen-Titelseite. Als Nächstes füge ich neue Kommentare ein, Abschnitt eins. Und Abschnitt eins. Öffnen Sie dann ein Abschnittselement mit einer Klasse, Abschnitt eins. Wie gesagt, der erste Abschnitt wird aus zwei Hauptteilen bestehen. Wir werden eine Navigationsleiste und ein Banner haben. Also lasst uns weitermachen und anfangen, das Napa zu kreieren. Zunächst öffne ich ein div-Tag, das als Wrapper der Navigation dienen wird Ich nenne es Napa Wrapper. Als Nächstes öffne ich das HTML5-Tag, das nef heißt, mit der Klassennavigationsleiste Wir werden also ein paar verschiedene Teile in der Navigationsleiste haben. Wir werden ein Logo haben, dann ein paar Listenelemente mit Drop-down-Menüs. Und wir werden auch zwei Knöpfe haben. Lassen Sie uns weitermachen und ein Logo erstellen. Ich werde das Div-Tag mit der Klasse öffnen. Nun zu einem Logo. Als Nächstes übergebe ich Ihnen Ihr Span-Tag, das den ersten Brief des Papstes Das ist im Wesentlichen die Klasse P1 und füge hier P ein. Außerdem benötigen wir hier noch ein Spanelement mit einer Klasse P2 Und dann wieder Insekt zu deinem PC. Also werden wir diese beiden Span-Elemente verwenden , um das Logo anzupassen. Was den Rest der Briefe angeht, lassen Sie uns hier einfach unterbrechen. Papier. In Ordnung, schauen wir uns das Logo an. Jetzt werde ich Listen erstellen. Wir werden die Hauptliste mit drei Listenelementen haben. Und diese Listenelemente werden ihre eigenen Dropdownmenüs haben. Öffnen wir ein List-Tag mit der Klassennavigationsliste. Dann benötigen wir die LI-Elemente mit einem Klassennamen, einem Nav-Listenelement. Darauf sollte das Link-Element folgen, das einen ClassName-Nav-Link und einen Listenlink enthält Und als Inhalt füge ich Ihre persönliche hinzu. Bei den ersten beiden Listenelementen haben wir also einen Pfeil auf der rechten Seite. Also gebe ich Ihnen das Font Awesome-Symbol. Öffnen wir das I-Element mit einer Klasse, die FAS ist. Fa, Chevron down Lassen Sie uns das LI-Element zweimal duplizieren und einige Änderungen vornehmen Der zweite Punkt wird geschäftlich sein. Was den dritten Punkt betrifft, werden Partner und Entwickler sein. Und hier brauchen wir keinen Pfeil denn dieser Artikel ONE hat ein Drop-down-Menü. In Ordnung, also im Moment werde ich Ihre Drop-down-Menüs nicht einfügen Wir werden uns etwas später um sie kümmern. Als nächstes müssen wir uns um die Knöpfe kümmern. Öffnen wir das div-Tag mit den Schaltflächen in der Klassennavigationsleiste. Dann füge hier ein Button-Element mit der Klasse jetzt für BTN Und außerdem brauchen wir hier noch eine Klasse für individuelle Styles, Login btn. Was den Inhalt betrifft, geben wir Ihr Login ein. Dann duplizieren wir die Schaltfläche und ändern den Klassennamen. Wir müssen uns übrigens anmelden und auch den Inhalt ändern Anmeldung zum Institut. Stimmt, wir hatten also keine Arme, wir sind fertig. Gehen wir zu Ike of the Banner über. Möchten Sie ein div-Tag öffnen, das der Wrapper des Banners sein wird Das Banner wird also drei verschiedene Elemente enthalten. Die erste wird die Überschrift sein. Öffnen wir das H1-Überschrift-Tag mit der Überschrift des Klassenbanners mit dem Inhalt Wir haben alles im Griff. Dann brauchen wir einen Absatz. Lassen Sie uns das P-Tag mit dem Klassenbanner-Absatz öffnen und einen Blindtext einfügen Danach öffne ich Button-Tag mit der Klasse Blue BTN. Und mit dem Inhalt erfahren Sie mehr. Ich habe hier die Klasse Blue BTN benutzt. Es wird eine Art gebräuchlicher Klassenname sein, weil wir ein paar ähnliche blaue Knöpfe haben werden. Ordnung, das war's mit dem HTML-Markup dieses ersten Abschnitts Jetzt können wir anfangen , etwas CSS zu schreiben. Bevor wir das tun, werde ich noch einen Link für die Schrift einfügen. Während des gesamten Projekts. Ich werde eine der Google-Schriften verwenden. Gehen wir also zur Google Fonts-Website und suchen nach einer Schriftart namens Bellow Die A2. Ich werde alle verschiedenen Stile auswählen. Dann schnapp dir den Link und füge ihn in den Kopf ein. In Ordnung, jetzt können wir das CSS schreiben. Zuallererst werde ich ein paar gängige Stile erstellen und diese zurücksetzen. Lassen Sie uns Ihre Kommentare einfügen. Gemeinsame Stile von gemeinsamen Stilen. Dann wähle ich jedes Element dafür aus. Wir müssen ein Sternchen verwenden. Lassen Sie uns also zunächst die Standardeinstellungen, die Margen und das Padding loswerden Standardeinstellungen, die Margen und das Padding Ich setze beide auf Null. Dann mache ich eine Border-Box in Boxgröße. Um den standardmäßigen Basiswert aus den Linkelementen zu entfernen, benötigen wir außerdem standardmäßigen Basiswert aus den Linkelementen zu entfernen, keine Textdekoration. Als nächstes folgt der Typ „ List Style None“. Dadurch werden die Standardaufzählungszeichen aus den Listenelementen entfernt. Danach werde ich die Standardgliederung loswerden. Setzen wir es auf Null. Und schließlich, als definierte Schriftfamilie, verwenden wir hier unten dA2 In Ordnung. Wie Sie sehen, werden im gesamten Projekt alle gängigen und zurückgesetzten Stile auf die Elemente angewendet. Ich werde die Rampe als Maßeinheit verwenden. Standardmäßig entspricht ein Raum 16 Pixeln, da die Schriftgröße des HTML-Elements 16 Pixeln entspricht. Ich möchte 1 g in zehn Pixel umrechnen, weil ich denke, dass es bequemer und einfacher zu bedienen wäre. Um das zu tun, müssen wir die Schriftgröße des HTML-Elements auf 62,5 Prozent reduzieren des HTML-Elements auf 62,5 Prozent Sie können also sehen, dass alle Elemente kleiner wurden. Ordnung, endlich sind wir bereit, mit der Anpassung des ersten Abschnitts zu beginnen Lassen Sie uns weitermachen und Ihre Kommentare für Abschnitt eins einfügen. Wählen Sie dann Abschnitt eins aus und definieren Sie dessen Breite und Höhe. Ich setze auf 200 Prozent als wahrscheinliche Körpergröße. Machen wir 65% des Viewports daraus. Als Nächstes lege ich das Bild als Hintergrund für den ersten Abschnitt fest . Soweit ich hier verwenden werde, eine lineare Gradientenfunktion, der wir den Hintergrund leicht abdunkeln können Die Richtung des Farbübergangs wird also von unten nach oben sein. Verwenden wir hier zwei verschiedene RGBA-Werte. Und den ersten füge ich 3083 Mal mit der Opazität 0,7 Der zweite wird dieselbe Farbe haben, aber mit einer anderen Machen wir 0,6 draus. Als Nächstes gebe ich die URL des Bildes an. Wir haben einen Ordner namens Images und müssen PG dot JPG auswählen. Außerdem werde ich die Position des Hintergrundbilds definieren . Machen wir es in die Mitte. Und dann brauchen wir keine Wiederholung. Lassen Sie uns abschließend die Hintergrundgröße festlegen, die abgedeckt werden soll. Ordnung, also nehmen wir an, dass das Bild als Hintergrund für dieses Abschnittselement festgelegt ist als Hintergrund für dieses Abschnittselement festgelegt Als Nächstes kümmere ich mich um die Navbar. Wählen wir seinen Rapper aus. Ich meine, Napa-Wrapper. Ich werde seine Breite definieren. Machen wir es zu 100%. Dann setze ich die Höhe auf acht RAM. Dann brauchen wir unten eine Grenze . Lassen Sie uns die Wahrheitswerte 0,1 zuweisen , alles durchgehen und wir rufen AAA auf. In Ordnung, als Nächstes wähle ich es jetzt für sich selbst aus. Definiere es innerhalb der Höhe. Ich setze die Breite auf 120 RAM. Was die Höhe angeht, so wird sie bei 100% liegen. Danach richte ich die Elemente in einer horizontalen linearen Reihe aus. Und dafür verwenden wir Flexbox. Wir benötigen Display-Flex , das wir benötigen, um etwas Abstand zwischen den Flex-Elementen zu schaffen , indem zwischen ihnen Justify Content Space verwenden. Um Elemente in der Mitte vertikal auszurichten, müssen wir die Elemente in der Mitte ausrichten. Okay, verkauft sind genug Barartikel, die horizontal platziert sind. Und jetzt werde ich die Navigation selbst in der Mitte platzieren . Verwenden wir dafür wieder Flexbox. Wir brauchen Display Flex und dann Justify-Content Center. Ordnung, die Navigation ist ausgerichtet und jetzt werde ich jedes Element der Navbar anpassen jedes Element der Navbar Fangen wir mit dem Logo an. Wählen Sie den Wrapper aus. Ich werde die Schriftgröße 3,5 RAM definieren. Dann mache ich die Schrift. Italica. Mach es auch mutiger. Ich setze die Schrift auf 800 und ändere dann die Farbe, mache sie weiß. Ordnung, das Logo sieht also schon gut aus, aber wir müssen es noch ein bisschen anpassen Wie Sie wissen, haben wir den ersten Buchstaben mit einem Span-Element umwickelt . Wir haben das gemacht, weil der erste Buchstabe ein anderer sein wird . Wählen wir es mit der Klasse P1 aus. Ich setze die Schriftgröße auf 4,5 RAM. Und dann auf der rechten Seite etwas Platz schaffen, indem Sie den rechten Rand verwenden, ein Durchlauf. Okay, es wird also davon ausgegangen, dass der erste Buchstabe etwas größer wurde als die anderen Buchstaben. Als Nächstes werde ich das zweite Spanelement anpassen. Wählen wir es mit der Klasse P2 aus. Ich gehe zu Die Schriftgröße beträgt 4,5 RAM. Und dann ändere die Farbe, mach BBB draus. Ordnung, danach ändere ich die Position des zweiten Spanelements Ich werde seine Position auf absolut setzen. Um es dann an seinem übergeordneten Element, dem Logo, auszurichten seinem übergeordneten Element, , weise ich dem Logo eine relative Position zu. Und danach definieren wir die Eigenschaften für den oberen und linken Bereich für den zweiten Bereich. Ich werde 2,4 RAM Asphalt draufsetzen. Die linke Position wird 0,5 Ran sein. Die Position des zweiten Spanelements ist also fest, aber wie Sie sehen können, landete es über dem ersten P. Ich werde das mit der Z-Index-Eigenschaft korrigieren Aber zuerst müssen wir die Position des ersten Spanelements definieren . Andernfalls funktioniert die Z-Index-Eigenschaft nicht. Lassen Sie uns also weitermachen und die Position auf relativ setzen. Und dann verwende die Z-Index-Eigenschaft mit einem höheren Wert als Null Machen wir zehn draus. In Ordnung, mit dem Logo sind wir fertig Jetzt ist es an der Zeit, sich um die Navigationselemente zu kümmern 90. Projekt 10 - Landingpage erstellen und stil - Teil 2: Ordnung, also lass uns weitermachen und den ersten Abschnitt fortlaufend unterteilen. Wir haben alle das Logo bereits angepasst und jetzt ist es an der Zeit, uns um die Navigationselemente zu kümmern Wählen wir die Navigationsliste aus. Ich werde die Navigationselemente horizontal in einer Reihe platzieren , sodass wir Flex anzeigen müssen, wenn davon ausgegangen wird, dass die Navigationselemente nebeneinander platziert werden Als Nächstes werde ich die LI-Elemente anpassen. Wählen wir also das Listenelement aus. Ich werde gute Körpergröße machen. Machen wir acht RAM daraus und schaffen dann etwas Platz in der Liste. Wir brauchen Polster für die Rampe. Okay, als Nächstes werde ich sie vertikal zentrieren. Dafür werde ich wieder Flux-Bücher verwenden. Stellen wir die Anzeige so ein, dass sie flexibel ist, und richten die Elemente dann zentriert aus. In Ordnung, danach werde ich die Links stylen. Wählen wir also nicht zuletzt den Link aus. Zunächst definiere ich Breite und Höhe. Machen wir beide zu 100 Prozent. Das erhöht die Schriftgröße, macht sie zu 1,7 Rem. Außerdem werde ich die Schriftstärke ändern. Setzen wir es auf 400. Dann mache den Text in Großbuchstaben. Und schließlich ändere die Farbe, mache es weiß. Eigentlich sollten die Pfeile auch gestylt sein , da sie Teil der Linkelemente sind Lassen Sie uns den HTML-Code überprüfen. Wie Sie sehen können, befinden sie sich außerhalb der Links. Das ist nicht richtig. Lassen Sie uns das also schnell beheben. Okay, jetzt sehen die Links viel besser aus. Sie werden etwas weiter oben in den Listenelementen platziert , um sie vertikal zu zentrieren Verwenden wir wieder die Flexbox Wir müssen die Objekte in der Mitte biegen und ausrichten. In Ordnung, lassen Sie uns weitermachen und diese Pfeile anpassen. Ich werde sie ein bisschen kleiner machen. Und wir brauchen auch etwas Platz auf der linken Seite. Wählen wir also das I-Element aus. Ich setze die Schriftgröße auf 1,5 rem und schaffe dann Platz auf der linken Seite, indem ich margin-left mit dem Wert 0,5 ramp verwende Okay, schauen wir uns die Links und Pfeile an. Sie sehen nett aus. Bevor wir weitermachen und die Schaltflächen starten, erstelle ich einen Hover-Effekt Ich möchte am Ende der Navigationselemente eine weiße Linie anzeigen. Und außerdem werde ich diese Pfeile drehen. Fangen wir mit den weißen Linien an. Sie werden anhand des unteren Randes erstellt. Wählen wir also ein Listenelement aus, dem der Mauszeiger zugewiesen ist und dessen unterer Rand mit Werten zeigt, die auf RAM, durchgehend und die Farbe Weiß zeigen durchgehend und die Farbe Weiß Und verwenden Sie auch die Übergangsgrenze unten. Und dann verwende eine kleine Dauer 0,1 s. In Ordnung, hier haben wir also nette Schwebeeffekte Wie gesagt, wir werden die Pfeile auch beim Schweben drehen die Pfeile auch beim Schweben Lassen Sie uns also weitermachen und das Listenelement mit der Maus auswählen, gefolgt vom I-Element Wir müssen die Funktion transformieren und dann mit der Z-Richtung als Wert drehen. Ich werde hier 180 Grad durchgehen. Und wieder verwende Transition mit einer Wertetransformation von 0,3 s. Sobald wir also den Mauszeiger über den Elementstamm bewegen, drehen sich die Pfeile Ordnung, endlich können wir weitermachen und die Navbar-Buttons anpassen Wir haben zwei verschiedene Knöpfe. Sie werden einige gemeinsame Stile haben. Wählen wir sie also zunächst mit dem gebräuchlichen Klassennamen navbar, btn Ich werde die Breite definieren. Machen wir eine Straßenbahn daraus. Schaffen Sie dann mithilfe von Polstern etwas Platz innerhalb der Schaltflächen Stellen wir es auf 0,7 rem ein. Außerdem brauchen wir Marge. Stellen wir es auf 0,3 RAM ein und runden die Tasten dann ab , indem wir den Randradius mit Wert verwenden . Wenn wir rampen. Ordnung, lassen Sie uns weitermachen und den Schaltflächen einige andere Stile hinzufügen den Schaltflächen einige andere Stile hinzufügen Definieren wir die Grenze. Ich werde es so einstellen, dass es auf einen Rem zeigt, auf eine feste Farbe und auf die weiße Farbe. Definieren Sie dann die Schriftgröße. Machen wir einen Punkt für RAM. Und ändern Sie auch den Typ des gröberen, machen Sie es deutlich. Okay, schauen wir uns die gängigen Stile an. Jetzt benötigen wir einige individuelle Styles für beide Buttons. Wählen wir den ersten mit dem n-ten Child-Selektor aus. Ich werde die Hintergrundfarbe auf transparent setzen die Farbe angeht, lassen Sie uns sie weiß machen. Dann werde ich diesen Code duplizieren. Wir brauchen hier. Neuntes Kind mit Nummer zwei. Dann wird die Hintergrundfarbe weiß sein. Was die Farbe des Textes angeht, werde ich ihn dunkelgrau machen, indem ich Farbe bis 62626 verwende Ordnung, die Knöpfe sind also maßgeschneidert und innerhalb unseres Teils sind wir fertig Lassen Sie uns weitermachen und ein benutzerdefiniertes Banner erstellen. Wählen wir es aus. definiere ich seine Breite. Machen wir es zu 100%. Danach. Kümmern wir uns um seine Position. Ich werde seine Position auf absolut setzen. Dann benötigen wir die relative Positionierung für diesen Abschnitt selbst, da er das übergeordnete Element ist. Danach definieren wir die oberste Position. Ich setze es auf 25 Prozent. Und spielt den Inhalt auch in der Mitte mit Text Align Center ab. In Ordnung, das Banner ist also positioniert. Fangen wir an, die Elemente anzupassen. Ich beginne mit einer Bannerüberschrift. Lassen Sie uns die Schriftgröße erhöhen. Mache sechs RAM. Stellen Sie dann die Schriftstärke auf 300 ein. Ändere auch die Farbe, mach es weiß. Und schaffen Sie unten etwas Platz, indem Sie den Rand verwenden, die untere drei Rampe. In Ordnung, die Überschrift ist also angepasst. Gehen wir zum Absatz über. Ich wähle den Banner-Absatz aus. Lassen Sie uns die Schriftgröße erhöhen und es auf 1,8 RAM erhöhen. Und ändere auch die Farbe, mach es weiß. Danach werde ich die Breite verringern. Machen wir 50% draus. Eigentlich sollte der Absatz in der Mitte des Banners platziert werden . Also lass uns das mit Margin machen. Ich setze es auf Null. Dann brauchen wir 0 Reihen auf der linken und rechten Seite. Es wird das Element in der Mitte platzieren. Was den unteren Teil betrifft, so wird es für n sein . Das war's mit dem Absatz. Schließlich müssen wir uns um den Boden kümmern. Wählen wir Blue BTN. Ich setze die Breite auf 35 Rm, dann wird die Höhe auf fünf Rem gesetzt. Ändern Sie auch die Hintergrundfarbe. Mach es 036, B0, B1. Und ändere die Farbe, mach es weiß. Lass uns weitermachen und dem unteren Teil etwas mehr Stil verleihen. Ich werde es mit einem Grenzradius rund machen. Wir sind abgehauen. Dann entfernen Sie den Standardrahmen und setzen Sie ihn auf keinen. Und schließlich kümmere dich um die Schriftarten. Ich werde die Schriftgröße erhöhen. Machen wir es mit 1,6 RAM und machen es mit der Schriftstärke 600 etwas mutiger Ordnung, also der Buxton ist installiert, und eigentlich sind wir mit dem Banner fertig Jetzt ist es an der Zeit, weiterzumachen und die Drop-down-Menüs zur Navigation hinzuzufügen die Drop-down-Menüs zur Navigation 91. Projekt 10 - Dropdown-Menüs erstellen und funktionieren lassen: In Ordnung, wir sind fast fertig mit dem ersten Abschnitt. Das einzige, was ich tun werde, ist ein Drop-down-Menü zu erstellen. Sobald ich den Mauszeiger über die ersten beiden Navigationspunkte bewege, erscheint das Drop-down-Menü , in dem ich zwischen den Menüs wechseln kann Zuerst müssen wir das HTML-Markup erstellen. Im ersten Drop-down-Menü gehen wir zum ersten LI-Element über. Lassen Sie uns hier eine weitere Liste mit dem Drop-down-Menü für die Klassennavigation erstellen . Jede Dropdownliste enthält also vier verschiedene Listenelemente. Und jedes Listenelement selbst wird zwei verschiedene Links haben. Öffnen wir also das LI-Tag mit dem Dropdown-Element für die Klassennavigation. Dann gebe ich hier den Link-Tag mit dem Klassen-Navi, Drop-down-Link, weiter . Eins. Wir werden herausfinden, wie Paypal funktioniert. Dann duplizieren Sie diesen Code, ändern Sie den Klassennamen und ändern Sie auch den Inhalt. Es wird sein, was kannst du mit einem persönlichen Konto machen? Ordnung, lassen Sie uns das Listenelement dreimal duplizieren und den Inhalt ändern. Wir brauchen hier. Bezahlen Sie online. Dann online, Zahlung ohne Grenzen. Dann werden wir als Nächstes Zahlungen senden , als wir Zahlungen ins Ausland benötigen. Was die letzten beiden Linkelemente angeht, müssen wir hier nach Angeboten suchen und dann mit PayPal bezahlen und Geld senden. In Ordnung, das war's mit dem ersten Dropdown-Menü. Ich werde es kopieren. Und dann fügen wir es in das zweite LI-Element in der Hauptnavigation ein. Ich werde den Inhalt schnell ändern. Also brauchen wir hier alle Geschäftslösungen. Dann werden wir C oder eine Reihe von Produkten haben. Als nächstes haben wir außer Online-Zahlungen. Lassen Sie sich dann auf Ihrer Website bezahlen und senden Sie Rechnungen. Der nächste Schritt wird darin bestehen, Online-Rechnungen per E-Mail zu erstellen . Und schließlich müssen wir international verkaufen. Und Paypal unterstützt Ihr globales Wachstum. Okay, hier haben wir die Drop-Downs. Sie haben das Layout der Nanoporen durcheinander gebracht, aber wir werden uns darum kümmern . Zuerst. Ich werde ein Drop-down-Menü erstellen und dann sorgen wir dafür, dass sie mit der Maus funktionieren Bevor wir das tun, werde ich das zweite Drop-down-Menü für eine Weile ausblenden das zweite Drop-down-Menü für eine Weile Weisen wir ihm einen temporären Vornamen zu. Nun, nach unten zu dann, wählen Sie es in der CSS-Datei aus und weisen Sie es ihm zu. Keine anzeigen. In Ordnung, danach wähle ich genug Drop-down-Liste Definieren wir seine Breite und Höhe. Ich setze die Breite auf 100%. Was die Höhe angeht, setzen wir sie auf 20 RAM und ändern auch die Hintergrundfarbe. Ich werde einen linearen Gradienten verwenden. Definieren wir zunächst die Richtung des Übergangs von links nach rechts. Und dann gebe ich drei Farben weiter. Der erste wird 066399 sein. Dann müssen wir f, f, df. Was die dritte Farbe angeht, so wird es die erste sein. Also werde ich es kopieren und einfügen. Sie sehen, dass wir uns um die Position des Drop-down-Menüs kümmern müssen. Lassen Sie uns seine Position also auf absolut setzen. Ich werde das Menü entsprechend dem Abschnittselement positionieren . Dieses Abschnittselement wurde bereits relativ positioniert. Wir brauchen hier oben acht RAM, damit die linke Position Null sein wird. Das Drop-down-Menü ist also positioniert. Aber wir haben hier ein kleines Problem. Das Banner befindet sich oben im Menü. Lassen Sie uns das Problem mithilfe der Z-Index-Eigenschaft beheben. Stellen wir es auf 200 ein. Ordnung, jetzt ist das Problem behoben und wir können beginnen, die Drop-down-Menüelemente anzupassen Wählen wir sie aus. Zuerst setze ich mit 225 RAM ein und schaffe dann mit Margin Speicherplatz. Ich setze den Rand oben und unten auf zwei Rem und Tanner M auf links und rechts. Wie Sie wissen, besteht jeder Artikel aus zwei verschiedenen Links. Sie sollten übereinander gelegt werden. Lass uns das mit Flexbox machen. Ich stelle das Display auf Flex ein. Und dann brauchen wir eine Spalte mit flexibler Richtung. In Ordnung, als Nächstes werde ich die Links anpassen. Fangen wir mit dem ersten Link an. Wir müssen Nafta oder Downlink One wählen. Lassen Sie uns die Schriftgröße auf 1,6 RAM setzen. Was die Farbe angeht, lassen Sie uns sie weiß machen. Dann werde ich diesen Code duplizieren. Wir brauchen hier einen Link zu. Was die Schriftgröße angeht, wird es eine Rampe von 1,3 sein. Okay, die Links sehen gut aus, aber wie Sie sehen, müssen wir uns um ihre Ausrichtung kümmern ihre Ausrichtung kümmern Sie sollten auf zwei Linien in der Mitte platziert werden. Also werde ich Polsterung definieren. Machen wir oben und unten Null und links und rechts Null auf RAM. Und dann wieder werde ich Elemente mithilfe von Flexbox ausrichten Wir brauchen Display Flex. Und um die Flex-Elemente im Sensor zu platzieren, benötigen wir das Justify-Content Jetzt werden die Elemente in der Mitte platziert, aber wir müssen sie auf zwei Linien platzieren. Ich meine, dafür müssen wir sie kaputt machen. Lassen Sie uns Flex Wrap zusammen mit einem Value-Wrap verwenden. Ordnung, die Drop-down-Menüelemente sind also korrekt platziert. Und jetzt können wir einen Schwebeeffekt erzeugen. Standardmäßig sollte das Drop-down-Menü ausgeblendet sein. Sobald wir den Mauszeiger über den Artikel bewegen, sollte er angezeigt werden Außerdem müssen wir auch die Hintergrundfarbe der Navbar ändern . Wir können das mit CSS überzogene Feld für das Drop-down-Menü erstellen, aber wir können es jetzt nicht faltend für den Wrapper erstellen Denn wenn wir das Listenelement mit der Maus auswählen, gefällt uns immer noch das übergeordnete Element oder eines der Großeltern Der Mauszeiger funktioniert nicht. Also habe ich beschlossen, Horroreffekte mit JavaScript zu erstellen. Im Moment hat das zweite Dropdown-Menü eine Anzeige ohne Anzeige. Also lasst uns weitermachen und diesen Code von hier aus loswerden. Außerdem werde ich den temporären Klassennamen entfernen , den wir dem zweiten Dropdown hinzufügen dem zweiten Dropdown Danach werde ich Drop-down-Menüs ausblenden. Dafür. Verwenden wir Opazität Null und Visibility Hidden. Ordnung, wie Sie sehen können, sind die Dropdownmenüs ausgeblendet Gehen wir zur JavaScript-Datei und zum Interview, zu den Kommentaren und zur Navigation. Dann nein zur Navigation. Dann müssen wir das erste und das zweite Navigationselement gleichzeitig auswählen . Um das zu erreichen, werde ich beiden Elementen zuordnen. Die gebräuchlichen Klassennamen. Nennen wir es fallengelassen, schweben. Danach erstellen wir eine neue Variable. Ich nenne es Dropdown-Items. Wählen Sie dann das erste und zweite LI-Element mit der Methode querySelector all aus Wir müssen hier den Klassennamen angeben, Drop-down-Mauszeiger. Jetzt haben wir beide Navigationspunkte ausgewählt. Im Allgemeinen gibt die Methode query selector all ein Array-ähnliches Objekt zurück, das als Knotenliste bezeichnet wird Wir müssen also die Liste durchgehen und an jedes Navigationselement und jeden Event-Listener anhängen jedes Navigationselement und jeden Event-Listener mit der Maus über das Ereignis fahren Um die Liste durchzusehen, verwende ich eine der Array-Hilfsmethoden, die für h aufgerufen werden . Also müssen wir für jede Methode zwei Dropdown-Elemente anhängen Diese Methode benötigt ein Argument, das eine Callback-Funktion ist Diese Funktion wird für jedes Navigationselement ausgeführt. Die Callback-Funktion selbst wird einen Parameter haben, das aktuelle Element aus der Liste während der Schleife Ich nenne es Dropdown-Element Jetzt müssen wir einen Event-Listener an ein Dropdown-Item anhängen einen Event-Listener an ein Dropdown-Item Wir müssen hier das Ereignis angeben. Es wird mit der Maus drüber sein. Und auch hier brauchen wir die Pfeilfunktion. Diese Funktion wird ausgeführt sobald wir den Mauszeiger über das Objekt Wir brauchen also zwei Dinge. Beim Schweben. Wir müssen das Drop-down-Menü anzeigen und auch die Hintergrundfarbe des Napa-Wrappers ändern die Hintergrundfarbe des Napa-Wrappers Beginnen wir mit einem Drop-down-Menü. Wir haben also zwei Navigationspunkte und zwei Drop-down-Menüs. Wir müssen das richtige Drop-down-Menü anzeigen sobald wir den Mauszeiger über das Navigationselement Wir müssen also wie folgt über das Dropdown-Menü auf das Dropdown-Menü zugreifen also wie folgt über das Dropdown-Menü auf das Dropdown-Menü Wir benötigen einen Dropdown-Artikel. Dann müssen wir auf das Drop-down-Menü zugreifen, das die letzten untergeordneten Elemente des Listenelements darstellt. Also müssen wir hier die Eigenschaft last element child verwenden . Sobald wir also Zugriff auf das Dropdown-Menü haben, müssen wir es jetzt sichtbar machen. Verwenden wir dazu eine der Eigenschaften namens CSS-Text. Ich gebe deine Opazität eins und deine Sichtbarkeit sichtbar weiter eins und deine Sichtbarkeit sichtbar Wenn ich also den Mauszeiger über den ersten Navigationspunkt bewege, erscheint das erste Drop-down-Menü Und wenn ich den Mauszeiger über den zweiten Navigationspunkt bewege, erscheint das zweite Dropdown-Menü Danach funktioniert der Hover-Effekt nicht mehr, weil wir nur das Mouse-Over-Ereignis definiert haben und nicht das Mouse-Out Vorher werde ich die Hintergrundfarbe des Napa-Wrappers ändern die Hintergrundfarbe des Napa-Wrappers Wählen wir es mit der Abfrageauswahlmethode aus. Geben Sie hier den Klassennamen Napa Wrapper an. Dann brauchen wir eine Eigenschaft namens Style, gefolgt vom Hintergrund. Ich werde hier die lineare Gradientenfunktion verwenden. Die Richtung wird darin bestehen, zu schreiben. Und dann gebe ich hier drei Farben weiter. Der erste wird 066399 sein. Dann brauchen wir f8f, das F, und dann brauchen wir wieder Wenn wir nun den Mauszeiger über die Hintergrundfarbe des Romans bewegen, ändert sich der Umschlag In Ordnung, jetzt müssen wir das Mouse-Out-Event verwenden. Sobald wir die Maus rausziehen, müssen wir die Drop-Downs ausblenden Und wir müssen auch die Hintergrundfarbe der Romanhülle loswerden . Eigentlich werde ich diesen Code duplizieren und dann das Ereignis ändern, es wird die Maus raus. Dann brauchen wir Opazität Null. Sichtbarkeit versteckt. Was den Hintergrund angeht, so wird es keinen geben. Okay, jetzt funktioniert alles perfekt und mit den Drop-down-Menüs sind wir fertig Okay, also diese Silbe, der erste Abschnitt, lass uns weitermachen und den nächsten anpassen 92. Projekt 10 - Erstellen und anpassen des Services-Abschnitts: Ordnung, mit dem ersten Abschnitt sind wir fertig, und jetzt ist es an der Zeit, weiterzumachen und uns um den nächsten zu kümmern Schauen wir uns zunächst das fertige Projekt an. Also werden wir den Abschnitt Dienste erstellen . Es wird einfach sein, es wird die Überschrift und drei Teile haben, die Font Awesome-Symbole, Überschriften, Absätze und Schaltflächen enthalten Überschriften, Absätze und Schaltflächen Okay, lassen Sie uns weitermachen und das HTML-Markup erstellen. Ich füge Ihre neuen Kommentare ein, Abschnitt zwei. Und Abschnitt zwei. Öffnen Sie dann ein Abschnitt-Tag mit einer Klasse, Abschnitt zwei. Wie gesagt, dieser Abschnitt wird aus zwei Hauptteilen bestehen. Die erste wird die Überschrift sein. Öffnen wir das H1-Überschrift-Tag mit der Überschrift für den zweiten Abschnitt der Klasse Und da der Inhalt, ich einfügen werde, ist dein Paypal für alle, die zahlen oder bezahlt werden. Als Nächstes benötigen wir die Dienste, die geöffnet sind, ein div-Tag, das als Wrapper dient Insgesamt werden wir also drei verschiedene Dienste haben. Öffnen wir das Div-Tag mit dem Klassenservice. Jeder Dienst besteht aus einem Font Awesome-Symbol, Überschrift, einem Absatz und der Schaltfläche. Lassen Sie uns das I-Tag mit einer Klasse öffnen, die FAS ist, eine Benutzerbindung. Dann brauchen wir eine Richtung. Ich werde das H3-Überschrift-Tag mit der Überschrift Class Service mit den Inhalten für Einzelpersonen öffnen mit den Inhalten für Einzelpersonen Dann wird das nächste Element ein Absatz sein. Es ist der Klasse zugeordnet, Dienstparagraph. Und fügen Sie hier ein paar Dummy-Texte ein. Schließlich brauchen wir noch einen Button mit einem erstklassigen Service, übrigens. Und mit dem Inhalt erfahren Sie mehr. Okay, das war's mit dem ersten Service. Ich werde es zweimal duplizieren und dann einige Änderungen vornehmen. Ich werde den Klassennamen des Font Awesome-Symbols ändern . Es wird eine FASFA-Aktentasche sein, da sie wahrscheinlich unterwegs ist. Ich füge Ihre Unternehmen ein. Dann wird die nächste Schrift, das Awesome Icon, WEIT ein Handschlag sein Was die Überschrift betrifft, so wird es Partner sein. In Ordnung, das ist also eine Silbe, das HTML-Markup. Jetzt müssen wir anfangen, diesen Abschnitt zu stylen. Fügen wir neue Kommentare in die CSS-Datei für Abschnitt zwei ein. Wählen Sie dann das Abschnittelement aus. Lassen Sie uns die Breite definieren, also 100%, und dann etwas Platz innerhalb dieses Abschnitts schaffen . Wir benötigen eine Polsterung Setzen wir es oben auf zehn Rem. Dann Null auf der rechten Seite als 15 RAM unten und Null auf der linken Seite. Ordnung, als Nächstes richte ich die Elemente mit Flexbox Ich meine, ich werde die Überschrift und die Dienste vertikal in der Spalte platzieren . Stellen wir das Display auf Flex ein. Dann müssen wir die Richtung ändern. Machen wir daraus eine Kolumne. Und dann platzieren Sie die Elemente in der Mitte, indem Sie Elemente ausrichten, zentrieren verwenden. In Ordnung, die Elemente sind also aufeinander abgestimmt. Als Nächstes passe ich die Überschrift an. Wählen wir es aus. Lassen Sie uns zunächst die Schriftgröße erhöhen und fünf RAM daraus machen. Dann machen Sie die Schrift heller, indem Sie die Schriftstärke auf 100 setzen, dann ändern Sie die Farbe, machen Sie sie 333 Und zum Schluss werde ich unten etwas Platz schaffen, Margin Bottom verwende, das wir ausgeführt haben. Wie Sie sehen können, sieht die Überschrift gut aus. Lassen Sie uns weitermachen und uns um die Dienstleistungen kümmern. Ich werde sie horizontal in einer Reihe platzieren. Wählen wir Dienste aus und stellen die Anzeige auf Flex ein. Ordnung, danach wähle ich den Dienst selbst Definieren wir zunächst die Breite. Ich mache 35 RAM, brauchen wir, um Texte in der Mitte auszurichten. Und schaffen Sie auch etwas Platz auf der linken und rechten Seite, indem Sie den Rand verwenden. Setzen wir es auf Null und Fibrin. In Ordnung, das war's mit dem Service. Jetzt müssen wir anfangen, die Elemente individuell anzupassen. Lassen Sie uns mit den Font Awesome-Symbolen beginnen. Wählen Sie sie aus, erhöhen Sie die Schriftgröße und machen Sie sechs RAM daraus. Dann ändere die Farbe. Ich nehme deine Farbe oder zwei bis neun F E7. Und dann schaffen Sie oben und unten mit dem Rand etwas Platz . Stellen wir es auf zwei Rampen und Null ein. In Ordnung, die Font Awesome-Icons sehen also gut aus. Lass uns weitermachen und mit den Überschriften beginnen. Wählen wir die Serviceüberschrift aus. Stellen Sie die Schriftgröße auf drei RAM ein. Dann setze ich die Schriftstärke auf 300 und schaffe auch am unteren Rand etwas Platz, indem ich den Rand unter einer Rampe verwende. Die Überschriften sind also angepasst. Gehen wir zu den Absätzen über. Also wie ein Serviceabsatz. Stellen Sie dann die Schriftgröße auf 1,5 RAM ein. Ich werde die Schrift etwas fetter machen. Stellen wir es auf 600 ein und schaffen auch unten Platz. Lassen Sie uns die Marge von unten bis zur Rampe festlegen. Okay, also der Absatz, er sieht gut aus. Das einzige, was ich tun möchte, ist, dass die Zeilenhöhe des Absatzes leicht verringert wird . Setzen wir es auf 1.2. In Ordnung, mit einem Absatz sind wir fertig. Gehen wir zum letzten Element in den Diensten über, bei dem sich um eine Schaltfläche handelt. Definieren wir zunächst seine Breite. Ich mache 20 RAM draus. Machen Sie dann etwas Platz anstelle der Teile und verwenden Sie Padding Stellen wir es auf 1,5 RAM Außerdem werde ich die Hintergrundfarbe transparent machen. Dann mache die Knöpfe um ihn herum mit dem Randradius. Drei Rampen. Fügen wir der Schaltfläche ein paar weitere Stile hinzu. Ich ändere die Grenze. Die 2.1 laufen solide. Und als Farbe verwenden wir O365, B0, B1. Dann müssen wir die Farbe ändern. Verwenden wir hier wieder die Farbe R36, b0, b1. Außerdem werde ich die Schriftgröße erhöhen. Machen wir 1,5 RAM draus, dann machen wir die Schrift fett. Und ändern Sie auch den Cursor-Methodenzeiger. In Ordnung, die Knöpfe sehen also gut aus. Und eigentlich sind wir mit diesem Abschnitt fertig. Es sieht nett aus. Und jetzt müssen wir uns um den nächsten Abschnitt kümmern. 93. Projekt 10 - Abschnitt über die Funktionen erstellen und stilen: Okay, sobald wir mit der Arbeit am zweiten Abschnitt fertig sind , ist es jetzt an der Zeit, weiterzumachen und mit dem Bauen zu beginnen. Im nächsten Abschnitt geht es um so etwas wie Funktionen. Und es wird ein ziemlich einfacher Abschnitt sein, der eine Abschnittsüberschrift und sechs verschiedene Funktionen mit einem schönen blauen Hintergrund Lassen Sie uns also weitermachen und mit der Erstellung des HTML-Markups beginnen . Lassen Sie uns neue Kommentare für Abschnitt drei erstellen. Öffnen Sie dann ein Abschnitt-Tag mit einer Klasse, Abschnitt drei. In diesem Abschnitt werden wir also zwei verschiedene Teile haben. Die erste wird die Überschrift sein. Öffnen wir das H1-Überschrift-Tag mit der Überschrift des dritten Klassenabschnitts Der Inhalt wird kostenpflichtig sein, den die Welt bevorzugt. Was den zweiten Teil betrifft, so werden es die Funktionen sein. Insgesamt werden wir also sechs verschiedene Funktionen haben. Öffnen wir das Div-Tag mit der Klassenfunktion. Jedes Feature wird die Überschrift und den Absatz enthalten. Öffnen wir das h3-Heading-Tag mit der Überschrift des Klassenmerkmals. Und mit dem Inhalt erweiterter Schutz. Dann benötigen wir einen Absatz mit dem Klassenmerkmalabsatz als Inhalt. Ich füge hier einen Blindtext ein. Okay, das war's mit dem ersten Feature. Insgesamt werden wir sechs davon haben. Lassen Sie uns also weitermachen und es fünfmal duplizieren und Ihnen dann den Inhalt der Überschriftenelemente zeigen . Die zweite werden schnelle Zahlungen sein. Dann werden wir eine globale Reichweite haben. Die nächste ist eher einfache Integration als einfach und bequem. Und der letzte wird rund um die Uhr geöffnet sein. In Ordnung, das war's also. Das HTML-Markup ist fertig und jetzt müssen wir diesen Abschnitt gestalten Lassen Sie uns weitermachen und neue Kommentare in der CSS-Datei erstellen. Wir brauchen hier Abschnitt drei und Abschnitt drei. Und wählen Sie dann diese Abschnittselemente aus. Zunächst definiere ich seine Breite. Machen wir es zu 100 Prozent. Dann werde ich oben und unten in diesem Abschnitt etwas Platz schaffen , verwenden wir Padding, setzen es auf fünf Rem und Null und definieren dann den Hintergrund Ich werde einen linearen Farbverlauf mit drei verschiedenen Farben verwenden . Aber zuerst definiere ich die Richtung des Farbübergangs. Es wird von links nach rechts sein und dann den RGBA-Wert verwenden Die erste wird drei sein, dann 303129 und die Opazität Diese zweite Farbe wird 967153 sein. Und die Opazität von 0,8. die dritte Farbe angeht, machen wir 4321 bis vier Und die Opazität zeigt Nacht an und ändert auch die Farbe des Textes. Mach es weiß. Okay, danach werde ich die Elemente mit Flexbox ausrichten Der Inhalt wird horizontal in der Mitte platziert. Stellen wir das Display auf Flex ein. Um dann die Überschrift und den Inhalt übereinander zu platzieren , verwenden wir die Spalte mit flexibler Richtung. Und um den Inhalt dann in der Mitte zu platzieren, verwenden wir „Elemente mittig ausrichten“. In Ordnung, die Elemente sind also aufeinander abgestimmt. Lassen Sie uns weitermachen und diese Abschnittsüberschrift anpassen. Zunächst definiere ich die Schriftgröße. Machen wir fünf RAM draus. Machen Sie dann die Schrift heller und setzen Sie die Schriftstärke auf 300 Und schafft schließlich etwas Platz am unteren Rand indem Sie Margin Bottom Five rem verwenden. In Ordnung, lassen Sie uns weitermachen und die Funktionen anpassen. Wählen wir ein Wrapper-Div-Element aus und definieren die Breite 70%. Und dann werde ich die Features horizontal nebeneinander platzieren die Features horizontal nebeneinander Dafür müssen wir Display Flex verwenden. Okay, jetzt müssen wir die Features auf zwei verschiedenen Zeilen platzieren . Aber vorher definiere ich die Breite jedes Features. Ich möchte, dass jedes Feature ein Drittel der Breite des Wrappers einnimmt ein Drittel der Breite des Wrappers einnimmt Wählen wir also das Feature aus und definieren dann die Breite. Jetzt verwende ich die Calc-Funktion, weil wir 100% durch drei teilen müssen In diesem Fall nimmt jedes Feature ein Drittel der Breite des Wrappers Und danach verwenden wir Flex Wrap. Zum Verpacken. Es wird uns ermöglichen, die Futures auf zwei verschiedenen Linien zu platzieren. Okay, jetzt müssen wir das Feature selbst lösen. Lassen Sie uns die Airline-Texte in der Mitte schreiben. Dann werde ich mithilfe von Padding etwas Platz auf der linken und rechten Seite innerhalb des Features schaffen mithilfe von Padding etwas Platz auf der linken und rechten Seite innerhalb des Features Stellen wir es auf 0,5 RAM ein. Und schafft schließlich etwas Platz im unteren Bereich, indem die Marge unter fünf Mieten verwendet wird. Okay, jetzt haben wir viel bessere Ergebnisse. Als Nächstes müssen wir die Überschrift und den Absatz formatieren. Lass uns in die Zukunft gehen. Zunächst definiere ich eine Breite. Stellen wir es auf maximalen Inhalt ein. In diesem Fall nimmt das Element die Breite ein, die für die Anzeige des Inhalts erforderlich ist . Als nächstes benötigen wir die Schriftgröße. Machen wir drei RAM draus. Stellen Sie außerdem die Schriftstärke auf 300 ein. Und dann müssen wir die Marge definieren. Setzen wir es oben auf Null. Um die Elemente dann zu zentrieren, müssen wir den Rand links und rechts auf Auto setzen . Was den unteren Teil angeht, so wird es eine Miete sein. Okay, zum Schluss kümmern wir uns um den Absatz. Wählen Sie den zukünftigen Absatz aus. Finden Sie die Schriftgröße und machen Sie 1,5 RAM daraus, dass wir die Schriftstärke benötigen. Machen wir 500 draus. Und schließlich werde ich die Zeilenhöhe verringern. Setzen wir es auf 1.2. In Ordnung, also endlich sind wir der dritte Abschnitt. Wir sind fertig. Es sieht nett aus. Lassen Sie uns weitermachen und uns um den nächsten Abschnitt kümmern. 94. Projekt 10 - Erstellen und Stil Erste Schritte Abschnitt: Wir haben bereits einige Abschnitte der Titelseite erstellt . Es ist Zeit, weiterzumachen und mit dem Bau des nächsten Abschnitts fortzufahren . Wir müssen einen vierten Abschnitt der Titelseite erstellen , wahrscheinlich vorherige Abschnitte Dieser wird ebenfalls ein einfacher Abschnitt sein. Wir werden eine Überschrift haben, gefolgt vom Bild und der Liste. Lassen Sie uns damit beginnen, das HTML-Markup zu erstellen und neue Kommentare für Abschnitt vier Öffnen Sie dann ein Abschnitt-Tag mit der Klasse, Abschnitt 4. In diesem Abschnitt werden wir also zwei Hauptteile haben: Elemente. Die erste wird die Überschrift dieses Abschnitts sein. Öffnen wir das H1-Tag mit dem Klassenabschnitt als Überschrift. Der Inhalt wird mit Paypal gestartet. Dann benötigen wir ein div-Tag, das das Bild und die Liste umschließt. Ich werde den Inhalt dem Klassenbereich zuweisen. Jetzt füge ich ein Bild ein, aber zuerst erstellen wir ein div-Tag, das die Hülle des Bildes sein wird Ich werde den IMG-Wrapper dem Cluster-Abschnitt zuweisen IMG-Wrapper dem Cluster-Abschnitt zuweisen Und dann füge hier ein Bild ein. Ich wähle MacBook Dot PNG aus dem Bilderordner aus. In Ordnung, danach müssen wir eine Liste erstellen Öffnen wir das UL-Tag mit einem Klassenabschnitt, denn mindestens das wird drei verschiedene Listenelemente enthalten. Öffnen wir das LI-Tag mit dem Klassenabschnitt für das Listenelement. Jedes Listenelement besteht also aus zwei Spanelementen. Die erste wird die Zahl sein. Was den zweiten betrifft , so sollte es der Inhalt des Elements sein , das ein offenes Span-Tag mit der Klassennummer eins ist . Dann brauchen wir noch einen Span-Tag. Tatsächlich werden wir innerhalb dieses Span-Tags einen Link haben. Fügen wir hier ein Geschäftskonto ein. Lassen Sie uns das LI-Element zweimal duplizieren und einige Änderungen vornehmen. In den zweiten und dritten Listenpunkten werden wir also Blindtext haben In Ordnung? Das HTML-Markup ist also vorbereitet, und jetzt müssen wir beginnen, diesen Abschnitt anzupassen Fügen wir neue Kommentare und den Abschnitt mit der CSS-Datei für das Ende von Abschnitt vier ein. Wählen Sie dann ein Abschnittselement und definieren Sie die Breite. Stellen Sie sie auf 100% ein. Dann werde ich oben und unten in dieser Aktion Platz schaffen , indem ich Padding verwende Setzen wir es auf zehn RAM Null. Und dann richte ich die Überschrift und den Inhalt mithilfe von Flexbox Wir brauchen Display Flex. Dann müssen wir die Richtung ändern. Machen wir daraus eine Kolumne. Und um den Inhalt in der Mitte zu platzieren, verwenden wir die Option Elemente mittig ausrichten. In Ordnung, die Elemente sind also aufeinander abgestimmt. Als Nächstes passen wir diese Abschnittsüberschrift an, wählen Sie die Schriftgröße aus und legen Sie fünf RAM fest. Dann ändere ich die Schriftstärke. Machen wir 400 draus. Ändere auch die Farbe. Ich mache 44 und erstelle dann ein Leerzeichen am unteren Rand, verwende den Rand, die untere Fünf-Rampe. Ordnung, lassen Sie uns weitermachen und Inhalt dieses Abschnitts kümmern Ich werde das Bild und das am wenigsten Seite an Seite platzieren. Wählen wir also den Wrapper-Div aus und weisen ihm Display-Flex zu Die Schulden. Lassen Sie uns das Bild anpassen. Eigentlich ist es im Moment zu groß. Wählen wir den Wrapper aus. Ich werde die Breite definieren. Machen wir 50 RAM draus. Wählen Sie dann das Bild selbst aus. Ich werde mit 200 Prozent beginnen. In diesem Fall nimmt das Bild die Breite seines übergeordneten Elements ein, das der Wrapper ist Und dann werde ich die Opazität des Bildes leicht verringern Opazität des Bildes leicht Setzen wir es auf 0,8. In Ordnung, das Bild sieht also gut aus Gehen wir rein und passen die Liste an. Wählen Sie UL-Elemente aus. Zunächst definiere ich die Breite. Machen wir 55% draus. Erstellen Sie dann oben etwas Platz, indem Sie den Rand oben verwenden, um zu laufen. Jetzt müssen wir an den Listenpunkten arbeiten. Wählen wir LI-Elemente aus und definieren die Schriftgröße. Ich werde 1,6 RAM draus machen. Dann machen Sie die Schrift etwas fetter. Lassen Sie uns die Schrift auf 600 setzen. Und danach werde ich die Zahlen und die Textelemente nebeneinander platzieren die Textelemente nebeneinander Lassen Sie uns Display Flex verwenden und die Elemente auch in der Mitte platzieren. Und schließlich schaffen Sie unten etwas Platz , indem Sie Margin Bottom to Run verwenden. In Ordnung, jetzt kümmere ich mich um die Zahlen. Wählen wir sie aus. Definieren wir zunächst Breite und Höhe. Ich werde beiden 3,5 RAM geben. Dann müssen wir die Grenze mit dem Wert 0,1 RAM Solid erstellen . Die Farbe 555. Außerdem müssen wir sie dazu bringen, es zu umgehen. Verwenden wir den Grenzradius mit einem Wert von 50 Prozent. Und auch dieses Feld auf der rechten Seite ist Emoji Write 1.5 Rampe Okay? Danach müssen wir die Zahlen in der Mitte der Kreise platzieren. Dafür werde ich Flexbox verwenden. Wir brauchen Display Flex. Und für die Zentrierung müssen wir Justify-Content Center und Align Items Center verwenden Justify-Content Center und Align Items Center In Ordnung, wir sind fast fertig. Das einzige, was ich tun werde, ist, die Farbe des Links im ersten Listenelement zu ändern Links im ersten Listenelement und ihn etwas fetter zu machen Wählen wir Link-Elemente aus. Ich ändere die Farbe. Machen wir es o36, b0, b1. Und ändern Sie auch die Schriftstärke. Mach es mutig. In Ordnung, das war's also. Der vierte Abschnitt sieht gut aus. Lass uns weitermachen. 95. Projekt 10 - Fußzeile erstellen und stilvoll: In Ordnung, also Schritt für Schritt gehen wir voran. Jetzt ist es an der Zeit, den letzten Abschnitt der Titelseite zu erstellen . Es wird der fünfte Abschnitt sein. Es wird aus zwei Hauptteilen bestehen. Der erste Teil wird eine Überschrift enthalten und ich habe welche gekauft. Was die zweite Kugel angeht, wird die Fußzeile der Seite sein , sie wird den Mietvertrag und einen Copyright-Text enthalten Lassen Sie uns anfangen, das HTML-Markup zu erstellen. Ich werde neue Kommentare für Abschnitt fünf einfügen. Öffnen Sie dann ein Abschnitt-Tag mit einer Klasse, Abschnitt fünf. Wie gesagt, wir werden zwei Hauptteile haben. Der erste wird Abschnitt fünf sein. Oben. Hier werden wir nur zwei Elemente haben, Überschrift und Bateson Öffnen wir die H2-Überschrift und markieren Sie sie mit einer Klasse, Abschnitt fünf, obere Überschrift den Inhalt angeht, lass die Dinge, wenn du dich anmeldest und loslegst. Was die Schaltfläche betrifft, so wird sie der Schaltfläche ähneln , die wir im ersten Abschnitt erstellt haben. Ich bin in der blauen Taste. Verwenden wir also die Klasse. BTN. Der Inhalt wird gestartet. Wie Sie sehen können, ist es schon Stil. In Ordnung, das war's mit dem ersten Teil. Lassen Sie uns weitermachen und die Fußzeile erstellen. Ich werde ein HTML5-Fußzeilenelement mit einer Klassenfußzeile verwenden mit einer Klassenfußzeile Die Fußzeile selbst wird aus zwei Teilen bestehen. Wir werden oben und unten einen Filter in der Fußzeile haben. Die obere Seite wird also zwei verschiedene Listen enthalten. Öffnen wir das UL-Tag mit einer Klassenfußzeilenliste. Dann füge ich Ihr LI-Tag ein, gefolgt vom Link-Tag mit dem Inhaltshilfekonflikt. In beiden Listen werden wir also fünf Listenelemente haben. Lassen Sie uns also das LI-Element viermal duplizieren und dann einige Änderungen vornehmen. Der zweite Listenpunkt werden Gebühren sein, dass wir Sicherheitsfunktionen haben werden. Und der letzte wird erschossen. Okay? Ich werde die gesamten Listenelemente duplizieren und dann erneut einige Änderungen vornehmen. Die zweite Liste wird vier Sprachen enthalten. Lass uns dein Englisch einfügen. Dann. Der nächste wird Spanisch, Französisch, Italienisch, S4 sein. Der letzte Gegenstand wird das Bild sein. also anstelle des Textes Lassen Sie uns also anstelle des Textes ein IMG-Element einrichten. Wählen wir FLAC Dot PNG aus dem Bilderordner aus. Es wird die georgische Nationalflagge sein. In Ordnung, das war's mit der Frucht oder dem Top. Jetzt brauchen wir Footer Bottom, das nur einen einzigen Absatz enthalten wird, wird Klassenurheberrecht sein Und für die folgenden Texte benötigen wir das Urheberrecht, gefolgt von der HTML5-Entität, die das Copyright-Zeichen sein wird Und lassen Sie uns Sie auch einfügen. Alle Rechte vorbehalten. Okay, endlich ist das HTML-Markup vorbereitet und wir sind bereit, diesen Abschnitt anzupassen Lassen Sie uns weitermachen und neue Kommentare und eine CSS-Datei erstellen. Wir brauchen Abschnitt fünf. Aus Abschnitt fünf. Wählen Sie dann die Abschnittselemente und definieren Sie sie mit 100%. Danach wähle ich den oberen Teil dieses Abschnitts aus. Definieren wir seine Breite, machen wir es zu 100%. Und ich werde auch die Hintergrundfarbe ändern . Lass uns deine Farbe verwenden. F3, F7, F8. Okay, danach platziere ich die Elemente in der Mitte. Außerdem möchte ich oben und unten etwas Platz schaffen , anstatt am Element. Verwenden wir die Textausrichtung in der Mitte. Was dieses Tempo angeht, werde ich es mit Polsterung machen. Setzen wir es auf sieben Rem. Und dann Null. Danach kümmere ich mich um die Überschrift. Wählen wir es aus. Lassen Sie uns zunächst die Schriftgröße auf 3,5 Gramm erhöhen . Dann machen Sie die Schrift etwas heller. Stellen Sie die Schriftstärke auf 400 ein. Und schafft auch unten etwas Platz , indem Sie den Rand unten mit einem Wert für R1 Okay, das war's mit der Überschrift. Gemäß der blauen Taste. Es ist überall auf diesen Kacheln. Wir werden ein paar blaue Knöpfe im Projekt haben. Also werde ich mir den CSS-Code des Pfarrers schnappen und ihn in die gängigen Stile einfügen Außerdem möchte ich hier noch einen Stil hinzufügen. Ändern wir den Typ des gröberen Geräts. Machen Sie es darauf aufmerksam. Mit dem ersten Teil, dem oberen Teil, sind wir fertig. Lassen Sie uns weitermachen und mit der Arbeit an der Fußzeile beginnen. Definieren wir zunächst seine Breite und Höhe. Ich setze die Breite auf 100%. Was die Höhe angeht, lassen Sie uns 15 Runs daraus machen. Als Nächstes richte ich die Elemente mithilfe von Flexbox aus. Verwenden wir Display Flex. Ich werde die Elemente vertikal in einer Spalte platzieren und sie auch in der Mitte ausrichten. Also lasst uns weitermachen und die Richtung ändern . Mach es zu einer Kolumne. Als Nächstes werde ich Platz zwischen den Flex-Elementen schaffen. Verwenden Sie „Inhalt ausrichten, Leerzeichen dazwischen“. Um die Elemente dann in der Mitte zu platzieren, verwenden Sie die Option Elemente mittig ausrichten. Und schließlich schaffen Sie etwas Platz in der Fußzeile. Verwenden Sie Polster Ich setze es auf vier Durchläufe oben als Null auf der rechten Seite, drei RAM unten und Null auf der linken Seite. Okay, bevor wir fortfahren, möchte ich die Größe des Bildes ändern. Es ist momentan zu groß. Lassen Sie uns seine Breite auf 3,8 RAM festlegen. Außerdem werde ich die Opazität verringern, sie auf 0,6 erhöhen. In Ordnung, jetzt ist es viel besser. Lassen Sie uns weitermachen und uns um die obere Fußzeile kümmern. Stellen wir die Breite auf 70% ein. Als Nächstes werde ich beide Leads nebeneinander platzieren. Lassen Sie uns also die Anzeige so einstellen, dass sie flexibel ist und außerdem Platz zwischen den Listen schaffen Platz zwischen den Listen indem wir den Inhaltsabstand zwischen den Listen ausrichten. Okay, danach erstelle ich einen Rand am unteren oder oberen Rand des Fußes. Lassen Sie uns die unteren Grenzwerte von 0,1 RAM lockern , dann wird diese Kachel gepunktet. Was die Farbe angeht, verwenden wir 262626 und schaffen auch unten mit Polsterung etwas Platz Letzter Lauf. In Ordnung, jetzt können wir die Links anpassen. Ich möchte die Listenelemente horizontal in einer Reihe platzieren. Wählen wir ein UL-Tag aus. Ich werde Flexbox verwenden. Stellen wir die Anzeige auf Flex ein und platzieren die Elemente dann mithilfe von „Objekte mittig ausrichten“ in der Mitte. Als Nächstes werde ich die Listenelemente beider Listen formatieren. Und Marge verwenden, oder? Mit dem Wert 2,5. Lauf. Danach wählen wir die Links aus. Lassen Sie uns zunächst die Schriftgröße ändern und 1,5 RAM daraus machen. Dann mach das Telefon mutiger. Schriftstärke auf 600 und ändere auch die Farbe. Schaffen Sie es auf 62626. Okay, also endlich müssen wir den Copyright-Absatz anpassen . Wählen wir es aus. Stellen Sie die Schriftgröße für RAM auf einen Punkt fest. Stellen Sie dann die Schriftstärke auf 600 ein. Und schaffen Sie auch etwas Abstand zwischen den Buchstaben, indem Sie den Buchstabenabstand verwenden, eine Rampe von 0,1. Okay, mit dem fünften Abschnitt sind wir fertig und eigentlich haben wir die Arbeit an der Titelseite abgeschlossen Jetzt ist es an der Zeit, Sie müssen sich auf die Anmeldeseite einloggen. Also lass uns weitermachen. 96. Projekt 10 - Anmeldeseite erstellen und stil: Ordnung, wir haben die Arbeit an der Titelseite des Projekts abgeschlossen , und jetzt ist es an der Zeit, uns um diese zweite Seite zu kümmern, die die Anmeldeseite sein wird Werfen wir einen Blick auf das fertige Projekt. Also hier haben wir die Anmeldeseite. Wir haben nicht so viel Inhalt. Wir erstellen das Logo, gefolgt von den Eingabefeldern und zwei Schaltflächen. Bevor wir anfangen, das HTML-Markup der Anmeldeseite zu erstellen der Anmeldeseite Zuallererst werde ich die Titelseite überhaupt verstecken. Wählen wir es aus und weisen es ihm zu, zeigen wir keins an. Okay, jetzt, unten, direkt nach der Titelseite, und ich füge neue Kommentare für die Anmeldeseite ein. Öffne dann ein Div-Tag mit einer Anmeldeseite für die Klasse. Es wird die Verpackung sein. Als Nächstes öffne ich ein weiteres div-Tag, das den Inhalt umschließt. Nennen wir es Inhalt der Anmeldeseite. Der Inhalt wird aus zwei Hauptteilen bestehen. Wir werden das Logo und ein Formularelement haben. Tatsächlich wird das Logo der Null für Logo ähneln. Wir müssen nur die Farben der Buchstaben ändern. Außerdem werden wir auf der Anmeldeseite ein ähnliches Logo erstellen . Um zu vermeiden, dass derselbe Code immer wieder verwendet wird, werde ich Folgendes tun. Lassen Sie uns dem Navbar-Logo eine andere Klasse zuweisen , ich meine Logo Es wird der gemeinsame Klassenname für alle drei Logos sein , die wir in diesem Projekt verwenden werden. Dass ich mir den Code schnappe, ihn einfüge und einige Änderungen vornehme. Wir brauchen nicht den Klassennamen und stattdessen das Navbar-Logo Fügen wir hier das Logo der Anmeldeseite hinzu. Als Nächstes werde ich den halben Teil des Wortes Paypal mit einem Span-Element umwickeln . Und wickeln Sie auch den zweiten Teil mit einem Spannelement ein. Eigentlich mache ich das, weil beide Teile unterschiedliche Farben haben werden. Außerdem werde ich den Klassennamen in der CSS-Datei ändern . Nennen wir es Logo und fügen diesen Code auch in die Stammaktien ein. Wie Sie sehen können, hat das Logo bereits die Stile. Eigentlich ist es momentan nicht sichtbar, weil es die weiße Farbe hat. Okay, lassen Sie uns weitermachen und die restlichen Elemente erstellen. Das nächste wird das mit einer Klasse erstellte Anmeldeseite sein. Innerhalb des Formularelements werden wir also ein paar verschiedene Elemente haben. Zuallererst müssen wir Elemente eingeben und es ist die Wissenschaftlerklasse, die Login-Eingabe. Außerdem benötigen wir ein Platzhalterattribut, E-Mail oder Handynummer. Lassen Sie uns die Eingabeelemente duplizieren und den Typ ändern, der Passwort sein wird. Und entfernen Sie auch das Platzhalterattribut. Danach erstelle ich den Button für die Anmeldung. Öffnen wir das Eingabe-Tag mit einer Klasse der Form Login btn. Der Typ wird Barton sein. Was den Wert angeht, wird log n sein . Also wird der Buxton erstellt Als Nächstes benötigen wir ein Link-Element , das dem Anmeldelink zum Ausklappen des Formulars zugewiesen ist. Und als Inhalt füge ich Sie ein, dass Sie Probleme beim Einloggen haben. Danach erstelle ich ein Span-Element als Inhalt. Lassen Sie uns zu Ihnen einfügen. Oder lassen Sie uns endlich einen zweiten Button für die Anmeldung erstellen. Eigentlich werde ich es kopieren. Der erste Button, den Klassennamen ändern wird gebildet, melde dich an. Was den Wert angeht, geben wir Sie ein, melden Sie sich an. In Ordnung, das war's mit dem HTML-Markup. Jetzt müssen wir die Anmeldeseite gestalten. Aber zuerst fügen wir neue Kommentare in die Anmeldeseite der CSS-Datei ein. Dann und von der Anmeldeseite. Außerdem werde ich Kommentare für die Titelseite hinzufügen . Eigentlich habe ich es am Anfang vergessen. Wählen Sie dann die schnellen Entwicklungen und definieren Sie Breite und Höhe. Ich setze die Breite auf 100%. Das ist die Höhe, die 100% des Viewports betragen wird die 100% des Viewports betragen Ordnung, als Nächstes wählen wir den Inhalt aus und definieren seine Position Ich setze es auf den absoluten Wert. Wir müssen das übergeordnete Element relativ positionieren. Danach definieren wir die Eigenschaften oben und links. Ich werde die Spitzeneigenschaft auf 12% festsetzen. Was das verlassene Eigentum betrifft, so werden es 50 Prozent sein. Dann werde ich das Element perfekt zentrieren. Dazu müssen wir die Funktion Translate mit X-Richtung und mit dem Wert -50 Prozent transformieren die Funktion Translate mit X-Richtung und mit dem Wert -50 Prozent X-Richtung und mit dem Wert -50 Prozent Danach werde ich das Logo und das Formular mit Flexbox ausrichten Logo und das Formular mit Flexbox Stellen wir das Display auf Flex ein. Dann müssen wir die Elemente vertikal in einer Spalte platzieren , sodass wir die Richtung ändern, sie zu einer Spalte machen und auch die Option Elemente mittig ausrichten verwenden müssen . Ordnung, als Nächstes erstellen wir den Rahmen um den Inhalt Stellen wir ihn auf 0,1 rem Festkörper und verwenden als Farbe CF, CF, CF. Schließlich werde ich etwas Platz in der Box schaffen . Machen wir das mit Padding. Machen Sie drei RAM auf allen vier Seiten. Richtig? Das ist die Silbe des Inhalts. Jetzt müssen wir das Logo anpassen. Lassen Sie uns zunächst unten etwas Platz schaffen. Ich wähle das Logo der Anmeldeseite aus. Definieren wir den unteren Rand. Machen Sie es sich zur Aufgabe, zu rennen. Als Nächstes ändere ich die Farben der Buchstaben. Fangen wir mit einem P-Buchstaben an. Wir benötigen hier Anmeldeseite, Logo, gefolgt von der Klasse P1 Lass uns die Farbe machen oh, 64699. Dann duplizieren Sie diesen Code und ändern Sie den Klassennamen, den wir hier benötigen , P2, weil es der zweite P-Buchstabe sein wird Was die Farbe angeht, verwenden wir hier drei bis vier von 0. Okay, die p-Buchstaben sind also farbig. Lass uns weitermachen und uns um den Rest der Briefe kümmern . Wie Sie sich erinnern, haben wir das Wort PayPal in zwei Teile aufgeteilt. Wählen wir den ersten Teil aus. Ich werde das Logo der Anmeldeseite der Klasse verwenden dann brauchen wir span, gefolgt vom n-ten Child-Selektor. Es wird das dritte Element sein. Lass uns die Farbe ändern und daraus 064699 machen. Dann duplizieren Sie diesen Code. Ändere hier die Nummer, die wir brauchen. Das vierte Kind auch. Die Farbe wird drei bis vier Zoll sein. In Ordnung, mit dem Logo sind wir fertig Lassen Sie uns weitermachen und uns um die geformten Elemente kümmern. Wählen Sie es aus. Zuerst. Ich werde dafür die Elemente vertikal in einer Spalte ausrichten. Verwenden wir Flexbox Wir müssen die Biegung anzeigen, dann die Richtungsspalte biegen und die Elemente in der Mitte ausrichten. Okay, lass uns weitermachen und anfangen, die Eingabeelemente zu stylen. Wie Sie wissen, haben wir zwei Eingabefelder und zwei Schaltflächen, die mithilfe der Eingabe-Tags erstellt werden. Alle vier Elemente werden einige gemeinsame Stile haben. Wählen wir sie also mit einem Tag-Namen aus. Zunächst müssen wir das Formular für die Anmeldeseite eingeben, gefolgt von der Eingabe. Definieren wir also zunächst Breite und Höhe. Ich setze die Breite auf 37. Lauf. Nehmen wir an, die Höhe wird 4,5 Gramm betragen. Schafft dann mithilfe von Margin Platz um die Eingaben. Mach einen Lauf draus. Und runden Sie die Eingaben auch mithilfe des Randradius ab. Danach kam 0,5 Rampe. Wählen wir die ersten beiden Eingabefelder mithilfe der Anmeldeeingabe des ClassName-Formulars aus Lassen Sie uns mithilfe von Padding etwas Platz innerhalb der Eingaben auf der linken und rechten Seite schaffen , ihn auf 0,1, 0,5 g legen. Dann ändere ich den Rand, mache 0,1, lasse ihn durchgehend laufen und die Farbe 777 Und schließlich erhöhen Sie die Schriftgröße, lassen Sie es 1.6 laufen. Richtig? Das war's mit den Eingabefeldern Lassen Sie uns weitermachen und die Anmeldeschaltfläche anpassen . Wählen wir es aus. Zuerst. Ich werde die Hintergrundfarbe definieren. Lässt dich deine Farbe sehen. Eid we 6P1 Dann ändere die Farbe des Textes und mache Außerdem benötigen wir eine Grenze mit den Werten 0,1 room solid. Und als Farbe verwenden wir wieder o36, B0, B1. Dann kümmere ich mich um die Schrift. Erhöhen wir die Größe, machen wir es auf 1,8 Ran. Machen Sie es auch fetter, setzen Sie die Schriftstärke auf 600 und ändern Sie schließlich den Typ des gröberen, machen Sie In Ordnung, die Anmeldeschaltfläche ist also angepasst. Als Nächstes werde ich das Link-Element anpassen. Lassen Sie uns es auswählen, die Schriftgröße erhöhen, es auf 1,6 RAM erhöhen und dann die Farbe ändern. Lass uns deine Farbe oder zwei bis neun FC7 verwenden. Und dann mit dem Rand etwas Platz oben und unten schaffen mit dem Rand etwas Platz oben und unten Ich setze ihn oben auf 1,2 rem als auf Null auf der rechten Seite, ein Zimmer unten und Null auf der linken Seite. In Ordnung, das Link-Element sieht also gut aus. Und jetzt müssen wir uns um diese Spannelemente kümmern . Ich bin in dem Wort oder was wir hier haben. Eigentlich müssen wir neben diesem Wort zwei Linien auf der linken und rechten Seite erstellen , wie wir sie im fertigen Projekt haben. Lassen Sie uns also weitermachen und Span-Elemente auswählen. Zuerst definiere ich seine Breite. Machen wir es zum Laufen. Stellen Sie dann die Schriftgröße auf 1,8 ein. Ran, ändere die Farbe. Sie sehen Ihre Farbe 888 und schaffen dann oben und unten etwas Platz, indem Sie den Rand verwenden , der ihr zugewiesen ist. Ein Lauf und dann Null. Okay, und so ist dieses Span-Element gestylt und jetzt müssen wir Ihre Linien erstellen Ich werde sie mit Vorher- und Nachher-Pseudoelementen erstellen Vorher- und Nachher-Pseudoelementen Beginnen wir mit den vorherigen Pseudoelementen. Es wird auf der linken Seite der Spannelemente platziert . Lassen Sie uns zunächst den Inhalt definieren und ihn leer machen. Dann setze ich die Breite auf 16 RAM. Was die Höhe angeht, so wird es 0,1 RAM sein. Und ändere auch die Hintergrundfarbe, mache sie zu C, C, C. Also im Moment ist die Linie nicht sichtbar. Wir müssen diese Position definieren. Machen wir es absolut. Dann müssen wir die übergeordneten Elemente relativ positionieren , was die Spanne ist. Danach definieren wir die Spitzenposition. Es werden 50 Prozent sein. Dann brauchen wir, richtig, machen wir 3,5 RAM draus. Um die Elemente dann vertikal zu zentrieren , verwenden wir Transform. Übersetze Y mit dem Wert -50 Prozent. In Ordnung, das ist also eine Sünde, was die erste Zeile angeht. Wir brauchen dasselbe auf der rechten Seite. Also lass uns diesen Code duplizieren. Vorher und nachher ändern. Verwenden Sie dann anstelle der rechten Position die linke Position. Okay, mit den Zeilen sind wir fertig Lassen Sie uns weitermachen und das letzte Element der Anmeldeseite anpassen , nämlich ein Pastor Ich habe diese Anmeldung gemacht BTN. Lassen Sie uns die Hintergrundfarbe ändern. Lassen Sie uns Ihre Farbe verwenden, D, B, E, D, C. Als Nächstes ändere ich den Rand. Weisen wir 0,1 RAM zu, durchgehend und gleichfarbig, DBE ATC Dann werde ich die Schriftgröße erhöhen sie auf 1,8 RAM erhöhen. Ändern Sie dann die Schriftstärke. Mach es mutiger. Benutze 600. Ändern Sie abschließend den Typ des Cursors und machen Sie ihn so, dass er zeigt. In Ordnung, das war's also. Wir haben die Arbeit an der Anmeldeseite abgeschlossen. Jetzt ist es an der Zeit, weiterzumachen und Sie von dieser Anmeldeseite 97. Projekt 10 - Registrierungsseite erstellen und stil: Ordnung, wir haben die Anmeldeseite erstellt, und jetzt ist es an der Zeit, die letzte Seite unseres Projekts zu erstellen, die Anmeldeseite sein wird Schauen wir uns das fertige Projekt an. Wie Sie sehen können, besteht die Anmeldeseite aus verschiedenen Teilen Wir haben die Oberseite, die das Logo und die Anmeldeschaltfläche enthält. Dann unten haben wir zwei verschiedene Teile des Inhalts. Auf der linken Seite haben wir ein paar Bilder der Kunden. Die rechte Seite besteht aus zwei Optionen und einem Feld. Okay. Das ist alles über die Anmeldeseite. Lassen Sie uns weitermachen und mit der Erstellung des HTML-Markups beginnen . Lassen Sie uns Ihre neuen Kommentare einfügen. Nach der Anmeldeseite. Wir benötigen eine Anmeldeseite und eine Anmeldeseite. Öffne dann ein div-Tag mit der Anmeldeseite für die Klasse. Wie bereits erwähnt, werden wir zwei Hauptteile haben, den oberen Teil und den Inhalt. Es ist also ein offenes Div-Tag mit der Anmeldeseite für die Klasse oben. Wir müssen das Logo und den Login-Button einrichten. Wie auf der vorherigen Seite bin ich auf der Anmeldeseite Wir benötigen dasselbe Logo , das wir auf der Titelseite verwendet haben. Nehmen wir es also aus dem ersten Abschnitt und fügen es hier ein. Ich ändere den Klassennamen. Wir müssen das Logo der Anmeldeseite verwenden. Außerdem müssen wir einen Button als Inhalt erstellen. Lassen Sie uns das Institut anmelden. In Ordnung, schauen wir uns die Oberseite an. Lassen Sie uns weitermachen und den Rest des Inhalts erstellen. Ich öffne das Div-Tag, das der Inhalt der Anmeldeseite sein wird Der Inhalt wird aus zwei Teilen bestehen. Wir nehmen die linke und die rechte Seite. Öffnen wir das Div-Tag mit dem verbleibenden Inhalt einer Anmeldeseite für die Klasse verbleibenden Inhalt einer Anmeldeseite Die linke Seite enthält drei Bilder und die Überschrift Let's open div Tag, die als Hülle für die Bilder dient Ich werde dem Klasseninhalt die linken Bilder zuweisen. Fügen Sie dann hier IMG-Elemente ein und wählen Sie Person One Dot JPEG aus dem Bilderordner aus. Dann dupliziere ich ein Bildelement zweimal und ändere die Namen des Bildes. In Ordnung, als nächstes brauchen wir die Überschrift. Öffnen wir das H1-Überschrift-Tag mit einem Inhalt. Überzeugen Sie sich selbst, warum Millionen von Menschen über Papier lachen. In Ordnung, das war's also mit der linken Seite. Jetzt müssen wir die richtige Seite erstellen. Ich öffne das Div-Tag mit dem Inhalt der Anmeldeseite für die Klasse . Richtig? Dieser Teil wird also zwei Überschriftenelemente und ein Formular enthalten , das geöffnet ist. H3-Überschrift-Tag mit dem Inhalt. Melde dich für Paypal an. Es ist kostenlos. Was die zweite Überschrift angeht, wird es ein H4-Überschrift-Tag sein, bei dem der Inhalt aus zwei Arten von Konten wählen Okay, als Nächstes erstelle ich ein Formularelement. Weisen wir ihm das Formular für die Anmeldeseite für die Klasse zu. In den Formularelementen müssen wir Gruppen und eine Schaltfläche eingeben. Öffnen wir also das div-Tag mit der Klasse input-group. Die Eingabegruppe wird aus einem Optionsfeld und einigen Textelementen wie Überschrift und Absatz bestehen . Öffnen wir das Eingabe-Tag, eine Art Radio. Außerdem müssen wir das Attribut name mit dem Abwertungsfeld verwenden . Und außerdem verwende ich ein anderes Attribut namens checked. Das bedeutet, dass das erste Optionsfeld standardmäßig aktiviert ist. Okay, als Nächstes öffne ich das Div-Tag mit einer Klassenoption. Es wird eine Überschrift und einen Absatz enthalten. Das ist Open H3, Heading-Tag mit dem Inhalt, persönliches Konto Dann öffne ich ein p-Tag mit etwas Blindtext. Lassen Sie uns weitermachen und diesen Code duplizieren. Einmalig. Ich werde das markierte Attribut entfernen und auch das persönliche Konto in ein Geschäftskonto ändern . Schließlich werde ich eine Schaltfläche erstellen, die den blauen Schaltflächen ähnelt , die wir auf der Titelseite erstellt haben. Öffnen wir das Button-Tag mit einem blauen Buchstaben der Klasse. Und dann als Inhalt hier, weiter. Okay, also bevor wir anfangen, die Anmeldeseite zu gestalten, werde ich die Anmeldeseite ausblenden Lassen Sie uns es zuweisen, für eine Weile nichts anzeigen Okay, jetzt sind wir bereit die Anmeldeseite zu starten Lassen Sie uns neue Kommentare in die CSS-Datei einfügen. Es ist die Anmeldeseite. Und von der Anmeldeseite. Wählen Sie dann die Wrapper-Div-Elemente aus. Ich setze die Breite auf 100%. Was die Höhe angeht, machen wir sie zu 100% aus dem Viewport. Eigentlich denke ich, es wäre besser, wenn wir diese Bilder kleiner machen würden, weil sie im Moment zu groß sind. Also lasst uns Bilder auswählen und deren Breite 18 ausleihen. Okay, jetzt ist es viel besser. Kehren wir zu den rasanten Entwicklungen zurück. Als Nächstes ändere ich den Hintergrund der Seite. Schauen wir uns das fertige Projekt an. Wie Sie sehen können, hat die Oberseite einen anderen Hintergrund. Wir werden diese Art von Hintergrund mit einer linearen Gradientenfunktion erstellen . Definieren wir also den Hintergrund mit dem linearen Farbverlauf. Die Richtung des Übergangs wird von oben nach unten sein. Was die Farben angeht, werde ich RGBA-Werte verwenden. Der erste wird 1123 mal sein. Und auch hier Opazität 0,9. Der zweite RGBA-Wert wird die weiße Farbe sein , die Opazität, 0,8 Ich möchte also, dass die weiße Farbe erst nach zehn Prozent des Übergangs erscheint . Also müssen wir zehn Prozent interviewen. Wie Sie sehen können, haben wir hier eine dunklere Hintergrundfarbe für die Oberseite. Ordnung, als Nächstes kümmern wir uns um das Layout. Dafür. Ich werde Flexbox wieder benutzen. Stellen wir das Display auf Flex ein. Dann richte ich die Flex-Elemente vertikal in der Spalte aus, sodass wir die Richtung ändern müssen. Stellen wir es auf Spalte ein und richten die Elemente auch in der Mitte aus. Ordnung, jetzt kümmere ich mich um die obere Seite der Seite Wählen wir die Entwicklung aus. Zunächst definiere ich Breite und Höhe. Lassen Sie uns die Breite auf 120 RAM setzen. Was die Höhe angeht, lassen Sie uns zehn Rampen daraus machen. Außerdem werde ich Flexbox wieder verwenden. Stellen wir das Display auf Flex ein. Als Nächstes erstelle ich einen Abstand zwischen den Flex-Elementen, indem ich den Inhaltsabstand zwischen den Elementen ausrichte und die Elemente auch vertikal in der Mitte ausrichte. Und zum Schluss lassen Sie uns unten etwas Platz schaffen, indem wir die Rampe am Rand unter fünf verwenden. In Ordnung, die Elemente sind also gut angeordnet. Eigentlich sieht das Logo gut aus. Wir müssen nur eine Sache ändern. Wir müssen die Farbe des zweiten P-Buchstabens ändern. Wählen wir also das Logo der Anmeldeseite aus, gefolgt von der P2-Klasse Lassen Sie uns die Farbe auf E9 setzen. E9, E9. Okay, lassen Sie uns sehen, was das Logo angeht, lassen Sie uns weitermachen und die Schaltfläche anpassen Wählen wir es aus. Zuerst. Definieren wir diese Breite, machen wir acht Rampen daraus. Dann werde ich mithilfe von Padding etwas Platz innerhalb der Schaltfläche schaffen mithilfe von Padding etwas Platz innerhalb der Schaltfläche Machen wir 0,7 Rem auf allen vier Seiten. Dann ändere ich die Hintergrundfarbe. Machen wir es transparent. Erstellen Sie den Rand und machen Sie ihn zu 0,1 Rm durchgehend. Und als Farbe verwenden wir Weiß. Außerdem werde ich die Schaltfläche mit dem Randradius und der Rampe für den Wert drei abgerundet machen Randradius und der Rampe für den Wert drei Okay, danach kümmern wir uns um den Text. Lassen Sie uns die Schriftgröße auf 1,3 RAM setzen. Dann mache ich das Telefon mutiger. Lassen Sie uns die Schriftstärke auf 600 setzen und die Farbe des Textes so ändern, dass er weiß wird Und zum Schluss ändere ich den Typ des gröberen, um es deutlich zu machen In Ordnung, also endlich, mit der Oberseite, sind wir fertig. Lassen Sie uns weitermachen und uns um den Inhalt kümmern. Wählen Sie die Entwicklungen aus. Und lassen Sie uns zuerst die Breite definieren, 120 Runs daraus machen. Als Nächstes richte ich die Elemente erneut mit Flexbox aus, setze Display auf Flex und schaffe dann mithilfe von Justify Content etwas Abstand zwischen den Flex-Elementen Abstand dazwischen, okay, also beide Seiten, ich meine, linke und rechte Seite werden nebeneinander platziert Und jetzt müssen wir sie anpassen. Fangen wir mit der linken Seite an. Wählen Sie die Wrapper-Entwicklung aus. Die linke Seite nimmt also 60% des Inhalts ein. Setzen wir also die Breite auf 60%. Dann erstelle ich auf der rechten Seite einen Rahmen mit einem Wert von 0,1 RAM Als Farbe verwenden wir B1, B1, B1. Und außerdem werde ich etwas Platz innerhalb der Elemente schaffen . Stellen wir die Polsterung oben, rechts und unten auf drei Rem oben, rechts und unten auf Was die linke Seite angeht, machen wir sie auf Null. Okay, danach kümmere ich mich um die Bilder. Ich werde einen Wrapper der Bilder auswählen. Lassen Sie uns Flexbox wieder verwenden. Und dann schaffen Sie unten etwas Platz , indem Sie die Rampe am Rand nach unten fünf verwenden. In Ordnung, als Nächstes werde ich das Bild selbst anpassen. Lassen Sie uns sie zunächst mit einem Randradius von 50 Prozent abgerundet machen mit einem Randradius von 50 Prozent Erstellen Sie auch eine Grenze. Geben wir Ihnen 1,5 Gramm Feststoff ein. Und als Farbe verwenden wir C, C, C und schaffen dann etwas Platz auf der rechten Seite fünf Rem verwenden Okay, die Bilder sehen also gut aus. Lassen Sie uns weitermachen und mit den Überschriftenelementen beginnen. Wählen wir es aus. Zuerst. Ich werde die Schriftgröße erhöhen. Machen wir es für RAM. Machen Sie dann die Schrift heller und stellen Sie die Schrift auf 300 ein. Ebenfalls. Ändere die Farbe, mach 333 draus. Schließlich werde ich die Zeilenhöhe der Überschrift verringern . Machen wir 1.1 daraus. In Ordnung, das war's also mit der linken Seite. Lassen Sie uns weitermachen und den richtigen anpassen. Wählen wir die Entwicklung aus. Tatsächlich wird es 40% der Breite des Inhalts einnehmen. Dann definiere ich die Polsterung. Setzen wir es oben auf drei Rem. Dann Null auf der rechten Seite. Was die untere und linke Seite betrifft, lassen Sie uns sie als 3D-Rampe erstellen, dann die Farbe ändern und es zu 555 machen. Eigentlich sehe ich hier, dass die Überschriften und Eingabegruppen nebeneinander platziert sind Sie sollten vertikal übereinander ausgerichtet sein. Es könnte also sein, dass wir einen Fehler in der HTML-Datei haben. Lass es uns überprüfen. Wie Sie sehen, befindet sich das Formular außerhalb des Wrappers. Also müssen wir das beheben. Verschieben wir es in den Rapper. Okay, als Nächstes fange ich an. Die Überschriften werden insgesamt zwei verschiedene Überschriften haben. Wählen wir das erste aus, nämlich die H3-Überschriftenelemente Lassen Sie uns die Schriftgröße auf 2,4 RAM setzen. Dann mache die Schriftstärke 300. Dann werde ich diesen Code duplizieren. Lassen Sie uns H3 und H4 ändern. Auch als Schriftgröße werde ich 1,6 RAM verwenden. Was die Schriftstärke angeht, lassen Sie uns 500 daraus machen. Okay, die Überschriften sind also angepasst. Wir haben hier ein kleines Problem, eigentlich nicht das Problem. Die Überschriften in den Eingabegruppen sind H3-Tags und ihre Größe wurde ebenfalls geändert. Lassen Sie uns das beheben. Ich wähle Option H drei und setze dann die Schriftgröße auf 1,7. Lauf. Was die Schriftstärke angeht, werde ich sie auf 600 setzen. In Ordnung, jetzt ist das Problem behoben. Lassen Sie uns weitermachen und die Eingabegruppe auswählen. Ich werde die Elemente nebeneinander platzieren. Verwenden wir also Display Flex. Dann. Ich werde etwas Platz um den Wrapper herum schaffen , indem ich Margin mit dem Wert 1,5 round verwende Als Nächstes passen wir die Absätze an. Wählen Sie Option P. Ich werde die Schriftgröße auf 1,5 g einstellen. In Ordnung, also müssen wir uns endlich um die Optionsfelder kümmern Wählen wir sie mithilfe des Typattributs aus. Lassen Sie uns zunächst ihre Größe erhöhen. Ich setze die Breite auf 30%. Was die Höhe angeht, machen wir es zum Laufen. Jetzt sind sie also größer, aber wir müssen ihre Position leicht anpassen. Machen wir das mit Margin. Ich setze die Marge oben auf 0,5 Rem und auf ein Rem auf der rechten Seite. Unten wird es Null sein. Was die linke Seite angeht, machen wir eine Rampe von -1,5 In Ordnung, wie Sie sehen können, sind wir endlich fertig Die Anmeldeseite wird erstellt und angepasst. Und eigentlich ist das gesamte Projekt gebaut. Jetzt müssen wir es auf verschiedene Bildschirmgrößen ansprechen. Bevor wir gehen, möchte ich ein paar Dinge erledigen. Standardmäßig müssen wir die Titelseite anzeigen. Und sobald wir auf die Schaltflächen „ Anmelden“ und „Registrieren“ geklickt haben, müssen wir zu den richtigen Seiten navigieren. Sobald wir auf die Logos von Personen klicken, müssen wir auch zur Titelseite gehen. Dafür. Ich werde ein bisschen JavaScript verwenden. Vorher werde ich den Anmelde- und Anmeldeschaltflächen einige gängige Klassen zuweisen , die im JavaScript verwendet werden , um die Elemente gleichzeitig auszuwählen. Alle drei Logos haben das gemeinsame Klassenlogo, sodass wir sie nicht anfassen müssen. Lassen Sie uns den Anmelde - und Anmeldeschaltflächen zuweisen. In Napa die folgenden Klassen. Wir benötigen eine Anmeldung für die Anmeldeschaltfläche und eine Registrierung für die Anmeldeschaltfläche. Als nächstes haben wir unten im fünften Abschnitt eine Schaltfläche. Lass es uns zuweisen, melde dich an. Also eigentlich ist es das mit der Titelseite. Auf der Anmeldeseite haben wir eine Anmeldeschaltfläche. der Anmeldeseite haben wir eine Schaltfläche zum Einloggen In Ordnung, der HTML-Code ist fertig. Bevor wir das verwenden, um das JavaScript zu schreiben, werde ich sowohl die Anmelde- als auch die Anmeldeseite ausblenden. Eigentlich ist die Anmeldeseite bereits versteckt. Lassen Sie uns der Anmeldeseite zuweisen , keine anzuzeigen. Was die Titelseite angeht, lassen Sie uns keine anzeigen. Ordnung, ich denke, wir sind bereit In Ordnung, ich denke, wir sind bereit, mit dem Schreiben von JavaScript zu beginnen Ich werde neue Kommentare einfügen, Seiten von Seiten. Als Nächstes wähle ich alle Logos aus. Verwenden Sie here, query, selector, all method und geben Sie dann hier das Klassennamen-Logo Jetzt müssen wir uns die Liste ansehen, die von der Methode all des Query Selectors zurückgegeben wurde Und wir müssen zu jedem Logo einen solchen Event-Listener hinzufügen. Klicken Sie auf Ereignisse. Verwenden wir eine der Array-Hilfsmethoden namens for-each Es wird uns helfen, die Liste durchzugehen. Die forEach-Methode benötigt also ein Argument, das ist die Callback-Funktion, die für jedes Listenelement ausgeführt wird Die Callback-Funktion selbst benötigt ein Argument und es ist das aktuelle Element, die Liste, während der Schleife Jetzt müssen wir dem Logo einen Event-Listener mit Klick-Events und einer Pfeilfunktion anhängen , der auf der Clique ausgeführt wird Bei Klick müssen wir also die Titelseite und die Höhe, die Anmelde- und Anmeldeseiten anzeigen die Anmelde- und Anmeldeseiten Wählen wir die Titelseite mit der Methode querySelector aus. Also brauchen wir dann die Style-Eigenschaft gefolgt von der Anzeige. Es sollte gleich Block sein. Lassen Sie uns diese Codezeile zweimal duplizieren. Die zweite Seite wird Login sein. Wir müssen es verstecken. Display wird es also nicht geben. Was die dritte Seite betrifft, so heißt es Anmelden. Und wieder müssen wir keine anzeigen. Okay, als nächstes benötigen wir dasselbe für die Anmelde- und Anmeldeschaltflächen. Lassen Sie uns diesen Code zweimal duplizieren und dann einige Änderungen vornehmen. Also brauchen wir hier Klassenlogin. Also werde ich hier das Argument ändern. Machen wir es zum Einloggen btn. Im Falle von Anmeldeschaltflächen müssen wir also die Vorder - und Anmeldeseiten ausblenden. Asphalt die Anmeldeseite. Wir müssen es sichtbar machen. Also brauchen wir hier einen Block. Okay? Was das Zeichen der Schaltflächen angeht, ändern wir hier den Klassennamen. Ebenfalls. Wir müssen uns hier anmelden btn Im Falle des Sinus der Schaltflächen müssen wir also die Titelseite und die Anmeldeseite ausblenden Was die Anmeldeseite betrifft, müssen Sie sie flexibel gestalten, da sie standardmäßig über einen Display-Flex verfügt Okay, lassen Sie uns weitermachen und testen ob alles gut funktioniert. Wie Sie sehen können, funktioniert alles einwandfrei. Das Letzte, was ich tun möchte, ist, den Cursorzeiger zu setzen, sobald wir den Mauszeiger über die Logos bewegen Ordnen wir ihm also einen gröberen Punkt zu . In Ordnung, also endlich sind wir mit dem Projekt fertig. Das einzige, was wir tun müssen, ist, dass es auf verschiedene Bildschirmgrößen reagiert. Also lass uns weitermachen. 98. Projekt 10 - Projekt reaktionsfähig machen - Teil 1: In Ordnung, wir haben den Bau unserer Projekte abgeschlossen. Ich meine, all diese Abschnitte und Seiten sind erstellt. Das einzige, was wir tun müssen, ist, das Projekt an verschiedene Bildschirmgrößen anzupassen. Derzeit ist das Projekt für eine extra große Bildschirmgröße konzipiert . Ich bin dabei. Dies stimmt mit einer Breite und Höhe von 1920 Pixeln überein. Wir verwenden einen Desktop Force-Ansatz. Lassen Sie uns die Seite überprüfen und in den Responsive-Modus wechseln. Wie Sie sehen können, sind Breite und Höhe auf 90, 20 Pixel und 1080 Pixel festgelegt . Jetzt müssen wir die Bruchpunkte finden , an denen wir einige Änderungen vornehmen müssen. Eigentlich werde ich nicht anfangen, die Breakpoints für Sie zu finden , weil ich sie bereits vorbereitet habe, also werde ich keine Zeit damit verschwenden Der erste Breakpoint wird bei 1.500 Stück liegen. Denn wie Sie sehen, ist das Drop-down-Menü durcheinander Und außerdem müssen wir den dritten Abschnitt leicht anpassen. Lassen Sie uns also weitermachen und neue Kommentare und die CSS-Datei für den Responsive Code einfügen . Dann erstelle ich eine neue CSS-Medienabfrage. Wir müssen hier die maximale Breite angeben. Stellen wir es auf 1.500 Pixel ein. Also wie gesagt, wir müssen uns um die Drop-Downs kümmern. Wählen wir also das Drop-down-Menü und verringern Sie den Abstand auf der linken und rechten Seite Machen wir 25 Runs draus. Danach wähle ich das Dropdown-Element aus. Definieren wir die Marge. Ich setze es auf zwei Rem oben und unten und sechs Rem auf der linken und rechten Seite. Okay, schauen wir uns die Dropdownmenüs an. Sieh gut aus. Gehen wir zum dritten Abschnitt über. Wählen wir den Wrapper mit den Klassenmerkmalen aus. Ich werde die Breite ändern. Machen wir es zu 80%. Und wählen Sie dann die Funktion selbst aus. Lassen Sie uns die Polsterung ändern. Ich mache oben und unten Null und dann drei Rem links und rechts. In Ordnung, also der dritte Abschnitt, er sieht gut aus. Und eigentlich sind alle anderen Abschnitte gut. Schauen wir uns die Anmelde - und Anmeldeseiten an. Wie Sie sehen, müssen sie sich vorerst nicht berühren. Okay, schauen wir uns diesen Breakpoint an. Lass uns weitermachen und uns um den nächsten kümmern. Der nächste Breakpoint wird also 1.400 Pixel sein. Lassen Sie uns eine neue CSS-Medienabfrage mit einer maximalen Breite von 1.400 Pixeln Also werde ich zunächst die Schriftgröße des HTML-Elements verringern. Setzen wir es auf 55%. Dadurch werden die Elemente relativ kleiner. Wie Sie sehen, haben wir viel bessere Ergebnisse erzielt. Dennoch müssen wir einige Änderungen vornehmen. Ich werde die Breite der Navbar ändern. Machen wir hundert Runs draus. Danach müssen wir meiner Meinung nach die Höhe des ersten Abschnitts etwas erhöhen . Wählen wir es also und setzen die Höhe auf 70 Viewport-Höhe Als Nächstes werde ich die Breite des Banner-Absatzes erhöhen . Wählen wir es aus und setzen seine Breite auf 70%. Also ich finde das mit dem ersten Abschnitt albern . Lassen Sie uns weitermachen und den Abschnitt Dienste anpassen. Wählen wir einen schnellen Entwicklungs- und Definitionsbereich aus und machen ihn zu 90% Der Bereich Services sieht also gut aus. Als nächstes haben wir den Feature-Bereich. Eigentlich sieht es gut aus, aber ich denke, es wäre besser, wenn wir die Breite des Wrappers erhöhen Wählen wir also Funktionen aus und setzen die Breite auf 90%. Okay, fahren wir mit dem vierten Abschnitt fort. Ich werde die Breite des Inhalts ändern. Wählen wir den Abschnitt für den Inhalt aus und setzen dessen Breite auf 80%. Außerdem werde ich die Größe des Bildes verringern. Wählen wir die Wrapper-Entwicklung aus. Definieren Sie seine Breite als 40 Prozent. Und ändern Sie auch die Menge an Platz auf der rechten Seite, indem Sie den rechten Rand verwenden, mit einem Wert von sechs rann. In Ordnung, das war's mit dem vierten Abschnitt. Und eigentlich sind wir mit der Titelseite fertig. Lass uns weitermachen und andere Seiten überprüfen. Wird die Anmeldeseite gut aussehen. Was die Anmeldeseite betrifft, so sind einige Änderungen erforderlich. Ich werde die Hintergrundfarbe oben vergrößern . Wählen wir also die Anmeldeseite aus. Dann. Um zu vermeiden, dass die lineare Gradientenfunktion geschrieben wird, kopiere ich sie von oben. Fügen wir es ein und ändern den Prozentwert, den wir hier benötigen, 12%. In Ordnung, ich denke, mit diesem Breakpoint sind wir fertig. Alle drei Seiten sehen gut aus, bis die Bildschirmgröße 1.200 Pixel erreicht, da die Anmeldeseite einige Änderungen benötigt Für den Rest der beiden Seiten. Wir müssen sie auf 1.200 Pixeln nicht berühren. Lassen Sie uns also eine neue CSS-Medienabfrage erstellen und eine neue CSS-Medienabfrage die maximale Breite als 1.200 Pixel angeben Am Breakpoint werde ich das Layout der Anmeldeseite ändern Lassen Sie uns zunächst die Breite der Oberseite verringern. Ich werde 90 Rennen drauflegen. Weiter. Ich werde die Ausrichtung des Inhalts ändern. Im Moment werden sie nebeneinander platziert, und ich werde sie vertikal übereinander legen vertikal übereinander Wählen wir also den Inhalt der Anmeldeseite aus. Definieren wir zunächst seine Breite machen ihn zu Nacht-Ram. Dann müssen wir die Richtung des Flux-Layouts ändern. Lass uns eine Kolumne machen. Und schließlich richten Sie die Elemente in der Mitte aus. Ordnung, wie Sie sehen können, wurde das Layout geändert, aber der Inhalt selbst sieht nicht gut aus Also kümmern wir uns darum. Ich wähle den linken Teil aus. Wir benötigen noch den Inhalt der Anmeldeseite. Lassen Sie uns die Breite auf 100% setzen. Und ich werde auch die Grenze auf der rechten Seite loswerden . Setzen wir Blau-Weiß auf Null. Okay, als Nächstes platziere ich dafür die Elemente in der Mitte. Lassen Sie uns Flexbox verwenden. Wenn Sie Flex anzeigen. Dann müssen wir die Richtung des Layouts ändern. Machen wir daraus eine Spalte und platzieren dann die Flex-Elemente in der Mitte. Wir müssen Elemente mittig ausrichten und Text mittig ausrichten. In Ordnung, jetzt haben wir viel bessere Ergebnisse. Als Nächstes erstelle ich den unteren Rand. Verwenden wir border bottom mit den Werten 0.1 RAM solid. Und als Farbe verwenden wir B1, B1, B1. Okay, das war's mit der linken Seite. Gehen wir zum EQ auf der rechten Seite über. Wähle den Inhalt der Anmeldeseite aus, oder? Ich definiere es mit, lass es uns zu 100% machen und auch die Stärke der Polsterung ändern Ich mache drei Rems auf allen vier Seiten. Richtig? Danach kümmere ich mich um die Radiobuttons. Ich werde die Kernbreite verringern und auch ihre Positionen ändern. Wählen wir Eingaben mit dem Typattribut aus. Es wird ein Radio sein. Lassen Sie uns mit 210 Prozent beginnen. Dann ändern Sie den Rand leicht. Wir brauchen 0,5 rem oben als Null auf der rechten Seite, unten wird auch Null sein. Was die linke Seite betrifft. Ich schaffe es minus drei Rennen. In Ordnung, also werde ich mich endlich um den Knopf kümmern. Ich möchte seine Breite um 200 Prozent erhöhen. Wie Sie wissen, hat die Schaltfläche tatsächlich einen gemeinsamen Klassennamen, blue btn. Wenn wir dieses Element also nur mit dem Klassennamen blue btn auswählen , wirken wir uns auf alle blauen Schaltflächen Um diese spezielle Schaltfläche auszuwählen, benötigen wir zunächst das übergeordnete Element, den Inhalt der Anmeldeseite, oder? Gefolgt von der Klasse Blueback t n. Lassen Sie uns mit 200 Prozent beginnen Und ändern Sie auch den Rand oben und unten. Ich setze es auf drei Durchläufe und dann auf Null auf der linken und rechten Seite. In Ordnung, also alles sieht gut aus. Und mit diesem Breakpoint sind wir fertig. Lass uns weitermachen und den nächsten finden. Der nächste Breakpoint wird bei 1.100 Pizzen liegen. Denn wie Sie sehen, sind die Drop-down-Menüs durcheinander Eigentlich müssen wir das Problem am Breakpoint nur beheben, weil die restlichen Abschnittsseiten gut aussehen Lassen Sie uns also weitermachen und eine neue CSS-Medienabfrage erstellen. Mit ihnen, maximale Breite, 1.100 Pixel. Wählen Sie dann das Drop-down-Element aus und ändern Sie den Rand. Ich werde es oben und unten auf zwei Rem und 3,4 Rem auf der linken und rechten Seite einstellen . In Ordnung, das war's also. Lassen Sie uns weitermachen und das Projekt auf den nächsten Breakpoint reagieren 99. Projekt 10 - Projekt reaktionsfähig machen - Teil 2: In Ordnung, wir haben unser Projekt einigen verschiedenen Bruchpunkten responsiv Der letzte hatte 1.100 Pixel. Lass uns weitermachen und weitermachen. Der nächste Breakpoint, an dem wir einige Änderungen vornehmen müssen wird tausend Pixel sein Dieser Breakpoint wird komplex sein , da wir einige wichtige Änderungen vornehmen müssen Am Breakpoint. Wir werden das Navigationsmenü ändern. Im Moment befinden sich die Navigationselemente oben auf der Seite. Wenn wir den Mauszeiger über sie bewegen, die Dropdownmenüs angezeigt Nach tausend Pixeln haben wir kein solches Menü mehr, sondern platzieren und verstecken es auf der linken Seite. Außerdem werden wir ein Menüsymbol erstellen. Und sobald wir auf das Menüsymbol klicken, wird das Menü von der linken Seite angezeigt. Außerdem werden wir auch Menüs mit stark herunterklappbaren Menüs erstellen. Und sie werden angezeigt, sobald wir auf die richtigen Navigationselemente klicken. Das werden wir also auf tausend Pixeln machen. Lassen Sie uns weitermachen und eine neue CSS-Medienabfrage erstellen eine neue CSS-Medienabfrage und die maximale Breite als tausend Pixel angeben Das erste, was ich tun werde, ist die Schriftgröße des HTML-Elements zu verringern. Im Moment sind es 55 Prozent, und ich werde es auf 50 Prozent reduzieren. Also wurden die Elemente kleiner und jetzt haben wir ein besseres Ergebnis. Als Nächstes werde ich den Roman zumindest für eine Weile verstecken , weil wir das Menüsymbol erstellen und auch die Ausrichtung oben auf der Webseite ändern müssen die Ausrichtung oben auf der Webseite ändern Lassen Sie uns zwei Romanautoren zuweisen, keinen anzuzeigen. Okay, die Navigationselemente sind also versteckt. Wir haben hier nur das Logo und die Knöpfe. Lassen Sie uns weitermachen und ein Menüsymbol im HTML-Dokument erstellen . Ich werde das Div-Tag mit dem Klassenmenü öffnen. Dann brauchen wir noch ein Div mit dem Klassenmenü-Icon. Es wird drei Zeilen enthalten. Öffnen wir also das div-Tag mit einer Klasse dieser Zeile und Zeile eins. Der erste wird ein gebräuchlicher Klassenname sein. Was den zweiten betrifft , werden wir ihn für einzelne Stile verwenden . Lassen Sie uns diese Codezeile zweimal duplizieren und die Klassennamen ändern. Außerdem werde ich Span Tag für dich öffnen , weil wir ein Belohnungsmenü brauchen. Das Menüsymbol ist erstellt und jetzt müssen wir es anpassen. Lassen Sie uns zunächst etwas Platz auf der linken und rechten Seite der Nagelleiste schaffen . Wählen wir es aus. Definieren Sie die Breite, machen Sie sie zu 100% und schaffen Sie dann mithilfe von Padding Platz Ich setze es auf 0,5, anstatt das Menüsymbol auszuwählen. Definieren Sie seine Breite und Höhe. Ich werde mit 211 Run beginnen. Was die Höhe angeht, so wird es für RAM sein. Lassen Sie uns außerdem die Hintergrundfarbe definieren. Es wird eine temporäre Hintergrundfarbe sein. Verwenden wir hier e. Danach runden wir das Symbol ab, indem wir den Randradius mit dem Wert drei RAM verwenden Randradius mit dem Wert drei Dann ändere die Grenze. Sie sehen Ihr 0,1-RAM-Laufwerk durchgehend und die weiße Farbe. Dann werde ich auch die Art des Kurses ändern, damit er aussagekräftig wird. Ordnung, wie Sie wissen, besteht das Menüsymbol aus zwei Teilen Wir haben die Linien und wir spannen das Element. Sie sollten nebeneinander platziert werden. Außerdem sollten sie vertikal in der Mitte ausgerichtet sein. Dafür werde ich wie immer Flexbox verwenden Stellen wir das Display auf Flex ein. Dann müssen wir die Elemente in der Mitte ausrichten und den Inhaltsbereich gleichmäßig ausrichten. Moment ist der erste Teil also nicht sichtbar, aber sobald wir ihn angezeigt haben, wird er auf der linken Seite platziert. Lassen Sie uns weitermachen und die Linien anzeigen. Wählen Sie sie mithilfe der Zeile für den gemeinsamen Klassennamen aus. Definieren Sie zunächst seine Breite. Ich werde es ins RAM schaffen. Dann wird die Höhe 0,1 RAM betragen. Und ändere auch die Hintergrundfarbe. Mach es auch. Hier haben wir also die Linien, aber im Moment sind sie übereinander gelegt. Wir müssen sie trennen. Also lass uns weitermachen und das Menüsymbol auswählen und seine Höhe definieren. Ich werde 1,5 RAM draus machen. Dann benutze erneut Flexbox. Wir brauchen Display Flex. Dann müssen wir die Richtung ändern da die Zeilen vertikal in einer Spalte platziert werden sollen Schließlich müssen wir den Inhaltsabstand zwischen den Zeilen begründen, um Platz zwischen den Zeilen zu schaffen . In Ordnung, jetzt sehen die Linien gut aus. Kümmern wir uns um dieses Spanelement. Wir werden die Schriftgröße erhöhen. Machen wir 1,8 Ran daraus. Okay, eigentlich sind wir mit dem Menüsymbol fertig. Ich möchte nur diese temporären Farben ändern. Lassen Sie uns die Hintergrundfarbe aus dem Menü entfernen. Ändern Sie dann die Farben für die Linie und das Span-Element. Wir müssen Ihre Hintergrundfarbe für die Farbe dieses Panels weiß sein , und dann wird es auch weiß sein. Okay, endlich ist das Menüsymbol fertig und jetzt müssen wir anfangen, an der Navigation zu arbeiten Schauen wir uns das fertige Projekt an. Das erste, was ich tun werde, ist, die Navigationselemente so aussehen zu lassen. Ich meine, wir werden die Elemente anordnen, insbesondere in einer Spalte. Wir werden den Hintergrund ändern und auch das Menüsymbol auf die rechte Seite verschieben. Lassen Sie uns also zunächst das Symbol mit der Funktion transform, translate x verschieben . Fügen wir 16 Rampen ein. Das Symbol wird also verschoben. Als Nächstes zeige ich die Navigation zurück, jedoch ohne die Dropdownmenüs. Also lassen Sie uns von hier aus Display None loswerden. Was die Drop-Downs angeht, werde ich sie mithilfe von display none Die Navigationselemente sind also machbar, aber ohne Dropdowns Moment ist das Layout der Navbar völlig durcheinander, aber darum werden wir uns in einer Minute kümmern Jetzt ist es an der Zeit, die Navigation auf die linke Seite der Seite zu verschieben . Ich setze seine Position auf „Fest“. Definieren Sie dann die Eigenschaften Top und Black. Ich werde beide auf Null setzen. Definieren Sie auch die Breite und Höhe. Die Breite wird 20 RAM betragen. Was die Höhe angeht, werde ich sie zu 100% aus dem Viewport machen 100% aus dem Viewport Das ist, das. Lassen Sie uns Ihnen den Hintergrund erläutern. Ich werde die lineare Gradientenfunktion verwenden. Die Richtung des Farbübergangs wird von oben nach unten sein. Und dann füge ich hier drei verschiedene Farben ein. Der erste wird 032181 sein , wir werden 094399 haben Das ist für die dritte Farbe. Es wird 04207 sein. Siehst du? Die Navigation wird auf die linke Seite verschoben, aber die Navigationselemente sind nicht richtig platziert. Lassen Sie uns das beheben. Ich werde die Richtung des Flex-Layouts ändern. Machen wir eine Kolumne daraus. Und schafft auch oben durch Polsterung etwas Platz . Machen wir es zum Laufen. Jetzt haben wir ein besseres Ergebnis. Wie Sie sehen können, deckt das Banner die Navigation ein wenig ab. Das spricht dafür, dass ich mit der Z-Indexeigenschaft den Index auf 200 setze. In Ordnung, das Problem ist also behoben. Kümmern wir uns um die Navigationselemente. Ich wähle den Eintrag in der Navigationsliste aus. Lassen Sie uns die Breite auf 100% setzen. Was die Höhe angeht, werde ich sie automatisch machen. Schaffen Sie auch etwas Platz, indem Sie Polster verwenden. Lassen Sie uns 0.1 run zuweisen. Außerdem werde ich oben und unten mithilfe von Rändern Platz schaffen . Setzen wir es auf Punkt 4.0. Ordnung, als Nächstes werde ich die Schriftgröße der Link-Elemente verringern Wählen wir den Link zur Navigationsliste und setzen die Schriftgröße auf einen Punkt. Zu vermieten. Danach werde ich die Größe der Pfeile verringern und sie auch drehen. Wählen wir das Element der Navigationsliste aus, gefolgt vom I-Element. Definieren wir die Schriftgröße und legen Sie einen Punkt fest, um zu rammen. Was die Drehung angeht, verwende ich Transformieren mit der Rotationsfunktion als Wert, den ich hier einfüge: -90 Grad. In Ordnung, die Navigation sieht also gut aus. Wenn wir den Mauszeiger über die Elemente bewegen, erhalten sie tatsächlich den unteren Rand Und auch der Roman wird die Hintergrundfarbe ändern. Das sind die Standardeffekte, die wir für die extra große Bildschirmgröße definiert haben. Im Moment werde ich den Bordereffekt loswerden. Was die Navbar angeht, werden wir uns etwas später darum kümmern. Wählen wir also die Navigationsleiste aus, führen Sie das Element mit der Maus und setzen Sie unten den Rahmen, um es zu wissen In Ordnung, diese Silbe, am wenigsten. Vorerst werde ich mich als Nächstes um die Drop-down-Menüs kümmern . Zuerst. Schauen wir uns das fertige Projekt an und zeigen das Drop-down-Menü an. Wie Sie sehen können, sieht das Drop-down-Menü etwas anders aus als das Standardmenü. Wir haben hier einen zusätzlichen Artikel wie die Überschrift. Und auch die zweiten Drop-down-Links sind nicht mehr sichtbar. Wir müssen also einige Änderungen am HTML-Dokument vornehmen. Zuallererst möchte ich einzelne Klassennamen zu den Drop-down-Listen hinzufügen einzelne Klassennamen zu , weil wir sie stylen müssen und wir diese Klassen auch für JavaScript benötigen. Das erste Element wird also NEF-Drop-down-Personal sein. Was den zweiten betrifft, wird es genug Drop-down-Geschäft sein. Danach werde ich die Drop-Downs anpassen. Ich denke, es wäre besser, wenn wir eines der Drop-Downs ausblenden, macht unsere Arbeit im Prozess komfortabler Im Moment haben wir hier ein nettes Drop-down-Menü ohne Anzeige. Lassen Sie uns den Klassennamen ändern und dafür sorgen, dass er nicht gelöscht wird. Sagen wir Geschäft. Moment hat sich hier nichts geändert, da das Drop-down-Menü standardmäßig so versteckt ist. Und sie erscheinen nur beim Schweben. Ich werde das erste Drop-down-Menü so anzeigen und anpassen das erste Drop-down-Menü , wie wir es im fertigen Projekt haben. Tatsächlich benötigen wir einige ähnliche Stile , die wir für die Navigationsliste selbst verwendet haben. Also werde ich einen weiteren Klassennamen hinzufügen. Jetzt, Drop-down-Menü „Persönlich“. Wählen Sie es dann separat und weisen Sie ihm Opazität eins und Sichtbarkeit sichtbar Also hier haben wir das Drop-down-Menü, aber es sieht nicht gut aus. Wir müssen es anpassen. Zuallererst werde ich die Polsterung verringern. Ich bin im Weltraum auf der linken Seite. Stellen wir das Padding also auf einen RAM ein. Danach werde ich die zweiten Link-Elemente ausblenden. Wählen wir also einen Naff Drop-down-Link zu einem zugewiesenen Link aus, um keinen anzuzeigen Okay, als Nächstes werde ich den Inhalt nach oben verschieben. Dafür. Ich ändere nur den Wert der Eigenschaft justify content. Stellen wir es auf Flex ein. Beginne. Ordnung, jetzt befindet sich das Drop-down-Menü oben in der Navigation Wie gesagt, wir werden den Drop-down-Menüs ein Element hinzufügen . Sie werden sozusagen Überschriften für sie sein. Fügen wir also das LI-Tag zur Liste hinzu. Ich werde den Klassen genug zuweisen, Dropdown, Item, Drop-down-Überschrift Fügen Sie dann Ihr Link-Tag ein, das das Font Awesome-Symbol mit der Klasse FAS, FA, Chevron nach unten enthält Awesome-Symbol mit der Klasse FAS, , gefolgt vom Textpersonal Kopieren wir die LI-Elemente und fügen sie auch für die zweite Dropdown-Liste Ich werde den Inhalt ändern. Machen wir es zum Geschäft. Ordnung, lassen Sie uns weitermachen und das neu bearbeitete Listenelement anpassen Zunächst wähle ich das Dropdown-Item Naff aus. Lassen Sie uns die Breite auf 100% setzen. Und definieren Sie auch die Marge. Ich werde auf allen vier Seiten außer der unteren einen Margin One Run machen . Der Tiefpunkt wird Null sein. Danach wähle ich den Link-Tag aus. Also müssen wir die Dropdownüberschrift a hören. Definieren wir die Schriftgröße, machen wir 1,6 RAM draus. Transformiere auch Text in Großbuchstaben. Ändere die Farbe, mach es weiß. Wie Sie sehen können, sieht das Link-Element gut aus. Wir müssen uns um die Ikone kümmern. Wählen wir die Dropdown-Überschrift, ich, definierte Schriftgröße, mache es 1,5 Gramm Außerdem müssen wir mit der Rotationsfunktion transformieren. Der Wert wird 90 Grad betragen. Und dann schaffen Sie etwas Platz auf der rechten Seite, indem Sie eine Rampe am Rand rechts verwenden Ordnung, also lassen Sie uns abschließend die Schriftgröße dieser Link-Elemente verringern Wählen wir genug aus , um einen Uptown Link zu erstellen, und stellen Sie die Schriftgröße auf 1,4 Runden Ordnung, das Drop-down-Menü ist jetzt für den ersten Dropdown-Stil angepasst jetzt für den ersten Dropdown-Stil Sie können jedoch davon ausgehen, dass beide Dropdowns bereit sind. Wir fügen einfach die Soul-Schauspielerin für das Dropdown hinzu. Und all diese Stile werden auch auf die zweite Liste angewendet. Okay, jetzt müssen wir dafür sorgen, dass das Geld funktioniert. Dafür. Wir werden JavaScript verwenden 100. Projekt 10 - Projekt reaktionsfähig machen - Teil 3: In Ordnung, jetzt ist es an der Zeit, dass die Navigation funktioniert. Zunächst werde ich die gesamte Navigation ausblenden. Ich meine den Romanautor mit den Drop-Downs. Außerdem werde ich die Stile auch auf das zweite Dropdown-Menü anwenden . Wie Sie wissen, wurde es bisher versteckt. Um die Navigation auszublenden, ändere ich die linke Position. Setzen wir es auf -20 RAM. Fügen wir hier auch den Klassennamen für das zweite Dropdown-Menü Ich meine Nafta Uptown Business. Dann mach dasselbe unten. Und entferne diesen Code auch von hier aus. Okay, die Navigation ist also versteckt. Wir müssen die Teile verschieben und ebenfalls an ihre Standardposition zurückkehren . Lassen Sie uns diese Codezeile von hier aus loswerden. In Ordnung, also alles sieht gut aus. Jetzt können wir der Schaltfläche ein Klickereignis hinzufügen und die Navigation anzeigen. Schauen wir uns das fertige Projekt noch einmal an. müssen also nicht nur die Navigation anzeigen, Wir müssen also nicht nur die Navigation anzeigen, sondern auch das Icon schnell nach rechts bewegen, seinen Stil ändern und es korrigieren. Wenn wir auf der Seite nach unten scrollen, sollte das Menüsymbol eine feste Position haben. Kümmern wir uns zunächst um den Button. Wir müssen einen Event-Listener mit einem Klick-Event daran anhängen einen Event-Listener mit einem Klick-Event Sobald wir darauf klicken, müssen wir ihm einige Stile zuweisen. Ich meine, wir müssen die Linien in x umwandeln. Außerdem werden wir die Farben ändern. Und außerdem müssen wir es auf die rechte Seite verschieben. Lassen Sie mich erklären, wie wir all diese Dinge handhaben werden. Wir werden die genannten CSS-Stile mit Hilfe einer neuen Klasse definieren . Wir werden diese Klasse zur Navigationsleiste hinzufügen. Und dann werden wir in CSS die Kombinationen der Selektoren verwenden , damit die neuen Stile auf die Elemente angewendet werden Gehen wir zur JavaScript-Datei. Ich werde neue Variablen erstellen. Rufen wir das erste Variablenmenüsymbol auf und wählen es mit der Abfrageauswahlmethode Geben wir hier das Klassennamenmenü an. Dann dupliziere ich diesen Code und ändere den Namen der Variablen. Es wird eine Navigationsleiste sein. Und ich werde auch den Klassennamen ändern, den wir hier brauchen. Nun gut, danach werde ich dem Menüsymbol und dem Event-Listener Mit Klick Ereignisse und mit einer Pfeilfunktion zuweisen Event-Listener Mit Klick Ereignisse und mit einer Pfeilfunktion Wie gesagt, wir müssen jetzt eine neue Klasse hinzufügen , um sie zu entfernen. Eigentlich müssen wir dem Roman eine neue Klasse hinzufügen , aber dann müssen wir sie beim nächsten Mal entfernen, denn wenn wir zuerst auf das Symbol klicken, wird die Navigation angezeigt Aber in der nächsten Liga sollten wir es verstecken. Wir müssen also eine Umschaltmethode verwenden. Im Allgemeinen fügt die Methode toggle dem Element eine Klasse hinzu, wenn es sie nicht hat, und entfernt es, wenn das Element sie hat Also müssen wir genügend Balken auswählen. Dann müssen wir eine der Eigenschaften namens Klassenliste verwenden , die alle Klassen enthält, die die Insel hat. Und dann brauchen wir die Umschaltmethode. Wir müssen hier den Klassennamen angeben und ihn Change nennen. In Ordnung, das war's also mit dem JavaScript. Gehen wir zurück zur CSS-Datei. Jetzt können wir die neuen Styles per Klick anwenden. Als erstes verschiebe ich das Menüsymbol auf die rechte Seite. Also müssen wir Change und dann das Menü auswählen. Und um das Symbol zu verschieben, verwende ich erneut Transformation mit der Funktion Translate X als Wert. Fügen wir hier 16 Rampen ein. Wie Sie sehen können, bewegt sich das Symbol in der ersten Clique nach rechts Beim nächsten Klick kehrt es an seinen Standardort zurück. Okay, bevor ich zur Navigation übergehe, möchte ich die Arbeit mit der Schaltfläche beenden. Wir müssen verschiedenen Stilen zuordnen und klicken. Wie gesagt, wir müssen das Problem beheben, sobald die Navigation angezeigt wird. Also brauchen wir hier eine feste Position. Außerdem müssen wir die Eigenschaften oben und links definieren. Die oberste Position wird es sein, so weit nach links zu rennen. Es werden sechs Rennen sein. Sobald wir auf das Symbol klicken, wird es repariert. Aber wir haben hier das Problem. Wie Sie sich erinnern, ist das Menüsymbol ein Flex-Element. Sobald es fixiert ist, springt es aus dem Flex-Container und das Logo, der zweite Flex-Artikel nimmt seinen Platz Das müssen wir beheben. Wir müssen die Position für das Logo manuell definieren. Wählen wir also das Navbar-Logo aus. Ich werde diese Position als absolut definieren. Dann brauchen wir eine Spitzenposition. Machen wir es für RAM. Und dann müssen wir es perfekt zentrieren. Also setze ich die linke Position auf 50 Prozent. Und wir müssen uns auch transformieren, mit den Werten -50 Prozent übersetzen Und wieder -50 Prozent. Okay, das Logo sieht also gut aus, aber wir haben das gleiche Problem wie jetzt bei Batson's Also lasst uns weitermachen und das beheben. Wählen wir die Schaltflächen in der Navigationsleiste und weisen ihnen am linken Rand eine Zeile zu In Ordnung, jetzt sieht alles gut aus. Kehren wir zum Menüsymbol zurück und passen es an. Wir müssen Linien in x umwandeln. Also müssen wir jede Zeile mit einer Klassenänderung auswählen. Lass uns weitermachen und mit dem ersten beginnen. Also wie Veränderung, gefolgt von der ersten Zeile. Also werde ich die erste Zeile drehen. Wir müssen hier transformieren, um den Wert 45 Grad drehen. Dann duplizieren wir diesen Code. Ändere den Klassennamen, den wir hier brauchen, Zeile drei. Für den Wert der Drehfunktion benötigen wir -45 Grad. Und außerdem müssen wir die zweite Zeile verstecken. Wählen wir also Zeile zwei mit Änderung aus und weisen ihr Opazität Null und verdeckte Machbarkeit zu Okay? Im Moment haben wir hier also kein x. Der Grund ist, dass die Linien standardmäßig von der Mitte aus transformiert werden , weil der Ursprung der Transformation standardmäßig zentriert ist Wir müssen ihn ändern und links abbiegen. Also müssen wir den Wert von Origin transformieren. Ordnung, jetzt sind Geeks das Problem . Und wir haben hier das x. Als nächstes müssen wir die Farben ändern, die Hintergrundfarben der Linien. Machen wir 444 draus. Außerdem müssen wir die Hintergrundfarbe des Menüsymbols selbst ändern . Machen wir es e, e. Und zum Schluss ändern wir die Farbe der Span-Elemente. Wir müssen den Menübereich mit Änderung auswählen. Setzen wir die Farbe auf 555. Ordnung, das Letzte , was ich tun werde, ist ein Übergang zum Symbol Wir müssen also eine Transitionstransformation mit einer Dauer von 0,6 s durchführen. Außerdem verwende ich eine Funktion namens Cubic Bezier Es ermöglicht uns, einen benutzerdefinierten Übergang zu erstellen. In unserem Fall möchte ich den Übergang also am Anfang langsamer und am Ende dann schnell machen. Um das zu erreichen, gebe ich hier die folgenden Werte weiter. Wir brauchen 100. Und wieder einer. Eigentlich kann man mit verschiedenen Werten herumspielen, aber ich finde, dieser Übergang sieht wirklich gut aus. In Ordnung, also endlich, mit dem Menüsymbol, sind wir fertig. Jetzt müssen wir uns um die Navigation kümmern. Wir müssen also wieder den Klassenwechsel nutzen, gefolgt vom Romanautor Und um die Navigation anzuzeigen, müssen wir die linke Position auf Null setzen. Lassen Sie uns außerdem den Übergang mit derselben Tatsache noch einmal verwenden . In diesem Fall benötigen wir noch 0,6 s und dieselbe kubische Bezier-Funktion mit den Werten 1001 In Ordnung, also funktioniert alles gut. Jetzt müssen wir die Drop-down-Menüs anzeigen. Sobald wir auf die Links klicken, meine ich die persönlichen und geschäftlichen. Bevor wir das tun, möchte ich mich um eine Sache kümmern. Moment brauchen wir den Hover-Effekt, Steelworks oder die Navigationselemente nach tausend Pixeln nicht mehr, Steelworks oder die Navigationselemente nach tausend Pixeln nicht mehr, weil wir die gesamte Navigation modifizieren Um den Hover-Effekt aufzuheben, gehe ich wie folgt vor Wir müssen eine If-Else-Anweisung verwenden , in der wir die Bildschirmgröße definieren. Wenn die Bildschirmgröße weniger als 1.000 Pixel beträgt, müssen wir diesen Code hier anwenden. Und wenn nicht, dann sollten wir diesen Code ausführen, das ganze Fett. Lassen Sie uns also eine if-Anweisung erstellen , in der wir die Breite der Bildschirmgröße definieren müssen. Wir benötigen also eine innere Breite eines Fensterpunkts. Es sollte weniger als tausend Pixel sein. Wenn diese Bedingung also zutrifft, müssen wir diesen Code abrufen und ihn hier einfügen. Und wenn es falsch ist, dann brauchen wir eine weitere Anweisung in die wir den gesamten Code einfügen sollten Jetzt ändert sich die Hintergrundfarbe des Napa nicht mehr Aber wir haben hier ein kleines Problem. Wie Sie sehen, dreht sich der Pfeil. Das brauchen wir auch nicht. Wir haben diesen Hover-Effekt aus CSS erstellt. Wir können es also in der CSS-Datei entfernen und den gleichen Effekt im JavaScript erzeugen. Wie Sie wissen, haben wir alle hier in der Else-Aussage bereits einen Schwebeeffekt Also müssen wir nur den Code für die Pfeile hinzufügen. Aber zuerst entfernen wir es aus CSS. Also greife ich auf die Pfeile von dem Listenelement aus zu, das wir hier benötigen, Dropdown-Element. Als Nächstes müssen wir auf die Link-Elemente zugreifen, die das erste untergeordnete Element des Listenelements sind. Wenn Sie also die Eigenschaft first element child hören, wird der Pfeil durch das Font Awesome-Symbol dargestellt , das das untergeordnete Element des Link-Elements ist. Also noch einmal, wir müssen das erste Element, ein Kind. Danach benötigen wir die Stileigenschaft, gefolgt von der Transformation. Als Wert, den wir hier benötigen, drehen Sie ihn um 180 Grad. Kopieren wir diesen Code und fügen ihn unten ein. Sobald wir die Maus gedrückt haben, müssen wir den Wert der Rotationsfunktion auf Null setzen. In Ordnung? Wie Sie sehen können, haben wir hier keinen Schwebeeffekt mehr Jetzt können wir weitermachen und Sie aus den Drop-down-Menüs entfernen. Sobald wir auf die Links geklickt hatten, mussten wir das richtige Drop-down-Menü anzeigen. Anstatt also die Event-Listener separat zum Building hinzuzufügen , werde ich erneut die forEach-Methode verwenden Aber vorher müssen wir beiden Linkelementen die gemeinsamen Klassennamen zuweisen . Rufen wir sie an, zeige Dropdown. Wählen Sie sie dann mit der Methode Query Selector All aus. Geben wir hier den Klassennamen an und zeigen Sie das Drop-down-Menü an. Danach müssen wir die Links durchgehen und ihnen einen Event-Listener anhängen Wir brauchen also für jeden, der dir einfacher fällt, und eine Pfeilfunktion mit dem Parameter, nennen wir es Link. Und dann fügen Sie ihm den Event-Listener mit dem Klick-Event und einer Pfeilfunktion Jetzt müssen wir die Drop-down-Menüs anzeigen. Eigentlich sind sie die Geschwister der Link-Elemente. Wir müssen also den Link hören, gefolgt von der Eigenschaft Next Elements Sibling Dann müssen wir die Stileigenschaft mit linker Position definieren. Setzen wir es auf Null. Wenn ich also die Navigation aufrufe und dann auf den Link klicke, wird das richtige Drop-down-Menü angezeigt. In Ordnung, wir machen Fortschritte, aber wir haben hier ein kleines Problem. Wenn wir auf das Menüsymbol klicken, wird das Symbol nicht mehr angezeigt, aber das Drop-down-Menü wird nicht geschlossen. Das müssen wir korrigieren. Also müssen wir die Drop-down-Menüs ausblenden. Will, dass der Klassenwechsel vom Nordpol entfernt wird . Also werde ich eine if-Anweisung verwenden, in der wir definieren, ob die Navbar die Klassenänderung hat oder nicht Lassen Sie uns also eine if-Anweisung mit der folgenden Bedingung erstellen . Zuerst müssen wir hier den logischen NOT-Operator platzieren. Dann brauchen wir die Navbar-Klassenliste. Und wir müssen eine Methode namens contains verwenden. Diese Methode zeigt uns, dass, wenn das Element die spezifische Klasse enthält sich nicht in der Klammer befindet, wir eine Änderung platzieren müssen Wenn diese Bedingung also zutrifft, bedeutet das, dass die Klassenänderung aus der Navigationsleiste entfernt wird Deshalb müssen wir die Drop-down-Menüs ausblenden. Lassen Sie uns sie mit der Methode querySelector all auswählen. Dann geben Sie hier den Klassennamen nafta uptown an. Jetzt müssen wir sie für jede Methode verwenden. Lassen Sie uns hier den Parameter, den ich nennen werde, in der Dropdown-Liste einfügen . Um die Dropdownmenüs auszublenden, benötigen wir also einen Dropdown-Stil, gefolgt von der linken Eigenschaft Und wir müssen es auf -20 Run setzen. Jetzt funktioniert alles perfekt. Das Letzte, was ich in Bezug auf das Menü tun werde , ist, die Dropdowns auszublenden . Sobald wir auf die Drop-down-Überschriften geklickt haben auf die Drop-down-Überschriften geklickt , werde ich den Links zunächst allgemeine Klassen zuweisen allgemeine Klassen zuweisen Nennen wir es Drop-down-Überschriftenlink. Wir benötigen diese Klasse für beide Link-Elemente. Gehen Sie dann zurück zur JavaScript-Datei und wählen Sie sie mit der Methode querySelector all Wir müssen hier den Klassennamen, das Drop-down-Menü und den Überschriftenlink angeben, den wir durch diese Links durchgehen müssen. Also brauchen wir, für jede Methode. Fügen wir hier eine Callback-Funktion mit einem Parameter ein. Ich nenne es Überschriftenlink. Dann müssen wir an den Link Elemente anhängen, Event-Listener mit Click-Events Und auch hier brauchen wir eine Pfeilfunktion. Also müssen wir Drop-down-Menüs ausblenden. Und wir müssen über die Link-Elemente auf diese Drop-down-Menüs zugreifen . Also müssen wir den Überschriftenlink verwenden. Dann müssen wir auf die übergeordneten Elemente zugreifen. Und dafür müssen wir eine der Eigenschaften verwenden, die als Elternelemente bezeichnet werden. Im Moment haben wir also Zugriff auf den Listenpunkt. Und als nächstes müssen wir Zugriff auf das kleinste Element selbst erhalten. Also auch hier benötigen wir das übergeordnete Element, gefolgt von dieser Kacheleigenschaft. Dann müssen wir gehen. Und der Wert wird -20 run sein. Okay, wenn wir also auf das Navigationselement und dann auf den Link zur Dropdownüberschrift klicken, wird das Drop-down-Menü ausgeblendet. Eigentlich haben wir hier ein Problem mit dem zweiten Dropdown, weil wir zwei Überschriften haben Es könnte also sein, dass wir einen Fehler in der HTML-Datei haben. Lass uns weitermachen und es uns ansehen. Wie Sie sehen können, habe ich hier aus irgendeinem Grund zwei Überschriften eingefügt Vielleicht haben Sie dieses Problem nicht in Ihrer eigenen HTML-Datei. Also lass es uns von hier aus loswerden. In Ordnung, wie Sie sehen können, funktioniert alles perfekt. Und was das Menü eigentlich ist, wir sind fast fertig. Ich sagte fast, denn wenn wir den Bildschirm wieder auf extra groß erhöhen , werden wir einige Probleme haben. Wie Sie sehen können, haben wir das Menüsymbol in der oberen linken Ecke. Und wenn wir den Mauszeiger über die Navigationselemente bewegen, sehen wir auch die beiden Uptown-Überschriften , die wir der Liste hinzugefügt haben Also müssen wir sie standardmäßig verstecken. Wählen wir das Menü aus und weisen es ihm zu. Keine anzeigen. Dann brauchen wir eine Drop-down-Überschrift. Auch hier müssen wir keine anzeigen. Und dann unten, ich meine, im Responsive Code, müssen wir eine Dropdown-Überschrift auswählen Wir müssen sie einem Display-Block zuweisen , um die Arbeit mit Leerzeichen zu erledigen. Richtig? Mit Ammoniak sind wir also endlich fertig. Lassen Sie uns weitermachen und das Projekt responsiv gestalten 101. Projekt 10 - Projekt reaktionsfähig machen - Teil 4: In Ordnung, lassen Sie uns weitermachen und unser Projekt weiterhin responsiv gestalten Moment arbeiten wir an Im Moment arbeiten wir an einem Bildschirm mit einer maximalen Breite von tausend Spitzen Wir haben die Navigation geändert und jetzt werde ich die anderen Abschnitte ein wenig anpassen. Der erste Abschnitt sieht gut aus. Fahren wir mit dem nächsten Abschnitt fort. Es sieht auch gut aus, aber ich denke, wir können die Schriftgröße der Überschrift leicht verringern . Wählen wir die Überschrift für Abschnitt zwei aus und stellen Sie die Schriftgröße so ein, dass sie passt. Ordnung, als Nächstes werde ich den Funktionsbereich anpassen Wählen Sie die schnelle Entwicklung mit Kreuzmerkmalen aus und legen Sie die Breite auf 95% fest. Außerdem wähle ich die Funktion selbst aus. Lassen Sie uns die Polsterung ändern, sie oben und unten auf Null setzen und 1,5 Rem auf der linken und rechten Seite Da kam diese Silbe, der Feature-Sektion. Es sieht gut aus. Danach werde ich mich um den nächsten Abschnitt kümmern. Ich möchte die Richtung der Ausrichtung der Inhalte ändern . Im Moment werden das Bild und die Listen nebeneinander platziert, und ich möchte sie übereinander platzieren Wählen wir also einen Abschnitt für Inhalt aus und ändern Sie die Richtung, erstellen Sie jede Spalte und richten Sie die Elemente in der Mitte aus. Als Nächstes zentriere ich das Bild perfekt. Wählen wir seinen Wrapper aus. Um das Bild zu zentrieren, verwende ich Rand, wo der Wert automatisch ist. Okay, lassen Sie uns die Liste anpassen. Wählen wir einen Abschnitt aus, für den ich zumindest seine Breite auf 100% setze. Und dafür werde ich die Listenelemente in der Mitte platzieren . Lassen Sie uns Flexbox verwenden. Wir müssen das Display auf Flex einstellen. Dann müssen wir die Richtung ändern. Machen wir es zu einer Kolumne. Und schließlich müssen wir die Artikel in der Mitte ausrichten. Das war's also mit dem vierten Abschnitt. Lass uns weitermachen und uns um die Fußzeile kümmern. Ich werde die Elemente vertikal in einer Spalte ausrichten. Lassen Sie uns also weitermachen und Filter Top auswählen. Ändere die Richtung, lass es sie anrufen. Und richten Sie auch Elemente in der Mitte aus. Okay, lassen Sie uns am Ende der Liste etwas Platz schaffen. Wählen wir die Fußzeilenliste und setzen Sie den unteren Rand auf einen RAM Außerdem wähle ich den Copyright-Absatz aus. Lassen Sie uns den Platzbedarf oben und unten ändern. Lassen Sie uns die Marge auf 1,5 RAM und dann auf Null setzen. In Ordnung, das war's also mit der Titelseite. Schauen wir uns den Rest der Seiten an. Wie Sie sehen, sieht alles gut aus und wir können weitermachen und den nächsten Breakpoint finden. Der nächste Breakpoint wird also 800 Pixel sein. Lassen Sie uns weitermachen und eine neue CSS-Medienabfrage erstellen und die maximale Breite als 800 Pixel angeben Also werde ich zunächst die Schriftgröße der HTML-Elemente verringern . Setzen wir es auf 45%. Als Nächstes werde ich mich um den zweiten Abschnitt kümmern. Stellen wir den Abstand oben und unten auf zehn RAM und dann auf Null für die linke und rechte Seite Außerdem wähle ich die Überschrift für Abschnitt zwei aus. Lassen Sie uns es ein wenig anpassen. Ich werde mit 280 Prozent beginnen. Außerdem müssen wir den Text in der Mitte ausrichten. Und außerdem definiere ich die Zeilenhöhe. Machen wir 1.2 draus. In Ordnung, als Nächstes werde ich die Dienste anpassen. Wählen wir also das Wrapper-Div-Element mit einer Klasse services aus und definieren die Breite. Machen wir es zu 95% Dann wähle ich den Dienst selbst aus. Definieren wir seine Breite und leiten wir es bis zum RAM durch. Und ändern Sie auch den Platz auf der linken und rechten Seite. Setzen Sie die Marge auf Null und rennen Sie dann los. In Ordnung, jetzt haben wir ein viel besseres Ergebnis. Als Nächstes möchte ich die Schriftgröße der Schrift verringern. Fantastische Ikonen. Wählen wir den Dienst aus. Ich ändere die Schriftgröße, mache es für RAM. Und ich werde auch die Knöpfe anpassen. Wählen Sie Service BTN, ändern Sie die Breite und machen Sie 15 RAM daraus. Und stellen Sie die Polsterung an allen vier Seiten auf einen RAM ein. Okay, das war's mit dem zweiten Abschnitt. Als Nächstes werde ich den Feature-Bereich anpassen. Ich möchte die Features auf drei Zeilen platzieren. Wählen wir also Funktionen aus und setzen ihre Breite auf 100% Dann wähle ich das Feature selbst aus. Lassen Sie uns die Breite auf 50 Prozent setzen und auch den Abstand ändern, ihn auf Null setzen Und für den Regen. In Ordnung, ich denke, das war's mit der Titelseite. Alle anderen Abschnitte sehen gut aus. Schauen wir uns die Anmeldeseite an. Es sieht auch gut aus. Was die Anmeldeseite betrifft, müssen wir hier einige Änderungen vornehmen. Lassen Sie uns also weitermachen und Topside auswählen. Wir müssen die Anmeldeseite oben und die Breite auf 50 setzen. Rem. Als Nächstes werde ich dich vom Inhalt entfernen. Wählen Sie den Inhalt der Anmeldeseite aus und legen Sie die Breite auf 85% Und definiere auch Polsterung. Es ist oben und unten Null und links und rechts drei Rem . Danach wähle ich den linken Teil des Inhalts aus. Also müssen wir den Seiteninhalt registrieren, der noch übrig ist. Lassen Sie uns seine Breite auf 200 Prozent festlegen. Ändere auch das Padding und mache es auf drei RAM. Dann wähle ich die Bilder aus. Definieren wir die Breite und machen sie zu 14 RAM. Auch die Marge wurde geändert. Ich setze es auf 0,1, 0,5 g und verringere auch die Breite des Randes. Ich werde es auf 1 g Feststoff einstellen. Die Farbe CCC kam rein. Danach wähle ich die H1-Überschriftenelemente aus. Ändern wir die Schriftgröße, machen wir es dreifach. In Ordnung, der linke Teil sieht also gut aus. Gehen wir zum richtigen über. Wähle den Inhalt der Anmeldeseite aus, oder? Zuallererst werde ich Elemente mithilfe von Flexbox ausrichten Stellen wir die Anzeige auf Flex ein und ändern dann die Spalte mit der Biegerichtung. Als Nächstes richte ich die Elemente in der Mitte aus. Und zum Schluss ändere die Polsterung und mache drei Runden. Okay, schließlich werde ich die Optionsfelder anpassen. Wählen wir sie mithilfe des Typattributs oder des Radios aus. Ich werde die Breite ändern. Machen wir 20 Prozent draus. Dann. Marge ändern. Ich setze es oben auf 0,5 rem und auf 1,5 rem auf der rechten Seite. die untere und die linke Seite angeht, werden beide Null sein. Ordnung, also sagen wir zu diesem Breakpoint, lassen Sie uns weitermachen und am nächsten arbeiten Der nächste Breakpoint wird 550 Pixel sein. Lassen Sie uns eine neue CSS-Medienabfrage mit einer maximalen Breite von 550 Pixeln erstellen. Am Breakpoint werde ich das Navbar-Logo überhaupt ausblenden das Navbar-Logo überhaupt Wählen wir einen Knopf oder ein Logo aus und weisen Sie zu , dass keines angezeigt wird. Als Nächstes werde ich mich um die Bannerelemente kümmern. Wählen wir die Panelüberschrift aus, ändern wir die Schriftgröße, 4,5 Reim Wählen Sie dann ein Band oder einen Absatz und definieren Sie die Zeilenhöhe. Machen Sie es auf 1.2 Das war's mit dem ersten Abschnitt. Gehen wir zum zweiten über. Ich werde die Dienste vertikal in der Spalte platzieren. Wählen wir also die schnelle Entwicklung und ändern wir die Spalte mit der Biegerichtung. Außerdem werde ich die Elemente in der Mitte ausrichten. Schauen wir uns als Nächstes den Dienst selbst an. Lassen Sie uns die Breite auf 60% setzen. Außerdem definiere ich die Marge am unteren Rand. Machen wir vier. In Ordnung, das war's. Bezüglich des zweiten Abschnitts gehen wir zum dritten über. Ich werde die Schriftgröße des Überschriftenelements ändern. Wählen wir also die Überschrift für Abschnitt drei und legen die Schriftgröße zwei fest. Für RAM. Außerdem werde ich die Features vertikal in einer Spalte platzieren. Wählen wir also Wrapper und Scientific Flex Direction mit der Wertspalte Außerdem müssen wir die Artikel in der Mitte ausrichten. Okay, lassen Sie uns die Funktion auswählen. Definieren wir diese Breite, machen sie zu 80 Prozent. Okay, fahren wir mit dem nächsten Abschnitt fort. Ich meine den vierten Abschnitt. Ich wähle die Überschriftenelemente aus. Lassen Sie uns die Schriftgröße ändern, damit sie sich ändert. Dann wähle ich den Inhalt aus. Lassen Sie uns die Breite auf 100% setzen. Ändere auch den Abstand, mache oben und unten Null und links und rechts drei Rampen. Was das Bild angeht, werde ich es überhaupt ausblenden Wählen wir also den Wrapper und setzen die Anzeige auf „Keine“. Okay, zum Schluss richte ich die Elemente auf der linken Seite aus. Wählen wir also die Option „Am wenigsten zuweisen“, um Elemente mit einem Werteflex auszurichten. Fangen Sie mit diesem Abschnitt an. Wir sind fertig. Lassen Sie uns weitermachen und die Fußzeile anpassen Wählen wir die obere Fußzeile aus und definieren wir süß, machen wir es zu 90%. Okay, das war's mit der Titelseite. Schauen wir uns den Rest der Seiten an. Die Anmeldeseite benötigt also keine Änderungen. Was die Anmeldeseite betrifft, müssen wir sie anpassen Lass uns dich von der Oberseite nehmen. Ich setze die Breite auf vier, um zu laufen. Danach wählen wir den Inhalt der Anmeldeseite aus und setzen seine Breite auf 100%. Ordnung, als Nächstes werde ich den linken Teil des Inhalts überhaupt ausblenden Wählen wir also links aus und weisen Sie zu , dass keine angezeigt wird. Lassen Sie uns abschließend die Breite des breiten Teils erhöhen. Ich werde es so einrichten, dass es mit der Gegenwart umgeht. In Ordnung, das war's also mit diesen Breakpoints. Und jetzt muss ich das Projekt am letzten Breakpoint anpassen , der 400 Pixel groß sein wird Lassen Sie uns eine neue CSS-Medienabfrage erstellen und die maximale Breite als 400 Pixel angeben. Also werde ich zunächst die Schriftgröße des HTML-Elements verringern. Machen wir 40 Prozent draus. Also alles sieht gut aus. Aber ich werde das Menüsymbol anpassen und wir haben es in Alpha angezeigt. Dann verdeckt das Symbol den Login-Button und sieht eigentlich nicht gut aus. Also werde ich das Word-Menü vor dem Symbol ausblenden. Wählen wir den Menübereich aus und stellen Sie ihn so ein, dass kein Bereich angezeigt wird. Also werde ich die Breite des Menüs verringern , das ich lösen kann. Wählen wir es aus und legen seine Breite auf fünf Marken fest. Jetzt kann ich sehen, dass wir ein viel besseres Ergebnis haben. Das einzige, was mir hier nicht gefällt, ist der zweite Listenpunkt im vierten Abschnitt. Weil die Zahl irgendwie geschrumpft ist. Also werde ich das beheben. Lassen Sie uns eine Zahl auswählen und ihre Mindestbreite definieren. Machen Sie 3,5 g. In Ordnung, also endlich reagiert das Projekt auf verschiedene Bildschirmgrößen Bevor wir das Projekt beenden, möchte ich noch eine letzte Sache erledigen. Wenn wir den Bildschirm vergrößern und dann den Mauszeiger über die Navigationselemente bewegen, werden die Dropdowns tatsächlich dann den Mauszeiger über die Navigationselemente bewegen, nicht angezeigt Dafür müssen wir die Seite aktualisieren. Um zu vermeiden, dass die Seite manuell aktualisiert wird, werde ich eine automatische Aktualisierung vornehmen sobald wir die Bildschirmgröße Dafür werde ich den Event-Listener an das Fensterobjekt anhängen, wobei die Größe des Ereignisses geändert wird. Außerdem benötigen wir hier die Pfeilfunktion, die ausgeführt wird, sobald wir die Fenstergröße ändern Um die Seite neu zu laden, benötigen wir also das folgende Fenster, Punkt Position, Punkt neu Wenn wir also testen, werden Sie feststellen, dass alles perfekt funktioniert. In Ordnung, wir haben die Arbeit an unserem zehnten Projekt abgeschlossen , dem Paypal-Klon Es war der Klon der Benutzeroberfläche dieser Website. Hoffe dir hat das Projekt gefallen und du lernst ein paar neue Sachen. Mit Abschluss der Arbeit an diesem Projekt ist auch unser Kurs beendet. Hoffentlich war es interessant und nützlich. Wir haben zehn verschiedene moderne und ansprechende Websites von Grund auf neu erstellt . Ich hoffe, Sie haben viel Übung und Frontend-Webentwicklung gesammelt und viele verschiedene Dinge in HTML, CSS und JavaScript gelernt verschiedene Dinge in HTML, CSS und JavaScript Dies sind drei Kerntechnologien der Frontend-Webentwicklung. Deshalb ist es wirklich wichtig, sie heute zu lernen und zu üben. In Ordnung, also ich möchte mich bei Ihnen dafür bedanken, dass Sie bei uns sind. Wünsche dir alles Gute. Wir planen, bald einen neuen Kurs zu veröffentlichen , wieder mit Projekten. Also bleib dran. Viel Glück. Tschüss.