Erstelle 30 Webprojekte mit HTML, CSS und JavaScript (2024)

1. Einführung: Hallo und willkommen zum Kurs. Ich hoffe, dass dies Ihr richtiger Kurs ist und Ihnen die Projekte gefallen werden , die wir während dieses Kurses entwickeln werden. Wie Sie bereits wissen, werden wir 30 verschiedene moderne und kreative Projekte erstellen . All diese Projekte werden auf der Grundlage der drei Kerntechnologien Frontend-Webentwicklung, HTML, CSS und Javascript erstellt der Grundlage der drei Kerntechnologien Frontend-Webentwicklung, HTML, . Ich möchte eine Sache erwähnen. Wie gesagt, die Projekte werden auf Basis von HTML, CSS und Javascript erstellt . Sie sollten ein gutes Verständnis von HTML und CSS sowie Grundkenntnisse in Javascript haben und CSS sowie Grundkenntnisse in Javascript , um den Vorlesungen folgen zu können und sich nicht verwirren zu lassen. Die Projekte werden voller verschiedener moderner Techniken und Tricks sein. Sie werden lernen, wie schöne Effekte und Animationen erstellen können, die Sie als Inspiration für die Entwicklung und Anpassung Ihres eigenen Portfolios verwenden können . Wie ich bereits erwähnt habe, werden wir 30 Projekte bauen. Es handelt sich um unabhängige Vorlagen, sodass Sie sie nicht der Reihe nach durchgehen müssen. Sie können jedes beliebige Projekt aus der Liste erstellen. Es liegt absolut an dir. Einige der Projekte sind einfach, aber Sie werden auch einige fortgeschrittene Projekte kennenlernen. Wir haben alle Stufen , die der Entwickler benötigt, in den Kurs aufgenommen . Wir werden Projekte wie Navigationsmenüs, Diashows, Website-Header, Karten, Web-Apps und andere interessante und kreative Projekte erstellen Ich bin sicher, dass Sie sie genießen werden. Ich denke, Sie werden viel Übung und Erfahrung in der Frontend-Webentwicklung sammeln, bei der HTML, CSS und Javascript ein Muss sind. Ich möchte noch etwas anderes erwähnen. Die Projekte wurden für eine besonders große Bildschirmgröße erstellt. Wenn Sie eine relativ kleinere Bildschirmgröße verwenden, empfehle ich, in den responsiven Modus zu wechseln. Stellen Sie die Breite und Höhe auf 1920 Pixel und 1080 Pixel und folgen Sie den Vorlesungen mit dieser Auflösung. Andernfalls sehen die Projekte auf kleineren Bildschirmen möglicherweise nicht gut aus. Und Sie werden Schwierigkeiten haben, den Vorlesungen zu folgen Bitte berücksichtigen Sie dies. In Ordnung, also lasst uns weitermachen und anfangen. 2. SET-UP: Hallo und willkommen zum Kurs. Wir freuen uns , dass Sie hier sind, und wir sind zuversichtlich, dass Sie diesen Kurs angenehm finden werden. Bevor wir uns mit unserem Projekt befassen, bereiten wir zunächst unser Arbeitsumfeld vor. Wenn Sie bereits eingerichtet und bereit sind, Code zu schreiben, können Sie dieses Video überspringen und direkt mit dem Projekt beginnen. Wenn Sie jedoch noch nicht vorbereitet sind , ist das völlig in Ordnung. werden wir Sie durch die Einrichtung einiger wichtiger Tools führen diesem Kurs werden wir Sie durch die Einrichtung einiger wichtiger Tools führen. Es gibt zwei Haupttools, die Sie benötigen einen modernen Webbrowser und einen Texteditor. Für unseren Webbrowser werde ich Google Chrome verwenden, aber ich empfehle auch Mozilla, Firefox. Sie haben diese Browser wahrscheinlich schon, aber lassen Sie uns kurz durchgehen, wie Sie sie herunterladen können Falls Sie Google Chrome verwenden möchten, besuchen Sie einfach diese URL und laden Sie den Browser herunter. Der Installationsvorgang ist unkompliziert, sodass wir nicht viel Zeit damit verbringen werden. Für Mozilla, Firefox, können Sie es über diese URL abrufen. Beide Links werden dieser Vorlesung der Einfachheit halber beigefügt . In Ordnung, lassen Sie uns jetzt über den Texteditor sprechen. Wir werden Visual Studio Code verwenden , einen der besten Texteditoren, die heute verfügbar sind. Sie können jedoch gerne Ihren bevorzugten Texteditor verwenden , falls Sie einen haben. Es liegt immer noch ganz bei Ihnen. Ich empfehle, Visual Studio-Code eine zu geben. Versuchen Sie, Visual Studio-Code herunterzuladen Besuchen Sie diese Website und wählen Sie die Version für Ihr Betriebssystem, Windows, Mac oder Linux. Der Installationsvorgang für Visual Studio-Code ist ebenfalls unkompliziert. Sie sollten keine Probleme haben. Sobald Sie diese beiden Tools installiert haben, können Sie mit dem Kurs beginnen. Lass uns gleich eintauchen. 3. Projekt – Spotify Musik-App – Teil 1: Hallo und willkommen zu unserem allerersten Projekt in diesem Kurs. In diesem Video werden wir damit beginnen, eine Spotify-Musik-App mit HTML, CSS und Javascript zu erstellen . Bevor wir direkt mit dem Aufbau des Projekts beginnen, werde ich es beschreiben. Wie Sie sehen können, haben wir hier eine Spotify-Musik-App, die aus verschiedenen Teilen besteht. Auf der oberen Seite der Anwendung sehen Sie einige Symbole mit dem Namen der Anwendung. Dann haben wir hier ein Cover, das uns den Songnamen und auch den Künstler zeigt. Unten sehen Sie die Songdetails und den Songnamen eines Künstlers. Dann haben wir einen Fortschrittsbalken mit der aktuellen Uhrzeit des Songs und der Dauer des Songs. Dann kannst du hier die Steuerung des Players sehen. Unten haben wir hier einige Icons mit etwas Text. Wenn ich auf die Play-Schaltfläche klicke, wird die Musik abgespielt. Wie Sie sehen können, werden der Fortschrittsbalken sowie die aktuelle Uhrzeit des Songs aktualisiert. Wenn ich dann erneut auf die Play-Schaltfläche klicke, wird die Musik nicht mehr abgespielt. Wir haben hier die Schaltflächen Weiter und Zurück. Wenn ich sie anklicke, wechseln wir zum nächsten und vorherigen Song. Alles funktioniert perfekt. Alles klar, wenn ich also irgendwo auf den Fortschrittsbalken klicke, wird die Musik zurückgespult und auch die aktuelle Uhrzeit wird aktualisiert In Ordnung, also funktioniert alles perfekt. Du kannst hier nette und coole Schatteneffekte sehen. Es heißt CSS New Morphism. In diesem Tutorial erfahren Sie, wie Sie die neuen CSS-Effekte für Morphismus erstellen Okay, lass uns anfangen. Ich habe auf dem Desktop einen neuen Ordner namens Spotify Music App erstellt , in dem ich einen weiteren Ordner habe. Musik Es beinhaltet drei verschiedene Songs. Lassen Sie uns diesen Ordner im VS-Code öffnen und dann unsere Arbeitsdateien für HDML erstellen Dann brauchen wir eine Datei für CSS. Außerdem werde ich eine Datei für Java-Skript erstellen. Lassen Sie uns die HTML-Datei öffnen und die grundlegenden HTML-Dokumente erstellen. Ich werde hier ein Ausrufezeichen platzieren dann oben oder Enter drücken. Los geht's Wir haben hier die grundlegende HTML-Struktur, die grundlegenden HTML-Elemente. Das erste, was ich tun werde, ist den Titel zu ändern. Es wird Spotify sein. Music Up, dann werde ich die CSS- und Chavs-Dateien verknüpfen. Ich werde das Link-Tag öffnen. Dann werde ich hier den Pfad der Datei angeben. Als Nächstes öffne ich das Script-Tag. In das Quellattribut werde ich den endgültigen Namen Script JS einfügen. Dann brauchen wir ein Attribut namens defer. Dieses Attribut weist den Browser an, das Skript auszuführen, nachdem der HTML-Inhalt übergeben wurde Das bedeutet, dass das Skript während der Übergabe des HTML-Inhalts asynchron geladen wird, das Parsen von HTML jedoch nicht unterbrochen Tatsächlich können Sie die Esk-Datei von hier aus verlinken. Ich meine, du kannst das Skript-Tag direkt über dem schließenden Body-Tag öffnen und dann hier das Quell-Alphabut angeben Aber in diesem Fall werde ich diese Technik verwenden. Ordnung, danach öffnen wir das Projekt im Browser über den Live-Server Sie können entweder hier klicken oder auf die Schaltfläche klicken. Gehen Sie live. Unser Projekt ist live im Browser. Ich werde den Browser und den Editor so nebeneinander platzieren . Dann werde ich auch andere Links einfügen. Wir werden in diesem Projekt Telefon-Som-Symbole verwenden , und ich werde auch Google-Telefone verwenden. Lass uns weitermachen und nach Phone Awesome CDN JS suchen. Dann klicke ich hier, um die URL zu kopieren. Als Nächstes öffne ich das Link-Tag und füge dann das kopierte CDM hier in das H-Referenzattribut ein. Ordnung, danach werde ich nach Google-Telefonen suchen Lass uns die Website besuchen. Ich werde nach Telefonen suchen, die Delicious heißen. Handdrohne. Lass uns auf das Telefon klicken. Dann brauchen wir Telefone. Danach werde ich andere Telefone auswählen. Es wird ein negatives Signal sein. Wir brauchen hier ein Negativ. Lass uns auf Get Phone klicken. Dann brauchen wir hier den Ambit-Code. Wir haben beide Telefone. Ich werde diese Links kopieren und sie hier im Head-Element platzieren. In Ordnung, jetzt können wir anfangen, das HTML-Markup zu schreiben. Ich werde eine Entwicklung erstellen , die der Container sein wird, sie wird den gesamten Inhalt umschließen Als Nächstes haben wir eine weitere Entwicklung mit dem Klassennamen Player , die ein paar verschiedene Teile beinhalten wird. Der erste Teil wird „Player Top“ sein, ich meine die Oberseite des Players, in die ich einen Button mit PTN einfügen werde Button mit PTN einfügen Außerdem brauchen wir einen engen Knopf. Dann füge ich in das Button-Element die Schrift Nosomicon Wir brauchen I-Elemente mit den Klassen, eine durchgehende Zeile übrig Dann füge ich Ihre Fensterelemente mit dem Text Spotify Music App ein. Als nächstes brauchen wir ein anderes Telefon, ein Symbol. Eigentlich werde ich diesen Button von hier kopieren. Lass es uns hier einfügen. Ich werde das Symbol ändern. In diesem Fall benötigen wir eine durchgehende Ellipse. Hier haben wir zwei Muster mit dem Text. Als Nächstes werde ich den Körper des Spielers erstellen. Ich bin im nächsten Teil unseres Players. Ich öffne das Tag mit dem Klassennamen Spielerkörper. In dem ich ein anderes Div mit dem Klassennamen Current Song öffnen werde . Dann müssen wir ein Cover erstellen. Wie Sie sich erinnern, besteht das Cover aus zwei Spannelementen. Der erste wird der Künstler sein. Setzen wir uns hier hin, King Canyon. Dann mache ich einen weiteren Span auf und es wird der Liedname Malland sein Eigentlich sind das ein paar komische Zufallslieder. Ich habe sie ausgewählt, weil sie urheberrechtlich frei sind. Und das habe ich getan, um jegliche Urheberrechtsansprüche zu vermeiden. Wenn du sie nicht magst , ist das kein Problem, achte nicht auf diese Songs. In Ordnung, als Nächstes werde ich Song-Informationen erstellen. Wir brauchen Entwicklungen mit dem Klassennamen und den Songinformationen. Dann brauchen wir noch einen, es werden Songdetails sein. Dann füge ich deine Wirbelsäulenelemente mit dem Klassennamen ein. Name des Liedes. Es wird Holand sein. Lass uns diesen Code duplizieren, den Klassennamen ändern. Es wird ein Lied. Eigentlich keine Details, aber Künstler. Und wir brauchen hier King Canyon. In Ordnung. Danach füge ich dein Phonosomicon ein. Es wird ein solides Herz sein. Dann werde ich mich um den Fortschritt des Songs kümmern . Ich meine, ich werde für Entwicklung sorgen. Es wird die Dauer eines Songs sein , in die ich einen weiteren einfügen werde . Es wird Songtime sein. Dann haben wir Song Progress. Dann gehe ich nach Odio. Wir brauchen den Ordnernamen Music, in dem ich den ersten Song auswählen werde, diesen Dann füge ich hier den Klassennamen Odio hinzu. Okay. Danach werde ich die aktuelle Uhrzeit und die Dauer des Songs ermitteln. Ich werde hier Entwicklungen mit dem Klassennamen Time einfügen dem Klassennamen Time , in die ich zwei Span-Elemente einfügen werde. Im Moment werde ich Null einfügen. Dann wieder Null. Lassen Sie uns diese Elemente duplizieren. Danach müssen wir uns um die Kontrollen kümmern. Ich werde Ihre Entwicklung mit den Klassennamen Controls einfügen . Dann werde ich deinen Button mit der Klasse einfügen, eigentlich können wir uns den Button von hier aus holen. Ich werde die Klassennamen für das Telefon ändern, als Symbol, ohne Zufallswiedergabe Lassen Sie uns diesen Button fünfmal duplizieren. Eigentlich viermal, weil wir insgesamt fünf verschiedene Knöpfe benötigen. Der zweite wird der Button für den vorherigen Song sein. Ich werde hier eine neue Klasse vor PTN hinzufügen. die Elemente angeht, brauchen wir solide Rückwärtsbewegungen Dann haben wir Button. Fügen wir hier den Klassennamen hinzu, spielen Sie. Umfragen ändern auch die Elemente. Es wird ein solider FA sein. Spiel. Als nächstes haben wir Boson für das nächste Lied, das wir hier brauchen. Als Nächstes PTN. Was das Element angeht, es wird ein solider FA-Stürmer sein Schließlich werde ich hier das Element ändern, es wird ein solides FA sein. Wiederhole. In Ordnung, wie Sie sehen können, werden hier alle fünf Symbole angezeigt. Als Nächstes nehme ich hier die Unterseite der Anwendung. Ich meine, wir müssen diese beiden Symbole mit dem Text erstellen. Lass uns weitermachen und die Entwicklung mit dem Klassenspieler vorantreiben. Sicherlich brauchen wir einen Player , in den ich I-Elemente einfügen werde. Es wird ein solides A sein. Musik Dann füge ich deine Span-Elemente mit dem Text ein. Höre Spotify. Musik Schließlich brauchen wir noch ein weiteres Element mit den Klassen, eine solide A-Liste. In Ordnung, lassen Sie uns über das HTML-Markup sprechen. Wir haben hier viele verschiedene Elemente. Hoffentlich ist alles richtig. Das werden wir während des gesamten Projekts sehen. In Ordnung, das ist eine Seite mit dem HTML-Markup. Alle Elemente sind erstellt, und jetzt müssen wir damit beginnen, das Projekt entsprechend zu gestalten Fahren wir mit der nächsten Vorlesung fort. 4. Projekt – Spotify Musik-App – Teil 2: Ordnung, in der letzten Lektion haben wir das HTML-Markup für den Player erstellt, und jetzt müssen wir etwas CSS schreiben Als Erstes werde ich einige Standardstile für jedes Element erstellen Ich werde jedes Element mit einem Sternchen auswählen. Dann werde ich Rand und Abstand definieren. Lassen Sie uns beide auf Null setzen. Als Nächstes definiere ich die Eigenschaft zur Boxgröße. Und sie wird der Border Box entsprechen. Das bedeutet, dass alle Elemente innerhalb Höhe die Polsterung und den Rand enthalten Danach werde ich die Linie zu keiner Linie aufteilen. Lassen Sie uns auch die Telefonfamilie definieren. Es werden die Telefone sein, die wir von Google-Telefonen ausgewählt haben. Es ist sinica negativ sensorisch. In Ordnung. Wie Sie sehen können, werden alle Standardkacheln auf die Elemente angewendet. Als Nächstes definiere ich die Telefongröße des HTML-Elements. Während dieses Projekts werde ich Ram als Maßeinheit verwenden. Im Moment entspricht ein M 16 Pixeln, da die Telefongröße des HTML-Elements standardmäßig 16 Pixeln entspricht. Ich möchte einen Ram in zehn Pixel umwandeln. Daher müssen wir die Telefongröße des HTML-Elements verringern . Stellen wir es auf 62,5% ein. In diesem Fall entspricht ein M zehn Pixeln Wie Sie sehen können, wurde die Größe der Elemente kleiner. Danach werde ich den Container entfernen, der den gesamten Inhalt unseres Projekts umschließt den gesamten Inhalt unseres Projekts Lassen Sie uns zunächst mit und Höhe definieren. Die Breite wird 100% betragen. Was die Höhe angeht, werde ich sie auf die Höhe des Ansichtsfensters von 100 einstellen Das bedeutet, dass es 100% der Höhe des Aussichtspunkts einnimmt 100% der Höhe des Aussichtspunkts einnimmt Als Nächstes ändere ich die Hintergrundfarbe. Ich werde einen linearen Farbverlauf verwenden. Deshalb brauchen wir hier eine Hintergrundrunde und keine Hintergrundfarbe, oder Sie können ein Hintergrundbild verwenden. Lassen Sie uns den linearen Farbverlauf verwenden. Die erste Farbe wird 313131 sein. Für die zweite Farbe werde ich 151515 verwenden Okay. Also, wie Sie sehen können, haben wir hier den Gradienteneffekt. Als Nächstes werde ich den Inhalt in der Mitte der Seite platzieren . Ich werde das mit CSS Flex Box machen. Lassen Sie uns das Display auf Flex setzen. Dann brauchen wir das Justify Content Center und auch ein Line Item Center. Wie Sie sehen können, wird der Inhalt in der Mitte platziert. Danach können wir weitermachen und den Spieler auswählen , der innerhalb der Höhe definiert ist. Die Breite wird 35 Ram betragen. Dann werde ich die Höhe auf 700 Ram einstellen. Ändere auch eigentlich nicht 700, sondern 70 m. Dann werde ich den Hintergrund ändern. Lassen Sie uns wieder die lineare Gradientenfunktion verwenden. Die Richtung des Farbübergangs wird nach rechts sein. Dann werde ich die Farben spezifizieren. Der erste wird 313234 sein. Was die zweite Farbe angeht, werde ich sie auf 223031 einstellen Okay, hier haben wir den Player. Ich werde einen Schatteneffekt erzeugen. Lass uns Box Shadow verwenden. Die Werte werden Null sein. Es gibt den horizontalen Versatz des Schattens an. In diesem Fall ist er Null, was bedeutet, dass es keinen horizontalen Versatz gibt. Der Schatten wird sich direkt hinter dem Element befinden. Als Nächstes übergebe ich einen Ram. Dieser Wert gibt den vertikalen Abstand des Schattens an. Er ist auf einen Ram eingestellt, was bedeutet, dass der Schatten um einen Abstand nach unten verschoben wird , der der Schriftgröße des Elements multipliziert mit eins entspricht Schriftgröße des Elements multipliziert mit Der nächste Wert wird fünf Ram sein. Dieser Wert definiert den Unschärferadius des Schattens. Ein größerer Wert erzeugt einen verschwommeneren Schatteneffekt. Und schließlich brauchen wir die Farbe. Es wird schwarze Farbe mit einer Opazität von 0,4 sein. Okay, hier haben wir den Schatteneffekt , der meiner Meinung nach ziemlich gut aussieht Als Nächstes werde ich den Spieler mithilfe des Randradius abrunden Stellen wir es auf den Ram ein. Dann werde ich den Inhalt mit der Flexbox ausrichten. Ich werde die Elemente vertikal platzieren. Zuallererst benötigen wir Display Flex. Dann müssen wir die Richtung ändern, in die es gehen wird. Der nächste Satz enthält drei Widder auf allen vier Seiten. Okay, das war's jetzt für den Spieler. Als Nächstes werde ich mich um die Oberseite des Players kümmern , also werde ich die Oberseite des Players auswählen. Lassen Sie uns die Breite auf 100% setzen. Dann werde ich die Elemente mit Flex Book ausrichten . Wir brauchen ein Display. Dann werde ich mit Justify Content etwas Abstand zwischen den Flex-Elementen schaffen zwischen den Flex-Elementen . Abstand zwischen. Schließlich müssen wir die Elemente in der Mitte vertikal ausrichten. Okay, die Elemente sind also ausgerichtet. Als Nächstes werde ich mich um die Knöpfe kümmern. Lass uns weitermachen und Player BTN auswählen. Es ist ein allgemeiner Klassenname für jede Schaltfläche im Projekt. Definieren wir zunächst den Bereich innerhalb der Höhe. Ich werde mit 24 Rams spielen, es wird auch Form sein. Dann werde ich Border 2.2 durchgehend einstellen. Und die Farbe wird RGBA sein. Wir brauchen hier die weiße Farbe, 25053 mal, und dann wird die Deckkraft 0,1 sein. Danach werde ich die Schaltfläche mit einem Randradius umgeben Stellen wir es auf 50% Dann ändere ich die Hintergrundfarbe Stellen wir es auf zwei ein, B auf C auf E. Danach werde ich die Farbe ändern. Setzen wir die Farbe auf 89b, die wir benötigen, um den Schatteneffekt zu erzeugen Wie ich zu Beginn des Tutorials sagte, werden wir CSS und neue Morphismuseffekte verwenden und es mit Box Shadow erstellen Ich werde hier ein paar verschiedene Werte einfügen und dann erklären, was sie bewirken Ich gebe hier 0,5 Ram weiter, dann wieder 0,5 Ram, dann brauchen wir zwei Ram, dann -0,1 Ram Dann brauchen wir Farbe. Es wird RGB sein, eine schwarze Farbe mit einer Opazität 0,5. Das ist der erste Schatten Als nächstes brauchen wir den zweiten. Es wird -0,4 Ram sein. Dann wieder -0,4 Ram. Dann werden wir zwei Ram haben, -0,1 Ram als Farbe Ich werde weiße Farbe verwenden. Die Deckkraft wird 0,2 betragen. Okay, wie Sie sehen können, haben wir hier diesen schönen und coolen Schatteneffekt Lassen Sie mich erklären, was diese Werte bewirken. Dies ist der erste Teil des Schattens. 0,5 Ram ist der horizontale Versatz des Schattens. Das bedeutet, dass der Schatten um das 0,5-fache der Schriftgröße des Elements nach rechts verschoben wird . Als nächstes haben wir wieder 0,5. Es ist ein vertikaler Versatz des Schattens. Das bedeutet, dass der Schatten um das 0,5-fache der Schriftgröße des Elements nach unten verschoben wird 0,5-fache der Schriftgröße des Elements Als Nächstes haben wir zwei Ram, und das ist ein Unschärferadius des Schattens Dies deutet auf einen relativ großen Unschärfeeffekt hin (-0,1 Ram). Es ist ein Ausbreitungsradius des Schattens. Ein negativer Wert führt dazu, dass sich der Schatten zusammenzieht. Und dann haben wir die Farbe. Wir haben wieder den zweiten Teil des Schattens, den ersten Wert -0,4 Ram Es ist ein horizontaler Versatz des Schattens. Dies ist ein negativer Wert und bedeutet, dass der Schatten um das 0,4-fache der Schriftgröße des Elements nach links verschoben wird . Als nächstes haben wir den vertikalen Versatz des Schattens. Es ist wieder ein negativer Wert. Dann haben wir den Unschärferadius und dann den Streuradius. Es ist auf -0,1 Ram eingestellt. Es ist ein negativer Wert und bewirkt , dass sich der Schatten zusammenzieht Ordnung, also am Ende des Tages haben wir diesen schönen und coolen Effekt. Diese Art von Effekt in CSS wird CSS New Morphism genannt. Es wird mithilfe von Kastenschatten und helldunklen Hintergrundfarben implementiert , um die Illusion zu erzeugen , dass Elemente leicht aus dem Hintergrund herausragen Schließlich werde ich den Cursorzeiger hinzufügen. In Ordnung. Danach werde ich den Klick-Effekt für die Buttons erstellen . Ich wähle Player PTN, gefolgt von den Actives mit der Klasse Ich werde Transform Translate Y mit dem Wert 0.2 Ram verwenden Translate Y mit dem Wert 0.2 Ram Sobald wir auf die Schaltfläche klicken, erhalten wir diesen schönen und coolen Klickeffekt. Danach werde ich mich um dieses Panel auf der Oberseite des Players kümmern Oberseite des Players Lassen Sie uns weitermachen und Player Top auswählen, gefolgt vom Panel Lassen Sie uns weitermachen und das Telefon vergrößern. Es wird 1,3 sein und dann die Farbe ändern. Ich werde diese Farbe hier verwenden. 89b. In Ordnung, das ist ungefähr auf der Oberseite Gehen wir zum Körper des Spielers über. Lassen Sie uns also weitermachen und den Körper des Spielers auswählen. Zuallererst werde ich innerhalb von Höhen definieren. Die Breite wird 100% betragen. Was die Höhe angeht, werde ich 250, 5% einstellen . Dann werde ich die Elemente mit der Flexbox ausrichten. Wir brauchen Display Flex. Dann platziere ich den Inhalt in der Mitte. Wir brauchen Justify Content Center und Align Items Center. Ordnung, in der Mitte haben wir hier den Songnamen und auch den Künstler des Songs. Wir werden hier das Cover erstellen. Ich meine diesen Teil. Lass uns weitermachen und den aktuellen Song auswählen. Lassen Sie uns innerhalb der Höhe definieren. Ich werde beide auf 18 Ram setzen. Dann werde ich die Grenze wechseln. Es wird 0,5 Ram solide sein. Und die Farbe wird RGP sein, eine weiße Farbe mit einer Opazität 0,15. Dann mache ich das Element abgerundet Ich werde den Randradius auf 50% setzen. Schließlich werden wir denselben neuen Morphis-Effekt mit Box Shadow erzeugen denselben neuen Morphis-Effekt Eigentlich nehme ich Box Shadow von hier aus und ändere dann einfach die Werte, die wir hier benötigen. 0,6 Ram, dann vier Ram, dann brauchen wir hier -0.1 Ram als Farbe Es wird RGB sein, eine schwarze Farbe mit der Opazität 0,9 Wie für den zweiten Teil benötigen wir hier -0,6 Ram, dann vier Ram Dann brauchen wir Punkt -0.2 Was die Farbe angeht, brauchen wir weiße Farbe mit der Opazität 0,4 Wie Sie sehen können, haben wir hier diesen schönen und Danach wähle ich Cover aus. Ich befinde mich im inneren Teil dieses Elements. Stellen wir die Höhe auf 100% ein. Dann ändere ich die Hintergrundfarbe. Es wird 101112 sein. Außerdem müssen wir einen Grenzradius von 50% haben. Okay, danach kümmere ich mich um die Span-Elemente Lassen Sie uns weitermachen und Farbe mit Span auswählen. Lass uns die Telefonfamilie ändern. In diesem Fall verwende ich das zweite Telefon , Delicious Hand, es wird kursiv sein Dann definiere ich die Position für beide Span-Elemente Es wird absolut sein. Außerdem müssen wir die Anzeigeeigenschaft ändern . Es wird blockiert. Ordnung, danach werde ich jedes Spin-Element separat anpassen. Lassen Sie uns also weitermachen und das erste auswählen. Wir brauchen Deckung, gefolgt vom Spin-Element. Ich werde Child Selector verwenden. Wir brauchen das erste Spin-Element. Lass uns die Farbe ändern. Es wird D sein. Dann ändere ich die Telefongröße. Lassen Sie uns 30 bis 1,6 sagen. Außerdem werde ich die Position ändern. Die oberste Position wird 20% betragen . Was die linke Position angeht, werde ich auf 30% setzen . Eigentlich brauchen wir die relative Position für das übergeordnete Element, brauchen wir die relative Position für das übergeordnete Element weil wir die Elemente entsprechend den übergeordneten Elementen ausrichten müssen . Lassen Sie uns die Position relativ zum aktuellen Song festlegen. Wie Sie jetzt sehen können, ist das Element korrekt platziert. Lass uns weitermachen und diesen Code duplizieren. Ändere die Kinderauswahl, wir brauchen hier zwei, dann wird die Farbe weiß sein. Die Telefongröße wird 2,5 Ram betragen. Dann müssen wir uns mit einem Wert von 35% positionieren. Was die linke Position angeht, werde ich sie auf 20% setzen Außerdem füge ich hinzu, es werden zehn Ram sein. Schließlich müssen wir die Texturlinie in der Mitte haben. In Ordnung, das Cover sieht ziemlich gut aus. Alles, was ich tun werde, ist leicht zu rotieren. Dieses Element, das ich hier hinzufügen werde, transformiere Rotation Z mit dem Wert -15 Grad. Ordnung, lassen Sie uns als Nächstes über das Cover sprechen, wir müssen hier den Song im Herbst nehmen Lass uns das Lied im Herbst auswählen. Definieren Sie zunächst die Breite. Es wird 100% sein Dann müssen wir die Elemente mit Flex Book ausrichten. Ich setze die Anzeige auf dann schaffe ich etwas Abstand zwischen den Flex-Elementen, um den inhaltlichen Abstand dazwischen zu rechtfertigen. Außerdem müssen wir die Elemente zentriert ausrichten, damit das Element vertikal zentriert wird. Und dann werde ich mit dem Rand etwas Platz am unteren Rand schaffen . Untere drei. Ordnung, danach wähle ich die Songdetails aus. Lassen Sie uns die Richtung der Ausrichtung der Elemente mithilfe von Flexbooks ändern . Die Flex-Richtung muss die Spalte sein. Wie Sie jetzt sehen können, sind die Songdetails vertikal übereinander angeordnet. Als Nächstes wähle ich den Songnamen aus. Stellen wir die Telefongröße auf zwei ein. Lauf dann brauchen wir Farbe. Es wird weiß sein. Außerdem werde ich das Telefon leichter machen. Lassen Sie uns das Telefongewicht auf 300 setzen. Okay. nehme ich dich vom Liederkünstler. Und lassen Sie uns diesen Code tatsächlich duplizieren. Wir brauchen deinen Songkünstler. Ich werde die Schriftgröße auf 1.2 Ram setzen. Dann wird die Farbe hier diese Farbe sein. Was die Schriftstärke angeht, werde ich sie loswerden. In Ordnung, lassen Sie uns über die Songdetails sprechen. Als Nächstes kümmern wir uns um das Herz, dieses Telefon ist auch hier. Lassen Sie uns also weitermachen und Song Info auswählen, gefolgt von den Elementen. Wir brauchen. Schriftgröße auf zwei M. Dann ändere ich den Hintergrund. Lassen Sie uns einen Hintergrund mit linearem Farbverlauf verwenden. Wenn wir uns das fertige Projekt ansehen, werden Sie feststellen, dass wir hier einen Hintergrund mit linearem Farbverlauf haben . Ich werde die Richtung der Farbe ändern. Der Übergang wird aus zwei Rechten bestehen. Dann brauchen wir Farben. Der erste wird 37 sein. Für den zweiten werde ich 62 BC 68 verwenden. Im Moment ist der Hintergrund des Phontosomikons geändert, und tatsächlich müssen wir die Farbe des Phonosomikons selbst ändern die Farbe des Dafür werde ich die folgenden Eigenschaften verwenden. Wir brauchen einen Webket-Hintergrundclip, es wird Text sein. Außerdem werde ich die Webket-Textfarbe mit Wert, transparent, verwenden . Okay. Jetzt ist der Hintergrund des Telefonsymbols geändert und es sieht ziemlich gut aus. Danach werde ich mich um die Zeit kümmern. Lassen Sie uns weitermachen und einen Zeitpunkt auswählen. Lassen Sie uns mit auf 100% setzen Dann setze ich die Höhe auf 0,5. Die Hintergrundfarbe wird 000d sein. Als Nächstes stelle ich den Grenzradius auf 2,5 Ram ein. Außerdem müssen wir mit einem Rand etwas Platz am unteren Rand schaffen , am unteren Rand einen Ram. Dann müssen wir einige Schatteneffekte erzeugen. Stellen wir Shadow 2.2 Ram ein, dann 0.2 Ram, dann wieder 0.2 Ram. Mit dem Opco 0.1 wird die Farbe RGBA-Weiß sein. Ändern Sie abschließend den Coursked-Zeiger Ordnung, wie Sie sehen können, der Fortschrittsbalken erstellt Als Nächstes müssen wir uns um den versunkenen Fortschritt kümmern . Wählen wir dieses Element aus. Zuallererst werde ich die Position ändern. Es wird absolut sein. Dann müssen wir die übergeordneten Elemente relativ positionieren . Dann benötigen wir die Eigenschaften oben und links, die beide gleich Null sind. Ändere die Breite, sie wird 30% sein. Dann brauchen wir eine Höhe, die 100% sein wird . Dann müssen wir den Hintergrund ändern. Lassen Sie uns wieder die lineare Gradientenfunktion verwenden. Eigentlich benötigen wir dieselben Werte aus dieser Funktion. Lass uns sie schnappen und hier einfügen. Wie Sie sehen können, haben wir hier den Fortschritt des Songs. Das einzige, was ich tun muss, ist, es mithilfe des Randradius abzurunden. Lass es uns auf 2,5 laufen lassen. In Ordnung, lassen Sie uns darüber reden, einige Fortschritte. Als Nächstes müssen wir uns um die Zeit kümmern. Wählen wir dieses Element aus. Ich setze die Breite auf 100%. Dann richte ich die Elemente mithilfe von Flexbooks aus. Wir müssen Flex anzeigen und Justify Content etwas Abstand zwischen den Flex-Elementen schaffen mithilfe von Justify Content etwas Abstand zwischen den Flex-Elementen schaffen. Auch ein Leerzeichen dazwischen. Lassen Sie uns mit dem Rand etwas Platz am unteren Rand schaffen. Untere drei, lauf okay, die Zeit und die Dauer des Songs sind aufeinander abgestimmt. Als Nächstes müssen wir uns um diese Pan-Elemente kümmern . Wählen Sie die Zeit, gefolgt von der Pfanne. Ich werde das Telefon vergrößern. Sagen wir 21 Punkte Ram. Was die Farbe angeht, werde ich die graue Farbe verwenden. Dieser hier. Wie Sie sehen können, sind die Songzeit und die Songdauer angepasst. Danach werde ich mich um die Steuerung kümmern , diese Muster hier. Lassen Sie uns weitermachen und die Steuerelemente auswählen. Ich setze auf 100%. Dann müssen wir sie mit der Flexbox ausrichten. Lassen Sie uns dieses Spiel auf Flex setzen und etwas Platz schaffen, indem wir den inhaltlichen Abstand dazwischen rechtfertigen. Außerdem müssen wir die Elemente in der Mitte ausrichten. Wie Sie sehen können, sind die Schaltflächen ausgerichtet. Danach werde ich die Schaltfläche „Pose abspielen“ anpassen. Wie Sie sehen können, ist es anders. Lass uns weitermachen und Pose abspielen auswählen. Ich werde die Höhe von Witten auf fünf Fram setzen , weil sie etwas größer sein wird als die anderen Tasten Lassen Sie uns die Höhe auf fünf Fram setzen. Dann werde ich den Hintergrund ändern. Eigentlich brauchen wir die gleichen Werte. Schauen wir uns die lineare Bewertungsfunktion an. Wie Sie sehen können, sieht der Button gut aus. Ich werde die Farbe des Symbols ändern. Es wird weiß sein. Schließlich müssen wir das Feld Anzeigen ändern. Eigentlich werde ich mir die Box Shadow von hier holen. Lassen Sie uns die Werte ändern, die wir benötigen 0,5 Ram, dann setze ich diesen Wert auf zwei Ram, 0,1 Ram. Die Deckkraft der Farbe wird 0,8 sein . Als Nächstes werden wir hier 0,82 haben . Ich werde diesen Wert ändern, er wird 0,1 Ram sein Eigentlich brauchen wir hier den Boxschatten und nicht die Größe der Box. Okay, für den Play-Button haben wir einen anderen Schatten, weil der Button etwas größer ist. Als Nächstes werde ich mich um die Fußzeile des Players kümmern . Lassen Sie uns also weitermachen und die Player-Fußzeile auf 100% setzen auswählen . Als Nächstes richte ich die Elemente mithilfe von Flex Wir müssen Flex anzeigen und dann inhaltlichen Abstand zwischen den Elementen begründen, weil wir Platz zwischen den Elementen schaffen müssen Dann setze ich die Ausrichtung der Elemente in die Mitte. Und schließlich brauchen wir Margin Top O. Okay? Um klar zu verstehen, warum wir diese Eigenschaft benötigen, lassen Sie uns das auskommentieren. Wie Sie sehen können, müssen wir die Fußzeile nach unten platzieren. Deshalb verwende ich hier Margin Top, Auto. Wir benötigen dieses Element , weil wir den Inhalt des gesamten Players mit Flexbox aufeinander abgestimmt haben den Inhalt des gesamten Players mit Flexbox Wir benötigen den oberen Rand, um die Fußzeile unten zu platzieren. Okay, danach werde ich mich um die Symbole im Fuß kümmern die Symbole im Fuß Lassen Sie uns Elemente auswählen und das Telefon vergrößern. Es wird 1,8 RAM sein und auch die Farbe ändern. Lass uns hier diese graue Farbe verwenden. Die Icons sehen gut aus. Danach werde ich mich um dieses Panelelement kümmern. Lassen Sie uns diesen Code duplizieren, den Selektor ändern, den wir hier brauchen, um Elemente zu verschieben. Die Schriftgröße wird 1,2 e sein. Was die Farbe angeht, brauchen wir hier dieselbe Farbe Ordnung, der Player ist personalisiert, er sieht ziemlich gut aus. Und jetzt müssen wir dafür sorgen, dass es funktioniert. Lassen Sie uns dazu mit der nächsten Vorlesung fortfahren. 5. Projekt – Spotify Musik-App – Teil 3: Ordnung, sobald der Player angepasst und gestylt ist, müssen wir unserem Projekt jetzt etwas Javascript hinzufügen Als erstes werde ich ein Array erstellen, in dem wir die Daten der Songs speichern werden Ich werde die Variable erstellen und sie Songdaten nennen. Es wird ein Array sein. Ich werde hier drei verschiedene Objekte einfügen. Jedes Objekt wird den Namen des Songs, den Künstler und auch die Quelle der Audiodatei enthalten . Ich werde ein Objekt einfügen , in dem ich drei verschiedene Eigenschaften erstellen werde. Der erste wird der Name sein, ich werde hier Holland hinzufügen. Dann werden wir Artist haben, es wird King Canyon sein. Dann haben wir die Quell-Eigenschaft, in die ich die Quelle des Audiophilen einfüge, das wir hier brauchen, Mahu Land, dann Eigentlich ist es der Name des Songs. Wenn wir den Musikordner überprüfen, werden Sie feststellen, dass wir hier diesen Namen haben. Ich werde die Erweiterung des Songs beibehalten. Es wird MP drei sein. Okay, schauen wir uns das erste Objekt an. Wir werden drei davon haben. Wir duplizieren es zweimal. Der Name des zweiten Songs wird ungefähr so lauten wie bei einem Verkauf. Dann wird der Künstler stiller Partner sein. Auch das sind ein paar komische Songs. Als Nächstes brauchen wir die Quelle, und es wird Para oder Psi Silent Partner sein . Was das dritte Lied angeht, wird es die Wahrheit sein, es ist der Name. Dann haben wir den Künstler und es wird Domini sein. Schließlich brauchen wir den Quellkünstler Domini. In Ordnung, also lassen Sie uns über unsere Songdaten sprechen. Als Nächstes werde ich ein paar verschiedene Variablen erstellen. Wir müssen viele verschiedene Elemente auswählen. Ich werde die erste Variable erstellen, es wird ein Container sein. Lassen Sie uns weitermachen und den Container mithilfe Methode zur Auswahl der Dokumentenabfrage auswählen. Lassen Sie uns hier den Klassennamen Container angeben. Insgesamt werden wir hier 12 verschiedene Variablen und Elemente haben . Ich werde diese Codezeile 11 Mal duplizieren. Okay, lassen Sie uns weitermachen und die Namen der Variablen und auch die Klassennamen ändern . Der zweite wird der Liedname sein. Wir brauchen deinen Klassennamen. Dann lassen wir den Songkünstler wechseln. Wir brauchen den Liederkünstler. Als Nächstes werden wir das Cover haben, den Klassennamen ändern. Dann wird die nächste Variable Play Pulse Bottom sein. Nennen wir die Variable Play Pulse BTN. Dann sagte ich hier, Klassenname, spiel Dichter Die Variable wird der vorherige untere Wert sein. Nennen wir es Pre BTN. Und wähle die Variable aus, ich meine die Elemente mit dem Klassennamen Vor BTN, weiter, weiter, PTM. Lass uns den Klassennamen ändern. Danach wähle ich Odio aus. Es hat den Klassennamen Odio. Dann wird die nächste Variable Songtime sein. Dann ändern wir das C. Wir brauchen Zeit für ihren Sohn. Dann werden wir Song Progress haben. Ändert den Fortschritt des Klassenlieds. Dann haben wir den Coverkünstler und den Covernamen. Ändern wir den Namen der Variablen, die wir brauchen, und es wird Cover sein. Dann müssen wir Span-Elemente auswählen. Und ich werde hier Select verwenden, lassen Sie uns auswählen. Eigentlich ist der Deckname das zweite Span-Element, wir brauchen hier zwei. Lassen Sie uns diesen Code tatsächlich duplizieren und diese Zeile loswerden. Ändere den Namen, ich meine den Namen der Variablen, es wird der Cover-Künstler sein. Und dann brauchen wir hier zuerst Span. Lassen Sie uns den Index des HTMs der Datei überprüfen und sicherstellen , dass wir hier richtig sind Wir haben das Cover, das erste ist eigentlich, das erste ist Künstler und dann haben wir den Namen Gehen wir zum Script, der GS-Datei. Wir haben einen Decknamen. Es ist der zweite. Okay, es ist richtig. Lassen Sie uns weitermachen und eine weitere Variable erstellen, und es wird der Song-Index sein. Lassen Sie uns die gelöschte Variable mit dem Schlüsselwort let song index verwenden. Und ich werde es auf Null setzen. Ordnung, danach werde ich eine Funktion erstellen. Diese Funktion verwendet einen Index als Argument. Es ruft die Songdaten aus dem Songdatenarray ab. Basierend auf dem Index werden verschiedene Elemente in der Benutzeroberfläche mit Informationen über den aktuell geladenen Song aktualisiert . Außerdem wird das Quellattribut des Audioelements auf die entsprechende Songdatei gesetzt . Lassen Sie uns weitermachen und eine Funktion erstellen. Ich nenne es Load Song. Wie gesagt, wir brauchen hier einen Parameter, nennen wir ihn Index. Wir müssen die Benutzeroberfläche aktualisieren. Wir müssen den Namen und den Künstler des Covers sowie den Namen und Künstler des Songs definieren Künstler des Covers sowie . Und wir müssen auch die Quelle der Audiodatei definieren. Ich werde hier den Decknamen und den Textinhalt einfügen . Ich werde die Daten aus dem Song-Daten-Array abrufen , das wir hier brauchen, Lieddaten. Dann müssen wir den Index angeben. Dann brauchen wir den Namen , der die erste Eigenschaft im Objekt ist. Lassen Sie uns diesen Code hier dreimal duplizieren. Cover-Künstler. Ich werde den Namen Property in Artist ändern. Dann müssen wir den Songnamen definieren. Schließlich brauchen wir einen Songkünstler. Okay, nochmal, wir brauchen hier Künstler. Wir haben Covername, Coverkünstler, Songname und Songkünstler definiert . Jetzt müssen wir die Quelle der Audiodatei definieren. Ich werde hier Audio RC hinzufügen. Es wird dem Template-Literal entsprechen. Wir brauchen einen Ordner namens Music. Dann müssen wir hier die Quelle der Objekte angeben , die wir hier haben. Ich werde Songdaten einfügen. Dann müssen wir den Index angeben. Dann brauchen wir RC Property. Und schließlich die Erweiterung der Audiodatei P drei. Okay, das war's mit dieser Funktion, wir müssen diese Funktion aufrufen sobald das Fenster geladen ist. Ich werde dem Fensterobjekt einen Event-Listener mit dem Ereignis namens load Lassen Sie uns hier eine Callback-Funktion einfügen. Dann rufe ich die Funktion Load Song als Argumente auf, in die ich mich einmischen werde Song-Index, den wir hier erstellt haben. Ordnung, auch diese Funktion verwendet einen Index als Argument. Ruft die Songdaten aus dem Songdaten-Array ab, basierend auf diesem Index Und aktualisiert verschiedene Elemente in der Benutzeroberfläche mit Informationen über den aktuell geladenen Song Die Informationen, ich meine den Namen des Songs, den Künstler des Songs und auch die Quelle der Audiodatei. Ordnung, danach werde ich eine weitere Funktion erstellen um den Song abzuspielen. Lass uns weitermachen und eine Variable erstellen und sie Play Song nennen. Weil ich gesagt habe, dass es eine Funktion sein wird. Diese Funktion steuert die Wiedergabe des Audioelements. Sie fügt dem Container-Element eine Klasse hinzu, um anzuzeigen, dass der Song abgespielt wird. Außerdem wird das Symbol für die Schaltfläche „Beitrag abspielen“ geändert Symbol für die Schaltfläche „Beitrag abspielen und die Audiowiedergabe gestartet. Wir brauchen hier eine Container-Klassenliste. Ich werde hier den Klassennamen Pose hinzufügen. Dann müssen wir hier auf das Spiel auf diesem Symbol zugreifen. Es ist ein untergeordnetes Element der Button-Elemente. Wie Sie sehen können, haben wir hier Button-Elemente und dann innerhalb des Button-Elements können Sie das Element sehen. Wir müssen auf dieses Element zugreifen. Daher benötigen wir Play Button First Element Child. Dann müssen wir den Klassennamen ändern. Das wird ein solider FA-Beitrag. Um diesen Song abzuspielen, müssen wir schließlich eine der in Javascript integrierten Funktionen namens Play verwenden . Wir brauchen wieder die Audiowiedergabe, diese Funktion, ich meine, die Funktion „Song abspielen “ steuert die Wiedergabe des Audioelements. Sie fügt dem Container-Element eine Klasse hinzu, um anzuzeigen, dass der Song abgespielt wird. Außerdem ändert es das Telefonsymbol der Play-Pose-Taste. Schließlich spielt es das Lied ab. In Ordnung, genauso wie wir den Song verwalten müssen, werde ich diesen Code duplizieren. Wir brauchen die Pose-Song-Funktion. Dann werde ich die Methode D in Remove ändern. Außerdem müssen wir das Telefon atomar ändern. In diesem Fall müssen wir spielen statt posieren. Schließlich müssen wir das Audio mit der Pose-Methode posten. In Ordnung, damit diese Funktionen funktionieren, müssen wir der Play-Schaltfläche einen Event-Listener hinzufügen Und wir müssen diese beiden Funktionen aufrufen. Ich wähle Play Post BTN mit Add Event Listener. Und wir hatten hier den Event-Klick angegeben. Dann benötigen wir eine Callback-Funktion , die ausgeführt wird, sobald wir auf die Schaltfläche klicken Sobald wir auf die Schaltfläche klicken, müssen wir prüfen, ob der Container die Pose-Klasse hat Wenn ja, bedeutet das, dass der Song gerade abgespielt wird. Wir müssen die Funktion **** aufrufen. Andernfalls müssen wir Play Song aufrufen, um mit der Wiedergabe des Songs zu beginnen. Ordnung, wir benötigen eine if-Anweisung , in der wir überprüfen müssen, ob der Container eine Klasse enthält. Wenn ja, müssen wir das Lied posieren. Wir müssen diese Funktion aufrufen. Wenn diese Bedingung falsch ist, brauchen wir die L-Anweisung und wir müssen eine Song-Funktion haben. In Ordnung, lassen Sie uns weitermachen und die Ergebnisse überprüfen. Wenn wir auf die Play-Put-Schaltfläche klicken, wird das Symbol geändert, aber wie Sie hören können, wird das Lied nicht abgespielt. Lassen Sie uns eigentlich die Konsole überprüfen. Wir haben hier einen Fehler besagt, dass das Element keine unterstützten Quellen hat. Skript JS 49 Zeile. Wir haben ein Problem mit der Quelle. Eigentlich sieht die Quelle korrekt aus. Wir haben das Problem hier. Nun, wie Sie sehen, haben wir hier die Erweiterung MP Three in der Quell-Eigenschaft. Und deshalb brauchen wir diese Erweiterung hier nicht mehr, weil sie sich verdoppeln wird. Lass uns es loswerden. Jetzt glaube ich, dass das Lied abgespielt wird. Lass uns auf den Button klicken. Wie Sie sehen können, wird das Lied abgespielt und auch das Symbol ist geändert. In Ordnung, also funktioniert soweit alles gut. Danach nehme ich dich vom Cover. Ich werde es drehen, während die Musik läuft. Ich werde hier die Liste der Cover-Klassen hinzufügen. Ich werde dem Cover eine neue Klasse hinzufügen. Nennen wir es Rotation. Wir müssen diese Klasse entfernen. Sobald wir das Lied posiert haben, müssen wir dieselbe Zeile mit der Entfernungsmethode beibehalten. Dann gehe ich zur gestylten CSS-Datei und suche hier ein Cover. Ich werde eine Animation erstellen. Ich werde CSS-Keyframes mit dem Namen Cover Rotate verwenden . Ich werde die Drehung des Elements auf 0% definieren . Ich werde transform rotate auf Null setzen. Dann müssen wir bei 100% Transformation von Rotation Z mit einem Wert von 360 Grad durchführen. Dann wähle ich Class Rotate aus, was wir dem Cover hinzugefügt haben. Ich werde Animation definieren. Der Name wird Cover Rotate lauten. Dann brauchen wir die Dauer. Es werden 10 Sekunden sein da die Animation linear sein wird und wir sie unendlich abspielen müssen Okay, lass uns den Song spielen. Wie Sie sehen können, dreht sich das Cover , sobald wir das Lied posieren, dann hört es In Ordnung, also funktioniert alles perfekt. Als Nächstes kümmere ich mich um das vorherige und dann um das nächste. Als Nächstes müssen wir dafür sorgen , dass sie funktionieren. Ich fange mit dem vorherigen Song an. Ich werde eine neue Funktion erstellen. Nennen wir es Pre Song Play. Wir müssen den Wert des Song-Index verringern. Dafür verwende ich Dekrementoperator minus minus next Wenn der Song-Index kleiner als Null ist. Wenn ja, müssen wir den Song-Index auf den Index des letzten Songs im Song-Daten-Array setzen . Wir benötigen hier eine IF-Anweisung, in der ich überprüfen werde, ob der Song-Index kleiner als Null ist. Wenn ja, dann müssen wir den Song-Index so einstellen, dass die Songdaten auf die Länge minus eins fallen. Wenn der Song-Index kleiner als Null ist, setzen wir den Song-Index auf den Index des letzten Songs im Song-Daten-Array. Als nächstes müssen wir die Song-Funktion mit dem Song-Index laden. Dann müssen wir auch die Song-Funktion abspielen. In Ordnung, diese Funktion ist bereit. Als Nächstes müssen wir uns um den nächsten Song kümmern, BTN. Ich meine, wir müssen eine ähnliche Funktion für die Schaltfläche für den nächsten Song erstellen ähnliche Funktion für die Schaltfläche für den nächsten Song Lassen Sie uns diesen Code duplizieren den Namen der Funktion ändern, damit der nächste Song abgespielt wird . Statt eines Dekrementoperators benötigen wir einen Inkrementoperator Dann müssen wir den Zustand der if-Anweisung ändern. Weil wir prüfen müssen, ob der Song-Index größer ist als der Index des letzten Songs im Song-Datenarray. Wenn ja, müssen wir den Song-Index auf Null setzen. Ich werde den Zustand hier ändern. Der Song-Index muss größer sein als Songdaten bis zur Länge minus eins. Wenn es wahr ist, müssen wir den Song-Index auf Null setzen. Dann benötigen wir diese beiden Funktionen , damit diese Funktionen funktionieren. Wir müssen sie aufrufen, sobald wir auf die Schaltflächen klicken , die wir hier benötigen , um Pre-BTN mit Event-Listener auszuwählen Das Ereignis wird angeklickt Und wir brauchen hier auch eine Buchfunktion. Aber statt der Buchfunktion werde ich den Funktionsnamen selbst einfügen. Lied abspielen. Lass uns diesen Code duplizieren und pre in next ändern. Wir brauchen hier als Nächstes, Song Play. In Ordnung, jetzt sollten also beide Tasten funktionieren. Lass uns das Lied spielen. Klicken Sie dann auf die vorherige Schaltfläche. Wie Sie sehen können, wird die Musik auf das vorherige Lied umgeschaltet. Beide Tasten funktionieren einwandfrei. Ordnung. Sobald die Steuerung gut funktioniert. Als nächstes müssen wir uns um die Zeitaktualisierung des Songs kümmern. Ich meine, wir müssen die aktuelle Uhrzeit, die Musikdauer aktualisieren . Außerdem müssen wir den Fortschrittsbalken aktualisieren und so weiter. In Ordnung, als Nächstes füge ich dem Audio einen Event-Listener hinzu Das Ereignis wird ein Zeitupdate sein. Dieses Ereignis wird kontinuierlich ausgelöst wenn sich die Position der Audiowiedergabe ändert. Fügen wir hier die Callback-Funktion hinzu. Wir müssen hier ein Event-Objekt einfügen. Als Nächstes werde ich die aktuelle Uhrzeit und Dauer extrahieren. Lassen Sie uns weitermachen und eine Variable erstellen und sie aktuelle Zeit nennen. Sie sollte der aktuellen Zielzeit entsprechen. Wir holen uns die aktuelle Uhrzeit aus dem Event-Objekt, und das Event-Objekt enthält Informationen über das Ereignis Auf die gleiche Weise müssen wir die Dauer ermitteln. Lassen Sie uns diesen Code duplizieren. Die zweite Variable wird die Dauer sein. Wir müssen die Dauer auswählen. Aktuelle Zeit ruft die aktuelle Wiedergabeposition des Audioelements ab und ruft den Wert in Die Dauer ruft die Gesamtdauer der Audiodatei ab, ebenfalls Ordnung. müssen wir die Breite des Fortschritts berechnen. Ich werde eine neue Variable erstellen, nennen wir sie aktuelle Zeit. Damit sollte sie der aktuellen Zeit geteilt durch die Dauer entsprechen . Und wir müssen diesen Wert mit 100 multiplizieren. Okay, diese Codezeile berechnet den Prozentsatz der Gesamtdauer, die verstrichen ist, basierend auf der aktuellen Jetzt müssen wir die Breite des Fortschrittsbalkens aktualisieren. Wir brauchen den Fortschritt des Songs und die Breite des Stils. Dann werde ich Vorlagenliterale verwenden. Fügen wir hier die aktuelle Uhrzeit mit ein. Wir müssen das Prozentzeichen einhalten. Ordnung, mit diesen beiden Zeilen aktualisieren wir die Benutzeroberfläche. Wir aktualisieren die Breite des Song-Fortschrittselements , um die aktuelle Wiedergabeposition widerzuspiegeln. Diese Zeile gibt dynamisch die Breite des Fortschrittsbalkenelements an, basierend auf dem Prozentsatz der Audiodatei, der bis zum Zeitpunkt der Audiowiedergabe abgespielt wurde . Diese Breite wird ständig aktualisiert und gibt so einen visuellen Hinweis auf den Fortschritt der Audiowiedergabe. Im Moment ist die Breite des Fortschritts auf 30% eingestellt . Machen wir weiter und setzen wir den Wert auf Null. Dann werde ich das Lied spielen. Wie Sie sehen können, nimmt der Fortschrittsbalken, in dem ich mich befinde, die Breite des Fortschrittsbalkens die Breite des Fortschrittsbalkens mit der Position von Odio In Ordnung, also funktioniert alles gut. Jetzt müssen wir die aktuelle Uhrzeit des Songs und auch des Videos aktualisieren . Nicht das Video, sondern die Audiodauer. Lassen Sie uns weitermachen und neue Variablen erstellen. Wir brauchen die aktuelle Uhrzeit des Songs. Ich werde dieses Panelementlet auswählen Verwenden Sie die Abfrageselektor-Methode Wählen Sie die Zeit, gefolgt von diesem Panelment, wir müssen Ich wähle das erste Spin-Element aus. Dann lass uns diesen Code duplizieren. Die zweite Variable wird eine gewisse Dauer haben. Ich werde den Selektor auf Kind zwei ändern auf Kind zwei Ordnung, danach müssen wir einen neuen Event-Listener an das Audio anhängen, das wir hier brauchen Das Ereignis wird in Daten geladen. Halten wir an einer Covid-Funktion fest. Event-Listener wartet auf das Ereignis mit geladenen Daten, das anzeigt, dass der Browser die Odio-Daten für das Odio-Element geladen hat Odio-Daten für das Odio-Element Als Nächstes erstelle ich eine Variable mit der Dauer von Odio Sie sollte der Odio-Dauer entsprechen. Jetzt extrahieren wir die Odio-Dauer. Diese Codezeile ruft die Gesamtdauer der in das Odio-Element geladenen Audiodatei und gibt uns den Wert Okay, als Nächstes werde ich eine weitere Variable erstellen, und das wird die Gesamtzahl der Minuten sein Wir müssen die Gesamtzahl der Minuten und Sekunden berechnen. Es sollte dem Mathematikunterricht entsprechen . Ich füge hier die Dauer von Odio geteilt durch 60 ein. Das dupliziert diese Codezeile. Wir brauchen insgesamt Sekunden. In diesem Fall benötigen wir den Audiodauermodul 60. In Ordnung. In der ersten Zeile wird die Gesamtzahl der Minuten berechnet , indem die Gesamtdauer durch 60 geteilt die Gesamtdauer durch 60 und auf die nächste Ganzzahl gerundet Deshalb haben wir hier diesen Boden benutzt. die zweite Zeile betrifft, so berechnet sie die verbleibenden Sekunden indem sie den Rest nimmt, wenn die Gesamtdauer durch 60 geteilt und auf die nächste Ganzzahl abgerundet Ordnung, danach müssen wir Sekunden formatieren und wir müssen die if-Anweisung verwenden, in der wir überprüfen müssen, ob die Gesamtzahl der Sekunden weniger als zehn beträgt. Dann müssen wir vor der Ziffer, die wir hier benötigen, die Gesamtzahl der Sekunden, Null hinzufügen die wir hier benötigen, die Gesamtzahl der Sekunden, Dann verwende ich das Template-Literal, wir brauchen Null und dann füge ich hier die Gesamtzahl der Sekunden Auch hier prüfen wir, ob die Gesamtzahl der Sekunden weniger als zehn beträgt. Wenn dies zutrifft, stellen wir den Sekunden eine Null voran, um sicherzustellen, dass die Uhrzeit in Minuten und Sekunden angezeigt wird. Ordnung, endlich müssen wir den Textinhalt der Songdauer ändern den Textinhalt der , wir brauchen hier Songdauer gefolgt vom Textinhalt. Ich werde hier Vorlagenliterale einfügen , gefolgt von Gesamtzahl der Minuten und der Gesamtzahl der Sekunden. Wir benötigen Gesamtminuten. Eigentlich brauchen wir Minuten. Dann brauchen wir eine Spalte, in der wir insgesamt zwei Sekunden haben. Also gut, wie Sie sehen können, haben wir hier die Dauer des Songs. Wenn wir zu anderen Songs wechseln, wird die Dauer des Songs entsprechend aktualisiert. In Ordnung, alles funktioniert gut. Als Nächstes müssen wir uns um die aktuelle Uhrzeit des Songs kümmern . Ich werde neue Variablen erstellen. Das erste wird das aktuelle Protokoll sein. Es sollte der aktuellen Zeit im Mund geteilt durch 16 entsprechen . Lassen Sie uns diesen Code duplizieren. Wir brauchen aktuelle Sekunden. Wir müssen die Division nach dem Modul ändern. Die erste Zeile berechnet die Gesamtzahl der verstrichenen Minuten, indem die aktuelle Wiedergabezeit durch 60 geteilt und auf die nächste Ganzzahl abgerundet Wie in der zweiten Zeile werden die verbleibenden Sekunden berechnet, indem sie den Rest nimmt, wenn die aktuelle Wiedergabezeit durch 60 geteilt wird, und auf die nächste Ganzzahl abgerundet Diese Operation stellt sicher, dass die aktuelle Sekundenvariable den zweiten Teil der Zeit darstellt Jetzt müssen wir erneut überprüfen, ob die aktuellen Sekunden weniger als zehn Wir müssen dasselbe tun, was wir hier getan haben. Wir müssen der Ziffer Null voranstellen, wir benötigen die aktuelle Sekunde, die dem Vorlagenliteral Null entspricht, und dann wieder die aktuellen Sekunden Okay, jetzt müssen wir die Sekunden formatieren. Ich meine, wir müssen das Gleiche tun wie hier. Fügen wir hier Lied, aktuelle Uhrzeit, Textinhalt hinzu, den wir in aktuellen Minuten haben , Doppelpunkt, aktuelle Sekunden. Okay, wieder aktualisieren wir die Benutzeroberfläche. Wir aktualisieren den Textinhalt des Elements some current time mit den berechneten aktuellen Minuten und Sekunden im Format Minuten und Sekunden. Diese Zeile gibt dynamisch den Textinhalt eines Elements an, um die aktuelle Wiedergabezeit der Audiodatei in Minuten und Sekunden anzuzeigen . In Ordnung, lass uns weitermachen und das Lied spielen. Wie Sie sehen können, wird die aktuelle Uhrzeit nicht aktualisiert. Wir haben hier irgendwo ein Problem. Lass uns den Code überprüfen. Eigentlich sollte dieser Code, ich meine, der Code für aktuelle Minuten und Sekunden aktuelle Minuten und Sekunden außerhalb dieses Ereignisses sein. Platzieren wir den Code hier und überprüfen wir dann die Ergebnisse. Wie Sie sehen können, wird die aktuelle Uhrzeit für alle Songs perfekt aktualisiert. Ordnung, jetzt müssen wir zum letzten Teil unseres Projekts übergehen . Ich meine, wir müssen den Fortschrittsbalken aktualisieren , sobald wir hier irgendwo klicken, so wie wir ihn im fertigen Projekt haben. Wenn wir irgendwo auf den Fortschrittsbalken klicken, wird die Musik entsprechend zurückgespult. Ordnung, wir müssen also nach einer bestimmten Wiedergabeposition suchen Ich werde der Songzeit einen Event-Listener hinzufügen. Beim Klickereignis benötigen wir das Listener-Klickereignis. Und mit einer Callback-Funktion werde ich hier ein Event-Objekt einfügen. Okay, jetzt müssen wir den Fortschritt definieren mit, lassen Sie uns eine neue Variable erstellen Es wird Fortschritt mit sein. Es sollte dem Song Time Client entsprechen. Mit dieser Codezeile rufen wir die Breite des Songtime-Elements ab, das die Gesamtbreite des Fortschrittsbalkens darstellt. Als Nächstes müssen wir eine weitere Variable erstellen, und sie wird col offset X sein . Ich werde sie gleich dem Offset X machen. Diese Zeile ruft den horizontalen Abstand vom linken Rand des Lied-Zeitelements bis zu dem Punkt ab, an dem der Benutzer geklickt hat, und gibt damit die Position an, an der der Benutzer suchen möchte Auch hier ruft diese Codezeile die horizontale Entfernung vom linken Rand des Liedzeitelements bis zu dem Punkt ab, an dem der Benutzer In Ordnung, danach werde ich die Dauer des Songs definieren. Lass uns eine weitere Variable erstellen. Eigentlich brauchen wir hier Platz. Die neue Variable wird die Songdauer sein. Sie sollte der Odio-Dauer entsprechen. Danach müssen wir die aktuelle Uhrzeit des Odio definieren Ich werde hier die aktuelle Uhrzeit von Odio hinzufügen. Was dem Klick-Offset x geteilt durch die Fortschrittsbreite entsprechen sollte Klick-Offset x geteilt durch die Fortschrittsbreite Wir müssen diesen Wert mit der Sonnendauer multiplizieren. Ordnung, diese Codezeile berechnet die gewünschte Wiedergabeposition in der Audiodatei auf der Grundlage des Verhältnisses der angeklickten Position innerhalb der Fortschrittsbalkenbreite zur Gesamtbreite des Fortschrittsbalkens zur Gesamtbreite des Fortschrittsbalkens Dann multiplizieren wir es mit der Gesamtdauer des Audios. Dadurch wird die aktuelle Zeiteigenschaft des Audioelements so eingestellt , dass es effektiv nach der gewünschten Wiedergabeposition sucht. Jetzt müssen wir die Funktion „Song abspielen“ aufrufen. Dadurch wird die Wiedergabe des Audios von der neu eingestellten Wiedergabeposition aus gestartet. In Ordnung, lassen Sie uns weitermachen und das Ergebnis überprüfen. Wenn ich klicke, passiert nichts, weil wir einen Fehler haben. Lass uns die Konsole überprüfen. Das Eigenschaftsskript für die aktuelle Uhrzeit (JS 1204124) konnte nicht auf die aktuelle Eigentlich scheint alles richtig zu sein. Schauen wir uns andere Zeilen an, die wir hier haben. Was brauchen wir hier? Punkte aus Satz X, es ist also ein Typ Ich bin. tut mir leid. Jetzt denke ich , dass alles richtig ist. Lassen Sie uns die Ergebnisse überprüfen. Okay, also alles funktioniert perfekt. In Ordnung. Wir sind fast fertig mit unserem Projekt. Das einzige, was ich tun werde, ist das Ende der Audiowiedergabe zu regeln. Sobald der Song zu Ende ist, müssen wir zum nächsten Song übergehen. Ich werde hier einen Emo-Listener zum Audio hinzufügen. Die Veranstaltung wird beendet. Sobald die Musik endet, müssen wir die Funktion zum Abspielen des nächsten Songs aufrufen. Fügen wir hier ein, nächstes Lied abspielen. Okay, wenn das beendete Ereignis eintritt, lösen wir die Funktion zum Abspielen des nächsten Songs aus , mit der der nächste Song in der Playlist geladen und abgespielt wird. Lassen Sie uns die Ergebnisse überprüfen. Ich werde das Lied hier zurückspulen. Warten wir auf das Ende. Wie Sie sehen können, als das Lied endete, wurde zum nächsten Lied gewechselt. In Ordnung, also funktioniert alles gut. Und tatsächlich können wir sagen , dass wir mit dem Projekt fertig sind. Ich hoffe, dass dir das Projekt gefällt und du ein paar neue Dinge lernst. Jetzt ist es an der Zeit, weiterzumachen und unser nächstes Projekt zu erstellen. Fahren wir mit der nächsten Vorlesung fort. 6. Projekt 1 - CSS-Produktkarte: Ordnung, es ist also an der Zeit, mit dem Aufbau des Projekts zu beginnen, das eine schön gestaltete und coole Produktkarte sein wird . Das Projekt wird auf Basis von HTML und CSS erstellt. Es wird einfach sein, aber Sie werden lernen, wie Sie die Produktkarte auf moderne und coole Weise gestalten können. Die Karte befindet sich in der Mitte der Seite, die einen schönen Hintergrund hat. Auf der linken Seite der Karte haben wir ein Bild der Kopfhörer. Die rechte Seite enthält verschiedene Elemente wie Überschriften, Absätze, den Preis des Produkts und die Schaltfläche zum Kauf Okay, lassen Sie uns über das Projekt sprechen. Lass uns weitermachen und anfangen, es zu erstellen. Ich habe einen neuen Ordner erstellt , in dem wir einen Bilderordner haben. Lassen Sie uns weitermachen und den Ordner im VS-Code öffnen. Dann werde ich unsere Arbeitsdateien für HTML erstellen , was Index-HTML sein wird, und für SS im CSS-Stil. Dann öffne ich die Index-HM-Datei und erstelle die grundlegende HD-Struktur. Lass uns den Titel ändern. Es wird eine Produktkarte sein, dann werde ich die CSS-Datei verlinken. Okay, lassen Sie uns weitermachen und das Projekt und den Browser öffnen . Dann werde ich den Browser und den Editor so nebeneinander platzieren , um unseren Arbeitsprozess einfacher und bequemer zu gestalten . Ordnung, danach gehe ich auf die Google Phones-Website, weil wir während des gesamten Projekts eines der Google-Telefone verwenden werden. Lass uns die Website besuchen und dann nach Google Phone suchen, oder? Ich werde ein paar verschiedene Stile auswählen, von leichten bis hin zu kräftigen Telefongewichten. Dann kopiere ich den Link und füge ihn in das Head-Element ein. Ordnung, wir sind bereit, mit dem Schreiben des HTML-Markups zu beginnen . Ich werde das div-Tag öffnen, das wird der Container in diesem Element sein. Ich werde einen weiteren Dip öffnen , der im Hintergrund sein wird. Wir brauchen hier zwei Elemente. Als Nächstes öffne ich die Karte, auf der wir den Background Wrapper haben werden Und dann brauchen wir in der Hülle noch eine Vertiefung, nämlich den Kartenhintergrund Danach werde ich die Überschrift öffnen. Elemente mit der Überschrift Klassenkarte. Lass uns hier spielen. Beats. Dann brauchen wir Entwicklung , und das wird Auto sein. Jetzt öffne ich das Image-Tag. Lassen Sie uns weitermachen und Bild aus dem Bilderordner auswählen. Es wird ein Kopfhörer sein. In Ordnung. Danach bin ich der Tag , der der Schatten sein wird . Erster Schatten. Wir brauchen drei Schatten. Wir ändern die Klassennamen. Als Nächstes werde ich hier einen weiteren Deep-Tag einfügen. Es wird Karteninhalt sein. Wir werden hier H ein Element mit drei Überschriften und der Klasse kleine Überschrift haben. Das heißt Insert-Bits. Als Nächstes benötigen wir H ein Überschriften-Tag mit der Hauptüberschrift der Klasse. Wir brauchen Kopfhörer. Dann öffne ich das H-Five-Überschriften-Tag mit der Klassenunterüberschrift Ich werde hier die Produktübersicht einfügen. Als nächstes brauchen wir den Absatz mit etwas Dummy-Text. Es wird der Überblick über das Produkt sein. Als nächstes kommt der Preisteil. Lassen Sie uns H ein Überschriften-Tag mit dem Preishintergrund öffnen , den wir hier benötigen, 99$. Dann öffne ich das H-Element mit drei Überschriften mit dem Klassennamen und dem Mittelwert des Klassennamens Fügen wir hier den gleichen Wert ein. Schließlich brauchen wir den Button mit der Klasse BTN. Der Typ wird unten sein. Dann werde ich zum Interenkauf gehen. In Ordnung, mit dem HTML-Markup sind wir fertig. Jetzt können wir weiter machen, um das CSS zu schreiben. Ich werde jedes Element mit einem Sternchen auswählen. Und dann setze Margin und Padding beide auf Null. Als Nächstes setze ich die Größe der Box auf die Rahmenbox. Außerdem brauchen wir eine lustige Familie , um ehrlich zu sein, Sans. Dann wähle ich das HTML-Element und setze die Schriftgröße auf 62,5%, weil wir M als Maßeinheit verwenden Wir brauchen ein m, um zehn Pixeln zu entsprechen, deshalb legen wir die Schriftgröße fest Als nächstes brauchen wir einen Container, die Breite soll 100% sein. Dann brauchen wir eine Höhe von 100 Aussichtspunkten Dann werde ich die Hintergrundfarbe ändern. Lass uns hier 57567 verwenden. Dann wähle ich den Hintergrund stelle seine Breite auf 180 Dann wird die Höhe dieselbe sein. Als Nächstes setze ich den Grenzradius auf 50%, es wird der Kreis sein. Ändere auch die Hintergrundfarbe. Ich werde 334 verwenden. Als Nächstes werde ich die Position ändern. Machen wir es absolut. Außerdem benötigen wir die relative Position für das übergeordnete Element. Hier haben wir den Hintergrund, den Kreis. Lassen Sie uns das korrigieren. Lassen Sie uns weitermachen und Runde „Zurück“ auswählen und die linke Position auf -45% setzen . Was die beiden Positionen angeht, werden -10% liegen. Dann wähle ich Hintergrund zwei und setze die rechte Position auf -15%. Was die beiden Positionen angeht, setze die rechte Position auf werden sie bei 35% liegen. Okay, jetzt ist der Hintergrund fertig Lassen Sie uns Teile außerhalb des Containers verstecken . Jetzt sind die Hintergründe endlich fertig. Als Nächstes wähle ich ein Auto aus. Lassen Sie uns Breite und Höhe definieren. Die Breite wird 120 Ram betragen. Was die Höhe angeht, werde ich sie auf 70 Ram einstellen. Ändere auch die Hintergrundfarbe. Ich werde 5566 verwenden, wir müssen die Karte anzeigen Lassen Sie uns die Position auf absolut setzen, dann wird die oberste Position 50% sein , die linke Position wird 50% sein. Und dann, um das Element zu zentrieren, müssen wir transformieren, mit Werten -50% und wieder -50% übersetzen mit Werten -50% und wieder -50% . Hier haben wir Lassen Sie uns den Randradius auf einen Ram setzen , damit die Ecken Als Nächstes benötigen wir Box Shadow mit den Werten 01 Ram, six Ram und die RGBA-Farbe in der schwarzen Farbe, mit einer geringeren Deckkraft, 0,4. Wir haben hier einen schönen Schatteneffekt Ordnung, danach werde ich mich zuerst um den Kartenhintergrund kümmern , wir brauchen einen Wrapper, lassen Sie uns die Breite auf 100% setzen. Die Höhe wird 100% betragen . Dann wähle ich den Kartenhintergrund Lassen Sie uns die Breite auf 100% setzen, dann wird die Höhe 200% betragen. Was die Hintergrundfarbe angeht, verwende ich den Anrufer 52555 In Ordnung, als Nächstes müssen wir die Position absolut haben. Dann benötigen wir die relative Position für das übergeordnete Element. Stellen wir die linke Position ein. Es wird -55% sein. Was die oberste Position angeht, werde ich sie auf -50% setzen Dann müssen wir die Funktion „Z drehen“ transformieren Lassen Sie uns das Element um -40 Grad drehen. Außerdem werde ich den Radius auf Null, 50% und dann wieder auf 50% und Null stützen 50% und dann wieder auf 50% und Null Okay, hier haben wir den Hintergrund. Wir müssen Overflow Hidden verwenden, um den Teil des Hintergrunds zu verbergen In Ordnung, der Hintergrund ist also fertig. Als Nächstes kümmere ich mich um die Kartenüberschrift. Lassen Sie uns die Position auf absolut setzen. Dann wird die oberste Position 2% liegen. Was die linke Position betrifft, werde ich sie auf 50% setzen Und wieder müssen wir x transformieren, übersetzen, um das Element zu zentrieren. Dann stelle ich die Telefongröße auf 25 Bilder ein. Hier haben wir die Überschrift. Als Nächstes werde ich Platz zwischen den Buchstaben schaffen. Lass uns 3025 Fram haben. Außerdem müssen wir Text in Großbuchstaben umwandeln und dann die Farbe ändern Es wird 777970 sein. Hier haben wir die Überschrift, die viel besser aussieht. Als Nächstes werde ich die Opazität verringern. Lass uns 32.3 In Ordnung, die Überschrift sieht ziemlich gut aus Als nächstes werde ich mich um das Bild der Kopfhörer kümmern das Bild der Kopfhörer kümmern Lassen Sie uns seine Position auf Absolut setzen. Dann werden die beiden Positionen -5% sein . Was die linke Position betrifft, werde ich sie auf -2% setzen . Wie Sie sehen können, ist das Bild Als Nächstes werde ich mich um die Schatteneffekte kümmern. Wählen wir den ersten Schatten aus. Ich werde seine Breite auf 20 Ram setzen. Dann wird die Höhe 60% betragen. Als Nächstes setze ich die Position auf absolut. Die oberste Position wird bei 15% liegen . Was die linke Position betrifft, werde ich auf 30% setzen Als Nächstes benötigen wir einen Hintergrund mit linearem Farbverlauf. Ich werde die Richtung nach rechts einstellen. Und dann legen wir die erste Farbe als transparent fest. nächste Farbe wird RGBA-Schwarz mit einer Opazität von 0,7 sein. Die dritte Farbe wird ebenfalls transparent sein Hier haben wir die Elemente. Als Nächstes verwende ich den Grenzradius. Er wird Null sein. 50% 50% und Null. Dann werde ich einen Filter mit der Unschärfefunktion verwenden. Der Wert wird drei Ram sein. Außerdem werde ich die Opazität verringern. Stellen wir es hier auf 2,5 ein, wir haben einen schönen Schatteneffekt. Fügen wir hier die Transformation Rotation Y mit dem Wert 45 Grad hinzu. Okay, jetzt haben wir ein Musterergebnis. Lass uns weitermachen und diesen Code kopieren. Für den zweiten Schatten benötigen wir eine Breite von 25 Ram. Dann werde ich die Höhe ebenfalls auf 25 Ram setzen. Lass uns die Position ändern, die wir hier brauchen. untere Wert liegt bei -2% Was die linke Position , dann müssen wir hier einen Grenzradius von 50% haben. Außerdem müssen wir die Drehfunktion loswerden Hier haben wir den zweiten Schatten, jetzt müssen wir Sie vom dritten nehmen Nehmen wir 255 Ram, und die Höhe wird 15 Ram sein Als Nächstes benötigen wir eine Hintergrundfarbe. Lassen Sie uns diese Funktion von hier aus aufrufen, ich werde die Deckkraft ändern Als Nächstes müssen wir mit der Funktion rotate x transformieren. Wir müssen das Element in X-Richtung drehen, und der Wert wird 70 Grad betragen. Außerdem benötigen wir eine Drehfunktion mit dem Wert -30 Grad. Dann verschiebe ich das Element mit dem Wert fünf Fram Dann brauchen wir einen Filter mit der Blar-Funktion. Der Wert wird fünf Fram sein. Okay, lassen Sie uns als Nächstes über die Schatten sprechen. Ich kümmere mich um den Inhalt der Karte. Lassen Sie uns weitermachen und die Position auf absolut setzen. Dann wird die oberste Position Null sein, rechte Position wird ebenfalls Null sein. Dann müssen wir die Breite auf 50% setzen und die Höhe auf 100%. Verwenden wir die Polsterung und setzen sie auf fünf Ram Okay, danach werde ich mich um die kleine Überschrift kümmern und den oberen Rand auf sechs Ram setzen Als Nächstes müssen wir die Telefongröße auf fünf einstellen. Ändern Sie auch die Texttransformation. Machen wir es in Großbuchstaben. Als Nächstes müssen wir den Hintergrund mit einer linearen Gradientenfunktion erstellen. Die Richtung wird nach rechts gehen. Verwenden wir die erste Farbe, 9954. Dann wird der nächste Wert 4622 mit einem Wert von 13% sein. Als nächstes benötigen wir einen Webket-Hintergrundclip mit Werttexten. Wir benötigen eine Webtextfarbe mit dem Wert transparent. Wie Sie sehen können, haben wir hier Text mit einem linearen Verlaufseffekt. Als Nächstes verwenden wir einen Schatteneffekt mit den Werten 0,5 Ram, ein Ram, und die Farbe wird RGBA sein, schwarze Farbe mit Opazität 0,2 In Ordnung, das war's , ungefähr die erste Überschrift Als Nächstes nehme ich hier die Hauptüberschrift und definiere die Schriftgröße Es werden sieben Ram sein. Dann müssen wir den Text in Großbuchstaben schreiben. Ändern Sie auch die Farbe, verwenden wir weiße Farbe. Als Nächstes verwende ich einen Zeitplaneffekt mit den Werten aus der vorherigen Tech-Shuttle-Eigenschaft. Als Nächstes setze ich die Marge auf 0,05 Ram und drei Ram. Hier haben wir die zweite Überschrift. Als Nächstes werde ich mich um die Unterüberschrift kümmern, ich meine, um die Produktübersicht Lassen Sie uns diesen Code von hier abrufen und einige Änderungen vornehmen. Die Telefongröße wird 1,6 Ram betragen. Dann brauchen wir ein Telefongewicht von 300. Dann sollten wir das Marschieren loswerden. Die Überschrift sieht nett aus. Als Nächstes werde ich mich um den Absatz kümmern. Lassen Sie uns weitermachen und die Telefongröße auf 1,4 Ram einstellen. Dann wird die Farbe A sein. Ändern Sie auch die Zeilenhöhe, setzen wir sie auf 1.2. Als Nächstes müssen wir 300 sein. Stellen Sie das Gewicht auf zwei ein, dann brauchen wir einen Ram, 05 Ram und dann drei Ram. Der Absatz sieht gut aus, lass uns weitermachen. Und Kurshintergrund, setze die Position auf absolut. Dann wird die unterste Position bei fünf Fram liegen. Dann brauchen wir eine Schriftgröße von 12 Ram. Als Nächstes werde ich die Farbe ändern. Lassen Sie uns die Farbe 77797 verwenden und die Opazität verringern. Stellen wir es auf 2,5 ein. Hier haben wir den Hintergrund für den Preis Als Nächstes wähle ich den Preis selbst aus. Lassen Sie uns die Position auf absolut setzen. Dann wird die Position des Boson acht m liegen. Als Nächstes benötigen wir die linke Position, die 17 Ram sein wird Ändern Sie die Telefongröße, stellen wir sie auf vier Ram ein. Ändere die Farbe, mach sie weiß. Außerdem brauchen wir einen Schatteneffekt. Stellen wir es auf 01 Ram, zwei m, und den RGBA mit der Opazität 0,2. Als nächstes kümmere ich mich um die Pots Setzen wir die Position auf absolut. Dann wird die unterste Position 11 Rams sein. Für die richtige Position setze ich sie auf zehn Ram. Als nächstes kommt die Breite, die 20 Ram sein wird. Lassen Sie uns auch die Höhe auf fünf Ram setzen. Hier haben wir den Boden schön platziert. Als Nächstes werde ich mich um den Grenzradius kümmern. Stellen wir es auf 2,7 Ram ein. Ändere auch den Rand, mach keinen. Als Nächstes stelle ich den Hintergrund auf linearen Farbverlauf ein. Ich werde diesen Wert von hier aus abrufen. Wir haben hier einen schönen Effekt. Lassen Sie uns diesen Wert von hier aus loswerden. Als Nächstes stelle ich die Telefongröße auf 1,6 Ram ein. Machen Sie den Text in Großbuchstaben, ändern Sie die Farbe, es wird weiß sein Wir brauchen etwas Platz zwischen den Buchstaben-Buttons, sieht ziemlich gut aus Als Nächstes brauchen wir einen Schatteneffekt. Setze Box Shadow auf 01 Ram, drei Ram. Und die schwarze RGBA-Farbe. Ändern Sie auch den Cursor, machen Sie ihn zum Zeiger. Okay. Das Letzte , was ich tun werde, ist, den Button anklickbar zu machen Wir müssen aktiv am Unterricht teilnehmen. Als Nächstes müssen wir Y transformieren, übersetzen. Setzen wir es auf zwei -0,2 Sobald wir auf die Schaltfläche klicken, wird sie sich gut bewegen In Ordnung, lassen Sie uns über dieses Projekt sprechen. Ich hoffe es hat dir gefallen. Lassen Sie uns mit der Antwort weitermachen und die nächste bauen. 7. Project 2 - CSS-Navigationsmenü mit Hover: Ordnung, es ist also Zeit, weiterzumachen und unser nächstes Projekt zu erstellen In diesem Abschnitt werden wir ein CSS-Navigationsmenü mit einem schönen und coolen Hover-Effekt erstellen ein CSS-Navigationsmenü mit einem schönen und coolen Hover-Effekt Wie Sie sehen können, haben wir hier ein paar verschiedene Navigationselemente Sobald wir den Mauszeiger über die Elemente bewegen , erhalten wir diesen schönen und coolen Effekt Jedes Navigationselement hat eine andere Hintergrundfarbe, und außerdem erscheint das Element gut im Hintergrund Okay, das ist alles über das Projekt. Jetzt ist es Zeit, es zu bauen. Ich habe einen neuen Ordner auf dem Desktop. Lass uns weitermachen und es im VS-Code öffnen. Lassen Sie uns weitermachen und unsere Arbeitsdateien für HTML und CSS erstellen . Wir werden nur zwei Dateien haben. Lassen Sie uns die indizierte HTML-Datei öffnen und dann das grundlegende HTML-Dokument erstellen Lassen Sie uns weitermachen und den Titel ändern. Es wird ein CSS-Menü sein. Dann werde ich die CSS-Datei verknüpfen und hier den Namen der Datei angeben. Okay, lass uns weitermachen und das Projekt und den Browser öffnen . Und dann platzieren Sie den Browser und den Editor nebeneinander. Also werde ich während des gesamten Projekts Google Phones verwenden. Dafür müssen wir die Google Phones-Website besuchen. Suchen wir nach dem Google-Telefon namens Writs. Ich werde den Stil auswählen. Dann wähle ich ein anderes Telefon namens Josephine Slap Dann lass uns verschiedene Stile verwenden. Kopieren Sie den Link von hier und fügen Sie ihn in das Head-Element ein. Okay, okay, wir sind also bereit, mit dem Aufbau des Projekts zu beginnen. Ich werde das HTM erstellen und markieren, wir benötigen einen Container, in dem ich das div-Tag mit der Klassennavigation eingeben werde div-Tag mit der Klassennavigation Es wird aus ein paar verschiedenen Links bestehen. Das erste ist, lassen Sie uns hier ein Attribut namens Datentext einfügen. Ich werde dein Zuhause platzieren. Lassen Sie uns den Link duplizieren und den Inhalt und auch die Datentextattribute ändern den Inhalt und auch die , die wir benötigen. Dann werden die nächsten Projekte sein. Dann werden wir eine Galerie haben. Der nächste wird Block sein. Der letzte Punkt wird ein Konflikt sein. In Ordnung, also lassen Sie uns über den HTML-Code sprechen. Als Nächstes müssen wir anfangen , das CSS zu schreiben. Zunächst wähle ich jedes Element mit einem Sternchen aus, setze einen Rand und setze beide auf Null Dann setze ich die Größe der Box auf das Rahmenfeld. Außerdem müssen wir keine Textdekoration haben. Dann setze ich die Telefongröße des menschlichen Elements H auf 62,5%, weil wir Ram als Maßeinheit verwenden werden. Ein Ram Maßeinheit verwenden werden. Ein Ram sollte zehn Peakels entsprechen, die Lass uns weitermachen und den Container auswählen. Ich werde die Breite auf 100% setzen , dann wird die Höhe 100 Viewpot-Höhe sein Als Nächstes verwende ich Flex Book, um den Inhalt mithilfe von Justified Content Center und Align Items Center zu den Inhalt mithilfe von Justified Content Center und Align Items Center Wie Sie sehen können, befinden sich die Links in der Mitte der Seite. Als Nächstes wähle ich die Navigation aus. Stellen wir die Höhe auf 60 Ram ein. Dann werde ich Flexbox benutzen. Wir müssen die Richtung ändern, setzen wir sie auf Spalte. Außerdem werde ich die Elemente in der Mitte ausrichten. Was die Eigenschaft „ Gerichteter Inhalt“ anbelangt, werde ich sie auf einen gleichmäßigen Abstand setzen. Hier haben wir die Navigationselemente gut platziert. Als Nächstes wähle ich die Link-Elemente aus. Lassen Sie uns die Telefonfamilie einrichten. Es werden Rechte sein. Kursiv, das Telefon ist geändert. Dann werde ich die Telefongröße erhöhen. Es werden sechs sein. Ram, A. Ändere die Farbe. Ich werde 5255 verwenden Dann brauchen wir Platz zwischen den Buchstaben. Stellen wir es auf 2.2 ein und ändern auch die Breite, machen wir es auf 100%. Und die Höhe wird ebenfalls 100% betragen. Dann brauchen wir die Technik, die Textzeile in der Mitte zu platzieren. Wir haben hier die Navigationspunkte. Sie sehen ziemlich gut aus. Als Nächstes wähle ich die Navigation mit einem Hover-Effekt aus. Ich meine die Hover-Pseudoklasse, gefolgt vom Lass uns die Farbe ändern. Es wird 888 sein. Als Nächstes wähle ich Navigation, gefolgt von dem Link. Und dann der Hover. Ich werde die Farbe ändern Stellen wir es auf Weiß. Setzen wir den Boxschatten für das Link-Element auf 0,5 Ram, ein Ram. Und die schwarze RGBA-Farbe mit Opazität 0,1 Als Nächstes benötigen wir einen Übergang für einen gleichmäßigen Effekt Eigentlich brauchen wir hier Tech Shadow und nicht den Box-Shadow beim Hover Die Farbe des Links ändert sich. Als Nächstes wähle ich Navigationslink aus. Und dann setzen wir vor dem Element den Inhalt auf Attribut. Und dann brauchen wir Datentext , den wir in der HTML-Datei verwendet haben. Als Nächstes setze ich die Position auf absolut. Und wir benötigen die relative Position für die Navigation. Danach setze ich die oberste Position auf 50%. Dann wird die Position ebenfalls bei 50% liegen. Ich zensiere das Element mit Transform Translate -50% und erneut -50%. Dann setze ich die Breite auf 180 m und die Höhe wird ebenfalls 180 m betragen Wir brauchen eine rote Hintergrundfarbe, das ist eine Und auch diskrete Opazität. Okay, lassen Sie uns das Element mit einem Randradius von 50% abrunden . Dann müssen wir eine Indexeigenschaft minus eins haben, um die Links sichtbar zu machen Okay, das ist ein temporäres Ergebnis. Wir brauchen Display Flex. Dann Justify. Der Inhalt wird im Mittelpunkt stehen. Und wir brauchen auch ein Einzelpostenzentrum. Als Nächstes werde ich die Telefongröße erhöhen. Es werden 30 Ram sein. Die Telefonfamilie wird das zweite Telefon sein, Joseph, in Slap-Serif-Schrift Dann wird das Telefon abgenommen. Außerdem werde ich die Farbe ändern. Lass uns 777 benutzen. Wie Sie sehen können, haben wir hier die Elemente, ich meine die größeren Elemente im Hintergrund der Navigation, die wir anzeigen müssen, sobald wir den Mauszeiger über die Elemente Als Nächstes wähle ich die Navigation aus. A mit einem With-Hover, gefolgt vom Before-Pseudoelement Eigentlich werde ich den Inhalt standardmäßig leer machen Dann sollte sich der Inhalt mit dem Attribut Datumstext im Hover befinden Lassen Sie uns innerhalb der Höhe entfernen und sie hier platzieren, da wir die linke Position für 50% benötigen . Entfernen Sie die Hintergrundfarbe und setzen Sie auch die Deckkraft Hier benötigen wir die Deckkraft 0,7 . Außerdem werde ich den Buchstabenabstand standardmäßig auf 50 Ram setzen Buchstabenabstand standardmäßig auf 50 Ram Was den Hover-Effekt betrifft, wird der Buchstabenabstand einen Ram betragen Schließlich benötigen wir einen Übergang für einen gleichmäßigeren Effekt. Sobald wir den Mauszeiger über die Elemente bewegen , werden die richtigen Elemente im Hintergrund angezeigt Als Nächstes werde ich den Überlauf ausblenden, um die Scrollbalken beim Hover zu entfernen Außerdem müssen wir Overflow auch für den Container verstecken. Wisse, dass alles gut funktioniert. Das einzige, was wir tun müssen, ist die Hintergrundfarben zu ändern. Sobald wir den Mauszeiger über die Elemente bewegen, benötigen wir eine Navigation, gefolgt von dem Link mit der Diagrammauswahl Und dann brauchen wir vor dem Element. Die Hintergrundfarbe für das erste Objekt wird Bf94 144 sein Wir haben hier die Hintergrundfarbe für den ersten Artikel. Wir brauchen dasselbe für alle Artikel. Lassen Sie uns die linke Position tatsächlich ändern und sie auf 40% setzen . Jetzt haben wir ein besseres Ergebnis. Lassen Sie uns diesen Code duplizieren und die Hintergrundfarben für den Rest der Elemente ändern. Der zweite wird F3722 sein. Dann haben wir 8961, dann haben wir Dann heißt es beim nächsten Mal Neun Oh Sechs. Für den letzten Punkt benötigen wir 43 A, A. Eigentlich müssen wir auch die untergeordneten Selektoren ändern Wir hatten hier überall einen. Wir brauchen Zahlen von eins bis sechs. In Ordnung, jetzt haben wir hier einen schönen und coolen Effekt. Eigentlich funktioniert fast alles gut. Wir müssen nur eine winzige Änderung an der Übergangseigenschaft vornehmen . Lassen Sie uns nach oben scrollen und den Übergang statt alles. Ich werde den Buchstabenabstand und dann die linke Position separat sicherstellen Jetzt haben wir ein viel besseres Ergebnis. Okay, das war's, das Projekt ist abgeschlossen. Ich hoffe es hat dir gefallen. Lass uns weitermachen. 8. Projekt 3 - Success / Fail Modal Box: In Ordnung, es ist Zeit, mit der Erstellung unseres nächsten Projekts zu beginnen. In diesem Abschnitt werden wir eine Success-Fail-Modulbox erstellen. Ich meine die Popup-Meldung, die uns den Erfolg oder Misserfolg anzeigt. Sie werden auf fast jeder Website auf diese Nachricht stoßen . Sehr häufig haben wir hier zwei verschiedene Buttons. Einer von ihnen ist grün und der andere ist rot. Wenn ich auf die grüne Schaltfläche klicke, erhalten wir diese nette Erfolgsmeldung. Wenn ich dann auf die Schaltfläche Go Ahead klicke, wird sie wie bei der roten Schaltfläche geschlossen. Wenn ich darauf klicke, erhalten wir eine Meldung, dass ein Fehler aufgetreten Sobald ich auf die Schaltfläche Erneut versuchen klicke, wird sie geschlossen. Okay, das war's mit diesem Projekt. Es wird einfach sein, aber ich denke, es wird sehr nützlich sein und Sie werden Spaß daran haben. Lass uns anfangen. Ich habe einen neuen Ordner auf dem Desktop erstellt. Lass uns weitermachen und es im VS-Code öffnen. Erstellen Sie dann unsere Arbeitsdateien für HTML, CSS und Gale-Skript Der erste wird indiziertes HTML sein. Dann werden wir Stile haben und wir brauchen auch Skripte. Dann öffne ich die Index-HMO-Datei und erstelle das grundlegende HTML-Dokument Lassen Sie uns weitermachen und den Titel ändern. Es wird Model Box sein, und dann müssen wir die CSS- und die Jovscopt-Dateien verknüpfen Okay, als Nächstes führe ich das Projekt im Browser aus. Außerdem werde ich den Editor und den Browser nebeneinander platzieren . Okay, als Nächstes hole ich mir den CDN-Link für das Telefon, weil wir im gesamten Projekt einige Telefon-Symbole verwenden im gesamten Projekt einige Telefon-Symbole Lass uns weitermachen und den Link von hier kopieren. Dann öffne ich das Link-Tag und füge den CDN-Link hier Okay, als Nächstes werde ich die Google Phones-Website besuchen, weil wir eines der Google-Telefone verwenden Lassen Sie uns weitermachen und nach Google Phone suchen, das Weeks Made for Display heißt. Ich wähle diese verschiedenen Stile aus, kopiere dann den Link von hier und füge ihn in den Kopf Elon ein. Ordnung, wir sind bereit, mit dem Schreiben des HT-Mail-Markups zu beginnen Ich werde eine Entwicklung erstellen, die der Container innerhalb der Entwicklung sein wird Container innerhalb der Entwicklung sein Ich werde eine weitere Tiefe öffnen, es werden Inhalte sein, in denen wir Erfolg haben werden. Dann füge ich Patson mit den Klassen PTN und dann Success BTN Der Text wird „Absenden“ lauten. Als nächstes brauchen wir eine Modellbox. Ich werde Entwicklung mit den Klassen Success, Model und Model erstellen . Das ist Fügen Sie hier ein weiteres P ein , das als Modellsymbol dienen wird. Und wir brauchen noch eine weitere Klasse Success , die hier ein Telefonsymbol einfügt, das dann ein festes FA-Häkchen sein wird festes FA-Häkchen sein Nach dem Symbol brauchen wir Model Top, in dem wir H ein Überschriftenelement haben, den Text Success. Auf das Model Top wird Model Patson folgen. Wir werden hier auch eine weitere Klasse haben, Pots, Erfolg. Fügen wir einen Topf mit einem Klassenmodell BTN ein. Ich werde das Typattribut auf Pots setzen. Fügen wir den Text ein. Mach weiter. Gut, jetzt brauchen wir dasselbe für den Fehler. Lassen Sie uns diesen Code duplizieren und einige Änderungen vornehmen. Wir müssen Erfolg in Misserfolg umwandeln. Lassen Sie uns das eigentlich für jeden Erfolg tun. Als Nächstes müssen wir scheitern. Ändern Sie auch den Text der Schaltfläche. Es wird wieder T sein. Außerdem müssen wir das Symbol ändern. Okay, ich denke, das sucht nach dem HTML-Markup. Lass uns weitermachen und anfangen, das CSS zu schreiben. Ich wähle jedes Element aus, setze dann den Rand und füge beide Elemente auf Null Als Nächstes stelle ich die Größe des Felds auf das Rahmenfeld ein. Ich werde die Telefonfamilie ändern. Es wird das Telefon sein, von dem wir die Wochen für die Anzeige ausgewählt haben . Es wird Sansoriflas sein. Kann sehen, dass die Standardstile auf die Elemente angewendet werden. Als Nächstes wähle ich Modelle aus und verberge sie mit „Keine anzeigen“. In Ordnung, kümmern wir uns um den Container. Ich setze die Breite auf 100% und die Höhe auf 100 Grad. Ändere auch die Hintergrundfarbe. Lassen Sie uns hier die Farbe 264653 verwenden. Es ist grüne Farbe. Dann brauchen wir ein Leinbuch. Und um die Artikel zu zentrieren, brauchen wir Justife-Inhaltssensor und ein Zeilenzentrum Okay, danach wähle ich PTN. Dann setzen wir den Spielraum auf drei Ram. Die Breite wird 15 Ram betragen. Ich werde die Höhe auf vier Ram setzen. Die Muster wurden größer. Setzen wir den Grenzradius auf drei Ram. Dann entfernen Sie den Standard-Porter, machen Sie keinen, wir brauchen einen Schatteneffekt. Stellen wir Box Shadow 201 Ram ein, drei Ram. Und verwende hier R für eine schwarze Farbe mit geringerer Opazität. Ordnung, als Nächstes setze ich die Schriftgröße auf einen Rame Schriftstärke nach Polde wird in Großbuchstaben umgewandelt. Lassen Sie uns einen Abstand von 2,1 Ram haben. Dann ändere die Farbe. Es wird weiß sein. Und setze den Cursor auch auf den Zeiger. Jetzt müssen wir die Hintergründe für die Schaltfläche separat ändern . Die erste wird die Farbe 298 sein. Was die zweite Taste angeht, werde ich eine rote Farbe verwenden, nämlich Fd575 Okay, die Knöpfe sind bereit. Als Nächstes erstelle ich den Fakt, indem ich Transform Translate Y verwende. Stellen wir ihn auf 2.2 Ram ein. Sobald ich auf die Schaltfläche klicke, bewegt sie sich. Wir haben das mit einer aktiven Pseudoklasse gemacht. Als Nächstes werde ich die Knöpfe verstecken und mich um die Modelle kümmern Stellen wir auf 25 Ram ein, dann wird die Höhe 30 Ram sein. Als Nächstes werde ich die Hintergrundfarbe ändern. Setzen wir sie auf E. Ich setze die Position auf absolut. Dann benötigen wir die relative Position für das übergeordnete Element, das ein Container sein wird. Stellen wir beide Modelle in die Mitte. Eigenschaften oben und links müssen 50% betragen und außerdem müssen wir Translator mit den Werten -50% und -50% transformieren mit den Werten -50% und -50% . Beide Modelle werden in der Mitte der Seite platziert Als Nächstes werde ich Flexbox verwenden. Lass uns die Richtung ändern, in der es die Spalte sein wird. Wir müssen die Elemente vertikal ausrichten. Lassen Sie uns also eine Zeile in der Mitte platzieren. Außerdem werde ich das Element mithilfe des Randradius abrunden. Wir brauchen dann Box Shadow mit den Werten 01 Ram, drei Ram. Und die schwarze RGBA-Farbe mit geringerer Opazität. Okay, danach wähle ich das Modellsymbol aus. Lassen Sie uns die Breite auf sechs Ram setzen, dann wird die Höhe ebenfalls sechs Ram sein. Wir brauchen eine absolute Position. Dann setze ich auf Position zwei minus drei Ram. Da ich den Radius als Port verwenden werde, machen wir das Element abgerundet. Als Nächstes wähle ich das Symbol selbst aus. Lassen Sie uns die Telefongröße erhöhen. Ich werde es auf 2,5 Ram einstellen. Die Farbe wird weiß sein. Hier wählen die Symbole das Fehlersymbol aus und setzen die Hintergrundfarbe auf Rot. Außerdem verwende ich Schatten mit den Werten 0,5 Ram, zwei Ram, und die Farbe wird 240-96-5608 sein, und der Deckkraft 0,3. Dann brauchen wir eine Flexbox, um das Symbol zu zentrieren Lassen Sie uns das Inhaltszentrum und ein Einzelpostenzentrum begründen. Okay, das Symbol ist fertig und es sieht ziemlich gut aus. Als Nächstes. Als Nächstes werde ich mich um das Model Top kümmern. Nehmen wir an, es hat eine Breite von 100% und die Höhe wird 20 Ram betragen. Dann verwende ich Display Flex mit dem Justify Content Center und einem Line Item Center. Lassen Sie uns weitermachen und Modal Top H auswählen , ein Überschriftenelement. Ich werde das Telefon vergrößern, es wird 2,5 Ram sein. Dann ändere die Farbe. Dann mache ich 264653 draus. Dann werde ich dich von der Unterseite entfernen. Lassen Sie uns die Breite auf 100% setzen. Die Höhe wird bei Bedarf zehn Ram betragen. Auch hier die Flexbox mit dem Justify Content Center und dem Center Align Items. Als Nächstes wähle ich Model, Bottom, Fail und ändere die Hintergrundfarbe. Sie sehen eine rote Farbe. Eigentlich brauchen wir einen kleineren Grenzradius. Lassen Sie uns den Grenzradius auf 00 setzen. Dann ein Ram und wieder ein Ram. Okay? Das Problem ist behoben. Als Nächstes wähle ich den Batson aus. Wir setzen auf zehn Ram, dann wird die Höhe auf drei Ram, Grenzradius auf zwei Ram gesetzt Als Nächstes werde ich den Standardrahmen entfernen, ihn zu keinem machen und die Hintergrundfarbe ändern. Verwenden Sie hier die weiße Farbe. Als Nächstes müssen wir den Text in Großbuchstaben umwandeln. Außerdem wird die Schriftstärke fett sein. Dann verwende ich einen Schatteneffekt mit Werten 012 und der RGB-Farbe Wir setzen den Mauszeiger auf Zeiger. Okay, danach werde ich die Farbe der Unterseite ändern Stellen wir es auf Rot. Als Nächstes müssen wir einen Klick-Effekt erzeugen. Lassen Sie uns die Translation um 0,2 mm transformieren. Okay, jetzt haben wir hier einen Klick-Effekt. Ordnung, danach wähle ich Fail Model aus und verstecke es für eine Weile. Um das Erfolgsmodell anzupassen, wählen wir das Erfolgssymbol und setzen die Hintergrundfarbe auf Grün. Dann brauchen wir Box Shadow 0,5 m, zwei Ram. Und das RGBA 421-57-1403 und das Opacity 0.3 In Ordnung, als Nächstes wähle ich Model Bottom Success und das Opacity 0.3 In Ordnung, als Nächstes wähle ich Model Bottom Success und ändere die Hintergrundfarbe. Es wird grün sein. Eigentlich sehen beide Modelle gut aus. Als Nächstes werde ich die Farbe des Booms ändern, sie wird grün sein. Ordnung. Das war's, alles ist bereit. Jetzt werde ich dieses Display loswerden. Keiner von hier. Ich werde Modelle mithilfe von Maßstab verstecken. Außerdem benötigen wir Opazitäts - und Sichtbarkeitseigenschaften. Als Nächstes müssen wir die Knöpfe zurückbekommen. Jetzt ist es Zeit zu benutzen. Lassen Sie uns die variablen Schaltflächen erstellen und die Schaltflächen mithilfe der Curry-Select-All-Methode auswählen. Wir brauchen ihren Klassennamen, BTN. Als Nächstes benötigen wir die zweite Variable. Es werden Modelle sein. Wir brauchen hier ein Modell, auch das Modell BTN. Fügen wir hier das Modell PTN ein. Wir können bereits alle Elemente sehen. Schauen wir uns die Knöpfe an. Mit der Forage-Methode müssen wir der Schaltfläche das Event-Listening hinzufügen Wir klicken auf Event, ich werde hier eine Callback-Funktion einfügen Sobald wir auf die Schaltfläche geklickt haben, müssen wir uns die Modelle erneut mit der Futtermethode ansehen die Modelle erneut mit der Futtermethode Eigentlich brauchen wir hier den Parameter modellieren , den wir hier benötigen. In dieser If-Anweisung müssen wir die Klassenliste und das erste Element in der Klassenliste definieren Klassenliste und das erste Element in der Klassenliste Dann müssen wir es aufteilen und das erste Element auswählen wenn es der Klasse aus der BTN-Klassenliste entspricht Ich meine wieder das zweite Element, wir müssen es in einen Gedankenstrich aufteilen und dann das erste Element auswählen Wenn diese Bedingung zutrifft, müssen wir die Modellbox zeigen. Wir brauchen hier eine Methode hinzufügen und stattdessen hier die Klasse öffnen, die in der CSS-Datei verwendet wird. Wir müssen open auswählen, gefolgt vom Modell, und wir müssen es sichtbar machen. Wählen wir diesen Code aus. Außerdem brauchen wir hier Opazität und Sichtbarkeit. Wir brauchen den Maßstab eins und die Opazität eins und die Sichtbarkeit muss sichtbar sein Opazität eins und die Sichtbarkeit Außerdem werde ich alle 0,5 Sekunden wechseln. Wie Sie sehen können, funktionieren die Schaltflächen einwandfrei und die Modelle werden angezeigt, sobald wir darauf klicken. Als Nächstes müssen wir sie verstecken. Sobald wir auf die Schaltflächen der Modelle geklickt haben, müssen wir uns die BTNs des Modells ansehen Als Nächstes werde ich dem Modell BTN einen Event-Listener hinzufügen. Mit Click Event müssen wir Class Open aus dem Modell entfernen Wenn ich jetzt auf die Schaltfläche klicke, die Modellboxen okay, alles funktioniert einwandfrei. Und mit diesem Projekt sind wir fertig. Lass uns weitermachen. 9. Projekt 4 - Anmelden/Anmelden-Formular mit Illustrationen: Ordnung, es ist also an der Zeit, weiterzumachen und mit der Erstellung unseres nächsten Projekts zu beginnen, bei dem es sich um ein Anmeldeformular mit animierten Fehlern und Illustrationen handeln wird . Wenn Sie die Website erstellen, benötigt fast jede Seite diese Art von Vorlage. Ich denke, dass dieses Projekt für Sie sehr nützlich sein wird. Lassen Sie uns weitermachen und das Projekt beschreiben. Wir haben hier eine Vorlage für ein Anmeldeformular. Auf der linken Seite können Sie die Abbildungen sehen. Was die rechte Seite betrifft, haben wir hier Impo-Felder mit einem Muster Unten finden Sie einen Link zur Anmeldung. Wenn ich darauf klicke, wechselt das Anmeldeformular zum Formularzeichen, hübsch mit einigen animierten Fehlern. Wir können also auf diese Weise zu den verschiedenen Formularen wechseln. Also gut, lassen Sie uns über dieses Projekt sprechen, lassen Sie uns anfangen. Ich habe einen neuen Ordner auf dem Desktop erstellt , in dem ich einen Ordner mit Illustrationsbildern habe. Lassen Sie uns weitermachen und den Ordner im VS-Code öffnen und dann unsere Arbeitsdateien für HTML erstellen. Dann brauchen wir CSS-Dateien, wir brauchen hier eine Datei für Javascript. Öffnen Sie dann die Index-HTML-Datei und erstellen Sie ein grundlegendes HTML-Dokument. Ich werde den Titel ändern. Es werden Anmelde - und Anmeldeformulare sein. Dann werde ich die Dateien verknüpfen. Die erste wird eine CSS-Datei sein. Außerdem brauchen wir hier eine Javascript-Datei. Lassen Sie uns den Namen der Datei im Quellattribut angeben . Lassen Sie uns weitermachen und das Projekt über den Live-Server im Browser ausführen . Dann werde ich den Editor und den Browser so nebeneinander platzieren . Um unseren Arbeitsprozess komfortabler und einfacher zu gestalten , werde ich die CDN, JS-Website von Fonts besuchen, um den Link zu finden, da wir einige Font-LOM-Symbole verwenden Lassen Sie uns das Link-Tag öffnen und das CDN hier einfügen. Außerdem werde ich Google-Telefone verwenden. Besuchen wir die Google Phones-Website. Ich werde nach einem Telefon mit dem Namen signa negative suchen. Ich weiß nicht, ob ich richtig ausspreche Wählen wir verschiedene Stile fügen dann den Link in das Head-Element ein Okay, ich fange an, das H-Mail-Markup zu erstellen. Wir brauchen hier einen Container , in den ich den Tag einfügen werde , der ein Form-Wrapper sein wird Dann formen wir den Wrapper links und auch rechts. Fügen wir hier H eine Überschrift mit dem Text sign up ein Formular mit dem Klassenformular Anmeldung. Lassen Sie uns das Action-Attribut loswerden. Ich füge hier eine Eingabegruppe , in der wir ein Eingabe-Tag mit dem Typ Text haben werden. Und wir brauchen ein Platzhalterattribut, in das ich den Benutzernamen einfügen werde Als Nächstes füge ich Ihr Phonosomicon ein, das FA sein wird, festes FA Dann werde ich die Eingabegruppe zweimal duplizieren. Und lassen Sie uns den Typ hier ändern. Es wird E-Mail sein. Wir brauchen hier E-Mail. Und ändere auch das Symbol. Es wird ein Umschlag sein. Dann müssen wir hier das Passwort eingeben. Der Platzhalter wird Passwort sein. Und ändere auch das Symbol. Es wird gesperrt. Okay, hier haben wir die Eingabefelder und die Symbole. Fügen wir hier ein Unterteil mit der Klassenform BTM ein, die wir hier eingeben müssen, es wird ein Button sein Was den Text angeht, werde ich ihn hier einfügen. Melde dich an. Okay, danach brauchen wir einen Link mit dem Anmeldelink für die Klasse. Lassen Sie uns die Textanmeldung einrichten. Okay, machen wir weiter und kopieren diesen Code und fügen ihn unten in den Formular-Wrapper Richtig, ich werde hier einige Änderungen vornehmen. Wir müssen uns anmelden. Was das Link-Element betrifft, so wird es Registrierung sein. Und ändere auch den Klassennamen. Okay, ich glaube, das ist es. Alles ist bereit. Ich werde anfangen, das CSS zu schreiben. Lassen Sie uns jedes Element mit einem Sternchen auswählen. Zuallererst werde ich die Marge festlegen und beide Werte auf Null setzen Als Nächstes werden wir die Größe von Boxen festlegen, was als Border Box bezeichnet wird. Ich werde die Gliederung auf „Keine“ setzen. Als Nächstes müssen wir keine Textdekoration haben. Ich werde die Telefonfamilie wechseln. Es wird ein negatives Signal sein, oder wie Sie sehen können, werden die Standardstile auf die Elemente angewendet Als Nächstes wähle ich das HTML-Element aus und verringere die Fehlergröße , da wir M als Maßeinheit verwenden werden M als Maßeinheit verwenden In diesem Fall entspricht ein m zehn Pixeln. Okay, lassen Sie uns weitermachen und mit der Anpassung des Containers beginnen . Ich werde die Breite auf 100% setzen Die Höhe wird 100 Porthöhe sein. Als Nächstes benötigen wir eine Hintergrundfarbe. Es wird EC zwei sein. Als Nächstes wähle ich Foam Wrapper aus. Setzen wir seine Position auf absolut. Dann benötigen wir die relative Position für das übergeordnete Element , das ein Container ist. Lassen Sie uns die obere Position auf 50% setzen. Dann müssen wir die linke Position auf 50% setzen. Und wir müssen das Element mit Transform Translate mit den Werten -50% und erneut -50% zentrieren Transform Translate mit den Werten -50% und erneut -50% Jetzt wird der Inhalt in der Mitte der Seite platziert Als Nächstes stelle ich die Breite ein. Es werden 100 Ram sein. Was die Höhe angeht, werde ich sie auf 65 Ram setzen. Ändere auch die Hintergrundfarbe, sie wird weiß sein. Hier haben wir den Formular-Wrapper, lassen Sie uns Flex-Bücher verwenden Ich werde die Nachteile mithilfe des Randradius abrunden. Sagen wir zwei Ram. Erzeuge auch einen Schatteneffekt. Geben wir 0,3 Ram ein, drei Ram, und dann wird die Farbe RGBA, 326-01-1207 mit einer Opazität 0,3 sein. Alles klar, 326-01-1207 mit einer Opazität 0,3 sein. Alles klar, jetzt Lassen Sie uns weitermachen und links den Formular-Wrapper auswählen. Außerdem brauchen wir hier einen Wrapper, richtig, weil diese Elemente einige ähnliche Stile haben werden Legen wir bei zwei 50% fest, dass die Höhe 100% sein wird . Als nächstes brauchen wir Flex-Bücher Wir müssen die Richtung ändern, es wird die Spalte sein, ich werde den Inhalt ausrichten auf die Mitte setzen und Elon-Elemente ebenfalls in die Mitte setzen. Lassen Sie uns den Text außerdem in der Mitte ausrichten. Okay, die Formulare werden in der Mitte der Verpackungen platziert. Als Nächstes wähle ich H-Überschriftenelemente aus. Lassen Sie uns die Telefongröße erhöhen. Es werden sechs sein. Dann brauchen wir Col 47f, es ist blau Dann setzen wir die Marge auf minus fünf Ram. Null, dann sechs Ram und Null. Die Überschriften sehen ziemlich gut aus. Als Nächstes wähle ich die Eingabegruppe aus. Eingabesatz mit 225 Ram. Dann wird die Höhe fünf Ram betragen. Setzen wir die Marge auf einen Ram, Null. Als Nächstes werde ich den Rand loswerden und dann den unteren Rand definieren. Es wird 0,2 RAM Solid mit einer RGBA-Farbe 641-23-2505) und einer Opazität von 0,5 sein. Okay, danach setze ich die Lass uns die Schriftgröße ändern. Es wird 1,4 Ram sein. Außerdem brauchen wir eine Polsterung auf der rechten Seite. Stellen wir 22 Ram ein. Dann werde ich die Hintergrundfarbe ändern. Es wird transparent sein, die Eingabefelder sehen besser aus. Als Nächstes wähle ich die Eingabe mit Platzhalterattribut Lass uns die Farbe ändern. Es wird blau sein und schafft auch etwas Abstand zwischen den Buchstaben. Und ändere die Schriftgröße, 3.021.2 Ram. Außerdem benötigen wir eine Schriftstärke von 500. Lassen Sie uns abschließend Text transformieren. In Großbuchstaben. In Ordnung, als Nächstes wähle ich Eingabegruppeneingabe aus, wobei der Fokus auf der Klasse Ich werde die Rahmenfarbe ändern. Stellen wir es auf Blau ein. Sobald wir die Eingabefelder fokussiert haben, ändert der Rand unten seine Farbe. Ordnung, danach nehme ich das Eingabegruppenelement ab. Ich bin im Telefon der Icons, Position absolut. Dann brauchen wir die relative Position. Für das übergeordnete Element, das die Eingabegruppe ist, definieren wir die oberste Position. Es werden 50% sein, dann brauchen wir die richtige Position. Ich werde es auf 2,5 Ram setzen. Außerdem müssen wir Y mit -50% transformieren , um das Element zu zentrieren Als Nächstes werde ich die Telefongröße ändern. Es werden 1,3 Ram sein. Lass uns die Farbe ändern, lass uns sie auf Blau setzen. Hier haben wir die Telefonautomatik gut platziert. Als Nächstes wählen wir die Schaltfläche und stellen die Breite auf 20 Ram Dann wird die Höhe 4,5 Ram betragen. Ich werde den oberen Rand auf zwei Ram setzen. Als Nächstes müssen wir keine Grenze haben. Ich werde den Randradius verwenden, um die Schaltfläche abgerundet zu machen, 3025 Ändern Sie die Hintergrundfarbe. Blaue Farbe, die Knöpfe sehen gut aus. Die nächste Farbe wird Weiß sein. Stellen Sie die Texttransformation so ein, dass Großbuchstaben geändert werden. Die Schriftgröße wird 1,4 Ram betragen. Dann müssen wir die Schriftstärke fett angeben und auch etwas Abstand zwischen den Buchstaben verwenden. Als Nächstes werde ich einen Schatteneffekt erzeugen. Sagen wir Box Shadow, 20,5 Ram, ein Ram. Und das RTP ist eine Farbe, ich meine diese eine blaue Farbe mit einer Deckkraft von 0,4. Die Tasten sehen Ich setze den Cursor auf den Zeiger. Ordnung. Danach werde ich mit Transform Translate Y auf den Fakt klicken. Stellen wir ihn auf 2.2 Ram Sobald wir auf die Schaltfläche klicken, haben wir hier einen Klick-Effekt Okay, lassen Sie uns weitermachen und das Link-Element auswählen. Ich setze die Position auf absolut, die unterste Position wird es sein. Was die Telefongröße angeht, werde ich sie auf 1,6 RAM einstellen. Lassen Sie uns Text in Großbuchstaben umwandeln. Stellen Sie das Telefon außerdem fett ein. Als Nächstes benötigen wir die Schriftgröße. Es wird 1,6 Ram sein. Ändere die Farbe, ich werde blaue Farbe verwenden. Als Nächstes wählen wir den Anmeldelink aus. Ich setze die rechte Position auf vier m. Für den Sinus im Link benötigen wir die linke Position vier. Okay, eigentlich sind beide Formulare ich anmelde, und Anmeldeformulare fertig. Sie sehen ziemlich gut aus. Als Nächstes wähle ich den Links-Formular-Wrapper aus und blende ihn mit Opacity Zero und Visibility Das Anmeldeformular ist Hedum. Jetzt werde ich es hier für den Wrapper-Hintergrund platzieren. Lassen Sie uns dieses Element auswählen. Definieren wir diese Position. Die absolute Minatbreite wird 100 m betragen . Die Höhe wird ebenfalls 100 m betragen Als Nächstes brauchen wir eine Hintergrundfarbe, sie wird blau sein. Außerdem werde ich den Grenzradius 15 m verwenden . Wir haben hier den blauen Hintergrund. Lassen Sie uns weitermachen und die linke Position auf -40% setzen , sodass die oberste Position bei 90% liegen wird . Als Nächstes müssen wir ändern, dass der Ursprung der Transformation rechts unten sein wird Um das Element in Z-Richtung zu drehen, beträgt der Wert -40 Grad Eigentlich müssen wir die Position auf -90% einstellen. Okay, jetzt müssen wir den Teil des Hintergrunds mit Overflow Heatum ausblenden den Teil des Hintergrunds mit Overflow Heatum Wir haben hier einen schönen Hintergrund. Als Nächstes füge ich Ihr Bild ein, das als Illustration dienen soll. Wählen Sie Bild eins aus. Lassen Sie uns den Klassennamen beibehalten, es wird das Bild links sein und das All-Attribut entfernen. Lass uns weitermachen und Bild auswählen. Geben wir uns mit 235 Fram zufrieden, dann ist die Position absolut Im Moment ist das Bild nicht sichtbar. Lassen Sie uns einen Index auf 100 setzen. Hier haben wir das Bild. Ich wähle das Bild links aus, obere Position wird 25% sein, dann brauchen wir, dass die linke Position 8% beträgt. Alles klar, damit das Bild gut platziert ist. Jetzt müssen wir uns um das Javascript kümmern. Lassen Sie uns eine Variable erstellen, sie wird ein Container sein. Ich werde dieses Element als Abfrageselektormethode auswählen Abfrageselektormethode Wir müssen hier den Klassennamen-Container angeben. Lass es uns zweimal duplizieren. Die zweite Variable wird Sinus-Up-Link sein. Fügen wir den Klassennamen ein. Außerdem müssen wir hier Sinus im Link den Klassennamen ändern. Jetzt brauchen wir einen Anmeldelink mit dem Event-Listener. Platzieren wir hier, klicken Sie auf Event und auch auf die Callback-Funktion Wir benötigen einen Container gefolgt von der Klassenlisteneigenschaft und wir müssen zur Klassenliste navigieren Das passiert beim Klicken. Jetzt müssen wir diese Klasse verwenden, um den Elementen einige Stile hinzuzufügen. Ich meine den Hintergrund des Formular-Wrappers. Lassen Sie uns die Funktion Rotate Z mit dem Wert 130 Grad transformieren mit dem Wert 130 Grad Außerdem müssen wir übersetzen, um das Element zu verschieben. Der Wert wird 15 Ram sein und dann wieder 15 Ram in beide Richtungen, I, x und y. Sobald ich klicke, bewegt sich der Hintergrund. Wir müssen hier den Übergang hinzufügen , um den Effekt glatter zu machen Wenn wir jetzt klicken, bekommen wir die schöne und coole Bewegung des Hintergrunds Als Nächstes müssen wir uns um den Formular-Wrapper kümmern , der mit der Klasse navigiert Im Moment ist das Element versteckt und wir müssen es sichtbar machen Lassen Sie uns erneut den Übergang mit einer gewissen Verzögerungszeit verwenden. Wir benötigen standardmäßig wieder einen Übergang ohne Verzögerung. Wenn ich klicke, wird das Anmeldeformular schön angezeigt. Jetzt müssen wir uns um das Bild kümmern. Lassen Sie uns wieder die Klasse Navigate verwenden , gefolgt vom Bild links. Klassenname. Lassen Sie uns die Opazität auf Null setzen und die Sichtbarkeit ausblenden Wir brauchen hier die Funktion transform translate y. Wir müssen das Bild leicht bewegen und auch den Übergang mit einer Gesamtdauer von 0,5 Sekunden verwenden . Wir benötigen standardmäßig einen Übergang für das linke Bildelement mit einer Verzögerungszeit. Sobald ich klicke, wird sich das Bild gut verstecken. Das Formular wird angezeigt. In Ordnung, alles funktioniert gut. Als Nächstes müssen wir uns um den Link zum Signieren kümmern . Um die Klasse zu entfernen, navigieren Sie vom Container aus. Wenn ich jetzt auf Sign up klicke und mich dann im Hintergrund anmelde , wird die Standardposition wieder angezeigt. Jetzt müssen wir uns um den Formrapper kümmern , richtig? Wir müssen die Opazität auf Null setzen und dann die Sichtbarkeit ausblenden, um das Zeichen im Formular zu verbergen Das ist Übergang. Als Nächstes füge ich dem Element standardmäßig einen Übergang hinzu. Bei einer verzögerten Zeit wird es 1 Sekunde sein. Wenn ich auf den Link klicke, wird das Anmeldeformular gut ausgeblendet und dann erscheint es, sobald wir erneut auf den Link klicken. Okay, das Einzige, was ich tun muss, ist, das zweite Bild für das Anmeldeformular zu verwenden . Hier haben wir das zweite Bild. Lassen Sie uns das Bild rechts auswählen, seine oberste Position auf 17% setzen, seine oberste Position auf 17% setzen dann wird die rechte Position bei 7% liegen. Wir müssen also Y mit einem Wert minus fünf des Bildes transformieren . Ich setze die Deckkraft auf Null und die Sichtbarkeit auf ausgeblendet Wir müssen das Bild anzeigen. Sobald wir auf den Link geklickt haben, den wir hier benötigen, geht zur Klassennavigation, gefolgt vom Bild, oder? Name der Klasse. Setzen wir die Deckkraft auf eins und die Sichtbarkeit auf sichtbar Als Nächstes müssen wir die Funktion Translate Y transformieren. Der Wert wird Fünf sein. Wir brauchen einen Übergang für einen reibungslosen Effekt. Außerdem brauchen wir Verzögerungszeit. Als Nächstes müssen wir hier standardmäßig einen Übergang hinzufügen. Wenn ich jetzt auf die Links klicke, wird alles gut funktionieren. Eigentlich müssen wir die Wartezeit von hier aus loswerden. Okay? Alles funktioniert gut. Und wir haben hier eine coole Vorlage zum Signieren und Signieren des Formulars. Lass uns weitermachen. 10. Projekt 5 - Website-Header: Okay, es ist also Zeit, unser nächstes Projekt zu erstellen. In diesem Abschnitt werden wir einen schönen und modernen Header der Website erstellen . Heute muss jede moderne Website einen coolen Header haben. In diesem Abschnitt erfahren Sie also, wie Sie den Header der Landingpage erstellen und anpassen können. Lassen Sie uns weitermachen und das Projekt beschreiben. Der Header besteht aus verschiedenen Teilen. In der oberen linken Ecke haben wir einen Logo-Code und erstellen ihn. Dann haben wir in der oberen rechten Ecke eine einfache Navigation. Wir haben nur drei Navigationselemente mit Hover-Effekt. Was die Mitte der Seite betrifft, haben wir hier den wichtigsten Teil Sie können hier die Lampe sehen, die tatsächlich mit reinem HTML und CSS erstellt wurde. Wir haben hier keine Bilder. Die Lampe ist beleuchtet, und Sie können auch hier unten den Schatten sehen. Außerdem haben wir hier ein paar verschiedene Textelemente, und Sie können hier auch einen Texthintergrund sehen , der meiner Meinung nach wirklich nett und cool aussieht Okay, das war's mit diesem Projekt, lassen Sie uns weitermachen und anfangen, es zu bauen Ich habe einen neuen Ordner auf dem Desktop erstellt. Lass uns weitermachen und es im VS-Code öffnen. Und dann werde ich unsere Arbeitsdateien für HTML und CSS erstellen . Wir werden nur diese beiden Technologien verwenden. Lassen Sie uns die Idextt-HTML-Datei öffnen und das grundlegende HTML-Dokument erstellen Ich werde den Titel ändern. Lass uns deine Landingpage einfügen. Und dann werde ich die CSS-Datei verlinken. Lassen Sie uns weitermachen und das Projekt und den Browser öffnen und dann den Editor so nebeneinander im Browser platzieren . Okay. Ich werde die Google Fonts-Website besuchen, weil wir während des gesamten Projekts Google Pont verwenden gesamten Projekts Gehen wir also auf die Website und suchen wir dann nach dem Telefon namens verkauft Ich werde von hier aus ein paar verschiedene Stile auswählen . Ich werde nach einem anderen P suchen, das PT Sans Narrow sein wird. Lassen Sie uns diese Stile auswählen. Als Nächstes suche ich nach Passion One und schnappe mir diese Kacheln. Dann kopiere ich den Link von hier, und wir müssen ihn einfügen und wir müssen ihn in das Head-Element einfügen. Ordnung. Jetzt können wir anfangen , das HTML-Markup zu schreiben Wir brauchen einen Container, in dem ich eine Landung erstellen werde. Lassen Sie uns hier n Elemente mit der Klasse NofBar einfügen, in die ich ein Logo einfügen werde Es wird Span Element, CAC, Code Als Nächstes werde ich eine Navigation erstellen. Lassen Sie uns hier Link-Elemente einfügen. Es wird zu Hause sein. Der zweite Punkt werden Tutorials sein. Was den dritten Punkt betrifft, werde ich Ihre Kurse einfügen. Okay. Danach brauchen wir ein Banner, in das ich die Entwicklung einfüge. Es wird eine Lampe sein. Dann brauchen wir hier Schatten. Das sind die Teile der Lampe. Die nächste wird eine Glühbirne sein. Dann werden wir Licht haben. Der nächste wird Schatten sein. In Ordnung. Danach benötigen wir H ein Überschriftenelement mit der Klassenbanner-Überschrift. Der Text wird gelernt. Als Nächstes benötigen wir eine Bannerüberschrift. Eigentlich war die erste Überschrift die Hauptüberschrift. Dies ist nur die Überschrift mit dem Textcode und dem Erstellen. Eigentlich brauchen wir hier H zwei Überschriftenelemente und nicht das T. Dann haben wir einen Absatz mit der Klasse Banner Paragraph. Fügen wir hier Webentwicklung und Webdesign ein. Also das ist es eigentlich. Das HTML-Markup ist fertig und wir müssen anfangen, das CSS zu schreiben Lassen Sie uns einige Standardstile erstellen. Wir brauchen jedes Element. Lassen Sie uns Margin und Padding auf Null setzen. Als Nächstes müssen wir die Größe der Box an die Rahmenbox anpassen. Außerdem müssen wir die Dekoration aus dem Text entfernen. Dann lass uns die Telefonfamilie einrichten. Es wird das Telefon mit dem Namen PT Sans Narrow Sansif sein PT Sans Narrow . Als Nächstes werde ich die Frontgröße des H-tal-Elements ändern , da wir RM als Maßeinheit verwenden werden RM als Maßeinheit verwenden In diesem Fall entspricht ein M zehn Pixeln. Danach kümmern wir uns um den Container. Ich setze auf 100%, die Höhe wird 100 Topfhöhe sein. Dann werde ich den Hintergrund ändern. Es wird ein linearer Gradient sein. Die erste Farbe wird zwei, C zwei, drei, eins sein. Dann wird die nächste 2b2c3 eins sein. Also hier haben wir den Hintergrund. Danach kümmere ich mich um die Landung. Lassen Sie uns die Breite auf 95% setzen. Die Höhe wird 90% betragen. Dann werde ich die Hintergrundfarbe ändern. Es wird 2425 vor neun sein. Und dann brauchen wir Shadow. Sagen wir es zwei Null, eins M vier RM und die RGBA-Farbe Die Farbe wird schwarz mit einer Opazität von 0,3 sein. Also hier haben wir den Header. Wir müssen es in der Mitte platzieren. Lassen Sie uns das Anzeigeraster verwenden und dann die Elemente in der Mitte platzieren. Das Element wird also in der Mitte der Seite platziert. Als Nächstes werde ich mich um die Nordbar kümmern. Stellen wir uns auf 100% ein. Dann wird die Höhe 15 ml betragen, wir brauchen Pudding. Stellen wir es auf Null und zehn RAM auf der linken und rechten Als Nächstes werde ich Bücher aus Flachs verwenden. Lassen Sie uns die Elemente in der Mitte ausrichten, also müssen wir den Inhalt mit einem Leerraum zwischen den Werten begründen Inhalt mit einem Leerraum zwischen den Werten Hier haben wir also das Logo und die Navigationselemente. Als Nächstes werde ich mich um das Logo kümmern. Ich bin in diesem Panel. Lasst uns die Telefonfamilie ändern. Es wird Leidenschaft eins sein, kursiv. Dann werde ich die Telefongröße auf acht RAM erhöhen. Außerdem muss die Farbe weiß sein. Dann werde ich den Abstand zwischen den Buchstaben vergrößern. Sagen wir es 2,2 RAM. Außerdem brauchen wir Textschatten. Es wird 0,51 RAM sein, RTB ist schwarz, und die Opazität wird 0,1 sein Also hier haben wir das Logo. Danach wähle ich die Span gefolgt vom After-Element aus. Lassen Sie uns den Inhalt auf leer setzen. Wir benötigen die Linie auf dem Logo und setzen die Position auf absolut Außerdem benötigen wir die relative Position für das Pfundelement. Lassen Sie uns die Breite auf 9,5 setzen, die Höhe wird 0,5 betragen. Außerdem benötigen wir eine Hintergrundfarbe, sagen wir 2444 Als Nächstes stelle ich die Position auf 50% ein. linke Position wird Null sein, und wir müssen die Zentrierung mithilfe von Transform durchführen Übersetze Y -50%. Okay. Lass uns über das Logo sprechen. Kümmern wir uns um die Navigationselemente. Wählen wir die Navigation gefolgt vom Link-Element aus. Ich werde die Telefongröße auf zwei RAM einstellen, dann brauchen wir einen Rand auf der rechten Seite. Stellen wir es auf fünf M Außerdem benötigen wir Farbe. Ich mache fünf, zwei, fünf, vier, fünf, hier haben wir die Navigationspunkte. Als Nächstes werde ich den Abstand zwischen den Buchstaben vergrößern . Als Nächstes benötigen wir das Link-Element mit dem Chart-Selektor. Ich werde das erste Linkelement auswählen. Setzen wir die Farbe auf d d d. Das erste Element hat also standardmäßig eine andere Farbe. Danach werde ich einen Hover-Effekt erzeugen. Ich ändere die Farbe beim Hover, sagen wir 2444, und verwende dann den Übergang für Eigentlich müssen wir die Farbe ändern, wir brauchen hier d d d. In Ordnung, also, das war's mit der Navigation. also, das war's Jetzt müssen wir uns um die Mitte der Seite kümmern . Ich bin in der Lampe. Setzen wir die Position auf absolut. Als Nächstes benötigen wir die relative Position für das übergeordnete Element. Lassen Sie uns die obere Position auf Null setzen, dann wird die linke Position bei 50% liegen, und wir müssen das Element mit Transform, Translate x -50% zentrieren Translate x -50% Als Nächstes benötigen wir eine Breite 20 M. Ich werde die Höhe auf 30 setzen Und verwende hier eine temporäre Hintergrundfarbe. Also hier haben wir die Lampe. Im Moment sieht es nicht nach einer Lampe aus, aber das werden wir reparieren. Wählen wir den Draht aus. Ich stelle die Breite auf 2,4 m ein. Dann brauchen wir die Höhe, es werden zehn Ram sein. Als Nächstes benötigen wir eine Hintergrundfarbe von 1224. Als Nächstes setze ich die Position auf absolut. Dann müssen wir die oberste Position auf Null setzen. linke Position wird 50% betragen, und außerdem müssen wir das Element mit Transform, Translate x -50% zentrieren Transform, Translate x -50% Danach werde ich einen Schatteneffekt verwenden. Stellen wir es auf 0,51 RAM und die RGBA-Farbe mit geringerer Eigentlich ist der Draht nicht sichtbar, weil uns dieses Element überhaupt fehlt Eigentlich müssen wir diese Elemente in der Lampe platzieren diese Elemente in der Lampe und außerdem müssen wir hier Kabel hinzufügen. Okay. Also hier haben wir das Kabel. Es sieht ziemlich gut aus. Als Nächstes kümmere ich mich um den Schatten. Lass uns weitermachen und dieses Element auswählen. Ich werde die Breite auf 100% setzen. Die Höhe wird zehn sein. Dann brauchen wir eine Hintergrundfarbe. Es wird für eine Weile schwarz sein. Setzen wir die Position auf absolut. Als Nächstes müssen wir zehn RAM positionieren . Also hier haben wir den Schatten. Lassen Sie uns weitermachen und den Grenzradius auf 50%, 50%, dann auf Null und Null setzen . Wie Sie sehen können, hat der Schatten jetzt eine bessere Form. Stellen wir den Hintergrund auf einen linearen Farbverlauf ein. Ich werde hier die erste Farbe für d16 verwenden. Dann wird der nächste Wert 2425 vor neun sein. Hier haben wir den Schatten , der viel besser aussieht. Lassen Sie uns einen Schatteneffekt verwenden. Ich werde es auf 0,5 RAM pro RM einstellen und die Farbe wird RGPA-Schwarz mit geringerer Opazität sein Jetzt sieht der Farbton ziemlich gut aus. Als Nächstes wähle ich den Farbton nach dem Element aus. Lassen Sie uns den Inhalt auf leer setzen, dann müssen wir die Breite auf 100% setzen. Die Höhe wird zwei RAM betragen. Dann setze ich die Position auf absolut. Lassen Sie uns auch die untere Position definieren. Es wird minus einen RAM sein. Als Nächstes brauchen wir die linke Position, sie wird Null sein. Außerdem brauchen wir den Grenzradius. Es werden 50% sein. Was die Hintergrundfarbe angeht, werde ich sie auf zwei D, drei, zwei, drei, sieben setzen . In Ordnung, wie Sie sehen können. Jetzt sieht das Element wie 100% des Schattens aus. Als Nächstes kümmere ich mich um die Glühbirne. Nehmen wir an, es ist mit zwei drei RAM. Dann wird die Höhe 2,5 Ram betragen. Außerdem brauchen wir hier eine Hintergrundfarbe, sie wird weiß sein. Dann setze ich die Position auf absolut. Die unterste Position wird 8,5 RAM sein, die linke Position betrifft, werden es 50% sein, und wir müssen das Element mit Transform, Translate x -50% zentrieren mit Transform, Translate x -50% Also hier haben wir die Glühbirne. Wir müssen es rund machen. Lassen Sie uns das tun, indem wir den Grenzradius mit den Werten Null, Null , 50% und 50% verwenden. Okay. Also hier haben wir die Glühbirne. Als Nächstes füge ich hier einen Kastenschatten mit den Werten 0,5 R zwei RAM hinzu, dann die RGBA-Farbe 2505, 2505, dreimal Es ist eine weiße Farbe und die entgegengesetzte Farbe 2,3. Okay. Also haben wir hier einen schönen Effekt. Lassen Sie uns über den Bub sprechen. Lass uns weitermachen und uns um das Licht kümmern. Nehmen wir an, es hat eine Breite von 100%. Dann wird die Höhe 50 RM betragen. Als Nächstes werde ich den Hintergrund ändern. Lassen Sie uns wieder den linearen Gradienten verwenden. Die erste Farbe wird RGBA, 2505, 2505, 55 sein und die Dann verwende ich transparente Farbe, und als dritte verwenden wir wieder und als dritte wir Ordnung. Jetzt müssen wir die Position des Elements ändern. Setzen wir es auf absolut. Dann werden die beiden Positionen 19 M sein . Dann brauchen wir die linke Position, es werden 50% sein. Auch hier müssen wir das Element mit Transform, Translate x -50% zentrieren mit Transform, Translate x -50% Jetzt ist das Element gut positioniert. Als nächstes benötigen wir den Grenzradius mit den Werten 30%, 30%, Null und Null. Als Nächstes müssen wir einen Filter mit Unschärfefunktion verwenden, und der Wert wird ein RM sein Also hier haben wir das Licht. Verringern wir die Opazität auf 0,3. Jetzt haben wir hier diesen schönen und coolen Lichteffekt. Danach wähle ich Schatten, lass uns die Breite auf 40 RAM setzen, dann wird die Höhe acht RAM sein, als nächstes brauchen wir Hintergrund. Lassen Sie uns wieder den linearen Farbverlauf verwenden. Wir brauchen hier die Richtung nach rechts, dann wird die erste Farbe transparent sein. Dann haben wir schwarze Farbe und wieder transparent. Also hier haben wir den Schatten. Wir müssen ihn positionieren. Lassen Sie uns die Position auf absolut setzen. Dann wird die unterste Position -45 RAM sein. Was die linke Position angeht, werde ich sie auf 50% setzen Auch hier müssen wir das Element mit Transform, Translate X -50% zentrieren Transform, Translate X -50% Ordnung. werde ich das Element um die X-Achse drehen. Der Wert wird -70 Grad sein. Wie Sie sehen können, ist das Element gedreht. Jetzt verwende ich den Grenzradius mit einem Wert von 50% Außerdem benötigen wir einen Filter mit Unschärfefunktion und der Wert wird zwei sein Ordnung, wie Sie sehen können, haben wir hier einen coolen Schatteneffekt Lassen Sie uns wieder die Opazität verringern und sie auf 0,3 setzen. Okay, das ist es. Die Lampe mit ihrem Schatten ist fertig. Es sieht cool aus. Jetzt müssen wir uns der Hauptüberschrift zuwenden. Setzen wir die Position auf absolut. Wenn Sie dann eine Position von 25% eingenommen haben, wird die linke Position bei 26% liegen. Lass uns die Telefonfamilie ändern. Ich werde Oswald, San Serif benutzen. Die Telefongröße wird 20 RM betragen. Also hier haben wir die Hauptüberschrift. Als Nächstes werde ich den Text in Großbuchstaben schreiben. Dann brauchen wir Farbe Verwenden wir hier 4142, sieben. Also hat sich die Farbe geändert. Als Nächstes benötigen wir einen Buchstabenabstand. Es werden zehn RM sein. Danach werde ich die Opazität verringern. Machen wir 0,5 draus. Dann werde ich den Hintergrund ändern. Verwenden wir den linearen Farbverlauf. Die erste Farbe wird 41427 sein. Dann brauchen wir Transparenz mit 70%. Als Nächstes verwende ich die Eigenschaft Webkit . Der Hintergrundclip wird Text sein Und dann verwende ich Webkit, Textfeldfarbe, die transparent sein wird Wie Sie sehen können, haben wir hier eine wirklich nette und coole Tatsache Als Nächstes werde ich mich um die Überschrift des Banners kümmern. Lassen Sie uns diese Position auf absolut setzen. Die unterste Position wird 35 sein, dann brauchen wir die richtige Position. Ich werde es auf 23% setzen. Machen wir die Familie zur ersten Leidenschaft, Cursive. Außerdem werde ich das Telefon vergrößern. Es werden acht RM sein. Also hier haben wir die Überschrift. Lassen Sie uns Text in Großbuchstaben umwandeln und dann die Farbe ändern. Es wird BBB sein. Dann brauchen wir einen Buchstabenabstand. Es werden zwei RAM sein. Verwende auch einen Schatteneffekt. Nehmen wir an, der Textschatten beträgt 0,5 RAM pro RAM und die schwarze RGBA-Farbe mit einer Deckkraft von 0,3, tatsächlich Die Überschrift sieht ziemlich gut aus. Als Nächstes nehme ich hier mit. Des Absatzes. Lassen Sie uns den Klassennamen ändern und hier einige Änderungen vornehmen. Die Potsposition wird 30 RM sein, dann wird die richtige Position 24% sein. Ich werde die Telefonfamilie wechseln. Lassen Sie uns hier Oswald Sarif verwenden Dann müssen wir die Telefongröße ändern, es wird das R sein. Also, ändern Sie hier das Telefongewicht. Ich werde es auf 300 setzen. Entfernen Sie als Nächstes die Eigenschaft Tax Transform und ändern Sie auch die Farbe. Es wird sechs C sein, sechs D sieben. Und dann den Steuerschatten loswerden, auch den, lass uns den Abstand verringern, machen wir 0,1 RM draus. In Ordnung. Also das ist es. Der Header der Website sieht ziemlich gut aus. Ich hoffe, dir hat dieses Projekt gefallen. Lass uns weitermachen. 11. Projekt 6 - Blog-Karte: Ordnung, es ist Zeit, weiterzumachen und mit der Erstellung unseres nächsten Projekts zu beginnen. In diesem Abschnitt werden wir eine gut aussehende und moderne Blockkarte erstellen. Lassen Sie uns weitermachen und das Projekt beschreiben. Wie Sie sehen können, besteht die Karte aus verschiedenen Elementen. Wir haben hier ein Bild auf der linken Seite der Karte, dann einige Textelemente Und wir haben hier auch den Button, der uns sagt, mehr zu lesen Wenn ich auf die Schaltfläche klicke, wird die Karte erweitert. Und wir werden hier drei weitere verschiedene Karten über einige Touren bekommen . Wenn ich mit der Maus über die Karten fahre, erhalten wir diesen schönen und coolen Effekt Wie Sie sehen können, wurde der Inhalt der Schaltfläche geändert. Jetzt sagt es uns, dass ich weniger gelesen habe. Wenn ich auf die Schaltfläche klicke, wird die Karte minimiert. In Ordnung, lassen Sie uns über dieses Projekt sprechen. Lass uns anfangen. Ich habe einen neuen Ordner auf dem Desktop erstellt. Lassen Sie uns weitermachen und es im VS-Code öffnen und dann unsere Arbeitsdateien erstellen. Wir benötigen drei verschiedene Dateien, für HTML, für CSS und für Java-Skript. Dann öffne ich die indizierte HTML-Datei und wir müssen ein grundlegendes HTML-Dokument erstellen Lass uns weitermachen und den Titel ändern. Es wird ein Blockwagen sein. Dann werde ich die CSS- und eine Skriptdatei verknüpfen. Lassen Sie uns das Script-Tag öffnen und hier den Namen der JARS-Datei angeben . Okay, lassen Sie uns weitermachen und das Projekt über den Live-Server im Browser öffnen . Und dann werde ich den Editor und den Browser nebeneinander platzieren . Als Nächstes hole ich mir den CDN-Link für das Telefon, also die Symbole, weil wir diese Symbole in diesem Projekt verwenden Lassen Sie uns den Link kopieren, das Link-Tag im Head-Element öffnen und das CDN hier einfügen Als Nächstes werde ich die Google Phones-Website besuchen. Um einige Telefone von Google Phones abzurufen, suchen wir nach einem Telefon namens Roboto Condensed Ich werde ein paar verschiedene Stile auswählen dann nach einem anderen Telefon suchen , nämlich End Lassen Sie uns erneut verschiedene Stile auswählen, dann kopiere ich den Link von hier und füge ihn alleine in den Kopf ein. Ordnung, wir sind bereit, mit dem Schreiben des HTML-Markups zu beginnen Wir müssen ein Container-Open-Tag erstellen , das blockiert werden soll Wir brauchen ein Blockbild, in dem ich das Image-Tag öffnen werde. Lass uns weitermachen und das Bild aus dem Bilderordner auswählen . Es wird Bild eins sein. Nach dem Bild müssen wir dann den Inhalt der Blockkarte erstellen. Dieses Element wird H drei Überschriftenelemente enthalten. Es wird das Datum 27. Januar 2023 sein. Als Nächstes benötigen wir H ein Überschriftenelement. Es wird neu erforscht werden. Außerdem brauchen wir einen Absatz mit etwas Dummy-Text. Als Nächstes werde ich eine Schaltfläche mit der Klassennamenkarte BTN erstellen der Klassennamenkarte BTN Der Typ wird Button sein. Außerdem werde ich hier ein weiteres Element platzieren, dann lesen und dann überspannen. Als Nächstes werde ich ein Objekt erstellen, in dem wir Blöcke haben werden, wir werden drei verschiedene Elemente haben. Da es sich um dein Bild handelt, wähle ich das Bild aus dem. Ordner „Bilder“. Es wird eins sein. Dann brauchen wir das Span-Element mit dem Text Explore zu eins. Und wir brauchen auch Phonic. Es wird FA, Solid Magnifying Co, Magnifying Co, Ich werde diesen Artikel zweimal duplizieren , weil wir drei verschiedene Artikel haben Lassen Sie uns weitermachen und einige Änderungen vornehmen. Wir müssen zwei reißen. Wir müssen hier die Namen der Bilder ändern. Okay, das ist es eigentlich. Das HTML-Markup wird erstellt. Und jetzt müssen wir uns mit dem CSS befassen. Zuallererst wähle ich jedes Element mit einem Sternchen Lassen Sie uns den Rand und das Padding für beide auf Null setzen. Dann müssen wir die Größe der Box an die Rahmenbox anpassen. Außerdem werde ich die Telefongröße des H-Timal-Elements verringern , weil wir M als Maßeinheit verwenden In diesem Fall entspricht ein m zehn Pixeln. Lassen Sie uns weitermachen und den Container auswählen. Ich werde die Breite auf 100% setzen dann wird die Höhe 100 Fuß Höhe betragen. Lass uns den Hintergrund ändern. Ich werde die lineare Gradientenfunktion verwenden. Die Richtung wird 145 Grad sein, dann wird die Farbe 6193 sein Dann brauchen wir hier 0% Die zweite Farbe wird 814 sein Wir brauchen hier den Prozentwert, 75. Okay, wir haben hier einen schönen und coolen Hintergrund. Lass uns die Flexbox benutzen. Um den Inhalt zu zentrieren, müssen wir das Inhaltszentrum und ein Einzelpostenzentrum, also den Inhalt zentriert, ausrichten. Eigentlich werde ich die Größe der Bilder verringern , bei denen die Breite auf 25 Frames festgelegt ist. Dann wird die Höhe 35 Frames betragen. Dann wähle ich das Bild selbst aus, bei dem die Breite auf 100% eingestellt und die Höhe auf 100% eingestellt ist . Außerdem benötigen wir ein Object-Feed-Cover. Jetzt haben wir bessere Ergebnisse. Lassen Sie uns fortfahren und Block Tours auswählen und Flex Books verwenden. Bilder werden horizontal nebeneinander platziert. Lassen Sie uns fortfahren und Block Card Image auswählen. Ich werde 30 Ram einstellen, dann wird die Höhe ebenfalls 32 Ram sein. Als Nächstes müssen wir das Kartenbild selbst auswählen. Ich meine das Bildelement. Stellen wir bei 100% ein und die Höhe wird 100% sein. Außerdem müssen wir wieder die Objektfüße abdecken. Als Nächstes wähle ich Block Card und setze die Breite auf 55%. Dann wird die Höhe 80% betragen . Lass uns die Hintergrundfarbe ändern. Ich werde RGB, 40, 40 verwenden. Dann verwende ich den Randradius, um die Ecken abzurunden. 3.022,5 Ram. Wir haben hier die Karte mit dunklem Hintergrund. Danach werde ich etwas Polsterung verwenden. 3.022,5 Rams erzeugen einen Schatteneffekt . Stellen wir den Schatten auf 201,4 Ram, acht Ram ein, und die Farbe wird RGB, 40, 40, 40 sein Was die Opazität angeht, werde ich 2,8 sagen und auch hier brauchen wir RGB acht. Okay, jetzt haben wir ein viel besseres Ergebnis. Jetzt werde ich den Hintergrund mit dieser linearen Grading-Funktion für das Bild verwenden Hintergrund mit dieser linearen Grading-Funktion für das Bild Außerdem werde ich es mithilfe des Randradius abrunden. Als Nächstes setzen wir die Position auf absolut. Außerdem benötigen wir die relative Position für das übergeordnete Element. Setzen wir die Position auf 15%, dann wird die linke Position minus zehn Ram sein. Wir müssen Y um -50% transformieren . Außerdem werde ich den Maßstab des Bildes festlegen 2.6 Als nächstes haben wir hier das Bild Nehmen wir den Grenzradius für das Bild selbst. Und wir müssen auch die Opazität verringern. Machen wir einen Wert von 0,5. Jetzt sieht das Bild ganz gut aus. Machen wir weiter und kümmern uns um die Blocktouren. Ich setze die Gewichtung auf 100% verwende dann die Option „Inhalt mit Leerzeichen rechtfertigen “. Wir brauchen einen gleichmäßigen Abstand zwischen den Elementen. Hier haben wir die Artikel schön platziert. Dann werde ich die Position absolut setzen. Die unterste Position wird sechs Ram sein . Für die Position werde ich sie auf Null setzen. Die Touren sind unten aufgeführt. Lassen Sie uns fortfahren und Karteninhalt sperren auswählen. Ich setze seine Position auf absolut. Dann setze ich die beiden Positionen auf 1%, die Position wird 15% sein . Dann brauchen wir eine Transformation mit einer Skalenfunktion. Ich werde den Wert auf 0,8 setzen . Als Nächstes werde ich mich um die Überschriften kümmern Ich meine die erste Überschrift, H drei. Stellen wir die Telefonfamilie auf Roboto Condensed San Serif ein. Dann wird das Telefon zwei Ram groß sein. Außerdem brauchen wir Farbe, es wird 999 sein. Dann werde ich unten etwas Platz machen, hier haben wir die erste Überschrift. Als Nächstes werde ich diesen Code duplizieren und hier die Telefonfamilie ändern, da wir die Telefongröße ändern müssen Es wird 3,5 RAM sein. Dann müssen wir das Gewicht des Telefons auf 300 erhöhen und auch die Farbe ändern, es wird weiß sein. Lassen Sie uns über die Elemente der zweiten Überschrift sprechen. Als Nächstes nehme ich mir das Jahr des Absatzes vor. Lassen Sie uns diesen Code kopieren und den Selektor ändern. Es wird so sein, ich werde die Telefongröße auf 1,6 RAM einstellen und auch die Farbe ändern Es wird 777 sein. Als Nächstes benötigen wir eine Breite von 35 RAM. Ändern Sie auch den Rand am unteren Rand, sodass er drei Ram ergibt. Das ist ungefähr der Absatz. Als Nächstes nehme ich den Paton ab. Machen wir uns auf den Weg mit 216 Ram. Dann wird die Höhe vier Ram betragen. Eigentlich müssen wir diesen Hintergrund mit linearer Gradientenfunktion aufnehmen. Wir brauchen hier die gleiche Hintergrundfarbe. Als Nächstes setze ich die Grenze auf „Keine“. Ändere auch die Farbe, mach sie weiß. Dann werde ich die Telefonfamilie ändern. Dann wird es sein, kann es Sansorif sein? Der Knopf sieht ziemlich gut aus. Ich habe die Telefongröße auf 1,4 Ram eingestellt. Verwandle auch Text in Großbuchstaben. Dann werde ich etwas Abstand zwischen den Buchstaben schaffen, also 0,1 Ram. Außerdem werde ich die Schaltfläche mit einem Randradius mit dem Wert zwei Ram abrunden . Okay, der Button sieht ziemlich gut aus. Ich werde einen Schatteneffekt verwenden. Lassen Sie uns den Boxschatten auf 10 m1M setzen. Und die RGBA-Farbe, ich meine die schwarze Farbe mit Opazität 0.1 Außerdem werde ich den Cursor ändern, ihn zeigen lassen Der Button sieht ziemlich gut aus. Jetzt kümmere ich mich um den Artikel Blocktouren. Ich meine, die Autos da unten. Setzen wir den Grenzradius auf einen Ram. Dann werde ich einen Schatteneffekt verwenden. Lassen Sie uns den Blockschatten auf 01 Ram, fünf Ram setzen. Und wieder RGB, eine schwarze Farbe mit Opazität 0,3 Als Nächstes setze ich den Cursor auf den Zeiger Als Nächstes werde ich mich um die Bilder kümmern. Gehen wir mit der linearen Gradientenfunktion einen Schritt zurück. Die Richtung wird 135 Grad sein und die Farbe wird 6193 sein Dann wird der nächste Wert 1356 bis sieben sein, der Grenzradius liegt bei einem Wir benötigen den gleichen Grenzradius für das Bild selbst. Außerdem werde ich die Opazität verringern. Machen wir 0,5. Jetzt sehen die Bilder ziemlich cool aus. Danach werde ich mich um die Span-Elemente im Artikel kümmern . Lassen Sie uns die Position auf absolut setzen. Wir benötigen die relative Position für das übergeordnete Element. Dann wird die obere Position 50% sein, die linke Position wird -35% sein Wir müssen das Element mit Transform Translate Y -50% zentrieren . Dann werde ich die Telefonfamilie ändern Lass uns Candi benutzen. Hier haben wir die Panelelemente. Lassen Sie uns das Telefon vergrößern Es wird 1,8 Ram sein. Ändern Sie das Gewicht des Telefons, setzen wir es auf 500. Außerdem müssen wir Text in Großbuchstaben umwandeln. Dann werde ich etwas Abstand zwischen den Buchstaben schaffen und die Farbe ändern. Mach es weiß. Eigentlich stimmt hier etwas nicht. Wir haben meine verpasst. Jetzt sieht alles gut aus. Wir müssen den Text in Z-Richtung mit dem Wert -90 Grad drehen Z-Richtung mit dem Wert -90 Grad Jetzt sieht alles ziemlich gut aus. In Ordnung, lass uns diesen Selektor kopieren und dein Element verwenden. Nehmen wir 26 Ram an, dann wird die Höhe ebenfalls sechs Ram betragen Ich werde die Hintergrundfarbe ändern. Es wird 1683d sein. Ich brauche hier das Tacho-Schild. Als Nächstes müssen wir uns um die Position kümmern. Wir müssen das Symbol in der Mitte platzieren. Also müssen wir es so positionieren, dass es zu 50% links liegt und die Transformation mit den Werten -50% und erneut -50% transformieren. Die Symbole werden in der Mitte des Objekts platziert Ich werde die Elemente mit einem Randradius von 50% abrunden . Dann müssen wir das Symbol mit Flexbox in der Mitte platzieren Wenn Sie das Inhaltszentrum und eine Zeile begründen. Lassen Sie uns auch die Größe des Telefons auf 2,5 Ram erhöhen . Ändere die Farbe Es. Wir. In Ordnung, hier haben wir die Icons. Lassen Sie uns einen Schatteneffekt mit den Werten 01 Ram, drei Ram verwenden , und die Farbe wird schwarz mit einer Deckkraft von 0,1 sein . In Ordnung, jetzt werde ich den Hover-Effekt beim Hover erzeugen Wir werden die Opazität verringern. Lassen Sie uns die Opazität auf Null setzen und die Sichtbarkeit ausblenden. Sobald wir den Mauszeiger über die Elemente bewegen, sollte das Symbol angezeigt werden Lassen Sie uns den Mauszeiger über die Effekte bewegen, gefolgt vom oberen Bild. Eigentlich müssen wir diesen Selektor von hier abrufen und einfügen Nach dem Bild. Wie werden wir die Opazität ändern? Es wird 0,05 sein. Außerdem brauchen wir hier einen Übergang. Schnappen wir uns diesen Selektor. Kümmere dich jetzt um das Puntos-Symbol. Lassen Sie uns die Opazität ändern und eine daraus machen. Und wir brauchen auch sichtbare Sichtbarkeit. Dann der Übergang 0,3 Sekunden, und wir benötigen auch einen Verzögerungszeitpunkt von 1 Sekunde. Wie Sie sehen können, haben wir hier einen wirklich coolen und schönen Hover-Effekt Ordnung, danach müssen wir hier die Kapazität auf Null reduzieren und die Sichtbarkeit verbergen Wir müssen die Gegenstände verstecken. Da wir etwas ändern müssen, wird die Größe der Karte 45% betragen. Was die Höhe angeht, wird die Höhe 40% betragen. Als Nächstes müssen wir die Skalierungsfunktion von hier aus entfernen und auch die Position des Bildes ändern. Es wird 50% der obersten Position sein. Was die linke Position angeht, so wird es minus fünf Ram sein. Das Bild ist gut positioniert. Als nächstes müssen wir uns um die inhaltliche Änderung kümmern. Die oberste Position wird bei 15% liegen . Was die linke Position angeht, werde ich sie auf 40% setzen. Wir müssen die Skalierung loswerden , alles sieht gut aus. Kümmern wir uns um den Batson. Wir brauchen deine Position als Verwandter. Und dann der Index 100, weil der Button deaktiviert war, jetzt ist er wieder aktiviert. Okay, ich denke, alles ist bereit. Und jetzt können wir anfangen , Javascript zu schreiben. Lassen Sie uns eine variable Schaltfläche erstellen und dieses Element mithilfe der Abfrageselektormethode auswählen dieses Element mithilfe der Abfrageselektormethode Wir müssen hier den Klassennamen der Unterseite angeben. Dann müssen wir Block Car auswählen. Lassen Sie uns hier den Klassennamen angeben. Jetzt müssen wir der Schaltfläche mit einem Klickereignis einen Event-Listener hinzufügen Schaltfläche mit einem Klickereignis einen Event-Listener Außerdem benötigen wir hier eine Callback-Funktion. Sobald wir auf die Schaltfläche klicken, müssen wir der Blockkarte eine neue Klasse hinzufügen Wir brauchen hier eine gemietete Klasse, dann die Togl-Methode, die neue Klasse wird geändert Ordnung, jetzt müssen wir die Blockkarte mit Klassenwechsel auswählen Wir müssen hier neue Stile hinzufügen. Wir müssen die Breite ändern, sie wird 55% betragen. Außerdem müssen wir die Höhe ändern, sie wird 80% betragen Verwenden wir den Übergang für einen gleichmäßigeren Effekt Sobald wir den Button eingesammelt haben, wird die Karte schön erweitert Als Nächstes werde ich mich um das Bild kümmern. Benutze erneut Cl Change. Wir müssen das Element mithilfe der Transform Translate Y-Funktion mit dem Wert -50% verschieben Translate Y-Funktion mit . Außerdem müssen wir auf 0,6 skalieren Als Nächstes müssen wir die Position auf 15% ändern Die beiden Positionen für die linke Position werden minus zehn Ram sein Außerdem brauchen wir hier einen Übergang. Sobald wir klicken, bewegt sich das Bild nach oben, die Größe wird geändert. Als nächstes müssen wir uns um den Inhalt kümmern. Lass uns die oberste Position ändern. Für die linke Position werden es 1% sein. Ich werde es auf 15% setzen. Dann verwende Transform mit der Skalierungsfunktion. Es wird 0,8 sein . Außerdem benötigen wir einen Übergang für einen gleichmäßigeren Effekt, der Inhalt ist fertig Als Nächstes werde ich mich um die Tors-Gegenstände kümmern. Wählen wir das Objekt Block Tours aus und machen es sichtbar, indem wir Opazität eins und Sichtbarkeit sichtbar Als Nächstes brauchen wir einen Übergang. Sobald wir klicken, werden die Elemente angezeigt. Aber wie Sie sehen können, benötigen wir hier etwas Verzögerungszeit. Ich werde jedem Tourartikel separat die Verzögerungszeit hinzufügen. Wählen wir den ersten aus und stellen den Übergang auf alle 0,3 Sekunden und die Verzögerungszeit auf 0,3 Sekunden ein. Lassen Sie uns diesen Code für den zweiten Artikel duplizieren. Die Verzögerungszeit wird 0,5 Sekunden betragen. Was den letzten Artikel betrifft, so werden es 0,7 Sekunden sein. Wie Sie sehen können, haben wir hier einen wirklich coolen Effekt. Das einzige, was wir tun müssen, ist den Inhalt des Buttons zu ändern. Wir müssen einen ternären Operator verwenden. Dieser Zustand ist wahr. Dann müssen wir die Span-Elemente auswählen und den Textinhalt ändern. Es wird weniger sein. Sonst ist es mehr. Wir brauchen die Aussage mit dem Wert mehr. Wenn ich jetzt klicke, ändert sich der Inhalt. Jetzt funktioniert bei diesem Projekt alles einwandfrei. Wir sind fertig. Ich hoffe es hat dir gefallen. Es war interessant und nützlich. Lassen Sie uns mit Answer weitermachen , um die nächste zu erstellen. 12. Projekt 7 - Navigationsmenü mit Kreisen: Ordnung, es ist also Zeit, weiterzumachen und unser nächstes Projekt zu erstellen. In diesem Abschnitt werden wir ein Navigationsmenü mit HTML, CSS und Javascript erstellen. Wie Sie sehen können, haben wir hier eine Schaltfläche in der Mitte der Seite. Wenn ich auf diese Schaltfläche klicke, werden ein paar verschiedene Navigationselemente mit einem schönen und coolen Effekt angezeigt. Wie Sie sehen können, wurde der Inhalt der Schaltfläche geändert. Jetzt heißt es schließen. Wenn ich erneut auf die Schaltfläche klicke, werden die Navigationselemente ausgeblendet. Ich denke, das Projekt wird interessant und nützlich sein. Lass uns weitermachen und anfangen. Ich habe einen neuen Ordner auf dem Desktop erstellt , der momentan leer ist. Lassen Sie uns weitermachen und diesen Ordner im VS-Code öffnen. Dann unsere Arbeitsdateien, die erste wird Index-HTML sein. Dann werden wir Style-CSS haben. Außerdem benötigen wir eine Datei für Javcript, es werden Skripte sein Lassen Sie uns weitermachen und die Index-HTML-Datei öffnen und das grundlegende HTML-Dokument erstellen Ich werde den Titel ändern. Lassen Sie uns Ihr CSS-Menü einfügen. Dann werde ich CSS- und Charles Grit-Dateien als Script-Tag verknüpfen CSS- und Charles Grit-Dateien als Script-Tag und wir müssen hier den Namen der Chiles-Datei angeben hier den Namen der Chiles-Datei Okay, lassen Sie uns weitermachen und das Projekt über den Live-Server im Browser öffnen das Projekt über den Live-Server im Browser Und dann werde ich den Editor nebeneinander im Browser platzieren . Okay, jetzt werde ich mir eine Google-Schrift schnappen. Besuchen wir die Google Fonts-Website und suchen wir dann nach einer Schrift namens Mukta Ich werde mir von hier aus verschiedene Stile schnappen. Lassen Sie uns den Link kopieren und ihn dann in das Head-Element einfügen. Ordnung, wir sind bereit, mit dem Schreiben des HDML-Markups zu beginnen Schreiben des HDML-Markups zu Wir brauchen hier einen Container , in den ich ein Menü einfügen werde Wir brauchen einen Here-Button mit einem Typ-Button und dann brauchen wir Here Class. Es wird Menü BTM sein. Außerdem brauchen wir hier zwei Stellen, Span, Element, Menü und auch in einem anderen Bereich Zum Schluss haben wir hier den unteren Teil. Als Nächstes benötigen wir die Navigationselemente. Ich werde das Element mit einer Klassennavigation öffnen. Lassen Sie uns hier Link-Elemente einfügen. Der erste wird zu Hause sein, dann werde ich ihn ein paar Mal duplizieren. Der zweite wird ungefähr sein. Dann werden wir Projekte haben. Der nächste wird Block sein und der letzte wird eine Galerie sein. Okay, ich denke, alles ist fertig und jetzt können wir anfangen, das CSS zu schreiben. Lassen Sie uns jedes Element auswählen und den Rand festlegen und beide auf Null setzen. Als Nächstes müssen wir keine Textdekoration haben. Wir brauchen die Größe der Box so , dass sie der Rahmenbox entspricht. Ich werde die Telefonfamilie für jedes Element auf Muta einstellen für jedes Element auf Muta Ordnung, als Nächstes setze ich die Telefongröße des HTML-Elements auf 62,5%, sodass ein m zehn Pixeln entspricht Weil wir m als Maßeinheit verwenden werden, die Breite des Containers auf 100%. Außerdem benötigen wir die Höhe, es wird 100 x Topfhöhe sein Dann werde ich die Hintergrundfarbe ändern. Lass uns F 1f1f1 verwenden. Als nächstes brauchen wir ein Menü. Ich werde die Breite auf 70 Ram setzen. Die Höhe wird ebenfalls 70 m betragen. Ich werde die Position auf absolut setzen. Dann benötigen wir die relative Position für das übergeordnete Element, das ein Container ist. Um das Element zu zentrieren, müssen wir die obere Position auf 50% und die Position auf 50% setzen. Und wir benötigen die Transformation, um die Breite um 50% zu verschieben und erneut um -50%. Jetzt ist das Menü zentriert Als Nächstes benötigen wir das Span-Element der Menüschaltfläche. Ich meine das zweite, wir müssen es für eine Weile verstecken. Dann gehen wir weiter und wählen das Menü PTN. Die Breite wird 15 Ram betragen. Dann wird die Höhe ebenfalls 15 Ram betragen. Als Nächstes wird die Hintergrundfarbe grün sein. Ich meine 238. Lassen Sie uns weitermachen und die Position auf absolut setzen. Und dann müssen wir die Position auf 50% setzen. Diese Position wird bei 50% liegen. Auch hier müssen wir das Element mit Transform Translate zentrieren. -50% nochmal -50% Außerdem werde ich die Grenze loswerden. Wie Sie sehen können, ist die Schaltfläche zentriert Lassen Sie uns sie mithilfe des Randradius abrunden Dann stelle ich die Telefongröße auf 2,5 Fram ein. Dann wird der Teich gewagt. Außerdem müssen wir den Text in Großbuchstaben umwandeln und dann ändern, dass die Farbe weiß ist. Ich werde eine Flexbox benutzen. Lassen Sie uns das Inhaltscenter von Justify und das Center für Einzelposten verwenden. Außerdem werde ich einen kleinen Schatteneffekt verwenden. Stellen wir es auf 0,5 Ram ein. Dann brauchen wir zwei Ram. Die Farbe wird 351-90-2140 sein und die Opazität 0,4. Außerdem brauchen wir Crouser Ordnung, danach müssen wir Link-Elemente wir Lassen Sie uns die Position auf absolut setzen. Dann wird die Breite 12 sein. Die Höhe wird ebenfalls 12 sein. Als Nächstes brauchen wir die Hintergrundfarbe, die wir verwendet haben. Die Farbe wird weiß sein. Wir werden die Elemente abrunden, dann die Telefongröße auf 1,8 RAM einstellen und Flex Box verwenden. Wir müssen den Inhalt mithilfe von Justify Content Center und Line Items Center zentrieren. In Ordnung, als Nächstes verwende ich Shadow. Ich nehme diesen Wert von hier und füge ihn für das Link-Element ein. Ordnung, danach werde ich ersten Link-Elemente mit dem Child Selector auswählen Lassen Sie uns die obere Position auf 15% setzen, dann wird die linke Position 75% sein. Außerdem müssen wir translate -50% erneut transformieren -50% Lassen Sie uns diesen Code ein paar Mal kopieren die Anzahl der Auswahlen ändern Insgesamt haben wir fünf verschiedene Artikel. Die Position der zweiten Artikel 20% und 20% liegen. Als nächstes wird bei 20% und 20% liegen. Als nächstes haben wir hier 60% Für die linke Position werden 20% sein . Dann beim vierten Artikel haben wir 85,65%. Was den letzten Artikel betrifft, haben wir hier, 45% und dann 85% Wie Sie sehen können, sind die Artikel gut ausgerichtet Jetzt müssen wir etwas Javascript schreiben. Lassen Sie uns das variable Menü BTN erstellen. Ich werde dieses Element mithilfe der Abfrageselektor-Methode auswählen mithilfe der Abfrageselektor-Methode Lassen Sie uns hier den Klassennamen angeben, Menü BTN. Dann werde ich eine weitere Variable erstellen, die ein Menü sein wird Wir müssen dem Menü einen Event-Listener hinzufügen BTN Bei einem Klickereignis müssen wir das Klickereignis erstellen. Das ist ein Ort hier. Funktion hinten. Sobald wir auf das Menü BTN geklickt haben, müssen wir dem Menü mithilfe der Total-Methode eine neue Klasse hinzufügen Menü mithilfe der Total-Methode Diese Klasse wird geändert und wir müssen diese Klasse in einer CSS-Datei verwenden , die den Selektor kopiert, den wir Beim ersten Span-Element müssen wir Display None für das erste Element verwenden und wir müssen hier die letzte Änderung übergeben Was das zweite Element betrifft, müssen wir es anzeigen, wir brauchen Display Flex. Sobald wir auf das Menü klicken, wechselt der Inhalt vom Menü zum Schließen. Als Nächstes müssen wir hier die Position auf 50% und die linke Position ebenfalls auf 50% einstellen. Wir müssen die Elemente zensieren. Sie werden hinter der Menütaste landen. Dann werden wir sie mit dem Klassennamen ändern anzeigen. Wir müssen allen fünf Elementen Änderungen hinzufügen. Eigentlich sind die Artikel nicht ganz gut platziert, weil wir diesen Text von hier aus loswerden müssen. Ordnung, jetzt müssen wir unteren Teil des Menüs mithilfe der Index-Eigenschaft anzeigen. Bei 30 bis 100 haben wir hier den unteren Rand, wie Sie sehen können Sobald wir auf die Menüschaltfläche klicken, werden die Navigationselemente an ihren Positionen platziert. Jetzt müssen wir den Übergang verwenden, um den Effekt glatter zu machen . Wir brauchen hier alle Dann wird die Dauer 0,2 Sekunden betragen. Außerdem werde ich die kubische Si-Funktion verwenden , um den Effekt schöner zu machen Sobald wir auf das Menüsymbol klicken, werden die Elemente gut angezeigt Eigentlich werde ich verschiedene Verzögerungszeiten für die Elemente hinzufügen verschiedene Verzögerungszeiten für die Elemente um den Effekt cooler zu machen. Wenn ich jetzt klicke, bekommen wir das schön cool. Tatsache ist, dass ich standardmäßig auch einen Übergang hinzufügen werde. Jetzt funktioniert alles perfekt und mit diesem Projekt sind wir fertig. Lass uns weitermachen. 13. Projekt 8 - Website-Header mit Verläufen: Ordnung, es ist Zeit, weiterzumachen und mit der Erstellung unseres nächsten Projekts zu beginnen In diesem Abschnitt werden wir eine Kopfzeile der Landingpage mit CSS-Farbverläufen erstellen Wie Sie sehen können, haben wir hier einen Website-Header mit schönen und coolen CSS-Verlaufsfarben Auf der linken Seite finden Sie verschiedene Ebenen mit Farbverläufen Sie können auch die Überschrift sehen, gefolgt von der Schaltfläche. der rechten Seite sehen Sie hier eine einfache Navigationsleiste mit drei Navigationselementen mit drei Navigationselementen , auf die das Banner folgt. Sie können hier die Überschriftenelemente sehen. Eine der Überschriften hat diese schönen und coolen CSS-Farbverläufe Unten finden Sie drei Phonosomicons. Sie stellen die Links zu den sozialen Medien dar. Okay, lassen Sie uns über dieses Projekt sprechen. Lass uns weitermachen und anfangen, es zu bauen. Ich habe einen neuen Ordner auf dem Desktop erstellt. Lass uns weitermachen und es im VS-Code öffnen. Ich werde unsere Arbeitsdateien erstellen. Das erste wird Index-HTML sein und dann wir eine Datei für CSS im CSS-Stil haben. Lassen Sie uns die Index-HTML-Datei öffnen und die grundlegende HTML-Struktur erstellen. Ich werde den Titel ändern. Es wird eine Landingpage sein, und dann werde ich die ESS-Datei hier verlinken. Lassen Sie uns weitermachen und das Projekt im Browser über den Live-Server öffnen . Und dann werde ich den Browser und den Editor nebeneinander platzieren den Browser und den Editor nebeneinander , um unseren Arbeitsprozess komfortabler und einfacher zu gestalten. Als Nächstes werde ich mir den Phono-CDN-Link schnappen, weil wir die Phono-Symbole verwenden werden Lass uns den Link von hier kopieren. Öffnen Sie dann das Link-Tag im Head-Element und fügen Sie den Link hier ein. Als Nächstes werde ich die Website von Google Phones besuchen. Weil wir das Google-Telefon während des gesamten Projekts verwenden werden. Lass uns weitermachen und nach Tilt, Warp the style suchen. Kopieren Sie den Link und fügen Sie ihn allein in den Kopf ein. Ordnung, wir sind bereit, mit dem Schreiben des H-Dämon-Markups zu beginnen Schreiben des H-Dämon-Markups Ich öffne das Deep-Tag, das ist der Container, in den ich Landing einfügen werde Dann, nun, hier die Schichten, Schicht eins, Schicht zwei und Schicht drei. Innerhalb der dritten Schicht werden wir die innere Schicht haben. Als Nächstes werde ich die Navigation ohne Elemente erstellen . Fügen wir hier „Keine Artikel“ ein. Wir werden drei verschiedene Link-Elemente haben. Lassen Sie uns das Link-Element öffnen und es hier zu Hause einfügen. Dann wird der zweite Explore sein. Was den dritten betrifft, so wird es Contact sein. Ordnung, nach der Navigation brauchen wir ein Banner, in dem ich H eins öffnen werde, Überschriftenelemente mit Farbverläufen Dann brauchen wir einen Button. Der Typ wird Button sein. Als Nächstes benötigen wir ein Span-Element mit dem Text Explore. Dann werde ich mit der Klasse FA einen durchgehenden FA-Pfeil platzieren. Richtig? Eigentlich brauchen wir hier das I-Element und nicht die Tiefe. Hier haben wir die linke Seite der Seite. Als Nächstes müssen wir eine Kopfzeile erstellen , in der ich H ein Überschriftenelement mit der Text-Landingpage platzieren werde . Dann brauchen wir hier CSS-Gradienten für Span-Elemente. Okay, danach müssen wir die Social-Media-Links erstellen , die wir entwickeln müssen, mit der Klasse Social Media , in der ich das I-Element platzieren werde, mit den Klassen FA-Marken, Facebook Lass es uns zweimal duplizieren. Ändert die Klassennamen. Der zweite wird FA Instagram sein. Was das dritte Link-Element betrifft, so wird es FA Twitter sein. In Ordnung, das war's also. Alle Elemente sind erstellt und jetzt müssen wir anfangen, das CSS zu schreiben. Ich werde jedes Element auswählen. Und verwende einige Standardstile. Lassen Sie uns die Marge festlegen und beide auf Null setzen. Als Nächstes müssen wir die Größe der Box auf das Rahmenfeld festlegen, da ich die Textdekoration auf „Keine“ setzen werde. Dann brauchen wir eine Telefonfamilie. Es wird Tilt Warp sein, das Google-Telefon, das wir ausgewählt haben Wie Sie sehen können, werden die Standardkacheln angewendet. Als Nächstes setze ich die Telefongröße des HTML-Elements auf 62,5%. Damit ein m zehn Pixeln entspricht, verwenden wir M als Maßeinheit Als Nächstes wähle ich den Container aus , dessen Breite auf 100% festgelegt ist . Dann wird die Höhe 100 Fuß betragen Lassen Sie uns die Hintergrundfarbe verwenden. Es wird OF 162 sein. Wir haben hier die blaue Farbe. Als Nächstes wähle ich die Landung aus. Lassen Sie uns die Breite auf 95% setzen, dann wird die Höhe 90% betragen . Ich werde den Hintergrund mit linearer Verlaufsfunktion verwenden. Die Richtung wird nach rechts unten gehen. Wir brauchen hier die erste Farbe , die eine D24 sein wird. Dann wird der nächste 2d48 sein. 99, 70% Wir haben hier ein schönes und angenehmes Gefälle. Als nächstes benötigen wir Box Shadow mit den Werten 01 Ram, fünf Ram. Und die Farbe wird schwarz mit geringerer Opazität sein , 0,2 okay? Jetzt brauchen wir hier den Radius, es wird ein Ram sein, damit du die Ecken um ihn herum sehen kannst Als Nächstes werde ich das Element mit einem Flachsbuch zentrieren. Wir brauchen ein Justific-Inhaltszentrum und dann ein Einzelpostenzentrum Wie Sie sehen können, ist die Kopfzeile auf der Seite zentriert. Als Nächstes wähle ich die erste Ebene aus. Lassen Sie uns die Breite auf 70% setzen. Dann wird die Höhe 120% betragen, um die Position auf absolut zu setzen Dann benötigen wir die relative Position für das übergeordnete Element, bei dem es sich um eine Landung handelt. Lassen Sie uns oben definieren. Position wird -10% sein dann wird die linke Position -5% sein . Ich werde eine lineare Gradientenfunktion verwenden Die erste Farbe wird C558 sein. Dann wird die nächste 4538 sein. Wir haben hier die erste Schicht. Als Nächstes verwende ich den Grenzradius mit den Werten Null, 50%, 50% und dann Null. Außerdem benötigen wir eine Deckkraft von 0,5. Als Nächstes verwende ich Schatten mit den Werten 01 Ram, fünf Ram Und die schwarze RGBA-Farbe mit einer Opazität von 0,5 Wie Sie sehen können, haben wir hier die Eigentlich müssen wir die Teile der ersten Ebene mit Overflow He verstecken ersten Ebene mit Overflow Okay, das ist es. Die erste Schicht ist fertig. Ich werde diesen Code duplizieren und die Höhe ändern, es wird eins sein 40% dann wird die linke Position 15% -50% sein . Dann wird die erste Farbe 338 sein Was die zweite Farbe angeht, werde ich 452 verwenden Auch hier, Prozentwert 40% Eigentlich stimmt hier etwas nicht. Ja, wir müssen den Klassennamen ändern. Es wird Schicht zwei sein. Hier haben wir die zweite Ebene. Lassen Sie uns diesen Code duplizieren, den Klassennamen ändern. Es wird Schicht drei sein. Wir brauchen eine Höhe von eins bis 30% dann wird die Führungsposition -25% liegen. Und wir müssen die Farben in der linearen Sortierfunktion ändern, die erste wird 95 sein, eigentlich brauchen wir hier die Richtung des Übergangs, richtig Dann wird die nächste Farbe 5584 sein. Lassen Sie uns den Prozentwert loswerden. Hier haben wir die dritte Schicht. Sie sehen ziemlich gut aus. Lassen Sie uns die Undurchsichtigkeit loswerden. Wir brauchen hier keine Opazität. Jetzt haben wir also viel bessere Ergebnisse. In Ordnung, lassen Sie uns weitermachen und die innere Ebene auswählen. Stellen wir 100% ein, dann ist die Höhe 100%. Nehmen wir diese linear abgestufte Funktion ändern die Richtung nach Bedarf nach oben rechts Die erste Farbe soll 245 sein. Die nächste Farbe wird b1666 sein. Als Nächstes müssen wir Werte mit einer Übersetzungsfunktion transformieren einer Übersetzungsfunktion Wir werden 30 Ram und dann 15 Ram sein. Wir müssen das Element in beide Richtungen bewegen. Lassen Sie uns den Randradius verwenden, damit das Element um 50% abgerundet wird. Jetzt müssen wir die Teile des Elements mit Overflow Heiden ausblenden Okay, ich finde, es sieht ziemlich gut aus. Jetzt müssen wir die Bar ohne Bar verlassen. Setzen wir die Position auf absolut. Die oberste Position wird Null sein, linke Position wird Null sein. Mit wird 100% sein, dann wird die Höhe zehn ml betragen. Ich werde Flexbooks verwenden. Lassen Sie uns die Elemente in der Mitte vertikal platzieren. Außerdem müssen wir den Inhalt mit Flex begründen, weil wir die Elemente auf der rechten Seite platzieren werden. Setzen wir das Putting auf 100 Ram. Jetzt können wir die Links anpassen. Lassen Sie uns die Elemente A auswählen. Ich werde die Schriftgröße auf 1,4 Ram setzen. Die Farbe wird weiß sein. Wir brauchen die Texttransformation in Großbuchstaben, dann wird Ponight 300 sein Außerdem benötigen wir den Abstand mit Margin, 02 Ram auf der linken und rechten Seite, und dann schaffen wir etwas Abstand zwischen den Buchstaben Stellen wir es auf 2.1 Ram ein. Außerdem benötigen wir einen Schatteneffekt bei 3.020,5 Ram, einen Ram mit schwarzer RGBA-Farbe und das Gegenteil von 0,2 Okay, das war's Die Navigationselemente sehen ziemlich gut aus. Als Nächstes wähle ich das Banner aus. Lassen Sie uns die Position auf absolut setzen, dann wird die obere Position zu 35% links sein, es werden 10% sein. Hier haben wir das Banner, die Überschrift unten. Lassen Sie uns weitermachen und die Überschriftenelemente anpassen . Erhöhen Sie die Telefongröße. Es werden zehn Ram sein, dann wird die Farbe weiß sein. Außerdem brauchen wir Platz zwischen den Buchstaben. Stellen wir es auf 2,3 Ram ein. Als nächstes brauchen wir Margin Pots. Stellen wir es auf fünf Ram ein. Außerdem benötigen wir einen Textschatten mit den Werten 0,5 Ram, zwei Ram und der RGBA-Farbe Die Überschrift sieht ziemlich gut aus. Als nächstes werde ich mich um den Boden kümmern. Lass es uns auswählen. Ich werde die Breite auf 20 Ram setzen. Die Höhe wird fünf Ram betragen. Dann brauchen wir eine weiße Hintergrundfarbe. Stellen wir den Rand 2.2 Ram ein, einfarbig, eine weiße Farbe. Als Nächstes setze ich den Grenzradius auf 2,7 Ram. Hier haben wir den Boden. Ich werde Flexbooks verwenden, das sind Einzelposten in der Mitte. Was die Eigenschaft „ Inhalt ausrichten“ angeht, werde ich sie so einstellen, dass ein Leerzeichen um den Text herum entsteht und die Pfeile gut ausgerichtet sind. Eigentlich brauchen wir Platz dazwischen und nicht der Runde. Das ist es. Jetzt müssen wir nur noch ein Ram als Polster übrig haben. Als Nächstes werde ich die Größe des Telefons erhöhen, es wird 1,8 RAM sein Dann müssen wir die Steuerreform in Großbuchstaben umwandeln. Verwenden Sie auch etwas Abstand zwischen den Buchstaben. Lass uns 32.2 Ram und ändern wir die Farbe. Ich werde hier Farbe neun, F fünf verwenden, der Text sieht ziemlich gut aus Als Nächstes werde ich einen Schatteneffekt verwenden. Lass uns 3.020,5 Ram. Sie benötigen wieder 0,5 Gramm. Sie benötigen wieder 0,5 Gramm Und die Farbe, 230-31-7590 Und die Als Nächstes verwende ich Box Shadow 3.020.5 Fram, zwei Ram. Und die RGBA-Farbe, ich meine die schwarze Farbe mit Opazität 0,2 Ordnung, jetzt müssen wir weitermachen und das Symbol entfernen, ich meine den Pfeil auf der rechten Seite Lassen Sie uns auf 30% setzen und die Höhe wird 100% sein. Ändern wir die Hintergrundfarbe. Ich werde hier E C 245 verwenden. Jetzt müssen wir den Pfeil anzeigen. Lassen Sie uns den Radius auf 0,7 Ram, 0,7 Ram und Null setzen . Jetzt verwenden wir die Flexbox, um den Pfeil in der Mitte zu platzieren , indem wir das Inhaltszentrum ausrichten und ein Einzelpostenzentrum verwenden. Und ändere auch die Farbe, mach sie weiß. Lassen Sie uns die Telefongröße erhöhen. Es wird 1.8 Straßenbahn sein. Hier haben wir den Pfeil. Jetzt kümmern wir uns um den Header, das Überschriftenelement auf der rechten Seite. Lassen Sie uns die Position auf absolut setzen. Die oberste Position wird 30% betragen . Was die richtige Position angeht, werde ich zehn Ram daraus machen. Lassen Sie uns das Telefon vergrößern, es wird fünf Ram sein. Hier haben wir die Überschrift auf der rechten Seite. Stellen wir die Breite ein, 243 Ram. Dann ein Linientext auf der rechten Seite. Ändere auch die Farbe, mach sie weiß. Dann benutze einen Schatteneffekt. Wir benötigen 0,5 Ram, einen Ram und die RGBA-Farbe mit pastösem 0,2. Die Überschrift sieht viel Jetzt müssen wir das Span-Element auswählen . Lassen Sie uns den Display-Block verwenden. Als Nächstes benötigen wir eine Schriftgröße von sechs Ram. Dann müssen wir Text in Großbuchstaben umwandeln, wie wir es hier brauchen. Linearer Farbverlauf, die erste Farbe wird 815 sein. Dann wird der nächste Wert 447 mit 90% sein . Um den linearen Farbverlauf anzuwenden, benötigen wir den Property Webkit-Hintergrundclip, es wird Text sein Und außerdem brauchen wir Webkit-Text, Feel Color. Es wird transparent sein. Wie Sie sehen können, haben wir hier einen schönen und coolen Verlaufseffekt für das Überschriftenelement. Okay, jetzt müssen wir uns um die sozialen Medien kümmern. Setzen wir die Position auf absolut. Die unterste Position wird fünf Ram sein. Was die richtige Position angeht, werde ich sie auf zehn Ram setzen. Als Nächstes brauchen wir Flexbooks. Hier haben wir die Icons. Ich werde das Social-Media-Element auswählen. Lassen Sie uns das Telefon vergrößern, es wird zwei Ram sein. Dann muss die Farbe weiß sein. Außerdem benötigen wir eine Marge von 01,5 Ram. Lassen Sie uns einen Schatteneffekt mit den Werten 0,5 Ram, ein Ram Die schwarze RGBA-Farbe. Ändern Sie auch den Cursor, lassen Sie ihn zeigen. Okay, das ist es. Alles sieht ziemlich gut aus. Mit diesem Projekt sind wir fertig. Hoffentlich war es interessant und es hat dir gefallen. Lass uns weitermachen. 14. Projekt 9 - Kontaktformular mit dem Hell-/Dunkel-Modus: Okay, es ist Zeit, weiterzumachen und mit der Erstellung unseres nächsten Projekts zu beginnen. In diesem Abschnitt werden wir ein Kontaktformular mit Hell- und Dunkelmodus erstellen. Wie Sie sehen können, befindet sich das Projekt standardmäßig im Lichtmodus. Sie können hier ein paar verschiedene Eingabefelder mit einem unteren Rand sehen . Hier haben wir zwei verschiedene Unterteile, hell und dunkel. Außerdem haben wir hier so etwas wie Sun. Wenn ich auf Dunkel klicke, wechselt das Projekt in den Dunkelmodus und die Sonne verwandelt sich in Mond. Wenn ich dann auf Hell klicke, wechselt das Projekt wieder in den hellen Modus. Ich denke, dieses Projekt wird für Sie interessant und nützlich sein , da Websites heutzutage den Hell- und Dunkelmodus verwenden. Du wirst in diesem Projekt also etwas Neues lernen, okay? Jetzt ist es an der Zeit, weiterzumachen und mit dem Bau zu beginnen. Ich habe einen neuen Ordner auf dem Desktop erstellt , der momentan leer ist. Lass uns weitermachen und es im VS-Code öffnen. Dann müssen wir unsere Arbeitsdateien für HTML erstellen. Dann brauchen wir für CSS auch eine Datei für Javascript. Lassen Sie uns den Index öffnen, die HTML-Datei laden und das grundlegende HTML-Dokument erstellen. Ich werde den Titel ändern. Es wird hell und dunkel, ich wechsle nach Togo. Dann werde ich das CSS verlinken und die Dateien verstecken. Lassen Sie uns das Skript-Tag öffnen und den Namen der Datei im Quellattribut angeben der Datei im Quellattribut Dann müssen wir das Projekt über den Live-Server für den Browser öffnen . Lassen Sie uns auch den Editor und den Browser wie folgt nebeneinander platzieren . Jetzt werde ich einige Google Fonts verwenden. Lass uns die Website besuchen und nach Google Phone namens Ubuntu suchen. Ich werde hier ein paar verschiedene Stile auswählen, dann kopiere ich den Link und füge ihn in das Head-Element ein Wir können mit dem Schreiben des Codes beginnen. Ich werde mit dem H-L-Markup beginnen. Lassen Sie uns das Tag mit dem Klassencontainer öffnen , in dem ich den Form-Wrapper öffnen werde Im Formular-Wrapper werden wir links den Foam-Wrapper und rechts den Formular-Wrapper haben Öffnen wir die linke Seite, um Sun Moon zu erzeugen. Dann brauchen wir einen Schlagstock mit einem Spannelement. Es hat die Klasse BG, wir benötigen drei Span-Elemente Die zweite wird hell sein, die helldunkel, da die Textschaltfläche das Typattribut haben wird, es wird eine Schaltfläche sein. Danach müssen wir hier die rechte Seite des Formulars nehmen. Lassen Sie uns H ein Überschriftenelement öffnen , das „Kontaktieren Sie uns“ lauten wird. Lassen Sie uns Ihre Eingabe mit dem Klassenfeld einfügen. Der Typ wird Text sein. Außerdem benötigen wir ein Platzhalterattribut mit Ihrem Namen. Lass es uns duplizieren und den Platzhalter ändern. Es wird E-Mail sein . Außerdem werde ich das Typattribut ändern. Es wird auch E-Mail sein. Als nächstes brauchen wir einen Textbereich. Ich werde hier eine Klasse hinzufügen, es wird ein Feld und dann auch eine Nachricht sein, ich werde das Platzhalterattribut mit dem Text Ihrer Nachricht verwenden mit dem Text Ihrer Nachricht Okay, als Nächstes brauchen wir den Boden. Der Typ wird unten sein. Also werde ich das Senden von Textnachrichten einrichten. Also gut, ich denke, alles ist bereit. Lass uns weitermachen und anfangen, das CSS zu schreiben. Ich werde einige Standardstile verwenden. Lassen Sie uns jedes Element auswählen und Rand setzen und auf Null setzen. Dann müssen wir die Größe der Box an die Rahmenbox anpassen. Ich setze den Umriss auf „Keine“. Stellen wir die Telefonfamilie auf ein, die wir gerade von der Google-Telefones-Website abgerufen haben gerade von der Google-Telefones-Website Okay, also die Standardstile werden angewendet. Als Nächstes setze ich die Schriftgröße des H tmul-Elements auf 62,5%, weil wir m als Maßeinheit verwenden werden m als Maßeinheit verwenden In diesem Fall entspricht ein m zehn Pixeln. Als Nächstes müssen wir den Container auswählen. Lassen Sie uns die Breite definieren. Es wird 100% sein, dann wird die Höhe 100 Ansichtshöhe sein. Lass uns die Hintergrundfarbe ändern. Es wird weiß sein. Als Nächstes werde ich Flex-Bücher verwenden. Wir müssen das Element mithilfe von Justify Content Center und Line Item Center zentrieren. Wie Sie sehen können, ist der Inhalt perfekt auf der Seite zentriert. Lassen Sie uns eine Schaumstoffhülle verwenden und die Breite auf 280 Ram einstellen. Dann brauchen wir Höhe, es werden 60 Ram sein. Als Nächstes benötigen wir eine weiße Hintergrundfarbe. Ich werde Bücher aus Flachs verwenden. Setzen Sie den Randradius auf drei Ram und runden Sie die Ecken ab Außerdem werde ich einen Schatteneffekt verwenden. Setzen wir Box Shadow auf Null, auf Ram, sechs Ram. Und die Farbe wird RGBA 61215 und die Opazität 0,2 sein . Okay, hier haben wir das Formular mit einem Als Nächstes wähle ich links den Formular-Wrapper aus . Lassen Sie uns die Breite auf 40% setzen . Dann werde ich diesen Code duplizieren Ändere die Klasse, die wir hier brauchen, oder? Und die Breite wird 60% betragen. In Ordnung, als nächstes verwenden wir Flexbox für die linke Seite, ändern wir die Richtung. Es wird auch eine Spalte sein, Sie müssen den Inhalt mit einem Abstand dazwischen begründen, wir brauchen etwas Abstand zwischen den Elementen. Was die Elin-Artikel angeht, so wird es in der Mitte stehen. Als Nächstes. Ich werde mit Polsterung Platz schaffen Sagen wir 100, dann 20,0. Danach wähle ich die Sonne und den Mond aus Nehmen wir die Breite auf 12, dann wird die Höhe ebenfalls 12 Ram betragen Ich werde den Hintergrund ändern. Lassen Sie uns den linearen Farbverlauf verwenden. Wir brauchen eine Richtung von 225 Grad. Die erste Farbe wird F neun sein, dann wird die nächste Farbe 55 sein. Dann werde ich das Element mithilfe des Randradius abrunden. Hier haben wir die Sonne. Als nächstes nehme ich hier den unteren Teil, auf der linken Seite. Stellen wir die Breite auf 20 Ram ein. Dann wird die Höhe vier Ram betragen. Ich werde die Hintergrundfarbe ändern. Es wird 888 sein. Dann lass uns die Grenze loswerden, keine mehr draus machen. Und außerdem brauchen wir einen Grenzradius, drei Ram. Hier haben wir den Boden. Als Nächstes stelle ich die Telefongröße auf 1,4 Ram ein. Ändere auch die Farbe. Es wird 777 sein. Dann setze ich den Cursor auf Zeiger. Ordnung, danach wähle ich unten mit einem Spin-Element. Lassen Sie uns die Position auf absolut setzen. Wir benötigen die relative Position für das übergeordnete Element, das in diesem Fall das unterste ist. Dann brauchen wir zwei Positionen, um Null zu sein. Als Nächstes stelle ich die Breite auf 50% ein. Ändere auch die Höhe, mache sie auf 100%. Als Nächstes wähle ich den Hintergrund aus. Lassen Sie uns die Hintergrundfarbe ändern. Es wird weiß sein. Außerdem benötigen wir einen Grenzradius mit dem Wert von drei Ram. Setzen wir die linke Position auf Null. Wir brauchen etwas Schatten. Wir setzen es auf 0,5 Ram, einen Ram. Und die RGBA-Farbe Schwarz mit Opazität 0,1 Hier haben wir den Hintergrund, sich von hell nach dunkel bewegt Als Nächstes wähle ich Hell und Dunkel aus. Stellen wir das Display auf Flex ein. Wir müssen den Inhalt mithilfe des Justify Content Centers und eines Einzelpostencenters zentrieren. Danach wähle ich das Licht separat aus und stelle die linke Position auf Null. Was die Dunkelheit angeht, werde ich die rechte Position auf Null setzen . Okay, das war's, der Button ist personalisiert. Als nächstes werde ich mich um die rechte Seite kümmern. Wir brauchen Flexbooks. Dann ändere ich die Richtung, mache daraus eine Spalte. Außerdem werde ich Gegenstände in der Mitte anordnen. Was den begründeten Inhalt angeht, werde ich ihn auf ein Leerzeichen dazwischen setzen. Um den Abstand zwischen den Elementen zu erzeugen, setzen wir Putting auf acht Ram und dann auf Null. Wie Sie sehen können, sind die Elemente ausgerichtet. Jetzt ist es an der Zeit, die Überschriftenelemente anzupassen. Stellen wir die Schriftgröße auf fünf Ram ein. Dann wird die Farbe 777 sein. Hier haben wir die Überschrift. Als Nächstes wähle ich Field aus und setze die Breite auf 50 Ram. Dann wird die Höhe fünf Rams betragen. Ich werde die Grenze loswerden und dann eine Grenze am unteren Rand erstellen. Stellen wir es auf 0,2 Ram ein, fest. Die Farbe wird BBB sein. Hier haben wir die Eingabefelder mit Rand am unteren Rand. Lassen Sie uns die Breite tatsächlich verringern und sie auf 30 Ram erhöhen, weil sie zu groß sind. Jetzt haben wir viel bessere Ergebnisse. Als Nächstes stelle ich die Telefongröße auf 1,4 RAM ein. Dann wird die Farbe 555 sein. Ändern Sie auch die schwarze Aunefarbe und machen Sie sie transparent. Als Nächstes wähle ich Feld aus, gefolgt vom Platzhalterattribut Lassen Sie uns die Texttransformation ändern und sie in Großbuchstaben umwandeln, sodass wir eine Telefongröße von 1,4 RAM benötigen Dann ändere die Farbe und mache sie zu BBB. Außerdem benötigen wir einen Buchstabenabstand mit dem Wert 0,1 Ram. Wie Sie sehen können, sieht das Platzhalterattribut ziemlich gut aus Als Nächstes wähle ich den Textbereich mit der Klassennachricht Lassen Sie uns die Höhe auf zehn Ram setzen. Außerdem werde ich die Funktion zur Größenänderung deaktivieren. Lassen Sie uns es auf „Keine“ setzen. Okay, das war's mit den Eingabefeldern. Jetzt müssen wir uns um den Boden kümmern. Definieren wir mit, es werden die zwei Ram sein, dann wird die Höhe 4,5 Ram sein. Dann werde ich die Hintergrundfarbe ändern. Lassen Sie uns hier die Farbe 262431 verwenden. Außerdem setze ich den Rand auf „Kein mache dann die Schaltfläche mit dem Randradius abgerundet Stellen wir es hier unten auf drei Ram ein. Lass uns die Schriftgröße ändern. Es wird 1,4 Ram sein. Dann werde ich die Farbe ändern. Lass es uns BB machen, Text in Großbuchstaben umwandeln. Dann schaffe etwas Abstand zwischen den Buchstaben, mach es 0,1. Ändere den Kurs, es zeigt. Und wir brauchen auch einen Schatteneffekt. Sagen wir 2012. Und die Farbe wird schwarz mit der Opazität 0,1 sein . Okay, das ist der Knopf, ziemlich nett Ich werde einen Klickeffekt mit der aktiven Aktienklasse erzeugen Klickeffekt mit der aktiven Aktienklasse Wir müssen uns transformieren. Übersetze Y mit dem Wert 0.2 Ram. Sobald ich klicke, erhalten wir diesen schönen Klick-Effekt. Ordnung, jetzt muss ich hier einen Kreishintergrund hinzufügen . Lassen Sie uns diese ausgewählten Elemente anpassen. Stellen Sie die Breite auf 120 RAM ein. Dann wird die Höhe ebenfalls 120 Ram betragen. Ich werde den Grenzradius verwenden. Lassen Sie uns ihn auf 50% setzen. Machen Sie das Element abgerundet. Ich werde mir diesen Hintergrund mit seiner linearen Verlaufsfunktion ansehen. Hier haben wir den Kreis. Wir müssen seine Position ändern. Setzen wir es auf absolut. Dann benötigen wir die relative Position für den Container. Die obere Position wird -70% sein . Was die linke Position angeht, werden es 50% sein. Und wir müssen das Element horizontal zentrieren transform translate x -50% verwenden. Okay, jetzt muss ich nur noch den Schatten mit den Werten 01 Ram, five Ram erstellen Die Farbe wird 248-10-6509 sein Bei einer Deckkraft von 0,2 müssen wir den Kreis hinter dem Deckblatt müssen wir Setzen wir die Position auf relativ. Und dann verwende die Index-Eigenschaft des Werts 100. Okay, jetzt sieht alles ziemlich gut aus. Wir können anfangen, das Govscript zu schreiben. Lassen Sie uns weitermachen und eine neue Variable erstellen , die ein Container sein wird Ich werde es mit der Abfrageselektor-Methode auswählen. Wir müssen hier den Klassennamen angeben. Als nächstes müssen wir die Schaltfläche auswählen. Platzieren wir hier den Klassennamen aus dem Wrapper links, gefolgt von der Schaltfläche für den Tagnamen Okay, jetzt müssen wir der Schaltfläche mit Click-Event einen Event-Listener hinzufügen Schaltfläche mit Click-Event einen Event-Listener Außerdem benötigen wir hier die Cope-Funktion. Sobald wir auf die Schaltfläche geklickt haben, müssen wir mit der Methode to eine neue Klasse zum Container hinzufügen . Nennen wir den Klassennamen Switch. Jetzt müssen wir diesen Klassennamen in der CSS-Datei verwenden , um neue Stile für den Dunkelmodus zu erstellen. Ich beginne mit dem Hintergrund , der mit der Switch-Klasse ausgewählt wurde . Wir brauchen hier eine Transformation, wir übersetzen die X-Funktion und der Wert wird 100% sein . Verwenden Sie auch die Übergangstransformation, die Dauer wird 0,4 Sekunden betragen. Sobald wir klicken, bewegt sich das Element gut von hell nach dunkel und von dunkel nach hell. Okay, lassen Sie uns weitermachen und Mit Container wechseln auswählen. Ich werde die Hintergrundfarbe ändern. Es wird 262431 sein und dann Transition verwenden. Sobald ich klicke, sich der Hintergrund des Containers ändert sich der Hintergrund des Containers von hell nach dunkel Als nächstes müssen wir uns um den Kreishintergrund kümmern . Wählen wir es mit dem Schalter zum Ändern des Hintergrunds aus. Ich werde einen linearen Farbverlauf verwenden. Die Richtung wird 225 Grad sein. Dann verwende ich die erste Farbe, 93 DFF. Was die zweite Farbe angeht, wird es 3374 sein Außerdem benötigen wir Box Shadow 015 mit RTB-Kalor 60508115 und der Opazität 0,5 Nun, wie Sie sehen können, ändert sich der Kreis, die Hintergrundfarbe des Kreises sehr gut Cain, lass uns weitermachen und Schalter mit Formular-Wrapper auswählen. Ich werde die Hintergrundfarbe ändern, die wir hier brauchen. Nochmals diese Farbe, 262431 und dann Transition verwenden. Sobald ich klicke, wird sich der Hintergrund des Kontaktformulars gut ändern Als Nächstes müssen wir die Sonne verändern. Wählen wir also diese Elemente aus. Ändern Sie den Hintergrund, den wir hier brauchen, linearer Farbverlauf. Die Richtung wird 225 sein. Was die Farben angeht, die ich verwenden werde , wurde tatsächlich der gesamte Code kopiert und hier eingefügt. Danach werde ich den Box-Shadow ändern. Lass uns keins draus machen. Jetzt verändert sich die Sonne. Aber wir brauchen hier einen zusätzlichen Effekt. Wir müssen Sonne in Mond verwandeln. Wählen wir Sonne, Mond, gefolgt vom Element After Sea. Ich werde den Inhalt auf leer setzen. Dann müssen wir die Position absolut haben. Verwenden wir die relative Position für das übergeordnete Element , in diesem Fall Sonne, Mond. Definieren wir richtig. Die Position wird Null sein. Für die oberste Position werde ich sie ebenfalls auf Null setzen. Dann wird die Breite 9,5 RAM betragen. Die Höhe wird ebenfalls 9,5 Fram betragen. Ändern wir den Radius, er wird 50% betragen. Wir brauchen einen Kreis Ändere auch die Hintergrundfarbe. Ich werde hier diese dunkle Farbe verwenden. Okay, das haben wir jetzt, aber wir müssen hier einen Effekt hinzufügen. Lassen Sie uns eigentlich die Hintergrundfarbe ändern und dann die Transformationsskala verwenden. Mach es auf Null. Wir müssen die Skala erhöhen. Sobald ich auf die Schaltfläche geklickt habe, verwenden wir den Klassenwechsel, gefolgt von Sonne und Mond. Mit After Do-Elementen werde ich die Hintergrundfarbe wieder auf dunkel ändern. Außerdem müssen wir die Skala auf 0-1 erhöhen . Außerdem brauchen wir hier einen Übergang, um einen gleichmäßigeren Effekt Jetzt haben wir ein viel besseres Ergebnis. Aber wir müssen hier den Ursprung so transformieren , dass er rechts oben statt in der Mitte liegt. Wie Sie jetzt sehen können, nimmt das Element von der rechten Seite zu. Und wir haben hier viel bessere und coolere Ergebnisse. Ordnung, als Nächstes kümmere ich mich um den Paton selbst Lass uns die Taste mit dem Schalter auswählen, ich werde die Farbe der Rückseite ändern Lassen Sie uns hier Farbe 1128 verwenden. Brauche auch ihren Übergang für einen reibungslosen Effekt. Wie Sie sehen können, ändert die Unterseite ihre Hintergrundfarbe. Wir müssen auch die Farbe des Span-Elements ändern. Wählen wir „Hintergrund wechseln“ und ändern Sie die Hintergrundfarbe. Verwenden Sie hier, 34323. Nochmals, Übergang, ich meine, wir müssen hier eine Hintergrundfarbe mit einer Dauer von 1 Sekunde hinzufügen Hintergrundfarbe mit einer Dauer von 1 Sekunde Wie Sie sehen können, sieht der Button ziemlich gut aus. Sobald wir den Modus geändert haben, müssen wir jetzt den Text der Eingabe übernehmen. Lassen Sie uns das Feld mit dem Schalter auswählen und die Farbe ändern. Mach es hell mit BBB is light Und zum Schluss müssen wir nach unten, ich meine die Schaltfläche Abschicken Wählen wir es aus und ändern wir die Hintergrundfarbe. Es wird BBB sein, und wir müssen auch die Farbe ändern Lass es uns dunkel machen, Ordnung, das war's also, alles funktioniert perfekt Und wir haben hier diesen schönen und coolen Wechsel von hell nach dunkel. 15. Project 10 - Suchleiste: Ordnung, also lasst uns weitermachen und mit der Erstellung unseres nächsten Projekts beginnen. In diesem Abschnitt werden wir eine nette und coole Suchleiste erstellen. Wie Sie sehen können, haben wir hier einen Kreis in der Mitte der Seite, ein Suchsymbol. Wenn ich auf dieses Element klicke, wird die Suchleiste erweitert. Sie können hier tippen. Denken Sie auch, dass das Suchsymbol mit der Schließtaste X geändert wurde. Wenn ich auf diese Schaltfläche klicke, wird die Suchleiste geschlossen. Und wir werden auch wieder hierher zurückkehren, das Suchsymbol. In Ordnung, lassen Sie uns über dieses Projekt sprechen. Es ist einfach, aber ich bin mir sicher, dass es Ihnen gefallen wird und dass es interessant und nützlich sein wird. Lass uns weitermachen und anfangen, es zu bauen. Ich habe einen neuen Ordner in der Desktop-Suchleiste erstellt , der momentan leer ist. Lassen Sie uns weitermachen und diesen Ordner in US-Code öffnen und dann Arbeitsdateien für HTML erstellen. Dann brauchen wir eine Datei für CSS, auch für Java-Skript. Dann öffne ich die indizierte HTM-Datei und erstelle die grundlegende HTML-Struktur Lass uns weitermachen und den Titel ändern. Es wird eine Suchleiste sein, dann werde ich die Dateien CSS- und Js-Dateien verknüpfen. Lassen Sie uns das Script-Tag öffnen und den Namen der Datei im Quellattribut angeben. Okay, als Nächstes öffne ich das Projekt im Browser. Und dann platzieren Sie den Editor und den Browser nebeneinander. Als Nächstes werde ich mir den CDN-Link des Telefons schnappen, weil wir in diesem Projekt einige Telefonsymbole verwenden diesem Projekt einige Telefonsymbole verwenden Kopieren wir den Link, öffnen dann den Link-Tag und fügen ihn in das H-Referenzattribut ein. Außerdem benötigen wir Google-Telefone. Lass uns weitermachen und die Website besuchen. Ich suche nach einem Telefon namens Signica Negative. Lassen Sie uns die Stile und dann den Link kopieren und in das Head-Element einfügen Ordnung, wir sind also bereit, mit dem Schreiben des HTML-Markups zu beginnen Schreiben des HTML-Markups zu Ich werde Deep Type öffnen, das wird der Container sein Fügen wir hier eine Suchleiste ein, in die ich ein Eingabeelement mit dem Typ Text und mit einem Platzhalterattributtyp einfügen werde Eingabeelement mit dem Typ Text und mit einem Platzhalterattributtyp Außerdem werden wir hier ein Phontosomicon mit den Klassen FA solid, FA lupifying glass haben ein Phontosomicon mit den Klassen FA solid, FA solid, Außerdem benötigen wir hier noch ein Phonosomicon, die Klassen FA solid X mark. Wir haben hier alle Elemente. Und jetzt können wir anfangen , das CSS zu schreiben. Ich wähle jedes Element aus und setze dann den Rand und setze beide auf Null. Als Nächstes müssen wir die Größe der Box an die Rahmenbox anpassen. Ich werde die Standardgliederung entfernen und dann die Telefonfamilie ändern. Es wird das Telefon sein, das wir ausgewählt haben, Signia negative Sensori Außerdem werde ich die Telefongröße des H-Tim-Elements auf 62,5% einstellen Telefongröße des H-Tim-Elements auf , um den RAM als Maßeinheit zu verwenden Okay, machen wir weiter und kümmern den Container, den ich auf 100% setzen werde , dann wird die Höhe 100 Aussichtspunkthöhe sein Außerdem brauchen wir hier eine Hintergrundfarbe. Ich werde hier Farbe 1611 verwenden. Es ist eine dunkle Farbe. Außerdem benötigen wir Flexbox, um den Inhalt zu zentrieren. Lassen Sie uns ein Inhaltscenter und ein Einzelpostenzentrum rechtfertigen. Wie Sie sehen können, ist der Inhalt auf der Seite zentriert. Als Nächstes wähle ich die Suchleiste aus. Lassen Sie uns die Breite auf 45 Ram setzen. Dann wird die Höhe acht Ram betragen. Außerdem muss die Hintergrundfarbe weiß sein. Als Nächstes verwende ich den Randradius, um die Ecken abzurunden. Stellen wir es auf zehn Ram ein. Lassen Sie uns auch einen Schatteneffekt verwenden. Es werden 10 Ram sein, sechs Ram. Und die Farbe wird RGBA sein, Schwarz mit geringerer Opazität, 0,6 Okay, danach werde ich den Text auf der rechten Seite ausrichten Als Nächstes wähle ich die Eingabeelemente aus. Stellen wir bei zwei 100% dann wird die Höhe ebenfalls 100% betragen. Lassen Sie uns den Standardrand entfernen dann den Grenzradius mit dem Wert zehn Ram verwenden. Als Nächstes setze ich die Hintergrundfarbe auf „Nicht“. Außerdem müssen wir einen Ram, 7,5 Ram, dann einen Ram und dann zwei Ram und dann zwei Ram Wir haben Platz in der Eingabe. Als Nächstes werde ich das Telefon vergrößern , es werden zwei Ram sein. Als Nächstes wähle ich die Suchleiste I Element, ich meine Fmoc Lassen Sie uns die Position auf absolut setzen. Dann benötigen wir die relative Position für das übergeordnete Element, das die Wrapper-Suchleiste ist Die beiden Positionen werden 50% sein Dann wird die richtige Position 0,5 sein. Dann müssen wir x -50% übersetzen. Eigentlich brauchen wir hier y statt x, damit die Symbole vertikal zentriert sind Lass uns mit sieben Ram beginnen. Und die Höhe wird ebenfalls sieben Ram betragen. Als Nächstes benötigen wir die rote Hintergrundfarbe ED 3758 Lassen Sie uns den Randradius auf 50% setzen , damit das Element abgerundet Verwenden Sie außerdem die Flexbox , um die Elemente mithilfe von Justify Content Center und Line Items Center zu zentrieren. Wie Sie sehen können, sind die Symbole zentriert. Erhöhen wir die Telefongröße 2,5 Fram. Dann ändere die Farbe, mach sie weiß. Ändern Sie auch den Kurstyp, machen Sie ihn zum Zeiger. Okay, jetzt ist es Zeit, etwas Javascript zu schreiben. Lassen Sie uns eine Variable erstellen, die der Container sein wird. Ich werde dieses Element mit der Abfrageselektor-Methode auswählen mit der Abfrageselektor-Methode Wir müssen hier den Klassennamen-Container angeben. Als Nächstes benötigen wir eine weitere Variable , bei der es sich um solche Symbole handeln wird. Lassen Sie uns beide Elemente mit dem Abfrageselektor auswählen. Alle Methoden, die wir hier benötigen , um die Suchleiste zu bestehen. Als Nächstes werde ich die Symbole mit der Futtermethode durchsehen . Sie benötigen hier ein Suchsymbol, aber ohne Anführungszeichen Als Nächstes übergebe ich hier die Pfeilfunktion. Ich werde dem Suchsymbol einen Event-Listener mit einem Klickereignis mit einer Rückruffunktion hinzufügen einem Klickereignis mit einer Rückruffunktion Jetzt müssen wir dem Container beim Klicken mit der Total-Methode eine Klasse hinzufügen Container beim Klicken mit der Total-Methode Der Klassenname wird , sagen wir, ändern. Jetzt müssen wir diese Klasse in der CSS-Datei verwenden. Lassen Sie uns zunächst die Breite des Suchteils ändern , sie wird acht Ram betragen. Dann wähle ich den Suchteil mit Änderung aus. Lass uns mit 245 Gramm beginnen. Verwenden Sie auch den Übergang, um einen gleichmäßigeren Effekt zu erzielen. Wir brauchen hier Breite und Dauer, 0,5 Sekunden. Außerdem werde ich die kubische Si-Funktion verwenden , um den Effekt schöner zu machen Das ist in diesen Werten innerhalb der Funktion. Sobald ich auf das Symbol klicke, wird der Suchbereich erweitert. Ich werde die Opazität für das Eingabeelement auf Null setzen. Dann wähle ich es mit Änderung aus und setze die Opazität auf eins Ich werde den Übergang mit Opazität und einer Dauer von 0,5 Sekunden verwenden Opazität und einer Dauer von 0,5 Sekunden Außerdem benötigen wir eine Verzögerungszeit von 0,3 Sekunden. Wir benötigen standardmäßig den gleichen Übergang für das Eingabeelement, jedoch ohne die Verzögerungszeit. Jetzt funktioniert alles gut. Jetzt müssen wir uns um die Icons kümmern. Lassen Sie uns Elemente mit der dritten Diagrammauswahl auswählen. Stellen Sie die Deckkraft auf 20 ein. Dann müssen wir die Elemente mit Klassenwechsel auswählen. Wir brauchen hier eine Opazität von eins. Außerdem müssen wir mit dem zweiten Diagrammselektor und der Deckkraft Null eine Änderung mit dem zweiten Diagrammselektor und der Deckkraft Schließlich brauchen wir einen Übergang, um die Effekte gleichmäßiger zu machen. Wie Sie sehen können, haben wir hier standardmäßig ein Suchsymbol Sobald wir klicken, verwandelt es sich in eine X-Schließtaste. Alles funktioniert perfekt. Und wir haben hier eine coole, moderne Suchleiste. Lass uns mit dem nächsten Projekt weitermachen. 16. Projekt 11 - Rechner: Ordnung, es ist also Zeit, weiterzumachen und mit der Erstellung unseres nächsten Projekts zu beginnen. In diesem Abschnitt werden wir eine Anwendung erstellen , die ein Javascript-Rechner sein wird . Wie Sie sehen können, sieht der Taschenrechner nett und modern und auch lustig aus. Wenn wir hier eine der Berechnungen durchführen, erhalten wir die richtigen Antworten. Wie Sie sehen können, funktioniert der Taschenrechner einwandfrei. Wir haben hier einen Bildschirm, gefolgt von den Schaltflächen. Zwei von ihnen sind unterschiedlich. Der erste, ich meine der rote, ist zum Löschen. die grüne betrifft, handelt es sich um eine Gleichstelltaste. In Ordnung, also lassen Sie uns über dieses Projekt sprechen. Lass uns anfangen. Ich habe einen neuen Ordner auf dem Desktop erstellt , der momentan leer ist. Lass uns weitermachen und es im VS-Code öffnen. Dann werde ich die Arbeitsdateien für den HTML-Index-HTML erstellen . Dann für CSS, das Style-CSS sein wird, und wir brauchen auch eine Datei für das Javascript-Skript JS. Dann öffne ich die Index-HTML-Datei und erstelle die grundlegende HTML-Struktur. Zuallererst werde ich den Titel ändern. Es wird ein Taschenrechner sein. Dann werde ich die CSS- und auch die Java-Dateien verknüpfen. Wir müssen das Skript Tac öffnen und den Namen der Datei im Quellattribut angeben den Namen der Datei im Quellattribut Dann öffne ich das Projekt über den Live-Server im Browser Lassen Sie uns auch den Editor und den Browser nebeneinander platzieren , um den Arbeitsprozess komfortabler und einfacher zu gestalten. Ich werde die Google-Telefon-Website besuchen, da wir während des gesamten Projekts ein Google-Telefon verwenden werden. Lassen Sie uns weitermachen und nach einem Telefon namens No to Suns suchen. Lassen Sie uns ein paar verschiedene Stile auswählen, dann den Link kopieren und in das Head-Element einfügen Okay, wir sind bereit, mit dem Schreiben des Codes zu beginnen. Fangen wir mit dem HTML-Markup an. Ich werde den Container erstellen, in den ich das Tag einfügen werde handelt es sich um einen Taschenrechner Wir brauchen hier Eingabeelemente , die der Bildschirm sein werden. Lassen Sie uns den Klassennamen-Bildschirm hinzufügen. Als Nächstes werde ich patm mit dem Typ patm erstellen. Dann brauchen wir hier BTN. Außerdem werde ich das Attribut Data Num verwenden. Fügen wir Ihr C ein. Ich werde diesen Pfad ein paar Mal duplizieren, weil wir viele verschiedene Schaltflächen haben werden viele verschiedene Schaltflächen haben Fügen wir hier eine Klasse hinzu, dann füge ich Divide Sinus ein Dann brauchen wir 789. Als nächstes brauchen wir hier ein Sternchen. Ich meine die Multiplikation Sinus 456. Dann haben wir Minus gefolgt von 12,3 Dann haben wir Plus-Sinus Der nächste wird Null sein. Dann wieder Null, wir haben Punkte und zuletzt das Gleichheitszeichen. Außerdem werde ich den Klassennamen ändern. Es wird gleichwertig sein. In Ordnung, wir haben hier HTML-Markup. Lass uns weitermachen und anfangen, das CSS zu schreiben. Wählen Sie jedes Element aus, legen Sie den Rand fest und setzen Sie beide auf Null. Als Nächstes stelle ich die Größe des Felds auf das Rahmenfeld ein. Wir brauchen eine Gliederung, die keiner ist. Dann ändere die Telefonfamilie für jedes Element, es wird das Telefon sein , das ausgewählt hat, keine Söhne. San Serif. In Ordnung, danach setze ich die Vorderseite des H-Meilen-Elements auf 62,5%, weil wir m als Maßeinheit verwenden Und in diesem Fall entspricht ein m zehn Pexel. Wählen wir die Breite des Containers auf 100%. Dann wird die Höhe auf 100 cm Höhe des Topfes festgelegt 100%. Dann wird die Höhe auf 100 cm Höhe des Topfes festgelegt Ändern Sie auch die Hintergrundfarbe. Es wird 12224 sein, es ist eine dunkle Farbe Als Nächstes verwende ich Flex Box, weil wir den Inhalt mit Justified Content Center und der Einzelpostenzentrale zentrieren Wie Sie sehen können, wird der Inhalt in der Mitte der Seite platziert. Lassen Sie uns weitermachen und den Taschenrechner auswählen. Ich setze auf 240 Ram, dann wird die Höhe 60 Ram sein. Lass uns die Hintergrundfarbe ändern. Ich werde 223 verwenden. Wir haben den Taschenrechner, lassen Sie uns einige Leerzeichen setzen, um drei Ram und zwei Ram Dann benötigen wir den Grenzradius 32 Ram. Außerdem brauchen wir einen Schatteneffekt. Setzen wir Box Shadow auf 01 Ram, dann auf drei Ram, und die Farbe wird RGBA-Farbe mit Opazität 0,4 sein . Wir haben hier einen schönen und coolen Schatteneffekt Danach wähle ich Screen, das Eingabeelement Lassen Sie uns die Breite auf 34 Ram setzen. Die Höhe wird acht Ram betragen. Dann werde ich die Hintergrundfarbe ändern. Lassen Sie uns 888d verwenden, dann verwende ich den unteren Rand Stellen wir es auf 1,5 Ram ein. Als Nächstes benötigen wir den Grenzradius, es wird ein Ram sein. Löscht den Standardrahmen, setzen wir ihn auf keinen. Ich werde Zeigerereignisse deaktivieren, setzen wir es auf „Keine“. Außerdem werde ich den Text auf der rechten Seite ausrichten. Wir können uns nicht mehr auf das Eingabeelement konzentrieren. Stellen wir die Telefongröße auf zwei Ram ein. Erhöhen Sie auch das Tempo zwischen den Buchstaben. Lass uns einen Ram machen, die Farbe ändern. Es wird weiß sein. Dann brauchen wir Putting, sagen wir 22 Ram. Danach wähle ich BTN, gefolgt vom gleichen Sinus Lassen Sie uns mit 27 Ram beginnen. Die Höhe wird ebenfalls sieben Ram betragen. Hier haben wir die Knöpfe. Verwenden wir Margin, machen wir einen Ram draus. Dann werde ich den Standardrahmen loswerden. Ich werde den Hintergrund ändern. Lassen Sie uns den linearen Farbverlauf verwenden. Die Richtung wird 180 Grad sein. Für die erste Farbe werde ich 222 verwenden. Dann wird die zweite Farbe 333 sein. Wie Sie sehen können, hat sich die Farbe geändert. Lassen Sie uns einige Schatteneffekte verwenden, die wir hier benötigen. Einsatz Null -0,8 Ram, acht Ram. Und die Farbe wird Schwarz mit einer Opazität von 0,25 sein Der nächste Wert wird 000,2 m sein . Hier haben wir das Ergebnis. Hier Die Farbe wird schwarz mit einer Opazität von 0,75 sein . Dann Ein m Ram, 2,5 Ram und die RGBA-Farbe mit Opazität 0,4 Als Nächstes setze ich den Randradius auf einen Ändern Sie auch den Cursor, machen Sie ihn zum Zeiger. Als Nächstes werde ich die Flexbox für den Taschenrechner verwenden Lass uns fp2p einstellen. Außerdem müssen wir das Content Center rechtfertigen. Und die Einzelposten zentrieren sich, die Muster sind ausgerichtet. Nett. Als Nächstes wählen wir Clear, also die Breite 225 Ram. Mit dem Layout sind wir eigentlich fertig, die Muster sind perfekt aufeinander abgestimmt. Als Nächstes wähle ich BTN mit dem Beforedo-Element aus. Außerdem benötigen wir die Elemente equal with before do. Lassen Sie uns den Inhalt auf das Attribut data num setzen, das wir in der HTML-Datei verwendet haben. Hier haben wir die Zahlen und die Zeichen auf den Knöpfen. Lassen Sie uns die Position auf absolut setzen. Wir benötigen die relative Position für das übergeordnete Element. Ich werde die oberste Position auf 0,3 Ram setzen. Die linke Position wird 0,4 Ram sein. Außerdem benötigen wir 0,7 Ram für die untere Position. Und die rechte Position wird 1.2 Ram sein. Als Nächstes ändere ich die Farbe, sie wird weiß sein. Lassen Sie uns einstellen, dass die Flaggen angezeigt werden sollen. Verwenden Sie Justify Content Center und Eline Items Center Die Zahlen und die Zeichen sind zentriert. Als Nächstes werde ich die Größe des Telefons erhöhen. Es wird 2,2 Ram sein. Ändere den Hintergrund, ich werde wieder lineare Farbverläufe verwenden Die Richtung wird 90 Grad sein und die erste Farbe wird 2d2d2 D sein . Dann wird die nächste Farbe 40, 40, 40 sein Jetzt sehen die Knöpfe besser aus. Lass uns Box Shadow verwenden, den wir hier brauchen. -0,5 Ram, dann -0,5 Ram, 1,5 Ram. Und die RGBA-Farbe Schwarz mit Opazität 0,1 Dann müssen wir hier noch einen Wert hinzufügen, einen Ram, 0,5 Ram, dann einen Ram, und das RGB mit der Opazität 0,15. Dann brauchen wir einen Rand auf der linken Seite, es wird Die Farbe wird 0004 sein. Dann lass uns das hier ändern. Wir brauchen Border Bottom. Border Top, jetzt müssen wir Border Radius verwenden, es wird ein Ram sein. Die Knöpfe sehen ziemlich gut aus. Fügen wir hier den Hintergrund hinzu, es wird 62929 sein Außerdem müssen wir das Pseudoelement Clear with before auswählen Pseudoelement Clear with before und den Hintergrund ändern Es wird dieselbe Farbe haben. Wir müssen den Code unten platzieren. Der Code wird überschrieben. Wir haben hier einen schönen, klaren Boden. Fügen wir dem Element diese Ränder hinzu und ändern wir die Farbe. Es wird F vier sein. Wir brauchen dasselbe für die Gleichheitsschaltfläche. Lass uns den Hintergrund ändern. Verwenden Sie die Farbe 37925, wie wir sie hier benötigen. Entspricht vor dem Ändern des Hintergrunds durch das Element . Verwenden Sie diesen Code hier. Außerdem brauchen wir diese Grenzen. Jetzt ist alles perfekt und mit dem Styling sind wir fertig. Das einzige , was Sie tun müssen, ist mit PT einen Klick-Effekt zu erzielen und aktiv zu machen. Und auch wenn es gleich aktiv ist. Lassen Sie uns den Filter auf Helligkeit mit dem Wert 1,5 setzen . Wir haben hier einen schönen Klickeffekt. Ordnung, jetzt ist es an der Zeit den Taschenrechner mit Javascript zum Laufen zu bringen. Ich werde eine Funktion erstellen. Nennen wir es hier berechnet, eine Pfeilfunktion. Wir müssen ein paar verschiedene Variablen erstellen. Der erste wird auf dem Bildschirm erscheinen. Wählen wir es mit der Abfrageselektor-Methode aus. Wir brauchen hier Klassenname, Bildschirm. Dann werden das nächste Element Knöpfe sein. Wir müssen sie mit der Methode Query Select All auswählen. Lass uns hier PTN sein. Endlich brauchen wir hier Gleichwertiges. Ordnung, danach werde ich die Knöpfe mit der Futtermethode durchsehen Knöpfe mit der Futtermethode Als Nächstes müssen wir Schaltfläche mithilfe von Click Event einen Event-Listener hinzufügen Und außerdem müssen wir hier eine Callback-Funktion übergeben. Fügen wir hier einen Parameter hinzu. Dann müssen wir einen Variablenwert erstellen , der dem Zieldatensatz entspricht. Wir erfassen hier die Zahlen , die wir im Datennummer-Attribut übergeben haben. Lass es uns in der Konsole überprüfen. Ich werde die Funktion ausführen. Wenn ich mir die Seite anschaue und diese Fenster voneinander trennen lasse, wechsle ich zur Registerkarte Konsole. Wenn ich auf die Zahlen klicke, erhalten wir ein String-Map-Objekt , in dem wir die Zahlen haben. Wenn ich hier die Eigenschaft num hinzufüge, erhalten wir Zahlen ohne Objekt in der Konsole. Okay, lassen Sie uns diese Codezeile loswerden . Als Nächstes definiere ich den Wert des Bildschirms mit dem Plus-Gleichheitszeichen Es wird dem Wert entsprechen. Die Zahlen werden auf dem Bildschirm hinzugefügt, ich meine, die Werte werden auf dem Bildschirm hinzugefügt. Danach müssen wir uns um das Gleichheitszeichen kümmern. Fügen wir dem Gleichheitszeichen mit Click-Event einen Event-Listener Gleichheitszeichen mit Click-Event einen Event-Listener Und wir brauchen auch eine Callback-Funktion. Lassen Sie uns eine variable Antwort erstellen. Und ich werde die eingebaute Funktion Evil verwenden, die den Ausdruck auswertet Als Nächstes müssen wir überprüfen, ob dieser Wert der Antwort entspricht. Wenn ich hier die Berechnung vornehme , erhalte ich die richtige Antwort. Jetzt müssen wir uns um die klare Funktion kümmern. Fügen wir der Clear-Funktion mit Click-Event sogar einen Listener Clear-Funktion mit Click-Event Sobald wir auf die Clear-Funktion geklickt haben, müssen wir den Bildschirm leer machen Wir müssen hier eine leere Zeichenfolge hinzufügen. Jetzt funktioniert alles perfekt. Der Taschenrechner funktioniert einwandfrei. Wir sind mit diesem Projekt fertig. Hoffentlich war es interessant und du hast ein paar neue Dinge gelernt . Lass uns weitermachen. 17. Project 12 - Website-Header mit Navigationsmenü: Ordnung, es ist also Zeit, weiterzumachen und mit der Erstellung unseres nächsten Projekts zu beginnen. In diesem Abschnitt werden wir einen Website-Header mit einem Hamburger-Menü erstellen Auf der Website wird es um etwas wie Essen oder Rezepte Sie besteht aus verschiedenen Teilen. Wir haben hier ein Menüsymbol. Wenn ich darauf klicke, werden die Navigationselemente gut angezeigt, mit einigen Effekten. Wenn ich mit der Maus über die Elemente fahre, erhalten wir diesen schönen Hover-Effekt Wenn ich erneut auf das Menüsymbol klicke, werden die Navigationselemente geschlossen Außerdem haben wir hier ein paar verschiedene Textelemente mit einem Bild, das gut platziert ist Ebenfalls auf der rechten Seite können Sie hier das Bild des Essens sehen, was ein wirklich schönes und cooles Schild ergibt In Ordnung, das war's mit diesem Projekt. Lass uns weitermachen und anfangen. Ich habe einen neuen Ordner auf dem Desktop erstellt , in dem wir einen Bilderordner haben. Lassen Sie uns weitermachen und diesen Ordner im VS-Code öffnen. Dann erstellen Sie unsere Arbeitsdateien für HTML, für CSS, vier Ylscript Dann öffne ich den Index, lade die HTML-Datei und erstelle die Pac-HTML-Struktur Lass uns den Titel ändern. Ich gehe hier auf die Landingpage. Dann lassen Sie uns weitermachen und CSS und alle Skriptdateien, die wir hier benötigen, im CSS-Stil verknüpfen alle Skriptdateien, die wir hier benötigen, im CSS-Stil Dann öffnen wir das Script-Tag und geben den Namen der Datei im Quellattribut Lassen Sie uns das Projekt über den Live-Server für den Browser öffnen. Und dann werde ich den Editor und den Browser so nebeneinander platzieren den Editor und den Browser so nebeneinander . Lass uns weitermachen und anfangen, das H-Mal-Markup zu schreiben. Wir brauchen einen Deep-Tag, der der Container sein wird. Dann werde ich hier noch einen Deep einfügen. Es wird landen. Dann öffne ich innerhalb der Landung die Navigation, in der wir zwei Teile haben werden. Das erste wird das Menü sein. Ich werde hier Zeilen einfügen, wir werden drei verschiedene Zeilen haben. Wir brauchen zwei Klassen, Zeile an Zeile eins. Außerdem müssen wir hier die Zahlen ändern. Neben den Linien werden wir hier das Span-Element haben. Es wird das Textmenü sein. Das war's, mit dem Menüsymbol. Als Nächstes müssen wir Navigationselemente erstellen. Ich werde das Link-Element mit der Klasse einfügen. Kein Element innerhalb des Link-Elements. Nun, Span-Tag mit dem Artikelnamen. Es wird zu Hause sein. Ich werde ein Bild-Tag einfügen. Wählen wir Bild aus dem Bilderordner aus. Es wird Bild drei sein. Dann duplizieren Sie dieses Element fünfmal. Ändere die Artikel, beim zweiten geht es darum. Außerdem müssen wir die Bildnamen ändern. Als Nächstes haben wir Rezepte wie Bild fünf. Dann haben wir Lieferbild sechs. Und endlich werden wir Kontakt haben. Was das Bild angeht, es wird Bild sieben sein. Okay, hier haben wir die Bilder und die Navigationselemente. Als Nächstes werde ich das Banner erstellen. Innerhalb des Banners werden wir ein Bild haben. Wählen wir Bild zwei aus dem Bildordner aus. Außerdem benötigen wir ihren Klassennamen. Es wird das Bild links sein. Dann öffne ich den Header. Es wird H enthalten, ein Überschriftenelement. Es wird der beste Fuß aller Zeiten sein. Dann haben wir Paragraphen-Rezepte für gesundes Essen. Lass es uns zweimal duplizieren. Der zweite Absatz wird am selben Tag geliefert wie der dritte Absatz. Wir werden hier frische und leckere Produkte haben. Ordnung, danach kümmere ich mich um die rechte Seite. Also, lass uns Bild eins aus dem Bildordner auswählen , den wir hier brauchen, Klassenname, Bild. Richtig? Außerdem brauchen wir hier, was der Teller sein wird. Okay. Ich denke, alles ist erstellt und mit dem HTM-Markup sind wir fertig Lass uns weitermachen und uns um das CSS kümmern. Ich werde die Google Phones-Website besuchen, da wir während dieses Projekts Google-Telefone verwenden werden. Lassen Sie uns weitermachen und nach einem Telefon namens Tilt suchen. Wählen wir nun diesen Stil aus. Außerdem benötigen wir ein anderes Telefon namens Ctilium Web. Wählen wir ein paar verschiedene Stile aus, kopieren dann den Link und fügen ihn in die Hauptelemente Als Nächstes werde ich einige Standardstile erstellen. Ich wähle jedes Element aus und setze dann den Rand und setze beide auf Null. Wir brauchen die Größe der Box so , dass sie der Rahmenbox entspricht. Außerdem werde ich die Standard-Textdekoration loswerden. Stellen wir es auf „Nicht“ und dann „ Telefonfamilie“ auf „Kursiv kippen Außerdem werde ich die Telefongröße des H-Tim-Elements auf 62,5% setzen Telefongröße des H-Tim-Elements , weil wir den Ram als Maßeinheit verwenden In diesem Fall entspricht ein Ram zehn Pixeln. Als Nächstes wähle ich keine Artikel aus. Ich werde sie für eine Weile ausblenden und die Option „Nicht anzeigen“ verwenden. Dann wähle ich ein Banner aus und ich werde es auch ausblenden. Wählen wir Container aus, stellen die Breite 200% ein, dann wird die Höhe 100 Topfhöhe sein Ich werde die Farbe der Rückseite ändern. Verwenden wir die gelbe Farbe, die FD 861 sein wird. Hier haben wir die gelbe Farbe. Dann wähle ich Lending aus und definiere Breite und Höhe. Die Breite wird 90% betragen. Was die Höhe angeht, werde ich 280, 5% einstellen . Außerdem ändere ich die Hintergrundfarbe. Ich werde hier die Farbe FFT, 868, f863 verwenden. Ändern wir den Grenzradius, machen wir zwei Ram draus. Außerdem brauchen wir einen Schatteneffekt. Stellen wir Pop Shadow 201 Ram, sechs Ram ein. Und die schwarze RGBA-Farbe mit Opazität 0,3 Hier haben wir die Landung Ich werde es mit einem Flachsbuch in der Mitte platzieren. um einen Container handelt, benötigen wir ein Inhaltszentrum und Für das übergeordnete Element , bei dem es sich um einen Container handelt, benötigen wir ein Inhaltszentrum und ein Einzelpostenzentrum übergeordnete Element , bei dem es sich um einen Container handelt, benötigen wir ein Inhaltszentrum und ein Jetzt ist das Element perfekt in der Mitte platziert. Als Nächstes wähle ich eine Navigation aus, deren Position als absolute dominante Position relativ zum übergeordneten Element definiert wird absolute dominante Position . Lassen Sie uns zwei Positionen auf Null und die linke Position ebenfalls auf Null setzen . Dann brauchen wir eine Breite von fünf RAM. Was die Höhe angeht, werde ich, dann werde ich die Hintergrundfarbe ändern. Es wird weiß sein. Außerdem werde ich die Höhen auf 100% setzen. Dann benötigen wir für den Radius 2m00 und zwei m, wir brauchen abgerundete Ecken auf der linken Seite des Elements Als Nächstes wählen wir das Menüsymbol. Ich werde die Breite auf vier Ram setzen, dann wird die Höhe 16 Ram sein. Lassen Sie uns die Hintergrundfarbe für eine Weile auf CC setzen. Hier haben wir das Menüsymbol. Lassen Sie uns die Position auf absolut setzen. Dann werden die beiden Positionen 50% sein, die Position wird 50% sein. Wir müssen das Element perfekt zentrieren und dafür müssen wir es transformieren. Übersetzen. -50% nochmal -50% Das Element ist zentriert, verwenden wir Flexbooks Ich werde die Flex-Richtung auf die Spalte setzen. Dann, wenn Sie den Inhaltsabstand zwischen und der Mitte der Zeilenelemente rechtfertigen . Außerdem werde ich den Cursor auf den Zeiger setzen. In Ordnung. Danach kümmere ich mich um die Leitungen. Stellen wir die Breite auf 80% ein, dann beträgt die Höhe zwei Ram. Ändern Sie auch die Hintergrundfarbe, rote Farbe für eine Weile. Als Nächstes wähle ich eine Linie aus und setze ihre Breite auf 100%. Dann wird die Höhe 0,3 Ram betragen. Ändere auch die Hintergrundfarbe. Verwenden Sie 555. Dann brauchen wir den Grenzradius, er wird 0,5 Ram sein. Lassen Sie uns die rote Farbe von hier aus loswerden . Hier haben wir die Linien. Jetzt müssen wir etwas Abstand zwischen den Zeilen schaffen. Dafür werde ich Display Flex verwenden. Flex-Richtung wird die Spalte sein und wir müssen den Inhalt mit einem Werteabstand zwischen den Zeilen begründen mit einem Werteabstand zwischen . Außerdem werde ich diese Hintergrundfarbe von hier aus loswerden . Jetzt müssen wir uns um die Span-Elemente kümmern. Ich meine den Menütext , bei dem die Textausrichtung auf aufrecht gesetzt ist Wir müssen die Buchstaben vertikal platzieren. Dann brauchen wir den Schreibmodus Vertikal L, R. Erhöhen Sie die Telefongröße. Es wird 2,5 Ram sein. Hier haben wir den Text vertikal platziert. Dann lassen Sie uns Text in Großbuchstaben umwandeln. Die Farbe wird 555 sein. Das Menüsymbol sieht ziemlich gut aus. Lassen Sie uns es loswerden, es spielt sich von hier aus ab. Stellen Sie die Breite auf 25 Ram ein. Die Höhe muss zu 100% sein, um die Position zu ändern, sie wird absolut sein. Eigentlich müssen wir die Größe der Bilder verringern , weil sie zu groß sind. Lassen Sie uns jetzt mit 211 Ram beginnen. Die Höhe wird 11 sein. Außerdem benötigen wir eine Abdeckung der Objektfüße. Jetzt werden die Bilder kleiner und der Arbeitsprozess wird komfortabler. Setzen wir die linke Position auf fünf Ram. Dann brauchen wir Display Flex. Die Flex-Richtung wird die Spalte sein. Dann wähle ich jetzt den Artikel aus und setze Flachs auf eins. Jetzt hat jeder Artikel eine gleichmäßige Breite. Lassen Sie uns die Hintergrundfarbe ändern. Wird 888 sein. Dann setze ich die Position des Bildes auf absolut und ich setze zwei Positionen auf 50%. Dann müssen wir Y mit -50% transformieren Y mit -50% , um das Bild horizontal und vertikal zu zentrieren Als Nächstes müssen wir die richtige Position minus drei Ram haben. Außerdem werde ich die relative Position für das Op-Item festlegen , das das übergeordnete Element ist. Die Bilder sind gut platziert. Wir müssen die Teile der Bilder mit Overflow Hidden ausblenden die Teile der Bilder mit Overflow Hidden Jetzt sehen sie ziemlich nett und cool aus. Ordnung, danach werde ich mich um die Textelemente kümmern . Bei diesem Pan-Element setzen wir Position zwei auf absolute Position. Dann müssen wir sie auf 50% positionieren. Außerdem müssen wir sie zentrieren , insbesondere mit Transform Translate Y -50%, dann wird die linke Position drei Ram sein Lassen Sie uns die Telefonfamilie auf Web Serif umstellen. Als Nächstes werde ich das Telefon vergrößern. Es wird 2,5% zwei Punkte sein, dann die Telefongröße erhöhen, es wird 2,5 Grad sein. Fram schafft auch etwas Abstand zwischen den Buchstaben ändert dann die Farbe Es wird 33 sein. Wie Sie sehen können, muss der Spinell ziemlich gut aussehen. Als Nächstes wähle ich mit dem Mauszeiger ein neues Objekt aus. Ich werde die Hintergrundfarbe auf Hot 26 ändern. Verwenden Sie auch den Übergang, um einen gleichmäßigeren Effekt zu erzielen. Hier haben wir den Wear-Effekt. Als Nächstes werde ich Javascript verwenden , damit das Menü funktioniert. Lassen Sie uns eine Variable namens Menüsymbol erstellen und dieses Element mithilfe der Abfrageselektormethode auswählen Ich werde hier angeben, dass der Klassenname ein Menüsymbol sein soll Außerdem werde ich zwei weitere Variablen erstellen. Die zweite werden Linien sein. Lassen Sie uns Linien auswählen. Dann brauchen wir einen Container. Lassen Sie uns hier den Namen angeben. Okay, jetzt müssen wir dem Menüsymbol einen Event-Listener mit einem Klickereignis hinzufügen Menüsymbol einen Event-Listener mit einem Klickereignis Lassen Sie uns hier die Callback-Funktion beim Klicken hinzufügen. Wir müssen dem Container mit der Total-Methode eine neue Klasse hinzufügen Container mit der Total-Methode Der Klassenname wird , sagen wir, ändern. Jetzt müssen wir diesen Klassennamen in der CSS-Datei verwenden , um neue Regeln zu erstellen. Beim Klicken benötigen wir eine Änderung, gefolgt von den Zeilen beim Klicken. Ich werde das Symbol drehen. Bei Verwendung der Funktion „C drehen “ wird der Wert 90 Grad betragen. Lassen Sie uns den Übergang verwenden. Wenn ich klicke, dreht sich das Menüsymbol. Als Nächstes verwende ich das Element Height Span und das Bild mit Deckkraft Null und Sichtbarkeit ist ausgeblendet Außerdem bin ich kein Objekt, das die Funktion Scale X verwendet. Fügen wir es auf Null hinzu, dann verwende ich Change with item. Sobald wir auf das Symbol geklickt haben, müssen wir die Skala auf eins und damit auf den Standardwert zurücksetzen. Fügen wir hier einen Übergang mit einer Übertragung von 0,5 Sekunden hinzu. Außerdem werde ich den Ursprung der Transformation nach links setzen . Lassen Sie uns, sobald wir klicken, werden die Elemente angezeigt. Wenn wir den Transformationsursprung loswerden, werden Sie die Ergebnisse sehen , die wir eigentlich nicht benötigen. Als Nächstes wähle ich Span Elements with class change aus. Lassen Sie uns die Opazität auf eins und die Sichtbarkeit auf sichtbar setzen. Außerdem werde ich Transition mit geringer Verzögerungszeit verwenden. Wir brauchen dasselbe für das Bild. Lass uns den Selektor ändern. Wir brauchen hier ein Bild. Erhöhen wir die Verzögerungszeit 0,7 Sekunden. Sobald ich klicke, erhalten wir diesen schönen und coolen Effekt. Artikel oder die Anzeige beim Klicken können wir diesen Effekt noch verbessern. Lassen Sie uns den Artikel auswählen. Ich verwende im ersten Element den Chad Selector, gefolgt von Lassen Sie uns den Übergang in Angriff nehmen. Dann werde ich dieses Element fünfmal duplizieren, Auswahlmöglichkeiten für das MPH-Diagramm ändern und auch die Verzögerungszeiten etwas erhöhen Wenn ich jetzt klicke, werden die Felder mit der Zeit, in der sie sich befinden, in der richtigen Reihenfolge angezeigt Wir brauchen dasselbe auch für die Bilder. Ich werde die Selektoren anstelle von Span ändern. Ich werde Image einfügen. Lassen Sie uns die Verzögerungszeit etwas erhöhen , da die Verzögerungszeit für das Bild dieses Panels standardmäßig unterschiedlich ist für das Bild dieses Panels standardmäßig unterschiedlich Lassen Sie uns das jetzt überprüfen. Wie Sie sehen können haben wir hier ein cooles und schönes Ergebnis. Lassen Sie uns den Übergang von hier aus loswerden. Jetzt brauchen wir etwas Ähnliches für den Nova-Gegenstand selbst. Lassen Sie uns das erste Nova-Element mithilfe von Chart Selector Corp, der Transition-Eigenschaft, auswählen mithilfe von Chart Selector Corp, , dann diesen Code fünfmal duplizieren, die Nummern der untergeordneten Selektoren ändern dann diesen Code fünfmal duplizieren, die Nummern der untergeordneten Selektoren ändern und außerdem für jedes Nova-Element eine Verzögerungszeit mit einer anderen Zeitspanne hinzufügen jedes Nova-Element eine Verzögerungszeit mit einer anderen Zeitspanne Ändern Sie die Verzögerungszeit für jedes Element. Wenn ich jetzt klicke, dann kriegen wir das nett und cool, eigentlich perfekt. Mit der Navigation sind wir fertig. Lassen Sie uns weitermachen und uns um die restlichen Teile des Projekts kümmern . Lassen Sie uns das Bild links auswählen, Breite auf T m setzen, dann wird die Position absolut sein. Hier haben wir die Bilder. Ich werde die Position für das Bild auf absolut setzen . Außerdem werde ich die rechte Position auf -10% setzen . Dann lass uns weitermachen und Header auswählen Lassen Sie uns die Anzeige auf Keine setzen , um die Kopfzeile für eine Weile auszublenden Lassen Sie uns das Bild auf der linken Seite positionieren, die Position wird -15% betragen. Was die linke Position betrifft, werde ich sie auf -10% setzen. Dann müssen wir das Drehen transformieren, der Wert wird 70 Grad sein Dann stelle ich Opacity 2.5 ein. Das Bild ist Wir brauchen Overflow Hidden für die Landung , um den Teil des Bildes zu verstecken Außerdem werde ich diese Eigenschaft zur Navigation hinzufügen diese Eigenschaft zur Navigation weil sie hinter dem Bild gelandet ist In Ordnung, als Nächstes kümmere ich mich um den Teller. Ich stelle die Breite auf 70% und die Höhe auf 100% ein . Dann ändere ich die Hintergrundfarbe, sie wird weiß sein. Ich werde die Position auf absolut setzen. Dann ist die richtige Position -20%. Hier haben wir die Platte, die im Moment nicht wie eine Platte aussieht Legen wir für das Bild einen Wert von 50% fest. Außerdem muss der Index 100 sein, dann die Opazität, er wird 0,9 sein . Hier haben wir das Bild Lassen Sie uns den Randradius für die Platte auf 50% setzen, dann brauchen wir auf der rechten Seite abgerundete Ecken Stellen wir die Transformation so ein , dass die Z-Funktion gedreht wird. Der Wert wird -30 Grad sein. Jetzt haben wir hier einen Teller , der ziemlich gut aussieht. Kümmern wir uns um den Header. Ich werde die Position auf absolut setzen, dann wird die Position auf 20% die linke Position wird 10% sein . Hier haben wir den Header. Lassen Sie uns jedes der Elemente anpassen. Ich werde Header auswählen. Jeder einzelne. Überschriftenelement, setzen wir die Telefongröße auf zehn Ram. Das Telefon wird 300 wiegen. Als Nächstes wähle ich Absätze aus. Im Header-Element wird die Telefongröße 1,8 RAM betragen. Dann brauchen wir Marge. Dann werden es zwei Ram und Null sein. Außerdem werde ich die Texttransformation so einstellen, dass sie groß geschrieben wird. Als Nächstes wähle ich die Kopfzeile aus, gefolgt von den vier Elementen Lassen Sie uns den Inhalt auf leer setzen. Dann müssen wir die Position absolut haben. Ich setze die Position auf 50%. Dann müssen wir das Element vertikal zentrieren, indem wir Transform Translate Y -50% verwenden . Diese Position wird ein Ram sein Dann brauchen wir eine Breite von drei RAM. Was die Höhe angeht, werde ich sie auf 2,3 Ram einstellen. Dann ändere die Hintergrundfarbe, es wird 333 sein. Hier haben wir die Elemente. Lassen Sie uns die Position für das übergeordnete Element auf relativ setzen. Um das winzige Problem zu beheben, benötigen wir nun noch fünf RAM Jetzt sieht der Header ziemlich gut aus und wir müssen dafür sorgen, dass das Projekt auf verschiedene Bildschirmgrößen reagiert Es wurde für eine besonders große Bildschirmgröße erstellt. Wenn ich hier die endgültige Version des Projekts für verschiedene Bildschirmgrößen überprüfe , werden Sie feststellen, dass das Projekt responsiv ist. Wie Sie sehen können, sieht es auf kleineren Bildschirmgrößen ziemlich gut aus. Wenn ich es jetzt für den iPod oder für Telefone überprüfe, werden Sie feststellen, dass es ziemlich gut aussieht und ansprechend ist. Okay, ich werde das Projekt mithilfe von CSS-Medienabfragen responsiv machen. Lassen Sie uns es erstellen und hier die maximale Breite auf 1.600 Pixel angeben die maximale Breite auf 1.600 Pixel Ich wähle Header H, ein Überschriftenelement. Stellen wir die Schriftgröße auf zwei m ein. Dann werde ich das Projekt an einem anderen Haltepunkt überprüfen , es sieht gut aus Dann werde ich es auf einer kleineren Bildschirmgröße überprüfen. Wir müssen hier einige Änderungen vornehmen. Lassen Sie uns eine neue CSS-Medienabfrage erstellen. Ich werde die maximale Breite auf 1.208 Pixel einstellen. Lassen Sie uns das HTML-Element auswählen und die Telefongröße um 50% verringern . Dadurch werden alle Elemente kleiner Als Nächstes wähle ich Header H eins aus. Verkleinern wir die Telefongröße auf sieben. Eigentlich sieht alles ziemlich gut aus. Lassen Sie uns den Bildschirm auf das iPad einstellen und eine CSS-Medienabfrage erstellen. Stellen Sie die Mux-Breite auf 820 Pixel ein. Ich wähle das linke Bild aus. Lassen Sie uns die Position auf -10% setzen . Dann wähle ich die Platte aus und ändere ihre Breite Es wird 90% sein, dann wird die Höhe 50% betragen. Ändern Sie auch die untere Position, sie wird Null sein Dann setze ich die richtige Position auf minus zwei Ram. Ich werde das Bild nach unten verschieben. Wählen wir das Bild rechts aus und setzen wir die Position auf 15 Ram. Jetzt haben wir hier März, ein besseres Ergebnis. Als Nächstes wähle ich Header aus. Setze die linke Position auf 50%. Außerdem müssen wir Translate X transformieren um die Ulme horizontal zu zentrieren Die Kopfzeile befindet sich in der Mitte. Mit diesem Breakpoint sind wir eigentlich fertig. Lassen Sie uns eine neue CSS-Medienabfrage für eine etwas kleinere Bildschirmgröße Die maximale Breite wird 768 Pixel betragen. Ich werde Header eins auswählen und seine Breite auf 50 Ram setzen. Lassen Sie uns außerdem das Bild rechts auswählen und das Gewicht auf 45% einstellen . Dann wird die unterste Position 12 Ram sein. Jetzt finde ich, dass alles ziemlich gut aussieht. Und lass uns die Bildschirmgröße ändern. Dann werde ich eine neue CS-Medienabfrage erstellen. Die maximale Breite wird 480 Fahrzeuge betragen. Ich wähle Bild links und setze seine Breite auf 60 Ram. Als Nächstes wähle ich Header aus. linke Position auf 65% fest. Außerdem werde ich Header H eins auswählen und die Telefongröße auf sechs RAM einstellen. Wir müssen einen Header kleiner machen. Als Nächstes wähle ich das rechte Bild aus. Lassen Sie uns die Breite auf 50% setzen . Dann wird die unterste Position zehn Ram sein. Dann müssen wir uns um den Teller kümmern. Stellen wir die Höhe auf 40% ein. Was die richtige Position angeht, werden es -15 Ram sein Jetzt sieht es ziemlich gut aus. Wir müssen den letzten Breakpoint erstellen. Lassen Sie uns eine CS-Medienabfrage erstellen und x auf 2.400,14 Pixel setzen x auf 2.400,14 Ich werde das HTML-Element auswählen . Lassen Sie uns die Schriftgröße 240, 2% einstellen . Alles sieht ziemlich gut aus. Und mit dem Projekt sind wir fertig, es reagiert. Hoffentlich war es interessant und es hat dir gefallen. Lass uns weitermachen und uns um das nächste Projekt kümmern. 18. Projekt 13 - Produktkarte: Ordnung, also mach stattdessen weiter und fange an, unser nächstes Projekt zu erstellen. In diesem Abschnitt werden wir diese coole und moderne Produktkarte erstellen. Das Projekt wird auf Basis von HTML und CSS erstellt. Lassen Sie uns weitermachen und es schnell beschreiben. Wie Sie sehen können, befindet sich die Karte in der Mitte der Seite. Hinter der Karte haben wir diesen schönen und coolen Hintergrund. Auf der Karte geht es um so etwas wie Regen. In der Mitte der Karte haben wir hier ein Produkt, das sich weiterbewegt, Mauszeiger nach unten, Sie können diesen schönen und coolen Schatten auf der linken Seite der Karte sehen diesen schönen und coolen Schatten auf der linken Seite der Wir haben zwei verschiedene Überschriften für die rechte Seite. Sie können hier die Details der Karte sehen. Sie können hier die Farbe auswählen oder auch die Größe, die Länge, die Brust usw. angeben. Unten haben wir ein Unterteil , das sich beim Klicken bewegt, einen schönen Klickeffekt erzeugt. Okay, das war's mit diesem Projekt. Lass uns weitermachen und anfangen, es zu erstellen. Ich habe einen neuen Ordner auf dem Desktop erstellt , in dem wir einen Ordner für Bilder haben. Lassen Sie uns weitermachen und den Ordner im VS-Code öffnen. Dann werde ich unsere Arbeitsdateien für HTML und für CSS erstellen , wir werden diese beiden verschiedenen Dateien haben. Lassen Sie uns die indizierte HTML-Datei öffnen und das grundlegende HTML-Dokument erstellen Dann werde ich den Titel ändern. Es wird eine Produktkarte sein. Dann werde ich die CSS-Datei verlinken. Danach werde ich das Projekt über den Live-Server im Browser öffnen . Lassen Sie uns den Editor und den Browser nebeneinander platzieren. Wie während des gesamten Projekts üblich , werde ich Google-Telefone verwenden. Also lasst uns weitermachen und die Website besuchen und nach einem Telefon namens Josephine Sans suchen Ich werde mir verschiedene Stile schnappen. Außerdem werde ich nach einem anderen Telefon namens Tilt Warp suchen einem anderen Telefon namens Tilt Warp Wählen wir den Stil aus, kopieren dann den Link und fügen ihn in das Head-Element ein Wir sind bereit, mit der Erstellung des Projekts zu beginnen. Wir werden mit dem HD-Markup für Malkarten beginnen. Lassen Sie uns das Tag öffnen, das ist der Container innerhalb des Containers , den ich erstellen werde, Karte Dann haben wir hier, ich meine, die linke Seite und wir haben auch die rechte Seite, die linke Seite. Um hier drei Überschriftenelemente mit dem Text im Code einzufügen , zweite Überschrift, die H sein wird, eine mit dem Text Frühlingsangebot fügen Sie hier den div-Tag ein, der das linke Bild der Karte sein wird. Wählen wir Bild aus dem Bilderordner aus. Es wird Code sein. In Ordnung, das war's, ungefähr auf der linken Seite. Lass uns weitermachen und die rechte Seite erstellen. Ich öffne das Tag, das die Produktinformationen enthalten wird. Lassen Sie uns einen weiteren Dip öffnen , der farbig sein wird. Wir brauchen die Absatzfarbe, gefolgt von der Entwicklung, also Farben. Wir werden hier Pan-Elemente haben, ich meine vier Span-Elemente Als Nächstes erstelle ich die Größe, die wir hier benötigen, Absatz mit den Textbindern Dann füge ich Ihr Deep-Tag mit den Klassengrößen ein, in denen wir Elemente haben werden, vier Span-Elemente mit unterschiedlichen Größen wie L x L und so. Ordnung, nach den Größen werde ich Details erstellen, in denen wir haben werden, werde ich einen Absatz mit der Länge der Texthülse erstellen . Dann haben wir hier noch einen Absatz mit dem Text 66 M. Dann haben wir auch den Ärmelzähler. Wir werden hier einen Klassenzähler haben. Als Nächstes werde ich einen Front-in-Place-Absatz mit dem Text Truhe erstellen . Wir werden hier also einen weiteren Absatz mit dem Text 102 M Santi Meter haben dem Text 102 M Santi Meter Dann haben wir einen Brustzähler. Wir brauchen wieder einen Klassenzähler. Ordnung, endlich werde ich deinen unteren Teil mit der Klassenkarte BTN insitu , lass uns die Unterseite vom Typ zwei setzen und ich werde deinen Text eingeben. Fahren Sie fort. Okay. Das HD-Map-Markup ist erstellt und jetzt können wir anfangen, das CSS zu schreiben Zuallererst werde ich einige Standardstile erstellen. Lassen Sie uns jedes Element mit einem Sternchen auswählen. Setzen Sie den Rand und die Polsterung auf Null. Dann setze ich die Größe der Box auf das Rahmenfeld. Außerdem brauchen wir eine Telefonfamilie Josephine Sans Als Nächstes setze ich die Telefongröße des Atuml-Elements auf 62,5%, weil wir M als Maßeinheit verwenden werden In diesem Fall entspricht ein M zehn Pixeln. Danach werde ich mich um das linke Bild der Karte kümmern , weil es zu groß ist. Lassen Sie uns jetzt mit 235 Frames beginnen. Als Nächstes wähle ich das Bild selbst aus und setze Breite auf 100%. Nein, das Bild wurde kleiner und wir können damit beginnen, den Container um 100% anzupassen . Dann wird die Höhe 100 Viewpot-Höhe sein Ich werde den Hintergrund einstellen. Lassen Sie uns den linearen Farbverlauf verwenden. Ich werde die erste Farbe verwenden, Weiß mit niedrigerer Deckkraft 0,2 Was die zweite Farbe angeht, wird sie wieder weiß mit der Deckkraft 0,2 sein. Als Nächstes ich das Bild als Hintergrund fest, wähle es aber aus dem Bilderordner aus Dann stellen sie fest, dass die Position in der Mitte sein wird. Außerdem brauchen wir keine Wiederholung. Als Nächstes stelle ich die Größe des Hintergrunds auf Deckung ein. Wir haben hier dieses schöne und coole Hintergrundbild. Ich werde Flex Book verwenden, um die Karte mithilfe des Justify Content Center die Karte mithilfe des Justify Content Center und eines Einzelpostencenters zu zentrieren. Die Karte wird in der Mitte platziert. Jetzt ist es an der Zeit, die Karte selbst anzupassen. Wählen wir es aus und setzen wir es auf 100 Ram. Dann wird die Höhe 65 Ram betragen. Ich setze den Schatten auf 01 Ram, sechs Ram. Und die Farbe wird Schwarz mit einer Opazität von 0,5 sein . Wir haben hier eine Karte mit einem Schatten Lasst uns Bücher aus Flachs verwenden. Ich mache die Ecken der Karte runde sie mit dem Randradius Dann setze ich den Mauszeiger auf Zeiger. Ordnung, lassen Sie uns weitermachen und uns um die linke Seite kümmern Ich werde die Breite auf 65% setzen , dann die Höhe auf 100%. Außerdem werde ich die Hintergrundfarbe ändern. Lassen Sie uns RGBA 120-31-2106 mit der Opazität 0,7 verwenden . Dann setze ich den Randradius auf 1m00 und einen Ram Wir brauchen abgerundete Ecken auf der linken Seite. Hier haben wir den Hintergrund. Danach werde ich mich um die rechte Seite kümmern. Stellen wir 230, 5% ein, dann wird die Höhe 100% sein . Ändern Sie auch die Hintergrundfarbe. Ich verwende hier RGBA 903-80-6606 und die Opazität 0,7 für alle Zellen im Grenzradius bis 01m1 Ram und Null, okay? und die Opazität 0,7 für alle Zellen im Grenzradius bis 01m1 Ram Grenzradius bis 01m1 Ram Die linke und rechte Seite sind also durch die Hintergründe getrennt. Als Nächstes setze ich die Position des Bild-Wrappers auf absolut Wir benötigen die relative Position für das übergeordnete Element , das links ist Lassen Sie uns die Position auf 12% setzen. Was die rechte Position angeht, wird sie -8% betragen. Wie Sie sehen können, ist das Bild gut platziert Als Nächstes bin ich. Stellen Sie den Pack-Drop-Filter auf Polar mit dem Wert 0,5 Ram für die rechte Seite ein, sodass, wie Sie sehen können, der Hintergrund polar ist. Lassen Sie uns nun das Bild mithilfe der Z-Index-Eigenschaft mit dem Wert 100 anzeigen . Eigentlich werde ich das Bild links auf der Karte mit dem Pseudoelement danach auswählen Bild links auf der Karte mit dem Pseudoelement danach Lassen Sie uns den Inhalt auf leer setzen. Dann wird die Position absolut sein. Dann setze ich die unterste Position ein, zwei minus sieben Ram. Die linke Position wird 50% sein und wir müssen mit Transform Translate X -50% an das Element senden Transform Translate X -50% Tatsächlich erstellen wir den Schatten unten Lass uns mit 232 Ram beginnen. Dann wird die Höhe zehn Ram betragen. Ändere die Hintergrundfarbe. Ich werde RGB verwenden, eine schwarze Farbe mit einer Deckkraft von 0,4. Verwenden Sie auch den Randradius Stellen wir es auf zehn Ram ein. Wie Sie sehen können, habe ich hier die Elemente. Lassen Sie uns einen Filter mit einer Unschärfefunktion verwenden. Wir werden 3,5 RAM bewerten. Wie Sie sehen können, haben wir hier einen Schatten. Eigentlich werde ich den Hover-Effekt beim Hover erzeugen. Ich werde das Bild nach oben verschieben. Stellen wir die Position auf 8% ein und verwenden auch den Übergang, um einen glatteren Effekt Als Nächstes müssen wir danach etwas ändern. Also das Element, bei dem ich im Schatten bin, schwebt. Nehmen wir die unterste Position, also minus zehn Ram Und benutze auch Filter. Ich werde den Wert der Unschärfefunktion erhöhen und dann den Übergang verwenden, um einen gleichmäßigeren Effekt zu erzielen. Lass uns nachschauen. Wie Sie sehen können, haben wir hier einen wirklich schönen und coolen Hover-Effekt Okay, lassen Sie uns jetzt weitermachen und die Überschriften anpassen. Ich beginne mit dem Element H mit drei Überschriften. Lassen Sie uns die Position auf absolut setzen , dann wird die oberste Position bei 15% liegen. Was die linke Position betrifft, werde ich auf 10% setzen und dann erhöhen. Lasst uns die Telefonfamilie ändern. Es wird Tarp Cursive sein . Erhöhen Sie die Telefongröße, es werden drei sein. Ram schafft auch etwas Abstand zwischen den Buchstaben. Farbe ändern. Es ist 31227. Wir haben hier also das erste Überschriftenelement. Lassen Sie uns diesen Code duplizieren, den Selektor ändern. Wir benötigen H ein Überschriftenelement. Die beiden Positionen werden auf 22% geändert . Dann werde ich die Telefongröße erhöhen. Sagen wir 4,5% 4,5 Ram. Verwenden Sie auch die Texttransformation, schreiben Sie Großbuchstaben, dann muss die Zeilenhöhe eins sein Und wir müssen auch die Farbe ändern. Ich werde neun, B, D, sieben verwenden. Wir haben hier die zweite Überschrift. Machen wir uns auf den Weg mit 22 Ram. Jetzt sieht es mit der linken Seite viel besser aus. Wir sind fertig. Lass uns weitermachen und uns um die rechte Seite kümmern. Ich werde Flex-Bücher verwenden. Lassen Sie uns das Justify Content Center und das Align Items Center verwenden. Wie Sie sehen können, befindet sich der Inhalt in der Mitte der rechten Seite. Als Nächstes wähle ich Produktinformationen aus. Lassen Sie uns die Breite auf 24 Ram setzen. Dann wähle ich Produktinformationen aus. Folgen Sie dem Absatz. Lassen Sie uns die Schriftgröße auf 1.2 Ram setzen. Dann wird die achte Schrift 300 sein. Ändern Sie die Eigenschaft für die Texttransformation und schreiben Sie sie in Großbuchstaben. Dann setze ich die Farbe auf RGBA, 255-25-5255 Ich meine die weiße Farbe mit Opazität 0,7 Die Opazität Lass uns weitermachen und Farben auswählen. Stellen Sie den Display-Flex ein. Dann brauchen wir Marge. sind es zwei Ram und Null, dann vier Ram und wieder Null. Danach wähle ich die Farbspanne aus. Wir haben vier Span-Elemente für verschiedene Farben. Setzen wir die Breite auf sechs Ram, dann wird die Höhe 0,5 Ram sein. Ändern Sie die Hintergrundfarbe , um die Span-Elemente für eine Weile zu sehen. Lass es uns jetzt loswerden. Ich werde das erste Spin-Element mit dem n-ten Child-Selektor auswählen das erste Spin-Element mit dem n-ten Child-Selektor Lass uns die Hintergrundfarbe ändern. Ich werde die Farb-CDD C 7 verwenden. Hier haben wir die erste Farbe. Lassen Sie uns diesen Code dreimal duplizieren. Wir haben insgesamt vier Spin-Elemente. Lassen Sie uns die n-ten untergeordneten Selektoren ändern. Dann werde ich die Hintergrundfarben ändern . Der zweite wird 986 sein, dann werden wir 55542 sein. Und wir brauchen hier auch 383123. Wir haben hier vier verschiedene Farben. In Ordnung, als Nächstes kümmere ich mich um die Größen. Setzen wir den Rand auf zwei, dann auf 04.0. Als Nächstes verwende ich Flexbooks Setzen wir „Inhalt rechtfertigen“ auf zwei. Raum dazwischen. Wie Sie sehen können, haben wir einen schönen Abstand zwischen den Größen. Wählen wir das Span-Element aus. Stellen Sie die Telefongröße auf 1,6 RAM ein. Dann wird das Telefon 300 wiegen. Ändere auch die Farbe, mach neun B, D sieben. Dann setze ich die Breite auf drei Ram. Die Höhe wird ebenfalls drei betragen. Als Nächstes wähle ich das zweite Spin-Element mit dem Child Selector Lassen Sie uns den Randradius auf 50% setzen, wir brauchen einen Kreis. Und dann setze Border 2.1 Ram auf Solid. Und die Farbe wird neun sein, B, D sieben. Wir haben hier einen Kreis, aber wir müssen die Größe innerhalb des Kreises platzieren. Lassen Sie uns Flex Book verwenden wir das Inhaltszentrum und das Einzelpostenzentrum verwenden. Jetzt ist die Größe innerhalb des Kreises zentriert. Als nächstes werde ich mich um den Ärmel kümmern. Lassen Sie uns auch die Truhe auswählen. Ich setze auf 100%. Dann brauchen wir Flex-Bücher, gefolgt von Rechtfertigung des Inhaltsbereichs dazwischen. Als Nächstes wähle ich Zähler aus. Gehen wir von 22 Ram aus, dann beträgt die Höhe zwei Ram. Lassen Sie uns den Randradius verwenden, um den Kreis zu bilden, setzen wir ihn auf 50%. Als Nächstes setze ich den Rand 2.1 Ram fest und verwende diese Farbe. Als Nächstes benötigen wir Rand zwei Ram und 04 Ram Null. Wir haben hier Kreise für beide Elemente. Als Nächstes wähle ich Sleeve Counter Transform aus. Übersetze die X-Funktion 30 auf 16 Ram. Als nächstes brauchen wir einen Brustzähler. Lass uns den Wert ändern. Es werden fünf Ram sein. Wir haben die Kreise gerade um unterschiedliche Beträge verschoben. Wählen wir den Ärmelzähler gefolgt vom Pseudoelement vor Lassen Sie uns den Inhalt auf leer setzen. Wir müssen Linien erstellen. Lassen Sie uns die Position auf absolut setzen. Dann brauchen wir die relative Position. Für den Zähler, der das übergeordnete Element ist, müssen wir die Position auf 50% dann sind es zwei Ram an der rechten Position. Dann müssen wir die Y-Funktion transformieren und übersetzen, Y-Funktion transformieren und übersetzen um das Element vertikal zu zentrieren. Als Nächstes setze ich die Breite auf 16 Ram. Was die Höhe angeht, so wird sie 0,1 Ram sein. Ich werde die Hintergrundfarbe ändern. Lass uns dieselbe Farbe verwenden. Hier haben wir die Linie für die Ärmellänge. Wir brauchen auch eine ähnliche Linie auf der rechten Seite. Nehmen wir nach dem Zuckerelement, wir müssen nur die richtige Position ändern, es wird minus sechs Ram sein. Und ändere auch die Breite. Wir brauchen sechs Ram. Wir haben hier eine nette und coole Theke. Machen wir dasselbe auch mit dem Truhenzähler. Lassen Sie uns die Klassennamen ändern, da wir die Breite für das Before-Element ändern müssen , es wird fünf Ram sein. Nach dem Element müssen wir an der richtigen Position -17 Ram stehen. Und auch die Breite wird 17 Ram betragen. Ordnung, beide Zähler sehen ziemlich gut aus und jetzt müssen wir die Unterseite anpassen Lass uns weitermachen und dieses Element auswählen. Ich werde mit 12 Ram spielen. Und die Höhe, es werden fünf Ram sein. Lass uns die Hintergrundfarbe ändern. Verwenden Sie erneut dieselbe Farbe. Ich setze die Anzeige auf Block und dann den Rand A O, um das Element zu zentrieren. Jetzt ist die Unterseite zentriert. Als Nächstes setzen wir den Grenzradius auf fünf Widder. Ich werde den Standardrahmen loswerden. Als Nächstes füge ich die Schriftgröße hinzu mache sie zu 1,4 Ram. Die Schriftstärke wird fett gedruckt, dann wird die Texttransformation in Großbuchstaben geschrieben. Außerdem brauchen wir einen Schatteneffekt. Stellen wir es auf 0,1 Ram, 0,2 M, einen Ram ein. Das ist die Farbe, die ich verwenden werde, Schwarz mit der Opazität 0,4. Die Schaltfläche sieht ziemlich gut aus Schließlich setze ich den Cursor auf den Zeiger. Okay, wir sind fast fertig. Das einzige, was wir tun müssen, ist, einen Klickeffekt mit der aktiven DO-Klasse zu erzeugen . Wir brauchen Transformation. Übersetze die y-Funktion mit dem Wert -0,2 Ram. Wenn ich auf die Schaltfläche klicke, haben wir diesen netten und coolen Klick-Fact In Ordnung, wir sind also mit diesem Projekt fertig. Ich hoffe es hat dir gefallen. Lass uns weitermachen und uns um den nächsten kümmern. 19. Projekt 14 - Animiertes Kontaktformular: Ordnung, lass uns weitermachen. Um unser nächstes Projekt zu erstellen, werden wir in diesem Abschnitt ein animiertes Kontaktformular mit HTML und CSS erstellen . Dieses Projekt wird einfach sein, aber ich denke, es wird interessant und ein bisschen lustig sein. Wie Sie sehen können, haben wir hier einige lustige Animationen und Effekte. Alles, was Sie hier sehen wurde mit reinem HTML und CSS erstellt. Wir verwenden hier keine Bilder. Oben auf der Seite haben wir eine Überschrift, dann folgen die Wellen, ich meine das Meer. Im Meer kann man zwei Gruppen von Fischen sehen. Sie bewegen sich von links und rechts. Außerdem haben wir hier ein paar verschiedene Eingabefelder und eine Schaltfläche zum Absenden. In Ordnung, also lassen Sie uns über dieses Projekt sprechen. Lass uns weitermachen und anfangen. Ich habe einen neuen Ordner auf dem Desktop erstellt. Lassen Sie uns weitermachen und es im VS-Code öffnen und dann unsere Arbeitsdateien erstellen. Wir werden nur HTML und CSS verwenden, wir benötigen hier Index von HTML und Stilen. Dann öffne ich die Index-HTML-Datei und erstelle das grundlegende HTML-Dokument. Lass uns weitermachen und den Titel ändern. Es wird ein Kontaktformular sein, dann werde ich die CSS-Datei verlinken. Dann lassen Sie uns weitermachen und das Projekt über den Live-Server im Browser ausführen . Lassen Sie uns den Editor und den Browser nebeneinander platzieren. Ordnung, während des gesamten Projekts werden wir Google-Telefone verwenden. Also lass uns weitermachen und die Website besuchen. Ich werde nach Google-Handys suchen, die Rubic Bubbles genannt Lassen Sie uns den Stil auswählen und dann den Link auswählen , den wir benötigen, um den Link in das Head-Element einzufügen In Ordnung, das ist es. Lassen Sie uns weitermachen und um das H-Mal-Markup zu erstellen, benötigen wir einen Container Ich bin in dem tiefen Etikett, in das ich Wasser einfüllen werde. Dann werden wir Wellen haben , in denen ich zehn Wellen und zehn tiefe Elemente erzeugen werde. Ich werde Deep Tag öffnen, was auch zur Fischgruppe gehören wird. Wir werden hier eine weitere erstklassige Fischgruppe haben. Eins. Als nächstes brauchen wir, was aus Fisch bestehen wird Tidy. Lassen Sie uns diesen Code fünfmal duplizieren. Wir werden sechs Fische in jeder Gruppe haben. Dann werde ich die gesamte Gruppe duplizieren und den Klassennamen ändern. Ordnung, im Moment ist nichts sichtbar, weil wir nur leere Entwicklungen haben. Lass uns weitermachen und anfangen, das CSS zu schreiben. Ich wähle jedes Element aus und setze dann Rand und setze beide auf Null. Als Nächstes müssen wir die Größe der Box an die Rahmenbox anpassen. Stellen Sie außerdem die Gliederung so ein, dass sich die Telefonfamilie nicht ändert. Es werden Rubinblasen sein. Als Nächstes setze ich die Telefongröße des HTML-Elements auf 62,5%, um den Ram als Maßeinheit zu verwenden In diesem Fall entspricht ein Ram zehn Pixeln. Lass uns weitermachen und uns um den Container kümmern. Ich werde die Breite auf 100% setzen dann wird die Höhe 100 Topfhöhe sein. Als Nächstes wähle ich Wasser aus. Stellen Sie die Breite auf 100% ein. Die Höhe wird 85% betragen. Stellen Sie die Position auf absolut ein. Wir benötigen die relative Position für das übergeordnete Element, den Container. Als Nächstes müssen wir die untere Position ebenfalls links haben. Die Position wird ebenfalls Null sein. Die Hintergrundfarbe wird 60 PTE 6 sein. Hier haben wir das Wasser. Als Nächstes wähle ich Wellen aus. Lassen Sie uns die Breite auf 100% setzen Dann wird die Höhe zehn m betragen. Als Nächstes müssen wir die Hintergrundfarbe ändern. Verwenden wir die Farbe EE. Stellen Sie die Position auf absolut ein. Dann wird die Position bei 15% liegen, diese Position wird Null sein. Wir haben hier die Wellen. Als Nächstes wähle ich die Welle selbst aus. Stellen Sie die Breite auf 10% ein, dann beträgt die Höhe zehn Ram. Ändere die Hintergrundfarbe, ich werde weiße Farbe verwenden. Hier haben wir die Wellen. Lassen Sie uns die Flexbox verwenden, um die Elemente horizontal in einer Reihe zu platzieren . Ich werde diese temporäre Hintergrundfarbe loswerden. Dann werde ich den Grenzradius für die Welle auf 00, 50% und 50% setzen für die Welle auf 00, . Außerdem benötigen wir 50%. Wie Sie sehen können, haben wir hier die Wellen. Okay, danach wähle ich Fish Group aus. Lassen Sie uns die Breite auf 40 Ram setzen. Dann wird die Höhe 15 Ram betragen. ändere ich die Hintergrundfarbe, machen wir es C. Dann ändere ich die Position, es wird absolut sein. Setzen Sie außerdem die oberste Position auf 50%. Die linke Position wird 40% betragen . Hier haben wir die erste Gruppe. Wählen wir Fischkörper aus. Ich setze auf sechs Ram, dann wird die Höhe auf drei Ram gesetzt. Ändere die Hintergrundfarbe, ich verwende 26388 Als Nächstes setze ich den Grenzradius auf 65%, dann auf 40% auf 40% und auf 65% auf 50% Jetzt haben wir Fischkörper Als Nächstes wähle ich Fischschwanz aus. Das ist auf Null gesetzt. Die Höhe wird Null sein. Wir brauchen eine Grenze. Wir brauchen eine feste Grenze zwischen zwei Rams. Die Farbe wird transparent sein. Als nächstes benötigen wir Border Top mit dem Wert Null. Dann verwende ich Border Bottom mit den Werten 1.8 Ram Solid und die Farbe wird 26388 sein Wie Sie sehen können, haben wir hier Dreiecke, die durch die Grenzen entstehen Wir müssen sie rotieren. Lassen Sie uns die Funktion „Z drehen“ transformieren. Der Wert wird 90 Grad sein. Die Schwänze sind gedreht, aber wir müssen sie bewegen und sie hinter den Fischkörpern neben den Fischen platzieren . Wählen wir Fish Set Display Flex aus. Jetzt haben wir bessere Ergebnisse, aber wir müssen die Schwänze näher an die Körper heranführen. Verwenden wir margin, right, mit dem Wert -1.2. Jetzt müssen wir die Schwänze bewegen Verwenden wir die Mitte der Einzelposten. Jetzt sieht alles ziemlich gut aus. Stellen wir den Randradius auf einen Widder ein, damit der Schwanz leicht abgerundet wird. Setzen wir die Position auf absolut. Jetzt landeten alle Fische übereinander. Wählen wir Fische mit dem Selektor aus, es wird der erste Fisch sein Lassen Sie uns die oberste Position auf 40% setzen , dann wird die richtige Position sein Zwei Ram. Hier haben wir den ersten Fisch. Lassen Sie uns die Opazität verringern. Mach es auf 0.3 Dann werde ich diesen Code duplizieren. Ändern Sie das, wir müssen die Position auf Null setzen. Was die richtige Position angeht , werden zehn Ram sein. Hier haben wir den zweiten Fisch. Lass uns den Code duplizieren, die Nummer ändern. Die beiden Positionen werden 30% betragen . Was die richtige Position angeht, werde ich 15 Ram daraus machen. Dann brauchen wir den vierten Fisch. Setzen wir die untere Position auf Null. Die rechte Position wird acht RAM sein. Als nächstes brauchen wir den fünften Gegenstand. Ich werde die oberste Position ändern, sie wird Null sein. Was die linke Position angeht, werde ich acht Ram daraus machen. Dann brauchen wir den sechsten Punkt, lassen Sie uns die Position auf 40% setzen. Was die linke Position betrifft, werde ich sie auf zwei Ram setzen. Als nächstes brauchen wir den siebten. Die untere Position wird Null sein, ist für die linke Position. Ich werde zehn daraus machen. Wir haben hier alle Fische aufgereiht. Lassen Sie uns den temporären Hintergrund loswerden. Wie Sie sehen können, haben wir hier die Fischgruppe. Sie sehen ziemlich nett aus. Als Nächstes wähle ich Fischgruppe eins aus. Die beiden Positionen werden 35% sein, die linke Position wird -25% sein . Lassen Sie uns diesen Code duplizieren, den Klassennamen ändern Wir brauchen Phishgruppe zwei setzen Sie die Position zwei auf 70%. Was die richtige Position angeht, werde ich sie auf -25% setzen. Außerdem müssen wir Y18 Grad umwandeln Wie Sie sehen können, befindet sich die Fischgruppe unten. Wenn ich diese beiden Linien entferne, landet die Fischgruppe tatsächlich auf der rechten Seite. Eigentlich sollten sie gedreht werden. Wir brauchen hier die Funktion Rotate Y und nicht die Translate. Die Fischgruppe ist rotiert. Als Nächstes müssen wir die Animation erstellen. Wir benötigen CSS-Keyframes. Der Name wird Phishing-Gruppe eins sein. Bei 0% müssen wir für die linke Position einen Wert von -25% haben. Was die Transformationsfunktion zum Drehen von Y angeht, muss sie Null sein Dann liegt der nächste Schritt bei diesem Schritt bei 47%. Ich werde die linke Position auf 100% setzen , da die Drehfunktion dieselbe sein wird. Dann werden es 53% sein Die linke Position wird 100% sein . Was die Drehfunktion angeht, werde ich auf 18 Grad einstellen. Dann wird der nächste Schritt bei 100% liegen . Das ist das Ende der Animation. Ich werde mir diese beiden Zeilen schnappen. Stellen wir die Drehfunktion auf 18 Grad ein. Jetzt müssen wir diese Regeln anwenden, indem wir die Animationseigenschaft verwenden , die Fischgruppe eins, den Namen der Animation, darstellt. Dann brauchen wir eine Dauer von 30 Sekunden unendlich. Und die lineare Funktion. Wie Sie sehen können, bewegt sich die Fischgruppe gut von links nach rechts. Sobald sie versteckt sind, sollten sie sich drehen und zur linken Seite zurückkehren. In Ordnung, alles funktioniert gut. Jetzt brauchen wir dieselbe Animation für die zweite Fischgruppe. Lass uns das ändern. Der Name wird Fischgruppe zwei sein, dann hier, rechts, Position, Drehfunktion wird 180 Grad sein. Dann ändere hier nochmal die Position, die wir brauchen, richtig 180 Grad. Wir brauchen dasselbe auch für diesen Schritt. Fügen wir hier Null ein. Wir brauchen hier Null. Schon wieder. Stellen wir die Animation für die zweite Gruppe ein, wir müssen hier 4 Sekunden verzögern und auch den Namen ändern. Wir brauchen Fischgruppe zwei. Wie Sie sehen können, bewegen sich beide Gruppen gut. Wir müssen diese Scrollleiste von hier aus loswerden. Lassen Sie uns Overflow für den Container verstecken. Okay, jetzt haben wir keine Scroll-Blows mehr und beide Gruppen bewegen sich Als Nächstes müssen wir uns um die Eingabefelder kümmern. Lassen Sie uns HTM beim Markup erstellen. Wir brauchen Kontakt. Dann ein Überschriftenelement mit der Kontaktüberschrift des Klassennamens, es wird Kontakt mit uns sein. Dann benötigen wir ein Formularelement mit dem Klassennamen, das Kontaktformular. Lassen Sie uns ein tiefes Element einfügen, das die Eingabegruppe sein wird. Ich werde insbela als dein Name verwenden, dann gehe ich zu einem Eingabeelement mit dem Typ Text Lass uns diesen Code duplizieren. Wir benötigen dieselbe Eingabegruppe für E-Mail. Ändern Sie den Typ. Es wird E-Mail sein. Dann brauchen wir eine Eingabegruppe für Nachricht anstelle von Eingabeelementen, ich werde den Textbereich verwenden. Hier haben wir die Eingabefelder. Lassen Sie uns weitermachen und diese Elemente stylen. Ich wähle die Kontaktüberschrift aus. Lassen Sie uns diese Position auf absolut setzen. Die oberste Position wird Frame sein, dann die linke Position wird 50% sein . Und wenn das Element mit Transform Translate x -50% zentriert mit Transform Translate x werden soll Als Nächstes setze ich die Telefongröße auf neun Rams, ändere die Farbe, es wird eine orange Farbe sein , 36414 Hier haben wir die Überschrift. Lassen Sie uns hier einen Schatteneffekt verwenden. Lassen Sie uns den Textschatten auf 0,5 setzen, dann ein RB, eine schwarze Farbe mit Opazität 0,2 In Ordnung, die Überschrift sieht ziemlich gut aus Als Nächstes werde ich das Kontaktformular bearbeiten. Lassen Sie uns diese Position auf absolut setzen. Dann werden die beiden Positionen bei 35% liegen . Ich setze die Position links auf 50%. Wir benötigen erneut Zentrierung mit Transform Translate x -50%. Das Kontaktformular ist auf der Seite zentriert Als Nächstes wähle ich die Eingabegruppe aus. Lassen Sie uns das Display auf Flex setzen. Wir müssen die Richtung ändern, in der es die Spalte sein wird. Dann setze ich den Rand unten auf drei Ram. Wie Sie sehen können, haben wir etwas Abstand zwischen den Nächsten. Ich wähle ein Label aus. Lassen Sie uns die Schriftgröße auf 2,3 Ram setzen. Dann wird die Farbe weiß sein. Ich werde den Rand unten auf einen Ram setzen. Die Etiketten sehen gut aus. Als Nächstes wähle ich die Eingabeelemente aus. Lass uns mit 250 Ram beginnen. Dann wird die Höhe sein. 0,5 RAM. Wir brauchen einen Rand ohne Rand, dann müssen wir die Ecken abrunden, indem wir den Randradius verwenden, drei Ram. Als Nächstes werde ich mit Polsterung etwas Platz schaffen. Sagen wir es zu einem Ram, 1m1m, und dann zu zwei Ram auf der Die ersten beiden Eingabefelder sehen ziemlich gut aus. Als Nächstes stelle ich die Telefongröße auf 1,6 RAM ein und ändere die Farbe. Ich werde 555 verwenden. Wir brauchen Box Shadow 000.3 Ram, einen Ram. Und die Farbe wird RGBA mit Opazität 0.1 sein . In Ordnung, als Nächstes werde ich mich um den Textbereich kümmern Lassen Sie uns diese Zeilen tatsächlich kopieren dann die Höhe auf zehn Ram setzen Wie Sie sehen können, sieht der Textbereich gut aus. Als Nächstes platziere ich hier unten. Wir vergessen, dass wir die Schaltfläche „ Senden“ vergessen haben. Lassen Sie uns den Klassennamen auf Kontakt setzen. Übrigens müssen wir hier eine Nachricht senden, dann wähle ich unten Lass uns mit 250 Ram beginnen. Dann wird die Höhe fünf sein. Ändere den Rand, mach ihn keins. Dann müssen wir die Hintergrundfarbe orange haben. Ändere die Farbe, sie wird weiß sein. Dann mache ich Schriftgröße zwei Ram. Außerdem brauchen wir etwas Abstand zwischen den Buchstaben. Stellen wir es auf 2,2 Ram ein. Transformiere dann Text in Großbuchstaben. Der nächste Weg ist der Grenzradius. Um den Button abgerundet zu machen, verwende ich etwas Schatten. Lassen Sie uns diesen Code von hier holen und ihn auch für den Button verwenden. Lassen Sie uns zum Schluss den Mauszeiger auf den Punkt setzen. Okay, das ist es also. Wir sind mit diesem Projekt fertig. Hoffentlich war es interessant. Lassen Sie uns jetzt weitermachen und uns um das nächste Projekt kümmern. 20. Projekt 15 - Leuchtender Button: Ordnung, es ist Zeit, weiterzumachen und mit der Erstellung unseres nächsten Projekts zu beginnen In diesem Abschnitt werden wir diesen schönen und coolen, leuchtenden Boden bauen diesen schönen und coolen, leuchtenden Boden Das Projekt wird auf Basis von HTML und CSS erstellt. Wir werden nur diese beiden Technologien verwenden. Wie Sie sehen können, haben wir hier einen unteren Teil mit etwas Text und auch den Schatten darunter. Der Text unten blinkt und auch der Schatten leuchtet Wenn ich mit der Maus über den Boden fahre, erhalten wir diesen schönen und Der Text hört auf zu blinken und auch der Schatten dehnt sich aus, oder? Ich denke, dieses Projekt wird interessant und lustig sein Sie werden lernen, wie Sie diese Effekte nur mit HTML und CSS erstellen können. Okay, lass uns weitermachen und anfangen. Ich habe einen neuen Ordner auf dem Desktop erstellt , der momentan leer ist. Lassen Sie uns weitermachen und es im VS-Code öffnen und unsere Arbeitsdateien für HTML und CSS erstellen. Wie gesagt, wir werden nur diese beiden Technologien verwenden. Lassen Sie uns weitermachen und die Index-HTML-Datei öffnen und das grundlegende HTML-Dokument erstellen. Ich werde den Titel des Projekts ändern. Es wird ein Button sein, dann werde ich die CSS-Datei verlinken. Lassen Sie uns hier den Namen der Datei angeben. Lassen Sie uns das Projekt im Browser öffnen und den Editor und den Browser nebeneinander platzieren . Außerdem werde ich mir Google-Telefone von der Google Phones-Website holen . Lassen Sie uns weitermachen und nach dem Telefonzeichen Can Negative suchen. Wählen wir diese Stile aus, kopieren dann den Link und fügen ihn in das Head-Element ein. Okay, jetzt können wir anfangen, das HM-Markup zu schreiben und Deep Tech zu öffnen, was der Container sein wird. Ich werde einen Button mit der Klasse BTN einfügen. Dann brauchen wir das Typattribut, das eine Schaltfläche sein wird Ich werde dein Span-Element mit der Klasse Text me here, hover einfügen der Klasse Text me here, hover Das war's mit dem H-Mal-Markup. Fangen wir an, CSS zu schreiben. Wir benötigen eine Randauffüllung, damit jedes Element Null ist. Dann setze ich die Größe der Box auf Border Box. Als Nächstes setze ich die Gliederung auf „Nicht“. Ändere auch die Schriftfamilie, die signica negativer Serif. Dann müssen wir die Schriftgröße des H-Dimel-Elements auf 62,5% setzen die Schriftgröße des H-Dimel-Elements auf , um m als Maßeinheit zu verwenden In diesem Fall entspricht ein m zehn Pixeln. Als Nächstes wähle ich den Container aus. Lassen Sie uns auf 100% setzen . Dann wird die Höhe 100 Viewpot-Höhe sein Ändern Sie die Hintergrundfarbe. Ich werde hier die Farbe 1611d verwenden, es ist eine dunkle Dann brauchen wir eine Flexbox, um den Inhalt zu zentrieren. Lassen Sie uns das Justify Content Center und ein Line Items Center verwenden. Wie Sie sehen können, befindet sich der untere Teil in der Mitte der Seite. Danach wähle ich Glowing PTN aus. Nehmen wir 245 Ram, dann wird die Höhe 12 Ram sein Lassen Sie uns den Hintergrund auf „Keiner“ setzen. Hier haben wir den Boden. Als Nächstes müssen wir die Grenze definieren. Stellen wir es auf 2,7 Ram ein, solide. Bei der Farbe werde ich die RGB-Funktion verwenden. Die Werte werden 212044 sein. Als Nächstes setze ich den Grenzradius auf zwei Ram. Lassen Sie uns die Ecken abrunden. Als Nächstes setze ich die Farbe auf denselben RGB-Wert. Eigentlich brauchen wir hier 74.4 Jetzt hat sich die Farbe leicht verändert und ich denke, es ist viel besser Als Nächstes benötigen wir eine Größe von sieben RAM. Dann werde ich etwas Platz zwischen den Buchstaben schaffen. Stellen wir es auf 2,5 Ram ein. Change Box Shadow wird im Set 003 Ram RGP sein und dieselbe Farbe haben Jetzt haben wir viel bessere Ergebnisse. Ich werde Padding Left 2,5 Ram verwenden. Als nächstes legen wir den Punkt cos auf zwei Punkte fest. Schauen wir uns das unten rechts an. Als Nächstes müssen wir unten auswählen, gefolgt vom Vorher-Element. Lassen Sie uns den Inhalt auf leer setzen. Dann setze ich die Breite auf 100%. Die Höhe wird 100% betragen . Ich setze die Position auf absolut. Wir benötigen die relative Position für das Musterelement, das die Schaltfläche selbst ist. Lassen Sie uns die Position auf Null setzen. Die Position wird ebenfalls Null sein. Als nächstes brauchen wir Box Shadow 006 Ram. Die Farbe wird die Farbe sein, die wir verwendet haben. Als Nächstes benötigen wir einen leuchtenden Boden mit dem Inhalt des Elements, das leer sein wird Dann müssen wir die Position absolut haben. Die oberste Position wird Null sein. Die linke Position wird 50% sein , dann wird die Breite 100% sein. Was die Höhe angeht, werde ich auch sagen , 100%. Als Nächstes definiere ich den Hintergrund. Die Farbe wird dieselbe sein. Stellen wir die Opazität 2,7 ein. Dann müssen wir die Transformation auf -50% und dann auf 130% Außerdem verwende ich hier Drehfunktion in X-Richtung, der Wert wird 45 Grad sein Und ich werde auch die Skalierungsfunktion 1.35 verwenden . Hier haben wir Lassen Sie uns einen Filter mit Unschärfefunktion mit dem Wert drei Ram verwenden. Schritt für Schritt erstellen wir den Schatten. Lassen Sie uns den Punkt festlegen: Ereignisse, keine. Als Nächstes verwende ich die Perspektive, was uns helfen wird, drei D-Effekte zu erzeugen. Sagen wir es zu sechs Ram. Wie Sie sehen können, hat sich der Schatten ausgedehnt. Als Nächstes wähle ich leuchtenden Text aus. Lass uns Tech Shadow 2001 Ram einstellen. Die Farbe wird RGBA 212474 sein. Dann brauchen wir einen anderen Wert, 001 Ram. Rgba dieselbe Farbe, aber mit der Opazität 0,7 Eigentlich brauchen wir auch hier Opazität 0,7 Das Ergebnis seht ihr hier. Als Nächstes werde ich eine CSS-Animation erstellen. Lassen Sie uns den Namen des Keyframe-Randes auf 0% setzen . Wir benötigen eine Deckkraft 0,1. Dann wird der nächste Schritt 2% sein und der Wert wird eins sein Lassen Sie uns diese Codeänderung duplizieren. Der Prozentwert wird 4% sein, der Wert wird 0,1 sein Als nächstes benötigen wir 8% und der Wert der Opazität wird eins sein Ich füge 70% mit der Deckkraft 0,7 ein, dann stelle ich 100% und die Deckkraft Wir benötigen Ihre Animationsfunktion um diese Regeln anzuwenden Das ist die Dauer von 2 Sekunden. Dann brauchen wir linear und auch unendlich. Wie Sie sehen können, haben wir hier einen schönen und coolen, leuchtenden Effekt Als Nächstes erstelle ich weitere Keyframes mit dem Namenstext Bei einem Wert von 0% setze ich die Deckkraft auf 0,1 Als Nächstes werde ich 2% erreichen, die Deckkraft wird eins sein Dann brauchen wir hier 8% und die Opazität 0,1. Dann ist der nächste Schritt 9% mit dem Wert eins Dann haben wir eine Kapazität von 12%, die dann 0,1 ist . Als Nächstes füge ich Ihre 20% mit der Deckkraft Dann haben wir hier 25% mit dem Wert 0,3. Der nächste Schritt wird 30% sein und die Opazität wird eins sein Fügen Sie dann Ihre 70% mit dem Wert 0,7 Der nächste Schritt besteht darin, 72% mit dem Wert 0,2 zu erreichen. Lassen Sie uns diese Codeänderung erneut duplizieren Der Prozentwert wird 77% sein und die Deckkraft wird 0,9 sein. Dann setze ich den Prozentwert auf 100 und die Deckkraft auf 0,9. Verwenden wir erneut die 0,9. Verwenden wir erneut Animationseigenschaft mit dem Namen der Keyframes Die Dauer wird 3 Sekunden betragen. Dann brauchen wir linear und wieder unendlich Wie ihr seht, haben wir hier schön blinkend und leuchtend die Fakten Das Einzige, was ich tun muss, ist den leuchtenden Hover-Effekt zu erzeugen den leuchtenden Hover-Effekt Mit dem Hover setze ich den Hintergrund auf RGB, die Farbe, die wir die Farbe, die Ich werde die Farbe des Textes ändern. Sagen wir, 22729 soll es sein. Dann brauchen wir, dass es keine Animation gibt. Benutze auch Transition. Sobald wir das schön und spaltbar haben, blinkt der Text tatsächlich immer noch, also wähle ich den leuchtenden Boden mit dem Hover, gefolgt vom also wähle ich den leuchtenden Boden mit dem Hover, gefolgt vom Before-Pseudoelement. Lassen Sie uns Box Shadow 2015 Ram und RGB einstellen, die Farbe verwendet auch den Übergang den Jetzt dehnt sich der Schatten gut aus. Als Nächstes wähle ich mit dem Mauszeiger unten aus, gefolgt vom After-Element Lassen Sie uns auf 2.100,20% setzen Die Höhe wird 120% betragen. Außerdem müssen wir Lassen Sie uns diesen Wert tatsächlich streichen. Ich werde den Übersetzungswert ändern. Es wird 110% sein. Außerdem werde ich ihren Filter mit Unschärfefunktion mit dem Wert fünf verwenden Unschärfefunktion mit dem Wert Verwenden Sie außerdem den Übergang, um einen gleichmäßigen Effekt zu erzielen. Jetzt sieht alles ziemlich gut aus. Endlich werde ich mich um den Text kümmern. Lassen Sie uns die Schaltfläche mit dem Mauszeiger auswählen, gefolgt von der leuchtenden Textauswahl Wir müssen die Animation beenden. Setzen wir es auf „Nein“. In Ordnung, jetzt alles perfekt und mit diesem Projekt sind wir fertig. Lass uns weitermachen. 21. Projekt 16 - Hamburger-Menü: Ordnung, es ist Zeit, weiterzumachen und mit der Erstellung unseres nächsten Projekts zu beginnen In diesem Abschnitt werden wir ein Hamburger-Menü mit HTML, CSS und Javascript erstellen. Lassen Sie uns weitermachen und das Projekt beschreiben. Wie Sie sehen können, haben wir hier ein Hintergrundbild im Vollbildmodus. In der Mitte der Seite sehen Sie den Text Hamburger-Menü Die Buchstaben haben einen transparenten Hintergrund und die Ränder. Dann sehen Sie in der oberen rechten Ecke der Seite das Menüsymbol diesem schönen und coolen animierten Hintergrund. Wenn ich auf das Menüsymbol klicke, wird der Hintergrund erweitert und die Menüelemente werden angezeigt. Wenn ich mit der Maus über die Elemente fahre, ändern sie die Farbe diese coole und nette Weise Wenn ich dann auf das X, Patton klicke , werden die Menüelemente ausgeblendet Ordnung, also ich denke, dieses Projekt wird interessant sein und es wird Ihnen gefallen Lass uns weitermachen und anfangen. Ich habe einen neuen Ordner auf dem Desktop erstellt , der einen Ordner für die Bilder enthält. Lassen Sie uns weitermachen und den Ordner und den VS-Code öffnen und dann unsere Arbeitsdateien für HTML, CSS und auch für Javascript erstellen . Als Nächstes öffne ich die Index-HTM-Datei und erstelle das grundlegende HTM-Dokument. Lassen Sie uns den Titel ändern. Es wird ein Hamburger-Menü sein. Ich werde die CSS- und auch die Javascript-Dateien verlinken. Wir benötigen das Script-Tag und den Dateinamen im Quellattribut. Okay, lassen Sie uns weitermachen und das Projekt im Browser öffnen. Platzieren Sie dann den Browser und den Editor wie folgt nebeneinander . Als Nächstes werde ich die Google Phones-Website besuchen, da wir die Google-Telefone während des gesamten Projekts verwenden werden. Lassen Sie uns weitermachen und nach dem Telefon namens Secular One Ich wähle den Stil aus, kopiere dann den Link und füge ihn in das Head-Element ein Jetzt können wir mit der Erstellung des HD-Markups beginnen. Öffnen wir Deep Tag, der der Container sein wird. Dann öffne ich im Container Lending, öffne ich im Container Lending, in dem wir H ein Überschriftenelement haben , das Hamburger-Menü Als Nächstes erstelle ich ein Hamburger-Menü, in das ich Elemente mit der Klassennavigation einfügen werde Elemente mit der Klassennavigation In der Navigation werden wir ein Link-Element haben, das das Navigationselement sein wird, das wir hier benötigen. Dateninhalt, geben Sie den Text Home zu. Fügen wir hier Home ein. Dann brauchen wir ein paar verschiedene Gegenstände. Beim zweiten wird es um den Block gehen. Der nächste wird eine Galerie sein. Was das letzte Navigationselement betrifft, so wird es Kontakt sein. Als Nächstes benötigen wir das Menü. Ich werde hier Lines einfügen. Wir werden drei Zeilen haben. Jede Anlage wird zwei Klassen haben: Linie, Linie eins, Zeile zwei und Zeile drei. In Ordnung, das war's mit dem HTML-Markup. Alle Elemente werden erstellt. Und jetzt müssen wir die CSS-Datei öffnen und anfangen , das CSS zu schreiben. Zuerst wähle ich jedes Element mit einem Sternchen aus und setze dann den Rand und setze beide auf Null Als Nächstes müssen wir die Eigenschaft zur Boxgröße definieren. Es wird eine Border-Box sein. Dann brauchen wir, dass es keine Textdekoration gibt. Außerdem werde ich die Telefonfamilie für jedes Element festlegen , zwei säkulare, ein Sensorreferenz Wie Sie sehen können, werden die Standardstile auf die Elemente angewendet Als Nächstes setze ich die Standardgröße des HTM-Elements auf 62,5%, da wir M als Maßeinheit verwenden In diesem Fall entspricht ein M zehn Pixeln. Lassen Sie uns weitermachen und den Container auswählen. Ich werde seine Breite definieren. Es wird 100% sein, dann brauchen wir Höhe, es wird 100 Meter Höhe sein Dann kümmere ich mich um die Landung. Dann legen wir die Höhe fest. Ich werde die Breite auf 100% setzen. Was die Höhe angeht, wird sie ebenfalls 100% betragen. Wir müssen die Landung ausweiten. Als Nächstes ändere ich den Hintergrund. Lassen Sie uns den linearen Farbverlauf verwenden. Die erste Farbe wird RGBA-Schwarz mit einer Opazität von 0,8 sein . Für die zweite Farbe benötigen wir hier denselben RGBA-Wert, aber die Deckkraft wird 0,9 sein. Als Nächstes müssen wir das Bild aus dem Bilderordner auswählen Wir benötigen ein Hintergrundbild im Vollbildmodus. Außerdem müssen wir die Position in der Mitte haben und dann dürfen wir uns nicht wiederholen. Wir haben hier das Hintergrundbild im Vollbildmodus. Eigentlich werde ich die Eigenschaft zwei für die Hintergrundgröße festlegen , danach das Titelbild. Lassen Sie uns weitermachen und Flex-Bücher verwenden. Darauf müssen wir die Überschrift zentrieren. Inhaltscenter von Justify verwenden das Inhaltscenter von Justify verwenden, können Sie in der Mitte der Einzelposten sehen, dass die Überschrift perfekt auf der Seite zentriert ist. Als Nächstes wähle ich das H-Überschriftenelement aus und passe es an. Lassen Sie uns die Telefongröße definieren. Es werden zehn sein. Dann brauchen wir Farbe. Setzen wir die Farbe auf C A, A auf fünf. Oh, es ist gelb. Als Nächstes werde ich einen Schatteneffekt erzeugen. Stellen wir den Textschatten 203 Ram, sechs Ram ein. Und die RGBA-Farbe mit Opazität 0,7 Als Nächstes werde ich etwas Abstand zwischen den Buchstaben schaffen Stellen wir es auf 2,3 Ram ein. Jetzt brauchen wir einen transparenten Hintergrund für die Buchstaben. Dafür verwende ich die Eigenschaft Webkit Text Stroke Es wird 0,1 Ram sein und die Farbe wird gelb sein Außerdem müssen wir die Farbe auf transparent setzen. Wie Sie sehen können, sieht die Überschrift ziemlich gut aus. Als Nächstes werde ich mich um die Navigationselemente kümmern . Wählen wir Link Element aus und verwenden die Option Keine anzeigen , um die Link-Elemente auszublenden. Jetzt müssen wir uns um die Navigation kümmern. Definieren wir mit Höhe. Die Breite wird sein, dann brauchen wir auch Höhen. Ändere die Hintergrundfarbe. Wir werden hier Farbe 28231 verwenden. Hier haben wir das Element unten. Kümmern wir uns um seine Position. Ich werde die Position auf absolut setzen. Dann benötigen wir die relative Position für den Container. Weil wir das Element entsprechend dem Container positionieren werden. Lassen Sie uns die oberste Position auf vier setzen. Was die richtige Position angeht, wird es auch sein. Dann brauchen wir Box Shadow. Setzen wir es auf 013. Und die Farbe wird schwarz mit der Opazität 0,7 sein . Hier haben wir das Element in der oberen rechten Ecke der Seite platziert Lassen Sie uns weitermachen und CSS-Animationen mit Keyframes erstellen. Wir müssen hier BG Anim auf 0% nennen. Ich werde den Grenzradius auf die folgenden Werte setzen Der erste Wert wird bei 63% liegen, dann haben wir 37% Der nächste Wert wird bei 54% liegen, dann bei 46%, dann brauchen wir hier. Und 85% 48% dann 52% Der letzte wird 45% sein. Der nächste Schritt wird 14% sein. Lassen Sie uns diesen Code von hier holen und dann die Werte ändern, die wir hier benötigen. 40% dann 60% Der nächste Wert wird 49% sein Dann haben wir 60% 40% und der letzte Wert wird 51% sein . Dann werde ich Ihren nächsten Schritt platzieren, 28% Lassen Sie uns den Code erneut abrufen und die Werte ändern. Der erste Wert wird 54% sein, dann 46% 38% 62% Als nächstes haben wir hier 70%, 30% und 51%. Der nächste Schritt wird 42% sein . Lassen Sie uns weitermachen und die Werte für den Grenzradius erneut ändern. Wir brauchen hier 61% und dann 39% Der nächste Wert wird 55% 45% sein Als nächstes brauchen wir 61%, dann 38% 62% 39% Lassen Sie uns weitermachen und den nächsten Schritt definieren. Es werden 56% sein, um die Werte zu ändern. Der erste Wert wird 61% 39% 67% 33% sein dann werden wir 70%, 50%, 50% und 30% haben . Der nächste Schritt wird 70% sein. Lassen Sie uns die Werte ändern. Der erste Wert wird 50% sein, dann wieder, 50% 34% 66% Dann brauchen wir hier 56% 68% 32% und 44% Der nächste Schritt, es werden 84% sein. Ändern wir den ersten Wert. Es wird 46% sein, dann haben wir 54% 50% Dann wieder 50% Als Nächstes haben wir 35% 61% 39% 65% In Ordnung, als Teil des letzten Schritts bin ich bei 100%. Wir benötigen dieselben Werte, die wir für den ersten Schritt verwendet haben, die Keyframes bereits. Als Nächstes benötigen wir Animationseigenschaften. Fügen wir den Namen der Animation ein. Dann brauchen wir eine Dauer von 7 Sekunden, linear und unendlich. Wie Sie sehen können, haben wir hier diese schönen und coolen animierten Elemente. Lassen Sie uns Sie vom Menüsymbol wegführen. Ich werde diese Position definieren. Setzen wir es auf absolut. Dann brauchen wir zwei Positionen. Dann werden wir sieben Ram. Dann haben wir hier die richtige Position. Dann setze ich es auf sechs Ram. Stellen Sie die Breite ein, sie wird 3,5 Ram sein. Dann ist die Höhe zwei. Stellen Sie dann den Cursorzeiger ein, und wir benötigen auch eine Hintergrundfarbe. Lass uns hier gelbe Farbe verwenden. Hier haben wir das Menüsymbol. Jetzt müssen wir uns um die Leitungen kümmern. Stellen wir 23,5 Fram ein, dann wird die Höhe 0,2 Ram sein Ändern Sie die Hintergrundfarbe, verwenden Sie hier wieder die gelbe Farbe und entfernen Sie dann diese temporäre Farbe von hier aus Hier haben wir die Linien, jetzt müssen wir sie trennen. Lassen Sie uns die Position absolut setzen. Dann müssen wir Zeile eins auswählen. Definiere zwei. Die Position wird Null sein. Dann brauchen wir Zeile zwei. Wir brauchen eine Breite von 60% , dann beträgt die Position 0,9 RAM. Außerdem brauchen wir die linke Position. Setzen wir zwei Punkte auf Sevel Ram. Hier haben wir die zweite Zeile. Nehmen wir hier die dritte Zeile. Ich hole mir diesen Code setze den Klassennamen auf Zeile drei. Dann müssen wir uns auf 1,8 RAM positionieren, okay. Also hier haben wir das Menüsymbol. Es sieht ziemlich gut aus. Jetzt müssen wir etwas Javascript schreiben. Lassen Sie uns eine Variable erstellen. Es wird ein Menüsymbol sein. Ich werde dieses Element mit der Abfrageselektor-Methode auswählen mit der Abfrageselektor-Methode Wir müssen hier den Klassennamen angeben. Es wird ein Menüsymbol sein. Dann brauchen wir eine weitere Variable. Es wird ein Hamburger-Menü sein. Lass uns den Klassennamen ändern. Wir brauchen ein Hamburger-Menü. Als Nächstes füge ich dem Menüsymbol mit einem Klickereignis einen Event-Listener Menüsymbol mit einem Klickereignis einen Außerdem müssen wir hier die Calbeck-Funktion übergeben , die ausgeführt wird Sobald wir beim Klicken auf das Element geklickt haben, müssen wir dem Hamburger-Menü mithilfe der Togo-Methode eine neue Klasse hinzufügen Hamburger-Menü mithilfe der Togo-Methode Der Klassenname wird sich, sagen wir, ändern. Jetzt müssen wir diesen Klassennamen in der CCS-Datei verwenden , um neue Stile zu erstellen, die angewendet werden, sobald wir auf das Menüsymbol klicken Lassen Sie uns weitermachen und „Mit Navigation ändern“ verwenden. Sobald wir klicken, müssen wir etwas ändern. Die oberste Position wird bei 50% liegen dann wird die rechte Position ebenfalls bei 50% liegen. Und wir müssen das Element mit Transform Translate zentrieren. Die Werte liegen bei 50% und dann -50%. Sobald wir auf das Symbol klicken, wird das Element in der Mitte, der Navigation, platziert Jetzt müssen wir das Element vergrößern. Stellen wir 200% ein, dann wird die Höhe ebenfalls 200% betragen Außerdem müssen wir die Animation posten. Dafür verwende ich die Eigenschaft Animation Play State und es wird Post sein. Wenn ich klicke, wird das Element erweitert und die Animation wird gestoppt. Jetzt müssen wir diese Scrollbalken verstecken. Dafür verwende ich Overflow Hidden. Jetzt haben wir hier keine Scroll-Bs. Als Nächstes füge ich hier einen Übergang hinzu. Um den Effekt flüssiger zu machen, benötigen wir eine gewisse Delay-Zeit und auch eine Cubic-Busier-Funktion , um den Effekt schöner zu machen Die Werte werden 0,20 3.110,30 2,1 sein, auch hier brauchen wir. Die Werte werden 0,20 3.110,30 2,1 sein, auch hier brauchen wir. Die richtige Position wird 0,4 Sekunden sein. Die Dauer wird 0,4 Sekunden betragen. Dann brauchen wir eine Verzögerungszeit. Dann wieder die Cubic-Busier-Funktion. Als Nächstes werden wir transformieren müssen. Die Dauer wird 0,3 Sekunden betragen. Dann brauchen wir eine Verzögerungszeit. Als nächstes benötigen wir mit, bei einer Dauer von 0,8 Sekunden wird die Verzögerungszeit 1 Sekunde betragen. Und wieder benötigen wir die kubische Bussier-Funktion. Als nächstes kommt die Höhe 0,8 Sekunde, 1 Sekunde. Und dieselbe kubische Ser-Funktion. Eigentlich ist es das. Wie Sie sehen können, haben wir hier diesen schönen und coolen Effekt. Die Navigation wird auf diese coole Weise erweitert. Schauen wir uns den Übergang an und fügen ihn hier hinzu. Lassen Sie uns standardmäßig den Code organisieren, dann die Verzögerungszeit loswerden und ihn ändern. Machen Sie es 1,1 Sekunden lang. Wir brauchen hier wieder 1,1 Sekunden. Als nächstes kommt Transformation. Lassen Sie uns die Verzögerungszeit ändern. Es wird 1,1 Sekunden dauern. Was die Breite angeht, brauchen wir hier 0,7 Sekunden und dann 0,4 Sekunden für die Höhe. Fügen wir hier die gleichen Werte hinzu. Wenn ich jetzt klicke und dann schließe, bekommen wir hier die schönen und coolen animierten Effekte. Okay, jetzt müssen wir uns um die Leitungen kümmern. Fangen wir mit der ersten Zeile an. Wir benötigen zwei Positionen , um 0,9 Gramm zu wiegen. Dann müssen wir die Funktion Rotate transformieren. Der Wert wird 45 Grad betragen. Als nächstes brauchen wir Zeile zwei mit dem Klassenwechsel der die Deckkraft auf Null setzt und die Durchführbarkeit, wir müssen die zweite Zeile überhaupt ausblenden Für die dritte Zeile benötigen wir hier zwei Positionen mit 0,9 Ram Dann muss die Transformationseigenschaft die Funktion um den Wert -45 Grad drehen die Funktion um den Wert -45 Grad Sobald ich hier klicke, kleines Problem. Ja, wir müssen den Klassennamen ändern. Jetzt haben wir hier eine X-Schaltfläche, die beim Klicken geschlossen wird. Fügen wir hier einen Übergang hinzu. Nach 1 Sekunde schnappe ich mir auch die Funktion Cubic Busier Außerdem müssen wir hier 0,3 Sekunden, 1,6 Sekunden transformieren. Dann werde ich kopieren, eigentlich brauchen wir hier den Übergang und nicht die Transformation. Lass uns den Code kopieren und hier einfügen. Sobald ich klicke, bekommen wir diese coole Transformation des Menüsymbols. Ich finde es sieht ziemlich cool aus. Als Nächstes verwenden wir Transition für die erste Zeile. Und die Verzögerungszeit wird 1,6 Sekunden betragen. Außerdem benötigen wir eine Dauer von 1 Sekunde ohne Verzögerungszeit. Verwenden Sie dann Transition für die zweite Zeile. Standardmäßig benötigen wir einen Opazitätspunkt von 1 Sekunde und die Verzögerungszeit von 1,6 Sekunden Lass uns den Code kopieren. Eigentlich brauchen wir ihn für Zeile drei. Wenn ich jetzt klicke, kommen wir hierher. Diese nette und coole Tatsache. Okay, kümmern wir uns um die Navigationselemente. Ich werde sie wieder anzeigen. Lassen Sie uns die Link-Elemente anpassen. Ich werde Flexbooks mit Justify Content Center verwenden. Und dann müssen wir die Richtung ändern. Lassen Sie uns die Spalte erstellen und nebenbei benötigen wir auch die Mitte der Einzelposten. Wie Sie sehen können, haben wir hier die Navigationspunkte. Lassen Sie uns die Schriftgröße auf sieben Ram setzen. Dann wird die Farbe CCC sein. Ändern Sie den Buchstabenabstand. Stellen wir es auf 0,3 Ram ein. Als Nächstes benötigen wir Margin Bottom. Machen wir einen Ram draus. Hier haben wir die Navigationspunkte. Sie sehen nett aus. Wählen wir die Navigation gefolgt vom Link aus. Und vor der Entwicklung wird es sich bei dem Inhalt um Attributdateninhalte handeln, die wir im HTML-Element verwendet haben. Dann setze ich die Position auf absolut. Dann benötigen wir die relative Position für das übergeordnete Element. Lassen Sie uns die Position auf Null setzen. Dann wird auch die Beinposition Null sein. Ich werde die Farbe auf Gelb setzen. Ich setze die Farbe auf B, D neun. Dann wird die Breite 100% betragen . Hier haben wir das Element erzwungen. Lassen Sie uns die Breite auf Null setzen und dann das Element mithilfe von Overflow Hem ausblenden Leerraum muss p sein. Als Nächstes müssen wir Navigation A mit dem Mauszeiger auswählen, müssen wir Navigation A mit dem Mauszeiger auswählen gefolgt vom Before-Element Beim Hover müssen wir die Breite ändern. Es wird 100% sein. Dann brauchen wir deinen Übergang mit 0,6 Sekunden Sobald ich den Mauszeiger bewege, erhalten wir diesen schönen und coolen Effekt, sobald ich die Navigation schließe Dann haben wir hier ein kleines Problem, das wir brauchen, Opazität Null und Sichtbarkeit Als Nächstes verwende ich Change, gefolgt vom Navigationslink Wir müssen die Artikel wieder anzeigen. Jetzt haben wir bessere Ergebnisse, aber wir brauchen hier den Übergang auf alle 0,5 Sekunden und die Verzögerungszeit auf 1,5 Sekunden. Wir benötigen standardmäßig alle 0,5 Sekunden einen Übergang. Wenn ich jetzt klicke, bekommen wir die schönen und coolen Ergebnisse. Alles funktioniert perfekt und mit dem Projekt sind wir fertig. Lass uns weitermachen. 22. Project 17 - Website-Header mit Diashow und Navigationsmenü: Okay, es ist also Zeit, weiterzumachen und unser nächstes Projekt zu erstellen In diesem Abschnitt werden wir einen Website-Header mit einer Diashow und einem Navigationsmenü erstellen. Das Projekt wird auf Basis von HTML, CSS und Javascript erstellt . Lassen Sie uns also weitermachen und das Projekt beschreiben. Wie Sie sehen können, geht es bei dem Projekt um etwas Essen. Wir haben hier ein paar verschiedene Folien, die Bilder von Lebensmitteln, einige Überschriften und den Absatz enthalten einige Überschriften und den Absatz Und wir haben hier auch die Schaltfläche, die einen schönen und coolen Hover-Effekt hat Die Nummer besteht aus einem Logo und einigen Navigationselementen, die diesen schönen und coolen Hover-Effekt haben Außerdem haben wir in der oberen rechten Ecke ein Menüsymbol mit einem Hover-Effekt Wenn ich darauf klicke, erscheint die Seitenleiste. Wenn ich hier klicke, die Navigationselemente gut angezeigt Lass uns die Seitenleiste schließen. Tatsächlich reagiert das Projekt auf unterschiedliche Bildschirmgrößen Wenn ich die Seite inspiziere und in den responsiven Modus wechsle und das Projekt auf verschiedene Bildschirmgrößen überprüfe , werden Sie feststellen, dass das Projekt responsiv ist. Es sieht auf verschiedenen Bildschirmgrößen gut aus. Sie werden etwas über responsives Webdesign lernen. In Ordnung, lassen Sie uns über das Projekt sprechen. Es wird ein großes Projekt, aber ich hoffe, es wird dir gefallen und du wirst ein paar neue Dinge lernen. Lass uns weitermachen und anfangen. Ich habe einen neuen Ordner auf dem Desktop erstellt. Lassen Sie uns weitermachen und es im VS-Code öffnen und dann unsere Arbeitsdateien erstellen. Wir brauchen Indexpunkt-HTML und dann Style-CSS. Außerdem benötigen wir eine Datei für das Javascript-Skript JS. Lassen Sie uns die Indexpunkt-HTML-Datei öffnen und das grundlegende HTML-Dokument erstellen. Ich werde den Titel ändern, es wird eine Landingpage sein, dann werde ich die CSS- und Javlscript-Dateien verknüpfen Lassen Sie uns das Skript öffnen und den Namen Multifile im Quellattribut angeben den Namen Multifile im Quellattribut Als Nächstes öffne ich das Projekt über den Live-Server für den Browser. Platzieren Sie dann den Browser und den Editor nebeneinander , um unseren Arbeitsprozess komfortabler und einfacher zu gestalten. Ich werde die Google Phones-Website besuchen, da wir während dieses Projekts einige Google-Telefone verwenden werden. Lassen Sie uns weitermachen und nach Google-Telefon namens Fiel One suchen. Ich werde den Stil auswählen. Als Nächstes werde ich nach einem anderen Telefon suchen. Es wird inknut sein, antiqua, ich weiß nicht, wie man diese Gewichtsnamen ausspricht Wählen wir diese Stile aus, kopieren dann den Link und fügen ihn alleine in den Ordnung, als Nächstes hole ich mir das CDN für Telefon-Asomics, weil wir einige Phonics verwenden werden Kopieren wir den Link, das Open-Link-Tag im Head-Element und fügen das CDN hier ein In Ordnung, wir sind bereit, mit dem Aufbau eines Projekts zu beginnen. Lassen Sie uns einen Container erstellen , in dem ich Kredite aufnehmen werde. Dann öffne ich kein Element mit der Klasse, die jetzt Teil ist. Lassen Sie uns das Sar-Tag einfügen, das ein Logo sein wird. Das Logo wird aus einem Pontomicon bestehen, dem es sich um ein festes A-Utensil handeln wird Als Nächstes haben wir die Navigation. Ich meine, die Artikel, die wir hier brauchen, Link-Elemente. Der erste wird zu Hause sein. Dann werde ich es ein paar Mal duplizieren und die Artikel ändern. Der zweite wird ungefähr sein. Dann werden wir kochen. Dann besuche ich deine Galerie. Dann wird der nächste Artikel blockiert. Was den letzten betrifft, werde ich hier vor Ort Kontakt aufnehmen Danach haben wir die Navigationselemente, die wir brauchen. Erstellen Sie das Menüsymbol Wir benötigen hier zwei Zeilen mit den Klassen Zeile und Zeile eins sowie Zeile zwei. Nach der Navigation werde ich Folien erstellen. Lassen Sie uns das p-Tag öffnen. Es wird Slide sein und es wird einen weiteren Kurs geben. Folie eins, wir brauchen hier Slide Image Wrapper. Dann das Bild selbst. Ich werde ein Bild aus dem Bilderordner auswählen. Wir brauchen Essen. Als Nächstes werden wir ein Banner haben. Es wird aus H einem Überschriftenelement mit der Klasse PG Überschrift bestehen . Der Text wird Taste sein. Dann haben wir H zwei Überschriftenelemente mit der Hauptüberschrift der Klasse. Der Text wird fantastisches Essen sein. Dann haben wir einen Absatz mit der Klassenbeschreibung der Essensaufgabe. Wir werden hier ein paar Tammy-Texte haben. Außerdem werden wir hier die Folie unten in der Klasse haben, PTN. Außerdem werden wir hier das Typattribut haben und es wird Pat sein Was den Text angeht, werde ich Ihre Ansicht weiter einfügen. Okay, als Nächstes werde ich die Seitenleiste erstellen. Wir brauchen hier ein Telefonsymbol , das ein durchgehendes X sein wird. Es wird der Schließknopf sein. Als Nächstes haben wir die Seitenleiste. Nein, wir brauchen einen Button mit dem Klassen-Sideboard, BTN, der Text wird Küche sein Wir brauchen auch den Typ , der Button sein soll. Dann werde ich nach der Schaltfläche in der Seitenleiste genügend Elemente erstellen. Ich werde dein Link-Element einfügen. Es wird zu Hause sein. Lass es uns ein paar Mal duplizieren. Eigentlich werde ich mir diese Links schnappen , weil wir den gleichen Inhalt benötigen. Lass es uns hier einfügen. Ordnung, mit dem HTML-Markup sind wir also fast fertig Lass uns anfangen, etwas CSS zu schreiben. Ich werde den Rand und die Polsterung für jedes Element auf Null setzen Polsterung für jedes Element auf Null Als Nächstes benötigen wir die Größe der Boxen. Es wird eine Border Box sein. Dann setze ich die Textdekoration auf „Keine“. Wir brauchen eine Telefonfamilie, es wird eine sein. Als Nächstes setze ich die Telefongröße des HTML-Elements auf 62,5%, weil wir M als Maßeinheit verwenden werden M als Maßeinheit verwenden In diesem Fall entspricht ein RAM zehn Pixeln. Jetzt wähle ich Container aus. Eigentlich müssen wir uns hier ändern. Der Name wird Container sein. Lassen Sie uns die Breite auf 100% setzen , damit die Höhe des Ansichtsfensters 100 beträgt Dann stelle ich den Pudding auf drei Widder auf allen vier Danach wähle ich Landing aus. Stellen Sie die Breite auf 200% ein, dann wird die Höhe auf 100% eingestellt. Als Nächstes wähle ich Folien und diese beiden Zeilen auch hier Als nächstes brauchen wir Folie. Wir brauchen mit einer Höhe von 100% In Ordnung, danach wähle ich Slide Image Wrapper und verwende es erneut mit einer Höhe 100%. Lass uns diesen Code duplizieren und with height für das Bild selbst verwenden Jetzt ist die Größe des Bildes geändert. Lassen Sie uns die Seitenleiste auswählen und sie für eine Weile ausblenden. Als Nächstes wähle ich aus, jetzt setze ich ihre Position auf absolut Dann benötigen wir die relative Position für das übergeordnete Element , bei dem es sich um eine Landung handelt. Lassen Sie uns die Breite auf 100% setzen . Die Höhe wird zehn Ram betragen. Dann werde ich Flexbooks verwenden. Wir müssen hier den inhaltlichen Abstand dazwischen rechtfertigen. Was die LN-Elemente angeht, werde ich sie in die Mitte stellen. Als nächstes brauchen wir Polsterung. 50 RAM. Wir haben hier die Navigation. Ich werde die Hintergrundfarbe für eine Weile auf CCC einstellen. Jetzt können wir das Symbol und die Navigationselemente sehen. Lassen Sie uns die Hintergrundfarbe loswerden. Als Nächstes werde ich mich um das Logo kümmern. Stellen wir die Telefongröße auf fünf Ram ein. Dann brauchen wir Webkit, Text Stroke. Es wird 0,1 Ram sein. Die Farbe wird weiß sein. Was die Farbe selbst angeht, werde ich sie auf transparent setzen. Jetzt haben wir hier diese nette und coole Tatsache. Setzen wir den Cursor auf den Punkt. Ordnung, danach kümmere ich mich um die Navigation. Ich meine die Link-Elemente. Stellen wir die Telefongröße auf zwei Ram ein. Die Texttransformation wird in Großbuchstaben geschrieben. Ich werde die Farbe auf Weiß setzen. Wir benötigen Rand 03 Ram auf der linken und rechten Seite. Hier haben wir die Navigationspunkte. Lassen Sie uns mithilfe von Vorher-Nachher-Pseudoelementen einen Übereffekt erzeugen mithilfe von Vorher-Nachher-Pseudoelementen Der Inhalt muss leer sein. Als Nächstes setze ich die Breite auf 100%. Dann wird die Höhe 0,2 Ram betragen. Wir brauchen eine Hintergrundfarbe, sie wird weiß sein. Als Nächstes werde ich die Position festlegen. Es wird absolut sein und wir benötigen eine relative Position für das Link-Element. Lassen Sie uns zwei Positionen auf -0,5 Ram setzen. Was die linke Position betrifft, so wird sie Null sein Wir haben hier die Linien. Jetzt brauchen wir dieselbe Zeile am Ende der Links. Lassen Sie uns nach dem Do-Element verwenden. Ich werde die Positionen ändern, die wir an der unteren Position benötigen. Jetzt haben wir hier Reihen rauf und runter. Fügen wir hier die Transformationsskala x Null hinzu. Wir müssen sie verstecken und anzeigen. Sobald wir den Mauszeiger über die Elemente bewegen, fahren wir mit der Maus über die Klasse und machen die erste Skala Wir benötigen dasselbe auch für das Element. Außerdem müssen wir den Übergang verwenden, um einen gleichmäßigeren Effekt Sobald wir den Mauszeiger über die Elemente bewegen, werden die Linien angezeigt Aber sie erscheinen von der Mitte aus. Und wir müssen es ändern. Wir müssen den Ursprung ändern, transformieren. Und wir müssen es für das vorherige Element übrig lassen. Und wir müssen den Ursprung transformieren, genau für das Nachher-Element. Wenn ich jetzt mit der Maus darüber fahre, bekommen wir wieder diesen schönen und coolen Hover-Effekt diesen schönen und coolen Hover-Effekt, der sich auf die Navigationselemente Als Nächstes werde ich mich um das Menüsymbol kümmern. Lassen Sie uns die Breite auf sechs Ram setzen. Die Höhe wird zwei Ram betragen. Dann werde ich mich um die Leitungen kümmern. Lassen Sie uns auf 100% setzen Wie für De wird es 0,4 sein Da wir die Hintergrundfarbe ändern müssen , setzen wir sie auf Weiß. Wir haben hier zwei Zeilen und wir müssen sie trennen. Dafür werde ich Flexbooks verwenden. Wir müssen Flex anzeigen, dann wird die Flex-Richtung auch in der Spalte angezeigt, wir müssen den Inhaltsabstand zwischen den Spalten rechtfertigen . Und auch den Kurs ändern, damit es darauf zeigt, wird das Menüsymbol Als Nächstes werde ich Hover-Effekte erstellen. Wir müssen beim Hover die Linie auswählen. Lassen Sie uns die Transformationsskala auf x 0,5 setzen und dann den Übergang verwenden Wenn ich mit der Maus darüber fahre, wird die Breite der Linien verringert Wir benötigen jedoch unterschiedliche Effekte für Zeile eins und Zeile zwei. Wir müssen den Ursprung der Transformation ändern. Es wird das Richtige für die erste Linie sein. Was die zweite Linie angeht, werde ich links abbiegen. Wenn ich jetzt mit der Maus darüber fahre, werden wir ein besseres Ergebnis erzielen Aber das ist nicht das, was wir eigentlich brauchen. Wir müssen jetzt den Klassennamen ändern , alles funktioniert perfekt. In Ordnung, lassen Sie uns über die Navigation sprechen. Lass uns weitermachen und uns um die Folien kümmern. Ich werde die Hintergrundfarbe für den Bild-Wrapper so einstellen wir dann ein Objekt benötigen, das zu den Bildern passt. Es wird abgedeckt werden Außerdem werde ich die Deckkraft verringern 2.3 Jetzt sehen die Bilder viel besser Fügen wir der n-Leiste eine Index-Eigenschaft hinzu, machen wir zehn daraus. Als Nächstes wähle ich Pan aus , das die Breite auf 100 Ram festlegt. Und die Höhe wird ebenfalls 100 Ram betragen. Ich werde die Position auf absolut setzen. Dann positionieren wir die absolute Position für das übergeordnete Element, das eine Folie ist, ich setze zwei Positionen auf 50%, dann wird die Position auf 50% gesetzt. Und dann müssen wir für die Zentrierung wird die Position auf 50% gesetzt. Und dann müssen wir für die Zentrierung den Translate-Wert -50% und erneut 50% transformieren . Okay, danach wähle ich PG-Überschrift Definieren wir die Position, ich werde sie absolut machen. Dann müssen wir 20% links positionieren, Position wird 50% sein. Für die horizontale Zentrierung müssen wir die Translation x -50% transformieren. Hier haben wir die Überschrift, setzen wir die Telefonfamilie auf Inknut Antique Dann wird das Telefon 20 Ram groß sein. Als Nächstes verwende ich den Webkit-Textstrich, wir benötigen einen transparenten Hintergrund und den Rahmen benötigen wir 0,05 Und die Farbe wird weiß sein. In der nächsten Minute soll die Farbe transparent sein. Wir sind hier auf dem Weg. Eigentlich müssen wir diesen Brief ändern. Jetzt ist das Problem behoben. Lassen Sie uns den Buchstabenabstand auf 1,5 Ram setzen. Wir brauchen etwas Abstand zwischen den Buchstaben. Und dann werde ich Opacity 2.4 einstellen . Ich finde, die Überschrift sieht ziemlich cool Lassen Sie uns die Hauptüberschrift auswählen. Ich setze die Position auf absolute Position, wird 47% sein . Die linke Position wird 22% sein. Dann brauchen wir die Telefongröße, ich stelle sie auf eine Straßenbahn ein. Dann werde ich Text in Großbuchstaben umwandeln . Lass uns die Farbe ändern. Ich mache Weiß, dann vergrößere ich den Abstand zwischen den Buchstaben. Machen wir 0,5 Ram draus. Die Überschrift sieht ziemlich gut aus. Eigentlich werde ich hier die Schriftstärke hinzufügen. Machen wir 300 draus, okay? Nach der Hauptüberschrift werde ich mich um den Absatz kümmern. Lassen Sie uns die Position auf absolut setzen. Dann wird die unterste Position bei 35% liegen . Dann setze ich die linke Position auf 50%. Und wir müssen das Element horizontal zentrieren, indem wir transform translate x -50% verwenden . Lassen Sie uns die Breite auf 80 Ram setzen Dann setze ich die Telefongröße auf 1.8 Ram. Ändern Sie die Telefongewichte, lassen Sie uns sie auf 300 setzen. Außerdem müssen wir den Text in der Mitte ausrichten und dann wird die Farbe weiß sein. Hier haben wir den Absatz. Als Nächstes nehme ich hier den Boden. Lassen Sie uns die Breite auf 20 Ram setzen. Dann wird die Höhe fünf Ram betragen. Als Nächstes setze ich die Position auf absolut. Die unterste Position wird 27% sein . Für die linke Position werde ich auf 50% setzen. Und dann müssen wir wieder mit der Transform Translate X-Funktion -50% an das Element senden Transform Translate X-Funktion . Die untere Position wird in der Mitte platziert Als Nächstes ändere ich die Hintergrundfarbe, sie wird transparent sein Ich setze den Rand auf 2.1 Ram und die Farbe wird weiß sein, die Telefongröße auf 1.8 Ram. Dann werde ich Text in Großbuchstaben umwandeln. Erstellen Sie auch einen Abstand zwischen den Buchstaben, machen Sie ihn zu 0,1 Ram. Dann ändere die Farbe, es wird weiß sein. Außerdem müssen wir den Cursor als Zeiger verwenden. Als Nächstes wählen wir Button, gefolgt von den vier Elementen. Lassen Sie uns den Inhalt auf leer setzen. Wir müssen die weißen Teile beim Schweben erzeugen. Lassen Sie uns die Breite auf 20 Ram setzen. Dann wird die Höhe zehn Ram betragen. Lass uns die Hintergrundfarbe ändern und sie weiß machen. Dann wird die Position absolut links sein , Position wird -14 Ram sein Was die beiden Positionen angeht, werde ich sie auf Null setzen. Dann müssen wir mit der Drehfunktion um die Z-Richtung transformieren . Der Wert wird 45 Grad betragen. Hier haben wir die weißen Elemente auf der linken Seite der Unterseite. Wir brauchen dasselbe, wenn wir nach den Elementen die Elemente verwenden. Ich meine, weiße Elemente auf der rechten Seite. Lasst uns die Position ändern, die wir brauchen. Richtig? Da die beiden Positionen minus fünf Fram sein werden, haben wir den zweiten Teil auf der rechten Seite Ich werde den Schwebeeffekt erzeugen, den wir hier brauchen. Bevor Maus darüber fahre, werde ich die Größe des Elements erhöhen Setzen wir es auf 2,4. Wir brauchen dasselbe für die Elemente nach s Verwenden wir den Übergang für einen gleichmäßigeren Effekt. Wenn ich den Mauszeiger bewege, nehmen diese Elemente zu. Als Nächstes wähle ich Patton mit dem Mauszeiger aus und ändere die Farbe des Textes. Lass es uns schwarz machen Außerdem brauchen wir einen Übergang mit einer gewissen Verzögerung, Zeit 0,3 Sekunden. Wir brauchen standardmäßig auch für den Patton einen Übergang. Aber in diesem Fall, ohne Übergang, ohne Verzögerung, müssen wir hinzufügen Hier ist die Index-Eigenschaft mit negativem Wert , um den Text anzuzeigen. Hier haben wir den Text. Jetzt müssen wir diese weißen Teile außerhalb des Partons verstecken diese weißen Teile außerhalb , indem wir Overflow Hidden verwenden Jetzt haben wir hier einen schönen und coolen Hover-Effekt. Ordnung, fügen wir dem Landing-Schatteneffekt mit den Werten 01 Ram, drei Ram Und die schwarze RGBA-Farbe mit der Opazität 0,7 Jetzt haben wir hier einen schönen und coolen Schatteneffekt Eigentlich werde ich die Scrollbar loswerden, indem ich Overflow Heiden für den Container verwende. Die Scrollbars Overflow Heiden für den Container verwende. Die sind nicht mehr sichtbar. Ich werde die Folie ein paar Mal duplizieren. Wir werden vier verschiedene Folien haben. Lassen Sie uns hier einige Änderungen vornehmen, die wir benötigen. Folie zwei. Ändern Sie auch den Namen des Bildes, und wir müssen die Überschriften und Delicious Recipes ändern die Überschriften und Delicious Recipes Als nächstes brauchen wir hier Folie drei. Ändern Sie auch den Inhalt der Überschriften, die wir hier benötigen. Viel Spaß Was die zweite Überschrift betrifft, so werden es frische Zutaten sein Dann haben wir hier Folie vier. Ändern Sie den Namen des Bildes und ändern Sie auch den Inhalt der Überschrift Elemente. Wir werden hier Explore und dann Top Cuisines haben. Ordnung, jetzt ist es an der Zeit, etwas Javascript zu schreiben und die Diashow zum Laufen zu bringen Ich werde eine variable Diashow erstellen, was die Funktion sein wird. Als Nächstes müssen wir Folien auswählen und sie mithilfe der Array-Methode zu einem Array machen . Wir brauchen hier zwei Folien mit der Abfrageselektor-Methode. Lassen Sie uns hier den Klassennamen Slide angeben. Ich werde die Konsole durchgehen , um die Ausgabe zu sehen. Rufen wir die Funktion auf. Wenn ich mir die Seite anschaue und dann zum Konsolen-Tab wechsle, erhalten wir hier ein Array, das aus vier verschiedenen Folien besteht. Wie Sie sehen können, haben wir hier Entwicklungen mit den Klassennamen und den Indexnummern. Als Nächstes erstelle ich eine Variable namens current, die der Zähler sein wird. Ich werde es standardmäßig auf eins setzen. Als Nächstes benötigen wir hier eine if-Anweisung , in der ich Folgendes definieren werde . Wenn aktuell mehr als zwei Folien lang ist, ich meine die Anzahl der Folien, dann müssen wir aktuell auf eins setzen. Ansonsten meine ich, wenn aktuell gleich Null ist, dann müssen wir die aktuelle Länge der beiden Folien festlegen. Außerdem benötigen wir hier den Operator Strom plus Inkrement. Wir müssen den Strom um eins erhöhen. Als Nächstes verwende ich die Set-Interval-Methode. Ich nenne die Funktion Diashow. Wir brauchen 1.000 Millisekunden. Als Nächstes werde ich Folien mit der Futtermethode durchsehen Wir benötigen ihre Aussage , in der wir die erste Liste benötigen, wir müssen auf den zweiten Klassennamen auf der Folie zugreifen Dann brauchen wir die Split-Methode. Wir müssen es aufteilen und wir müssen uns den zweiten Gegenstand schnappen. Wir müssen es nummerieren, dann sollte es gleich aktuell sein. Wenn diese Bedingung zutrifft, fügen Sie der Folie die folgenden CSS-Stile hinzu. Wir brauchen hier eine sichtbare Sichtbarkeit und auch eine Deckkraft Dann brauchen wir ein L-Statement. Wenn diese Bedingung falsch ist, müssen wir diese Folie mit Sichtbarkeit ausgeblendet und Deckkraft Null ausblenden, okay? Wie Sie jetzt sehen können, funktioniert die Diashow Die Folien ändern sich im Abstand von 1 Sekunde. Ich verwende den Übergang für die Folie mit Opazität und die Dauer beträgt 0,3 Sekunden. Jetzt wechseln die Folien flüssiger, das brauchen wir hier. Die Hintergrundfarbe muss schwarz sein, um einen viel schöneren Überblendeffekt Außerdem müssen wir das Intervall ändern. Lassen Sie uns auch die Dauer des Übergangs ändern. Jetzt haben wir hier ein viel besseres und cooles Ergebnis. Die Diashow funktioniert perfekt. Als Nächstes werde ich mich um die Seitenleiste kümmern. Lassen Sie uns die Position fixieren. Dann müssen wir die Position auf Null setzen. Die richtige Position wird ebenfalls Null sein. Dann wird die Breite 50 Ram betragen. Was die Höhe angeht, werde ich die Topfhöhe auf 100 erhöhen. Als Nächstes ändern wir die Hintergrundfarbe. Es wird D DD sein. Hier haben wir die Seitenleiste. Lassen Sie uns die Index-Eigenschaft verwenden , um das Menüsymbol auszublenden. Jetzt ist das Problem behoben. Als Nächstes wählen wir die Seitenleiste I Elements aus. Ich befinde mich in der X-Schließtaste I, die Position ist absolut, und die oberste Position wird zwei Ram sein Die rechte Position wird fünf Ram sein. Dann werde ich das Telefon vergrößern. Lass uns einen Ram daraus machen. Ändern Sie die Farbe des Symbols. Es wird 555 sein. Außerdem müssen wir den Cursor als Zeiger verwenden. Eigentlich ist das Symbol nicht sichtbar. Lassen Sie uns die HTM-Datei überprüfen, die wir von hier aus entfernen müssen. Jetzt ist das Symbol sichtbar und es sieht ziemlich gut aus. Als Nächstes werde ich mich um die Navigation kümmern. Ich werde die Breite auf 40 Ram setzen. Dann wird die Höhe 15 Ram betragen. Ich werde Border 2.1 Ram Solute setzen. Und die Farbe wird 999 sein. Dann müssen wir die Position absolut haben. Die oberste Position wird 50% sein, die schwarze Position wird 50% sein. Wir müssen das Element zentrieren. Wir müssen transformieren und übersetzen. -50% und wieder -50% Als Nächstes wähle ich Seite B, Lassen Sie uns die Breite auf 40 Ram setzen. Dann wird die Höhe 15 Ram betragen. Ich werde die Hintergrundfarbe ändern. Stellen wir es auf transparent ein. Als Nächstes setze ich Border auf Non. Außerdem brauchen wir, dass die Familie inknut sansif ist. Als Nächstes benötigen wir eine Schriftgröße von sechs RAM. Ich werde Text in Großbuchstaben umwandeln. Andererseits werde ich Web Kit Text Stroke verwenden , um den Text schöner zu gestalten Wir brauchen hier 0.1 Ram 222 und dann wird die Farbe transparent sein Als nächstes setzen wir den Cursor auf den Punkt. Wir haben hier den Boden , der ziemlich gut aussieht. Lassen Sie uns die Höhe der Navigation ändern. Machen Sie 60 Rampen draus. Wir müssen die Gegenstände hier platzieren. Wählen wir die Seitenleiste aus. Jetzt stellen die Elemente die Anzeige auf Flex ein. Als Nächstes müssen wir die Flex-Richtung als Spalte angeben. Außerdem werde ich die Position auf absolut setzen. Dann wird die obere Position 30% sein, die Position wird 50% sein. Setzen wir die Transformation so , dass X verschoben wird, und der Wert wird -50% sein . Wir müssen das Element horizontal zentrieren Stellen wir die Textausrichtung in der Mitte ein. Hier haben wir die Navigationselemente ausgerichtet. Jetzt müssen wir Link Element auswählen und sie anpassen. Stellen wir dann die Telefongröße auf drei Ram ein. Die Farbe wird 888 sein. Dann müssen wir den Rand auf eins B und Null setzen. Wir müssen Text in Großbuchstaben umwandeln. Die Artikel sehen gut aus. Jetzt müssen wir einen Hover-Effekt erzeugen. Fügen wir hier Hover hinzu. Mach Unterricht, ich werde die Farbe beim Hover ändern. Setzen wir es auf 444. Und verwenden Sie auch den Übergang, um einen gleichmäßigeren Effekt zu erzielen. Wir haben hier einen Hover-Effekt. Als Nächstes werde ich die Seitenleiste ausblenden. Stellen wir Position zwei richtig ein -50 Ram. Verwenden Sie jetzt Javascript, um es anzuzeigen. Beim Klicken werde ich die variable Seitenleiste TN erstellen. Lassen Sie uns dieses Element mithilfe der Abfrageselektormethode auswählen. Geben Sie hier den Klassennamen, die Seitenleiste und den PTN an. Ich werde diesen Code ein paar Mal duplizieren. Die zweite Variable wird die Seitenleiste sein. Lass uns den Klassennamen ändern. Dann haben wir ein Menüsymbol. Außerdem müssen wir die X-Taste schließen. Wählen wir dieses Element aus. Wir müssen dem Menüsymbol einen Event-Listener hinzufügen, indem auf Ereignis mit Rückruffunktion klicken Ich werde der Seitenleiste eine neue Klasse hinzufügen. Sobald wir mit der Methode auf das Menüsymbol geklickt haben, rufen wir den Klassennamen auf und navigieren. Lassen Sie uns diesen Code duplizieren, den wir entfernen müssen. Wir müssen hier x schließen. Aber sobald wir auf X klicken, müssen wir die Klasse entfernen. Navigiere. Okay. Verwenden wir jetzt die Navigation, gefolgt von der Seitenleiste Ich werde die richtige Position ändern. Machen wir es auf Null. Und dann brauchen wir einen Übergang. Ich werde hier einsteigen, genau dann wird die Dauer 0,5 Sekunden betragen. Außerdem benötigen wir eine kubische Funktion mit den Werten 100.1. Wenn ich auf das Menüsymbol klicke, kommen wir in die Seitenleiste und sie wird geschlossen Sobald Sie auf die Schaltfläche „Schließen“ klicken. Okay, jetzt müssen wir die Gegenstände verstecken. Sagen wir, die Opazität ist auf Null gesetzt und die Sichtbarkeit ist ausgeblendet. Als Nächstes ändere ich die Höhe von 32 15 Ram. Jetzt füge ich der Schaltfläche in der Seitenleiste sogar einen Listener hinzu, indem ich erneut auf das Ereignis klicke Wir brauchen hier eine Callback-Funktion. Sobald wir auf die Schaltfläche geklickt haben, müssen wir Total-Methode eine weitere Seitenleiste hinzufügen Nennen wir den Klassenwechsel. Jetzt müssen wir die Seitenleiste auswählen. Jetzt mit dem Klassenwechsel müssen wir die Höhe beim Klicken erhöhen, machen wir 60 Ram daraus. Und benutze auch wieder den Übergang mit den Werten Höhe. Die Dauer wird 0,5 Sekunden betragen. Wenn ich jetzt auf die Schaltfläche klicke, wird das Element erweitert. Jetzt müssen wir die Navigationselemente anzeigen. Wir brauchen deinen Klassenwechsel, gefolgt von den n Items. Wir müssen die Opazität auf eins und die Sichtbarkeit auf machbar setzen. Als Nächstes brauchen wir hier einen Übergang. Es werden 0,5 Sekunden dauern und wir brauchen eine Verzögerung von 0,5 Sekunden. Sobald ich jetzt klicke, werden die Navigationselemente gut angezeigt. Okay, also alles funktioniert perfekt. Jetzt müssen wir das Projekt responsiv machen. Wechseln wir in den responsiven Modus. Ich werde die Breite und Höhe für eine besonders große Bildschirmgröße einstellen . Und dann werde ich die Haltepunkte finden , an denen wir einige Änderungen vornehmen müssen Ich werde CSS-Medienabfragen verwenden , um das Projekt responsiv zu machen Lassen Sie uns weitermachen und eine CSS-Medienabfrage erstellen. Ich werde die maximale Breite auf 1.200 Pixel angeben. Stellen Sie die Telefonseite des H-dem-Elements auf 250, 5% Verkleinern wir die Bildschirmgröße Wie Sie sehen können, wurden die Elemente nach 1.200 Pixeln kleiner Als Nächstes müssen wir den nächsten Breakpoint finden. Erstellen Sie eine CSS-Medienabfrage und geben maximale Breite auf 1.000 Pixel an. Ich werde die Telefongröße des H tim-Elements auf 50% setzen , damit alles gut aussieht. Lassen Sie uns die Hintergrundüberschrift auswählen und die Schriftgröße auf 16 Ram setzen. Dann setze ich die beiden Positionen auf 25%. Als Nächstes wähle ich den Absatz aus und setze die Breite auf 60 Ram. Ich finde, alles sieht gut aus und wir müssen den nächsten Breakpoint finden. Ich werde eine neue CSS-Medienabfrage erstellen. Lassen Sie uns die maximale Breite auf 800 Pixel setzen. Ich werde die Schriftgröße des H m-Elements erneut verringern . Stellen wir es auf 45% ein. Als Nächstes wähle ich Navigation aus. Ich meine die Link-Elemente und setze den Rand auf 0,1 Ram. Als Nächstes kümmern wir uns um das Banner. Ich hole mir den Code von hier, ändere die Telefongröße, mache 14 Ram draus. Was die beiden Positionen angeht, werde ich 28% daraus machen. Als Nächstes wählen wir die Hauptüberschrift stellen die Telefongröße auf sieben RAM ein. Was die linke Position angeht, werde ich sie auf 25% setzen. Okay, lassen Sie uns weitermachen und den nächsten Grenzpunkt finden. Lassen Sie uns weitermachen und eine neue Cess-Medienabfrage erstellen. Und geben Sie die maximale Breite an, die 600 Pixel betragen soll. Ich werde die Telefongröße des HTML-Elements auf 40% setzen . Als Nächstes benötigen wir Navigation. Ich werde es verstecken. Als Nächstes brauchen wir eine Überschrift im Hintergrund. Eigentlich beide Überschriften. Lassen Sie uns hier einige Änderungen vornehmen. Stellen Sie die Telefongröße auf zehn Ram ein. Dann werden die beiden Positionen 33% betragen . Was die Hauptüberschrift angeht, werde ich die Telefongröße auf sechs Ram setzen. Was die Position angeht, setzen wir sie auf 27%. Okay, ich finde, alles sieht ziemlich gut aus. Und jetzt müssen wir dich vom letzten Breakpoint befreien. Lassen Sie uns weitermachen und eine neue CSS-Medienabfrage erstellen und die maximale Breite auf 450 Pixel angeben. Ich werde die Telefongröße des HTM-Elements auf 35% einstellen . Außerdem muss die Seitenleiste auf der gesamten Seite erweitert werden Lassen Sie uns auf 100% setzen. Was die richtige Position angeht, werde ich sie auf -100% setzen. Sobald ich darauf klicke, wird die Seitenleiste auf die gesamte Seite ausgedehnt Als Nächstes wähle ich die Hauptüberschrift und stelle die Telefongröße so weit wie möglich auf 25 Fram ein Die linke Position wird 29% sein . Dann wähle ich den Absatz aus , der auf 245 Fram gesetzt ist Jetzt finde ich, dass alles ziemlich gut aussieht, und eigentlich sind wir mit dem Projekt fertig Es reagiert auf verschiedene Bildschirmgrößen. Hoffentlich war es interessant und du lernst ein paar neue Dinge. Lass uns weitermachen. 23. Projekt 18 - Profilkarte: Ordnung, also lasst uns weitermachen und anfangen, ein neues Projekt zu erstellen. In diesem Abschnitt werden wir eine Profilkarte erstellen. Das Projekt wird auf der Grundlage von HTML, CSS und Javascript erstellt . Lassen Sie uns weitermachen und es schnell beschreiben. Wie Sie sehen können, haben wir hier eine Karte mit einem Bild einer Person. Unten sehen Sie die Plus-Schaltfläche. Wenn ich darauf klicke, wird die Karte erweitert und du siehst die Details über die Person wie Name, Position, Links zu sozialen Medien und so weiter. Die Plus-Schaltfläche wurde geändert, um mich zu kontaktieren. Wenn ich auf die Schaltfläche Zurück klicke, wird die Karte geschlossen. Okay. Diese Seite über das Projekt ist einfach, aber ich denke, sie wird interessant und nützlich sein, weil heutzutage viele Websites Profilkarten benötigen. Lass uns weitermachen und anfangen. Ich habe einen neuen Ordner auf dem Desktop erstellt , in dem ich einen weiteren Ordner für Bilder habe. Lassen Sie uns den Ordner im VS-Code öffnen dann die Arbeitsdateien für HTML und CSS erstellen. Außerdem benötigen wir eine Datei für Java-Skript. Dann öffne ich die Index-So-Mel-Datei und erstelle ein einfaches H-Mel-Dokument. Lass uns den Titel ändern. Es wird eine Profilkarte sein. Dann werde ich die CSS- und Charles-Dateien verknüpfen. Wir brauchen hier das Script-Tag und den Dateinamen im Quellattribut. Okay, lassen Sie uns weitermachen und das Projekt über den Live-Server im Browser öffnen . Und dann werde ich den Editor nebeneinander im Browser platzieren . Als nächstes besuche ich die Google Phones-Website. Da wir während des gesamten Projekts Google-Telefone verwenden werden, suchen wir nach einem Telefon namens Punto Ich wähle ein paar verschiedene Stile aus, kopiere dann den Link und füge ihn in das Ausblenden-Element ein Außerdem werde ich mir den tollen CDN-Link des Telefons schnappen Wir werden während des gesamten Projekts Phone Awesome Icons verwenden gesamten Projekts Phone Awesome Icons Lass uns den Link von hier kopieren. Öffnen Sie dann Link, Tug and Head Element und fügen Sie hier das CDM Okay, wir sind also bereit, mit dem Schreiben des HTML-Markups zu beginnen. Ich werde den Container erstellen , der den gesamten Inhalt umschließt Dann haben wir eine Karte , in die ich Deep Tug einfüge, was sich oben im Inneren des Elements Um Cardmage einzufügen, benötigen wir hier ein Bild. Lass uns weitermachen und das Bild aus dem Bilderordner auswählen das Bild aus dem Bilderordner Als Nächstes füge ich hier give verified ein, in das ich Phonosomicon einfügen werde Wir benötigen einen soliden Als Nächstes werde ich die Unterseite mit der Klassenkarte BTN erstellen. Lassen Sie uns den Typ des Elements angeben , das unten sein soll Dann füge ich dir Pan-Elemente mit der Klasse ein. Dann brauchen wir ein weiteres Panelement mit dem Klassennamen BTN-Text Ich füge Kontakt mit mir ein. Als Nächstes werde ich den unteren Teil der Karte erstellen Wir benötigen H eine Überschrift für Elemente mit dem Namen John Smith. Als nächstes benötigen wir H drei Überschriftenelemente für die Position. Es wird Produktdesigner sein. Als Nächstes werde ich mich um die Entwicklung kümmern, das wird Social Media sein. Ich füge hier noch einen Deps ein, sei Social Info. Lassen Sie uns Elemente mit den Klassennamen einordnen, mit denen FA-Marken verknüpft sind Als Nächstes benötigen wir Span-Elemente mit dem Klassennamen. Geben wir eine Zahl ein, dann brauchen wir ein weiteres Span-Element mit den Klassenanhängern. Lassen Sie uns Text-Follower einrichten. Okay. Ich werde diesen Code zweimal duplizieren. Lass uns die Phonemicons ändern. Der zweite wird FA Instagram sein. Ich werde diese Zahlen ändern. Der dritte wird FA Facebook sein. Lass uns die Nummer ändern. Okay, also alles ist bereit. Lass uns weitermachen und anfangen, CSS zu schreiben. Ich setze den Rand und setze für jedes Element auf Null, dann setze ich die Größe der Box auf das Rahmenfeld. Als Nächstes brauchen wir eine Telefonfamilie. Es wird Ubuntu San Serif sein. Ich werde die Telefongröße des HTML-Elements auf 62,5% setzen, um den Ram als Maßeinheit zu verwenden In diesem Fall entspricht ein Ram zehn Pixeln. Als Nächstes wähle ich das obere Bild auf der Karte , dessen Breite auf 12 Ram eingestellt ist. Dann wird die Höhe ebenfalls 12 Ram betragen. Als Nächstes wähle ich das Bild selbst aus. Lassen Sie uns die Breite auf 100% setzen Dann wird auch die Höhe 100% betragen. Außerdem benötigen wir hier Objektfüße mit dem Wert Farbe. Jetzt wurde das Bild kleiner und jetzt können wir uns um den Container kümmern. Lassen Sie uns die Breite auf 100% setzen dann wird die Höhe 100 Topfhöhe sein. Als Nächstes werde ich die Hintergrundfarbe ändern. Lassen Sie uns hier die Farbe 13124 verwenden. Als Nächstes wähle ich die Karte aus. Stellen wir auf 35 Ram ein. Dann wird die Höhe 60 Ram betragen. Als nächstes brauchen wir eine Hintergrundfarbe, sie wird 32365 sein Als Nächstes setze ich die Position auf absolut. Und wir benötigen die relative Position für das übergeordnete Element, das in diesem Fall ein Container ist. Ich setze die obere Position auf 15%, die linke Position wird auf 50% setzen und wir müssen X mit -50% transformieren , um das Element horizontal zu zentrieren Wie Sie sehen können, ist die Karte zentriert. Als Nächstes setze ich den Grenzradius auf einen Ram. Außerdem werde ich etwas Schatten erzeugen. Fügen wir 03 Ram ein, sechs Ram. Und die Farbe wird schwarz mit einer Deckkraft von 0,5 sein . Wir haben hier einen schönen Schatteneffekt Okay, danach wähle ich Card Top. Lassen Sie uns die Höhe auf 25 Ram setzen. Dann setze ich die Position für das Bild auf absolut. Wir benötigen die relative Position für das übergeordnete Element. Lassen Sie uns die oberste Position auf fünf Frames setzen. Dann wird die linke Position bei 50% liegen. Auch hier müssen wir das Element mit Transform Translate X zentrieren. Das Bild wird horizontal zentriert Danach werde ich das Bild abrunden. Bei Verwendung eines Randradius von 50% wurde das Bild abgerundet. Außerdem brauchen wir Box Shadow. Es wird 01 Ram sein, drei Ram, und die Farbe wird RGBA sein Eigentlich haben wir hier ein kleines Problem, wir sehen hier das Telefon nicht, also Icon Ich bin im Scheck Schauen wir uns den HT-Code an, den wir hier benötigen. Diese Elemente. Jetzt ist das Problem behoben. Gehen wir zurück zur CSS-Datei. Wählen Sie die Entwicklung mit der verifizierten Klasse aus. Ich werde den Weg auf 2,5 Ram setzen. Wenn die Höhe dann auch 2,5 Frames beträgt, werde ich den Hintergrund ändern. Es wird ein linearer Gradient sein. Lassen Sie uns definieren, dass die Richtung zwei sein wird, oder? Und die erste Farbe wird 35c6 sein, dann wird die zweite Farbe drei sein Fünf BP. Wie Sie sehen können, haben wir hier einen schönen Hintergrund. Lassen Sie uns den Randradius auf 50% setzen. Wir benötigen ein abgerundetes Element. Außerdem brauchen wir Display-Flaggen. Und um das Element zu zentrieren, benötigen wir das Justify Content Center und ein Line Item Center. Wie Sie sehen können, befindet sich das Ponso-Symbol in der Mitte des Kreises Als Nächstes setze ich die Position auf absolut. Dann muss die unterste Position ein Ram sein. Was die richtige Position angeht, werde ich sie auf Null setzen. Ordnung, danach werde ich die Ikone abnehmen. Lass uns das Telefon vergrößern. Es wird 1,5 Ram sein. Und ändere die Farbe. Ich werde es weiß machen. Jetzt sieht das Symbol ziemlich gut aus. Als Nächstes wählen wir die Karte BTN aus und stellen die Breite auf 17 Ram ein Dann wird die Höhe 4,5 Ram betragen. Als Nächstes werde ich den Hintergrund ändern. Verwenden Sie erneut den linearen Farbverlauf. Die Richtung wird nach rechts gehen. Die erste Farbe wird 82 62d2 sein. Dann wird die zweite Farbe DC 561 sein. Wir haben hier einen schönen Farbverlauf. Lassen Sie uns die Position auf absolut setzen. Dann müssen wir es so positionieren, dass es 22,5 von der Laborposition entfernt ist Dann müssen wir das Element mit Transform Translate x -50% zentrieren, damit mit Transform Translate x der Batson Als Nächstes werde ich den Standardrahmen loswerden. Dann werde ich es mit einem Grenzradius von drei Ram abrunden. Als Nächstes setze ich Box Shadow 201m3 Ram ein. Und die Farbe wird GPA mit einer Opazität von 0,3 sein . Als Nächstes setze ich den Cursor auf zwei Punkte Ordnung, danach wähle ich Plus setzen die Position auf Dann werden die beiden Positionen bei 50% liegen . Wir brauchen Position 1,5 Ram. Dann werde ich das Element vertikal zentrieren, indem Transform Translate Y -50% verwende. Außerdem werde ich das Element um die Z-Richtung mit dem Wert -45 Grad drehen Z-Richtung mit dem Wert -45 Lassen Sie uns die Schriftgröße auf drei Ram setzen. Die Farbe wird weiß sein. Wir haben hier x. Als Nächstes wähle ich BTN-Text Stellen wir die Telefongröße auf 1,6 RAM ein und die Farbe wird weiß sein Ich habe das Telefon viel zu fett eingestellt. Lassen Sie uns als Nächstes etwas Abstand zwischen den Buchstaben schaffen. Außerdem werde ich die Position auf absolut setzen. Die oberste Position wird bei 50% liegen, dann wird die rechte Position bei drei Ram liegen. Auch hier müssen wir das Element zensieren, insbesondere mit transform translate Y -50%. Okay, die Unterseite sieht ziemlich Als nächstes werde ich mich um den Boden kümmern. Stellen wir die Höhe auf 35 Ram ein. Dann brauchen wir eine Flexbox. Ich werde die Flex-Richtung auf die Spalte einstellen. Dann richte ich die Elemente in der Mitte aus. Was die Eigenschaft „ Gerichteter Inhalt“ anbelangt, werde ich sie auf einen gleichmäßigen Abstand setzen. Wie Sie sehen können, sind die Elemente vertikal ausgerichtet. Stellen wir die Polsterung für die oberen fünf Rams ein. Als Nächstes werde ich mich um das Überschriftenelement H kümmern , das ist der Name, der die Schriftgröße auf drei festlegt Dann wird das Gewicht des Telefons 300 betragen. Außerdem werde ich die Farbe ändern, sie weiß machen. Als Nächstes werde ich diesen Code duplizieren und den Selektor ändern, wir benötigen hier H drei Überschriftenelemente, die Telefongröße wird 1,2 Ram sein Dann werde ich die Farbe ändern. Es wird D111 sein. Dann benötigen wir einen Buchstabenabstand von 0,1 Ram. Außerdem verschiebe ich das Element mit dem Rand nach oben, oben minus vier Ram. Ordnung, danach werde ich mich um die sozialen Medien kümmern. Lass uns die Breite auf 100% setzen. Wir brauchen die Flexbox zum Ausrichten. Elemente horizontal. Lassen Sie uns den Raum für rechtfertigende Inhalte gleichmäßig verwenden. Als Nächstes wähle ich wieder die sozialen Informationen aus, die wir benötigen, Flexbox. Dann müssen wir die Richtung ändern, in der wir die Elemente vertikal ausrichten müssen. Lassen Sie uns die Zeilenelemente zentrieren, die Elemente sind ausgerichtet und jetzt müssen wir Elemente auswählen. Machen wir uns mit sechs Ram auf den Weg. Dann wird die Höhe ebenfalls sechs Ram betragen. Ich werde die Hintergrundfarbe ändern. Lass uns CCC benutzen. Dann verwende ich Flexbox , um die Symbole zu zentrieren, die Symbole sind Als Nächstes setze ich den Randradius auf 50%. Außerdem benötigen wir Pok Shadow mit den Werten 01 Ram, Three Ram , und die Farbe wird RGBA sein Lassen Sie uns die Schriftgröße auf 1,8 Ram setzen. Wenn Sie dann die Farbe ändern, wird es weiß sein. Lassen Sie uns die temporäre Hintergrundfarbe loswerden. Dann wähle ich die ersten sozialen Informationen mit dem ID-Selektor Lass uns die Hintergrundfarbe ändern. Ich werde einen linearen Farbverlauf verwenden. Die Richtung wird zwei sein, oder? Für die erste Farbe werde ich 0077b verwenden Dann werden wir 5107 haben. Lassen Sie uns diesen Code zweimal duplizieren und die Diagrammselektoren ändern Die Farbe für das zweite Symbol wird 833ab, vier sein. Was die zweite Farbe betrifft, so wird es C13 584 sein. Außerdem brauchen wir hier, die dritte Farbe wird 13 sein , ihre sechs Ordnung, kümmern wir uns den dritten Gegenstand, den wir hier brauchen, 42672 Dann wird die zweite Farbe 5581 sein. In Ordnung, also sehen alle drei Symbole ziemlich gut aus. Als Nächstes müssen wir uns um das Taubheitsgefühl kümmern. Lassen Sie uns die Telefongröße einstellen. Es wird 1,8 Ram sein. Dann brauchen wir die Schriftstärke, sie wird fett sein. Und ich werde auch die Farbe ändern. Machen wir es EEE. Dann brauchen wir Marge 1.5 Ram, 010.5 Ram und Null. Auch hier sehen die Zahlen ziemlich gut aus. Als nächstes müssen wir uns um die Follower kümmern. Stellen wir Farbe zwei auf AA ein. Stimmt? Eigentlich ist die Karte gestylt. Jetzt müssen wir Javascript verwenden. Lassen Sie uns eine variable Schaltfläche erstellen. Ich werde es mit der Abfrageselektor-Methode auswählen. Wir müssen hier den Klassennamen angeben. Es wird Karte BTN sein. Als Nächstes benötigen wir eine weitere Variable. Es wird eine Karte sein , die ausgewählt ist. Jetzt füge ich der Schaltfläche mit einem Klickereignis einen Event-Listener Schaltfläche mit einem Klickereignis einen Event-Listener Außerdem müssen wir hier die Callback-Funktion übergeben. Ich werde der Karte mit der Total-Methode eine neue Klasse hinzufügen Karte mit der Total-Methode Der Klassenname wird geändert und wir müssen diese Klasse in CSS verwenden, um neue Stile zu erstellen , die wir beim Klicken verwenden müssen Lass uns weitermachen und die Höhe der Karte ändern. Es werden 25 Frames sein. Dann müssen wir Überschriften mit Opazität Null und Sichtbarkeit mit ausgeblendeter Sichtbarkeit ändern Wir brauchen dasselbe für die Information. Außerdem gehe ich zum Hyde PTN-Text. Lassen Sie uns tatsächlich die Breite des Musters ändern , es auf fünf machen Dann werde ich die linke Position auf 50% ändern . Außerdem werde Drehfunktion für eine Weile loswerden. Dann müssen wir zweimal mit -50% übersetzen. In Ordnung, das war's also. Jetzt brauchen wir hier das Kleingeld, gefolgt von der Karte. Stellen wir die Höhe ein, 260 Ram. Ich verwende deine Übergangshöhe und die Dauer beträgt 0,5 Sekunden. Wenn ich klicke, wird die Höhe der Karte erhöht. In Ordnung, als Nächstes nehme ich den Knopf ab. Lass uns wieder Fast Change benutzen, gefolgt vom Auto, BTN, ich werde die Breite erhöhen, es wird 17 Ram sein Verwenden wir hier Transition. Wenn ich auf die Schaltfläche klicke, wird sie größer. Als nächstes wähle ich die Änderung mit plus, wir benötigen hier links die Position 1.5 Ram. Außerdem drehe ich das Element, das wir benötigen, zuerst um das Element, das wir benötigen, zuerst -50% und drehe dann die Z-Funktion mit dem Wert -45 Grad Verwenden Sie dann den Übergang, um einen gleichmäßigeren Effekt zu erzielen. Wenn ich klicke, dreht sich das Pluszeichen und das Muster wird erweitert Eigentlich brauchen wir hier versteckt, nicht das H. Ich werde den BTN-Text wieder einblenden Also müssen wir hier den BTN-Text ändern. Und wir müssen die Opazität auf eins und die Sichtbarkeit auf sichtbar setzen eins und die Sichtbarkeit auf Außerdem werde ich Transition verwenden. Wir müssen eine kleine Verzögerung einhalten, die Zeit beträgt 0,5 Sekunden. Wenn ich klicke, funktioniert alles perfekt. Als Nächstes werde ich mich um die Überschriften kümmern. Wählen wir „Ändern“, gefolgt vom Element H mit einer Überschrift Ich werde sie wieder anzeigen. Lassen Sie uns die Opazität auf eins und die Sichtbarkeit auf sichtbar setzen. Und wir brauchen auch einen Übergang. Die Verzögerungszeit wird 0,5 Sekunden betragen. Wenn ich klicke, wird die erste Überschrift schön angezeigt. Machen wir dasselbe für die zweiten Überschriftenelemente. Lassen Sie uns hier den Selektor ändern, die Verzögerungszeit wird 0,6 Sekunden betragen. Wie Sie sehen können, werden die Überschriften gut angezeigt. Machen wir dasselbe für die sozialen Medien. Ich wähle „ Ändern“, gefolgt von der Option „Soziale Informationen für Kinder Stellen wir zunächst die Deckkraft auf eins und die Sichtbarkeit auf sichtbar Wir brauchen hier einen Übergang. Alle drei Elemente werden unterschiedliche Verzögerungszeiten haben und das wird einen schönen Effekt haben. Wir brauchen hier 0,8 Sekunden. Lassen Sie uns diesen Code zweimal duplizieren, die n-ten untergeordneten Selektoren ändern und auch die Verzögerungszeit ändern Wir brauchen 0,9 Sekunden und 1 Sekunde. Eigentlich müssen wir hier die Nummer ändern. Wenn ich jetzt klicke, dann wird alles perfekt funktionieren. Und wir haben hier eine nette und coole Profilkarte. Ordnung, hoffentlich war es interessant, dir hat dieses Projekt gefallen. Lass uns weitermachen. 24. Project 19 - Anmelden / Anmeldeformular: Ordnung, es ist also an der Zeit, weiterzumachen und unser nächstes Projekt zu erstellen. In diesem Abschnitt werden wir ein modernes und cooles Signum-Formular erstellen Das Projekt wird auf Basis von HTML, CSS und Javascript erstellt HTML, CSS und Javascript Wie Sie sehen können, hat das Projekt ein modernes und ziemlich tolles Design. Standardmäßig haben wir hier ein Signum-Formular. Das Formular selbst hat einen schönen Hintergrund mit verschiedenen Formen Auf der linken Seite können Sie die Pflanze sehen. Dann haben wir hier eine Überschrift, gefolgt von den Eingabefeldern. Außerdem habe ich hier ein individuelles Häkchen. Unten finden Sie einige Links zu sozialen Netzwerken. Wenn ich auf den Link zum Signieren klicke, erhalten wir hier das Unterzeichnungsformular mit nur zwei Eingabefeldern. Wenn ich auf das Anmeldeformular klicke, kehren wir zum Anmeldeformular zurück. Ordnung, also lassen Sie uns über das Projekt sprechen, lassen Sie uns anfangen. Ich habe einen neuen Ordner auf dem Desktop erstellt , in dem ich einen Ordner für die Bilder habe. Lassen Sie uns das Projekt im BS-Code öffnen, und dann werde ich unsere Arbeitsdateien erstellen. Der erste wird der Index des HTML-Codes sein. Dann haben wir eine Datei für CSS. Außerdem benötigen wir eine dritte Datei für das JavaScript-Skript JS, öffnen die Index-HTM-Datei und erstellen die grundlegende HTM-Struktur Ich werde den Titel ändern. Es wird ein Anmelde - und Anmeldeformular sein. Als Nächstes werde ich die CSS-Datei verlinken. Außerdem müssen wir die Gil Sky-Datei verknüpfen. Lassen Sie uns das Skript Tac öffnen. Geben Sie den Dateinamen im Quellattribut an. Okay, lassen Sie uns weitermachen und das Projekt über den Live-Server im Browser öffnen . Außerdem werde ich den Browser und den Editor so nebeneinander platzieren . Lassen Sie uns weitermachen und mit der Erstellung des H-DM bei Markup beginnen. Ich werde das div-Tag öffnen , das der Container sein wird Es wird den gesamten Inhalt enthalten. Dann brauchen wir noch einen Dip , der den Hintergrund bilden wird. Als Nächstes benötigen wir einen Form-Wrapper , in den ich das Bild einfügen werde Lassen Sie uns Bild aus dem Bilderordner auswählen. Es wird eine Pflanze sein. Lassen Sie uns das Alt-Attribut loswerden. Als Nächstes müssen wir H ein Überschriftenelement erstellen. Fügen Sie hier die Überschrift des Klassenformulars hinzu. Ich werde hier den folgenden Text einfügen. Füllen Sie das Formular aus und werden Sie Teil des Teams. Als Nächstes benötigen wir Formularelemente mit dem Klassenkontaktformular. Lassen Sie uns das Action-Attribut loswerden und dann hier ein tiefes Element einfügen, bei dem es sich um totale Links handeln wird Ich werde hier ein Element mit dem Link zum Umschalten der Klasse einfügen hier ein Element mit dem Link zum Umschalten der Klasse Und wir brauchen auch eine weitere Klassenanmeldung. Lass uns Text einfügen, uns anmelden. Eigentlich müssen wir uns anmelden und nicht anmelden. Lass uns den Code duplizieren, anmelden und auch den Klassennamen ändern . Wir müssen uns hier anmelden. Ordnung, danach werde ich eine Entwicklung erstellen, die als Input dienen wird. Lassen Sie uns das Eingabe-Tag mit einem Typtext und auch mit dem Eingabefeld für den Klassennamen öffnen . Außerdem benötigen wir eine andere Klassenhöhe. Fügen wir hier ein Platzhalterattribut mit dem Text Vorname Lassen Sie uns Eingabe T dreimal duplizieren. Nachname. Der nächste wird E-Mail sein. Wir müssen den Typ und auch den Platzhalter ändern, es wird die E-Mail-Adresse sein Wir brauchen das Display. Der nächste wird der Reisepass sein. Wir brauchen das Display. Und ändern Sie auch das Platzhalterattribut. Es wird ein Reisepass sein. In Ordnung, danach werde ich ein Kontrollkästchen erstellen. Fügen wir hier Class Hyde hinzu. Ich werde Ihre Eingabe mit dem Typ-Kontrollkästchen einfügen. Außerdem brauchen wir ihren Ausweis. Es wird ein Scheck sein. Nach dem Eingabeelement werde ich den Text beschriften, um zu überprüfen, ob ich damit einverstanden bin. Dann brauchen wir das Span-Element mit dem Text. Nutzungsbedingungen. In Ordnung. Danach werde ich den Button erstellen. Ich sende die Schaltfläche, wo die Klasse einreicht. Der Typ wird die Schaltfläche als Text sein. Ich werde mich anmelden. Als Nächstes brauchen wir soziale Medien. Ich gehöre zur Klasse. A Brands, FA, Facebook. Lass es uns dreimal duplizieren und die Klassennamen ändern. Der zweite wird Instagram sein. Dann werden wir Twitter haben. Das ist für das letzte Symbol , das verlinkt wird. Eigentlich sind alle Elemente erstellt und jetzt nehme ich die CDN-Links aus dem Formular kopiere den Link von hier. Dann öffne ich das Link-Tag im Head-Element und füge CDN in das H-Referenzattribut Wie Sie jetzt sehen können, werden die Symbole angezeigt. Als Nächstes werde ich die Google Phones-Website besuchen. Weil wir während dieses Projekts verschiedene Google-Telefone verwenden werden. Lass uns die Website besuchen und nach suchen, kann sie? Das wird der erste sein. Ich werde ein paar verschiedene Stile auswählen. Als Nächstes suche ich nach einem anderen Telefon, auf dem es angezeigt wird, p. Wählen wir den Stil aus, dann nehme ich den Link und füge ihn in das Head-Element ein Okay, lass uns weitermachen und anfangen, das CSS zu schreiben. Ich werde jedes Element mit einem Sternchen auswählen, Rand festlegen und beide Elemente auf Null setzen Als Nächstes müssen wir die Größe der Box so einstellen, dass sie an der Platine angebracht ist, und auch den Umriss auf „ Keine Dann müssen wir die Standard-Textdekoration loswerden und auch die Telefonfamilie ändern. Es wird Cansif sein. Außerdem werde ich die Telefongröße des H-ml-Elements auf 62,5% setzen . In diesem Fall entspricht ein m zehn Pixeln, und wir verwenden M als Die Standardstile werden angewendet, jetzt müssen wir uns um das Bild kümmern, weil es zu groß ist. Im Moment wählen wir Formular, Wrapper und Bild aus und setzen die Anzeige auf „Keine In Ordnung, das war's, das Bild ist versteckt. Jetzt können wir uns um den Container kümmern. Lassen Sie uns die Breite auf 100% setzen , dann beträgt die Höhe 100 View-Pot-Höhe. Ich werde die Hintergrundfarbe ändern. Es wird 9c287 sein. Hier haben wir den Hintergrund. Als Nächstes wähle ich PG aus. Definieren wir die Breite, sie wird 100% sein dann wird die Höhe eine 50% -ige Chase sein, Hintergrundfarbe, es wird EEE sein Hier haben wir das Element. Ich setze den Grenzradius auf 50% und dann auf 00,50%. Jetzt kümmere ich mich um die Position Verschieben wir es mit Translate 20% und dann brauchen wir -50% des Elements, das ebenfalls Wir brauchen hier die Funktion um die Z-Richtung drehen, und der Wert wird 15 Grad betragen. Ich glaube, das ist es. Wir müssen Teile außerhalb der Seite verstecken, indem wir Overflow Hidden verwenden Jetzt haben wir hier diesen coolen und tollen Hintergrund. Lass uns weitermachen und uns um den Formular-Wrapper kümmern. Ich setze die Position auf absolut. Dann benötigen wir die relative Position für das übergeordnete Element , in diesem Fall ein Container. Als Nächstes setze ich die Position auf 50%, dann die linke Position auf 50%. Ich werde das Element mithilfe von Transform Translate mit den Werten -50% und erneut -50% zentrieren mithilfe von Transform Translate mit . Wie Sie sehen können, ist der Formular-Wrapper auf der Seite zentriert Lassen Sie uns die Breite auf 70% setzen, dann wird die Höhe auf 80% gesetzt. Lassen Sie uns die Hintergrundfarbe ändern Ich werde hier die Farben 25 bis fünf bis sieben verwenden. Hier haben wir den Hintergrund der Schaumstoffhülle. Lassen Sie uns das Element mit einem Randradius von zwei Ram abrunden Außerdem benötigen wir Box Shadow, die folgenden Werte. 03 Ram, acht Ram. Die Farbe wird RGBA sein, schwarze Farbe mit einer Opazität 0,6. Wir haben hier einen schönen und coolen Schatteneffekt Danach werde ich mich um das Bild kümmern. Stellen wir auf 140 Ram ein. Aber dann brauchen wir eine absolute Position. linke Position wird -50% sein . Was die obere Position angeht, werde ich sie auf -20% setzen. Wir haben hier das Bild. Lassen Sie uns die Deckkraft auf 0,5 setzen . Dann brauchen wir Overflow Hidden for Form Wrapper um die Teile des Bildes auszublenden Jetzt sieht es ziemlich cool aus. Lassen Sie uns weitermachen und uns um die Überschrift des Formulars kümmern. Dann setze ich die Position auf absolut. Die Position wird zu 19% geführt. Position wird zu 35% in der Telefonfamilie liegen, es wird Tilt sein, Priest kursiv Die Telefonfamilie hat sich geändert. Jetzt müssen wir es anhand der Telefongröße vergrößern. Stellen wir es auf fünf Frames ein. Das Gewicht wird 300 sein. Wir müssen die Farbe ändern. Ich gehe zu Weiß. Die Überschrift sieht viel besser aus. Stellen wir die Breite auf 35 Ram ein. Dann werde ich einen Schatteneffekt verwenden. Wir brauchen 01 Ram, zwei Ram, und die Farbe wird RGP sein, eine schwarze Farbe mit der Opazität 0,5 Hier haben wir die Überschrift, die ziemlich gut aussieht Lassen Sie uns das Kontaktformular auswählen, die Breite auf 35% setzen, dann wird die Höhe auf 100% gesetzt. Ich werde die Position auf absolut setzen, dann werden die beiden Positionen Null sein Die richtige Position wird ebenfalls Null sein. Als Nächstes werde ich die Hintergrundfarbe ändern. Lassen Sie uns für eine Weile Rot einstellen. Also hier haben wir das Kontaktformular. Lasst uns diese Farbe loswerden. Von hier. Ich werde Flexbooks verwenden, um die Elemente auszurichten. Lassen Sie uns die Flex-Richtung auf die Spalte setzen. Dann müssen wir den Inhalt mit einem Werteabstand dazwischen rechtfertigen. Als Nächstes verwende ich Pudding mit dem Wert sieben Ram und dann zehn Ram Dann brauchen wir sieben Ram und wieder sieben Ram Jetzt haben wir den Raum innerhalb des Elements. Als Nächstes werde ich mich um die Links kümmern. Lassen Sie uns den Text in Zeile zwei setzen. Richtig, das haben wir hier, die Links auf der rechten Seite des Elements. Als Nächstes wähle ich Total Link aus. Außerdem benötigen wir die Gesamtspanne. Stellen wir die Schriftgröße auf 21,6 Ram ein. Dann wird die Schriftstärke 300 sein. Ich werde die Texttransformation auf Großbuchstaben setzen. Dann brauchen wir einen Buchstabenabstand von 0,1 Ram. Ändere die Farbe, die ich hier verwenden werde. Farbe 9287. Hier haben wir die Links. Eigentlich glaube ich, dass wir hier fehlen. Dieses Span-Element, ich meine den Schrägstrich, hier ist es. Als Nächstes füge ich hier einen Zeiger hinzu. Jetzt haben wir auch den Kurszeiger für das Span-Element. Als Nächstes wähle ich den Spin und setze Marching auf Null und 0,5 Ram Wir brauchen etwas Abstand zwischen den Links. Als Nächstes melden wir uns an, ich werde die Farbe 289663 einstellen Es wird tatsächlich der aktive Link sein. Als Nächstes wähle ich Eingänge aus. Lassen Sie uns den oberen Rand auf minus zwei Ram setzen. Dann brauchen wir Flexbooks. Ich lege die Richtung für die Spalte fest. Als Nächstes wähle ich die Eingabe aus. Lassen Sie uns die Breite definieren. Es wird 100% sein, dann wird die Höhe fünf Ram betragen. Als Nächstes müssen wir marschieren, es wird ein Ram und null sein Dann werde ich das Putten auf einen Ram setzen. Als nächstes brauchen wir eine Hintergrundfarbe. Es wird 343539 sein. Die Eingänge sehen viel besser aus. Als Nächstes setze ich Border 2.1 Ram auf Solid. Und die Farbe wird RGB sein, 25053 mal so groß wie die weiße Farbe mit der Opazität 0,1. Hier haben wir den schönen Rand Stellen Sie als Nächstes den Randradius auf 0,5 Ram ein. Außerdem benötigen wir hier die Schriftgröße, sie wird 1,6 Ram sein. Dann ändere die Farbe. Ich werde es EEE machen, die Farbe hat sich geändert Jetzt werde ich das Kontrollkästchen aktivieren. Lassen Sie uns die Anzeige auf Flex setzen. Wir benötigen ein Zentrum für Einzelposten, dann setze ich den oberen Rand auf zwei Ram. Als Nächstes aktiviere ich das Kontrollkästchen, gefolgt vom Eingabeelement. Lassen Sie uns das Erscheinungsbild auf „Keine“ setzen. Dann brauchen wir mit, es werden zwei Ram sein. Die Höhe wird ebenfalls zwei Ram betragen. Als Nächstes werde ich die Hintergrundfarbe ändern. Es wird 333 sein. Hier haben wir die Kiste. Fügen wir hier den Rand auf der rechten Seite hinzu und setzen ihn auf einen Ram. Als Nächstes benötigen wir den Grenzradius. Ich werde es auf 2,2 RAM einstellen. Danach wähle ich Eingabeelemente und auch das Label aus. Lassen Sie uns für beide Elemente auf Zeiger setzen. Jetzt wähle ich das Etikett aus und passe es an. Jetzt wähle ich die Eingabe aus, bei der AcdoClass aktiviert ist. Lassen Sie uns die Hintergrundfarbe 258235 einstellen. Sobald ich das überprüft habe, die Hintergrundfarbe der Box Wir brauchen hier einen Übergang , um den Effekt glatter zu machen Wenn ich klicke, ändert sich die Hintergrundfarbe reibungslos Als Nächstes wähle ich Eingabe mit einem Element aus. Lassen Sie uns den Inhalt auf leer setzen. Als Nächstes müssen wir die Position absolut haben. Dann benötigen wir die relative Position für das übergeordnete Element, das die Eingabe ist. Lassen Sie uns die Position auf -15% setzen Dann wird die linke Position 20% sein Ich werde die Breite auf 50% setzen, dann wird die Höhe auf 75% gesetzt. Als nächstes brauchen wir einen Rahmen, oder? Und es wird 0,2 Ram solide sein. Und die Farbe wird weiß sein. Lassen Sie uns den Code, den wir brauchen, hier duplizieren. Rand unten. Wie Sie sehen können, haben wir hier ein Häkchen. Jetzt müssen wir das Element mit Transform Rotate Z drehen, der Wert wird 45 Grad sein. Wir haben hier ein schönes Häkchen. Als Nächstes brauchen wir Opazität Null und Sichtbarkeit ausgeblendet. Danach wähle ich ein Eingabeelement mit einem markierten Doppelpunkt und gefolgt vom After Do-Element Sobald die Eingabe überprüft ist, müssen wir das Häkchen wieder anzeigen Wir brauchen Opazität eins und sichtbare Sichtbarkeit. Dann füge hier einen Übergang hinzu. Wenn ich klicke, dann bekommen wir hier dieses nette und coole Aussehen des Häkchens. Ordnung, lassen Sie uns weitermachen und Etikett auswählen und anpassen. Ich werde die Telefongröße auf 1.2 Ram einstellen. Der Anrufer wird DDD sein. Dann wähle ich Span-Elemente aus, die innerhalb des Labels platziert werden Lass uns den Anruf ändern. 58235, Okay. Jetzt sieht alles ziemlich gut aus und jetzt können wir weitermachen und uns um den Boden kümmern Stellen wir die Breite auf 100% dann beträgt die Höhe fünf Ram. Als Nächstes werde ich die Hintergrundfarbe ändern. Lassen Sie uns hier die Farbe D48 142 verwenden. Dann werde ich den Standardrahmen entfernen und dann die Telefongröße ändern, es wird 1,6 RAM sein Ändere das Telefongewicht, ich werde es auf 300 setzen. Außerdem benötigen wir einen Buchstabenabstand 0,1 m. Dann brauchen wir eine Texttransformation. Es wird in Großbuchstaben geschrieben da ich die Farbe auf Weiß setzen werde. Wie Sie sehen können, sieht die Unterseite ziemlich gut aus. Als Nächstes setzen wir den Cursor auf den Zeiger. Außerdem werde ich hier den Grenzradius hinzufügen , der 0,3 Ram sein wird. Dann brauchen wir hier Box Shadow mit den Werten 01 m1m und die Farbe wird RGBA sein, schwarze Farbe mit der Opazität 0,1 Okay, endlich füge ich hier Margin Top Es wird minus vier Ram sein. Der Knopf sieht ziemlich gut aus. Ich werde einen Klickeffekt mit der aktiven Pseudoklasse erzeugen , die wir hier brauchen . Transform translate y mit dem Wert 0.2. Wenn ich auf die Schaltfläche klicke, erhalten wir diesen schönen und coolen Klickeffekt Okay, lassen Sie uns weitermachen und uns um die Social-Media-Symbole kümmern die Social-Media-Symbole kümmern Ich werde Wrapper auswählen. Lassen Sie uns auf 100% setzen. Dann brauchen wir Putting, es werden drei Ram und 40% sein. Als Nächstes benötigen wir 0,0. Dann stelle ich Display auf Flex Wir müssen den inhaltlichen Abstand dazwischen rechtfertigen. Außerdem werde ich den Rand an der Spitze setzen, 2.1 Ram Solid. Und die Farbe wird RGBA sein, weiße Farbe mit geringerer Deckkraft, 0,2 Okay, als Nächstes werde ich mich um die Symbole kümmern Stellen wir auf drei Ram ein. Dann wird die Höhe drei Ram betragen. Als Nächstes werde ich die Hintergrundfarbe ändern. Lass uns deine Farbe verwenden, 939695. Als Nächstes setze ich den Porter-Radius auf 50%, weil wir Kreise brauchen Dann müssen wir die Symbole mithilfe von Flexbooks zensieren. Lassen Sie uns den Inhalt rechtfertigen und einen Zeileneintrag verwenden. Dann habe ich die Telefongröße auf 1,6 Ram eingestellt. Also werde ich die Farbe ändern. Es wird 333c sein und auch den Cursorzeiger anzeigen. In Ordnung, alles sieht ziemlich gut aus. Jetzt werde ich etwas Javascript verwenden. Lassen Sie uns eine neue Variable erstellen und sie Sign-In nennen. Ich werde das Element mithilfe der Abfrageselektormethode auswählen. Lassen Sie uns Ihr Klassenzeichen einfügen. Dann brauchen wir ein paar verschiedene Variablen. Die zweite wird die Anmeldung sein. Dann haben wir deinen Container. Die letzte Variable wird eingereicht, ich meine die Schaltfläche. Lassen Sie uns weitermachen und dem Sign-In-Element-Event-Listener mit einem Klickereignis etwas hinzufügen dem Sign-In-Element-Event-Listener mit einem Klickereignis etwas Außerdem benötigen wir hier eine Callback-Funktion, die ausgeführt wird, sobald wir auf den Anmeldelink klicken Ich werde dem Container mit der Methode add etwas Neues hinzufügen und es wird sich ändern Lassen Sie uns den Code, den wir hier brauchen, duplizieren und einmal unterschreiben. Dann müssen wir die Änderung aus dem Element entfernen. Jetzt verwende ich die Klassenänderung in der CSS-Datei, um neue Stile zu erstellen, die angewendet werden, sobald wir auf den Link klicken. Wir brauchen hier eine Änderung, gefolgt von dem Unterzeichnungsformular. Ich werde die Farbe ändern. Als Nächstes wähle ich mit Registrierung aus und ändere die Farbe. Wir müssen den aktiven Link hier mit diesen verschiedenen Farben definieren . Sobald ich klicke, ändert sich die Farbe. Als Nächstes wähle ich Ändern , gefolgt von der Einstellung „Höhe“ auf „Keine“. Sobald ich klicke, zwei Eingabefelder und auch das Kontrollkästchen ausgeblendet. Als Nächstes wähle ich Anzeige und stelle die Transformation mit der Übersetzungsfunktion ein. Wir müssen die Elemente um minus sechs Ram nach oben verschieben. Wie Sie jetzt sehen können, haben wir ein viel besseres Ergebnis. Wir müssen uns um den Boden kümmern. Wir müssen es nach oben verschieben. Und wir müssen auch den Text ändern. Wählen wir Ändern. der Klasse Submit müssen wir die Elemente mit Transform Translate, Y -14 Ram, verschieben Transform Translate, Y -14 Ram Jetzt bewegt sich der Button nach oben und es sieht ziemlich gut aus. Okay, jetzt brauchen wir dasselbe mit dem Klassenwechsel, weil wir einen Klickeffekt erzeugen müssen, wir brauchen hier -13,8 Wenn ich klicke, hat die Schaltfläche einen Klickeffekt. Okay, das Letzte, was wir tun müssen , ist den Text zu ändern. Sobald wir auf den Link geklickt haben, ändere ich den Textinhalt der Schaltfläche „Senden“ und es wird „Anmelden“ angezeigt. Wir brauchen das Gleiche unten. In diesem Fall müssen wir die Anmeldung ändern, um uns anzumelden. Okay, jetzt sieht alles perfekt aus mit dem Projekt, wir sind fertig. Lass uns weitermachen. 25. Project 20 - Animierter Fortschrittsbalken: Hallo und willkommen zu unserem nächsten Projekt. In diesem Abschnitt werden wir einen animierten Fortschrittsbalken erstellen. Das Projekt wird auf der Grundlage von HTML, CSS und Javascript erstellt . Eigentlich wird es lustig werden. Erstens, lassen Sie uns weitermachen und es schnell beschreiben. Wie Sie sehen können, wird hier eine Überschrift geladen gefolgt von der Fortschrittsleiste, die momentan leer ist. Und dann haben wir unten zwei verschiedene Schaltflächen : Herunterladen und Zurücksetzen. Wenn ich auf Herunterladen klicke, füllt sich der Fortschrittsbalken. Außerdem wird die Überschrift animiert. Wenn ich auf Zurücksetzen klicke, funktioniert der Fortschrittsbalken nicht mehr Ordnung, also ich denke das Projekt wird interessant und lustig sein. Also lass uns weitermachen und anfangen. Ich habe einen neuen Ordner auf dem Desktop erstellt , der momentan leer ist. Lassen Sie uns weitermachen und es im VS-Code öffnen und dann Arbeitsdateien erstellen Wir benötigen Index-HTML. Dann wird die zweite Datei Style-CSS sein. Außerdem benötigen wir eine Datei für Java-Skript oder S. Lassen Sie uns die Index-HTML-Datei öffnen und das grundlegende HTML-Dokument erstellen. Ich werde den Titel ändern. Es wird der Fortschrittsbalken sein. Als Nächstes werde ich die CSS-Datei verknüpfen. Außerdem benötigen wir ein Skript-Tag um die CHAV-Skriptdatei zu verknüpfen Fügen wir den Dateinamen in das Quellattribut ein. Okay, lassen Sie uns weitermachen und das Projekt über den Live-Server im Browser öffnen . Und dann platzieren Sie den Editor nebeneinander im Browser. Wie während des gesamten Projekts werde ich Google-Telefone verwenden. Also lasst uns weitermachen und die Website besuchen. Ich werde nach Telefonen suchen, die Rubic Bubbles genannt werden. Wählen wir den Stil aus, kopieren den Link und fügen ihn in das Head-Element ein Jetzt fange ich an, das HTM-Markup zu schreiben. Wir brauchen einen Container, der den gesamten Inhalt einschließt. Lassen Sie uns das Tag öffnen, das als Fortschrittsbalken-Wrapper innerhalb dieses Elements dienen wird Fortschrittsbalken-Wrapper innerhalb dieses Elements dienen Ich werde das Laden von Tags mit drei Überschriften öffnen. Dann haben wir einen Fortschrittsbalken , in den ich einen Balken einfügen werde. Dann werde ich Patons erstellen. Wir brauchen Wrapper-Muster und dann den Button selbst, und dann den Button den wir hier brauchen, Klassen PTN, Duplizieren Sie es und ändern Sie den Klassennamen. Zurücksetzen. Lassen Sie uns hier den Inhalt einfügen. Der erste wird heruntergeladen. Was den zweiten betrifft, wird er zurückgesetzt. Das war's, ungefähr das HD-Markup. Jetzt müssen wir anfangen, das CSS zu schreiben. Wählen Sie jedes Element wie gewohnt aus und erstellen Sie einige Standardstile. Wir brauchen Margin und Padding, beide müssen gleich Null sein Als Nächstes stelle ich die Größe der Box auf die Rahmenbox ein. Wir brauchen eine Telefonfamilie, es wird Rubic Bubbles sein, das Telefon, das wir ausgewählt haben Die Standardstile werden angewendet. Als Nächstes setze ich die Schriftgröße des Htiml-Elements auf 62,5%. Um m als Maßeinheit eins zu verwenden, entspricht m zehn Pixeln Dann werde ich den Behälter abnehmen . Stellen wir die Breite ein, sie wird 100% sein . Dann brauchen wir die Höhe, es wird 100 Viewport-Höhe sein Ändern Sie auch die Hintergrundfarbe. Es wird 734 sein. Als Nächstes werde ich Flex-Bücher verwenden. Um den Inhalt in der Mitte auszurichten, müssen wir das Inhaltszentrum ausrichten und das Objekt mittig ausrichten. Wie Sie sehen können, ist der Inhalt gut in der Mitte platziert. Als Nächstes wählen wir Progress Bar Wrapper aus. Ich werde die Breite definieren, es wird 70 Ram sein Als Nächstes brauchen wir Bücher aus Flachs. Ich werde die Richtung ändern. Es wird eine Kolumne sein. Wir müssen die Elemente vertikal ausrichten. Dann verwenden wir justify Content Center. Als Nächstes wähle ich Überschriftenelemente aus. Lassen Sie uns die Schriftgröße auf fünf hm setzen. Die Farbe wird 1182 sein. Außerdem werde ich etwas Abstand zwischen den Buchstaben schaffen. Wie Sie sehen können, sieht die Überschrift ziemlich gut aus. Lassen Sie uns hier Text hinzufügen und Großbuchstaben umwandeln. Dann brauchen wir Textschatten. Das werden 0,5 Hm sein, drei Ram. Und die Farbe wird schwarz mit einer Deckkraft von 0,3 sein . Jetzt sieht die Überschrift viel besser Fügen wir hier den Rand unten hinzu, es werden drei Ram sein Okay, das ist es. Über die Überschrift. Lass uns weitermachen und uns um den Fortschrittsbalken kümmern. Lassen Sie uns mit 100% addieren, dann wird die Höhe 3,5 Ram betragen. Wir brauchen Grenze, es werden 0,2 Ram sein. Volltonfarbe wird 66 sein , es ist grüne Farbe. Als Nächstes benötigen wir den Randradius , um das Element abzurunden. Sagen wir 23 Ram. Außerdem müssen wir 0,3 Ram einsetzen. Danach kümmere ich mich um die Bar. Lassen Sie uns auf 100% setzen dann wird die Höhe 100% sein . Ich werde den Hintergrund ändern. Lassen Sie uns den linearen Farbverlauf verwenden. Die Richtung wird zwei sein, oder? Für die erste Farbe werde ich Fd166 verwenden Dann wird die nächste Farbe f476 sein. Wie Sie sehen können, haben wir hier die Bar. Wir müssen es abrunden. Nehmen wir den Grenzradius drei m. Jetzt sieht es ziemlich gut aus. Wir brauchen unten etwas Platz . Verwenden wir die Marge. Die unteren vier Ram. Als Nächstes wähle ich Schaltflächen aus. Lassen Sie uns das auf 100% setzen. Außerdem müssen wir Flexbox verwenden, den inhaltlichen Abstand zwischen den ausgerichteten Schaltflächen ausrichten und jetzt müssen wir sie anpassen. Wählen wir BTN aus. Ich stelle die Breite auf 35% ein, dann die Höhe auf 5,5 Ich setze den Rand auf die nicht festgelegte Telefongröße auf 1,8 RAM Als Nächstes brauchen wir Farbe. Es wird weiß sein, da ich etwas Platz zwischen den Buchstaben schaffen werde. Als Nächstes setzen wir den Grenzradius auf fünf Ram. Ich füge hier Box Shadow mit den 01 Ram, Three Ram Und die Farbe wird schwarz sein mit einer Deckkraft von 0,2. Ändere auch den Verlauf oder mache es zu Okay, jetzt müssen wir den Hintergrund für jede der Schaltflächen ändern den Hintergrund für jede der Schaltflächen Der erste wird heruntergeladen. Lassen Sie uns den linearen Gradienten verwenden. Die Richtung wird nach rechts gehen. Was die Farben angeht, werde ich F476 verwenden. Dann wird der nächste F D 166 sein. Der erste Knopf sieht ziemlich gut aus. Als Nächstes mache ich dasselbe für die zweite Taste, die zurückgesetzt wird. Ich werde die Farben ändern. Fügen wir hier die zweiten 166 hinzu. Okay, das war's also, alle Elemente sind gestylt. Jetzt müssen wir BTN aktiv haben, um den Klick-Effekt zu erzeugen. Wir brauchen Transform Translate Y 0,2 m. Wenn ich jetzt auf die Buttons klicke, dann bekommen wir hier diesen schönen Klick-Effekt Lassen Sie uns die Breite des Balkens auf Null setzen, dann mache ich das. Erstellen Sie CSS-Animationen. Wir benötigen den Animationswert Ihrer Namensleiste bei 0%. Die Breite muss Null sein Für 100% werde ich die Breite auf 100% setzen . Lassen Sie uns die Animation auf Bar Anim setzen Dann wird die Dauer 10 Sekunden betragen und wir brauchen auch linear und vorwärts Wie Sie sehen können, füllt sich der Fortschrittsbalken. Jetzt müssen wir eine weitere Animation erstellen. Sie wird geladen. Es wird für die Überschrift bei 0% sein, wir brauchen Opazität, um eins zu Bei 25% werde ich die Opazität auf Null setzen. Dann werde ich diesen Code duplizieren. Bei 50% wird die Opazität eins sein, 75% Wir brauchen eine Opazität von Null Was die 100% angeht, brauchen wir Opazität eins. Wenn ich hier die Animation hinzufüge, bei der die Werte anum geladen werden, dann die Dauer, 2 Sekunden, fünf, ich meine die fünf Mal, bekommen wir diese nette und coole Jetzt ist es an der Zeit, etwas Javascript zu schreiben. Lassen Sie uns den Variablen-Download-BTN erstellen. Ich werde den Boden mit der Queryselector-Methode auswählen Queryselector-Methode Dann wähle ich Reset BTN. Lass uns den Klassennamen ändern. Als Nächstes benötigen wir eine weitere Variable. Es wird ein Container sein. Jetzt füge ich dem Download-Button mit Click-Event einen Even-Listener hinzu, wir brauchen hier eine Callback-Funktion, die ausgeführt wird Sobald wir auf die Schaltfläche klicken, müssen wir dem Container mithilfe einer Methode eine neue Klasse hinzufügen Die Klasse wird geändert. Wenn ich jetzt Bar mit Klassenwechsel auswähle und hier die Animation hinzufüge. Sobald wir auf die Download-Schaltfläche klicken, beginnt der Fortschrittsbalken zu funktionieren. Als nächstes benötigen wir dasselbe auch für die Überschrift. Wählen wir den Fortschrittsbalken, Wrapper drei mit Cl-Änderung hier, Animation Wie Sie sehen können, funktioniert jetzt alles einwandfrei. Wir müssen den Reset-Knopf programmieren. Lass uns das hier ändern. Die Schaltfläche wird zurückgesetzt, BTN und wir müssen die Klasse Change aus dem Container entfernen Klasse Change aus dem Container Sobald ich auf die Reset-Taste klicke, funktioniert die Animation nicht mehr In Ordnung, das heißt, alles funktioniert perfekt. Hoffentlich war dieses Projekt interessant und lustig. Lassen Sie uns weitermachen und mit der Erstellung des nächsten beginnen . 26. Project 21 - Website-Header mit Animationen: Hallo und willkommen zu unserem nächsten Projekt. In diesem Abschnitt werden wir einen modernen und coolen Website-Header mit Animationen und einem Hamburger-Menü erstellen einen modernen und coolen Website-Header mit Animationen und einem Hamburger-Menü Das Projekt wird auf Basis von HTML, CSS und Javskrit erstellt HTML, CSS und Javskrit Es ist tatsächlich das größte und eines der besten Projekte in diesem Kurs Lassen Sie uns weitermachen und das Projekt beschreiben. Wie Sie sehen können, haben wir hier einen schönen und schönen Header für die Website. Wir haben zwei Teile, links und rechts. Beide Teile haben unterschiedliche Hintergründe. Auf der linken Seite haben wir wie auf der rechten Seite einen hellen Hintergrund. In der Mitte der Seite sehen Sie die Überschrift. Sie besteht aus zwei Teilen. Die linke Seite ist breit. Die rechte Seite hat einen transparenten Hintergrund mit einem Bild. Sie können dasselbe auch für andere Textelemente finden andere Textelemente Hier auf der rechten Seite, in der oberen linken Ecke, finden Sie das Menüsymbol Wenn ich darauf klicke, werden die Elemente mit Ausblendeffekten ausgeblendet und ein Navigationsmenü zeigt an, dass die Navigationselemente einen schönen und coolen, transparenten Hintergrund und einige nette Hover-Effekte haben transparenten Hintergrund und einige nette Hover-Effekte Wenn ich auf das Menüsymbol klicke, wird die Navigation geschlossen und die Elemente werden wieder angezeigt Mit Überblendeffekten reagiert das Projekt auf unterschiedliche Bildschirmgrößen. Wenn ich die Seite überprüfe, wechsle ich in den responsiven Modus und überprüfe dann, ob das Projekt unterschiedliche Bildschirmgrößen aufweist. Sie werden feststellen, dass es auf allen Bildschirmgrößen gut aussieht und ansprechend aussieht. In Ordnung, also lassen Sie uns über dieses Projekt sprechen. Ich denke, du wirst es lieben. Also lass uns weitermachen und anfangen. Ich habe einen neuen Ordner auf dem Desktop erstellt , der den Ordner für die Bilder enthält. Lassen Sie uns weitermachen und es im VS-Code öffnen und dann unsere Arbeitsdateien erstellen. Wir benötigen drei Dateien. Die erste wird mit HTML indexiert, dann werden wir Style-CSS haben. die dritte betrifft, so wird es sich um eine Datei für das Javascript-Skript JS handeln. Lassen Sie uns weitermachen und die indizierte HTM-Datei öffnen und die grundlegende HTM-Struktur erstellen Ich werde den Titel ändern. Lass uns deine Landingpage einfügen, dann werde ich die CSS- und JS-Dateien verlinken. Wir brauchen hier ein Script-Tag, dann müssen wir den Dateinamen im Quellattribut, mccain, angeben Quellattribut, mccain, Lassen Sie uns weitermachen und das Projekt über den Live-Server für den Browser öffnen Live-Server für den Browser Dann werde ich den Browser und den Editor nebeneinander platzieren . Um den Arbeitsprozess einfacher und bequemer zu gestalten , werde ich mir ein paar verschiedene Links schnappen. Der erste wird Font, awesome CDN sein, weil wir während des gesamten Projekts einige tolle Handy-Symbole verwenden gesamten Projekts einige tolle Handy-Symbole Holen wir uns den Link von hier. Und dann öffne das Link-Tag im Head-Element und füge das CDN hier Außerdem werden wir Google-Telefone verwenden. Lass uns die Website besuchen, dann suche ich nach Google Phone namens Signica Negative Lassen Sie uns ein paar verschiedene Stile auswählen. Dann werde ich nach einer anderen Schrift suchen , nämlich Stick, keine Rechnungen. Lassen Sie uns verschiedene Stile auswählen, dann kopiere ich den Link und füge ihn in das Head-Element ein. In Ordnung, wir sind bereit, mit der Erstellung des Projekts zu beginnen. Ich werde mit einem HTML-Markup beginnen. Lassen Sie uns einen Container erstellen. Es wird den gesamten Inhalt enthalten, den wir hier benötigen, Menüsymbol. Es wird aus Linien bestehen. Wir werden hier zwei Zeilen haben, Linie eins und Zeile zwei. Außerdem benötigen wir Span-Elemente mit dem Klassenmenü. Und wir müssen hier ein Textmenü einfügen. Wir brauchen eine weitere Spanne und sie wird geschlossen. Okay, nach dem Menüsymbol. Ich werde hier Nav-Elemente mit der Klassennamen-Navigation einfügen . Ich werde hier Link-Elemente einfügen. Das erste wird zu Hause sein, dann werde ich es ein paar Mal duplizieren. Lassen Sie uns die Navigationselemente ändern. In der zweiten wird es darum gehen, dann werden wir Inhalte haben. Das nächste werden Tutorials sein. Was den letzten betrifft, werde ich Kontakt einfügen. Okay. Nach der Navigation, die ich öffne, wird Depth landen, das ist in einer weiteren Senke, wird links landen, dann müssen wir rechts und links landen. Habe H eine Überschrift für Elemente mit dem Klassennamen als Hauptüberschrift. Außerdem brauchen wir hier noch eine Hauptüberschrift übrig. Ich werde hier drei Buchstaben einfügen. Als Nächstes werde ich H eine Überschrift mit dem Textcode und Create einfügen . Als Nächstes werde ich hier einen Absatz mit etwas Dummy-Text als Entwicklungstext einfügen etwas Dummy-Text als Entwicklungstext , der als Link dienen wird Ich werde ein Element mit dem Text einfügen. Weitere Informationen Außerdem werde ich hier das Schriftsymbol einfügen, das als durchgehender FA-Pfeil angezeigt wird. Gleich danach werde ich mich um die rechte Seite kümmern. Wir brauchen hier Social-Media-Symbole. Lassen Sie uns ein Element einfügen. Das erste wird Facebook einer Marke sein, dann werden wir ein Twitter haben. Was das dritte Symbol betrifft, wird es ein verlinktes nach dem anderen in den sozialen Netzwerken sein. Ich werde H eine Überschrift mit den Klassennamen hinzufügen . Hauptüberschrift und Hauptüberschrift. Richtig, wird der zweite Teil der Hauptüberschrift sein. Fügen wir hier den Rest der Buchstaben ein. Als Nächstes benötigen wir Text, in dem wir drei Technologien haben werden Open H, ein übergebendes Element, das erste wird HTML sein Dann werden wir CSS und Javascript haben. Okay, ich denke, das war's mit dem HTML-Markup. Das Einzige, was Sie tun müssen, ist, hier einzufügen, einen Hintergrund zu schreiben , der leer sein wird Im Moment haben wir hier alle Elemente, und jetzt haben wir zwei, um das CSS zu schreiben Lassen Sie uns die CSS-Datei öffnen. Wählen Sie jedes Element aus, legen Sie den Rand fest und setzen Sie beide auf Null. Als Nächstes müssen wir die Größe der Box an das Rahmenfeld anpassen. Außerdem werde ich die Textdekoration auf „Keine“ setzen. Dann werde ich die Telefonfamilie definieren. Dann wird es serifenlos mit Zeichen und Negativ sein. Alle Standardstile werden angewendet. Als Nächstes setze ich die Schriftgröße des H-mal-Elements auf 62,5%, weil wir M als Maßeinheit verwenden In diesem Fall entspricht ein m zehn Pixeln, die Elemente wurden Jetzt kümmere ich mich um den Container. Lassen Sie uns die Breite auf 100% setzen dann wird die Höhe 100 Viewpot-Höhe sein Als Nächstes kümmere ich mich um die Landung. Die Breite wird 100% betragen Die Höhe wird ebenfalls 100% betragen. Außerdem werde ich den Hintergrund ändern. Lassen Sie uns die lineare Gradientenfunktion verwenden. Die erste Farbe wird Schwarz mit einer Deckkraft von 0,5 sein . Für die zweite Farbe füge ich erneut schwarze Farbe mit einer Deckkraft von 0,4 ein. Als Nächstes müssen wir ein Bild aus dem Bilderordner auswählen Dann definiere ich, dass die Position zentriert sein soll Und wir müssen hier auch keine Wiederholung hinzufügen. Außerdem werde ich die Paro-Size-Eigenschaft mit dem Wert Cover definieren Paro-Size-Eigenschaft mit dem Wert Cover Okay, hier haben wir das Paro-Bild. Als Nächstes wähle ich Mann aus Anzeige auf „Keine Ich werde mich für eine Weile verstecken. Dann brauchen wir Navigation. Ich werde es auch mit Display None ausblenden. Beide Elemente sind versteckt. Ich weiß, dass wir uns um die Landung kümmern können. Wählen wir Landing Left aus. Ich setze die Position auf absolut. Dann benötigen wir die relative Position für die übergeordneten Elemente. Zwei Positionen werden Null sein. Die linke Position wird Null sein. Dann brauchen wir eine Breite von 50% und die Höhe 100%. Als Nächstes werde ich diesen Code duplizieren, die Klasse ändern, wir brauchen deine Landung richtig. Wir benötigen dieselben Eigenschaften, ändern Sie einfach von links nach rechts, beide Teile sind ausgerichtet. Danach nehme ich den Hintergrund der rechten Seite. Lassen Sie uns die Breite auf 100% setzen. Die Höhe wird 100% betragen . Ich werde die Position auf absolut setzen. Die oberste Position wird Null sein. Was die richtige Position angeht, werde ich sie ebenfalls auf Null setzen. Als Nächstes benötigen wir eine Hintergrundfarbe. Es wird 94e sein. Der Hintergrund der rechten Seite wurde geändert. Jetzt kümmere ich mich um das Ganze. Lassen Sie uns die Position auf absolut setzen. Dann wird die unterste Position zehn Ram sein. Was die linke Position angeht, werde ich auch zehn Ram daraus machen. Das Element ist unten platziert. Danach wähle ich H aus, ein Überschriftenelement im About. Lassen Sie uns die Schriftgröße auf sechs Ram setzen. Dann werde ich Text in Großbuchstaben schreiben. Ändere auch die Farbe, sie wird weiß sein. Als Nächstes erstelle ich einen Schatten, 0,5 Ram, einen Ram. Und die Farbe wird Schwarz mit einer Opazität von 0,5 sein . Wir haben hier die Überschrift Es sieht ziemlich gut aus. Lassen Sie uns als Nächstes den Absatz hier nehmen. Stellen Sie die Telefongröße auf 1,6 Ram ein. Dann werde ich die Farbe ändern. Es wird 94de sein. Dann werde ich mit 250 Ram fertig sein. Außerdem brauchen wir einen Ram, 03 Ram und Null Hier haben wir den Absatz. Lass uns weitermachen und uns um den Link kümmern. Ich werde das Display auf Flex stellen. Dann brauchen wir einen Einzelposten, das wird der Basiswert sein. Dann brauchen wir einen Cursorzeiger. Als Nächstes definiere ich die Breite, es wird 14 Ram sein. Danach wähle ich ein Element aus. Lassen Sie uns die Telefongröße auf 1,6 Ram einstellen. Dann mache ich es in Großbuchstaben, wir brauchen Farbe, es wird weiß sein. Außerdem werde ich den Rand auf der rechten Seite setzen, es wird ein Ram sein. Wir brauchen etwas Abstand zwischen dem Text und dem Pfeil. Als Nächstes werde ich mich um den Pfeil kümmern. Wählen wir Elemente aus. Ich werde die Schriftgröße auf 1,6 Ram setzen. Dann brauchen wir Farbe. Es wird weiß sein. Hier haben wir den Pfeil. Jetzt werde ich den Hover-Effekt erzeugen. Wir müssen dem Link einen Hover hinzufügen. Und dann müssen wir beim Hover ein Element auswählen. Ich werde den Rand auf der rechten Seite erhöhen. Stellen wir es auf zwei Ram ein. Ich verwende hier auch Transition , um den Effekt flüssiger zu machen Stellen wir die Dauer auf 2,3 Sekunden ein. Wenn ich mit der Maus darüber fahre, bekommen wir diesen schönen Effekt. Okay, lassen Sie uns über dieses Element sprechen. Als Nächstes wähle ich die Hauptüberschrift aus. Lassen Sie uns die Position auf absolut setzen. Die oberste Position wird bei 25% liegen. Dann brauchen wir die Schriftfamilie. Es wird die zweite Schrift sein, Stick. Keine Pillen. San Serif. Dann stelle ich die Telefongröße auf 20 Ram ein. Dies sind die Standardstile für beide Teile. Und jetzt wähle ich die linke Seite aus. Lassen Sie uns die rechte Position auf -1% setzen . Dann werde ich Farbe auf Weiß setzen, da wir den Schatten benötigen, es wird 0,5 Ram sein, ein Ram Und die Farbe wird GPA sein, schwarze Farbe mit Opazität 0,5 Wir haben hier den ersten Teil der Überschrift Wählen wir die rechte Seite aus. Ich werde die linke Position auf 1% setzen . Dann benötigen wir den Textschatten 0,5 m1m und den RGBA 0,2 rechts, die rechte Seite ist nicht sichtbar Lassen Sie uns den Index 2100 setzen. Also hier haben wir die richtige Seite. Lassen Sie uns die Index-Eigenschaft loswerden und sie hier hinzufügen. Außerdem müssen wir hier die Schriftstärke fett angeben. Dann setze ich den Text auf Großbuchstaben und mache auf Großbuchstaben und dann etwas Leerzeichen zwischen den Buchstaben, so dass es drei Ram sind. Jetzt sieht die Überschrift viel besser aus. Wir müssen uns um den Hintergrund der rechten Seite kümmern. Wir brauchen einen linearen Gradienten. Die erste Farbe wird RGBA-Schwarz mit Opazität 0.2 sein . Als nächstes benötigen wir wieder RGBA-Schwarz mit der Opazität 0.1 Jetzt müssen wir die URL des Bildes definieren Wir brauchen das gleiche Hintergrundbild. Dann benötigen wir 30% als Position. Außerdem werde ich den Web-K-Hintergrundclip verwenden, es wird Text sein. Außerdem brauchen wir Webkit-Text, Feel Color. Ich werde es transparent machen. Wenn ich nachschaue, dann siehst du hier das Bild als Hintergrund des Textes. Ich finde es sieht ziemlich gut aus. In Ordnung, nehmen wir diesen Code und fügen ihn ein. Stadt, wo wir die richtige Seite haben. Danach werde ich mich um die Social-Media-Icons kümmern . Lassen Sie uns die Position des Wrappers festlegen. Absolut. Dann brauchen wir eine Position von fünf Fram Die richtige Position werden ebenfalls fünf Fram sein. Dann benötigen wir eine Index-Eigenschaft 100, um die Symbole anzuzeigen. Ich wähle Elemente aus und setze die Telefongröße auf drei RAM. Dann wird die Marge 01,5 Ram betragen. Als nächstes brauchen wir Tech Shadow. Stellen wir es auf 0,5 Fram ein, ein Kinderwagen, und die Farbe wird RGB sein, schwarze Farbe mit der Opazität 0,2 Als Nächstes benötigen wir den gleichen Hintergrund auch für die Symbole Lass uns den Code kopieren. Fügen Sie hier den Cursorzeiger hinzu. Wie Sie sehen können, haben wir hier Schriftsymbole mit demselben Hintergrundbild. Als Nächstes werde ich mich um den Text kümmern. Ich werde die Position definieren. Eigentlich sollten wir uns diesen Code schnappen. Zur Position wechseln. Wir brauchen hier sechs Ram. Wir brauchen eine Position von unten und eine von oben. Lass es uns ändern. Wie Sie sehen können, sind die Elemente unten platziert. Als Nächstes müssen wir H auswählen, ein Überschriftenelement. Stellen Sie die Schriftgröße auf acht Ram ein. Dann wird die Schriftstärke fett sein. Als Nächstes setze ich die Texttransformation auf Großbuchstaben. Dann brauchen wir The Shadow. Es wird 0,5 Ram sein, ein Ram, mit der RGBA-Farbe Schwarz mit der Opazität 0,2. Dann schnappen Sie sich wieder diesen Code Und wie Sie sehen können, sehen die Überschriften hier ziemlich gut aus. Um die Zeilenhöhe zu verringern, wird es eine sein. Und wir brauchen auch einen Zeilentext auf der rechten Seite. Okay, alles sieht ziemlich gut aus. Wir sind fertig mit den Überschriften im Text. Jetzt werde ich das Menüsymbol sichtbar machen. Das hat seine Position auf absolut gesetzt. Als Nächstes müssen wir die Position mit fünf Frames positionieren. Ich werde auch fünf Frames machen. Stellen Sie die Breite ein, es werden zehn Ram sein. Dann brauchen wir die Höhe, es werden drei Ram sein. Verwenden Sie auch die Index-Eigenschaft, machen Sie sie auf 200. Als nächstes brauchen wir eine Hintergrundfarbe. Lassen Sie uns eine temporäre Hintergrundfarbe verwenden. Hier haben wir das Menüsymbol. Ich werde Line auswählen. Stellen wir auf 2,5 Ram ein. Dann wird die Höhe 0,2 Ram betragen. Ändern Sie die Hintergrundfarbe, setzen wir sie für E auf neun. Hier haben wir die Linien. Ich werde diese Hintergrundfarbe loswerden. Jetzt sind die Linien sichtbar, wir müssen sie trennen. Wählen wir Linien aus, setzen die Höhe auf 100% und dann brauchen wir eine Flexbox. Die Richtung wird auch die Spalte sein, wir müssen den Inhalt mit einem Wertebereich ausrichten, auch wenn die Zeilen getrennt und gut ausgerichtet sind. Danach werde ich mich um die Ausrüstung der Spannelemente kümmern. Wir haben zwei Spin-Elemente: Menu und Close. Lassen Sie uns die Schriftgröße auf 1,8 Ram setzen. Dann brauchen wir eine Texttransformation. Es wird auch in Großbuchstaben geschrieben. Ich werde Farbe 29 auf FuRte einstellen. Wir haben hier Span Elements. Lassen Sie uns die Position auf absolut setzen. Die richtige Position muss Null sein. Als Nächstes setze ich die Anzeige für das Menüsymbol auf Flex. Wir brauchen ein Einzelpostenzentrum. Begründen Sie auch den inhaltlichen Abstand dazwischen. Als Nächstes setze ich den Cursor auf den Zeiger. Lassen Sie uns außerdem mithilfe von Padding Platz schaffen. Setzen wir es auf Null und 0,5 m. Wie Sie sehen können, sind die Spannelemente gut neben den Linien ausgerichtet Ich wähle Schließen und stelle die Position auf 100% ein. Jetzt ist das zweite Spanelement unten gelandet. Jetzt müssen wir etwas Javascript verwenden. Lassen Sie uns eine Variable erstellen. Es wird ein Container sein. Ich werde es mit der Abfrageselektor-Methode auswählen. Wir müssen hier den Klassennamen-Container angeben. Als Nächstes werde ich eine weitere Variable erstellen. Es wird ein Menüsymbol sein. Lassen Sie uns hier den Klassennamen angeben. Jetzt füge ich dem Menüsymbol mit einem Klickereignis einen Event-Listener Menüsymbol mit einem Klickereignis einen Event-Listener Außerdem müssen wir hier eine Callback-Funktion hinzufügen , die ausgeführt wird, sobald wir auf das Menüsymbol klicken Ich werde dem Container mit der Total-Methode eine neue Klasse hinzufügen , und der Klassenname wird navigiert sein Ich werde diese Klasse in der CSS-Datei verwenden, um neue Stile zu erstellen, die auf die Elemente angewendet werden Sobald wir auf das Symbol geklickt haben, fügen wir die erste Transformation der Linie mit einer Z-Drehfunktion hinzu. Der Wert wird 135 Grad betragen. Außerdem müssen wir hier übersetzen. Wir müssen Elemente leicht verschieben. Der Wert wird 0,7 Ram sein. Lassen Sie uns diesen Code duplizieren, den Klassennamen ändern. Wir brauchen Zeile zwei. Die Funktion „Z drehen beträgt 225 Grad. Mal sehen, wir haben hier die X-Taste. Wenn ich jetzt hier die Klassennavigation hinzufüge. Und verwenden Sie auch den Übergang mit Cubic Zero Funktion per Klick. Dann verwandeln sich die Linien in eine X-Schließtaste. In Ordnung, danach wähle ich Navigieren. Gefolgt vom Menü. Ich werde die Transformationseigenschaft so einstellen , dass die Y-Funktion mit dem Wert 110% übersetzt wird. Ich meine -110%, wie wir Menü mit Übergang mit dem Verzögerungszeitpunkt 1 Sekunde. Lassen Sie uns diesen Code duplizieren, den Klassennamen ändern. Wir brauchen hier 120% für einen Abschluss. Ich werde hier einen Übergang mit Transformation mit einer Dauer von 0,3 Sekunden hinzufügen Übergang mit Transformation mit einer Dauer von 0,3 Sekunden Als Nächstes benötigen wir einen Übergang für das Menü mit der Navigation. Außerdem brauchen wir den gleichen Übergang für das Schließen, das wir können. Sobald ich also klicke, ändern sich die feinen Elemente. Jetzt müssen Sie nur dieses feine Element ausblenden. Lassen Sie uns den Vielen einen Überlauf schicken. Wie Sie jetzt sehen können, funktioniert alles perfekt. Als Nächstes werde ich mich um die Hauptüberschrift kümmern . Lassen Sie uns die Hauptüberschrift mit der Navigation auswählen. Stellen Sie die Transformation so ein, dass Y minus fünf Frames übersetzt wird. Als Nächstes müssen wir die Opazität auf Null setzen und die Sichtbarkeit ausblenden. Fügen wir hier auch einen Übergang hinzu, um einen gleichmäßigeren Effekt zu erzielen. Sobald ich klicke, wird die Überschrift mit einem schönen Überblendeffekt ausgeblendet Als Nächstes werde ich die Info ausblenden. Lassen Sie uns ein Element mit der Klasse Navigate auswählen. Wir brauchen hier Transform Translate x Five Ram. Und außerdem brauchen wir wieder Opazität Null und Sichtbarkeit unsichtbar Und um einen reibungslosen Effekt zu erzielen, lassen Sie uns mit einer Dauer von 1 Sekunde übergehen Sobald ich klicke, wird der Abschnitt „Über uns“ in der Höhe verschoben, wodurch der Effekt ausgeblendet wird. Als Nächstes werde ich dasselbe für Text tun. Wählen wir das Element mit der Klasse Navigate aus. Stellen Sie die Transformation so ein, dass x minus pi fram übersetzt wird. Außerdem müssen wir die Opazität auf Null setzen und die Sichtbarkeit ausblenden. Verwenden Sie auch hier den Übergang für die Dauer von 1 Sekunde. Wenn ich klicke, werden die Elemente ausgeblendet. Aber wir brauchen hier 1 Sekunde statt 0,1 Jetzt, wie Sie sehen, funktioniert alles wieder einwandfrei. Jetzt brauchen wir dasselbe für die sozialen Medien. Wählen wir Elemente mit Klassennamen aus. Navigiere und mache das Gleiche, was wir hier brauchen. Die Opazität ist Null und die Sichtbarkeit ist ausgeblendet. Verwenden Sie auch einen Übergang mit einer Dauer von 0,5 Sekunden. Wenn ich klicke, werden alle Elemente ausgeblendet. Wir haben hier nette Fade-Effekte. Als Nächstes werde ich den Hintergrund der rechten Seite ausblenden. Lassen Sie uns diese Elemente mithilfe der Klasse auswählen. Navigiere. Ich werde die Transformation so einstellen, dass sie x 100% übersetzt . Außerdem müssen wir die Opazität auf Null setzen und die Sichtbarkeit wieder ausblenden Dann füge ich hier einen Übergang hinzu. Wenn ich klicke, bewegt sich der Hintergrund auf die rechte Seite. Wir müssen diese Scrollbalken verstecken. Verwenden wir Overflow Hidden für die Landung. Jetzt funktioniert alles perfekt. In Ordnung, jetzt wähle ich „Landen mit Navigate“. Um den Hintergrund zu verwischen, benötigen wir den Filter Blar 1.5 Man kann immer sehen, dass der Hintergrund unscharf ist. Eigentlich muss hier der Hintergrund des Containers schwarz sein, um die Unschärfeeffekte zu Wie Sie sehen können, haben wir hier viel schönere und bessere Ergebnisse Ordnung, als Nächstes werde ich In Ordnung, als Nächstes werde ich einen Übergang hinzufügen , um den Effekt etwas glatter zu machen Und wir brauchen auch etwas Verzögerungszeit. Als Nächstes benötigen wir standardmäßig einen Übergang für die Landung. Wenn wir nun hierher kommen , Polareffekt mit sanftem Übergang. Also gut, jetzt kümmere ich mich um die Navigation , die versteckt war. Lassen Sie uns die Breite auf 100% setzen, dann wird die Höhe 100% sein . Ich werde die Position auf absolut setzen. Dann brauchen wir Flexbooks. ändere ich die Richtung verwende dann Justify Content Center und ein Einzelpostencenter. Wir müssen den Inhalt zentrieren. Ich meine, die Navigationselemente sind jetzt sichtbar. Fügen wir hier den Index mit dem Wert 100 hinzu. Jetzt haben wir hier die Navigationselemente. Ich werde Link Elements auswählen. Stellen wir die Telefongröße 210 Ram ein. Dann wird das Gewicht des Telefons fett sein. Außerdem werde ich Text in Großbuchstaben umwandeln. Als Nächstes benötigen wir Tech Shadow 0,5 Ram, einen Ram, und die Farbe wird schwarz mit einer Opazität von 0,5 sein . Als nächstes benötigen wir einen Rand, 0,5 Ram Und tatsächlich brauchen wir hier 0,5 Ram. Hier haben wir die Navigationspunkte. Jetzt werde ich mir den Hintergrund schnappen , den wir ein paar Mal benutzt haben. Lassen Sie uns hier den gleichen Code verwenden. Lassen Sie uns den benötigten Prozentwert ändern, 35% Wie Sie sehen können, haben wir hier ein Hintergrundbild für die Navigationselemente. Lass uns hier die Farbe ändern. Es wird weiß mit geringerer Opazität sein. Jetzt haben wir ein viel besseres Ergebnis. Okay, danach werde ich den Hover-Effekt auf Ho erzeugen. Ich werde den Buchstabenabstand ändern. Ich werde den Speicherplatz vergrößern. Jetzt brauchen wir einen Übergang mit einer Dauer von 0,5 Sekunden. Jetzt haben wir diesen schönen und coolen Hover-Effekt. Okay? Als Nächstes werde ich die Navigation standardmäßig ausblenden. Verwenden wir Opacity Zero und Visibility Hidden. Ich werde sie wieder anzeigen. Sobald wir das Menü geöffnet haben, benötigen wir den Klassennamen Navigate, gefolgt von der Navigation. Außerdem benötigen wir dasselbe für das Link-Element. Lassen Sie uns die Opazität auf eins und die Sichtbarkeit auf sichtbar setzen. Als Nächstes werde ich den Übergang ändern. Fügen wir hier eine Opazität von 0,5 Sekunden hinzu. Und wir brauchen auch eine Verzögerungszeit von 1 Sekunde. Sobald wir das Menü öffnen, die Navigationselemente angezeigt. Ordnung, entfernen Sie diesen Code von hier aus, weil wir für jedes Element einen anderen Übergang verwenden werden. Ich werde mit dem ersten beginnen und den n-ten Child-Selektor verwenden Definieren Sie den Übergang. Wir benötigen Ihren Buchstabenabstand mit der Dauer 0,5 Sekunden. Dann benötigen wir eine Deckkraft 0,5 Sekunden und dann eine Verzögerung von 1 Sekunde Ich werde diesen Code ein paar Mal duplizieren. Lassen Sie uns die Auswahl des Kindes für das zweite Element ändern , wir benötigen 1,2 Sekunden. Für das dritte Element werden es dann 1,4 Sekunden sein. Dann haben wir 1,6 Sekunden und schließlich 1,8 Sekunden. Wenn ich das Menü öffne, werden die Elemente in der richtigen Reihenfolge angezeigt schönen und coolen Effekt hat. Eigentlich funktioniert alles perfekt, und jetzt müssen wir das Projekt auf unterschiedliche Bildschirmgrößen anpassen. Lassen Sie uns weitermachen und das Projekt in den responsiven Modus schalten . Wir müssen die Haltepunkte finden , an denen wir einige Änderungen für unser Projekt vornehmen Lassen Sie uns weitermachen und eine CSS-Medienabfrage erstellen. Ich werde hier Kommentare für Responsive hinzufügen. Die maximale Breite wird 1.600 Pixel betragen. Ich werde die Telefongröße für das H-Demil-Element auf 55% setzen Telefongröße für das H-Demil-Element auf . Dadurch werden die Als Nächstes müssen wir einen weiteren Bruchpunkt finden. Lassen Sie uns die Breite auf 1.280 Pixel setzen. Ich finde, das Projekt sieht ziemlich gut aus. Als Nächstes setze ich die Breite auf 1024 Pixel. Lass uns weitermachen und diesen Code duplizieren. Ich werde mit 1.200 Pixeln einstellen. Was die Schriftgröße des H-Elements angeht, wird sie 45% betragen. Die Elemente wurden kleiner und das Projekt sieht tatsächlich gut aus Als Nächstes werde ich den Bildschirm verkleinern und den nächsten Breakpoint finden. Stellen wir das zweite Projekt auf den iPod ein. Ich werde diesen Code duplizieren, das Maximum auf 900 Pixel ändern. Was die Telefongröße angeht, werde ich zwei 40% einstellen . Außerdem werde ich ungefähr, ich meine, den Absatz auswählen , lassen Sie uns mit zwei für zwei Ram festlegen. Wie Sie sehen können, sieht alles gut aus. Als Nächstes werde ich den Bildschirm verkleinern. Gehen wir von 2500 Pixeln aus, das ist es, was der Hyde sein wird, 800 Pixel Lassen Sie uns eine neue CSS-Medienabfrage mit Max mit 700 Pixeln Ich werde die Telefongröße des HTM-Elements auf 35% setzen . Als Nächstes wähle ich Landing Left und setze 100%. Danach gehe ich zur Java-Script-Datei Neue Variable erstellen Es wird in die Richtung gehen, oder? Lassen Sie uns Elemente mithilfe der Abfrageselektor-Methode auswählen. Wir brauchen hier die Hauptklasse, die Überschrift, richtig? Lassen Sie uns den Code duplizieren, den wir hier brauchen. Geht auch nach links. Beide Überschriftenelemente sind ausgewählt. Als Nächstes erstelle ich eine neue Variable namens Responsive Design is will be a function we need if statement, in der ich Folgendes definiere. Die innere Breite des Fensters ist kleiner oder gleich 700 Pixeln. Dann brauchen wir den richtigen Stil für die Überschrift. Zeige keine an. Wenn die Bildschirmgröße kleiner als 700 Pixel ist, müssen wir die Überschrift auf der rechten Seite ausblenden. Was die linke Seite betrifft, müssen wir dafür sorgen, dass der Text erkundet wird. Außerdem benötigen wir eine L-Erklärung. Schnappen wir uns diesen Code. In der L-Anweisung benötigen wir Display-Block für die Überschrift rechts. Für die linke Überschrift muss der Textinhalt x sein. Dann benötigen wir einen Event-Listener für das Fensterobjekt mit dem Resize-Event Und außerdem brauchen wir hier eine Callback-Funktion. Nennen wir die Funktion Responsive Design. Und wir müssen die Funktion auch außerhalb der Anweisung aufrufen . Sobald wir die Bildschirmgröße auf weniger als 700 Pixel reduziert haben, ist die rechte Seite, ich meine die rechte Überschrift, ausgeblendet. Als Nächstes wählen wir die Hauptüberschrift links aus. Und die rechte Position wird auf 50% geändert. Außerdem müssen wir das Element mit Transform Translate x 50% zentrieren . Als Nächstes benötigen wir Polsterung auf der linken Seite auf drei Ram, die Überschrift wird in der Mitte platziert Lassen Sie uns weitermachen und den Hintergrund auf der rechten Seite auswählen und die Anzeige auf „ Keine“ einstellen . Der Hintergrund ist ausgeblendet Außerdem wähle ich die Hauptüberschrift mit dem ersten Text und dem Social-Media-Element aus. Wir benötigen die Textfüllfarbe für das Webkit. Die Farbe wird weiß sein. Ich wähle die Hauptüberschrift und stelle die Telefongröße 212 Ram ein. Wie Sie jetzt sehen können, sind die Überschriften und auch die Symbole weiß Eigentlich haben wir hier einen Fehler, wir brauchen Textinhalt und nicht das Display Und das Gleiche in der Outs-Erklärung. Jetzt wird das Problem behoben sein. Wir müssen hier mit dem zweiten Teil weitermachen. Als Nächstes wähle ich „Über Veränderung“ aus. Die unterste Position wird 50% sein . Was die linke Position angeht, werden es 50% sein. Dann müssen wir X mit -50% transformieren . Außerdem brauchen wir Display-Flex und wir müssen die Richtung ändern, das wird Spalte sein Lassen Sie uns eine Zeile in der Mitte platzieren. Außerdem müssen wir definieren, dass die Breite 100% betragen soll . Tatsächlich haben wir hier ein Problem. Ja, wir brauchen hier die linke Position und nicht den linken Porter. Jetzt ist das Element in der Mitte platziert. Lassen Sie uns den Bildschirm für das Handy ändern und eine neue CSS-Medienabfrage erstellen. Die maximale Breite wird 450 Pixel betragen. Ich wähle etwa aus und setze die untere Position auf 45%. Lass uns den Bildschirm ändern, ihn verkleinern. Wir haben hier eine Navigation, die gut aussieht. Mir gefallen die Effekte hier auf einer kleineren Bildschirmgröße nicht. Ich werde mich darum kümmern. Wählen wir „ Mit Hauptüberschrift navigieren“ und setzen „Transformieren“ auf 50% und dann auf minus fünf Ram. Jetzt denke ich, dass wir hier viel bessere Ergebnisse haben. Eigentlich denke ich, dass wir mit dem Projekt fertig sind. Hoffentlich war es interessant und du hast ein paar neue Sachen gelernt. Lassen Sie uns weitermachen und mit dem nächsten Projekt fortfahren. 27. Projekt 22 - Testimonial-Slider: Ordnung, es ist also an der Zeit, mit der Antwort fortzufahren und unser nächstes Projekt zu erstellen In diesem Abschnitt werden wir einen Testimonial-Slider erstellen Dieses Projekt wird auf der Grundlage von HTML, CSS und Javascript erstellt auf der Grundlage von HTML, CSS und Javascript Lassen Sie uns weitermachen und es schnell beschreiben. Wie Sie sehen können, haben wir hier einen Testimonial-Slider. Ich meine, in der Mitte der Seite können Sie die Karte sehen, können Sie die Karte sehen wir das Bild des Kunden haben, dann die Meinung des Kunden, auch den Namen und das Alter Auf der rechten und linken Seite können Sie die Pfeile sehen. Sie können auf die Pfeile klicken und wir werden zu den anderen Kunden wechseln. Unten können Sie sehen, dass dies die Controller sind. Sie können auf diese Punkte klicken und wir finden den richtigen Kunden. Okay, ich denke, das Projekt wird heutzutage interessant und nützlich sein. Fast jede Website hat einen solchen Bereich. Sie werden lernen können, wie Sie einen Testimonial-Slider erstellen Okay, lassen Sie uns weitermachen und loslegen. Ich habe einen neuen Ordner auf dem Desktop erstellt , in dem ich einen Ordner für die Bilder habe. Lassen Sie uns weitermachen und das Projekt und den VS-Code öffnen und dann Arbeitsdateien für HTML erstellen. Dann brauchen wir für CSS auch eine Datei für Java-Skript. Lassen Sie uns die Index-HTML-Datei öffnen und die grundlegende HTML-Struktur erstellen. Ich werde den Titel ändern. Es wird ein Testimonial-Slider sein. Dann werde ich die CSS-Datei verknüpfen, und wir müssen auch die Java-Datei verknüpfen Fügen wir die Datei ein, die das Quellattribut benennt. Okay, lassen Sie uns das Projekt über den Live-Server im Browser öffnen den Live-Server im Browser und dann unsere Arbeitsumgebung organisieren. Ich werde den Browser und den Editor so nebeneinander platzieren den Editor so nebeneinander , um den Vorgang zu vereinfachen. Okay, ich werde den Telefon-CDN-Link korrigieren , weil wir in diesem Projekt einige Telefon-Symbole verwenden Kopieren wir den Link, öffnen dann das Link-Tag im Head-Element und fügen das CDN in das H-Referenzattribut Außerdem werden wir einige Google-Telefone verwenden. Besuchen wir also die Google Phones-Website. Ich werde nach einem Telefonanruf suchen. Kann es? Wählen wir Styles aus. Dann kopiere ich den Link und füge ihn in das Head-Element ein. Okay, wir sind bereit, mit dem Schreiben des Codes zu beginnen. Ich fange mit dem HTML-Markup an. Wir brauchen einen Container, der den gesamten Inhalt umhüllt. Als Nächstes benötigen wir einen Testimonials-Wrapper, in dem ich einen weiteren Teil öffnen werde, es wird der Testimonials-Header sein In diesem Element benötigen wir drei Überschriftenelemente mit dem Text „Unsere Als Nächstes benötigen wir H ein Überschriftenelement, es wird ein Testimonial sein Als Nächstes brauchen wir Sterne. Ich werde Elemente mit einem durchsichtigen Stern der Klasse A öffnen. Wir brauchen fünf Sterne. Hier haben wir die Icons. Als Nächstes werde ich hier Testimonials einfügen, in denen wir einen Slider benötigen Dann brauchen wir Slide. Ich werde hier den Folienhintergrund einfügen. Als Nächstes Folieninhalt , in den ich ein Element einfügen werde. Es wird eine solide Linke sein. Dann brauchen wir rechts. Als Nächstes müssen wir ein Folienbild erstellen , in das ich ein Bild-Tag einfügen werde. Wählen wir Bild aus dem Bilderordner aus. Es wird ein Client auf IPG sein. Als Nächstes Folientext, in den ich einfügen werde. H, Element mit drei Überschriften, es wird ein wunderbares Produkt sein. Als Nächstes brauchen wir einen Absatz mit einem Tammy-Text. Außerdem benötigen wir einen weiteren Absatz , in den ich den Namen des Kunden einfügen werde, das H. Danach werde ich die Steuerelemente erstellen Lassen Sie uns öffnen. Deep wird Kontrollen sein. Und ich werde hier das I-Element einfügen, das ist ein fester FA-Pfeil nach links. Dann brauchen wir den Pfeil nach rechts. Und ich werde auch deine Punkte einfügen , die durch Span-Elemente erzeugt werden. Ordnung, also eigentlich haben wir hier ein kleines Problem, das wir hier hinzufügen müssen. Es wird solide sein. Jetzt werden die Telefon-Asmicons tatsächlich mit dem H-Demil-Markup angezeigt Wir sind unten. Lass uns weitermachen und anfangen, das CSS zu schreiben. Zunächst wähle ich wie üblich jedes Element aus und setze dann den Rand und setze beide auf Null. Als Nächstes stelle ich die Größe der Box auf das Rahmenfeld ein. Außerdem brauchen wir eine Telefonfamilie. Es wird das Telefon namens Can It sein, das wir auf der Google Phones-Website ausgewählt haben. Als Nächstes setze ich die Telefongröße des H-mil-Elements auf 62,5%, weil wir M als Maßeinheit eins verwenden werden, Ram entspricht zehn Pixeln, alle Elemente Als Nächstes nehme ich Sie von dem Bild. Nehmen wir 215 Ram, dann wird die Höhe 16 Ram sein. Dann wähle ich das Bild selbst aus und definiere es innerhalb der Höhe. Ich setze bei 200% die Höhe auf 100% und außerdem benötigen wir Objektfüße mit einem Deckwert Jetzt wurde das Bild kleiner. Lassen Sie uns weitermachen und beginnen, den Container anzupassen. Ich werde mit auf 100% setzen , dann wird die Höhe 100 Teil Höhe sein. Lass uns die Hintergrundfarbe ändern. Ich werde einen linearen Farbverlauf verwenden. Die erste Farbe wird 368661 sein. Dann wird die nächste 2964 sein. Wir haben hier einen schönen Hintergrund. Lassen Sie uns Flex-Bücher verwenden. Wir müssen den Inhalt zentrieren, indem wir das ausgerichtete Inhaltszentrum und das Zentrum für Einzelposten verwenden. Wie Sie sehen können, befindet sich der Inhalt also in der Mitte. Lassen Sie uns weitermachen und den Testimonial-Wrapper auswählen. Ich werde die Breite auf 95% setzen, dann die Höhe auf 90%. Als Nächstes benötigen wir eine Hintergrundfarbe Ich werde einen linearen Farbverlauf verwenden. Die erste Farbe wird RGBA sein, schwarze Farbe mit Opazität 0.7 Als nächstes brauchen wir wieder schwarze Farbe mit der Opazität 0.5 Mit der Opazität 0.6 Dann definiere ich die URL des Hintergrundbildes Wählen wir Bild aus dem Bilderordner aus . Als Nächstes definiere ich die Position des Sensors und wir brauchen auch keine Wiederholung. Schließlich werde ich die Hintergrundgröße auf Cover einstellen. Wie Sie sehen können, haben wir hier ein schönes und cooles Hintergrundbild für den Wrapper Als nächstes brauchen wir Box Shadow mit dem Wert 01, Bram Five Fram, und die Farbe wird RGBA sein, schwarze Farbe mit der Opazität 0,4 Wir haben hier einen schönen Als Nächstes werde ich mich um den Testimonial-Header kümmern. Lassen Sie uns die Position auf absolut setzen. Dann benötigen wir die relative Position für das übergeordnete Element, bei dem Testimonial-Wrapper handelt Ich setze die obere Position auf 5%, dann auf die linke Position auf 50%. Wir müssen das Element mit Transform Translate X mit dem Wert minus zentrieren Transform Translate X mit dem Wert 50% Als Nächstes müssen wir den Text in der Mitte ausrichten. Wir haben hier den Testimonial-Header. Lassen Sie uns das kopieren, wählen Sie es hier einfügen. Und wählen Sie H, Element mit drei Überschriften. Ich werde die Telefongröße auf zwei Ram einstellen. Dann wird das Telefon 300 wiegen. Außerdem brauchen wir Farbe für CCC. Wir haben hier das erste Überschriftenelement. Als Nächstes dupliziere ich diesen Code und ändere den Selektor, den wir hier benötigen. H ein Überschriftenelement. Stellen wir die Telefongröße auf fünf Ram ein. Dann füge ich hier eine Texttransformation mit dem Wert Großbuchstaben ändere auch die Farbe, es wird weiß sein. Dann benötigen wir einen Buchstabenabstand mit dem Wert 0,4 Ram. Hier haben wir die Überschrift. Als Nächstes entferne ich die Telefon-Symbole. Lassen Sie uns die Telefongröße auf 1,6 RAM einstellen. Dann die Farbe, es wird RTB 255 bis 2062 sein, es wird gelbe Farbe sein Lassen Sie uns den Spielraum auf 0,5 Ram setzen. Wir haben hier die Sterne. Sie sehen ziemlich gut aus. Als Nächstes kümmere ich mich um die Steuerung. Lass uns auf fünf setzen, dann wird die Höhe fünf Ram sein. Als nächstes brauchen wir eine Hintergrundfarbe. Ich werde die Hintergrundfarbe 27854 einstellen. Dann stelle ich Opacity 2.6 ein. Als Nächstes benötigen wir einen Randradius von 50%, wir benötigen abgerundete Steuerelemente Dann setze ich Display auf Flex, weil wir die Pfeile mit Justify Content Center und Line Item Center zentrieren müssen die Pfeile mit Justify Content Center und Line Item Center zentrieren Wie Sie sehen können, befinden sich die Pfeile in der Mitte der Kreise. Lassen Sie uns die Schriftgröße hinzufügen und daraus drei Ram machen. Dann brauchen wir Farbe. Es wird 444 sein. Außerdem werde ich die Position auf absolut setzen. Die Position wird 50% sein . Außerdem müssen wir Y transformieren um die Pfeile vertikal mit dem Wert -50% zu zentrieren. Dann ändern wir den Cursor und machen ihn zum Zeiger Wir haben hier die Steuerung. Jetzt müssen wir Steuerelemente mit MPH und Chart-Selektoren auswählen und die linke Position für den ersten Pfeil auf 15% setzen . Lassen Sie uns diesen Code duplizieren Wählen Sie den zweiten Pfeil und ändern Sie die Position. Wir brauchen die richtige Position von 15% Wie Sie sehen können, sind die Pfeile gut ausgerichtet. Als Nächstes werde ich mich um die Punkte kümmern. Lassen Sie uns Span-Elemente auswählen. Zunächst definiere ich „wir“ und „Höhe“. Lassen Sie uns beide auf einen Ram setzen. Dann brauchen wir eine Hintergrundfarbe. Es wird CC sein. Dann benötigen wir den Randradius , um die Elemente um 50% abzurunden. Im Moment sind Punkte nicht sichtbar. Lassen Sie uns die Position für das übergeordnete Element auf absolut setzen. Dann werden Pots und Position 10% als Let Position sein, ich sage es auf 50% Und dann müssen wir die Elemente mit transform translate x -50% zentrieren . Als nächstes brauchen wir Flexbox Hier haben wir die Punkte. Wir brauchen etwas Abstand zwischen ihnen. Machen wir das mit einer Marge von 0,5 rm. Außerdem werde ich den Cursor auf den Zeiger setzen. Jetzt sehen die Punkte ziemlich gut aus. Fügen wir dem ersten Spin-Element eine aktive Klasse hinzu. Wählen Sie dann das aktive Spin-Element aus. Stellen Sie die Breite auf 1,5 ein, dann wird die Höhe erreicht. 1,5 RAM. Wir brauchen eine weiße Hintergrundfarbe. Wie Sie sehen können, ist der Punkt größer. Wir müssen die Elemente mithilfe von Einzelposten vertikal zentrieren. Mitte, okay, das war's jetzt mit den Punkten. Als Nächstes kümmere ich mich um die Folie. Lassen Sie uns Testimonials mit 55% auswählen , dann wird die Höhe 50 Ram betragen nächsten Minute stelle ich die Position absolut ein, dann werde ich die Position auf 50% setzen dann wird die linke Position auf 50% gesetzt. Und wir müssen das Element mithilfe von Transform zentrieren, um die Werte wieder -50% zu übersetzen . Als Nächstes füge ich Es wird 0,1 m durchgehend sein und die Farbe wird weiß sein Hier haben wir den Rand, lassen Sie uns die Folie ein paar Mal duplizieren. Ich werde hier einige Änderungen vornehmen. Wir müssen den Namen des Bildes ändern, da der Name des Kunden Mary Brown sein wird. Als Nächstes brauchen wir Kunde drei. Der Name ist Nick Jones und er wird 27 sein. Wir brauchen Kunde vier, der Name ist Brown. Wir ändern das H., das wir hier haben. Letztes Bild, Kunde fünf, und der Kunde wird John Smith sein, 25. Wie Sie sehen können, wird diese Folie als Nächstes angezeigt . Ich wähle den Schieberegler, setze die Höhe auf 100%. Dann wird die Breite 500% betragen. Wir müssen den Display-Flex einstellen, sodass die Folien horizontal nebeneinander angeordnet werden Als Nächstes wähle ich die Folie aus, die auf 20% eingestellt ist. Es wird 100% des Wrappers ausmachen Ich bin im fünften Teil des Wrappers. Lassen Sie uns den Folienhintergrund auswählen und die Breite auf 70% setzen . Die Höhe wird 65% betragen . Ich werde die Hintergrundfarbe ändern Lassen Sie uns hier diese grüne Farbe verwenden. Als Nächstes setze ich die Position auf absolut. Wir benötigen die relative Position für das übergeordnete Element. Dann definiere ich, dass die Position 50% sein wird, die linke Position wird 50% sein . Und wir müssen transformieren, mit den Werten -50% und wieder -50% übersetzen . Hier haben wir den Hintergrund für diese Folie Fügen wir hier oder den Radius hinzu. Es werden zwei Ram sein. Dann benötigen wir Opazität 0,7 Danach wähle ich den Folieninhalt Lassen Sie uns den Code von hier abrufen und ihn für den Folieninhalt einfügen Ändere die Speckfarbe, sie wird weiß sein. Außerdem werde ich die Opazität loswerden. Dann brauchen wir Display Flex. Außerdem müssen wir hier den Inhalt mit dem Werteabstand dazwischen rechtfertigen , wir brauchen Leerzeichen zwischen den Flex-Elementen. Lassen Sie uns hier auch ein Einzelpostenzentrum hinzufügen. Und dann müssen wir mit Padding Platz schaffen, 0,5 Ram. Als Nächstes drehe ich den Hintergrund mit der Funktion „Z drehen Und der Wert wird minus sechs Grad sein. Jetzt haben wir hier viel bessere und schöne Ergebnisse. Als Nächstes kümmere ich mich um die. Phonosomicon, setzen wir die Telefongröße auf 12 Bram, dann wird die Farbe grün Außerdem werde ich die Position auf absolut setzen . Wir haben hier die Anführungszeichen und wir müssen sie positionieren. Lassen Sie uns zuerst das Phonosomicon mit n-ten Kind auswählen, dass die beiden Positionen -20% sein werden. Was die linke Position betrifft, werde ich sie auf 10% setzen . Lassen Sie uns diesen Code duplizieren Für das zweite Phonosomicon benötigen wir die untere Position -20% und die rechte Position 10%. Wie Sie sehen können, sind die Anführungszeichen gut platziert. Lassen Sie uns weitermachen und uns um den Folientext kümmern. Lassen Sie uns die Breite auf 70% setzen , dann kümmere ich mich um das Bild. Lassen Sie uns den Randradius auf 3m03 Ram Null setzen. Jetzt sieht das Bild ziemlich gut aus. Als Nächstes wähle ich ein Folienbild mit Pseudoelementen nach Außerdem benötigen wir ein Folienbild mit einem Pseudoelement vor dem Objekt. Wir müssen einen schönen Rand erstellen. Setzen wir Quantum auf leer. Dann müssen wir 100% sein die Höhe wird 100% sein. Dann müssen wir es auf absolut setzen. Wir benötigen die relative Position für das übergeordnete Element, das das Folienbild ist. Als Nächstes setze ich den Rand auf 0,2 Ram Solid. Und die Farbe wird RTB sein, eine schwarze Farbe mit Opazität 0,4. Als nächstes benötigen wir Randradius drei, Ram 03 Ram Null Es ist wie der Randradius des Bildes. Als Nächstes müssen wir uns um die Positionen der Nachher - und Vorher-Elemente kümmern . Fangen wir mit dem Nachher-Element an. Die beiden Positionen werden minus ein Ram sein. Dann brauchen wir, dass die linke Position -0,5 Ram sein wird. Lassen Sie uns diesen Code duplizieren und den Selektor ändern, den wir vor dem Element benötigen Lassen Sie uns Töpfe setzen und zwei minus einen Ram positionieren. Und die richtige Position wird -0,5 Ram sein. Okay, jetzt sehen die Elemente gut aus. Wir brauchen hier die Indexeigenschaft minus eins. Jetzt haben wir hier diesen schönen und coolen Fakt der Grenze. Lassen Sie uns den Folientext mit den drei Überschriftenelementen H auswählen. Ich werde die Telefongröße auf 2,5 RAM einstellen. Dann wird das Telefon 300 wiegen. Ich setze die Farbe auf 111, dann setze ich den Rand unten auf einen RAM. Lassen Sie uns weitermachen und den Absatz anpassen. Wählen Sie den Folientext mit dem Selektor aus. Ich werde die Telefongröße auf 1,4 RAM einstellen. Das Telefongewicht wird 300 betragen. Außerdem muss die Farbe RGB 3.040,35 sein . Dann setze ich Zeilenhöhe auf 1,2. Außerdem benötigen wir Ihren Rand Unten werden es drei Ram sein. Wie Sie sehen können, sieht der Absatz ziemlich gut aus. Lassen Sie uns mit 235 Ram beginnen. Als Nächstes wähle ich Slide Text Client aus. Lassen Sie uns die Telefongröße auf 21,8 Ram einstellen. Was die Farbe angeht, werde ich RTP 11, 83, 47 verwenden. Der Name und die. Er sieht ziemlich gut aus. Eigentlich werde ich diese Grenze von hier aus los. Wir brauchen es nicht mehr. Jetzt müssen wir anfangen, das Javascript zu schreiben. Lassen Sie uns eine Variable erstellen. Es wird Slider sein. Ich werde das Element mit der Abfrageselektor-Methode auswählen. Fügen wir den Schieberegler für den Klassennamen ein. Als Nächstes benötigen wir ein paar verschiedene Variablen. Die zweite werden Folien sein. Und wir müssen Folien mit der Methode Query Selector All auswählen Folien mit der Methode Query Selector All Lassen Sie uns den Klassennamen ändern. Die nächste Variable wird der Linkspfeil sein. Steuern wir den Linkspfeil. Außerdem brauchen wir hier den Rechtspfeil. Lassen Sie uns diese Codezeile duplizieren. Wechsle von links nach rechts. Wir brauchen hier Kind zwei. Alles klar, jetzt füge ich dem Rechtspfeil mit Click-Event sogar einen Listener Dann brauchen wir die Cope-Funktion, die ausgeführt wird, sobald wir auf den Rechtspfeil klicken Ich werde dem Slider Stil hinzufügen. Es wird mit der Funktion Value Translate X transformiert . Ich werde mich einmischen -20% Als nächstes brauchen wir einen Übergang für den Slider mit allem und die Dauer wird 0,8 Sekunden betragen Außerdem werde ich Cubic P1001 verwenden. Wenn ich auf den Rechtspfeil klicke, bewegt sich dieser Schieberegler nach links Als Nächstes erstelle ich eine neue Variable, es wird der Folienindex sein. Und ich werde es standardmäßig auf Null setzen und den Code, den wir hier brauchen, duplizieren. Pfeil nach links. Ich füge hier den Folienindex hinzu und setze ihn auf Folienindex minus eins. Dann übersetzen wir x. Ich übergebe hier den Folienindex multipliziert mit -20%. Kopieren wir diesen Code Fügen Sie ihn hier für den Rechtspfeil ein, den wir hier brauchen, plus eins. Wenn ich jetzt auf das klicke, funktioniert der Slider einwandfrei. Sobald wir die letzte oder erste Folie erreicht haben, müssen wir den Slider beenden. Wir brauchen hier einen Folienindex, der größer als Null ist. Wir brauchen ein Fragezeichen, Folienindex minus eins oder Null. Wir brauchen hier eine ähnliche Aussage. Folienindex weniger als Folienlänge minus ein oder dann Fragezeichen. Und wir müssen den Folienindex plus eins oder die Folienlänge minus eins berechnen Sobald wir die letzte Folie erreicht haben, der Slider nicht mehr funktioniert der Slider nicht mehr und das Gleiche gilt für die erste Folie Okay? Jetzt brauchen wir Overflow Hidden , um den Rest der Folien zu verstecken Wenn ich jetzt klicke, funktioniert der Slider perfekt. Jetzt müssen wir uns um die Punkte kümmern. Lassen Sie uns eine Variable erstellen. Es wird eine Punkteverpackung sein. Wählen Sie dieses Element aus. Als Nächstes brauchen wir, ich werde deine Zeitspanne überschreiten. Außerdem müssen wir abfragen, alles auswählen. Ich werde die Punkte mit der Futtermethode durchschauen. Wir brauchen Punkt und Index. Die Parameter, die ich hinzufügen werde , höre sogar auf das Punkt-mit-Klick-Ereignis. Und außerdem müssen wir hier die Callback-Funktion übergeben. Lassen Sie uns den Folienindex auf Index setzen, ich meine den Parameter Als Nächstes gehe ich zu Dots Active verwende die Abfrageselektormethode Ich werde Active aus der Klassenliste entfernen. Fügen wir hier dieselbe Aussage hinzu. Außerdem werde ich zu den aktiven hinzufügen. Wenn ich jetzt auf das klicke, funktioniert der Slider. Jetzt müssen wir die Punkte bearbeiten. Sobald wir auf die Controller geklickt haben, fügen wir hier Dots Wrapper-Kinder Wir müssen hier den Folienindex hinzufügen. Ich füge aktiv zur Klassenliste hinzu. Dann kopiere ich diesen Code von hier und füge ihn für beide Pfeile hinzu. Wenn ich jetzt klicke, funktionieren die Punkte einwandfrei. Eigentlich funktioniert alles gut. Als Nächstes werde ich eine Variable namens set index erstellen, die eine Funktion haben wird. Ich werde diesen Code von hier holen und eine Funktion hinzufügen, auch wir brauchen diesen Code. Dann werde ich dieses Codeende loswerden , das als Funktionssatzindex bezeichnet wird. Ich werde dasselbe für die Pfeile nach links und rechts machen. Rufen wir Function Set Index auf. Jetzt sieht der Code viel einfacher aus. Eigentlich funktioniert alles perfekt und wir sind mit diesem Projekt fertig. Hoffentlich war es interessant und du hast ein paar neue Dinge gelernt. Lassen Sie uns weitermachen und mit dem nächsten Projekt fortfahren. 28. Project 23 - Animiertes Kontaktformular: Hallo und willkommen zu unserem nächsten Projekt. In diesem Abschnitt werden wir ein animiertes Kontaktformular erstellen. Das Projekt wird auf der Grundlage von HTML, CSS und Javascript erstellt . Wie Sie sehen können, haben wir hier einen animierten Kreis in der Mitte der Seite. Wenn ich darauf klicke, wird das Kontaktformular angezeigt. Es besteht aus ein paar verschiedenen Elementen. Wir gehen hier zu den Eingabefeldern für Name und E-Mail mit diesem schönen Fokuseffekt. Dann haben wir hier einen Textbereich für die Nachricht. Unten sehen Sie die Schaltfläche, die diesen schönen und coolen Hover-Effekt hat In der oberen rechten Ecke des Kontaktformulars sehen Sie die Schaltfläche zum Schließen von X. Wenn ich darauf klicke, wird das Kontaktformular geschlossen. Okay, ich denke, das Projekt wird interessant und nützlich sein. Lass uns weitermachen und anfangen. Ich habe einen neuen Ordner auf dem Desktop erstellt. Lassen Sie uns weitermachen und es im VS-Code öffnen und dann unsere Arbeitsdateien für HTML erstellen. Dann brauchen wir eine Datei für CSS, also werde ich eine Skript-JS-Datei für Java-Skript erstellen. Lassen Sie uns die Index-HTML-Datei öffnen und das grundlegende HTML-Dokument erstellen. Ich werde den Titel ändern. Es wird ein Kontaktformular sein. Als Nächstes werde ich die CSS-Datei verknüpfen. Außerdem benötigen wir einen Link für die Java-Datei. Lassen Sie uns weitermachen und das Projekt über den Live-Server im Browser öffnen den Live-Server im Browser Außerdem müssen wir den Browser und den Editor so nebeneinander platzieren . Als Nächstes werde ich die Google Phones-Website besuchen. Da wir während des gesamten Projekts Google-Telefone verwenden werden, werde ich nach einem Telefon namens Poppins suchen Lassen Sie uns ein paar verschiedene Stile auswählen, dann kopiere ich den Link und füge ihn in das Head-Element ein Als Nächstes nehme ich das Telefon, irgendeinen CDN-Link, weil wir Telefon verwenden werden, einige Symbole, die wir brauchen, um das Link-Tag zu öffnen und das CDN in das H-Referenzattribut einzufügen Okay, wir sind bereit, mit dem Schreiben des HTML-Markups zu beginnen. Wir brauchen einen Container, der den gesamten Inhalt umhüllt. Als Nächstes benötigen wir einen Form-Wrapper. Ich werde die Schaltfläche öffnen, während die Klasse BTN schließt. Als Nächstes müssen wir hier x hinter dem Button platzieren. Ich werde ein Formular mit dem Klassennamen Kontaktformular erstellen . Lassen Sie uns das Action-Attribut innerhalb des Formularelements loswerden . Ich werde H ein Überschriften-Tag zusammen mit der Überschrift des Klassenformulars platzieren . Der Text lautet Kontaktieren Sie uns. Als Nächstes brauchen wir die Entwicklung, die aus Inputgruppen bestehen wird. Fügen wir Ihre Eingabegruppe ein, in die ich ein Label für den Namen einfügen werde . Ich werde hier eine Feldbezeichnung hinzufügen. Als Nächstes füge ich Ihr Eingabe-Tag mit dem Typ Text ein, auch den Klassennamen. Es wird ein Feld sein. Dann müssen wir hier ein Platzhalterattribut mit dem Text hinzufügen Platzhalterattribut mit dem Text Gib deinen Namen ein. Ich werde die Eingabegruppe duplizieren. Wir brauchen dasselbe für die E-Mail. Lass uns den Text ändern. Also müssen wir hier Ihre E-Mail-Adresse neben dem Textfeld einfügen eingeben Ihre E-Mail-Adresse . Zuerst brauchen wir eine Entwicklung mit der Klasse Textbereichsgruppe. Und dann füge ich dein Etikett für die Nachricht ein. Der Klassenname wird eine Feldbezeichnung sein. Als Nächstes füge ich einen Textbereich ein. Mit dem Klassennamenfeld. Außerdem benötigen wir ein Platzhalterattribut mit dem Text, Ihre Nachricht hier. Okay, danach müssen wir Batson einreichen. Mit dem Typ Batson. Ich werde hier den Klassennamen hinzufügen, es wird Submit PTN sein Dann füge ich hier hinzu , was im Span-Element Submit platziert wird Außerdem benötigen wir ein Element , das direkt hinter dem Button ein fester FA-Pfeil sein fester FA-Pfeil wird. Ich werde hier einen Absatz mit dem Text für jede Frage, einen Konflikt oder ein 2047-Callcenter platzieren jede Frage, einen Konflikt oder ein 2047-Callcenter Ich werde hier Span-Elemente und eine Schein-Telefonnummer hinzufügen Span-Elemente und eine Schein-Telefonnummer Eigentlich sind alle Elemente erstellt und jetzt können wir anfangen, das CSS zu schreiben Wie üblich wähle ich jedes Element aus und setze dann den Rand und das Padding für beide auf Null Als Nächstes müssen wir die Größe der Boxen definieren. Es wird ein Randfeld sein, da ich Linie zu keiner Linie ziehen werde. Dann werde ich die Telefonfamilie definieren. Es wird Poppins San Serif sein. Die Standardstile werden angewendet. Als Nächstes setze ich die Telefongröße des HTM-Elements auf 62,5%. Um M als Maßeinheit eins zu verwenden, entspricht m zehn Pixeln Danach wählen wir den Container aus. Ich definiere die Breite, sie wird 100% sein, dann wird die Höhe 100 Porthöhe sein. Ich werde die Hintergrundfarbe ändern, es wird EEE sein Als Nächstes wähle ich Form Wrapper, legen wir 60% fest, dann wird die Höhe 70 sein Als Nächstes benötigen wir eine Hintergrundfarbe, sie wird weiß sein Hier haben wir den Form Wrapper. Wir brauchen eine absolute Position. Dann werden die beiden Positionen 50% sein. Die linke Position wird 50% sein. Und um das Element zu zensieren, müssen wir translate -50% und erneut -50% transformieren. Wie ich Die linke Position wird 50% sein . Und um das Element zu zensieren, müssen wir translate -50% und erneut -50% transformieren sehen kann, befindet sich der Formular-Wrapper in der Mitte der Als Nächstes füge ich hier einen Schatten mit dem Wert 03 Ram, six Ram Und die Farbe wird RGBA sein, schwarze Farbe mit einer geringeren Opazität, 0,1. Wir haben hier einen schönen Schatteneffekt Lassen Sie uns den Randradius auf einen Ram setzen , damit die Ecken Jetzt sieht die Schaumstoffhülle besser aus. Als Nächstes wähle ich BTN schließen und setze die Position auf Dann werden die beiden Positionen -1,5 Fram sein. Die richtige Position wird ebenfalls -1,5 Fram sein. Lassen Sie uns die Breite auf drei Ram setzen. Dann wird die Höhe bei drei Rammen liegen. Wir brauchen eine Hintergrundfarbe, sie wird weiß sein. Hier haben wir den X-Schließknopf. Lass uns Grenze setzen 2.1 Ram verkauft. Die Farbe wird EEE sein. Außerdem benötigen wir einen Randradius um das Element abzurunden. Als Nächstes füge ich hier einen Kastenschatten mit dem Wert 0,1 0,1 m hinzu. Die Farbe wird RGBA sein, schwarze Farbe mit der Opazität 0,1 Außerdem brauchen wir hier einen Zeiger Und dann werde ich den Hover-Effekt erzeugen. Lass uns die Schaltfläche auswählen. Mit dem Mauszeiger ändere ich die Hintergrundfarbe Es werden zwei vor zwei sein. Dann muss die Farbe weiß sein. Ich werde den Rand auf 0,1 Ram Solid setzen und die Farbe wird weiß sein. Fügen wir hier einen Übergang hinzu, um den Effekt glatter zu machen. Wenn ich den Mauszeiger über die X-Taste zum Schließen bewege, kommen wir hierher. Netter und cooler Effekt. Lassen Sie uns weitermachen und das Kontaktformular auswählen. Ich stelle die Breite auf 100% ein, dann die Höhe auf 100%. Stellen wir den Display-Flex ein. Dann muss die Flex-Richtung die Spalte sein, wir müssen die Elemente vertikal ausrichten. Dann müssen wir den Inhalt begründen. Es wird Platz sein, sogar um einen Eventraum zwischen den flexiblen Elementen zu schaffen. Außerdem werde ich das Putting auf der linken und rechten Seite auf 0,15 Ram setzen linken und rechten Seite auf 0,15 Ram Lass uns weitermachen und die Überschrift formen. Ich werde die Formulargröße auf Formular setzen. Dann wird die Farbe 333 sein. Hier haben wir die Überschrift. Als Nächstes wähle ich Eingabegruppen aus. Stellen wir auf 100% ein. Dann brauchen wir Display Flex. Ich setze „ Inhalt rechtfertigen“ auf ein Leerzeichen dazwischen. Außerdem brauchen wir unten einen Spielraum, es werden drei Ram sein. Die Eingabefelder sind ausgerichtet. Als Nächstes wählen wir die Eingabegruppe aus. Wir brauchen eine Breite von 40 RAM, dann wird die Höhe sechs sein. Als Nächstes wähle ich die Feldbezeichnung aus. Lassen Sie uns die Größe auf 1,4 Ram setzen. Die Farbe wird 888 sein. Danach wähle ich Eingabeelement mithilfe des Klassenfeldes aus. Lassen Sie uns auf 100% setzen, dann wird die Höhe 100% sein . Als nächstes brauchen wir einen Rahmen, es wird keiner sein. Außerdem setze ich den unteren Rand 2,2 m fest und die Farbe wird BBB sein Wir werden nur einen Rand am unteren Rand haben. Als Nächstes benötigen wir eine Telefongröße von 1,8 RAM. Dann setze ich Pudding auf 0,02 Ram und Null. Das war's mit dem Eingabeelement. Als Nächstes benötigen wir ein Feld mit Platzhalterattribut. Ich werde die Farbe ändern, machen wir 222 draus. Die Farbe des Platzhalters wurde geändert. Als Nächstes wähle ich Textbereichsgruppe aus. Lassen Sie uns den Display-Flex einstellen. Wir brauchen Flex-Richtung. Es wird eine Kolumne sein. Danach wähle ich die Textbereichsgruppe aus, gefolgt vom Textbereich. Ich werde die Höhe auf 12 Ram setzen. Wir brauchen hier einen Rand unten. Es wird 0,2 Ram fest sein und die Farbe wird BBB sein Dann brauchen wir oben eine Polsterung, es wird ein Ram sein Ich werde die Funktion zur Größenänderung deaktivieren. Wir müssen die Größe auf „Keine“ setzen, jetzt können wir den Textbereich nicht mehr rezitieren Danach wähle ich Submit BTN, Let's set with 18 Ram, dann wird die Höhe auf fünf Ram gesetzt Dann brauchen wir eine Hintergrundfarbe. Ich gehe zu 72 f45 A. Als Nächstes entfernen wir den Standardrahmen . Lass uns keins draus machen Ich werde das Element mit einem Randradius von drei Ram abrunden. Ändere die Farbe. Es wird weiß sein, wie wir es brauchen. Die Schriftgröße soll 1,5 Ram sein. Jetzt sieht der Button viel besser aus. Als nächstes brauchen wir Box Shadow. Es wird 0,3 Ram sein, ein Ram, und die Farbe wird 250-57-0590 sein und die Opazität 0,5 Außerdem brauchen wir den Cursor Okay, der Button sieht also ziemlich gut aus. Als Nächstes wähle ich Submit BTN aus, gefolgt von diesem Element Lassen Sie uns die Position auf absolut setzen. Dann benötigen wir die relative Position für das übergeordnete Element , in diesem Fall die Schaltfläche selbst. Stellen wir die Position auf 50% ein. Dann beträgt die linke Position fünf Frames. Dann müssen wir Y -50% transformieren , um das Element vertikal zu zensieren Als Nächstes wähle ich „BTN einreichen“, gefolgt von dem Symbol Die Schriftgröße wird 1,8 Ram betragen. Dann wird die Position absolut sein. Wir müssen die Position auf 50% einstellen, dann wird die richtige Position 4,5 Ram sein. Außerdem müssen wir das Element vertikal zensieren , indem wir Transform Translate Y -50% verwenden . Okay, danach werde ich den Hover-Effekt erzeugen Lassen Sie uns die Schaltfläche mit dem Mauszeiger auswählen. Beim Bewegen des Mauszeigers ändere ich die Hintergrundfarbe. Es wird 333 sein. Außerdem benötigen wir Box Shadow mit dem Wert 0,3 Ram, ein Ram. Und die Farbe wird RGBA sein, schwarze Farbe mit der Opazität 0,5 funktioniert einwandfrei. Wie Sie sehen können, müssen wir hier jetzt einen Übergang hinzufügen Wir haben einen schönen und coolen Schweben. Ich werde das Symbol verschieben Lassen Sie uns die Schaltfläche mit dem Mauszeiger abschicken, gefolgt vom Element. Ich werde mich ändern. Die richtige Position werden drei Ram sein. Ich verwende hier auch den Übergang mit der rechten Maustaste und die Dauer wird 0,5 Sekunden betragen. Sobald ich den Mauszeiger bewege, bewegt sich der Pfeil nach rechts. Und tatsächlich wird es diesen schönen und coolen Schwebeeffekt erzeugen Als Nächstes wähle ich den Kontakt für den Absatz unten Lassen Sie uns die Telefongröße auf 1,6 RAM einstellen. Dann wird die Farbe 888 sein. Als Nächstes wähle ich das Span-Element im Absatz aus. Lass uns die Farbe ändern. Ich werde hier Farbe 45 verwenden. Der Absatz sieht eigentlich ziemlich gut aus. Das nächste, was wir tun müssen, ist den Fokuseffekt zu erzeugen. Sobald wir uns konzentriert haben, müssen wir den Rand unten ändern . Ich meine die Farbe. Stellen wir sie auf einen Festkörper von 0,2 Ram ein, und die Farbe wird 45 sein. Ein nächster Übergang grenzt an den unteren Rand mit einer Dauer von 0,3 Sekunden. Außerdem müssen wir den Funktionsfokus und die Eingabefelder lockern , dann bekommen wir diesen netten und coolen Effekt Okay, danach wähle ich Feldfokus, gefolgt vom Platzhalterattribut Wir müssen den Platzhalter ausblenden, um das Feld zu fokussieren. Lassen Sie uns die Farbe auf transparent setzen. Und dann müssen wir die Farbe und die Dauer von 0,3 Sekunden ändern. Sobald wir uns konzentrieren, wird sich das Platzhalterattribut gut verstecken Jetzt müssen wir uns um die Animationen kümmern. Lassen Sie uns die Anzeige für den Telefon-Wrapper auf „Keine“ setzen. Ich werde der HTML-Datei neue Elemente hinzufügen. Nennen wir es Laden. Wir brauchen hier noch einen Deep-Loading-Hintergrund, den ich hier platzieren werde und der regelmäßig bei FA erscheinen wird. Fa-Umschlag. Als Nächstes werde ich diese Elemente stylen. Wählen wir Laden aus. Stellen Sie die Breite auf 100% ein, dann beträgt die Höhe 100%. Ich setze die Position auf absolut. Dann müssen wir auf Null setzen. Position Null benötigen wir Display Flex, um den Inhalt mithilfe von Justify Content Center und Align Items Center zu zentrieren. Das Element wird in der Mitte platziert. Als Nächstes wähle ich den Ladehintergrund aus. Lassen Sie uns die Breite definieren. Es werden 12 Ram sein. Dann wird die Höhe ebenfalls 12 Ram betragen. Ändern Sie die Hintergrundfarbe, verwenden Sie diese Farbe hier. Als Nächstes benötigen wir den Grenzradius. Es wird ein Kreis sein. Wir brauchen 50% Dann brauchen wir Box Shadow mit dem Wert von 01m3 Ram Die Farbe wird die Farbe sein , die wir kürzlich verwendet haben Als Nächstes wähle ich Elemente aus. Stellen wir den Wert auf 12 M ein. Dann wird die Höhe ebenfalls 12 Ram betragen. Als Nächstes brauchen wir Farbe. Es wird weiß sein. Dann werde ich das Telefon vergrößern. Stellen wir es auf M ein. Ändere die Position, ich werde sie absolut machen. Dann werden wir beide eine Position 50% haben, die linke Position wird 50% sein und wir müssen das Element zentrieren, um -50% und -50% übersetzen. Außerdem benötigen wir Display-Flex mit Justify Content Center und Line Item Center , um das Symbol innerhalb des Kreises zu zensieren das Symbol innerhalb des Gehen wir von Kurs zu Punkt. Okay, das Symbol sieht ziemlich gut aus. Jetzt werde ich CSS-Keyframes mit dem Namen Loading erstellen CSS-Keyframes mit dem Namen Loading bei 0% benötigen wir eine Breite von 12 Ram. Außerdem wird die Höhe 12 Ram betragen. Die Hintergrundfarbe wird F45 sein. Dann werde ich bei 50% die Breite erhöhen, es wird 14 Ram sein Dann brauchen wir die Höhe 14 Ram. Was die Hintergrundfarbe angeht, werde ich F616 verwenden Lassen Sie uns diese Kacheln auftragen. Wir brauchen Animation. Dann wird der Name der Keyframes die die Dauer laden, 0,9 Sekunden sein. Dann brauchen wir eine Locking-Out-Funktion. Außerdem müssen wir die Animation unendlich abspielen. Wie Sie sehen können, ist der Hintergrund animiert. Als Nächstes werde ich Javascript verwenden , um das Kontaktformular anzuzeigen. Lassen Sie uns eine neue Variable erstellen. Das wird so sein, lassen Sie uns das Symbol mithilfe der Abfrageselektor-Methode auswählen Wir müssen dir den Klassennamen beim Laden von I einfügen. Dann brauchen wir die zweite Variable , die nahe BTN sein wird Wählen wir dieses Element aus. Was die dritte Variable angeht, werde ich Container verwenden. Fügen wir Ihren Klassennamen-Container ein. Als Nächstes füge ich dem Symbol mit Click-Event einen Event-Listener Symbol mit Click-Event einen Event-Listener Außerdem müssen wir hier die Callback-Funktion übergeben , die ausgeführt wird, sobald wir auf das Symbol klicken Ich werde dem Container mit der Methode add eine neue Klasse hinzufügen und der Klassenname wird geändert Lassen Sie uns den Code duplizieren, den wir hier brauchen, schließen Sie PTN. Sobald wir auf das geschlossene PTN geklickt haben, müssen wir die Klassenänderung aus dem Container entfernen die Klassenänderung aus dem Jetzt ist es an der Zeit, den Klassenwechsel zu verwenden und wir müssen neue CSS-Stile definieren, die beim Klicken angewendet werden Wir brauchen hier Opazität Null, Sichtbarkeit unsichtbar. Als Nächstes füge ich hier Opazität Null und Sichtbarkeit Außerdem müssen wir den Formular-Wrapper mit Klassenwechsel auswählen. Und wir müssen das Formular mit Opacity One und Visibility sichtbar machen mit Opacity One und Visibility Sobald ich klicke, wird das Formular angezeigt. Und sobald wir auf die X-Schaltfläche klicken, wird es geschlossen. Jetzt füge ich hier einen Übergang hinzu, dessen gesamte Dauer 0,3 Sekunden betragen wird. Wir benötigen standardmäßig einen Übergang für das Laden mit einer gewissen Verzögerungszeit von 0,3 Sekunden. Als Nächstes brauchen wir einen Übergang für den Fam-Wrapper. Es wird 0,3 Sekunden sein und die Verzögerungszeit 0,3 Außerdem benötigen wir standardmäßig alle 0,3 Sekunden einen Übergang. Wenn ich jetzt klicke, wird das Formular mit Fa-Effekt angezeigt und eigentlich funktioniert alles einwandfrei. Ordnung, das ist es also. Lass uns weitermachen. 29. Project 24 - Website-Header mit Formularen: Ordnung, es ist also Zeit, weiterzumachen und mit der Erstellung unseres nächsten Projekts zu beginnen. In diesem Abschnitt werden wir einen Website-Header mit Registrierungs- und Anmeldeformularen erstellen. Das Projekt wird auf Basis von HTML, CSS und Javascript erstellt . Lassen Sie uns weitermachen und es schnell beschreiben. Wie Sie sehen können, haben wir hier diesen schönen und coolen Website-Header. Wir haben hier eine kleine Navigation mit zwei Links Home und Join. Dann haben wir ein Banner mit Überschriftenelementen und wir haben hier auch ein kleines Logo in der unteren rechten Ecke. Wenn ich auf Beitreten klicke, bekommen wir hier das Anmeldeformular. Wir haben hier ein paar verschiedene Eingabefelder mit zwei Buttons. Wenn ich auf den Login-Link klicke, gehen wir zum Login-Formular. Wie Sie sehen können, wurde der Button richtig geändert. Wenn ich auf Anmelden klicke, kehren wir zum Registrierungsformular zurück. Wenn ich auf Home klicke, gehen wir zum Banner Ok. Das passt also zu diesem Projekt. Ich hoffe, es wird interessant und nützlich sein und es wird Ihnen gefallen. Also lass uns weitermachen und anfangen. Ich habe einen neuen Ordner auf dem Desktop vorbereitet , in dem ich einen Ordner für die Bilder habe. Lassen Sie uns weitermachen und das Projekt im VS-Code öffnen. Dann werde ich unsere Arbeitsdateien für HTML erstellen. Dann brauchen wir eine Datei für CSS. Ich werde ein Skript erstellen. S. Lassen Sie uns die Index-HTML-Datei öffnen und die HTML-Struktur der Seite erstellen. Ich werde den Titel ändern, es wird eine Landingpage sein. Dann werde ich den Link zur CSS-Datei für die Java-Script-Datei verlinken . Ich füge hier den Dateinamen in das Quellattribut ein. Okay, lassen Sie uns weitermachen und das Projekt mit dem Live-Server-Paket für den Browser öffnen . Dann werde ich den Browser und den Editor nebeneinander platzieren . Also gut, ich werde das Phone Awesome CDN besuchen das Phone Awesome CDN weil wir einige tolle Telefon-Symbole verwenden Lass uns den Link von hier kopieren. Dann öffne ich das Link-Tag und füge hier das CDN ein. Als nächstes müssen wir die Google Phones-Website besuchen. Ich werde während dieses Projekts Google Phones verwenden. Lass uns weitermachen und nach einer Schrift namens Cabin suchen. Lassen Sie uns ein paar verschiedene Stile auswählen, dann den Link kopieren und in das Head-Element einfügen. Okay, wir sind bereit, mit der Erstellung des HDL-Markups zu beginnen. Zuallererst öffne ich das Deep-Tag, das wird der Container sein Als Nächstes füge ich hier ein, ein weiteres wird landen, in dem ich die Navigation mit dem Klassenteil erstellen werde. Ich werde hier eine Navigation hinzufügen , in der wir das Link-Element mit dem Cuss-Logo platzieren Ich platziere hier ein Span-Element mit dem Quas-Kreis. Als Nächstes füge ich hier einen weiteren Bereich mit dem Quas-Logo-Text Der Text wird Go anywhere lauten. Als Nächstes benötigen wir Link-Elemente. Ich meine die Knopfartikel. Der erste wird zu Hause sein. Den zweiten werde ich hier platzieren, Join. Lassen Sie uns über die Navigation sprechen. Als Nächstes werde ich das Banner erstellen. Innerhalb des Banners werde ich H ein Überschriftenelement platzieren. Es wird sein, neue Touren zu erkunden und überall hinzugehen. Ich platziere deine Span-Elemente und gehe an eine beliebige Stelle innerhalb der Spanne. Als Nächstes werde ich Kontakt herstellen. Wir benötigen hier H drei Überschriftenelemente mit dem Text. Fangen Sie für drei an. Als Nächstes füge ich hier ein Überschriftenelement ein und es wird ein neues Konto erstellen sein. Nach den Überschriftenelementen benötigen wir einen Absatz, in dem der Text bereits enthalten ist. Dann brauchen wir ein Link-Element , in das ich mich einloggen werde. Nach dem Absatz. Wir müssen Formularelemente mit dem Klassenkontaktformular erstellen . Lassen Sie uns das Action-Attribut innerhalb des Formulars loswerden. Ich werde eine Eingabegruppe erstellen , in der wir Eingabeelemente vom Typ Text mit dem Platzhalterattribut haben werden mit dem Platzhalterattribut Es wird der Vorname sein. Aber dann brauchen wir Elemente, bei denen die Klasse ein solider Benutzer ist. Lassen Sie uns die Eingabegruppe ein paar Mal duplizieren. Der zweite wird der Nachname sein. Was den dritten betrifft, werde ich Ihre E-Mail-Adresse einfügen. Wir müssen den Typ ändern. Es wird E-Mail sein wie beim Telefon oder ein paar Icons. Was den vierten Punkt angeht, den wir hier brauchen, Passwort. Lass uns den Typ ändern. Es wird ein Passwort sein, das gesperrt werden muss. Danach werde ich eine PTN-Gruppe erstellen , in der wir zwei verschiedene Schaltflächen haben werden Lassen Sie uns eine Schaltfläche mit dem Klassenkontakt BTN erstellen dem Klassenkontakt BTN und ich werde hier auch das Typattribut hinzufügen. Als Nächstes wird es die Schaltfläche sein. Ich werde hier die Änderungsmethode einfügen. Was die zweite Schaltfläche betrifft, werde ich hier Konto erstellen hinzufügen. Okay, das war's mit dem Formular. Lassen Sie uns unten ein Logo erstellen. Alles ist vorbereitet und wir können tatsächlich anfangen , das CSS zu schreiben. Ich werde jedes Element mit einer Masterdisk auswählen. Dann setzen wir Margin und Padding, beide auf Null Als Nächstes definiere ich die Eigenschaft für die Größe der Box Es wird die Rahmenbox sein Dann brauchen wir, dass es keine Textdekoration gibt. Außerdem werde ich die Gliederung auf „Keine“ setzen. Abschließend werde ich die Telefonfamilie definieren. Es wird Cabin Sanerif sein. Als Nächstes definiere ich die Telefongröße. Als Nächstes definiere ich die Telefongröße des H-On-Elements. Ich werde es auf 62,5% setzen um m als Maßeinheit zu verwenden In diesem Fall entspricht ein m zehn Pixeln. Danach kümmern wir uns um den Container. Ich werde die Breite definieren. Es wird 100% sein. Was die Höhe angeht, werde ich sie auf 100 VH einstellen Ich meine die Höhe des Viewports. Lass uns die Hintergrundfarbe ändern. Es wird 525561 sein. Als Nächstes stelle ich das Display auf Flex. Wir werden den Inhalt mithilfe von Justify Content Center und einem Einzelpostencenter in die Mitte verschieben mithilfe von Justify Content Center . Wie Sie sehen können, wird der Inhalt in der Mitte der Seite platziert. Als Nächstes wählen wir Landing aus. Ich werde innerhalb der Höhe definieren. Die Breite wird 95% betragen. Was die Höhe angeht, werde ich sie auf 90% setzen Dann müssen wir den Hintergrund definieren. Lassen Sie uns den linearen Farbverlauf verwenden. Die Richtung des Übergangs wird von zwei Rechten bestimmt. Dann brauchen wir die RGB-Farbe 309-40-2505 Wir brauchen hier Prozentwert 40% Dann wird die nächste Farbe RGBA 309-40-2505 sein . Dieselbe Farbe, aber mit Opazität 0,8 Als nächstes müssen wir die Opazität 0,8 Als nächstes müssen wir den Prozentwert 40% Dann wird die nächste Farbe RGBA 309-40-2505 sein. Dieselbe Farbe, aber mit Opazität 0,8 Als nächstes müssen wir die URL für das Hintergrundbild definieren. Lassen Sie uns ein Bild aus dem Bilderordner auswählen. Dann brauchen wir die Mitte der Position und keine Wiederholung. Außerdem müssen wir die Eigenschaft „ Hintergrundgröße“ mit dem Wert „Cover“ definieren . Okay, wir haben hier diesen schönen und coolen Hintergrund für die Landung. Fügen wir den Grenzradius für die Landung hinzu, machen wir daraus zwei Ram. Außerdem benötigen wir Box Shadow mit den Werten 01 Ram, fünf Ram. Und die Farbe wird RGBA sein, schwarze Farbe mit der Opazität 0,4 In Ordnung, als Nächstes wählen wir Banner Ich werde es mit „Keine anzeigen“ ausblenden, dann wähle ich Kontakt aus und verberge es ebenfalls Jetzt kümmern wir uns um die Navigation. Ich werde auswählen, jetzt setzen wir die Position auf absolut. Dann benötigen wir die relative Position für das übergeordnete Element. Als Nächstes setze ich die Position auf Null. Dann wird die linke Position Null sein. Als Nächstes benötigen wir Breite, sie wird 30% sein , Höhe wird 12:00 Uhr sein . Als Nächstes ändere ich die Hintergrundfarbe. Es wird für eine Weile rot sein. Hier haben wir die Navigation. Lassen Sie uns die Hintergrundfarbe loswerden. Als Nächstes brauchen wir Navigation. Ich werde die Breite auf 100% setzen , dann die Höhe auf 100%. Lassen Sie uns Anzeige auf Flex setzen und wir müssen den Inhaltsabstand dazwischen rechtfertigen. Richten Sie die Elemente außerdem mittig aus, um die Elemente vertikal zu zentrieren. Als Nächstes schaffe ich etwas Platz mit Padding, Zero Fi Frame, die Links sind gut ausgerichtet Kümmern wir uns um das Logo. Ich werde das Display auf Flex stellen. Als Nächstes brauchen wir Circle. Machen wir uns auf den Weg mit drei Ram. Dann wird die Höhe drei Ram betragen. Ich werde die Hintergrundfarbe ändern. Die Farbe wird 1d95 sein, es ist eine blaue Dann setzen wir den Randradius auf 50%. Damit der Kreis auch entsteht, benötigen wir einen Rand auf der rechten Seite, einen Hier haben wir den Kreis. Als Nächstes wähle ich Text aus. Lassen Sie uns die Größe auf zwei Ram setzen. Das Telefon wird 400 wiegen, wodurch auch etwas Abstand zwischen den Buchstaben entsteht. Als nächstes brauchen wir Farbe. Es wird weiß sein. Hier haben wir den Text. Ich werde sie mit dem Align Items Center in der Mitte ausrichten. Jetzt sind das Logo und der Text gut ausgerichtet. Als Nächstes werde ich mich um den Artikel kümmern. Lassen Sie uns die Schriftgröße auf 1,6 Ramon setzen. Das Gewicht wird gewagt sein. Außerdem brauchen wir hier Farbe 6967. Hier haben wir die Navigationspunkte. Lassen Sie uns das Navigationselement mit dem Mauszeiger auswählen. Ich werde die Farbe ändern, wenn ich mit der Maus darüber fahre. Es wird CCC sein. Und wir brauchen auch einen Übergang, um die Hover-Effekte flüssiger zu machen Sobald ich mit der Maus darüber fahre, ändern die Nova-Gegenstände ihre Farbe. Als Nächstes werde ich mich um das Banner kümmern, das gerade versteckt ist Lassen Sie uns die Position auf absolut setzen. Dann müssen wir positionieren, es wird 30% sein, dann wird die linke Position 5% betragen, das Banner ist ausgerichtet. Als Nächstes entferne ich das Element H mit einer Überschrift. Lassen Sie uns die Schriftgröße auf fünf setzen, dann wird das Telefongewicht 300 sein. Ändere die Farbe, ich mache sie weiß. Als Nächstes werde ich das Span-Element entfernen. Wir brauchen einen Display-Block. Dann werde ich die Telefongröße erhöhen. Es werden sieben Ram sein. Dann brauchen wir die Schriftstärke. Stellen wir es fett ein. Ich werde den Text in der Mitte ausrichten und dann den Text in Großbuchstaben umwandeln. Als Nächstes ändere ich die Farbe. Es wird blau sein. Außerdem brauchen wir einen Spielraum an der Spitze. Stellen wir es auf sechs Ram ein. Zum Schluss füge ich noch einen Schatteneffekt hinzu. Lassen Sie uns den Textschatten auf 01 Ram setzen. Drei Ram und die Farbe wird schwarz mit einer Deckkraft von 0,2 sein . Okay, das Banner sieht also ziemlich gut Als Nächstes füge ich hier für eine Weile keine Anzeige hinzu, weil wir uns um den Kontaktbereich kümmern Lassen Sie uns Display None von hier aus loswerden. Stellen Sie Position zwei ein, absolut, dann müssen wir die Position auf 25% setzen, dann wird die linke Position auf 5% gesetzt. Wie Sie sehen können, ist das Formular gut platziert. Dann brauchen wir Kontakt H drei. Lassen Sie uns die Schriftgröße auf 1,6 Ram setzen, die Texttransformation. Es wird in Großbuchstaben geschrieben. Ich werde die Farbe ändern, lass uns diese graue Farbe verwenden. Lassen Sie uns diesen Code duplizieren und den Selektor ändern, den wir hier benötigen. H ein Überschriftenelement. Ich werde das Telefon vergrößern. Stellen wir es auf 4,5 Ram ein. Dann entfernen Sie die Texttransformation und setzen Sie die Schriftstärke fett. Dann wird die Farbe weiß sein. Als nächstes brauchen wir den Abstand. Stellen wir es auf 2,2 RAM ein. Ich setze die Marge auf zwei Ram und Null. Die zweite Überschrift sieht ziemlich gut aus. Als Nächstes wählen wir den Absatz, die Schriftgröße auf 1,5 Dann brauchen wir die Gewichtung, es wird fett gedruckt. Als Nächstes stelle ich die Farbe auf Grau ein. Wir brauchen einen Rand unten, es werden drei RAM sein. Jetzt kümmere ich mich um den Link, der innerhalb des Absatzes platziert wird. Lassen Sie uns die Farbe auf Blau setzen. Okay, schauen wir uns den nächsten Absatz an. Wir müssen uns um die Eingabefelder kümmern. Lassen Sie uns die Eingabegruppe auswählen. Ich werde die Breite auf 40 Ram setzen. Dann wird die Höhe 4,5 Ram betragen. Als nächstes brauchen wir eine Marge, sie wird 20 sein. Dann wähle ich Eingabeelemente aus. Lassen Sie uns die Breite auf 100% setzen, dann wird die Höhe 100% sein . Als Nächstes benötigen wir eine Hintergrundfarbe. Ich werde die Hintergrundfarbe 2323644 einstellen. Als Nächstes müssen wir keine Grenze haben. Außerdem werde ich den Grenzradius auf 1,5 Ram setzen. Als Nächstes müssen wir platzieren, es werden ein Ram und zwei Ram sein. Die Eingabefelder sehen viel besser aus. Als Nächstes füge ich hier Farbe hinzu. Es wird CCC sein. Außerdem benötigen wir eine Telefongröße von 1,4 RAM. Als Nächstes kopiere ich den Selektor und füge hier Fokus-Pseudoklasse für den Fokus Ich werde den Rand im Fokus ändern. Ich werde die Hintergrundfarbe ändern. Es wird 344b sein. Außerdem müssen wir die Grenze ändern. Stellen wir es auf 0,2 RAM fest und die Farbe wird blau sein. Sobald wir uns konzentrieren, erhalten wir diesen schönen und coolen Effekt. Ordnung, danach kümmere ich mich um die Telefonsymbole. Setzen wir die Position auf absolut. Dann müssen wir die Position relativ für die übergeordneten Elemente festlegen , was die Eingabegruppe ist. Lassen Sie uns die rechte Position auf zwei Ram setzen da zwei Positionen 50% betragen werden. Und wir müssen die Symbole vertikal zensieren , indem wir transform translate Y -50% verwenden . Als Nächstes setzen wir die Schriftgröße auf 1.4 Ändere auch die Farbe. Ich werde es CCC machen. Wie Sie sehen können, sehen die Symbole ziemlich gut aus. Als nächstes müssen wir uns um die Knöpfe kümmern. Gehen wir von 240 Ram aus, dann wird die Höhe bei fünf Ram liegen. Außerdem brauchen wir Display Flex Justify. Der Inhalt wird Leerzeichen dazwischen haben, dann brauchen wir einen Rand oben, die Schaltflächen sind gut ausgerichtet. Jetzt müssen wir jeden von ihnen anpassen. Wählen wir Kontakt aus. Wenn Btn auf 46% eingestellt ist, dann ist die Höhe 100%. Fügen wir hier den Grenzradius hinzu, es werden vier Ram sein Dann brauchen wir Farbe, es wird weiß sein. Dann setze ich die Grenze auf Null. Als Nächstes benötigen wir die Schriftgröße, sie wird 1,5 Ram sein. Lassen Sie uns die Schriftstärke auf Polt setzen. Ändern Sie auch den Cursor, machen Sie ihn zum Zeiger. Eigentlich brauchen wir hier Farbe, nicht die Spalten. Als Nächstes müssen wir die Hintergrundfarbe für jeden Button separat ändern . Wählen wir den ersten aus. Ich werde die Hintergrundfarbe auf Grau setzen. Was die zweite Schaltfläche angeht, werde ich die Hintergrundfarbe blau machen. Die Knöpfe sehen gut aus. Als Nächstes wähle ich unten das Logo aus. Lassen Sie uns die Position auf Absolut setzen. Dann brauchen wir die unterste Position, es werden drei Ram sein. Ich werde die richtige Position auf drei Ram setzen. Dann brauchen wir Breite, es werden sechs Ram sein. Die Höhe wird ebenfalls sechs Ram betragen. Wir müssen Elemente in Kreise umwandeln, also brauchen wir einen Randradius 50% und auch die Farbe ändern, sie blau machen. Als Nächstes benötigen wir Box Shadow mit den Werten 01 Ram, fünf Ram, und die Farbe wird RBA sein, schwarze Farbe mit der Opazität 0,3 Hier haben wir das Logo in der unteren rechten Ecke Jetzt werde ich das Banner wieder einblenden und den Kontaktbereich ausblenden, indem ich Deckkraft Null und Sichtbarkeit ausgeblendet verwende Deckkraft Null und Jetzt ist es Zeit, etwas Javascript zu schreiben. Lassen Sie uns eine neue Variable erstellen. Es wird ein Container sein. Ich werde den Container mithilfe der Abfrageselektor-Methode auswählen mithilfe der Abfrageselektor-Methode Wir müssen hier den Klassennamen Container angeben. Als Nächstes müssen wir die Schaltfläche „Verbinden“ auswählen. Lassen Sie uns dieses Element auswählen. Wir müssen hier Navigation a mit dem n-ten Child-Selektor platzieren Navigation a mit dem n-ten Child-Selektor Es werden drei sein. Jetzt füge ich gemeinsamen Schaltfläche mit Klickereignis einen Event-Listener mit einer Callback-Funktion , die ausgeführt wird, sobald wir auf das Link-Element klicken Ich werde dem Container mithilfe einer Methode eine neue Klasse hinzufügen Container mithilfe einer Methode eine Diese Klasse wird geändert. Jetzt werde ich den Klassenwechsel verwenden und neue Stile erstellen , die angewendet werden. Sobald wir auf den Link geklickt haben, müssen wir ihn auswählen und wieder mit Deckkraft 1 und sichtbarer Sichtbarkeit anzeigen mit Deckkraft 1 und sichtbarer Sichtbarkeit Ich werde hier einen Übergang mit Werten von jeweils 0,5 Sekunden und einer Verzögerungszeit von 0,5 Sekunden hinzufügen 0,5 Sekunden und einer Verzögerungszeit von 0,5 Sekunden Lassen Sie uns den Übergang kopieren und ihn standardmäßig zum Kontakt hinzufügen. Als Nächstes müssen wir Banner mit Klassenwechsel auswählen , da wir das Banner ausblenden müssen. Sobald wir auf den Link geklickt haben, setzen wir die Deckkraft auf Null und die Sichtbarkeit auf Versteckt Wir müssen hier einen Übergang von allen 0,5 Sekunden hinzufügen. Auch hier benötigen wir standardmäßig einen Übergang, aber mit einer Verzögerungszeit. Sobald ich klicke, wird das Kontaktformular angezeigt. Als Nächstes erstelle ich eine neue Variable. Es wird zu Hause sein, BTN. Wählen wir dieses Element aus. Wir müssen die Kinderauswahl ändern. Es werden zwei sein. Dann werde ich diesen Code duplizieren, den unteren Teil ändern. Wir brauchen sie zu Hause. Sobald wir auf die Home-Schaltfläche klicken, müssen wir den Klassenwechsel aus dem Container entfernen , damit das Banner wieder angezeigt wird. Sobald wir auf Home klicken, wird das Banner wieder angezeigt und das Anmeldeformular wird ausgeblendet. Als Nächstes werde ich eine neue Variable erstellen. Es wird Login BTN sein. Ich meine den Login-Link, den wir im Absatz haben. Wählen wir dieses Element aus. Ich werde der Anmeldeschaltfläche einen Event-Listener hinzufügen, indem ich erneut auf das Ereignis klicke und mit einer Rückruffunktion Sobald wir auf die Anmeldeschaltfläche klicken, müssen wir dem Container eine neue Klasse hinzufügen Und das wird auch so sein, wir haben hier die Total-Methode verwendet. Lassen Sie uns die Höhe auswählen, gefolgt von der Eingabegruppe mit dem Diagramm. Wählen Sie eins aus Und dasselbe brauchen wir auch für das zweite Element. Wir müssen diese Eingabefelder verstecken. Sobald wir auf Anmelden klicken, werden die ersten zwei Eingabefelder angezeigt. Als nächstes brauchen wir hier ein Fragezeichen. Wenn die Aussage wahr ist, müssen wir den Textinhalt der Anmeldeschaltfläche ändern , um uns anzumelden. Wenn es falsch ist, müssen wir den Textinhalt der Anmeldeschaltfläche einloggen. Wenn ich auf das Login-BTN klicke, ändert sich der Text der Protokollierung Wir brauchen dasselbe auch für den Button. Wenden wir uns an PTN, ändern Sie den Klassennamen Wir brauchen hier den Chart-Selektor. Wir müssen die zweite Taste auswählen. Ich werde es hier benutzen, Operator. Wir müssen den Textinhalt des Kontakts BTN ändern, damit er sich einloggt Wir brauchen auch hier dasselbe. Wir müssen den Textinhalt des BTN ändern und dafür sorgen, dass es ein Konto erstellt Lassen Sie uns weitermachen und überprüfen, was wir hier haben. Klicken wir auf Beitreten und fahren dann mit der Protokollierung fort. Wie Sie sehen können, wurde der Inhalt der Schaltfläche geändert. Ordnung, also alles sieht ziemlich gut aus und funktioniert perfekt. Lass uns weitermachen. 30. Project 25 - Preiskarten: Hallo und willkommen zu unseren nächsten Projekten. In diesem Abschnitt werden wir moderne und coole Preiskarten erstellen. Das Projekt wird auf Basis von HTML und CSS erstellt. Wie Sie sehen können, haben wir hier drei verschiedene Karten mit einigen schönen und coolen Verlaufseffekten. Jede Karte hat ein paar verschiedene Teile, wie Typ, Preismerkmale, auch den Button zum Kaufen und so weiter. Wenn ich die Seite neu lade, erscheinen die Karten mit einem schönen und coolen Fade-Effekt Heutzutage benötigen viele Websites solche Abschnitte. Ich denke, das Projekt wird interessant und nützlich sein. Also lass uns weitermachen und anfangen. Ich habe einen neuen Ordner auf dem Desktop erstellt , der momentan leer ist. Lassen Sie uns weitermachen und das Projekt im VS-Code öffnen und dann unsere Arbeitsdateien erstellen. Wir benötigen zwei Dateien, Index-HTML und Style-CSS. Lassen Sie uns die Index-HTML-Datei öffnen und die grundlegenden HTML-Dokumente erstellen Zuallererst werde ich den Titel ändern. Es werden Preiskarten sein. Dann werde ich die CSS-Datei verlinken. Außerdem müssen wir das Projekt über den Live-Server im Browser öffnen . Lassen Sie uns den Browser und den Editor nebeneinander platzieren. Als Nächstes werde ich das CDN von Phones besuchen, weil wir in diesem Projekt einige Phonesome-Icons verwenden werden. Lass uns den Link von hier kopieren. Dann müssen wir das Link-Tag im Head-Element öffnen und das CDN einfügen Außerdem werde ich mir ein paar Google-Handys schnappen. Lass uns die Website von Google Phones besuchen und dann nach Pound namens Sophia Sons suchen . Lassen Sie uns weitermachen und ein paar verschiedene Stile auswählen, dann den Link kopieren und in das Head-Element einfügen. Okay, wir sind bereit, mit dem Schreiben des HTML-Markups zu beginnen. Ich werde De Tu öffnen, das wird der Behälter in der Tiefe sein Ich werde Preislisten erstellen, das wird das Deckblatt sein Als Nächstes benötigen wir die Preiskarte selbst, in der wir den Kartentyp angeben werden Es wird einfach sein. Als nächstes werde ich H ein Überschriftenelement mit dem Klassenkartenpreis versichern , es wird 14,90$ sein . Als nächstes werde ich H drei Überschriftenelemente mit dem Klassennamen Monat versichern mit dem Es wird ein Monat dauern. Als nächstes brauchen wir hier unter, in das ich ein paar Listenelemente einfügen werde. Ich füge hier ein, folge einem Symbol, es wird ein solides A-Häkchen sein. Als Nächstes füge ich Ihr Panel ein. Es wird irgendein Scheintext sein . Lassen Sie uns den Artikel ein paar Mal duplizieren. Ich werde den Klassennamen für das Phonosomeicon für drei Elemente ändern , ich gehöre zu den Als Nächstes werde ich Button versichern. Es wird Karte PTN sein. Außerdem brauchen wir hier einen Typ, der ein Button sein wird. Ich werde den Text inzwischen versichern. Außerdem benötigen wir Ihre Kartenunterseite mit dem Text. Schließ dich uns an. Okay. Das war's also mit der Karte. Ich werde es zweimal duplizieren , weil wir drei verschiedene Karten haben werden. Lassen Sie uns es duplizieren und dann einige Änderungen vornehmen. Der zweite wird Standard sein, und der Preis wird anders sein, 24,99 Ich werde die Phonemik ändern Als Nächstes werden wir Premium mit einem anderen Preis für 9,99 anbieten. Auch hier werde ich die Phonetik, die wir brauchen, ändern, Schecks Eigentlich sind alle drei Karten erstellt. Ich bin im HD-Markup und jetzt können wir anfangen , das CSS zu schreiben Lass uns weitermachen und jedes Element auswählen. Wie üblich werde ich den Rand und die Polsterung auf Null setzen den Rand und die Polsterung auf Null Als Nächstes definiere ich die Größe der Box. Es wird Border Box sein außerdem brauchen wir ihre Telefonfamilie. Stellen wir es auf Sophia San San Serif ein. Als Nächstes setze ich die Telefongröße des HTML-Elements auf 62,5%, weil wir es als Maßeinheit verwenden werden In diesem Fall entspricht ein m zehn Pixeln. Als Nächstes fange ich an, den Container anzupassen. Lassen Sie uns seine Breite auf 100% setzen. Dann wird die Höhe des Ansichtsfensters 100 betragen Als Nächstes werde ich den Hintergrund ändern. Lassen Sie uns den linearen Farbverlauf verwenden. Die Richtung wird zwei nach links sein. Dann brauchen wir hier die erste Farbe, es wird 1d33 58 sein Dann wird die nächste Farbe 14278 sein. Außerdem benötigen wir hier die dritte Farbe, die Oe138 sein wird Eigentlich müssen wir hier zwei ändern. Wie Sie sehen können, haben wir hier einen schönen und coolen Hintergrund mit schweren Infektionen. Als Nächstes stelle ich Display-Reflex ein, da wir den Inhalt mithilfe eines ausgerichteten Inhaltszentrums und eines Linienpostenzentrums zentrieren werden Wie Sie sehen können, wird der Inhalt in der Mitte platziert. Als Nächstes werde ich mich um die Verpackung kümmern. Ich bin bei den Preislisten. Stellen wir auf 80% ein. Dann brauchen wir Flexbooks. Lassen Sie uns den Inhalt gleichmäßig auf den Leerraum ausrichten. Wie Sie sehen können, sind die Karten gut ausgerichtet. Als Nächstes wähle ich die Karte selbst aus. Lassen Sie uns mit 230 Ram beginnen. Dann wird die Höhe 50 Ram betragen. Lass uns den Hintergrund ändern. Ich werde einen linearen Farbverlauf verwenden. Die Richtung wird zwei sein, oder? Und die erste Farbe wird 1254 sein. Dann wird die nächste Farbe F139 sein. Hier haben wir die Hintergründe der Karten. Als Nächstes setze ich den Grenzradius auf 1,5 Ram, dann auf einen Ram, dann auf 1,5 Ram und wieder auf 1,5 Ram. Danach setze ich Box Shadow auf die Werte 01 Ram, Six Ram, und die Farbe wird R sein, was einer schwarzen Farbe mit der Opazität 0,4 entspricht. Hier haben wir den Schatten Danach werde ich Flex-Bücher verwenden. Lassen Sie uns die Richtung für die nächste Spalte festlegen. Wir müssen den Inhalt gleichmäßig mit dem Wertebereich begründen. Was die Einzelposten angeht, werde ich sie zentrieren. Dann setzen wir den Mauszeiger auf den Zeiger. Wie Sie sehen können, sind die Elemente innerhalb der Karte angeordnet. Lassen Sie uns mit dem Kartentyp beginnen , den ich auf 222 Ram festlegen werde. Dann wird die Höhe vier Ram betragen. Außerdem brauchen wir hier eine Hintergrundfarbe. Es wird CCC sein. Verwenden Sie diese Farbe nur aus vorübergehenden Gründen. Als Nächstes verwende ich die Funktion Transform Rotate Z mit dem Wert -90 Grad, das Element wird gedreht Lassen Sie uns die Position auf absolut setzen. Dann benötigen wir die relative Position für das übergeordnete Element, das die Karte ist. Lassen Sie uns die Position auf 12 Ram setzen. Was die Position angeht, werde ich sie auf -13 Ram setzen Wie Sie sehen können, ist das Element gut ausgerichtet. Als Nächstes setzen wir den Grenzradius auf 2,5 Fram. Dann brauchen wir 2,5 Fram, 0,0 Das Element wurde abgerundet Als Nächstes setzen wir die Schriftgröße auf 2,2 Ram. Dann wird die Schriftstärke fett sein. Ich werde den Abstand zwischen den Buchstaben vergrößern. Dann verwenden wir Text Transform Make Pro Case. Danach werde ich die Farbe auf Weiß setzen. Dann benötigen wir eine Flexbox , um den Text innerhalb des Elements mit Justify Concenter und Align Items Center zu zentrieren. Jetzt setze ich Box Shadow auf dieselben Werte, die wir für die Karte verwendet haben. Lassen Sie uns die Opazität ändern. Es wird 0,3 sein. Wir haben hier den Schatteneffekt. Als Nächstes werde ich den Kartentyp duplizieren und den Klassennamen auf Karte unten ändern . Außerdem müssen wir die linke Eigenschaft statt die obere loswerden, wir brauchen die untere und der Wert wird minus vier Ram sein. Als Nächstes werde ich Transform Rotate loswerden. Außerdem müssen wir den Grenzradius ändern. Wir brauchen 00 und dann diese beiden Werte. Der untere Teil sieht ziemlich gut aus. Als Nächstes wähle ich die Preiskarte aus, gefolgt von der Diagrammauswahl Wir brauchen den ersten. Dann benötigen wir Ihren Kartentyp Card Bottom. Wir müssen den Hintergrund ändern. Ich werde einen linearen Farbverlauf verwenden. Die Richtung wird auch stimmen. die Farben angeht, wird die erste Farbe f6od C sein, dann werden wir hier F37 haben. Die erste Karte sieht ziemlich gut aus. Lassen Sie uns diesen Code zweimal duplizieren, die Selektoren ändern, die Farben für die zweite Karte sind df3b, da die zweite Farbe 6615d sein wird Kümmern wir uns um die dritte Karte. Der erste Anrufer wird OD9FC sein. Rufen wir den zweiten Anrufer ab. Ich werde hier 174 FF einfügen . In Ordnung. Also sind alle drei Karten personalisiert. Ich meine diese beiden Elemente. Als nächstes brauchen wir hier den Kartenpreis. Ich werde die Telefongröße auf sieben setzen, dann wird das Telefongewicht 300 sein. Als Nächstes wähle ich den Monat aus. Stellen wir die Telefongröße auf die Rams ein. Wir brauchen dein Handygewicht, 300. Als Nächstes setze ich Marching an der Spitze an. Es wird minus vier Ram sein. Ich werde das Element nach oben bewegen. Als Nächstes benötigen wir am wenigsten Artikel, setzen wir auf 30. Dann wird die Höhe m sein. Wir brauchen eine Flexbox. Stellen wir „ Inhalt rechtfertigen“ in die Mitte. Was die Artikel der Fluggesellschaft betrifft, so wird sie ebenfalls mittig angeordnet, sodass die Artikel gut ausgerichtet sind. Danach kümmere ich mich um das kleinste Objekt mit untergeordneter Auswahl, wir brauchen ungerade Artikel Stellen wir die zweite Hintergrundfarbe ein, RGBA 91233 und die Opazität 0,5 Als Nächstes wähle ich Stellen wir zwei Ram ein. Dann müssen wir Texiline im Mittelpunkt haben. Außerdem werde ich die Telefongröße auf 1,8 Ram einstellen. Als Nächstes benötigen wir den Rand auf der rechten Seite, lassen Sie uns ihn auf einen Ram setzen. Danach nehme ich das Span-Element und setzen die Telefongröße auf 1,4 Ram. Als Nächstes benötigen wir die Texttransformation in Großbuchstaben. Als Nächstes wähle ich zuerst die Karte mit der Kinderauswahl aus, dann benötigen wir den Kartenpreis Lass es uns dreimal duplizieren. Wir brauchen hier einen Monat, da ich am wenigsten verbrauchen werde. Und schließlich brauchen wir hier Span Element. Wir werden die Farbe des Textes mit Verlaufseffekten ändern . Setzen wir den Hintergrund auf diesen Wert, den wir für die erste Karte verwendet haben. Außerdem brauchen wir hier einen Web-Ke-Hintergrundclip. Es wird Text sein. Außerdem werde ich die Farbe des Web-Key-Textfeldes verwenden und es wird transparent sein, wie Sie sehen können Der Text für die erste Karte sieht ziemlich gut aus. Lass es uns zweimal duplizieren. Ändern Sie die Chart-Selektoren. Wir brauchen den zweiten, dann brauchen wir den dritten. Ich hole mir die richtigen Hintergründe für die zweite Karte, auch für die dritte Karte. Wie Sie jetzt sehen können der Text der Karten ziemlich gut aus. Als nächstes müssen wir uns um die Knöpfe kümmern. Nehmen wir 212 Gramm, dann beträgt die Höhe drei Ram. Ich werde die Texttransformation auf Großbuchstaben setzen. Als Nächstes benötigen wir den Grenzradius, es werden drei Ram sein. Als Nächstes brauchen wir Border None. Ich werde die Farbe ändern und sie weiß machen. Als Nächstes benötigen wir den Buchstabenabstand. Es wird 0,1 Ram sein. Dann ändere den Kurspunkt. Wie bei den anderen Elementen müssen wir die Hintergründe für die Bosonen separat ändern die Hintergründe für die Bosonen Nehmen wir den Hintergrund für das erste, duplizieren diesen Code dann zweimal, ändern die Selektoren und verwenden auch die richtigen Hintergründe für den zweiten unteren und auch den dritten Eigentlich haben wir hier ein kleines Problem. Wir verwenden die gleichen Hintergründe für die zweite und dritte Karte. Lassen Sie uns also weitermachen und das Problem beheben. Wir müssen uns den Code anstelle dieses schnappen, und das Gleiche müssen wir auch für die Schlagstöcke tun Okay, jetzt sieht alles fantastisch aus. Jetzt werde ich den Fade-Effekt erzeugen. Wir müssen die Karten verstecken. Lassen Sie uns Ess-Keyframes mit dem Namen Anim One bei 0% erstellen . Ich werde transform so einstellen, dass x -15 Ram übersetzt Außerdem müssen wir die Opazität auf Null setzen und die Sichtbarkeit ausblenden. Dann benötigen wir bei 100% dieselben Eigenschaften mit den folgenden Werten Translate x wird Null sein, die Opazität angeht, wird es eins sein Und dann brauchen wir sichtbare Sichtbarkeit. Wählen wir die erste Karte und verwenden diese Eigenschaften standardmäßig. Außerdem benötigen wir eine Animation mit der Wertekarte eins, was der Name der Schlüsselbilder ist. Dann brauchen wir Dauer. Es wird 1 Sekunde sein, dann eine Sekunde Verzögerung. Außerdem brauchen wir Linear und Vorwärts. Die erste Karte funktioniert einwandfrei. Machen wir dasselbe mit den restlichen Karten. Ich werde diesen Code zweimal duplizieren und dann den Selektor ändern Außerdem müssen wir X in „Y übersetzen“ übersetzen. Dann wird der Name Karte zwei sein Wir brauchen hier y statt x. Was den dritten Punkt angeht, übersetzen wir x ohne Minus, dann wird der Name Karte drei sein Auch hier gilt: Minus loswerden. Eigentlich brauchen wir hier 15 Ram ohne Minus. Jetzt sieht alles ziemlich gut aus und funktioniert auch. Das war's, wir sind mit diesem Projekt fertig. Lass uns weitermachen.