Erstelle 30+ Webprojekte mit HTML, CSS und JavaScript

1. Einführung: Willkommen zu dem brandneuen Kurs, in dem Sie lernen können, wie Sie moderne und schöne Webprojekte und Vorlagen erstellen . Wenn Sie Ihr Portfolio weiterentwickeln 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 mehr als 30 verschiedene und kreative Webprojekte mit den drei Kerntechnologien HTML, CSS und JavaScript erstellen mehr als 30 verschiedene und kreative Webprojekte mit den drei Kerntechnologien HTML, . Wenn Sie über Grundkenntnisse dieser Technologien verfügen. Und trotzdem haben wir einige Probleme eigene Webprojekte zu erstellen. Oder wenn Sie Ihren Entwickler und Ihre Designer in der Nähe weiterentwickeln möchten , dann sind Sie bei uns genau richtig. Wir haben diesen Kurs ins Leben gerufen, um den Studierenden die beste Erfahrung in drei Kerntechnologien zu bieten und es ihnen zu ermöglichen, die besten modernen und kreativen Projekte zu erstellen. Wir werden mehr als 30 verschiedene Webprojekte erstellen. Und sie werden voller moderner, schöner und schöner Effekte und Entscheidungen sein. Wir werden mit relativ einfachen Projekten beginnen und uns auch mit einigen fortgeschrittenen Projekten befassen. Wir können Ihnen garantieren, dass Sie die Frontend-Webentwicklung beherrschen. Nach Abschluss dieses Kurses. In diesem Kurs können Sie sich Inspirationen holen , die Ihnen helfen, Ihre Projekte zu verbessern und Ihr Portfolio anzupassen Beherrschen Sie nur diese Kerntechnologien der Trunk- und 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 Subproblems Frameworks und Bibliotheken zu erlernen andere Technologien wie , die heutzutage sehr beliebt und sehr gefragt sind Der Kurs wird interessant und nützlich sein. Daher würde ich Ihnen empfehlen , das Beste aus diesem Kurs herauszuholen , ohne den Code nur 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. Willkommen im Kurs: Hallo und willkommen zum Kurs. Ich hoffe, dass dies Ihr richtiger Kurs ist und dass Ihnen die Projekte, die wir während dieses Kurses bauen werden, gefallen werden. Wie Sie bereits wissen, werden wir mehr als 30 verschiedene, moderne und kreative Projekte erstellen . Diese Projekte werden auf der Grundlage von drei Kerntechnologien der Frontend-Webentwicklung, HTML, CSS und JavaScript, erstellt der Frontend-Webentwicklung, HTML, CSS und JavaScript, Ich möchte eine Sache erwähnen. Wie gesagt, die Projekte werden auf Basis von HTML, CSS und JavaScript erstellt . Sie sollten also über ein grundlegendes Verständnis dieser Technologien verfügen , um den Vorlesungen zu folgen und nicht verwirrt zu werden. Die Projekte werden voller verschiedener moderner Techniken und Tricks sein. Sie werden lernen, wie man schöne Effekte und Animationen erstellt , die Sie dann als Inspiration nutzen können, um Ihr eigenes Portfolio zu entwickeln und anzupassen. Wie ich bereits erwähnt habe, werden wir mehr als 30 Projekte bauen. Es handelt sich um unabhängige Vorlagen, sodass Sie sie nicht der Reihe nach durchgehen müssen. Sie können jedes der gewünschten Projekte aus der Liste erstellen. Es liegt absolut an dir. Einige der Projekte sind einfach, aber Sie werden auch einige fortgeschrittene Projekte kennenlernen. Also haben wir alle Level aufgenommen , die der Entwickler benötigt. Im Laufe des Kurses werden wir Projekte wie Navigationen, Diashows, benutzerdefinierte Kontrollkästchen, 3D-Karten und andere interessante und kreative und andere interessante und Ich bin mir also sicher, dass Sie sie genießen werden. Ich denke, Sie werden viel Übung und Erfahrung in der Frontend-Webentwicklung sammeln, in der HTML, CSS und JavaScript ein Muss sind In Ordnung, also lass uns weitermachen und loslegen. 3. 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 4. Projekt 1 - 3D-Formulare: In Ordnung, es ist Zeit, ein neues Projekt zu erstellen. In diesem Projekt werden wir ein 3D-Anmelde- und Anmeldeformular erstellen . Und das Projekt wird auf Basis von HTML, CSS und JavaScript erstellt . In diesem Video werde ich das Projekt durchgehen und es beschreiben. Wie Sie sehen können, haben wir hier ein Anmeldeformular, das standardmäßig mit einem Vollbild-Hintergrundbild angezeigt wird standardmäßig mit einem Vollbild-Hintergrundbild In der oberen linken Ecke des Formulars sich der Batson, befindet sich der Batson, der den Text anzeigt. Melde dich an. Wenn ich darauf klicke. Und dann rotiert das Formular in einer 3D-Umgebung. Und das Anmeldeformular wird angezeigt. Wenn ich auf die Schaltfläche „Anmelden“ klicke, erhalten wir das Anmeldeformular hier zurück Sie können also mit diesen Schaltflächen im 3D-Raum zwischen Formularen wechseln. Okay, das war's mit diesem Projekt. Ich hoffe, es wird interessant und es wird Ihnen gefallen. Also lass uns anfangen. In Ordnung, wir sind bereit, mit dem Bau des Projekts zu beginnen. Ich habe auf dem Desktop einen neuen Ordner namens 3D Forms erstellt , in dem ich einen weiteren Ordner namens Images habe. Es enthält das Hintergrundbild. Lassen Sie uns diesen Ordner in VS Code öffnen und dann unsere Arbeitsdateien für HTML, CSS und JavaScript erstellen . Ich nenne die Dateien index.html, dann style.css und script.js. Öffnen Sie dann die Datei index.html und erstellen Sie ein einfaches HTML-Dokument. Dafür werde ich Amide verwenden. Wir müssen ein Ausrufezeichen setzen und dann die Tabulatortaste drücken oder antworten Hier haben wir also die grundlegenden HTML-Tags. Lassen Sie uns zunächst den Titel ändern. Ich werde es 3D-Formen nennen. Und dann verlinke ich die CSS- und JavaScript-Dateien. Öffnen wir das Link-Tag und geben Sie hier im atria-ersten Attribut den Teil der Datei Was die JavaScript-Datei angeht, öffne ich das Script-Tag direkt über dem abschließenden Body-Tag. Und dann müssen wir den Namen der Datei im Quellattribut angeben . Okay, schließlich werde ich das Projekt im Browser ausführen, indem ich eines der VS-Codepakete namens Live Server verwende eines der VS-Codepakete namens Live Server Es ermöglicht uns, den Projektlauf laufen zu lassen und die Aktualisierungen und Änderungen vorzunehmen, ohne die Seite zu aktualisieren. Jedes Mal. Bevor wir mit dem Schreiben des Codes beginnen, werde ich den Editor und den Browser nebeneinander platzieren und den Browser nebeneinander Ordnung, lassen Sie uns anfangen, das HTML-Markup zu erstellen Ich öffne ein div-Tag, das der Container sein wird. Als nächstes brauchen wir ein weiteres Div-Tag. Es wird beide Formulare einschließen. Also werde ich dem Klassenforms-Wrapper zuweisen. Dieses Element wird aus zwei verschiedenen Elementen bestehen. Ich meine zwei unterschiedlich geformte Elemente. Das erste wird das Unterzeichnungsformular sein. Öffnen wir also das Formular-Tag mit dem Anmeldeformular für die Klasse. Jedes Formularelement enthält also eine Schaltfläche, Überschrift und die Eingaben. Öffnen wir den Link. Das Tag wird der Button sein. Ermöglicht es Ihnen, der Klasse Signup, BTN zuzuweisen. Ich habe hier verwendet, melden Sie sich an, weil diese Person uns hilft , zum Anmeldeformular zu navigieren In Ordnung, als Nächstes müssen wir los. Öffnen wir das H2-Heading-Tag mit der Inhaltsanmeldung. Danach füge ich Ihre Eingabeelemente ein. Öffnen wir das div-Tag, das der Wrapper sein wird. Es ist so konzipiert, dass es den Eingabe-Wrapper der Klasse frisst Insgesamt werden wir also drei verschiedene Eingabeelemente für E-Mail, Passwort und Senden-Button haben. Lassen Sie uns das Eingabe-Tag mit einem Typtext und mit Platzhalterattributen Ihrer E-Mail öffnen und mit Platzhalterattributen Ihrer E-Mail Dann werde ich diese Codezeile duplizieren. Diese Eingabefelder sind für das Passwort bestimmt. Lassen Sie uns also das Typattribut ändern, es zu einem Passwort machen und auch den Wert des Platzhalterattributs ändern Wir benötigen wieder ein Passwort. Das nächste Eingabeelement ist für die Schaltfläche „Senden“. Der Typ wird also eingereicht. Wir brauchen hier keine Platzhalterattribute. Stattdessen brauchen wir Wert. Loggen Sie sich ein. Nochmals, das war's mit den ersten Formularelementen. Lassen Sie uns das gesamte Formular duplizieren und dann einige Änderungen vornehmen. Wir brauchen hier den Klassennamen, Anmeldeformular, dann wird der Button unterschreiben Lassen Sie uns auch den Inhalt der Überschrift ändern . Wir müssen uns anmelden. Im Fall des Anmeldeformulars werden wir fünf verschiedene Eingaben haben Das erste wird für den Namen sein. Also brauchen wir hier deinen Namen. Außerdem werden wir einen Eingang für die Passwortbestätigung haben . Lassen Sie uns hier den Platzhalter Institute confirm password ändern confirm password Lassen Sie uns abschließend den Wert der Schaltfläche Senden ändern. Benutze es hier, melde dich an. Okay, lassen Sie uns über HTML-Markup sprechen. Jetzt ist es an der Zeit, das Projekt anzupassen Öffnen Sie die CSS-Datei und erstellen Sie zunächst einige Standardeinstellungen und setzen Sie die Stile zurück Ich wähle jedes Album mit einem Sternchen aus. Zuallererst werde ich die standardmäßigen Margen und Padding loswerden standardmäßigen Margen und Padding Lassen Sie uns fortfahren und beide Eigenschaften auf Null setzen. Dann mache ich eine Border-Box in Boxgröße. Außerdem werde ich die den Link-Elementen zugrunde liegende Standardform entfernen . Geben wir den Text ein, keine Dekoration. Und dann ändere die Schriftfamilie. Ich werde dein Handy benutzen, das Arial Font Group Sensory heißt Arial Font Group Sensory Während dieses Projekts werden wir RAM als Maßeinheit verwenden. Moment entspricht 1 g 16 Pixeln, da die Schriftgröße des HTML-Elements 16 Pixeln entspricht. Ich werde 1 g in zehn Pixel umrechnen. Und dafür müssen wir die Schriftgröße der HTML-Elemente verringern . Machen wir 62,5 Prozent draus. In Ordnung, also wurden die Elemente kleiner. Als Nächstes kümmere ich mich um den Container. Wählen wir es aus und definieren wir seine Breite und Höhe. Ich setze die Breite auf 100%. Was die Höhe angeht, werde ich sie zu 100% aus dem Viewport machen 100% aus dem Viewport Deshalb brauchen wir hier 100 pH. Ich werde das Bild als Vollbild-Hintergrund festlegen. Vorher verwende ich die lineare Verlaufsfunktion, weil ich das Hintergrundbild etwas dunkler machen möchte. Verwenden wir hier den RGBA-Wert 3177 und die Opazität 0,7. Der zweite RGBA-Wert wird die schwarze Farbe mit der Opazität 0,7 sein schwarze Farbe mit der Opazität Als Nächstes gebe ich die URL des Bildes an. Wir haben den Ordner Images, in dem wir Bild namens p2 dot PNG speichern Die Position wird zentriert sein. Und wir müssen es wiederholen. Abschließend werde ich die Hintergrundgröße so einstellen, dass sie abdeckt. Ordnung, also hier haben wir das Vollbild-Hintergrundbild und das war es eigentlich mit dem Container Jetzt müssen wir anfangen, die Formulare anzupassen. Ich denke, es wäre besser, wenn wir eine der Formen für eine Weile verstecken und nur eine Form stylen Also lass uns weitermachen und das zweite Anmeldeformular verstecken. Wählen Sie dann Forms Wrapper aus. Ich schicke es an den Wrapper auf der Seite. Lassen Sie uns seine Position also auf absolut setzen. Dann müssen wir die Eigenschaften oben und links definieren. Machen wir beide zu 50%. Um die Elemente dann perfekt auf der Seite zu zentrieren, müssen wir Transform Translate verwenden. Wir müssen Elemente um -50% in beide Richtungen bewegen. Ich befinde mich auf der X- und Y-Achse. Es wird also davon ausgegangen, dass ein Formular in der Mitte der Seite platziert wird . Als Nächstes werde ich das Formular selbst anpassen. Wählen wir also den Forms-Wrapper aus, gefolgt vom Tag-Namen-Formular Zunächst setze ich, wie in den Höhen definiert, die Breite auf 50 Lauf. Die Höhe wird 35 RAM betragen. Und ändere auch die Hintergrundfarbe. Ich werde hier den RGBA-Wert 4114108 verwenden. Und dann die Opazität 0,9 bis fünf. Ordnung, als Nächstes richte ich die Elemente innerhalb des Formulars mithilfe von Flexbox Wir müssen Flex anzeigen. Dann müssen wir die Richtung ändern , weil wir die Elemente vertikal platzieren müssen. Wir müssen also die Richtung ändern, um eine Säule zu sein. Um dann etwas Platz um die Elemente herum zu schaffen , die wir benötigen, begründen Sie den Inhalt um ihn herum. Und um die Elemente horizontal zu zentrieren , richten Sie die Elemente mittig aus. Lassen Sie uns abschließend einen kleinen Schatteneffekt erzeugen. Ich werde auf allen vier Seiten einen Schatten erzeugen. Also werde ich die folgenden Werte verwenden. Wir brauchen 0,1 RAM dreimal als die Kragen C, C, C. Und außerdem verwende ich hier den Wert Inset Es ermöglicht uns, den Schatten innerhalb der Elemente zu erzeugen. Als nächstes benötigen wir zweimal -0,1 Gramm. Dann 0.1 mit der gleichen Farbe CCC und mit dem gleichen Wert im Set laufen der gleichen Farbe CCC und mit dem gleichen Wert im Set Okay, lassen Sie uns zunächst sagen, was Formularelemente angeht, als Nächstes werde ich mit den einzelnen Elementen beginnen Fangen wir mit der Anmeldeschaltfläche an. Ich wähle es mit Hilfe von Tagnamen aus und a. Definieren wir diese Position als absolut. Stellen Sie dann die Eigenschaften oben und links ein, beide auf RAM. Kann sehen, dass der Knopf richtig positioniert ist. Lass uns weitermachen und es stylen. Zunächst ändere ich die Hintergrundfarbe. Lass es uns weiß machen Außerdem werde ich den Text fett machen oder eine Schriftstärke mit einem Wert von 600 verwenden. Dann transformieren wir Text in Großbuchstaben. Außerdem werde ich die Farbe ändern. Verwenden wir den RGBA-Wert 4114108. Schaffen Sie also etwas Abstand zwischen den Buchstaben. Lass es darauf ankommen, zu rennen. Gleich danach werde ich mithilfe von Padding etwas Platz innerhalb der Schaltfläche schaffen mithilfe von Padding etwas Platz innerhalb der Schaltfläche Stellen wir das Padding oben auf 0,5 Rem als auf ein Rem auf der rechten Seite, 0,5 Rem unten und drei Rem auf der linken Seite Schließlich müssen wir die Form der Schaltfläche mithilfe des Randradius ändern Schaltfläche mithilfe des Randradius Es werden vier verschiedene Werte benötigt. Denn der Radius in der oberen linken Ecke wird 100% betragen. Dann haben wir 0,5 Rem in der oberen rechten Ecke. unteren rechten Ecke wird es 0,5 RAM sein , genauso wie wahrscheinlich in der unteren linken Ecke, es werden 100% sein. Okay, das war's mit dem Button. Lassen Sie uns weitermachen und die Überschrift anpassen. Wählen Sie das Formular H2 aus. Stellen wir zunächst die Schriftgröße ein und lassen Sie es 2.3 laufen. Machen Sie den Text in Großbuchstaben. Sie auch etwas Abstand zwischen den Buchstaben, stellen Sie sicher, dass es auf RAM zeigt, und ändern Sie dann die Farbe, machen Sie es weiß. Die Überschrift ist also angepasst und jetzt müssen wir uns um die Eingaben kümmern. Lassen Sie uns weitermachen und den Eingabe-Wrapper auswählen. Wir müssen die Eingänge vertikal übereinander platzieren . Also, um die Spalten Flex und Flexrichtung anzuzeigen. Als Nächstes wähle ich den Eingang selbst aus. Definieren wir die Breite und Höhe. Ich werde mit 225 RAM beginnen. Was die Höhe angeht, so werden es drei Rampen sein. Und danach werde ich etwas Platz innerhalb und auch außerhalb der Eingänge schaffen . Verwenden wir Padding mit den Werten 0,5 rem oben und unten und je einem Rem links und rechts. Die Marge wird oben und unten 0,5 Rem und links und rechts Null betragen. Als Nächstes ändern wir die Hintergrundfarbe. Ich werde es transparent machen. Ebenfalls. Erstellen wir eine Grenze mit den Werten 0,1 rund, durchgehend, die Farbe weiß. Und runden Sie die Eingaben auch ab, indem Sie den Randradius mit dem Wert fünf verwenden, haben die Eingaben alle ausgeführt, oder sie sehen gut aus, aber wir müssen ihnen noch ein paar weitere Stile hinzufügen Lass uns die Farbe ändern. Mach es weiß. Erstellen Sie auch etwas Abstand zwischen den Buchstaben, weisen Sie darauf hin, dass es auf ein RAM zeigt, und entfernen Sie dann die Standardeinstellung. Gliederung. Setze es auf „Keine“. In Ordnung, das war's also mit den Eingaben. Als Nächstes ändere ich die Farbe des Platzhalters. Wir müssen den ersten Rapper auswählen, gefolgt von der Eingabe und dem Platzhalter für die Pseudoelemente Lassen Sie uns die Farbe auf Weiß setzen und auch die Schriftstärke ändern. Machen Sie 300 draus. Okay, zum Schluss werde ich den Senden-Button anpassen Wählen wir die Eingabe mit einem Typattribut aus. Lassen Sie uns zunächst die Hintergrundfarbe ändern und sie weiß machen. Dann wird die Farbe den RGBA-Wert 4114108 haben. Lassen Sie uns die Schriftstärke erhöhen. Machen Sie Detect mutiger. Stellen Sie die Schrift auf 900 ein. Transformiere auch Text in Großbuchstaben. M Endlich wurde der Typ des gröberen Zeigers geändert. In Ordnung, das ist es. Was das Anmeldeformular betrifft, so ist es individuell Jetzt müssen wir das Anmeldeformular anzeigen und dafür sorgen, dass beide Formulare funktionieren Gehen wir also zur Datei index.html und zeigen sie im zweiten Formular an. Was das erste Formular angeht, werde ich es für eine Weile verstecken. Das einzige, was wir mit dem Anmeldeformular tun müssen , ist die Anmeldeschaltfläche anzupassen Wir müssen es in die obere rechte Ecke des Formulars verschieben. Und wir müssen auch die Form des Bateson ändern. Die Richtung sollte auf der rechten Seite sein. Im Moment haben wir gemeinsame Stile für beide Schaltflächen. Also wähle ich beide Buttons separat aus und definiere ihre individuellen Stile. Zuerst wähle ich Sign Up UTM Dann nehmen wir das linke Eigentum aus den gängigen Stilen Außerdem werde ich mir das Polster und den Grenzradius schnappen. Dann werde ich diesen Code duplizieren. Lassen Sie uns den Klassennamen ändern, den wir hier benötigen, melden Sie sich an, übrigens. Außerdem müssen wir uns ändern, das ist in Ordnung geraten. Dann brauchen wir eine andere Polsterung. Es werden 0,5, 3,5 Rem und ein RAM sein. Und wir brauchen auch einen anderen Grenzradius. Die Werte werden die folgenden sein. 0,5 Reim. Dann zweimal 100%. Und wieder 0,5 Rampe. In Ordnung, beide Formen sind also maßgeschneidert. Lassen Sie uns weitermachen und beide anzeigen. Es ist also ersichtlich, dass wir hier beide Formen haben. Die Position der Taste ist momentan nicht korrekt. liegt daran, dass es gemäß dem Formular-Wrapper positioniert ist und wir es entsprechend dem Formularelement positionieren müssen es entsprechend dem Formularelement positionieren Um das zu tun, müssen wir dem Formularelement die Position absolut zuweisen . Im Moment sind die Formulare also nicht mehr auf der Seite zentriert. Lass uns weitermachen und das beheben. Zunächst werde ich Transform Translate von hier aus loswerden . Und dann müssen wir die obere und linke Position anpassen. Die oberste Position beträgt 50% minus die Hälfte der Höhe des Formulars. Was die linke Position betrifft, so wird es 50% minus die Hälfte der Breite des Formulars sein. Wir benötigen also die folgenden Berechnungen. Verwenden wir die Calc-Funktion. Die Spitzenposition wird bei 50 Prozent -17,5 gelaufen sein, weil die Höhe 35 gelaufen ist Was die letzte Position angeht, wird es 50-25 RAM sein, da die Breite des Formulars 50 Ran beträgt Ordnung, wie Sie sehen können, sind die Formularelemente zentriert Jetzt haben wir zwei Positionsformen im 3D-Raum. Ich meine, ich werde diese Anmeldung rotieren, denn wie gesagt, wir müssen Elemente im 3D-Raum positionieren , um eine 3D-Umgebung zu erstellen. Wir müssen eine dieser CSS-Eigenschaften verwenden, Wir müssen eine dieser CSS-Eigenschaften verwenden die als prospektiv bezeichnet werden. Und ich werde es dem Container als Wert zuweisen. Lassen Sie uns 200 Rampen zuweisen. Die Formularelemente sind Enkelkinder des Containers. Und um eine 3D-Umgebung auf Verformungen anzuwenden, müssen wir eine weitere Eigenschaft namens transform style with value preserve 3D verwenden transform style with value preserve 3D und sie den übergeordneten Elementen der Formulare zuweisen , müssen wir eine weitere Eigenschaft namens transform style with value preserve 3D verwenden und sie den übergeordneten Elementen der Formulare zuweisen, nämlich ein Formular-Wrapper In Ordnung, jetzt ist es an der Zeit, das Anmeldeformular zu wechseln. Ich werde es separat auswählen. Und dann verwende Transform mit der Funktion „y drehen“. Und als Wert gebe ich dir 270 Grad. Okay, im Moment ist das Anmeldeformular nicht sichtbar, da das Anmeldeformular gedreht ist Und um besser zu sehen, warum es nicht sichtbar ist, kann ich den Wert ändern und ihn auf 250 Grad setzen. Jetzt können wir also sehen , dass das Formular gedreht ist. Sie denken vielleicht, dass wir hier nur 90 Grad gebrauchen könnten. In diesem Fall würde der Inhalt des Formulars jedoch in die entgegengesetzte Richtung gedreht Deshalb verwenden wir 270 Grad. Okay, als nächstes müssen wir das Anmeldeformular auf die linke Seite und ebenfalls direkt tief in den 3D-Raum verschieben die linke Seite und ebenfalls direkt tief in den 3D-Raum Um die Elemente auf die linke Seite zu verschieben, verwende ich die Funktion Translate Z mit dem Wert 25 RAM. Und jetzt müssen wir die Elemente entlang der X-Achse mit dem Wert -25 Rampe bewegen X-Achse mit dem Wert -25 Okay, lassen Sie uns endlich wieder bei 270 Grad herkommen. Das einzige, was wir tun mussten, bevor wir die Knöpfe programmiert haben , ist, die gesamten Formen zu drehen, wahrscheinlich Rapper Das ist ihm also zugewiesen. Transformieren Sie um Y mit dem Wert minus zehn Grad. In Ordnung, das ist es. Jetzt müssen wir anfangen, etwas JavaScript zu schreiben. Wir müssen einen Click-Event-Listener anhängen , um beide Schaltflächen auszuführen Aber zuerst wähle ich beide Schaltflächen aus. Lassen Sie uns eine neue Variable erstellen. Ich nenne es sign up btn und wähle dann das Element mit der Methode querySelector Geben wir hier den Klassennamen an, melden Sie sich an. Dann werde ich diese Codezeile duplizieren. Lassen Sie uns den Namen der Variablen ändern. Es wird Unterschrift sein. Was den Klassennamen angeht, müssen wir uns zwischen ihnen anmelden. Unmittelbar danach fügen wir beiden Event-Listener hinzu. Beginnen wir mit der Methode sign-up btn add event listener mit einem Und die Callback-Funktion, die ausgeführt wird, sobald wir auf die Schaltfläche Anmelden klicken Duplizieren wir diesen Code und ändern das Vorzeichen von Butan in das Zeichen BTN Okay, sobald wir darauf geklickt haben, aber da wir den Fonts-Wrapper drehen müssen, um das zu tun, werde ich einen neuen Class Deforms Wrapper hinzufügen Dann wählen wir den Forms-Wrapper mit dieser neu erstellten Klasse in CSS Und wir werden die Rotation des Elements definieren. Zuallererst werde ich die Standardaktionen der Nähknöpfe verhindern. Wenn wir das nicht tun, scrollt die Seite nach oben, wenn wir zusätzliche Inhalte haben. Also müssen wir in beiden Fällen Ihre Event-Objekte übergeben. Und dann müssen wir den Zahlungsausfall verhindern. Okay, wie gesagt, wir müssen dem Deforms-Wrapper eine neue Klasse hinzufügen Lassen Sie uns zunächst diese Elemente auswählen, eine neue Variable erstellen und sie als Forms-Wrapper bezeichnen Wählen Sie dann die Elemente mit der Methode querySelector aus. Wir brauchen hier den ClassName Forms Wrapper. Dann fügen wir diesen Elementen eine neue Klasse hinzu. Wir benötigen einen Formular-Wrapper, gefolgt von der Eigenschaft class list, die alle Klassen enthält, die das Element hat Dann brauchen wir eine Methode namens add. Und wir müssen hier den Namen der Klasse angeben. Sagen wir Veränderung. Okay, gehen wir zur CSS-Datei und wählen Foams Wrapper mit Sobald wir also auf die Schaltfläche geklickt hatten, mussten wir den Formular-Wrapper drehen Also übergebe ich Ihnen die Transformationsrotation y mit einem Wert von 100 Grad. Wenn wir also auf die Schaltfläche klicken, dreht sich das Formular. Aber wie Sie sehen, hat es seine Position geändert. Also müssen wir die Lag-Position definieren. Verwenden wir noch einmal die sogenannte Funktion. In diesem Fall benötigen wir 50 Prozent plus die Hälfte der Rampe mit der Breite 25. Jetzt sieht alles gut aus. Wir müssen den Effekt glatter machen. Dazu müssen wir Transition verwenden, wobei die Werte 0,5 s transformiert werden, was der Dauer entspricht. Und dann mit 0,5 s wieder links. Wenn ich jetzt klicke, dreht sich das Formular gleichmäßig. Im Moment funktioniert nur die Anmeldeschaltfläche. Also lass uns weitermachen und uns auch um den zweiten Knopf kümmern . Im Fall der zweiten Schaltfläche müssen wir nur die Klassenänderung aus dem Formular-Wrapper entfernen aus dem Formular-Wrapper Also lasst uns weitermachen und uns diese Codezeile schnappen. Fügen Sie es hier ein und ändern Sie es, fügen Sie es hinzu, um es zu entfernen. Jetzt war also alles perfekt und eigentlich sind wir mit diesem Projekt fertig. Wenn Sie der Meinung sind, dass die Formulare auf extra großer Größe kleiner sind , können Sie einfach die Schriftgröße der HTML-Elemente erhöhen . Ändern wir es und machen es, sagen wir, 72,5 Prozent Also jetzt denke ich, dass es besser ist. Und eigentlich sind wir fertig. Wir haben die Arbeit an diesem Projekt abgeschlossen. Hoffentlich war es interessant und nützlich. Gehen wir also zum nächsten Projekt über. 5. Projekt 2 - Haus: In Ordnung, es ist Zeit, unsere nächsten Projekte zu erstellen. In diesem Video werden wir dieses Haus mit HTML, CSS und JavaScript bauen. Lassen Sie uns weitermachen und die Projekte beschreiben. Wir haben hier ein Haus mit ein paar verschiedenen Fenstern. Außerdem gibt es ein blaues Dach und eine Tür. Wenn ich auf die Tür klicke, öffnet sie sich. Und wenn ich den Mauszeiger über das Fenster oben an der Tür bewege, öffnet es sich ebenfalls Das war's also mit diesem Projekt. Lassen Sie uns anfangen, es zu bauen. Ich habe auf dem Desktop einen neuen Ordner namens Haus erstellt . Lassen Sie uns weitermachen und es in VS Code öffnen und unsere Arbeitsdateien für HTML, CSS und JavaScript erstellen . Ich nenne sie index.html, style.css und scripts dot js. Öffnen Sie dann die Datei index.html und erstellen Sie ein einfaches HTML-Dokument. Verwenden wir dafür ein Bild. Wir müssen das Urin-Ausrufezeichen platzieren und dann die Tabulatortaste oder die Eingabetaste drücken Also los geht's. Zunächst ändere ich den Titel. Lass uns dein Haus einfügen. Verknüpfen Sie dann CSS- und JavaScript-Dateien. Ich öffne den Link-Tag. Und dann geben wir hier den Namen der Datei an. die Jobs angeht, die in der Datei gespeichert sind, werde ich das Script-Tag direkt über dem abschließenden Body-Tag öffnen . Und dann gebe ich im Quellattribut den Dateinamen an, script.js. In Ordnung, also sind alle Dateien verlinkt. Lassen Sie uns weitermachen und das Projekt im Browser ausführen. Ich werde Live Server verwenden. Und dann platzieren wir den Editor und den Browser. So wie. Wir sind bereit, mit dem Bau eines Projekts zu beginnen. Zuerst erstelle ich das HTML-Markup. Lassen Sie uns weitermachen und ein div-Tag mit einem Klassencontainer öffnen. Dann öffne ich ein weiteres div-Tag, das den Inhalt umschließt. Weisen wir ihm ClassName House zu. Das Haus wird also aus ein paar verschiedenen Teilen bestehen. Wir werden ein Dach haben, Fenster, dann das Zimmer und auch die Tür. Lassen Sie uns weitermachen und diese Teile erstellen. Ich fange mit dem Dach an. Öffnen wir das Div-Tag mit dem Klassenhauptdach. Dann werde ich vier verschiedene Fenster erstellen. Öffnen wir das Div-Tag. Es wird zwei verschiedene Klassen geben. Das erste wird Fenster sein. Es wird der übliche Klassenname sein. Und dann brauchen wir auch ein Fenster oben links. Lassen Sie uns diese Codezeile dreimal duplizieren. Das zweite Fenster wird also oben rechts sein. Dann haben wir das untere linke Fenster. Und das letzte wird das untere rechte Fenster sein. In Ordnung, das war's mit den Windows. Als Nächstes erstelle ich den Raum, dessen VB-Tag mit dem Klassenzimmer geöffnet ist Der Raum wird also aus drei verschiedenen Teilen bestehen. Wir werden ein Dach über dem Zimmer haben , dann das Fenster und auch die Tür. Öffnen wir ein Div-Tag mit einem Klassenzimmerdach. Als Nächstes erstelle ich ein Fenster. Öffnen wir ein weiteres div-Tag mit einem Fenster an der Spitze der Klasse. Dieses Fenster wird aus zwei verschiedenen Teilen bestehen, der linken Seite und der rechten Seite. Öffnen wir also das div-Tag mit einem Fenster oben links in der Klasse. Dann dupliziere ich diese Codezeile und ändere den Klassennamen, den wir hier benötigen, oberes Fenster, oder? Okay, lassen Sie uns zum Schluss eine Tür erstellen. Ich öffne das Div-Tag, das wird der Wrapper sein, nennen wir es Türrahmen Dann öffne ich in diesem div-Element ein weiteres div-Tag mit der Klassentür. Und schließlich brauchen wir einen Türgriff. Es ist also offen, Div-Tag mit dem Klassentürgriff. In Ordnung, das ist es. Bezüglich des HTML-Markups Lassen Sie uns anfangen, das CSS zu schreiben Zuallererst werde ich einige gängige Stile definieren und zurücksetzen. Wählen wir alle Elemente mit einem Sternchen aus. Ich werde Standard, Margin und Padding abschaffen. Setzen wir also beide Eigenschaften auf Null. Und außerdem werde ich Box-Größe Border-Box setzen. Während dieses Projekts werde ich also RAM als Maßeinheit verwenden. Moment entspricht ein REM 16 Pixeln da die Schriftgröße des HTML-Elements 16 Pixeln entspricht. Ich möchte ein RAM in zehn Pixel umwandeln und dafür müssen wir die Schriftgröße des HTML-Elements verringern . Und wir müssen es auf 62,5% bringen. In Ordnung, lassen Sie uns weitermachen und uns um den Container kümmern. Ich werde es auf die gesamte Seite ausdehnen. Wählen wir es also aus und definieren wir diese Breite. Ich werde es zu 100% schaffen. Was die Höhe angeht, so wird sie 100% des Viewports ausmachen. Also müssen wir es auf 100 vh setzen und dann die Hintergrundfarbe ändern Ich werde hier den RGB-Wert 103150 verwenden. Und dann eins, wieder alle drei. Richtig? Danach wählen wir das Haus aus. Ich werde dieses Element sichtbar machen. Definieren wir also seine Breite und Höhe. Ich setze seine Breite auf 110 RAM. Was die Höhe angeht, so wird es sieben bis RAM sein. Und ändere auch die Hintergrundfarbe. Verwenden wir U, E, F, E F. Also hier haben wir das Haus. Ich werde es in der Mitte der Seite platzieren. Und dafür verwenden wir ein CSS-Grid. Wir müssen Display auf Grid setzen. Und um das Element dann in der Mitte zu platzieren, müssen wir die Option Elemente mit dem Wertezentrum platzieren verwenden. Ordnung, wie Sie sehen können, ist das Element gerade in der Mitte platziert . Das war's mit dem Haus Als Nächstes kümmere ich mich um das Hauptdach. Lassen Sie uns also weitermachen und diese Elemente auswählen. Definieren wir zunächst seine Breite und Höhe. Ich setze die Breite auf 110%. Das ist ziemlich hoch, wird für RAM gründlich sein. Und dann ändere die Hintergrundfarbe. Verwenden wir erneut den RGB-Wert. Sobald Sie Ihre 867145 bestanden haben. Okay? Das Dach ist also machbar, aber es ist klar, dass wir uns um seine Position kümmern müssen. Dafür werde ich ihm eine absolute Position zuweisen. Um es entsprechend dem Haus zu positionieren, das ist das übergeordnete Element, werde ich dem Haus eine relative Position zuweisen. Und danach definieren wir die Eigenschaften oben und links. Ich setze die oberen zwei minus zehn RAM. Was die Position der Linken betrifft , so wird es minus fünf Prozent sein. Es wird also überlegt, das Dach ist positioniert, aber im Moment sieht es nicht ganz gut aus. Wir müssen es in einer 3D-Umgebung drehen. Also müssen wir einen 3D-Raum erstellen. Und dafür müssen wir eine dieser CSS-Eigenschaften verwenden, die als Prospective bezeichnet wird. Stellen wir 200 RAM ein. Und das war's. Lassen Sie uns das Dach entsprechend der X-Achse drehen das Dach entsprechend der X-Achse Verwenden Sie Transform mit der Funktion rotate x. Ich werde das Element um 20 Grad drehen. Okay? Jetzt wird davon ausgegangen, dass das Dach viel besser aussieht. Das einzige, was ich tun werde, ist, die Ecken leicht abgerundet zu machen. Und ich werde noch einen kleinen Schatteneffekt hinzufügen. Verwenden wir also den Grenzradius. Es werden vier Werte benötigt. Die obere linke Ecke wird ein RAM sein, und die obere rechte Ecke wird ebenfalls ein RAM sein Was die untere rechte und die untere linke Ecke betrifft. Ich mache sie mit einer Rampe von 0,5. Und verwende auch Box Shadow mit den Werten 0,5 Gramm als ein Rem. Rem. Und die Farbe auch. Okay, das Hauptdach ist fertig und jetzt müssen wir uns um die Fenster kümmern Wie Sie wissen, werden alle vier Fenster einige gemeinsame Stile haben. Also wähle ich sie mithilfe des allgemeinen ClassName-Fensters aus. Definieren wir zunächst die Breite und Höhe. Ich setze die Breite auf 12 RAM. Die Höhe wird 15 RAM betragen. Was die Hintergrundfarbe angeht, werde ich AAA verwenden. Als Nächstes füge ich dem Windows einen Rahmen hinzu. Weisen wir dem RAM zwei Werte zu, dann wird die Grenze durchgehend sein. Die Farbe. Verwenden wir 333. Danach müssen wir uns um die Positionen der Fenster kümmern . Lassen Sie uns die Position auf absolut setzen. Und danach müssen wir die Positionen für jedes Fenster separat definieren . Lassen Sie uns weitermachen und mit dem oberen Teil des Fensters beginnen. Wählen wir es aus. Ich setze Position auf 20, um zu rammen. Was die linke Position angeht , werden zehn RAM sein Als Nächstes werde ich Sie aus dem oberen rechten Fenster herausnehmen. Also lass uns diesen Code duplizieren. Ändere den Klassennamen, den wir hier im oberen rechten Fenster benötigen , und ändere auch die linke Position in rechts. Als nächstes kommt ein Fenster unten links. Lassen Sie uns im Code noch einmal duplizieren. Der Klassenname wird unteren linken Fenster angezeigt, dann sind die beiden Positionen 43 RAM. Wir brauchen hier die linke Position mit dem gleichen Wert. Und schließlich haben wir das untere rechte Fenster. Lassen Sie uns diesen Code duplizieren. Ändere den Klassennamen, den wir brauchen, gleich hier. Und ändere auch die Lag-Position. Verwenden wir es richtig. Okay, also alle vier Fenster sind positioniert und als Nächstes müssen wir uns um die Form der Fenster oben links und oben rechts kümmern . Wenn wir uns das fertige Projekt ansehen, werden Sie sehen, dass die oberen Seiten dieser beiden Fenster es umgeben. Also lass uns das mit border-radius machen. Wir benötigen für beide Fenster den gleichen Randradius. In der oberen linken Ecke werden 50 Prozent sein. Dann benötigen wir für die obere rechte Ecke den gleichen Wert wie für die untere linke und untere rechte Ecke, sie sind Null. Wir haben also die abgerundeten Fenster. Als Nächstes erstelle ich diese Frames. Und das werde ich mit den Pseudoelementen „Nachher“ und „Vorher“ tun Lassen Sie uns zunächst die horizontalen Linien erstellen. Wählen wir die vorherigen Pseudoelemente aus. Definieren Sie den Inhalt, machen Sie ihn leer. Danach definieren wir Breite und Höhe. Die Breite wird 100% betragen. Was die Höhe angeht, werde ich auf RAM hinweisen. Und ändere auch die Hintergrundfarbe, mache daraus 333. Im Moment sind die Linien also nicht sichtbar, weil wir diese Position definieren müssen. Lassen Sie uns also die Position auf absolut setzen. Und dann definiere ich die Eigenschaften von oben und links. Die oberste Position werden fünf RAM sein. Was die linke Position angeht, setzen wir sie auf Null. Okay, wie Sie sehen können, haben wir hier die horizontalen Linien. Lassen Sie uns weitermachen und die vertikalen Linien erstellen. Ich werde das mit den Pseudoelementen danach machen. Kopieren wir diesen Code und ändern wir das Vorher in das Nachher. Die Breite wird Nullpunkt für RAM sein. Was die Höhe angeht, werde ich sie zu hundert Prozent machen, dann wird die Position Null sein. Lassen Sie uns die linke Position ändern. Ich werde 50 Prozent draus machen. Eigentlich müssen wir die vertikalen Linien in der Mitte des Fensters platzieren . Also müssen wir hier die Transformation verwenden und x mit dem Wert -50% übersetzen Ordnung, wie Sie sehen können, sind alle vier Fenster maßgeschneidert und jetzt müssen wir weitermachen und uns um den Raum kümmern Lassen Sie uns diese Elemente auswählen und ihre Breite und Höhe definieren. Ich setze die Breite auf vier, um zu rammen. Was die Höhe angeht, so werden es acht Prozent sein. Und dann ändere die Hintergrundfarbe, mache es weiß. Das Zimmer wird in der Mitte des Hauses platziert . Kümmern wir uns also um seine Position. Lassen Sie uns die Position auf absolut setzen. Dann müssen wir die linke Position bei 50% halten. Als Nächstes setzen wir die Position auf Null. Und um das Element bei der Transformation in der Mitte zu platzieren , übersetze X mit dem Wert -50 Prozent Okay, das war's vorerst mit dem Zimmer. Als Nächstes kümmere ich mich um ein Dach. Lassen Sie uns weitermachen und das Zimmerdach auswählen. Zunächst definiere ich seine Breite und Höhe. Die Breite wird 110% betragen. Dann beträgt die Höhe 20 RAM. Und ich werde auch die Hintergrundfarbe ändern. Verwenden wir hier den RGB-Wert 867145. Wie Sie sehen können, ist das Dach sichtbar, aber wir müssen es anpassen, weil es im Moment nicht gut aussieht. Kümmern wir uns zunächst um seine Position. Ich setze die Position auf absolut und dann definiere ich die Positionen oben und links. Die oberste Eigenschaft wird minus zehn Reime sein Was die linke Position betrifft, sollte sie minus fünf Prozent sein Danach müssen wir auch die 3D-Umgebung für dieses Dach erstellen . Ich meine, eine 3D-Umgebung, die wir für das Hauptdach des Hauses erstellt haben . Für sie müssen wir eine Eigenschaft verwenden, die als Perspektive bezeichnet wird. Stellen wir es auf 100 RAM ein. Und dann drehe ich das Dach. Wir sollten es entlang der X-Achse um 40 Grad drehen der X-Achse um 40 Grad Okay. Das Dach ist also gedreht, aber es ist nicht ganz sichtbar Um das zu beheben, werde ich Box Shadow verwenden. Lassen Sie uns dem RAM 0,5 rem, 1,5 rem 2D-Wertepunkte zuweisen , und als Farbe verwende ich Schwarz. Okay, lassen Sie uns abschließend die Ecken des Daches mithilfe des Randradius abgerundet machen Daches mithilfe des Randradius abgerundet Ich werde den Randradius in der oberen linken Ecke auf 0,5 RAM festlegen , dann sollte die obere rechte Ecke ebenfalls 0,5 Primzahl sein. Was die untere rechte und die untere linke Ecke betrifft. Stellen wir sie ein, beide Rampe 2.3. In Ordnung, also endlich sind wir mit dem Dach fertig. Als Nächstes kümmere ich mich um das obere Fenster des Zimmers. Lassen Sie uns weitermachen und es auswählen. Definieren wir zunächst die Breite, Höhe und Hintergrundfarbe. Ich setze die Breite auf 16 RAM, dann wird die Höhe auf 17 gesetzt. Führen Sie als Teil die Hintergrundfarbe aus. Stellen wir es auf RGB 112 und dann auf 22,22 ein. Also wir haben hier das Fenster, es ist gerade nicht richtig platziert. Kümmern wir uns also um seine Position. Lassen Sie uns die Position auf absolut setzen. Und dann definiere die Eigenschaften der oberen und der überlappten Fläche. Die oberste Position wird 15 RAM sein. Was die Laborposition angeht, werde ich sie auf 50 Prozent setzen. Und dann, um das Fenster perfekt in der Mitte zu platzieren , verwenden wir Transform, Translate X mit dem Wert -50% Okay, als Nächstes müssen wir die Oberseite drum herum machen. Und ich werde auch eine Grenze hinzufügen. Lassen Sie uns also den Randradius auf 50% setzen. Dann wiederum, wenn 50 Prozent als Null, wieder Null. Das ist die Grenze. Machen wir 0,5 RAM solide daraus. Und als Farbe verwenden wir 555. In Ordnung, als nächstes muss ich mich an Teile dieser Fenster anpassen Dafür haben wir alle bereits zwei div-Elemente erstellt. Wählen wir also das obere Fenster links aus. Zuerst. Lassen Sie uns Breite und Höhe festlegen. Die Breite wird 49,5% betragen, dann wird die Höhe 100% betragen Für die Hintergrundfarbe verwende ich den RGBA-Wert Die Farbe wird weiß sein. Ich meine, wir müssen 5053 mal. Und dann lassen Sie uns die Opazität verringern, auf 0,4 erhöhen. Danach definieren wir die Position. Lassen Sie uns die Position auf absolut setzen und die Eigenschaften oben und links festlegen, beide auf Null. Ordnung, wie Sie sehen können, müssen wir die Form dieser Elemente ändern Wir müssen es oben links abgerundet machen. Verwenden wir also den Rand, Radius oben links und setzen ihn auf 50 ran Abschließend fügen wir diesen Elementen einen Rahmen hinzu. Lassen Sie uns den Rand auf 2,5 Gramm Feststoff setzen. Und als Farbe verwenden wir 555. In Ordnung, das war's mit der linken Seite. Als Nächstes erstelle ich dasselbe auf der rechten Seite. Dafür duplizieren wir einfach diesen Code und ändern überall links in rechts. Okay, also beide Teile werden wie die anderen Fenster erstellt. Wir brauchen hier auch die horizontalen Linien. Ich werde sie erneut mit den vorherigen Pseudoelementen erstellen mit den vorherigen Pseudoelementen Lassen Sie uns also weitermachen und das obere Fenster links auswählen, gefolgt vom vorherigen Pseudoelement Lassen Sie uns zunächst den Inhalt definieren. Es wird leer sein. Dann definiere ich die Breite und Höhe. Stellen wir die Breite auf 100% Dann werde ich 2,5 rem hoch stellen und auch die Hintergrundfarbe ändern. Mach 555 draus. Um das Element sichtbar zu machen, werde ich die Position definieren. Lassen Sie uns die Position auf absolut setzen. Und dann definiere Top-Immobilien. Es werden 35 Prozent sein. Was die Lag-Position angeht, werde ich sie auf Null setzen. In Ordnung, das war's also mit der linken Seite. Ich werde dieselbe Linie auch auf der rechten Seite erstellen . Kopieren wir diesen Code. Fügen Sie es hier ein und ändern Sie den Klassennamen, den wir schreiben müssen. Und dann ändern wir die Position, die wir brauchen, oder? Ebenso. Das ist es also. Das gesamte Fenster ist individuell gestaltet und wir müssen lediglich einen Hover-Effekt erzeugen Sobald wir den Mauszeiger über die Elemente bewegen, sollte sich das Fenster öffnen, wir müssen einen Schwebeeffekt des Fensters hinzufügen und wir müssen beide Seiten drehen Lass uns weitermachen und mit der linken Seite beginnen. Ich wähle das obere Fenster mit der Maus aus. Und dann wählen wir das obere Fenster links aus. Also müssen wir das Element entsprechend der Y-Achse drehen. Also müssen wir die Drehung von y transformieren. Und als Wert verwende ich hier -50 Grad Auch um den Effekt glatter zu machen. Lassen Sie uns Transition mit Transformation 1 s verwenden. Okay? Nehmen wir also an, dass sich das Element dreht, aber das wollen wir hier nicht . Es sollte sich von links drehen. Moment dreht es sich von der Mitte aus, weil der Ursprung der Transformation standardmäßig zentriert ist Wir müssen ihn ändern und ihn nach links bewegen. Also werde ich die Eigenschaften verwenden, die als Transform Origin bezeichnet werden. Und ich setze es auf links. Wie Sie sehen können, dreht es sich jetzt korrekt, aber wir müssen hier noch eine Sache hinzufügen. Wir müssen es in einer 3D-Umgebung drehen. Und dafür verwenden wir wieder die Perspektive. Wir müssen es dem Fenster selbst zuweisen. In diesem Fall setze ich die Perspektive auf Rampe 150. Man kann sehen, dass wir jetzt ein besseres Ergebnis haben. Machen wir weiter und machen dasselbe für die rechte Seite. Ich kopiere diesen Code. Dann von links nach rechts wechseln. Außerdem müssen wir das Minuszeichen von hier aus loswerden. Dann müssen wir den Ursprung der Transformation ändern. In diesem Fall müssen wir den Ursprung so transformieren, dass er richtig ist. Und zum Schluss verwenden wir Transition mit Transformation 1 s. Wie Sie sehen können, funktioniert alles perfekt und mit dem Fenster sind wir fertig. Das einzige, was wir in diesem Projekt tun müssen , ist die Tür zu erstellen. Zunächst müssen wir den Rahmen erstellen. Wählen wir es also aus und definieren Breite und Höhe. Die Breite wird 14 Marken betragen. Was die Höhe angeht, setzen wir sie auf 18 RAM. Und ändere auch die Hintergrundfarbe. Mach es für vier. Als nächstes müssen wir seine Position ändern. Es sollte in der Mitte des Raumes platziert werden. Lassen Sie uns also die Position auf absolut setzen. Wenn dann die Watson-Eigenschaft definiert ist, wird sie Null sein. Dann brauchen wir eine Lag-Position. Es sollten 50 Prozent sein. Und um sie perfekt zu zentrieren, müssen wir Transform Translate X mit dem Wert -50% verwenden Danach füge ich dem Rahmen einen Rahmen hinzu, dem die Werte 0,6 rund, durchgehend und die Farbe zwei bis zwei zugewiesen sind. Und zum Schluss lassen Sie uns die Grenze unten loswerden. Setzen wir den Grenzwert auf Null. In Ordnung, das war's mit dem Türrahmen. Als Nächstes kümmere ich mich um die Tür selbst. Wählen wir also diese Elemente aus. Definieren Sie Breite und Höhe. Ich werde beide auf 100% setzen und auch die Hintergrundfarbe ändern. Verwenden wir hier den RGB-Wert 856824. Okay, es wird davon ausgegangen, dass wir die Tür haben. Als nächstes müssen wir einen Türgriff erstellen. Lassen Sie uns also weitermachen und diese Elemente auswählen. Definieren wir Breite und Höhe die ich mit 23 RAM festlegen werde, dann beträgt die Höhe 0,7 Rampe. Und ändere auch die Hintergrundfarbe. In diesem Fall verwende ich 999. Hier haben wir also den Türgriff und jetzt müssen wir seine Position ändern. Lassen Sie uns die Position auf absolut setzen. Dann werde ich es nach unten verschieben. Lassen Sie uns also die Top-Eigenschaft auf 45% setzen , dann wird die linke Position eine Runde sein. Es wird also davon ausgegangen, dass ein Türgriff korrekt positioniert ist. Und das einzige, was ich tun musste, war, seine Form leicht zu ändern. Ich werde es auf der linken Seite abgerundet machen. Verwenden wir also border-radius mit den Werten 100%, 0,5 etwa 0,5 braun und dann hundert Prozent Also weiter, das ist es. Über die Tür. Alles ist bereit , um den Effekt zu erzielen. Ich wollte diese Tür öffnen. Sobald wir die Tür anklicken. Dafür werde ich ein bisschen JavaScript verwenden. Gehen wir zur Datei script.js. Wir müssen der Tür ein Klick-Event hinzufügen. Aber lassen Sie uns zunächst diese Elemente auswählen. Ich werde eine neue Variable erstellen. Nennen wir es Tür und wählen Sie dann die Div-Elemente mithilfe der Abfrageauswahlmethode Geben wir hier den Klassennamen Punkt an. Danach füge ich diesen Elementen einen Event-Listener hinzu Verwenden wir also die Methode add event listener, die zwei Parameter benötigt Die erste ist die Art der Veranstaltung, die wir hier brauchen, Clique Das zweite Argument wird eine Callback-Funktion sein, die ausgeführt wird , sobald wir auf die Tür klicken Sobald wir klicken, füge ich der Tür eine neue Klasse hinzu. Dann definieren wir mithilfe dieser neuen Klasse neue Stile und CSS, die wir auf die Elemente onclick anwenden möchten Und dann müssen wir beim nächsten Klick diese neu bearbeitete Klasse loswerden. Dafür verwende ich eine der Methoden namens Toggle Also brauchen wir eine Punktklassenliste. Diese Eigenschaft gibt uns alle Klassen, die das Element hat. Und dann verwende ich eine Methode namens Toggle. Nennen wir die Klassennamenänderung. Das war's mit dem JavaScript. Als nächstes müssen wir etwas CSS schreiben. Also müssen wir eine Tür mit Klassenwechsel wählen. Ich werde die Elemente rotieren. Wir müssen also transformieren und entsprechend der Y-Achse mit dem Wert 30 Grad drehen Wenn wir also auf die Tür klicken, dreht sie sich. Zu diesem Effekt müssen wir jedoch noch ein paar Dinge hinzufügen. Die Tür sollte von der rechten Seite gedreht werden. Außerdem müssen wir die 3D-Umgebung erstellen und wir müssen das Effektmodell erstellen. Wir müssen also den Ursprung der Transformation ändern. Stellen wir es so ein, dass ich, um einen 3D-Raum zu schaffen, die Perspektive mit dem Wert hundert Ren verwenden werde. Lassen Sie uns abschließend Transition mit Transformation verwenden. 1 s kam. Wenn wir also auf die Tür klicken, öffnet sie sich gut. Jetzt müssen wir dasselbe für den Türgriff tun. Ich werde dieselbe Technik anwenden. Wählen wir also mit dem Klassenwechsel alle aus, gefolgt vom Türgriff. Wir müssen den Türgriff entsprechend der Z-Achse drehen. Also müssen wir Z transformieren, um einen Wert von 20 Grad drehen. Also wie bei der Tür müssen wir den Ursprung der Transformation ändern. Lass uns nach links gehen. Außerdem müssen wir mit einer Werttransformation von 0,5 s übergehen . Wie Sie sehen, funktioniert alles einwandfrei. Ich möchte hier nur noch eine Sache hinzufügen. Fügen wir dem Übergang der Tür eine kleine Verzögerungszeit hinzu, denn zuerst möchte ich den Türgriff drehen und dann die Tür öffnen. Also addieren wir hier 0,5 s. Okay, jetzt läuft alles perfekt. Und eigentlich sind wir mit diesem Projekt fertig. Ich hoffe es hat dir gefallen. Lassen Sie uns also weitermachen und mit der Arbeit am nächsten beginnen. 6. Projekt 3 - Suchleiste: Okay, lassen Sie uns weitermachen und mit der Arbeit an unserem nächsten Projekt beginnen . In diesem Abschnitt werden wir eine Suchleiste mit einigen netten Animationseffekten erstellen . Lassen Sie uns weitermachen und die Projekte beschreiben. Wie Sie sehen können, haben wir hier ein Suchsymbol in der oberen rechten Ecke der Seite. Wenn ich darauf klicke, beginnt es sich zu bewegen und zu animieren. Es wird an den Anfang der Seite verschoben. Das Eingabefeld erscheint also mit dem schließenden X, aber wenn ich darauf klicke, wird das Eingabefeld ausgeblendet und das Suchsymbol kehren wir zu seiner Standardposition zurück. Das war's also mit diesem Projekt. Es wird ein kleines Projekt sein, aber ich hoffe, es wird interessant. Ich habe auf dem Desktop einen neuen Ordner namens Suchleiste erstellt , der momentan leer ist. Lassen Sie uns weitermachen und es im VS-Code öffnen und unsere Arbeitsdateien für HTML, CSS und JavaScript erstellen . Ich werde sie Punkt-CSS im Stil von index.html und script.js nennen . Ordnung, öffnen wir die Datei index.html und erstellen ein einfaches HTML-Dokument Dafür verwende ich ein Ausrufezeichen. Hier haben wir also grundlegende HTML-Tags. Zunächst ändere ich den Titel. Lassen Sie uns Ihre Suchleiste einfügen. Und dann verknüpfe ich CSS- und JavaScript-Dateien. Öffnen wir das Link-Tag und geben Sie hier den Pfad der Datei an. Was die JavaScript-Datei angeht, öffne ich das Script-Tag direkt über dem abschließenden Body-Tag. Und dann brauchen wir script.js und das Quellattribut. Außerdem werde ich noch einen weiteren Link für Font, Awesome Icons einfügen. Lassen Sie uns weitermachen und nach Font Awesome, CDN, GIS suchen. Dann kopieren wir den ersten Link. Dann müssen wir das Link-Tag öffnen und den Link in das h-Referenzattribut einfügen. Also ist alles bereit. Schließlich werde ich das Projekt über einen Live-Server im Browser ausführen . Dieses VS-Codepaket ermöglicht es uns das Projekt im Browser auszuführen. Und Sie können Änderungen und Aktualisierungen vornehmen , ohne die Seite zu aktualisieren. Jedes Mal. Bevor wir anfangen, den Code zu schreiben, werde ich unsere Arbeitsumgebungen organisieren. Platzieren wir den Editor und den Browser nebeneinander. In Ordnung, also können wir endlich anfangen, den Code zu schreiben. Zuallererst werde ich HTML-Markup erstellen. Öffnen wir den Eingabe-Wrapper für die Klassensuche mit dem Div-Tag. Es wird ein Sucheingabefeld enthalten. Öffnen wir also ein weiteres div-Tag mit der Klassensucheingabe. Ich werde zwei verschiedene Elemente weitergeben. Die erste ist die Eingabe mit dem Typtext und dem Platzhalterattribut mit einem Wert, z. B. für das zweite Element wird es die X-Schaltfläche zum Schließen sein Ich werde hier Font, Awesome Icon verwenden. Öffnen wir I-Elemente. Und den Klassen zugewiesene haben eine S-, f-, k-Zeit. Richtig? Danach müssen wir ein Suchsymbol erstellen. Es ist also ein offenes Div-Tag mit dem Klassensuchsymbol. Dann lass uns dein Font Awesome Icon für die Klassen FAS einfügen , eine Suche In Ordnung, das war's mit dem HTML-Markup. Jetzt ist es an der Zeit, diese Elemente anzupassen und mit dem Schreiben von CSS zu beginnen. Zuallererst werde ich einige Standardstile erstellen und zurücksetzen. Ich wähle alle Elemente mit einem Sternchen aus. Zuallererst werde ich die standardmäßigen Margen und Padding loswerden standardmäßigen Margen und Padding Lassen Sie uns beide Eigenschaften auf Null setzen. Dann werde ich Box-Größe Border-Box setzen. Während dieses Projekts. Ich werde 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 1 g in zehn Pixel umrechnen. Und dafür müssen wir die Schriftgröße der HTML-Elemente verringern und auf 62,5 Prozent setzen Wie Sie sehen können, wurden jetzt alle Elemente kleiner. Ordnung, zunächst werde ich das Projekt so anpassen Ich meine, ich werde die Elemente hier oben auf der Seite stylen und platzieren. Und dann schauen wir uns hier die Animationen an. Lassen Sie uns also weitermachen und die Wrapper-Div-Elemente auswählen und deren Breite und Höhe definieren Ich werde mit 200 Prozent beginnen. Dann wird die Höhe fünf Rem betragen. Und ändere auch die Hintergrundfarbe. Ich werde hier den RGBA-Wert 55, 69, 69,5 verwenden . Als Nächstes platziere ich die Elemente dafür in der Mitte des Wrappers Verwenden wir Flexbox. Wir brauchen Display Flex. Dann verwende ich für die horizontale Zentrierung justify-content Was die vertikale Zentrierung angeht, müssen wir die Artikel mittig ausrichten Ordnung, die Elemente sind also perfekt in der Mitte platziert Lassen Sie uns weitermachen und beginnen, die Sucheingabe anzupassen. Zuerst wähle ich diese Wrapper aus und definiere die Breite Machen wir 30 Rennen draus. Danach wähle ich das Eingabeelement selbst aus. Definieren wir zunächst die Breite und lassen Sie es 27 laufen. Und außerdem werde ich die Hintergrundfarbe transparent machen . Als Nächstes entferne ich den Standardrahmen und belasse ihn nur am unteren Rand. Also brauchen wir keine Grenze. Und dann unterste Grenze mit den Werten 0.1 RAM solid. Und als Farbe werde ich 999 verwenden. Okay, danach kümmern wir uns um die Schriftgröße. Ich werde es auf 1,5 g einstellen. Machen Sie auch etwas Abstand zwischen den Buchstaben. Stellen wir es auf 0,15 Runden ein. Ich werde auch die Standardeinstellungen entfernen. Gliederung. Setzen wir es auf Null. Dann ändere die Farbe. Siehst du hier, 555. Und zum Schluss werde ich auf der rechten Seite etwas Platz schaffen . Lassen Sie uns den Rand rechts auf eine Rampe setzen. Okay, das war's mit den Eingabefeldern. Lass uns weitermachen und die X-Taste starten. Wählen wir es aus. Zunächst setze ich die Schriftgröße auf 1,5 Gramm. Dann ändere ich die Farbe. Machen wir 999 draus. Und mache den Cursorzeiger. Okay, bevor wir weitermachen und das Suchsymbol anpassen, möchte ich beide Elemente vertikal in der Mitte ausrichten vertikal in der Mitte Und dafür verwenden wir Flexbox. Wir müssen das Display biegen und dann die Artikel in der Mitte ausrichten. Okay, lassen Sie uns weitermachen und das Suchsymbol anpassen. Lassen Sie uns die Wrapper-Entwicklungen auswählen. Zuerst definiere ich die Schriftgröße. Machen wir 1,5 RAM draus. Und dann setze ich die Position auf absolut. Wir platzieren das Suchsymbol vor den Eingabefeldern. Ich definiere die Spitzenposition als 1,7 Rem. Was die richtige Position angeht, werde ich eine kleine Berechnung anstellen. Wie Sie wissen, beträgt die Breite der Sucheingabe 30 Mal. Um das Suchsymbol vor den Sucheingaben zu platzieren , müssen wir die halbe Breite der Sucheingabe auf 50 Prozent erhöhen. Also werde ich eine der Funktionen namens calc verwenden. Und dann brauchen wir 50 Prozent plus 15 Läufe. Wie Sie jetzt sehen können, befindet sich das Symbol vor der Sucheingabe. Aber ich denke, wir brauchen etwas Abstand zwischen ihnen. Also statt 15 RAM verwenden wir 16 Rent. In Ordnung, lassen Sie uns abschließend die Farbe des Symbols ändern. Wählen wir Ionen aus. Stellen Sie die Farbe auf 999 und ändern Sie auch den Cursor. Machen Sie ein Argument. In Ordnung, also ist alles bereit, um die Animationen zu erstellen. Wie du verkauft hast. müssen wir das Eingabefeld und die X-Schaltfläche ausblenden. Außerdem müssen wir das Suchsymbol in die obere rechte Ecke der Seite verschieben . Also lass uns weitermachen und das tun. Ich werde diesen Sucheingabe-Wrapper verstecken. Verwenden wir dazu die Opazität mit dem Wert Null. Und auch versteckte Sichtbarkeit. Dann wurde die richtige Position dieses Suchsymbols geändert. Machen wir es richtig, Eigentum für drei Ran. Okay, jetzt ist es an der Zeit , Animationen zu erstellen. Schauen wir uns das fertige Projekt an. Sobald ich auf das Symbol klicke, bewegt es sich und vergrößert sich. Wir werden während der Animation ein paar verschiedene Schritte machen. Lassen Sie uns weitermachen und CSS-Keyframes erstellen. Ich werde es Search Icon Anime nennen. Also von 0% auf 40% ändert das Element seine oberste Position und auch die Schriftgröße. Bei 0% werden wir also Position 1.7 laufen lassen. Was die 40 Prozent angeht, werden wir zwei Positionen mit einem Wert von 40% haben. Und auch die Schriftgröße mit einem Wert von 25 rampe. Dann behält das Element bei einem Wert von 40 bis 60% seine Spitzenposition. Aber wir werden die richtige Position ändern. Also bei 60 Prozent werden wir es haben, wieder an der Spitze mit 40 Prozent. Das ist wahrscheinlich die richtige Position. Wir werden 50 Prozent plus 16 Rampen berechnen. Schließlich ändern die Elemente ihre Position von 60% auf 100%, ändern die Elemente ihre Position von 60% auf 100%, aber wir behalten die richtige Position bei. Bei 100% haben wir also eine Top-Immobilie mit dem Wert 1,7 rem und die richtige Position mit dem vorherigen Wert. Die CSS-Keyframes sind also fertig. Jetzt müssen wir diese Animation auf das Element anwenden. Dafür verwende ich die Animationseigenschaft. Wir müssen hier den Namen der Keyframes und dann die Dauer der Animation angeben und dann die Dauer der Animation Es wird 1 s dauern. Sie können also sehen, dass sich das Symbol bewegt und die Animation einwandfrei funktioniert. Wir haben hier ein kleines Problem. Sobald die Animation beendet ist kehrt das Symbol auf seine Standardposition zurück. brauchen wir nicht. Wir müssen die Position beibehalten, die wir bei 100 Prozent haben. Um das zu tun, müssen wir also einen der Werte verwenden, die als vorwärts kamen bezeichnet werden Jetzt kann es sehen, dass alles gut funktioniert. Eigentlich müssen wir diese Animation ausführen , sobald wir auf das Symbol klicken. Jetzt ist es an der Zeit, mit dem Schreiben von JavaScript zu beginnen. Wir müssen einen Click-Event-Listener an das Suchsymbol anhängen einen Click-Event-Listener an das Suchsymbol Also wähle ich zunächst dieses Symbol aus. Lassen Sie uns eine neue Variable erstellen und sie Suchsymbol nennen. Ich werde dieses Element mithilfe der Abfrageauswahlmethode auswählen mithilfe der Abfrageauswahlmethode Geben wir hier den Klassennamen, das Suchsymbol, gefolgt vom Tag-Namen an. Danach füge ich dem Suchsymbol einen Event-Listener hinzu Wir müssen hier das Klick-Event angeben. Außerdem müssen wir Ihnen eine Callback-Funktion übergeben, die ausgeführt wird, sobald wir auf das Suchsymbol klicken Wie Sie wissen, müssen wir Animationseigenschaften auf dieses Suchsymbol anwenden . Um das zu tun, füge ich dem Suchsymbol, also dem übergeordneten Element, eine neue Klasse hinzu. Dann wählen wir dieses Element mithilfe der neu erstellten Klasse in CSS aus. Und wir werden die Animationseigenschaften des Elements anwenden. Wir brauchen also Ihr Suchsymbol, dann müssen wir Zugriff auf die übergeordneten Elemente erhalten. Also werde ich hier eine Eigenschaft namens Parent Elements verwenden. Als Nächstes benötigen wir eine weitere Eigenschaft namens Klassenliste. Es enthält alle Klassen , die das Element hat. Und dann verwende ich die Methode Add. Spezifizieren. Hier die Klasse, sagen wir mal, wechseln. Okay, das war's jetzt mit JavaScript Gehen wir zurück zur CSS-Datei Wie gesagt, jetzt müssen wir das Suchsymbol mit einem Klassenwechsel auswählen. Dann müssen wir diese Codezeile hierher verschieben. Wenn ich jetzt auf das Suchsymbol klicke , wird die Animation ausgeführt. Okay, als Nächstes müssen wir den Sucheingabewrapper anzeigen. Im Moment ist es versteckt. Auf die gleiche Weise werde ich den Klassenwechsel verwenden. Lassen Sie uns zunächst einen Rapper auswählen, eine neue Variable erstellen und sie als Sucheingabewrapper bezeichnen Ich werde dieses Element erneut mit der Methode querySelector auswählen erneut mit der Methode querySelector Geben wir hier den Klassennamen und den Sucheingabewrapper an. Dann fügen wir diesen Elementen einen Klassenwechsel hinzu. Also brauchen wir Sucheingabe, Wrapper, Punkt, Klassenliste, Punkt, Hinzufügen mit einer Klassenänderung Gehen Sie dann zurück zur CSS-Datei und wählen Sie den Wrapper mit der Klassenänderung Um den Wrapper für die Sucheingabe anzuzeigen, benötigen wir also Opazität eins und Visibility Visibility Visibility Wenn ich jetzt auf das Suchsymbol klicke, erscheint die Sucheingabe. Im Moment scheint es ohne Wirkung zu sein. Also müssen wir Transition mit den Werten All than the duration is going to be 0.5 s verwenden den Werten All than the duration is going to be 0.5 s Außerdem verwende ich hier eine kleine Verzögerungszeit von 1 s. Okay, wie Sie sehen können, haben wir hier einen viel netteren und cooleren Effekt Bevor wir weitermachen und anfangen, den Schließknopf zu programmieren, möchte ich hier noch etwas hinzufügen. Sobald die Sucheingabe angezeigt wird, möchte ich, dass sie automatisch fokussiert wird. Dafür verwende ich eine der Methoden namens Fokus. In diesem Fall müssen wir jedoch 1 s warten , bis die Elemente erscheinen. Wählen wir also zunächst die Eingabeelemente erstellen Sie eine neue Variable. Und Kollegen suchen nach Eingaben. Ich werde das Element erneut mit der Methode querySelector auswählen erneut mit der Methode querySelector Geben wir hier die Sucheingaben für den Klassennamen an, gefolgt von der Eingabe des Tag-Namens. Also werde ich eine Methode namens set time out verwenden. Es werden zwei Parameter benötigt. Die erste ist eine Callback-Funktion. Lassen Sie uns den Punktfokus Ihrer Sucheingabe einfügen. Was das zweite Argument betrifft wird es die Menge an Zeit sein. In diesem Fall. Wie gesagt, wir brauchen eine Sekunde, also werde ich hier 1.000 Millisekunden verstreichen Wenn wir jetzt die Sucheingabe anzeigen, wird sie automatisch fokussiert. Jetzt müssen wir weitermachen und die X-Taste zum Laufen bringen. Sobald wir darauf klicken, müssen wir den Sucheingabe-Wrapper ausblenden Außerdem müssen wir das Suchsymbol wieder auf seine Standardposition verschieben . Wählen wir zunächst die X-Taste. Ich werde eine neue Variable erstellen. Nennen wir es Schließsymbol. Und wählen Sie dann die Elemente mit der Methode querySelector aus. Ich möchte hier den Klassennamen, Sucheingaben, gefolgt vom Tag-Namen I angeben . Danach müssen wir den Click-Event-Listener an das Symbol anhängen Click-Event-Listener an das Symbol Geben wir hier den Ereignistyp an, klicken Sie. Und wir brauchen auch eine Callback-Funktion. Sobald wir also auf die Schaltfläche klicken, müssen wir die Klassenänderung aus dem Sucheingabewrapper und dem Suchsymbol entfernen aus dem Sucheingabewrapper . Also nehme ich diese beiden Zeilen, füge sie hier ein und ändere sie dann in, um sie zu entfernen. Wenn ich jetzt auf die X-Schaltfläche klicke, werden die Elemente ausgeblendet und auch das Suchsymbol, wir kehren zu seiner ursprünglichen Position zurück. Eigentlich funktioniert alles gut, aber wir müssen hier einige Effekte hinzufügen. Zuerst werde ich Elemente mit einem gewissen Übergang ausblenden. Verwenden wir also Transition mit dem Sucheingabe-Wrapper. Lassen Sie uns die Wahrheitswerte alle und 0,5 s zuweisen . Wie Sie sehen, verstecken sich die Elemente nun reibungslos. Als Nächstes kümmere ich mich um dieses Suchsymbol. Wir werden eine separate Animation erstellen , in der wir die Bewegung des Symbols nach rechts definieren . Lassen Sie uns neue CSS-Keyframes erstellen. Ich werde sie Search, Icon und M2 nennen. Wir werden zwei verschiedene Schritte haben, 0% und 100%. Bei 0% müssen wir die richtige Position definieren. Und wir müssen die Berechnung durchführen, 50 Prozent plus 16 RAM. Das ist für die 100% Wir müssen die richtige Position als drei Runden definieren. Lassen Sie uns abschließend diese Animation auf das Suchsymbol anwenden. Verwenden Sie die Animationseigenschaft mit dem Wert Suchsymbol und m2. Dann 0,5 s. Und wir brauchen auch Vorwärts. In Ordnung, wie Sie sehen können, funktioniert alles perfekt. Und eigentlich sind wir mit diesem Projekt fertig. Ich hoffe, dir hat dieses Video gefallen und du hast ein paar neue Dinge gelernt. Lass uns weitermachen und uns um das nächste Projekt kümmern. 7. Projekt 4 - Uhr: In Ordnung, es ist an der Zeit, weiterzumachen und mit dem Bau unseres nächsten Projekts zu beginnen In diesem Video erstellen wir eine Uhr mit HTML, CSS und JavaScript. Es wird eine Standarduhr sein, die Sie wahrscheinlich zu Hause an der Wand haben. Wir haben hier Zahlen für Stunden und auch drei verschiedene Pfeile die die Stunden, Minuten und Sekunden angeben. In Ordnung, lassen Sie uns weitermachen und mit der Erstellung eines Projekts beginnen. Ich habe einen neuen Ordner auf dem Desktop namens Uhr , der gerade leer ist. Lassen Sie uns es im VS-Code öffnen und unsere Arbeitsdateien für HTML, CSS und JavaScript erstellen . Ich nenne sie index.html, style.css und scripts dot js. Öffnen Sie dann die Datei index.html und erstellen Sie ein einfaches HTML-Dokument. Dazu müssen wir hier ein Ausrufezeichen platzieren und dann die Tabulatortaste oder die Eingabetaste drücken Hier haben wir also die grundlegenden HTML-Tags. Das erste, was ich tun werde, ist den Titel zu ändern. Lass uns deine Uhr einsetzen. Und dann verknüpfe ich CSS- und JavaScript-Dateien. Lassen Sie uns das Link-Tag im Hauptelement öffnen und hier den Teil der CSS-Datei angeben. 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 in den Quellattributen angeben. Okay, wir sind bereit zu beginnen. Das letzte, was ich tun werde, ist , das Projekt im Browser auszufü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 Änderungen und Aktualisierungen vorzunehmen , ohne die Seite jedes Mal zu aktualisieren. Okay, lassen Sie uns zum Schluss Browser und Editor nebeneinander platzieren , etwa so. Und fang an. Ich werde das HTML-Markup erstellen. Dann werden wir es stylen. Ich meine, wir lassen die Elemente wie die Uhr aussehen. Und dann werden wir es mit JavaScript zum Laufen bringen. Lassen Sie uns also weitermachen und mit der Erstellung des HTML-Markups beginnen . Öffnen wir den Deep-Tag , der der Container sein wird. Es wird den gesamten Inhalt enthalten. Dann öffne ich ein weiteres div-Tag innerhalb des Containers, das der Klassenuhr zugewiesen ist. Die Uhr wird aus zwei verschiedenen Teilen bestehen, aber wir haben die Zahlen und die Pfeile. Es ist ein offenes Div-Tag mit den Klassennummern. Wir werden vier verschiedene Zahlen haben. Öffnen wir das Div-Tag mit der Klasse 12. Und als Inhalt, lass uns deinen 12. einrichten. Dann werde ich diese Codezeile dreimal duplizieren und dann die Klassennamen und auch den Inhalt ändern . Wir brauchen drei. Dann 6.9. Das war's mit den Zahlen. Öffnen wir den Div-Tag, der die Umhüllung der Pfeile sein wird Wir werden drei verschiedene Pfeile haben. Öffnen wir den Div-Tag mit der Unterrichtsstunde. Dann werde ich es zweimal duplizieren und die Klassennamen ändern. Wir brauchen hier Minuten und Sekunden. In Ordnung, das war's mit dem HTML-Markup. Im Moment haben wir hier nur die Zahlen. Lassen Sie uns also damit beginnen , die Uhr anzupassen. Zuallererst werde ich den Link für die Google-Schriftarten einfügen. Ich werde während dieses Projekts eine der Google-Schriftarten verwenden . Also lasst uns weitermachen und die Google Fonts-Website besuchen. Suchen Sie dann nach einer der Schriftarten namens Concert One. Im Moment haben wir hier einen Text als Beispiel, aber wir sind an Zahlen interessiert. Wir können den Satz also einfach in Ziffern umwandeln und sehen, wie die Schrift aussieht. Wählen wir den Stil aus. Um die Pons zu verknüpfen, haben wir zwei verschiedene Möglichkeiten. Sie können entweder diesen Link abrufen und in das Hauptelement einfügen, oder Sie können auf Import klicken, diese URL abrufen und in die CSS-Datei einfügen . Ordnung, sobald die Schrift ausgewählt ist, setze ich als Nächstes einige Standardstile zurück Wählen wir alle Elemente mit einem Sternchen aus und entfernen Sie Standard, Rand und Padding Ich werde beide auf Null setzen und auch die Schriftfamilie für jedes Element ändern . Lassen Sie uns hier das Cuckoo-Schriftkonzept in einem Kurs verwenden hier das Cuckoo-Schriftkonzept in einem Ordnung, wie Sie sehen können, sehen In Ordnung, wie Sie sehen können, sehen die Zahlen jetzt anders aus Also werde ich dieses Projekt machen, ich werde den RAM als Maßeinheit verwenden . Moment entspricht 1 g 16 Pixeln, da die Schriftgröße des HTML-Elements 16 Pixeln entspricht. Ich möchte ein RAM in zehn Pixel umwandeln. Deshalb müssen wir die Schriftgröße der HTML-Elemente verringern die Schriftgröße der HTML-Elemente und sie auf 62,5 Prozent erhöhen Wie Sie sehen können, wurden die Zahlen kleiner. Als Nächstes kümmere ich mich um den Container. Wählen wir es aus. Und lassen Sie uns zunächst seine Breite und Höhe definieren. Ich setze die Breite auf 100 Prozent. Was die Höhe angeht, werde ich sie zu 100% aus dem Viewport machen 100% aus dem Viewport Also brauchen wir 100 Vh. Als Nächstes platziere ich den Inhalt des Containers in die Mitte. Und dafür verwenden wir Flexbox. Wir müssen das Display auf Flex einstellen. Und dann müssen wir für die horizontale und vertikale Zentrierung den Inhalt in der Mitte ausrichten und die Artikel mittig ausrichten Ordnung, jetzt wird der Inhalt in der Mitte platziert und wir können die Uhr selbst anpassen Lassen Sie uns weitermachen und Uhr auswählen und ihre Breite und Höhe definieren. Ich setze beide auf 45. Lauf. Ändern Sie auch die Hintergrundfarbe. Ich werde es grau machen, indem ich die Farbe ACA, CAC verwende. Als Nächstes mache ich die Uhr rund. Dafür müssen wir border-radius mit dem Wert 50% verwenden. Dann lass uns einen kleinen Rand erstellen. Stellen wir die Breite auf 0,5 RAM ein und machen es dann solide. Was die Farbe angeht, verwenden wir 777. Und zum Schluss erzeugen wir einen kleinen Schatteneffekt. Auf allen vier Seiten. Benutze Box-Shadow mit den Werten 0,5 Gramm zweimal als ein RAM Und als Farbe verwenden wir 555. Und dann platziere ich hier zweimal -0,5 Rem ein Zimmer. Und die gleiche Farbe. In Ordnung, schauen wir uns das mit der Uhr an. Als Nächstes kümmere ich mich um die Zahlen. Wählen wir das Wrapper-Div-Element und definieren es innerhalb der Höhe In diesem Fall müssen wir dieselbe Breite und Höhe vom übergeordneten Element übernehmen, bei dem es dieselbe Breite und Höhe vom übergeordneten Element übernehmen, bei dem um eine Uhr handelt Also müssen wir Breite und Höhe festlegen, beide sollen vererbt werden In Ordnung? Danach wähle ich alle div-Elemente innerhalb der Zahlen aus. Also werden wir zuerst die Zahlen positionieren. Lassen Sie uns die Position auf absolut setzen. Um die Zahlen dann entsprechend dem übergeordneten Element zu positionieren , müssen wir die Position der Zahlen auf einen Relativen setzen. Und danach erhöhen wir die Schriftgröße der Zahlen. Mach 2,5 Rem draus. In Ordnung, jetzt werde ich jedes einzeln positionieren. Lass uns weitermachen und mit dem 12. beginnen. Es wird oben auf der Uhr platziert. Wählen wir es also aus und stellen es auf Position 21 ein. Dann müssen wir es horizontal zentrieren. Dafür setze ich die linke Position auf 50 Prozent. Und dann müssen Sie für eine perfekte Zentrierung Transform mit der Translate-X-Funktion verwenden Und wir müssen die Elemente um -50% übersetzen. In Ordnung? Als nächstes haben wir drei. Wählen wir es aus. Im Fall von drei benötigen wir die richtige Position, um ein RAM zu sein. Und dann müssen wir Elemente vertikal zensieren. Also müssen wir die Position auf 50 Prozent festlegen. Und in diesem Fall müssen wir transformieren, y -50% übersetzen. Lassen Sie uns weitermachen und uns um den Rest der Zahlen kümmern . Der nächste ist sechs. In diesem Fall müssen wir eine Position für einen Lauf festlegen. Dann nehmen wir diese beiden Zeilen von hier aus. Was die letzte Zahl betrifft, die neun ist, brauchen wir die linke Position, um ein RAM zu sein. Und dann brauchen wir diese beiden Zeilen auch hier. In Ordnung, also sind alle vier Zahlen positioniert. Als Nächstes ändere ich die Farbe. Machen wir es weiß. Und erzeugen Sie auch einen kleinen Schatteneffekt. Verwenden Sie einen Textschatten, dessen Werte dreimal auf RAM zeigen. Und die Farbe auch. Das war's mit Zahlen. Lass uns weitermachen und uns um die Pfeile kümmern. Lassen Sie uns zunächst diese Breite und Höhe als Zahlen definieren . Ich werde Breite und Höhe von der Uhr übernehmen. Lassen Sie uns beide erben. Als Nächstes definiere ich die Position. Machen wir es absolut. In diesem Fall springt das Element aus dem normalen Seitenfluss. Und um es entsprechend dem übergeordneten Element zu positionieren , müssen wir es relativ zur Uhr positionieren. Als Nächstes definieren wir die Top- und Lag-Eigenschaften Ich setze beide auf Null. Sollen wir die Pfeile in der Mitte der Uhr platzieren? Und um das zu erreichen, werde ich wieder Flexbox verwenden Wir müssen die Anzeige flexibel gestalten und dann das Inhaltszentrum ausrichten und die Artikel in der Mitte ausrichten. In Ordnung, das war's mit der Verpackung. Als Nächstes erstelle ich diesen kleinen Kreis. Es wird mit dem vorherigen Pseudoelement erstellt. Wählen wir also die Pfeile aus gefolgt vom vorherigen Pseudoelement Lassen Sie uns den Inhalt leeren. Dann definierte Breite und Höhe sowie die Hintergrundfarbe. Ich setze Breite und Höhe auf 2,5 RAM. Was die Hintergrundfarbe angeht, so wird sie weiß sein. Hier haben wir also die Elemente, Moment hat es die Form eines Quadrats. Also lass uns einen Kreis daraus machen. Und lassen Sie uns auch einen kleinen Schatteneffekt machen. Lassen Sie uns auch den Grenzradius auf 50 Prozent setzen , den Schatten. Verwenden wir Box Shadow, wobei die Werte zweimal auf RAM zeigen. Dann 0,5 RAM. Und als Farbe verwenden wir 777. In Ordnung, sagen wir über einen Kreis. Lass uns weitermachen und uns um die Pfeile kümmern. Moment sind sie nicht sichtbar , weil wir nur die leeren div-Elemente haben. Lassen Sie uns weitermachen und alle div-Elemente innerhalb der Pfeile auswählen . Zuallererst die definierte Breite und Höhe sowie die Hintergrundfarbe. Ich werde mit 2,7 Rem beginnen. Dann wird die Höhe 12 sein. Führe als Teil der Hintergrundfarbe aus, ich werde die Farbe f, f, f 0, f phi verwenden . Jetzt sind die Elemente sichtbar. Als Nächstes kümmere ich mich um ihre Positionen. Ich werde sie in der Mitte dieses Kreises platzieren. Lassen Sie uns also die Position auf absolut setzen. Und dann definiere die unterste Position und mache 50%. Danach füge ich den Pfeilen einen kleinen Schatteneffekt hinzu. Verwenden wir Box-Shadow. Der Wert ist Punkt, um zweimal ausgeführt zu werden, dann 0,5 RAM und die Farbe 777. Okay, lassen Sie uns abschließend die Form der Elemente ändern , damit sie wie die Pfeile aussehen. Ich werde das mit Border-Radius machen. Der Grenzradius nimmt also vier verschiedene Werte an. Die oberen linken und oberen rechten Ecken werden zu 100% angezeigt. S4, die untere rechte und untere linke Ecke, ich werde sie zu Nullen machen. Wie Sie sehen können, sehen die Elemente jetzt wie die Pfeile aus. Im Moment sehen wir hier nur einen Pfeil, aber alle drei Pfeile werden angezeigt. Sie werden übereinander gelegt. Das nächste, was ich tun werde, ist, die Pfeile hinter diesem Kreis zu platzieren. Und dafür können wir die Z-Index-Eigenschaft mit einem höheren Wert als Null verwenden die Z-Index-Eigenschaft mit einem , sagen wir zehn Richtig? Danach werde ich die Pfeile separat anpassen. Fangen wir mit den Sekunden an, da sie über den restlichen Pfeilen liegen. Ich werde die Hintergrundfarbe ändern. Stellen wir es auf C, F, E sechs ein. Im Moment hat sich nichts geändert. Und das passiert, weil wir die Hintergrundfarbe der Pfeile bereits geändert haben die Hintergrundfarbe der Pfeile bereits geändert , als wir sie mit dem div-Tag ausgewählt haben. Und es hat eine höhere Priorität. Um diesen Stil zu überschreiben, müssen wir das Element anhand der Elemente des übergeordneten Elements auswählen anhand der Elemente des übergeordneten Elements Ich meine Pfeile. Jetzt ist die Hintergrundfarbe geändert. Außerdem drehe ich den Pfeil. Verwenden wir Transform mit der Rotationsfunktion. Und ich werde den Pfeil drehen. Tschüss, sagen wir 270 Grad. Moment wird der Pfeil von der Mitte aus gedreht, da der Ursprung der Transformation standardmäßig auf die Mitte gesetzt ist In diesem Fall müssen wir den Ursprung der Transformation in die untere Mitte stellen . Wie Sie sehen, ist das Problem jetzt behoben. Als Nächstes kümmern wir uns um die wahrscheinliche Stunde. Zweitens müssen wir es mithilfe des übergeordneten Elements auswählen , da wir seine Höhe verringern werden . Stellen wir seine Höhe auf zehn RAM ein. Und außerdem werde ich den Pfeil drehen. Drehen wir es um 90 Grad. Ordnung, endlich ist die Uhr maßgeschneidert und alles ist bereit, um die Arbeit zu Wie gesagt, wir werden das mit JavaScript machen. Lassen Sie uns also weitermachen und die Datei script.js öffnen. Als erstes wähle ich alle drei Pfeile aus. Lassen Sie uns also weitermachen und eine neue Variable erstellen. Ich nenne es Unser. Wählen Sie dann den Pfeil mithilfe der Abfrageauswahlmethode aus. Geben wir hier den Klassennamen Stunde an. Dann werde ich diese Codezeile zweimal duplizieren. Ändern wir den Namen der Variablen, wir benötigen Minuten. Und außerdem brauchen wir hier die Unterrichtsminute und dann brauchen wir hier den zweiten und den Klassennamen. Mal sehen, geben Sie auch eine Sekunde ein. In Ordnung, danach erstelle ich eine Funktion. Nennen wir es festes Datum. In dieser Funktion werden wir es schaffen, die Pfeile richtig zu bedienen. Und dann rufen wir diese Funktion nach jeder Sekunde auf, indem wir die Methode des festgelegten Intervalls verwenden. Zunächst erstelle ich eine Variable, die uns den aktuellen Status angibt. Ich nenne es. Jetzt. Es sollte dem neuen Datum entsprechen. Schauen wir in der Konsole nach, oder diese Variable gibt uns, ich werde console.log ausführen. Jetzt. Als Nächstes rufe ich diese Funktion auf. Aber mit der Methode des festgelegten Intervalls. Tatsächlich ermöglicht uns diese Methode die Funktion mit einigen Integralen auszuführen Es braucht zwei Argumente. Der erste ist der Name der Funktion. In unserem Fall ist es ein festgelegtes Datum. Soweit das zweite Argument der Betrag des Intervalls ist , ausgedrückt in Millisekunden In unserem Fall werden es tausend Millisekunden sein. Lassen Sie uns die Seite überprüfen und zur Registerkarte Konsole wechseln. Wie Sie sehen können, erhalten wir hier nach jeder Sekunde das aktuelle Datum und die aktuelle Uhrzeit sowie die Zeitzone. Ordnung, als Nächstes müssen wir die Sekunden, Minuten und Stunden getrennt definieren , Minuten und Stunden getrennt Lassen Sie uns also eine neue Variable erstellen. Ich nenne es Get Second. Um die Sekunden von der aktuellen Uhrzeit abzurufen, müssen wir eine der integrierten Datumsmethoden namens get seconds verwenden . Also brauchen wir jetzt Punkte und Sekunden. Wenn wir diese Variable in der Konsole überprüfen, erhalten wir Sekunden. Ebenso müssen wir Minuten und Stunden definieren. Lassen Sie uns diese Codezeile also zweimal duplizieren und dann die Namen der Variablen und auch die Namen der Methoden ändern . Wir brauchen. Holen Sie sich Minuten und holen Sie sich Stunden. In Ordnung, also werden alle drei Variablen erstellt. Wie Sie sehen können, hat unsere Uhr die Form eines Kreises und die Größe des Kreises entspricht 360 Grad. Wir müssen Sekunden, Minuten und Stunden in Grad umrechnen , um die Momentenanteile jedes Pfeils zu definieren . Lass uns weitermachen und mit diesen Sekunden beginnen. Ich werde eine neue Variable erstellen. Nennen wir es, sagen wir zweiten Grades. Um Sekunden in Grad umzurechnen, müssen wir also die folgende Formel verwenden. Wir müssen die aktuelle Anzahl von Sekunden teilen, Tschüss 60, weil wir 60 s haben . Und dann müssen wir sie mit 360 multiplizieren. Ordnung, jetzt können wir alle oder sie die zweite Pfeilbewegung ausführen Dafür müssen wir es um den zweiten Grad drehen. Wir benötigen also eine zweite Punkttransformation im Punktstil , die der Drehfunktion entspricht. Und als Wert müssen wir hier angeben. Zweiter Abschluss, gefolgt von den Abschlüssen. Wie Sie sehen können, bewegt sich der Pfeil nach jeder Sekunde und zeigt uns die aktuellen Sekunden. Ebenso müssen wir Minuten und Stunden umrechnen. Lassen Sie uns diese Codezeile zweimal duplizieren. Also brauchen wir Minuten. Grad. Dann wird es Minute. Als nächstes brauchen wir unseren Abschluss. Und in diesem Fall müssen wir es durch 12 teilen, weil wir insgesamt 12 h haben. In Ordnung, Schluss müssen wir die Werte der Rotationsfunktion für die Minuten und die Stunden definieren . Lassen Sie uns diese Codezeile zweimal duplizieren. Wir brauchen hier Minutenstil. Und außerdem müssen wir deinen Minutenabschluss bestehen. Das ist für die Stunde. Wir haben hier zwei Wege, unseren Abschluss. Ordnung, es ist also zu sehen, wir haben hier eine aktuelle Uhrzeit und die Uhr funktioniert perfekt 8. Projekt 5 - Navbar: In Ordnung, es ist an der Zeit, weiterzumachen und mit dem Bau unseres nächsten Projekts zu beginnen In diesem Video werden wir eine Navigationsleiste erstellen. Auf den ersten Blick sieht das Projekt einfach aus, aber es wird wirklich interessant sein und hoffentlich lernst du ein paar neue Dinge. Okay, lassen Sie uns weitermachen und das Projekt beschreiben. Wie Sie sehen können, haben wir hier ein paar verschiedene Navigationspunkte. Sie werden durch die Font Awesome-Symbole dargestellt. Standardmäßig hat das erste Objekt eine andere Farbe mit unterschiedlichem Hintergrund und auch mit einer anderen Form. Sobald ich auf andere Elemente klicke, ändern sie diese Farben und Formen mit schönen Effekten. Lassen Sie uns weitermachen und mit dem Aufbau des Projekts beginnen. Ich habe auf dem Desktop einen neuen Ordner namens Navbar erstellt, der momentan leer ist Lassen Sie uns weitermachen und es in VS Code öffnen und dann unsere Arbeitsdateien erstellen. Die erste wird index.html sein. Dann brauchen wir style.css und script.js. Öffnen Sie dann die Datei index.html und erstellen Sie ein einfaches HTML-Dokument. Dafür werde ich Amide verwenden. Platzieren wir hier ein Ausrufezeichen und drücken Sie dann die Tabulatortaste oder die Eingabetaste Hier haben wir die grundlegenden HTML-Tags. Lassen Sie uns zunächst den Titel ändern. Ich gebe dir die Navbar. Dann verlinke ich CSS- und JavaScript-Dateien. Lassen Sie uns das Link-Tag öffnen und hier den Namen der Datei dieses Benutzers angeben. 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. Okay, außerdem werde ich noch einen Link für Font Awesome-Icons einfügen Lass uns weitermachen und nach Font Awesome suchen. CDN ist. Dann kopiere den ersten Link von hier. Öffnen Sie das Link-Tag im Hauptelement und fügen Sie den CDN-Link in das h-Referenzattribut ein. In Ordnung, wir sind fast bereit, mit dem Schreiben des Codes zu beginnen. Lassen Sie uns das Projekt im Browser ausführen. Dafür verwende ich eines der VS-Codepakete namens Live Server. Es ermöglicht uns, das Projekt live im Browser auszuführen und Änderungen und Aktualisierungen vorzunehmen , ohne die Seite jedes Mal zu aktualisieren. Lassen Sie uns abschließend den Editor und den Browser nebeneinander platzieren . So wie. Und fang an. Ich fange an, das HTML-Markup zu erstellen. Öffnen wir das HTML5-Nav-Tag mit einer Klasse. In diesem Element werden wir nun sieben verschiedene Navigationselemente haben. Öffnen wir das Link-Tag mit der Klasse jetzt pro Link. Jedes Link-Element enthält also Font und Awesome-Symbol. Lassen Sie uns das I-Element mit den Klassen FAS bei Ihnen zu Hause eröffnen. Dann duplizieren Sie diese Codezeile sechsmal und ändern Sie die Klassennamen der Font-, Awesome-Symbole. Die zweite wird Kamera sein. Dann werden wir den Kalender rausbringen. Der nächste wird der Campus sein. Dann werden wir ein Buch haben. Das nächste Icon wird Camera Retro sein. Und endlich werden wir Kopfhörer haben. Okay, das war's vorerst mit dem HTML-Markup, gehen wir zur CSS-Datei und passen das Elementprinzip Ich werde einige Standardstile erstellen und zurücksetzen. Lassen Sie uns weitermachen und jedes Element mit einem Sternchen auswählen mit einem Sternchen Zuallererst werde ich die standardmäßigen Margen und Padding loswerden standardmäßigen Margen und Padding Lassen Sie uns auch beide Eigenschaften festlegen. Null. Dann brauchen wir Box Sizing, Border-Box. Außerdem werde ich die Standardstile aus den Linkelementen entfernen Standardstile aus den Linkelementen Textdekoration verwende, keine. 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 konvertiere ich 1 g in zehn Pixel. Und dafür müssen wir die Schriftgröße des HTML-Elements verringern . Setzen wir es auf 62,5 Prozent. Okay, danach wähle ich ein Körperelement aus und definiere dessen Breite und Höhe Ich setze die Breite auf 100%. Die Höhe wird 100% des Viewports betragen , ich meine 100 vh Und ändere auch die Hintergrundfarbe. Ich werde den RGB-Wert 19124826 verwenden. Als Nächstes platziere ich das Nickerchen oder in der Mitte der Seite. Das können wir auf verschiedene Arten tun. In diesem Fall verwende ich ein CSS-Grid. Wir brauchen ein Raster und platzieren dann die Artikel in der Mitte. Wie Sie sehen können, sind die Elemente sowohl horizontal als auch vertikal zentriert. Schauen wir uns also die Körperelemente an. Als Nächstes werde ich das Napa anpassen. Zuallererst hat es seine Breite und Höhe definiert. Ich setze die Breite auf 70, rannte. Für die Höhe werden es zehn RAM sein. Außerdem werde ich ihm eine temporäre Hintergrundfarbe zuweisen , um zu sehen, wie die Navigationsleiste aussieht Also bei Rückschlag bei der Farbe auf hellgrau CCC. Im Moment landeten die Navigationselemente in der oberen linken Ecke der Navigationsleiste Wir müssen es ihnen schicken. Und dafür verwenden wir Flexbox. Wir brauchen Display Flex. Für die horizontale Zentrierung benötigen wir dann das Justify-Content Geben wir die vertikale Richtung an. Wir müssen die Artikel in der Mitte ausrichten. In Ordnung, das war's mit der Navbar. Als Nächstes gehe ich jetzt zum Anpassen pro Link. Definieren wir zunächst die Breite und Höhe. Die Breite wird genauso hoch wie RAM sein, ich setze sie auf 100%. Lassen Sie uns auch die Hintergrundfarbe ändern. Ich werde wieder den RGB-Wert 222-23-3181 verwenden und die temporäre Hintergrundfarbe aus dem Napa entfernen die temporäre Hintergrundfarbe aus dem Napa Okay, als Nächstes müssen wir die Navigationselemente positionieren. Ich werde sie horizontal in der Mitte und unten am unteren Rand des Napas platzieren der Mitte und unten am unteren Rand des Napas Verwenden wir dafür wieder Flexbox. Wir müssen Flex anzeigen und dann Elemente an einem Value-Flex ausrichten und auch das Inhaltszentrum rechtfertigen. Außerdem werde ich unten mit Polsterung etwas Platz schaffen unten mit Polsterung etwas Platz Lassen Sie uns die Polsterung unten an einer Rampe anbringen. Richtig? Das war's mit dem Napa Link. Lass uns weitermachen und Kunden, die Schrift, tolle Symbole. Wählen wir Elemente aus. Zunächst werde ich die Schriftgröße erhöhen. Stellen wir es auf 2,5 Marke ein und ändern dann die Farbe, machen es 333. Ordnung, die Nummer ist also fast maßgeschneidert und jetzt müssen wir dafür sorgen, dass es funktioniert Werfen wir einen Blick auf die fertigen Projekte. Der Halbkreis, den Sie bei dem Actin-Navigationselement sehen, das mit dem vorherigen Pseudoelement erstellt wurde Also werde ich jetzt dieses Element erstellen. Wählen wir nun „Ziehen mit zuvor“ Pseudoelementen aus. Zunächst müssen wir den Inhalt definieren. Es wird leer sein. Definieren Sie dann Breite und Höhe. Die Breite wird zehn sein. Lauf. Was die Höhe angeht, werde ich einen Tran daraus machen. Und ich werde ihm auch eine temporäre Hintergrundfarbe zuweisen . Sagen wir rot. In Ordnung, also hier haben wir schon einmal Pseudoelemente. Als Nächstes ändere ich seine Position. Lassen Sie uns seine Position auf absolut setzen. Eigentlich müssen wir dieses Element entsprechend dem Navajo-Link positionieren dieses Element entsprechend dem Navajo-Link Ordnen wir also jeder Position einen Relativen zu. Als Nächstes müssen wir die obere und linke Position definieren. Die Spitzenposition wird bei -100% liegen. Das ist wahrscheinlich die linke Position. Ich setze es auf Null. Und schließlich ändern wir die Form des vorherigen Pseudoelements mithilfe von border-radius Es werden vier Werte benötigt. Die erste wird die obere linke Ecke sein. Setzen wir es auf Null. Dann wird die obere rechte Ecke Null sein. unteren rechten Ecke befinden sich fünf RAM, in der unteren linken Ecke ebenfalls fünf Primzahlen In Ordnung, jetzt sind wir bereit, eine App zum Laufen zu bringen. Dafür. Ich werde etwas JavaScript verwenden, das wir jetzt anhängen müssen . Buildings Click Event. Lassen Sie uns zunächst alle bekannten Berliner auswählen. Ich werde eine neue Variable erstellen. Nennen wir es blinkt und wählen Sie alle Links mit der Abfrageauswahl aus. Alle Methoden. Wir müssen hier jetzt den Klassennamen pro Link angeben. Als Nächstes müssen wir uns die Links ansehen, tatsächlich gibt die Methode Query Selector All ein Array-ähnliches Objekt namens Node List zurück Wir müssen diese Liste durchsehen und jedem Link einen Event-Listener anhängen Um die Liste durchzusehen, verwende ich eine der Array-Hilfsmethoden namens forEach Diese Methode funktioniert gut mit der Knotenliste. Wir müssen es nicht in das Array umwandeln. Andernfalls, wenn Sie eine andere Array-Hilfsmethode verwenden oder wenn Sie die HtmlCollection durchsuchen möchten , müssen Sie sie zunächst in ein Array transformieren Okay, verwenden wir die forEach-Methode. Wir müssen eine Callback-Funktion übergeben , die einen Parameter annimmt Es wird das aktuelle Element in der Schleife sein Als Nächstes müssen wir an jeden Link einen Event-Listener anhängen Geben wir hier die Art des Event-Klicks an und geben Ihnen auch eine Callback-Funktion , die ausgeführt wird, sobald wir auf den Link klicken Sobald wir also auf das Element klicken, müssen wir vor dem Pseudoelement nach unten gehen Ich werde dem Link eine neue Klasse hinzufügen. Dann wählen wir vor der Besichtigung die Insel mit dieser Klasse aus und definieren die Bewegung des Elements mit CSS. Fügen wir dem Link also eine neue Klasse hinzu. Wir brauchen hier die Klassenlisteneigenschaft, die alle Klassen enthält, die das Tier hat. Dann sollte die Methode add folgen. Und wir müssen hier den Namen der Klasse angeben . Sagen wir Veränderung. Okay, gehen wir zur CSS-Datei und wählen vor der Klassenänderung das Pseudoelement aus und definieren die oberste Position Und es sind -30%. Okay, wenn ich jetzt auf das Navigationselement klicke bewegt sich das Pseudoelement nach unten, eigentlich haben wir hier ein kleines Problem Wenn wir auf ein anderes Navigationselement als das vorherige klicken, bewegen sich die Arme nach unten, aber der vorherige behält seine Position bei. Also müssen wir das beheben. Wir müssen den Klassennamen des Link-Elements durch einen Napa-Link ersetzen des Link-Elements durch einen Napa-Link Nochmals onClick. Dazu müssen wir uns die Links ansehen und den Klassennamen als Napa-Link definieren Wir benötigen also wieder für jede Methode eine Callback-Funktion mit einem Parameter-Link Also müssen wir ClassName definieren. Und es sollte dem NOPAT-Link entsprechen. Ordnung, wie Sie sehen können, ist das Problem jetzt behoben Als Nächstes ändere ich die Farbe der Icons und auch die Hintergrundfarbe. Wir müssen also einen Albert-Link mit Klassenwechsel auswählen. Definieren wir die Hintergrundfarbe. Ich werde hier den RGB-Wert 185-19-7147 verwenden. Als Nächstes wähle ich beim Klassenwechsel erneut Ionen aus. Definieren wir Farbe. Es wird weiß sein. Und erhöhen Sie auch die Schriftgröße, machen Sie es auf 3,5 Rem. Wie Sie sehen, ändern die Navigationselemente ihre Farben und Größe. Sobald wir sie angeklickt haben, schauen wir uns das fertige Projekt an. Sobald wir also auf das Navigationselement klicken, ändern Sie den Grenzradius ihrer Geschwister . Also müssen wir uns jetzt darum kümmern. Wie der Klassenwechsel. Ich werde den Geschwisterelementen des Rings eine neue Klasse hinzufügen Geschwisterelementen des Rings Und dann definieren wir Stile und CSS. Also müssen wir ihnen die Eigenschaft verknüpfen , die als vorherige Elemente als Geschwister bezeichnet wird Andererseits müssen wir Klassenmieteigentum verwenden. Nun, die Methode add, und ich werde hier den Klassennamen angeben. Sagen wir zurück, EL Change. Ich meine vorherige Elementänderung. Lassen Sie uns diese Codezeile duplizieren. Anstelle des vorherigen Geschwisters benötigen wir ein Geschwisterelement des nächsten Elements Und ändere auch den Namen der Klasse. Wir brauchen den nächsten Elementwechsel. In Ordnung, gehen wir zur CSS-Datei und wählen eNobe aus oder verknüpfen Sie mit diesen neu hinzugefügten Klassen Also müssen wir hier den Rand oben rechts für den Radius auf 1,3 rem setzen . Lassen Sie uns diesen Code duplizieren. Ändere den Klassennamen, wir brauchen die nächste Elementänderung. Und in diesem Fall müssen wir den oberen linken Radius mit demselben Wert füllen . Okay? Um besser sehen zu können, ob der Randradius gut funktioniert, entfernen wir diese temporäre rote Hintergrundfarbe und verwenden die Farbe, die der Hintergrundfarbe des Körperelements entspricht Okay, jetzt ist der Randradius sichtbar, aber wie Sie sehen können, müssen wir die Position der vorherigen Pseudoelemente leicht anpassen der vorherigen Pseudoelemente leicht da die Ecken des Elements nicht ganz gut aussehen Um das zu tun, werde ich zunächst die Breite der vorherigen Pseudoelemente leicht erhöhen der vorherigen Pseudoelemente leicht Setzen wir es für RAM auf zehn Punkte. Und dann müssen wir die Elemente auf die linke Seite verschieben. Ändern wir also die Position, an der ich mich auf dem linken Grundstück befinde. Wir brauchen einen Minuspunkt, um zu rennen. Okay, wie Sie sehen können, haben wir jetzt ein viel besseres Ergebnis. Eigentlich gibt es hier ein kleines Problem. Wenn wir auf das erste Element klicken, funktioniert der Randradius des nächsten Elements Weil wir hier einen Fehler haben. Wenn ich die Seite überprüfe und dann zum Konsolen-Tab wechsle, wird die Fehlermeldung angezeigt , dass die Eigenschaftsklassenliste von Null nicht gelesen werden kann. Das passiert, weil das erste Objekt nicht das vorherige Geschwister hat Und das gleiche Problem haben wir mit dem letzten Artikel. Es hat nicht das nächste Element als Geschwister. Um das zu beheben, werde ich neue Elemente in HTML erstellen. Ich meine, die Elemente, die wir vor dem ersten Punkt und dem Ende der Zahl haben. Öffnen wir also das div-Tag mit einer Klasse jetzt pro Link Kopieren Sie dann diese Codezeile und fügen Sie sie unten ein. Jetzt müssen wir also ein paar Dinge tun weil die Navigationselemente auf den ersten Blick nicht gut aussehen Erhöhen Sie die Breite der Navbar Stellen wir es auf 90 RAM ein. Und dann müssen wir Zeigerereignisse für die neu erstellten Elemente deaktivieren Zeigerereignisse für die neu erstellten Elemente Denn sobald wir sie anklicken, haben wir die gleichen Effekte wie Navigationselemente. Wählen wir Entwicklungen aus, indem wir Pseudoklassen des ersten Kindes und des letzten Kindes verwenden, und ihnen dann Zeigerereignisse zuweisen Okay, jetzt funktioniert alles gut. Wir müssen der Navigationsleiste nur ein paar verschiedene Effekte hinzufügen . Lassen Sie uns zunächst die Effekte innerhalb einiger Übergänge glatter gestalten innerhalb einiger Übergänge glatter Lassen Sie uns zunächst einen Übergang zu den Font Awesome-Symbolen hinzufügen . Wir benötigen die folgenden Werte. Farbe 0,4 s und dann Schriftgröße mit der gleichen Dauer. Als Nächstes fügen wir den Übergang zu früheren Pseudoelementen mit der Klassenänderung In diesem Fall benötigen wir die oberen 0,2 s. Außerdem müssen wir standardmäßig für das vorherige Pseudoelement wechseln standardmäßig für das vorherige Pseudoelement In diesem Fall benötigen wir die Oberseite mit einer Dauer von 0,4 s und dann die Hintergrundfarbe mit einer Dauer von 0,4 s. Außerdem benötigen wir hier eine kleine Verzögerungszeit 0,4 s. Okay, Nächstes müssen wir für die Geschwister des vorherigen und des nächsten Elements wechseln . In diesem Fall benötigen wir einen Grenzradius mit einer Dauer von 0,45 s. Wie Sie sehen, haben wir jetzt viel Als Nächstes verwende ich Transition für Nap oder Link. Wir benötigen hier einen Randradius von 0,2 s. Außerdem brauchen wir hier overflow hidden, denn wenn wir es vor dem Pseudoelement oben im Navigationselement angeklickt haben es vor dem Pseudoelement oben im Navigationselement angeklickt , bewegt Außerdem brauchen wir hier overflow hidden, denn wenn wir es vor dem Pseudoelement oben im Navigationselement angeklickt haben, bewegt es sich nach unten. Das brauchen wir nicht. Verwenden wir also Overflow Hidden. In Ordnung, jetzt ist das Problem behoben. Als Nächstes füge ich der Navigationsleiste einen kleinen Schatteneffekt hinzu Verwenden wir Box-Shadow dreimal mit den Werten 0,3 RAM und der Farbe AAA Als nächstes benötigen wir einen Grenzradius für die Entwicklungen. Ich meine, Anfang und Ende des Romans. Im Moment werden sie zusammen ausgewählt. Also werde ich sie separat auswählen. Dann füge zu ihnen hinzu. Der Radius für den ersten wird 0,5 rem 00,5 Rom sein 0,5 rem 00,5 Rom Was die zweite betrifft, so wird es 0,5 Rem sein, 0,5 Gramm. Und dann wieder Null. Der Randradius wird angewendet. Aber jetzt sind die Ecken des Napa wegen des Schatteneffekts sichtbar Also brauchen wir auch einen Grenzradius für die Navajo. Stellen wir es auf 0,5 Rampe ein. Ordnung, das Letzte, was ich tun werde , ist, das erste Navigationselement standardmäßig aktiv zu machen Denn wenn ich die Seite neu lade , haben wir keine aktiven Artikel Dazu müssen wir der ersten Entwicklungsklasse die vorherige Elementänderung zuweisen . Und außerdem müssen wir der ersten Link-Element-Klasse zuweisen der ersten Link-Element-Klasse zuweisen zur zweiten Link-Element-Klasse wechseln. Nächster Elementwechsel. Jetzt wird davon ausgegangen, dass das erste Navigationselement standardmäßig aktiv ist, wenn ich die Seite neu lade erste Navigationselement standardmäßig aktiv ist, wenn ich die In Ordnung, also endlich sind wir fertig, wir haben die Arbeit an diesem Projekt abgeschlossen. Lass uns weitermachen und mit dem Bau des nächsten beginnen. 9. Projekt 6 - Website-Loader: Okay, es ist Zeit, weiterzumachen und unser nächstes Projekt zu erstellen. In diesem Abschnitt werden wir ein paar verschiedene CSS-Loader erstellen ein paar verschiedene CSS-Loader Solche Loader werden verwendet, bevor die Webseite geladen wird. Und heutzutage können Sie auf jeder modernen Website auf sie stoßen . In Ordnung, lassen Sie uns weitermachen und tiefer in unser Projekt eintauchen. Insgesamt haben wir also drei verschiedene Lader. Beschreiben wir sie kurz. Der erste Lader besteht aus neun Punkten. Sie sind auf drei verschiedenen Linien platziert, und jeder Punkt hat eine Animation. Es gibt Skalen und die Trübungen nehmen mit einigen Intervallen nehmen mit einigen Ich meine, dass die Dauer der Animation für jeden Punkt unterschiedlich ist. Zweiter Lader, wir haben fünf verschiedene Linien während der Animation. Ihre Größe nimmt mit unterschiedlichen Verzögerungszeiten zu. Der dritte Lader besteht aus fünf verschiedenen Kreisen. Jeder Kreis hat eine nette Animation. Diese leichteren Dinge werden mit den Pseudoelementen erstellt Ordnung, das werden wir in diesem Video erstellen Wir werden HTML und CSS verwenden. Also lass uns anfangen. Ich habe auf dem Desktop einen neuen Ordner namens CSS Loaders erstellt Desktop einen neuen Ordner namens CSS Loaders Im Moment ist es leer. Lassen Sie uns weitermachen und es im VS-Code öffnen und unsere Arbeitsdateien für HTML und CSS erstellen. Die erste wird index.html sein. Was die zweite betrifft, wird style.css sein. Als Nächstes öffne ich die Datei index.html und erstelle ein einfaches HTML-Dokument. Dazu müssen wir hier ein Ausrufezeichen platzieren und dann die Eingabetaste oder die Tabulatortaste drücken In Ordnung, hier haben wir die grundlegenden HTML-Tags. Lassen Sie uns zunächst den Titel ändern. Wir müssen CSS-Loader verwenden. Dann verlinke ich die CSS-Datei. Dafür. Öffnen wir das Link-Tag und geben Sie hier den Pfad der Datei an. Ordnung, jetzt müssen wir das Projekt im Browser ausführen und dann mit dem Schreiben des Codes beginnen Um das Projekt im Browser zu öffnen, verwende ich eines der VS-Codepakete, das als Live-Server bezeichnet wird. Es ermöglicht uns, das Projekt live im Browser auszuführen. Okay, lassen Sie uns abschließend den Editor und den Browser nebeneinander platzieren den Editor und den Browser nebeneinander Einfach so und los geht's. Also fange ich mit dem ersten Lader an, ich meine, diesen braunen Punkten. Lassen Sie uns also weitermachen und zunächst das HTML-Markup erstellen Ich werde das div-Tag mit einem Klassencontainer öffnen. Es wird den gesamten Inhalt enthalten. Dann öffne ich ein weiteres div-Tag mit dem Class Loader. Insgesamt werden wir also neun Punkte haben. Und ich werde sie mit Div-Elementen mit den Klassenpunkten erstellen . In Ordnung, das war's also mit dem HTML-Markup. Moment ist auf der Seite nichts sichtbar, da wir nur die leeren div-Tags haben. Jetzt können wir anfangen , das CSS zu schreiben. Zuallererst werde ich einige Reset-Stile erstellen. Wählen wir alle Elemente mit einem Sternchen aus. Ich werde den Standardrand und das Padding von jedem Element entfernen Standardrand und das Padding von jedem Element Setzen wir also beide auf Null. In diesem Tutorial werde ich den RAM als Maßeinheit verwenden. Richtig? Jetzt entspricht ein RAM 16 Pixeln, da die Schriftgröße der HTML-Elemente standardmäßig 16 Pixeln entspricht. Ich möchte ein RAM in zehn Pixel umwandeln. Und dafür müssen wir die Schriftgröße der HTML-Elemente verringern . Setzen wir es auf 62,5 Prozent. In Ordnung, als Nächstes nehme ich den Container mit. Wählen wir es aus und definieren wir seine Breite und Höhe. Ich setze die Breite auf 100%. Was die Höhe angeht, so wird sie 100% des Viewports ausmachen. Und lassen Sie uns das Display auch auf Flex einstellen. Moment werde ich den ersten Lader in der Mitte platzieren . Aber sobald wir die restlichen Loader erstellt haben, werde ich das Flex-Layout geringfügig ändern, um die Elemente zu zentrieren , die wir für die Ausrichtung des Konferenzzentrums und die Ausrichtung der Elemente benötigen Konferenzzentrums und die Ausrichtung der Elemente Zentrum. Okay, das war's mit dem Container. Als Nächstes wähle ich den Loader selbst aus und passe ihn an. Wählen wir es also aus und setzen seine Breite auf 20 Durchläufe. In Ordnung, als Nächstes passen wir die Erwachsenen an. Stellen Sie Breite und Höhe ein, beide 23 RAM. Dann werde ich sie mit einem Randradius mit einem Wert von 50 Prozent abgerundet Randradius mit einem Wert von 50 Prozent Ändern Sie auch die Hintergrundfarbe. Machen Sie fünf zu eins, zu eins. Als Nächstes. Ich werde mithilfe von Rand etwas Platz um die Punkte herum schaffen. Stellen wir es auf allen vier Seiten auf 1,6 RAM ein. Und schließlich ändere die Opazität und mache sie auf 0,6. Jetzt sind die Punkte sichtbar, aber wir müssen sie richtig ausrichten. Verwenden wir dafür die Flexbox. Ich stelle das Display auf Flex Dann dienen drei Linien zur Ausrichtung der Elemente. Wir müssen sie einpacken. Also müssen wir den Umschlag mit dem Value-Rap kombinieren. Und dann zentriere ich sie mithilfe des Justify-Content Center sie mithilfe des Justify-Content Wie Sie sehen können, sind die Punkte also ausgerichtet. Jetzt ist es an der Zeit, die Animation zu erstellen. Wir werden das mit CSS-Keyframes tun. Werfen wir einen Blick auf das fertige Projekt. Wie ihr in der Animation sehen könnt, werden die Erwachsenen immer größer und auch die Undurchsichtigkeit bei Quizfragen Lassen Sie uns weitermachen und die CSS-Keyframes erstellen. Ich werde es Animate Loader One nennen. Während der Animation müssen wir also die Skalierung der Elemente erhöhen. Also bei 0% setze ich die Transformationsskala auf eins. Dann werde ich bei 50 Prozent die Skala erhöhen und auch die Opazität erhöhen Also müssen wir die Skala mit einem Wert von 1,5 transformieren. Und die Opazität wird 100% betragen. Ich meine, am Ende der Animation müssen wir die Skala verkleinern. Und wir müssen auch die Opazität verringern. Ordnung, die Keyframes werden erstellt und jetzt müssen wir diese Regeln auf die Elemente anwenden Dafür müssen wir eine Animationseigenschaft verwenden. Wie gesagt, wir benötigen unterschiedliche Animationsdauern für die Erwachsenen Also wähle ich sie mit dem n-ten Child-Selektor aus. Wählen wir den ersten aus. Verwenden Sie dann Animationen. Wir müssen hier ein paar verschiedene Werte weitergeben. Der erste wird der Name des Keyframes Animate Load sein des Keyframes Animate Die Dauer, die wir benötigen, wird 1,5 s betragen . Und außerdem brauchen wir unendlich weil die Animation unendlich laufen sollte Wie gesagt, der erste Punkt ist bereits animiert. Lassen Sie uns diesen Code achtmal duplizieren , da wir insgesamt neun Punkte haben. Und dann ändere die Nummern der n-ten Child-Selektoren und auch die Für den zweiten brauchen wir 1,3 s. Dann wird der nächste 1,7 s sein. Als nächstes haben wir das vierte Element. Die Dauer wird 1,1 s betragen. Dann wird die nächste 0,9 sein, dann 0,7. Der nächste sollte 0,5 s sein. Für das achte Objekt verwende ich 1,3 s. Und für den letzten Punkt beträgt die Dauer 1,5 s. In Ordnung, endlich haben wir hier eine nette Animationsladung. , endlich haben wir hier eine nette Animationsladung Schauen wir uns den ersten Lader an. Lass uns weitermachen und uns um den nächsten kümmern. Wie der vorherige Lader. Zuerst erstelle ich das HTML-Markup. Insgesamt werden wir also fünf Zeilen haben. Lassen Sie uns zunächst das div-Tag mit dem Klassenlader öffnen , damit es der Wrapper sein wird Und danach erstellen Sie fünf Zeilen, indem Sie erneut div-Tags verwenden. Das Markup wird also erstellt. Lass uns weitermachen und anfangen, das CSS zu schreiben. Wählen wir ein oder zwei Wrapper-Loads aus und legen die Breite auf 25 Rampe Als Nächstes werde ich die Linien wie zuvor stylen. Definieren wir Breite und Höhe. Die Breite wird 1,5 RAM betragen. Was die Höhe angeht, so wird es fünf Rem sein. Als Nächstes ändern wir die Hintergrundfarbe. Mach es 41, 69e1. Und machen Sie die Linien auch leicht abgerundet, indem Sie den Randradius mit dem Wert eins RAM Es kann also sehen, dass die Linien sichtbar sind. Im Moment sind die Lader zu nahe beieinander platziert. Ich möchte etwas Abstand zwischen ihnen schaffen. Lassen Sie uns also weitermachen und den Wert der Eigenschaft justify content für den Container ändern . Lassen Sie uns einen gleichmäßigen Abstand herstellen. Also jetzt ist es besser. Als Nächstes werde ich die Linien nebeneinander platzieren. Dafür. Verwenden wir Display Flex. Ebenfalls. Ich werde Abstand zwischen ihnen schaffen, indem ich den Inhaltsbereich von justify gleichmäßig verwende. Und ich möchte sie auch vertikal zentrieren. Dafür müssen wir die Artikel in der Mitte ausrichten. In Ordnung, die Linien sind also richtig ausgerichtet. Und jetzt müssen wir die Animation erstellen. Während der Animation werde ich also die Höhe der Linien erhöhen. Und die Animationen für jede Zeile werden eine andere Verzögerungszeit haben. Zuallererst müssen wir einen CSS-Keyframe erstellen. Ich nenne es Animate Load oder zwei Also null Prozent, die Höhe beträgt fünf RAM, was der Standardwert ist Bei den 50 Prozent wird die Höhe dann 18 RAM betragen. Und dann, am Ende der Animation, ich meine, bei 100 Prozent, wird die Höhe wieder fünf sein. In Ordnung, die Keyframes werden erstellt. Jetzt müssen wir diese Regeln auf die Linien anwenden. Wählen wir die Allianz mit den n-ten Child-Selektoren. Wählen Sie den ersten aus. Dann werde ich es viermal duplizieren und die Zahlen 1-5 ändern Also müssen wir die Animation für die mittlere Linie ohne Verzögerung ausführen . Ich meine, für die dritte Zeile. Also brauchen wir Animationen mit dem Namen der Keyframes animate load oder zwei, dann wird die Dauer 0,5 s betragen . Und wieder brauchen wir unendlich Dann benötigen wir eine ähnliche Verzögerungszeit für die zweite und vierte Zeile. Kopieren wir also diese Codezeile und weisen sie der zweiten und vierten Zeile zu. Und fügen Sie auch eine Verzögerungszeit hinzu, die 0,3 s betragen wird . Was die erste und fünfte Zeile betrifft, müssen wir die Verzögerungszeit 0,6 s betragen. Ordnung, es wird also als Lader betrachtet, funktioniert gut mit einer schönen Animation Tatsächlich sind wir mit einem zweiten Lader fertig. Lassen Sie uns weitermachen und eine dritte erstellen. Wie üblich beginne ich mit dem HTML-Markup. Wir müssen das Div-Tag mit dem Klassenlader drei öffnen. Und dann gebe ich hier fünf Div-Tags mit dem Klassenkreis weiter . Okay, das war's mit dem HTML-Markup. Lass uns weitermachen und anfangen, CSS zu schreiben. Ich wähle deinen Wrapper aus. Ladungen sind drei. Lassen Sie uns die Breite auf vier setzen, um ausgeführt zu werden. Wählen Sie dann die Kreise aus und passen Sie sie an. Zuallererst werde ich, wie innerhalb der Höhe definiert, beide so einstellen, dass RAM fällt, als wir brauchen, um das Element abgerundet zu machen. Verwenden wir den Grenzradius, 50 Prozent. Außerdem werde ich die Hintergrundfarbe ändern. Es wird die temporäre Hintergrundfarbe sein. Machen wir es hellgrau. Also hier haben wir diese Kreise. Lassen Sie uns sie mit Flexbox ausrichten. Wir brauchen Display Flex. Und dann müssen wir einen gewissen Abstand zwischen den Kreisen schaffen , indem wir den Inhaltsbereich gleichmäßig ausrichten. Ordnung, die Animationseffekte werden also mit CSS-Keyframes und vor Pseudoelementen erstellt und vor Pseudoelementen Diese animierenden Elemente werden also vor Pseudoelementen stehen Bevor wir sie erstellen, füge ich jedem Kreis seine eigene Farbe hinzu Wählen wir sie also mit dem n-ten Child-Selektor aus. Die erste Hintergrundfarbe wird 9o6d sein. Lassen Sie uns diesen Code viermal duplizieren und die Zahlen und Farben ändern. Die zweite Hintergrundfarbe ist F9, C7 für f. Dann haben wir f8961 drin. haben wir f8961 Die vierte Hintergrundfarbe wird f37 22c sein. Und der letzte wird F9 für 346 sein. Okay, jetzt müssen wir die vorherigen Pseudoelemente erstellen Wählen wir also den Kreis aus, gefolgt von davor. Zunächst müssen wir den Inhalt definieren. Es wird leer sein. Dann definieren wir Breite und Höhe. Ich werde beide auf 100% setzen. Und wir müssen auch die Position definieren. Machen wir es absolut. Positionieren Sie das übergeordnete Element relativ, da der Kreis entsprechend dem übergeordneten Element ausgerichtet sein sollte . Danach runden wir die Elemente mit dem Randradius mit einem Wert von 50 Prozent und stellen auch die Opazität ein, Im Moment sind die Elemente also nicht sichtbar , weil sie keine Hintergrundfarben haben . Wenn wir ihnen eine temporäre Hintergrundfarbe zuweisen, sagen wir hellgrau, dann werden Sie sie deutlich sehen. Okay, jetzt weise ich jedem Pseudoelement die richtige Hintergrundfarbe zu jedem Pseudoelement die richtige Hintergrundfarbe Eigentlich können wir den gesamten Code von hier aus abrufen. Und dann müssen wir ihnen vorher nur den Selektor hinzufügen. Jetzt ist alles fertig und wir können die Animation erstellen. Lassen Sie uns zunächst die CSS-Keyframes definieren. Der Name wird Animate Loader Three sein. Also müssen wir die Skala der Pseudoelemente erhöhen und sie dann verstecken. Die Schritte sollten folgen. Bei Null Prozent brauchen wir eine Skalierung, um eins zu sein. Dann füge 50 Prozent hinzu. Die Skala wird 2,5 sein. Der nächste Schritt wird 75% sein. Und wieder brauchen wir eine Skala von 2,5. Und danach müssen wir die Elemente verstecken. Bei acht Prozent setze ich die Opazität also auf Null Und auch am Ende der Animation, bei 100%, wird die Opazität Null sein In Ordnung, das war's also mit diesen CSS-Keyframes. Jetzt müssen wir die Animationseigenschaft verwenden. Ordnen wir es den vorherigen Pseudoelementen zu. Wir brauchen hier den Namen Animate Loader Three. Die Dauer wird 2 s betragen. Außerdem verwende ich hier eine der Animations-Timing-Funktionen, die ausgeschaltet sind, und dann wieder unendlich. Es wird also davon ausgegangen, dass die Animation funktioniert. Das einzige, was wir tun müssen, ist, den Elementen unterschiedliche Verzögerungszeiten hinzuzufügen. Für die Sekunde vor Pseudoelementen benötigen wir also eine Animationsverzögerung von 0,2 s. Kopieren wir diese Codezeile Für das nächste Element benötigen wir 0,4 s, dann 0,6 s. Und für das letzte Element benötigen wir 0,8 s. Ordnung, das ist also ungefähr der dritte Lader Und eigentlich sind wir fertig. Alle drei Lader sind erstellt 10. Projekt 7 - Ripple-Button: In Ordnung, also lasst uns weitermachen und mit der Arbeit an unserem nächsten Projekt beginnen In diesem Abschnitt erstellen wir eine Schaltfläche mit schönen und coolen Hover-Effekten Sobald wir den Mauszeiger über die Schaltfläche bewegen , dehnt sich der gelbe Kreis bis zum gesamten Boden Es spielt keine Rolle, über welche Seite Sie den Mauszeiger bewegen. Der Button von. Dieses gelbe Element erscheint von allen Seiten. In Ordnung, wir sind bereit, mit der Erstellung des Buttons zu beginnen. Ich habe auf dem Desktop einen neuen Ordner namens Repo-Button erstellt , der momentan leer ist Lassen Sie uns es in VS Code öffnen und unsere Arbeitsdateien für HTML, CSS und JavaScript erstellen . Öffnen Sie dann die Datei index.html und erstellen Sie das grundlegende HTML-Dokument. Wir müssen das Urin-Ausrufezeichen platzieren und dann die Tabulatortaste oder die Eingabetaste drücken Hier haben wir also die grundlegenden HTML-Tags. Lassen Sie uns zunächst den Titel ändern. Ich werde Ihre Berichtsschaltfläche platzieren und dann die CSS- und JavaScript-Dateien verknüpfen. Ich werde das Link-Tag in den Kopfelementen öffnen. Und dann müssen wir den Pfad der Datei angeben. Was das JavaScript angeht, öffne ich das Script-Tag direkt über dem abschließenden Body-Tag. Und wir müssen hier den Pfad der JavaScript-Datei angeben . In Ordnung, wir sind bereit, mit dem Schreiben des Codes zu beginnen. Vorher werde ich 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 die Änderungen und Aktualisierungen vorzunehmen die Änderungen und Aktualisierungen ohne die Seite zu aktualisieren. Jedes Mal. Platzieren wir den Editor und den Browser etwa so nebeneinander und legen Sie Also fange ich mit dem HTML-Markup an. Öffnen wir das div-Tag mit einem Klassencontainer. Dieses Element wird den gesamten Inhalt enthalten. Ich meine den Knopf. Die Schaltfläche wird mithilfe der Link-Elemente erstellt. Lassen Sie uns es mit der Klasse btn öffnen und dann Yearspan-Element mit einem Inhalt übergeben Erkunden. In Ordnung, das war's also mit dem HTML-Markup. Fangen wir an, das CSS zu schreiben. Zuallererst werde ich einige gängige Stile definieren und zurücksetzen. Wählen wir jedes Element mit einem Sternchen aus. Zuallererst werde ich die Standardränder und den Abstand aller Elemente entfernen und den Abstand aller Elemente Lassen Sie uns beide auf Null setzen. Außerdem werde ich Box-Größe, Border-Box machen. Dann lassen Sie uns die Standardunterstriche aus dem Link-Element entfernen , indem wir Textdekoration verwenden, keine Außerdem werde ich die Schriftfamilie ändern. Stellen wir es auf Courier New Monospace ein. Okay, also diese Stile werden in diesem Projekt auf die Elemente angewendet in diesem Projekt auf die Elemente Ich werde RAM als Maßeinheit verwenden Standardmäßig entspricht 1 g 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%. Wie Sie sehen können, wurde die Schriftgröße des Link-Elements kleiner. Lassen Sie uns weitermachen und mit der Arbeit an dem Container beginnen. Zunächst definiere ich seine Breite und Höhe. Fangen wir mit 200 Prozent an. Was die Höhe angeht, werde ich sie zu 100% aus dem Viewport machen sie zu 100% aus dem Viewport Wir brauchen also hundert vh und ändern auch die Hintergrundfarbe Machen Sie es dunkelgrau mit 262626. Ordnung, als Nächstes platziere ich den Knopf in der Mitte Und dafür werde ich Flexbox verwenden. Wir brauchen Display Flex. Für die horizontale Zentrierung setze ich dann „ Inhalt ausrichten“ auf „Mitte Das ist für die vertikale Zentrierung. Wir müssen die Artikel in der Mitte ausrichten. Es wird also davon ausgegangen, dass sich die Schaltfläche in der Mitte befindet und jetzt ist es an der Zeit, sie anzupassen. Wählen wir BTN aus. Und lassen Sie uns zunächst diese Position definieren. Ich werde es absolut machen. Dann definiere ich die Breite und Höhe für den Bateson Machen wir aus beiden 18 RAM. Dann ändere ich die Hintergrundfarbe. Verwenden wir 90 E 0 E. Und machen Sie die Taste zusätzlich mit dem Randradius abgerundet, also 50 Prozent. Okay, das nächste, was ich in Bezug auf die Schaltfläche tun werde , ist, einen Rahmen zu erstellen. Stellen wir die Breite so ein, dass sie auf RAM zeigt, dann wird der Stil gepunktet RAM zeigt, dann wird der Stil gepunktet. Was die Farbe angeht, werde ich sie weiß machen In Ordnung, das ist es. Bezüglich der Schaltfläche. Als Nächstes werde ich dieses Span-Element hier betrachten. Zuallererst werde ich es dafür in die Mitte stellen . Lassen Sie uns Flexbox wieder verwenden. Ich nehme diese drei Zeilen und füge sie hier ein. Dieses Panel ist also zentriert. Lass uns weitermachen und es stylen. Wählen Sie btn span aus. Zuerst setze ich seine Position auf relativ. Dann ändere die Farbe, mache es weiß. Ich werde auch die Schriftgröße erhöhen, sie um 1,8 runden. Dann mache ich das Telefon mutiger. Lassen Sie uns die Schriftstärke auf 600 setzen. Transformiere auch Text in Großbuchstaben. Und schließlich schaffen Sie etwas Abstand zwischen den Buchstaben. Lassen Sie uns den Abstand so festlegen , dass der Punkt ausgeführt werden soll. In Ordnung. Dieses Span-Element ist also angepasst und ich muss einen Hover-Effekt erzeugen Schauen wir uns das fertige Projekt an. Sobald wir den Mauszeiger über die Schaltfläche bewegen , verdeckt der gelbe Kreis den Inhalt Es erscheint genau von der Seite, an der wir die Maus eingeben um diesen Effekt mithilfe von JavaScript- und CSS-Animationen zu erzeugen . Gehen wir zur Datei script.js und beginnen, den Code zu schreiben. Als erstes müssen wir die Koordinaten des Cursors in die Schaltfläche eingeben. Ich meine, wir müssen die obere und linke Position des Cursors vom oberen und linken Rand der Schaltfläche aus messen. Bevor wir das tun, müssen wir selbst eine Schaltfläche auswählen. Lassen Sie uns also eine neue Variable erstellen. Ich nenne es BTN. Und dann wählen Sie die Schaltfläche mit der Abfrageauswahlmethode aus. Wir müssen hier den Klassennamen BTN angeben. Danach müssen wir mit der Maus einen Event-Listener anhängen, um Ereignisse einzugeben Außerdem müssen wir hier die Callback-Funktion übergeben, die ausgeführt wird , sobald wir den Mauszeiger über die Tatsächlich dringt die Maus in Metall ein und feuert nur einmal, wenn wir den Mauszeiger über das Element Wie gesagt, wir müssen die linke obere Position des Cursors innerhalb der Schaltfläche festlegen Um diese Positionen zu bekommen, müssen wir Decline X und Client verwenden. Warum Immobilien? Sie geben uns die obere und linke Position des Cursors, gemessen vom oberen und linken Rand des Viewports Um die Position des Cursors innerhalb der Schaltfläche zu ermitteln, müssen wir den Unterschied zwischen den X - und Y-Eigenschaften und der linken oberen Position des Cursors ermitteln Um es verständlicher zu machen, lassen Sie uns weitermachen und den Code schreiben. Zuerst werde ich das Event-Objekt mit dem Urin übergeben. Als Nächstes zeige ich Ihnen, wie Sie die Informationen über die Elemente erhalten. Dafür können wir eine der Methoden namens get bounding client rect verwenden namens get bounding client rect Lassen Sie uns die Konsole durchgehen und sehen, was uns diese Methode bietet. Ich gebe hier den Punkt, den Zielpunkt, den Bounding-Client Richtig. Dann werde ich die Seite überprüfen und zum Konsolen-Tab wechseln. Wenn ich also den Mauszeiger über den Button bewege, bekommen wir ein Objekt namens Dumb Racked Wenn ich es runtergelassen habe, finden Sie hier ein paar verschiedene Immobilien. Wir haben die Positionen, in denen ich mich befinde, unten, von links nach rechts und oben. Außerdem haben wir hier die Breite und Höhe des Elements. Außerdem können Sie hier die X- und Y-Eigenschaften sehen. Und eigentlich sind sie die gleichen wie die linken und oberen Eigenschaften. Wir können diese Werte verwenden, um die linke Position des Cursors zu berechnen . In der Taste. erstelle ich eine neue Variable. Nennen wir es links. Also brauchen wir hier den Punkt Client X, und wir müssen davon subtrahieren Sie zielen nicht auf einen Punkt ab, sondern umgrenzende, rechtwinklige Punkte übrig Lassen Sie uns in der Konsole überprüfen was uns die linke Variable gibt. Wenn wir den Mauszeiger über die Schaltfläche bewegen, erhalten wir die linke Position des Cursors Aber jetzt innerhalb des Buttons. Ich meine, es wird vom linken Rand der Box aus gemessen. In Ordnung? müssen wir die beiden Positionen definieren. Wir können diesen Code einfach duplizieren und dann den Namen der Variablen ändern, die wir oben benötigen. Und außerdem brauchen wir hier Client Y statt x, und wir brauchen wieder dein Top. In Ordnung? Also sind beide Positionen definiert und jetzt müssen wir neue Elemente für diese Positionen erstellen. Wir werden das mit einer der Methoden tun, die als Elemente erstellen bezeichnet werden. Ich deklariere eine neue Variable. Nennen wir es Ripple Dann müssen wir unten ein neues Div-Element erstellen Wie gesagt, ich werde die Methode Create Elements verwenden. Wir müssen hier den Tagnamen div angeben. Danach müssen wir die linke obere Position des Ripples definieren linke obere Position des Ripples Und wir werden die Werte verwenden , die wir hier definieren. Also brauchen wir hier Ripple-Punkt, Style-Punkt, links. Und es sollte dem Wert der linken Variablen entsprechen. Auf die gleiche Weise definiere ich die oberste Position. Lassen Sie uns diese Codezeile duplizieren und die die oben fehlen, ändern Okay, das Element wird erstellt, aber wir müssen es an die Schaltfläche anhängen Dafür müssen wir eine der Methoden verwenden, die als Prepend bezeichnet werden Wir brauchen BTN Dot Prepend. Und wir müssen hier die Variable Ripple übergeben. Ok, um zu beweisen, dass das Element beim Zeigen mit der Maus erstellt wird, wechseln wir zur Registerkarte Elemente und bewegen Sie dann den Mauszeiger über die Schaltfläche Wie Sie sehen können, wird Dede Allen innerhalb des Buttons erstellt Wir haben hier also linke und obere Positionen. Ordnung, als Nächstes müssen wir dieses Element in der CSS-Datei anpassen Lassen Sie uns eine neue Klasse erstellen und sie Ripple nennen. Damit eine linke und zwei Positionen funktionieren, ist die Position des Whirlpools definiert. Machen wir es absolut. Dann definierte Breite und Höhe. Ich werde beide auf 100% setzen. Und ändere auch die Hintergrundfarbe. Mach E7 zu E 08. Ordnung, schauen wir uns jetzt die Stile des Ripple Um sie auf die Elemente anzuwenden, müssen wir diese Klasse zur Elementklassenliste hinzufügen. Wir müssen also die Punktklassenliste erneut einfügen , gefolgt von der Methode add Und wir müssen hier Repo angeben. Okay? Wenn ich also den Mauszeiger über den Button bewege, erscheint das neue Element Wenn ich den Mauszeiger mehrmals über die Schaltfläche bewege, werden die verschiedenen Elemente erstellt Aber das werden wir bald beheben. Lassen Sie uns zunächst eine Runde daraus machen. Verwenden wir den Grenzradius 50 Prozent. Und außerdem müssen wir es um -50 Prozent nach links nach oben bewegen -50 Prozent nach links nach oben Verwenden wir Transform. Übersetze mit -50%. Zweimal. Okay, jetzt haben wir bessere Ergebnisse und es ist Zeit, eine Animation zu erstellen. Standardmäßig sind Breite und Höhe dieses Elements also Null. Sobald wir den Mauszeiger über die Schaltfläche bewegen, sollte die Größe der Republik mit der Animation zunehmen Lassen Sie uns also CSS-Keyframes erstellen. Ich werde es einen Ripple-Anime nennen. Insgesamt werden wir zwei verschiedene Schritte haben. Bei Null Prozent müssen wir innerhalb der Höhe Null sein. Für die 100% sollten wir Breite und Höhe auf 100% erhöhen. Ordnung, die Keyframes wissen also bereits, wie man diese Stile mithilfe einer Animationseigenschaft auf die Elemente anwendet diese Stile mithilfe einer Animationseigenschaft auf die Elemente Lass uns hier eine Pause einlegen, auch Ripple-Anime. Die Dauer wird 0,5 s betragen . Wenn ich jetzt den Mauszeiger über die Schaltfläche bewege, werden die Elemente gleichmäßig angezeigt Aber wie Sie sehen, haben wir hier ein paar Probleme. Sobald das Element erscheint und seine Größe vergrößert wird, dann in den Höhen. Also müssen wir die Stile, die wir haben, zu 100% beibehalten. Dafür müssen wir einen Wert verwenden, der als vorwärts bezeichnet wird. Jetzt ist dieses Problem also das feste Element, nicht mehr die Höhe. Das nächste Problem ist , dass die Größe des Elements nicht ausreicht, um den Boden zu bedecken, also müssen wir es vergrößern. Machen wir 200 Prozent draus. Jetzt ist die Größe also doppelt so groß, aber es reicht immer noch nicht aus, denn wenn ich die Maus einführe und sie am Rand der Taste anhalte, wird die Welligkeit nicht verdeckt Lassen Sie uns also die Höhe leicht erhöhen. Ich mache sie zu 210%. In Ordnung, jetzt ist das Problem behoben. Das nächste, was ich Ihnen abnehmen werde ist, die äußeren Teile des Repos zu verstecken Dafür müssen wir Overflow Hidden verwenden. In Ordnung, jetzt haben wir ein viel besseres Ergebnis. Das nächste, was ich tun möchte , ist, das Repo loszuwerden Sobald die Maus die Taste verlässt, müssen wir eines der Ereignisse verwenden, das als Mouse-Leave bezeichnet wird. Lassen Sie uns den Event-Listener an den Button anhängen. Live-Event mit Maus. Außerdem benötigen wir hier eine Callback-Funktion. Als Nächstes müssen wir das Repo entfernen. Dafür verwende ich die Methode „entferntes Kind“. Wir müssen das hier spezifizieren. Okay, also endlich sind wir fertig. Die Taste funktioniert einwandfrei. Es hat nette Effekte und Animationen. Ich finde es interessant und anders, und ich hoffe, es hat dir gefallen. Jetzt ist es an der Zeit, weiterzumachen und mit der Arbeit am nächsten Projekt zu beginnen. 11. Projekt 8 - Abgerundeter Fortschrittsbalken: In diesem Video erstellen wir einen Fortschrittsbalken Form eines Kreises mit einem Prozentwert. Der Fortschrittsbalken funktioniert also bei einem Scroll-Event. Standardmäßig haben wir hier null Prozent. Und sobald wir anfangen, auf der Seite nach unten zu scrollen, wird diese weiße Linie um den Kreis herum glatt mit der roten Farbe gefüllt. Und auch der Wert der Person wird entsprechend steigen. Wenn wir dann nach oben scrollen, der Prozentwert sinkt der Prozentwert und wir erhalten wieder den weißen Rand. Dieses Projekt ist Teil unseres bevorstehenden Udemy-Kurses, in dem wir eine komplette Website für Fortgeschrittene mit HTML, CSS und JavaScript von Grund auf neu erstellen werden eine komplette Website für Fortgeschrittene mit HTML, CSS und JavaScript von Es wird bald veröffentlicht, also bleiben Sie dran. Ordnung, das war's also, was wir in diesem Video erstellen Lass uns weitermachen und loslegen. Ich habe auf dem Desktop einen neuen Ordner namens Circle Progress Bar erstellt , der momentan leer ist. Lassen Sie uns weitermachen und es im VS-Code öffnen. Ich werde unsere Arbeitsdateien erstellen. Die erste wird index.html sein. Dann haben wir style.css und script.js. Öffnen Sie dann die Datei index.html und erstellen Sie ein einfaches HTML-Dokument. Wir müssen Ahmed verwenden, setzen wir hier ein Ausrufezeichen und drücken dann die Tabulatortaste oder die Eingabetaste Okay. Zuallererst werde ich den Titel ändern. Lassen Sie es den Fortschrittsbalken kreisen. Und dann verknüpfe CSS- und JavaScript-Dateien. Ich werde das Link-Tag im Hauptelement öffnen. Geben wir hier den Pfad der Datei an. Was die JavaScript-Datei angeht, öffne ich das Script-Tag direkt über dem abschließenden Body-Tag. Und dann müssen wir im Quellattribut den Pfad der Datei angeben. Richtig? Danach werde ich das Projekt über einen Live-Server im Browser ausführen. Platzieren Sie dann den Editor und den Browser nebeneinander. Ordnung, also zuerst erstellen wir einen Fortschrittsbalken mit HTML und CSS Ich meine, wir werden es so stylen. Und dann werden wir es mit JavaScript zum Laufen bringen. Fangen wir mit dem HTML-Markup an. Ich öffne ein div-Tag, das ein Container sein wird. Als Nächstes benötigen wir ein weiteres div-Tag, das den gesamten Inhalt umschließt, der dem Fortschrittsbalken der Klasse zugewiesen ist . Innerhalb des div-Tags werden vier verschiedene Elemente benötigt. Lassen Sie uns sie jetzt einfach erstellen und dann erklären und zeigen, warum wir diese Elemente benötigen. Öffnen wir also ein div-Tag mit einem Klassenhalbkreis. Dann duplizieren Sie es dreimal. Eigentlich müssen wir die zweite Entwicklung nicht anfassen. Der dritte wird ein halber Kreis sein. Das ist wahrscheinlich die letzte Entwicklung. Es wird ein Kreis mit Fortschrittsbalken sein. Wie der Inhalt. Geben wir hier standardmäßig Null Prozent ein. In Ordnung, das war's also mit dem HTML-Markup. Lass uns weitermachen und anfangen , etwas CSS zu schreiben. Ich werde einige gängige Stile kreieren. Wählen wir dafür jedes Element aus. Wir müssen ein Sternchen verwenden. Zuallererst werde ich den Standardrand und das Padding von jedem Element entfernen Standardrand und das Padding von jedem Element Lassen Sie uns beide auf Null setzen. Also mache ich Box-Sizing Border-Box und ändere dann Verwenden wir hier Aerial Helvetica sans-Serif. Also werden die üblichen Stile auf die Elemente angewendet. Als Nächstes ändere ich die Schriftgröße des HTML-Codes. Denn während dieses Projekts werde ich den RAM als Maßeinheit verwenden. Moment entspricht 1 g 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-Codes verringern. Machen wir 62,5% draus. Ich kann also sehen, dass der Text kleiner wurde. Okay, als Nächstes kümmern wir uns um den Container. Wählen wir es aus. Definieren Sie zunächst die Breite und Höhe. Ich setze die Breite auf 100%. Was die Höhe angeht, werde ich 200 Prozent der Viewports daraus machen , weil wir auf der Seite nach unten scrollen müssen Ich kann auch die Hintergrundfarbe ändern und ihn mit 555 grau machen. In Ordnung. Danach kümmere ich mich um den Fortschrittsbalken selbst. Ich meine den Wrapper, definiere seine Breite und Höhe Ich werde beide zu 40 Runs machen. Ändern Sie auch die Hintergrundfarbe. Machen Sie es weiß Und dann runden Sie den Fortschrittsbalken mit dem Randradius mit dem Wert 50 Prozent ab. Der Fortschrittsbalken sollte also in der Mitte platziert werden und er muss repariert werden , denn sobald wir auf der Seite nach unten scrollen, sollte er sich nicht bewegen. Lassen Sie uns also die Position festlegen, um sie zu korrigieren, dann benötigen wir die Eigenschaften oben und links, korrigieren, dann benötigen wir die Eigenschaften oben und links, beide müssen jeweils 50 Prozent betragen. Um das Element dann perfekt zu zensieren, mussten wir Transform mit der Übersetzungsfunktion verwenden Wir haben hier zwei Wege, zweimal -50 Prozent. In Ordnung, das war's mit der Verpackung. Lassen Sie uns weitermachen und uns um den Kreis der Fortschrittsbalken kümmern . Wählen wir es aus. Und lassen Sie uns zunächst seine Breite und Höhe definieren. Ich werde beide auf 239,4 RAM einstellen. Dann ändere die Hintergrundfarbe, es wird schwarz sein. Machen Sie auch die umgebenden Elemente mit einem Randradius von 50 Prozent. Ändern Sie dann die Farbe, machen Sie sie weiß und erhöhen Sie die Schriftgröße. Mach es zum Forum. Okay, also dieses Element ist installiert, aber wir müssen uns um seine Position kümmern. Es sollte in der Mitte der Verpackung platziert werden. Außerdem müssen wir der Person jeden Wert innerhalb des Kreises senden . In beiden Fällen verwende ich Flexbox und um zu vermeiden, dass ich immer wieder denselben Code schreibe , erstelle ich eine neue Klasse Nennen wir es Center und weisen wir ihm ein paar verschiedene Flexbox-Eigenschaften und -Werte zu ein paar verschiedene Flexbox-Eigenschaften und -Werte Das erste wird Display Flex sein, das wir benötigen. Richten Sie den Inhalt zentriert aus, um ihn horizontal zu zentrieren, und richten Sie die Artikel mittig aus, um ihn vertikal zentriert Danach müssen wir diese Klasse dem Fortschrittsbalken und dem Fortschrittsbalkenkreis zuweisen . Okay, jetzt kann man sehen, dass das Problem behoben ist. Der Fortschrittsbalken ist also vorbereitet. Es hat das Standard-Aussehen. Und jetzt müssen wir deine Arbeit erledigen. Wie Sie sich erinnern, haben wir verschiedene Entwicklungen entwickelt . Die ersten beiden Entwicklungen , die einen Klassenhalbkreis haben, werden es schaffen, den Fortschrittsbalken mit roter Farbe zu füllen. Als Erstes werde ich also den schwarzen Kreis für eine Weile ausblenden um Dinge besser zu erklären und zu demonstrieren , die dazu bestimmt sind, keinen anzuzeigen. Der schwarze Kreis ist also versteckt, und jetzt müssen wir uns um die drei Div-Elemente kümmern , die uns helfen werden, den Fortschrittsbalken zum Laufen zu bringen. Wählen wir alle drei Elemente gleichzeitig aus. Ich meine, wir brauchen einen halben Kreis und einen halben Kreis oben. Kümmern wir uns zunächst um ihre Positionen. Wir brauchen absolute Positionen. Lassen Sie uns außerdem die Eigenschaften top und left setzen, beide auf Null. Und nachdem ich Breite und Höhe definiert habe, setze ich die Breite auf 40%. Was die Höhe angeht, lassen Sie uns sie zu 100% angeben. Im Moment sind sie also nicht machbar. Und um das zu beheben, werde ich jedem von ihnen eine andere temporäre Hintergrundfarbe zuweisen . Wählen wir den ersten Halbkreis mit nten Child-Selektor aus und setzen seine Hintergrundfarbe auf Grün Dann dupliziere ich diesen Code, ändere die Zahl, die wir hier benötigen, auf S4 die Hintergrundfarbe, es wird blau sein Und schließlich wählen wir den oberen Halbkreis aus und setzen die Hintergrundfarbe auf, sagen wir, Orange. Ordnung, also werden alle drei Entwicklungen übereinander gelegt Zuerst werde ich den Fortschrittsbalken beim Zeigen mit der Maus zum Laufen bringen, damit er leichter zu verstehen Und dann ändern wir den Mauszeiger und verwenden das Scroll-Event mithilfe von JavaScript Also müssen wir den ersten Halbkreis um 180 Grad drehen . Was den zweiten Halbkreis betrifft, müssen wir ihn um 360 Grad drehen , weil wir den gesamten Kreis füllen müssen . Was die halbkreisförmige Oberseite angeht, ich meine diese orangefarbenen Elemente, wir müssen sie verstecken. Lassen Sie uns also weitermachen und den Fortschrittsbalken auswählen, indem Sie den Mauszeiger bewegen, gefolgt vom ersten Halbkreis Verwenden wir noch einmal den untergeordneten Selektor, den wir mit der Rotationsfunktion transformieren müssen Und wie gesagt, der Wert wird 180 Grad betragen. Lassen Sie uns diesen Code duplizieren. Ändere die n-te Kindernummer, mache sie auch. Was den Wert der Drehfunktion angeht, so wird er 360 Grad betragen. Außerdem müssen wir den Übergang nutzen, um die Rotation reibungsloser zu gestalten. Verwenden wir also Transition mit der Wertetransformation. Die Dauer für den ersten Halbkreis wird 1 s betragen Außerdem müssen wir hier linear verwenden. Dann schnappen wir uns diesen Code und fügen ihn für den zweiten Halbkreis ein. Das einzige, was wir ändern müssen, ist die Dauer. Machen wir 2 s. Wenn wir also den Mauszeiger bewegen, drehen sich die Elemente. wir also den Mauszeiger bewegen, drehen sich die Elemente Moment sehen wir hier nur ein blaues Element, weil das grüne unverheiratet ist Wenn ich den blauen Hintergrund hier pausiere, werden Sie die grünen Elemente sehen. Die Elemente drehen sich also, aber auf die falsche Weise. Ich meine, der Ursprung der Transformation ist standardmäßig auf Zensur eingestellt Aber in unserem Fall müssen wir es in die richtige Mitte bringen. Verwenden wir also den Transformationsursprung und legen ihn genau in die Mitte. In diesem Fall wird der Ursprung der Transformation also wird der Ursprung der Transformation das Zentrum des Elements sein. Aber auf der rechten Seite müssen wir, sobald wir den Mauszeiger über den Fortschrittsbalken bewegen, sobald wir den Mauszeiger über den Fortschrittsbalken bewegen, diese orangefarbenen Elemente ausblenden Wählen wir also den Fortschrittsbalken aus, indem wir den Mauszeiger bewegen, gefolgt vom oberen Kreis, und setzen dessen Opazität auf Null Nun also die Elementhöhen sobald wir den Mauszeiger über den Fortschrittsbalken Aber eigentlich versteckt es sich zu früh. Wir müssen es verstecken. Möchte, dass sich das grüne Element nicht mehr dreht. Also müssen wir es nach 1 s verstecken. Verwenden wir Transition. Mit Opazität. Dauer wird 0 s betragen. Was die Verzögerung angeht, sie wird 1 s betragen. In Ordnung, jetzt funktioniert alles einwandfrei Jetzt müssen wir die Farben ändern und wir müssen auch die Elemente drum herum erstellen. Die ersten beiden Entwicklungen sollten eine rote Farbe haben. Ich meine, die Farbe B6 mit vier Nullen. Was das dritte Element angeht, wird es weiß sein, weil der Fortschrittsbalken selbst den weißen Hintergrund hat. Jetzt müssen wir diese äußeren Teile der Elemente verstecken. Verwenden wir dafür Overflow Hidden. Jetzt ist es versteckt. Wir haben ein viel besseres Ergebnis. Schließlich müssen wir den schwarzen Kreis sichtbar machen. Lassen Sie uns also das Display None entfernen. Gerade jetzt. Der Teil des Kreises ist sichtbar , weil er hinter den Div-Elementen gelandet ist. Um das zu beheben, verwenden wir die Index-Eigenschaft. Wir müssen ihm einen höheren Wert als Null zuweisen , sagen wir zehn. Okay, wenn ich jetzt den Mauszeiger über den Fortschrittsbalken bewege, wird er schön mit der roten Farbe gefüllt Ordnung, jetzt haben wir Ihnen gezeigt, wie Sie mit CSS einen Fortschrittsbalken erstellen Und jetzt zeigen wir Ihnen, wie Sie mithilfe von JavaScript Ihre Arbeit am Scrollen erledigen können. Werfen wir einen Blick auf das fertige Projekt. Wenn ich also nach unten scrolle, wird der Fortschrittsbalken gefüllt. Und auch die Person , die Sie schätzen wird sich entsprechend ändern, sodass sie abnehmen wird, sobald wir wieder nach oben scrollen. Lassen Sie uns zunächst diese Stile kommentieren. Ich meine, diese Handtücher schweben. Gehen Sie dann zur JavaScript-Datei. Zunächst wähle ich die div-Elemente aus. Ich meine, für Div-Elemente, die in der Fortschrittsleiste platziert werden. Lass uns weitermachen und mit den Halbkreisen beginnen. Erstellen Sie eine neue Variable und nennen Sie sie Halbkreise. In diesem Fall wählen wir zwei Elemente aus, daher müssen wir die Methode Query Selector All verwenden Geben wir hier den Klassennamen an, Halbkreis. Das nächste Element wird ein halber Kreis sein. Lassen Sie uns also diese Codezeile duplizieren. Ändern Sie den Namen der Variablen. Wir brauchen einen halben Kreis oben. Außerdem müssen wir den Selektor abfragen. Anstelle von Query Selector alle Methoden für den Klassennamen werden alle Methoden für den Klassennamen zur Hälfte so genannt top sein Lassen Sie uns diese Codezeile duplizieren. Ändern Sie erneut den Namen der Variablen. Es wird ein Kreis mit Fortschrittsbalken sein. Und ändere auch den Klassennamen. Wir brauchen einen Kreis mit Fortschrittsbalken. In Ordnung, also sind alle Entwicklungen ausgewählt. Als Nächstes füge ich dem Dokument ein Scroll-Event hinzu. Verwenden wir die Methode Add Event Listener. Wir müssen hier angeben, dass die Veranstaltung Scroll sein wird. Außerdem benötigen wir hier eine Callback-Funktion, die ausgeführt wird, sobald wir die Seite scrollen Wie Sie wissen, entspricht die eine vollständige Umdrehung 360 Grad. Wir müssen den gescrollten Teil der Höhe in Grad umrechnen den gescrollten Teil der Höhe in Grad Bevor wir das tun, müssen wir ein paar verschiedene Variablen definieren. Der erste wird der Viewport sein, die Höhe der Seite Lassen Sie uns eine neue Variable erstellen und sie Seitenansicht, Höhe nennen Es wird ein Fenster in Ihrer Höhe sein Die nächste Variable wird die gesamte Höhe der Seite sein. Lassen Sie uns also die Seitenhöhe erstellen. Es sollte den Punkten von Dokumenten mit Dokumentenelementen entsprechen. Und dann brauchen wir die Schrifthöhe. Also nochmal, wir haben hier die gesamte Höhe der Seite definiert. Und die letzte Variable wird dieser gecrawlte Teil der Seite sein dieser gecrawlte Teil der Seite Lassen Sie uns also eine neue Variable erstellen. Ich nenne es gekritzelte Portion. Und es sollte dem Y-Offset der Fensterpunktseite entsprechen. Ordnung, jetzt ist also alles bereit, um die Höhe dieses Wachstumsanteils in Grad umzurechnen die Höhe dieses Wachstumsanteils in Grad Lassen Sie uns eine neue Variable erstellen. Ich nenne es den Grad des Scrollabschnitts. Und jetzt müssen wir die folgende Formel verwenden. Wir müssen den gescrollten Teil durch die Differenz der Seitenhöhe und der Höhe des Seitenansichtsfensters dividieren die Differenz der Seitenhöhe und der Höhe des Seitenansichtsfensters und der Höhe des Seitenansichtsfensters Und wir müssen das Ergebnis mit 360 multiplizieren. Wir benötigen also den gescrollten Teil geteilt durch den Unterschied zwischen Seitenhöhe und Höhe des Seitenansichtsfensters Wir müssen es mit 360 Grad multiplizieren. Sehen wir uns in der Konsole an, was uns diese Variable bietet. Lassen Sie uns die Konsole durchgehen, das heißt Portionsgrad. Schauen wir uns also die Seite an und wechseln wir zum Konsolen-Tab. Sobald wir auf der Seite nach unten scrollen und zum Ende gehen, erhalten wir die richtigen Werte von 0-360 Grad. Ordnung, jetzt verwenden wir diese Variable, um Halbkreise zu drehen Also müssen wir sie durchgehen und jeden Halbkreis drehen. Ich bin in der ersten und zweiten Entwicklung im Fortschrittsbalken. Um sie in einer Schleife durchzugehen, müssen wir also eine der Array-Hilfsmethoden verwenden , die for-each heißt Es benötigt einen Parameter, der die Callback-Funktion sein wird Es wird für jedes Element ausgeführt. Die Callback-Funktion selbst benötigt einen Parameter und ist das aktuelle Element in der Liste Nennen wir es E L-Elemente. Jetzt müssen wir jedes Element transformieren. Wir brauchen eine Stiltransformation. Dann öffne die hinteren Zecken. Wir brauchen hier die Rotationsfunktion. Und als Wert müssen wir Ihnen den Grad des Scrollabschnitts übergeben. Wenn wir jetzt also nach unten scrollen, fühlt sich dieser Scrollbalken an. Sobald wir die Hälfte erreicht haben, müssen wir den ersten Halbkreis beenden. Und außerdem müssen wir das dritte Div-Element verstecken. Ich bin in der sogenannten oberen Hälfte. Wir müssen also die If-Aussage verwenden in der wir definieren müssen ob der Scott-Portionsgrad größer oder gleich 180 ist. Lassen Sie uns also Ihre erwähnte Bedingung einfügen. Wenn diese Bedingung zutrifft, müssen wir dem ersten Halbkreis den festen Wert geben , der 180 Grad entspricht. Um den ersten Halbkreis auszuwählen, müssen wir die Indexzahl Null verwenden. Und dann brauchen wir eine Stiltransformation. Es sollte gleich sein, um 180 Grad zu drehen. Also müssen wir den Halbkreis oben verstecken. Verwenden wir den Stil, erhöhen die Opazität und setzen sie auf Null Sobald wir also nach unten scrollen, wird der gesamte Fortschrittsbalken gefüllt. Was haben wir hier? Ein winziges Problem, sobald wir nach oben scrollen und das als Portionsgrad bezeichnet wird, wird es kleiner als 180 Grad. Wir müssen den halben Kreis oben auf der Rückseite zeigen. Also müssen wir eine andere Aussage erstellen. Dann nehmen wir diese Codezeile, fügen sie hier ein und ändern diesen Wert, machen wir daraus einen. Jetzt kann es also sehen, dass alles perfekt funktioniert. Das einzige , was Sie tun müssen, ist , dass der Prozentwert funktioniert. In diesem Fall müssen wir Grad in einen Prozentwert umrechnen . Lassen Sie uns eine neue Variable erstellen. Ich nenne es Prozent des Scrollanteils. In diesem Fall müssen wir also gescrollten Abschnitts durch 360 Grad teilen und ihn dann mit 100 multiplizieren Okay? Jetzt müssen wir diesen Wert als Inhalt des Fortschrittsbalkens als Kreis anzeigen . Verwenden wir also den Fortschrittsbalken als Kreis mit Textinhalt. Dann öffne Backticks. Geben Sie hier den gescrollten Teil ein, gefolgt vom Prozentzeichen Im Moment funktioniert der Prozentwert, aber wir haben hier die Dezimalzahlen Um sie los zu werden, müssen wir eine der Methoden namens Math.floor verwenden Wie Sie jetzt sehen können, funktioniert alles perfekt. Und eigentlich sind wir mit dem Projekt fertig 12. Projekt 9 - Diashow von Social-Media-Icons: In diesem Video werden wir eine Diashow der Social-Media-Symbole erstellen eine Diashow der Social-Media-Symbole Es wird ein kleines Projekt sein, aber ich denke, es wird interessant sein , bevor wir mit der Erstellung des Projekts beginnen Ich werde es beschreiben. Wir haben hier also ein Vollbild-Hintergrundbild und ein paar nette Social-Media-Icons Sie bewegen sich mit einigen Integralen. Und das Symbol in der Mitte wird heller. Die übrigen Symbole sind standardmäßig dunkler. Wie gesagt, wir werden dieses Projekt mit HTML, CSS und JavaScript erstellen . Ich gehe also davon aus, dass Sie alle die Grundlagen dieser drei Technologien bereits kennen . Ich habe auf dem Desktop einen neuen Ordner namens Slideshow erstellt , in dem ich einen weiteren Ordner für die Bilder habe Lassen Sie uns weitermachen und diesen Ordner und den VS-Code öffnen. Ich werde unsere Arbeitsdateien erstellen. Die erste wird index.html sein. Dann haben wir style.css und script.js. Lassen Sie uns die Datei index.html öffnen und ein einfaches HTML-Dokument erstellen. Dafür werde ich Emmet verwenden. Wir müssen hier ein Ausrufezeichen platzieren und dann die Tabulatortaste oder die Eingabetaste drücken Okay, danach ändern wir den Titel. Das scheinen ein paar Social-Media-Ikonen zu sein. Dann verlinke ich CSS- und JavaScript-Dateien. Öffnen wir das Link-Tag im Hauptelement und geben den Pfad der CSS-Datei an. Was das JavaScript angeht, öffne ich das Script-Tag unten, direkt über dem abschließenden Body-Tag. Geben Sie hier den Pfad der JavaScript-Datei an. Danach führen wir das Projekt im Browser aus. Dafür verwende ich einen Live-Server, der es uns ermöglicht, das Projekt über einen lokalen Server live im Browser auszuführen . Und schließlich platzieren wir den Texteditor und den Browser nebeneinander Einfach so und los geht's. Wir sind also bereit, ein HTML-Markup zu erstellen. Öffnen wir das div-Tag, das der Wrapper des Inhalts sein wird Ordnen wir der Klasse eine Diashow zu. Insgesamt werden wir fünf verschiedene Social-Media-Symbole haben. Sie werden durch die Bilder dargestellt, und sie werden auch von den Link-Elementen umhüllt. Es ist also ein offener Link-Tag mit einem Diashow-Link zur Klasse, das Institut hier und Ich wähle ein Bild mit dem Namen Slideshow IMG One aus. Lassen Sie uns das Link-Element viermal duplizieren und dann schnell die Nummern der Bildnamen ändern. Okay, das war's mit dem HTML-Markup. Alles ist vorbereitet und jetzt können wir etwas CSS schreiben. Zuallererst werde ich die Icons anpassen und anpassen . Und danach werden wir dafür sorgen, dass die Diashow mit JavaScript funktioniert Lassen Sie uns zunächst einige gängige Stile erstellen und diese zurücksetzen. Wählen wir alle Elemente 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 Setzen wir also beide auf Null. Außerdem brauchen wir Box Sizing, Border-Box. Und ich werde die Standardstile von den Links entfernen. Verwenden wir Textdekoration, keine. Während dieses Projekts werde ich also eine Rampe als Maßeinheit verwenden. Standardmäßig entspricht 1 g 16 Pixeln, da die Schriftgröße des HTML-Elements 16 Pixeln entspricht. Ich werde einen Lauf in zehn Pixel umwandeln. Und dafür werde ich die Schriftgröße der HTML-Elemente verringern . Machen wir 62,5% draus. Okay, das war's mit den gängigen Stilen. Wählen wir ein Wrapper-Div-Element aus. Zuallererst werde ich definieren, wir können uns verstecken, lass uns mit 100% machen. Was die Höhe angeht, werde ich sie auf 100% des Viewports setzen Als Nächstes lege ich das Bild als Vollbild-Hintergrund fest Aber vorher verwenden wir eine Funktion namens radialer Gradient. Funktion Radialer Farbverlauf legt den Farbübergang von der Mitte aus fest. Also werde ich hier zwei verschiedene Farben angeben. Die erste wird 483 mal sein und die Opazität 0,9 bis fünf Das ist für die zweite Farbe. Ich füge hier schwarze Farbe mit einer Opazität von 0,9 bis fünf ein Danach definieren wir die URL. Ich wähle ein Bild mit dem Namen bg dot PNG aus. Auch hier müssen wir auf die Position zentriert sein und keine Wiederholung. Lassen Sie uns abschließend die Größe des Hintergrunds definieren . Machen wir es zu einem Titelbild Wie Sie sehen können, haben wir hier ein Vollbild-Hintergrundbild Als Nächstes werde ich dafür das Symbol nebeneinander platzieren. Verwenden wir Flexbox. Wir brauchen Display Flex. Und danach richten wir die Symbole aus und zentrieren sie vertikal. Verwenden Sie „Elemente ausrichten“. Zentrum. Lassen Sie uns außerdem mithilfe von Polstern etwas Platz auf der linken und rechten Seite schaffen mithilfe von Polstern etwas Platz auf der linken und rechten Seite Ich setze es auf Null und gehe dann los. In Ordnung, schauen wir uns das Wrapper an. Kümmern wir uns um die Icons. Ich werde sie verkleinern. Wählen wir den ersten Slideshow-Link aus und machen ihn auf 20% breit Danach müssen wir die Breite des Bildes selbst definieren . Wählen wir also IMG-Elemente und setzen die Breite auf 100 Prozent. In diesem Fall nimmt das Bild also 100% der Breite des übergeordneten Elements ein. Richtig? Das war's mit dem CSS. Vorerst. Wir müssen dafür sorgen, dass die Diashow mit JavaScript funktioniert. Es ist also diese Datei script.js geöffnet. Zunächst wähle ich Ihre Wrapper-Div-Elemente Ich meine die Diashow, lass uns eine neue Variable erstellen und sie Slideshow nennen Wählen Sie dann das Element mithilfe der Abfrageauswahlmethode aus. Wir müssen hier den Klassennamen angeben. Diashow. Ordnung, lassen Sie mich Ihnen sagen wie wir diese Diashow zum Laufen bringen Wir werden das erste Symbol aus der Liste entfernen und es als letztes wieder zur Liste hinzufügen. Wir werden das mit einigen Intervallen und auch mit einigen sanften Übergängen Hier dreht sich alles um den Prozess der Diashow. Wie gesagt, wir brauchen einige Intervalle. Und dafür verwende ich eine der integrierten Methoden namens Set Interval. Es braucht zwei Argumente. Die erste ist eine Callback-Funktion, die nach jedem Intervall ausgeführt wird Was das zweite Argument angeht, wird es die Größe des Intervalls selbst sein. Wir werden die Bilder nach 3 s ändern. Ich werde hier 3.000, 3.000 Millisekunden verstreichen, was 3 s entspricht. Okay, wie gesagt, wir müssen das erste Symbol entfernen und es dann als letztes zur Liste hinzufügen Wählen wir also zunächst das erste Symbol aus. Ich werde eine neue Variable erstellen. Nennen wir es erstes Symbol. Ich wähle das erste Symbol eine der Eigenschaften verwende, die als erstes Element Child bezeichnet wird. Ich meine, es wird das Kind dieser Diashow sein. Jetzt ist das erste Symbol ausgewählt, und um es aus den Wrapper-Div-Elementen zu entfernen, verwende ich eine der Dome-Methoden namens remove child Also brauchen wir eine Diashow. Dann entferne das Kind. Und als Argument müssen wir Ihr erstes Symbol weitergeben. Wie Sie alle 3 s sehen können, das Symbol. wir sie also, wie gesagt, entfernen müssen wir sie wieder zur Liste hinzufügen. Und dafür verwende ich eine andere Dome-Methode namens Append Child Standardmäßig fügt es ein Element als letztes Kind hinzu. Wir brauchen also eine Diashow, gefolgt von der Methode Append Child. Und als Argument müssen wir hier noch einmal für eine Sekunde durchgehen. Okay, wie Sie sehen können, zeigt die Folie alle Werke. Aber wir müssen ein paar verschiedene Effekte hinzufügen. Als erstes werde ich das erste Symbol sanft mit einem Fade-Effekt entfernen . Um das zu tun, werde ich eine neue Klasse in CSS erstellen. Nennen wir es ausgeblendet. Diese Klasse wird also zwei Stile beinhalten. Um die Elemente auszublenden, müssen wir die Opazität und die Breite Null setzen. Setzen wir also Opazität und Breite auf Null. Außerdem müssen wir Transition für das erste Symbol verwenden . Um das erste Symbol auszuwählen, verwende ich die Kinderauswahl Wir müssen hier einen angeben. Und dann fügen wir Ihren Übergang mit einer Dauer von 0,5 s Opazität mit derselben Dauer ein Das war's mit dem CSS. Gehen wir zurück zur JavaScript-Datei. Jetzt müssen wir dem ersten Symbol eine ausgeblendete Klasse hinzufügen. Also brauchen wir hier das erste Symbol, gefolgt von der Eigenschaft class list, die uns alle Klassen des Elements gibt. Dann müssen wir eine Methode namens add verwenden. Und wir müssen hier den ausgeblendeten Klassennamen angeben. Jetzt wird das Symbol entfernt, aber ohne Fade-Effekt, da Übergangseffekt einige Zeit benötigt. Eigentlich halbe Sekunde Wir müssen die Hälfte dieser Sekunde warten bevor wir das Element aus der Liste entfernen. Um das zu tun, verwende ich eine der Methoden namens setTimeout Es ermöglicht uns, die Funktion einmal mit einer gewissen Verzögerungszeit auszuführen . Diese Methode benötigt also zwei Argumente. Die erste ist eine Callback-Funktion. Lassen Sie uns diese beiden Linien durcheinander bringen. Was das zweite Argument angeht, so wird es eine Verzögerungszeit sein. In diesem Fall benötigen wir die Hälfte der Sekunde 500 Millisekunden Jetzt wird das Symbol mit einem schönen Fade-Effekt entfernt. Jetzt müssen wir es mit einem Fade-Effekt wieder zur Liste hinzufügen . Um das zu tun, müssen wir das Klassen-Fadeout aus den Elementen entfernen. Wir brauchen das erste Symbol, gefolgt von der Klassenlisteneigenschaft. Und dann müssen wir die Methode entfernen verwenden. Geben wir hier das Ausblenden des Klassennamens an. Jetzt wird das Symbol zur Liste hinzugefügt, jedoch ohne Fade-Effekt. Denn auch hier müssen wir auf die halbe Sekunde warten. Wir müssen also erneut die Set-Timeout-Funktion verwenden , die diese Codezeile in die Funktion einfügt und auch die Verzögerungszeit von 500 Millisekunden Jetzt haben wir hier immer noch keinen Fade-Effekt weil wir den Übergang für das letzte Symbol definieren müssen . Gehen wir zur CSS-Datei. Eigentlich brauchen wir den gleichen Übergang , den wir für das erste Symbol verwendet haben. Also füge ich hier nur den Selektor für das fünfte Symbol Moment funktioniert alles gut und wir können weitermachen und uns um den zweiten Effekt kümmern. Ich meine, wir müssen die Icons standardmäßig dunkler machen. Und dann müssen wir sie leichter machen , sobald sie den dritten Platz belegt haben, zumindest, wie es im fertigen Projekt der Fall ist. Lassen Sie uns zunächst alle Symbole dunkler machen. Dafür verwende ich eine der CSS-Eigenschaften namens Filter mit einer Funktion namens Brightness. Geben wir Ihre 0,1 ein. Dieser Wert bedeutet also , dass das Element nur zehn Prozent seiner Standardhelligkeit beibehält . Danach erstelle ich eine neue Klasse und CSS, die die höhere Helligkeit beinhalten werden. Und wir fügen diese Klasse mithilfe von JavaScript zum Element hinzu. Nennen wir diese Klasse Licht , dann verwenden wir wieder Filter, wobei die Funktion Helligkeit der für Sie interessante Wert 1,5 ist. Okay, gehen wir zurück zur JavaScript-Datei. Jetzt müssen wir das dritte Symbol auswählen und ein neu erstelltes Klassenlicht hinzufügen. Lassen Sie uns eine Variable erstellen und sie drittes Symbol nennen. Um Zugriff auf das dritte Symbol zu erhalten, verwende ich eine Eigenschaft namens children. Und dann müssen wir in eckigen Klammern die Anzahl der Elemente angeben. In diesem Fall brauchen wir drei. Jetzt haben wir das Element ausgewählt und müssen ihm die Klasse Licht hinzufügen. Also brauchen wir hier Fußsymbol, Punkt, Klassenliste, Punkt hinzufügen. Und wir müssen hier den Klassennamen light angeben. Wie Sie sehen, wird das Symbol jetzt heller, aber die Helligkeit bleibt erhalten. Das brauchen wir also nicht. Wir müssen das Klassenlicht wieder entfernen. Wir müssen es aus dem vorherigen Geschwister des dritten Symbols entfernen dem vorherigen Geschwister des dritten Symbols Denn sobald es sich bewegt, dann ist es nicht mehr das dritte Symbol in der Liste, sondern das zweite, das wir hier durch den Icon-Punkt benötigen, vorherige Elemente gleichrangig, gefolgt von der Klassenlisteneigenschaft Dann brauchen wir eine Methode namens remove. Und wieder, Klasse wie Okay, jetzt funktioniert alles gut. Wir müssen diesem Effekt nur einen Übergang hinzufügen. Gehen wir zur CSS-Datei. Wählen Sie das dritte Symbol aus. Verwenden Sie erneut den nten Child-Selektor als den Institutsübergang mit dem Filter 0,5 s. Okay, jetzt haben wir also viel bessere Ergebnisse Ich kann, es wird langsam dunkler. Aber wie Sie sehen, brauchen wir einen Übergang sobald das Symbol ebenfalls heller wird. Fügen wir also dem Klassenlichtfilter als Dauer einen Übergang hinzu. Geben wir hier 1,5 s an. Okay, jetzt war alles in Ordnung. Und bevor wir dieses Tutorial beenden, werde ich noch eine Sache machen. Wenn ich die Seite neu lade, werden alle fünf Icons dunkler. brauchen wir nicht. Wir müssen dein drittes Symbol standardmäßig heller machen. Und um das zu tun, füge ich dem dritten Symbol und der HTML-Datei Klassenlichter hinzu. Okay, das ist alles. Endlich sind wir fertig. Wir haben die Arbeit an den Projekten abgeschlossen. Auch hier war es ein kleines, aber ich hoffe, es war interessant. Und du hast es genossen. Wir sehen uns beim nächsten Mal. 13. Projekt 10 - Formulare mit Validierung: In Ordnung, es ist Zeit, mit der Arbeit an unserem nächsten Projekt zu beginnen Arbeit an unserem nächsten Projekt zu In diesem Video werden wir Anmelde - und Anmeldeformulare erstellen Heutzutage haben wir auf fast jeder Website Anmelde- und Anmeldeformulare erstellt. Diese Art von Projekt wird für Sie also interessant und hilfreich sein , denn wenn Sie an Ihren Projekten arbeiten, sollten Sie wissen, wie man mit diesen Dingen umgeht. Bevor wir anfangen, den Code zu schreiben, lassen Sie uns das Projekt beschreiben. Hier haben wir also zwei verschiedene Schaltflächen Melden Sie sich an und registrieren Sie sich in der oberen linken Ecke der Seite. Dann haben wir hier die Überschrift. Standardmäßig zeigt es Anmeldung an , programmiert es jedoch mit JavaScript. Dann unten hatten wir ein paar Eingabefelder und eine Schaltfläche zum Senden. Standardmäßig werden Eingabefelder für die Anmeldung angezeigt . Aber wenn ich auf die Schaltfläche Anmelden klicke, dann bekommen wir hier die Eingabefelder für die Registrierung. Darüber hinaus beinhaltet das Projekt eine Formularvalidierung. Wenn ich zum Beispiel die Eingabefelder leer lasse und auf die Schaltfläche „Senden“ klicke, erhalten wir die Fehlermeldung , dass E-Mail und Passwort erforderlich sind. Wenn ich zum Beispiel eine der Eingaben spüre , sagen wir das Passwort und klicken Sie auf die Schaltfläche Senden. Dann erhält das Eingabefeld einen grünen Rand, was bedeutet, dass wir die gültigen Daten und das Eingabefeld eingegeben haben die gültigen Daten und das Eingabefeld Okay, das Projekt wird also auf verschiedene Bildschirmgrößen reagieren. Wenn ich die Seite überprüfe und in den Responsive-Modus wechsle, werden Sie feststellen, dass das Projekt responsiv ist. Wir haben dieses Projekt für eine extra große Bildschirmgröße gebaut. Ich habe die Bildschirmgröße mit 1920 Pixeln Breite und 1080 Pixeln Höhe. Wenn Sie also eine relativ kleinere Bildschirmgröße als das Projekt verwenden , sieht das während des Tutorials möglicherweise nicht ganz gut aus, aber machen Sie sich am Ende des Tages keine Sorgen, wir werden es responsiv machen. In der Zwischenzeit können Sie in den responsiven Modus wechseln die Breite und Höhe für die extra große Bildschirmgröße festlegen . Und folge mir. Wie bereits erwähnt, wird das Projekt auf Basis von HTML, CSS und JavaScript erstellt . Ich hoffe also, dass Sie bereits einige Grundlagen dieser drei Technologien kennen . Ich denke, wir sind bereit zu beginnen. Ich habe auf dem Desktop einen neuen Ordner mit dem Namen Anmelde- und Anmeldeformular erstellt auf dem Desktop einen neuen Ordner mit dem Namen Anmelde- und , der derzeit leer ist Lassen Sie uns weitermachen und es im VS-Code öffnen und die Arbeitsdateien für HTML, CSS und JavaScript erstellen . Wir brauchen index.html, dann style.css und script.js. Öffnen Sie dann die Datei index.html und fügen Sie hier das grundlegende HTML-Dokument ein. Dafür verwende ich eine Animation. Platzieren wir hier ein Ausrufezeichen und drücken Sie die Tabulatortaste oder antworten Sie Okay. Lass uns weitermachen und den Titel ändern. Ich füge Ihr Anmelde- und Anmeldeformular ein. Und danach verknüpfen wir die CSS - und JavaScript-Dateien. Ich öffne das Link-Tag und gebe den Pfad der CSS-Datei an. Um dann die JavaScript-Datei zu verlinken, öffne ich das Script-Tag rechts, über den Hauptteil und das Quellattribut. Geben wir den Pfad der Datei an. Schließlich werde ich das Projekt im Browser ausführen. Verwenden wir dazu eines der VS-Codepakete namens Live Server. Es ermöglicht uns, das Projekt im Browser auszuführen und Aktualisierungen vorzunehmen , ohne die Seite jedes Mal zu aktualisieren. Sie können dieses Paket also installieren und verwenden. Okay, lassen Sie uns den Editor und die Browser so nebeneinander platzieren Browser so nebeneinander Und fang an. Wie üblich fange ich an, HTML-Markup zu erstellen. Öffnen wir also das div-Tag, das der Container sein wird. Dann füge ich Ihr H1-Überschriftenelement mit einer Klassenüberschrift ein Die Überschrift wird aus zwei verschiedenen Spanelementen bestehen. Öffnen wir es mit der Klassenüberschrift, spannen wir die erste Zeile , setzen das Textzeichen und erstellen dann ein zweites Spanelement mit Klassenüberschriften , die wir hier einfügen. Das war's mit der Überschrift. Als Nächstes erstelle ich Schaltflächen. Öffnen wir also das div-Tag, das die Hülle der Schaltflächen sein wird Ich werde ihm Klassenschaltflächen zuweisen. Fügen Sie dann Ohrstöpsel und Elemente mit dem Klassenzeichen in BTN Fügen wir Ihre Anmeldung ein. Dann dupliziere ich diese Codezeile und ändere den Klassennamen. Wir müssen uns anmelden und anmelden. Als Nächstes erstelle ich ein Formular, aber vorher fügen wir hier ein div-Tag ein , das den Hintergrund des Formulars bilden soll. Ich meine das Dreieck als wissenschaftliche Klasse für g. Dann öffne ich den Formulartag. Es wird zwei verschiedene Klassen geben. Der erste wird gebildet. Was den zweiten betrifft, fügen wir Ihr Zeichen ein. Insgesamt haben wir ein einziges Formularelement mit vier verschiedenen Eingabefeldern. Und wir werden es schaffen, Teile anzuzeigen, anzumelden und zu Teile anzuzeigen, anzumelden und indem wir JavaScript als offenes Div-Tag verwenden, das das Eingabefeld und den Absatz umschließt Eingabefeld und den Absatz Weisen wir ihm die Klasse Form Input Wrapper zu. Wir werden den Absatz verwenden, um eine Fehlermeldung anzuzeigen. Fügen wir hier ein Eingabeelement mit Typtexten ein. Außerdem werde ich einige Attribute hinzufügen, die den Cluster-Formulareingaben zugewiesen sind. Dann benötigen wir die ID, die der Benutzername sein wird. Lassen Sie uns nun abschließend ein Platzhalterattribut verwenden , das Ihren Namen abwertet Okay, das war's mit dem Eingabeelement. Lassen Sie uns den Absatz mit der Klassennachricht erstellen. Standardmäßig füge ich hier eine Fehlermeldung ein. Aber irgendwann werden wir die Fehlermeldungen von JavaScript definieren . Das erste Eingabefeld wird also erstellt. Lassen Sie uns das Element dreimal duplizieren und dann einige Änderungen vornehmen. Für die zweite Eingabe benötigen wir eine ID-E-Mail. Ändern Sie auch das Platzhalterattribut und geben Sie Ihre E-Mail-Adresse Als nächstes werden wir eine Eingabe für das Passwort haben. Lassen Sie uns also den Typ ändern, ihn zu einem Passwort machen und auch die ID- und Platzhalterattribute ändern Wir benötigen ein Passwort für beide. Okay? Die letzte Eingabe dient der Passwortbestätigung. Also werde ich die Art der Eingabe noch einmal vornehmen , Passwort. Was den Ausweis angeht, so wird es sich um einen Reisepass handeln. Schließlich ändere ich das Platzhalterattribut, ich werde es zur Bestätigung des Passworts machen In Ordnung? Das letzte Element, das wir im HTML-Dokument erstellen , wird eine Schaltfläche zum Senden sein. Öffnen wir also das Eingabeelement mit dem Typ submit. Fügen Sie hier auch den Wert submit hinzu. Und schließlich benutze dein Klassenformular btn. In Ordnung, das war's mit dem HTML-Markup. Jetzt müssen wir anfangen, das CSS zu schreiben. Lassen Sie uns zunächst einige Reset- und Common-Stile erstellen. Wählen wir jedes Element mit einem Sternchen aus und entfernen Sie den Standardrand und den Abstand Ich setze beide auf Null. Außerdem legen wir den Rahmen in Boxgröße fest und entfernen auch die Standardkontur von jedem Element Lassen Sie uns die Gliederung auf Null setzen. Als Nächstes ändere ich die Schriftfamilie. In diesem Tutorial werden wir eine der Google-Schriftarten verwenden. Gehen wir also zur Google Fonts-Website und suchen in Console Ladder nach einer Schrift namens Console Ladder. Dann wähle hier alle verschiedenen Styles aus. Schnappen Sie sich den Link und fügen Sie ihn in das Hauptelement ein. Lassen Sie uns die Schriftfamilie ändern. Das ist unsicher in Console Ladder und Monospace. Das mit den Common- und Reset-Stilen ist albern. Ich werde RAM als Maßeinheit in diesem Projekt verwenden . Moment entspricht ein REM 16 Pixeln, da die Schriftgröße des HTML-Elements 16 Pixeln entspricht. Standardmäßig möchte ich ein RAM in zehn Pixel umwandeln. Und dafür müssen wir die Schriftgröße der HTML-Elemente verringern . Machen wir 62,5% draus. Wie Sie sehen können, wurden die Elemente kleiner. Lass uns weitermachen und uns um den Container kümmern. Wählen wir es aus. Und bei der ersten Definition von Breite und Höhe setze ich auf 200 Prozent. Was die Höhe angeht, setze ich sie auf 100% des Viewports Dann werde ich den Inhalt zentrieren. Und dafür verwenden wir Flexbox. Wir müssen die Richtung ändern. Machen wir daraus eine Kolumne. Und um den Inhalt dann in der Mitte zu platzieren, benötigen wir das Justify-Content Center und das Alignment Items Center Okay? Also werden die Elemente in die Mitte gelegt und mit dem Behälter sind wir fertig. Lassen Sie uns weitermachen und die Überschrift anpassen. Kümmern wir uns zunächst um seine Position. Ich werde es nach oben verschieben. Ordnen wir also einer Position absolut zu. Und dann definiere die oberste Position, mache fünf Rampen werden berücksichtigt, die Überschrift ist positioniert, und jetzt werde ich sie zuerst stylen. Ändern wir die Schriftgröße, machen wir sieben RAM draus. Dann werde ich die Schrift mit der Schriftstärke 300 heller machen . Ändere auch die Farbe, mach es drei-fünf, drei-fünf Als Nächstes werde ich etwas Abstand zwischen den Buchstaben schaffen den Buchstabenabstand eines Raums verwende. Erzeuge auch einen Schatteneffekt. Textschatten verwenden. Lassen Sie uns die Wahrheitswerte 0,2, 0,2, 0,5 RAM und die Farbe AAA zuweisen . Im Moment, das war's mit der Überschrift. Lassen Sie uns weitermachen und die Schaltflächen anpassen. Zuerst werde ich ihre Positionen definieren. Wählen wir also die Wrapper-Div-Elemente aus, die über die Schaltflächen für den Klassennamen verfügen, und setzen ihre Position auf absolut Und dann definiere die Eigenschaften oben und links. Ich werde beide auf fünf Rampen stellen. Die Felder befinden sich also in der oberen linken Ecke der Seite Und als Nächstes werde ich sie vertikal in einer Spalte platzieren. Verwenden wir dafür Flexbox. Wir benötigen die Spalten „Flex“ und „ Flexrichtung“ anzeigen. Okay, lass uns weitermachen und Schaltflächen auswählen. Ich bin im Button-Element selbst. Zunächst definiere ich die Breite und Höhe. Machen wir mit zehn RAM. Was die Höhe angeht, werde ich sie für RAM auf einstellen. Und ändere auch die Hintergrundfarbe, mache sie weiß. Danach ändern wir die Schriftgröße. Ich werde es zu Ram schaffen. Ändere auch die Farbe. Verwenden wir wieder die Farbe F Null, drei-fünf, drei-fünf. Dann werde ich den Standardrahmen loswerden. Setzen wir es auf Null. Außerdem werde ich die Ecken der Boxen um sie herum mit einem Randradius mit einem Wert von fünf rem erstellen der Boxen um sie herum Randradius mit einem Wert von fünf Als Nächstes erstellen wir mit einem Buchstabenabstand von 0,1 RAM etwas Abstand zwischen den Buchstaben. Also werde ich einen kleinen Schatteneffekt erzeugen. Verwenden wir also sowohl Shadow mit den Werten 0,3, 0,3 RAM als 0,8 rem, die Farbe E. Dann benötigen wir oben und unten an den Buttons etwas Platz. Verwenden wir also Margin mit den Werten eins, RAM und Null. Und schließlich ändern wir die Art des Kurses, um es deutlich zu machen. In Ordnung? Die Knöpfe sind also gestylt und jetzt müssen wir uns um die Form kümmern Lassen Sie uns weitermachen und es auswählen. Ich werde einen Flex-Container für Formularelemente erstellen. Wir brauchen also Display Flex. Und ich werde auch die Richtung ändern. Stellen wir die Flexrichtung ein, um anzurufen. Als Nächstes kümmern wir uns um den Formulareingabe-Wrapper. Aber vorher möchte ich diese Absätze für eine Weile ausblenden diese Absätze für eine Weile Lassen Sie uns also weitermachen und sie auswählen und ihnen keine Anzeige zuweisen. Danach wählen wir den Formulareingabewrapper aus. Ich werde oben und unten mit dem Rand etwas Platz schaffen . Setzen wir es auf 1,5 rem und Null. In Ordnung, lassen Sie uns weitermachen und das Eingabeelement selbst auswählen. Und definiere für die Fallbreite und -höhe. Ich werde die Breite auf 50 RAM als volle Höhe festlegen. Machen wir fünf RAM draus. Ändere auch die Hintergrundfarbe und mache sie weiß. Dann werde ich die Schriftgröße erhöhen. Machen wir 1,7 Rem daraus. Schaffen Sie dann mit Padding etwas Platz auf der rechten und linken der rechten und linken Seite innerhalb der Eingänge Machen wir 0,2 RAM daraus Lassen Sie uns zum Schluss etwas Abstand zwischen den Buchstaben schaffen, indem wir weniger Abstandspunkte für die Rampe verwenden. Das waren also die üblichen Stile der Eingaben. Die Eingaben und der Senden-Button. Jetzt wähle ich die Formulareingabe selbst aus. Lassen Sie uns mithilfe von Box Shadow mit dem Wertepunkt, den wir ausgeführt haben, einen Schatten erstellen . Wir haben 0,5 Rem gelaufen. Als nächstes müssen wir oder E anrufen. Und außerdem füge ich hier einen weiteren Wert hinzu. Ich möchte innerhalb der Eingabe einen Schatten erzeugen. Und dafür müssen wir einen Wert namens Inset verwenden. Als Nächstes ändern wir die Farbe. Du siehst deine Farbe 888. Okay, danach entfernen wir den Standardrahmen für alle Eingabeelemente Also werde ich die Grenze auf Null setzen. Und außerdem werde ich Ecken abgerundet machen , wobei der Randradius dem Wert von fünf Okay? Moment haben Eingabeelemente also einen Box-Shadow innerhalb der Felder, und ich werde ihn auch außerhalb des Elements erstellen auch außerhalb des Elements Dazu weisen wir dem Formulareingabe-Wrapper die Eigenschaft box shadow zu Es sind die gleichen Wahrheitswerte, dreimal 0,5 RAM. Und die Farbe ist Und außerdem benötigen wir für den Radius mit dem Wert fünf Rampe. Jetzt hat jedes Eingabefeld innen und außen einen Box-Shadow, wodurch es gut aussieht Lassen Sie uns weitermachen und uns um diesen Senden-Button kümmern , wir sehen hier nur den Text zum Senden. Lassen Sie uns also weitermachen und dieses Element auswählen. Und erstellen Sie zunächst Schatten mit Box Shadow. Ich gebe Ihnen die Werte 0,5 rem, 0,5 RAM, ein RAM und die Farbe D, D, D. Lassen Sie uns außerdem die Farbe des Textes ändern. Verwenden wir bei 03535 wieder rote Farbe. Als Nächstes werde ich oben und unten mithilfe von Margin etwas Platz schaffen . Setzen wir es auf zwei RAM und Null. Lassen Sie uns also etwas Abstand zwischen den Buchstaben schaffen. Verwenden Sie zum Laufen seitliche Abstandspunkte. Und dann machen Sie die Schrift fett, indem Sie die Schriftstärke fett verwenden. Die Schaltfläche „Senden“ sieht gut aus. Als Nächstes möchte ich einen kleinen Schwebeeffekt erzeugen. Ich werde die Bulk-Schatten leicht erhöhen, sobald wir den Mauszeiger über die Schaltfläche Wählen wir also Form btn mit dem Mauszeiger aus. Und dem Toothbox Shadow zugewiesen, wo die Werte 0,5 RAM, 0,5 RAM RAM und die Farbe d, d, d sind. Okay? Das Letzte, was wir tun müssen, bevor wir die Funktionalität zu unserem Projekt hinzufügen die Funktionalität zu unserem Projekt ist, einen Hintergrund zu erstellen. Wie Sie wissen, haben wir im HTML-Dokument ein leeres div-Element mit der Klassenform PG. Lassen Sie uns also weitermachen und dieses Element auswählen. Und lassen Sie uns zunächst seine Position auf absolut setzen. Dann setze ich Breite und Höhe, beide auf 65 RAM. Benutze hier auch Box Shadow mit 1,5 Runden dreimal und der Farbe ddd Schließlich möchte ich dieses Element um 45 Grad drehen und es entsteht ein Dreieckseffekt. Verwenden wir also Transformieren mit der Drehfunktion und fügen hier 45 Grad Wie Sie sehen können, sind wir mit dem Hintergrund fertig. Eigentlich. Im Moment haben wir hier ein kleines Problem. Ich kann mich nicht auf die Eingaben konzentrieren. Um das zu beheben, weisen wir dem Formularelement eine Indexeigenschaft mit einem höheren Wert zu , sagen wir 100. Okay, jetzt ist das Problem behoben und mit diesem Thailand sind wir vorerst fertig Wir müssen dem Projekt einige Funktionen hinzufügen. Bevor wir anfangen, JavaScript zu schreiben, möchte ich ein paar Dinge und CSS machen. Sobald wir die Eingaben fokussiert haben , möchte ich den Box-Shadow innerhalb des InputField vergrößern den Box-Shadow innerhalb des InputField Also wähle ich die Formulareingabe mit einer Fokus-Pseudoklasse Und dann fügen Sie Ihren Boxschatten mit den folgenden Werten ein. Fünf Rampen, 0,5, rem ein RAM als die Farbe E. Und auch hier brauchen wir den eingestellten Wert. Dann verwende Transition. Ich möchte allen Eingabeelementen, einschließlich der Schaltfläche „Senden“, eine Übergangseigenschaft zuweisen möchte allen Eingabeelementen, einschließlich der Schaltfläche „Senden“, eine Übergangseigenschaft , da sie auch einen Box-Schatteneffekt hat. Es ist jedoch ein definierter Übergang mit den Werten Box Shadow und 0,3 s. Okay, jetzt haben wir einen viel besseren Effekt. Ich werde den Typkurs für die Schaltfläche „Senden“ ändern . Machen wir es also zum Zeiger. Ordnung, jetzt ist es an der Zeit, dem Projekt einige Funktionen hinzuzufügen Schauen wir uns die fertige Version an. Übrigens haben wir hier nicht den dreieckigen Hintergrund, weil das fertige Projekt für uns alle responsiv ist. Ich werde diese beiden Tasten programmieren. Wie Sie sehen können, hat die Anmeldeschaltfläche standardmäßig eine andere Hintergrundfarbe Und sobald wir auf die Schaltfläche „Anmelden“ klicken, ändern sich die Hintergrundfarben. Außerdem ändert sich der zweite Teil der Überschrift entsprechend. Und auch die richtigen Eingabefelder für die Anzeige von onClick. Wir werden diese drei Dinge tun. Lassen Sie uns zunächst die standardmäßige weiße Hintergrundfarbe dieser Schaltflächen entfernen . Wählen Sie dann die Anmeldeschaltfläche und ändern Sie die Hintergrundfarbe Ich werde deine Farbe E7, E7, E7 verwenden. Wählen Sie dann die Schaltfläche „Registrieren“ und stellen Sie die Hintergrundfarbe weiß ein. Ordnung, jetzt ändere ich die Hintergrundfarben onclick Gehen wir zur Datei script.js. Also müssen wir an beide Schaltflächen Event-Listener mit dem Click-Event anhängen beide Schaltflächen Event-Listener mit dem Click-Event Sobald wir dann auf die Schaltfläche „Anmelden“ klicken, müssen wir dem Container eine neue Klasse hinzufügen , die in CSS verwendet wird . Mit Hilfe dieser Klasse definieren wir neue Stile. Lassen Sie uns also zunächst den Container auswählen. Ich werde einen neuen Variablencontainer erstellen. Und wählen Sie dann den Container mithilfe der Abfrageauswahlmethode aus. Wir müssen hier den Klassencontainer angeben. Danach wähle ich die Anmeldeschaltfläche und füge ihr einen Event-Listener hinzu Also lass uns weitermachen und erneut die Abfrage verwenden, eine Methode auswählen und hier den Klassennamen angeben, melde dich an. Hängen Sie es dann im Event-Listener mit einem Klick auf Event an. Außerdem müssen wir hier die Callback-Funktion übergeben, die ausgeführt wird, sobald wir auf die Schaltfläche klicken Wenn wir auf die Schaltfläche Anmelden klicken, müssen wir dem Container eine neue Klasse hinzufügen. Also brauchen wir hier einen Container, gefolgt von der Klassenlisteneigenschaft, die alle Klassen speichert , die das Element hat. Um die Klasse zum Container hinzuzufügen, verwende ich eine Methode namens add. In den Klammern. Wir müssen den Namen der Klasse angeben. Nennen wir es Veränderung. Okay, gehen wir zur CSS-Datei und wählen die Anmeldeschaltfläche, aber mit dem Klassenwechsel Und dann setzen Sie die Hintergrundfarbe auf E7, E7, E7. Wenn ich jetzt auf die Schaltfläche „Anmelden“ klicke, ändert sich die Hintergrundfarbe. Aber eigentlich ist es nicht genug. Wie Sie sehen, hat die Anmeldeschaltfläche immer noch die graue Hintergrundfarbe. Gehen wir also zurück zur JavaScript-Datei. Jetzt müssen wir die Anmeldeschaltfläche und den Event-Listener anhängen Anmeldeschaltfläche und den Event-Listener Und wir müssen den Klassenwechsel aus dem Container entfernen. Lassen Sie uns also weitermachen und mit der QuerySelector-Methode die Schaltfläche Anmelden auswählen und dann Event-Listener daran anhängen Lassen Sie uns hier eine Pause einlegen, auf Event und auch auf die Callback-Funktion klicken und auch auf die Callback-Funktion Wie gesagt, wir müssen die geänderte Klasse auf dem Container entfernen. Lassen Sie uns weitermachen und uns diese Codezeile schnappen. Und statt der Methode mit dem Namen add verwenden wir remove. Gehen Sie dann zur CSS-Datei. Im Gegensatz zur Schaltfläche „Registrieren“ wählst du die Anmeldeschaltfläche mit der Klasse, ändere sie und setze die Hintergrundfarbe auf Weiß Wie Sie sehen können, sieht jetzt alles in Ordnung aus. Die Hintergrundfarben ändern sich. Das einzige, was getan werden musste, war, Schaltflächen einen Übergangseffekt hinzuzufügen. Verwenden wir also den Übergang mit der Hintergrundfarbe und einer Dauer von 0,3 s. In Ordnung, jetzt haben wir einen viel besseren Effekt Als Nächstes kümmere ich mich um die Überschrift. Sobald wir Schaltflächen erstellen konnten, sollten wir den zweiten Teil der Überschrift entsprechend ändern . Zuerst werde ich es ändern, ohne dass es Auswirkungen hat. Und sobald wir es geschafft haben, den Inhalt zu ändern, werden wir einige nette Effekte hinzufügen. Gehen wir zur JavaScript-Datei. Und wenn zuerst, wählen wir das zweite Spanelement in der Überschrift aus. Ich werde eine neue Variable erstellen. Nennen wir es Überschriften Teil zwei. Und wählen Sie dann Span-Elemente mit der Methode querySelector aus. Lass uns hier eine Pause machen. Die Überschrift des Klassennamens umfasst zwei Bereiche. Um also den Inhalt der Elemente zu ändern, verwende ich eine der Eigenschaften, die als Textinhalt bezeichnet werden. Also brauchen wir Hering Spawn zwei, gefolgt von der Eigenschaft TextContent, und wir müssen ihr up zuweisen Kopieren wir diesen Code. Fügen Sie es unten ein und ändern Sie es nach oben in E. Wenn ich also auf die Schaltflächen klicke, ändert sich der Inhalt entsprechend. Alles funktioniert gut. Und jetzt, wie gesagt, werde ich dieser Änderung einige nette Effekte hinzufügen. Schauen wir uns das fertige Projekt noch einmal an. Wenn ich also auf die Schaltflächen klicke, bewegt sich das weiße Feld von rechts nach links und erzeugt einen schönen Effekt. Dieses weiße Feld wird das hintere Pseudoelement sein Lassen Sie uns zunächst diese Elemente erstellen. Wir brauchen Versteck zwei, gefolgt von den F2-Pseudoelementen Lassen Sie uns zunächst einen Inhalt definieren. Ich mache es leer. Und dann die Position auf absolut setzen. Ich werde die Position dieses Elements anhand seines übergeordneten Elements definieren , das das Span-Element selbst ist. Also werde ich dem Spanelement eine relative Position zuweisen . Definieren Sie dann die Breite und Höhe der Box. Ich werde beide auf 100% setzen und ihm auch einige temporäre Hintergründe geben, die sich von der weißen Farbe unterscheiden , weil ich die Box sichtbar machen möchte. Verwenden wir hier die Farbe Hellgrau. Jetzt ist die Box sichtbar. Und als Nächstes definiere ich seine Position Standardmäßig platziere ich sie auf der rechten Seite. Setzen wir die richtige Position auf -100%. Ordnung, wenn ich also auf die Schaltfläche „Anmelden“ klicke, sollte sich dieses Feld auf die linke Seite bewegen Und um das zu erreichen , werde ich wieder Klassenwechsel nutzen. Gefolgt von den Überschriften Span zwei mit Pseudoelementen Um die Elemente zu bewegen, werde ich die richtige Position zu 200 Prozent festlegen. Wenn ich jetzt auf die Schaltflächen klicke , bewegt sich das Feld. Fügen wir einen kleinen Übergang hinzu. Lassen Sie uns das zuordnen, oder? Und 0,6 s. Jetzt bewegt sich die Box mit einem sanften Übergang. Es kann sehen, wenn sich das Feld nach links bewegt dann über der Überschrift landet. Ich bin im ersten Span-Element. Also müssen wir das beheben und wir können mit der Z-Index-Eigenschaft manipulieren Wählen wir das erste Span-Element aus, das die Klassenüberschrift Spine One hat, und legen wir die Indexeigenschaft auf zehn fest. Okay, jetzt ist das Problem behoben und das einzige, was Sie tun müssen, ist, eine gewisse Verzögerungszeit hinzuzufügen , bevor der Kontinent geändert wird. Denn gerade ändert sich zuerst der Inhalt und dann bewegt sich die Box. Und sieht eigentlich nicht gut aus. Ich werde eine Verzögerung mit einer der eingebauten Funktionen namens setTimeout erzeugen der eingebauten Funktionen namens setTimeout Gehen wir zur Datei script.js und fügen sie hier ein. Lege eine Auszeit fest. Diese Funktion benötigt zwei Argumente. Die erste ist die Callback-Funktion, die nach einiger Zeit ausgeführt wird Und die Dauer dieser Zeit wird das zweite Argument sein. Lassen Sie uns diese Codezeile ausführen. Was das Timeout angeht, müssen Sie es in Millisekunden angeben Geben wir also ein Jahr ein, 200. Kopieren wir diesen Code und fügen ihn hier ein. Ich werde zu E wechseln . Wenn ich also jetzt auf die Schaltflächen klicke, funktioniert der Effekt einwandfrei. Das Einzige, was ich tun musste, war, diese temporäre Farbe loszuwerden und weiße Farbe zu interviewen. Okay, jetzt haben wir einen schönen und coolen Effekt. Okay, mit der Überschrift sind wir fertig und müssen uns nun um die Eingabefelder kümmern Standardmäßig müssen wir E-Mail- und Passworteingaben n anzeigen E-Mail- und Passworteingaben . Sobald wir die Schaltfläche „Anmelden“ haben konnten , müssen wir den Vor- und Nachnamen sowie den Nachnamen sowie den Nachnamen anzeigen . Lassen Sie uns also weitermachen und das erste und das letzte Eingabefeld ausblenden . Ich wähle sie mit der Kinderauswahl aus. Ich werde eigentlich den Formulareingabewrapper auswählen. Wir brauchen hier F Kind eins. Dann duplizieren Sie diesen Selektor und ändern Sie die Nummer. Fügen Sie hier ein für. Um diese Elemente auszublenden, verwende ich Visibility Hidden und Opazität Zero Wie Sie sehen können, sind die Eingaben versteckt, aber jetzt ist die Senden-Schaltfläche zu weit von diesen Eingaben entfernt. Also kümmern wir uns darum. Ich setze Position auf Relativ. Und dann , um das Element mit einem Wert minus sechs nach oben zu bewegen . Nun, wenn wir auf die Schaltfläche „Anmelden“ klicken, müssen wir aber ein paar Dinge tun. Wir müssen es zurückzeigen. Die erste und die letzte Eingabe. Ich werde diesen Code duplizieren. Dann fügen wir zu beiden Selektoren einen Klassenwechsel hinzu. Dann müssen wir die Werte ändern. Statt verborgener Sichtbarkeit brauchen wir Sichtbarkeit sichtbar und Opazität eins Außerdem müssen wir diesen Senden-Button wieder an seine Standardposition bringen . Wählen wir also die Schaltfläche Senden, wobei Klassenwechsel und Setup an einer Rampe positioniert sind. Wenn wir also auf die Schaltfläche „ Anmelden“ klicken, funktioniert alles einwandfrei. Um diese Änderung schöner zu gestalten, müssen wir den Übergang nutzen Zuerst. Fügen wir den Input-Rappern einen Übergang Wir brauchen deine Werte alle und 0,3 s. Dann müssen wir mit dem Klassenwechsel übergehen. Und außerdem müssen Sie eine gewisse Wartezeit nutzen. Wenn wir also auf die Schaltfläche „Anmelden“ klicken, funktioniert dieser Übergang. Und sobald wir auf die Anmeldeschaltfläche klicken, funktioniert dieser Übergang In Ordnung, mit den Eingabefeldern sind wir fertig. Fügen wir der Schaltfläche „Senden“ einen Übergang hinzu. Standardmäßig setze ich den Übergang nach oben. Dann die Dauer 0,3 s und auch die Verzögerungszeit 0,3 s. Und außerdem benötigen wir hier einen Übergang mit dem Wert top und 0,3 s. Wenn ich also auf die Schaltfläche „Anmelden“ klicke, werden wir problemlos abschicken. Aber sobald ich auf die Schaltfläche „Anmelden“ klicke, haben wir keinen Übergangseffekt. Der Grund dafür ist, dass wir Transition mit Eingabeelementen verwendet haben . Und tatsächlich hat dieser Selektor die höhere Priorität Also werde ich den Übergang von hier aus loswerden und in beiden Fällen unten Box-Schatten hinzufügen Also wenn ich jetzt teste, dann wird alles perfekt funktionieren. Okay. Als Nächstes müssen wir also all diese Eingabefelder validieren. Zunächst wähle ich alle vier Eingabeelemente und speichere sie in den Variablen. Lassen Sie uns weitermachen und die erste Variable erstellen, die Benutzername sein wird. Wie ich mich erinnere, haben Eingabeelemente die IDs. Also wähle ich den Benutzernamen mit der Methode get element by ID aus. Wir müssen den ID-Benutzernamen weitergeben. Lassen Sie uns diese Codezeile dreimal duplizieren und die Namen der Variablen und auch die IDs ändern. Die zweite wird E-Mail sein. Dann haben wir auch Passwort und Passwort. Okay, lassen Sie uns zuerst überprüfen, ob die Eingabefelder leer sind oder nicht Ich werde eine Funktion erstellen. Lassen Sie uns weitermachen und es „Pflichtfelder überprüfen“ nennen. Ich werde hier die Pfeilfunktion verwenden. Diese Funktion verwendet einen Parameter, der ein Array sein wird, und enthält alle Amplituden Als Parameter füge ich also Ihr Eingabe-Array ein. Um also zu überprüfen, ob Eingabefelder leer sind oder nicht, müssen wir zuerst das Array durchgehen. Und dafür verwende ich eine der Array-Hilfsmethoden, die für H aufgerufen werden Array-Hilfsmethoden, die für H aufgerufen . Sie benötigt ein Argument , das die Callback-Funktion sein wird Diese Funktion selbst benötigt einen Parameter und ich übergebe Ihre Eingabe. Es wird das aktuelle Eingabeelement während der Schleife sein. Ordnung, jetzt müssen wir überprüfen, ob der Wert der Eingabe leer ist oder nicht Wir müssen also If-Else-Aussagen verwenden. Und als Bedingung, die ich hier übergebe, entspricht das Dreifache des eingegebenen Punktwerts einer leeren Zeichenfolge. Eigentlich reicht der Eingabewert hier nicht ganz aus, denn wenn wir etwas mit einem Leerzeichen in die Eingabefelder eingeben , wird dieses Leerzeichen als der Teil des Werts erkannt , den wir nicht benötigen Um solche Dinge zu vermeiden, meine ich, um den Leerraum zu ignorieren, können wir eine der Methoden namens trim verwenden Okay? Wenn diese Bedingung also zutrifft, müssen wir eine Fehlermeldung anzeigen. Lass uns einfach den Kommentar hier einfügen. Und wenn es falsch ist, dann brauchen wir eine Else-Anweisung , in der wir die Farbe des Randes der Eingaben auf grün ändern müssen. Lassen Sie uns also für eine Weile einen Erfolg erzielen. Um diese beiden Dinge zu tun, werde ich zwei verschiedene Funktionen erstellen. Fangen wir mit der Fehlermeldung an. Ich werde eine neue Funktion erstellen. Nennen wir es Fehler. Es werden zwei Parameter benötigt. Das erste werden die Eingabeelemente sein. Was den zweiten betrifft, so wird es eine Botschaft sein. Jetzt müssen wir also Zugriff auf den Formulareingabewrapper erhalten , der ein übergeordnetes Element der Eingabe ist Wir werden dem Wrapper eine neue Klasse hinzufügen. Und wer wird es mit Hilfe dieser neuen Klasse schaffen, eine Fehlermeldung anzuzeigen. Okay, lassen Sie uns weitermachen und eine Variable erstellen. Ich nenne es Input Wrapper. Um also Zugriff auf den Eingabe-Wrapper zu erhalten, benötigen wir eine Eingabe, gefolgt von der Eigenschaft Parent-Element Jetzt müssen wir dem Eingabe-Wrapper eine neue Klasse hinzufügen. Und dafür verwende ich eine der Eigenschaften namens className Lass uns deine Klasse einfügen. Sagen wir Fehler. Tatsächlich hat dieses Element eine eigene Klasse, die ein Wrapper für Formulareingaben ist Wenn wir hier nur einen Fehler haben, dann wird die bestehende Klasse überschrieben Um dies zu vermeiden, fügen wir hier ein Formular ein, das auch für Rapper geeignet In Ordnung, als Nächstes wähle ich den Absatz aus. Wir können das mit dem Dokument machen, aber in diesem Fall wird der erste gefundene Absatz ausgewählt. Anstelle von Dokumenten verwende ich also einen Eingabe-Wrapper gefolgt von der Abfrageauswahlmethode In der Klammer müssen wir die Klasse der Absatznachricht angeben die Klasse der Absatznachricht Okay, jetzt müssen wir den Inhalt der Fehlermeldung ändern den Inhalt der Fehlermeldung Verwenden wir dazu die TextContent-Eigenschaft und sie sollte der Nachricht entsprechen Die Funktion für die Fehlermeldung ist bereit. Wir können es unten in der IF-Anweisung aufrufen. Es sollte zwei Argumente erfordern. Der erste wird auch der Input sein. Die zweite wird die Botschaft sein. Lassen Sie uns also die hinteren Häkchen öffnen, weil ich Template-Literale verwenden werde Also gebe ich Ihnen die ID der Eingabe. Wie Sie wissen, haben alle vier Eingänge die IDs. Dann sollte der Text folgen, der erforderlich ist. In Ordnung? Um diesen Code auszuführen, müssen wir diese Funktion aufrufen. Und es sollte passieren, sobald wir das Formular abgeschickt haben. Also müssen wir den Formularelementen einen Event-Listener mit einem Submit-Event anhängen den Formularelementen einen Event-Listener mit einem Submit-Event Wählen wir zunächst das Formularelement aus. Lassen Sie uns eine neue Variable erstellen und die Formularelemente mithilfe der Abfrageauswahlmethode auswählen die Formularelemente mithilfe der Abfrageauswahlmethode Dann daran angehängt und Event-Listener. Ich werde deine Einreichungsveranstaltung bestehen. Und auch die Callback-Funktion, die ausgeführt wird, sobald wir das Formular absenden Lassen Sie uns zunächst etwas auf der Konsole ausführen , sagen wir, eingereicht. Wenn ich also auf die Schaltfläche „Senden“ klicke, werden wir in der Konsole eingereicht. Aber wie Sie sehen können, blinkt es. Und das passiert, weil die Schaltfläche Senden standardmäßig die Seite neu lädt Um dieses Verhalten zu verhindern, müssen wir eine Methode namens prevent default verwenden und sie an das Event-Objekt anhängen. Lassen Sie uns Ihnen also gerade Objekte übergeben und dann die Standardmethode prevent verwenden, die an das Event-Objekt angehängt würde. Wenn ich nun auf die Schaltfläche „Senden“ klicke, wird das Problem behoben. Jetzt können wir die Funktion Check als Pflichtfelder aufrufen. Es sollte ein Argument benötigen, das eine Reihe von Eingabefeldern sein wird . Lassen Sie uns also alle vier Eingaben übergeben. Benutzername, E-Mail, Passwort und Passwort ebenfalls. Okay, zu diesem Zeitpunkt werden wir die Fehlermeldungen nicht sehen , da wir etwas CSS schreiben müssen. Moment sind die Absätze versteckt, also werde ich sie sichtbar machen. Lassen Sie uns Display None loswerden. Wir sehen hier also fest codierte Fehlermeldungen. Und wenn ich auf die Schaltfläche „ Senden“ klicke, erhalten wir die Fehlermeldungen, die wir gerade aus dem JavaScript definiert haben. Wenn ich einige Zeichen in eine der Eingaben eingebe, erhalten wir eine Fehlermeldung aus dem leeren Eingabefeld. Lassen Sie uns weitermachen und den Absatz anpassen. Zuallererst werde ich seine Position auf absolut setzen. Um den Absatz dann entsprechend dem Eingabe-Wrapper zu positionieren , weisen wir ihm eine relative Position zu Und dann füge dem Absatz einige weitere Stile hinzu. Ich definiere die linke Position und schaffe es ins RAM. Ändern Sie dann die Schriftgröße und legen Sie einen Punkt auf RAM fest. Außerdem werde ich den Schriftordner mit font-weight 700 erstellen den Schriftordner mit font-weight Erstellen Sie dann mithilfe des Buchstabenabstands etwas Abstand zwischen den Buchstaben. 0,1 RAM. Transformiere auch Text in Großbuchstaben. Schaffen Sie dann etwas Platz am oberen Rand des Elements, indem Sie den Rand an oberster Stelle verwenden. Und zuletzt ändere die Farbe, mache es zu F5, F5, E5 In Ordnung, der Absatz ist also angepasst. Standardmäßig sollte es ausgeblendet sein und wir müssen beim Senden Fehlermeldungen anzeigen. Lassen Sie uns also die Absätze ausblenden, indem wir die Sichtbarkeit ausgeblendet und die Opazität auf Null setzen Jetzt sind Fehlermeldungen standardmäßig ausgeblendet und um sie anzuzeigen, müssen wir Klassenfehler verwenden. Gefolgt von der Nachricht. Wir müssen hier bestehen, Sichtbarkeit sichtbar und Opazität eins Lassen Sie uns abschließend die Opazität von Transition Institute und die Dauer 0,3 s verwenden . Wenn ich also auf die Schaltfläche „Senden“ klicke, erhalten wir unsere Nachrichten mit einem schönen Übergang Eigentlich haben wir hier ein kleines Problem, wie ich es für das letzte Eingabeelement sehe. Wir haben eine Fehlermeldung, dass ein Passwort erforderlich ist. Und eigentlich macht es keinen Sinn. Ich möchte diese Nachricht ändern. Dazu müssen wir eine weitere if-Anweisung verwenden , in der wir überprüfen müssen , ob die ID der Eingabe auch dem Passwort entspricht. Stellen wir diese Bedingung also hier ein. Wenn das also wahr ist, müssen wir die Funktion error aufrufen. Wir müssen Ihre Eingaben und die Fehlermeldung weitergeben. Eine Passwortbestätigung ist erforderlich. Als Nächstes müssen wir die L-Anweisung verwenden. 14. Projekt 11 - Kalender: In Ordnung, also lassen Sie uns weitermachen und uns um unsere nächsten Projekte kümmern In diesem Abschnitt werden wir den Kalender erstellen. Wir haben hier also einen dunklen Vollbildhintergrund und in der Mitte der Seite sehen wir den Kalender Es zeigt uns den aktuellen Monat mit dem aktuellen Datum. Unten haben wir die Wochentage, gefolgt vom gesamten Monat Sie können sehen, dass der aktuelle Tag des Monats hervorgehoben ist. Außerdem haben wir hier zwei Pfeile. Wenn wir nach unten klicken, wechseln wir zur nächsten und vorherigen Mathematik Sie können sich also alle Termine in der Zukunft oder in der Vergangenheit ansehen . In Ordnung, das werden wir also erstellen. Ich habe auf dem Desktop einen neuen Ordner namens Kalender erstellt . Lassen Sie uns weitermachen und es im VS-Code öffnen. Ich werde die Starterdateien für HTML, CSS und JavaScript erstellen . Nennen wir sie index.html. Dann style.css und script.js. Öffnen Sie dann die Datei index.html und erstellen Sie das grundlegende HTML-Dokument. Ich werde Animate verwenden. Platzieren wir hier das Ausrufezeichen und drücken Sie die Eingabetaste oder Los geht's. Lass uns weitermachen und den Titel ändern. Ich füge deinen Kalender ein. Dann verknüpfe ich die CSS- und JavaScript-Dateien mit dem HTML. Lassen Sie uns das Link-Tag öffnen und den Pfad der Datei angeben. 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 . Schließlich werde ich das Projekt im Browser starten. Dafür verwende ich eines der CSS-Pakete, das als Live-Server bezeichnet wird. Es ermöglicht uns, das Projekt im Browser auszuführen und die Änderungen und Updates vorzunehmen ohne die Seite jedes Mal zu aktualisieren. Ich empfehle, dieses Paket herunterzuladen und zu installieren. Okay, zum Schluss werde ich den Editor und den Browser quasi nebeneinander platzieren den Editor und den Browser quasi nebeneinander . Und fang an. Zuerst erstelle ich das HTML-Markup. Wir werden einige statische Daten verwenden, aber schließlich werden wir diese Daten dynamisch aus JavaScript erstellen. Öffnen wir das div-Tag, das der Container sein wird. Dann benötigen wir eine weitere Standardeinstellung, den Kalender selbst. Der Kalender wird also aus drei Hauptteilen bestehen. Wir haben einen aktuellen Monat mit diesem grünen Hintergrund. Dann haben wir die Wochentage und schließlich die Tage des Monats Öffnen wir also das Div-Tag. Ich werde der Klasse den Mund zuweisen. Zuerst werde ich den Linkspfeil einführen. Es sollte durch das Font Awesome-Symbol dargestellt werden. Also müssen wir das Font Awesome CDN einbauen. Also lasst uns weitermachen und nach Font Awesome CDN JS suchen. Gehe zum ersten Link, wähle dann CSS aus und hol dir den Link von hier. Wir müssen das Link-Tag im Hauptelement öffnen und den Link als Wert des h-Referenzattributs einfügen . Okay, also lassen Sie uns das I-Element mit den folgenden Klassen öffnen. Wir brauchen F a, S, F einen Winkel links. Außerdem werde ich ihm eine weitere Klasse für JavaScript zuweisen . Nennen wir es Vorbereitung. Ich meine früher. Als Nächstes benötigen wir das div-Element, das den Monatsnamen und auch das Datum enthält , an dem es dem Klassendatum zugewiesen wurde. Dann übergebe ich Ihr H1-Überschriftenelement mit dem Inhalt vielleicht folgt darauf der Absatz, in dem wir den Wochentag haben, Freitag, dann sollte der Monat 29. Mai folgen, und dann brauchen wir das Jahr 2020 Also nochmal, im Moment sind das die fest codierten Daten, aber wir werden sie später dynamisch machen Als nächstes müssen wir hier einen weiteren Pfeil einfügen. Für die kommenden Monate bin ich im Rechtspfeil. Also öffne ich das Element mit der Klasse FAS , FAA-Winkel, oder Und außerdem müssen wir als nächstes den Unterricht hören. In Ordnung, der erste Teil des Kalenders ist fertig. Gehen wir zum nächsten Teil über. Wir müssen die Wochentage erstellen. Öffnen wir also das div-Tag, das der Wrapper sein wird Lassen Sie uns zwei Wochentage zuweisen und Ihnen dann alle sieben Wochentage hinzufügen Ich füge dein div-Tag mit einem Inhalt ein. Sonntag Dann duplizieren Sie es sechsmal und ändern Sie die Wochentage. Wir brauchen Montag, Dienstag. Dann haben wir Mittwoch, Donnerstag, Freitag und schließlich Samstag. In Ordnung, mit dem zweiten Teil sind wir fertig. Lassen Sie uns weitermachen und den dritten Teil erstellen, in dem wir die Tage des aktuellen Modells erleben werden. Öffnen wir den Div-Tag mit den Unterrichtstagen. Also werde ich hier zunächst ein paar Tage aus dem Vormonat einfügen . Öffnen wir den Div-Tag mit einer Klassenvorbereitung, Datum und einem späteren Datum 26. Dann duplizieren Sie dieses div-Element viermal und ändern Sie die Daten. Wir brauchen 27. Als nächstes haben wir 28, dann 29.30. Okay. Als nächstes folgen die Tage von eins bis 31. Ich werde nicht jedes Datum einzeln schreiben. Um diesen Vorgang zu vereinfachen, verwende ich m it, wir benötigen das Div-Tag, dann ein Sternchen und 31. Und dann müssen wir Dollarzeichen in die geschweiften Klammern einfügen Also los geht's. Wir haben die Zahlen von eins bis 31. Außerdem werde ich ab dem nächsten Monat in ein paar Tagen das Institut einrichten. Lassen Sie uns also Entwicklungen mit dem nächsten Termin erstellen , eine einleiten, sie dann fünfmal duplizieren und die Zahlen von zwei auf sechs ändern. Okay, eigentlich sind wir mit dem HTML-Markup fertig. Jetzt müssen wir anfangen, den Kalender anzupassen. Lassen Sie uns zunächst einige Reset- und Common-Stile erstellen. Ich wähle jedes Element mit einem Sternchen aus. Dann lassen Sie uns die Standardränder und den Abstand der Elemente entfernen der Elemente Ich setze beide auf Null. Außerdem werde ich Box-Größe Border-Box setzen. Als Nächstes definiere ich die Schriftfamilie. Während dieses Projekts werden wir eine der Google-Schriftarten verwenden. Gehen wir also zur Google Fonts-Website. Dann suche nach Treibsand. Ich werde diese verschiedenen Stile auswählen. Dann schnappen Sie sich den Link und fügen Sie ihn in das Hauptelement ein. Als Nächstes definieren wir die Schriftfamilie für jedes Element. Ich werde es zu Treibsand machen. San-Serif. In Ordnung, das war's mit dem Reset und den üblichen Stilen Wie Sie sehen, werden sie auf alle Elemente auf der Seite angewendet . Während dieses Projekts werde ich RAM als Maßeinheit verwenden. Moment entspricht ein REM 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 der HTML-Elemente verringern . Machen wir 62,5% draus. Wie Sie sehen können, wurden die Elemente etwas kleiner. Okay, jetzt ist es an der Zeit, an dem Container zu arbeiten. Ich möchte es auf die gesamte Seite erweitern. Wählen wir es also aus und definieren die 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. Lass uns deine Farbe 12121 verwenden. Und ändern Sie auch die Farbe des Texts, machen Sie ihn hell, indem Sie Farbe E verwenden. Als Nächstes platziere ich den Kalender in der Mitte der Seite. Und dafür verwenden wir Flexbox. Wir brauchen Display Flex. Für die horizontale Zentrierung verwende ich dann justify-content Was die vertikale Zentrierung angeht, müssen wir die Artikel mittig ausrichten In Ordnung, das war's mit dem Container. Als Nächstes werde ich den Kalender anpassen. Ich bin in den Röhrenelementen, die den Inhalt des Kalenders Zunächst definiere ich Breite und Höhe. Fangen wir mit 245 RAM an. Was die Höhe angeht. Machen wir 50 bis zur Rampe. Ich werde auch die Hintergrundfarbe ändern. Machen wir es fünfmal und dann siebenmal, es wird die dunkle Farbe sein. Und dann setzen wir Box Shadow auf 0,5 rampe drei rem und den RGBA-Wert bei schwarzer Farbe und mit Opazität 0,4 In Ordnung, mit dem Kalenderdiv-Element sind wir fertig. Lassen Sie uns weitermachen und die einzelnen Teile anpassen. Ich fange mit dem Mund an Wählen wir ihn aus und definieren zuerst die Breite, machen ihn zu 100%. Dann setze ich die Höhe auf 12 RAM und ändere die Hintergrundfarbe. Mach es 16756. Okay, als Nächstes verwende ich Flexbox, um die Elemente horizontal in einer Reihe zu platzieren die Elemente horizontal in einer Reihe und sie auch vertikal zu zentrieren Verwenden wir Display Flex. Um dann etwas Abstand zwischen den Elementen zu schaffen, verwenden wir den Inhaltsabstand zwischen den Elementen rechtfertigen. Außerdem müssen wir die Artikel in der Mitte ausrichten. Okay, danach werde ich auf der rechten und linken Seite innerhalb der Elemente etwas Platz schaffen auf der rechten und linken Seite innerhalb der Elemente etwas Platz linken Seite innerhalb der Elemente Dazu verwenden wir Padding und setzen es oben und unten auf Null und so, dass es auf der linken und rechten Seite läuft Außerdem müssen wir den Text in der Mitte ausrichten. Und schließlich verwende Tax Shadow mit den Werten 0,3, 0,5 RAM und dem RGBA-Wert mit schwarzer Farbe und mit der Opazität Okay, als Nächstes werde ich die einzelnen Elemente des Mouth-Div-Elements stylen die einzelnen Elemente des Mouth-Div-Elements Lass uns weitermachen und mit den Pfeilen beginnen. Wählen Sie I-Element aus. Stellen Sie die Schriftgröße auf 2,5 rem ein. Und machen Sie auch einen Cursorzeiger. Als nächstes haben wir die H1-Überschrift Kleidungsstück, die uns den aktuellen Monat zeigt Lassen Sie uns also weitermachen und dieses Element auswählen. Ich werde die Schriftgröße ändern. Machen wir drei RAM draus. Lassen Sie uns außerdem die Schrift etwas heller machen und die Schrift auf 400 setzen, um Text in Großbuchstaben umzuwandeln Als Nächstes erstelle ich den Abstand zwischen den Buchstaben. Lass es uns auf die Rampe zeigen. Und schließlich schaffen Sie unten etwas Platz , indem Sie Margin Bottom mit dem Wert eine Rampe verwenden. Lassen Sie uns weitermachen und zum Schluss den Absatz formatieren. Das einzige, was ich dann tun werde, ist die Schriftgröße zu erhöhen. Wählen wir es also aus und setzen die Schriftgröße auf 1,6 rampe. Ordnung, das war's mit dem ersten Teil des Kalenders Gehen wir zu den Wochentagen über. Ich werde mit 200 Prozent beginnen. Erhöhen Sie dann die Höhe, machen Sie es zu fünf Rem. Und lassen Sie uns auch etwas Platz schaffen, indem wir Polsterungen verwenden. Ich setze es am oberen und unteren Ende auf Null. Punkt für Lauf auf der rechten und linken Seite. Als Nächstes werde ich die Wochentage horizontal in einer Reihe platzieren und sie auch vertikal zentrieren Wir müssen also die Elemente in der Mitte anzeigen, biegen und ausrichten. Okay, mit dem Wrapper-Div-Element sind wir fertig. Als Nächstes passen wir die Wochentage selbst an. Ich wähle Div-Elemente aus. Lassen Sie uns zunächst die Schriftgröße ändern. Ich setze es auf 1,5 RAM. Dann lass uns Spaß machen und mit der Schriftstärke 400 etwas leichter Und schaffen Sie etwas Abstand zwischen den Buchstaben indem Sie den Buchstabenabstand 0,1 verwenden. Richtig? Jetzt definiere ich die Breite der einzelnen Div-Elemente. Wie Sie wissen, entspricht die Breite des Kalenders 45 rem. Wir haben innerhalb der Div-ID an Wochentagen eine kleine Polsterung angebracht, die auf beiden Seiten 2,4 RAM entspricht Ich meine, auf der rechten und linken Seite möchte ich die Breite jedes Div-Elements zu einem Siebtel der gesamten Breite machen jedes Div-Elements zu einem Siebtel der gesamten Breite Also werde ich die Calc-Funktion verwenden. Und wir müssen 44 Punkte, um zu rammen, durch 744,2 teilen. Rem ist der Unterschied zwischen der Breite und der Polsterung. Hoffentlich macht es Sinn für dich. Okay, als Nächstes müssen wir den Inhalt der einzelnen Div-Elemente zentrieren. Und dafür verwenden wir Flexbox. Ich stelle das Display auf Flex ein. Dann müssen wir die Inhaltsmitte ausrichten und die Artikelmitte ausrichten. Lassen Sie uns zum Schluss einen kleinen Schatteneffekt erzeugen. Verwenden Sie einen Textschatten mit den Werten 0,3, 0,5 rem, 0,5 rem, RGBA-Wert bei schwarzer Farbe und mit der Opazität In Ordnung, das war's mit den Wochentagen. Lass uns weitermachen und uns um die Tage des Monats kümmern . Wählen wir zunächst das Wrapper-Div-Element aus, das Klassentage hat Fangen wir mit 200 Prozent an. Dann werde ich das Display auf Flex stellen , weil ich die Tage zusammenfassen möchte. Verwenden wir also Flex Wrap zusammen mit dem Value Rap. Und zum Schluss lassen Sie uns mithilfe von Polstern etwas Platz schaffen. Lassen Sie es uns auf allen vier Seiten auf RAM zeigen. Als Nächstes werde ich den Tag selbst anpassen. Wählen wir also div-Elemente aus. Stellen wir zunächst die Schriftgröße auf 1.4 rampe ein. Verwenden Sie dann Margin und machen Sie es auf allen vier Seiten zu 0,3 RAM. Danach definieren wir die Breite der HTML-Elemente. Ich werde dieselbe Technik anwenden , die wir an Wochentagen angewendet haben Also möchte ich in jeder Zeile sieben Tage platzieren. Lassen Sie uns erneut die Calc-Funktion verwenden. Wir müssen die Breite des Kalenders durch sieben teilen, aber wir müssen den Rand und den Abstand ausschließen. Wenn wir zwei davon abziehen, die Breite, den Rand und die Polsterung, erhalten wir 40 Punkte für Der Rand auf jeder Seite entspricht einer Rampe von 0,3. Die Höhe der Marge wird also 0,3 mal 14 sein, da wir insgesamt sieben Tage haben werden Das entspricht 4,2 RAM. Und dann müssen wir zum Mietwert die Höhe der Polsterung hinzufügen Wir müssen 40 Punkte für RAM durch sieben teilen. Dann setze ich die Höhe auf fünf Rem. Dann werde ich den Inhalt zentrieren. Stellen wir also die Display-Eigenschaft auf Flex ein und verwenden Justify-Content Center und Align Items Center Außerdem werde ich einen kleinen Schatteneffekt erzeugen. Verwenden wir Text Shadow mit den Werten 0,3 und 0,5 RAM und RGBA mit einer schwarzen Farbe und mit der Opazität Okay, die Tage sind personalisiert und als Nächstes werde ich die vorherigen und nächsten Termine stylen Das einzige, was ich tun werde, ist , ihre Opazität zu verringern Lassen Sie uns also weitermachen und beide auswählen. Und stellen Sie die Opazität auf 0,5 ein. Okay, als Nächstes werde ich den aktuellen Tag des Monats hervorheben. Gehen wir zunächst zur HTML-Datei und weisen sie der aktuellen Datumsklasse heute zu. Wählen Sie es dann aus und ändern Sie die Hintergrundfarbe. Ich mache es 16756. Okay, das Letzte, was ich tun werde , ist, einen kleinen Schwebeeffekt zu erzeugen Sobald wir den Mauszeiger über die Tage bewegen, ändere ich die Hintergrundfarbe Zeigen Sie auch den Rahmen an und zeigen Sie den Cursorzeiger. Ich möchte das für alle Tage des Monats tun , außer für den aktuellen. Wählen wir also Div-Elemente mit dem Mauszeiger aus. Dann sollte der Notenauswahlschalter folgen . Es ist die Funktion. Und wir müssen heute hier Div mit der Klasse bestehen. Okay, lassen Sie uns die Hintergrundfarbe auf 62626 setzen. Dann definierter Rand mit den Werten, die durchgehend verlaufen sollen , und der Spalte 777. Und schließlich den Cursor zeigen lassen. Lassen Sie uns außerdem Transition nur für die Hintergrundfarbe verwenden. Wir brauchen hier die Hintergrundfarbe und die Dauer 0,2 s. In Ordnung, mit dem CSS sind wir fertig Und jetzt ist es an der Zeit, unserem Kalender etwas JavaScript hinzuzufügen und es zum Laufen zu bringen. In diesem Teil werden wir ziemlich häufig mit dem Datumsobjekt arbeiten . Wir werden verschiedene Methoden verwenden , um das Datum zu manipulieren Zunächst möchte ich den aktuellen Monat mithilfe von JavaScript dynamisch anzeigen . Im Moment ist es Mai, wir haben es aus der HTML-Datei angegeben? Zuerst erstelle ich ein Datumsobjekt. Um das zu tun, müssen wir also die Konstruktorfunktion des Datumsobjekts verwenden Im Allgemeinen gibt das Datumsobjekt das aktuelle Datum und die aktuelle Uhrzeit zurück. Außerdem gibt es die Zeitzone des Browsers an und gibt diese Daten als vollständige Textzeichenfolge zurück. Lassen Sie uns weitermachen und die Datumsobjekte erstellen. Ich werde eine neue Variable, date, erstellen, die der neuen Datumskonstruktorfunktion entsprechen sollte Dann lauf in die Konsole. Wenn ich also die Seite und die Konsole überprüfe, erhalten wir das aktuelle Datum und die aktuelle Uhrzeit gefolgt von der Zeitzone des Browsers. Wie gesagt, das erste, was wir tun werden, ist, den aktuellen Monat mithilfe von JavaScript anzuzeigen. Um den aktuellen Monat abzurufen, müssen Sie eine der Datumsobjektmethoden namens get month verwenden . Lassen Sie uns also eine neue Variable erstellen. Ich nenne es Mathe. Es sollte dem Datum Punkt entsprechen. Geh, Mama. Dann führe die Mathematik zur Konsole Wie du siehst, haben wir hier einen Zahlenwert dafür, dass das eigentlich die Indexnummer des aktuellen Mundes ist . Jetzt ist Mai, der fünfte Monat des Jahres. Aber aus diesem Grund haben die Motten Indexzahlen, die auf Null basieren Holen Sie sich die mathematische Methode und geben Sie vier zurück, was die Indexzahl des fünften Monats ist. Okay, um den aktuellen Monat auf der Seite anzuzeigen , müssen wir die Methode get verwenden und mit diesen Indexzahlen manipulieren Zunächst erstelle ich ein neues Array, in dem ich alle 12 Monate des Jahres speichern werde. Lassen Sie uns also eine neue Variable erstellen, die ein Array sein wird. Und dann gib hier mathematische Namen ein. Der erste wird Januar sein. Dann werde ich es 11 mal duplizieren. Und dann Namen ändern. Wir brauchen Februar, März, April, dann haben wir Mai, Juni, Juli, August. Der nächste ist September , Oktober, November, Dezember. Das Array wird also erstellt, wie Sie wissen Die Elemente in Arrays haben die auf Null basierenden Hier. Jeder Monat hat die richtigen Indexzahlen von Null bis 11. Jetzt wähle ich die H1-Überschrift Kleidungsstücke aus, der aktuelle Monat angezeigt werden soll Wählen wir es also mit der Methode querySelector aus. Wir müssen hier den Klassennamen, das Datum und dann das H1-Tag angeben Datum und dann das H1-Tag Die Überschrift ist also ausgewählt und jetzt müssen wir ihren Inhalt ändern. Um das zu tun, verwende ich eine der DOM-Eigenschaften namens innerHTML. Jetzt müssen wir unsere Array-Mathematik verwenden und die Indexnummer angeben Wenn ich hier die Indexnummer manuell eingebe, sagen wir vier. Und dann entfernen Sie den Inhalt des Überschriftenelements aus HTML. Wir werden uns im Mai auf der Seite wiedersehen. Wenn ich die Indexnummer ändere und fünf schreibe, dann bekommen wir Juni. Um also den richtigen Mund anzuzeigen, müssen wir die Methode get verwenden. Wir brauchen Date Dot, hol mehr. Wie ihr seht, haben wir hier wieder Mai, aber jetzt wird es dynamisch mit JavaScript angezeigt. In Ordnung, lassen Sie uns weitermachen und das Datum anzeigen. Soweit ich den Absatz auswählen werde, in dem das Datum angezeigt wird, wählen wir ihn mit der Methode querySelector aus Um dann den Inhalt des Elements zu ändern, benötigen wir die Eigenschaft innerHTML Jetzt verwende ich eine der Methoden, die to date string genannt werden Methoden, die to date string genannt die das aktuelle Datum in einem lesbaren Format zurückgibt Also brauchen wir hier eine Zeichenfolge von Datum zu Punkt. Wenn ich den Inhalt aus HTML entferne, erhalten wir auf der Seite genau das gleiche Ergebnis. Okay, mit dem ersten Teil des Kalenders sind wir fertig Wir haben erfolgreich den Mund und das Datum mithilfe von JavaScript dynamisch angezeigt. Jetzt ist es an der Zeit , die Tage anzuzeigen. Wir werden die Wochentage nicht anfassen, sie werden im HTML-Format angezeigt , weil ich denke, das reicht aus , um die Tage anzuzeigen, die ich für Loop verwenden werde Lassen Sie uns zunächst eine Variable erstellen. Tage. Ich verwende das Schlüsselwort let. Und machen wir daraus eine leere Zeichenfolge. Also werde ich die Zahlen von eins bis 31 durchgehen und sie als Inhalt des days-div-Elements anzeigen . Verwenden wir for-loop. Wir müssen hier die Variable I erstellen, die der Zähler sein wird. Dann brauchen wir eine Bedingung. Ich sollte kleiner oder gleich eins sein. Dann brauchen wir I plus den Inkrementsoperator. Wie der Inhalt. Ich gehe zu den Institutstagen , gefolgt vom Plus Gleichheits-Operator. Tatsächlich macht dieser Operator genau dasselbe wie der folgende Ausdruck. Zum Beispiel bedeutet x plus gleich zehn x plus zehn Also müssen wir jetzt ein div-Element erstellen und die Variable I als Inhalt davon übergeben . Öffnen wir Backticks und fügen Sie das Div-Tag ein. Ihr Inhalt wird die I-Variable sein. Schließlich müssen wir den Inhalt des Wrapper-Div-Elements ändern den Inhalt des Wrapper-Div-Elements Ich werde eine neue Variable erstellen, nennen wir sie Mark Days. Wählen Sie dann das Div-Element days mit der Methode querySelector aus. Und dann unten ändern Sie den Inhalt dieser Variablen mit der Eigenschaft innerHTML Wir benötigen also einen Mundprüfpunkt innerhalb des HTML-Codes , der Tagen entsprechen sollte. Wie Sie sehen können, haben wir hier die Zahlen von eins bis 31. Wenn ich zur Datei index.html gehe und den gesamten Inhalt von hier entferne, ändert sich nichts, erhalte wieder Zahlen von eins bis 321. Ab sofort wird der Inhalt des days-div-Elements aus JavaScript angezeigt. Eigentlich müssen wir hier ein paar Dinge erledigen. Wir sehen die vorherigen nächsten Tage nicht mehr, und auch die Zahlen stimmen nicht mit den Wochentagen überein Außerdem definieren wir hier die Anzahl der Tage in einem Monat als 31. Aber wie Sie wissen, haben einige der Massen heute und einige von ihnen allerdings zu einem. Anstatt hier nur 321 zu verwenden, müssen wir das Enddatum für jeden Monat definieren. Lassen Sie uns eine neue Variable erstellen. Ich nenne es letzten Tag. Als Nächstes erstellen wir ein Datumsobjekt und definieren das aktuelle Jahr und den aktuellen Monat. Also müssen wir hier die Methode anwenden, um das ganze Jahr zu erhalten. Wir brauchen Dates Dot Get Full Year, gefolgt von der Methode date dot get. Die erste Methode gibt uns das aktuelle Jahr. Was die zweite Methode betrifft, so erhalten wir den aktuellen Mount. Was den Tag angeht, werde ich ihn auf, sagen wir, eins einstellen. Lassen Sie uns nun diese Variable im Browser ausführen und sehen, was wir haben. Wie Sie sehen können, haben wir hier den 1. Mai 2020. Lassen Sie uns nun eins in Null ändern und das Ergebnis überprüfen. In diesem Fall haben wir den 30. April 2020 hier. Wenn Sie also den Tag als Null angeben, erhalten Sie den letzten Tag des Vormonats. In unserem Fall müssen wir den letzten Tag des aktuellen Monats ermitteln. Daher müssen wir der Get-Funktion nur einen hinzufügen. Wie Sie sehen, haben wir hier den letzten Tag des aktuellen Monats. Anstatt hier die fest codierte Zahl zu verwenden, können wir einfach den letzten Tag eingeben Aber im Moment können wir das nicht tun, da die Variable für den letzten Tag das gesamte Datum und die gesamte Uhrzeit zurückgibt. Um die Zahl des Tages zu erhalten, müssen wir die Methode Get date verwenden. Jetzt gibt es nur noch eine statt anderer Daten zurück. Und jetzt können wir in der Schleife 31 in den letzten Tag ändern. Hier hat sich also nichts geändert. Wir haben das gleiche Ergebnis. Um zu beweisen, dass es richtig funktioniert, setze ich den aktuellen Monat auf, sagen wir, Juni, wo wir 30 Tage Zeit haben, um den aktuellen Monat zu ändern. Wir müssen eine der Methoden anwenden, die als Mundansatz bezeichnet werden. Wir brauchen also einen mit Datum und Punkt gesetzten Mund mit einem Wert von fünf. Jetzt sehen wir hier Juni und die Anzahl der Tage ist das bedeutet, dass bisher alles gut funktioniert. Lassen Sie uns diese Codezeile loswerden. Nachdem wir also die Tage des Mundes angezeigt haben, kümmere ich mich jetzt um die Tage des Vormonats. Wenn wir uns das fertige Projekt ansehen, werden Sie feststellen, dass wir einige Tage aus dem Vormonat anzeigen . Um das zu erreichen, müssen wir also zunächst raten, wie viele Tage wir vom vorherigen Mund aus anzeigen sollten. Ich werde einen kleinen Trick anwenden. Lassen Sie uns das aktuelle Datum ändern und es zum ersten Tag des Monats machen. Also brauchen wir ein Datum, ein festgelegtes Datum. Wir müssen es zu einem machen. Danach verwende ich eine der Methoden namens get day. Es gibt den Index zurück. basieren nun auf Bruchteilen der Wochentage Diese Indexzahlen basieren nun auf Bruchteilen der Wochentage auf Null Zum Beispiel hat Sonntag die Indexzahl Null, Montag hat eins und so weiter. Lassen Sie uns also die Konsole durchgehen. Datum, Punkt ermittelt Tag. Wie Sie sehen, haben wir hier fünf. Der erste Tag im Mai sollte also Freitag sein, da der Freitag die Indexnummer fünf hat. Das bedeutet, dass der erste Tag im Mai unter dem Freitag liegen sollte. Jetzt können wir also ganz einfach ermitteln, wie viele Tage wir aus dem Vormonat anzeigen sollten? Es werden fünf sein. Ordnung, also müssen wir eine weitere For-Schleife erstellen Fügen wir hier die Variable x ein, die der Zähler sein wird Jetzt müssen wir die Anzahl der Iterationen definieren. Wie bereits in diesem Fall erwähnt, müssen wir fünf Tage aus dem Vormonat anzeigen. Insgesamt werden wir also fünf Iterationen haben. Und bei jeder Iteration werden wir ein neues Div erstellen, das den Inhalt des heutigen div-Elements sein wird Der Anfangswert des X-Zählers wird also der Index des ersten Tages des Monats sein. Lassen Sie uns eine neue Variable erstellen, in der wir die Indexnummer des Monatsersten speichern. Das wird variabler Index für den ersten Tag genannt. Es sollte dem Datum entsprechen, Punkt Datum abrufen. Weisen Sie diese Variable dann dem X-Zähler zu. Jetzt müssen wir also die Bedingung definieren x größer als Null sein soll. Und bei jeder Iteration sollte x um eins abnehmen Also brauchen wir x minus minus. Lassen Sie mich das noch einmal erklären. In diesem Fall ist die Indexnummer des ersten Tages dieses Monats fünf, da es Freitag ist. Der Anfangswert der x-Variablen wird fünf sein. Bei jeder Iteration verringert sie sich um eins, bis sie Null wird Insgesamt werden wir also fünf Iterationen haben. Bei jeder Iteration erstellen wir ein neues div-Element für die Daten des Vormonats Wir brauchen hier das Plus gleich. Dann müssen wir die hinteren Häkchen öffnen und ein Div-Tag mit einem vorherigen Kursdatum einfügen , ich bin im Vorbereitungstermin Fügen Sie dann Ihr Dollarzeichen mit geschweiften Klammern ein. Jetzt müssen wir den Inhalt der Entwicklung definieren. Definieren wir zunächst den letzten Tag des Vormonats. Ich werde dieselbe Technik verwenden, die wir im vorherigen Fall verwendet haben , um eine neue Variable zu erstellen. Ich nenne es Vorbereitung letzten Tag, ich bin am vergangenen, letzten Tag Dann werde ich diesen Wert von hier aus abrufen. Um den letzten Tag des Vormonats zu erhalten, müssen wir also nur plus eins loswerden , da wir dann den letzten Tag des aktuellen Monats erhalten . Wenn ich also am letzten Tag auf der Konsole nachschaue, bekommen wir das dritte T, das ist der letzte Tag im April. Okay, um den Inhalt für jedes div-Element zu erstellen, müssen wir x von der Variablen des vorherigen letzten Tages subtrahieren Wie Sie sehen, haben wir Tage aus dem vorherigen Mund, aber das ist nicht ganz richtig, weil wir hier 29 als letzten Tag des Monats haben . Es sollten 30 sein. Also brauchen wir einfach plus eins hier drinnen. Das Problem ist also behoben. Ordnung, da wir die vorherigen Tage hinter uns haben, lassen Sie uns weitermachen und uns um die Tage des nächsten Monats kümmern die Tage des nächsten Monats Für die nächsten Tage müssen wir die Indexnummer des letzten Tages des aktuellen Mundes definieren . Erstellen wir also eine neue Variable und nennen sie Last Day Index. Dann schnapp dir diesen Code, denn er gibt uns den letzten Tag des aktuellen Monats. In diesem Fall müssen wir anstelle der getState-Methode getState verwenden, müssen wir anstelle der getState-Methode getState verwenden da sie die Indexnummer zurückgibt Lassen Sie uns also die Konsole durchgehen, während sie indexieren. Wir haben Null. Und das bedeutet, dass der letzte Tag Sonntag ist. Und wir müssen sechs Tage ab dem nächsten Monat anzeigen. Um die Anzahl der Tage des nächsten Monats zu definieren, müssen wir 27 subtrahieren, was der Anzahl der Tage in einer Woche entspricht, dem Index des letzten Tages Außerdem müssen wir eins subtrahieren, weil die Indexzahlen der Wochentage auf Null basieren Lassen Sie uns also eine neue Variable erstellen. Ich nenne es in den nächsten Tagen. Und es sollte sieben minus Index vom letzten Tag minus eins sein. Als nächstes brauchen wir wieder einen For-Loop. In diesem Fall verwende ich j als Zähler , der gleich eins sein sollte, weil jeder Monat mit einer gültigen Bedingung beginnt , j ist kleiner oder gleich den nächsten Tagen, als wir j plus benötigen. Bei jeder Iteration müssen wir also neue Div-Elemente erstellen und sie als Inhalt des heutigen div-Elements übergeben sie als Inhalt des heutigen div-Elements Wir brauchen Tage plus Gleiche. Öffnen Sie dann die hinteren Ticks und geben Sie hier den Div-Tag mit einer Klasse ein. Nächstes Datum Als Inhalt des Div-Tags müssen wir die Variable J einfügen Lassen Sie uns abschließend den Inhalt der Mundtage ändern. Also los geht's. Ab dem nächsten Monat haben wir Tage hier, oder? Als Nächstes werde ich das aktuelle Datum hervorheben. Gerade jetzt. Es ist nicht mehr hervorgehoben. Um das zu tun, müssen wir eine IF-Anweisung als Bedingung verwenden. Wir müssen Zähler eins mit dem aktuellen Stand vergleichen. Sobald sie zusammenpassen, müssen wir heute die Ausschlussklasse erweitern. Wir brauchen I Triple entspricht dem neuen Datum, Punkt, Datum. Außerdem müssen wir den Mund mit dem aktuellen Monat vergleichen. Also brauchen wir hier Logik und Operator. Und wir müssen die Daten Punkt Get Mount, Triple entspricht dem neuen Datum, Punkt get marr einfügen Triple entspricht dem neuen Datum, Punkt get marr Wenn diese Bedingung zutrifft, kopiere ich diese Codezeile und füge sie heute der Entwicklungsklasse hinzu. Was dieses div-Element betrifft, sollte es in der else-Anweisung platziert werden. Wie Sie sehen, ist das aktuelle Datum ein Highlight. Ordnung, das nächste, was ich tun werde, ist, die Pfeile zum Laufen zu bringen Sobald wir auf den Linkspfeil klicken, sollten wir zum vorherigen Mund navigieren. Was den Rechtspfeil angeht, sollten wir zur nächsten Karte übergehen. Ich werde an beide Pfeile Event-Listener mit Click-Events anhängen Event-Listener mit Click-Events Also wähle ich den Linkspfeil mit der Methode querySelector aus und füge dann den Event-Listener hinzu, wo wir den Typ der Ereignisse angeben müssen Es wird Klick sein. Und außerdem müssen wir Ihre Rückruffunktion übergeben. Lassen Sie uns es duplizieren und den Klassennamen ändern, den wir hier benötigen. Weiter. Um zum vorherigen Monat überzugehen, benötigen wir Datum, Punkt und Mund. Dann müssen wir eins vom aktuellen Mund abziehen. Also brauchen wir den Datenpunkt und den Mund minus eins. Das ist für den nächsten Monat. Wir brauchen den gleichen Ausdruck, aber mit plus eins. Wenn wir also auf die Pfeile klicken, funktionieren sie nicht. Der Grund dafür ist, dass wir den Kalender mit einem richtigen Mund onClick rendern müssen den Kalender mit einem richtigen Mund onClick Wir müssen also eine Funktion erstellen , bei der wir den gesamten Code übergeben. Dann müssen wir es einmal auf globaler Ebene nennen. Und wir müssen es auch aufrufen, wenn wir auf die Pfeile klicken. Lassen Sie uns also weitermachen und eine Funktion erstellen. Ich nenne es Zufallskalender. Lassen Sie uns den gesamten Code bis auf diese Codezeile aufnehmen. Und füge es in die Funktion ein, die ich im globalen Bereich nennen werde. Und auch innerhalb dieser Callback-Funktionen. Ordnung, wenn ich also auf die Pfeile klicke, funktionieren sie einwandfrei Wie Sie sehen, gehen wir zum vorherigen und zum nächsten Monat über. Okay, wir sind fast fertig. Eigentlich sehe ich hier, dass wir ein kleines Problem haben. Das aktuelle Datum ist nicht korrekt, da wir, wie Sie sich erinnern, das Datum auf eins gesetzt haben und wir das Datum in ein neues Datum ändern müssen . Jetzt ist das Problem behoben. Und endlich sind wir fertig 15. Projekt 12 - Countdown: In Ordnung, jetzt ist es an der Zeit, mit der Erstellung unseres nächsten Projekts zu beginnen In diesem Video erstellen wir eine Countdown-Anwendung. Bevor wir mit dem Bau des Projekts beginnen, werde ich acht durchgehen und beschreiben. Wie Sie sehen können, haben wir hier einen dunklen Vollbildhintergrund In der Mitte der Seite. Wir haben ein paar Elemente. Ich bin in der Überschrift, die besagt , dass bald etwas kommt. Als nächstes folgt der Countdown, der automatisch funktioniert Es wird nach jeder Sekunde aktualisiert. Wir haben hier für verschiedene Abschnitte. Diese Abschnitte umfassen vier Tage, Stunden, Minuten und Sekunden. Dann unten haben wir einen Reset-Button. Wenn ich darauf klicke, setzen wir den Countdown zurück und alle Werte werden Null. In Ordnung, das war's also. Was wir bauen werden. Das Projekt wird einfach sein, aber hoffentlich werdet ihr Spaß haben. Ich habe auf dem Desktop einen neuen Ordner namens Countdown erstellt , der momentan leer ist. Lassen Sie uns weitermachen und es im VS-Code öffnen und unsere Arbeitsdateien einrichten. Insgesamt werden wir also drei verschiedene Dateien für HTML, CSS und JavaScript haben. Lassen Sie uns weitermachen und sie erstellen. Nennen wir die HTML-Datei index.html. Dann haben wir style.css und Skripte dot js. Danach gehe ich zur Datei index.html und erstelle das grundlegende HTML-Dokument. Dafür verwende ich m. Und lassen Sie uns hier ein Ausrufezeichen setzen und Enter oder Tab drücken Also los geht's. Ich ändere den Titel. Fügen wir Ihren Countdown ein. Danach. Lassen Sie uns CSS- und JavaScript-Dateien mit dem HTML verknüpfen. Öffnen wir den Link-Tag. Geben Sie hier den Pfad der CSS-Datei an. das JavaScript angeht, öffne ich das Script-Tag direkt über dem abschließenden Body-Tag und spezifiziere dann den Teil der JavaScript-Datei und die Quellattribute. Ordnung, also alle drei Dateien sind miteinander verbunden und jetzt werde ich das Projekt im Browser ausführen Verwenden wir dazu eines der VS-Codepakete, einen sogenannten Live-Server, es ermöglicht, das Projekt live im Browser auszuführen und die Änderungen und Aktualisierungen vorzunehmen, ohne die Seite zu die Änderungen und Aktualisierungen vorzunehmen aktualisieren. Ich empfehle Ihnen jedes Mal, diese Pakete zu verwenden. In Ordnung, das Projekt läuft also. Schließlich werde ich den Editor und den Browser so nebeneinander platzieren den Browser so nebeneinander Und fang an. Lassen Sie uns zunächst das HTML-Markup erstellen, das einfach sein wird Ich öffne das div-Tag, das der Container sein wird gefolgt vom Countdown-Wrapper Es wird alle drei Elemente enthalten, ich meine die Überschriftenelemente, und die Texte werden in Kürze veröffentlicht. Danach haben wir ein leeres Div mit dem Countdown der Klasse, in das wir den Inhalt aus JavaScript einfügen. Und schließlich werden wir eine Schaltfläche mit dem Klassen-Reset und mit dem Text-Reset haben . In Ordnung, hier haben wir die Überschrift und den Button. Moment wird das Countdown-Div-Element hier nicht angezeigt , da es leer ist. Also werde ich jetzt weitermachen und anfangen zu schreiben. Javascript erstellt einen Countdown und sorgt dafür, dass es funktioniert. Und dann kümmere ich mich um das Design. Gehen wir zur Datei script.js. Und als erstes wählen wir den Countdown aus und speichern ihn in der Variablen. Lassen Sie uns eine Variable namens Countdown erstellen und das Div-Element auswählen. Verwenden der Abfrageauswahlmethode. Um den Countdown zu erstellen, müssen wir die JavaScript-Datumsobjekte manipulieren Standardmäßig verwendet JavaScript Zeitzone des Browsers und zeigt ein Datum als Textzeichenfolge an. Lassen Sie uns weitermachen und ein Datumsobjekt erstellen und überprüfen, wie es aussieht. Ich werde eine Variable erstellen. Nennen wir es Datum. Um also ein Datumsobjekt zu erstellen, müssen wir die neue Datumskonstruktorfunktion verwenden Lassen Sie uns das Datum auf der Konsole ausführen. Wenn ich mir also die Seite anschaue und den Konsolen-Tab überprüfe, dann findet ihr hier das aktuelle Datum und Uhrzeit gefolgt von der Zeitzone. Okay, im Allgemeinen hat das Datumsobjekt verschiedene Methoden, hat das Datumsobjekt verschiedene Methoden denen wir den aktuellen Tag, den aktuellen Mund, die aktuelle Stunde usw. ermitteln Ich werde sie nicht durchgehen. Wir werden nur die neue Datumskonstruktorfunktion verwenden. Sie können also nicht nur das aktuelle Datum abrufen, das zukünftige oder vergangene Datum manuell angeben. Zum Beispiel können wir hier das Jahr, sagen wir 2020, als einen Monat verbringen. Sie müssen sich jedoch daran erinnern , dass Sie einen Monat mithilfe von Indexnummern angeben müssen . Monate haben Indexzahlen, die auf Null basieren. Wenn ich also ein Jahr verbringen möchte, sagen wir August, das ist der achte Monat des Jahres , den ich hier einfügen muss. Sieben. Als nächstes kommt der Tag des Monats. Lass uns dir 15 reichen. Und dann können Sie die Uhrzeit angeben. Ich meine, Stunden, Minuten und Sekunden. Lassen Sie uns hier vorbeigehen. 12 und Nullen als Minuten und Sekunden In Ordnung? Wenn wir also in der Konsole nachschauen, dann bekommen wir das Datum, das wir gerade hier angegeben haben. Ordnung, nehmen wir an , dass dieses Datum die Frist ist und wir von diesem Datum an herunterzählen müssen Eigentlich möchte ich darauf hinweisen, dass, wenn Sie dieses Video in der Zukunft ansehen, dieses Datum zwar in der Vergangenheit liegt, Sie dann das Datum aus der Zukunft eingeben müssen. Ich werde den Namen der Variablen ändern. Machen wir es zur Deadline und entfernen wir auch die console.log. Außerdem müssen wir die aktuelle Uhrzeit definieren. Lassen Sie uns also eine neue Variable erstellen. Ich nenne es aktuell und weise ihm dann einen neuen Datumskonstruktor zu Ordnung, also die Uhrzeit die auf der Seite angezeigt werden sollte, wird der Unterschied zwischen der Frist und der aktuellen Uhrzeit Fügen wir also zuerst hinzu, überprüfen wir den Unterschied in der Konsole. Ich werde eine Variable erstellen, nennen wir sie div. Ich habe einen Unterschied gemacht. Sie sollte der Frist abzüglich der aktuellen Frist entsprechen. Und dann rund um die Variable zur Konsole. Wie Sie sehen können, haben wir hier einige seltsame und riesige Zahlen. Tatsächlich ist dies die Zeitspanne, Differenz zwischen der Frist und der aktuellen Zeit, die in Millisekunden angezeigt wird Wir werden diese Anzahl von Millisekunden verwenden, um die verbleibenden Tage, Stunden, Minuten und Sekunden separat zu definieren Stunden, Minuten Lassen Sie uns also weitermachen und eine Variable erstellen und sie Tage nennen. Um also die Anzahl der verbleibenden Tage zu erhalten, müssen wir den Betrag der Differenz durch die Anzahl der Millisekunden dividieren , was wir in 24 h haben. Wir brauchen also Differenz geteilt durch die dann Und wir müssen tausend Millisekunden mit 60 s multiplizieren . Dann brauchen wir 60 Minuten und schließlich 24 h. Dann führe ich diese Variable auf die Konsole aus. führe ich diese Variable auf die Wie Sie sehen können, haben wir hier die Anzahl der Tage, aber mit einigen Dezimalzahlen Wir benötigen diese Dezimalzahlen nicht, weil wir nur die Anzahl der Tage anzeigen müssen Also müssen wir die Zahl abrunden. Und dafür können wir eine der JavaScript-Methoden namens Math.floor verwenden der JavaScript-Methoden namens Math.floor Wie Sie sehen können, haben wir hier nur die Anzahl der Tage ohne Dezimalzahlen Als Nächstes müssen wir die Stunden, Minuten und Sekunden auf die gleiche Weise definieren . Gehen wir zu den Stunden über. Ich werde wieder die Math.Floor-Methode verwenden. Bei uns müssen wir also die Differenz durch das Produkt der Millisekunden, Sekunden und Minuten dividieren der Millisekunden, Sekunden Und dann müssen wir uns den Restbetrag aus dieser Operation schnappen . Wir müssen also einen der arithmetischen Operatoren verwenden , der Modulus genannt wird, oder manchmal wird er als Rest bezeichnet Der Modulusoperator gibt also einen Divisionsrest zurück und dieser wird durch das Prozentzeichen ausgedrückt. Wir brauchen hier. Differenz geteilt durch das Produkt aus tausend Millisekunden, 60 s und 60 min. Dann müssen wir den Modulus verwenden, gefolgt von der 24, was die Anzahl der Stunden ist Also nochmal, diese Operation gibt uns die verbleibenden Stunden. Mit anderen Worten, nach dieser Operation wird die Anzahl der Stunden immer weniger als 24 sein. Wenn ich die Stunden an der Konsole überprüfe, erhalten wir die Anzahl der verbleibenden Stunden. In Ordnung, gehen wir zum Protokoll über. Erstellen Sie eine neue Variable. Nennen Sie es Minuten und verwenden Sie dann erneut die Methode Math.floor. Bei Minuten müssen wir also die Differenz durch das Produkt aus Millisekunden und Sekunden dividieren und dann brauchen wir Modul 60, das ist die Anzahl der Wir brauchen also die Differenz geteilt durch das Produkt aus tausend Millisekunden Modul 60. Okay, lassen Sie uns weitermachen und die Sekunden auf die gleiche Weise definieren. Erstellen Sie eine neue Variable, verwenden Sie sie als Math.floor. Im Fall von Sekunden müssen wir die Differenz also durch tausend Millisekunden teilen durch tausend Millisekunden Und dann brauchen wir Modul 60, das sind Sekunden. Wenn ich also die Sekunden in der Konsole überprüfe, dann fange ich an, die Seite zu aktualisieren. Sie werden hier sehen, wie die Anzahl der Sekunden aktualisiert wird. In Ordnung, alle vier Mengen sind definiert. Und jetzt müssen wir sie genauer auf der Seite anzeigen und Div berücksichtigen, das wir in der HTML-Datei erstellt und dann hier ausgewählt haben . Also werde ich ein paar Div-Elemente innerhalb des Countdown-Divs übergeben . Und dann wird an jedes div-Element die richtige Variable aus diesen vier Variablen angehängt . Also müssen wir den Inhalt des Countdowns tiefgreifend ändern. Dafür verwende ich eine der Kuppeleigenschaften namens innerHTML. Es ermöglicht uns, den HTML-Inhalt eines Elements festzulegen. Lassen Sie uns also die innere HTML-Eigenschaft anhängen, um sie herunterzuzählen. Dann öffne die hinteren Häkchen , weil wir die Variablen in die HTML-Tags interpolieren müssen die Variablen in die HTML-Tags interpolieren Also brauchen wir hier für Div-Elemente. Dann werde ich im ersten Teil Tage damit verbringen. Wir brauchen das Dollarzeichen, geschweifte Klammern und die variablen Namenstage Dann werden wir unsere haben. Minuten und Sekunden. In Ordnung? Wie Sie sehen können, haben wir hier alle vier Werte, Tage, Stunden, Minuten und Sekunden. Im Moment befinden sie sich in einem statischen Modus. Sie werden nicht automatisch aktualisiert. Wenn ich die Seite neu lade, wird die Anzahl der Sekunden aktualisiert Also müssen wir den Countdown dynamisch machen. Es sollte automatisch in jeder Sekunde aktualisiert werden. Dazu müssen wir eine der JavaScript-Methoden verwenden, die als set interval bezeichnet werden. Die Methode set interval führt die Funktion in bestimmten Intervallen in Millisekunden In Ordnung, erstellen wir eine Variable und nennen sie Intervall. Weisen Sie ihm dann eine festgelegte Intervallmethode zu. Diese Methode benötigt zwei Argumente. Die erste wird die Callback-Funktion sein, die in einigen Intervallen ausgeführt wird Jetzt müssen wir Ihnen innerhalb der Funktion den gesamten Code übergeben . Schnappen wir es uns und fügen es in die Funktion ein. Das zweite Argument wird die Zeit sein, die wir benötigen, um die Funktion nach jeder Sekunde auszuführen. Also werde ich hier tausend Millisekunden verbringen. Wie Sie sehen, funktioniert der Countdown und wird nach jedem Segment aktualisiert Ordnung, wir haben es also geschafft, den Hauptteil der Projekte zu erstellen Wir müssen die Funktionalität ein wenig anpassen. Aber um den laufenden Prozess interessanter zu gestalten , kümmern wir uns um das Design Sobald wir das Projekt gestartet haben , werden wir dem Countdown von JavaScript ein paar Dinge hinzufügen . Okay, öffnen wir die Datei style.css. Und erstellen Sie zunächst einige Reset- und Common-Stile. Ich wähle jedes Element mit einem Sternchen aus. Und dann lassen Sie uns den Standardrand und das Padding loswerden. Ich setze beide auf Null. Und verwenden Sie auch eine Border-Box in Boxgröße. Außerdem möchte ich die Schriftfamilie für alle Elemente ändern . Ich werde eine der Google-Schriften verwenden. Gehen wir also auf die Google Fonts-Website und suchen nach einer Schrift, die unter der A2 heißt Wählen wir diese Stile aus. Schnappen Sie sich dann den Link und fügen Sie ihn in das Hauptelement ein. Danach werde ich die Schriftfamilie für jedes Element so einstellen , dass sie dem dA2-Kurs entspricht. In Ordnung, wie Sie sehen können, werden diese Stile angewendet Eigentlich werde ich während des gesamten Projekts RAM als Maßeinheit verwenden . Das machen wir in fast jedem Tutorial weil ich finde, dass es sehr praktisch und einfach zu bedienen ist. Gerade jetzt. Ein REM entspricht 16 Pixeln, da die Schriftgröße von HTML 16 Pixeln entspricht. Standardmäßig möchte ich ein RAM in zehn Pixel umwandeln , sodass wir die Schriftgröße der HTML-Elemente verringern müssen. Setzen wir es auf 62,5 Prozent. Nehmen wir also an, dass die Größe der Elemente abgenommen hat. Und jetzt entspricht 1 g zehn Pixeln. Lass uns weitermachen und den Container abnehmen. Ich werde es auf die gesamte Seite ausdehnen. Wählen wir es also aus und definieren Breite und Höhe. Ich werde mich auf 200 Prozent für die Höhe festlegen. Machen wir es zu 100% aus dem Viewport. Und zum Schluss ändern wir die Hintergrundfarbe. Ich werde deine Farbe 17181 verwenden. Okay, als Nächstes wählen wir den Countdown-Wrapper aus. Ich werde es in der Mitte der Seite platzieren. Ich meine, um es vertikal zu zentrieren. Zuallererst erschweren die definierte Breite die Präsentation. Dann setze ich seine Position auf absolut. Danach werde ich dem Container eine relative Position zuweisen, weil ich den Countdown-Wrapper entsprechend dem Container positionieren möchte Countdown-Wrapper entsprechend dem Definieren Sie dann die oberste Eigenschaft. Setzen wir es auf 15%. Platzieren Sie dann Texte in der Mitte mit Textausrichtung in der Mitte und ändern Sie die Farbe Mach es zum D. Okay, also die Position des Countdown-Wrappers wird geändert und jetzt werde ich die einzelnen Elemente anpassen Fangen wir mit einer Überschrift an. Zuallererst werde ich die Schriftgröße erhöhen. Machen wir acht RAM draus. Dann ändere die Schriftstärke, mache sie leichter , weise ihr 400 zu. Als Nächstes wandle ich Text in Großbuchstaben um. Dann schaffen Sie unten etwas Platz , indem Sie den Rand Bottom Eight Ran verwenden. Und schließlich werde ich Textschatten verwenden , um einen Schatteneffekt zu erzeugen. Lassen Sie uns hier 0,5, etwa 0,8 RAM, übergeben. Und der RGBA-Wert mit schwarzer Farbe und mit Opazität 0,5. In Ordnung, die Überschrift sieht also gut aus. Lass uns weitermachen und uns um den Countdown kümmern. Ich werde diese Zahlen mit Flexbox horizontal in einer Reihe platzieren mit Flexbox horizontal in einer Reihe Und platzieren Sie sie auch in der Mitte, indem Sie das Justify-Content Center verwenden Okay, das war's mit dem Countdown. Jetzt werde ich ein Div-Element anpassen , das wir in JavaScript erstellt haben. Ich meine, das Kind macht Teile des Countdowns. Definieren wir also zunächst Breite und Höhe. Ich werde beide auf 13 Rampen einstellen. Als Nächstes definiere ich den Hintergrund. Eigentlich möchte ich einen linearen Verlauf verwenden , weil wir mit dem linearen Verlauf den Hintergrund in zwei verschiedene Teile unterteilen können . Also werde ich zunächst die Richtung ändern. Lass es uns nach unten passen. Das bedeutet, dass der Übergang von oben nach unten erfolgen wird. Verwenden Sie dann den RGBA-Wert. Lassen Sie uns hier eine Pause einlegen, 601-50-8508 und die Opazität 0,9. Und auch hier brauchen wir 50%. Als Nächstes benötigen wir einen weiteren RGBA-Wert innerhalb der Zahlen 909-90-3903 Und wir müssen dich auf Null setzen. Wie Sie jetzt sehen, ist der Hintergrund in zwei verschiedene Teile unterteilt. Danach werde ich mit Margin etwas Platz schaffen. Setzen wir es oben auf Null. Dann liefen für RAM auf der rechten Seite 12 unten und vier auf der linken Seite. Danach erhöhen wir die Schriftgröße machen sieben RAM daraus. Und ändere auch die Schriftstärke, mache sie auf 400. Okay, als Nächstes zentriere ich die Zahlen in den Boxen. Und dafür verwenden wir Flexbox. Wir brauchen Flexibilität beim Display, Justify Content Center und Alignment Items Center. Und zum Schluss werde ich einen Schatteneffekt erzeugen. Verwenden wir Box Shadow mit den Werten 0,8 RAM 2,5 RAM. Und dann der RGBA-Wert mit einer schwarzen Farbe und einer Opazität Richtig? Also Schritt für Schritt wird das Projekt ziemlich schöner. Als Nächstes möchte ich eine kleine Linie in der Mitte jeder Box oder Karte anzeigen eine kleine Linie in der Mitte , was auch immer es ist. Ich werde eine Zeile erstellen, indem ich vorherige Pseudoelemente verwende. Wählen wir also Countdown def, gefolgt von den vorherigen Pseudoelementen Lassen Sie uns zunächst den Inhalt definieren und ihn leer machen. Stellen Sie dann die Position auf absolut. Ich werde das Element entsprechend seinem übergeordneten Element positionieren . Ordnen wir also dem Countdown Deep die relative Position zu. Als Nächstes definieren wir Breite und Höhe. Ich werde mit 200 Prozent beginnen. Was die Höhe angeht, lassen Sie uns 0,24 Ran daraus machen. Und definiere auch die Hintergrundfarbe. Mach 17181 draus. Okay, es kann sehen, dass wir hier die Linie in der Mitte der Boxen haben. Lass uns weitermachen und mit der nächsten Sache fortfahren. Werfen wir einen Blick auf das fertige Projekt. Wie Sie sehen können, können wir unter jedem Feld den richtigen Text sehen. Ich bin in Tagen, Stunden, Minuten und Sekunden. Ich werde sie mit der Pseudoklasse after hinzufügen. Wir können also entweder jedes div-Element mit dem F-Child-Selektor separat auswählen und den Inhalt definieren Aber das werde ich nicht tun. Ich werde einen kleinen Trick anwenden. Gehen wir zur Datei script.js und weisen jeder Entwicklung das Attribut Dateninhalt zu. Dann fügen wir als Werte hier Tage und Stunden ein. Dann haben wir Minuten und Sekunden. Gehen Sie dann zurück zur CSS-Datei und wählen Sie Countdown Div mit den nachfolgenden Pseudoelementen Definieren wir den Inhalt. Als Wert der Inhaltseigenschaft übergebe ich hier die Funktion Attribut, die als TTR ausgedrückt wird Und wir müssen hier die Dateninhaltsattribute übergeben. Wie Sie sehen können, die Textwerte auf der Seite angezeigt. Im Moment sind sie zwei größere. Also kümmern wir uns darum. Ändern wir die Schriftgröße, stellen wir sie so ein, dass sie auf RAM zeigt, und setzen dann die Schriftstärke auf 400. Stellen Sie dann die Position auf absolut und definieren Sie die unterste Eigenschaft. Mach minus sechs Runden. Ordnung, das letzte Element, das ich anpassen möchte, ist eine Schaltfläche Wählen wir es also aus. Definieren wir zunächst Breite und Höhe. Ich werde mit 220 anfangen. Was die Höhe angeht, lassen Sie uns sechs Runden daraus machen. Entfernt dann den Standardrahmen und verwendet border none. Und ändere die Hintergrundfarbe. Ich werde deine Farbe A5 bis A12 verwenden. Als Nächstes kümmern wir uns um die Schriftarten. Ich setze die Schriftgröße auf 2,2 RAM und mache dann die Schriftstärke auf 400 Schaffen Sie etwas Abstand zwischen den Buchstaben. Lass es auf RAM zeigen. Transformiere auch Text in Großbuchstaben. Ändern Sie dann die Farbe des Textes und machen Sie ihn hell, indem Sie Farbe verwenden, z. Danach erstelle ich einen Schatten für den Text und für die Schaltfläche selbst. Verwenden wir also Text Shadow mit einem Wert von 0,3, 0,5 RAM. Und der RGBA-Wert mit schwarzer Farbe und der Opazität 0,5 Lassen Sie uns diese Codezeile duplizieren. Ändern Sie den Text in Box. Außerdem verwende ich anstelle von 0,5 Ramp 0,6 Wrap. Lassen Sie uns abschließend die Standardgliederung loswerden. Mach keinen draus. In Ordnung, das war's mit dem Design. Das Projekt sieht ziemlich gut aus. Und jetzt gehe ich zurück zur Datei script.js und füge der Funktionalität des Countdowns ein paar weitere Dinge hinzu. Wenn die Zahl auf dem Countdown also kleiner als zehn wird, wird nur eine Ziffer angezeigt Das ist nicht ganz nett Ich werde es also schaffen, immer zwei Ziffern anzuzeigen , egal was passiert. Also werde ich die bedingten Aussagen verwenden. Wir müssen überprüfen, ob die Länge der Tage einem entspricht. Wenn das stimmt, müssen wir Tage mit Null anzeigen. Und wenn es falsch ist, müssen wir nur Tage anzeigen. Eigentlich habe ich hier die Eigenschaftslänge innerhalb der Zahl verwendet , aber das ist nicht korrekt. Die Längeneigenschaft funktioniert gut mit diesen Zeichenfolgenwerten. Also müssen wir diese Zahlen in Zeichenkettenwerte umwandeln. Dafür gibt es mehrere Möglichkeiten. Ich füge zu jeder Zahl und jeder leeren Zeichenfolge hinzu. In diesem Fall werden die Werte also verkettet und wir würden die Zeichenkettenwerte erhalten Ordnung, verwenden wir diese Bedingung für den Rest der Zahlen Ich kopiere es und füge es ein. Wir brauchen hier Stunden als Minuten. Schließlich brauchen wir Sekunden. In Ordnung, jetzt ist das Problem behoben. Wir werden im Countdown keine einstelligen Zahlen mehr haben Countdown keine einstelligen Zahlen Als Nächstes möchte ich tun, dass wir, sobald die Zeit abgelaufen ist, den Inhalt des Countdowns von diesen Zahlen in einige Texte ändern müssen . Wir brauchen also eine IF-Anweisung als Bedingung, wir müssen überprüfen, ob die Differenz kleiner als Null ist. Wenn es also stimmt, bedeutet das, dass die Zeit abgelaufen ist und wir den Inhalt des Countdowns ändern müssen Zuallererst müssen wir das Intervall löschen. Ich meine, um die eingestellte Intervallfunktion zu beenden. Dafür müssen wir eine der Methoden verwenden, die als Clear Interval bezeichnet werden. Und wir müssen das variable Ertragsintervall einhalten. Danach ändere ich den Inhalt des Countdowns. Wir brauchen also einen Countdown-Punkt im HTML-Code. Lassen Sie uns Ihre H1-Überschriftenelemente für einige Texte verwenden. Sagen wir. Los geht's. Okay, um zu überprüfen, wie es funktioniert, setze ich das Datum auf die aktuelle Uhrzeit. Also los geht's. Acht Werke. Gut. In Ordnung, wir sind fast fertig. Das einzige, was ich tun werde, ist, die Reset-Taste zum Laufen zu bringen. Sobald ich darauf klicke, sollte es den Countdown zurücksetzen und diese Zahlen zu Nullen machen Also wähle ich die Reset-Schaltfläche mit der QuerySelector-Methode Dann werde ich mit der Methode Add Event Listener eine Verbindung zu einem Event-Listener herstellen. Es braucht zwei Argumente. Das erste wird das Klick-Event sein. Was die zweite betrifft, werde ich hier eine Pfeilfunktion weitergeben, die ausgeführt wird, sobald wir auf die Reset-Schaltfläche klicken. Zuallererst müssen wir die eingestellte Intervallfunktion beenden. Ich meine, wir müssen die Methode des klaren Intervalls verwenden. Lassen Sie uns hier das Intervall durchgehen. Jetzt wähle ich alle div-Elemente aus, die wir benötigen, um sie durchzusehen und den Inhalt zu ändern. Wir müssen es zu Nullen machen. Also werde ich eine Variable erstellen, nennen wir sie divs Wählen Sie dann alle div-Elemente innerhalb des Countdowns aus. Wir brauchen also eine Query Selector All-Methode. Und wir müssen hier den Klassen-Countdown angeben , gefolgt vom Div. Wie gesagt, wir müssen uns diese Div-Elemente ansehen und ihren Inhalt ändern. Also werde ich eine der Array-Hilfsmethoden verwenden , die für jede Methode aufgerufen werden Für jede Methode wird ein Argument benötigt. Es wird die Callback-Funktion sein, die einen Parameter benötigt und es wird das aktuelle Element in der Liste sein Nennen wir es div. Also müssen wir den Inhalt jedes Divs ändern. Lassen Sie uns innerHTML verwenden und den Inhalt auf Nullen setzen. Wenn ich also auf die Schaltfläche klicke, wird der Countdown zurückgesetzt 16. Projekt 13 - Profilkarte: Okay, es ist Zeit, mit dem Bau unseres nächsten Projekts zu beginnen. In diesem Video werden wir eine Profilkarte erstellen. Das Projekt wird einfach sein mit einem modernen Design und einigen schönen Effekten. Ich denke also, Sie werden Spaß daran haben, es zu bauen. Okay, bevor wir mit der Erstellung des Projekts beginnen , schauen wir es uns kurz an Wie Sie sehen können, haben wir eine kleine Karte in der Mitte der Seite. Es enthält einige Informationen über die Person. Ich bin dabei, das Bild, der Dateiname und eine Beschreibung. Und unten haben wir einen Button. Wenn ich darauf klicke, ändert die Schaltfläche ihre Form, Position und ihren Inhalt. Außerdem werden drei verschiedene Felder mit einigen Social-Media-Kontaktdaten der Person angezeigt . Wenn ich erneut auf die Schaltfläche klicke, kehren wir zum vorherigen Zustand des Autos zurück. Schauen wir uns also an, was wir bauen werden. Ich hoffe, es wird interessant sein weil Sie lernen werden, wie man solche Effekte erzeugt. Okay, also habe ich auf dem Desktop einen neuen Ordner namens card erstellt . Darin befindet sich ein Ordner für die Bilder. Ich werde diesen Ordner in VS Code öffnen und dann drei verschiedene Dateien für HTML, CSS und JavaScript erstellen . Die erste wird index.html sein. Dann haben wir style.css und Skripte dot js. Lassen Sie uns weitermachen und das grundlegende HTML-Dokument erstellen. Dafür. Ich werde m it benutzen, wenn ich hier ein Ausrufezeichen setze und dann Enter oder Tab drücke, erhalten wir die Grundstruktur des HTML-Dokuments Lass uns weitermachen und den Titel ändern. Ich lege hier eine Kontaktkarte hin. Danach verknüpfen wir alle drei Dateien. Ich werde das Link-Tag im Hauptelement für die CSS-Datei öffnen. Geben wir hier den Namen der Datei ein. Dann müssen wir das Script-Tag direkt über dem abschließenden Body-Tag öffnen . Und im Quellattribut müssen wir den Pfad der Datei angeben. Okay, los geht's, alle drei Dateien sind miteinander verbunden. Als Nächstes werde ich ein paar zusätzliche Links hinzufügen. Während des gesamten Projekts. Ich werde die Font Awesome-Symbole und Google Forms verwenden. Also lass uns weitermachen und nach Font Awesome, CDN, js suchen. Gehen Sie dann zum ersten Link, wählen Sie CSS aus und holen Sie sich den ersten Link von hier aus. Dann muss ich das Link-Tag öffnen und den Link als Wert des h-Referenzattributs eingeben. In Ordnung, das war's mit den Font Awesome Icons. Lassen Sie uns weitermachen und den Link für die Google-Schriftarten einfügen. Ich werde nach Google-Schriften suchen. In diesem Tutorial werde ich also eine Schrift namens Doses verwenden. Lassen Sie uns es anpassen, da wir unterschiedliche Schriftstärken verwenden werden. Dann nimm den Link und füge ihn in das Hauptelement ein. Ordnung, jetzt ist es an der Zeit , das Projekt im Browser auszuführen Dafür verwende ich eines der VS-Codepakete namens Live Server. Es ermöglicht uns, den Projektverlauf im Browser auszuführen und Aktualisierungen vorzunehmen, ohne die Seite zu aktualisieren. Sie können also weitermachen und dieses Paket installieren. Okay, lassen Sie uns abschließend den Editor und den Browser nebeneinander platzieren den Editor und den Browser nebeneinander Einfach so und los geht's. Also fange ich zuerst mit HTML-Markup an. Wir werden die gesamte HTML-Struktur des Projekts vorbereiten und dann CSS und JavaScript hinzufügen. Lassen Sie uns weitermachen und das div-Tag öffnen, das der Container für den gesamten Inhalt sein wird. Dann erstelle ich im Behälter die Karte selbst. Das Auto wird also aus ein paar verschiedenen Teilen bestehen. Wir werden eine Karte haben, Bio-Karte haben, einige Social-Media-Kontakte führen und so weiter. Lass uns weitermachen und mit der Kartenbiografie beginnen. Es wird das Bild der Personenbeschreibung und der Schaltfläche enthalten . Es ist ein offenes Div-Tag und wird der Klassenkarten-Biografie zugewiesen. Fügen Sie es dann in ein anderes Div ein, das der Wrapper des Bildes sein wird Ich werde es IMG-Rapper nennen. Und ich füge hier ein Bild-Tag und das Quellattribut ein. Wir müssen den Pfad des Bildes angeben. Und ich werde hier auch Person als Wert des Alt-Attributs angeben. Und außerdem werde ich von hier aus für eine Weile die Breite des Bildes definieren hier aus für eine Weile die Breite des Bildes Machen wir hundert Pixel draus. Eigentlich werden wir das am Ende des Tages von CSS aus machen. In Ordnung, nächste Minute, persönliche Daten. Öffnen wir also das Div-Tag mit den Informationen zur Klassenperson und fügen Sie Ihr h3-Überschriftenelement für den vollständigen Namen der Person Ich werde Jane Brown unterrichten. Und wir müssen auch einen Absatz für eine Beschreibung hinzufügen. Fügen wir hier einen Blindtext hinzu. Okay, schließlich müssen wir den Button erstellen, ich meine den schwarzen Knopf, der sich bewegt und die Form ändert, sobald wir darauf klicken Lassen Sie uns einer Klasse namens BTN zuweisen. In diesem Button werden wir also zwei Teile haben. Das erste wird das Span-Element mit dem Text sein . Kontaktiere mich. Was den zweiten betrifft, so wird es das Symbol sein. Also lassen Sie uns diesem Panel ein Element namens btn Kontakte zuweisen diesem Panel ein Element namens btn Kontakte Und dann vom Institut besteuert kontaktieren Sie mich. Und als Nächstes füge ich hier das Font Awesome-Symbol ein, das die Klassennamen FAS, FA Dash, Angle, Dash up haben sollte FAS, FA Dash, Angle, Dash up Okay, das war's mit der Kartengalle. Fahren Sie mit dem nächsten Teil fort. Als nächstes müssen wir die Überschrift „ Kontaktiere mich“ erstellen , die dann ausgeblendet wird und beim Klicken erscheint. Öffnen wir also das div-Tag mit der Klasse card contact und fügen es H4-Überschriftenelemente mit dem Text Kontaktiere mich. In Ordnung, also ist die Hälfte des Markups erstellt Als Nächstes müssen wir uns um die drei verschiedenen weißen Felder kümmern , die für einige Kontaktinformationen in sozialen Medien verwendet werden . Öffnen wir also das Div-Tag und weisen es der Klasse Social zu. Dies wird die gemeinsame Klasse für gemeinsames Styling sein. Wir brauchen aber auch die individuelle Klasse für das individuelle Styling. Das erste Feld wird für die E-Mail sein. Ordnen wir ihm also eine Klassen-E-Mail zu . Tatsächlich besteht jedes Feld aus einem Font Awesome-Symbol und einigen Kontaktdaten. Öffnen wir den Deep-Tag, der Wrapper für das Font Awesome-Symbol sein wird für das Font Awesome-Symbol Weisen wir ihm eine Klasse zu, die ich wickeln kann. Und dann fügen Sie Ihr Irland mit Klassen FAS, FA-Strich, Umschlag Danach müssen wir hier einige Kontaktdaten angeben. Öffnen wir also ein weiteres div-Tag mit den Kontaktdaten der Klasse. Ich werde hier das Überschriftenelement h f4 zusammen mit der Text-E-Mail einfügen Als nächstes benötigen wir einen Absatz, der die tatsächliche E-Mail-Adresse der Person enthält. Und außerdem füge ich deinen kleinen Pfeil ein, der durch die eckige Klammer ausgedrückt wird. Lassen Sie uns das Span-Element öffnen und es hier platzieren. Okay, das war's mit den ersten Social-Media-Kontakten. Insgesamt werden wir drei davon haben. Lassen Sie uns diesen Code also zweimal duplizieren und dann einige Änderungen vornehmen. Ich werde den Klassennamen ändern, FB als Facebook. Dann ändere ich die Klasse der Ionen, wenn f, a, b, f strich, Facebook, Strich quadratisch sind. Dann brauchen wir hier Facebook. Und der vollständige Name der Person, Jane Brown. Okay, Next wird verlinkt. Ändere die Klassen der Insel, FAB, FA Dash, LinkedIn. Außerdem benötigen wir hier LinkedIn und dann den Benutzernamen bei Jane Brown. Okay, also endlich sind wir mit dem HTML-Markup fertig , die Elemente sind erstellt und vorbereitet Es ist Zeit, weiterzumachen und mit dem Schreiben des CSS zu beginnen. Zuallererst werde ich einige Reset-Stile erstellen. Ich möchte den Standardrand und das Padding von jedem Element entfernen Standardrand und das Padding von jedem Element Um sie auszuwählen, müssen wir ein Sternchen verwenden Dann setze ich sowohl den Rand als auch den Abstand auf Null. Ordnung, also während des gesamten Projekts werde ich eine Rampe als Maßeinheit verwenden Standardmäßig entspricht ein RAM 16 Pixeln, da die Schriftgröße des HTML-Elements derzeit 16 Pixeln entspricht. Ich möchte einen RAM in Pixel umrechnen , weil das bequemer und einfacher zu berechnen sein wird . Dazu müssen wir also die Schriftgröße des HTML-Elements von 100% auf 62,5 Prozent reduzieren von 100% auf 62,5 Prozent Jetzt entspricht ein RAM zehn Pixeln Wie Sie sehen können, hat sich die Größe der Elemente verringert. Okay, lass uns weitermachen und uns um den Container kümmern. Ich möchte, dass der Container die gesamte Seite einnimmt. Wählen wir es also aus und definieren die Breite und Höhe. Ich setze die Breite auf 100%. Was die Höhe angeht, werde ich ihr eine Viewport-Höhe von 100 zuweisen Viewport-Höhe von 100 zuweisen Hier sagen wir also, dass der Container 100 Prozent der Höhe des Viewports einnehmen sollte 100 Prozent der Höhe des Viewports Als Nächstes ändere ich die Hintergrundfarbe. Lass uns deine Farbe 051321 verwenden. Danach möchte ich die Karte in die Mitte der Seite legen. Verwenden wir dafür die CSS-Flexbox. Wir müssen drei verschiedene Eigenschaften verwenden. Flex anzeigen. Um das Element dann horizontal zu zentrieren, müssen wir das Inhaltszentrum rechtfertigen. Zur senkrechten Zentrierung. Wir müssen das Alignment Items Center verwenden. Das war's mit dem Container. Als nächstes müssen wir uns um das Auto kümmern. Moment ist der Inhalt der Karte nicht ganz sichtbar, also lassen Sie uns das Problem mithilfe eines temporären Hintergrunds korrigieren. Lassen Sie uns zunächst die Breite der Karte festlegen, sie für die Ausführung und dann die Hintergrundfarbe ändern. Benutze deine Farbe D, D, D. Okay, jetzt ist der Inhalt tatsächlich mit einer Schnur sichtbar . Wir sind fertig. Wir müssen die Teile separat anpassen. Ich beginne mit dem ersten Teil, die Kartenbiografie sein wird. Wählen wir es also aus und definieren wir zunächst die Hintergrundfarbe. Ich werde hier die Farbe 458564 verwenden. Danach schaffen wir mit Polsterung etwas Platz in der Box Ich werde das Padding an den oberen 23 RAM einrichten. Dann wieder drei Rem auf der rechten Seite bis M unten und drei Rem auf der linken Seite. Als Nächstes platziere ich die Elemente horizontal in einer Reihe. Dafür verwende ich Display Flex. Außerdem werde ich die oberen linken und oberen rechten Ecken abgerundet machen die oberen linken und oberen rechten Ecken abgerundet Verwenden wir dafür den Grenzradius. In diesem Fall sollte es vier verschiedene Werte annehmen. Der erste wird für die obere linke Ecke sein. Machen wir 0,5 Rampe draus. Dann verwende ich wieder die Punkte von Ram für die obere rechte Ecke. Und darauf sollten zwei Nullen für die Spalten unten links und unten rechts folgen für die Spalten unten links und unten rechts Okay, das war's, was die Kartenbiografie angeht, müssen wir den Inhalt stylen Ich fange mit einem Knopf an. Kontaktieren Sie mich, weil ich denke, dass dies den Styling-Prozess etwas einfacher machen wird . Wählen wir es also aus. Zuallererst werde ich mich um seine Position kümmern. Ich möchte es hier am Ende der Kartenbiografie platzieren. Machen wir seine Position also absolut. Dann setze ich den Kauf einer Immobilie auf -2,5 Rem. Dann brauchen wir die richtige Position. Ich stelle die Rampe auf zehn. Wie Sie gerade sehen ist die Schaltfläche am Ende der Seite gelandet. Das passiert, weil die Position nicht gemäß den übergeordneten Elementen funktioniert, was als Bio bezeichnet wird. Wir müssen die Position relativ festlegen und dann funktioniert die Schaltfläche entsprechend der Position des übergeordneten Elements. In Ordnung, jetzt ist es richtig platziert. Definieren wir seine Breite und Höhe. Ich setze es auf 20 RAM. Was die Höhe angeht, lassen Sie uns sechs Rampen daraus machen. Und ändere auch die Hintergrundfarbe. Mach 3038 draus. Okay, lassen Sie uns weitermachen und unten einige weitere Stile hinzufügen . Ich werde die Textfarbe ändern. Machen wir es weiß. Dann runden Sie den Knopf mit einem Randradius mit dem Wert von fünf Und es ist auch wichtig, die Standardgrenze zu entfernen. Also Schritt für Schritt wird der Button schöner. Kümmern wir uns um die Schrift. Ich werde die Schriftfamilie ändern. Lass es uns machen, Dole sagt Serifen. Erhöhen Sie dann die Schriftgröße und stellen Sie zwei Punkte für RAM ein. Und um Text in Großbuchstaben umzuwandeln. In Ordnung? Eigentlich gibt es ein paar Stile, die ich hier hinzufügen möchte. Ich werde einen Schatten mit Box Shadow mit den Werten 0,3 um 0,8 RAM erstellen Box Shadow mit den Werten . Und dann der RGBA-Wert, ich verwende schwarze Farbe mit einer Opazität Als Nächstes entfernen wir die Standardgliederung. Legen Sie die Gliederung auf „Keine und ändern Sie schließlich den Typ des Cursors. Lass es auf den Knopf zeigen. Sieht im Moment ziemlich gut aus, wir sind fertig damit. Da ich in diesem Traceable sowohl den Inhalt der Box sehe , meine ich, den Text kontaktiere mich und die eckige Klammer. Lassen wir es so, wie es jetzt ist , denn darum werden wir uns später kümmern. Okay, sobald wir mit dem Button fertig sind und jetzt können wir das Bild und die persönlichen Daten anpassen. Lass uns weitermachen und mit dem Bild beginnen. Ich werde ein Wrapper-Div-Element auswählen. Zunächst als definierte Breite und Höhe. Ich werde beide auf die Rampe neun stellen. Und erstellen Sie auch das Feld auf der rechten Seite, indem Sie den rechten Rand verwenden, mit einem Wert von drei Runden. Danach wähle ich das Bild selbst aus. Machen wir Breite und Höhe, beide hundertprozentig. In diesem Fall erbt eine, die Breite und Höhe von der Elternentwicklung Ich meine den IMG-Wrapper. Außerdem müssen wir Ihr objektgerechtes Cover verwenden. Dadurch können wir die Bildqualität beibehalten. Und schließlich runden wir es ab, indem Randradius mit einem Wert von 50 Prozent Jetzt sieht das Bild ziemlich gut aus. Wie Sie sich erinnern, definieren wir die Breite des Bildes aus dem HTML-Dokument. Also lasst uns weitermachen und es loswerden , weil wir es nicht mehr brauchen. In Ordnung, das ist es. Bezüglich des Bildes, lassen Sie uns weitermachen und die persönlichen Daten anpassen. Ich wähle den Rapper aus. Definieren wir zunächst die Breite und machen sie zu 60%. Dann füge ich ein paar gängige Stile für die Überschrift und für den Absatz hinzu. Das tun, um zu vermeiden, dass Sie immer wieder dieselben Dinge eingeben . Lassen Sie uns also weitermachen und die Schriftfamilie definieren. Verwenden Sie erneut Ptosis serif. Dann ändere die Farbe, mache es weiß. Außerdem werde ich Textschatten mit den Werten 0,1 Rem-Punkt für RAM und die schwarze Farbe RGBA mit der Opazität 0,3 verwenden 0,1 Rem-Punkt für RAM und die schwarze Farbe RGBA mit der Opazität Okay, danach müssen wir beiden Elementen einige individuelle Stile hinzufügen . Beginnen Sie mit den Überschriftenelementen. Ich mache die Schriftgröße 2,5 rem. Ändern Sie dann die Schriftstärke. Mach 500 draus. Außerdem werde ich etwas Abstand zwischen den Buchstaben schaffen. Machen Sie es zu 0,1 RAM und schaffen Sie dann unten etwas Platz, indem Sie den Rand unten mit dem Wert eines Durchlaufs verwenden. Okay, das war's mit der Überschrift. Lassen Sie uns weitermachen und einen Absatz auswählen. Im Falle eines Absatzes möchte ich nur die Schriftgröße 1,8 rem festlegen. In Ordnung. Wie ihr sehen könnt, sieht der erste Teil der Karte, die Kartenbiografie, nett aus und eigentlich sind wir damit fertig. Jetzt ist es an der Zeit, sich um den nächsten Teil zu kümmern. Ich möchte einen kleinen Abschnitt unter der Auto-Biografie anpassen . Ich meine die Überschrift. Kontaktieren Sie mich zuerst, lassen Sie uns den Wrapper namens Kontakt auswählen Ändern Sie die Hintergrundfarbe. Ich werde hier anrufen oder 2814d verwenden. Dann mache den Text weiß. Also werde ich etwas Platz innerhalb der Elemente schaffen . Verwenden wir Polsterung Ich setze es oben und unten auf 1,5 rem. S4, die linke und rechte Seite. Machen wir die Polsterung zum Schimpfen. Und ich werde auch den Grenzradius verwenden. Bei Kartenkontexten möchte ich die unteren linken und unteren rechten Ecken abgerundet machen . Wir benötigen also die folgenden Werte, 00 und dann 0,5 rem und wieder 0,5 rem. Okay? Kümmern wir uns jetzt um die Überschrift selbst. Lassen Sie uns es auswählen und ein paar Stile hinzufügen . Zuallererst werde ich die Schriftfamilie ändern. Verwenden wir noch einmal Ptosis-Serif. Ändern Sie dann die Schriftgröße und machen Sie 1,8 RAM daraus. Dann setze ich die Schriftstärke auf 500. Machen Sie den Text auch in Großbuchstaben. Dann schaffen Sie Platz zwischen den Buchstaben. Mach 0,1 Rem draus. Verwenden Sie abschließend Shadow mit den Werten 0,1 Rem-Punkt für RAM und die schwarze Farbe mit der Opazität 0,3 Okay, das war's mit diesem Abschnitt. Ich weiß, dass es nicht ganz gut aussieht. Ich meine, es ist teilweise hinter dem Knopf gelandet, aber eigentlich ist es nicht das Problem. Wir werden uns darum kümmern. In Ordnung, also Schritt für Schritt gehen wir voran. Als Nächstes werde ich die Kontaktdaten der sozialen Medien formatieren. Ich meine, diese drei Boxen. Eigentlich können wir diesen temporären Hintergrund loswerden , weil wir ihn nicht mehr benötigten. Dann lass uns weitermachen und die Entwicklung mit einer Klasse namens Social auswählen . Zuallererst werde ich die Hintergrundfarbe weiß machen . Schafft dann durch Polsterung etwas Platz in der Box. Machen wir 1,5 Rem auf allen vier Seiten. Außerdem müssen wir mithilfe von Margin etwas Abstand zwischen den Feldern schaffen . Setzen wir es oben und unten auf zwei Rem und links und rechts auf Null. Dann lassen Sie uns die Ecken mit einem Randradius mit einem Wert von 0,3 Außerdem werde ich die Elemente als Flex-Container verwenden , da ich Elemente horizontal in einer Reihe platzieren möchte . Verwenden Sie also Display Flex. Und dann, um die Elemente vertikal zu zentrieren, verwenden wir die Option Elemente zentriert ausrichten. Schließlich benötigen wir den Cursorzeiger. In Ordnung, jetzt mit dem Wrapper sind wir fertig. Lassen Sie uns die einzelnen Elemente in diesen Feldern anpassen. Ich beginne mit den Font Awesome-Symbolen. Wählen wir die schnelle Entwicklung aus. Es hat Klasse, die ich packen kann. Ich werde Breite und Höhe festlegen, beide sind für den Herbst gelaufen. Als Nächstes gebe ich dem Wrapper-Hintergrund eine Farbe. Aber wie Sie sich erinnern, haben alle drei Font Awesome-Symbole unterschiedliche Hintergrundfarben. Also müssen wir sie einzeln auswählen. Lass uns weitermachen und mit der E-Mail beginnen. E-Mail gefolgt vom Klassensymbol-Wrapper. Also im Fall von E-Mail, und wir werden eine Hintergrundfarbe mit dem Wert d, d für B39 verwenden dem Wert d, d für B39 Dann duplizieren wir diesen Code zweimal. Die zweite Box ist für Facebook. Also lass uns die Klasse wechseln. Benutze hier FB und ändere auch die Farbe. Ich werde hier 359 98s für LinkedIn verwenden. Verwenden wir die Hintergrundfarbe 007, BB Six. Ordnung, also haben alle drei Icons die richtigen Hintergrundfarben Lassen Sie uns weitermachen und dem Wrapper einige weitere gängige Stile hinzufügen Wrapper einige weitere gängige Stile hinzufügen Wir brauchen hier einen Grenzradius mit einem Wert von 50 Prozent. Weil wir es rund machen müssen. Dann benutze Flexbox. Ich werde die Icons perfekt zentrieren. Verwenden wir also Display Flex. Dann begründen Sie das Inhaltszentrum. Zur waagerechten Zentrierung. Was die vertikale Zentrierung angeht, müssen wir die Option Elemente mittig ausrichten verwenden und dann auf der rechten Seite etwas Platz schaffen, und dann auf der rechten Seite etwas Platz schaffen indem wir den Wert für den rechten Rand verwenden, um zu laufen Okay, der Wrapper ist fertig, alles sieht gut aus und ich muss den Symbolen einige Sterne hinzufügen Wählen wir sie also aus. Ich werde die Schriftgröße erhöhen. Lass uns rennen. Und ändere auch die Farbe, mach es weiß. In Ordnung, gehen wir zu den Kontaktdaten über. Wir müssen die Überschrift und den Absatz anpassen. Ich fange mit der Überschrift an. Wählen wir es aus. Lassen Sie uns zunächst die Schriftfamilie ändern. Ich werde wieder Doses Serif verwenden. Dann ändere die Schriftgröße und mache 1,6 RAM daraus. Schaffen Sie etwas Abstand zwischen den Buchstaben. Ich meine 0,1 RAM. Und schaffen Sie auch etwas Platz am unteren Rand, indem Sie den Wert von Margin Bottom mit dem Wert 0,5 ran verwenden. So sehen die Überschriften im Moment aus. Wir müssen ihnen verschiedene Farben geben. Daher werde ich sie separat auswählen. Fangen wir mit der E-Mail an. Lassen Sie uns die Farbe auf d. D für B39 setzen. Dann duplizieren Sie diesen Code zweimal, ändern Sie den Klassennamen in FB und ändern Sie auch die Farbe, machen Sie 359 98s für LinkedIn Ich werde die Farbnullen 076 verwenden. Okay, sobald wir mit den Überschriften fertig sind, lassen Sie uns weitermachen und uns um die Absätze kümmern Lassen Sie uns weitermachen und sie auswählen. Lassen Sie uns zunächst die Schriftfamilie ändern. Verwenden Sie Dosis-Serif. Dann setze ich die Schriftgröße für RAM auf einen Punkt. Ändere die Farbe, mache 444 daraus und schaffe dann etwas Abstand zwischen den Buchstaben. Mach 0,1 Run. Ordnung, also eigentlich sind wir mit diesen Fliesen fast fertig Das einzige Element, das wir anpassen müssen, ist dieser kleine Pfeil hier. Lassen Sie uns also weitermachen und es auswählen , da es sich um die Span-Elemente handelt. Zuallererst möchte ich es auf der rechten Seite der Box platzieren . Dafür können wir Margin Left verwenden. Und wir müssen es auf Auto stellen. Eigentlich funktioniert es nicht. Die Spannelemente sollten auf der rechten Seite platziert werden. Ich denke, wir haben einen kleinen Fehler in der HTML-Datei. Schauen wir es uns an. Die Span-Elemente sollten sich also außerhalb der Kontaktdaten befinden. Lass es uns schnell reparieren. Und ändere hier auch den Selektor. Wir brauchen Cart Social, gefolgt von der Spanne. Dann erhöhe ich die Schriftgröße, mache es zu Ram, ändere die Schriftstärke, mache es fett. Und außerdem setze ich die Farbe auf 999. Endlich, mit dem Styling, sind wir fertig. Jetzt müssen wir weitermachen und die Funktionalität der Karte kümmern. Ich werde dich daran erinnern, was wir tun werden. Schauen wir uns also das fertige Projekt an. Daher werden wir standardmäßig den Bereich „Kontaktiere mich“ und die Kontaktdaten der sozialen Medien ausblenden den Bereich „Kontaktiere mich“ . Sobald wir auf die Schaltfläche klicken, ändert sie ihre Form, Position und ihren Inhalt. Und die Elemente werden hier unten erscheinen. In Ordnung, lassen Sie uns weitermachen und uns darum kümmern. Zunächst füge ich der Schaltfläche einen Click-Event-Listener hinzu Gehen wir also zur Datei script.js und wählen die Schaltfläche aus, die ich hier verwenden werde, um die Abfrageauswahlmethode zu verwenden Wir müssen den Klassennamen in der Klammer angeben in der Klammer Wir brauchen hier den Namen BTN. Dann müssen wir an jeden Event-Listener eine Anlage anhängen. Verwenden wir eine Methode namens Add Event Listener. Diese Methode benötigt zwei Parameter. Die erste ist die Art der Veranstaltung. Wie gesagt, wir werden Click verwenden. Weiter. Wir müssen das Jahr übergeben, die Pfeilfunktion, die tatsächlich ausgeführt wird , sobald wir auf das Element klicken. In Ordnung, lassen Sie mich erklären, was wir tun werden. Tatsächlich werden wir eine neue Klasse und ein neues CSS namens Change erstellen . Wir werden diese Klasse dem Container hinzufügen. Dann werden wir mit acht neuen Stilen auf die Elemente anwenden. Lassen Sie uns also weitermachen und einen Container mithilfe einer Spielabfrageauswahlmethode auswählen einer Spielabfrageauswahlmethode Geben Sie hier den Klassencontainer an. Als Nächstes müssen wir die Eigenschaft Klassenliste verwenden. Diese Eigenschaft gibt uns alle Klassen, die das Element hat Enter, jetzt müssen wir die Methode namens toggle verwenden Die Toggle-Methode ermöglicht es uns, die Klasse zu dem Element hinzuzufügen , wenn es sie nicht enthält , und die Klasse zu entfernen Wenn das Element acht in der Klammer enthält, müssen wir hier eine Klassenänderung einfügen In Ordnung, das war's mit JavaScript. Jetzt müssen wir den Klassenwechsel in CSS verwenden. Bevor ich das mache, werde ich hier ein paar Elemente verstecken. Wie Sie die Überschrift kennen, kontaktieren Sie mich und diese drei Felder sollten standardmäßig ausgeblendet sein. Also müssen wir zwei Karten eine Kontakttransformation zuweisen. Mit der Funktion translate y. Es wird uns ermöglichen, die Elemente nach oben zu verschieben. Lassen Sie uns hier durchgehen -100 Prozent. Wie Sie sehen, ist das Element nach oben gerückt, aber es ist ganz oben in der Kartenbiografie gelandet. Eigentlich brauchen wir es nicht. Ich möchte es hinter der Auto-Biografie platzieren. Um das zu tun, verwende ich die Z-Indexeigenschaft Setzen wir sie auf, sagen wir, 100. Jetzt ist das Problem behoben. Das Element ist hinter der Auto-Biografie gelandet. Lassen Sie uns weitermachen und uns um die Kontexte der sozialen Medien kümmern . Wir müssen sie verstecken und wir müssen sie auch leicht nach oben bewegen. Verwenden wir also noch einmal transform mit der Funktion translate y. Und in diesem Fall lassen Sie uns hier eine Pause einlegen — 50 Prozent. Also werden die Kisten nach oben bewegt und jetzt müssen wir sie verstecken. Um die Elemente zu verbergen. Ich werde Opazität Null und auch Visibility Hidden verwenden. In Ordnung, also ist alles bereit. Lassen Sie uns weitermachen und das Klick-Event in die Praxis umsetzen. Wenn wir auf die Schaltfläche klicken, sollten diese versteckten Elemente erscheinen. Fangen wir mit der Überschrift Kontaktiere mich an. Wir müssen den Klassenwechsel verwenden, gefolgt vom Kontakt mit der Klassenkarte. Dann müssen wir mit der Funktion translate y transformieren. Und in diesem Fall müssen wir hier Null durchgeben. Außerdem verwenden wir Übergangswerte, alle 0,5 s. Wenn ich auf die Schaltfläche klicke, wird das Element schön angezeigt. Ich möchte hier einen kleinen Effekt hinzufügen. Ich werde die Skala des Textes auf Null reduzieren und sie dann auf 100% erhöhen, sobald wir auf die Schaltfläche klicken. Wir müssen also mit der Skalenfunktion transformieren. Es ermöglicht uns, die Größe der Elemente zu ändern. Machen wir es auf Null. Wählen Sie dann die Überschriftenelemente aus. Aber in diesem Fall mit Klassenwechsel. Verwenden Sie dann Transform. Mit der Skalenfunktion. Wir müssen den Wert der Skala eins heraufsetzen. Verwenden Sie dann erneut Transition. Geben Sie hier 0,5 s ein. Okay? Sobald wir auf die Schaltfläche klicken, vergrößert sich die Skala der Überschrift. Richtig? Auf den ersten Blick scheint die Richtung der Transformation von rechts nach links zu verlaufen. Ich denke, es wäre besser, es zu ändern und von links nach rechts zu fahren. Dafür müssen wir die Eigenschaft Transform Origin verwenden und sie links machen. Jetzt finde ich, dass es besser aussieht. Lassen Sie uns weitermachen und die restlichen Elemente anzeigen. Ich bin in den sozialen Netzwerken. Wir müssen also wieder den Klassenwechsel nutzen, gefolgt von der sozialen Klasse. Um Elemente also nach unten zu verschieben, mussten wir sie mit der Translate-Y-Funktion und einem Wert von Null transformieren . Und um die Elemente anzuzeigen, benötigen wir Opazität eins und Sichtbarkeit sichtbar Danach mussten wir Transition verwenden, allerdings mit unterschiedlicher Verzögerungszeit für jede Box. Wählen wir die dem Übergang zugewiesene E-Mail mit den Werten 0,5 s und der Verzögerungszeit 0,3 s Duplizieren wir diesen Code zweimal. Die zweite wird F B mit einer Verzögerungszeit von 0,5 s sein . Und dann benötigen wir für LinkedIn eine Verzögerungszeit von 0,7 s. In Ordnung, wie Sie sehen können, funktioniert bisher alles einwandfrei Das einzige, was Sie tun müssen, ist sich um den Knopf zu kümmern. Wir müssen ein paar Dinge tun. Standardmäßig müssen wir den Text anzeigen, kontaktieren Sie mich. Sobald wir auf die Schaltfläche klicken, sollte sie zur eckigen Klammer wechseln. Außerdem müssen wir die Breite der Schaltfläche und den Randradius ändern . Lassen Sie uns also zunächst den Inhalt zentrieren. Ich meine, beide Elemente sind perfekt im Button. Wir müssen eine Karte auswählen, Btn Conduct. Und dann das Font Awesome-Symbol, wir benötigen die Karte VT und I. Lassen Sie uns zunächst die Breite zu hundert Prozent festlegen. Dann ändere die Position, mache ein absolutes Maximum. Wir müssen die Immobilien oben und links anordnen, zwar jeweils zu 50 Prozent. Und schließlich müssen wir die Funktion Transform Translate verwenden. Wir haben hier zwei Teile, zweimal -50%. Diese Technik wird also verwendet, um das Element perfekt an das Element zu senden. Okay, der Inhalt ist also zentriert. Jetzt müssen wir die eckige Klammer standardmäßig ausblenden. Wählen wir das Element aus und weisen ihm die Opazität Null und die versteckte Sichtbarkeit Sobald wir also auf die Schaltfläche klicken, müssen wir die Steuernummer „Kontaktiere mich“ ausblenden und die eckige Klammer anzeigen. In diesem Fall müssen wir also Class Change verwenden gefolgt von der Klassenkarte btn contact benötigen wir Opazität Null Sichtbarkeit versteckt. Um die Klammern anzuzeigen. Wir brauchen wieder einen Klassenwechsel, gefolgt vom I-Element. Und in diesem Fall benötigen wir Opazität mit dem Wert eins und dann sichtbare Sichtbarkeit In Ordnung, wie Sie sehen können, funktioniert alles einwandfrei. Jetzt müssen wir uns um die Form des Knopfes kümmern. Wenn wir darauf klicken, müssen wir die Breite der Schaltfläche verringern. Wählen wir also einen Button mit dem Klassenwechsel. Ich werde es mit sechs RAM machen. Dann ändere die richtige Position. Machen wir es aus drei RAM. Außerdem werde ich die untere Position leicht ändern und es minus drei RAM machen. Und schließlich verwenden Sie border-radius mit dem Wert 50 Prozent. Wenn wir also auf die Schaltfläche klicken, ändert sie ihre Form. In Ordnung, als Gas funktioniert alles einwandfrei. Das einzige, was wir tun müssen, ist die Übergangseffekte hinzuzufügen. Lass uns weitermachen und mit dem Button beginnen. Ich werde eine Transition mit dem Wert 0 und der Dauer 0,5 s zuweisen . Als Nächstes müssen wir der Karte btn conduct einen Übergang hinzufügen Fügen wir hier alle 0,5 s und die geringe Verzögerungszeit 0,1 s ein. Als Nächstes müssen wir wieder zum kartengeschriebenen Vertrag übergehen , aber mit der Wechselklasse lassen wir Ihnen alle 0,1 s übergeben. Und schließlich verwenden wir Transition mit dem I-Element. Ich meine, ich element mit dem Richtungswechsel der Klasse 2,5 s. In Ordnung, also wie Sie sehen können, funktioniert alles perfekt und eigentlich sind wir mit diesem kleinen Projekt fertig 17. Projekt 14 - CSS-Gitter Menü: In diesem Video erstellen wir eine einfache Landingpage mit einem CSS-Grid-Menü. Das Projekt wird auf der Grundlage von Technologen erstellt. Wir werden HTML, CSS und ein bisschen JavaScript verwenden . In Ordnung, lassen Sie uns zunächst das Projekt beschreiben. Es besteht aus zwei Hauptteilen. Die erste wird eine einfache Landingpage sein. Ich habe hier nicht viele Elemente eingefügt, da der Schwerpunkt des Projekts auf dem CSS-Grid-Layout liegen wird. Wir haben hier das Banner mit einigen Texten und dem Vollbild-Hintergrundbild In der oberen linken Ecke befindet sich ein Menüsymbol. Wenn ich darauf klicke, werden diese Zeilen der Reihe nach nach rechts verschoben. Das Rastermenü wird mit einigen netten Effekten angezeigt. Wir haben hier ein paar Menüpunkte, die gut aufeinander abgestimmt sind. Ebenfalls in der oberen linken Ecke sehen wir den X-Schließknopf. Wenn ich darauf klicke, wird das Menü geschlossen. Das Projekt wird auf verschiedene Bildschirmgrößen reagieren. Wenn ich mir die Seite ansehe und sie auf kleineren Bildschirmen überprüfe, werden Sie feststellen, dass sie responsiv ist und gut aussieht. Eines ist hier zu beachten: Wir werden den Desktop-First-Ansatz verwenden. Wir werden das Projekt für eine größere Bildschirmgröße erstellen, an der ich teilnehme. Dies entspricht der Breite von 1920 Pixeln Höhe von 1080 Pixeln Wenn Sie beim Erstellen dieses Projekts diese kleinere Bildschirmgröße verwenden , sieht es möglicherweise nicht gut aus. Aber keine Sorge, am Ende des Tages werden wir dafür sorgen, dass es auf verschiedene Bildschirmgrößen reagiert. In der Zwischenzeit können Sie Entwicklertools verwenden. Ich bin im Responsive-Modus und gebe die Breite 1920 Pixeln und die Höhe mit 108 Wochen an. Ich denke, wir sind bereit zu gehen. Ich habe auf dem Desktop einen neuen Ordner namens CSS Grid Menu erstellt , in dem Sie einen weiteren Ordner für die Bilder finden. Sie können die Quellteile den Link in der Beschreibung herunterladen. Ich werde diesen Ordner in VS Code öffnen. Dann lass uns weitermachen und drei verschiedene Dateien für HTML erstellen . Ich nenne es index.html. Dann brauchen wir style.css. Und sie fallen auf JavaScript rein, script.js. Gleich danach erstellen wir das grundlegende HTML-Dokument in der Datei index.html. Dafür werde ich Emmet verwenden. Wir müssen ein Ausrufezeichen platzieren und dann die Eingabetaste oder die Tabulatortaste drücken Also los geht's. Lass uns weitermachen und den Titel ändern. Ich werde hier das CSS-Grid-Menü einfügen. Dann erstelle ich Links für die CSS- und JavaScript-Dateien. Öffnen wir das Link-Tag und geben Sie hier den Pfad der Datei an. Wir benötigen den Namen der Datei style.css als öffentliche JavaScript-Datei. Ich öffne den Script-Tag. dann im Quellattribut Geben wir dann im Quellattribut den Namen der Datei an. In Ordnung, also sind alle drei Dateien miteinander verbunden. Als Nächstes werde ich ein paar Google-Schriftarten hinzufügen. In diesem Tutorial werden wir zwei verschiedene Schriftarten verwenden. Lassen Sie uns weitermachen und die Google Fonts-Website besuchen. Ich gebe hier Google Fonts ein. Also hier ist die Website von Google Fonts. Ich suche nach einem Tanzskript. Also hier ist es. Danach suchen wir nach Josephine Slab. Ich werde diese Schrift anpassen, da wir dieses Telefon mit unterschiedlicher Schriftstärke verwenden werden. Schauen wir also hier nach. Ein paar Kisten. Okay, lassen Sie uns zum Schluss den Link nehmen und ihn in das Hauptelement einfügen. In Ordnung, wir sind fast bereit, mit dem Codieren zu beginnen. Schließlich möchte ich das Projekt im Browser ausführen. Verwenden wir dazu eines der Views-Codepakete namens Live Server. Es ermöglicht uns, den Projektverlauf im Browser auszuführen und Aktualisierungen vorzunehmen , ohne die Seite jedes Mal aktualisieren zu müssen. Daher empfehle ich, dieses Paket zu installieren und zu verwenden. Okay, platzieren wir den Editor und den Browser. So wie. Und fang an. Also werde ich zuerst das HTML-Markup für das gesamte Projekt erstellen , und dann werden wir anfangen, CSS und JavaScript zu schreiben Lassen Sie uns weitermachen und das Markup für den ersten Teil des Projekts erstellen , die Landung sein wird Öffnen wir das Div-Tag. Es wird den gesamten Inhalt der Projekte umfassen. Ich gebe ihm einen Klassencontainer. Dann füge ich in den Behälter das Hamburger-Menüsymbol ein. Es wird unter Verwendung der Entwicklungen gebaut. Lassen Sie uns also die Entwicklung öffnen und der Klasse das Hamburger-Menü zuweisen. Das Menüsymbol wird aus zwei Teilen bestehen. Die erste wird die Hamburger-Ikone sein. Was den zweiten Teil betrifft, so wird es der X-Schließknopf sein. Lassen Sie uns zunächst ein div-Element mit Klassenzeilen öffnen Es umschließt alle drei Zeilen. Ich bin im ersten Teil des Symbols. Fügen wir hier also drei div-Elemente mit ein paar Klassen ein. Ich meine Zeile und Zeile eins. Dann werde ich diese Codezeile zweimal duplizieren und die Klassennamen mit Zeile zwei und Zeile drei ändern. Als Nächstes öffne ich ein weiteres Div, das ein Wrapper der Zeilen mit den abschließenden X-Schaltflächen sein wird Ich möchte ihm eine Klasse X geben. Danach fügen wir hier das Div-Element mit Klassen x line und x line one ein. Dann duplizieren Sie es und ändern Sie den Klassennamen. In Ordnung, das war's also mit dem Hamburger-Menü. Als Nächstes kümmere ich mich um den Header. Öffnen wir es und weisen es dem Klassenheader zu. Als nächstes brauchen wir das Banner. Also lasst uns hier eine neue Entwicklung mit dem Klassenbanner einfügen . Das Banner wird aus zwei verschiedenen Elementen bestehen. Die erste wird die Überschrift sein. Was den zweiten betrifft , so sollte es der erste Absatz sein. Fügen wir hier H1 ein und fügen Sie hier etwas Text ein Dies ist eine Landingpage. Als Nächstes benötigen wir einen Absatz mit einem, eigentlich füge ich hier den Text mit einem CSS-Grid-Menü ein, aber ich möchte einige verschiedene Stile für das CSS-Grid verwenden. Lassen Sie uns daher diese beiden Wörter mit Span-Elementen umschließen und dann Menü schreiben. In Ordnung, schauen wir uns den ersten Teil des Markups an. Lassen Sie uns weitermachen und das Navigationsmenü erstellen. Ich öffne die Navigationselemente , die der Klassennavigation zugewiesen sind. Das Navigationsmenü wird also durch eine Liste dargestellt. Ich werde ihm ein Klassennavigationsmenü geben. In diese Listenelemente werde ich ein paar Listenelemente einfügen. Öffnen wir LI-Elemente. Es sollte einen Klassennavigationsmenüpunkt haben. Dann enthält das Listenelement ein Link-Element mit dem Link zum Klassennavigationsmenü. Als ersten Navigationspunkt füge ich also Ihr Zuhause ein. Insgesamt wird es 11 Artikel geben. Deshalb werde ich ein Lichtelement zehnmal duplizieren . Und dann werde ich schnell die Artikel ändern. Der zweite wird sich mit dem Thema befassen. Dann werden wir Projekte haben. Blog. Als nächstes wird die Galerie sein. Es wird auch Portfoliopreise als Veranstaltungen geben. Kunden. Als nächstes werden Angebote folgen. Und zum Schluss werde ich hier Kontakte eintragen. Okay, das war's mit dem HTML-Markup. Alle Elemente sind erstellt und jetzt sind wir bereit, sie zu stylen. Gehen wir zur Datei style.css. Zuallererst werde ich einige Reset-Stile erstellen. Ich möchte den Standardrand und den Abstand von jedem Element entfernen Standardrand und den Abstand von jedem Element Um jedes Element auszuwählen, müssen wir ein Sternchen verwenden Und dann setze ich beide auf Null, um den standardmäßigen Rand und den Abstand zu entfernen ich beide auf Null, um den standardmäßigen Rand und den Abstand zu In Ordnung? In diesem Tutorial werde ich also RAM als Maßeinheit verwenden. Standard, 1 g entspricht 16 Pixeln, da die Schriftgröße des HTML-Elements 16 Pixeln entspricht. Ich möchte ein RAM in zehn Pixel umwandeln , weil ich denke, dass es bequemer zu verwenden und zu berechnen wäre . Also müssen wir die Schriftgröße des HTML-Elements verringern und wir müssen sie auf 62,5 Prozent erhöhen In diesem Fall sollte eine Rampe zehn Pixeln entsprechen. Im Moment hat sich die Größe der Elemente verringert und sie sind kleiner geworden. In Ordnung, lassen Sie uns weitermachen und uns um den Header kümmern. Ich möchte, dass es den gesamten Viewport einnimmt. Wählen wir es also aus und definieren wir seine Breite und Höhe. Der folgende Weg. Ich mache es mit 100%. Was die Höhe angeht, werde ich sie auf hundert Viewport-Höhe festlegen Das bedeutet, dass es 100 Prozent des gesamten Viewports einnimmt 100 Prozent des gesamten Viewports Danach legen wir das Bild als Vollbild-Hintergrund Zuallererst werde ich einen linearen Gradienten verwenden. Und ich werde hier drei verschiedene RGBA-Werte angeben. Der erste wird 884.170,7 sein. Die Opazität. Als Nächstes verwende ich 1887190 und Opazität Was die dritte Farbe angeht, verwenden wir hier die schwarze Farbe. Wir brauchen das 0,3-fache und die Opazität 0,2. Danach geben wir die URL an. Ich meine den Teil des Bildes. Wir haben einen Ordner namens Images und müssen PG dot JPG auswählen. Als nächstes brauchen wir Center und auch keine Wiederholung. Und zum Schluss erstellen wir das Cover in Hintergrundgröße. Okay, der Hintergrund ist bereit für den Header und als nächstes kommt das Banner. Ich möchte es in den Mittelpunkt der Kreditvergabe stellen. Dafür können wir ein paar Möglichkeiten nutzen. Aber für mich ist Flexbox die beste. Wir müssen dem Header-Element einige Flexbox-Eigenschaften zuweisen Header-Element einige Flexbox-Eigenschaften zuweisen Der erste wird Display Flex sein, weil wir einen Header-Flex-Container erstellen müssen. Als nächstes müssen wir die Richtung ändern. Wir müssen daraus eine Kolumne machen. Um die Elemente dann im Container zu zentrieren, müssen wir die Inhaltsmitte und die Artikel mittig ausrichten. In Ordnung, das Banner ist also zentriert. Jetzt müssen wir die Überschrift und den Absatz anpassen. Lass uns weitermachen und mit der Überschrift beginnen. Wählen wir es aus. Zuallererst werde ich die Schriftfamilie ändern. Verwenden wir hier eines der Google Fonts-Tanzskripte. Als nächstes brauchen wir Zwang. Dann werde ich die Schriftgröße erhöhen. Machen wir acht RAM draus. Ändern Sie auch die Schriftstärke. Mach 400 draus. ändere ich die Farbe. Machen wir es z. B. z. mit einem Buchstabenabstand von 0,5 rem Abstand zwischen den Buchstaben . Außerdem werde ich mit Margin, Bottom Three rem, etwas Platz am unteren Rand des Elements schaffen . Lassen Sie uns abschließend Text Shadow mit den Werten 0,2, 0,4 RAM verwenden . Und die schwarze Farbe RGB a, drei Nullen und die Opazität 0,3 In Ordnung, die Überschrift sieht also ziemlich gut aus. Gehen wir zum Absatz über. Lassen Sie uns weitermachen und dieses Element auswählen. Ich werde seine Schriftfamilie erstellen. Wieder Tanzschrift, kursiv. Erhöhen Sie als Nächstes die Schriftgröße und machen Sie sie für RAM. Ändere auch die Farbe. Mach es e. Ich werde Platz zwischen den Buchstaben schaffen. Aber lassen Sie uns in diesem Fall auf RAM hinweisen. Und schließlich verwende wieder Text Shadow. Eigentlich hole ich mir diese Codezeile von hier und füge sie für den Absatz ein. Ordnung, als Nächstes möchte ich den Absatz auf der rechten Seite platzieren Dafür können wir Text-Align verwenden, oder? Denken Sie daran, dass wir das CSS-Grid der Wörter mit einem Span-Element umwickelt haben, da wir für diese beiden Wörter einen anderen Stil benötigen. Also lasst uns weitermachen und es anwenden. Ich wähle das Span-Element aus. Lassen Sie uns die Schriftfamilie auf Josephine Slab Serif setzen. Erhöhen Sie dann die Schriftgröße, machen Sie fünf Rem daraus. Ändere die Schriftstärke, mache sie auf 700. Und schließlich transformieren Sie Text in Großbuchstaben. Ordnung, endlich sind wir mit dem Absatz fertig und tatsächlich haben wir die Arbeit am Banner abgeschlossen Als Nächstes ist es an der Zeit, das Menüsymbol anzupassen. Ich bin im ersten Teil, der aus drei weißen Linien besteht. Lassen Sie uns weitermachen und die rasanten Entwicklungen auswählen, die ein erstklassiges Hamburger-Menü bieten. Zuallererst werde ich es sichtbar machen. Also müssen wir die Breite und Höhe definieren. Machen wir beide zu einer 3,5-Grad-Rampe. Und ich werde ihm auch eine temporäre Hintergrundfarbe zuweisen . Lass es uns rot machen. Im Moment befindet sich das Symbol in der oberen linken Ecke der Kreditvergabe. Das ist keine ganz richtige Position. Lassen Sie uns also die Position des Symbols definieren und es fixieren. Außerdem werde ich die obere und linke Position angeben. Ich werde beide zu 3,5 rem machen Ordnung, also jetzt ist das Symbol richtig positioniert Schließlich möchte ich den Typ des Cursors ändern und ihn zeigen lassen. Okay, als Nächstes zeige ich die Linien an. Wählen wir zunächst die Wrapper-Entwicklung aus, die die Klassennamenzeilen enthält, und geben ihr ein paar Kacheln Ich setze Breite und Höhe, beide auf 100%. In diesem Fall erbt das Element die Breite und Höhe seines übergeordneten Elements, des Hamburger-Menüs Und jetzt kümmern wir uns um die Leitungen. Wählen Sie sie mit einer gemeinsamen Klassennamenzeile aus. Ich werde mit 100 Prozent anfangen. Was die Höhe angeht. Machen wir es auf RAM aufmerksam. Ändern Sie auch die Hintergrundfarbe. Mach es weiß. Außerdem werde ich die Ecken der Linien leicht abgerundet machen . Verwenden wir dazu den Border-Radius mit dem Wertepunkt, der ausgeführt werden soll Ordnung, jetzt sind die Linien sichtbar, aber wie Sie erraten haben, müssen wir uns um ihre Position kümmern Dafür werde ich wieder Flexbooks verwenden. Ordnen wir also den Linien zu. Flex anzeigen. Weiter. Wir müssen die Richtung ändern. Ich mache daraus eine Kolumne. Als nächstes müssen wir etwas Abstand zwischen den Linien schaffen. Und dafür müssen wir den Content mit dem Wertebereich gleichmäßig begründen . Und schließlich müssen wir die Elemente in der Mitte ausrichten. Okay? Im Moment sind die Linien also richtig positioniert. Wenn wir den roten Hintergrund entfernen, werden Sie sie besser sehen. Ordnung, eigentlich sind wir mit dem ersten Teil des Projekts fertig Der Header ist gestylt, er sieht ziemlich gut aus. Jetzt müssen wir zur Navigation übergehen . Ich werde das Navigationsmenü entwerfen und danach werde ich dafür sorgen, dass es funktioniert. Um fortzufahren, werde ich den Header und die Zeilen für eine Weile ausblenden und dann mit der Navigation beginnen Lassen Sie uns weitermachen und der Kopfzeile und der Zeilenanzeige zuweisen . Nicht. In Ordnung, hier haben wir nur eine Navigationsliste. Lassen Sie uns anfangen, die Navigation anzupassen. Ich werde genügend Elemente auswählen. Lassen Sie uns zunächst die Breite und Höhe festlegen. Beide zu 200 Prozent. Und ich werde die Hintergrundfarbe ändern. Lassen Sie uns Ihre Farbe d, d, d verwenden . Im Moment beginnt die Navigation also in der oberen linken Ecke. Es passiert, weil der Header für eine Weile versteckt ist. Also möchte ich die aktuelle Position auch manuell definieren . Dafür brauchen wir absolute Position. Und dann setze die Eigenschaften oben und links, beide auf Null. Jetzt nimmt die Navigation die gesamte Breite und Höhe der Seite ein. Ich denke, es ist an der Zeit, die Artikel ein wenig zu personalisieren. Lassen Sie uns zunächst die LI-Elemente auswählen und die Standardaufzählungszeichen entfernen Moment sind diese Kugeln nicht sichtbar, weil wir den Abstand auf Null gesetzt haben Eigentlich, wenn ich es wieder einschalte, wirst du die Kugeln sehen Lass uns sie loswerden. Ich wähle LI-Elemente aus und das wird ihm zugewiesen, oder zumindest stilisiert es keines. Als Nächstes wähle ich die Link-Elemente aus. Lassen Sie uns zunächst die Standardeinstellung loswerden, die der Textdekoration zugrunde liegt, keine. Dann setze ich die Schriftfamilie auf Josephine Slab Serif Erhöhen Sie auch die Schriftgröße und machen Sie 2,5 RAM daraus. Ändern Sie dann die Schriftstärke. Ich werde es etwas mutiger machen. Benutze 700. Dann wandle Text in Großbuchstaben Und danach werde ich etwas Abstand zwischen den Buchstaben schaffen. Machen wir es uns zur Aufgabe, zu mieten. Okay. Die Artikel sehen also viel besser aus, aber ich werde ihnen noch ein paar Styles hinzufügen. Lassen Sie uns die Hintergrundfarbe ändern. In diesem Fall verwende ich Farbe bis fünf. Siehe C7. Dann machen wir den Text weiß. Und erstellen Sie auch die Ecken der Elemente um das Objekt herum, indem Sie Randradius mit dem Wert 0,5 Ordnung, das war's vorerst mit den Link-Elementen Als Nächstes müssen wir anfangen, das CSS-Grid zu verwenden Eigentlich werde ich das Projekt im Mozilla Firefox ausführen, weil es im Moment die besten Entwicklertools für das CSS-Grid hat besten Entwicklertools für das CSS-Grid Ich meine, es ist viel einfacher, im Mozilla Firefox zu arbeiten , wenn Sie sich mit dem CSS-Grid-Layout befassen Wenn wir den Mozilla Firefox nicht haben, empfehle ich, ihn herunterzuladen und zu installieren Schnappen wir uns die URL. Öffnen Sie dann den Browser und fügen Sie ihn hier ein. Wir haben hier also unser Projekt am Laufen. Ich werde die Seite überprüfen. Sie sehen hier also die Entwicklertools. Es ist den Google Chrome-Entwicklertools ziemlich ähnlich , aber Sie werden einige Unterschiede feststellen, wenn wir anfangen, das CSS-Grid zu verwenden, oder? Zuallererst werde ich den Nullelement-Greet-Container erstellen den Nullelement-Greet-Container Dafür müssen wir ihm ein Display-Grid zuweisen. Als Nächstes müssen wir die Spalten und Zeilen definieren. Bei den Navigationselementen werden wir drei Spalten und drei Zeilen haben. Wir müssen also Spalten für Rastervorlagen verwenden. Die erste Spaltengröße sollte RAM sein, dann benötigen wir eine Brucheinheit Und dann wieder zur Rampe. Was die Reihen angeht, brauchen wir, wie gesagt, drei davon. Die Größe der ersten Zeile sollte zehn RAM betragen. Dann wieder eine Brucheinheit. Und dann zu rennen. Also haben wir die Spalten und die Zeilen definiert. Und um sie besser zu sehen, werde ich dieses kleine Kästchen ankreuzen. Und ich werde auch die Zeilennummern anzeigen. Also los geht's. Jetzt ist unser Raster sichtbar. Leider in Google Chrome. Im Moment haben wir keine solche Gelegenheit. In Ordnung, lassen Sie mich erklären, was diese Spalten und Zeilen bedeuten. Diese kleinen Kolumnen werden dieses Tempo sein. In der ersten Reihe befindet sich dann der X-Schließknopf. Wie das Faltmenü selbst. Es wird hier in der Mitte platziert. Lassen Sie uns weitermachen und die Position des Nussmenüs definieren . Wählen wir es aus. Und dann definiere die Rasterspalte mit den Zeilennummern 2.3 und der Rasterzeile. Die Zeilennummern 2.3. Nochmals. Wie Sie sehen, ist das Menü korrekt in der zweiten Spalte platziert, und jetzt ist es an der Zeit, die entsprechenden Elemente zu platzieren. Zuallererst müssen wir genug Menü erstellen, einen Rastercontainer, es zeigt ein Raster an. Und danach müssen wir die Spalten und die Zeilen definieren . Verwenden wir also die Spalten der Rastervorlage. Insgesamt werde ich 12 Spalten erstellen. Verwenden wir die Wiederholungsfunktion. Geben Sie dann die Anzahl der Spalten 12 und diese Größe, eine Brucheinheit Danach definieren wir die Zeilen der Rastervorlage. Verwenden Sie die Wiederholungsfunktion. Wir werden vier Reihen haben, von denen jede einer Brucheinheit entspricht Und außerdem werde ich auch den Abstand zwischen den Rasterzellen erstellen, auch den Abstand zwischen den Rasterzellen erstellen indem ich die Rasterlücke verwende, die der Rampe entspricht. Ordnung, also lassen Sie uns zunächst die Rasterlinien des Navigationsmenüs anzeigen Wie Sie sehen, haben wir 12 Spalten und vier Zeilen. Im Moment ist das Layout etwas durcheinander, aber wir werden uns bald darum kümmern Bevor wir anfangen, die einzelnen Artikel zu positionieren , möchte ich noch einmal Flexbox verwenden Mithilfe einiger Flexbox-Eigenschaften werden wir die Elemente in den Zellen gestreckt und der Inhalt jedes Elements wird zentriert Also müssen wir Display Flex verwenden. Dann begründen Sie das Inhaltszentrum. Außerdem müssen wir die Artikel in der Mitte ausrichten. Und ich werde die Körpergröße auf 100% erhöhen. Okay, jetzt sehen die Artikel besser aus und befinden sich in der Standardposition als einzeln. Um es auszuwählen, verwende ich den n-ten Child-Selektor. Wir benötigen also einen Navigationsmenüpunkt gefolgt vom n-ten Child-Selektor. Und wir müssen hier die Nummer des Artikels angeben . Und wir haben gewonnen. Die ersten Elemente sollten in den ersten beiden Zeilen platziert werden und sie sollten die ersten drei Spalten einnehmen. Wir brauchen also eine Rasterspalte mit den Zeilennummern 1.4 und eine Quitt-Rolle mit den Zeilennummern 1.3. Der erste Punkt ist also die Position. Gehen wir zum zweiten über. Eigentlich werde ich diesen Code kopieren und dann die Nummer ändern, die wir benötigen. Das zweite Element wird ebenfalls in den ersten beiden Zeilen, den Spalten, platziert . Es wird zwischen der vierten und siebten Zeilennummer platziert . Wir benötigen also die Rasterspalte 4.7 und die Rasterzeile Die Zeilennummern 1.3. Lassen wir es also so wie es ist. Das war's mit dem zweiten Punkt. Lassen Sie uns weitermachen und zum nächsten Punkt übergehen , der drei sein wird. Das dritte Objekt wird also in der ersten Reihe positioniert. Was die Spalten betrifft, so werden sie von der siebten Zeilennummer bis zum Ende des Rastercontainers platziert der siebten Zeilennummer . Wir brauchen also eine Rasterspalte mit einer Zeile Nummer sieben und minus eins. Laut der Rasterzeile wird es 1.2 sein. Wie Sie sehen, ist der dritte Gegenstand ebenfalls korrekt platziert. Als nächstes folgt der vierte Punkt. Ich werde es in die zweite Reihe stellen. Und es wird zwei Spalten einnehmen, die Spalten zwischen der siebten und neunten Zeilennummer. Wir brauchen also die Rasterspalte 79. Was die Rasterzeile betrifft, so wird es 2,3 sein. In Ordnung? Als nächstes haben wir den fünften Artikel. Es wird in die zweite Reihe gestellt. Was die Spalten angeht, werde ich sie zwischen der neunten und elften Zeilennummer platzieren . Ändern wir hier also die Werte, die wir hier benötigen, Rasterspalte 911 und Rasterzeile 2.3. Okay, also Schritt für Schritt gehen wir voran und erstellen das Rasterlayout. Gehen wir zum nächsten Tagesordnungspunkt über , der der sechste sein wird. Es sollte also wieder in die zweite Reihe gestellt werden. Was die Spalten betrifft, so nimmt sie am Ende des Rastercontainers zwei Spalten ein. Wir brauchen also die Spalte mit den Zeilennummern 11, n minus eins. Keine Rasterzeile. Wieder mit den Zeilennummern 2.3. In Ordnung, das ist es. Über den sechsten Artikel. Als nächstes kommt dasselbe auf einmal. Das siebte Objekt wird also in die dritte Reihe gestellt und nimmt vom Anfang des Flüssigkeitsbehälters an sechs Spalten ein. Wir benötigen eine Rasterspalte mit den Zeilennummern 1,7. Was die Rasterzeile betrifft, sollte sie 3,4 sein. Okay, das war's mit dem siebten Punkt. Fahren wir mit dem nächsten fort, dem Gegenstand. Es wird also wieder in die dritte Reihe gestellt. Was die Spalten angeht, möchte ich sie von der Zeile Nummer sieben bis zum Ende des Containers platzieren der Zeile Nummer sieben . Wir brauchen also eine Rasterspalte mit der Zeilennummer sieben minus eins und die Rasterzeile drei minus eins. Okay? Es sind also nur noch drei Artikel übrig. Lassen Sie uns weitermachen und ihre Positionen schnell definieren. Ich weiß, dass dieser Prozess ein bisschen langweilig ist, aber so funktioniert das CSS-Grid. Gehen wir zum neunten Punkt über. Das neunte Objekt wird also in die letzte Reihe gestellt und dann das vierte. Was die Spalten angeht, werde ich sie zwischen der ersten und dritten Zeilennummer platzieren der ersten und dritten Zeilennummer , sodass sie die ersten beiden Spalten einnimmt. Wir benötigen die Rasterspalte 1.3. Für die Rasterreihe benötigen wir vier und minus eins. In Ordnung, als nächstes haben wir den 10. Artikel. Es wird wieder in die vierte Reihe gestellt. Und es sollte zwei Spalten von Zeile Nummer drei bis Zeile Nummer fünf einnehmen . Also brauchen wir die Rasterspalte 3.5 und beenden die Rolle wieder, vier und minus eins. In Ordnung, endlich der letzte Artikel-Semm. Ich werde es sowohl in der letzten Reihe als auch für die Spalten platzieren . Es wird zwischen Zeile Nummer fünf und Zeile Nummer sieben platziert . Wir brauchen also die Rasterspalte 5.7. Raster erneut für n minus eins. In Ordnung, das war's also mit dem Navigationsmenü. Es ist gut positioniert, es sieht ziemlich gut aus. Und jetzt ist es an der Zeit, weiterzumachen und sich um die anderen Dinge zu kümmern. Ich denke, wir können zurück zu Google Chrome wechseln , da wir die Hilfe der Rasterzeilennummern nicht mehr benötigen . Sobald wir mit dem Layout des Navigationsmenüs fertig sind , werde ich weitermachen und mich um das Schließen von X kümmern. Aber lassen Sie uns zunächst die Linien anzeigen. Dafür müssen wir die X-Linie auswählen. Definieren wir Breite und Höhe. Ich werde die Breite auf 3,5 ran setzen die Höhe angeht, lassen Sie uns darauf hinweisen, dass es sich um RAM handelt. Dann ändere die Hintergrundfarbe. Lassen Sie uns Ihre Farbe verwenden, 307bd F. Und außerdem werde ich den Grenzradius mit einem Wertpunkt zum Mieten verwenden mit einem Wertpunkt zum Im Moment sind die Linien also nicht sichtbar, weil sie hinter der Navigation gelandet sind. Um sie anzuzeigen, müssen wir eine dieser CSS-Eigenschaften verwenden, die als Z-Index bezeichnet wird. Und wir müssen es dem Hamburger-Menü selbst zuordnen , weil der untere Teil davon ist. Also setzen wir den Index auf, sagen wir, 100. Wie Sie sehen können, werden die Linien jetzt angezeigt. Sie haben nicht die Form von x und darum müssen wir uns kümmern. Damit sie also wie x aussehen, verwende ich CSS-Transformationen, und dann drehen und übersetzen sie Funktionen Also lass uns weitermachen und x-Zeile eins auswählen. Verwenden Sie dann Transformieren mit der Rotationsfunktion. Ich drehe die Linie um -45 Grad. Dann duplizieren wir diesen Code und ändern den Klassennamen. Wir brauchen X-Zeile zwei und entfernen von hier aus auch das Minuszeichen. Okay? Moment haben wir also nicht das perfekte x. Wir müssen die Funktion Translate verwenden. Darüber hinaus können wir das Element entweder horizontal oder vertikal entsprechend der X- und Y-Achse bewegen horizontal oder vertikal entsprechend der X- und Y-Achse In diesem Fall müssen wir also y mit dem Wert 0,3 RAM S4 übersetzen In der zweiten Zeile müssen wir wieder Y übersetzen, aber bei negativen Punkten drei Rampen. Jetzt haben wir das perfekte x. Das einzige, was ich tun werde, ist, den Knopf leicht nach unten zu bewegen. Wir können das auf verschiedene Arten tun. In diesem Fall werde ich Positionen verwenden. Ich möchte es perfekt in die Mitte des Hamburgermenüs stellen. Also lass uns weitermachen und x BTN auswählen. Definieren Sie dann die Eigenschaften Position, Absolut, Set, Oben und Links, jeweils auf 50%. Verwenden Sie dann transform translate. -50 Prozent. Dann wieder -50 Prozent. Tatsächlich wird diese Technik verwendet, um das Element im Behälter perfekt zu zentrieren. In Ordnung. Das war's also mit der X-Schließtaste. Jetzt ist es an der Zeit, das Hamburger-Menü zum Laufen zu bringen. Zuallererst werde ich es wieder bei der Ausleihe anzeigen und das Navigationsmenü ausblenden. Also lasst uns weitermachen und das Display loswerden, von hier aus keins. Außerdem werde ich das Menüsymbol anzeigen. Dann lass uns weitermachen und die Navigation ausblenden. In diesem Fall mache ich das mit Opazität, dem Wert Null und der ausgeblendeten Sichtbarkeit Außerdem benötigen wir die gleichen Eigenschaften auch für den X-Button, weil wir ihn verstecken müssen. Verwenden wir sie also für X BTN. Ordnung, also ist alles bereit, damit das Hamburger-Menü funktioniert Als erstes müssen wir das Klick-Event erstellen. Dafür verwende ich JavaScript. Öffnen wir die Datei script.js und wählen Sie dann das Hamburger-Menü aus. Ich werde das mit der Abfrageauswahlmethode tun. Wir müssen es an das Dokument anhängen und dann in den Klammern den Klassennamen angeben, in diesem Fall das Hamburger-Menü Als nächstes müssen wir einen Event-Listener daran anhängen. Dafür müssen wir eine Methode namens Add Event Listener verwenden namens Add Event Listener Es braucht zwei Argumente. Die erste wird die Art der Veranstaltung sein. Wie gesagt, wir werden Click Event verwenden. Lassen Sie es uns hier also teilweise als zweites Argument weitergeben. Es sollte die Funktion sein, die dann ausgeführt wird , sobald wir auf das Element klicken. In diesem Fall verwende ich eine Pfeilfunktion. Ordnung, jetzt müssen wir hier den Codeblock übergeben , den wir ausführen müssen, sobald wir auf die Symbole klicken und das Ereignis ausgelöst Lassen Sie mich erklären, was wir tun werden. Ich werde eine neue Klasse und ein neues CSS namens Change erstellen. Wir werden diese Klasse onclick zum Container hinzufügen. Genauer gesagt verwenden wir die Toggle-Methode, was bedeutet, dass wir die Klasse zum Container hinzufügen , falls sie nicht vorhanden ist Und wir werden die Klasse entfernen. Wenn der Container zur Gewohnheit wird Mit der Umschaltmethode können wir vermeiden, zwei verschiedene Methoden am und aus der Ferne zu verwenden Sie fragen sich vielleicht, warum wir die Klasse zum Container hinzufügen und nicht das Hamburger-Menü? Der Grund dafür ist, dass wir, sobald der Container die Klasse hat , sie für alle seine Nachkommen verwenden können. In Ordnung, lassen Sie uns weitermachen und den Container auswählen. Ich werde erneut die Abfrageauswahlmethode verwenden. Dann geben Sie hier den ClassName-Container an. Als Nächstes verwende ich eine der Eigenschaften namens Klassenliste. Es gibt uns tatsächlich alle Klassen, die das Element hat. Danach müssen wir zu dieser Eigenschaft hinzufügen , sie schalten die Methode Und in der Klammer geben wir den Klassennamen an , den wir erstellen werden Veränderung. Okay, das war's mit dem JavaScript. Jetzt müssen wir eine Klassenänderung in der CSS-Datei erstellen. Sobald wir also auf das Symbol klicken, müssen wir die Kopfzeile ausblenden , die Navigation anzeigen und auch das X beim Schließen anzeigen, aber das sind wahrscheinlich die Zeilen des Menüsymbols. Ich werde sie nicht verstecken, nur weil wir einen anderen Effekt erzielen werden. In Ordnung, also verstecken wir den Header. Wir brauchen einen Klassenwechsel, gefolgt vom Klassenheader. Wenn diese Auswahl also gültig ist, müssen wir die folgenden Stile anwenden. Wir brauchen Opazität Null und versteckte Sichtbarkeit. Lassen Sie uns als Nächstes die Navigation anzeigen. Verwenden Sie erneut die Änderung mit der Navigation. Und in diesem Fall benötigen wir Opazität mit dem Wert eins und Sichtbarkeit sichtbar Außerdem müssen wir auch die X-Taste anzeigen. Verwenden wir also Change, gefolgt von der Klasse x BTN. Und verwende hier Opazität eins und Sichtbarkeit sichtbar. Ordnung, wenn ich also auf das Symbol klicke, wird die Kopfzeile ausgeblendet und das Klopfmenü und die X-Taste erscheinen Bisher funktioniert alles einwandfrei. Jetzt werde ich unserem Projekt einige nette Effekte hinzufügen. Ich möchte den Header ausblenden und die Navigation mit einigen Fade-Effekten anzeigen. Wir werden sie mithilfe von CSS-Übergängen erstellen. Also werde ich den Header-Übergangswerten all und 0,5 s zuweisen , was einer Dauer entspricht. Wir benötigen dasselbe für die Navigation, müssen aber beim Klassenwechsel die Übergangseigenschaft verwenden . Wenn ich also auf das Symbol klicke, der Navigation mit einem Fade-Effekt angezeigt wird, und dasselbe passiert beim nächsten Klick, erscheint die Kreditvergabe mit Fake. Richtig? Als Nächstes kümmere ich mich um die Navigationselemente. Schauen wir uns das fertige Projekt an. Wie gesagt, die Artikel erscheinen von links nach rechts. Also müssen wir sie bewegen und sie auf der linken Seite platzieren. Und dann müssen wir die Elemente onClick auf die rechte Seite verschieben onClick auf die rechte Seite Also werde ich Transform mit der Übersetzungsfunktion verwenden . In diesem Fall müssen wir x übersetzen, weil wir das Objekt entsprechend der X-Achse verschieben müssen Fügen wir hier minus hundert Prozent Im Moment ist das Layout durcheinander geraten, aber das ist kein Problem, da wir die Elemente standardmäßig ausblenden. Dafür. Ich werde eine dieser CSS-Eigenschaften namens overflow hidden verwenden namens overflow hidden Und wir müssen es dem LI-Element zuweisen. Wie Sie sehen, sind die Artikel nicht vollständig versteckt. Wir sehen ihre Ränder. Lassen Sie uns den Wert der Übersetzungsfunktion erhöhen. Ich werde es zu 105 Prozent schaffen. In Ordnung, jetzt ist es besser. Wir müssen die Elemente anzeigen, sobald wir auf das Menüsymbol klicken. Aber um diesen Effekt schöner zu machen, müssen wir auch einige Verzögerungszeiten definieren Um die Navigationselemente wieder anzuzeigen , benötigen wir einen Klassenwechsel, gefolgt von dem Link, ich meine den Link zum Navigationsmenü. Dann müssen wir mit der Funktion translate x transformieren. Und in diesem Fall müssen wir hier Null passieren. Außerdem verwende ich die Übergangstransformation als die Dauer 0,7 s. Verzögerungszeit 1 s. In Ordnung, also wie Sie sehen, also wie Sie sehen, haben wir hier einen schönen coolen Effekt Im Moment funktioniert alles ganz gut. Jetzt nehme ich hier die Icons. Ich meine das Menüsymbol auf der Landung und die Acts beim Schließen. Aber was ich tun werde , ist, dass ich die Linien des Symbols von links nach rechts verschiebe des Symbols von links nach rechts um mit der oberen zu beginnen. Um das zu tun, verwende ich wieder Transformation mit der Translate-Funktion und dann Transitions. Wir müssen also Klassenwechsel verwenden, gefolgt von der Klassenzeile, die wir transformieren müssen Nochmals die x-Funktion übersetzen und ich gebe hier 120 Prozent weiter. Okay? Jetzt müssen wir die Transition für alle drei Leitungen separat durchführen, da wir ihnen unterschiedliche Verzögerungszeiten zuweisen müssen. Fangen wir mit Zeile eins an. Verwenden Sie eine Übergangstransformation mit einer Dauer von 0,5 s und einem Verzögerungszeitpunkt von 1 s. Lassen Sie uns sie zweimal duplizieren dann die Klassennamen ändern. Und auch die Verzögerungszeiten. Wir benötigen 0,3 s für diese zweite Zeile und 0,5 s für die dritte Zeile. Ordnung, wenn ich auf das Symbol klicke, bewegen sich die Linien der Reihe nach von links nach rechts Aber das wollen wir eigentlich nicht. Ich möchte die Ausleihe so lange anzeigen lassen bis die Linien den Zug beendet haben. Wir müssen auch eine gewisse Verzögerungszeit für den Header und die Navigation verwenden . Für den Header verwende ich 0,7 s. Das ist wahrscheinlich Navigation. Lassen Sie uns die gleiche Zeit verwenden. Wie Sie sehen, ist das Problem jetzt behoben. Okay, das ist in Ordnung. Aber du musst dich auch um andere Dinge kümmern . Wir müssen die Linien verstecken, sobald sie sich auf die rechte Seite bewegen. Lassen Sie uns weitermachen und Overflow verwenden. Versteckt. In Ordnung, das war's mit dem Menüsymbol. Lassen Sie uns weitermachen und an der X-Schließtaste arbeiten. Wir müssen auch bei diesem Element Übergänge verwenden. Wir brauchen hier also den Übergang alle 0,5 s. Und dann müssen wir den Übergang mit dem Klassenwechsel verwenden. Weil wir hier die Verzögerungszeit angeben müssen, 1,3 s. Wenn ich also auf das Symbol klicke, dann funktioniert alles perfekt. Wir können also sagen, dass wir den Bau unserer Projekte abgeschlossen haben . Alles sieht gut aus. Und das Einzige, was Sie tun müssen, ist, das Projekt an verschiedene Bildschirmgrößen anzupassen. In diesem Teil des Tutorials werden wir CSS-Medienabfragen verwenden. Lassen Sie uns die Seite überprüfen und den Responsive-Modus aktivieren. Wie wir bereits festgelegt haben, basiert das Projekt auf einer größeren Bildschirmgröße, an der ich beteiligt bin. Dies entspricht der Breite von 1920 Pixeln und einer Höhe von 1080 Pixeln Lass uns weitermachen und den ersten Breakpoint finden. Ich bin in der Bildschirmgröße , an der wir einige Änderungen vornehmen müssen. Ich denke, wir müssen an 1.300 Pixeln arbeiten. Lassen Sie uns also weitermachen und eine CSS-Medienabfrage mit einer maximalen Breite von 1.300 Pixeln auf der Bildschirmgröße erstellen 18. Projekt 15 - CSS-Navigation: In diesem Video werden wir ein Navigationsmenü mit HTML und CSS erstellen. Das wird projiziert werden können, aber Sie werden einige coole Übergangseffekte von CSS kennenlernen können . Ich denke also, dass das Projekt interessant sein wird. Bevor wir mit der Erstellung des Menüs beginnen, wollen wir es beschreiben. Wie Sie sehen, haben wir einen Text. Folgen Sie uns in der Mitte der Seite. Wenn ich den Mauszeiger darüber bewege, erscheint das Menü mit einigen schönen Übergängen Wir haben eine horizontale Linie auf der rechten Seite des Textes, die von links nach rechts zunimmt. Auch die Menüpunkte erscheinen nach einiger Verzögerung in der richtigen Reihenfolge. Und wenn wir den Mauszeiger über sie bewegen, erhalten wir farbige Hintergründe mit einem reibungslosen Übergang Eigentlich ist dies eine Social-Media-Liste und jeder Artikel hat seine eigene ursprüngliche Hintergrundfarbe. In Ordnung, das war's also, was wir bauen werden. Lass uns anfangen. Ich habe einen neuen Ordner auf dem Desktop erstellt , in dem ich zwei verschiedene Dateien für HTML und CSS vorbereitet habe . Lassen Sie uns weitermachen und den Ordner im VS-Code öffnen. Im Moment ist die CSS-Datei leer. Was das HTML angeht, habe ich die Grundstruktur des HTML-Dokuments vorbereitet. Ich habe zwei verschiedene Links im Hauptelement, einen für Google-Schriftarten und den zweiten für die CSS-Datei. Sie können die Quelldateien den Link in der Beschreibung herunterladen. Lassen Sie uns weitermachen und das Projekt im Browser ausführen. Dafür verwende ich eines der Pakete namens Live Server. diesem Paket können wir das Projekt im Browser ausführen und die Aktualisierungen vornehmen ohne die Seite jedes Mal zu aktualisieren. Dies ist ein großartiges Paket, daher empfehle ich, es stilvoll vom Extension Manager herunterzuladen und zu verwenden. Okay, lassen Sie uns zum Schluss den Editor und den Browser so platzieren und beginnen, das HTML-Markup zu erstellen Ich werde eine Entwicklung öffnen , die der Wrapper des Menüs sein wird Als nächstes benötigen wir eine weitere Entwicklung mit dem Klassenmenü. Dieses Element enthält alle Elemente des Menüs. Wir werden uns also einen Text folgen lassen, gefolgt von der Zeile. Und dann werden wir fünf verschiedene Menüpunkte haben. Öffnen wir also eine Entwicklung mit dem Klassennamen. Folgen Sie einer Beilage, Sie dem Inhalt. Folge uns. Als nächstes benötigen wir ein weiteres Div für die Zeile. Danach werde ich genug Menü erstellen. Öffnen wir also die Entwicklung mit dem Klassennavigationsmenü und fügen wir hier ein paar Navigationselemente ein. Sie sollten durch die Link-Elemente dargestellt werden. Es wird also mit dem Link zum Klassenmenü geöffnet. Der erste Artikel wird also Facebook sein. Dann duplizieren Sie den Link viermal und ändern Sie die Namen der sozialen Medien. Das zweite wird Instagram sein. Dann werden wir Twitter und LinkedIn haben. Und der letzte wird YouTube sein. Okay, das war's mit dem HTML-Markup. Jetzt müssen wir anfangen, etwas CSS zu schreiben. Zuallererst werde ich einige Reset- und allgemeine Styles für jedes Element erstellen . Um jedes Element auszuwählen, müssen wir ein Sternchen verwenden Lassen Sie uns den Standardrand und das Padding loswerden. Ich setze beide auf Null. Und dann ändere die Schriftfamilie. Machen wir Treibsand daraus. Okay, also während des gesamten Projekts werde ich RAM als Maßeinheit verwenden. Moment entspricht eine Rampe 16 Pixeln, da die Schriftgröße des HTML-Codes 16 Pixeln entspricht. Ich möchte eine Runde ändern und in zehn Pixel konvertieren , weil ich denke, dass es viel bequemer ist , eine Rampe zu berechnen und zu verwenden, um eine Rampe in zehn Pixel umzuwandeln Wir müssen die Schriftgröße des HTML-Codes verringern und wir müssen 62,5% daraus machen Wie Sie sehen können, haben die Elemente ihre Größe geändert und sind kleiner geworden. Okay, lass uns weitermachen und mit der Arbeit am Wrapper beginnen . Zunächst definiere ich die Breite und Höhe. Fangen wir mit 200 Prozent an. Was die Höhe angeht, werde ich sie zu 100% aus dem Viewport machen sie zu 100% aus dem Viewport Daher müssen wir 100 vh verwenden und auch die Hintergrundfarbe ändern Verwenden wir hier Farbe oder 262626. In Ordnung. Jetzt platziere ich das Menü in der Mitte der Seite. Und dafür verwenden wir eine Flexbox. Wir brauchen hier Display-Flex. Um das Menü dann horizontal zu zentrieren, verwenden wir Justify Content Center Für die vertikale Zentrierung müssen wir die Option Elemente mittig ausrichten verwenden In Ordnung? Im Moment befindet sich das Menü in der Mitte, aber die Elemente sind nicht ganz sichtbar. Lass uns weitermachen und das beheben. Ich wähle Artikel aus. Beide folgen uns und den Menüpunkten. Weil wir die ähnlichen Stile für sie brauchen. Lass uns die Schriftgröße erhöhen und es in den RAM bringen. Ändern Sie dann die Schriftstärke. Mach 600 draus. Außerdem werde ich sie weiß machen. Dann wandle Text in Großbuchstaben um. Schaffen Sie einen gewissen Abstand zwischen den Buchstaben, indem Sie den Buchstabenabstand von 0,1 rem verwenden. Und zum Schluss werde ich auf der rechten Seite der Elemente etwas Platz schaffen , indem ich Margin-Right für Ratten verwende Im Moment sehen die Artikel also viel besser aus. Sie sind sichtbar und ich werde weitermachen und mich um das Menü kümmern. Ich werde die Elemente, die ich verwenden möchte, horizontal nebeneinander platzieren ich verwenden möchte, horizontal Die Flexbox. Auch hier brauchen wir Display Flex. Und dann müssen wir für die vertikale Zentrierung die Artikel in der Mitte ausrichten Und schließlich ändere ich den Typ des gröberen, mache ihn In Ordnung, das war's vorerst mit den Artikeln. Ich werde weitermachen und die Linie anpassen. Lassen Sie uns also weitermachen und die Entwicklungen auswählen , die die Klassennamenzeile haben. Definieren wir zunächst Breite und Höhe. Ich mache die Rampen der Breite zehn. Was die Höhe angeht, lassen Sie uns 0,1 rem daraus machen. Schließlich schaffen Sie Platz auf der rechten Seite mit dem Rand, oder? Mit einem Wert von fünf Runden. Im Moment passiert hier nichts. Die Linie ist nicht sichtbar und ich werde sie mit den Pseudoelementen danach anzeigen mit den Pseudoelementen danach Wählen wir also Zeile mit danach aus. Dann mach den Inhalt leer. Und definiere auch die absolute Positionsbestimmung. Um die Linie nun entsprechend ihrem übergeordneten Element zu positionieren , müssen wir der Entwicklung eine relative Position zuweisen. Definieren Sie dann die Breite und Höhe. Wir müssen beide zu hundert Prozent machen. Und zum Schluss ändern wir die Hintergrundfarbe und machen sie weiß. Jetzt ist die Linie sichtbar und jetzt ist es an der Zeit, das Menü zum Laufen zu bringen. Wir müssen das dem Display-Flex zugewiesene Menü auswählen. Wählen Sie dann den Link aus. Beseitigen Sie die Standardstile mithilfe der Textdekoration. Keine. Vielleicht ist es relativ positioniert. Dann platziere ich die Artikel unten. Dafür benötigen wir fünf erstklassige Runden. Jetzt sind die Elemente an ihren Standardpositionen positioniert. Als Nächstes müssen wir sie ausblenden und sie anzeigen, wenn wir mit der Maus darüber fahren. Um die Elemente auszublenden, verwenden wir Opazität Null Wählen Sie dann das Menü aus, indem Sie den Mauszeiger bewegen, gefolgt vom Menü-Link Hier mussten wir also das Menü auswählen weil wir den Mauszeiger über das Menü bewegen Wenn wir die Follow-us-Texte auswählen, würden wir in Zukunft einige Probleme haben. Denn irgendwann müssen wir auch mit der Maus über die Elemente fahren, um die Hintergrundfarben zu ändern Lassen Sie uns also die Elemente sichtbar machen und sie wieder an ihre Positionen bringen. Deshalb brauchen wir hier Top Zero und Opazität Eins. Jetzt sind die Elemente standardmäßig ausgeblendet, und wenn wir den Mauszeiger über das Follow Us-Feld bewegen , werden sie angezeigt Aber hier haben wir das Problem. Wenn ich den Mauszeiger über das gesamte Menü bewege, werden die Elemente angezeigt Jedenfalls. Eigentlich brauchen wir das nicht. Wir müssen die Elemente anzeigen, sobald wir den Mauszeiger über das Follow Us-Feld Um das zu erreichen, müssen wir die Zeigerereignisse für das Menü deaktivieren. Ich meine, wenn wir mit der Maus über das Menü fahren, sollten keine Elemente erscheinen Also werde ich eine dieser CSS-Eigenschaften verwenden, die als Zeigerereignisse bezeichnet werden. Und ich setze es jetzt auf Null. Wenn ich den Mauszeiger über das gesamte Menü bewege, werden keine Elemente angezeigt Eigentlich ist dies immer noch nicht das Ergebnis, das wir uns wünschen. Der nächste Schritt besteht darin, die Zeigerereignisse für das Menü zurück zu aktivieren . Aber das müssen wir bei Hover machen. Wählen wir also das Menü mit dem Mauszeiger aus und erstellen Sie Zeigerereignisse. Außerdem müssen wir die Zeigerereignisse auch für diejenigen aktivieren , die uns folgen. Sonst funktioniert es nicht. Lassen Sie uns also div-Elemente mit der Klasse follow auswählen und deren Zeiger zu Ereignissen machen. Wenn ich jetzt den Mauszeiger über Follow Us bewege, werden die Artikel angezeigt Wenn ich mit der Maus über sie fahre, werden sie trotzdem angezeigt. Wenn ich jedoch mit der Maus über die ausgeblendeten Elemente fahre, werden sie nicht angezeigt, da die Eigenschaft Zeigerereignisse derzeit deaktiviert ist. Wir müssen also auf jeden Fall den Mauszeiger über die Follower bewegen. Hoffentlich macht es Sinn für dich. Sobald wir es geschafft haben, die Artikel auszustellen, ist es an der Zeit, uns um die Übergangseffekte zu kümmern. Außerdem müssen wir dafür sorgen, dass die Leitung funktioniert. Also werde ich Transition für die Elemente verwenden , aber mit einer anderen Verzögerungszeit. Lassen Sie uns das Element separat auswählen, indem wir die n-te untergeordnete Pseudoklasse verwenden. Wir brauchen also einen Menülink, gefolgt von der n-ten Kinderfunktion. Wir müssen hier die Anzahl der Artikel angeben. Wir müssen bei eins beginnen und fünf durchgehen. Weil wir insgesamt fünf Artikel haben. Jetzt müssen wir mit den folgenden Werten wechseln. Wir brauchen zuerst top mit einer Dauer von 0,5 s und mit der Verzögerungszeit 0,1 s. Als nächstes benötigen wir Opazität 0,5 s. Und wieder mit der Delay-Zeit 0,1 s. Lassen Sie uns diesen Code viermal duplizieren und dann die Anzahl der Elemente und auch die Höhe der Delay-Zeit ändern der Elemente und auch die Höhe der Delay-Zeit Für den zweiten Artikel benötigen wir 0,2 s. Ich meine die Verzögerungszeit. Für den nächsten brauchen wir 0,3 s, dann 0,4 s. Schließlich benötigen wir für den letzten Artikel 0,5 s. Wenn ich also mit der Maus über den Text fahre, werden die Elemente mit einer gewissen Verzögerung schön angezeigt Okay? Jetzt werde ich dafür sorgen, dass diese Linie funktioniert. Standardmäßig. Es sollte versteckt werden. Und wenn wir den Mauszeiger über den Text bewegen, muss er von links nach rechts angezeigt Ich werde die Breite standardmäßig auf Null setzen. Dann wähle ich das Menü mit dem Mauszeiger aus, gefolgt von der Zeile mit den Pseudoelementen danach Und wir müssen die Breite hundertprozentig machen. Lassen Sie uns abschließend noch einmal Transition verwenden. Wir brauchen hier mit, mit einer Dauer von 0,5 s. In Ordnung, also wie Sie sehen können, funktioniert die Leitung einwandfrei und eigentlich sind wir fast fertig mit unserem Projekt Als letztes ändere ich die Hintergrundfarben, wenn wir den Mauszeiger über die Elemente Lassen Sie uns weitermachen und die Elemente erneut separat auswählen, indem wir die n-te untergeordnete Pseudoklasse verwenden. Aber jetzt mit über. Also brauchen wir einen Menü-Link. Dann müssen wir nth-child one verwenden. Dann folgt der Hover. Der erste Punkt ist Facebook. Lassen Sie uns also die Hintergrundfarbe ändern. Benutze hier die originale Facebook-Farbe. Es ist 35998. Dann duplizieren Sie diesen Code viermal und ändern Sie die Zahlen und die Farben. Der zweite wird drei F sein, sieben bis neun. Der nächste sollte 55 ACE sein. Dann haben wir 0077, B5. Schließlich brauchen wir CD bis 01. Und danach fügen wir die Übergänge zu den Elementen hinzu. Ich werde hier den Multi Grobschneider verwenden. Fügen Sie dann die Hintergrundfarbe, den Dauerpunkt oder die Sekunde ein. Wie Sie sehen, ändern Sie die Hintergrundfarbe problemlos, Artikelstatus wenn wir den Mauszeiger über den Das einzige, was mir hier nicht gefällt , ist die Form der Hintergründe. Ich werde es leicht abgerundet machen und ich möchte auch etwas Platz in ihnen schaffen. Also brauchen wir Polsterung. Wir bewerten 0,5 rem und border-radius ebenfalls den Wert 0,5 Gramm In Ordnung, jetzt funktioniert alles perfekt und eigentlich sind wir mit unserem Projekt fertig 19. Projekt 16 - Dropdown-Menü: In diesem Video erstellen wir ein Drop-down-Menü mit HTML, CSS und JavaScript. Das Dropdown wird einige coole Schwebeeffekte haben. Das Projekt wird klein sein, aber Sie werden lernen, wie Sie mit HTML, CSS und JavaScript einige nette Effekte erstellen können. In Ordnung, lassen Sie uns weitermachen und uns die Projekte ansehen. Wir haben hier ein Vollbild-Hintergrundbild mit einer Überschrift in der Mitte Außerdem können Sie oben auf der Seite drei verschiedene Navigationspunkte sehen . Wenn wir den Mauszeiger über sie bewegen, wird ein Dropdown-Menü mit einigen schönen Übergangseffekten angezeigt Okay, das war's also, was wir bauen werden. Ich habe auf dem Desktop einen neuen Ordner namens Dropdown Menu erstellt Desktop einen neuen Ordner namens Dropdown Menu Lassen Sie uns weitermachen und diesen Ordner im VS-Code öffnen. Wie Sie sehen können, habe ich hier ein paar verschiedene Dateien. Ich meine Dateien für HTML, CSS und JavaScript. Und ich habe auch die Textdatei vorbereitet , in der ich etwas Selbstvertrauen für die Dropdown-Mittel speichere Außerdem habe ich einen Ordner für das Hintergrundbild. Ordnung, lassen Sie uns weitermachen und das Projekt im Browser ausführen Dafür verwende ich ein Paket namens Live Server, mit dem wir ein Projekt im Browser öffnen und Aktualisierungen vornehmen können Browser öffnen und Aktualisierungen vornehmen , ohne die Seite jedes Mal zu aktualisieren. Sie können dieses Paket also herunterladen und installieren. Außerdem können Sie die Starter-Quelldateien über den Link in der Beschreibung herunterladen . Okay, lassen Sie uns abschließend den Editor im Browser platzieren . So wie. Und fange an, das HTML-Markup zu erstellen. Ich habe hier bereits ein grundlegendes HTML-Dokument vorbereitet. Ich habe zwei verschiedene Links und hatte Elemente. Eine für die Google-Schrift und die zweite für die CSS-Datei. Außerdem habe ich unten ein Script-Tag für die JavaScript-Datei. Lassen Sie uns weitermachen und die Entwicklungen öffnen, die den gesamten Inhalt enthalten werden. Als Nächstes öffne ich ein Abschnittselement mit dem Class-Wrapper Dieser Abschnitt wird aus zwei verschiedenen Teilen bestehen. Das erste wird ein Banner mit einer Überschrift sein. Was die zweite betrifft, sollte es die Navigation sein. Fügen wir also hier bei der Entwicklung den Klassennamen binär ein. wir dann in der Entwicklung die Öffnen wir dann in der Entwicklung die H1-Überschrift mit dem Klassenbannertext und dem Dropdownmenü für den Inhalt Ordnung, als Nächstes öffne ich ein Null-Element, aber die Klassennamen-Navigationsleiste Wir werden also mindestens ein Hauptmenü mit drei verschiedenen Listenelementen in der Navbar Und jeder von ihnen wird sein eigenes Dropdown-Menü haben. Öffnen wir die URL-Elemente mit einem Klassennamen. Zumindest jetzt. Als Nächstes benötigen wir das LI-Element, das ein Klassennavigationselement haben sollte. Darauf folgt der Link mit dem Link zur Klassennavigation und der Text Webentwicklung. Wie gesagt, jedes Navigationselement sollte sein eigenes Dropdown-Menü haben Deshalb fügen wir hier eine neue Liste ein, in der das Dropdown für den Klassennamen steht. Im ersten Dropdown-Menü werden wir sechs verschiedene Listenelemente haben Lass uns den ersten öffnen. Das Klassen-Dropdown-Element, das hier den Link mit dem Klassennamen einfügt . Dropdown-Link Deshalb werden wir hier einige Technologienamen mit den Beschreibungen einfügen . Das erste wird HTML sein. Öffnen Sie dann das P-Element. Und jetzt hole ich mir die Beschreibung aus der Textdatei. Wir brauchen hier die Beschreibung des HTML-Codes. Fügen wir es hier ein. Wie gesagt, insgesamt werden wir sechs Artikel haben. Also lass uns Lie On fünfmal duplizieren. Das zweite wird CSS sein. Lassen Sie uns die Beschreibung aus der Textdatei entnehmen. Als nächstes sollte reagieren. Dann haben wir Knoten gefolgt vom Express. Das letzte wird mongodb sein Okay, schauen wir uns das erste Dropdown-Menü an Lassen Sie uns den gesamten ersten Romanartikel mit seinem Dropdown zweimal duplizieren mit seinem Dropdown zweimal Der zweite Punkt wird Frontend sein. In diesem Fall werden wir insgesamt vier verschiedene Artikel haben. Ich werde hier HTML und CSS belassen und dann CSS duplizieren. Und fügen Sie hier JavaScript mit seiner Beschreibung ein. Ich werde von hier weggehen, reagieren und auch die restlichen Atome loswerden. In Ordnung, das war's mit dem zweiten Punkt. Der dritte Punkt wird das Backend sein. Und ich werde hier nur die letzten drei Punkte belassen. Okay? Das Letzte, was Sie in einer HTML-Datei tun müssen, ist die Entwicklung zu erstellen, die für den Hintergrund des Dropdown-Menüs verwendet wird den Hintergrund des Dropdown-Menüs Fügen wir es direkt über dem schließenden Nav-Tag ein und weisen ihm den Klassennamen Dropdown PG Ordnung, das war's also mit dem HTML der Elemente, die erstellt und vorbereitet werden Als nächstes müssen wir anfangen , etwas CSS zu schreiben. Zunächst werde ich einige Reset-Stile für alle Elemente erstellen . Um sie auszuwählen, müssen wir ein Sternchen verwenden Lassen Sie uns den Standardrand und das Padding loswerden. Lassen Sie uns beide auf Null setzen. Außerdem werde ich die standardmäßigen Unterstriche aus den Ansichten und die Standardaufzählungszeichen aus den Listenelementen entfernen Unterstriche aus den Ansichten und die Standardaufzählungszeichen aus , sodass wir Textdekorationen mit dem Wert Keine und auch den Listenstil verwenden müssen Textdekorationen mit dem Wert Keine und auch den Ändern Sie abschließend die Schriftfamilie. Während dieses Projekts werden wir Schrift namens EB, Garamond und Schriftgruppe Serif verwenden Garamond und Schriftgruppe Serif Ordnung, also schauen wir uns jetzt der Inhalt anders aussieht. Während dieses Projekts werden wir RAM als Maßeinheit verwenden . Standardmäßig entspricht 1 g 16 Pixeln, da die Schriftgröße des HTML-Codes 16 Pixeln entspricht. Ich möchte ein RAM in zehn Pixel umwandeln. Und dafür müssen wir die Schriftgröße von HTML verringern. Und wir müssen es auf 62,5 Prozent bringen. Okay, lass uns weitermachen und mit der Arbeit am Wrapper beginnen. Ich werde den Wrapper auf die gesamte Seite ausdehnen. Lassen Sie uns dafür die Breite auf hundert Prozent festlegen. Was die Höhe angeht, werde ich sie zu 100 Prozent des Viewports ausmachen sie zu 100 Prozent des Viewports Deshalb brauchen wir hier 100 pH. Danach legen wir das Bild als Vollbild-Hintergrund Verwenden wir zunächst linearen Farbverlauf mit weißen Farben, jedoch mit unterschiedlicher Opazität Im ersten Fall verwende ich den Opazitätspunkt. Für den zweiten Fall verwenden wir Opazität Point to. Danach. Wir müssen die URL des Bildes angeben. Wie Sie wissen, haben wir einen Ordner namens Images, in dem ich ein Bild namens BG Dot JPG speichere. Als nächstes brauchen wir Center und keine Wiederholung. Und schließlich müssen wir die Hintergrundgröße mit dem Value Cover definieren . Ordnung, wie Sie sehen können, haben wir das Vollbildbild als Hintergrund festgelegt Und als nächstes kümmere ich mich um das Panel. Also lass uns weitermachen und es auswählen. Ich werde die Breite auf 200 Prozent einstellen. Ebenfalls. Wir müssen es positionieren. Und dafür machen wir seine Position absolut. Als Nächstes werde ich es mit der obersten Position nach unten verschieben. Setzen wir es auf 35%. Okay, also die Position des Banners ist geändert und jetzt müssen wir an der Überschrift selbst arbeiten. Ich werde es in der Mitte der Seite platzieren und es auch besser aussehen lassen. Lassen Sie uns also weitermachen und den Bannertext auswählen. Platzieren wir es mit Textalign Center in der Mitte. Erhöhen Sie dann die Schriftgröße und machen Sie sieben RAM daraus. Ändere auch die Farbe ich werde es weiß machen. Danach transformieren wir Text mithilfe der Texttransformationseigenschaft in Großbuchstaben Außerdem möchte ich etwas Abstand zwischen den Buchstaben schaffen, den Buchstabenabstand verwende , wobei der Wertepunkt nach oben zeigt. Schließlich werde ich einen Schatteneffekt verwenden. Fügen wir Ihnen die Werte 0,2, 0,5 RAM ein. Und als Farbe verwenden wir 888. Ordnung, also eigentlich sind wir mit dem ersten Teil fertig. Ich bin auf dem Banner. Jetzt müssen wir uns um die Navigation kümmern. Lassen Sie uns weitermachen und die Hauptliste auswählen, die die Klasse enthält. Nicht zuletzt. Ich werde die Listenelemente horizontal in einer Reihe platzieren. Und dafür verwenden wir Flexbox. Wir brauchen Display Flex. Und um sie dann horizontal zu zentrieren, verwenden wir Justify Content Center. Als Nächstes werde ich am LI-Element arbeiten. Wählen wir es also mit dem Klassennavigationselement aus. Lassen Sie uns zunächst etwas Platz am oberen Rand der Elemente schaffen etwas Platz am oberen Rand der Elemente margin top with value to rams“ verwenden Als Nächstes platziere ich den Text mithilfe der Textausrichtung mittig in der Mitte. Und schließlich definieren wir die Breite. Ich werde es auf eine Viewport-Breite von 26 einstellen. Das bedeutet, dass wir die Breite auf 26 Prozent des Viewports festgelegt 26 Prozent des Viewports Lassen Sie uns abschließend die Links anpassen, sie auswählen, die Schriftgröße erhöhen und sie zu Rams machen Außerdem werde ich die Schriftstärke ändern. Setzen wir es auf 600. Dann wandle Text in Großbuchstaben um. Ändere die Farbe. In diesem Fall verwende ich Farbe für vier oder fünf F9 FBI und lasse vier oder fünf F9 FBI etwas Abstand zwischen den Buchstaben Lassen Sie uns den Seitenabstand auf 0,1 RAM setzen. Und schließlich werde ich Shadow mit den Werten Null Punkte verwenden , um 0,5 RM zu rammen. Und die Farbe ist 888. In Ordnung, mit den wichtigsten Listenpunkten sind wir fertig. Jetzt muss ich mich um die Dropdowns kümmern. Lassen Sie uns weitermachen und sie auswählen, die sich im Dropdown der Klasse befinden. Lassen Sie uns oben etwas Platz schaffen, indem wir den Rand über einem RAM verwenden. Und außerdem werde ich für eine Weile die Hintergrundfarbe für die Liste ändern . Lass es uns weiß machen. Richtig? Als Nächstes werde ich weitermachen und das Dropdown-Element anpassen Wählen wir es also aus. Moment befindet sich der Text in der Mitte, aber wir müssen ihn auf der linken Seite platzieren. Lassen Sie uns also Texte verwenden, die an dem verbleibenden Wert ausgerichtet sind. Außerdem werde ich mit Polsterung etwas Platz schaffen. Stellen wir es auf zwei Runden ein. Oben als zwei Läufe auf der rechten Seite, Null unten und 2 g auf der linken Seite. Richtig. Eigentlich benötigen wir auch am Ende der Liste genauso viel Platz. Ich meine, nach dem letzten Artikel. Verwenden wir dazu eine Pseudoklasse namens last-child und wählen Wir benötigen ein Dropdown-Objekt, gefolgt von der Pseudoklasse des letzten Kindes Um unten etwas Platz zu schaffen, verwenden wir padding-bottom den Wert zwei Rampen. In Ordnung. Das war's also mit den LI-Elementen. Lassen Sie uns weitermachen und die Links anpassen. Wählen Sie den Drop-down-Link aus. Ich ändere die Schriftgröße mache es auf 1,6 RAM. Machen Sie auch die Schriftstärke fetter. Wandelt Text in Großbuchstaben um. Und schließlich ändere die Farbe. Ich werde wieder Farbe 245, F9 verwenden. Sei okay mit den Links, wir sind fertig. Abschließend beginne ich mit den Beschreibungen. Sie werden durch die P-Elemente dargestellt. Wählen wir sie also aus. Ich werde die Schriftgröße erhöhen. Machen wir es 1,6 mal rund und ändern die Farbe. Verwenden wir hier F5, F6, 061, Okay, also im Moment sehen Drop-Downs viel Drop-Downs Und eigentlich sind wir fast fertig mit dem Styling. Wie Sie sehen können, befindet sich die Überschrift Dropdown-Menü über den Menüs Ich möchte es hinter ihnen platzieren. Und dafür verwende ich die Z-Index-Eigenschaft. Definieren wir zunächst die Position für den Dropdown, da der Index sonst nicht funktioniert Machen wir die Position relativ und verwenden dann den Indexwert. Sagen wir 100. In Ordnung, also nehmen wir an, dass die Überschrift hinter den Menüs platziert wird Und jetzt werde ich einen Hover-Effekt erzeugen. Wir werden Menüs standardmäßig ausblenden und sie anzeigen, wenn Sie mit der Maus darüber Um sie zu verbergen, verwenden wir Opazität Null und Visibility Hidden Wählen Sie dann das Navigationselement aus, indem Sie den Mauszeiger bewegen, gefolgt vom Dropdown Um die Menüspezifikation anzuzeigen, benötigen wir also Opazität eins und Sichtbarkeit sichtbar Wenn ich jetzt den Mauszeiger über das Element bewege, werden die Menüs angezeigt Aber eigentlich haben wir hier ein kleines Problem. Wir müssen den Mauszeiger nicht über das Element selbst bewegen, denn wenn wir den Mauszeiger nach unten bewegen, werden die Menüs sowieso angezeigt Um das zu beheben, müssen wir die Höhe auf Null setzen. Standardmäßig. Wir müssen es automatisch beim Schweben machen Jetzt ist das Problem behoben. Zum Schluss fügen wir hier einen Übergang mit den Werten all und 0,1 s hinzu. In Ordnung? Das ist also ein einfaches Standard-Dropdown ohne zusätzliche Effekte Schauen wir uns noch einmal die fertige Version unserer Projekte an. Wenn wir den Mauszeiger über die Elemente erscheint der Hintergrund von der anderen Stelle aus Genauer gesagt von der Stelle aus, über der wir das letzte Mal geschwebt Außerdem ist dieser Hintergrund ein anderes Element und nicht nur die Hintergrundfarbe. Wie Sie sich erinnern, haben wir die Entwicklung mit einem Klassennamen, Dropdown BG, in HTML erstellt die Entwicklung mit einem Klassennamen, Dropdown BG, in HTML Lassen Sie uns also diese Elemente auswählen und ihre Breite und Höhe definieren. Ich werde die Breite auf 40 Läufe einstellen. Was die Höhe angeht, werde ich 60 g daraus machen. Eigentlich haben wir diese Eigenschaften und Werte nur vorübergehend definiert. Irgendwann werden wir sie über das JavaScript setzen. Um den Hintergrund sichtbar zu machen, definiere ich nun die Hintergrundfarbe. Ich möchte, dass der Hintergrund leicht transparent ist. Verwenden wir hier also wiederum den RGBA-Wert 243, 243243, mit der Und tatsächlich den weißen Hintergrund aus dem Drop-down-Menü entfernen . In Ordnung, es wird also davon ausgegangen, dass der Hintergrund machbar ist. Machen wir es leicht abgerundet, indem Randradius mit dem Wert 0,3 Und erstellen Sie auch einige Schatteneffekte mit Box Shadow mit dem Wert 0,5 RAM, einem RAM und der Farbe 757575 Als Nächstes erstelle ich einen kleinen Pfeil. Ich meine die buchstäbliche Form, die Sie hier sehen. Verwenden wir dazu eines dieser zuvor genannten Pseudoelemente Wählen Sie Dropdown VG mit vorherigen Pseudoelementen aus. Zuallererst werde ich den Inhalt leer machen. Dann müssen wir ihre Position absolut machen , um sie richtig zu positionieren. Außerdem müssen wir die Position für das übergeordnete Element definieren . Machen wir es auch absolut. Danach gebe ich der Form so , dass sie vor Pseudoelementen steht Ich werde das mit ein paar Randeigenschaften machen. Ich fange mit der linken Grenze an. Weisen wir ihm die Werte ein RAM, solide und die Farbe transparent zu. Dann werde ich es zweimal duplizieren. Die zweite Immobilie wird schlecht sein. Die rechte Seite mit den gleichen Werten wie bei der dritten wird als unterster Rand der Farbe angezeigt. Verwenden wir Rot Okay, damit der Pfeil machbar ist und wir uns jetzt um seine Position kümmern müssen Ich möchte es perfekt in der Mitte des Hintergrunds platzieren . Und es sollte auch oben drauf platziert werden. Also werde ich es auf die oberste Position Null bringen. Außerdem müssen wir bei 50 Prozent bleiben. Außerdem müssen wir Transform verwenden. Mit der Übersetzungsfunktion. Wir müssen hier die Werte -50 Prozent und dann -100% übergeben Prozent und dann -100% Okay, das Letzte, was ich tun musste, war die Farbe zu ändern. Verwenden wir hier dieselbe Lichtfarbe anstelle der roten. Kopieren wir es und fügen es hier ein. Wie gesagt, wir haben vorübergehend Breite und Höhe festgelegt, und jetzt werde ich sie loswerden. Außerdem müssen wir den Hintergrund standardmäßig ausblenden. Deshalb brauchen wir hier die Opazität Null und die Sichtbarkeit versteckt In Ordnung, also mit dem CSS sind wir fast fertig. Jetzt ist es an der Zeit, etwas JavaScript zu schreiben. Gehen wir zur Datei script.js. Zunächst erstelle ich eine Variable, in der wir ein DIV-Element mit der Dropdown-PG-Klasse speichern Erstellen Sie also eine neue Variable, nennen Sie sie Dropdown PG Wählen Sie dann das Element mithilfe der Abfrageauswahlmethode aus. Wir müssen hier den Klassennamen angeben , der Dropdown BG sein wird Okay, jetzt müssen wir an jedes Navigationselement einen Mouse-Over-Event-Handler anhängen jedes Navigationselement einen Mouse-Over-Event-Handler Dazu müssen wir alle Elemente auswählen und sie durchgehen. Lassen Sie uns also weitermachen und Navigationselemente mit der Methode Query Selector auswählen , alles Wir müssen hier das Element Class Name now angeben, eigentlich Query Selector, alle Methodenrückgaben und ein Array-ähnliches Objekt namens Und wir müssen es in ein Array umwandeln. Dafür verwende ich die Methode array dot from. Danach verwenden wir eine der Array-Hilfsmethoden, die für jede Methode aufgerufen werden Es ermöglicht uns, die Funktion für jedes Array-Element separat auszuführen . Wir müssen hier eine Pfeilfunktion übergeben , die den Parameter übernimmt , der beim Durchlaufen des Arrays das aktuelle Objekt sein der beim Durchlaufen des Arrays das aktuelle Objekt Jetzt müssen wir an das Objekt den Mauszeiger über den Event-Handler anhängen das Objekt den Mauszeiger über den Event-Handler Also brauchen wir deinen eigenen Mauszeiger. Eigentlich ähnelt das Mouse-Over-Ereignis dem Hover in CSS. Wenn wir also mit der Maus darüber fahren, müssen wir den Hintergrund sichtbar machen. Daher müssen wir Ihnen eine Punktopazität im Dropdown-PG-Punktstil einfügen , die einer entspricht Dann werde ich diese Codezeile duplizieren . Wir brauchen hier. Sichtbarkeit. Wir werten Machbares ab Moment ist der Hintergrund nicht sichtbar, da er nicht die Breite und Höhe hat. Wie gesagt, wir werden Breite und Höhe anhand von JavaScript definieren . Also lass uns weitermachen und das tun. Definieren Sie eine Breite für das Dropdown BG. Ich meine, wir brauchen eine Punktbreite im Dropdown-PG-Punktstil. Also werden wir die Breite des Hintergrunds gleich der Breite des Dropdown-Menüs selbst machen gleich der Breite des Dropdown-Menüs selbst Ich meine das Dropdown, das beim Zeigen mit der Maus angezeigt werden sollte. Dafür verwende ich eine der JavaScript-Methoden namens get computed style Diese Methode gibt uns alle tatsächlich berechneten CSS-Eigenschaften und -Werte des angegebenen Elements Also lasst uns diese Methode verwenden. In der Klammer. Wir müssen angeben, dass das Element ein Dropdown sein soll. Und um das zweidimensionale Element zu erreichen , lassen Sie uns hier eine Pause einlegen, Punkt des letzten Elements Child Denn wenn wir uns die HTML-Datei ansehen, werden wir feststellen, dass Dropdown jetzt das letzte untergeordnete Element der Sache ist , oder? Okay, schließlich müssen wir uns bei der Immobilie entscheiden. Als nächstes benötigen wir genau dasselbe auch für die Höhe. Lassen Sie uns also diese Codezeile duplizieren und die Breite in die Höhe ändern. Wenn ich also den Mauszeiger über die Elemente bewege, wird der Hintergrund angezeigt Es hat seine Breite und Höhe je nach dem Objekt, über dem wir den Mauszeiger bewegen, geändert je nach dem Objekt, über dem wir den Mauszeiger bewegen Das Problem dabei ist jedoch, dass Hintergrund eine falsche Position einnimmt. Also müssen wir uns darum kümmern. Vorher fügen wir dem Hintergrund einen Übergang hinzu, müssen ihm CSS zugewiesen werden, müssen ihm CSS zugewiesen werden, die Werte enden alle auf 0,3 s. In Ordnung, jetzt haben wir einen glatten Übergangseffekt und es ist an der Zeit, sich um die Position des Hintergrunds zu kümmern die Position des Hintergrunds Ich werde es dynamisch aus dem JavaScript definieren. Definieren wir zunächst die Spitzenposition. Benutze Dropdown, sei ein Punkt im G-Punkt-Stil oben. Jetzt verwende ich ES6-Vorlagen, Zeichenketten. Lassen Sie uns Backticks öffnen. Dann brauchen wir ein Dollarzeichen mit den geschweiften Klammern. Also müssen wir die obere Position gleich der versetzten Oberseite des Dropdowns setzen. Tatsächlich gibt die Eigenschaft offset top die oberste Position relativ zur Oberseite des übergeordneten Elements zurück die oberste Position relativ zur . Und es gibt uns den Wert in Pixeln. Also müssen wir hier item.name, last elements, child einfügen item.name, last elements, child Da wir Zugriff auf das Dropdown benötigen, sollte darauf das Offset-Top folgen Danach müssen wir Px angeben, weil wir Pixel benötigen. Eigentlich brauchen wir genau dasselbe auch für die linke Position. Also lass uns diese Codezeile duplizieren und von oben nach links wechseln. Wenn ich jetzt den Mauszeiger über die Elemente bewege, wird dieser Hintergrund an den richtigen Positionen angezeigt Also alles funktioniert gut, bis auf die eine Sache. Wenn ich die Maus außerhalb des Elements bewege, wird der Inhalt des Dropdown-Menüs ausgeblendet Der Hintergrund selbst wird dieses Flugzeug behalten. Also müssen wir es beim Mouse-Out-Event verstecken. Also brauchen wir item.name beim Ausziehen der Maus. Dann nehmen wir diese beiden Zeilen von hier, fügen sie ein und ändern die Werte. Für die Opazität brauchen wir Null. Was die Sicht angeht, sollte es beheizt sein. Okay? Jetzt ist das Problem behoben. Alles funktioniert gut. Aber eigentlich haben wir hier ein kleines Problem. Wir benötigen eine kleine Verzögerung bis die Dropdownelemente angezeigt werden Und ich werde sie auch von rechts nach links anzeigen. Verwenden wir dazu Transform mit der Übersetzungsfunktion. Ich meine, übersetze nach der X-Achse als Wert. Fügen wir hier zehn Prozent ein. Dann müssen wir beim Zeigen mit der Maus den Wert der Translate X-Funktion auf Null setzen Translate X-Funktion auf Null Lassen Sie uns hier abschließend den Übergang mit einer gewissen Verzögerungszeit verwenden. Wir müssen dem Ganzen dann eine Dauer von 0,1 s und die Delay-Zeit 0,2 s zuweisen . Okay, jetzt funktioniert alles perfekt und ist eigentlich komisch gemacht mit diesem kleinen Projekt. Ich hoffe, es war interessant , weil wir hier verschiedene Techniken verwendet haben und hoffentlich lernst du ein paar neue Sachen. 20. Projekt 17 - Navigation: In diesem Video erstellen wir jetzt ein kreatives oberes Menü mit HTML, CSS und JavaScript. In Ordnung, lassen Sie uns weitermachen und das Projekt beschreiben. Wir haben in der Mitte der Seite eine Schaltfläche mit drei Punkten. Wenn ich darauf klicke, verwandeln sich diese Punkte mit einem sanften Übergang in ein X. Und auch die Navigationsleiste, die wir mit ein paar Navigationselementen anzeigen mit ein paar Navigationselementen Wenn ich auf das X klicke , schließt sich das Menü wieder mit einigen Übergangseffekten. Und wir werden auch drei Punkte statt x zurückbekommen. Das war's also. Dieses Projekt wird ein kleines Projekt sein, aber ich hoffe, es wird interessant sein. Also lass uns anfangen. Ich habe einen neuen Ordner auf dem Desktop erstellt , in dem ich drei verschiedene Dateien für HTML, CSS und JavaScript habe. Lassen Sie uns weitermachen und dieses Problem im VS-Code öffnen. Eigentlich sind die CSS- und JavaScript-Dateien gerade leer. Was die Datei index.html angeht, habe ich das grundlegende HTML-Dokument vorbereitet. Ich habe zwei Links in den Kopfelementen, einen für Font Awesome-Icons und einen weiteren für CSS. Außerdem habe ich hier ein Script-Tag für die JavaScript-Datei. Sie können die Starterdateien über den Link in der Beschreibung herunterladen . In Ordnung, lassen Sie uns weitermachen und die Datei im Browser ausführen. Dafür verwende ich ein Paket namens Live Server. Es ermöglicht uns tatsächlich, das Projekt live im Browser auszuführen und Aktualisierungen vorzunehmen, ohne die Seite jedes Mal zu aktualisieren , sodass Sie es installieren und verwenden können. Lassen Sie uns abschließend Editor und Browser nebeneinander platzieren und mit der Erstellung von HTML-Markup beginnen Ich werde ein div-Element öffnen , das der Container sein wird. Als Nächstes benötigen wir HTML5-Navigationselemente. Weisen wir ihm einen Klassennamen zu, navbar. Es wird die gesamte Navigationsleiste umfassen, ich meine die Schaltfläche und die Navigationselemente Als Nächstes erstelle ich einen Button. Es wird durch eine Entwicklung repräsentiert. Ordnen wir ihm die Klasse BTN zu. Wir werden also drei Punkte haben. Lassen Sie uns sie mithilfe von Entwicklungen erstellen. Ordnen wir es verschiedenen Klassen zu. Der erste wird aus vier gängigen Styling-Punkten bestehen. Und der zweite Punkt wird sich mit den einzelnen Stilen befassen. Dann duplizieren Sie diese Codezeile und ändern Sie die Klassennamen. Wir brauchen. Punkt zwei, Punkte drei. In Ordnung? Im Moment ist der Button nicht sichtbar, weil die Entwicklungen leer sind und wir keinen Stil haben. Als Nächstes erstelle ich das Menü selbst. Lassen Sie uns eine weitere Entwicklung mit dem Klassennamen, Nav-Menü, öffnen. Insgesamt werden wir also vier verschiedene Artikel haben. Jeder von ihnen wird mit dem Link und den Font Awesome-Symbolen erstellt . Öffnen wir also das Link-Element mit dem Klassennamen Nav-Menülink. Fügen Sie dann Ihre Augenelemente mit Klassen ein. Schnell, schnell, ganz. Dann duplizieren Sie das Link-Element dreimal und ändern Sie die Klassennamen. Für den zweiten brauchen wir FAB, FA Dash Blogger. Das nächste wird FAS-Dash, Projekt-Dash-Diagramm sein Projekt-Dash-Diagramm Und für den letzten verwenden wir FAS, FA, Dash Actors, Car Okay, hier haben wir also alle vier Icons und mit HTML sind wir fertig Alle Elemente werden erstellt und vorbereitet. Lass uns weitermachen und die CSS-Datei öffnen und anfangen , etwas CSS zu schreiben. Zuallererst werde ich einige Reset-Stile erstellen. Lassen Sie uns den Standardrand und den Abstand für jedes Element loswerden und den Abstand für jedes Element Um alle Elemente auszuwählen, müssen wir Sternchen verwenden und dann den Rand und den Abstand auf Null setzen . Während dieses Projekts werde ich RAM als Maßeinheit verwenden. Standardmäßig entspricht ein REM 16 Pixeln, da die Schriftgröße des HTML-Elements 16 Pixeln entspricht. Ich werde ein RAM in zehn Pixel umwandeln weil ich denke, dass es komfortabler und praktischer sein wird . Um das zu tun, müssen wir die Schriftgröße von HTML verringern. Und wir müssen es auf 62,5 Prozent bringen. Wie Sie sehen können, wurden die Icons kleiner. In Ordnung, lass uns weitermachen und uns um den Container kümmern. Ich werde es auf die gesamte Seite ausdehnen. Lassen Sie uns also weitermachen und es auswählen Stellen Sie seine Breite auf 100% ein. Was die Höhe angeht, werde ich sie zu 100% aus dem Viewport machen Deshalb brauchen wir hier 100 vh. Dann ändere die Hintergrundfarbe, mache es hellgrau mit E. Als Nächstes schicke ich an die Icons dafür. Ich werde Flexbox verwenden. Wir müssen einen Flex-Container für die Entwicklung mithilfe von Display Flex erstellen. Um die Elemente dann horizontal zu zentrieren, müssen wir das Justify-Content Center verwenden Was die vertikale Zentrierung angeht, brauchen wir eine Zeile in der Mitte für Posten, oder? Das war's mit dem Container. Als Nächstes kümmere ich mich um das Menü selbst. Lassen Sie uns weitermachen und das Navigationsmenü auswählen. Lassen Sie uns zunächst definieren, was es zu 46 RAM macht. Was die Höhe angeht, werde ich sie auf 3,5 rem einstellen. Dann ändere die Hintergrundfarbe. In diesem Fall verwende ich die Farbe 2578. Dann werde ich mithilfe von Padding etwas Platz im Menü schaffen mithilfe von Padding etwas Platz im Menü Stellen wir es auf zwei REM, oben und unten, und drei Rampen auf der linken und rechten Seite ein. Außerdem werde ich die Speisekarte abgerundet gestalten. Dafür müssen wir Border-Radius mit dem Wert fünf rem verwenden Border-Radius mit dem Wert fünf Lassen Sie uns abschließend mit Box-shadow einen Schatteneffekt erzeugen , der die folgenden Werte hat Wir brauchen 01 Rem, drei Rampen. Für die Farbe verwende ich den RGBA-Wert 37172120 und die Opazität 0,4 und In Ordnung, der Hintergrund ist bereit für die Icons. Als Nächstes werde ich die Icons anpassen. Wählen wir sie also aus. Wir brauchen einen Link zum Navigationsmenü, gefolgt von der Insel. Erhöhen wir die Schriftgröße, machen wir sie auf 4 MB. Was die Farbe angeht, werde ich sie weiß machen. Im Moment kann ich also viel besser aussehen und wir müssen uns um ihre Positionen kümmern. Wir müssen ihre Positionen individuell definieren, aber vorher müssen wir ihnen einige gemeinsame Stile hinzufügen . Wählen wir also das Link-Element und machen seine Position absolut. Ich werde mich positionieren, kann ich anhand der Navigationsleiste sagen. Und dafür müssen wir die Position der Nanoporen relativ machen die Position der Nanoporen Lassen Sie uns also weitermachen und es auswählen und ihm eine relative Position zuweisen. Danach werde ich die Punkte speziell dafür in den Mittelpunkt stellen. Lassen Sie uns die Spitzenposition auf 50 Prozent festlegen. Außerdem müssen wir die Funktion Transformieren mit Translate verwenden . Ich meine, übersetze y mit dem Wert -50 Prozent. Und jetzt müssen wir die linke und rechte Position für alle Elemente einzeln definieren . Dafür verwende ich eine dieser CSS-Pseudoklassen Es heißt F-Kind. Wählen wir den ersten Artikel aus. Dafür. Sie müssen Link-Elemente auswählen, dann sollte die n-te untergeordnete Pseudoklasse folgen Es ist eigentlich die Funktion. Und in der Klammer müssen wir die Zahl angeben. In diesem Fall müssen wir den ersten Punkt angeben, also müssen wir hier einen übergeben. Lassen Sie uns die linke Position des ersten Elements für RAM festlegen. Dann werde ich diesen Code dreimal duplizieren , weil wir vier Symbole haben. Für das zweite Symbol benötigen wir linke Position mit dem Wert 13 Mieten. Dann definieren wir die Position für das dritte Element. In diesem Fall müssen wir die richtige Eigenschaft mit dem Wert 13 ramps verwenden die richtige Eigenschaft mit dem Wert 13 ramps Was den vierten Punkt angeht, brauchen wir die richtige Position mit einem Wert für n. In Ordnung? Also sind alle Artikel positioniert. Wie Sie sehen können, haben wir in der Mitte des Menüs etwas Platz , und eigentlich gehört er zum Button. Also lasst uns weitermachen und anfangen, daran zu arbeiten. Ich werde eine Entwicklung auswählen , die den Klassennamen Punkt BTN hat Dann lassen Sie uns weitermachen und es dafür machbar machen. Ich werde Breite und Höhe festlegen, beide auf zehn Räume. Und ändere auch die Hintergrundfarbe. Mach es auf fünf AC 78. Das div-Element ist also sichtbar, aber im Moment hat es das gesamte Layout durcheinander gebracht Also müssen wir uns darum kümmern. Ich platziere es in der Mitte des Menüs. Definieren wir diese Position also als absolut Dann verwende ich die folgenden Eigenschaften und Werte, um sie perfekt zu zentrieren. Wir müssen die oberen und linken Positionen besetzen, jeweils zu 50 Prozent. Außerdem müssen wir Transform mit der Übersetzungsfunktion verwenden . Und wir müssen Ihre -50 Prozent zweimal überschreiten. Wie Sie jetzt sehen können, befindet es sich in der Mitte. Als Nächstes mache ich es rund. Und dafür mussten wir, wie Sie wissen, den Grenzradius mit einem Wert von 50 Prozent verwenden Erzeuge auch einen Schatteneffekt. Verwenden Sie Box-shadow mit den Werten 01 RAM. Drei Rems. Das ist wahrscheinlich Farbe. Verwenden wir die RGBA-Werte 13, 83, 57 und die Opazität 0,4 Lassen Sie uns abschließend den Typ des Cursors ändern, sodass er auf die Schaltfläche zeigt, die bereit ist. Jetzt kümmere ich mich um die Punkte. Lassen Sie uns weitermachen und sie mit einem gemeinsamen Klassennamen, Punkt, auswählen . Und weise ihm Breite und Höhe zu. Ich werde beide auf ein RAM setzen. Ändern Sie auch die Hintergrundfarbe, machen Sie ihn weiß und zeichnen Sie dann Punkte um ihn herum, indem Sie Randradius mit einem Wert von 50 Prozent verwenden Wie Sie jetzt sehen können, Punkte außerhalb des Buttons gelandet. Wir müssen uns um ihre Positionen kümmern. Ich zentriere sie mit Flexbox. Wir brauchen Display Flex. Dann verwende ich den Inhalt ausrichten , wobei der Wert gleichmäßig verteilt ist Durch die gleichmäßigen Abstände können wir einen gleichmäßigen Abstand zwischen den Flex-Elementen schaffen Und schließlich verwende ich für die vertikale Zentrierung die Option Elemente zentriert ausrichten In Ordnung. Wie Sie sehen, ist alles bereit, damit die Navbar funktioniert Nochmals. Sobald ich auf die Schaltfläche klicke, sollten sich diese Punkte, ich meine, der erste und der dritte in x umwandeln. Was den zweiten betrifft , sollte er ausgeblendet werden. Und auch das Menü sollte beim Klicken ausgeblendet und angezeigt werden. Also werde ich zuerst Punkte in X umwandeln, und dann werden wir es mit JavaScript zum Laufen bringen. Lassen Sie uns weitermachen und das erste auswählen. Es hat Klassenpunkte eins Lassen Sie uns seine Breite auf 0,8 RAM festlegen. Was die Höhe angeht, lassen Sie uns sieben Rennen daraus machen. Und verwende auch den Grenzradius, welcher Wert? Eine Miete. Danach werde ich diesen Code duplizieren und den Klassennamen ändern. Wir brauchen hier Punkt drei. Das war's mit dem dritten Punkt. Als nächstes müssen wir uns um den zweiten kümmern. Wie gesagt, wir müssen diesen zweiten Punkt verstecken. Also lass uns weitermachen und es auswählen. Und weisen Sie ihm die Opazität Null zu. Ordnung, jetzt mache ich das X mit diesen beiden Linien Dafür verwende ich die Funktionen Rotate und Translate. Lassen Sie uns zunächst die Linien um 45 Grad drehen. Verwenden Sie Transform. Mit der Drehfunktion. Bei den ersten Punkten müssen wir 45 Grad verwenden, aber mit Minuszeichen. Dann kopieren wir diese Codezeile. Füge es für den dritten Punkt und entferne das Minuszeichen. Wie Sie sehen können, sind die Linien gedreht, aber wir haben hier kein x. Also müssen wir auch die Funktion Translate verwenden , um das Problem zu beheben Funktion Translate verschiebt das Element tatsächlich entsprechend der X- oder Y-Achse Ich meine in horizontaler und vertikaler Richtung. Lassen Sie uns Translate mit Werten in RAM verwenden. Und wieder zu vermieten. Kopieren Sie es dann und fügen Sie es für die dritte Zeile ein. Im Fall der dritten Zeile müssen wir den ersten Wert negativ machen. Okay? Moment haben wir also ein perfektes X und jetzt ist es an der Zeit, dass es funktioniert. Also werde ich eine neue Klasse und CSS erstellen. Dann fügen wir mithilfe der Toggle-Methode diese Klasse mithilfe von JavaScript hinzu und entfernen sie aus den Punkten Verwenden wir also einen Multicore und fügen wir zu allen drei Punkten einen Cluster hinzu, der Change heißt Öffnen Sie dann die JavaScript-Datei und wählen Sie die Schaltfläche. Dann verwende ich die Methode namens Query Selector Wir müssen hier den Klassennamen angeben. Es sind übrigens Punkte. Dann lassen Sie uns mit einem Klickereignis, gefolgt von der Pfeilfunktion, an einen Event-Listener anhängen mit einem Klickereignis, gefolgt von der Pfeilfunktion, an einen Event-Listener gefolgt von der Pfeilfunktion Wir müssen also die Klassenänderung zum Container hinzufügen und daraus entfernen , der der Wrapper des gesamten Inhalts ist Also lassen Sie uns weitermachen und es erneut mit der Methode querySelector auswählen es erneut mit der Methode querySelector Fügen wir hier den ClassName-Container ein. Jetzt müssen wir die Klassenlisteneigenschaft verwenden, die tatsächlich alle Klassen speichert, die der Container hat. Schließlich müssen wir die Methode toggle verwenden, die im Allgemeinen dem Element eine Klasse zuweist, wenn es nicht existiert, und es entfernen. Falls es existiert. Richtig? Wenn ich jetzt auf das Symbol klicke, verwandeln sich Punkte in X und umgekehrt. Diese Transformation erfolgt ohne jeglichen Übergang. Lassen Sie uns also weitermachen und den Punkteübergang mit den Werten, die alle 0,3 s enden, hinzufügen , was der Dauer entspricht. Wenn ich jetzt klicke, erhalten wir einen schönen, glatten Übergangseffekt. Okay? Das Letzte, was Sie tun müssen, ist das Menü selbst aus- und einzublenden. zunächst Machen Sie dazu zunächst x mit Null. Dann werde ich die Gegenstände verstecken. Dafür. Verwenden wir Opazität Null und Visibility Hidden. Jetzt müssen wir erneut den Klassenwechsel verwenden, da wir die Elemente ausblenden und anzeigen möchten , wenn wir auf die Schaltfläche klicken. Also lass uns weitermachen und im Nav-Menü „Ändern“ auswählen und mit 246 Rams einstellen Und verwenden Sie auch Transition mit Wertebreite. Und mit der Dauer 0,3 s. Wählen Sie dann erneut mit einem Link ändern. Jetzt müssen wir den Artikel machbar machen. Dafür müssen wir die Opazität auf eins und die Sichtbarkeit auf sichtbar setzen eins und die Sichtbarkeit auf sichtbar Und benutze auch Transition. Mit einer Opazität von 0,3 s. In Ordnung, wir sind fast fertig Das einzige, was ich tun musste, war, eine gewisse Verzögerung hinzuzufügen. Wenn wir das Symbol anzeigen. Dafür müssen wir wieder Transition verwenden, aber mit dem Klassenwechsel. Also brauchen wir hier alles als die Dauer 0,3 s und dann den Betrag der Verzögerung, ebenfalls 0,3 s. Okay, jetzt funktioniert alles perfekt und eigentlich sind wir mit diesem Pixelprojekt fertig 21. Projekt 18 - Abgerundeter Navbar: In diesem Video erstellen wir ein Navbar-Menü mit HTML, CSS und ein bisschen JavaScript Diese Art von Navbar ist etwas anders, weil ich denke, dass sie moderner und kreativer ist als die anderen Standardzahlen Lassen Sie uns weitermachen und das Projekt beschreiben. Wir haben einen dunkelschwarzen Hintergrund mit dem Symbol in der Mitte. Wenn ich darauf klicke, werden die Navigationselemente mit einem schönen Rotationseffekt angezeigt. Okay, lass uns weitermachen und anfangen, es zu bauen. Ich habe den Ordner auf dem Desktop erstellt. Öffnen wir es also in VS Code. Ich werde drei verschiedene Dateien erstellen. Die erste wird index.html sein. Dann brauchen wir style.css und Skripte dot js. Gehen Sie dann zur Datei index.html und fügen Sie hier das grundlegende HTML-Dokument ein. Dafür verwende ich ein Bild. Wir müssen ein Ausrufezeichen setzen und die Eingabetaste drücken. In Ordnung, lassen Sie uns weitermachen und den Titel ändern. Ich füge deine Navbar ein. Dann werde ich auch CSS- und JavaScript-Dateien verlinken. Dazu müssen wir das Link-Tag öffnen und den Pfad der Datei angeben, in diesem Fall den Dateinamen style.css. das JavaScript betrifft, öffnen wir das Script-Tag direkt über dem abschließenden Body-Tag. Und geben Sie im Quellattribut den Namen der Datei an. Außerdem werden wir ein paar Font- und Awesome-Icons verwenden . Also brauchen wir dafür einen CDN-Link. Lass uns weitermachen und nach Font Awesome suchen. CDN, USA. Schnappen Sie sich den ersten Link und fügen Sie ihn in das Hauptelement ein. In Ordnung, das war's mit diesem Setup. Schließlich werde ich die Datei im Browser ausführen. Dafür verwende ich Live Server , ein VS-Codepaket. Dadurch können wir die Aktualisierungen vornehmen ohne die Seite jedes Mal zu aktualisieren. Sie können es also installieren und Sie können Ihre Projekte wie im Browser ausführen. Platzieren wir den Texteditor und den Browser nebeneinander und beginnen wir mit der Erstellung von HTML-Markup Lassen Sie uns die Entwicklungen öffnen und ihnen den Wrapper FirstName Nakba zuweisen Dieses Element umschließt die gesamte Zahl. Öffnen Sie dann ein weiteres div-Element mit der Klassennavigationsleiste. Eigentlich wird es alle Links und Icons enthalten. Also öffne ich das Link-Tag mit dem Klassennamen navbar link Und hier müssen wir die erste Schrift einfügen, Awesome Icon. Es wird FAS sein, FA Dash Home. Insgesamt werden wir also sechs Artikel haben. Lassen Sie uns das Link-Element fünfmal duplizieren und dann die Klassennamen für die Icons ändern. Die zweite wird in der Stadt sein, dann brauchen wir die Schule. Wahrzeichen, Hotel. Und zu guter Letzt müssen wir hier, einlagern, rausgehen. In Ordnung, das war's mit den Navigationsgegenständen. Schließlich müssen wir den Button erstellen. Es wird durch die Entwicklung und ein Font Awesome-Symbol repräsentiert . Also lasst uns weitermachen und div mit dem Klassennamen Nakba dash btn öffnen dem Klassennamen Nakba dash btn Und dann füge dein Font Awesome-Symbol mit den Klassen FAS, f, dash plus Okay, das war's mit dem HTML-Markup oder die Elemente werden erstellt und wir sind bereit, etwas CSS zu schreiben Lassen Sie uns zunächst einige Reset-Stile erstellen. Ich werde den Rand und die Polsterung für jedes Element entfernen Rand und die Polsterung für jedes Element Um jedes Element auszuwählen, müssen wir ein Sternchen verwenden Und dann lassen Sie uns weitermachen und die Marge setzen und beide auf Null auffüllen Während dieses Projekts werden wir RAM als Maßeinheit verwenden . Derzeit entspricht eine Rampe standardmäßig 16 Pixeln, da die Schriftgröße von HTML 16 entspricht. Ich werde ein REM zehn Pixeln gleichsetzen, weil ich denke, dass es bequemer und einfacher zu berechnen ist. Um also ein RAM in zehn Pixel umzuwandeln, müssen wir die Schriftgröße von HTML verringern. Wählen wir es also aus und legen wir seine Schriftgröße auf 62,5% fest. Ordnung, wie Sie sehen können, sich die Größe der Symbole verringert und jetzt entspricht ein RAM zehn Pixeln Lassen Sie uns weitermachen und Wrapper-Div-Elemente auswählen. Definieren wir die Breite und Höhe Ich werde die Breite als 100% S für die Höhe festlegen. Machen wir es zu hundert Prozent aus dem Viewport. Wir brauchen 100 Vh. Ändern Sie auch die Hintergrundfarbe. Wir werden es hier verwenden. Drei b, drei B39. Okay, lassen Sie uns sehen, dass die Symbole gerade nicht ganz sichtbar sind Also lasst uns weitermachen und das beheben. Ich wähle die Navbar-Symbole aus. Erhöhen wir die Schriftgröße, machen wir es auf 2,5 Rem und ändern die Farbe, machen wir es weiß. Außerdem wähle ich auch das Pluszeichen aus. Lassen Sie uns die Schriftgröße erhöhen, es zu Ram machen und auch die Farbe weiß machen. In Ordnung, jetzt sind die Icons sichtbar. Als Nächstes werde ich sie mit Flexbox in der Mitte platzieren sie mit Flexbox in der Mitte Wir brauchen hier Display-Flex. Um die Elemente dann horizontal zu zentrieren, müssen wir das Justify-Content Center verwenden Was die vertikale Zentrierung angeht, müssen wir die Artikel mittig ausrichten Okay, lass uns weitermachen und mit der Arbeit an der Navbar beginnen. Wählen wir es aus und definieren wir seine Breite und Höhe. Ich werde beide auf 20 Wiederholungen einstellen. Ändern Sie auch die Hintergrundfarbe. Lass uns deine Farbe einfach verwenden für, für, für. Danach kümmere ich mich um den Pluszeichen-Button. Also lass uns weitermachen und navbar BTN auswählen. Wenn wir seine Position als absolut festlegen, platzieren wir das Symbol tatsächlich in der Mitte der Nanopore, weil es aus dem normalen Seitenfluss herausspringt Und die Flexbox, wir zentrieren sie perfekt. Als Nächstes definieren wir seine Breite und Höhe. Ich werde beide auf sechs Runden einstellen. Ändern Sie auch die Hintergrundfarbe. Ich werde deine Farbe eins bis c095 verwenden. Okay, außerdem schicke ich an das Pluszeichen in der Box Dafür werde ich wieder Flexbox verwenden. Wir brauchen Flaggen ausstellen , Content Center ausrichten und Artikel ausrichten Dann runden Sie das Feld ab, indem Sie Randradius mit dem Wert 50 Prozent Und schließlich ändern Sie den Cursor und lassen Sie ihn zeigen. In Ordnung, das war's also mit dem Pluszeichen. Jetzt müssen wir alle Elemente zentrieren. Zuerst. Ändern wir ihre Position und machen wir sie absolut. Wie Sie sehen können, werden die Symbole übereinander platziert. Außerdem müssen wir die Position des übergeordneten Elements ändern , nämlich Navbar Machen wir es relativ. Sobald wir die Position relativ festgelegt haben , können wir die Symbole entsprechend dem übergeordneten Element positionieren . Richtig? Jetzt schicke ich die Icons. Und dafür verwenden wir wieder Flexbox. Eigentlich nehme ich diese drei Zeilen von hier und füge sie für die Navigationsleiste Jetzt sind die Icons nicht mehr sichtbar , weil sie hinter dem Button gelandet sind. Also werde ich es für eine Weile kommentieren. Und sobald wir die Artikel positioniert haben, zeigen wir sie wieder an. Jetzt ist es endlich an der Zeit, jedes der Elemente separat zu positionieren. Dafür verwende ich eine Pseudoklasse namens nth Also lasst uns weitermachen und mit dem ersten Punkt beginnen. Wählen Sie den Navbar-Link aus, gefolgt von der n-ten untergeordneten Eigentlich ist es eine Funktion und wir müssen die Nummer des Elements in der Klammer angeben Für den ersten Punkt brauchen wir also Widerstand gegen Ramp. Dann lass uns weitermachen und diesen Code fünfmal duplizieren. Für den zweiten Punkt müssen wir die oberen und rechten Positionen definieren. Für die oberste Position benötigen wir sechs Rampen Was die richtige Position angeht, müssen wir sie auf 2 g setzen. Als nächstes haben wir das dritte Element, das wir hier benötigen, die unterste Position. Stellen wir es auf sechs Durchläufe ein. Rechte Position mit einem Wert von zwei Rems. Als nächstes haben wir das vierte Objekt Für das erste Objekt müssen wir nur die unterste Position mit dem Wert zwei Rams verwenden mit dem Wert zwei Rams Als nächstes haben wir den fünften Artikel. Lassen Sie uns die untere und linke Position festlegen. Ich werde die Untergrenze für sechs Monate festlegen. Was die Linke betrifft, so müssen wir mieten. Und schließlich benötigen wir für den letzten Punkt die Positionen oben und links. Für die obere Position benötigen wir sechs Rampen und für die linke müssen wir mieten In Ordnung, die Icons sind also positioniert. Lassen Sie uns die Schaltfläche wieder anzeigen und die Zahl ebenfalls runden. Verwenden wir hier den Grenzradius mit einem Wert von 50 Prozent. Als Nächstes erstelle ich ein paar Hover-Effekte. Ich ändere die Farbe der Symbole, wenn wir den Mauszeiger über sie Also lass uns weitermachen und jetzt per Link mit dem Mauszeiger auswählen. Und dann müssen wir auswählen, ich ändere die Farbe. Verwenden Sie hier die Farbe 12095. Und verwende auch Transition mit Farbeigenschaft mit einer Dauer von 0,3 s. In Ordnung? Eigentlich ist alles bereit, um ein Nickerchen zu machen oder zu arbeiten. Standardmäßig. Ich werde die Icons ausblenden und sie auch drehen. Ich werde sie mit der Skalenfunktion verstecken. Sobald wir auf das Pluszeichensymbol klicken, sollte es angezeigt werden, und beim nächsten Klick wird es ausgeblendet. Wir werden also eine Umschaltmethode verwenden. Ich werde eine neue Klasse in CSS erstellen. Wir werden diese Klasse mithilfe von JavaScript zum Napa hinzufügen und daraus entfernen mithilfe von JavaScript zum Napa Lassen Sie uns zunächst standardmäßig Elemente ausblenden und drehen . Wenn du dich verwandelst. Bei der Skalenfunktion müssen wir hier Null einfügen. Und dann drehe ich die Symbole um hundert80 Grad, aber mit einem Minuszeichen. Erstellen Sie dann eine neue Klasse und nennen Sie sie Change. Wählen Sie dann Navbar. Wir müssen Transform erneut mit Skalierungs- und Rotationsfunktionen verwenden . Wenn wir also auf das Symbol klicken, müssen wir den Objekten etwas geben. Sie haben die Standardgröße. Also müssen wir den K-Wert eins verwenden. Und wir müssen auch mit Null rotieren. Richtig? Jetzt müssen wir etwas JavaScript schreiben. Gehen wir zur Datei script.js. Wählen Sie die Schaltfläche aus. Dann verwende ich die Methode querySelector. Wir müssen hier den Klassennamen angeben, der navbar btn ist Dann wurde ein Event-Listener mit dem Klick-Event daran angehängt. Und auch hier müssen wir die Pfeilfunktion übergeben. Jetzt müssen wir dem Napa-Wrapper eine neue Änderung des Klassennamens hinzufügen Napa-Wrapper eine neue Änderung des Klassennamens Zuallererst müssen wir dieses Element auswählen, erneut die Methode querySelector verwenden und den Klassennamen im Napa-Wrapper in Klammern angeben erneut die Methode querySelector verwenden und den Klassennamen im Napa-Wrapper in Klammern angeben. Jetzt müssen wir die Klassenlisteneigenschaft verwenden, die tatsächlich alle Klassen speichert , die das Element hat. Und dann brauchen wir die Toggle-Methode mit dem Klassenwechsel. Wenn ich jetzt auf das Symbol klicke, werden die Elemente angezeigt. Aber in diesem Fall ohne Wirkung. Wir müssen also mit Transformation übergehen. Und mit einer Dauer von 0,5 s. Wenn ich jetzt erneut klicke, werden die Symbole mit einem schönen und coolen Übergang angezeigt. Okay, zum Schluss werde ich dem Pluszeichen selbst einige Effekte hinzufügen Ich möchte es onClick drehen. Wählen wir also einen Gain aus, um die Klasse zu wechseln, gefolgt von der Navigationsleiste p t n i. Also drehe ich das Pluszeichen um 45 Grad. Verwenden wir die Rotationsfunktion. Ebenfalls. Für einen gleichmäßigen Effekt. Verwenden wir Transition. Wir müssen uns hier transformieren. Und als Dauer sind das hier 0,5 s angegeben. Okay, jetzt funktioniert alles perfekt und eigentlich sind wir mit diesem Projekt fertig 22. Projekt 19 - Seitenleistenmenü: In diesem Video werden wir ein Seitenleistenmenü für das Admin-Dashboard erstellen ein Seitenleistenmenü für das Admin-Dashboard Diese Art von Seitenleisten ist heute sehr beliebt. Ich denke also, dass dieses kleine Projekt für Sie interessant und hilfreich sein wird , bevor wir mit dem Bau unseres Projekts beginnen. Und ich werde es durchgehen und beschreiben. Wie Sie sehen, haben wir hier ein Vollbild-Hintergrundbild und in der oberen linken Ecke haben wir ein Menüsymbol Wenn ich darauf klicke, werden diese Zeilen mit einem schönen Übergang in x geändert. Und auch die Seitenleiste, wir zeigen sie von links nach rechts an Wie Sie sehen können, besteht die Seitenleiste aus verschiedenen Teilen Oben drauf haben wir einen Avatar für Admin mit einem vollständigen Namen und dem Untertitel-Administrator Darauf folgt die Suchleiste. Dann haben wir eine Liste mit Font, Awesome Icons. Jedes der Listenelemente hat sein eigenes Untermenü. Sie werden als Dropdownmenüs dargestellt. Und schließlich haben wir unten in der Seitenleiste ein paar Symbole Wenn ich auf die X-Schaltfläche klicke, wird die Seitenleiste geschlossen Tatsächlich wird das Projekt auf alle verschiedenen Bildschirmgrößen reagieren. Wir werden es für eine größere Bildschirmgröße bauen. Bildschirmgröße mit 1920 Pixeln Breite und 1080 Pixeln Höhe. Wenn Sie uns also mit einer relativ kleineren Bildschirmgröße folgen , dann empfehle ich, die Entwicklertools zu öffnen . Wechseln Sie in den Responsive-Modus und stellen Sie Breite und Höhe auf 1920 Pixel und 1080 Pixel ein. Aber wie dem auch sei, am Ende des Tages werden wir die Antworten auf das Projekt geben. Okay? Das werden wir in diesem Video aufbauen. Also lass uns anfangen. Ich habe auf dem Desktop einen Ordner namens Sidebar erstellt, in dem ich einen weiteren Ordner für die Bilder habe Lassen Sie uns weitermachen und den Ordner in VS Code öffnen . Das erste, was ich tun werde, ist, unsere Arbeitsdateien zu erstellen. Insgesamt werden wir drei verschiedene Dateien haben. Index.html, style.css und auch Skripte dot js. Öffnen Sie dann die Datei index.html und fügen Sie das grundlegende HTML-Dokument ein. Dafür werde ich Amide verwenden. Lassen Sie uns hier ein Ausrufezeichen platzieren und Enter oder vielleicht Tabulator drücken Lass uns den Titel ändern. Ich füge deine Seitenleiste ein. Ebenfalls. Ich werde CSS- und JavaScript-Dateien verlinken. Dafür. Öffnen wir den Link-Tag. Geben Sie hier den Dateinamen an, style.css. Dann öffnen wir unten den Script-Tag. Und geben Sie im Quellattribut den Namen der Datei script.js an. Außerdem benötigen wir zwei weitere Links, einen für die Font Awesome-Icons und einen weiteren für die Google-Schriftarten. Also lasst uns weitermachen und nach Font Awesome, CDN GIS, suchen. Dann schnapp dir den ersten Link von hier und füge ihn in das Hauptelement ein. Danach suche ich nach den Google Fonts. Eigentlich werden wir zwei verschiedene Telefone verwenden. Der erste wird Roboto Slab sein. Ich werde es anpassen , weil wir eine etwas fettere Schriftstärke verwenden werden eine etwas fettere Schriftstärke verwenden Schauen wir uns also die halbfette Schrift an. Was den zweiten betrifft, werden wir Slab over 27 verwenden Nehmen wir den Link und fügen ihn ebenfalls in das Hauptelement ein. Das war's mit dem Setup. Abschließend führe ich die Datei im Browser aus. Dafür. Ich werde Live Server verwenden. Dies ist eines der VS-Codepakete. Eigentlich verwenden wir dieses Paket fast immer, aber trotzdem möchte ich Sie daran erinnern, dass es uns ermöglicht das Projekt im Browser auszuführen und Updates vorzunehmen, ohne die Seite jedes Mal zu aktualisieren , sodass Sie es herunterladen und installieren können. Schließlich sind das organisierte oder Arbeitsumgebungen. Ich werde einen Texteditor und einen ähnlichen Browser platzieren , um unseren Arbeitsprozess zu vereinfachen. Okay, lassen Sie uns weitermachen und mit der Erstellung des HTML-Markups beginnen . Öffnen wir ein div-Element, das ein Container sein wird. Als Nächstes müssen wir die Navigationselemente öffnen, die die gesamte Seitenleiste umfassen Weisen wir ihr also die ClassName-Seitenleiste zu. Wie gesagt, die Seitenleiste wird aus verschiedenen Teilen bestehen Der erste Teil wird ein Menüsymbol sein Lassen Sie uns also die Entwicklungen mit dem Klassennamen Hamburger-Menü eröffnen . Das Menüsymbol wird aus drei Zeilen bestehen. Also werde ich hier Entwicklungen mit Klassen weitergeben. Wein, das wird der gemeinsame Klassenname für alle drei Linien sein. Und wir müssen auch Zeile eins. Für Einzelpersonen, die Fliesen verlegen. Lassen Sie uns die Zeile zweimal duplizieren und die Klassennamen ändern. Wir brauchen Zeile zwei und Zeile drei. In Ordnung, das war's mit dem Menüsymbol. Als Nächstes müssen wir eine Karte erstellen, die den Avatar des Abdomens, den vollständigen Namen und den Administrator der Untertitel enthält vollständigen Namen und den Administrator der Untertitel Lassen Sie uns also eine Entwicklung mit der Klassennamenkarte eröffnen. Als nächstes benötigen wir ein weiteres Div, das das Bild des Admins einschließt. Weisen wir ihm eine Klassennamenkarte zu, IMG. Fügen Sie dann das Bildelement ein. Ich werde in das Admin-Image mit dem Alt-Attribut schreiben. Dann geben wir den Pfad des Bildes im Quellattribut an: Images, Ordner Slash admin dot JPG Verwenden Sie abschließend das Klassenattribut mit dem Wert admin image. Also haben wir hier das Bild. Lassen Sie uns weitermachen und den vollständigen Namen und den Untertitel einfügen. Und wir werden eine weitere Entwicklung mit dem Hauptteil der Klassennamenkarte eröffnen . Fügen Sie dann H2-Überschriftenelemente mit dem Titel der Klassenkarte ein Schreiben Sie als Inhalt den vollständigen Namen. John Smith. Als nächstes benötigen wir einen Absatz , der eine Klassennamenkarte und einen Untertitel haben sollte Und als Inhalt fügen wir den administrativen Benutzer ein. Okay, das war's mit der Karte. Als nächstes kommen die Sucheingabefelder. Öffnen wir also ein Formularelement mit dem Suchformular für Klassennamen. Insgesamt werden wir also zwei Elemente haben. Die erste wird mit einer Art von Texten eingegeben. Außerdem benötigen wir eine Klassensucheingabe und das Platzhalterattribut mit Wertesuche Neben dem Eingabeelement benötigen wir auch eine Schaltfläche , die das Suchsymbol darstellt. Öffnen wir also das Button-Element. Es sollte den Typ einer Schaltfläche haben denn wenn das Button-Element in das Formular eingefügt wird, wird standardmäßig die Seite über Afrika geladen. Um dies zu vermeiden, müssen wir also den Buttontyp verwenden. Außerdem brauchen wir hier die Schaltfläche zur Suche nach Klassennamen. Das Suchsymbol wird durch das Font Awesome-Symbol dargestellt. Lassen Sie uns also Ihr Augenelement mit Klassen einfügen. Schnell, FA-Dash, suchen. In Ordnung, das war's also mit den geformten Elementen. Als nächstes müssen wir uns um die Liste kümmern. Lassen Sie uns also weitermachen und die UL-Elemente mit dem Klassennamen novelist öffnen die UL-Elemente mit dem Klassennamen novelist Das wird also die Hauptliste auf dem Bürgersteig sein. Es wird fünf verschiedene Listenelemente enthalten, von denen jedes über ein eigenes Drop-down-Menü verfügt. Öffnen wir also die LI-Elemente mit dem Klassennamen. Jetzt Artikel. Dann sollte der Link mit dem Klassennavigationslink folgen . Also werde ich hier drei verschiedene Elemente einfügen. Das erste wird das Font Awesome-Symbol sein. Die Klassennamen, FAS, FA, Dash, Taco, Meter, Dash, Alt Als Nächstes benötigen wir ein Span-Element mit den Linktexten der Klasse Nav. Dann als Inhalt das Dashboard von Let's Institute. Schließlich benötigen wir wieder das Font Awesome-Symbol , um den Pfeil anzuzeigen. Es sollte also Klassen haben, FAS, F, Dash, Dash, richtig? In Ordnung, das war's mit dem ersten Listenpunkt. Wie gesagt, insgesamt benötigen wir fünf davon. Also werde ich es viermal duplizieren und dann die Klassennamen und auch den Inhalt der Elemente ändern . Der zweite wird Fas sein , ein Einkaufswagen, E-Commerce Als nächstes folgt F, F h, m mit dem Artikel Komponenten. Als nächstes haben wir FASFA-Diagramme und Liniendiagramme. Und schließlich brauchen wir eine FASFA-Karte, die mit den Artikelmarkierungen markiert ist. In Ordnung, das war's mit der Hauptliste. Jetzt müssen wir für jedes Listenelement ein Drop-down-Menü erstellen . Also füge ich direkt vor dem schließenden LI-Tag eine neue Liste ein. Es sollte einen erstklassigen Unterromanautor haben. Das erste Drop-down-Menü besteht aus drei verschiedenen Listenelementen. Öffnen wir das erste LI-Element mit dem Klassennamen subnav item. Als nächstes benötigen wir ein Linkelement mit der Klasse Subnet Link. Jedes Listenelement verlinkt also auf das Font Awesome-Symbol und den Inhalt, der durch ein Span-Element dargestellt wird. Lassen Sie uns Ihr Augenelement mit dem gestrichelten Kreis der Klassen FAR F einfügen gestrichelten Kreis der Klassen FAR F Darauf sollte nicht diese Pfanne folgen. Mit dem Text-Dashboard eins. Lassen Sie uns weitermachen und LI-Elemente zweimal duplizieren und einfach den Inhalt ändern. Wir brauchen Dashboard für Dashboard drei. Hier haben wir also das erste Drop-down-Menü. Wir brauchen es auch für den Rest der Artikel. Lassen Sie uns also weitermachen und es vor den schließenden LI-Tags einfügen . Dann fahren Sie fort und ändern Sie den Inhalt für alle Menüelemente. Wir brauchen hier Produkte, Bestellungen und eine Kreditkarte. Als nächstes benötigen wir allgemeine Symbole und Tabellen. Als Nächstes benötigen wir ein Kreisdiagramm, ein Liniendiagramm und ein Balkendiagramm. Für das letzte Drop-down-Menü benötigen wir nur zwei Elemente. Also lasse ich hier nur zwei Elemente mit einem folgenden Konsonanten Wir brauchen Google Maps und eine offene Straßenkarte. Wie Sie sehen, sind wir mit der Hauptliste fertig. Als nächstes müssen wir uns um die unterste Liste kümmern. Also lass uns wieder öffnen. Listet Elemente mit der Klasse auf. Unterste Liste. Die Liste wird vier verschiedene Symbole enthalten. Deshalb benötigen wir vier Listenpunkte. Öffnen wir das LI-Element, das den Klassennamen und das unterste Listenelement haben sollte. Dann müssen wir Elemente mit einem Klassennamen verknüpfen , Link zur unteren Liste. Jedes der Listenelemente wird ein Symbol und einige Benachrichtigungen haben . Deshalb füge ich Ihnen die Span-Elemente mit einer Zahl ein, sagen wir fünf. Und wir brauchen auch eine Schrift, ein fantastisches Symbol. Es sollte FAS sein. Belle. Lassen Sie uns den Listeneintrag dreimal duplizieren. Ändern Sie dann die Anzahl der Benachrichtigungen und auch die Klassennamen. Für den zweiten füge ich hier sieben ein. Was den Klassennamen angeht, benötigen wir einen FASFA-Umschlag Für den nächsten brauchen wir einen. Der Klassenname, FASFA Coke. Was den letzten Punkt angeht, werde ich die Benachrichtigung überhaupt loswerden . Lass hier einfach Font Awesome Icon Mit Klassen, FAS, FA, Dash, Dash Off In Ordnung, das war's mit der Seitenleiste. Wir sind fast fertig mit dem HTML-Markup. Das einzige, was wir tun müssen, ist sich um den Hauptbereich zu kümmern , in dem wir eigentlich nur die Überschrift mit dem Vollbild-Hintergrundbild haben werden Überschrift mit dem Vollbild-Hintergrundbild also direkt nach den Navigationselementen Lassen Sie uns also direkt nach den Navigationselementen diesen Abschnitt öffnen und dem Clusternamen den Hauptabschnitt zuweisen. Dann brauchen wir darin ein Header-Element mit dem Klassenheader. In der Kopfzeile haben wir also nur eine einzige Überschrift mit dem Klassennamen, Überschrift mit dem Text-Dashboard. Okay, endlich sind wir mit dem HTML-Markup fertig , die benötigten Elemente sind erstellt und jetzt ist es an der Zeit, etwas CSS zu schreiben Öffnen wir die Datei style.css. Erstellen Sie zunächst einige Reset - und tatsächlich gängige Styles. Wählen wir alle Elemente mit einem Sternchen aus. Also werde ich Marge und Padding zurücksetzen. Lassen Sie uns beide auf Null setzen. Außerdem haben wir viele Listenelemente und Links. Also werde ich ihre Standardstile loswerden, ohne Listenstil und ohne Textdekoration Danach definieren wir die Schriftfamilie für jedes Element Ich werde eine Schriftart namens Slideshow 27 pixels serif verwenden. Lassen Sie uns abschließend die Standardgliederung loswerden. In Ordnung, das war's mit den gängigen Stilen. Während des gesamten Projekts werden wir ein ROM als Maßeinheit verwenden. Standardmäßig entspricht eine Rampe 16 Pixeln, da die Schriftgröße von HTML 16 Pixeln entspricht. Eigentlich möchte ich ein RAM in zehn Pixel umrechnen , weil ich finde, dass das bequemer und einfacher zu berechnen ist. Um das zu erreichen, müssen wir die Schriftgröße des HTML-Codes auf 62,5% reduzieren des HTML-Codes auf 62,5% Jetzt entspricht die Schriftgröße von HTML zehn Pixeln. Daher entspricht eine Rampe ebenfalls zehn Pixeln. In Ordnung? Während dieses Projekts werden wir mehrmals verschiedene Farben verwenden. Und um diesen Prozess dynamischer zu gestalten, werde ich CSS-Variablen verwenden. Wir werden die Farbwerte in CSS-Variablen speichern. Und wir werden diese Variablennamen verwenden. Um die Variablen für den globalen Geltungsbereich zu erstellen, müssen wir eine Route auswählen. Dann müssen wir Variablennamen mit den richtigen Werten definieren . Der erste wird pfirsichfarben sein , Hintergrundfarbe Also sollte es Tui, Tui, Tui sein. Dann werde ich diese Codezeile ein paar Mal duplizieren Codezeile ein paar und die Namen und Werte ändern. Die zweite wird die Primärfarbe sein. Beim Farbwert fünf bis vier es vier t. Als nächstes folgt die Sekundärfarbe mit den Werten 777171 Dann haben wir die Textfarbe 99393. Außerdem benötigen wir eine Hover-Textfarbe mit dem Wert p db88. Und die letzte wird eine aktive Symbolfarbe mit einem Wert bis 77 sein . In Ordnung? Jetzt zeige ich Ihnen, wie Sie diese Farben verwenden. Angenommen, wir möchten die Hintergrundfarbe für den Körper ändern . Wir müssen den Körper auswählen. Dann müssen wir ihm eine Hintergrundfarbe zuweisen. Jetzt müssen wir die Funktion var verwenden, die für Variable steht. In der Klammer müssen wir den Namen der Variablen angeben Sagen wir Haupthintergrundfarbe. Ich meine pfirsichfarbene Hauptfarbe. Wie Sie sehen können, der Hintergrund des Körperelements geändert. So funktionieren CSS-Variablen also. Okay, lassen Sie uns diesen Code loswerden , weil wir ihn nicht mehr benötigen. Lassen Sie uns fortfahren und der Seitenleiste einige Stile hinzufügen. Ich wähle es aus. Definieren wir seine Breite und Höhe. Eigentlich werde ich als Maßeinheit die Viewport-Breite verwenden Lassen Sie uns die Breite der Seitenleiste auf 15% des Viewports festlegen auf 15% des Viewports Wir benötigen 15 V W S für die Höhe. Ich mache es zu 100% aus dem Viewport. Also brauchen wir 100 Vh. Dann ändere die Hintergrundfarbe. Sie sehen Ihre Hauptfarbe BG. Und ich werde auch die Position der Seitenleiste korrigieren. In Ordnung, jetzt ist die Seitenleiste machbar. Und eigentlich finde ich, dass das Bild ziemlich groß ist. Und ich werde jetzt die Größe des HTML-Codes reduzieren . Am Ende des Tages werden wir uns um das Bild von CSS kümmern . Gehen wir zur Datei index.html und weisen dem Image das Attribut width mit dem Wert 50 zu. Das bedeutet, dass wir die Breite des Bildes auf 50 Pixel festgelegt haben. Als Nächstes möchte ich mich um den Hauptteil kümmern. Ich meine, den zweiten Teil der Seite , der nach der Navigation unten platziert wird. Lassen Sie uns weitermachen und es auswählen. Der Hauptabschnitt sollte den Rest der Seite einnehmen . Ich bin auf der rechten Seite. Daher definiere ich das Quietschen als 85 Viewport-Breite Außerdem müssen wir die Position definieren, da die Seitenleiste und der Hauptbereich nebeneinander platziert werden sollten Machen wir es also positionell relativ. Stellen Sie dann die linke Eigenschaft auf eine Viewport-Breite von 15 ein. Wie Sie sehen, ist das Text-Dashboard jetzt sichtbar. Das bedeutet, dass diese beiden Teile nebeneinander platziert werden. Definieren wir den Vollbildhintergrund für den Header. Wählen wir es aus. Definieren wir zunächst seine Breite und Höhe. Ich werde von den Elternteilen erben. Also weisen wir der Breite die Eigenschaft erben zu. Was die Höhe angeht, machen wir sie zu 100% aus dem Viewport. Lassen Sie uns abschließend den Hintergrund definieren. Ich werde es hier verwenden. Linearer Farbverlauf mit weißen Farben, aber mit unterschiedlicher Opazität Die erste Farbe sollte die Opazität 0,3 haben. Was den zweiten betrifft, so wird es 0,5 sein. Als Nächstes müssen wir die URL angeben. Wir haben einen Ordner namens Images. Wir müssen PNG nach Punkt auswählen. Als nächstes brauchen wir das Zentrum. Keine Wiederholung. Und schließlich müssen wir die Größe des Hintergrunds als Cover definieren . Ordnung, wie Sie jetzt sehen können, ist das Bild als Vollbild-Hintergrund festgelegt Und das einzige, was ich tun musste, war mich um die Überschriftenelemente zu kümmern. Also lass uns weitermachen und es auswählen. Ich platziere es in der Mitte. Dafür. Definieren wir diese Position als absolut. Dann setzen Sie die Spitzenposition auf fünf Prozent fest. Dann brauchen wir 50 Prozent übrig. Und schließlich müssen wir Transform mit der Übersetzungsfunktion verwenden , um das Element perfekt an das Element zu senden. Wir müssen hier x übersetzen , weil wir die Elemente entsprechend der X-Achse bewegen müssen Und das ist der Wert, den wir hier weitergeben müssen, -50%. Ordnung, die Überschrift ist also zentriert, und jetzt werde ich sie besser aussehen lassen Lassen Sie uns weitermachen und die Schriftgröße erhöhen. Mach 12 Rahm draus. Ändere die Farbe, mach es weiß. Schaffen Sie dann zum Schluss etwas Abstand zwischen den Buchstaben. Verwenden Sie einen Buchstabenabstand mit dem Wert one rem. Okay, schauen wir uns den Hauptteil an. Jetzt müssen wir zur Seitenleiste zurückkehren . Lassen Sie uns weitermachen und mithilfe von Polsterungen etwas Platz in der Box schaffen mithilfe von Polsterungen etwas Platz in der Box Ich werde das Padding oben und unten auf 1,5 Rem und auf ein Rem auf links und rechts einstellen . Und um die gleiche Größe der Box beizubehalten, müssen wir Boxsizing With value border-box verwenden With value Okay, die Seitenleiste besteht also aus mehreren Teilen. Und ich beginne mit einer Karte, auf der wir ein Bild, einen Titel und einen Untertitel haben Wählen wir eine Karte aus und machen sie zu einem flexiblen Container. Dafür brauchen wir Display Flex. Jetzt kümmere ich mich um das Bild. Wie Sie wissen, definieren wir die Breite anhand des HTML-Codes. Und eigentlich werde ich es loswerden. Wählen Sie dann den Image-Klassennamen admin image aus. Definieren Sie seine Breite als Phi-Parameter. Und ich werde es auch leicht abgerundet machen, indem ich den Randradius mit dem Wert 0,5 rem verwende Randradius mit dem Wert 0,5 In Ordnung, das war's mit dem Bild. Lassen Sie uns weitermachen und den Kartenkörper auswählen , der tatsächlich den vollständigen Namen des Untertitels enthält Also werde ich mit Margin etwas Platz auf der linken Seite schaffen . Ordnen wir einem Rem zwei zu. Als Nächstes verwende ich erneut Flexbox, um diese beiden Elemente auszurichten Lassen Sie uns mithilfe von Display-Flaggen einen Flexcontainer für den Kartenkörper erstellen. Dann müssen wir die Richtung ändern. Wir brauchen eine Kolumne. Um etwas Platz zwischen den Gegenständen zu schaffen. Wir müssen Inhalte begründen. Raum um uns herum. Der vollständige Name und der Untertitel sind aufeinander abgestimmt. Lass uns weitermachen und sie besser aussehen lassen. Ich fange mit dem Kartentitel an. Wählen wir es also aus. Ändere die Schriftgröße, mach es zu Ram. Außerdem brauchen wir etwas Platz auf der rechten Seite. Lassen Sie uns es mit dem rechten Rand erstellen. Drei Rems. Dann ändere die Farbe. Sie sehen Ihre Steuerfarbe. Und schließlich den Buchstabenabstand mit dem Wert 0,1 Zeile mit dem Titel verwenden wir sind fertig. Und zum Schluss kümmern wir uns um den Untertitel. Ausgewählt. Ändern Sie die Schriftgröße, machen Sie 1,8 RAM daraus und ändern Sie auch die Farbe. Ich werde deine Sekundärfarbe verwenden. Okay, das war's mit der Karte der Elemente. Sieh gut aus. Als nächstes folgt die Suche als erfüllt. Also lass uns weitermachen und uns darum kümmern. Wählen wir ein Formularelement aus. Es hat ein Suchformular für Klassennamen. Zuerst werde ich mit Margin etwas Platz schaffen. Lassen Sie uns die Marge auf setzen, um oben zu laufen. Null auf der rechten Seite. Ein Rem unten und Null auf der linken Seite. Um die Eingabe und die Schaltfläche richtig auszurichten, erstellen wir dann die Eingabe und die Schaltfläche richtig auszurichten, mithilfe von Display Flex einen Flex-Container für Formularelemente . Und zentrieren Sie die Elemente auch vertikal, indem Sie die Elemente mittig ausrichten. In Ordnung, lassen Sie uns weitermachen und beide Elemente stylen. Ich fange mit der Eingabe an. Es ist also ausgewählt. Definieren Sie seine Breite und Höhe. Ich werde die Breite auf 200 Prozent einstellen. Was die Höhe angeht, lassen Sie uns vier Widder daraus machen und die Hintergrundfarbe ändern Verwende deine Primärfarbe. Ordnung, fügen wir der Eingabe einige weitere Stile hinzu Ich werde die Standardgrenze loswerden. Es wird kein Rahmen verwendet. Machen Sie auch einen abgerundeten Randradius mit einem Wert von 0,5 rem Als Nächstes lassen Sie uns mithilfe von Padding etwas Platz in den Eingaben schaffen mithilfe von Padding etwas Platz in den Eingaben Ich setze es oben und unten auf Null und rechts und links auf einen Rem. Erhöhen Sie dann die Schriftgröße und machen Sie 1,6 RAM daraus. Ändern Sie die Farbe, verwenden Sie Ihre Textfarbe. Und schließlich schaffen Sie einen gewissen Abstand zwischen den Buchstaben mithilfe des Buchstabenabstands, Rampe 0,1. Ordnung, wie Sie sehen können, sieht die Eingabe gut aus und wir sind fertig damit Als nächstes müssen wir uns um das Suchsymbol kümmern. Ich werde es in den Eingängen platzieren, ich meine, in der rechten Ecke. Lassen Sie uns also weitermachen und die Schaltfläche Suchen auswählen. Lassen Sie uns zunächst die Standardstile loswerden. Ich werde die Hintergrundfarbe transparent machen. Und entfernt auch den Standardrahmen ohne Rahmen Um das Symbol auf die linke Seite zu verschieben, verwende ich Transform mit der Funktion Translate X. Fügen wir hier minus 150 Prozent ein. Okay, das Icon ist also richtig platziert und das einzige, was ich tun musste, ist das I-Element zu stylen. Also lass uns weitermachen und es auswählen. Ich werde es mit der Schriftgröße vergrößern. Machen wir zwei Rems draus und ändern auch die Farbe Du siehst deine Sekundärfarbe. Richtig? Das war's mit dem Formularelement. Jetzt müssen wir weitermachen und anfangen, an der Liste zu arbeiten. Lassen Sie uns weitermachen und die Hauptliste mit dem Klassennamen auswählen . Nicht zuletzt werde ich diesen Bereich oben mithilfe von Margin erstellen. Machen wir drei Rems draus. Wählen Sie dann LI-Elemente und schaffen Sie am oberen und unteren Rand etwas Platz, der zwei Rampen zugewiesen ist Und dann Null auf der linken und rechten Seite. Richtig? Das war's mit den LI-Elementen. Jetzt fängt es an, den Link anzupassen. Lassen Sie uns weitermachen und es auswählen. Ich werde die Breite auf hundert Prozent festlegen. Dann. Machen Sie es mit Display Flex zu einem flexiblen Behälter. Zentrieren Sie Elemente auch vertikal, indem Sie „Elemente mittig ausrichten“ verwenden. Und schließlich ändere die Farbe. Lassen Sie uns Ihre Textspalte verwenden. Schritt für Schritt. Wir machen gerade Fortschritte. Die Artikel sind deutlich kleiner, da sie nur zehn Pixel groß sind. Lassen Sie uns also weitermachen und die Span-Elemente auswählen, die einen Cluster-Naviglinktext Ich werde die Schriftgröße erhöhen. Machen wir 1,8 RAM draus. Und schaffen Sie auch etwas Platz auf der linken Seite, indem Sie einen Rem nach links aufpolstern Wie Sie sehen können, sind die Pfeile und die Gegenstände zu nahe beieinander platziert. Wir müssen die Pfeile auf die rechte Seite bewegen. Eigentlich können wir das auf verschiedene Arten tun , aber der beste Weg für uns ist, die Flexbox-Eigenschaften namens Flex Grow zu verwenden , die gleich eins sein sollten Mit dieser Eigenschaft nimmt das Element den gesamten verfügbaren Platz im Flex-Container ein. Ordnung, lassen Sie uns weitermachen und uns um die Font Awesome-Icons kümmern, die vor den Objekten platziert sind Wählen wir sie also aus. Wir müssen den Nav-Link auswählen, gefolgt von Ionen. Und wir müssen CSS-Pseudoklassen verwenden, die First-Child genannt werden. Stellen wir Breite und Höhe ein, beide auf zwei Rems Und ändere auch die Hintergrundfarbe. Ich werde deine Hauptspalte verwenden. Wie Sie sehen können, müssen wir die Symbole in der Box zentrieren. Verwenden wir dafür Flexbox. Wir brauchen Display Flex. Und dann müssen wir die Elemente auch horizontal und vertikal zentrieren. Verwenden wir also das Justify-Content Center und das Alignment Items Center Ordnung, wie Sie jetzt sehen können, sind die Symbole perfekt zentriert Das einzige, was ich tun möchte, ist, etwas Platz in der Box zu schaffen und sie auch abgerundet zu machen. Verwenden wir also Polsterung. Wir werten Punkt auf RAM und Grenzradius ab, welcher Wert? 0,3 lief. erzeugen wir einen kleinen Schwebeeffekt Wenn wir den Mauszeiger über das Objekt bewegen, wollte ich die Farbe des Symbols ändern Wählen wir es also aus. Wir brauchen jetzt Link hover. Andererseits verbinde ich mich mit der ersten Kinder-Pseudoklasse. Lass uns die Farbe ändern, sie aktiv machen , ich kann sie anrufen. Verwenden Sie auch Transition, um den Effekt intelligenter zu gestalten. Wir müssen deine Farbe mit einer Dauer von 0,2 Sekunden weitergeben. Okay, wenn wir also den Mauszeiger über die Gegenstände bewegen, ändern sie ihre Farbe Schließlich möchte ich mich um die Pfeile kümmern. Ich werde sie nach links verschieben und auch ihre Größe erhöhen. Wählen wir sie also aus. Wir brauchen wieder einen Nav-Link. Dann I element, gefolgt von der Pseudoklasse Last-Child . Lassen Sie uns auf der rechten Seite etwas Platz schaffen, indem Sie den rechten Rand verwenden, 2,5 Rem. Und erhöhen Sie auch die Schriftgröße, machen Sie sie 1,6 rund. Okay, mit den Hauptlistenpunkten sind wir fertig und jetzt müssen wir uns um die Drop-down-Menüs kümmern Lassen Sie uns sie zuerst stylen. Wählen Sie die Listenelemente mit ClassName Sub Novelist aus. Definieren wir die Breite, machen sie zu 90 Prozent. Und habe die Elemente auch mit Margin-Left, dem Wert R0, auf die rechte Seite gelegt mit Margin-Left, dem Wert R0, auf die Okay, als Nächstes werde ich etwas Abstand zwischen den Objekten schaffen. Wählen wir also LI-Elemente mithilfe des Clustering-Subintervalelements Ich definiere den Rand als 0,5 RAM oben und unten und Null auf der linken und rechten Seite. Als nächstes müssen wir uns um das Link-Element kümmern. Also lass uns weitermachen und es auswählen. Ändern Sie die Schriftgröße. Ich mache 1,5 Rem draus. Und ändere auch die Farbe. Verwenden Sie hier die Textspalte. Die Artikel sehen also viel besser aus. Und als Nächstes erstelle ich einen Hover-Effekt. Beim Schweben. Ich möchte die Farbe der Artikel ändern. Wählen wir also den Link aus und bewegen Sie den Mauszeiger. Dann ändere die Farbe. Lassen Sie uns hier die Farbe des Hover-Textes verwenden. Und außerdem brauchen wir einen Übergang mit Farbe und mit der Dauer 0,2 s. Okay, mit den Dropdown-Items sind wir also fast fertig Wir müssen nur ein paar Sterne zu den Kreisen hinzufügen. Lassen Sie uns also weitermachen und Elemente auswählen. Sie benötigen einen Sub-Novel-Link. I. Ändern Sie anschließend die Schriftgröße. Mach einen RAM draus. Schaffen Sie auch etwas Platz auf der rechten Seite, indem Sie Rand mit dem Wert 0,5 rem verwenden. Als nächstes müssen wir unseren Effekt erzeugen. Wählen wir den Link mit der Maus aus, gefolgt vom I-Element, und ändern Sie die Farbe Benutze hier, aktiv kann ich anrufen. Zum Schluss müssen wir noch einmal die Farbe und die Dauer 0,2 Sekunden ändern. In Ordnung, Some. Das war's mit der Liste. Sie sind gestylt, sehen gut aus. Und jetzt müssen wir weitermachen und den letzten Teil der Seitenleiste anpassen, die untere Liste ist Lassen Sie uns also weitermachen und UL-Elemente auswählen. Es hat eine Clustering-Unterliste. Definieren wir zunächst seine Breite. Ich werde es zu 100 Prozent schaffen. Und ändere auch die Hintergrundfarbe. Benutze deine Farbe, Primärfarbe. Die Liste sollten wir unten in der Seitenleiste platzieren? Daher müssen wir seine Position definieren. Ich werde es absolut machen. Und um es dann ganz unten zu platzieren, müssen wir eine Button-Eigenschaft auf Null setzen. In Ordnung? Die Liste ist also richtig positioniert . Als Nächstes werde ich etwas Platz in der Box schaffen. Außerdem müssen wir die Elemente horizontal in einer Reihe platzieren . Wir brauchen also eine Polsterung oben und unten, 0,5 Rem und Null auf der linken und rechten Seite Als nächstes müssen wir Flexbox verwenden Wir brauchen Display Flex. Und um einen gewissen Abstand zwischen den flexiblen Elementen zu schaffen, verwenden wir „Justify Content with the values pace around“. Okay? Die Elemente sind also gut angeordnet, aber wie Sie sehen können, haben wir auf der linken Seite der Liste etwas Platz . Also werde ich die gesamte Liste auf die linke Seite verschieben. Verwenden wir dazu Transform mit der Funktion translate x. Und als Wert geben wir minus eine Wiederholung ein In Ordnung? Das war's also mit der Ausrichtung der Liste. Jetzt werde ich die Symbole und auch diese Musterelemente, die für die Benachrichtigungen erstellt wurden, anpassen diese Musterelemente, die für die . Lassen Sie uns also mit den Symbolen beginnen. Wählen Sie den Link zur unteren Liste, gefolgt vom I-Element. Lassen Sie uns die Schriftgröße erhöhen, 1,6 RAM daraus machen und auch die Farbe ändern. Du siehst deine Sekundärfarbe. Jetzt sehen die Icons viel besser aus. Ich werde hier einen kleinen Schwebeeffekt hinzufügen. Ich möchte die Farbe der Symbole ändern, wenn Sie mit der Maus darüber fahren. Wählen wir also Link mit dem Mauszeiger aus. Und dann Elemente. Ändere die Farbe. Sie sehen Ihre aktive Symbolfarbe. Und verwende auch Transition mit der Farbe. Und mit einer Dauer von 0,3 s. Wenn wir also den Mauszeiger über die Symbole bewegen, ändern sie ihre Farbe Mit den Symbolen sind wir also fertig. Jetzt werde ich hier einige Elemente dieser Spanne nehmen. Lassen Sie uns also weitermachen und sie anhand der Linkspanne in der unteren Liste auswählen . Zuallererst werde ich die Schriftfamilie ändern. Verwenden wir hier eine Schriftart namens Roboto Slab Serif. Außerdem werde ich die Schriftstärke erhöhen , weil ich Span etwas fetter machen möchte Span etwas fetter machen Benutze hier 600. Ändern Sie dann die Schriftgröße und machen Sie daraus ein RAM. Und schließlich ändere die Farbe, mache sie weiß. In Ordnung? Diese Zahlen sollten also in der oberen rechten Ecke der Symbole platziert werden . Also lasst uns weitermachen und uns um ihre Position kümmern. Ich werde es absolut machen. Dann, um die Position anhand des übergeordneten Elements zu definieren , das in unserem Fall ein Link ist. Wir müssen die Position der Eltern relativ machen. Lassen Sie uns also weitermachen und den Link selbst auswählen und ihm die relative Position zuweisen. Danach definieren wir die oberen und die richtigen Eigenschaften. Erreichen Sie die Spitzenposition -100 Prozent. Was die richtige Position angeht, machen wir sie auf -50 Prozent Okay, also die Spanelemente sind positioniert und jetzt möchte ich für jede Nitrifikation einen anderen Hintergrund erstellen jede Nitrifikation Definieren wir dazu die Eigenschaften Breite und Höhe. Ich werde beide zu einem Punkt für RAM machen. Und füge hier auch eine temporäre Hintergrundfarbe hinzu, sagen wir Rot. Jetzt müssen wir diese Hintergründe abgerundet machen. Und ich möchte diese Zahlen auch in der Mitte platzieren , damit sie gerundet werden. Verwenden wir den Grenzradius mit einem Wert von 50 Prozent. Sie für die Zentrierung, Verwenden Sie für die Zentrierung, die Zahlen, Flexbox Wir brauchen Display Flex und dann Justify-Content Center und Alignment Items Center Ordnung, eigentlich sind wir fast fertig mit den Benachrichtigungen Wir müssen nur die Hintergrundfarbe ändern und sie für jede Höhe anders gestalten. Also lasst uns den roten Hintergrund loswerden. Um das Element dann separat auszuwählen, verwende ich einen Child Selector, bei dem es sich um eine Pseudoklasse handelt Wählen wir also das unterste Listenelement gefolgt vom n-ten Kind. Eigentlich ist das eine Funktion. In die Klammer als Argument füge ich also die Nummer des Elements ein, eins. Dann sollte span folgen. Als Hintergrundfarbe. Ich werde CFA 012 verwenden. Lassen Sie uns diesen Code zweimal duplizieren. Ändere die Zahl, die wir hier benötigen, auf die Farbe. Verwenden wir 54154 Was den dritten Punkt betrifft, müssen wir E behandeln, zwei bis sieben bis sieben In Ordnung, das war's also mit einem Design. Endlich sind wir fertig. Als nächstes müssen wir uns um die Funktionalität kümmern. Und zuallererst werde ich an der Hamburger-Speisekarte arbeiten. Lassen Sie uns weitermachen und dem Menüsymbol einige Sterne hinzufügen. Im Moment ist es nicht sichtbar. Wählen wir es also aus. Das erste, was ich tun musste, war es sichtbar zu machen. Definieren wir also Breite und Höhe. Mache beide zu 3,5 Rem. Und ändere auch die Farbe, die Hintergrundfarbe macht es weiß. Wie Sie sehen können, befindet es sich standardmäßig in der oberen linken Ecke. Und jetzt müssen wir es in der oberen rechten Ecke platzieren. Definieren wir also seine Position und backen wir ihn absolut. Und dann die rechten und oberen Positionen setzen, beide auf Null. Okay, das Symbol ist also richtig platziert. Als Nächstes zeige ich die Linien an. Wählen wir sie also mit einem gemeinsamen Klassennamen, einer Linie, einer definierten Breite und Höhe aus. Ich setze die Breite auf 2,5 g. Was die Höhe angeht, lass uns 0,3 rem draufsetzen und auch die Hintergrundfarbe ändern. In diesem Fall verwende ich Sekundärfarbe. Okay, so wie die Z-Linien sind, sind alle sichtbar, aber im Moment sind sie zu nahe beieinander platziert Wir brauchen etwas Platz zwischen ihnen. Und wir müssen sie auch in die Mitte der Box legen. Um das zu tun, werde ich Flexbox nicht verwenden. Ich möchte dasselbe mit Positionen tun. Lassen Sie uns also zwei Linienpositionen absolut zuweisen. Dann wähle ich jede der Zeilen einzeln aus. Fangen wir mit Zeile eins an. Nehmen Sie seine Spitzenposition ein. Ein Punkt zum RAM. Dann werde ich es zweimal duplizieren. Wir brauchen hier die Linie zu S4, der obersten Position. Machen wir 1,8 RAM draus. Was die dritte Zeile betrifft, müssen wir Position 2.4 angeben. Wie Sie sehen können, haben wir jetzt Platz zwischen den Linien. Und um sie zu zentrieren, verwende ich Polsterung Tatsächlich entspricht die Größe des Leerzeichens einem RAM, da die Breite des Symbols 3,5 rem und die Breite der Linie 2,5 Runden beträgt. Damit die Linien perfekt zentriert sind, müssen wir den Padding auf 0,5 rem einstellen Im Moment ist die Größe der Box vergrößert. Und um das zu beheben, müssen wir Box-Sizing verwenden Grenzbox. Befreien Sie sich schließlich von der weißen Hintergrundfarbe. Ordnung, das Menüsymbol ist entworfen und jetzt müssen wir es zum Laufen bringen Ich meine, wenn wir darauf klicken, müssen wir es in x umwandeln. Zur besseren Demonstration möchte ich einige Stile für alle drei Zeilen separat definieren . Ich meine, wir werden die aktuellen Styles überschreiben, aber irgendwann werden wir eine neue Klasse verwenden, die mithilfe von JavaScript bei einem Click-Event hinzugefügt wird mithilfe von JavaScript bei einem Click-Event hinzugefügt Okay, lass uns den Code schreiben und es wird viel klarer werden Wählen wir erneut Zeile eins aus. Zeile eins und Zeile. Wir werden ihre Plätze so austauschen, dass sie rotieren. Was die Leitung angeht , sie wird sich verstecken. Für die erste Zeile müssen wir die Position Top als 2,4 RAM definieren . Dann müssen wir mit der Drehfunktion mit dem Wert -40 Grad transformieren der Drehfunktion mit dem Wert -40 Grad Wählen Sie dann eine Linie aus, der Ihre Opazität auf Null zugewiesen wurde. Als Armutsgrenze drei werde ich diesen Code kopieren und den Kla 23. Projekt 20 - Hamburger Menü: In diesem Video werden wir das Hamburger-Menü mit einigen netten Effekten erstellen . Dieses Projekt wird auf Basis von HTML, CSS und etwas JavaScript erstellt . Wie Sie sehen können, haben wir hier eine Landingpage mit Vollbild-Hintergrundbild Und in der oberen rechten Ecke befindet sich das Hamburger-Menüsymbol. Wenn ich darauf klicke, wird das Symbol in x umgewandelt. Und jetzt wird ein Teil von der rechten Seite angezeigt. Hier haben wir ein paar Navigationselemente und wenn ich mit der Maus über sie fahre , bekommen wir nette Hover-Effekte In diesem Video erfahren Sie, wie Sie all diese Dinge erstellen. Lass uns weitermachen und mit dem Aufbau unseres Projekts beginnen . Im VS-Code. Ich habe ein paar Dateien für HTML, für CSS und für JavaScript. Und hier haben wir auch einen Ordner namens Images , in dem wir ein Bild als Hintergrund für die Ausleihseite haben. Sie können Starterdateien über den Link in der Beschreibung herunterladen . Okay, lassen Sie uns weitermachen und die Datei index.html öffnen. Ich habe die Grundstruktur des HTML-Dokuments vorbereitet. Innerhalb der Kopfelemente habe ich zwei Links. Eine für Google-Schriftarten, ich werde eine Schrift namens Doses und eine andere für CSS-Dateien verwenden . Außerdem habe ich hier ein Script-Tag eingefügt, um die JavaScript-Datei zu verlinken. Okay, fangen wir an, HTML-Markup zu erstellen, offene Entwicklungen, das ein Container sein wird Es ist also seiner Klasse Container zugewiesen . Dann öffne ich im Container Elemente, die den gesamten Inhalt von Navbar umfassen Weisen wir ihm die Klasse navbar zu. Dann erstelle ich darin zuerst ein Hamburger-Menüsymbol. Öffnen Sie also die Entwicklung und weisen Sie ihr einen Klassennamen zu, Hamburger-Menü. Dann füge ich in diese Div-Elemente drei Div-Elemente für drei Zeilen eines Symbols ein. Weisen wir seiner Klasse einen Namen für eine gemeinsame Styling-Linie zu. Und außerdem benötigen wir hier einen anderen Clusternamen für individuelles Styling. Richtige Zeile eins. Dann duplizieren Sie diese Zeile zweimal und ändern Sie die Klassennamen. Wir brauchen Zeile zwei, Zeile drei. Okay, das war's vorerst mit dem Menüsymbol, es ist nicht machbar, weil wir nur leere Div-Elemente ohne Stile haben nur leere Div-Elemente ohne Stile Als Nächstes erstelle ich eine Navigation. Es wird durch UL-Elemente vertreten. Lassen Sie uns ihm nicht zuletzt eine Klasse zuweisen. Fügen Sie dann LI-Elemente ein. Es sollte einen Klassengegenstand haben. Und schließlich benötigen wir Ihre Link-Elemente. Lassen Sie uns ihm einen Klassennamen als Nav-Link zuweisen und auch Ihr erstes Element einfügen. Insgesamt werde ich sieben Navigationspunkte haben. Also lass es uns sechsmal duplizieren und dann schnell den Inhalt hier über uns ändern. Diese Neuigkeiten. Als nächstes wird Galerie statt Veranstaltungen sein. Preisgestaltung. Und für den letzten fügen Sie Ihren Inhalt ein. In Ordnung, das war's also mit HTML. Es ist Zeit, mit dem Styling zu beginnen. Gehen wir zur Datei style.css. Zuerst werde ich einige Reset-Stile erstellen. Lassen Sie uns die Standardränder und den Abstand von jedem Element entfernen und den Abstand von jedem Element Wählen Sie sie mit einem Sternchen aus. Und dann geben Sie Ihre Margin Null und Padding Zero ebenfalls weiter. Dann ändere ich die Schriftfamilie für das Körperelement. Wählen wir es also aus. Und dann füge hier Schriftfamiliendosen ein, San-Serif. Als nächstes kümmern wir uns um den Container. Stellen Sie seine Breite und Höhe als Breite ein. Schreiben wir hier 100 Prozent. Was die Höhe angeht. Ich werde es auf 100 Prozent des Viewports festlegen. Also richtig, 100 pH als Hintergrund. Ich werde ein Bild erstellen. Also richtiger Hintergrund als wir hier brauchen, linearer Gradient. Ich werde drei verschiedene Farben verwenden. Der erste ist RGBA 000 und Opazität 0,4. Als nächstes schreiben wir RGBA 14848, wieder 48 und Opazität Und dann fügen Sie RGBA 167-60-7607 und Opazität 0,4 ein. Dann gibt die innere URL einen Teil der Bildbilder und wählen Sie das Bild mit dem Namen Bg Dot JPG als Position des Hintergrunds aus. Wir brauchen Center und kommen auch hier vorbei, keine Wiederholung. Und schließlich werde ich die Eigenschaft Hintergrundgröße mit dem Value-Cover verwenden . In Ordnung, die Landingpage ist fertig. Wir haben hier ein Vollbild-Hintergrundbild. Und jetzt nehme ich hier das Hamburger-Menü Wie Sie wissen, wird es aus drei Zeilen bestehen und sollte in der oberen rechten Ecke der Seite platziert werden. Wählen wir zunächst die schnelle Entwicklung aus, die einen ClassName, Hamburger-Menü hat Definieren wir seine Breite und Höhe. Ich werde mit 35 Pixeln beginnen. Was die Höhe angeht, weisen wir ihr 30 Pixel zu. Derzeit ist das Symbol immer noch nicht sichtbar. Und um das zu beheben, weisen wir ihm einen temporären Hintergrund zu, sagen wir rot. Okay, jetzt wird das Symbol standardmäßig angezeigt und befindet sich in der oberen linken Ecke. Aber wie gesagt, ich werde es in der oberen rechten Ecke der Seite platzieren . Definieren wir dazu diese Position als fest. Und dann brauchen wir die obere Position, 50 Pixel und die rechte auf 50 Pixel eingestellt ist. Jetzt kann ich in der oberen rechten Ecke verschieben. Und schließlich ändere ich den Cursor. Lass es uns klarstellen. In Ordnung, mit dem übergeordneten Div-Element sind wir fertig. Es ist Zeit, an Lichtern zu arbeiten. Lassen Sie uns weitermachen und sie mithilfe der gemeinsamen Klassennamenzeile auswählen . Stellen Sie dann die Breite auf 100 Prozent ein. Bedeutet, dass die Linie die gesamte Breite des übergeordneten Elements einnimmt , also 35 Pixel. Als Nächstes definiere ich die Höhe. Machen wir drei Pixel daraus und ändern wir auch die Hintergrundfarbe. Du siehst deine Farbe Schokolade. Okay, jetzt sind Linien sichtbar, aber sie kleben aneinander und wir müssen sie trennen. Um das zu erreichen, werde ich Flexbox verwenden Lassen Sie uns einen Flex-Container für das Hamburger-Menü erstellen. Dafür brauchen wir Display Flex. Ändern Sie dann die Biegerichtung. Wir müssen Linien als Spalte platzieren. Wir brauchen also eine Spalte mit flexibler Richtung. Und schließlich, um etwas Abstand zwischen ihnen zu schaffen , verwenden Sie justify contents. Werte bewegen sich im Umlauf. Okay, jetzt sind die Linien getrennt und wir können den roten Hintergrund tatsächlich loswerden. In Ordnung, das Menüsymbol ist bereits erstellt und bevor wir es zum Laufen bringen, werde ich die Navigationsleiste anpassen Wir sollten es auf der rechten Seite platzieren. Lassen Sie uns also weitermachen und das Navigationselement mit dem Klassennamen navbar auswählen Navigationselement mit dem Klassennamen navbar Definieren wir zunächst seine Breite und Höhe. Ich werde die Breite auf 300 Pixel festlegen. Was die Körpergröße angeht, machen wir es zu 100 Prozent. Dann ändere die Hintergrundfarbe. Lass uns deine Farbe 26262 verwenden. Okay, um den aktuellen Balken auf der rechten Seite zu platzieren , definieren wir diese Position als fest. Und dann machen Sie beide Eigenschaften oben und rechts auf Null. In Ordnung, die Navbar ist also richtig positioniert. Jetzt kümmere ich mich um die Position der Navigationselemente. Ich möchte sie perfekt in der Mitte der Navigationsleiste platzieren der Mitte der Navigationsleiste Und dafür verwenden wir Flexbox genau hier. Flex anzeigen. Um Elemente horizontal zu zentrieren , sollten Sie justify-content verwenden Zentrum. S für vertikale Zentrierung. Verwenden Sie „Elemente ausrichten, zentrieren“. Okay, also die Gegenstände werden in der Mitte platziert. Und das Letzte, was ich in Bezug auf die Navbar tun möchte , ist, ihre Form anzupassen Und ich werde es mit dem Grenzradius machen. Tatsächlich kann diese Eigenschaft vier verschiedene Werte annehmen , die vier Ecken entsprechen. Ich bin in der oberen linken Ecke, oben rechts, unten rechts und unten links So können wir verschiedene Grenzradien definieren , vier verschiedene Spalten. In diesem Fall werde ich die obere linke und untere linke Ecke anpassen . Was die restlichen Ecken angeht, werden wir sie nicht anfassen. Als Wert für den Randradius der oberen linken Ecke füge ich hier 20 Prozent Dann werden, wie gesagt, die obere rechte und die untere rechte Ecke nicht geändert. Also müssen wir hier zweimal Nullen einfügen. Und für die untere linke Ecke verwende ich 60%. Ordnung, die Form der Navigationsleiste ist also angepasst und jetzt werde ich Navigationselemente gestalten Lassen Sie uns weitermachen und UL-Elemente auswählen. Es hat einen Klassennamen. Nicht zuletzt. Ich werde Text auf der rechten Seite platzieren. Verwenden wir also Text rechtsbündig ausrichten. Als Nächstes wählen wir LI-Elemente aus. Es hat einen Klassennamen, keinen Gegenstand. Lassen Sie uns zunächst die Standardaufzählungszeichen loswerden, indem wir keine Aufzählungszeichen im Listenstil verwenden Dann schaffen Sie mit Margin etwas Platz. 25 Wochen. Okay, jetzt müssen wir die Link-Elemente auswählen, die den Klassennamen nav link Lassen Sie uns die Standardstile loswerden. Textdekoration verwenden. Keine. Dann die Schriftgröße erhöhen , auf 22 Pixel. Farbe ändern. Sie sehen Ihre Farbe E. Außerdem werde ich die Schrift mithilfe der Schriftstärke heller machen 300. Erstellen Sie dann mithilfe des Buchstabenabstands etwas Abstand zwischen den Buchstaben. Ein Pixel. Und schließlich machen Sie Text in Großbuchstaben, indem Sie die Texttransformation Uppercase verwenden . In Ordnung, das war's mit Navigationselementen. Wie du dich an das fertige Projekt erinnerst, werden wir einige Hover-Effekte erstellen den Mauszeiger bewegen, sollten wir am oberen und unteren Rand der Elemente Linien am oberen und unteren Rand der Elemente Es wird mit einem reibungslosen Übergang angezeigt. Und aus den entgegengesetzten Richtungen. Eigentlich werden wir diese Zeilen mit den Pseudoelementen „Nach“ und „davor“ erstellen mit den Pseudoelementen „Nach“ und „davor Beide werden einige gemeinsame Stile haben. Lassen Sie uns also weitermachen und beide Pseudoelemente auswählen, rechts, zuvor den Nav-Link Dann duplizieren Sie diese Zeile und ändern Sie davor und danach. Also müssen wir zuerst den Inhalt als leer definieren. Als Nächstes definiere ich die Breite und Höhe. Lassen Sie uns zu 100 Prozent mit uns anfangen. Stellen Sie dann die Höhe in Pixeln ein und ändern Sie auch die Hintergrundfarbe. Du siehst deine Farbe Schokolade. Derzeit sind Linien nicht sichtbar, da es sich um Inline-Elemente handelt und daher Breite und Höhe nicht angewendet werden Wenn wir also ihre Position als absolut definieren und dann den übergeordneten Elementen zuweisen, was nicht die relative Linkposition ist, werden beide Zeilen angezeigt. Auf einen Blick. Wir sehen hier nur eine Zeile, aber tatsächlich sind beide Linien nebeneinander angeordnet Okay, als Nächstes definiere ich eine linke Position für beide Elemente als Null. Jetzt nehmen beide Linien die gleichen Stellen ein und um sie zu trennen, müssen wir eine untere Position für hintere Pseudoelemente definieren und sie auf Null setzen Kopieren wir also diesen Selektor und weisen ihm die untere Null zu Jetzt sind beide Zeilen getrennt. Wie Sie wissen, ist die oberste Position standardmäßig auf Null gesetzt. Wenn wir es also nicht manuell definieren, das kein Problem. Aber wie dem auch sei, ich werde es definieren. Also lass uns diesen Code duplizieren. Dann verwandle nachher in vorher. Und statt unten, rechts, oben. Okay, das Letzte, was wir hier wollen, ist etwas Polsterung zu erstellen , weil das Endergebnis zu nah am Objekt liegt Lassen Sie uns dem Nav-Link-Padding oben und unten rechts drei Pixel und dann Null auf der linken und rechten Seite zuweisen rechts drei Pixel und dann Null auf der linken und rechten Seite Okay, das war's auch schon damit, dass Linien jetzt einen Schwebeeffekt erzeugen müssen Standardmäßig werde ich diese Zeilen ausblenden. Und wenn wir den Mauszeiger über die Elemente bewegen, werden diese Linien gleichmäßig aus den entgegengesetzten Richtungen angezeigt Um Linien zu verbergen, verwende ich Transform. Dann skalieren Sie x. Wir müssen es auf Null setzen. Wenn wir den Mauszeiger nun bewegen, müssen wir die Skala vergrößern und sie zu einer machen Lassen Sie uns also weitermachen und mit dem Mauszeiger den Nav-Link auswählen. Dann füge hier vorher hinzu. Duplizieren Sie diesen Selektor und ändern Sie davor und danach. Und dann füge deine Transform, Scale x mit dem Argument eins ein. Und schließlich, um den Effekt intelligenter zu machen, verwenden wir die Übergangstransformation 0,5 s. In Ordnung, wenn wir also den Mauszeiger über die Elemente werden Linien angezeigt Aber wie Sie sehen können, erscheinen sie standardmäßig von der Mitte aus. Dies passiert, weil die Eigenschaft Transform Origin standardmäßig als Sensor festgelegt ist. Also müssen wir es für beide Linien ändern. Weisen wir den Pseudoelementen den Transformationsursprung zu. Mach es richtig. Kopieren Sie dann diesen Code und fügen Sie ihn für vorherige Pseudoelemente Und statt rechts fügen wir hier links ein. Wenn wir den Mauszeiger über die Elemente bewegen, funktioniert alles perfekt Wir haben hier einen schönen Schwebeeffekt. Okay, mit der Navigation sind wir fertig. Weiter. Wir müssen dafür sorgen, dass das Hamburger-Menü funktioniert. Als erstes transformiere ich das Menüsymbol in x. Dafür müssen wir die Positionen für die erste und dritte Zeile ändern . Was den zweiten betrifft, sollte er beheizt werden. Lassen Sie uns also weitermachen und Zeile eins auswählen. Wir müssen die erste Linie um 45 Grad entsprechend der Z-Achse drehen 45 Grad entsprechend der Z-Achse Genauer gesagt müssen wir für Zeile eins Rotate Z -45 Grad verwenden Lassen Sie uns diesen Code duplizieren. Ändere den Klassennamen nach rechts, Zeile drei. Und entferne auch das Minuszeichen von hier aus. Wie gesagt, wir müssen Zeile zwei verstecken. Wählen wir es also aus und verwenden Sie Ihre Opazität Null. Wie Sie sehen können, werden Linien gedreht, aber wir haben hier kein x. Wir müssen uns um die Positionen der Linien kümmern Dafür. Ich füge hier übersetzen hinzu. Dann als Wert der X-Richtung, oder? Minus acht Pixel, S4, Y-Achse. Wir müssen deine sechs Wochen überstehen. Kopieren wir es und fügen vier Zeilen drei Statt sechs Pixeln brauchen wir hier nur minus sechs Peaks. Jetzt wird in Betracht gezogen. Das Problem ist behoben und wir haben hier x. Eigentlich ist dies nicht der Standardstatus des Icons. Wir müssen es zu x machen, wenn wir darauf klicken. Um das zu erreichen, werde ich ein bisschen JavaScript verwenden. Aber bevor wir etwas JavaScript schreiben, füge ich zwei Zeilen hinzu. Neuer Klassenname, nennen wir ihn Änderung. Dann fügen wir diese Navbar der Klasse zwei mithilfe von JavaScript hinzu. Und all diese Dinge werden passieren, wenn wir auf das Symbol klicken. Gehen wir zur Datei script.js und erstellen wir zunächst eine neue Variable, nennen wir sie Menüsymbol. Und wählen Sie dann die Entwicklungen , die einen Klassennamen haben: Hamburger-Menü. Dazu müssen wir Dokumente schreiben, Punkte, Abfragen, Selektoren und das Hamburger-Menü für Ihren Klassennamen weitergeben Hängen Sie dann den Event-Listener an das Menüsymbol an, rechts, Menüsymbol, Punkt, fügen Sie den Event-Listener Als erstes Argument müssen wir Ihren Namen der Ereignisse angeben, nämlich Clique Dass wir deine Funktion übergeben müssen, die eine Pfeilfunktion sein wird. Jetzt müssen wir zwei neue Klassen hinzufügen , die geändert werden. Zuerst erstellen wir eine neue Variable, nennen wir sie Navbar. Es sollte Dokumenten, Punkten, QuerySelector entsprechen. Lassen Sie uns Ihren Clusternamen in die Navigationsleiste einfügen. Dann innerhalb von Function, Right, Navbar und einer einfacheren Eigenschaft namens Klassenliste Jetzt denkst du vielleicht, dass wir deine Methode Adds verwenden müssen, aber in diesem Fall funktioniert es nicht denn wenn wir auf das Symbol klicken, sollte Napa eine Klassenänderung hinzugefügt werden Aber beim nächsten Klick sollte es entfernt werden. Und um das zu erreichen, müssen wir anstelle von Add eine Methode namens Toggle verwenden Lassen Sie uns die Änderung Ihres Klassennamens einfügen. Wenn wir also auf das Symbol klicken, wird es in x umgewandelt und beim nächsten Klick erhält es seinen Standardstatus. Damit sich das auf den Motor auswirkt, gehen wir zurück zur Datei style.css und weisen dem Zeilenübergang Werte 0,8 s zu . Jetzt ist eine Tatsache intelligenter geworden, aber ich denke, wir können sie noch schöner machen Anstatt Linien nur um 45 Grad zu drehen, können wir sie eine ganze Drehung machen lassen, um 360 Grad, und dann wieder um 45 Grad rotieren lassen. Also als die Werte, die wir hier eingeben müssen, Summe von 360,45, was letztlich 405 Grad ergibt Jetzt stimmen Sie also zu, dass es viel besser aussieht. In Ordnung, wir sind fast da. Die andere Sache, die Sie tun müssen, ist, standardmäßig genügend Ports auszublenden und ihn auf Click anzuzeigen Dazu ändern wir den Wert der rechten Position und machen ihn auf -300 Pixel hoch Jetzt ist Navbar versteckt. Um es von rechts nach links zu verschieben, verwende ich erneut den Klassenwechsel. Ordnen wir es dem zu, richtig, mit dem Wert Null. Wenn wir nun klicken, wird Napa angezeigt, aber als Gast müssen wir, um den Effekt schöner zu machen, um den Effekt schöner zu machen, Transition mit den Werten verwenden Als 0,8 s. Und außerdem werde ich Ihre Funktion Cubic Bezier verwenden, der wir einen benutzerdefinierten Übergang erstellen können In diesem Fall möchte ich, dass der Effekt etwas langsamer beginnt und schneller endet. Dafür gebe ich Ihre Werte 100,1 weiter. Jetzt können wir also sagen, dass alles perfekt funktioniert. Wir haben hier eine schöne und modern aussehende Navbar mit einigen coolen Effekten 24. Projekt 21 - Kreativ-Button: In diesem Tutorial werden wir eine gut aussehende Schaltfläche mit einigen coolen Effekten erstellen eine gut aussehende Schaltfläche mit einigen coolen Hier haben wir eine einzige Schaltfläche auf der Seite. Es hat einige Inhalte. Und sobald wir den Mauszeiger darüber bewegen, wird der Inhalt geändert, was einen schönen Effekt Das ist es, was wir bauen werden. Ich hoffe, es wird interessant sein. Also lass uns anfangen. Im VS-Code. Ich habe zwei verschiedene Dateien, index.html und style.css. In der HTML-Datei habe ich die grundlegende HTML-Struktur, das Hauptelement, vorbereitet . Ich habe zwei verschiedene Links, einen für Google-Schriftarten und den zweiten für style.css. Sie können diese Starterdateien jedoch über den Link in der Beschreibung herunterladen . Lassen Sie uns weitermachen und zunächst HTML-Markup erstellen. Lass uns die Entwicklung eröffnen, das wird ein Rapper. Also der Klasse BTN Wrapper zugewiesen. Dann darin die Schaltfläche Erstellen mit dem Klassennamen btn. Was den Inhalt der Schaltfläche angeht, werde ich verschiedene Span-Elemente verwenden , denn wie Sie sich erinnern, ändern wir diese Inhalte, ändern wir diese Inhalte wenn wir den Mauszeiger über die Schaltfläche Öffnen Sie also Span-Elemente mit dem Klassennamen BTN, Text und geben Sie etwas Text ein Sagen wir, erkunde mehr. Dann duplizieren Sie es. Klassenname statt eines geändert, oder? Zwei. Und ändere auch den Inhalt, oder? Es ist interessant. In Ordnung, das war's mit HTML-Markup Jetzt ist es an der Zeit, etwas CSS zu schreiben. Gehen wir also zur Datei style.css. Zunächst werde ich einige gängige Stile erstellen. Wählen Sie alle Elemente mit einem Sternchen und legen Sie Rand und Abstand auf Null fest Außerdem werde ich die Schriftfamilie für jedes Element ändern . Verwenden wir hier die Sensorik von Josephine Sans. Ordnung, als Nächstes ändere ich die Hintergrundfarbe des Körperelements Wählen wir es also und weisen seiner Hintergrundfarbe C, F, D, E Null zu. Jetzt definiere ich Breite und Höhe für den BTN-Wrapper. Eigentlich wird es die gesamte Seite einnehmen . Also lassen Sie uns jeder Breite zuweisen. Und das sind leider 100%. Was die Höhe angeht, werde ich sie auf 100% des Viewports festlegen Ordnung, als Nächstes spielen wir den Button in der Mitte der Seite ab Und das werde ich mit Positionen und Transform Translate machen. Wählen wir die Schaltfläche aus. Stellen Sie seine Position als absolut ein. Dann werde ich es um 50 Prozent von oben nach unten verschieben . Lassen Sie uns also die Spitzenposition auf 50 Prozent festlegen und sie ebenfalls um 50 Prozent von links nach rechts verschieben. Um die Taste perfekt in die Mitte zu bringen, müssen wir schließlich Transform Translate verwenden. Und wir müssen Ihre -50 Prozent überschreiten. Und dann wieder -50 Prozent. Ordnung, sobald die Schaltfläche perfekt auf der Seite zentriert ist , werde ich sie anpassen Definieren wir seine Breite und Höhe. Mit 250 Pixeln einstellen. Was die Höhe angeht, weisen wir sie 70 Pixeln zu. Dann ändere den Hintergrund. In diesem Fall verwende ich einen linearen Farbverlauf mit drei verschiedenen Farben. Und ich werde auch die Richtung des Farbübergangs ändern . Wir werden von unten nach oben verwenden. Diese unsicheren drei verschiedenen Farben. Der erste wird 001 54c sein. Der nächste sollte 123 76e als letzter sein, oder? 234, 87f. In Ordnung, also die Hintergrundfarbe wurde geändert. Lassen Sie uns auch die Farbe des Textes ändern. Mach es weiß. Außerdem werde ich mit Border-Radius eine Schaltfläche um ihn herum erstellen Border-Radius eine Schaltfläche um ihn herum Wir werten 50 Pixel ab. Dann entfernen Sie den Standardrahmen. Außerdem werde ich die Standardkontur entfernen , denn wenn wir auf die Schaltfläche klicken, erscheint die blaue Linie. Lassen Sie uns die Gliederung also als „Keine“ festlegen. Ändern Sie auch den Typ des gröberen, machen Sie ihn zum Zeiger. Und zum Schluss erzeugen Sie einen Schatteneffekt. Verwenden Sie Box-Shadow mit den Werten 015 Pixel, zwei Pixel. Und als Farbe, richtig, RGBA 000.5. In Ordnung, also im Moment geht es nur um den Button. Es sieht schon gut aus und jetzt müssen wir uns um den Inhalt kümmern. Wählen wir also Span-Elemente aus. Erhöhen Sie zunächst die Schriftgröße und machen Sie sie auf 18 Pixel. Dann wandle den Text in Großbuchstaben um und schaffe einen gewissen Abstand zwischen den Buchstaben, indem du den Buchstabenabstand verwendest , wobei der Wert eins am höchsten In Ordnung, jetzt ist es an der Zeit, die Hover-Effekte zu erstellen. Aber vorher werde ich Span-Elemente positionieren. Zuerst werde ich an der ersten arbeiten Wählen Sie sie aus und legen Sie ihre Position als absolut fest. Vorerst möchte ich das zweite Spanelement ausblenden, um unseren Arbeitsprozess komfortabler zu gestalten. Wählen wir es also aus und weisen es jedem Display zu, keins. Okay, definieren wir die Breite der ersten Spanelemente und machen sie zu 100 Prozent Platzieren Sie es dann in der Mitte des Knopfes. Dafür brauchen wir eine Spitzenposition mit einem Wert von 50 Prozent. Dann brauchen wir links Null. Um die Elemente perfekt zu zentrieren, müssen wir nun erneut Transform verwenden. Aber in diesem Fall übersetze mit der Y-Richtung und mit einem Wert von -50 Prozent. In Ordnung, das war's mit den ersten Span-Elementen. Jetzt definiere ich eine Position für den zweiten. Standardmäßig platziere ich es unter dem Button. Wenn Sie den Mauszeiger dann bewegen, wird es nach oben bewegt und als Inhalt der Schaltfläche angezeigt Lassen Sie uns von hier aus Display None loswerden. Tatsächlich müssen wir ähnliche Eigenschaften auch für das zweite Spanelement verwenden . Also kopiere ich diese Eigenschaften von hier und füge sie für den zweiten Bereich ein. Wie Sie sehen, nehmen beide Spanelemente den gleichen Platz ein, aber wir brauchen ihn nicht. Wie gesagt, ich werde die zweite Spanne unten unter dem Button platzieren . Und für sie sollten wir den Wert für die oberste Position ändern und ihn auf 150 Prozent erhöhen. In Ordnung, alles ist bereit, es ist Zeit, einen Hover-Effekt zu erzeugen Beim Schweben. Ich gehe mit dem ersten Text nach oben. Ich meine, es sollte versteckt werden. Was die zweite Spanne angeht, wird sie ebenfalls nach oben verschoben und als Inhalt des Hinterns angezeigt. Wählen wir also die Schaltfläche mit dem Mauszeiger aus. Wählen Sie dann die ersten Spanelemente aus. Also werde ich das erste Spanelement um 100 Prozent nach oben verschieben . Wir müssen also die Spitzenposition auf -100% festlegen. Wenn ich also den Mauszeiger über den Button bewege, wird der Text nach oben verschoben Jetzt müssen wir auch diese zweite Spanne verschieben. Lassen Sie uns diesen Code tatsächlich duplizieren. Ändere den Klassennamen. Wir brauchen dich auf S4, der obersten Position. Wir müssen es auf 50 Prozent festlegen. Wenn ich also den Mauszeiger über den Button bewege, werden wir alle oder sie dieses Ergebnis erhalten Jetzt müssen wir diesen Effekt nur noch anpassen. Ich meine, ich werde einen Übergang mit den Werten top und 0,2 s hinzufügen Übergang mit den Werten top und 0,2 . Jetzt sieht der Effekt viel besser und das Einzige, was ich tun muss, ist den Text zu verstecken , solange sie sich außerhalb des Buttons befinden. Dafür verwende ich Overflow Hidden. In Ordnung, jetzt war alles in Ordnung. Und eigentlich sind wir mit diesem kleinen Projekt fertig 25. Projekt 22 - Diashow: Hallo und willkommen zu unserem neuen Video , in dem wir eine Diashow erstellen werden Bevor wir mit dem Bau der Projekte beginnen, werde ich beschreiben, worum es geht. Wie Sie standardmäßig sehen können, wird diese Diashow mit einigen schönen Fade-Effekten ausgeführt Hier unten haben wir eine Play-Pause-Schaltfläche. Wenn ich darauf klicke, stoppt die Diashow. Und auch auf der linken und rechten Seite werden jeweils zwei Steuerelemente oder Pfeile angezeigt . Mit ihnen können Sie diese Diashow manuell ausführen. Wenn ich auf die Play-Schaltfläche klicke und den Mauszeiger über die rechte oder linke Seite bewege, werden die Pfeile angezeigt Wenn ich auf eine von ihnen klicke, wechselt diese Diashow in den manuellen Modus Es wird nicht mehr automatisch laufen und auch der Post-Button wird in das Spiel übernommen, aber okay, lass uns weitermachen und anfangen, daran zu arbeiten. Hier auf dem Desktop habe ich einen brandneuen Ordner namens Slideshow erstellt, in dem ich einen weiteren Ordner namens Images habe Es enthält alle Bilder , die wir in diesem Projekt verwenden werden. Tatsächlich können Sie die Quelldateien über den Link in der Beschreibung herunterladen. Sie sind auf GitHub hochgeladen, oder? Lassen Sie uns weitermachen und diesen Ordner in VS Code öffnen. Ich werde drei verschiedene Dateien erstellen. Die erste wird index.html sein. Dann brauchen wir style.css und auch Skripte in der Datei dot js. Gehen Sie dann zur Datei index.html und erstellen Sie ein einfaches HTML-Dokument. Dazu müssen wir ein Ausrufezeichen setzen und dann die Eingabetaste oder die Tabulatortaste drücken Lass uns weitermachen und den Titel ändern. Ich füge deine Diashow ein. Dann verlinke ich CSS- und JavaScript-Dateien. Öffnen wir den Link-Tag. Das Hinzufügen des Attributs H referiert gibt den Namen der Datei an, style.css. dann unten, direkt über dem Öffnen Sie dann unten, direkt über dem abschließenden Body-Tag, das Script-Tag. Wir benötigen hier Quellattribute und müssen den Namen der Datei script.js angeben. Ordnung, endlich müssen wir unser Projekt im Browser ausführen Dafür verwende ich einen Live-Server, was ein großartiges Paket ist und es uns ermöglicht, das Projekt im Browser auszuführen, ohne die Seite jedes Mal zu das Projekt im Browser auszuführen, ohne die aktualisieren, wenn wir einige Änderungen vornehmen. Sie können also weitermachen und dieses Paket installieren. Um einen Live-Server zu betreiben, können Sie mit der rechten Maustaste klicken und dann „Mit Live-Server öffnen“ wählen. Ordnung, lassen Sie uns den Texteditor und den Browser ein wenig organisieren und dann mit der Erstellung des HTML-Markups beginnen Das erste Element, das wir erstellen werden, ist ein Div, das eigentlich ein Container sein wird. Es wird den gesamten Inhalt einschließen. Als nächstes brauchen wir ein weiteres Div. Es wird die Diashow selbst enthalten. Es ist also dem Slideshow-Wrapper mit dem Klassennamen zugewiesen. Danach werde ich den Linkspfeil an diese Entwicklung weitergeben . Also lasst uns weitermachen und open div wird zwei verschiedene Klassen haben. Der erste wird ein gemeinsamer Klassenname für beide Pfeile Control sein. Und dann verwende ich einen individuellen Klassennamen, Linkspfeil. Tatsächlich werden diese Pfeile manuell erstellt. Wir werden keine Icons haben. Also werde ich hier noch einen Tipp mit dem Klassenpfeil weitergeben . Und schließlich müssen wir hier zwei Linien einfügen, die durch Entwicklungen repräsentiert werden. Die erste Entwicklung sollte also Klassen haben, Zeile und Zeile eins. Lassen Sie uns diese Codezeile duplizieren und den Klassennamen, den wir hier benötigen, ändern. In Ordnung, das war's mit dem Linkspfeil. Ich dupliziere es für den Rechtspfeil und ändere die Klassennamen, die wir hier benötigen, Rechtspfeil. Was die Zeilennummern betrifft, benötigen wir 3,4. Okay, das war's mit den Pfeilen. Jetzt füge ich dazwischen die Folien ein, ich bin in den Bildern Lassen Sie uns die Entwicklungen mit ClassName-Folien eröffnen. Jedes Bild wird also von einer Entwicklung begleitet. Öffnen wir es daher mit den Klassennamen, Folie, Folie eins. Eigentlich müssen wir diese nummerierten Klassennamen verwenden , weil wir sie von JavaScript aus verwenden werden. Dann füge hier ein Bild ein. Eigentlich werde ich kein Alt-Attribut verwenden, also lass uns weitermachen und es loswerden und dann das Bild aus dem Bilderordner auswählen. Also hier ist unser Bild. Lassen Sie uns die Folie vorerst zweimal duplizieren und die Klassen - und Bildnamen darin auch auf dieser Folie ändern . Bild zwei und 3.3. Moment haben wir drei Bilder, aber am Ende des Tages können Sie so viele Bilder hinzufügen, wie Sie möchten. Es wird gut funktionieren und das Projekt nicht zum Absturz bringen. Schließlich werde ich eine Play-Pause-Schaltfläche erstellen. Öffnen wir die Entwicklungen direkt nach dem Rechtspfeil und der dem Clusternamen zugewiesenen Play-Pose. Als Play-Pause-Taste. Ich werde das Font Awesome-Symbol verwenden. Und um das zu tun, müssen wir uns den CDN-Link für Font Awesome holen den CDN-Link für Font Awesome Also lass uns weitermachen und nach Font Awesome, CDN, js suchen. Dann gehe zu diesem Link und schnapp dir dann den ersten Link. Von hier aus. Ich öffne den Link-Tag. Und dann fügen wir einen Link und das H-Referenzattribut ein. Ordnung, dann unten fügen Sie das Element mit den Klassennamen ein, FAS, f, dash, play In Ordnung, das war's mit HTML-Markup. Wir haben hier Bilder und gleich danach den Play-Button. Jetzt ist es an der Zeit, etwas CSS zu schreiben. Gehen wir zur Datei style.css. Als erstes werde ich einige Reset-Stile erstellen. Wählen wir also alle Elemente mit einem Sternchen aus und setzen Rand und Abstand auf Null Wählen Sie dann den Slideshow-Wrapper aus. Eigentlich werde ich diese Elemente auf den gesamten Viewport ausdehnen diese Elemente auf den gesamten Viewport Stellen wir also die Breite auf 100% ein. Und dann Höhe wie hundert Vh. Vh bedeutet, dass die Höhe 100% der Höhe des Viewports einnimmt Im Moment passiert hier nicht viel. Also müssen wir noch ein paar Styles hinzufügen. Wir müssen uns um die Folie selbst kümmern. Also lass uns weitermachen und es auswählen. Lassen Sie uns Breite und Höhe festlegen, beide auf 100 Prozent. Und außerdem werde ich seine Position als absolut festlegen. Es ermöglicht uns, Bilder übereinander zu platzieren. Jetzt scheint es, dass wir hier nur ein Bild haben , aber tatsächlich werden die restlichen Bilder im Hintergrund übereinander platziert . In Ordnung, als Nächstes kümmern wir uns um das Bild selbst. Wählen Sie also das IMG-Element aus. Wir benötigen auch die gleiche Breite und Höhe für das Bild. Also werde ich diese beiden Eigenschaften, Breite und Höhe, erben diese beiden Eigenschaften, Breite und Höhe, Und damit das Bild gut aussieht, verwenden wir die Objektfußabdeckung. Zum Schluss möchte ich das Bild etwas dunkler machen. Und um das zu erreichen, ich dem übergeordneten Element schwarzen Hintergrund zu. Und dann lassen Sie uns die Opazität für das Bild verringern. Ich werde 0,6 draus machen. Okay, ich denke also, dass es viel besser aussieht, jetzt ist es an der Zeit , an der linken und rechten Steuerung zu arbeiten. Wie Sie sich erinnern, haben beide Pfeile gemeinsame Klassennamen. Steuerung. Also lass uns weitermachen und es auswählen. Stellen wir fest, dass die Position absolut ist. Dann, damit Controls Position gemäß seinem übergeordneten Element funktioniert, bei dem es sich in diesem Fall um einen Slideshow-Wrapper handelt Wir müssen Position relativ verwenden Als Nächstes lege ich die oberste Position fest. Machen wir es auf Null. Und definieren Sie auch die Breite und Höhe als Wert der Breiteneigenschaft. Ich werde die Viewport-Breite verwenden. Dadurch reagieren die Steuerelemente auf verschiedenen Bildschirmgrößen besser . Ich werde eine Viewport-Breite von 15 verwenden. Das bedeutet, dass die Breite des Steuerelements 15% der Breite des Viewports betragen wird 15% der Breite des Viewports Was die Höhe angeht, legen wir sie auf 100 Prozent fest. Im Moment ist Kontrolle also nicht sichtbar. Und um das zu beheben, lassen Sie uns weitermachen und die Hintergrundfarbe ändern. In diesem Fall verwende ich den RGBA-Wert. Also werde ich hier 902-90-4907 durchgeben. Und als Wert für die Opazität gebe ich 0,6 an Wie Sie sehen können, haben wir hier das Steuerelement auf der linken Seite der Seite. Das zweite Steuerelement ist derzeit nicht sichtbar, da es in HTML hinter der Slideshow platziert wird und daher jedes Jahr hinter dieser Ampel Um das zu beheben, werde ich die Z-Index-Eigenschaft verwenden. Machen wir 100 draus. Jetzt haben wir auf einen Blick das gleiche Ergebnis, aber tatsächlich sind beide Steuerelemente übereinander angeordnet. Denn standardmäßig ist für beide die linke Position auf Null gesetzt. Also müssen wir uns darum kümmern. Für den Linkspfeil müssen wir die linke Eigenschaft auf Null setzen. Was den Rechtspfeil angeht, müssen wir die rechte Position ebenfalls auf Null setzen. In Ordnung, jetzt funktioniert alles gut. Beide Bedienelemente sind richtig platziert . Das Letzte, was ich mit den Steuerelementen machen werde, ist , den Typ des Cursors als Punkt festzulegen. In Ordnung, jetzt ist es an der Zeit, sich um die Pfeile zu kümmern. Wie gesagt, wir müssen sie manuell mit Entwicklungen erstellen . Also wähle ich sie alle anhand der Zeile mit dem gemeinsamen Klassennamen aus. Lassen Sie uns sie zunächst sichtbar machen. Dafür müssen wir Breite und Höhe definieren. Ich werde die Breite als Punkte festlegen, die ausgeführt werden sollen. Was die Höhe angeht. Machen wir zehn Rampen draus Und definiere auch die Hintergrundfarbe. Ich verwende hier den Namen r d d d Phi, d Phi. Also hier haben wir unsere Zeilen. Tatsächlich haben wir vier verschiedene Linien und um sie in Pfeile umzuwandeln, müssen wir sie drehen. Lassen Sie uns also weitermachen und die erste Zeile auswählen, die den Klassennamen Zeile eins hat. Ich drehe es um 20 Grad. Dafür müssen wir Transformationseigenschaft verwenden. Dann müssen wir die Funktion drehen. Und in Klammern müssen wir 20 Grad angeben. Wie Sie sehen können, ist die Linie gedreht, aber teilweise verdeckt Um das zu beheben, werde ich dafür die Linien innerhalb des Steuerelements zentrieren. Ich werde ein paar Flexbox-Eigenschaften und -Werte verwenden Flexbox-Eigenschaften und -Werte Der erste wird Display Flex sein. Um das Flex-Objekt dann horizontal zu zentrieren, müssen wir das Justify-Content Center verwenden Was die vertikale Zentrierung angeht, müssen wir die Artikel mittig ausrichten Im Moment ist die Linie sichtbar und tatsächlich ist der Pfeil zentriert. Lassen Sie uns weitermachen und uns um die zweite Zeile kümmern. Wir müssen es um den gleichen Grad drehen , aber in die entgegengesetzte Richtung. Lassen Sie uns also weitermachen und diesen Code hier duplizieren. Ich ändere den Klassennamen. Wir brauchen hier, Zeile zwei. Und wir brauchen auch negative 20 Grad. Okay, jetzt haben wir schon einen Pfeil, aber wie Sie sehen können, sind die Linien ein bisschen weit voneinander entfernt Um das zu beheben, werde ich sie mit der Funktion Translate leicht verschieben . Wir müssen sie entsprechend der Y-Achse bewegen. Also müssen wir y mit dem Wert 0,35 RAM übersetzen. Wir brauchen dasselbe auch für die zweite Zeile, aber wieder mit dem Minuszeichen. Also kopieren wir es, fügen es hier und hier ein Minuszeichen ein. Ordnung, wie Sie jetzt sehen können, haben wir hier den perfekten Pfeil Lass uns weitermachen und dasselbe für den richtigen tun. Lassen Sie uns beide Zeilen duplizieren. Dann ändere ich die Klassennamen. Wir brauchen Zeile drei und Zeile vier Für den dritten Pfeil benötigen wir negative 20 Grad. Für die vierte Zeile benötigen wir nur 20 Grad. In Ordnung, das war's mit den Kontrollen. Das Letzte, worum wir uns kümmern müssen , ist die Play-Pause-Schaltfläche. Lassen Sie uns also weitermachen und diese Elemente auswählen. Zuallererst werde ich mich um die Position der Schaltfläche kümmern , da sie im Moment nicht sichtbar ist. Es landete hinter den Folien. Lassen Sie uns seine Position also als absolut festlegen. Dann sage ich die untersten fünf Prozent. Und um diese Elemente zu zentrieren, müssen wir die Position des Riegels auf 50 Prozent festlegen Und außerdem müssen wir für eine perfekte Zentrierung Transform verwenden Mit Translate X mussten wir die Elemente in X-Richtung bewegen, und hier müssen wir -50 Prozent passieren Diese kleine Technik ermöglicht es uns also , das Element perfekt zu durchdringen. Lassen Sie uns abschließend den Cursorzeiger verwenden. Okay, jetzt ist der Button machbar und er ist zentriert. Schließlich möchte ich, dass es gut aussieht. Lassen Sie uns also weitermachen und das I-Element selbst auswählen. Ändern Sie die Farbe des Elements, machen Sie es weiß und erhöhen Sie auch die Schriftgröße. Mach 50 Pixel draus. Richtig? Im Moment sind wir also fertig mit CSS. Alle Elemente sind gestylt. Und jetzt müssen wir weitermachen und anfangen, etwas JavaScript zu schreiben. Gehen wir zur Datei script.js. Also werden wir diese Diashow zuerst automatisch ausführen Dafür werden wir zwei verschiedene Funktionen erstellen. Die erste besteht darin , Folien zu wechseln. Eigentlich denke ich, dass es besser ist, wenn wir den Editor aufteilen und auch die HTML-Datei anzeigen, weil wir einige Elemente mithilfe von JavaScript-DOM auswählen werden. Also wähle ich alle Folien aus. Lassen Sie uns eine Variable namens Folienliste erstellen. Um einige Elemente auszuwählen , die denselben Klassennamen haben, können wir die Methode query selector all verwenden Lassen Sie uns hier die Folie mit dem Klassennamen weitergeben. Wenn Sie Elemente mit der Methode Query Selector All auswählen, wird tatsächlich mit der Methode Query Selector All auswählen, wird ein Array-ähnliches Objekt namens Node List zurückgegeben Und um diese Liste als Array zu manipulieren , müssen wir sie in ein Array umwandeln Lassen Sie uns also weitermachen und eine neue Variable erstellen. Ich nenne es Folien. Um nun die Knotenliste in ein Array umzuwandeln, müssen wir die Methode array from verwenden. Und wir müssen Ihre Folienliste weitergeben. Ordnung, jetzt erstelle ich eine Variable, die die aktuelle Folie in der Diashow darstellt Ich meine diese Folie, die auf dem Bildschirm angezeigt wird, der Wert dieser Variablen wird sich ändern. Daher werden wir die let-Deklaration verwenden. Nennen wir diese Variable Strom und legen sie dann als eine fest. Der Wert dieser Variablen gibt also standardmäßig die Nummer einer Folie an, die gerade angezeigt wird. In Ordnung? Also haben wir alle Folien ausgewählt und in einem Array gespeichert. Wie Sie wissen, hatten sie Klassennamen. Folie eins, Folie zwei und so weiter. Wir müssen das Array durchgehen, Zugriff auf den zweiten Teil dieser Klassennamen bekommen, ich bin hauptsächlich numerisch, und sie mit dem Wert der aktuellen Variablen vergleichen . Wenn sie gleich sind, müssen wir diese Folie zeigen. Und wenn sie nicht gleich sind, müssen wir es verstecken. Okay, das ist alles. Was wir tun werden. Um das Array in einer Schleife durchzugehen, verwende ich eine der Array-Hilfsmethoden, die for-each heißt Wir müssen hier eine Pfeilfunktion mit der aktuellen Folie übergeben . Um Zugriff auf den Clusternamen zu erhalten, können wir also eine Eigenschaft namens Klassenliste verwenden, die uns tatsächlich ein Array der Klassennamen gibt. Also werde ich if-Statements verwenden. Dann benötigen wir als Bedingung die folgende Folienpunktklassenliste. Wie gesagt, diese Eigenschaft gibt uns eine Reihe von Klassennamen. In diesem Fall lauten diese Klassennamen Folie, Folie eins. Wir brauchen den zweiten Punkt, ich meine Folie eins. Also müssen wir die Indexnummer wie eins angeben. Danach müssen wir diesen Clusternamen auf den Bindestrich aufteilen diesen Clusternamen auf den Bindestrich Es wird ein weiteres Array zurückgegeben , in dem wir zwei Elemente haben, Folie und eins Wir müssen uns den zweiten Gegenstand schnappen, der einer ist. Also müssen wir hier den Index Nummer eins angeben. Ich hoffe, es ergibt Sinn für dich. Jetzt haben wir Zugriff auf die Nummer jeder Folie, aber tatsächlich ist der Datentyp dieser Zahl keine Zahl, sondern eine Zeichenfolge Also müssen wir es in eine Zahl umwandeln. Und das können wir einfach tun, indem wir es mit eins multiplizieren. In Ordnung? Wenn diese Zahl also dem Wert der aktuellen Variablen entspricht, müssen wir die aktuelle Folie anzeigen. Dafür. Fügen wir hier die Folien im Punktstil ein. Und dann verwende ich eine Eigenschaft namens CSS-Text, der wir mehrere CSS-Deklarationen verwenden können Wir brauchen hier also Sichtbarkeit, Sichtbarkeit und auch Opazität Wenn diese Bedingung falsch ist, müssen wir diese Folien ausblenden. Also brauchen wir L-Aussage. Dann schnappen wir uns diese Codezeile. Verbergen Sie die Sichtbarkeit. Opazität Null. Richtig? Das ist alles. Wir können diese Funktion jetzt aufrufen. Und schauen wir uns an, wie es funktioniert. Gerade jetzt. Strom entspricht eins. Deshalb sehen wir hier das erste Bild. Um zu beweisen , dass ich hier den Mauszeiger über den Bildpfad bewegen kann , Datei index.html Sie können also sehen, dass dies definitiv das erste Bild ist. Wenn Sie auf diese Weise eine Vorschau und ein Bild erstellen möchten, können Sie tatsächlich ein Paket namens Bildvorschau installieren. Okay, wenn ich den Wert der aktuellen Variablen ändere, sagen wir 23, dann wird das dritte Bild angezeigt Wenn ich in der Datei index.html noch einmal nachschaue, finden wir dasselbe Bild. Bisher funktioniert alles einwandfrei. Jetzt ist es an der Zeit, dass die Diashow automatisch abgespielt wird. Dafür werde ich eine weitere Funktion erstellen. Nennen wir es Play-Pause. Also müssen wir die Folie alle 3 s ändern . Also müssen wir die setInterval-Methode verwenden In den ersten 3 s wird also das erste Bild angezeigt. Danach wird diese Callback-Funktion ausgeführt. Wir müssen also den Wert der Ströme um eins erhöhen. Verwenden wir dazu den Inkrementsoperator plus, plus. Und wir müssen auch die Funktion „Folien ändern“ aufrufen. Schließlich geben Sie hier das Intervall an. Ich speichere es als 3 s. Und du musst es in Millisekunden ausdrücken Wir brauchen also 3.000 Millisekunden. In Ordnung? Wie Sie sehen können, wird die Diashow erfolgreich ausgeführt Nach dem letzten Bild steigt der aktuelle Wert weiter an. Deshalb bekommen wir hier eine leere Seite. Wir müssen also die If-Anweisungen in der Funktion Change Slides verwenden . Wenn der aktuelle Wert also größer als die Länge der Folien ist , müssen wir ihn zu einem Wert machen. Nochmals. Wir benötigen, wenn wir, dass der Zustandsstrom größer ist als die Punktlänge der Folie. Wenn das zutrifft, müssen wir den aktuellen Wert als Eins festlegen. Wie Sie sehen können, läuft die Diashow jetzt unendlich. In Ordnung, jetzt müssen wir die Play-Pause-Taste steuern. Standardmäßig wird die Diashow automatisch ausgeführt. Aber sobald wir auf die Pause-Schaltfläche klicken, müssen wir die Diashow beenden Wir müssen also ein paar Dinge zum Spielen hinzufügen. Pausenfunktion. Ich werde zwei verschiedene Variablen erstellen. Im ersten Fall speichern wir einen booleschen Wert , der uns hilft, eine gewisse Logik aufzubauen Deklarieren wir eine neue Variable, nennen wir sie play pose. Und in der Standardeinstellung ist das wahr. Außerdem benötigen wir eine Variable namens interval, die die eingestellte Intervallfunktion speichert , die wir vor einer Minute verwendet haben. Wir müssen diese Diashow also automatisch ausführen wenn Play Post Pool wahr ist, und andernfalls müssen wir sie beenden Also müssen wir if-Aussagen verwenden , in denen ich überprüfen werde, ob Plate Post Boolean wahr ist oder Wenn das wahr ist, müssen wir die Funktion set interval in die if-Anweisung einfügen . Und wie gesagt, wir müssen diese Funktion auch in der Intervallvariablen speichern. Und danach müssen wir die Playpause bool falsch machen. Nächste Minute sonst Erklärung. Wenn die Play-Pausen-Funktion Das zweite Mal aufgerufen wurde, bedeutet dies, dass der Wert von Playpause Boolean falsch werden würde Daher werden alle anderen Anweisungen ausgeführt, in denen wir das Intervall löschen müssen. Und wir mussten play pause boolean wieder auf True setzen. Ordnung, als Nächstes müssen wir der Play-Pause-Schaltfläche ein Klickereignis anhängen Lassen Sie uns also weitermachen und dieses Element auswählen. Ich werde die Abfrageauswahlmethode verwenden. Dann verwenden wir ClassName Play Pose. Und an jeden Event-Listener angehängt. Gehen wir hier weiter, klicken Sie auf Event und dann auf die Pfeilfunktion. In dieser Funktion müssen wir die Nummernschildfunktion aufrufen. Wie Sie sehen, wird die Diashow jetzt automatisch ausgeführt. Aber wenn ich auf die Schaltfläche klicke, wird es aufhören. Wenn ich noch einmal klicke, funktioniert es weiter. In Ordnung? Jetzt müssen wir das Symbol dieser Schaltfläche ändern. Wenn wir darauf klicken. haben wir eine Play-Schaltfläche erstellt und müssen sie in eine Pause-Schaltfläche umwandeln , wenn wir auf das Symbol klicken. Also müssen wir mit zwei verschiedenen Schriftarten manipulieren, tolle Klassennamen, FAA spielt ein F, einen Puls Also werde ich eine neue Funktion erstellen. Nennen wir es Change Play Pose. Dann lass uns weitermachen und das Symbol auswählen. Ist wieder eine Abfrageauswahlmethode. Gib deinen Klassennamen und spiele Pose. Und dann Irland. Danach erhalte ich Zugriff auf den zweiten Klassennamen, der FA Dash Play ist. Und dafür verwende ich wieder eine Klassenlisteneigenschaft. Lassen Sie uns also eine neue Variable erstellen. Ich nenne es einen kürzeren Weg. Siehe ls. Dann müssen wir Ihre Icon-Punktklassenliste mit der Indexnummer eins schreiben . Ordnung, wenn der Klassenname also f a play entspricht, sollten wir ihn entfernen und einen Beitrag hinzufügen und umgekehrt. Also werde ich eine IF-Aussage verwenden. Wir müssen überprüfen, ob die Klasse einem Spiel entspricht. Wenn diese Bedingung zutrifft, müssen wir diesen Klassennamen entfernen. Wir brauchen also einen Symbolpunkt plus Liste und wir müssen die Entfernungsmethode mit dem Klassennamen FAA Play verwenden Entfernungsmethode mit dem Klassennamen FAA Play Und gleichzeitig müssen wir dem Element eine andere Klasse hinzufügen. Also brauchen wir Icon, Klassenliste, Punkt, Add, FA-Dash-Beiträge. Wenn diese Bedingung also falsch ist Philos nicht gleich f ist, wird ein Bindestrich abgespielt Sonst Aussage , in der wir aus den Elementen, die FAA-Beiträge gruppieren, entfernen und F eine Platte hinzufügen müssen Nehmen wir also diese beiden Zeilen von hier aus und ändern wir einfach den Klassennamen. Okay, das Letzte, was Sie tun müssen, ist, diese Funktion aufzurufen, und das müssen wir in der Play-Pose-Funktion tun Wie Sie sehen, haben wir standardmäßig eine Pause-Schaltfläche, da Diashow automatisch ausgeführt wird Aber wenn ich auf das Symbol klicke, wird es wieder auf die Play-Schaltfläche umgestellt und auch die Diashow wird beendet In Ordnung, das war's mit diesem Teil. Als nächstes müssen wir uns um die Kontrollen kümmern. Wenn wir auf einen der Pfeile klicken, sollte die Diashow beendet werden und wir sollten in der Lage sein, die Folien manuell zu ändern Also müssen wir zuerst die Pfeile auswählen. Fangen wir mit einem Linkspfeil an. Ich werde erneut die Methode querySelector verwenden. Lassen Sie uns hier pausieren, indem wir den Linkspfeil gruppieren und dann den Event-Listener daran anhängen . Mit einem Klick-Event. Beim Klicken müssen wir die Play-Pausen-Funktion aufrufen, wenn der boolesche Wert für die Abspielpose Denn wenn es falsch ist, bedeutet das, dass die Diashow automatisch läuft Sobald wir eine Pausenfunktion für das Spielen aufrufen , sollte sie aufhören. Wir brauchen also eine If-Aussage , die wir als Bedingung überprüfen sollten. Wenn nicht, spiele Pose Boolean. Dann müssen wir die Play-Pausen-Funktion aufrufen. Auch wenn wir auf den Linkspfeil klicken, müssen wir den aktuellen Wert um eins verringern. Wir benötigen also Strom mit Dekrementsoperator Minus, Minus. Wir müssen erneut die Funktion zum Ändern der Folien aufrufen. Wenn ich also auf den Pfeil klicke, erhalten wir nur eine leere Seite. Das passiert, weil der aktuelle Wert Null wird. Und mit Null haben wir keine Foliennummer. Also müssen wir solche Dinge vermeiden. Dazu ändern wir die Folienfunktion und fügen sie hier hinzu. Sonst wenn Aussage. Wir müssen überprüfen, ob der Strom Null ist. Wenn ja, wenn dies zutrifft, sollte der aktuelle Wert der Punktlänge der Folie entsprechen. Wenn ich jetzt noch einmal teste, wird es gut funktionieren. In Ordnung, wir brauchen dasselbe auch für den Rechtspfeil. Lassen Sie uns also weitermachen und diesen Code duplizieren. Ich ändere den Klassennamen. Wir haben den Rechtspfeil nicht gehört. Im Falle des Rechtspfeils müssen wir den aktuellen Wert um eins erhöhen. Also statt Minuszeichen brauchen wir hier Plus, Plus. In Ordnung, also funktioniert alles gut. Schritt für Schritt. Wir gehen zum Ende dieses Projekts. Aber trotzdem müssen wir ein paar Dinge tun, damit unsere Diashow besser aussieht Wenn diese Diashow automatisch ausgeführt wird, sollten die Steuerelemente standardmäßig ausgeblendet sein Und wir müssen sie anzeigen, wenn wir den Mauszeiger über die Pfeile Und wir müssen sie auch anzeigen, sobald wir die Diashow beenden Gehen wir also weiter und gehen wir zur Datei style.css. Ich werde eine neue Klasse erstellen. Nennen wir es Pfeilsichtbarkeit. Wir müssen ihm die Opazität Null zuweisen. Wir werden diese Klasse dynamisch aus JavaScript hinzufügen und daraus entfernen . Außerdem müssen wir die Steuerelemente beim Zeigen mit der Maus erscheinen lassen. Wir müssen also die Opazität kontrollieren und als Einheit festlegen. Lassen Sie uns abschließend einen Hover-Effekt mithilfe von Transition verschönern Wir müssen hier die Opazität und dann die Dauer 0,5 s eingeben und auch eine der Transitions-Timing-Funktionen verwenden, und auch eine der Transitions-Timing-Funktionen verwenden die als linear bezeichnet werden In Ordnung, das war's mit CSS. Gehen wir zurück zur JavaScript-Datei. Ich werde eine neue Funktion erstellen. Nennen wir es Pfeilsichtbarkeit. Zunächst müssen wir beide Pfeile auswählen. Lassen Sie uns das erneut mit der Methode Query Selector All tun. Beide Pfeile haben die gemeinsame Klassennamensteuerung. Dann werde ich sie in einer Schleife durchgehen und je nach Bedingung Sichtbarkeit der neu erstellten Clusterpfeile hinzufügen und entfernen. Um durch Pfeile zu schauen, müssen wir zunächst die Knotenliste in ein Array umwandeln. Du weißt schon, wie das geht. Wir müssen Array Dot von verwenden. Dann müssen wir Pfeile übergeben , um das Array durchzugehen, das wir für jede Methode verwenden müssen. Lassen Sie uns Ihre Pfeilfunktion mit dem aktuellen Pfeil übergeben. Wenn die Diashow also automatisch läuft, sollten wir die Pfeile ausblenden Also wenn Anweisung dann hier als Bedingung einfügen, Pause Boolean abspielen Wenn es wahr ist, müssen wir zur Klassenliste des Pfeils die Sichtbarkeit der Klassenpfeile hinzufügen . Wir brauchen also eine Klassenliste mit Zeilenpunkten. Dann müssen wir eine Methode namens ed verwenden. Und wir müssen hier die Sichtbarkeit der Klassennamen der Pfeile weitergeben . Andernfalls müssen wir diese Klasse entfernen, wenn die Slideshow nicht automatisch ausgeführt wird müssen wir diese Klasse entfernen Also brauchen wir L-Aussage. Dann schnappen wir uns diese Codezeile. Anstelle der verwendeten agilen Methoden entfernen. Und zum Schluss rufen wir diese Funktion in der Play-Pausen-Funktion auf. In Ordnung, standardmäßig sind die Pfeile ausgeblendet. Wenn ich mit der Maus über sie fahre, sollten sie erscheinen. Wenn ich auf eine von ihnen klicke, wird diese Diashow nicht mehr automatisch ausgeführt und wir können die Folien manuell ändern Wenn ich auf die Pause-Schaltfläche klicke, werden außerdem Pfeile angezeigt. Eigentlich sind wir fast fertig. Das einzige, was Sie tun müssen, ist einen Fade-Effekt hinzuzufügen. Zwei Folien, die ich erstellt habe, um Überblendeffekte hinzuzufügen, wenn sich diese Folien ändern. Dazu müssen wir in CSS einer Folie einen Übergang hinzufügen, der ihr die Opazität und die Dauer 1 s zugewiesen hat. Und um den Fade-Effekt dunkler zu machen, müssen wir die Hintergrundfarbe für den Slideshow-Wrapper ändern Lass es uns schwarz machen. In Ordnung, das ist es. Herzlichen Glückwunsch, wir haben den Bau dieses Projekts abgeschlossen. Wie Sie sehen, funktioniert alles perfekt. Eigentlich werde ich hier noch ein paar Bilder hinzufügen. Lassen Sie uns die Folie dreimal duplizieren und die Klassennamen ändern. Außerdem müssen wir die Namen des Okay ändern die Namen des , damit du so viele Bilder anbringen kannst, wie du möchtest. Sie müssen nur die Klassen richtig nummerieren. 26. Projekt 23 - Benutzerdefinierter CSS-Radiobutton: In diesem Video werden wir ein benutzerdefiniertes CSS-Optionsfeld erstellen . Grundsätzlich sehen Sie auf verschiedenen Websites möglicherweise Standard-Optionsfelder, die meiner Meinung nach nicht ganz gut aussehen. In diesem Video erfahren Sie also, wie Sie moderne und coole Optionsfelder nur mit HTML und CSS erstellen können . In Ordnung, wie Sie sehen, haben wir hier zwei Optionsfelder, Option eins und Option zwei Wir haben grüne Kreise. Und wenn wir sie anklicken, werden sie schön überprüft und es kommt zu einem gewissen Fade-Effekt. Okay, schauen wir uns an, was wir bauen werden. Hier im VS-Code habe ich zwei verschiedene Dateien, index.html und style.css. Im HTML-Dokument habe ich traditionell die Grundstruktur des HTML-Dokuments vorbereitet. Wir haben hier zwei verschiedene Links, einen für Google-Schriftarten und einen weiteren für die Datei style.css. In Ordnung, lassen Sie uns weitermachen und wie üblich beginnen wir mit der Erstellung von HTML-Markup Ich werde ein div-Element öffnen, das ein Wrapper für beide Optionen sein sollte Es ist also seinem Klassennamen-Wrapper zugewiesen. Öffnen Sie dann eine weitere Entwicklung , die selbst eine Option sein wird. Also seiner Cluster-Option zugewiesen. Innerhalb der div-Elemente benötigen wir zwei Elemente. Der erste wird als der Typ eingegeben, den wir hier brauchen, Radio. Neben den Typattributen benötigen wir zwei weitere Attribute. Der erste wird ein Ausweis sein. Wir werden die ID verwenden, um Eingaben zu verknüpfen und Elemente zu beschriften und um ein Klick-Event zu erstellen. Weisen wir ihm also den Wert zu, kreuzen Sie einen an. Außerdem benötigen wir hier das Namensattribut. Das Namensattribut erlaubt es uns nicht, mehrere Optionsfelder gleichzeitig zu aktivieren. Weisen wir ihm den Wert Radio zu. Als nächstes brauchen wir ein Etikett. Wie gesagt, wir werden Eingabe- und Labelelemente verknüpfen. Und dafür sollten ID und vier Attribute genau die gleichen Werte haben. In diesem Fall müssen wir hier eins ankreuzen. In Ordnung, wir werden zwei Möglichkeiten haben. Lassen Sie uns also die Entwicklung duplizieren. Und das einzige, was wir tun müssen, ist die Werte für ID und für vier Attribute zu ändern . Anstatt eins zu überprüfen, müssen wir zwei überprüfen. Okay, das war's mit HTML. Gehen wir in die Datei style.css und fangen an, etwas CSS zu schreiben. Lassen Sie uns zunächst einige Reset-Stile erstellen. Wählen Sie jedes Element mit einem Sternchen aus. Stellen Sie dann Rand und Abstand auf Null ein. Und wir brauchen hier auch Box Sizing, Border-Box. Als Nächstes wähle ich den Wrapper aus. Definieren wir diese Breite und Höhe. Ich werde die Breite auf hundert Prozent festlegen. die Höhe angeht, so möchte ich mich darauf beziehen , dass sie 100% des Viewports einnimmt Und dafür müssen wir eine Maßeinheit namens H verwenden . Okay, dafür werde ich den Inhalt perfekt auf der Seite zentrieren. Lassen Sie uns Flexbox verwenden. Wir müssen Flex anzeigen , dass wir, um das Element horizontal zu zentrieren, Justify Content Center, S4, vertikale Zentrierung verwenden müssen Content Center, S4, vertikale Zentrierung Wir müssen die Artikel in der Mitte ausrichten. Und schließlich werden Optionen, wie Sie sehen, horizontal nebeneinander platziert, aber wir müssen sie vertikal platzieren. Und dafür ändern wir die Biegerichtung und machen sie zu einer Spalte. In Ordnung, das war's mit Wrapper. Als Nächstes werde ich eine Option stylen. Wählen wir es also aus. Zuerst. Definieren wir seine Breite und Höhe. Ich werde mit 400 Pixeln beginnen. Was die Höhe angeht, lassen Sie uns 100 Pixel daraus machen und auch die Hintergrundfarbe ändern. Du siehst deine Farbe hellgrau, oder? Ccc. Als Nächstes lassen Sie uns mithilfe von Margin etwas Platz um jede Option herum schaffen . Lassen Sie uns den Wert auf 20 Pixel festlegen und mithilfe von Padding etwas Platz in der Box schaffen , 20 Pixel Schließlich möchte ich dafür Elemente vertikal in der Mitte platzieren . Sehen wir uns noch einmal an, Flexbox, rechts, Flex anzeigen und dann Elemente in der Mitte ausrichten In Ordnung, das ist es also mit der Option. Danach lassen Sie uns weitermachen und das Etikett stylen. Wählen Sie das richtige Optionslabel aus. Lassen Sie uns zunächst die Schriftfamilie ändern. Ich werde deine Schrift namens Josephine Slab San Serif verwenden Josephine Slab San Erhöhen Sie dann die Schriftgröße 60 Pixel. Und schließlich ändern Sie den Typ des gröberen, machen Sie ihn zum Zeiger. In Ordnung, jetzt ist es an der Zeit, ein Kunden-Optionsfeld zu erstellen Dafür verwende ich Nachher - und Vorher-Pseudoelemente Der Radiobutton wird aus zwei Teilen bestehen. Wir werden einen äußeren Kreis haben, der mithilfe von Pseudoelementen nach unten erstellt wird Was den inneren Kreis betrifft, sollte er vor dem Pseudoelement stehen Lassen Sie uns also weitermachen und nach Pseudoelementen auswählen , oder? Option, Etikett. Danach. Lassen Sie uns zunächst den Inhalt leeren. Um die Elemente auszurichten, legen wir dann ihre Position als absolut fest. Eigentlich werde ich den Kreis entsprechend einer Option div elements positionieren . Und um das zu tun, müssen wir jeder Position einen Relativen zuordnen. Danach. Um Elemente sichtbar zu machen, definieren wir ihre Breite und Höhe. Ich werde beide zu 50 Pixeln machen. Und auch eine Grenze schaffen. Dem Wert werden fünf Pixel zugewiesen, durchgehend. Und die Farbe Null, a, a, c83. Jetzt ist das Element sichtbar. Es hat die Form eines Quadrats, und eigentlich wollen wir es in einen Kreis verwandeln. Definieren wir dazu einen Grenzradius mit einem Wert von 50%. In Ordnung, jetzt ist es an der Zeit , diese Kreise auszurichten. Definieren wir die richtige Position und machen sie zu 15%. Und zum Schluss erstellen Sie einen kleinen Schatteneffekt, Schatten im rechten Feld mit den Werten 003 Pixel. Und dann verwende die Farbe RGBA 000 und die Opazität 0,8. Okay, das war's also nach Pseudoelementen. Jetzt müssen wir einen inneren Kreis erstellen , indem wir vorherige Pseudoelemente verwenden Eigentlich werden wir für beide Kreise ähnliche Eigenschaften benötigen . Lassen Sie uns also den gesamten Code duplizieren und dann einige Änderungen vornehmen. Lassen Sie uns zunächst nachher in vorher wechseln und dann das Grenzeigentum loswerden. Und stattdessen fügen Sie die Hintergrundfarbe ein und weisen Sie ihr die Farbe Null zu , ein c83 Danach ändern wir die Größe des Kreises. Dafür werde ich Breite und Höhe verringern. Machen wir beide zu 40 Pixeln. Und jetzt müssen wir uns um die Position des Elements kümmern . Wir müssen es perfekt in der Mitte innerhalb des äußeren Kreises passieren . Definieren wir also die Spitzenposition und machen sie zu 50 Prozent. Verwenden Sie dann transform. Warum übersetzen? Ich benutze es, um ein Element von seiner aktuellen Position ein wenig nach oben zu bewegen . Geben wir hier also -50 Prozent ein. Und schließlich müssen wir die Elemente ein wenig nach links verschieben . Dazu ändern wir den Wert der richtigen Position anstelle von 15. Versuchen wir es mit 17. Wie ich sehe, reicht das nicht ganz aus. Lass es uns ändern und 17.5 machen. Okay, jetzt sieht es gut aus. Und eigentlich sind wir mit dem Styling fertig. Jetzt müssen wir dafür sorgen, dass die Checkbox funktioniert. Wie wir zu Beginn dieser Vorlesung gesagt haben, müssen wir Eingabe und Label verknüpfen, um ein Klick-Event zu erstellen. Im Allgemeinen funktionieren diese Kreise für Benutzer also als Optionsfelder. Ich meine, visuell werden sie den Radiobutton darstellen. Aber tatsächlich, hinter den Kulissen, diesen kleinen Inputs, werden wir die Hauptarbeit erledigen. In Ordnung, wir haben also alle bereits Label- und Eingabeelemente mit id und vier Attributen verknüpft Eingabeelemente mit id und vier Attributen Und tatsächlich ermöglicht uns diese Verbindung , das Optionsfeld zu aktivieren wenn wir auf diese Kreise und tatsächlich auf das gesamte Etikett klicken . So können wir irgendwann das Klick-Event erstellen. Wir werden uns standardmäßig in Kreisen verstecken. Und dann werden wir sie anzeigen, sobald wir auf das Etikett klicken. Mit anderen Worten, sobald wir den ursprünglichen Radiobutton aktiviert haben. Um das zu erreichen, verwende ich eine dieser Pseudoklassen namens checked, die es uns ermöglicht, verschiedene CSS-Stile zu definieren , wenn das Kontrollkästchen aktiviert ist Wählen wir also Eingabeelemente aus, oder? Optionseingabe. Verwenden Sie dann eine Pseudoklasse namens checked. Jetzt müssen wir Zugriff auf den inneren Kreis bekommen, der sich vor dem Pseudoelement befindet Dafür verwende ich einen dieser CSS-Kombinatoren, der als General Sibling Selector bezeichnet wird Und es wird durch ein Tilda-Zeichen ausgedrückt. Jetzt müssen wir Elemente auswählen, an denen wir manipulieren müssen In diesem Fall vor dem Pseudoelement, rechts, beschriften Sie es mit davor Bevor wir nun einen Stil für diese Elemente definieren, lassen Sie uns beide Kreise ausblenden, denen Opazität der vorherigen Pseudoelemente zugewiesen Wie Sie sehen, sind beide Kreise standardmäßig ausgeblendet und bei einem Klick müssen wir sie wieder anzeigen. Fügen wir hier also Opazität eins ein. Wenn wir also auf eine der Schaltflächen klicken , sollten sie überprüft werden. In Ordnung, wir sind fast fertig. Wir müssen nur ein paar Dinge anpassen. Lassen Sie uns den Überprüfungseffekt intelligenter gestalten indem wir ihm den Übergang mit der Opazität zuweisen Und die Dauer 0,4 s. Außerdem werde ich Standard-Eingabeelemente ausblenden. Wählen wir also die Optionseingabe und fügen Sie hier keine Anzeige ein. Und schließlich die Option Hintergrund entfernen aus. In Ordnung, wie Sie sehen können, funktioniert alles perfekt. Und jetzt wissen Sie, wie Sie wirklich schöne und moderne Optionsfelder erstellen , die viel besser sind als die Standardschaltflächen. 27. Projekt 24 - Visitenkarte: Hallo und willkommen zu unserem nächsten Tutorial. In diesem Video werden wir eine gut aussehende 3D-Visitenkarte erstellen eine gut aussehende 3D-Visitenkarte Dieses kleine Projekt wird auf Basis von HTML und CSS erstellt . Bevor wir mit der Arbeit an diesem Projekt beginnen, lassen Sie uns kurz beschreiben , was wir erstellen werden. Also hier ist unsere Visitenkarte. Die Vorderseite besteht aus zwei Teilen. Auf der linken Seite haben wir ein Logo mit dem Text Webdesign. Was die rechte Seite angeht, haben wir hier einige Informationen über die Person, Dinge wie Name, Telefonnummer, E-Mail, Adresse. Wenn wir den Mauszeiger über die Karte bewegen, rotiert sie im 3D-Raum Und die Rückseite wird angezeigt, auf der wir ein Logo des Unternehmens haben In Ordnung, das ist es, was wir bauen werden. Auch hier werden all diese Dinge nur mit reinem HTML und CSS erstellt . Hier im VS-Code haben wir zwei Dateien geöffnet, index.html und style.css. Und ich habe auch einen Ordner namens Images, in dem wir das Logo des Unternehmens speichern. Sie können diese Starter-Quelldateien über den Link in der Beschreibung herunterladen diese Starter-Quelldateien . Ordnung, in der HTML-Datei habe ich die Grundstruktur des HTML-Dokuments vorbereitet Innerhalb des Hauptelements haben wir ein paar Links. Links für Google-Schriftarten, Font, Awesome Icons und wir haben auch einen Link für die Datei style.css. Lassen Sie uns weitermachen und mit der Erstellung von HTML-Markup beginnen. Lassen Sie uns mit der Entwicklung beginnen, die eine Hülle der Karte sein sollte Ordnen wir ihm also den Klassennamenkarten-Wrapper zu. Als Nächstes werde ich eine weitere Entwicklung eröffnen, bei der es sich um die Karte selbst handeln wird. Also lassen Sie uns ihr eine Klassenkarte zuweisen. Wie gesagt, die Karte wird aus zwei Teilen bestehen, Vorderseite und der Rückseite Lassen Sie uns also Ihre Entwicklung mit dem Klassennamen front einfügen . Die Vorderseite selbst wird aus zwei Teilen bestehen, linken und der rechten Seite. Also werde ich hier und andere Entwicklungen mit verbliebener Klasse einfügen . Die linke Seite wird also aus zwei Elementen bestehen. Das erste wird ein Bild sein. Öffnen wir also IMG-Elemente. dann im Quellattribut Geben wir dann im Quellattribut einen Teil des Bildes an. Wir haben einen Ordner namens Images und müssen den Logo-Punkt-PNG auswählen. Als nächstes benötigen wir h für Überschriftenelemente. Eigentlich wird es zwei verschiedene Wörter beinhalten, Webdesign. Ich werde den ersten mit dem Span-Element umwickeln . Lass es uns öffnen. Das Insert-Web. Und dann richtiges Zeichen. Okay, das war's mit der linken Seite. Lassen Sie uns die Entwicklung eröffnen, welcher Klasse dann die richtige Seite zugewiesen wird, oder? Es wird aus mehreren Teilen bestehen. Der erste wird eine Person sein. Lassen Sie uns also die Entwicklung eröffnen. Tatsächlich wird der Teil der Person aus zwei verschiedenen Teilen bestehen. Wir werden das Font Awesome-Symbol auf der linken Seite haben. Was die rechte Seite betrifft, wird sie den Namen der Person sowie die Position und das Unternehmen enthalten . Lassen Sie uns der Entwicklungsklasse Namen und Personen zuweisen und dann den Inhalt schreiben. Fügen Sie dann Ihr Font Awesome-Symbol öffnen Sie das I-Element mit den Klassennamen, FAS, FA, Dash, User, Tie Dann müssen wir die Entwicklungen öffnen. Lassen Sie uns Ihre H4-Versteckelemente mit Text übergeben. John Smith. Öffnen Sie dann den Absatz und fügen Sie das IT-Webdesign ein. Ordnung, wir werden also vier ähnliche Teile auf der rechten Seite haben ähnliche Teile auf der rechten Seite Lassen Sie uns die gesamte Entwicklung dreimal duplizieren und die gesamte Entwicklung dreimal dann einige Änderungen vornehmen. Für den zweiten brauchen wir hier className, phone Ändern Sie dann auch den Klassennamen für das AI-Element. Wir brauchen hier wieder ein Telefon. In der nächsten Minute werden beide Elemente als Absätze dargestellt. Also lass uns die Überschrift löschen. Dann. Duplizieren Sie diese Codezeile und fügen Sie hier einige Scheintelefonnummern Okay? Der nächste Teil wird eine E-Mail sein. Lass uns den Klassennamen ändern, oder? E-Mail. Außerdem brauchen wir hier eine andere Schrift, ein tolles Symbol. Lass uns die Klasse wechseln. Wir brauchen hier. Umschlag, offen. Dann wird das Überschriftenelement von hier wieder entfernt und der Text des Absatzes geändert. Fügen wir hier eine Schein-E-Mail ein. John smith@gmail.com. In Ordnung, der letzte Teil wird für eine Adresse sein. Also lasst uns hier im Rest den Klassennamen ändern. Ändern Sie dann auch den Klassennamen für KI-Elemente. Wir brauchen hier die Karte Dash, Marker, ALT. Löschen Sie dann erneut die Elemente einer Überschrift. Duplizieren Sie den Absatz und fügen Sie Ihre folgenden Texte ein. Main Street, 1234, zweiter Absatz. Fügen wir hier New York und y ein. In Ordnung, das war's dann mit der Vorderseite Jetzt werde ich die Rückseite erstellen, was eine wirklich einfache, offene Entwicklung sein einfache, offene Entwicklung Und seiner Klassenkartenrückseite zugewiesen. Wir brauchen hier nur ein Element, das ein Bild sein wird, also wird es eingefügt. Und als Quellattribut geben wir einen Teil des Bildes an. In Ordnung, das war's also mit HTML-Markup. Jetzt ist es Zeit, mit dem Styling zu beginnen. Gehen wir zur Datei style.css. Zunächst werde ich einige Reset-Stile erstellen. Lassen Sie uns den Standardrand und den Abstand von jedem Element entfernen und den Abstand von jedem Element Um alle Elemente auszuwählen, müssen wir ein Sternchen verwenden Dann lassen Sie uns Ihre Marge Null, n, Padding Null übergeben. Als Nächstes wählen wir das Körperelement aus. Ich werde die Schriftfamilie ändern. Verwenden wir hier einen Fund namens Montserrat San-Serif. Dann ändere die Hintergrundfarbe. Machen Sie es hellgrau mit der Farbe C. C, C. Okay, jetzt werde ich an der Kartenhülle arbeiten , aber vorher wäre es besser, wenn wir die , um unseren Arbeitsprozess komfortabler zu gestalten Größe der Bilder verkleinern Ich werde das aus dem HTML-Dokument machen. Lassen Sie uns also weitermachen und beiden Bildern Attribute mit dem Wert hundert und 50 zuweisen . Okay, jetzt sind die Bilder kleiner und wir können weitermachen. Wählen wir Call the Wrapper aus. Ich werde es dafür perfekt in die Mitte stellen Lassen Sie uns seine Position als absolut definieren. Dann müssen wir die oberen und linken Eigenschaften auf 50 Prozent festlegen . Und schließlich, um das Element perfekt zu zentrieren, müssen wir transform translate verwenden. Wir müssen Ihre Werte -50 Prozent und dann wieder -50 Prozent eingeben Prozent und dann wieder -50 Prozent In Ordnung, das war's vorerst mit der Kartenhülle. Als Nächstes werde ich an der Karte selbst arbeiten. Also lass uns weitermachen und es auswählen. Definieren wir zunächst seine Breite und Höhe. Ich werde die Breite auf 550 Pixel festlegen. Höhe. Stellen wir es auf 300 Pixel ein. Und ändere auch die Hintergrundfarbe und mache sie weiß. Jetzt fange ich an, die Vorderseite zu stylen und ich denke, es wäre besser, wenn wir die Rückseite für eine Weile verstecken Machen wir das aus dem HTML-Dokument. Ich werde dem Essen das hier genannte Attribut zuweisen. Gehen Sie dann zurück zur Datei style.css und wählen Sie Card, Front. Definieren Sie seine Breite und Höhe. Machen wir beide zu 100%. In Ordnung, als Nächstes werde ich die linke und die rechte Seite Seite an Seite platzieren . Verwenden wir dafür Display Flex. Und jetzt teile ich die Vorderseite mit der linearen Gradientenfunktion. Wie Sie sich an die fertige Version dieses Projekts erinnern , ist die Vorderseite in zwei verschiedene Teile aufgeteilt, und die rechte Seite hat eine andere Farbe. Um das zu erreichen, verwenden wir die Hintergrundeigenschaft mit einem linearen Gradienten. Lass uns deine Farben einfügen. Der erste wird RGB auf 55, auf 55 und wieder auf 55 sein. Eigentlich ist es eine weiße Farbe. In der ersten Sekunde werde ich RGB 308-30-8308 verwenden. Jetzt möchte ich die Richtung des Farbübergangs definieren. Fügen wir hier also als erstes Argument hundert Grad ein. Um diese beiden Farben gut aufzuteilen, fügen wir als Nächstes zwei White-Collar hinzu, der Wert 40% entspricht Paul, der zweiten Farbe Schreiben wir hier Null. Wie Sie jetzt sehen können ist die Vorderseite gut in zwei Teile aufgeteilt. Lass uns weitermachen und auf der linken Seite anfangen zu arbeiten. Wählen wir es mit className left aus. Definieren wir zunächst die Breite und machen sie zu 40 Prozent. Dann platziere ich den Inhalt perfekt in der Mitte auf der linken Seite. Verwenden wir dafür Flexbox. Dann müssen wir die Biegerichtung ändern. Machen wir daraus eine Kolumne. Und um dann Elemente in der Mitte zu platzieren, verwenden wir „ Inhaltszentrum ausrichten“. Und wir müssen auch die Elemente aufeinander abstimmen. Zentrum. Richtig? Als Nächstes definiere ich die Größe des Bildes. Aber jetzt wählen wir es aus CSS aus. Rechter Punkt links, IMG und saß zu 80 Prozent bei uns. Gehen Sie dann zur Datei index.html und entfernen Sie die Breitenattribute aus dem Bildelement. Nun, das Letzte, was ich in Bezug auf die linke Seite tun möchte , ist, mich um die Überschriftenelemente zu kümmern. Also lass uns weitermachen und es rechts, Punkte, links, H4 auswählen. Schaffen Sie dann mithilfe des Randes etwas Abstand um die Überschrift. Stellen wir es auf zehn Pixel ein. Erhöhen Sie dann die Schriftgröße leicht. Ich mache daraus 18 Pixel. Und schaffen Sie einen gewissen Abstand zwischen den Buchstaben den Buchstabenabstand verwenden, dessen Wert eins am höchsten ist. Okay, zum Schluss werde ich das erste Wort der Überschrift anpassen. Wählen wir das Spanelement aus, rechter Punkt, linker Bereich. Lassen Sie uns Text mit Text in Großbuchstaben umwandeln, transformieren. Großbuchstaben und Farbe ändern. Lass uns deine Farbe verwenden, 0d56, 92. In Ordnung, das ist es Über die linke Seite. Wir haben die Arbeit daran abgeschlossen und jetzt ist es an der Zeit, die rechte Seite anzupassen. Wählen wir es aus, richtig, richtig. Definieren Sie dann seine Breite und machen Sie es zu 60 Prozent. Und ändere die Farbe des Textes. Mach es weiß. Okay, als Nächstes wähle ich den richtigen Inhalt aus. Wie Sie sich erinnern, besteht es tatsächlich aus zwei verschiedenen Teilen. Die Schrift, das Awesome-Symbol und der Text. Ich möchte sie Seite an Seite platzieren. Und dafür verwenden wir Flexbox, oder? Flex anzeigen. Und ich möchte sie auch vertikal in der Mitte ausrichten. Dafür benötigen wir eine Zeile mit Values Center. Und zum Schluss lassen Sie uns mithilfe von Rand etwas Platz oben und unten schaffen . Weisen wir ihm Werte 20 Pixel und dann Null zu. Okay, lass uns weitermachen und anfangen, den ersten Teil zu stylen, bei dem es sich um eine Person handelt Wählen wir es mit dem Klassennamen und der Person aus. Ändere, seine Hintergrundfarbe. In diesem Fall verwende ich die Farbe 1187 AAC. Dann schaffen Sie mit Polsterung etwas Platz in der Box. Ich lege den Abstand oben auf fünf Pixel fest, dann Null auf der rechten Seite, fünf Pixel unten und 30 Pixel auf der linken Seite Lassen Sie uns außerdem oben und unten in der Box etwas Platz hinzufügen . Verwenden Sie Margin mit den Werten 30 Pixel und Null. Und zum Schluss werde ich einen Schatteneffekt erzeugen. Verwenden wir Box Shadow mit den Werten 010 Pixel, 20 Pixel. Und als Farbrecht RGBA geben Sie Ihre schwarze Farbe 000 und die Opazität In Ordnung, jetzt sieht es viel besser aus. Als Nächstes möchte ich mich um das Font Awesome-Symbol kümmern . Wählen wir also die richtigen Punkte aus, den richtigen Inhalt als ich. Definieren wir zunächst Breite und Höhe. Ich mache beide mit 35 Pixeln. Außerdem möchte ich, dass das Symbol einen Rand hat. Lassen Sie uns also zwei Werte zuweisen, zwei Pixel, einfarbig und farbig weiß. Und ich möchte, dass es abgerundet ist. Also brauchen wir hier einen Grenzradius mit einem Wert von 50 Prozent. Als C. Im Moment sehen die Icons nicht ganz gut aus. Ich möchte, dass sie perfekt in der Mitte des Kreises platziert werden . Verwenden wir dafür wieder Flexbox. Wir brauchen hier Display-Flex. Sie dann den Inhalt mittig und richten Sie die Artikel mittig aus. Wie Sie sehen, sieht es gut aus. Lassen Sie uns die Hintergrundfarbe ändern. Benutze deine Farbe 11878. Und schließlich, schaffen Sie mit dem Rand etwas Platz auf der rechten Seite, oder? 20 Pixel. In Ordnung, also Schritt für Schritt gehen wir voran. Als Nächstes möchte ich den Namen der Person in Großbuchstaben umwandeln Wählen wir also Überschriftenelemente aus und weisen ihnen eine Texttransformation mit Wert in Großbuchstaben zu Okay, das war's mit der Person Wie Sie sehen, müssen wir uns um die Ausrichtung der restlichen Teile kümmern . Beginnen wir mit dem ausgewählten und ihm zugewiesenen Telefon. Linker Abstand mit dem Wert 30 Pixel. Lassen Sie uns diesen Code zweimal duplizieren. Ändern Sie die Klassennamen. Wir benötigen Ihre E-Mail-Adresse. Und ändern Sie auch die Werte der Eigenschaft padding-left. Für den zweiten benötigen wir 20 Pixel und für die Adresse benötigen wir zehn Peaks. In Ordnung, jetzt müssen wir anfangen, an einem 3D-Effekt zu arbeiten Zuallererst müssen wir die 3D-Umgebung für die Karte und auch für die Teile vorbereiten die 3D-Umgebung für . Dafür müssen wir der Kartenhülle zwei Eigenschaften zuweisen , die als Perspektive bezeichnet werden Wir müssen es auf tausend Pixel setzen als wir für die Karteneigenschaft namens transform style benötigen , die einen Wert haben sollte. 3D beibehalten. Wir verwenden diese Eigenschaft , weil wir eine 3D-Umgebung auch für untergeordnete Elemente des Autos vorbereiten müssen . Moment müssen wir, wie bei der Vorderseite, auch mit der Rückseite beginnen Lassen Sie uns dafür zunächst die Rückseite sichtbar machen, gehen wir zur Datei index.html und entfernen das Attribut hidden Gehen Sie dann zurück zur Datei style.css. Jetzt drehe ich die Karte um hundert80 Grad. Dafür müssen wir Transform verwenden. Dann drehe y n in Klammer. Wir müssen 180 Grad einfügen. Wie Sie sehen, ist die Vorderseite tatsächlich immer noch sichtbar und wir brauchen sie nicht. Und um es zu verbergen, müssen wir eine Eigenschaft namens Blackface Visibility verwenden Wir müssen ihm einen Wert zuweisen, der versteckt heißt. Wie Sie sehen, ist das Logo gedreht und das müssen wir korrigieren. Wählen wir dafür die Kartenrückseite aus. Und ihr zugewiesene Transformationsrotation y mit dem Wert hundert80 Grad. Okay, danach kümmern wir uns die Position des Logos. Ich möchte platzieren. Dafür ist es perfekt in der Mitte. Lassen Sie uns zunächst seine Position als absolut festlegen. Dann, um seine Position anhand seines übergeordneten Elements zu definieren , dem es sich in diesem Fall um eine Karte handelt. Wir müssen der Position einen Verwandten zuweisen. Und dann definiere die oberen und linken Eigenschaften für die Fahrzeugrückseite. Und setze beide auf Null. In Ordnung, um das Logo perfekt zu zentrieren, verwenden wir erneut Flexbox Schreiben wir Display Flex. Dann müssen wir die Inhaltsmitte ausrichten und auch die Artikelmitte ausrichten. Wie ich sehe, ist das Logo nicht zentriert und das liegt daran , dass wir Breite und Höhe für die Rückseite nicht definiert und Höhe für die Rückseite Ich werde es nicht separat für die Rückseite definieren. Lass uns nach oben gehen und hier direkt nach der Kartenvorderseite hinzufügen. Ein anderer Selektor hat zurückgerufen. Wählen Sie dann unten Card Front aus. Weil diese beiden Zellen nur zur Vorderseite gehören. Also schnappen wir sie uns und fügen sie hier ein. Jetzt sieht alles gut aus. Ordnung, definieren wir zunächst die Größe eines Bildes aus CSS, gehen wir zur Datei index.html und entfernen das Width-Attribut Wählen Sie dann bec, IMG und legen Sie die Breite auf 40% fest. Okay, jetzt ist es an der Zeit, zuerst Baumwolle zum Laufen zu bringen Drehen wir sie zurück. Löscht diese Codezeile von hier aus. Ich möchte, dass das Auto gedreht wird, wenn wir den Mauszeiger darüber bewegen. Wählen wir also den Kartenumschlag mit dem Mauszeiger aus. Wählen Sie dann die Karte aus und weisen Sie ihr zu, drehen Sie sie um den Wert 180 Grad. Für einen glatten Effekt verwenden wir Transition, wobei die Werte 1 s transformieren. Wenn wir nun den Mauszeiger bewegen, erhalten wir einen wirklich schönen 3D-Rotationseffekt Okay? Eigentlich sind wir fast fertig. Das einzige, was ich tun möchte, ist einen Schatteneffekt zu erzeugen. Und ich möchte auch geschwungene, leicht abgerundete machen. Weisen wir der Kartenbox einen Schatten mit den Werten 015 Pixel, 60 Pixel und der Farbe RGBA 000 und der Opazität Um eine Runde zu erstellen, weisen wir ihr dann einen Randradius mit dem Wert 15 Pixel zu. Wie Sie vorerst sehen, scheint die Vorderseite nicht den Grenzradius zu haben Und um das zu beheben, wir es für Vorder- und Rückseite, genau hier, den Randradius mit dem Wert inherit genau hier, den Randradius mit dem Okay, jetzt sieht alles perfekt aus und tatsächlich haben wir die Arbeit an diesem Projekt abgeschlossen 28. Projekt 25 - 3D-Karte: In diesem Video erstellen wir mithilfe von CSS-Transformationen und Übergängen eine Karte mit schönen 3D-Effekten Dieses kleine Projekt wird auf der Grundlage von reinem HTML und CSS erstellt . Nachdem Sie sich dieses Video angesehen haben, können Sie mit reinem CSS nette und coole 3D-Effekte erstellen . In Ordnung, hier haben wir unsere Karte. Es besteht aus zwei Hauptteilen. Wir haben Rahmen und Inhalt. Sie werden im 3D-Raum platziert. Ich meine, sie werden in entgegengesetzte Richtungen gedreht . Und wenn wir den Mauszeiger über die Karte bewegen, werden diese Teile zurückgedreht und zusammengefügt . Okay, das war's, was wir in VS-Code bauen werden. Ich habe zwei verschiedene Dateien für HTML und CSS. In den Hauptelementen habe ich zwei Links, einen für Google-Schriftarten und den zweiten für Stil-CSS-Dateien. Okay, lasst uns weitermachen und anfangen, HTML-Markup zu erstellen, Open Development zu entwickeln und ihm die Klasse Card Wrapper zuzuweisen Dann öffnen sich darin und andere Entwicklungen, die die Karte selbst sein werden. Dann brauchen wir noch ein Div für den Frame. Also ihm Klassenrahmen zugewiesen. Als Nächstes müssen wir Inhalte erstellen. Also öffne wieder Entwicklungen mit ClassName-Inhalten. Und schließlich müssen wir die H1-Überschriftenelemente innerhalb des Inhalts einfügen , die Sie eine Klassennamenüberschrift haben Es wird aus zwei verschiedenen Wörtern bestehen. Sie sollten unterschiedliche Stile haben. Also werde ich das erste Pi-Span-Element einwickeln. Lassen Sie uns es öffnen und Texte in 3D einrichten. Und dann brauchen wir ein zweites Wort, Wirkung. Okay, das war's mit HTML. Öffnen wir die Datei style.css und beginnen, einige Styles zu schreiben. Zuerst werde ich die Standardränder und den Abstand von jedem Element entfernen Standardränder und den Abstand von jedem Element Wählen Sie sie also mit einem Sternchen aus und legen Sie Rand auf Null und den Abstand ebenfalls auf Null Als Nächstes müssen wir den Kartenwickel auswählen. Ich werde Called Perfectly in der Mitte der Seite platzieren . Dazu definieren wir zunächst Breite und Höhe für den Wrapper Ich werde mit einer 100-prozentigen S4-Höhe beginnen. Ich möchte es auf 100 Prozent des Viewports festlegen. Also müssen wir ihm 100 Vh zuweisen. Und dann benutze Flexbox um es perfekt an das Element zu senden Wir benötigen die folgenden Eigenschaften und Werte. Flex anzeigen. Um die Elemente dann horizontal zu zentrieren, müssen wir die Inhaltsmitte ausrichten. Und für die vertikale Zentrierung müssen wir die Elemente ausrichten. Zentrum. Wie Sie sehen, werden Inhalte also in dem Sinne platziert, Okay, jetzt müssen wir uns um die Karte selbst kümmern. Zunächst bereite ich die 3D-Umgebung vor. Und dafür müssen wir eine dieser CSS-Eigenschaften verwenden, die als Perspektive bezeichnet wird. Wählen wir die Karte aus und fügen Sie Ihre Perspektive mit einem Wert von 800 Pixeln ein. Perspektive ermöglicht es uns zu definieren wie weit das Element vom Benutzer entfernt platziert wird. In Ordnung, als Nächstes wähle ich den Frame aus. Definieren wir die Grenze. Jedem Wert sind zehn Pixel durchgehend und die Farbe 333 zugewiesen . Außerdem möchte ich die Ecke leicht abgerundet machen, indem ich den Randradius mit dem Wert fünf Spitzen verwende Randradius mit dem Wert fünf Ordnung, der Rand ist fertig und jetzt schauen wir uns den Rahmen an Als Nächstes fange ich an, an Inhalten zu arbeiten. Wählen wir es also aus. Definieren Sie seine Breite und Höhe. Ich werde die Breite auf 400 Pixel festlegen. Was die Höhe angeht. Stellen wir es auf 200 Pixel ein. Dann ändere die Hintergrundfarbe. Ich werde hier den RGBA-Wert 255-20-1205 und die Opazität 0,9 verwenden 255-20-1205 Als Nächstes platziere ich dafür die Überschrift in der Mitte des Inhalts. Schauen wir uns das noch einmal an, Flexbox. Ich hole mir diese Eigenschaften von hier und füge sie als Inhalt ein. Okay, wie Sie sehen können, befindet sich die Überschrift in der Mitte, und jetzt werde ich sie anpassen. Wählen Sie also H1-Elemente aus. Zuerst. Ich werde die Schriftfamilie ändern Lass uns deine Schrift namens Cancer Rael, San Serif verwenden. Transformieren Sie dann Text mithilfe von Text in Großbuchstaben, transformieren Sie Großbuchstaben und ändern Sie die Farbe Verwenden Sie Ihre Farbe 333 Ordnung, als Nächstes wähle ich das Span-Element aus, das tatsächlich das erste Wort der Überschrift umschließt Also rechte Überschrift, Spannen, ihrer Hintergrundfarbe zugewiesen und verwenden Sie Ihre Farbe 333. Und ändern Sie auch die Farbe des Textes, machen Sie ihn weiß. In Ordnung, unsere Elemente sind also angepasst und es ist Zeit, mit der Erstellung von 3D-Effekten zu beginnen Wie Sie sich erinnern, werden Rahmen und Inhalt standardmäßig gedreht. Drehen wir es also im ersten Frame, wir müssen es entsprechend der Y-Achse drehen Schreiben wir hier also eine Transformation, die Rotate Y verwendet und -40 Grad Wie Sie sehen, wird der Rahmen gedreht und der Inhalt wird gedreht und der Inhalt wird ebenfalls gedreht, da es sich um die untergeordneten Elemente für den Eigentlich müssen wir den Inhalt drehen, aber in die entgegengesetzte Richtung. Und wir müssen es auch nach Y und auch nach X-Achse drehen . Also müssen wir dir eine Transformation schreiben und dann y um den Wert 60 Grad drehen. Und danach müssen wir x mit einem Wert von 20 Grad drehen . Wie Sie sehen, wird der Inhalt gedreht, aber nicht im 3D-Raum, da in diesem Fall Perspektive keinen Einfluss auf den Inhalt Der Grund dafür ist, dass die Perspektive für die Karte definiert ist und der Inhalt nicht das direkte Kind des Autos ist. Um die 3D-Umgebung auf Inhalte anzuwenden, sollten wir also eine andere Eigenschaft namens Transformationsstil verwenden. Wir müssen es dem Frame zuweisen, das übergeordnete Element des Inhalts ist. Und wir müssen es auf Preserve 3D einstellen. Jetzt haben wir hier die benötigten Ergebnisse. Die Konstante wird im 3D-Raum gedreht. Okay, jetzt ist es an der Zeit, beim Hover einen Hover-Effekt zu erzeugen. Wir müssen sowohl dem Frame als auch dem Inhalt Standardpositionen geben . Wählen wir also eine Karte aus, indem wir den Mauszeiger bewegen. Wählen Sie dann den Frame aus und geben Sie ihn an, transformieren Sie, drehen Sie Y mit dem Wert Null. Wählen Sie als Nächstes Inhalt aus und klicken Sie erneut mit der rechten Maustaste auf den Inhalt Wir müssen deine Transformation bestehen. Drehen Sie erneut y mit Null und dann x mit dem Wert Null. Wenn wir nun den Mauszeiger bewegen, werden die Elemente gedreht, aber ohne Wirkung, weil wir einen Übergang benötigen , um die Rotationen zu motorischen Rotationen zu machen Weisen wir also einem Frame Transition mit den Werten all und 0,4 s zu . Dann nehmen diese Codezeile und fügen sie ebenfalls als Inhalt ein. Wenn wir jetzt erneut mit der Maus fahren, erhalten wir einen schönen 3D-Effekt Das Letzte, was ich tun möchte, ist, die Ecken des Inhalts leicht abgerundet zu machen, und dann entfernen wir sie, wenn wir den Mauszeiger über die Karte Ordnen wir dem Radius also zwei Inhalte mit dem Wert fünf Pixel zu. Und dann unten fügen Sie den Randradius mit dem Wert Okay, also wenn wir den Mauszeiger über die Karte bewegen, dann funktioniert alles perfekt 29. Projekt 26 - Benutzerdefinierte CSS-Checkbox: Hallo und willkommen zu unserem nächsten YouTube-Video. In diesem Tutorial werden wir eine benutzerdefinierte CSS-Checkbox erstellen In den meisten Fällen können Sie auf verschiedenen Websites auf Standard-Checkboxen stoßen verschiedenen Websites auf Standard-Checkboxen Aber nachdem Sie sich dieses Video angesehen haben, können Sie eine wirklich schöne und moderne Checkbox erstellen eine wirklich schöne und moderne Checkbox Wie Sie sehen, haben wir hier ein Kästchen und wenn ich darauf klicke, wird es mit einigen netten Effekten angekreuzt. Das Thema dieses Tutorials ist es, nur dieses benutzerdefinierte Kontrollkästchen zu erstellen Deshalb habe ich hier keine anderen Inhalte. Außerdem habe ich beschlossen, zur besseren Sichtbarkeit ein Kontrollkästchen mit der großen Größe zu erstellen besseren Sichtbarkeit ein Kontrollkästchen mit der großen Größe zu Aber natürlich kannst du es für deine eigenen Projekte kleiner machen . Ordnung, lass uns weitermachen und mit dem Bau dieses kleinen Projekts beginnen . Im VS-Code. Ich habe zwei verschiedene Dateien, index.html und style.css. In der Datei index.html habe ich eine grundlegende Struktur des HTML-Dokuments vorbereitet. Ich habe hier HTML- und CSS-Dateien verlinkt. Lassen Sie uns weitermachen und mit der Erstellung von HTML-Markup beginnen. Lassen Sie uns die Entwicklung eröffnen. Es sollte ein Wrapper für die Checkbox sein. Also lassen Sie uns ihm die Klasse Checkbox Wrapper zuweisen. Innerhalb dieser Entwicklung müssen wir zwei Elemente übergeben, Input und Label. Öffnen wir also die Eingabeelemente. Lassen Sie uns den Typ als Chatbox festlegen. Erstellen Sie dann ein Etikett. Als Nächstes müssen wir Label und Eingabeelemente verknüpfen , um ein Klickereignis zu erstellen. Dafür müssen wir einem Eingabe-ID-Attribut zuweisen. Und die Werte von id und vier Attributen müssen identisch sein. Lassen Sie uns Ihren Scheck übergeben. Dann wird das ID-Attribut des Eingabeelements mit einer Werteüberprüfung zugewiesen . Um zu zeigen, dass Label und Eingabeelemente miteinander verknüpft sind, werde ich Ihnen einige Inhalte geben, sagen wir, überprüfen Sie. Wenn ich also auf dieses Wort klicke , wird das Kontrollkästchen aktiviert. Schauen wir uns also an, was wir mit ID und vier Attributen erreichen können und was wir jede Woche tun, was uns helfen wird, eine saubere Küvette zu erstellen Lassen Sie uns dieses Wort von hier aus loswerden. Das Letzte, was ich im HTML-Dokument tun möchte , ist, dem Label einen Klassennamen zuzuweisen, ein Häkchen Okay, gehen wir in die Datei style.css und fangen an, einige Styles zu schreiben Wir haben hier nicht viele HTML-Elemente, aber ich werde trotzdem einige Reset-Stile erstellen. Wählen wir jedes Element mit einem Sternchen aus. Und dann setzen Sie Rand und Padding auf Null. Wählen Sie dann den Checkbox-Wrapper aus. Eigentlich werde ich die Chatbox perfekt in der Mitte der Seite platzieren perfekt in der Mitte der Seite Dafür werde ich eine der Techniken verwenden. Ich meine, die Zentrierung von Elementen mit Hilfe von Positionen und Transformationen Also müssen wir hier Position schreiben, absolut. Dann müssen wir sowohl für die oberen als auch für die linken Immobilien jeweils 50 Prozent festlegen . Und um das Element perfekt zu zentrieren, müssen wir Transform Translate verwenden. Wir sollten zwei Werte haben, -50 Prozent und erneut -50 Ordnung, wie Sie sehen können, ist das Kontrollkästchen jetzt perfekt auf der Seite zentriert Eigentlich werde ich dieses Kontrollkästchen nicht anpassen. Irgendwann sollte es versteckt werden. Wir werden ein Feld mit einem Labelelement erstellen. Dieses Eingabeelement hilft uns nur dabei , ein Klick-Event zu erstellen. Lassen Sie uns also weitermachen und das Label mit dem Häkchen für den Klassennamen auswählen mit dem Häkchen für den Klassennamen Wie Sie im Allgemeinen wissen, ist das Labelelement ein Inline-Element Und wenn wir zuerst die Breite und Höhe eines Inline-Elements anwenden wollen , sollten wir es entweder in ein Element auf Inline-Block- oder Blockebene umwandeln entweder in ein Element auf Inline-Block- oder Blockebene Also lass uns deinen Display-Block schreiben. Stellen Sie dann Breite und Höhe jeweils als zwei Pixel ein. Und ändere auch die Hintergrundfarbe. Machen wir es hellgrau mit D, D, D. Wie Sie sehen können, haben wir hier ein Feld Lassen Sie uns die Ecken mithilfe des Randradius leicht abgerundet machen mithilfe des Randradius leicht abgerundet Mit einem Wert von zehn Spitzenwerten. Okay, das war's, das Kästchen ist erstellt und jetzt müssen wir uns um das Häkchenzeichen kümmern Lassen Sie uns zunächst fortfahren und es mit dem Pseudoelement After erstellen mit dem Pseudoelement After Und danach kümmern wir uns um das Click-Event. Lassen Sie uns also das Häkchen mit den Pseudoelementen dahinter markieren mit den Pseudoelementen Zuallererst werde ich den Hintergrund der Labelelemente ändern , die ich nur für eine Weile mache Irgendwann werden wir die Hintergrundfarbe beim Klicken ändern. Lassen Sie uns hier die Hintergrundfarbe für das Etikett ändern , 08b b68 Dann fangen wir an, nach Pseudoelementen als ersten definierten Inhalt zu arbeiten Pseudoelementen als ersten definierten Inhalt und ihn leer zu machen Eigentlich sollte das Häkchenzeichen durch Rahmen erzeugt werden Definieren wir zunächst eine Position als absolut. Und um Elemente entsprechend ihrem übergeordneten Element zu positionieren , müssen wir ihrem übergeordneten Element eine relative Position zuweisen. Als Nächstes definieren wir Breite und Höhe. Stellen Sie die Breite auf 25 Pixel ein. Was die Höhe angeht, weisen wir ihr 45 Pixel zu. Um die Elemente sichtbar zu machen und um ein Häkchenzeichen zu erstellen, verwenden wir nun Rahmen Ich werde Grenzen für zwei verschiedene Standorte definieren, für Rechte und für Flaschen. Schreiben wir hier also Rand, rechts und weisen Wahrheitswerte zu, fünf Pixel, durchgehend und die Farbe Weiß. Das dupliziert diese Codezeile und wechselt direkt nach unten. Wie Sie sehen, ist das Element machbar, aber als Gast müssen wir uns um seine Position kümmern. Wir platzieren es in der Mitte und müssen es drehen, damit es wie ein Häkchenzeichen aussieht Definieren wir die Spitzenposition also als 40%. Dann brauchen wir 50 Prozent übrig. Verwenden Sie dann erneut Transform, übersetzen Sie mit Werten von -50 Prozent Und wieder -50 Prozent. Okay? Jetzt müssen Sie nur noch Elemente entsprechend der Z-Achse drehen Und dann werden wir ein Ergebnis benötigen. Schreiben wir also, rotieren Sie Z und fügen Sie hier zwei Grad ein. Jetzt können Sie sehen, dass wir hier ein Häkchen haben, und jetzt ist es an der Zeit, dass es funktioniert Lassen Sie uns zunächst die Hintergrundfarbe der Clique ändern. Lassen Sie uns dafür wieder hierher kommen. Bisherige Hintergrundfarbe, hellgrau. Um dann ein Klickereignis zu erstellen, verwende ich eine Pseudoklasse namens checked Es ermöglicht uns, Stile zu definieren und sie auf Elemente anzuwenden , wenn das Kontrollkästchen aktiviert ist Wählen wir also das Eingabeelement mit der ID aus, überprüfen Sie. Dann füge hier eine Pseudoklasse namens checked hinzu. Dann müssen wir die Labelelemente auswählen. Wie Sie wissen, wird es direkt nach den Eingabeelementen in der Datei index.html platziert . Und um das Label auszuwählen, verwende ich einen der CSS-Kombinatoren namens General Sibling Selector, durch das Vorzeichen bis zum Zeichen ausgedrückt wird Und jetzt brauchen wir den Klassennamen der Elemente, oder? Häkchen Lassen Sie uns Ihre Hintergrundfarbe mit einem Wert 0868 übergeben. Okay, also wenn ich auf das Kästchen klicke, wird die Hintergrundfarbe geändert. Lassen Sie uns dafür sorgen, dass sich dies mithilfe des Übergangs auf den Motor auswirkt. Lassen Sie uns Wahrheitswerte, Hintergrund, Farbe und Dauer, 0,4 s zuweisen Hintergrund, Farbe und Dauer, . Jetzt sieht es also viel besser aus und es ist tatsächlich an der Zeit, am Häkchenzeichen zu arbeiten Standardmäßig mache ich es versteckt. Machen wir das mit Opazität Null. Und jetzt sollten wir es anzeigen. Wenn wir das Kontrollkästchen ankreuzen, verwenden wir dieselbe Technik, die wir vor einer Minute Also schnappen wir uns das und wählen es von hier aus aus. Fügen Sie dann Pseudoelemente da wir ein Häkchenzeichen anzeigen sollten Und jetzt füge deinen Opazitätswert ein. Und benutze auch den Übergang, um dem Ganzen und 0,4 s den Motor zuzuweisen . Also wenn ich jetzt klicke, dann funktioniert alles gut. Und eigentlich haben wir hier schon nette Effekte. Die Checkbox funktioniert. Bevor wir dieses Tutorial beenden, möchte ich zu den Scheckbüchern noch einige weitere Fakten hinzufügen. Standardmäßig werde ich das Häkchenzeichen größer machen. Und wenn Sie dann klicken, geben wir ihm die Standardgröße. Und das wird irgendwann ziemlich gut aussehen. Lassen Sie uns also weitermachen und der Transformation eine Eigenschaftsfunktion namens scale hinzufügen , mit der wir die Größe eines Elements verwalten können , das unsicher ist 10. Das bedeutet also, dass wir die Elemente einfach zehnmal größer gemacht haben als zuvor. Und jetzt mussten wir es auf Klick wieder kleiner machen. Also werde ich mir die gesamte Codezeile schnappen. Wir brauchen all diese Funktionen, denn wenn wir Transform Scale verwenden, diese beiden Funktionen, ich meine Translate und Rotate, werden diese beiden Funktionen, ich meine Translate und Rotate, überschrieben und die Position der Häkchenseite wird unterbrochen Ändern wir also den Skalenwert und machen ihn zu einem. Und jetzt kannst du sehen, dass wir hier einen wirklich schönen Effekt haben. Okay, wir sind fast fertig. Das einzige, was wir tun müssen, ist Eingabeelemente auszublenden. Und das mache ich mit einem HTML-Attribut namens hidden. Ordnen wir es also Eingabeelementen zu. In Ordnung, jetzt sind wir fertig. Alles funktioniert perfekt und unser kleines Projekt ist abgeschlossen 30. Projekt 27 - Hamburger Menü: In diesem Video werden wir das Hamburger-Menü mit einigen netten Effekten erstellen . Dieses Projekt wird auf Basis von HTML, CSS und etwas JavaScript erstellt . Wie Sie sehen können, haben wir hier eine Landingpage mit Vollbild-Hintergrundbild Und in der oberen rechten Ecke befindet sich das Hamburger-Menüsymbol. Wenn ich darauf klicke, wird das Symbol in x umgewandelt. Und jetzt wird ein Teil von der rechten Seite angezeigt. Hier haben wir ein paar Navigationselemente und wenn ich mit der Maus über sie fahre , bekommen wir nette Hover-Effekte In diesem Video erfahren Sie, wie Sie all diese Dinge erstellen. Lass uns weitermachen und mit dem Aufbau unseres Projekts beginnen . Im VS-Code. Ich habe ein paar Dateien für HTML, für CSS und für JavaScript. Und hier haben wir auch einen Ordner namens Images , in dem wir ein Bild als Hintergrund für die Ausleihseite haben. Sie können Starterdateien über den Link in der Beschreibung herunterladen . Okay, lassen Sie uns weitermachen und die Datei index.html öffnen. Ich habe die Grundstruktur des HTML-Dokuments vorbereitet. Innerhalb der Kopfelemente habe ich zwei Links. Eine für Google-Schriftarten, ich werde eine Schrift namens Doses und eine andere für CSS-Dateien verwenden . Außerdem habe ich hier ein Script-Tag eingefügt, um die JavaScript-Datei zu verlinken. Okay, fangen wir an, HTML-Markup zu erstellen, offene Entwicklungen, das ein Container sein wird Es ist also seiner Klasse Container zugewiesen . Dann öffne ich im Container Elemente, die den gesamten Inhalt von Navbar umfassen Weisen wir ihm die Klasse navbar zu. Dann erstelle ich darin zuerst ein Hamburger-Menüsymbol. Öffnen Sie also die Entwicklung und weisen Sie ihr einen Klassennamen zu, Hamburger-Menü. Dann füge ich in diese Div-Elemente drei Div-Elemente für drei Zeilen eines Symbols ein. Weisen wir seiner Klasse einen Namen für eine gemeinsame Styling-Linie zu. Und außerdem benötigen wir hier einen anderen Clusternamen für individuelles Styling. Richtige Zeile eins. Dann duplizieren Sie diese Zeile zweimal und ändern Sie die Klassennamen. Wir brauchen Zeile zwei, Zeile drei. Okay, das war's vorerst mit dem Menüsymbol, es ist nicht machbar, weil wir nur leere Div-Elemente ohne Stile haben nur leere Div-Elemente ohne Stile Als Nächstes erstelle ich eine Navigation. Es wird durch UL-Elemente vertreten. Lassen Sie uns ihm nicht zuletzt eine Klasse zuweisen. Fügen Sie dann LI-Elemente ein. Es sollte einen Klassengegenstand haben. Und schließlich benötigen wir Ihre Link-Elemente. Lassen Sie uns ihm einen Klassennamen als Nav-Link zuweisen und auch Ihr erstes Element einfügen. Insgesamt werde ich sieben Navigationspunkte haben. Also lass es uns sechsmal duplizieren und dann schnell den Inhalt hier über uns ändern. Diese Neuigkeiten. Als nächstes wird Galerie statt Veranstaltungen sein. Preisgestaltung. Und für den letzten fügen Sie Ihren Inhalt ein. In Ordnung, das war's also mit HTML. Es ist Zeit, mit dem Styling zu beginnen. Gehen wir zur Datei style.css. Zuerst werde ich einige Reset-Stile erstellen. Lassen Sie uns die Standardränder und den Abstand von jedem Element entfernen und den Abstand von jedem Element Wählen Sie sie mit einem Sternchen aus. Und dann geben Sie Ihre Margin Null und Padding Zero ebenfalls weiter. Dann ändere ich die Schriftfamilie für das Körperelement. Wählen wir es also aus. Und dann füge hier Schriftfamiliendosen ein, San-Serif. Als nächstes kümmern wir uns um den Container. Stellen Sie seine Breite und Höhe als Breite ein. Schreiben wir hier 100 Prozent. Was die Höhe angeht. Ich werde es auf 100 Prozent des Viewports festlegen. Also richtig, 100 pH als Hintergrund. Ich werde ein Bild erstellen. Also richtiger Hintergrund als wir hier brauchen, linearer Gradient. Ich werde drei verschiedene Farben verwenden. Der erste ist RGBA 000 und Opazität 0,4. Als nächstes schreiben wir RGBA 14848, wieder 48 und Opazität Und dann fügen Sie RGBA 167-60-7607 und Opazität 0,4 ein. Dann gibt die innere URL einen Teil der Bildbilder und wählen Sie das Bild mit dem Namen Bg Dot JPG als Position des Hintergrunds aus. Wir brauchen Center und kommen auch hier vorbei, keine Wiederholung. Und schließlich werde ich die Eigenschaft Hintergrundgröße mit dem Value-Cover verwenden . In Ordnung, die Landingpage ist fertig. Wir haben hier ein Vollbild-Hintergrundbild. Und jetzt nehme ich hier das Hamburger-Menü Wie Sie wissen, wird es aus drei Zeilen bestehen und sollte in der oberen rechten Ecke der Seite platziert werden. Wählen wir zunächst die schnelle Entwicklung aus, die einen ClassName, Hamburger-Menü hat Definieren wir seine Breite und Höhe. Ich werde mit 35 Pixeln beginnen. Was die Höhe angeht, weisen wir ihr 30 Pixel zu. Derzeit ist das Symbol immer noch nicht sichtbar. Und um das zu beheben, weisen wir ihm einen temporären Hintergrund zu, sagen wir rot. Okay, jetzt wird das Symbol standardmäßig angezeigt und befindet sich in der oberen linken Ecke. Aber wie gesagt, ich werde es in der oberen rechten Ecke der Seite platzieren . Definieren wir dazu diese Position als fest. Und dann brauchen wir die obere Position, 50 Pixel und die rechte auf 50 Pixel eingestellt ist. Jetzt kann ich in der oberen rechten Ecke verschieben. Und schließlich ändere ich den Cursor. Lass es uns klarstellen. In Ordnung, mit dem übergeordneten Div-Element sind wir fertig. Es ist Zeit, an Lichtern zu arbeiten. Lassen Sie uns weitermachen und sie mithilfe der gemeinsamen Klassennamenzeile auswählen . Stellen Sie dann die Breite auf 100 Prozent ein. Bedeutet, dass die Linie die gesamte Breite des übergeordneten Elements einnimmt , also 35 Pixel. Als Nächstes definiere ich die Höhe. Machen wir drei Pixel daraus und ändern wir auch die Hintergrundfarbe. Du siehst deine Farbe Schokolade. Okay, jetzt sind Linien sichtbar, aber sie kleben aneinander und wir müssen sie trennen. Um das zu erreichen, werde ich Flexbox verwenden Lassen Sie uns einen Flex-Container für das Hamburger-Menü erstellen. Dafür brauchen wir Display Flex. Ändern Sie dann die Biegerichtung. Wir müssen Linien als Spalte platzieren. Wir brauchen also eine Spalte mit flexibler Richtung. Und schließlich, um etwas Abstand zwischen ihnen zu schaffen , verwenden Sie justify contents. Werte bewegen sich im Umlauf. Okay, jetzt sind die Linien getrennt und wir können den roten Hintergrund tatsächlich loswerden. In Ordnung, das Menüsymbol ist bereits erstellt und bevor wir es zum Laufen bringen, werde ich die Navigationsleiste anpassen Wir sollten es auf der rechten Seite platzieren. Lassen Sie uns also weitermachen und das Navigationselement mit dem Klassennamen navbar auswählen Navigationselement mit dem Klassennamen navbar Definieren wir zunächst seine Breite und Höhe. Ich werde die Breite auf 300 Pixel festlegen. Was die Körpergröße angeht, machen wir es zu 100 Prozent. Dann ändere die Hintergrundfarbe. Lass uns deine Farbe 26262 verwenden. Okay, um den aktuellen Balken auf der rechten Seite zu platzieren , definieren wir diese Position als fest. Und dann machen Sie beide Eigenschaften oben und rechts auf Null. In Ordnung, die Navbar ist also richtig positioniert. Jetzt kümmere ich mich um die Position der Navigationselemente. Ich möchte sie perfekt in der Mitte der Navigationsleiste platzieren der Mitte der Navigationsleiste Und dafür verwenden wir Flexbox genau hier. Flex anzeigen. Um Elemente horizontal zu zentrieren , sollten Sie justify-content verwenden Zentrum. S für vertikale Zentrierung. Verwenden Sie „Elemente ausrichten, zentrieren“. Okay, also die Gegenstände werden in der Mitte platziert. Und das Letzte, was ich in Bezug auf die Navbar tun möchte , ist, ihre Form anzupassen Und ich werde es mit dem Grenzradius machen. Tatsächlich kann diese Eigenschaft vier verschiedene Werte annehmen , die vier Ecken entsprechen. Ich bin in der oberen linken Ecke, oben rechts, unten rechts und unten links So können wir verschiedene Grenzradien definieren , vier verschiedene Spalten. In diesem Fall werde ich die obere linke und untere linke Ecke anpassen . Was die restlichen Ecken angeht, werden wir sie nicht anfassen. Als Wert für den Randradius der oberen linken Ecke füge ich hier 20 Prozent Dann werden, wie gesagt, die obere rechte und die untere rechte Ecke nicht geändert. Also müssen wir hier zweimal Nullen einfügen. Und für die untere linke Ecke verwende ich 60%. Ordnung, die Form der Navigationsleiste ist also angepasst und jetzt werde ich Navigationselemente gestalten Lassen Sie uns weitermachen und UL-Elemente auswählen. Es hat einen Klassennamen. Nicht zuletzt. Ich werde Text auf der rechten Seite platzieren. Verwenden wir also Text rechtsbündig ausrichten. Als Nächstes wählen wir LI-Elemente aus. Es hat einen Klassennamen, keinen Gegenstand. Lassen Sie uns zunächst die Standardaufzählungszeichen loswerden, indem wir keine Aufzählungszeichen im Listenstil verwenden Dann schaffen Sie mit Margin etwas Platz. 25 Wochen. Okay, jetzt müssen wir die Link-Elemente auswählen, die den Klassennamen nav link Lassen Sie uns die Standardstile loswerden. Textdekoration verwenden. Keine. Dann die Schriftgröße erhöhen , auf 22 Pixel. Farbe ändern. Sie sehen Ihre Farbe E. Außerdem werde ich die Schrift mithilfe der Schriftstärke heller machen 300. Erstellen Sie dann mithilfe des Buchstabenabstands etwas Abstand zwischen den Buchstaben. Ein Pixel. Und schließlich machen Sie Text in Großbuchstaben, indem Sie die Texttransformation Uppercase verwenden . In Ordnung, das war's mit Navigationselementen. Wie du dich an das fertige Projekt erinnerst, werden wir einige Hover-Effekte erstellen den Mauszeiger bewegen, sollten wir am oberen und unteren Rand der Elemente Linien am oberen und unteren Rand der Elemente Es wird mit einem reibungslosen Übergang angezeigt. Und aus den entgegengesetzten Richtungen. Eigentlich werden wir diese Zeilen mit den Pseudoelementen „Nach“ und „davor“ erstellen mit den Pseudoelementen „Nach“ und „davor Beide werden einige gemeinsame Stile haben. Lassen Sie uns also weitermachen und beide Pseudoelemente auswählen, rechts, zuvor den Nav-Link Dann duplizieren Sie diese Zeile und ändern Sie davor und danach. Also müssen wir zuerst den Inhalt als leer definieren. Als Nächstes definiere ich die Breite und Höhe. Lassen Sie uns zu 100 Prozent mit uns anfangen. Stellen Sie dann die Höhe in Pixeln ein und ändern Sie auch die Hintergrundfarbe. Du siehst deine Farbe Schokolade. Derzeit sind Linien nicht sichtbar, da es sich um Inline-Elemente handelt und daher Breite und Höhe nicht angewendet werden Wenn wir also ihre Position als absolut definieren und dann den übergeordneten Elementen zuweisen, was nicht die relative Linkposition ist, werden beide Zeilen angezeigt. Auf einen Blick. Wir sehen hier nur eine Zeile, aber tatsächlich sind beide Linien nebeneinander angeordnet Okay, als Nächstes definiere ich eine linke Position für beide Elemente als Null. Jetzt nehmen beide Linien die gleichen Stellen ein und um sie zu trennen, müssen wir eine untere Position für hintere Pseudoelemente definieren und sie auf Null setzen Kopieren wir also diesen Selektor und weisen ihm die untere Null zu Jetzt sind beide Zeilen getrennt. Wie Sie wissen, ist die oberste Position standardmäßig auf Null gesetzt. Wenn wir es also nicht manuell definieren, das kein Problem. Aber wie dem auch sei, ich werde es definieren. Also lass uns diesen Code duplizieren. Dann verwandle nachher in vorher. Und statt unten, rechts, oben. Okay, das Letzte, was wir hier wollen, ist etwas Polsterung zu erstellen , weil das Endergebnis zu nah am Objekt liegt Lassen Sie uns dem Nav-Link-Padding oben und unten rechts drei Pixel und dann Null auf der linken und rechten Seite zuweisen rechts drei Pixel und dann Null auf der linken und rechten Seite Okay, das war's auch schon damit, dass Linien jetzt einen Schwebeeffekt erzeugen müssen Standardmäßig werde ich diese Zeilen ausblenden. Und wenn wir den Mauszeiger über die Elemente bewegen, werden diese Linien gleichmäßig aus den entgegengesetzten Richtungen angezeigt Um Linien zu verbergen, verwende ich Transform. Dann skalieren Sie x. Wir müssen es auf Null setzen. Wenn wir den Mauszeiger nun bewegen, müssen wir die Skala vergrößern und sie zu einer machen Lassen Sie uns also weitermachen und mit dem Mauszeiger den Nav-Link auswählen. Dann füge hier vorher hinzu. Duplizieren Sie diesen Selektor und ändern Sie davor und danach. Und dann füge deine Transform, Scale x mit dem Argument eins ein. Und schließlich, um den Effekt intelligenter zu machen, verwenden wir die Übergangstransformation 0,5 s. In Ordnung, wenn wir also den Mauszeiger über die Elemente werden Linien angezeigt Aber wie Sie sehen können, erscheinen sie standardmäßig von der Mitte aus. Dies passiert, weil die Eigenschaft Transform Origin standardmäßig als Sensor festgelegt ist. Also müssen wir es für beide Linien ändern. Weisen wir den Pseudoelementen den Transformationsursprung zu. Mach es richtig. Kopieren Sie dann diesen Code und fügen Sie ihn für vorherige Pseudoelemente Und statt rechts fügen wir hier links ein. Wenn wir den Mauszeiger über die Elemente bewegen, funktioniert alles perfekt Wir haben hier einen schönen Schwebeeffekt. Okay, mit der Navigation sind wir fertig. Weiter. Wir müssen dafür sorgen, dass das Hamburger-Menü funktioniert. Als erstes transformiere ich das Menüsymbol in x. Dafür müssen wir die Positionen für die erste und dritte Zeile ändern . Was den zweiten betrifft, sollte er beheizt werden. Lassen Sie uns also weitermachen und Zeile eins auswählen. Wir müssen die erste Linie um 45 Grad entsprechend der Z-Achse drehen 45 Grad entsprechend der Z-Achse Genauer gesagt müssen wir für Zeile eins Rotate Z -45 Grad verwenden Lassen Sie uns diesen Code duplizieren. Ändere den Klassennamen nach rechts, Zeile drei. Und entferne auch das Minuszeichen von hier aus. Wie gesagt, wir müssen Zeile zwei verstecken. Wählen wir es also aus und verwenden Sie Ihre Opazität Null. Wie Sie sehen können, werden Linien gedreht, aber wir haben hier kein x. Wir müssen uns um die Positionen der Linien kümmern Dafür. Ich füge hier übersetzen hinzu. Dann als Wert der X-Richtung, oder? Minus acht Pixel, S4, Y-Achse. Wir müssen deine sechs Wochen überstehen. Kopieren wir es und fügen vier Zeilen drei Statt sechs Pixeln brauchen wir hier nur minus sechs Peaks. Jetzt wird in Betracht gezogen. Das Problem ist behoben und wir haben hier x. Eigentlich ist dies nicht der Standardstatus des Icons. Wir müssen es zu x machen, wenn wir darauf klicken. Um das zu erreichen, werde ich ein bisschen JavaScript verwenden. Aber bevor wir etwas JavaScript schreiben, füge ich zwei Zeilen hinzu. Neuer Klassenname, nennen wir ihn Änderung. Dann fügen wir diese Navbar der Klasse zwei mithilfe von JavaScript hinzu. Und all diese Dinge werden passieren, wenn wir auf das Symbol klicken. Gehen wir zur Datei script.js und erstellen wir zunächst eine neue Variable, nennen wir sie Menüsymbol. Und wählen Sie dann die Entwicklungen , die einen Klassennamen haben: Hamburger-Menü. Dazu müssen wir Dokumente schreiben, Punkte, Abfragen, Selektoren und das Hamburger-Menü für Ihren Klassennamen weitergeben Hängen Sie dann den Event-Listener an das Menüsymbol an, rechts, Menüsymbol, Punkt, fügen Sie den Event-Listener Als erstes Argument müssen wir Ihren Namen der Ereignisse angeben, nämlich Clique Dass wir deine Funktion übergeben müssen, die eine Pfeilfunktion sein wird. Jetzt müssen wir zwei neue Klassen hinzufügen , die geändert werden. Zuerst erstellen wir eine neue Variable, nennen wir sie Navbar. Es sollte Dokumenten, Punkten, QuerySelector entsprechen. Lassen Sie uns Ihren Clusternamen in die Navigationsleiste einfügen. Dann innerhalb von Function, Right, Navbar und einer einfacheren Eigenschaft namens Klassenliste Jetzt denkst du vielleicht, dass wir deine Methode Adds verwenden müssen, aber in diesem Fall funktioniert es nicht denn wenn wir auf das Symbol klicken, sollte Napa eine Klassenänderung hinzugefügt werden Aber beim nächsten Klick sollte es entfernt werden. Und um das zu erreichen, müssen wir anstelle von Add eine Methode namens Toggle verwenden Lassen Sie uns die Änderung Ihres Klassennamens einfügen. Wenn wir also auf das Symbol klicken, wird es in x umgewandelt und beim nächsten Klick erhält es seinen Standardstatus. Damit sich das auf den Motor auswirkt, gehen wir zurück zur Datei style.css und weisen dem Zeilenübergang Werte 0,8 s zu . Jetzt ist eine Tatsache intelligenter geworden, aber ich denke, wir können sie noch schöner machen Anstatt Linien nur um 45 Grad zu drehen, können wir sie eine ganze Drehung machen lassen, um 360 Grad, und dann wieder um 45 Grad rotieren lassen. Also als die Werte, die wir hier eingeben müssen, Summe von 360,45, was letztlich 405 Grad ergibt Jetzt stimmen Sie also zu, dass es viel besser aussieht. In Ordnung, wir sind fast da. Die andere Sache, die Sie tun müssen, ist, standardmäßig genügend Ports auszublenden und ihn auf Click anzuzeigen Dazu ändern wir den Wert der rechten Position und machen ihn auf -300 Pixel hoch Jetzt ist Navbar versteckt. Um es von rechts nach links zu verschieben, verwende ich erneut den Klassenwechsel. Ordnen wir es dem zu, richtig, mit dem Wert Null. Wenn wir nun klicken, wird Napa angezeigt, aber als Gast müssen wir, um den Effekt schöner zu machen, um den Effekt schöner zu machen, Transition mit den Werten verwenden Als 0,8 s. Und außerdem werde ich Ihre Funktion Cubic Bezier verwenden, der wir einen benutzerdefinierten Übergang erstellen können In diesem Fall möchte ich, dass der Effekt etwas langsamer beginnt und schneller endet. Dafür gebe ich Ihre Werte 100,1 weiter. Jetzt können wir also sagen, dass alles perfekt funktioniert. Wir haben hier eine schöne und modern aussehende Navbar mit einigen coolen Effekten 31. Projekt 28 - Preiskarten: In diesem Tutorial zeige ich Ihnen, wie Sie schöne moderne Karten mit einigen coolen Effekten erstellen . Wie Sie sehen können, haben wir hier drei ähnliche Karten mit unterschiedlichen Preispaketen und Konditionen. Wenn ich den Mauszeiger über sie bewege, wird die Größe der Karren gleichmäßig vergrößert Sie werden größer werden. Und auch wenn ich den Browser kleiner mache , werden die Karten verpackt. Das Projekt wird also auf verschiedenen Bildschirmgrößen reagieren . In Ordnung. Also hier im VS-Code habe ich ein paar Dateien für HTML und für CSS. Und wir haben auch einen Ordner, in dem ich ein Bild habe. In der Datei index.html habe ich die Grundstruktur des HTML-Dokuments erstellt. Innerhalb des Hauptelements haben wir ein paar Links. Die erste ist für Google-Schriftarten. Ich werde Schriften verwenden, die Josephine Sans und Montserrat heißen Josephine Sans und Dann habe ich hier einen Link für Font Awesome Icons weitergegeben. Und schließlich habe ich einen Link zur Datei style.css. Okay, lass uns weitermachen und anfangen, HTML-Markup zu erstellen. Ich werde Div-Elemente erstellen, was ein Container sein wird. Es wird den gesamten Inhalt enthalten. Also lassen Sie uns ihm den Klassencontainer zuweisen. Als nächstes benötigen wir ein weiteres Div-Element, das als Wrapper für Karten dienen soll Also zugewiesener Klassennamenkarten-Wrapper. Und jetzt müssen wir die Karte selbst erstellen. Lassen Sie uns eine weitere Entwicklung mit Klassennamenkarte eröffnen. Eigentlich wird die Karte aus drei Hauptteilen bestehen. Wir werden Kartenkopf, Kartenkörper und Kartenfuß Lassen Sie uns also Ihre div-Elemente einfügen, die ein Kartenheader sein sollten. Weisen wir seiner Klasse die Kopfzeile einer Namenskarte zu. Es wird aus zwei Überschriftenelementen bestehen. Zunächst beschreiben wir, welche Art von Paket wir haben. Ich bin kostenlos, Standard oder Premium. Was den zweiten betrifft, sollte es sich um den Preis des Pakets handeln. Lassen Sie uns also das h3-Überschriftenelement öffnen und Ihre Texte kostenlos einfügen Als Nächstes benötigen wir H1-Überschriftenelemente mit Texten, Dollar, Vorzeichen und Null Okay, das war's mit dem Kartenkopf. Als nächstes benötigen wir einen Kartenkörper. Es wird darstellen, welche Funktionen wir im Falle des kostenlosen Pakets haben. Lassen Sie uns also die Entwicklung erstellen und der Klassennamenkarte als Hauptteil zuweisen. Die Funktionen werden mindestens vertreten sein. Das sind also offene UL-Elemente. Ich füge es LI ein. Also werden wir hier Font, Awesome Icons mit einigen Texten haben. Im Falle eines kostenlosen Pakets nur zwei Funktionen verfügbar und der Rest nicht. Die ersten beiden Funktionen werden also Häkchen-Symbole haben, und die restlichen sollten X-Gleichungen haben. Lassen Sie uns hier I-Elemente öffnen und ihnen die Klasse F, a, S, FA Dash Check zuweisen . Das hat nach dem Schließen einige Texte eingeführt, Tag. Einige enthalten Text. Insgesamt werde ich sechs Funktionen haben. Also lass uns diese Zeile fünfmal duplizieren. Und dann mussten wir hier nur noch die Klassennamen für zuletzt ändern, für Font Awesome-Icons. Anstelle des Schecks müssen wir hier Zeiten schreiben. Okay, das war's mit dem Kartenkörper. Wie gesagt, wir müssen auch eine Kartenfußzeile erstellen. Es wird nur eine Schaltfläche enthalten. Lassen Sie uns also die Entwicklungen öffnen und dieser Klasse einen Vergaserfilter zuweisen Dann im Div-Element Create button , der den Text type button und den Text subscribe haben sollte. Okay, wir haben die erste Karte erstellt. Insgesamt werden wir drei davon haben. Also lass uns weitermachen und die gesamte Karte zweimal duplizieren. Nehmen Sie dann einige Änderungen vor. Statt drei brauchen wir hier Standard S für das zweite Überschriftenelement statt Null, oder? Sagen wir 49 und Schrägstrich, dann öffnen Sie Span-Elemente und richten Sie einen Monat ein Im Falle eines Standardpakets werde ich also vier Funktionen zur Verfügung stellen. Also lasst uns hier die Klassennamen ändern. Wir müssen nachschauen statt mal. Die zweite Karte ist also fertig. Lassen Sie uns einige Änderungen für das dritte Element vornehmen, das wir hier benötigen, Premium statt 99, Open-Span-Element und fügen Sie den Monat ein. Schließlich werde ich alle Funktionen zur Verfügung stellen. Für die letzten vier Funktionen benötigen wir also einen Klassennamen. Check statt Times Okay , das war's mit HTML-Markup Wir haben Strukturen für alle drei Karten erstellt. Jetzt ist es an der Zeit, sie zu stylen. Gehen wir zur Datei style.css und erstellen wir zunächst einige Reset-Stile. Ich wähle jedes Element mit Sternchen aus. Stellen Sie dann Rand und Abstand auf Null ein. Und verwenden Sie auch die Box-Sizing-Eigenschaft und weisen Sie ihr Border-Box zu Ordnung, also das erste Element, um das ich mich kümmern möchte, ist sein Container Wählen wir es also aus und definieren wir seine Breite und Höhe. Ich werde die Breite auf 100% S-Balkenhöhe festlegen. Stellen wir es auf 100 Prozent des Schülers und ändern wir auch die Hintergrundfarbe Ordnen wir ihm die Farbe d, d, d zu. Okay, danach wähle ich den Kartenumschlag aus. Ich möchte also, dass der Wrapper horizontal in der Mitte platziert wird Und außerdem werde ich die Karten in einer Reihe ausrichten. Um das zu tun, definieren wir die Breite zunächst als 90%. Um dann die Kartenhülle in der Mitte des Containers zu platzieren, benötigen wir einen Rand, unsere Reihe Als Nächstes definieren wir die Höhe und legen sie auf hundert Prozent fest. Jetzt werde ich die Karten horizontal in einer Reihe ausrichten und sie mithilfe der Flexbox vertikal in der Mitte platzieren mithilfe der Flexbox vertikal in der Mitte Also brauchen wir hier Display-Flex. Wie Sie jetzt sehen können, werden die Karten in einer Reihe platziert. Lassen Sie uns etwas Abstand zwischen ihnen schaffen. Und dafür verwenden wir „justify content with value space around“. Um sie vertikal zu senden, verwenden Sie abschließend eine Zeile und legen Sie sie als Mittelpunkt fest. In Ordnung, das war's also mit der Ausrichtung der Karten. Jetzt müssen wir anfangen, die Knorpelzelle zu stylen. Also lass uns weitermachen und eine Karte auswählen. Unerwünscht. Lassen Sie uns die Breite auf 300 Pixel festlegen. Dann ändere ich den Hintergrund. Eigentlich möchte ich ein Bild als Hintergrund setzen. Lassen Sie uns hier zunächst einen linearen Gradienten verwenden und hier einige RGBA-Werte übergeben Wir brauchen schwarze Farbe mit einer Opazität von 0,5. Übergeben Sie dann erneut den RGBA-Wert mit derselben schwarzen Farbe, jedoch mit einer Opazität Als Nächstes müssen wir einen Teil des Bildes angeben. Also Insight-URL, das ist richtig, Bilder und wählen Sie Bild für Punkt JPG. Dann als Position des Bildes rechts in der Mitte. Auch hier brauchen wir keine Wiederholung. Und schließlich verwenden wir die Eigenschaft Hintergrundgröße zusammen mit dem Value Cover. Wie ihr sehen könnt, haben wir hier ein Bild als Hintergrund der Karte, aber im Moment sieht der Strom selbst wirklich hässlich aus. Als Nächstes ändern wir die Farbe des Inhalts, um ihn sichtbar zu machen. Stellen wir es auf weiß ein. Und dann zentrieren Sie einfach den Text auf der Karte, indem Sie die Mitte der Textausrichtung verwenden Ordnung, lassen Sie uns mit dem Styling einzelner Elemente innerhalb der Karte fortfahren Der erste Teil, den ich stylen möchte, ist der Kartenkopf , der aus zwei Überschriftenelementen besteht. Wählen wir zunächst den Kartenkopf selbst aus und schaffen am unteren Rand etwas Platz , indem wir den unteren Rand mit einem Wert von 40 Pixeln verwenden. Als Nächstes wähle ich die ersten Überschriftenelemente aus. Also müssen wir hier den Kartenkopf schreiben. Dann h3. Lassen Sie uns die Schriftfamilie ändern. Ich werde deine Schrift namens Josephine Sans verwenden. Sans-Serif. Das erhöhte die Schriftgröße. Ich werde es auf 30 Pixel einstellen. Außerdem werde ich die Schrift leichter machen , indem ich die Schriftstärke mit dem Wert 300 verwende Okay, die erste Überschrift sieht schon gut aus, aber ich möchte noch ein paar Styles hinzufügen Lass uns seine Farbe ändern. In diesem Fall verwende ich eine Farbe namens Schokolade. Schaffen Sie dann etwas Platz um die Überschrift herum. Verwenden Sie einen Rand mit einem Wert von 30 Pixeln. Danach möchte ich am unteren Rand der Überschrift einen Rahmen erstellen. Verwenden wir dafür einen Rand unten. Dann, genau hier, werden eine Pixelrille und die Farbe weiß Wie Sie sehen können, haben wir hier unten einen Rand, aber ich denke, er ist zu nah an der Überschrift. Und um das zu beheben, verwenden wir einfach Padding mit Pixeln mit einem Wert von zehn Pixeln und Spitzenwerten von zehn In Ordnung, das war's mit der ersten Überschrift Elements. Lass uns weitermachen und den zweiten stylen. Wählen Sie den rechten Kartenkopf aus, H1. Tatsächlich müssen wir für H1 diese drei Eigenschaften verwenden. Also werde ich sie von hier aus holen und dann einfach die Werte ändern. Als Schriftfamilie verwende ich Montserrat Stellen Sie dann die Schriftgröße auf 60 Pixel ein. Was die Schriftstärke angeht, lassen wir es so, wie es ist. Okay, das zweite Überschriftenelement ist also formatiert, aber wir müssen hören, ob wir einige Änderungen vornehmen können Ich möchte das 1-Dollar-Schild kleiner machen und es auch etwas höher platzieren. Um das zu tun, verwende ich ein HTML-Tag namens superscript Lassen Sie uns also weitermachen und Dollarzeichen für alle Karten hochstellen. Wie Sie sehen, ist das Dollarzeichen etwas höher platziert, aber es ist zu größer. Verkleinern wir also die Schriftgröße. Wählen Sie den rechten Kartenkopf und die Suppe und stellen Sie die Schriftgröße auf 35 Pixel ein. In Ordnung, also lassen Sie uns über das Dollarzeichen sprechen. Das einzige, was ich in Bezug auf diesen Teil tun möchte , ist, den Umfang der Mathematik zu verringern denn wie Sie sehen können, ist er viel größer. Wie Sie sich erinnern, haben wir dieses Wort für Span umwickelt. Lassen Sie uns weitermachen und den rechten Kartenkopf auswählen , span. Und dann definiere die Schriftgröße und mache es auf 18 Pixel. Wir haben die Arbeit am Kartenkopf abgeschlossen. Beide Überschriften sind gestylt und jetzt müssen wir weitermachen und uns um den Karteninhalt kümmern Im Kartenkörper befinden sich Listen mit Funktionen mit Schrift, fantastischen Symbolen und einigen Texten. Lassen Sie uns weitermachen und den ersten Kartenkörper auswählen und am unteren Rand etwas Platz schaffen, indem wir den unteren Rand verwenden, 60 Pixel. Als Nächstes werde ich mich hier mit LI-Elementen befassen, die eigentlich Symbol und Text umschließen Also wählen wir es aus, richtig, geschnitzter Baldry. I. Lassen Sie uns zunächst die Standardaufzählungszeichen im Listenstil loswerden Standardaufzählungszeichen im Listenstil Keine. Ändern Sie dann die Schriftfamilie. In diesem Fall verwende ich eine Schrift namens Josephine Sans San-Serif und setze dann die Schriftgröße auf 16 Pixel Und die richtige Schriftstärke 300. Ordnung, die Listenelemente sehen gut aus, aber wir brauchen etwas Abstand zwischen ihnen. Und dafür verwende ich Margin. Machen wir 50 Pixel oben und unten und Null auf der linken und rechten Seite. Mit Textwerten sind wir fertig. Und jetzt möchte ich die Bilder anpassen. Das erste, was wir hier brauchen, ist, etwas Abstand zwischen Symbol und Text zu schaffen. Wählen wir dafür Elemente aus, die Körper genannt werden. Ich verwende Margin, oder? 25 Pixel. Als Nächstes möchte ich die Farbe der Symbole ändern. Im Falle eines Schecks möchte ich grüne Farbe verwenden. Was X gleich angeht, werde ich sie rot machen. Lassen Sie uns also weitermachen und den Kartenkörper auswählen. Dann F ein Häkchen setzen und die Farbe auf 06838 setzen. Lassen Sie uns diesen Code duplizieren. Wir müssen den Klassennamen mehrmals ändern, anstatt ihn zu überprüfen, und hier auch den Farbwert ändern, 911832 Ordnung, wie Sie sehen können, die Farbe der Symbole geändert und mit dem Kartenkörper sind wir fertig Als nächster Gast müssen wir uns um die Fußzeile der Karte kümmern. Wählen wir also die Entwicklung mit der Fußzeile der Klassennamenkarte aus. Und schaffen Sie unten etwas Platz, indem Sie den unteren Rand mit einem Wert von 40 Pixeln verwenden. Als Nächstes werde ich die Schaltfläche anpassen, also wählen wir sie aus. Wir benötigen den Button in der Fußzeile deiner Karte. Lassen Sie uns zunächst die Breite auf 120 Pixel festlegen. Dann schaffen Sie mit dem Padding etwas Platz innerhalb der Schaltfläche Pixel ändern die Hintergrundfarbe Ich werde deine Farbe Schokolade verwenden. Und ändere auch die Farbe des Textes. Machen Sie es heller, indem Sie die Farbe d, d, d verwenden. Okay, jetzt nehme ich hier die Texte innerhalb der Schaltfläche. Lassen Sie uns zunächst die Schriftfamilie ändern. Ich werde eine Schrift namens Montserrat verwenden, ohne Serifen. Stellen Sie dann die Schriftgröße ein und machen Sie sie auf 12 Pixel. Dafür werde ich die Schrift etwas mutiger machen , richtige Schriftstärke Und setze es auf 600. Machen Sie Texte auch in Großbuchstaben, indem Sie die Texttransformation in Großbuchstaben umwandeln. Und schließlich erstellen Sie einen gewissen Abstand zwischen den Buchstaben, indem Buchstabenabstand mit einem Wert von einem Pixel verwenden. In Ordnung, das war's mit den Texten. Wir brauchen hier noch ein paar Styles , damit der Button gut aussieht. Lassen Sie uns den Standardrahmen ändern und einen benutzerdefinierten erstellen. Genau hier, zwei Pixel, durchgehend und in der Farbe von Schokolade. Machen Sie dann den Knopf mit dem Randradius abgerundet. 50 Pixel. Löscht Standard, Gliederung, Gliederung Keine. Und schließlich den Typ des gröberen ändern, es deutlich machen. In Ordnung, wie Sie sehen können, ist der Button gestylt. Jetzt möchte ich der Karte selbst einige Styles hinzufügen. Ich werde die Ecke leicht abgerundet machen. Und ich möchte auch einen Schatteneffekt hinzufügen. Lassen Sie uns also weitermachen und der Karte einen Randradius mit dem Wert zehn Pixel zuweisen der Karte einen Randradius mit dem Wert zehn Dann verwende Box Shadow. Geben Sie hier die Werte 010 Pixel, zwei Pixel und die Farbe RGB 000 und die Opazität 0,8 Okay, jetzt sehen die Karren viel besser aus. Und als Nächstes werde ich einen kleinen Schwebeeffekt erzeugen. Beim Schweben. Ich werde den Kartenmaßstab erhöhen und außerdem möchte ich den Boxschatten leicht ändern. Wählen wir also eine Karte aus, indem wir den Mauszeiger bewegen. Dann füge hier Transformation, Skalierung ein. Und als Argument in Schweregrad 1.1. Wie Sie standardmäßig wissen, ist die Skala der Elemente tatsächlich eins. Als Nächstes benötigen wir einen Boxschatten mit den Werten 015 Pixel, 60 Pixel und der Farbe RGB 000,8 Und um den Effekt glatter zu machen, verwenden wir Transition mit den Werten all und 0,4 s. Wenn ich also den Mauszeiger über die Karte bewege, wird ihre Größe gleichmäßig vergrößert Außerdem wird der Schatten verändert und insgesamt werden wir einen schönen Effekt erzielen, oder? Eigentlich ist es das. Wir sind fast fertig mit diesem Projekt. Das einzige, was ich tun möchte, ist, das Projekt auf verschiedenen Bildschirmgrößen responsiv zu gestalten. Schauen wir uns dazu die Seite an und wechseln dann in den Responsive-Modus. Der Breakpoint, an dem wir einige Änderungen vornehmen müssen, liegt meiner Meinung nach bei etwa 1.200 Pixeln Denn wie Sie an der Bildschirmgröße sehen können, unterbricht das Projekt. Lassen Sie uns also weitermachen und eine CSS-Medienabfrage erstellen. Dafür müssen wir bei sign media schreiben. Dann müssen wir in Klammern die maximale Breite angeben. Wie gesagt, wir müssen hier 1.200 Pixel schreiben. Und jetzt müssen wir in einer Medienabfrage einige CSS-Stile erstellen, auf die wir dann an diesem Breakpoint anwenden Wählen wir den Container aus und legen seine Höhe auf hundert Prozent fest. Als Nächstes möchte ich Karten verpacken. Dafür. Wählen wir den Kartenwickel aus und weisen ihm Flex Wrap mit dem Wert rab zu Und schließlich brauchen wir Platz um die Karten herum. Um sie schön zu verpacken. Ich werde diesen Raum mit Margin erstellen. Wählen Sie also eine Karte aus und weisen Sie ihr einen Rand von 50 Pixeln zu. Ordnung, also wenn wir die Seite kleiner machen , werden die Karten verpackt Und irgendwann wird das Projekt auch auf kleineren Bildschirmgrößen reagieren 32. Projekt 29 - CSS-Umschalt-Button: Hallo und willkommen zu unserem nächsten Tutorial. In diesem Video erstellen wir ein animiertes CSS-Kontrollkästchen, dem Sie einen Umschalteffekt erzielen können Wie Sie sehen können, haben wir hier standardmäßig unsere Checkbox, wir haben hier eine kreisförmige Stelle auf der linken Seite mit rotem Hintergrund Wenn wir darauf klicken, bewegt sich der Kreis sanft nach rechts. Und auch die Hintergrundfarbe wird geändert, anstatt rot zu integrieren. Außerdem kannst du hier einen kleinen Punkt in der Mitte des Kreises erkennen . Wenn wir das Kontrollkästchen aktiviert haben, ändert auch dieser kleine Punkt seine Farbe Okay, das werden wir also tun. Tatsächlich haben wir dieses Kontrollkästchen mit großer Größe erstellt , nur um die Sichtbarkeit zu verbessern Im Allgemeinen werden Sie auf modernen Websites auf ein kleineres Kontrollkästchen stoßen. Okay, lass uns weitermachen und mit dem Bau dieses Projekts beginnen . Im VS-Code. Ich habe zwei verschiedene Dateien, eine für HTML und die zweite für CSS. In der Datei index.html. Ich habe die Grundstruktur des HTML-Dokuments vorbereitet. In den Kopfelementen habe ich den Link für die Datei style.css übergeben. Okay, lassen Sie uns zuerst ein HTML-Markup für die offene Entwicklung erstellen, das den gesamten Inhalt umschließt Klassencontainer zugewiesen ist Dann müssen wir im Container zwei Elemente erstellen. erste wird ein Eingabeelement mit dem Typ Checkbox sein ein Eingabeelement mit dem Typ Checkbox Als Nächstes müssen wir ein Label für das Attribut erstellen , oder? Prüfen. Und auch dem Klassenschalter zugewiesen. Und schließlich müssen wir die Entwicklung in das Etikett einfügen. Es wird ein Kreis sein. Ordnen wir ihm also einen Klassenkreis zu . Das Letzte, was wir im HTML-Dokument tun müssen , ist Eingaben und Beschriftungen zu verknüpfen. Dazu müssen wir zwei Eingabe-ID-Attribute zuweisen . Und es sollte genau den gleichen Wert haben , den wir als Attribut übergeben haben. Ich meine überprüfen. klar zu sehen, wovon ich spreche. Lassen Sie uns in die Entwicklung einige Texte einfügen. Sagen wir Clique. Wenn wir also auf diesen Text klicken, wird das Chat-Feld automatisch überprüft. Gehen wir zur Datei style.css und fangen an, etwas CSS zu schreiben. Zuerst werde ich einige Reset-Stile erstellen. Lassen Sie uns den Standardrand und den Abstand von jedem Element entfernen und den Abstand von jedem Element Um jedes Element auszuwählen, müssen wir ein Sternchen verwenden Und dann geben Sie Ihre Margin Null und Padding Null weiter. Ordnung, als Nächstes platziere ich den Inhalt dafür perfekt in der Mitte. Wählen wir den Behälter aus Und bei der ersten Definition von Breite und Höhe lege ich Breite auf 100 Prozent fest. Was die Höhe angeht, werde ich sie auf 100 Prozent des Viewports festlegen 100 Prozent des Viewports Dann ändere die Hintergrundfarbe. Sie sehen Ihre Farbe E. Und jetzt verwende ich Flexbox, um den Inhalt zu zentrieren Wir brauchen hier Display-Flex. Um das Element dann horizontal zu zentrieren, benötigen wir das Justify-Content-Center Richten Sie dann die Elemente in der Mitte aus, um bestimmte Elemente zu zentrieren. Ordnung, wie Sie sehen können, ist das Kontrollkästchen perfekt in der Mitte platziert Jetzt wähle ich das Label aus. Aber vorher wollen wir dieses Textform hier loswerden. Gehen Sie dann zurück zur CSS-Datei und wählen Sie das Label mit dem ClassName-Schalter Definieren wir die Breite als hundert50 Pixel, als wir die Höhe benötigen. Stellen wir es auf 50 Pixel ein. Ändern Sie die Hintergrundfarbe. Ich werde deine Farbe e24 848 verwenden und auch Elemente mit einem Randradius von 50 Pixeln abgerundet machen mit einem Randradius Okay, das Letzte, was ich mit dem Etikett machen möchte , ist, einen Schatteneffekt zu erzeugen Aber in diesem Fall werde ich einen Schatten innerhalb der Elemente erzeugen. Dafür brauchen wir Box Shadow. Dann benötigen wir als ersten Wert hier im Satz 0,2 Pixel, zehn Pixel und die Farbe 555. In Ordnung, jetzt stimmen Sie zu , dass es viel besser aussieht. Jetzt ist es an der Zeit, den Kreis zu erstellen. Wählen Sie also das Div-Element mit dem Klassennamen Circle aus. Lassen Sie uns zunächst die Breite und Höhe definieren und beide als fünf Pixel festlegen. Eigentlich haben wir diese Start to Circle aufgetragen , weil wir mit ihnen ein bisschen... in der Mitte des Kreises S4 erzeugen werden, den weißen Teil des Es sollte an der Grenze entstehen. Also brauchen wir hier einen Rand mit den Werten 27 Pixel, durchgehende und weiße Spalte. Um entlang der gerundeten Linie zu gelangen, verwenden wir den Randradius mit einem Wert von 50 Prozent Okay, wir haben hier den Kreis, aber im Moment ist er nicht richtig platziert Wir müssen uns um seine Position kümmern. Dafür verwende ich Position Absolute. Um dann die Position des Kreises anhand seines übergeordneten Elements, bei dem es sich um ein Label handelt, zu verwalten Kreises anhand seines übergeordneten Elements, bei dem es sich um ein Label handelt, , müssen wir der Beschriftung eine relative Position zuweisen. Okay, bewegen wir diesen Kreis ein wenig oben und auch nach links. Wir müssen also die obere und linke Position als obere Position minus vier Pixel und links minus fünf Wochen definieren . Und zum Schluss werde ich einen kleinen Schatteneffekt erzeugen , oder? Boxschatten mit den Werten 005 Pixeln. Die Farbe AAA. In Ordnung, lass uns sehen. Wir haben unser Kontrollkästchen angepasst und jetzt ist es an der Zeit, dass es funktioniert Dafür müssen wir das Klick-Event erstellen. Sie denken vielleicht, dass wir dafür JavaScript verwenden sollten. Aber in diesem Fall werde ich einige CSS-Tricks verwenden , mit denen wir das Klick-Event erstellen können. Wie Sie sich erinnern, haben wir Eingaben und Labels mithilfe von id und vier Attributen verknüpft . diese Weise werden wir das Klick-Event erstellen. Wir müssen einige CSS-Stile definieren und sie auf Elemente anwenden , wenn das Kontrollkästchen aktiviert ist Zunächst müssen wir das Eingabeelement auswählen. Es hat einen Ausweisscheck. Dann haben wir in CSS eine Pseudoklasse namens checked, wir das Kontrollkästchen im aktivierten Modus auswählen können Jetzt müssen wir Zugriff auf die Elemente erhalten , die wir anpassen müssen. In diesem Fall müssen wir den Kreis auswählen, aber wir können hier nicht einfach Kreis schreiben. Zuerst müssen wir Zugriff auf das Etikett erhalten, das ein Schwestersymbol von Input ist Um das Geschwistersymbol von Eingabeelementen auszuwählen, müssen wir einen dieser CSS-Kombinatoren verwenden, den sogenannten allgemeinen Geschwisterselektor , der dieser CSS-Kombinatoren verwenden, den sogenannten allgemeinen Geschwisterselektor , durch ein Tilda-Zeichen ausgedrückt wird Jetzt brauchen wir ein Label, es hat ClassName Toggle Und schließlich brauchen wir hier einen Kreis. Okay, jetzt haben wir Zugriff auf den Kreis und alle Stile, die wir an Sie weitergeben werden, falls wir sie auf den ersten Kreis anwenden , werden aktiviert. Im Falle eines Kreises müssen wir ihn von seiner aktuellen Position auf die rechte Seite bewegen . Verwenden wir dafür die linke Position. Und lassen Sie uns zunächst 100 Prozent darauf verteilen. Außerdem benötigen wir einen Übergang für einen glatten Effekt, dem die Werte links und 0,5 s zugewiesen werden. Schauen wir uns an, was passiert, wenn ich hier klicke, dann bewegt sich der Kreis auf die rechte Seite. Aber es wird zu weit gehen. Um die erforderlichen Ergebnisse zu erzielen, müssen wir also 200 Prozent der Größe des Kreises abziehen Lassen Sie uns die Größe des Kreises berechnen. Eigentlich meine ich mit der Größe des Kreises den Durchmesser des Kreises. Es hat eine Breite von fünf Pixeln und einen Rand von 27 Pixeln. Wir müssen jedoch bedenken, dass 27 Pixel verdoppelt werden sollten, da wir eine linke und eine rechte Seite haben. Insgesamt sollte der Wert also die Summe von 27 Pixeln plus 27 Pixeln und plus fünf Pixeln sein. Es sind 59 Pixel. Also müssen wir 200 Prozent abziehen, 59 Spitzenwerte. Wie Sie sehen, haben wir hier verschiedene Maßeinheiten, Prozentsätze und Pixel. Eigentlich ist diese Operation in CSS nicht gültig. Und um es gültig zu machen, müssen wir eine Funktion namens calc verwenden, was für Calculate steht Jetzt ist diese Operation gültig. Wenn wir also erneut klicken, bewegt sich der Kreis und wir erzielen viel bessere Ergebnisse. Auf einen Blick. Das ist das Ergebnis , das wir erzielen mussten. Aber eigentlich müssen wir den Kreis etwas weiter nach rechts bewegen . Genauer gesagt müssen wir es um fünf Pixel verschieben. Denn als Standardposition haben wir links minus fünf Pixel definiert. Also statt 59 Pixeln benötigen wir 54 Pixel. Und ich hoffe, dass es für dich Sinn macht. Wenn wir also klicken, funktioniert alles. Perfekt. Jetzt müssen wir die Farbe des Etiketts ändern. Wir müssen es grün machen. Eigentlich müssen Sie dieselbe Technik anwenden. Also lass uns diesen Code duplizieren. Wir müssen die Hintergrundfarbe des Labelelements ändern. Also lasst uns den Kreis von hier aus loswerden. Löschen Sie dann auch diese Codezeile , und zwar in strenger Hintergrundfarbe mit dem Wert 3963 Schließlich brauchen wir auch einen Übergang für das Label. Also genau hier Übergang mit den Werten Hintergrund, Farbe und 0,5 s. Also wie ihr jetzt sehen könnt, funktioniert alles prima und eigentlich sind wir fast fertig. Das einzige, was wir tun müssen, ist dieses kleine Kontrollkästchen auszublenden Dazu gehe ich zur Datei index.html und weise dem Eingabeelementattribut Hidden zu. In Ordnung, das war's also. Unser Projekt ist abgeschlossen. Wir haben eine schöne animierte Checkbox mit Umschalteffekt erstellt mit Umschalteffekt 33. Projekt 30 - CSS-Rastergalerie: In diesem Video werden wir mithilfe des CSS-Grid eine responsive Galerie erstellen. Heutzutage ist es sehr beliebt und ich bin mir sicher, dass Sie auf modernen Websites bereits auf solchen Kalorien gestoßen sind. Wie Sie sehen können, haben wir hier 12 Bilder mit kleinen Lücken. Und diese Bilder sind im zweidimensionalen Raum angeordnet. Das ist alles. Was Sie mit dem CSS-Grid erreichen können. Es ist ein zweidimensionales CSS-Layoutmodul. Wie gesagt, die Galerie ist responsiv. Wenn wir Browser kleiner als Bilder machen, schrumpfen sie schön und die Galerie selbst wird nicht kaputt gehen Ordnung, lassen Sie uns anfangen, dieses Projekt zu erstellen , das ich hier in VS Code habe, ein paar Dateien, index.html und style.css Außerdem habe ich einen Ordner namens Images , der alle Bilder enthält, die wir in diesem Projekt verwenden werden. Als kurze Anmerkung möchte ich sagen, dass wir dieses Projekt in Mozilla Firefox erstellen werden , da dieser Browser eine etwas bessere Arbeitsumgebung für CSS-Grid hat eine etwas bessere Arbeitsumgebung für CSS-Grid Deshalb habe ich das Projekt in diesem Browser ausgeführt. Ordnung, in der Datei index.html habe ich eine grundlegende HTML-Struktur vorbereitet Wie Sie im Hauptelement sehen, haben wir einen Link für unsere CSS-Datei. Lass uns weitermachen und mit dem Aufbau unserer Galerie beginnen. Zuallererst werde ich HTML-Markup erstellen. Lassen Sie uns also die Entwicklung eröffnen. Es sollte ein Wrapper für die gesamte Galerie sein. Also lassen Sie uns ihm den Klassencontainer zuweisen. Dann werde ich eine weitere Entwicklung öffnen , die alle Bilder umschließt. Ordnen wir ihm eine Klassengalerie zu. Jetzt ist es an der Zeit, Ihre Bilder einzufügen. Lassen Sie uns die IMG-Elemente öffnen und den Pfad des Bildes angeben. Wir haben Ordnerbilder und dann müssen wir IMG auswählen, One Dot JPG. Außerdem müssen wir dem Bildelement einige Klassen zuweisen . Das erste wird vier gängige Stylings sein, schreibe auch IMG. Die zweite sollte es für individuelle Stile sein. Schreiben Sie also IMG Dash One. In Ordnung, also wie gesagt, insgesamt werden wir 12 Bilder haben Also werde ich diese Codezeile 11 Mal duplizieren. Und dann schnell die Namen der Bilder und auch die Klassennamen ändern . In Ordnung? Wie Sie sehen können, haben wir hier alle Bilder, aber im Moment sind sie ziemlich groß. Und sie sehen auch hässlich , weil wir hier nur reines HTML haben. Es ist also an der Zeit, mit dem Styling dafür zu beginnen. Gehen wir zur Datei style.css. Zuallererst werde ich einige Reset-Stile erstellen. Lassen Sie uns den Rand und den Abstand für alle Elemente auf Null setzen für alle Elemente auf Null setzen Und außerdem werde ich Box-Größe Border-Box setzen. Danach kümmere ich mich um den Container. Also lass uns weitermachen und es auswählen. Definieren Sie dann Breite und Höhe. Stellen wir es auf 100% ein. Was die Höhe angeht. Ich werde es auf 100 Prozent Sichtweite einstellen. In Ordnung, das war's vorerst. Was den Container angeht, werde ich eine Galerie auswählen , die alle Bilder umschließt Die Galerie wird ein Rastercontainer sein. Was Bilder angeht, werden wir sie als Rasterelemente erstellen. Um das Element also zu einem Rastercontainer zu machen, müssen wir ihm ein Anzeigeraster zuweisen. Jetzt müssen wir Rasterspalten und Rasterzeilen definieren. Dazu müssen wir Eigenschaften verwenden, die als Rastervorlagenspalten und Rastervorlagenzeilen bezeichnet werden. Fangen wir mit den Spalten an. Verwenden Sie hier die Spalten der Eigenschaftsraster-Vorlage. Als kurze Anmerkung möchte ich hier sagen, dass ich, wenn Sie mit dem CSS-Grid nicht ganz vertraut sind , empfehlen wir, unser CSS-Bootcamp zu besuchen , in dem wir dieses Modul ausführlich erklärt haben. Außerdem erstellen wir das gesamte Projekt auf der Grundlage von CSS-Grid. Wenn du also Interesse hast, dann findest du den Link zu diesem Kurs in der Beschreibung. In Ordnung? Wir werden also acht ähnliche Spalten haben, die dieselbe Größe haben werden. Und dafür möchte ich eine Funktion namens Repeat verwenden. Die Wiederholungsfunktion benötigt zwei Argumente. Als erstes müssen wir die Anzahl der Spalten angeben , acht. Was die zweite betrifft, müssen wir Größe für jede Spalte angeben. In diesem Fall verwende ich eine Funktion namens min-max. Es ermöglicht uns, die Minimal- und Maximalwerte jeder Spalte zu definieren . also als Mindestwert Lassen Sie uns hier also als Mindestwert zehn Pixel übergeben. Was den Maximalwert angeht, werde ich eine spezielle Einheit namens Brucheinheit verwenden , oder? Eins. Das bedeutet, dass verfügbare Raum in acht Veranstaltungsteile aufgeteilt wird. Und jede Spalte nimmt einen Teil des verfügbaren Platzes ein. Wie Sie sehen können, haben Bilder das Layout geändert. Wir haben hier eine ziemlich chaotische Situation. Schauen wir uns die Seite an und öffnen wir die Entwicklertools . Ich habe zu Beginn dieses Tutorials gesagt, dass Firefox eine wirklich gute Arbeitsumgebung für CSS-Grid hat. Auf der rechten Seite haben wir hier den Layout-Tab, in dem Sie einen Abschnitt für das Raster finden , in dem wir unsere Div-Elemente haben, nämlich Galerie Wenn wir dieses Kästchen ankreuzen, wird GridLayout angezeigt. Ich meine, du kannst deine acht Spalten, die wir gerade erstellt haben, und die richtigen Rasterliniennummern finden acht Spalten, die wir gerade erstellt haben . Okay? Als Nächstes kümmere ich mich um die Rasterzeilen. Dafür verwende ich eine Eigenschaft namens Grid Template Rows. Wir werden also vier Reihen haben. Jeder von ihnen wird die gleiche Größe haben. Deshalb werde ich die Funktion erneut verwenden. Lassen Sie uns hier eine Reihe von Rollen angeben, um genau zu sein, ich werde hier eine kleine Änderung vornehmen, die uns helfen wird, die Antwort auf die Galerie zu Also mache ich die Größe jeder Zeile auf 10% der Breite des Viewports Das bedeutet, dass, sobald die Breite der Seite verringert wird, die Größe der Rollen entsprechend verringert wird. Und irgendwann werden wir ein responsives Layout bekommen. Um besser zu sehen, gehen wir zum Browser. Wenn ich den Browser also kleiner mache , wird die Größe der Rose verringert. In Ordnung, also im Moment sind die Bilder ziemlich groß Und um das zu beheben, wählen wir Bilder mit dem allgemeinen Klassennamen IMG und legen dann Breite und Höhe auf 100 Prozent fest. Jetzt werden Bilder in Rasterzellen platziert. Sie sind auch kleiner. Aber wir haben hier ein kleines Problem. Wenn du sie dir genauer ansiehst, wirst du feststellen, dass die Bilder etwas gestreckt sind und nicht ganz schön aussehen. Um das zu beheben, verwenden wir eine Eigenschaft namens Objektfuß , die jedem Value Cover zugewiesen wird. Jetzt sehen sie besser aus. Als Nächstes möchte ich etwas Abstand zwischen den Rasterzellen schaffen. Dafür müssen wir der Galerie eine Rasterlücke zuweisen. Stellen wir es auf 16 Pixel ein. Und lassen Sie uns auch die Hintergrundfarbe ändern. Ich nehme deinen Anruf oder Null, D vier vor Null. Wie Sie sehen können, haben wir etwas Abstand zwischen den Rasterzellen und auch der Hintergrund wurde geändert. In Ordnung? Jetzt müssen wir jedes Bild einzeln ausrichten und irgendwann nehmen sie die gesamte Galerie ein. Fangen wir also mit dem ersten Bild an. Ich möchte, dass du die ersten beiden Spalten und die erste Reihe einnimmst . Wählen wir es also mit dem individuellen Klassennamen IMG aus. Definieren Sie dann eine Eigenschaft namens Rasterspalte. Diese Eigenschaft ermöglicht es uns, die Zeilennummer der ersten Spalte und auch die Nummer der letzten Spalte zu definieren . Wie gesagt, das erste Bild nimmt ersten beiden Spalten und die erste Zeile ein. Deshalb brauchen wir hier als Startlinie Nummer eins, dann Schrägstrich und drei Und lassen Sie uns außerdem eine Rasterzeile mit den Zeilennummern 1.2 schreiben. Wie Sie sehen können, hat das erste Bild die ersten beiden Spalten eingenommen und ist in der ersten Reihe platziert. Das zweite Bild nimmt die nächsten drei Spalten und die ersten beiden Zeilen ein. Also lasst uns weitermachen und den Code für das erste Bild kopieren. Dann ändere den Klassennamen. Und auch Werte für Rasterspalte und Rasterzeile. Wir brauchen 3,6 S vier Rasterreihen, oder? 1.3. In Ordnung, als nächstes haben wir das dritte Bild Ich möchte es lassen, wo es ist. Ich meine, es wird alle Schulden in einer Zelle aufnehmen. Für das dritte Bild benötigen wir also die Rasterspalte 6,7 und die Mutrolle 1,2. Als Nächstes nehmen wir zwei Spalten und zwei Zeilen auf. also für das vierte Bild Schreiben wir also für das vierte Bild Rasterlinien. Für die Rasterspalte benötigen wir 7.9. Füge Zeile 1.3 für die Rasterzeile hinzu. In Ordnung, als Nächstes haben wir Bild Nummer fünf. Ich möchte, dass du auch zwei Spalten und zwei Zeilen einnimmst. Ich meine zweite und dritte Reihe. also für das fünfte Bild Lassen Sie uns also für das fünfte Bild die Rasterlinien wie folgt ändern. Wir brauchen hier 1.3 als vierstellige Rasterreihe, oder? 2.4. Okay? Eigentlich habe ich beschlossen, Bilder auf diese Weise auszurichten. Aber natürlich kannst du es alleine machen. Sie können mehr oder weniger Bilder verwenden und das Layout nach Ihren Wünschen erstellen. Ich weiß, dass sich das Schreiben von Code für die Galerie irgendwie wiederholt und vielleicht ein bisschen besorgniserregend ist wiederholt und vielleicht ein bisschen Aber so funktioniert es. Irgendwann werden wir ein gutes Ergebnis erzielen. In Ordnung, als Nächstes haben wir Bild Nummer sechs. Ich möchte, dass es in der dritten und vierten Spalte platziert wird. Was die Reihe angeht, so wird sie die dritte einnehmen. also für die sechs MHz Schreiben wir also für die sechs MHz Zeilennummern für die Rasterspalte 3,5, S4-Rasterzeile, wir benötigen 3,4 In Ordnung, wir haben also sechs Bilder angeordnet. Es sind noch sechs weitere Bilder übrig. Wie gesagt, das Schreiben des Codes für solches Layout ist eine Art Routine Also ich gebe hier den Code für die restlichen Bilder weiter und dann kannst du ihn einfach überschreiben Okay, ich hoffe, du hast den Code für die anderen sechs Bilder geschrieben. Gehen wir zum Browser und sehen, wie unsere Galerie aussieht. Die Bilder sind also gut angeordnet und unsere Galerie sieht schon gut aus, oder? Eigentlich möchte ich hier einige Änderungen vornehmen. Wie Sie sehen, haben wir eine Lücke zwischen den Bildern und ich möchte diesen Raum auch an den Rändern der Galerie schaffen . Ich meine, auf allen vier Seiten, oben, unten, links und rechts. Dafür verwende ich Polsterung. Schreiben wir hier 16 Pixel. Als Nächstes möchte ich die gesamte Galerie vertikal in der Mitte platzieren . Dafür werde ich Flexbox verwenden. Weisen wir dem Container Display-Flex zu. Und um flexible Elemente vertikal zu zentrieren, müssen wir die Artikel mittig ausrichten. Die Galerie ist also zentriert. Und das Letzte , was ich tun möchte, ist einen Hover-Effekt zu erzeugen Standardmäßig möchte ich die Opazität von Bildern verringern. Dann erhöhen wir es beim Schweben. Weisen wir dem Bild also die Opazität 0,7 zu. Wählen Sie dann das Bild mit dem Mauszeiger aus und erhöhen Sie die Opazität genau hier, eins. Lassen Sie uns abschließend Transition mit den Werten Opazität und 0,5 s verwenden . In Ordnung ? Wie Sie sehen können, haben wir hier einen schönen Schwebeeffekt Und eigentlich ist unser Projekt abgeschlossen 34. Projekt 31 - Landingpage mit modalen Formularen: In diesem Video erstellen wir eine schöne Ausleihseite mit HTML, CSS und ein bisschen JavaScript. Bevor wir anfingen, an diesem Projekt zu arbeiten. Wie immer werde ich es durchgehen und es kurz beschreiben. Wie Sie sehen können, haben wir hier einen Vollbild-Hintergrund. In der Mitte der Seite hatten wir ein Banner, das aus Überschriften und Absätzen besteht Und auch in der oberen rechten Ecke befinden sich zwei verschiedene Schaltflächen. Wenn wir sie anklicken, werden schöne Formen als Modellfelder angezeigt. Eigentlich sind diese Formen ähnlich. Es gibt nur einen Unterschied. Ein Formular dient zur Anmeldung und das zweite zur Anmeldung. In Ordnung, das ist es. Was wir tun werden. Ich hoffe, es wird interessant sein und Ihnen wird dieses Projekt gefallen. Also lass uns anfangen. Auf dem Desktop. Ich habe einen Ordner namens Model Forms erstellt, in dem ich drei verschiedene Dateien für HTML, CSS und JavaScript erstellt habe. Hier ist auch ein Ordner, der das Bild für die Landingpage enthält. Okay, lassen Sie uns weitermachen und diesen Ordner mit dem VS-Code öffnen . Dann werde ich die Datei index.html überprüfen. Wie Sie sehen, haben wir hier die Grundstruktur des HTML-Dokuments. Innerhalb des Hauptelements haben wir ein paar Linkelemente. Ich meine, Links für Font Awesome-Icons, auch ein Link für Google-Schriftarten. Während dieses Projekts werde ich Schriften namens Josephine Sans und Montserrat verwenden namens Josephine Sans und Und schließlich haben wir hier einen Link für unsere benutzerdefinierten CSS-Stile. Tatsächlich können Sie Starterdateien über den Link in der Beschreibung herunterladen . Okay, lassen Sie uns weitermachen und diese Datei im Browser ausführen. Ich werde das mit einem Live-Server machen. Es ist eine großartige Erweiterung des VS-Codes, sodass Sie im Extension Manager danach suchen und dieses Paket installieren können. Okay, lassen Sie uns weitermachen und Editor und Browser nebeneinander platzieren und mit der Erstellung des ersten HTML-Markups für unser Projekt beginnen ersten HTML-Markups Der gesamte Inhalt wird von der Entwicklung übernommen. Also lass es uns öffnen. Und dem Clusternamen-Container zugewiesen. Der Behälter wird aus drei verschiedenen Teilen bestehen. Als ersten Teil werden wir hier ein Banner haben, das eine Überschrift und einen Absatz enthält. Dann haben wir in der oberen rechten Ecke Schaltflächen zum Anmelden und zur Registrierung. Was den dritten Teil betrifft, wird es ein voller Container sein und wir werden unsere Formulare beifügen. Lassen Sie uns also weitermachen und die Entwicklung eröffnen. Und seinem Klassennamen zugewiesen, dem Bannertext. Und fügen Sie H1-Überschriftenelemente mit Textcode ein und erstellen Sie Öffnen Sie dann p-Elemente und fügen Sie einige Texte ein. Sagen wir, lernen Sie, damit umzugehen. In Ordnung, als Nächstes sollten wir hier die Knöpfe haben. Lassen Sie uns also die Entwicklung eröffnen, die den Klassennamen btn haben wird Und fügen Sie es dann in Teile und Elemente ein. Ich werde jedem Cluster Namen für gängige Stile zuweisen , übrigens. Und auch hier brauchen wir eine weitere Klasse für individuelles Styling. Nennen wir es Login, übrigens als Text, ich füge deinen Benutzernamen Eigentlich haben wir auch den ähnlichen Button für die Anmeldung verwendet. Also lass uns diese Codezeile duplizieren und den Klassennamen ändern, den wir hier benötigen, melde dich an. Und ich werde auch den Text ändern. Schreiben wir dir, melde dich an. In Ordnung, das war's mit den Knöpfen. Als Nächstes müssen wir anfangen, an Formularen zu arbeiten. Dafür werde ich eine weitere Entwicklung entwickeln. Es sollte ein Formularcontainer sein. Lassen Sie uns also jeder Klasse einen Namen für den Container zuweisen. Wir werden hier also zwei verschiedene Teile haben. Die erste wird eine Anmeldung sein. Öffnen wir also die Entwicklung und die Registrierung für den Klassennamen. Für die Verpackung. Dieser Kurs richtet sich an individuelle Stile. Wir brauchen hier noch einen für das gemeinsame Styling. Nennen wir es also Modell. Das Modell wird aus einigen Elementen bestehen. Wir werden die X-Taste zum Schließen haben. Ebenfalls. Ich werde ein paar Überschriften erstellen Dann werden wir mehrere Eingaben mit Font- und Awesome-Symbolen haben . Und zum Schluss werden wir einen Button haben. Okay, lassen Sie uns weitermachen und diese Elemente erstellen, Entwicklung öffnen und mehrere Klassennamen zuweisen Zuerst wird x btn sein, und dann brauchen wir sign-up x. In diesen Div-Elementen. In diesen Div-Elementen Ich füge eine der HTML-Entitäten ein, richtig, bei Vorzeichen und Uhrzeit mit einem Semikolon Wie Sie sehen können, haben wir hier x. Als Nächstes werden wir ein paar Überschriften haben Öffnen wir also eine andere Entwicklung und weisen ihr den Klassennamen, den Formularheader, zu. Und dann fügen Sie H1-Überschriftenelemente mit Textcode ein und erstellen Als Nächstes benötigen wir hier eine weitere Überschrift H3-Überschriftenelementen besteht Lassen Sie uns Ihren Text einfügen. Schließ dich uns an. Okay, jetzt ist es an der Zeit, selbst ein Formularelement zu erstellen, das ein paar Eingaben enthält Öffnen wir also die Formularelemente und weisen dem Objekt das ClassName-Formular zu Das Formularelement wird also aus drei verschiedenen Gruppen bestehen. Jeder von ihnen wird Font, Awesome, Icon und das Eingabeelement enthalten . Erstellen wir also ein div-Element und weisen ihm die Klasse input, group zu. Dann füge darin I-Elemente ein. Das erste Symbol wird also für den Benutzernamen stehen. Lassen Sie uns jeder Klasse den Namen FAS, einen Benutzer zuweisen. Dann benötigen wir ein Eingabeelement. Ihr Typ wird Texte sein. Außerdem benötigen wir hier ein weiteres Attribut namens Platzhalter mit einem Wert namens username Also, wie gesagt, wir brauchen drei Eingangsgruppen. Lassen Sie uns es zweimal duplizieren und dann einige Änderungen vornehmen. Die zweite Eingabe wird für E-Mail sein. Lassen Sie uns also den Klassennamen von KI-Elementen ändern. Wir brauchen hier, F, a, F, einen Umschlag. Ändern Sie dann die Art der Eingaben und machen Sie sie per E-Mail. Und als Wert des Platzhalters müssen wir die E-Mail einfügen Okay, die dritte Eingabe wird für ein Passwort sein. Lassen Sie uns den Klassennamen von KI-Elementen ändern. Wir benötigen Ihren FASFA-Schlüssel. Ändern Sie dann die Art der Eingabeelemente. Wir benötigen das Passwort und geben auch das Passwort für den Platzhalter ein. In Ordnung, schauen wir uns die Eingaben an. Das letzte Element, das wir erstellen müssen, ist ein Button. Also lass es uns öffnen. Dann. Ich definiere das Typattribut als Unterseite und füge dann deine Texte ein, melde dich an. In Ordnung, also haben wir die ersten vier Anmeldungen erstellt. Ähnliches benötigen wir auch für die Anmeldung. Lassen Sie uns also den Wrapper für das Anmeldeformular duplizieren und dann einige Änderungen vornehmen Ich werde den Klassennamen ändern, den wir hier benötigen, um sich anzumelden. Dann müssen wir den Klassennamen von x bottom ändern. Wir müssen uns erneut anmelden. Dann müssen wir uns auch anmelden, anstatt uns beizutreten . Im Falle eines Anmeldeformulars benötigen wir überhaupt keine E-Mail. Lassen Sie uns also die zweite Eingabegruppe loswerden. Und schließlich wurde der Wert des unteren Bereichs geändert. Wir brauchen hier einen Login. In Ordnung, das war's mit HTML-Markup. Jetzt ist es an der Zeit, mit dem Schreiben von CSS zu beginnen. Gehen wir zur Datei style.css. Zuallererst werde ich einige Reset-Stile erstellen. Lassen Sie uns die Ränder und den Abstand von jedem Element entfernen. Wir müssen ein Sternchen verwenden, um jedes Element auszuwählen. Dann lassen Sie uns auch Ihre Margen und Padding Zero weitergeben. Dann wähle ich den Container aus. Definieren wir seine Breite und Höhe als Breite. Ich werde Hazard Present verwenden. Höhe S4 Ich möchte die Höhe auf 100% des Viewports festlegen. Und dafür müssen wir eine relative Maßeinheit namens VH verwenden relative Maßeinheit namens VH Also brauchen wir 100 Vh. Als Nächstes legen wir das Bild als Vollbild-Hintergrund fest. Ich werde deinen linearen Gradienten verwenden. Übergeben Sie dann einige RGBA-Werte. Der erste wird schwarz sein, oder? 000 mit Opazität 0,6. Als zweite benötigen wir wieder schwarze RGBA-Farbe, jedoch mit einer Opazität von 0,8 jedoch mit einer Opazität Als Nächstes geben wir die URL an. Ich meine Teil des Bildes. Wir haben Ordnerbilder und dann ein Bild namens PG Dot JPG, für das wir die Position des Hintergrunds als Mittelpunkt benötigen. Und auch keine Wiederholung. Lassen Sie uns abschließend die Eigenschaft Background Size zusammen mit dem Value Cover verwenden . In Ordnung, wie Sie sehen können, haben wir hier ein Vollbild-Hintergrundbild Jetzt werde ich Banner und Buttons gestalten. Danach kümmern wir uns um das Styling der Formulare und sorgen dafür, dass sie vorerst funktionieren. Um den Arbeitsprozess komfortabler zu gestalten, werde ich den gesamten Formularcontainer für eine Weile ausblenden Sie können das tun, indem Sie entweder display none verwenden oder wir können einfach eines der HTML-Attribute namens hidden verwenden. Verwenden wir also das Attribut Keaton und weisen es dem Formularcontainer zu . Wie Sie sehen können, beide Formen versteckt und wir haben hier nur Bannertext und Schaltflächen. Lassen Sie uns anfangen, den Bannertext zu gestalten. Wählen wir also Entwicklungen aus, die Bannertexte mit Klassennamen haben. Ich kümmere mich um die Position des Banners. Ich möchte, dass es in der Mitte platziert wird. Dazu werde ich einige Techniken anwenden, die Positionen und Transformationseigenschaften verwenden . Wenn Sie sich unsere letzten Videos angesehen haben, sollten Sie bereits über diese Technik Bescheid wissen. Aber wenn nicht, werde ich es dir in einer Sekunde zeigen. Zuallererst müssen wir die Position als absolut festlegen. Dann müssen wir die Spitzenposition einnehmen, 40 Prozent festlegen und Position mit einem Wert von 50 Prozent verlassen. Jetzt sagen wir also, dass sich die Grenzkontrollen um 40% von oben nach unten und um 50% von links nach rechts verschoben haben. Das wollen wir nicht. Um Elemente in den Mittelpunkt zu rücken, müssen wir es von seiner aktuellen Position um 50 Prozent nach links und um 50 Prozent nach oben verschieben. Dafür müssen wir Transform verwenden. Dann übersetze. Wir müssen die folgenden Werte übergeben. Wir brauchen -50 Prozent und dann wieder -50 Prozent. Okay, mit der Position des Bannertextes sind wir fertig. Und jetzt haben wir zwei Stilüberschriften und einen Absatz. Fangen wir mit der Überschrift an. Wählen Sie es rechts aus, Bannertexte, H1. Lassen Sie uns zunächst die Farbe ändern. Ich mache es weiß. Dann ändere die Schriftfamilie. Lassen Sie uns Ihre Schrift namens Montserrat San-Serif verwenden. Das erhöhte die Schriftgröße. Ich werde es auf 80 Pixel einstellen. Außerdem werde ich die Schrift mithilfe der Schriftstärke leichter machen. Setzen wir es auf 300. Dann schaffe etwas Abstand zwischen den Buchstaben. Verwenden Sie einen Buchstabenabstand mit dem Wert zwei Pixel. Und zum Schluss werde ich unten etwas Platz schaffen, indem ich Margin Bottom, zwei Spitzen, verwende. In Ordnung, das war's mit der Überschrift. Jetzt wähle ich den Absatz aus. Also richtiger Bannertext p. Eigentlich benötigen wir hier fast ähnliche Eigenschaften , die wir für die Überschrift verwenden. Also werde ich sie kopieren. Lassen Sie uns hier einfügen und einige Änderungen als Farbe vornehmen. Dann benutzen wir mich. Ich werde hier die Schriftfamilie anstelle von Montserrat ändern , Josephine Das verringert die Schriftgröße, macht sie auf 40 Pixel. Als Schriftstärke benötigen wir hier dasselbe. Lassen wir es also so wie es ist. Als Nächstes werde ich den Abstand zwischen den Buchstaben verringern. Wir brauchen ein Pixel. Und zum Schluss verwenden wir anstelle von Margin Bottom Text-Align, oder? In Ordnung, das war's mit dem Banner. Ich finde, es sieht gut aus. Und jetzt möchte ich an Knöpfen arbeiten. Kümmern wir uns zunächst um ihre Positionen. Ich möchte, dass sie in der oberen rechten Ecke platziert werden. Wählen wir dafür die Entwicklung aus, die beide Schaltflächen umschließt Es hat den Klassennamen BTN. Lassen Sie uns seine Position als absolut betrachten. Definieren Sie dann die oberen 50 Pixel und die rechten 60 Pixel. Wie Sie sehen können, befinden sich beide Schaltflächen in der oberen rechten Ecke. Und jetzt werde ich sie stylen. Lassen Sie uns zunächst beiden Schaltflächen einige gemeinsame Stile geben. Wie Sie sich erinnern, haben sie eine gemeinsame Klasse, BTN. Wählen wir es aus. Stellen Sie zunächst die Breite auf einhundert70 Pixel ein. Schaffen Sie dann mithilfe von Polstern etwas Platz in den Schaltflächen. Oben und unten benötigen wir zehn Pixel, und dann sind 15 Pixel auf der linken und rechten Seite. Lassen Sie uns dann auf der rechten Seite der Schaltflächen Platz schaffen , indem wir 20 Pixel am rechten Rand verwenden Außerdem möchte ich sie abgerundet machen. Verwenden wir dafür den Randradius und machen ihn auf 50 Pixel. Kümmern wir uns jetzt um die Texte. Ändern Sie zunächst die Schriftfamilie. In diesem Fall verwende ich Telefone namens Josephine Sans Serifen. Erhöhen Sie dann die Schriftgröße, machen Sie es auf 16 Pixel. Schaffen Sie etwas Abstand zwischen den Buchstaben. Verwenden Sie den Buchstabenabstand. Ein Pixel. Entfernt auch Standard, Kontur, Kontur, Keine und ändert schließlich den Typ von gröber. Mach einen Zeiger daraus. Das war's mit gängigen Stilen. Jetzt werde ich beiden Knöpfen einige individuelle Stile geben . Wählen wir den ersten aus, indem wir className, Login, btn verwenden. Dann ändere die Hintergrundfarbe. Ich werde deine Farbe Tomate verwenden. Jetzt möchte ich die Farbe des Textes ändern. Und eigentlich brauche ich für beide Knöpfe die gleiche Farbe. Also werde ich es in gängigen Stilen schreiben. Lass uns deine weiße Farbe verwenden. Neben der Farbe möchte ich auch den gleichen Rand haben. Definieren wir also die Grenze. Zwei Pixel, einfarbig und als Farbe, oder? Tomate. Und schließlich wählen Sie die zweite Schaltfläche mit dem Klassennamen, melden Sie sich an und machen Sie die Hintergrundfarbe transparent In Ordnung, das war's mit der Kachelung der Knöpfe. Als Nächstes möchte ich einige Hover- und Clickeffekte erstellen. Beim Schweben. Ich will, dass der Knopf Elizabeth nach oben bewegt. Dafür. Wählen wir BTN mit Harvard aus und definieren dann Transformation Wir müssen Y mit einem Wert minus zwei Pixeln übersetzen. Und um den Effekt intelligenter zu machen, müssen wir den Transport um 0,3 s umstellen. Wenn wir Mauszeiger über die Tasten bewegen, kommen wir hierher Netter Effekt. Als nächstes müssen wir, wie gesagt, auf Effekt klicken. Dafür müssen wir eine dieser Pseudoklassen namens active verwenden dieser Pseudoklassen namens Wir müssen also BGN mit aktiv auswählen. Und jetzt können wir Stile definieren, die Schaltflächen erhalten sollen, wenn wir sie anklicken. Wie Sie wissen, müssen wir sie auf ihren alten Positionen platzieren, wenn wir den Mauszeiger dorthin bewegen, nach oben bewegen und ein Klick bewegen, nach oben bewegen und ein Klick einklicken Daher müssen wir diese Codezeile kopieren und nur den Wert ändern. Wir müssen hier Null schreiben. Wenn wir also klicken, erhalten wir einen schönen Klickeffekt. In Ordnung, das war's mit dem Anpassen von Schaltflächen. Jetzt ist es an der Zeit, mit der Arbeit auf Farmen zu beginnen. Der Formularcontainer ist also vorerst versteckt. Das erste, was wir tun müssen, ist es wieder anzuzeigen. Wir müssen jedoch nicht beide Formulare gleichzeitig anzeigen. Ich fange mit dem ersten Anmeldeformular an. Dann wird das zweite Formular automatisch formatiert. Das wird passieren , weil beide Unternehmen dieselben Klassen teilen. Also werde ich das Anmeldeformular dafür verstecken. Weisen wir seinem Wrapper-Attribut hidden zu. Gehen Sie dann zurück zur Datei style.css. Ich werde beide Rapper mit einem gemeinsamen Klassenmodell auswählen beide Rapper mit einem gemeinsamen Klassenmodell Definieren Sie dann die Breite als 400 Pixel. Dann lege ich ein Bild als Hintergrund fest. Verwenden wir hier einen linearen Gradienten und übergeben hier einige RGBA-Werte Der erste wird 148422 sein, dann nehme ich 42 und die Opazität 0,8 S für den zweiten wird 185-12-9129 und die Opazität 0,6 sein Wählen Sie dann Bild aus. Wir brauchen hier bydot JPG als Position, rechts in der Mitte als keine Wiederholung. Außerdem benötigen wir eine Immobilie in Hintergrundgröße mit der Wertdeckung. In Ordnung? Die Formulare sollten also in der Mitte der Seite platziert werden. Ich meine, sie sollten perfekt zentriert sein. Dafür verwende ich dieselbe Technik, die wir für das Banner verwendet haben. Lassen Sie uns also die Position des Modells als absolut festlegen. Dass wir die oberen 50 Prozent brauchen, links, 50 Prozent. Und auch transformieren, mit den Werten -50 Prozent und nochmal -50 Prozent übersetzen -50 Prozent und nochmal -50 Prozent Lassen Sie uns abschließend modale, leicht abgerundete Ecken erstellen, indem wir einen Randradius mit einem Wert von 20 Pixeln verwenden Randradius mit einem Wert Okay, im Moment sieht das Formular wirklich schrecklich aus, aber wir werden es in einer Weile gut aussehen lassen Lassen Sie uns weitermachen und mit dem Styling von Elementen beginnen , die in Modal platziert sind Ich beginne mit dem X-Schlussmuster. Wählen wir es also aus. Wir müssen den Klassennamen x BTM angeben. Ich werde es in der oberen rechten Ecke von modal platzieren. Dafür verwende ich Position Absolute. Dann richtig setzen? Als 20 Stück. Wie Sie sehen, ist die Schaltfläche vorerst recht klein Kümmern wir uns also um die vergrößerte Schriftgröße. Machen Sie 50 Pixel Außerdem werde ich die Farbe ändern. Verwenden wir hier genannt oder zwei bis zwei. Und schließlich ändern Sie den Typ gröber, machen Sie ihn zu einem Zeiger. Okay, das war's mit der X-Taste. Jetzt müssen wir uns um diese Überschriftenelemente kümmern. Wählen wir ihre übergeordneten Elemente aus, das ist der Formularkopf. Ich werde Text mit Textalign Center in der Mitte platzieren mit Textalign Center in der Mitte Schaffen Sie dann oben und unten in der Kopfzeile etwas Platz , indem Sie Rand, rechts, acht Pixel, Null, Hundert und 50 Pixel verwenden. Und wieder Null. Und schließlich ändern Sie die Farbe beider Überschriften und machen Sie sie weiß. In Ordnung, jetzt wähle ich dafür die erste Überschrift aus. Wir müssen hier den Formularheader H1 schreiben. Lassen Sie uns die Schriftfamilie ändern. In diesem Fall verwende ich Schrift Josephine Sans, San-Serif Als Nächstes werde ich die Schriftgröße erhöhen. Machen wir 40 Pixel daraus. Dann. Machen Sie Texte leichter, indem Sie die Schriftstärke 300 verwenden. Und dann schaffen Sie etwas Platz am unteren Rand der Überschrift Pixel am Rand des unteren Drittels verwenden. Nach den Schulden wähle ich die zweite Überschrift. Also richtig Formularheader h3. Für die zweite Überschrift benötigen wir fast ähnliche Eigenschaften. Nehmen wir also diese drei Codezeilen. Fügen Sie sie für die zweite Überschrift ein. Dann ändere die Schriftfamilie. Wir brauchen hier mehr Surat. Dann als Schriftgröße, richtig, 25 Pixel, Schriftstärke, müssen wir es nicht ändern, also lassen wir es so, wie es ist Und schließlich fügen Sie Text hinzu, transformieren Sie, Großbuchstaben. In Ordnung, das geht um Überschriftenelemente. Jetzt müssen wir anfangen, an den Eingaben zu arbeiten. Wählen wir zunächst die Formularelemente aus, die das Formular className Ich möchte mich um seine Position kümmern. Und dafür werde ich Flexbox verwenden. Also richtiger Display-Flex. Flex-Elemente werden horizontal in einer Reihe angeordnet. Wir müssen also die Biegerichtung ändern und sie zu einer Spalte machen. Um die Elemente dann zu zentrieren, müssen wir die Elemente ausrichten, zentrieren. In Ordnung, jetzt müssen wir anfangen, diese Eingaben zu stylen. Zuerst wähle ich die Eingabegruppe aus, die Font, Awesome Icons und Eingaben umfasst Ich möchte am Ende jeder Eingabegruppe etwas Platz schaffen . Verwenden wir hier also den unteren Rand mit einem Wert von zehn Pixeln. Danach wählen wir die Eingabe selbst aus, oder? Eingabegruppe. Dieser Input. Definierte Breite als 250 Pixel. Als Nächstes möchte ich mithilfe von Padding etwas Platz in der Eingabe schaffen mithilfe von Padding etwas Platz in der Eingabe Oben, rechts und unten benötigen wir den gleichen Platz. Also hier, 15 Pixel, dreimal S für die linke Seite, werde ich etwas mehr Platz schaffen denn irgendwann werden wir deine Font Awesome Icons platzieren. Also genau hier, 50 Pixel. Als Nächstes werde ich den Standardrand und die Standardkontur entfernen , den rechten Rand nicht. Und skizziere keine. Geben Sie die Eingabe ebenfalls leicht abgerundet an. Verwendung eines Randradius mit einem Wert von 30 Pixeln. Dann ändere ich den Hintergrund der Eingaben. Verwenden wir hier den RGBA-Wert mit schwarzer Farbe und mit den Opazitätspunkten sechs In Ordnung, danach werde ich an Text arbeiten. Also lasst uns die Schriftfamilie ändern. Ich werde deine Schrift namens Josephine Sans verwenden. Ohne Serifen. Das erhöhte die Schriftgröße. Machen Sie 16 Pixel daraus und ändern Sie dann die Farbe. Du siehst deine Farbe di, di, di. Okay, wir haben also gerade mit der Eingabe von Elementen begonnen. Es ist Zeit, weiterzumachen und sich um die Font Awesome-Icons zu kümmern. Wählen wir sie also mithilfe der Eingabegruppe aus. I. Zuerst möchte ich ihre Positionen verwalten. Wie gesagt, ich werde sie in Eingabeelementen platzieren. Definieren wir dafür ihre Position als absolut. Und damit sie gemäß dem übergeordneten Element funktionieren, das in diesem Fall die Eingabegruppe ist Wir müssen dem übergeordneten Element eine relative Position zuweisen . Definieren Sie dann vier I-Elemente, oben als 13 Pixel und links als 17 Pixel. Wie Sie jetzt sehen können, befinden sie sich in Eingängen. Lassen Sie uns einfach die Schriftgröße erhöhen. Machen Sie 18 Pixel daraus und ändern Sie die Farbe. Benutze hier. Ordnung, mit Eingabegruppen In Ordnung, mit Eingabegruppen sind wir fertig und sehen gut aus Und das einzige Element , um das wir uns innerhalb der Form kümmern wollen , ist ein Button. Wählen wir es also rechts für die Schaltfläche aus. Lassen Sie uns zunächst die Breiten definieren und daraus 310 Pixel machen Schaffen Sie dann mithilfe von Padding etwas Platz innerhalb der Schaltfläche. Wenn Sie es auf 12 Pixel setzen, werden Standardränder und -konturen entfernt, oder? Grenze keine. Und skizziere keine. Dann mache den Knopf abgerundet. Verwenden Sie hier, der Randradius mit Wert wird in Pixeln berechnet. Danach ändere ich die Hintergrundfarbe von Batson Lass uns deine Farbe oder d8678 verwenden. Außerdem müssen wir die Farbe des Textes ändern. Machen wir es weiß. Als Nächstes werde ich an Texten arbeiten. Ich möchte die Schriftfamilie ändern. Verwenden wir hier Josephine Sans. Serifen. Erhöhen Sie auch die Schriftgröße. Machen Sie 16 Pixel daraus und transformieren Sie Text in Großbuchstaben mit Text, transformieren Sie Großbuchstaben Ordnung, wie Sie sehen können, ist der Button fast gestylt Es sieht gut aus, aber wir müssen ein paar Stile hinzufügen. Wie Sie sehen, brauchen wir unten etwas Platz. Und ich werde auch oben etwas Platz schaffen . Dafür müssen wir Margin verwenden. Rechts oben zehn Pixel, die Null, die 50 Pixel unten und Null. Dann erschaffe etwas Schatten. Verwenden Sie Box Shadow mit den folgenden Werten. Etwa 50 Pixel, 20 Pixel. Und als Farbrecht RGBA, hintere schwarze Farbe mit Und schließlich wurde gröber geändert, es nach rechts zeigen, dieser Sitz über die Anpassung einer Taste Das Letzte, was ich tun möchte, ist, Hover- und Klick-Effekte zu erstellen, wie wir es bei der Anmelde- und Anmeldeschaltfläche gemacht haben Wählen wir also die Schaltfläche mit Harvard , die wir hier benötigen, Transform, Translate Y mit Argumenten minus zwei Pixeln aus. Außerdem möchte ich den Schatten beim Schweben leicht ändern Schatten beim Schweben leicht Also richtig Box Shadow. Wir brauchen hier Werte Null, also acht Pixel, 25 Pixel. Und als Farbrecht RGBA 000 und Opazität 0,3 Außerdem müssen wir Transition nutzen, oder? Alle 0,3 s. Wie Sie sehen können, funktioniert der Hover-Effekt Es sieht gut aus. Lassen Sie uns nun einen Klickeffekt erzeugen. Ich wähle für und unten die Pseudoklasse E2. Dann schnappen wir uns diese Codezeile. Fügen Sie es hier ein und geben Sie als Argument Null weiter. In Ordnung, das war's also. Das Modell ist eigentlich so gestaltet, dass dies ein Anmeldeformular ist. Im Moment ist das Anmeldeformular versteckt. Aber wenn wir es wieder anzeigen, werden Sie feststellen, dass es ebenfalls gestylt ist weil beide Modellformen dieselben gemeinsamen Klassen haben Okay, alles ist bereit, damit diese Modellformulare standardmäßig funktionieren. Wir werden sie verstecken. Und wenn wir auf die Anmelde - oder Anmeldeschaltflächen klicken, sollten sie angezeigt werden. Und auch der Rest der Seite sollte deaktiviert sein. Um das zu erreichen, werden wir ein bisschen JavaScript verwenden. Okay, also bevor wir etwas JavaScript schreiben, werde ich zuerst die Formulare verstecken, aber ich werde es nicht in HTML tun. Wir werden es von CSS aus machen. Lassen Sie uns also zuerst das von hier aus versteckte Attribut loswerden. Gehen Sie dann zur Datei style.css. Um Formulare auszublenden, verwende ich Opazität Null und Visibility Hidden Und wir sollten sie zum Modeln beauftragen. Schaumstoffe sind versteckt. Um sie nun anzuzeigen, müssen wir, wenn wir auf die Schaltflächen klicken, wenn wir auf die Schaltflächen klicken, eine neue Klasse erstellen, die in HTML eigentlich nicht existiert. Und dann müssen wir mithilfe von JavaScript diese Klasse Two-Forms onclick Event hinzufügen Lassen Sie uns also zuerst eine Klasse erstellen und sie Display nennen. Dann schnapp dir diese beiden Grundstücke. Und Werte ändern. Wir brauchen eine Opazität von eins und eine sichtbare Sichtbarkeit. Jetzt ist es an der Zeit, etwas JavaScript zu schreiben. Eigentlich müssen wir unsere JavaScript-Dateien mit der HTML-Zelle verknüpfen . Gehen wir zur Datei index.html und weiter unten , bevor wir den Body-Tag schließen, öffnen wir das Script-Tag. Und das Quellattribut gibt einen Teil der JavaScript-Datei an. Wir brauchen hier script.js und öffnen dann die Datei script.js. Bevor wir also einem Klickereignis zwei Schaltflächen zuordnen, erstelle ich ein paar Variablen. Wir müssen Variablen für Modelle erstellen und beide Modelle separat auswählen. Wie wir uns erinnern, weisen wir jedem von ihnen individuelle Klassennamen zu. Ich meine, Wrapper für Anmeldeformulare und Wrapper für Anmeldeformulare. Wir müssen diese Klassen also verwenden um Modelle separat auszuwählen. Gehen wir also zurück zur Datei script.js und erstellen eine Variable, nennen wir sie Anmeldemodell Als kurze Anmerkung hier: Wenn du mit JavaScript, in diesem Fall dom, nicht vertraut bist, in diesem Fall dom, nicht vertraut bist, dann kannst du dir unser JavaScript-Bootcamp auf Udemy ansehen, in dem wir alle wichtigen Konzepte von Basic bis Advanced im Detail erklären alle wichtigen Konzepte von Basic bis Advanced Den Link zu diesem Kurs finden Sie in der Beschreibung. Jetzt müssen wir dafür den Wrapper für das Anmeldeformular auswählen. Schreiben wir hier ein Dokument. Dann verwende ich eine Methode namens Query Selector. Geben wir in Klammern den Wert className an, bei dem es die Registrierung für Rapid handelt Und genauso müssen wir den Login-Formular-Wrapper auswählen. Lassen Sie uns also diese Codezeile duplizieren. Dann ändern Sie den Namen der Variablen , die wir hier benötigen, Login-Modell. Und habe auch den Klassennamen hier geändert, einloggen. Okay, neben den Modellen müssen wir auch die Anmelde- und Anmeldeschaltflächen auswählen. Lassen Sie uns also eine weitere Variable erstellen und sie sign up btn nennen, was dem Document Dot Query Selector entsprechen sollte Und in Klammern als Klassenname, oder? Melde dich an BTM. Das gleiche benötigen wir für einen Login-Button. Lassen Sie uns also diese Codezeile duplizieren. Dann ändere den Namen der Variablen. Wir brauchen hier Login btn. Und ändere auch den Klassennamen, oder? Loggen Sie sich ein. In Ordnung, also im Moment wissen wir es alle oder sie können zwei Schaltflächen anhängen , für die wir hier schreiben müssen, melden Sie sich an. Dann müssen wir eine Methode namens Add Event Listener anhängen Methode namens Add Event Listener In Klammern müssen wir als erstes Argument den Namen des Ereignisses angeben als erstes Argument den Namen des Ereignisses Und dann müssen wir deine Funktion übergeben. In diesem Fall verwende ich die ES6-Pfeilfunktion. Und jetzt müssen wir zur Anmeldung die Modellklassenanzeige hinzufügen, die wir gerade in CSS erstellt haben. Dafür müssen wir hier ein Anmeldemodell schreiben , dass wir eine Eigenschaft namens Klassenliste verwenden müssen Eigenschaft namens Klassenliste verwenden müssen Und um dem Modell eine Klasse hinzuzufügen, müssen wir die Methode add verwenden. Innerhalb der Klammer. Wir müssen einen Klassennamen als Argument übergeben. Wenn wir jetzt auf die Schaltfläche „ Registrieren“ klicken, wird das Anmeldemodell angezeigt. Toll, die Anmeldeschaltfläche funktioniert. Das Gleiche benötigen wir auch für den Login-Button. Lassen Sie uns also diesen Code duplizieren und die Namen der Variablen ändern. Wir brauchen Login, BTN und auch das Login-Modell Okay, lassen Sie uns auf die Schaltfläche „Anmelden“ klicken und Sie können sehen, dass es genauso funktioniert wie die Anmeldeschaltfläche. Vorerst. Nur diese beiden Knöpfe funktionieren. Wir können Modelle nicht mit X-Tasten schließen. Und auch der Hintergrund ist nicht deaktiviert, wenn Modals angezeigt werden. Jetzt ist es an der Zeit, sich um diese Dinge zu kümmern. Zuerst möchte ich dafür sorgen, dass die X-Buttons funktionieren. Dafür. Lassen Sie uns neue Variablen separat für die X-Schaltfläche für die Registrierung und die X-Schaltfläche für die Anmeldung erstellen. Nennen wir es den variablen Sinus von x, dem Document Dot Query Selector entsprechen sollte Und dann geben wir Ihren Klassennamen an, den Sinus von x. Lassen Sie uns ihn duplizieren. Ändere hier den Namen der Variablen, melde dich an x. Und ändere auch den Klassennamen Wir benötigen Login X, wie Anmelde- und Login-Buttons Wir müssen das Click-Event auch an die X-Schaltflächen anhängen. Eigentlich werde ich diesen Code duplizieren Dann ändern wir den Namen der Variablen, richtig, den Sinus von x. Wenn wir jetzt also auf die X-Schaltfläche klicken, müssen wir die Klassenanzeige entfernen, was wir zwei Modelle hinzugefügt haben. Hier müssen wir also anstelle der Methode add die Methode entfernen verwenden. Machen wir dasselbe für login x. Duplizieren Sie diesen Code. Ändern Sie den Namen der Schaltfläche hier, melden Sie sich an x. Und ändern Sie auch den Namen des Modells, richtig? Login-Modal. In Ordnung, lassen Sie uns Modelle zeigen. Wenn wir also auf X Flaschen klicken, sind sie weg. Die X-Tasten funktionieren also einwandfrei. Eigentlich haben wir hier im Moment eine ziemlich chaotische Situation. Wir können beide Modelle gleichzeitig anzeigen, aber es ist definitiv die schlechte Benutzererfahrung. Wir brauchen einige Einschränkungen. Mit anderen Worten, wenn eines dieser Modelle angezeigt wird, sollten wir die gesamte Seite deaktivieren damit wir nicht auf die zweite Schaltfläche klicken können. Um die Seite aufzulösen, sollten wir acht von einem Formularcontainer abdecken. Und dann können wir nirgendwo auf der Seite klicken. Dafür. mussten wir dem Formularcontainer einige Stile zuweisen. Gehen wir zur Datei style.css und wählen. Für Behälter. Ich definiere seine Position als fest. Definieren wir dann aus Gründen der Sichtbarkeit diese Hintergrundfarbe, RGBA, und fügen sie als schwarze Farbe mit einer Opazität Derzeit ist der geformte Behälter nicht sichtbar. Und um das zu beheben, müssen wir es auf der gesamten Seite verteilen. Dafür definiere ich alle vier Positionen als Null. Ich meine, wir müssen die obere Null, rechte Null, dann die untere Null und schließlich die Null links machen. Jetzt ist es also aus dem Container möglich. Gleichzeitig sind wir jedoch nicht in der Lage, auf die Schaltflächen zu klicken und auch nicht auf eine beliebige Stelle auf der Seite zu klicken. Natürlich ist es nicht das, was wir standardmäßig wollen. Wir möchten dies erreichen, wenn wir eines dieser Modelle ausstellen . Standardmäßig müssen wir uns also vor dem Container verstecken. Und dafür brauchen wir Opazität, keine versteckte Sichtbarkeit. Dann müssen wir eine neue Klasse erstellen, die mithilfe von JavaScript zum Formularcontainer hinzugefügt wird mithilfe von JavaScript zum Formularcontainer hinzugefügt . Sie verwaltet das Anzeigen des Formularcontainers. Lassen Sie uns also eine Klasse erstellen und sie als deaktiviert bezeichnen. Wir müssen diese beiden Eigenschaften kopieren. Fügen Sie sie dann hier ein und ändern Sie die Werte. Wir brauchen Opazität eins und Sichtbarkeit sichtbar. Okay, jetzt gehen wir zurück zur Datei script.js. Wir müssen die Seite also deaktivieren , wenn wir auf eine dieser Schlachten klicken, ich meine, einloggen oder registrieren. Also müssen wir eine neue Variable erstellen. Nennen wir es Formcontainer. Es sollte dem Documents Dot Query Selector entsprechen. Und lassen Sie uns Ihren Clusternamen für den Container angeben. In dieser Funktion müssen wir dann zur Farm die Containerklasse disabled hinzufügen, die wir gerade erstellt haben. Dafür brauchen wir also einen ausländischen Container. Dann die Eigenschaft Klassenliste. Wir müssen hier die Methode add verwenden. Und in Klammern müssen wir den Klassennamen genauso angeben Dasselbe benötigen wir auch für einen Login-Button. Kopieren wir also diese Zeile und fügen sie hier ein. Wenn wir also auf eine dieser Schaltflächen klicken, wird das Modell angezeigt. Und auch die Seite wird deaktiviert. Und wenn wir dann auf die X-Schaltfläche klicken, wird sie ausgeblendet, aber die Seite bleibt erhalten, immer noch deaktiviert. Wenn wir also auf die X-Schaltflächen klicken, sollten wir die deaktivierte Klasse aus dem Formularcontainer entfernen. Kopieren wir diesen Code und fügen ihn für beide X-Schaltflächen ein. Und ändern Sie einfach die Methode und fügen Sie sie zu entfernt hinzu. Also wenn wir jetzt testen, dann wird alles richtig funktionieren. Das einzige, was wir tun müssen, ist das Anzeigen und Ausblenden von Effekten reibungsloser zu gestalten. Dafür müssen wir Transition nutzen. Wir müssen es dem Modell zuweisen. Lassen Sie uns Ihre Werte all und 0.5 s einfügen . Dann nehmen wir sie und weisen sie ebenfalls dem Formularcontainer zu. In Ordnung, unser Projekt ist abgeschlossen. Ich hoffe, es war wirklich interessant und du wirst viele Dinge lernen. Danke fürs Zuschauen. Wir sehen uns im nächsten Tutorial. 35. Projekt 32 - Animierte Landingpage: Hallo und willkommen zu unserem nächsten YouTube-Tutorial, das von Code and Create erstellt wurde. In diesem Video werden wir eine gut aussehende Landingpage mit einigen Animationseffekten erstellen eine gut aussehende Landingpage mit einigen Animationseffekten Das Projekt wird auf Basis von HTML und CSS erstellt. Wir werden CSS-Keyframes verwenden. In diesem Video erfahren Sie also, wie Sie Animationen nur mit reinem CSS erstellen können . Lassen Sie uns weitermachen und zunächst unser Projekt beschreiben. Wie Sie sehen können, haben wir hier einen Vollbildhintergrund Und in der Mitte der Seite haben wir ein paar Elemente. Sie können hier Überschrift, Absatz und zwei verschiedene Schaltflächen sehen . Wenn ich die Seite neu lade, erscheinen die Überschrift und ein Absatz aus den entgegengesetzten Richtungen mit einem gewissen Fade-Effekt Und sobald sie fertig sind und sich bewegen, werden die Schaltflächen der Reihe nach angezeigt. All diese Animationseffekte werden mithilfe von CSS, Keyframes und einigen Animationseigenschaften erstellt Keyframes und einigen Animationseigenschaften In Ordnung, lassen Sie uns auf dem Desktop beginnen. Ich habe einen neuen Ordner namens animierte Landingpage, in dem wir zwei verschiedene Dateien für HTML und CSS haben. Und auch ein Ordner namens Images , der ein einzelnes Bild als Hintergrund der Landingpage enthält . Öffnen wir diesen Ordner mit VS Code. In der Datei index.html. Ich habe eine grundlegende Struktur des HTML-Dokuments vorbereitet. Sie finden hier zwei Links innerhalb des Kopfelements. Eine für Google-Schriften, ich werde eine Schrift namens Doses verwenden. Und wir haben einen weiteren Link für die CSS-Stile. Ordnung, lassen Sie uns dieses Projekt im Browser mit einem Live-Server ausführen im Browser mit einem Live-Server Wenn Sie dieses Paket nicht verwenden, empfehle ich, den Live-Server vom Extension Manager aus zu installieren . Es ist eigentlich ein sehr praktisches und nützliches Paket. Okay, lassen Sie uns weitermachen und den Code-Editor und den Browser nebeneinander platzieren und mit der Erstellung von HTML-Markup beginnen Er wird einfach sein. Wir werden nur ein paar Elemente haben. Lassen Sie uns also zunächst Entwicklungen erstellen, die als Container für den gesamten Inhalt dienen. Also lassen Sie uns ihm den Klassencontainer zuweisen. Als Nächstes benötigen wir eine weitere Entwicklung , die einige Elemente umfassen wird. Lassen Sie uns ihm den Klassennamen, Banner, zuweisen. Sie dann innerhalb des Banners Erstellen Sie dann innerhalb des Banners H1-Überschriftenelemente Fügen wir etwas Text ein. Sagen wir meine Website. Eigentlich werde ich die Website nach Span-Elementen umschließen, weil ich das zweite Wort der Überschrift etwas anders gestalten möchte . Als nächstes brauchen wir einen Absatz. Lassen Sie uns hier einige durch Code erstellte Texte einfügen und erstellen. Danach erstelle ich eine Schaltfläche mit Typschaltfläche. Lassen Sie uns ihm außerdem einen Klassennamen zuweisen, BTN, links. Und als Text fügen wir Ihre Erkundung ein. In Ordnung, wir brauchen den ähnlichen Knopf wie den zweiten. Lassen Sie uns also diese Codezeile duplizieren. Dann ändere den Klassennamen, den wir hier brauchen, übrigens, oder? Und anstatt zu erkunden, schreiben wir Abonnieren. In Ordnung, das war's mit HTML-Markup. Wir sind bereit, mit dem Gestalten des Banners zu beginnen. Gehen wir zur Datei style.css. Zuerst werden wir alle Elemente stylen und dann kümmern wir uns um Animationen. Lassen Sie uns weitermachen und einige Reset-Stile erstellen. Wählen Sie alle Elemente mit einem Sternchen aus. Ich setze Margin und Padding auf Null. Und ändere auch die Schriftfamilie. Verwenden wir die Schrift Ptosis und dann Sans-Serif. In Ordnung, als Nächstes wähle ich den Container aus. Definieren wir zunächst seine Breite und Höhe. Stellen Sie bei uns hundert Prozent S für Körpergröße ein. Verwenden wir 100 Vh. Wenn Sie mit der VH-Maßeinheit nicht vertraut sind, steht sie für die Höhe des Viewports Und in diesem Fall sagen wir, dass die Höhe der Container hundert Prozent des Viewports betragen sollte Danach lege ich ein Bild als Hintergrund fest. Verwenden wir hier einen linearen Gradienten und übergeben hier einige RGBA-Werte Zuerst wird einer 53 sein, dann zwei bis 66. Und Opazität 0,5. Als zweiter RGBA-Wert. Lassen Sie uns die Jahre 47, 80, 63 und die Opazität 0,6 übergehen 80, 63 und die Opazität 0,6 . Als Nächstes gebe ich einen Teil des Bildes Wir haben einen Ordner namens Images und müssen JPG mit dem Punkt auswählen. Als Nächstes müssen wir die Position des Hintergrundbilds als Mittelpunkt festlegen. Auch hier brauchen wir keine Wiederholung. Und schließlich werde ich die Immobilien von Hintergrundseiten mit Wertdeckung verwenden . Ordnung, wie Sie sehen können, ist das Bild als Hintergrund des Containers festgelegt Und jetzt müssen wir anfangen, an dem Banner zu arbeiten. Wählen wir es also mit ClassName Banner aus. Lassen Sie uns zunächst die Breite auf 100% festlegen. Das bedeutet, dass das Banner 100 Prozent der Breite seines übergeordneten Elements einnimmt , in diesem Fall des Containers. Jetzt kümmere ich mich um die Position des Banners. Ich werde es in der Mitte der Seite platzieren. Eigentlich wird es keine perfekte Zentrierung sein. Ich meine, ich möchte es perfekt horizontal zentrieren , aber nicht vertikal. Dafür werde ich eine Technik anwenden. Lassen Sie uns seine Position als absolut festlegen. Definieren Sie dann die oberste Position als 40 Prozent, dann die linke Position als 50 Prozent. Jetzt wird das Banner um 40 Prozent von oben nach unten und um 50 Prozent von links nach rechts verschoben . Aber das ist nicht die Position , an die wir sie binden wollen. Wir müssen es in der Mitte platzieren. Und dafür müssen wir transform translate verwenden. Wir müssen Ihnen die folgenden Werte übergeben. Wir brauchen -50 Prozent und dann wieder -50 Prozent. Mit Transform Translate haben wir das Banner also von seiner aktuellen Position um 50 Prozent auf die linke Seite und um 50 Prozent nach oben verschoben um 50 Prozent auf die linke Seite . Als Nächstes möchte ich in Bezug auf das Banner Elemente in der Mitte der Box platzieren. Und dafür müssen wir Text Align Center verwenden. Okay, lassen Sie uns weitermachen und Überschriftenelemente formatieren. Wählen Sie es aus, rechts, bannen oder H1. Lassen Sie uns die Schriftgröße erhöhen. Machen Sie zwei Pixel daraus. Dann ändere die Farbe. Ich werde deine Farbe D, D, D verwenden. Außerdem möchte ich die Schrift mithilfe der Schriftstärke etwas heller machen mithilfe der Schriftstärke etwas heller Also 800. Und schließlich schaffen Sie unten etwas Platz, indem Sie den Rand verwenden, die unteren zwei Pixel. In Ordnung? Wie ich mich erinnere, haben wir das zweite Wort der Überschrift eingeschlossen. Ich meine Website mit Span-Element. Also wähle ich es richtig aus, Banner Span. Ich möchte Text in Großbuchstaben umwandeln. Verwenden wir dafür die Texttransformation in Großbuchstaben. Dann mach es etwas mutiger. Schriftstärke 700. Und mach auch seine Farbe weiß. White Collar, f, f, f. In Ordnung, das ist es mit der Überschrift Lassen Sie uns dem Absatz einige Stile geben. Wählen Sie es aus, rechtes Banner p. Definieren wir die Schriftgröße als 50 Pixel. Dann machen Sie Texte heller, indem Sie die Schriftstärke 300 verwenden , ändern Sie die Farbe, machen Sie es e, e. Und schließlich schaffen Sie am unteren Rand etwas Platz, indem Sie den Rand verwenden , unten 20 Pixel In Ordnung, also auch im Stil des Überschriftenabsatzes. Und jetzt müssen wir uns um diese beiden Knöpfe kümmern. Eigentlich sollten sie fast identisch sein. Also werde ich zunächst einige gängige Stile für Schaltflächen definieren. Wählen Sie beide aus. Richtig? Banner-Schaltfläche. Definieren Sie die Breite als 180 Pixel. Schaffen Sie dann etwas Platz, indem Sie ihm einen Abstand von 12 Pixeln zuweisen Als Nächstes möchte ich dafür etwas Platz um die Schaltflächen herum schaffen Verwenden wir den Rand und legen ihn auf 20 Pixel fest. Dann definieren wir anstelle des Standardrahmens einen benutzerdefinierten, rechten Rand mit den Werten zwei Pixel, durchgehend. Und lassen Sie uns Farbe E erstellen. Außerdem werde ich Knöpfe mithilfe des Randradius abgerundet machen Stellen wir es auf 50 Pixel ein. Außerdem möchte ich die Schriftgröße erhöhen. Machen wir 18 Pixel daraus. Entfernen Sie dann die Standardgliederung mit outline none. Schaffen Sie auch etwas Abstand zwischen den Buchstaben. Verwenden wir dafür den Buchstabenabstand mit einem Wert von einem Pixel. Und schließlich, ändern Sie natürlich die Art des Kurses, machen Sie es deutlich. Okay, das war's mit den gängigen Stilen für Buttons. Jetzt werde ich jedem von ihnen einige individuelle Stile zuweisen . Wählen wir also die Schaltfläche aus, die sich auf der linken Seite befindet. Es hat noch einen Klassennamen übrig. Lassen Sie uns die Hintergrundfarbe ändern. Verwenden Sie Ihre Farbe, z. B. E, und ändern Sie dann die Farbe des Textes. Ich werde hier Farbe für verwenden. Eigentlich benötigen wir zwei ähnliche Eigenschaften für diesen zweiten Button. Lassen Sie uns also weitermachen und diesen Code duplizieren. Ändere den Klassennamen, den wir hier brauchen, oder? Dann setze ich die Hintergrundfarbe auf transparent. Es ist vier Farben. Lass uns ie benutzen. Okay, also endlich sind alle Elemente gestylt. Die Ausleihseite sieht gut aus und jetzt ist es an der Zeit, unsere Animationen zu erstellen. In CSS können Sie Animationen mithilfe von Keyframes erstellen In Keyframes können Sie verschiedene CSS-Regeln für verschiedene Animationsschritte definieren verschiedene CSS-Regeln für verschiedene Animationsschritte Dann können Sie mithilfe einiger Animationseigenschaften diese CSS-Regeln auf verschiedene Elemente anwenden , um sie in der Praxis zu sehen . Erstellen wir Keyframes Dafür brauchen wir ein Schild. Dann Schlüsselwort, Keyframes. Darauf sollte der Name der Animation folgen. Eigentlich ist es optional. Du kannst es nennen, wie du willst. Und in diesem Fall möchte ich es als Bewegung nach links bezeichnen. In Ordnung? Dieser Teil der Animation wird also für Überschrift eins sein, Überschrift zwei wird standardmäßig auf der rechten Seite platziert. Außerdem möchte ich, dass es standardmäßig ausgeblendet ist, ich meine den Startzustand eines Elements, wenn die Animation beginnt. Wenn wir die Seite dann neu laden, möchte ich, dass sie sich von rechts nach links bewegt und dass sie auch mit einem gewissen Fade-Effekt erscheint Um das zu erreichen, sollten wir diese Stile in Keyframes definieren Ich meine, den Startzustand eines Elements und auch seinen Endzustand. Um die Stile zu definieren, wenn die Animation beginnt, müssen wir hier Null Prozent schreiben. Anstelle von Null Prozent können Sie auch das Schlüsselwort von verwenden. Wie gesagt, die Überschrift sollte auf der rechten Seite platziert und ausgeblendet werden. Dafür müssen wir dir schreiben, transformieren und dann X übersetzen. Und als Argument, lass uns hier 120 Pixel platzieren. Und auch um ein Element zu verbergen, benötigen wir Opazität. Null. S4, der Endpunkt der Animation, wir möchten, dass die Überschrift wieder auf ihre alte Position gebracht wird Und es sollte auch sichtbar sein. Um den Endpunkt zu definieren, können wir hier das Schlüsselwort an schreiben. Eigentlich haben wir in diesem Fall nur zwei Schritte. Wir können diese Keywords verwenden, ich meine von N2 Aber manchmal, glaube ich, haben wir meistens mehr als zwei Schritte. Und dann sollten wir in diesem Fall Prozentwerte verwenden. Wie dem auch sei, lassen Sie uns diese Keywords ändern und Prozentwerte verwenden. Anstatt von Null. Anstelle von zwei. Wir brauchen 100% Dann schnapp dir vom ersten Schritt an Sterne. Geben Sie Ihre Null S für die Opazität ein, wir benötigen eine. In Ordnung, im Moment passiert hier nichts. Die Überschrift bewegt sich nicht. Wir brauchen etwas anderes, um diese Stile auf ein Element anzuwenden, wir müssen einige Animationseigenschaften verwenden. Lassen Sie uns also weitermachen und diesen Eigenschaften zwei Überschriften zuweisen . Der erste wird der Name der Animation sein. Lassen Sie uns ihm einen Namen für Keyframes zuweisen und gehen Sie nach links. Und dann brauchen wir die Dauer der Animation. Stellen wir es auf 2 s ein. Wenn wir das speichern, bewegt sich die Überschrift von links nach rechts mit einem gewissen Fade-Effekt. Eigentlich haben wir hier ein kleines Problem. Unten wird eine Scrollleiste angezeigt , während sich die Überschrift bewegt. Das liegt daran, dass es standardmäßig auf der rechten Seite platziert ist und der Platz auf der Seite nicht ganz ausreicht. Um dieses Problem zu beheben, müssen wir Overflow Hidden verwenden Und wir müssen es dem Container zuweisen. Wie Sie sehen können, Stahl. Und vielleicht haben wir hier unerwartet das gleiche Problem. Das passiert, weil das Banner absolut positioniert wurde. Und im Moment funktioniert es je nach Körperelement. Wir müssen dafür sorgen, dass es dem Container entsprechend funktioniert. Dazu müssen wir dem Container eine relative Position zuweisen . Jetzt funktioniert alles perfekt. Als Nächstes erstelle ich Keyframes für einen Absatz. Es wird den Keyframes der Überschrift ähnlich sein. In diesem Fall müssen wir jedoch eine entgegengesetzte Richtung einschlagen. Ich möchte, dass der Absatz von links nach rechts verschoben wird. Lassen Sie uns also weitermachen und diesen Code duplizieren. Ändern Sie den Namen der Animation. In diesem Fall schreibe ich nach rechts. Dann brauchen wir hier statt 120 Pixel minus einhundert20 Pixel. Dann fahren Sie fort und weisen Sie zwei Absatzeigenschaften zu , die wir für die Überschrift verwendet haben. Also schnappe ich sie mir, füge sie für p Elemente und ändere einfach den Namen der Animation. Wir müssen nach rechts gehen. Wenn wir also speichern, bewegt sich der Absatz wie in der Überschrift von links nach rechts, was zu einem verblassten Effekt Und insgesamt wird es einen schönen Animationseffekt erzeugen. Okay? Als Gast müssen wir jetzt standardmäßig an Schaltflächen arbeiten, ich möchte, dass sie ausgeblendet sind. Und nachdem ich eine Überschrift und einen Absatz angezeigt habe, möchte ich, dass sie in der richtigen Reihenfolge und mit einem gewissen Fade-Effekt angezeigt werden . Lassen Sie uns also neue Keyframes erstellen. Nennen Sie es animate btn. Im Fall einer Schaltfläche müssen wir also nur mit Opazität weitermanipulieren Bei Null Prozent muss die Opazität also Null sein S für 100%. Ich mache eins daraus. In Ordnung? Keyframes sind also bereit Lassen Sie uns weitermachen und zwei Schaltflächen, Animationseigenschaften, zuweisen . Fangen wir bei BTN an, definierten Animationsnamen links liegen und legen ihn als animate Wenn ich dauere, nehmen wir eine Sekunde. Abgesehen von diesen beiden Eigenschaften benötigen wir eine kleine Verzögerung, benötigen wir eine kleine Verzögerung weil ich möchte, dass Batsons erscheinen, wenn die Animationen von Überschrift und Absatz kurz vor dem Ende stehen Verwenden wir also die Eigenschafts-Animationsverzögerung und setzen sie auf 1,5 s. Dann schnappen wir uns diese drei Eigenschaften und fügen sie ebenfalls für BTN Für die zweite Taste benötigen wir etwas mehr Verzögerungszeit. Ändern wir also seinen Wert und machen ihn zu 2,3 s. Okay, speichern wir und schauen, was passiert. Wie Sie sehen können, sind während der Ausführung von Animationen einer Überschrift und eines Absatzes, genauer gesagt, während der Verzögerungszeit Schaltflächen sichtbar, und sobald sie fertig sind, beginnen sie mit der Animation Also müssen wir sie während der Wartezeit verstecken. Und dafür müssen wir eine andere Eigenschaft verwenden, die als Animationsfilmmodus bezeichnet wird. Und wir müssen es rückwärts stellen. In diesem Fall sagen wir also, dass Elemente während der Verzögerungszeit standardmäßig diesen bestimmten Stil haben. Mit anderen Worten, während der Verzögerungszeit werden die Tasten ausgeblendet. Schnappen wir uns diesen Code und fügen ihn auch für die zweite Schaltfläche ein. Dann speichern. Und los geht's. Jetzt funktioniert alles perfekt. Wir haben hier eine schöne animierte Landingpage. In Ordnung, das ist es eigentlich. Unser Projekt ist abgeschlossen. Und bevor wir dieses Tutorial beenden, möchte ich Ihnen noch etwas zu Animationseigenschaften zeigen . Wie Sie sehen, verwenden wir mehrere davon. Und anstatt das zu tun, können wir sie kurz schreiben. Wir müssen nur eine Eigenschaft namens Animation verwenden. Und dann müssen wir jedem Namen zuweisen, nach links gehen, worauf die Dauer folgen sollte. Kopieren wir diese Zeile und fügen sie als Absatz ein. Namen ändern. Wir müssen nach rechts gehen. Lass uns sparen. Und Sie sehen , dass alles genau auf die gleiche Weise funktioniert. In Ordnung? Eigentlich werde ich die Eigenschaften von Batson nicht ändern Ich denke, Sie werden deutlich sehen, wie es funktioniert, sodass Sie es selbst machen können. Okay, lass es uns sehen. Wir sind mit diesem Projekt fertig. Ich hoffe es hat dir gefallen und du hast einige nützliche Dinge gelernt. Wir sehen uns im nächsten Tutorial. 36. Projekt 33 - 3D-Schaltfläche: Hallo zusammen und willkommen zu unserem nächsten Tutorial. In diesem Video erstellen wir eine 3D-Schaltfläche, die nur aus reinem HTML und CSS besteht. Und ich denke, es wird wirklich interessant und hilfreich sein, weil Sie einige coole Tricks und Techniken lernen können einige coole Tricks und Techniken lernen , indem Sie nur HTML und CSS verwenden. Also lass uns anfangen. Wie immer. Lassen Sie uns zunächst beschreiben, was wir erstellen werden. Wie Sie sehen, haben wir hier ein Vollbild-Hintergrundbild. Und in der Mitte der Seite haben wir eine 3D-Schaltfläche. Es ist im 3D-Raum platziert. Und wenn wir den Mauszeiger darüber bewegen, dreht es sich mit einem wirklich schönen Effekt Also ich hoffe, dir gefällt dieses kleine Projekt. Auf dem Desktop habe ich einen neuen Ordner erstellt , in dem ich zwei verschiedene Dateien für HTML und CSS habe. Außerdem habe ich hier einen weiteren Ordner , der ein Bild als Hintergrund enthält. Lassen Sie uns weitermachen und diesen Ordner mit VS-Code öffnen. In der Datei index.html. Wir haben die grundlegende Struktur des HTML-Dokuments. Im Inneren gab es Elemente. Es gibt zwei Links, einen für die Datei style.css und einen für Google-Schriftarten. Während dieses Projekts werden wir Telefone verwenden, die als Slab bezeichnet Okay? Ordnung, lassen Sie uns diese Datei im Browser über den Live-Server ausführen im Browser über den Live-Server Um diese Erweiterung zu erhalten, müssen Sie im Extension Manager danach suchen und sie installieren. Okay, lassen Sie uns Editor und Browser nebeneinander platzieren , um bequemer und flexibler zu arbeiten, und mit der Erstellung von HTML-Markup beginnen Es wird wirklich einfach sein. Wir müssen nur Entwicklungen entwickeln, die in Containern gehalten werden. Dann müssen wir darin einen Knopf einfügen. Weisen wir ihm den Klassennamen BTN zu. Und auch als Text gleich hier, abonniere. Ordnung, das war's mit HTML Gehen wir zur Datei style.css und schreiben einige Styles Zuallererst werde ich einige Reset-Stile erstellen. Wählen wir alle Elemente mit Sternchen aus und setzen Rand und Abstand auf Null. Als nächstes müssen wir uns um den Container kümmern. Wählen wir es also aus. Zuerst. Ich werde seine Breite und Höhe definieren. Gehen wir von 100 Prozent aus. Was die Höhe angeht. Ich werde ihm 100 Vh zuweisen. Tatsächlich haben wir in anderen Videos erklärt, wie die Höhe des Viewports funktioniert Aber auch in diesem Fall sagen wir, dass die Höhe des Containers hundert Prozent des Viewports betragen sollte Als Nächstes lege ich das Bild als Hintergrund des Containers fest. Lassen Sie uns Ihren linearen Gradienten verwenden. Ich werde deine RGBA-Werte weitergeben, oder? 000 und Opazitätspunkte sieben. Andererseits benötigen wir den RGBA-Wert 000, die Opazität 0,8. Dann gebe ich innerhalb der URL einen Teil des Bildes an, wir haben einen Ordner namens Images. Wählen wir JPEG punktweise aus. Dann definiere ich die Position des Hintergrunds. Es wird im Mittelpunkt stehen. Und auch hier brauchen wir keine Wiederholung. Und schließlich werde ich eine Eigenschaft in Hintergrundgröße mit einer Wertdeckung verwenden . In Ordnung, jetzt sieht der Hintergrund wirklich gut aus. Und das Letzte, was den Container betrifft, ist, dass wir den Button perfekt in der Mitte der Seite platzieren werden. Eigentlich werden wir es mit Flexbox verwalten. Also lass uns hier Display Flex schreiben. Und dann müssen wir den Inhalt anhand der Werte in den Mittelpunkt stellen und Elemente ausrichten. Wieder mit einem Value Center. In Ordnung, das war's mit dem Container. Als Nächstes müssen wir uns darum kümmern, aber lassen Sie uns weitermachen und auswählen, dass es im Klassennamen BTN enthalten ist Zuerst. Lassen Sie uns einigen üblichen Stilen eine definierte Breite zuweisen und daraus 350 Pixel machen. Stellen Sie dann die Höhe auf 100 Pixel ein und ändern Sie die Hintergrundfarbe. In diesem Fall verwende ich einen linearen Gradienten. Lassen Sie uns Ihre beiden verschiedenen Farben weitergeben. Der erste wird 8539 , 16s4 sein. Zweiter, ich werde hier 63019 übergeben. Okay. Also so sieht unser Button jetzt aus. Es ist wirklich riesig, aber eigentlich brauchen wir das. Lassen Sie uns weitermachen und einige weitere Stile hinzufügen. Macht den Standardrand und die Standardkontur los , der rechte Rand nicht. Und skizziere keine. Dann lass uns weitermachen und am Text arbeiten. Ändern Sie die Schriftfamilie. Verwenden Sie Ihre Schrift mit dem Namen Slab 27 Pixel statt Serif, vergrößerte Schriftgröße Machen wir 35 Pixel draus. Als Nächstes mache ich Buchstaben mithilfe der Texttransformation in Großbuchstaben Großbuchstaben, schaffen Sie auch etwas Abstand zwischen ihnen, indem Sie den Buchstabenabstand verwenden Stellen wir es auf vier Pixel ein und ändern dann die Farbe, machen es weiß. Schritt für Schritt. Unser Knopf wird schöner. Als Nächstes füge ich dem Text etwas Schatten hinzu. Dafür müssen wir eine Eigenschaft namens Text Shadow verwenden. Fügen wir hier die folgenden Werte ein. Wir brauchen Null, dann zehn Pixel, wieder zehn Pixel und Farbe Schwarz. Und auch die Art des gröberen Geräts ändern. Lass es uns klarstellen. In Ordnung. An diesem Punkt sind wir mit der Anpassung der Schaltfläche fertig. Es ist an der Zeit, weiterzumachen und mit der Umwandlung in 3D-Elemente zu beginnen . Zunächst müssen wir eine 3D-Umgebung für Bateson erstellen eine 3D-Umgebung für Bateson Und dafür müssen wir seinem übergeordneten Element eine Eigenschaft namens Perspektive zuweisen . Lassen Sie uns jedem Wert tausend Pixel zuweisen. Tatsächlich definiert die Perspektive, wie weit ein Element vom Benutzer entfernt ist. Jetzt müssen wir den Knopf entsprechend den X- und Z-Richtungen drehen . Weisen wir ihm also eine Transformationseigenschaft zu. Lassen Sie uns zunächst die Schaltfläche entlang der X-Achse drehen. Drehe x und füge deine 70 Grad ein. Wie Sie sehen können, ist die Schaltfläche gedreht, aber neben der X-Richtung müssen wir sie auch entlang der Z-Achse drehen Also müssen wir hier Z um den Wert 30 Grad drehen. In Ordnung? Das ist also die Position, die wir ihnen standardmäßig einräumen wollen. Jetzt müssen wir einem Quader die Form eines Knopfes geben. Quader ist eigentlich wie ein Würfel, aber er hat die Form eines Rechtecks Wir tun das, um es in noch mehr 3D-Elemente umzuwandeln . Ich möchte darauf hinweisen , dass dies kein ganz einfaches Ding sein wird . Wir werden einige fortgeschrittene Dinge von CSS verwenden. Ich empfehle also, konzentrierter zu sein und sich auf die Dinge zu konzentrieren, die wir zeigen werden. Wir werden also Vorher - und Nachher-Pseudoelemente verwenden. Wählen wir die Schaltfläche mit. Vor Pseudoelementen. Schreiben Sie btn vor Live-Content als leer und weisen ihm eine leere Zeichenfolge zu Definieren Sie dann die Breite als hundert Prozent und die Höhe als 15 Pixel. Um Elemente sichtbar zu machen, weisen wir ihr eine Hintergrundfarbe zu und lassen sie für eine Weile rot Ich meine, nur zur Demonstration. Außerdem müssen wir diese Position definieren, da sonst Höhe und Breite nicht darauf angewendet werden. Lassen Sie uns seine Position also als absolut festlegen. Also hier ist vor Pseudoelementen, wir müssen ihre Position ändern und sie irgendwo hier vor dem Button platzieren sie irgendwo hier vor dem Button Lassen Sie uns also die untere und die rechte Position auf Null setzen. Das Element hat seine Position geändert, aber das wollen wir nicht. Schließlich müssen wir es entlang der X-Achse um 90 Grad drehen . In Ordnung? Wie Sie sehen können, ist das Element zu diesem Zeitpunkt nicht mehr sichtbar. Der Grund dafür ist, dass es keine eigenen 3D-Umgebungen da es ein untergeordnetes Element von Button ist. Und es erbt keine Displays vom Container. Um das zu erreichen, haben wir in CSS eine Eigenschaft namens transform style, die Value Preserve 3D haben sollte, und der wir sie zuweisen müssen. Aber lassen Sie uns den Transformationsstil schreiben und ihm Conserve 3D zuweisen. Element wird schlecht angezeigt , wir haben hier ein anderes Problem. Standardmäßig ist der Transformationsursprung als Mittelpunkt festgelegt. Mit anderen Worten, Sie können sich vorstellen, dass die X-Achse in der Mitte von Elementen liegt. In diesem Fall wollen wir es nicht. Wir wollen Origin of Transform Bottom machen. Eigentlich weiß ich, dass dieses Zeug ein bisschen schwer zu verstehen ist, aber so funktioniert es. Wenn ich gereist bin, um das zu verstehen, ist es besser, diese Dinge selbst zu testen. Lassen Sie uns also weitermachen und den Transformationsursprung schreiben und ihn als unteren Wert festlegen. In Ordnung, also lass uns sehen, was wir wollen, dass es bekommt. Schritt für Schritt. Wir nehmen die Form eines Quaders an. Jetzt ändere ich die Hintergrundfarbe. Lassen Sie uns Farben aus einer linearen Verlaufskombination verwenden. Ich kopiere den zweiten und füge ihn hier ein. Wie Sie sehen können, sieht es jetzt viel besser aus. Also wie die Vorderseite, wir brauchen dasselbe. Auf der rechten Seite. Wir müssen es mit After-Pseudoelementen erstellen. Eigentlich werden wir ähnliche Eigenschaften benötigen. Lassen Sie uns also den gesamten Code duplizieren. Dann ändere vorher in, danach. Lassen Sie uns zunächst die Position ändern statt unten, wir brauchen hier oben. Sie sehen, dass Elemente hinter dem Button gelandet sind. Wir müssen es also entsprechend der Y-Achse mit einem Wert von -90 Grad drehen Y-Achse mit einem Wert von -90 Sie sehen also auf einen Blick, wo Elemente gelandet sind, es sieht nach Gewicht aus, aber der Grund ist , dass wir die Werte für Höhe und Breite ändern müssen. Bei After-Pseudoelementen müssen wir die Werte für Höhe und Breite vertauschen Die Breite beträgt 15 Pixel in der Höhe mit hundert Prozent. Okay, jetzt sind wir fast da. Das Einzige, was wir tun müssen, ist den Ursprung der Transformation zu ändern. In diesem Fall müssen wir es statt unten schaffen, richtig. In Ordnung, also endlich sind wir hier, mussten formen. Das Letzte, was seinen Stil angeht, ist die Änderung der Hintergrundfarbe von Pseudoelementen nach In diesem Fall nehmen wir die erste Farbe aus dem linearen Farbverlauf und fügen sie Ihnen ein. Okay, das war's mit Batson. Jetzt müssen wir dafür sorgen, dass es funktioniert. Ich meine, wir müssen einen Schwebeeffekt beim Schweben erzeugen. Ich werde es entlang der X- und Z-Achse drehen. Schreiben Sie also btn mit dem Mauszeiger und fügen Sie Ihre Transform ein. Drehe X mit Argumenten um 30 Grad. Dann müssen wir Z um Null Grad drehen. Und schließlich verwende ich Transition, um einen reibungslosen Effekt zu erzielen. Schreiben wir hier eine Transformation mit einer Dauer von 0,5 s. In Ordnung, lassen Sie uns den Mauszeiger über die Schaltfläche bewegen Und er sagte, dass wir eine wirklich tolle Wirkung haben. Okay, das ist alles über unsere Projekte. Wir haben einen coolen 3D-Button erstellt, und ich hoffe, er hat Ihnen gefallen. Danke fürs Zuschauen. Wir sehen uns im nächsten Tutorial.