Erstelle eine mehrseitige, responsive Website: HTML, CSS, JavaScript (2024)

1. Einführung: Hallo und willkommen zu unserem praktischen Kurs Erstellen Sie eine mehrseitige, reaktionsschnelle Website mit HTML, CSS und Javascript. Ich möchte mich bei Ihnen dafür bedanken, dass Sie sich für diesen Kurs angemeldet Wenn Sie sich darauf freuen , direkt der Erstellung einer mehrseitigen Website aus der realen Welt zu beginnen, sind Sie in diesem Kurs genau richtig Ich werde Ihr Führer sein, wenn wir mit HTML, CSS und Javascript eine komplette, moderne und anpassungsfähige Website von Grund auf neu erstellen Hier wirst du keine langen theoretischen Diskussionen finden. Stattdessen erhalten Sie Schritt für Schritt praktische Anleitungen Sie mit den Fähigkeiten ausstatten , die für die Entwicklung beeindruckender Websites erforderlich sind. In diesem Einführungsvideo werde ich einen Überblick über unser Projekt geben und detailliert beschreiben, was wir erreichen werden. Unser Projekt ist als mehrseitige Website konzipiert und passt sich an unterschiedliche Bildschirmgrößen und Geräte an. Wir beginnen mit der Erstellung eines Website-Headers, gefolgt von der Navigation, die Sie öffnen können, indem Sie auf das Menüsymbol in der oberen rechten Ecke der Seite klicken. Die Navigation besteht aus zwei Teilen. Wir haben das Bild auf der linken Seite mit schönen und coolen Hover-Effekten für die rechte Seite Sie können hier auch die Navigationselemente mit Hover-Effekten sehen mit Hover-Effekten Als Nächstes werden wir zum Abschnitt Über uns übergehen , auf den dann der Buchbereich folgt In Zukunft werden wir einen Bereich mit Testimonials entwickeln, und dann finden Sie hier eine Fußzeile, die den Kontaktbereich enthält Wenn Sie auf den Link „ Zurück zum Anfang“ klicken, gelangen wir zum oberen Rand der Website Wie bereits erwähnt, ist unsere Website mehrseitig und Sie können zu verschiedenen Seiten navigieren, indem Sie auf die Links in der Navigation klicken. Sie werden die Seite „Über uns“ entdecken, auf der wir die Header-Funktionen sowie den Team-Bereich haben , gefolgt von der Fußzeile Als Nächstes können wir im Buchbereich navigieren, in dem Sie die verschiedenen Bücher mit Namen und Autoren finden mit Namen und Autoren Auf der nächsten Seite geht es um die Testimonials. Den Testimonial-Slider finden Sie hier. Wenn Sie auf die Pfeile klicken, können Sie den Slider abspielen Ebenfalls unten findest du die Punkte. Und du kannst den Slider auch mit diesen Punkten spielen. Ordnung, sobald wir in der Navigation auf den Home-Link klicken , erscheint der Website-Loader. Nach ein paar Sekunden wird die Webseite geladen. Jedes Mal, wird die Webseite geladen wenn Sie die Seite neu laden, wird der Loader abgespielt und die Seite wird angezeigt Seien Sie versichert, dass unsere Website auf verschiedene Bildschirmgrößen reagiert Wenn Sie sich die Seite ansehen, den responsiven Modus wechseln und eine Vorschau auf verschiedenen Bildschirmgrößen und Geräten anzeigen, werden Sie feststellen, dass sie anpassungsfähig ist Okay, ich möchte darauf hinweisen, dass dieses Projekt für extra große Bildschirme mit einer Auflösung von 1920 Pixeln und einer Höhe von 1080 Pixeln konzipiert ist mit einer Auflösung von 1920 Pixeln und einer Höhe von 1080 Pixeln Wenn Sie einen kleineren Bildschirm verwenden. Ich empfehle, während der Vorlesungen in den Responsive-Modus zu wechseln und die Innenhöhe entsprechend festzulegen . Dadurch wird sichergestellt, dass die Projekte auf kleineren Bildschirmen optimal funktionieren, bis wir sie vollständig responsiv gemacht haben. Ordnung, ich hoffe, Sie werden genauso viel Spaß an der Arbeit an diesem Projekt ohne weitere Umschweife genauso viel Spaß an der Arbeit an diesem Projekt haben wie ich. Lass uns 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 Hauptwerkzeuge, die Sie benötigen. Ein moderner Webbrowser und ein Texteditor. Unser Webbrowser, ich werde 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 der Einfachheit halber in dieser Vorlesung enthalten sein . 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 auszuprobieren, Visual Studio-Code herunterzuladen, diese Website zu besuchen und die Version für Ihr Betriebssystem, Windows, Mac oder Linux, auszuwählen . Der Installationsvorgang für Visual Studio-Code ist ebenfalls unkompliziert. Sie sollten keine Probleme haben. Sobald Sie diese beiden Tools installiert haben, Sie startklar. Lassen Sie uns gleich mit dem Kurs beginnen. 3. Erste Schritte: Ordnung, endlich sind wir bereit, mit dem Aufbau unseres Projekts zu beginnen. In dieser Vorlesung werde ich unsere Arbeitsumgebung vorbereiten und dann fangen wir an, den Code zu schreiben. Ich habe auf dem Desktop einen neuen Ordner namens Responsive Website erstellt , in dem ich einen Ordner für die Bilder habe. Dieser Ordner enthält alle Bilder , die wir für unser Projekt benötigen. Ich werde diesen Ordner im VS-Code öffnen. Als erstes müssen wir unsere Arbeitsordner erstellen Wir benötigen drei verschiedene, eigentlich keine Ordner, sondern Dateien. Wir brauchen drei Dateien. Die erste wird Index-HTML sein. Dann werden wir Style-CSS haben. Schließlich werde ich Skripte erstellen. Jetzt öffne ich eine indexierte HTML-Datei und wir müssen die grundlegende H-Tmall-Struktur erstellen Dafür werde ich Met verwenden. Wir müssen hier ein Ausrufezeichen platzieren und das oben oder Enter drücken Los geht's. Wir haben hier das grundlegende HTML-Dokument Ich meine die grundlegenden HTML-Elemente. Das erste , was ich tun werde, ist den Titel zu ändern Lass uns hier sein, responsive Website. Dann müssen wir die CSS- und Javascript-Dateien verknüpfen. Ich werde den Link Tac öffnen. Und wir müssen hier den Pfad der Datei angeben. In diesem Fall müssen wir hier den Namen der Datei angeben , da wir hier keine anderen Ordner haben. Wir brauchen dein Style-CSS. Dann werde ich die Javascript-Datei verlinken Wir müssen das Skript öffnen. Dann werde ich im Quellattribut die Datei angeben, ich meine den Namen der Java-Datei, die wir hier benötigen, Script JS. Okay? Sobald die CSS- und Javesby-Dateien verbunden sind, öffne ich das Projekt jetzt im Browser Dafür werde ich eines der Pakete namens Live Server verwenden Pakete namens Live Server Sie können entweder hier klicken, Go Live, oder Sie können die rechte Maustaste drücken und dann Mit Live-Server öffnen auswählen. Wie Sie jetzt sehen können, ist das Projekt im Browser live. Ich werde den Browser und den Editor nebeneinander platzieren . Um unseren Arbeitsprozess zu vereinfachen, können Sie, wenn Sie keinen Live-Server haben, wenn Sie keinen Live-Server haben, hier nach den Paketen suchen und dieses Paket hier installieren. Ordnung, neben diesen Links In Ordnung, neben diesen Links müssen wir auch ein paar verschiedene Links hinzufügen. Weil wir während des gesamten Projekts verschiedene Telefone und Symbole verwenden werden. Ich werde einen Link für die Google-Telefone hinzufügen, wir werden ein paar verschiedene Google-Telefone verwenden. Lassen Sie uns weitermachen und nach Google-Telefonen suchen. Ich werde diesen Link hier besuchen. Das erste Telefon, das wir brauchen, ist so etwas wie Oh oder Oh, ich weiß nicht, wie man dieses Wort ausspricht. Das Telefon heißt Kohen-Skript. Hier ist es Klicken wir auf Get Phone, gehen dann zurück und suchen nach dem Telefon namens Molly Klicken wir erneut auf Schrift abrufen. Die dritte Schrift, die wir benötigen, heißt Permanent Marker. Wir brauchen hier einen permanenten Marker. Hier ist er. Klicken Sie auf Schrift abrufen. Dann brauchen wir den Ambit-Code. Und ich werde diese Links von hier kopieren. Fügen wir es in das Head-Element ein. Außerdem suche ich nach Phone Awesome CDN JS. Wir müssen uns diesen Link von hier holen. Klicken wir auf dieses Symbol und kopieren Sie die URL. Dann müssen wir das Link-Tag in Head Elements öffnen, und ich werde hier das kopierte CDN einfügen Okay, ich glaube, das ist es. Alles ist bereit, damit zu beginnen, den Code dafür zu schreiben. Fahren wir mit der nächsten Vorlesung fort. 4. HTML-Markup für Website-Header erstellen: In der vorherigen Vorlesung haben wir unsere Arbeitsumgebung erstellt Wir haben alles vorbereitet , um mit dem Schreiben des Codes zu beginnen. Wir haben hier drei verschiedene Dateien: Dateien für HTML, CSS und Ile-Skript. Im Index der HTML-Datei haben wir die grundlegende HTML-Struktur mit einigen Links, Links für CSS- und Ilescopt-Dateien erstellt Links für CSS- und Ilescopt-Dateien Außerdem haben wir verschiedene Links für Telefone und Jetzt müssen wir damit beginnen, das HTML-Markup für unseren ersten Abschnitt des Projekts zu erstellen das HTML-Markup für unseren ersten Abschnitt des Projekts Wenn wir uns das fertige Projekt ansehen, sehen Sie hier den Header der Website In dieser Vorlesung werde ich das H-Til-Markup für den Website-Header erstellen H-Til-Markup für den Website-Header Es besteht aus verschiedenen Elementen. Wir haben hier das Logo und auch das Banner mit einigen Textelementen In dieser Vorlesung werde ich, wie gesagt, das H tel-Markup erstellen Kehren wir zum VS-Code zurück und ich werde Kommentare für den Container erstellen Ich werde ein Tag mit einem Klassennamen-Container öffnen. Innerhalb des Containers werde ich den Header erstellen. Aber vorher werde ich Kommentare für den Header einfügen. Lassen Sie uns das H Five-Header-Tag öffnen. Das erste Element , das ich in der Kopfzeile erstellen werde, wird das Logo sein. Ich werde Ihre Kommentare für das Logo einfügen und dann den Link-Tag öffnen. Ich werde hier Index-HTML einfügen , denn sobald wir auf das Logo klicken, müssen wir zur Startseite navigieren. Deshalb habe ich hier Index-HTML eingefügt. Dann füge ich hier den Klassennamen hinzu und es wird ein Logo sein. In die Link-Elemente werde ich Span mit dem Textleser einfügen. Okay, hier haben wir also das Link-Element mit dem Textleser. Das war's mit dem Logo. Als Nächstes werde ich das Banner erstellen. Lassen Sie uns also den Kommentar für das Banner öffnen Wir müssen das Tag mit dem Klassennamen-Banner innerhalb des Banners öffnen . Ich werde drei verschiedene Überschriftenelemente erstellen. Das erste wird eine Überschrift mit drei Überschriften sein , wobei der Text gelesen wird. Dann öffne ich die Elemente H mit einer Überschrift , in der wir uns gedreht haben werden Ich werde Ihren Buchstaben O einfügen. Dann werde ich mich in die Zeile einmischen, die wir hier online haben. Aber das O befindet sich in diesem Panelement, weil wir verschiedene Stile für den ersten Buchstaben dieses Wortes benötigen für den ersten Buchstaben dieses Wortes Schließlich werde ich H, vier Überschriftenelemente, in die textfreie Buchbibliothek einmischen vier Überschriftenelemente, in die textfreie Buchbibliothek Okay, ich denke, das ist es. Alle Elemente sind geschaffen. Für den Header der Website müssen wir diese Elemente formatieren. Und dafür fahren wir mit der nächsten Vorlesung fort. 5. Stylilng Website-Header: In der vorherigen Vorlesung haben wir das HTML-Markup für den Website-Header erstellt das HTML-Markup für den Wir haben hier alle verschiedenen Elemente. Nun, wie gesagt, wir müssen diese Elemente stylen und wir müssen den Header der Website so aussehen lassen. Kehren wir also zum VS-Code zurück und öffnen den Stil der CSS-Datei. Ich werde diese Datei verschieben und auf der rechten Seite platzieren. Als Erstes werde ich einige Standardstile erstellen. Ich werde Ihre neuen Kommentare für Standardstile einfügen, dann werde ich jedes Element auswählen, und dafür müssen wir ein Sternchen verwenden Lassen Sie uns den Standardrand und Polsterung für beide auf Null Der Rand muss Null sein und auch die Polsterung muss Null sein. Als Nächstes müssen wir die Größe der Rahmenbox für die Größe der Box festlegen. Dies ist eine CSS-Eigenschaft , die sich darauf auswirkt, wie die Größe eines Elements standardmäßig berechnet wird. Wenn Sie die Breite oder Höhe eines Elements in CSS festlegen, gilt dies für den Inhaltsbereich des Elements. Rahmenbox mit der Größe von Boxen beziehen die von Ihnen festgelegte Breite und Höhe jedoch nicht nur den Inhalt, sondern auch den Abstand und auch den Rand des Elements Aus diesem Grund verwenden wir das Rahmenfeld für die Rahmengröße von Boxen als Standardstil Als Nächstes verwende ich Textdekoration mit dem Wert non. Wir benötigen keine Textdekoration für die Link-Elemente. Außerdem werde ich die Zeile bis Non angeben. Lassen Sie uns abschließend die Telefonfamilie auf jedes Element setzen, das als Mull-Kursivschrift bezeichnet wird Okay, schauen wir im Browser nach. Wie Sie sehen können, werden alle Standarddateien auf die Elemente angewendet. Wir haben hier keine Margen. Und auch die Schriftart wird für jedes Element geändert. Als Nächstes werde ich die Schriftgröße des HTML-Elements ändern. Im Moment entspricht die Schriftart des HTML-Elements 16 Pixeln Während dieses Projekts werde ich Ram als Maßeinheit verwenden Standardmäßig entspricht ein Ram 16 Pixeln, da die Schriftgröße des HTML-Elements, wie gesagt, 16 Pixeln entspricht. Ich möchte einen Ram konvertieren und ihn zehn Pixeln entsprechen lassen. Dafür müssen wir die Schriftgröße des HTML-Elements verringern. Wählen wir HTML aus und setzen wir die Schriftgröße auf 62,5%. Im Moment entspricht ein Ram zehn Pixeln Wenn wir den Browser überprüfen, werden Sie feststellen, dass alle Elemente kleiner geworden sind Okay, ich denke, das war's vorerst mit den Standardstilen. Als Nächstes werde ich den Container anpassen. Ich werde Ihren neuen Kommentar für den Container einfügen. Dann wähle ich Container aus. Zuallererst werde ich innerhalb der Höhe definieren. Lassen Sie uns auf 100% setzen. Was die Höhe angeht, werde ich sie auf 100 Viewport-Höhe setzen Das bedeutet, dass der Container als Höhe 100% des Betrachtungspunkts einnimmt Höhe 100% des Betrachtungspunkts einnimmt Als Nächstes ändere ich die Benutzerfarbe. Verwenden wir die Farbe 212121. Wie Sie sehen können, haben wir hier einen Container mit dunkler Hintergrundfarbe Als nächstes werde ich mich um den Header kümmern. Lassen Sie uns hier neue Kommentare für den Header einfügen. Wählen Sie dann die Header-Elemente aus, die ich auf 100% setzen werde. Dann stelle ich die Höhe der Kopfzeile auf 100 Viewport-Höhe Ich werde die Höhe des Containers ändern und sie auf 100% einstellen, sie auf 100% einstellen damit, wie Sie sehen können, hier nichts geändert wird Als Nächstes wähle ich Logo, lass uns Kommentare für das Logo unsicher machen lass uns Kommentare für das Logo unsicher und wähle das Link-Element für das Klassennamen-Logo Ich werde die Position für das Logo so definieren , wie Sie sich erinnern Es befindet sich oben links in der Kopfzeile. Ich werde die Position des Logos definieren. Zuallererst brauchen wir hier die absolute Position. Um dann die Elemente entsprechend dem Header zu platzieren , benötigen wir die relative Position für den Header. Jetzt können wir Eigenschaften für das linke obere Ende definieren. Die oberste Position werden also drei Ram sein. Was die linke Position angeht, werde ich sie auf 225 Ram einstellen. Wie Sie sehen können, ist das Logo korrekt positioniert. Als Nächstes werde ich dieses Element anpassen. Ich werde Span Elements auswählen. Wie Sie sich erinnern, haben wir Span innerhalb des Link-Elements. Lassen Sie uns fortfahren und das Logo auswählen, gefolgt vom Span-Element. Lass uns die Telefonfamilie ändern. In diesem Fall verwende ich das Telefon mit Bezeichnung Permanent Marker Cursive erhöhe dann die Schriftgröße Es werden sieben RAM sein. Außerdem werde ich die Schrift kursiv machen. Lassen Sie uns den Schriftstil verwenden und ihn kursiv machen und auch die Farbe ändern. Die Farbe wird 32 B0ce sein. Es ist blaue Farbe. Hier haben wir das Logo. Es sieht ziemlich gut aus. Das Letzte, was ich in Bezug auf dieses Element tun werde , ist, einen kleinen Schatteneffekt hinzuzufügen. Ich werde Textschatten mit den Werten 0,5 Ram, ein Ram verwenden . Dann wird die Farbe des Schattens schwarz sein. Wir brauchen hier 000. Außerdem werde ich die Deckkraft der schwarzen Farbe einstellen 2.2 Jetzt hat das Logo Schatteneffekte und ich finde, es sieht viel besser Okay, das war's also mit dem Logo. Als Nächstes müssen wir uns um das Banner kümmern. Wir müssen die Elemente so gestalten, dass sie so aussehen. Also werde ich Ihre neuen Kommentare für das Banner einfügen. Dann wähle ich Entwicklung aus, das ein Klassennamen-Banner hat. Ich meine hier diese Entwicklung. Lassen Sie uns zunächst die Position definieren. Ich werde die Position auf absolut setzen. Dann werde ich die richtige Position definieren. Es werden 20 Ram sein. Und wir brauchen auch die unterste Position. Ich werde es auf 30 Ram setzen. Wie Sie sehen können, ist das Banner positioniert und befindet sich auf der rechten Seite. Ich werde die Textelemente mithilfe der Textzeilenmitte in der Mitte platzieren . Wie Sie sehen können, werden die Textelemente in der Mitte platziert. Jetzt werde ich die H-One-Überschriftenelemente anpassen. Ich meine dieses Element hier. Lass uns weitermachen und Banner H one auswählen. Lass uns die Telefongröße ändern. Es werden 15 Ram sein. Dann werde ich etwas Platz zwischen den Buchstaben schaffen. Lassen Sie uns also weitermachen und den Buchstabenabstand mit dem Wert eins Ram verwenden . Lass uns den Browser überprüfen. Hier haben wir das Überschriftenelement H One. Wie Sie sich aus der fertigen Version erinnern, werden wir der Überschrift ein Hintergrundbild hinzufügen. Lass uns weitermachen und das tun. Dafür werde ich ein paar verschiedene Hintergrundeigenschaften verwenden . Das erste wird ein Hintergrundbild sein. Wir werden die URL des Bildes definieren, wie Sie wissen, wir haben einen Ordner namens images, dann müssen wir Text G eins auswählen, das erste Bild von hier. Als Nächstes benötigen wir eine weitere Hintergrundeigenschaft , die als Hintergrundgröße bezeichnet wird. Ich werde es so einstellen, dass es bedeckt ist. Wie Sie sehen können, haben wir hier ein Hintergrundbild, aber das brauchen wir hier nicht. Wir müssen das Bild als Hintergrund für den Text hinzufügen und nicht die gesamte Überschrift. Um das zu tun, müssen wir eine Eigenschaft namens Backgroundclip mit dem Wert Text verwenden . Außerdem benötigen wir dieselbe Eigenschaft wie Webkit, sonst wird sie nicht angewendet Schließlich müssen wir die Farbe transparent machen. Jetzt sollte es funktionieren. Wie Sie sehen können, haben wir hier ein Bild als Hintergrund für den Text. Okay, ich werde dem Text einen Schatteneffekt hinzufügen. Lassen Sie uns den Textschatten von hier aus entfernen. Jetzt müssen wir uns um den ersten Buchstaben kümmern, denn denken Sie daran, dass wir den ersten Buchstaben mit einem Span-Element umschlossen haben den ersten Buchstaben mit einem Span-Element Ich wähle Banner H, eins, gefolgt vom Span-Element. Ich werde das Telefon vergrößern. Sagen wir es, 225. Okay. Lass uns den Browser überprüfen. Wie Sie sehen können, ist die Telefongröße des ersten Buchstabens größer, aber das ist nicht das, was wir brauchen. Lassen Sie uns die fertige Version überprüfen. Wir haben hier verschiedene Ergebnisse. Ich denke, wir brauchen hier den Großbuchstaben und nicht den kleinen. Lassen Sie uns hier Kapital verwenden und dann das Ergebnis überprüfen. Okay, jetzt sieht es so aus, als ob sie die fertige Version haben. Okay, lassen Sie uns über das H-Ein-Überschriftenelement sprechen. Lassen Sie uns weitermachen und uns um die restlichen Überschriften kümmern. Ich werde die drei Überschriftenelemente anpassen. Wählen wir Banner aus, gefolgt vom Element H mit den drei Überschriften. Ich werde die Telefonfamilie wechseln. In diesem Fall verwenden wir das Telefon mit dem Namen Script Cursive und erhöhen dann die Telefongröße Es werden sieben Ram sein. Wir müssen das Gewicht des Telefons ändern. Stellen wir es auf 300 ein. Hier haben wir die drei Überschriftenelemente von H. Ich werde die Farbe des Textes ändern. Außerdem werde ich es in der Nähe der Überschriftenelemente H nach unten verschieben . Lassen Sie uns Farbe darauf setzen. Um das Element dann nach unten zu verschieben, werde ich es mit der Übersetzungsfunktion transformieren. Ich werde x in drei Ram übersetzen. Was das Translate Y angeht, müssen wir es auf 11 Ram setzen. Wir bewegen das Element horizontal um drei. Was die vertikale Richtung angeht, bewegen wir das Element um 11 Ram. Wie Sie sehen können, ist es korrekt platziert. Das Letzte, was ich in dieser Lektion tun muss , ist, die Überschrift anzupassen, ich meine das Element mit den vier Überschriften. Lassen Sie uns weitermachen und das Banner auswählen , gefolgt vom Element H mit vier Überschriften. Stellen Sie die Telefongröße auf 1,8 dann beträgt das Gewicht des Telefons 300. Außerdem werde ich Text in Großbuchstaben umwandeln dann den Abstand zwischen den Buchstaben vergrößern. Lassen Sie uns den Buchstabenabstand auf 2,7 RAM einstellen und schließlich die Farbe der Überschrift ändern . Verwenden wir hier. Blaue Farbe, ich meine, diese Farbe hier. Okay, das ist es. Der Header der Website ist angepasst und ich finde, er sieht ziemlich gut aus. Als nächstes müssen wir uns um die Navigation kümmern. Wir müssen die Navigation erstellen, ich meine das Menüsymbol, und auch diese nette und coole Navigation hier erstellen. Lassen Sie uns dafür mit der nächsten Vorlesung fortfahren. 6. HTML-Markup für die Navigation erstellen: Ordnung, in der vorherigen Vorlesung haben wir den Header der Website angepasst Wie Sie sehen können, sieht es ziemlich gut aus. Wie gesagt, wir müssen uns jetzt um die Navigation kümmern. Wir werden das Menüsymbol und auch die Navigationselemente erstellen . In dieser Vorlesung werden wir das HTML-Markup erstellen Und dann passen wir die Elemente an und sorgen auch dafür, dass die Navigation mit Javascript funktioniert Okay, gehen wir zurück zum VS-Code. Und in der HTML-Datei direkt nach dem Container werde ich neue Kommentare für die Navigation einfügen. Und dann öffne ich in den Commons das div-Tag, das dann das Menüsymbol sein wird. Das Menüsymbol wird aus drei verschiedenen Zeilen bestehen. Deshalb werde ich Ihnen drei P-Tags einfügen. Wir brauchen Klassennamen, Zeile und Zeile eins. Die erste Klasse wird für das allgemeine Styling verwendet. Was die zweite Klasse betrifft, werden wir sie für das individuelle Styling verwenden. Wie gesagt, wir brauchen drei Zeilen. Deshalb werde ich diese Codezeile duplizieren und dann die Klassennamen ändern. Wir brauchen Zeile zwei und Zeile drei. Ordnung, danach werde ich die Navigationselemente erstellen. Zuallererst werde ich hier Kommentare für das Menüsymbol hinzufügen . Dann brauchen wir hier das Menüsymbol. Dann werde ich wieder neue Kommentare für Navigationselemente einfügen . Lassen Sie uns HTML 5 öffnen. Taggen Sie jetzt mit der Klassennamennavigation. Dann füge ich ein Tag mit dem Klassennamen links ein. Dieses Element wird das Bild enthalten , das sich auf der linken Seite der Navigation befindet. Ich meine dieses Bild hier, das einen schönen und coolen Hover-Effekt hat Lass uns weitermachen und hier das Bild einfügen. Ich werde ein Bild aus dem Bilderordner auswählen. In diesem Fall benötigen wir das JPG-Buch. Setzen wir uns etwa auf die linke Seite. Lassen Sie uns weitermachen und die rechte Seite erstellen. Wir müssen von innen heraus hören, dass es keine richtige Entwicklung gibt. Ich werde eine weitere Tiefe einfügen, die keine Gegenstände enthalten wird. Dann haben wir fünf verschiedene Navigationselemente. Wir müssen den Link-Tag öffnen, ich füge dein Zuhause ein. Das erste Link-Element wird sich von den übrigen Link-Elementen unterscheiden. Lassen Sie uns ein Element öffnen, dann füge ich in das Link-Element eine Spanne mit der Nummer 01 ein. Dann brauchen wir etwa, lassen Sie uns diese Codezeile viermal duplizieren. Eigentlich dreimal, weil wir insgesamt vier Elemente mit Span-Elementen benötigen . Das zweite Verbindungselement werden Bücher sein. Dann haben wir den dritten Punkt, und es werden Testimonials sein Endlich brauchen wir Kontakt. Okay? Also das ist ungefähr das HTML-Markup Ich denke, alles ist geschaffen. Lass uns den Browser überprüfen. Wir haben hier das Bild und die Navigationselemente. Im Moment haben wir nur das HTML-Markup. Deshalb sehen die Elemente schlecht aus. Um das zu beheben, fahren wir mit der nächsten Vorlesung fort. 7. Styling-Menü-Symbol: In der vorherigen Vorlesung haben wir das HTML-Markup der Navigation erstellt. Im Moment haben wir hier nur die Elemente ohne jegliches Styling, und sie sehen ziemlich hässlich aus. Wir müssen uns in dieser Vorlesung darum kümmern. Ich werde das Menüsymbol anpassen. Wir werden es stylen. Ich meine, wir werden diese Linien erstellen. Und wir werden auch diesen schönen und coolen Hover-Effekt erzeugen. Okay, gehen wir zurück zum VS-Code und suchen den Container direkt nach dem Container Ich werde neue Kommentare für die Navigation einfügen die Navigation Dann brauchen wir Commons für das Menüsymbol, bevor wir anfangen , das Menüsymbol zu gestalten. Zuallererst werde ich das Bild und die Navigationselemente für eine Weile verstecken . Ich werde zu Ihren neuen Kommentaren für die Navigationselemente, die wir hier benötigen, Navigationselemente hinzufügen. Lassen Sie uns Elemente mit dem Klassennamen Navigation auswählen und dieser Anzeige zugewiesen haben. Nein. Okay, das Bild und die Navigationselemente sind also ausgeblendet. Jetzt können wir beginnen, das Menüsymbol zu gestalten. Ich werde das Menüsymbol auswählen. Dann definieren wir mit in Hyde, ich setze auf 24 Ram Was den Hyde angeht, so werden es zwei Ram sein. Um das Element sichtbar zu machen, füge ich hier nur eine temporäre Hintergrundfarbe Lass es uns machen, ich weiß nicht, sagen wir rot. Hier haben wir das Menüsymbol. Als nächstes müssen wir uns um seine Position kümmern. Wir müssen es auf der rechten Seite platzieren. Ich meine, in der oberen rechten Ecke der Seite setze ich die Position auf fest. Dann werden sieben Ram die oberste Position sein. Was die richtige Position angeht, werde ich sie auf 215 Ram setzen. Wie Sie sehen können, ist das Menüsymbol gut positioniert. Als Nächstes werde ich die temporäre Hintergrundfarbe von hier aus entfernen. Dann wähle ich die Zeile aus. Ich meine, wir wählen Zeilen mit einer gemeinsamen Klassennamenzeile aus. Lassen Sie uns die Höhe definieren. Es wird 0,2 m sein. Dann ändere die Hintergrundfarbe. Ich werde hier diese blaue Farbe verwenden. Hier haben wir die Linien, wie Sie von der fertigen Version wissen, die erste und die dritte haben einen Wert von 100%. Was die zweite Zeile betrifft, ist sie im Vergleich zu den restlichen Zeilen kleiner. Ich wähle Zeile eins und Zeile drei, damit definiert als 100%. Wie bei Zeile zwei werde ich sie auf 70% setzen. Wie Sie sehen, ist das eigentlich die fertige Version Wie Sie sehen können, wurde die zweite Zeile kleiner. Lassen Sie uns die Zeilen voneinander trennen. Dafür werde ich Flexbooks verwenden. Ich werde hier Display Flex hinzufügen. Dann müssen wir die Richtung ändern , weil die Linien vertikal ausgerichtet sein sollten. Flex-Richtung wird die Spalte sein, dann müssen wir die Flex-Elemente trennen. Und dafür verwenden wir justify content space between. Wie Sie sehen können, sind die Zeilen getrennt und mit der Gestaltung des Menüsymbols sind wir fast fertig. Ich werde den Cursorzeiger hinzufügen. Wie Sie sehen können, wird der Cursorzeiger nicht auf das Menüsymbol angewendet. Wir müssen dieses Problem mithilfe der Indexeigenschaft beheben. Lassen Sie uns den Index auf den Maximalwert setzen , der 1.000 ist. Jetzt ist das Problem behoben. Okay, mit dem Styling sind wir fertig. Als Nächstes müssen wir den Hover-Effekt beim Hover erzeugen. Wir müssen die erste und dritte Zeile kleiner machen. Was die zweite Zeile betrifft, müssen wir sie auf die rechte Seite verschieben. Ich werde das Menüsymbol mit dem Mauszeiger auswählen. Dann folgt Zeile eins. Wir brauchen auch für Zeile drei eine abweichende Meinung. Wenn wir mit der Maus darüber fahren, müssen wir die Breite der Linien verringern. Machen wir es zu 70%. Was die zweite Zeile angeht, kopieren wir diesen Code und ändern den Klassennamen Wir brauchen Zeile zwei. Im Fall der zweiten Zeile müssen wir den linken Rand verwenden. Der Wert wird 30% betragen. Wir müssen die Linie auf die rechte Seite verschieben. Wenn wir das Ergebnis überprüfen, wie Sie sehen, funktioniert alles einwandfrei. Das einzige, was wir hier brauchen, ist den Übergang zu verwenden, um den Effekt glatter zu machen Ich füge hier einen Übergang mit dem Wert hinzu und die Dauer wird 0,3 Sekunden betragen Wie ihr sehen könnt, haben wir hier einen netten und coolen Hover-Fact mit dem Menüpunkt, damit sind wir erstmal fertig Als nächstes müssen wir uns um die Navigationspunkte kümmern . Lassen Sie uns dazu mit der nächsten Vorlesung fortfahren. 8. Navigations-Elemente stylen: In der vorherigen Lektion haben wir das Menüsymbol gestaltet. Wir haben diesen schönen und coolen Hover-Effekt erzeugt. In dieser Vorlesung werde ich mich jetzt um die Navigationspunkte kümmern Wir werden die Navigation gestalten. In dieser Vorlesung werde ich dafür sorgen , dass die Navigation wie folgt aussieht. Als Nächstes werden wir uns mit dem Java-Skript befassen. Ich meine, wir werden unserer Navigation Funktionalität hinzufügen. Wir werden dafür sorgen, dass es funktioniert. Okay, lass uns zum VS-Code gehen. Im Moment ist die Navigation versteckt. Ich werde Display None von hier aus loswerden. Lassen Sie uns innerhalb der Höhe der Navigation einstellen. Ich setze auf 100%. Was die Höhe angeht, werde ich sie auf 100 Viewport-Höhe setzen, ich auf 100% des Viewports Und ich werde auch die Hintergrundfarbe ändern. In diesem Fall werde ich die Farbe 191919 verwenden. Es ist eine dunkelgraue Farbe. Hier haben wir die Navigation. Eigentlich werde ich den Header mit Navigation abdecken. Dafür müssen wir eine Indexeigenschaft mit einem höheren Wert als Null verwenden . Ich gehe auf 30 bis 100. Im Moment ist es nicht behandelt , weil wir die Position für das Element definieren müssen. In diesem Fall werde ich die Position fixieren. Außerdem werde ich die Eigenschaften oben und links definieren. Beide sollten Null sein, okay? Jetzt ist der Header bedeckt und wir sehen hier nur die Navigation. Als Nächstes werde ich Flex Box verwenden, um Flex-Elemente horizontal auszurichten. Also müssen wir Flex anzeigen. Danach werde ich mich um die linke und rechte Seite der Navigation kümmern . Wie Sie sich erinnern, haben wir zwei Teile, linken Teil und den rechten Teil. Ich fange mit dem linken Teil an. Wählen wir links links aus. Ich werde innerhalb der Höhe definieren. Die Breite wird 50% betragen. Was die Höhe angeht, werde ich sie auf 100% setzen. Im Moment wird hier nichts geändert. Wir müssen uns um das Bild kümmern. Es sollte der Höhe des übergeordneten Elements entsprechen, das nicht links ist. Wir müssen links links auswählen , gefolgt von dem Bild, das wir hier benötigen. Bei 100% also auch Höhe 100% dann sollten wir das Bild einspeisen. Dafür verwende ich Object Feet Col. Wie Sie jetzt sehen können, nimmt das Bild die Hälfte der Navigation ein. Als Nächstes werde ich den Hover-Effekt erzeugen. Ich meine hier diesen Hover-Effekt. Standardmäßig sollten wir das Bild schwarz-weiß machen und dann den Mauszeiger über das Bild bewegen wollen Es sollte seine ursprüngliche Farbe zurückbekommen seine ursprüngliche Farbe , damit das Bild schwarz-weiß Ich werde einen Filter mit Graustufenfunktion verwenden und ihn auf 100% einstellen. Nun, wie ich sehen kann, wurde das Bild schwarz-weiß. Außerdem werde ich die Deckkraft verringern. Lass uns 0,5 draus machen, okay? Jetzt müssen wir also den Hover-Effekt erzeugen. Ich werde mit dem Hover genug übrig auswählen. Und dann sollten wir das Bild auswählen , um die ursprüngliche Farbe wiederherzustellen Wir sollten wieder den Filter Graustufen verwenden und ihn auf Null setzen. Außerdem müssen wir die Opazität erhöhen. Lassen Sie uns den Übergang auf einmal verwenden, um einen gleichmäßigeren Effekt zu erzielen. Wir brauchen alles als Dauer. Ich werde 1 Sekunde verwenden. Sobald ich mit der Maus über das Bild fahre, erhalten wir diesen schönen und coolen Hover-Effekt Eigentlich werde ich den Zeiger zum Cursorzeiger machen Cursorzeiger Fügen wir hier den Cursorzeiger hinzu. In Ordnung, das entspricht also dem Bild. Lass uns weitermachen und uns um die rechte Seite der Navigation kümmern . Ich wähle rechts aus, ich definiere innerhalb der Höhe. Die Breite wird wie auf der linken Seite 50% betragen. Die Höhe wäre 100% Als Nächstes werde ich die Hintergrundfarbe der rechten Seite ändern . Ich werde es 171717 machen. Dann müssen wir uns um die Navigationselemente kümmern. Ich werde sie in der Mitte der rechten Seite platzieren. Lass uns Flex-Bücher verwenden. Wir brauchen Display Flex. Um den Inhalt in der Mitte zu platzieren, müssen wir das Inhaltszentrum und auch ein Einzelpostenzentrum begründen . Ordnung, lassen Sie uns jetzt weitermachen und die Navigationselemente selbst kümmern. Ich werde keine Elemente auswählen, das sind die übergeordneten Elemente, der Wrapper der Elemente Wir müssen die Elemente vertikal in der Spalte platzieren. Ich werde Flex Book verwenden. Wir müssen Flan ausstellen. Wir müssen die Richtung der Flexbox ändern. Es wird eine Kolumne sein. Jetzt sind sie vertikal in einer Spalte angeordnet. Jetzt werde ich die Link-Elemente anpassen. Lassen Sie uns weitermachen und weitere Elemente auswählen , gefolgt vom Link-Element. Die Schriftgröße wird 1,8 Ram betragen. Dann benötigen wir einen Rand, um etwas Platz zwischen den Flex-Elementen zu schaffen. Der Rand beträgt oben und unten zwei Ram und dann Null auf der linken und rechten Seite. Außerdem werde ich Text in Großbuchstaben umwandeln , wir brauchen hier eine Texttransformation in Großbuchstaben. Dann werde ich die Farbe ändern. Dann machen wir es weiß. In Ordnung, jetzt sehen unsere Link-Elemente viel besser aus. Als Nächstes werde ich den Hover-Effekt beim Hover erzeugen. Ich möchte die Farbe der Link-Elemente ändern. Lassen Sie uns jetzt die Elemente A mit dem Mauszeiger auswählen und die Farbe ändern Mach es, wir brauchen Farbe. Lassen Sie uns hier auch diese blaue Farbe verwenden. Ich werde den Übergang verwenden, um einen gleichmäßigeren Effekt zu erzielen. Sagen wir, Übergang zur Farbe. Und dann wird die Dauer 0,3 Sekunden betragen. Okay, sobald wir den Mauszeiger über die Link-Elemente bewegen, haben sie, wie Sie sehen können, ihre Farbe geändert Okay, jetzt kümmern wir uns hier um diese Zahlen. Wie Sie sich erinnern, haben wir innerhalb der Links Span-Elemente erstellt . Also werde ich diese Span-Elemente anpassen. Lassen Sie uns fortfahren und keine Elemente auswählen , gefolgt vom A-Element. Und dann brauchen wir Span. Tatsächlich habe ich bei der Auswahl der Google-Telefone vergessen, ein zusätzliches Telefon auszuwählen. Gehen wir also zurück zur Google-Telefon-Website und suchen wir nach einem Telefon namens Sin. Wählen wir den ersten aus. Dann müssen wir auf Get Pont klicken. Dann hol dir den M-Code und kopiere diesen Code von hier. Lass es uns hier einfügen. Ich meine, wir müssen diese Links ersetzen. Jetzt können wir die neu hinzugefügte Schrift verwenden. Ich werde die Telefonfamilie ändern. Lass uns Sz Sansorif benutzen. Dann werde ich die Telefongröße erhöhen. Es werden drei Rennen sein. Ich werde das Telefon mit dem Gewicht des Handys zum Bouldern bringen. Lass uns 900 draus machen. Dann werde ich einen Raum auf der, ich meine, auf der rechten Seite schaffen . Wir brauchen Spielraum, oder? Sagen wir zu einem. Lassen Sie uns abschließend Abstand zwischen den Buchstaben auf 0,2 erhöhen Okay, wie Sie jetzt sehen können, sehen die Zahlen auf der linken Seite der Linkelemente ziemlich nett und cool aus. Als Nächstes werde ich die Linien unter den Zahlen erstellen. Ich meine, wenn wir uns das fertige Projekt ansehen und den Mauszeiger über die Link-Elemente bewegen, werden Sie sehen, dass wir hier einen schönen und coolen Effekt unter den Zahlen haben schönen und coolen Effekt unter , die Linie, die erscheint Ich werde diese Linien mit einem Kraftelement erstellen. Lassen Sie uns weitermachen und keine Elemente auswählen, eine Spanne. Und dann brauchen wir vorher. Also Elemente müssen wir zunächst den Inhalt definieren , der leer sein wird. Dann brauchen wir innerhalb der Höhe, das W wird 100% sein. Dann setze ich die Höhe auf 0,5 Ram. Ändere auch die Hintergrundfarbe. Die Farbe wird dieselbe sein, ich meine hier diese blaue Farbe. Dann müssen wir uns um die Position des Elements kümmern. Lassen Sie uns die Position auf absolut setzen. Ich werde das Element entsprechend dem übergeordneten Element positionieren , das ist die Spanne, die wir hier benötigen, und positioniere es relativ. Wenn wir uns nun das Projekt ansehen, werden Sie feststellen, dass die Linien angezeigt werden. Aber wir müssen die Position anpassen. Sie sollten unten platziert werden. Setzen wir die untere Position auf Null. Und ich werde auch die linke Position auf Null setzen. Okay, das war's mit den Linien. Jetzt sollten wir sie verstecken und wieder einblenden. Sobald wir den Mauszeiger über die Link-Elemente bewegen, setze ich die Breite auf Null Dann wähle ich zuerst Elemente mit dem Hover aus, wir müssen hier einen Hover hinzufügen, den wir mit 100% machen sollen Und ich werde auch Transition verwenden Fügen wir hier mit einer Dauer von 0,3 Sekunden Sobald wir den Mauszeiger über die Link-Elemente bewegen , werden diese Zeilen gut angezeigt Das einzige, was ich tun muss, ist, mich um das erste Link-Element zu kümmern Wie Sie sehen können, haben wir hier die Zeile, mit der ich diese Zeile erneut erstellen werde , bevor wir das Element ausführen, wählen wir die ersten Link-Elemente aus. Dafür brauchen wir nov-Elemente a gefolgt vom ersten untergeordneten Wählen Sie aus, dass es sich um ein Pseudoelement handelt, tatsächlich handelt es sich um eine Pseudoklasse, nicht um das Pseudoelement Zuallererst werde ich mit Padding Left ein Leerzeichen erstellen . Stellen wir es auf sechs ein Dann nehme ich den Selektor und füge hier vor den Elementen hinzu Lassen Sie uns diesen Code von hier aus korrigieren und einige Änderungen vornehmen Der Inhalt sollte dann leer sein. Die Breite wird 4,8 Ram betragen. Die Höhe wird 0,2 Ram betragen. Dann werde ich die Hintergrundfarbe weiß machen. Wir brauchen die absolute Position. Dann brauchen wir die relative Position. Für das übergeordnete Element benötigen wir relative. Außerdem werde ich die oberste Position auf 50% setzen oberste Position auf 50% Wir müssen sie vertikal in der Mitte platzieren. Dann wird die linke Position Null sein. Außerdem müssen wir Transform Translate Y mit -50% verwenden , weil wir das Element perfekt zentrieren müssen Im Moment ist es nicht sichtbar. Lass uns den Code überprüfen. Eigentlich brauchen wir ihren Ram. Gehen wir zurück zum Browser. Und wie Sie jetzt sehen können, ist vor dem Element die Linie sichtbar. Ich muss nur die Farbe ändern. Sobald wir den Mauszeiger über das erste Link-Element bewegen, wähle ich hier diesen Selektor aus und füge dann Hover hinzu Nach dem ersten Kind müssen wir die Hintergrundfarbe ändern Lass uns hier diese Farbe verwenden. Und dann benutze Transition. Alle 0,3 Sekunden, okay? Jetzt sieht alles gut aus, die Navigation ist angepasst. Und jetzt müssen wir die Arbeit machen. Ich meine, wir müssen dafür sorgen, dass das Hamburger-Menü funktioniert. Sobald wir auf das Menüsymbol klicken, sollte die Navigation angezeigt werden Lassen Sie uns dazu mit der nächsten Vorlesung fortfahren. 9. Navigation funktionieren lassen: Ordnung, in der vorherigen Vorlesung haben wir das Styling der Navigation abgeschlossen. Ich finde, dass es ziemlich gut aussieht. Jetzt müssen wir, wie gesagt, dafür sorgen, dass es funktioniert. Schauen wir uns das fertige Projekt an. Wie Sie sehen können, ist die Navigation standardmäßig ausgeblendet. Sobald wir auf das Menüsymbol klicken, erscheint es mit schönen und coolen Überblendeffekten. Wie Sie feststellen, sind die Navigationselemente außerdem ausgeblendet. Und sie erscheinen mit Fade-Effekten und in einigen Intervallen. Außerdem verwandelt sich das Menüsymbol, diese Linien verwandeln sich in einen Pfeil. All diese Dinge werden wir in diesem Vortrag tun. Okay, das erste , was wir tun müssen, ist, die Navigation standardmäßig auszublenden. Dafür müssen wir die Navigation finden und Capacity Zero und Visibility He hinzufügen . Wie Sie jetzt sehen können, ist die Navigation ausgeblendet. Das nächste, was ich tun werde, ist die JS-Skriptdatei zu öffnen und Gascode zu schreiben. Wir werden zwei Elemente auswählen. Das erste wird das Menüsymbol sein. Was den zweiten betrifft, sollten wir den Container auswählen, ich meine den Wrapper des Inhalts Ich meine dieses Element hier. Lassen Sie uns weitermachen und eine neue Variable erstellen. Ich nenne es Menü. Ich werde dieses Element mit der Abfrageselektor-Methode auswählen mit der Abfrageselektor-Methode Wir müssen den Klassennamen des Menüsymbols angeben. Lassen Sie uns diese Codezeile duplizieren. Ändern Sie den Namen Multivariabel. Es wird ein Container sein. Und wir müssen auch den Klassennamen ändern. Fügen wir hier Container ein. Okay, danach füge ich dem Menüsymbol mit einem Klickereignis einen Event-Listener hinzu, weil wir die Navigation anzeigen sollten , sobald wir auf das Menüsymbol klicken Also werde ich dem Menüsymbol einen Event-Listener hinzufügen. Wir müssen hier das Klickereignis angeben. Wir müssen hier das Klickereignis angeben. Und wir müssen auch die Back-Funktion übergeben. Es wird eine Pfeilfunktion sein. Diese Zeile fügt dem Menüsymbolelement einen Event-Listener Menüsymbolelement Es wartet auf ein Klickereignis, und wenn das Klickereignis eintritt, führt es die Jetzt füge ich dem Container eine neue Klasse mit einer Gesamtmethode hinzu, und dann verwenden wir diesen Klassennamen in der CSS-Datei Ich habe eine unsichere Container-Klassenliste. Dann brauchen wir die totale Methode. Ich bin mir nicht sicher, ob der neue Klassenname lautet. Nennen wir es die Funktion „ In der Pfeiltaste navigieren“. Diese Zeile schaltet die Navigation der CSS-Klasse auf dem Container-Element Wenn die Navigate-Klasse nicht vorhanden ist, wird sie hinzugefügt. Und wenn die Navigate-Klasse bereits vorhanden ist, wird sie entfernt. So funktioniert die Toggle-Methode. Jetzt müssen wir zur CSS-Datei gehen und Navigation auswählen. Bei dieser neu erstellten Klasse Navigate müssen wir das Navigationspaket anzeigen. Also nehme ich mir diese beiden Zeilen und platziere sie hier. Die Opazität muss gleich eins sein. Was die Sichtbarkeit angeht, so sollte sie sichtbar sein. Okay, wenn ich jetzt auf das Menüsymbol klicke, wird die Navigation angezeigt. Und wenn ich auf das Menüsymbol zurückklicke, wird es ausgeblendet. Im Moment funktioniert alles einwandfrei. Jetzt werde ich der Navigation einen kleinen reibungslosen Effekt verleihen . Fügen wir hier einen Übergang mit einem und mit einer Dauer von einer Sekunde zur anderen hinzu. Jetzt wird die Navigation mit einem sanften Effekt ein- und ausgeblendet. Ordnung, jetzt müssen wir uns um die linke und rechte Seite kümmern. Wir müssen die linke Seite verstecken. Ich werde keine linke Seite finden und ihr Opazität Null und Sichtbarkeit hinzufügen ihr Opazität Null und Sichtbarkeit Dann wähle ich bei der Klasse „ Keine Links“ aus. Navigiere. Dann schnappen wir uns diese beiden Zeilen. Ändern Sie die Werte. Wir brauchen Kapazität eins und eine sichtbare Sichtbarkeit. Ich werde hier einen Übergang hinzufügen. Dann brauchen wir alle. Die Dauer des Übergangs wird 1 Sekunde betragen. Aber abgesehen davon werde ich eine kleine Verzögerungszeit hinzufügen. Stellen wir es auf 2,7 Sekunden ein und überprüfen das Ergebnis. Wenn wir die Navigation anzeigen, erscheint das Bild auf der linken Seite mit einer kleinen Verzögerung. Wir benötigen standardmäßig den gleichen Übergang. Ich werde mir diese Codezeile schnappen. Fügen wir es hier hinzu und beseitigen wir die Verzögerungszeit. Okay, also alles funktioniert gut. Als nächstes müssen wir uns um die rechte Seite kümmern. Schauen wir uns das fertige Projekt an. Wenn Sie die rechte Seite sehen, meine ich, dass dieser Teil von der linken Seite kommt. Lass uns weitermachen und uns darum kümmern. Ich werde genug finden, dann werde ich es auf die linke Seite verschieben, indem transform translate x als den Wert verwende, den ich hier übergeben werde -200% Außerdem werde ich die Breite der genügend richtigen Elemente erhöhen der genügend richtigen Standardmäßig sollte es 100% sein . Dadurch wird unser Effekt schöner Jetzt müssen wir die Klasse Navigate mit genug verwenden, oder? Sobald wir auf das Menüsymbol klicken, sollten wir das Element auf die rechte Seite verschieben. Wir müssen x transformieren, übersetzen und der Wert wird Null. Außerdem werde ich die Breite der Elemente auf 50% erhöhen. Dann brauchen wir einen Übergang von 1 Sekunde. Okay, lassen Sie uns weitermachen und die Ergebnisse überprüfen. Wie Sie sehen können, funktioniert alles perfekt. Jetzt müssen wir uns standardmäßig um die Navigationselemente kümmern , ich werde sie ausblenden. Fügen wir hier Kapazität Null und Sichtbarkeit hinzu. Dann müssen wir wieder die Klassennavigation verwenden. Lassen Sie uns genügend Elemente auswählen und uns diese beiden Zeilen schnappen. Wir müssen die Link-Elemente sichtbar machen. Wir brauchen Opacity One und Sichtbarkeit sichtbar. Aber im Falle eines Übergangs benötigen wir unterschiedliche Verzögerungszeiten für die Link-Elemente, wie wir sie im fertigen Projekt haben Wie Sie sehen können, erscheinen sie in einigen Intervallen. Daher benötigen wir für jedes Navigationselement eine unterschiedliche Verzögerungszeit . Ich werde Nub-Elemente auswählen. Bei der Klassennavigation müssen wir das erste Nob-Element auswählen. Deshalb werde ich einen Child-Selector verwenden. Wir brauchen zuerst kein Objekt und müssen mit einer Deckkraft von 0,5 Sekunden übergehen Es wird die Dauer sein. Und wir brauchen auch die Verzögerungszeit von 1 Sekunde. Außerdem müssen wir hier Farbe hinzufügen. Denn wie Sie wissen, haben standardmäßig keine Elemente einen Farbübergang. Ich werde hier Farbe hinzufügen und diese Codezeile von hier aus entfernen. Die Dauer für die Farbe beträgt 0,3 Sekunden. Jetzt werde ich diesen Code viermal duplizieren. Dann ändere ich die Chat-Selektoren, die wir hier benötigen, das zweite Element und die Verzögerungszeit wird 1,2 Sekunden betragen Dann benötigen wir den dritten Artikel mit einer Verzögerungszeit von 1,4 Sekunden. Dann haben wir hier den vierten Punkt, 1,6 Sekunden, und schließlich den fünften Punkt, 1,8 Sekunden. Okay, lassen Sie uns weitermachen und die Ergebnisse überprüfen . Öffnen Sie die Navigation. Wie Sie sehen können, funktioniert alles perfekt. Also gut, das Einzige, was ich tun muss, ist mich um das Menüsymbol zu kümmern . Wir müssen diese Linien in einen Pfeil umwandeln, so wie wir es im fertigen Projekt haben. Lass uns weitermachen und das tun. Ich suche die Zeilen und wähle dann Zeile eins mit der Klasse Navigate aus. Im Fall der ersten Linie müssen wir also die Breite verringern und sie auf 50% erhöhen. Außerdem müssen wir die erste Linie verschieben und drehen. Wir müssen die Funktion transformieren und dann übersetzen. Der Wert von translate x wird 103% betragen. Außerdem müssen wir die Elemente um 0,5 Gramm entsprechend der Y-Achse bewegen 0,5 Gramm entsprechend der Y-Achse Außerdem müssen wir das Element entsprechend der Z x drehen . Der Wert wird 25 Grad betragen Okay, lassen Sie uns das Ergebnis überprüfen. Wie Sie sehen können, dreht sich die erste Linie und sie hat auch ihre Position geändert. Machen wir dasselbe für Zeile drei. Ich werde diesen Code duplizieren. Wir brauchen hier Zeile drei. Wir müssen hier ein Minuszeichen hinzufügen. Und wir müssen hier auch das Minuszeichen hinzufügen. Und auch. Wie Sie sehen können, bewegen sich die ersten dritten Zeilen perfekt. Jetzt müssen wir die Breite der zweiten Zeile erhöhen. Ich werde die zweite Zeile mit der Klasse auswählen. Navigiere und setze mit 100%. Wenn ich auf das Menüsymbol klicke, wird hier ein Pfeil angezeigt. Wir haben hier ein kleines Problem, sobald das Symbol in einen Pfeil umgewandelt wird. Und dann bewegen wir den Mauszeiger über das Symbol. Die Linien werden immer noch den Hover-Effekt haben, und das brauchen wir nicht, um das Problem zu beheben Ich werde Cloth Navigate verwenden. Dann verwende ich den Hover mit dem Menüsymbol, gefolgt von der ersten Zeile Wir brauchen dasselbe für Zeile drei. mit der Maus darüber fahre, setze ich auf zwei 50%. Was die zweite Zeile angeht, lassen Sie uns diesen Code duplizieren Werde diese Codezeile und ändere die Klassenzeile. Wir brauchen Zeile zwei. Im Fall von Zeile zwei müssen wir hier den linken Rand auf Null setzen. Wie Sie sehen können, haben wir hier nicht mehr den ganzen Effekt. Ordnung? Also das ist es eigentlich. Alles funktioniert gut. Und mit der Navigation sind wir fertig. Jetzt müssen wir weitermachen und mit der Erstellung des nächsten Abschnitts unseres Projekts beginnen . Und dafür fahren wir mit der nächsten Vorlesung fort. 10. HTML-Markup für den Abschnitt „Über uns“ erstellen: In der vorherigen Vorlesung haben wir die Arbeit an der Navigation abgeschlossen Alles sieht ziemlich gut aus und funktioniert perfekt. Jetzt müssen wir weitermachen und damit beginnen, den nächsten Abschnitt unserer Landingpage zu erstellen , nämlich den Abschnitt Über uns. Hier haben wir den Abschnitt „Über uns“. Es sieht ziemlich gut aus und ist einfach. Wie Sie sich erinnern, hat jeder Abschnitt auf der Landing Page seine eigene Seite. Ich meine, wenn ich hier klicke, gelangen wir zur At-Seite. Im Moment werde ich den Abschnitt „Über uns“ auf der Landingpage erstellen . Was die Seiten angeht, werden wir uns etwas später darum kümmern. Der Abschnitt Über uns besteht aus zwei Teilen. Wir haben die linke Seite, auf der wir die Nummer des Abschnitts und auch die Schaltfläche mit dem schönen und coolen Hover-Effekt sehen können Abschnitts und auch die Schaltfläche mit dem schönen und coolen Hover-Effekt Was die rechte Seite betrifft, haben wir hier einige Textelemente Okay, hier dreht sich alles um den Abschnitt „Über uns“. In dieser Vorlesung werde ich das HTML-Markup erstellen. Lassen Sie uns weitermachen und gleich nach der Kopfzeile neue Kommentare für den Abschnitt „Über uns“ einfügen Ich nenne das Thema Dann lass uns weitermachen und das Abschnitts-Tag mit dem Klassennamen öffnen . Als Nächstes füge ich Ihre Entwicklung , in der es um Inhalte gehen wird. Wie gesagt, wir werden zwei Teile haben, linke Seite und die rechte Seite. Ich öffne ein Tag mit einem Klassennamen über den verbleibenden Inhalt. Lass uns die rechte Seite erstellen. Ich werde den Klassennamen ändern, den wir hier brauchen. Direkt auf der linken Seite werden wir die Nummer des Abschnitts und auch die Schaltfläche haben. Ich öffne das Tag mit dem Klassennamen , in den ich das Spannelement mit der Nummer 01 einfügen werde Spannelement mit der Nummer 01 Dann öffne ich das Button-Tag mit dem Klassennamen main BTN Lassen Sie uns jetzt Ihre Link-Elemente einfügen. Ich werde dein Hash-Zeichen platzieren. Was den Text angeht, werde ich hier einfügen, Explore. Schauen wir uns die linke Seite an. Lass uns weitermachen und uns um die rechte Seite kümmern. der rechten Seite werde ich ein paar verschiedene Elemente einfügen. Ich werde hier, H, vier Überschriften mit der Überschrift M für den Schnellnamen einfügen H, vier Überschriften mit der Überschrift , das heißt klein. Lassen Sie uns hier etwas über uns einfügen. Ich werde diese Codezeile duplizieren. Wir benötigen ein Überschriftenelement, dann lautet der Name Abschnittsüberschrift LG Large. Was den Text angeht, werde ich mich einmischen, wer sind wir? Dann werden wir hier einen Abschnitt haben , der an dieses Element grenzt. Danach werde ich einen Absatz mit etwas Dummy-Text erstellen , den wir hier benötigen. Lorem 30. Dann werde ich einen weiteren Absatz mit dem Dummy-Text erstellen einen weiteren Absatz mit dem Dummy-Text In diesem Fall gehe ich zu Inter Lum 40. Okay, ich glaube, das ist es. Alles ist geschaffen. Lass uns den Browser überprüfen. Hier haben wir alle Elemente. Jetzt müssen wir weitermachen und einen Abschnitt dafür entwerfen. Lassen Sie uns weitermachen und mit der nächsten Vorlesung fortfahren. 11. Styling Über uns Abschnitt: Ordnung, in der vorherigen Vorlesung haben wir das HTML-Markup für unseren Abschnitt über uns erstellt , ich meine diesen Abschnitt hier. Jetzt müssen wir, wie gesagt, weitermachen und diese Elemente gestalten Kehren wir zum VS-Code in der CSS-Datei zurück. Direkt nach dem Header werde ich neue Kommentare für about einfügen. Dann wähle ich das Abschnittselement mit dem Klassennamen About aus. Das erste , was ich tun werde, ist die Breite zu definieren. Es wird 100% sein. Außerdem werde ich die Hintergrundfarbe ändern. Es wird 20 bis Null auf Null sein. Dann stelle ich die Polsterung an der Oberseite auf zehn ein. Die Null auf der rechten Seite, 15 RAM auf der Unterseite und Null auf der linken Seite Wie Sie sehen können, wird der Raum innerhalb des Abschnitts mithilfe von Polsterungen erzeugt Als Nächstes werde ich den Inhalt mithilfe von Flex-Büchern in der Mitte platzieren den Inhalt mithilfe von Flex-Büchern in der Mitte Wir brauchen Display Flex. Dann werde ich den Inhalt bis in die Mitte rechtfertigen. Außerdem brauchen wir ein Zentrum für Einzelposten, der Inhalt wird in der Mitte platziert. Als Nächstes werde ich mich um den Inhalt kümmern. Ich meine dieses Element hier. Lassen Sie uns weitermachen und über den Inhalt entscheiden. Ich werde innerhalb von Höhen definieren. Die Breite wird 100% betragen. Was die Höhe angeht, werde ich auch auf 100% setzen. Außerdem werde ich die linke und rechte Seite horizontal nebeneinander platzieren . Dafür werde ich Flex-Bücher verwenden. Wir brauchen Display-Flex. Okay, wie Sie sehen können, sind die linke und rechte horizontal nebeneinander angeordnet. Als nächstes werde ich mich um die linke Seite kümmern. Lassen Sie uns also weitermachen und etwa den verbleibenden Inhalt auswählen. Jede Seite, ich, linke und rechte Seite, nimmt 50% der Breite des Abschnitts ein. Ich setze die Breite auf 50% platziere dann den Text auf der rechten Seite. Lassen Sie uns weitermachen und den Text de Line nach rechts setzen. Außerdem werde ich mithilfe von Padding eine Polsterung auf der rechten Seite erstellen , Und der Wert wird sechs Runden sein. Okay, das ist es. Was die Entwicklung des Wrappers angeht, ich meine die verbleibenden Inhalte Als Nächstes werde ich mich um die Nummer des Abschnitts kümmern die Nummer des Abschnitts Lassen Sie uns fortfahren und den Abschnitt auswählen gefolgt vom Span-Element. Zuallererst werde ich das Telefon täglich wechseln. In diesem Fall verwende ich ein Telefon namens Sori. Dann werde ich die Telefongröße erhöhen. Es wird 25 Gramm sein, ich werde das Telefon mit dem Gewicht des Telefons mutiger machen Der Wert wird 900 sein. Jetzt werde ich das Bild als Hintergrund für den Text festlegen , so wie wir es in der fertigen Version haben. Ich werde dieselbe Technik verwenden, die wir bei der Überschrift im Website-Header verwendet haben . Wir benötigen hier die folgenden Eigenschaften. Das erste wird ein Hintergrundbild sein. Wir müssen die URL des Bildes definieren. Wir haben Ordnerbilder und ich werde G zwei auswählen. Dann müssen wir die Hintergrundgröße verwenden, es wird Titelbild sein. Außerdem benötigen wir einen Hintergrundclip, der Wert wird Text sein. Dann brauchen wir dieselbe Eigenschaft mit Webkey. Schließlich werde ich die Farbe auf transparent setzen. Okay, wie Sie sehen können, haben wir hier ein Bild als Hintergrund für die Abschnittsnummer. Das Letzte, was wir in Bezug auf dieses Element tun müssen , ist, einen kleinen Schatteneffekt zu erzeugen. Ich werde Tax Shadow mit den Werten 0,5 Ram, ein Ram verwenden . Und die Farbe wird RTP sein, eine schwarze Farbe mit einer Deckkraft von 0,2, die über der Abschnittsnummer Ich finde, es sieht ziemlich gut aus. Als nächstes müssen wir hier von unten nehmen, ich werde Main BTN auswählen Definieren wir innerhalb der Höhe. Die Breite wird 28 Ram sein, dann wird die Höhe sechs Ram sein. Ich werde die Hintergrundfarbe ändern. Lassen Sie uns hier die blaue Farbe verwenden. Dann werde ich den Standardrahmen loswerden. Setzen wir es auf „Keine“. Ich mache den Knopf rund. Dafür benötigen wir einen Grenzradius, aber den Wert von drei Rams, ich setze den Cursor auf den Punkt. Okay, schauen wir uns das Button-Element an. Als nächstes müssen wir uns um den Link kümmern , der sich in der Schaltfläche befindet. Lassen Sie uns also weitermachen und das Haupt-BTM auswählen , gefolgt von den Elementen Ich werde die Innenhöhe auf 100% setzen , sodass das Link-Element die gesamte Innenhöhe der Schaltfläche einnimmt die gesamte Innenhöhe der Schaltfläche Stellen wir den Wert auf 100% Als Nächstes ändere ich die Telefongröße Es wird 1,4 sein. Da ich das Telefon zum Blinken bringen werde, müssen wir den Text in Großbuchstaben umwandeln. Lassen Sie uns außerdem etwas Abstand zwischen den Buchstaben schaffen. Stellen wir es auf 0,3 Ram ein. Und zum Schluss werde ich den Text weiß machen. Der Button sieht ziemlich gut aus. Als Nächstes werde ich den Klick-Effekt erstellen. Dafür müssen wir eine Pseudoklasse namens active verwenden. Und wir müssen übersetzen, warum der Wert 0.2 Run sein wird . Wie Sie sehen können, haben wir hier einen schönen und coolen In Ordnung, platzieren wir diesen Code hinter dem Haupt-BTN. Jetzt werde ich den Hover-Effekt erzeugen. Ich meine diesen schönen und coolen Hover-Effekt. Dafür benötigen wir vorher Pseudoelemente. Lassen Sie uns weitermachen und Haupt-BTN auswählen, gefolgt vom Before-Pseudoelement Zuallererst müssen wir den Inhalt definieren. Es wird leer sein. Dann werde ich mich innerhalb der Höhen bewegen, beide auf 100%. Dann müssen wir den Hintergrund ändern. Ich werde einen linearen Farbverlauf verwenden. Ich werde die Richtung der Farbe ändern. Der Übergang erfolgt nach zwei Rechten, dann wird die erste Farbe transparent sein, dann werden wir weiße Farbe haben. Dann nehme ich die dritte Farbe, die transparent sein wird. Im Moment ist das Element nicht sichtbar, weil wir die Position definieren müssen. Es wird absolut sein. Außerdem benötigen wir die relative Position für das Haupt-BTN, da es sich um ein übergeordnetes Element handelt Und wir werden das vorherige Element entsprechend dem übergeordneten Element positionieren Element entsprechend dem übergeordneten Element Ich werde hier die Position hinzufügen, an der absolute relative Elemente sichtbar sein sollten. Hier haben wir die vorherigen Pseudoelemente. Lass uns weitermachen und die Position ändern. Ich werde die Position auf Null setzen. Was die linke Position angeht, wird es -100% sein. Außerdem werde ich die Elemente verzerren Wir müssen die Funktion Skew X transformieren. Wir müssen das Element entlang der X-Achse neigen. Lassen Sie uns den Wert auf -30 Grad setzen. Hier haben wir das Element vor dem Element. Sobald wir den Mauszeiger über die Schaltfläche bewegen, sollten wir das Element auf die rechte Seite Ich wähle das Haupt-BTN aus, gefolgt von der Hover-Klasse, und dann benötigen wir Ich werde das Element auf die rechte Seite verschieben. Ich werde die linke Position auf 100% setzen . Wenn ich jetzt mit der Maus über die Schaltfläche fahre, bewegt sich das vorherige Element auf die rechte Seite Eigentlich müssen wir den Effekt glatter machen. Wir brauchen einen Übergang. Ich werde den Übergang vor den Suit-Elementen hinzufügen. Er muss 0,3 Sekunden übrig bleiben. Wie Sie jetzt sehen können, wurde der Effekt glatter und das Einzige , was wir tun müssen, ist Vorher-To-Do-Element auszublenden Dafür verwende ich Overflow Heated. Okay, das sitzt über dem Boden. Wir haben hier, nett und cool. Tatsächlich werde ich mich als Nächstes jedoch um die rechte Seite kümmern. Lassen Sie uns weitermachen und „Über den Inhalt“ auswählen. Richtig? Ich definiere mit, es werden 50% sein, dann brauchen wir, ich setze die Polsterung auf acht Ram oben, dann Null auf der rechten Seite, Null auf der Unterseite und sechs Ram auf der rechten Seite Danach werde ich die Überschriften anpassen. Lass uns weitermachen und mit dem kleinen beginnen. Ich werde die Abschnittsüberschrift SM auswählen. Lassen Sie uns die Telefongröße auf 1.2 Ram einstellen. Dann brauchen wir das Gewicht des Telefons, es wird 300 sein. Ich werde Text in Großbuchstaben umwandeln. Dann benötigen wir einen Buchstabenabstand , um einen gewissen Abstand zwischen den Buchstaben zu schaffen. Es wird 0,5 Ram sein. Schließlich werde ich die Farbe der Überschrift ändern. Verwenden wir die blaue Farbe. Okay? Die erste Überschrift, die kleine, sieht nett aus. Als Nächstes müssen wir uns hier der zweiten Überschrift zuwenden. Eigentlich werde ich diesen Code duplizieren. Lass uns den Klassennamen ändern. Wir brauchen hier LG. Dann wird die Telefongröße drei Ram betragen. Dann brauchen wir die Schriftstärke 300. Außerdem werde ich hier die Texttransformation in Großbuchstaben belassen. Dann wird der Buchstabenabstand 0,3 Ram betragen. Was die Farbe angeht, werde ich sie weiß machen. Ich werde hier den Rand drei Ram oben und unten und Null auf der linken und rechten Seite der zweiten Überschrift hinzufügen Ram oben und unten und Null auf . Sieht ziemlich nett aus. Als nächstes müssen wir hier die Abschnittsgrenze nehmen. Ich meine dieses Album hier. Lassen Sie uns weitermachen und den Abschnittsrand auswählen. Ich werde mit der Höhe definieren. Die Breite wird 50 Ram sein, dann wird die Höhe 0,1 Ram sein. Lass uns die Hintergrundfarbe ändern. Ich werde die Farbe Grau verwenden, 333. Schließlich benötigen wir einen Rand an der Unterseite Stellen wir ihn auf drei Ram ein. Okay, hier haben wir also die Grenze. Wenn wir uns das fertige Projekt ansehen, werden Sie die blauen Elemente am Anfang der Abschnittsgrenze sehen . Ich werde dieses Element nach den Elementen erstellen . Lassen Sie uns weitermachen und den Abschnittsrand auswählen . Eigentlich brauchen wir hier. Nach dem Element werde ich den Inhalt definieren. Es wird leer sein. Dann definiere ich innerhalb der Höhe. Die Breite wird sieben Ram betragen. Dann brauchen wir Höhe, es werden 0,7 Ram sein. Ändere auch die Hintergrundfarbe. Lassen Sie uns hier die blaue Farbe verwenden. Dann müssen wir die Position der Elemente definieren. Lassen Sie uns die Position auf absolut setzen. Wie Sie bereits vermutet haben, benötigen wir die relative Position für das übergeordnete Element, da wir die Position hinter dem Element entsprechend dem Abschnittsrand positionieren werden Position hinter dem , der ein übergeordnetes Element ist Wir benötigen hier die Eigenschaften top und left, beide müssen gleich Null sein Okay? Das ist es. Wir haben hier eine Abschnittsgrenze mit dieser schönen Ergänzung. Das einzige , was wir tun müssen , ist die Absätze anzupassen. Wir haben zwei Absätze, ich werde ungefähr auswählen, lassen Sie uns auf 250 setzen. Dann definiere ich die Telefongröße. Es wird 1,4 sein, also ändern wir die Farbe, machen wir sie weiß. Dann werde ich die Zeilenhöhe ändern. Wir brauchen etwas Abstand zwischen den Zeilen. Lassen Sie uns weitermachen und die Zeilenhöhe auswählen. Der Wert wird 3,5 Ram sein. Und wir brauchen auch etwas Abstand zwischen den beiden Absätzen. Lassen Sie uns den unteren Rand wieder auf den unteren Rand setzen , damit Abschnitt, der ungefähr sitzt, ziemlich gut aussieht und wir sind mit dem Abschnitt fertig. Als Nächstes müssen wir uns um den nächsten Abschnitt kümmern , der ein Buchabschnitt sein wird. Lassen Sie uns dazu mit der nächsten Vorlesung fortfahren. 12. HTML-Markup für Bücher erstellen Abschnitt: In der vorherigen Vorlesung haben wir den Abschnitt Über uns gestaltet. Jetzt werden wir, wie gesagt, den nächsten Abschnitt unserer Landingpage erstellen Schauen wir uns das fertige Projekt an. Der nächste Abschnitt wird der Buchbereich sein. Wie Sie sehen können, besteht er aus einer Kopfzeile. Dann haben wir drei verschiedene Bücher und diese Cover haben einen schönen und coolen Over-Effekt. Standardmäßig sind sie schwarz-weiß. Und sobald wir mit der Maus über die Cover fahren, erhalten sie ihre ursprüngliche Farbe Unten sehen Sie den Namen des Buches und auch den Autor des Buches Unten sehen Sie die Schaltfläche „Alle anzeigen“. Diese Schaltfläche ähnelt der Schaltfläche , die wir im letzten Abschnitt erstellt haben. Wenn wir auf die Schaltfläche klicken, navigieren wir zur Bücherseite. Im Moment werden wir den Abschnitt erstellen und dann werden wir die Seite später bearbeiten. Okay, in dieser Vorlesung werde ich das HTML-Markup für den Buchbereich erstellen Lassen Sie uns neue Kommentare für Bücher einfügen. Dann öffne ich die Abschnittselemente mit den Klassennamenbüchern , in die ich tiefere Elemente mit dem Inhalt der Klassennamenbücher einfügen werde mit dem Inhalt der Klassennamenbücher Dieses Element wird den gesamten Inhalt des Buchabschnitts enthalten . Innerhalb des Inhaltselements des Buches werden wir drei verschiedene Teile haben. Wir werden Bookstop haben, das die Überschrift des Abschnitts enthalten wird Überschrift des Abschnitts enthalten Dann haben wir die Liste der Bücher. Und danach erstellen wir den Button. Das erste Element , das ich erstellen werde, wird Bookstop sein Es wird den Header des Buches enthalten. Ich werde mir den Header aus dem vorherigen Abschnitt holen. Ich meine, wir brauchen diese beiden Überschriftenelemente und auch den Abschnittsrand. Nehmen wir diese drei Elemente und fügen sie hier ein. Ich werde den Inhalt ändern, den wir hier benötigen. Bücher, Die Überschriftenelemente von H One werden unsere Bestseller sein. Wir brauchen ihre Bestseller. Als Nächstes hole ich mir die Abschnittsnummer aus dem vorherigen Abschnitt. Nehmen wir dieses Element und fügen es direkt nach der Kopfzeile ein. Wir müssen dieses Panelement ändern. Es wird 02 sein. Wie Sie in der Kopfzeile sehen können, diese Überschriften und der Abschnittsrand sowie sind diese Überschriften und der Abschnittsrand sowie die Abschnittsnummer bereits formatiert Da wir im vorherigen Abschnitt Stile für die Elemente erstellt haben, müssen wir sie in diesem Abschnitt nur korrekt ausrichten Als Nächstes füge ich Ihre Bücherliste ein , in der ich das Tag mit dem Klassennamenbuch öffnen werde. Jedes Buch wird das Bild enthalten, ich meine das Titelbild und drei Span-Elemente für den Namen des Buches. Außerdem werden wir hier diese Grenze haben. Und unten können Sie den Autor des Buches sehen. Wie gesagt, wir brauchen drei verschiedene Elemente. Das erste wird Image sein. Ich werde ein Bild aus dem Bilderordner auswählen. Das erste Bild wird Buch eins sein. Dann werde ich Pan-Elemente mit dem Klassennamen und dem Buchnamen einrichten. Ich gebe dir den Namen des ersten Buches. Es wird das Abenteuer von Tom Sawyer sein. Dann werden wir hier ein weiteres Span-Element mit dem Klassennamenbuch haben. Schließlich benötigen wir dritte Span-Elemente mit dem Klassennamenbuch andere. Der Autor dieses Buches ist Mark Twain. Ich werde Mark Twain gewinnen. Okay. In diesem Abschnitt werden wir drei verschiedene Bücher haben. Daher werde ich diesen Code zweimal duplizieren und die Details ändern, die wir hier benötigen. Buch zwei. Es wird so sein, fügen wir es hier ein. Vollidiot. Und der Autor ist Fody Dann haben wir hier Buch Nummer drei. Der Name des Buches ist Der Graf von Monte Crystal. Der Autor des Buches ist Alexander. Lassen Sie uns also über die Bücher sprechen. Als Nächstes müssen wir den Button erstellen, eigentlich nehme ich den Button aus dem vorherigen Abschnitt. Holen wir uns diesen Code. Platziere es hier. Ich werde den Text der Link-Elemente ändern. Es wird Ansicht A sein, also ich denke, das entspricht ungefähr dem HTML-Markup des Buchabschnitts Auch hier sind die Kopfzeile und die Abschnittsnummer bereits formatiert, ebenso wie der Als Nächstes müssen wir den Rest der Elemente gestalten und uns auch um die Ausrichtungen, die Elemente im Abschnitt kümmern Elemente im Abschnitt Lassen Sie uns dazu mit der nächsten Vorlesung fortfahren. 13. Abschnitt für Styling-Bücher: Ordnung, also in der vorherigen Lektion haben wir das HTML-Markup für den Buchbereich erstellt das HTML-Markup für den Buchbereich Wie gesagt, wir müssen diesen Abschnitt formatieren. Einige der Elemente sind bereits so gestaltet, wie die Kopfzeile, die Abschnittsnummer und auch die Hauptschaltfläche unten Wir müssen diese Elemente korrekt ausrichten und auch die übrigen Elemente formatieren Gehen wir zum VS-Code und fügen gleich nach dem Abschnitt „Über uns“ die neuen Commons für den Buchbereich ein. Dann wähle ich die Abschnittselemente mit den Büchern der Klasse Neun aus. Definieren wir die Breite. Es wird 100% sein. Dann werde ich den Inhalt mithilfe von Flex-Büchern in der Mitte platzieren. Wir müssen Flex anzeigen dann das Inhaltszentrum ausrichten und das Artikelzentrum ausrichten. Außerdem werde ich mit Putting etwas Platz innerhalb des Abschnitts schaffen . Es werden zehn Ram an der Oberseite sein, dann Null auf der rechten Seite, 15 Ram an der Unterseite und Null auf der linken Seite. Okay, der Raum innerhalb des Abschnitts wird geschaffen und auch der Inhalt wird in der Mitte verschoben. Als Nächstes werde ich mich um die Oberseite dieses Abschnitts kümmern . Lassen Sie uns also weitermachen und Bücher auswählen. Oben. Ich werde die Elemente, ich meine die Flex-Elemente, horizontal nebeneinander platzieren. Dafür benötigen wir Display Flex. Dann werde ich den Inhalt mithilfe von Justify Content Center und Align Items Center zentrieren. Außerdem werde ich mithilfe des Randes Platz am unteren Rand schaffen . Kinder unter den zehn untersten Kindern können sehen, dass die Kopfzeile und die Nummer des Abschnitts horizontal nebeneinander angeordnet sind. Als Nächstes nehme ich hier die Kopfzeile. Lassen Sie uns weitermachen und die Kopfzeile der Bücher auswählen. Ich werde den Text auf der rechten Seite ausrichten. Wir müssen den Text richtig ausrichten. Außerdem werde ich mit dem Rand etwas Platz auf der rechten Seite schaffen , oder? Der Wert wird zehn sein. Okay? Wie Sie sehen können, befinden sich die Überschriften auf der rechten Seite und wir haben einen Leerraum zwischen der Überschrift und der Nummer. Eigentlich müssen wir diese blauen Elemente auf die rechte Seite verschieben diese blauen Elemente auf die rechte Seite Lassen Sie uns dazu weitermachen und nach dem Element auswählen. Aber zuerst müssen wir den Header des Buches auswählen. Dann brauchen wir den Abschnittsrand gefolgt vom After-Element. Ich werde die rechte Position auf Null setzen. Wenn wir uns die Standardstile für den Abschnittsrand ansehen , ich meine das Element danach, finden Sie hier die linke Position. Wenn wir genau hier sind, nur die rechte Position ohne die linke Position, dann wird die Ausrichtung nicht funktionieren. Korrigiere mich. Wenn wir es speichern und zum Browser gehen, können Sie sehen, dass sich das After-Element immer noch auf der linken Seite befindet. Wir brauchen hier links, um automatisch zu sein. Wie Sie sehen können, befindet sich der Zugriff auf das Element jetzt auf der rechten Seite. Ordnung, danach kümmere ich mich um die Nummer. Eigentlich brauchen wir ein anderes Hintergrundbild für die Nummer. Ich werde das Span-Element auswählen, aber zuerst benötigen wir Bücher für den Abschnitt, benötigen wir Bücher für den gefolgt vom Span-Element. Lassen Sie uns das Hintergrundbild ändern. Ich wähle ein Bild aus dem Bilderordner aus. Es wird Text BG drei sein. Schauen wir uns das Projekt an. Hier haben wir das Hintergrundbild und es unterscheidet sich vom vorherigen Hintergrundbild. Ich denke, wir können das Hintergrundbild leicht verschieben , um das Ergebnis ein bisschen schöner zu machen Ich werde die Position des Hintergrundbildes ändern. Wir benötigen eine Hintergrundposition als Werte. Ich werde mich jetzt auf 50 und 75 % konzentrieren. Das Hintergrundbild wird horizontal auf 50% der Breite des Containers vom auf 50% der Breite des Containers vom linken Rand und 75% der Containerhöhe vom oberen Rand vertikal Wenn Sie sich einen rechteckigen Behälter vorstellen, wird das Hintergrundbild so platziert, dass seine Mitte horizontal mit der Mitte des Containers und sein unterer Rand mit 75% der Höhe des Containers von oben ausgerichtet 75% der Höhe des Containers von Hoffentlich war es für dich klar. Als Nächstes müssen wir uns um die Bücher kümmern. Lass uns weitermachen und auswählen, Wir brauchen deine Liste. Ich werde Flexbox benutzen. Lassen Sie uns das Display auf Flex setzen. Dann werde ich die Breite des Buches ändern. Wählen wir das Buch aus und stellen es auf 35 Fram Eigentlich müssen wir die Breite der Bilder ändern , weil sie momentan zu groß sind Lass uns weitermachen und Buch auswählen. Gefolgt vom Bildelement. Ich nehme 30 Ram für die Höhe. Stellen wir es auf A Wie Sie jetzt sehen können, wurden die Bilder kleiner. Eigentlich haben wir früher Display-Flaggen gehört und deshalb sollten die Bücher horizontal in einer Reihe angeordnet werden. Nun, wir haben hier vielleicht einen Fehler. Nun, wir brauchen hier eine Bücherliste und keine Bücherliste. Jetzt sollte das Problem behoben sein. Wie Sie sehen, sind die Bücher horizontal in einer Reihe angeordnet. Als Nächstes werde ich das Buch personalisieren. Ich werde hier ein Display hinzufügen. Wir werden die Elemente in der Spalte vertikal ausrichten. Ich werde Flex-Bücher verwenden. Lassen Sie uns das Display Flex einstellen. Dann müssen wir auch die Richtung ändern, in der es sich um eine Spalte handeln soll Ich werde die Elemente in der Mitte platzieren. Ich meine horizontal in der Mitte. Und lassen Sie uns das Ergebnis überprüfen. Wie Sie sehen können, befinden sich die Span-Elemente in der Mitte. Ich meine, die Textelemente sind in der Mitte platziert. Als Nächstes setze ich den Rand auf sechs Ram , um Platz um das Buch herum zu schaffen, sodass es sich jetzt um die Bücher herum befindet Platz um das Buch herum zu schaffen . Als Nächstes werde ich mich um die Titelbilder kümmern. Wir werden sie schwarz-weiß machen. Um das zu tun, müssen wir, wie Sie sich erinnern, einen Filter mit Graustufenfunktion verwenden. Ich werde mich zu 100% einmischen, jetzt sind die Bilder schwarz-weiß. Danach mache ich sie etwas abgerundet, wichtiger Radius ein Ram. Und ich werde auch den Schatteneffekt erzeugen. Verwenden wir den Buchschatten mit dem Wert 01 Ram, dann drei Ram, der Farbe. Verwenden wir die schwarze Farbe mit der Deckkraft 0,4. Ich werde den Cursor ändern, ihn zum Zeiger machen Okay, die Bücher sehen nett aus. Als Nächstes müssen wir den Hover-Effekt erzeugen. Sobald wir mit der Maus über die Titelbilder fahren, sollten wir hier wieder die Originalfarbe Ich wähle das Buchbild aus. Eigentlich lassen wir das Buch mit dem Hover hier stehen. Wählen Sie dann Bild aus. Wir müssen einen Filter mit der Graustufenfunktion verwenden. Wir müssen es auf Null setzen, wie Sie sehen können. Jetzt bekommen wir hier die Originalfarbe. Lassen Sie uns den Effekt glatter machen. Übergangsfilter, die Dauer wird 1 Sekunde betragen, okay, also sieht alles perfekt aus Als Nächstes müssen wir uns hier um diese Span-Elemente kümmern. Lass uns weitermachen und mit dem Buchnamen beginnen. Ich werde die Telefonfamilie wechseln. Es wird in Co-Skript-Kursivschrift geschrieben. Dann werde ich die Telefonseite wechseln. Es wird 1,4 Ram sein. Ich werde Text in Großbuchstaben umwandeln. Dann müssen wir die Farbe blau haben. Schaffen Sie etwas Abstand zwischen den Buchstaben, sagen wir 2.1, und schaffen Sie etwas Platz an der Ober- und Unterseite. Machen wir Margin 3.0 Okay, die Buchnamen sehen also eigentlich ganz nett aus. Sobald wir mit der Maus über diese Paneele fahren, ändert das Bild die Eigentlich finde ich, dass es nicht ganz gut ist. Ich hatte recht, als ich hinzufügen wollte den Hover-Effekt dem Bild und nicht dem Buch Fügen wir dem Bild den Hover hinzu. Ich denke, es wäre richtiger. Okay, jetzt, ich denke, wir haben bessere Ergebnisse. Sobald wir mit der Maus über diese Spinelemente fahren, behalten die Bilder ihre schwarz-weiße Okay, lassen Sie uns weitermachen und uns um die Buchzeile kümmern. Ich werde die Breite auf zehn Ram setzen, dann wird die Höhe 0,1 Ram sein. Lass uns die Hintergrundfarbe ändern. Es wird RGBA-Farbe sein. Ich werde weiße Farbe verwenden. Wir brauchen 25053 mal, dann ändere ich die Deckkraft Machen wir 0,1 draus. Erzeugt schließlich mithilfe des Randes einen Raum an der Unterseite. Unten mit dem Wert drei Ram. Okay, hier haben wir die Linien, sie sehen ziemlich gut aus. Als nächstes müssen wir uns um die Autoren der Bücher kümmern. Lassen Sie uns also weitermachen und den Buchautor auswählen. Eigentlich werde ich mir diesen Code hier holen. Holen Sie sich eine kostenlose Telefonfamilie. Ändern Sie nicht die Telefongröße. Es werden zwei sein. Wir brauchen eine Transformation pro Fall. Außerdem wird die Farbe weiß sein. Dann mache ich einen Abstand von 0,5 Ram. Was die Marge angeht, werde ich sie loswerden. Okay? Also, wie Sie sehen können, sehen die Autoren nett aus. Aber wir haben hier ein kleines Problem. Dafür müssen wir den Text in der Mitte ausrichten. Ich werde hier eine Textzeile in der Mitte hinzufügen. Es sollte das Problem beheben. Okay, alles sieht gut aus. Als nächstes werde ich mich um den Hauptboden kümmern. Wir sollten es in der Mitte des Abschnitts platzieren. Und wir brauchen auch etwas Platz zwischen den Büchern und dem Boden. Ich wähle Bücher aus, Inhalt gefolgt von der Haupt-BTN. Lassen Sie uns Platz schaffen, indem wir den Rand, die obersten zehn Ram, verwenden. Um den unteren Teil in der Mitte zu platzieren. Ich wähle den Inhalt des Buchs aus und verwende nur Text in der Mitte der Zeile. Okay, das passt, wir haben den Buchbereich gestylt. Alles sieht ziemlich gut aus. Als nächstes müssen wir unseren nächsten Abschnitt bearbeiten , der der Abschnitt mit den Testimonials sein wird Lassen Sie uns dazu mit der nächsten Vorlesung fortfahren. 14. HTML-Markup für Erfahrungsberichte erstellen: In der letzten Vorlesung haben wir die Arbeit am Buchteil abgeschlossen Wie Sie sehen können, ist es gefliest und sieht ziemlich gut aus. Nun, wie gesagt, werden wir weitermachen und mit der Erstellung des nächsten Abschnitts unserer Kreditseite beginnen. Der nächste Abschnitt wird der Abschnitt mit Testimonials sein. Hier haben wir den Abschnitt mit Testimonials. Er besteht aus verschiedenen Elementen. Wir haben hier die Oberseite, ich meine die Kopfzeile und die Abschnittsnummer mit dem Hintergrundbild. Dann kannst du das Feedback sehen. Einer der Kunden, wir haben hier, schwarz-weiß, ein Bild des Kunden. Und sobald wir mit der Maus über das Bild fahren, nimmt es seine ursprüngliche Farbe Wir haben diesen Effekt in diesem Projekt ein paar Mal verwendet in diesem Projekt ein paar Mal Unten sehen Sie die Zitate aus dem Feedback des Kunden. Und unten sehen Sie den unteren Teil, Weitere Informationen. Wenn ich auf diese Schaltfläche klicke, werden wir zur Seite mit den Testimonials weitergeleitet, auf der Sie den Slider mit den Testimonials finden Es funktioniert. Wir haben hier ein paar verschiedene Testimonials des Kunden Ordnung, also in diesem Vortrag werden wir das HTML-Markup für den Testimonial-Bereich erstellen , dann werden wir es wie für die Testimonial-Seite gestalten, darum kümmern wir uns Okay, lassen Sie uns weitermachen und um das HTML-Markup zu erstellen, werde ich Ihre neuen Kommentare für den Testimonial-Bereich einfügen für Dann öffne ich den Abschnitts-Tag mit dem Klassennamen Der Abschnitt mit den Zeugnissen wird aus drei verschiedenen Teilen bestehen Wir werden oben auf der Oberseite ein Zeugnis haben , das die Abschnittsnummer und die Überschrift enthält die Abschnittsnummer und die Überschrift Dann werden wir Feedback haben. Und wir werden auch das untere Feld haben, ich öffne das Tag mit dem Klassennamen als Zeugnis, in das ich den Abschnitt einfüge Ändern wir die Zahl, die wir hier brauchen, drei. Und ich werde hier auch eine Kopfzeile einfügen. Lassen Sie uns eine Kopfzeile nach der Abschnittsnummer einfügen. Ich werde Bücher durch Testimonials ersetzen. Außerdem brauchen wir Kunden statt Bücher. Und dann werde ich hier Testimonials einfügen. Okay, das war's mit Testimonial Top. Dann werde ich ein Tag mit dem Feedback zum Klassennamen erstellen Tag mit dem Feedback zum Klassennamen Im Feedback werde ich ein weiteres div-Tag öffnen. Vordergrund steht das Feedback , in das ich ein Bild des Kunden einfügen werde. Wählen wir Bild aus dem Bilderordner aus. Wir brauchen den Namen des Kunden. Dann öffne ich ein Tag mit der Überschrift Feedback zum Klassennamen , in das ich ein Überschriftenelement einfügen werde, wir brauchen ihre Kunden. Dann werde ich hier wieder Spin-Elemente mit dem Text-Feedback einfügen . Danach öffne ich einen weiteren tiefen Zug und es wird Feedback Bottom sein In das untere Feedback-Element füge ich ein, welches das Hintergrund-BG sein wird Diese Elemente werden leer sein. Als Nächstes brauchen wir , in dem ich Deep Tu mit dem Klassennamen he öffnen werde. Dann müssen wir das Icon versichern. Lassen Sie uns Elemente verwenden, bei denen für die Klassen ein festes Anführungszeichen übrig ist. Dann füge ich nach den Elementen H eine Überschrift ein. Diese Überschrift wird für den Namen des Kunden bestimmt sein. Lassen Sie uns Robert Smith einmischen. Dann brauchen wir nach H einem Überschriftenelement ein zweites Symbol für. Lass uns das kopieren. Fügen Sie es hier ein. Und statt sich links einzumischen, oder? Ordnung. Als Nächstes werde ich eine neue Entwicklung mit dem Codetext des Klassennamens in diesem Element erstellen. Ich öffne Elemente mit ein paar, ähm, wir schreiben, wenn du Lorem hörst, lass uns 30 Wörter einfügen Und dann werde ich nach dem Körper Sterne einfügen. Wir brauchen Divot mit dem Klassennamen Sterne. Dann werde ich deine E-Elemente mit der Klasse Solid Wir werden fünf Sterne haben, also werde ich diesen Code viermal duplizieren Endlich bin ich mir ganz unten sicher, ich meine ganz unten Fügen wir hier den Klassennamen PTN hinzu und versichern Sie A-Elemente als Text Ich gehe zu Insepe, um mehr zu erfahren. In Ordnung, ich denke, das gehört in diesen Bereich. Wir haben viele verschiedene HTML-Elemente. Ich hoffe, dass alles korrekt ist. Das werden wir später sehen. Lass uns den Browser überprüfen. Wie Sie sehen können, haben wir hier alle Elemente wie den vorherigen Abschnitt, die Kopfzeile und die Abschnittsnummer bereits formatiert Sowie die Haupttaste. Wir müssen diese Elemente ausrichten und auch die verbleibenden Elemente anpassen. Lassen Sie uns dazu mit der nächsten Vorlesung fortfahren. 15. Abschnitt mit Styling-Erfahrungsberichten: In der vorherigen Vorlesung haben wir das HDML-Markup für unseren Testimonial-Bereich erstellt HDML-Markup für unseren Wir haben hier alle Elemente, einige davon sind bereits formatiert, weil wir in den vorherigen Abschnitten ähnliche Elemente hatten in den vorherigen Abschnitten ähnliche Elemente Aber jetzt müssen wir uns um die Ausrichtung dieser stilisierten Elemente kümmern die Ausrichtung Was die übrigen Elemente angeht , die wir in der letzten Lektion erstellt haben, müssen wir uns um sie kümmern und sie stilisieren Okay, gehen wir zum VS-Code und in der CSS-Datei direkt nach dem Buchabschnitt werde ich neue Kommentare für die Testimonials einfügen Dann wähle ich das Abschnittselement mit den Zeugnissen der Klassennamen aus Zuallererst werde ich die Höhe des Abschnitts definieren Es wird eine Höhe von 160 Viewports haben. Halten wir uns auch daran, es zu 100% zu machen . Dann werde ich die Hintergrundfarbe überprüfen Es wird 202020 sein. Hier haben wir das Abschnittselement mit einer anderen Hintergrundfarbe Als Nächstes werde ich die Elemente mithilfe von Flexbooks ausrichten. Ich werde die Anzeige auf Flex einstellen. Dann müssen wir die Elemente in der Spalte vertikal ausrichten. Daher müssen wir die Flex-Richtung für die Wertespalte verwenden . Außerdem werde ich die Elemente mithilfe von Align Items Center in der Mitte ausrichten. Lassen Sie uns abschließend etwas Platz innerhalb des Abschnitts schaffen , ich würde sagen, klopfen bis zehn Widder an der Oberseite, dann Null an der rechten Seite, 15 Ram an der Unterseite und Null an der linken Seite Okay, wie Sie sehen können, ist der Inhalt in der Mitte platziert. Als Nächstes werde ich mich um den Anfang des Abschnitts kümmern, ich meine die Kopfzeile und die Abschnittsnummer. Lassen Sie uns weitermachen und Testimonial Top auswählen. Lassen Sie uns erneut die Flexbox verwenden, da wir die Kopfzeile und die Abschnittsnummer horizontal nebeneinander platzieren die Abschnittsnummer horizontal nebeneinander Wir brauchen Display Flex. Dann platziere ich den Inhalt mithilfe eines Einzelpostenzentrums in der Mitte. Und außerdem müssen wir hier das Inhaltscenter begründen. Lassen Sie uns zum Schluss mit Rand etwas Platz am unteren Rand schaffen , Bottom Five, okay? Wie Sie sehen können, werden die Abschnittsnummer und die Kopfzeile nebeneinander platziert. Als Nächstes müssen wir das Hintergrundbild für die Abschnittsnummer ändern , und wir benötigen auch etwas Abstand zwischen diesen beiden Elementen. Lassen Sie uns weitermachen und das Hintergrundbild der Abschnittsnummer ändern . Lassen Sie uns fortfahren und Testimonial Stop auswählen, gefolgt von der Abschnittsnummer. Dann brauchen wir Span-Element, wir brauchen hier ein Hintergrundbild Lassen Sie uns die URL definieren. Wir brauchen einen Bilderordner. Und ich werde ein Bild mit dem Namen Text G33 auswählen, aber vier. Dann werde ich etwas Platz auf der rechten Seite der Zahl schaffen Ich nehme diesen Selektor von hier aus und mache das Tempo Lassen Sie uns den Rand auf zehn setzen Okay, setzen wir uns an die obere Seite des Abschnitts. Als Nächstes müssen wir uns um das Feedback kümmern. Ich meine dieses Element hier. Lassen Sie uns weitermachen und Feedback auswählen. Ich werde mit der Höhe definieren. Die Breite wird 50% betragen. Was die Höhe angeht, werde ich sie auf 60% setzen Dann verwenden wir wieder Flex-Bücher. Wir müssen die Elemente, die Flex-Elemente, vertikal in der Spalte ausrichten . Die Flex-Richtung muss der Spalte entsprechen. Außerdem müssen wir die Elemente in der Mitte ausrichten , sodass die Elemente ausgerichtet sind. Als Nächstes werde ich mich oben um das Feedback kümmern. Ich meine dieses Element hier. Es beinhaltet das Bild des Kunden und auch die Überschrift. Lassen Sie uns weitermachen und oben Feedback auswählen. Verwenden Sie erneut die Flexbox, wir müssen die Elemente in der Mitte ausrichten. Dann werde ich etwas Platz auf der linken Seite schaffen , indem ich die linke Polsterung verwende, sagen wir, es sind sieben Ram Außerdem benötigen wir etwas Platz am unteren Rand, indem wir Rand verwenden , unten fünf Ram Ordnung, danach werde ich mich um das Bild kümmern , weil es momentan zu groß ist. Lassen Sie uns also weitermachen und Feedback oben auswählen , gefolgt vom Bildelement. Stellen wir die Höhe auf 30 Ram ein. Dann müssen wir das Bild anpassen. Ich werde Object Fit mit dem Value Cover verwenden. Wie Sie sehen können, wurde das Bild kleiner. Als Nächstes werde ich es mithilfe des Randradius abrunden. Stellen wir es auf zwei Ram ein. Außerdem brauchen wir, ich werde 0,8 Ram fest machen. Die Farbe wird dieselbe Farbe sein , die wir für die Hintergrundfarbe des Abschnitts verwenden . Ich meine 202020. Außerdem brauchen wir etwas Platz auf der rechten Seite mit Margin, rechts, drei RAM Schauen wir uns die Ergebnisse an. Okay, das Bild sieht gut aus. Als nächstes müssen wir es schwarz-weiß machen. Außerdem werde ich den gleichen Hover-Effekt erzeugen , den wir in diesem Projekt ein paar Mal verwendet haben in diesem Projekt ein paar Mal verwendet Lassen Sie uns erneut den Filter mit der Graustufenfunktion verwenden, um ihn auf 100% zu setzen. Dann müssen wir auch den Cursor zum Zeigen bewegen, okay Wie Sie sehen können, wurde das Bild schwarz-weiß. Lassen Sie uns einen Hover-Effekt hinzufügen. Ich wähle Feedback, oberstes Bild für die Hover-Pols, wir benötigen einen Filter mit Graustufenfunktion und er wird Null sein Außerdem werde ich hier einen Übergang hinzufügen, um einen gleichmäßigeren Effekt Wir benötigen einen Filter mit einer Dauer von 1 Sekunde. Okay, das war's mit dem Bild. Es sieht ziemlich nett aus. Und wir haben hier einen schönen und coolen Hover-Effekt Als Nächstes kümmere ich mich um die Überschrift. Lassen Sie uns fortfahren und Feedback-Überschrift auswählen. Ich werde wieder Flex-Bücher verwenden. Lassen Sie uns die Anzeige auf stellen, dann werde ich auf 50% setzen . Dann müssen wir den Text in der Mitte platzieren. Wir brauchen Textline Center. Okay, im Moment hat sich hier nichts geändert. Wir müssen die Größe der Überschriften erhöhen. Deshalb werde ich weitermachen und die erste Überschrift auswählen Eigentlich haben wir hier nur eine Überschrift, aber innerhalb der Überschrift habe ich die Span-Elemente für den zweiten Teil der Überschrift eingefügt , deshalb meine ich die Überschriften Ich wähle die Feedback-Überschrift , gefolgt von den H-Überschriftenelementen Erhöhen wir die Größe des Telefons auf sieben Ram. Dann brauchen wir Farbe. Es wird weiß sein. Hier haben wir die Überschrift, sie sieht gut aus, aber wir müssen dem zweiten Teil der Überschrift, diesem Pan-Element, einige Stile hinzufügen müssen dem zweiten Teil der Überschrift, diesem Pan-Element, einige Stile , damit es so aussieht. Machen wir also weiter und nehmen diesen Selektor von hier aus und fügen ihn zu seinem Pan-Element Zuallererst werde ich die Telefonfamilie ändern. Das Telefon wird kursiv geschrieben sein, dann werde ich die Telefongröße erhöhen Machen wir acht Ram draus. Als Nächstes werde ich mithilfe des Lexi-Abstands etwas Abstand zwischen den Buchstaben schaffen mithilfe des Lexi-Abstands etwas Abstand zwischen den Buchstaben Der Wert wird 0,2 Ram sein. Und ändere auch die Farbe, benutze die blaue Farbe. In Ordnung, das war's also mit der Überschrift. Beide Teile der Überschrift sehen gut aus. Beide Teile der Überschrift sehen ziemlich gut aus. Als nächstes müssen wir uns um die Zitate kümmern. Zuallererst werde ich mich um den Hintergrund kümmern. Ich meine, dieser blaue Teil hier. Gehen wir weiter und wählen G. Lassen Sie uns innerhalb der Höhe definieren. Die Breite wird 35 Ram betragen. Dann brauchen wir Höhe. Dann mache ich 40 Ram draus. Ändere auch die Hintergrundfarbe. Lassen Sie uns hier diese blaue Farbe verwenden. Dann müssen wir die Position des Elements ändern. Ich werde die Position auf absolut setzen. Dann benötigen wir die relative Position für das Feedback. Da es sich um ein übergeordnetes Element handelt, werde ich das BG-Element entsprechend dem Feedback ausrichten , das wir benötigen. Relative Position. Als Nächstes definiere ich die Eigenschaften oben und links. Die oberste Position wird 26 Ram sein. Was die linke Position angeht, werde ich daraus 4,5 Ram machen. Schauen wir uns das Ergebnis an, das wir hier haben, den Hintergrund für den Code. Ich werde es abrunden. Verwenden wir Grenzradius drei Ram. Wie Sie bemerkt haben, haben wir hier ein kleines Problem. Dieses Element deckt das Bild teilweise ab. Ich werde das Bild hier über diesem Element platzieren. Um das zu tun, werde ich eine Index-Eigenschaft verwenden. Und lass uns eins daraus machen. Jetzt ist das Problem behoben und alles sieht gut aus. Das nächste, was ich tun werde, ist dieses Dreieck hier zu erstellen. Ich werde das mit After Elements machen. Lassen Sie uns weitermachen und BG auswählen , gefolgt von den After-Elementen. Zuallererst müssen wir den Inhalt definieren , der leer sein wird. Dann setze ich bei der Höhe beide auf Null. Als Nächstes müssen wir die Position ändern. Lassen Sie uns die Position auf absolut setzen. Jetzt werde ich das Dreieck mithilfe von Rändern erstellen Deshalb habe ich dort gesessen und beide auf Null gesetzt. Wir müssen ein paar verschiedene Randeigenschaften verwenden. Der erste wird Border Left sein. Die Werte werden für Ram Solid stehen, die Farbe wird transparent sein. Als Nächstes verwende ich Border Right. Lassen Sie uns diese Zeile tatsächlich duplizieren. Ändern Sie hier das Grundstück, das wir brauchen, Grenze, rechts. Dann brauchen wir eine weitere Eigenschaft namens border bottom. Aber in diesem Fall werde ich die Farbe ändern, die wir hier nicht mehr benötigen, transparent. Lass uns die blaue Farbe verwenden. Jetzt ist das Element nicht sichtbar. Lass uns die Farbe ändern, sie rot machen. Hier haben wir das Dreieck. Und jetzt müssen wir die Position dieses Elements ändern. Kommen wir zurück zur Farbe Blau. Die unterste Position muss minus drei sein. Außerdem sage ich Position, machen wir einen Ram draus. Das Letzte, was ich tun muss, ist dieses Element zu drehen. Ich werde Transform verwenden. Mit der Drehfunktion wird der Wert -45 Grad betragen. Jetzt sieht alles gut aus mit dem Hintergrund. Wir sind fertig. Als Nächstes müssen wir uns um das Angebot selbst kümmern. Ich meine dieses Element hier. Gehen wir zum VS-Code und wählen, definieren wir innerhalb der Höhe. Die Breite wird ein Ram sein, dann wird die Höhe 28 Ram sein. Ich werde die Hintergrundfarbe ändern. Verwenden wir hier die Farbe 28 bis acht, bis acht. Hier haben wir das Zitat. Ich werde es mit dem Grenzradius abrunden. Machen wir drei Ram draus. Außerdem werde ich die Position des Elements ändern. Lassen Sie uns von Position zu absoluter Einheit sagen, von Position zu Position werden 33 Ram sein. Was die linke Position angeht, werde ich daraus acht Ram machen. Lassen Sie uns die Ergebnisse hier überprüfen. Wir haben das, jetzt werde ich die Elemente innerhalb des Zitats mithilfe von Flex Book ausrichten . Lassen Sie uns weitermachen und Display Flex verwenden. Dann müssen wir die Elemente in der Spalte vertikal ausrichten. Wir müssen die Richtung ändern, es wird Flexrichtung, Spalte sein. Außerdem müssen wir die Elemente in der Mitte ausrichten. Wie Sie sehen können, sind die Elemente dauerhaft ausgerichtet. Was das Zitat angeht, um den Raum innerhalb des Elements zu schaffen, werde ich Pudding verwenden Wir brauchen hier Pudding. Es werden drei Widder an der Ober- und Unterseite und null an der linken und rechten Seite Okay, lassen Sie uns über den nächsten sprechen. Ich werde das Dreieck für die erstellen, die wir auch nach den Elementen benötigen. Eigentlich sollten wir uns diesen Code schnappen. Und dann ändere den Klassennamen, den wir hier brauchen. Ich werde die Farbe ändern. Es wird 28 bis acht vor acht sein. Dann werde ich tatsächlich, lass uns die Ergebnisse überprüfen. Ich werde dieses Dreieck nach links verschieben, so wie wir es in der fertigen Version haben Ich werde die linke Eigenschaft auf Null setzen. Ok, das war's also mit dem Dreieck. Als Nächstes kümmere ich mich um den Header von, lassen Sie uns weitermachen und Header auswählen. Benutze noch einmal Flachsbuch, das wir hier brauchen, zeige Flachs. Dann richte ich die Objekte in der Mitte aus und schaffe unten etwas Platz mit Margot Two Ram Okay, danach werde ich diese Zitate anpassen. Ich meine das Telefon, also Icons. Lassen Sie uns also weitermachen und Kopfzeile auswählen, gefolgt von den Augenelementen. Lassen Sie uns die Telefongröße synchronisieren, daraus eine Rampe machen und auch die Farbe ändern Es wird blaue Farbe haben. Okay, danach werde ich die Überschrift anpassen, ich meine den Namen des Kunden. Lassen Sie uns fortfahren und Header auswählen, gefolgt vom Element H mit einer Überschrift. Die Schriftgröße wird zwei m betragen. Dann müssen wir Text in Großbuchstaben umwandeln. Lassen Sie uns die Farbe des Textes ändern, sodass er weiß sein soll. Außerdem werde ich etwas Abstand zwischen den Buchstaben schaffen, machen wir 0,2. Und schließlich brauchen wir Platz innerhalb der Elemente auf der linken und rechten Seite. Lassen Sie uns das mit Polsterung machen. Die Werte werden an der oberen und unteren Größe Null und der linken und rechten Seite zehn m Auch hier sieht die Überschrift des Zitats gut aus. Als nächstes müssen wir uns um den Absatz kümmern. Lassen Sie uns weitermachen und Header auswählen. Gefolgt von der PL. Eigentlich Header, aber Hauptteil mit dem Element. Es ist der Teil von, lass uns das mit 250 Ram einstellen. Dann wird die Telefongröße 1,2 Ram betragen. Ich werde den Anruf ändern, lass uns ihn tätigen, ich meine, er ist hellgrau. Dann werde ich mit dem Rand etwas Platz am unteren Rand schaffen . Unten 2,5 Rm. Schauen wir uns den Absatz an. Wir müssen den Text in der Mitte platzieren. Und ich werde auch die Zeilenhöhe leicht erhöhen , so wie wir es hier haben. Lassen Sie uns weitermachen und die Textzeilenmitte verwenden. Und ich werde die Zeilenhöhe für die Kamera, die über dem Absatz sitzt, auf 2,5 Rm einstellen . Als nächstes müssen wir uns um die Sterne kümmern. Ich werde diese Augenelemente hier auswählen. Lassen Sie uns fortfahren und Sterne auswählen, gefolgt von den Augenelementen. Lassen Sie uns das Telefon vergrößern. Ich mache 1,8, dann wird die Farbe blau sein. Wir brauchen hier diese Farbe. Und erzeugt dann mit Margin Platz auf der linken und rechten Seite Setzen wir ihn auf Null und 0,5 Ram. In Ordnung, also lasst uns über das Zitat sprechen. Das letzte Element, das ich in dieser Vorlesung anpassen muss, ist das untere. Ich werde seine Position definieren. Lassen Sie uns weitermachen und Testimonials auswählen (BTN). Ich werde die absolute Position einnehmen. Dann müssen wir relative Abschnittselemente positionieren. Um den Boden entsprechend den Abschnittselementen zu positionieren , benötigen wir eine relative Position. Gehen wir zurück zum Haupt-BTN und fügen hier die linke Position 50% hinzu. Dann müssen wir für den unteren Teil 15 Gramm angeben Um das Element perfekt zu zentrieren, müssen wir die Funktion Transform Translate X mit dem Wert -50% Cam verwenden , das sitzt Der Testimonial-Bereich ist maßgeschneidert und sieht ziemlich gut aus Als nächstes müssen wir weitermachen und uns um die Fußzeile kümmern. Ich meine diesen Abschnitt hier. Die Fußzeile enthält auch den Kontaktbereich. Lass uns weitermachen und diesen Abschnitt in der nächsten Lektion erstellen 16. HTML-Markup für die Fußzeile erstellen: Ordnung, in der letzten Vorlesung wir die Arbeit am Abschnitt mit den Testimonials abgeschlossen, wir haben ihn gestaltet, und wie Sie sehen können, sieht er ziemlich nett sieht er ziemlich In dieser Vorlesung werden wir damit beginnen, den letzten Teil der Haupt-Landingpage zu erstellen den letzten Teil der Haupt-Landingpage Ich meine, wir müssen die Fußzeile erstellen , die den Kontaktbereich enthält Ich habe diese beiden Teile integriert. Ich bin im Kontaktbereich und in der Fußzeile. In dieser Lektion werde ich das HTML-Markup für die Fußzeile erstellen das HTML-Markup für die Wie Sie sehen können, haben wir hier viele verschiedene Elemente. In der nächsten Vorlesung werden wir diesen Abschnitt dann gestalten. Ordnung, lassen Sie uns zum VS-Code zurückkehren und in der HTML-Datei direkt nach dem Abschnitt mit den Testimonials werde ich neue Kommentare für die Fußzeile veröffentlichen Öffnen Sie dann die fünf Fußzeilenelemente von HTML. Die Fußzeile wird aus verschiedenen Teilen bestehen. Der erste Teil wird die Fußzeile sein, in die ich die Überschriften und auch den Abschnittsrand einfügen werde Überschriften und auch den Abschnittsrand einfügen Wir haben diese Elemente in unserem Projekt ein paar Mal verwendet. Ich werde diese drei Zeilen von hier kopieren und sie unten einfügen. Lassen Sie uns den Inhalt der Überschriften ändern , die wir hier benötigen, um Kontakt aufzunehmen Was das zweite Überschriftenelement betrifft, werde ich hier einfügen: Kontaktieren Sie uns Schauen wir uns das Projekt an. Wie Sie sehen können, haben wir hier zwei Überschriften und die Sektionstafel In Ordnung, als Nächstes werde ich hier Neue Entwicklungen einfügen, was als Inhalt in der Fußzeile erscheinen wird Dieses Element wird den Rest des Inhalts beinhalten. Ich werde Entwicklungen vorstellen und es wird ein zentrales Thema sein. Es wird die Social-Media-Symbole und auch die Adresse enthalten und auch die Adresse Lassen Sie uns weitermachen und Entwicklungen versichern, die wir eingehen werden Ich werde Entwicklungen versichern, die die Phonemik und auch dieses Panelmentsmicon hier und auch diese Panels beinhalten werden auch dieses Panelmentsmicon hier und auch diese Panels Lassen Sie uns Elemente mit den Klassennamen regulärer A-Hülle öffnen . Nachdem ich das Element eingefügt habe, füge ich Span mit der Textadresse ein. In Ordnung. Danach öffne ich Absatz und füge hier den Klassennamen hinzu , Absatz PAR. Der Absatz wird fünf verschiedene Span-Elemente enthalten. Öffnen wir die Span and Unsecure Book Library. Dann werde ich das Span-Element viermal duplizieren. Lassen Sie uns weitermachen und den Inhalt ändern. Die zweite Spalte wird die Main Street 123 sein. Das ist eine Scheinadresse. Dann haben wir den siebten Stock. Der nächste wird New York sein, und schließlich brauchen wir den Staat, New York, USA. Ordnung, als Nächstes werde ich die Social-Media-Symbole erstellen. Öffnen wir das Tag mit dem Klassennamen Social Media. Ich werde hier vier verschiedene Social-Media-Symbole einfügen . Das erste wird FA Brands, FA, Facebook sein. Lassen Sie uns es dreimal duplizieren und die Schnellnamen ändern. Das zweite Social-Media-Symbol wird für Instagram sein. Dann werden wir hier verlinkt haben. Zum Schluss werde ich hier X Twitter einfügen. Lassen Sie uns weitermachen und die Symbole überprüfen , ob sie alle angezeigt werden. Wie Sie sehen können, haben wir hier vier für Symbole, alles funktioniert einwandfrei. Als Nächstes füge ich den zweiten Teil des Fußzeileninhalts ein, dem es sich um ein Formular handeln wird Lassen Sie uns die Formelemente stören. Beseitigen Sie das Action-Attribut, wir brauchen es nicht. Innerhalb des Formularelements werde ich das Tag öffnen, das zur Eingabegruppe werden soll. Ich werde hier vier verschiedene Eingabeelemente einfügen. Lassen Sie uns das Eingabe-Tag mit dem Typ Text öffnen. Und wir brauchen auch ein Platzhalterattribut. Lassen Sie uns hier den Namen einfügen. Lassen Sie uns diese Codezeile dreimal duplizieren. Das zweite Eingabeelement wird für E-Mail bestimmt sein. Lassen Sie uns die Platzhalterattribute für E-Mails ändern. Dann werden wir Text eingeben und der Platzhalter wird Telefon sein Was das letzte Eingabeelement betrifft, so wird es Adresse sein Ordnung, danach gehe ich zum Intro-Textbereich Fügen wir hier ein Platzhalterattribut hinzu. Es wird eine Nachricht nach dem anderen sein. benötigen wir Als Wert für die Schaltfläche, die ich hier einfügen werde, benötigen wir den unteren Rand mit der rechten Unterseite. Okay, also lassen Sie uns bei den Formularelementen bleiben. Als Nächstes werde ich eine Entwicklung erstellen, die sich im unteren Teil der Fußzeile befinden wird im unteren Teil der Fußzeile Es wird einen Absatz enthalten, lassen Sie uns hier das Copyright-Zeichen einfügen Es wird eine Fünf-Entität sein wir benötigen eine prozentuale Kopie und eine Sammelspalte gefolgt von einer Bibliothek mit drei Textbüchern Dann sind alle Rechte vorbehalten. Nach dem Absatz werde ich eine Schaltfläche mit der Textschaltfläche in die Schaltfläche einfügen . Ich werde Link-Elemente mit dem Text von hinten nach oben einfügen Link-Elemente mit dem Text und ich werde Ihre Augenelemente mit den Klassennamen einfügen, ein durchgezogener Chevron nach Augenelemente mit den Klassennamen einfügen, oben Ordnung. Also ich denke, das passt. Lass uns weitermachen und den Browser überprüfen. Wie Sie sehen können, haben wir hier alle Elemente. Ich hoffe, dass hier alles korrekt ist , weil wir viele verschiedene HTM-Elemente haben Ordnung. Machen wir also weiter und fahren mit der nächsten Vorlesung fort, in der wir das gestalten 17. Styling-Fußzeile: In der vorherigen Lektion haben wir das HTML-Markup für die Fußzeile erstellt , und jetzt werden wir diese Elemente formatieren Wie Sie sehen können, ist die Kopfzeile bereits formatiert. Wir müssen diese Elemente auch positionieren. Wir müssen die übrigen Elemente stylen. Wir müssen die Fußzeile so aussehen lassen. Kehren wir zum VS-Code zurück und fügen direkt nach den Testimonials in der CSS-Datei neue Kommentare für Dann wähle ich das Fußzeilenelement aus. Definieren wir mit 100%. Dann verwende ich Flex Box, um den Inhalt innerhalb der Fußzeile auszurichten Wir brauchen Display-Flex. Dann ändere ich die Richtung. Wir werden die Elemente in der Spalte vertikal ausrichten. Flexrichtung muss der Spalte Dann richte ich die Elemente in der Mitte aus. Lassen Sie uns abschließend Platz in der Fußzeile schaffen . Wir brauchen Pudding Es werden 15 RAM auf der Oberseite sein, Null auf der rechten Seite, drei RAM auf der Unterseite und Null auf der linken Seite In Ordnung, lassen Sie uns über die Fußzeilenelemente sprechen. Wie Sie sehen können, befindet sich der Inhalt in der Mitte. Als Nächstes werde ich mich um den Header kümmern. Lassen Sie uns weitermachen und die Fußzeile auswählen. Lassen Sie uns den Text in der Mitte ausrichten. Außerdem werde ich mithilfe des Randes Platz am unteren Rand schaffen . Unten mit dem Wert 15 Grand. Wie Sie sehen können, befinden sich die Überschriften in der Mitte. Wir müssen hier von der Grenze wegfahren. Ich werde dieses blaue Element in der Mitte der Grenze platzieren . Lassen Sie uns fortfahren und die Fußzeile auswählen, gefolgt von dem Abschnittsrand, den wir nach dem Element benötigen , um das Element zu zentrieren Ich werde die linke Position auf 50% setzen . Dann müssen wir für die perfekte Zentrierung die Funktion translate x mit dem Wert -50% transformieren . Okay, nachdem das Element in der Mitte des Rahmens platziert wurde, müssen wir uns als Nächstes um den Inhalt kümmern Ich meine den Inhalt der Fußzeile, dieses Element hier. Lassen Sie uns weitermachen und den Inhalt der Fußzeile auswählen. Ich definiere die Breite, sie wird 60% betragen. Dann werde ich den Inhalt, die Flex-Elemente, horizontal nebeneinander platzieren die Flex-Elemente, horizontal nebeneinander Deshalb müssen wir Display Flex verwenden. Außerdem werde ich unten etwas Platz schaffen. Verwenden wir den Rand, Bottom ten m. Wie Sie sehen können, die Adresse und diese Eingabefelder sind die Adresse und diese Eingabefelder horizontal nebeneinander angeordnet. Als Nächstes werde ich mich um den sozialen Teil kümmern. Ich meine, was das soziale Element angeht, machen wir weiter und wählen Social aus und definieren dass es 30% sein wird. Okay. Danach werde ich mich um die Entwicklung innerhalb der Adresse kümmern . Ich meine diese Entwicklung hier, lassen Sie uns weitermachen und Adresse auswählen, gefolgt von der Entwicklung ich wieder verwenden werde, Flachsbox, wir brauchen eine Display-Flagge, dann müssen wir eine Zeile in der Mitte platzieren und auch unten etwas Platz schaffen Machen wir zwei draus. Okay, wie Sie sehen können, sind die Elemente ausgerichtet und wir haben hier etwas Abstand zwischen der Adresse und diesen Elementen. Als Nächstes werde ich mich um das Phonosomicum kümmern, ich meine, um das Phonosomicum ich meine Machen wir weiter und wählen das Kleid aus, dann die Elemente. Ich werde das Telefon vergrößern. Es wird 3,5 sein. Dann ändere ich die Farbe. Lass es uns weiß machen. Und mit dem Rand auch etwas Platz auf der rechten Seite schaffen, oder? Der Wert wird 2,3 Ram sein, also sieht das Symbol gut aus. Als nächstes müssen wir uns um diese Pan-Elemente kümmern . Dieses Wort hier, Adresse. Lassen Sie uns fortfahren und Adresse auswählen, gefolgt von der Entwicklung. Und dann brauchen wir Span. Stellen wir die Telefongröße auf 1,8 Ram ein. Dann werde ich das Gewicht des Telefons ändern. Lass uns das Telefon mutiger machen. Stellen wir es fett ein. Ich werde Text in Großbuchstaben umwandeln. Außerdem benötigen wir einen Buchstabenabstand von 0,2 Ram. Lassen Sie uns abschließend den Text mit der Farbe Weiß weiß machen. Okay, das ist ungefähr das Span-Element. Als Nächstes werde ich mich um den Absatz kümmern , soweit Sie sich erinnern. Wir haben hier einen Absatz, der fünf verschiedene Span-Elemente enthält. Lassen Sie uns weitermachen und Address Power auswählen. Eigentlich haben wir hier einen kleinen Typ. Wir brauchen das Doppelte D. Jetzt wählen wir den Absatz aus. Ich werde Flex Book verwenden. Lassen Sie uns Display Flex verwenden. Dann müssen wir die Elemente in der Spalte vertikal ausrichten. Flex-Richtung, Spalte. Dann werde ich unten mit Marching Bottom etwas Platz schaffen unten mit Marching Bottom Außerdem werde ich mithilfe von Padding etwas Platz innerhalb des Absatzes auf der linken Seite schaffen mithilfe von Padding etwas Platz innerhalb des Absatzes auf der linken Seite Links sechs Ram. Okay. Wie Sie sehen können, sind die Span-Elemente vertikal in der Spalte angeordnet. Als Nächstes müssen wir diese Span-Elemente anpassen. Lassen Sie uns fortfahren und Adresse Par auswählen, gefolgt vom Span-Element. Lassen Sie uns mit 210 Ram beginnen. Dann wird die Telefongröße 1,4 sein. Außerdem werde ich die Farbe ändern. Lass es uns weiß machen. Schließlich werde ich dem Rand unten ein Leerzeichen erstellen. Unten 0,5 Ram. In Ordnung, die Stiftelemente sehen gut aus. Als nächstes müssen wir uns um die Telefonsymbole kümmern. Ich meine die Social-Media-Symbole. Wir haben vier verschiedene Social-Media-Symbole. Lassen Sie uns also weitermachen und diese Elemente anpassen. Wir müssen soziale Medien auswählen gefolgt von den Augenelementen. Lassen Sie uns die Telefongröße erhöhen. Es werden drei sein. Dann muss die Farbe weiß sein. Außerdem brauchen wir etwas Platz auf der rechten Seite. Geben wir den Rams den Margen den Spielraum. Ich ändere den Cursor, damit er zeigt. Okay, also das Formular, einige Symbole sehen gut aus. Als Nächstes müssen wir uns um das Formular kümmern. Lassen Sie uns weitermachen und den Wrapper auswählen, also die Fußform Lassen Sie uns das Formular auswählen. Ich werde die Breite definieren. Sie wird 70% betragen, wie Sie sich erinnern, die linke Seite nimmt 30% der Breite des Abschnitts ein. Die rechte Seite, das Formular, sollte 70% der gesamten Breite einnehmen. Als Nächstes wähle ich die Formularelemente aus. Lassen Sie uns die Flexbox verwenden. Wir brauchen Display-Flex. Und dann werde ich die Flex-Elemente mithilfe der Flex-Richtungsspalte vertikal in der Spalte platzieren die Flex-Elemente mithilfe der Flex-Richtungsspalte vertikal . In Ordnung, danach wähle ich die Eingabegruppe aus. Ich meine dieses Element hier. Es beinhaltet vier verschiedene Eingabefelder. Lassen Sie uns also weitermachen und Eingabegruppe auswählen. Lassen Sie uns wieder Flex-Bücher verwenden. Wir brauchen Display-Flex. Dann werde ich mithilfe von justify content, space between Platz zwischen den Flex-Elementen Platz schaffen mithilfe von justify content, space between Platz zwischen den Flex-Elementen . Ordnung, danach werde ich die Eingabe selbst anpassen. Gehen wir also weiter und wählen Eingabegruppe gefolgt vom Eingabeelement aus. Stellen wir W 273 ein, dann setze ich die Höhe auf sechs Ram. Lassen Sie uns auch unten Platz schaffen Rand verwenden, unten drei Ram. Ordnung, wenn wir uns die fertige Version ansehen, werden Sie feststellen, dass Eingabeelemente auf zwei Zeilen angeordnet sind. Um das zu tun, füge ich hier eine der Flexbox-Eigenschaften namens Flex Wrap mit dem Wert p hinzu. Wie Sie jetzt sehen können, sind sie platziert, die Eingabehelme werden auf zwei verschiedenen Linien platziert Als Nächstes wähle ich Eingaben und auch den Textbereich gleichzeitig Da wir einige ähnliche Stile benötigen, werde ich den Selektor von hier aus aufrufen. Lassen Sie uns hier einen Textbereich hinzufügen. Ich werde die Hintergrundfarbe ändern. Es wird 111 sein, dann werde ich den Falzrand loswerden . Lass es uns auf „Nein“ setzen. Außerdem werde ich mit Pudding 1 m etwas Platz innerhalb der Empa-Felder schaffen Pudding 1 m etwas Platz innerhalb der Empa-Felder . Dann setzen wir die Telefongröße auf 1,4 und ändern auch die Farbe Es wird hellgrau sein. Okay, wie Sie sehen können, sehen die Eingabefelder ziemlich gut aus. Machen wir sie mit dem Randradius leicht abgerundet. Setzen wir es auf 2,5 Alles klar, das ist also über die Eingabefelder. Als nächstes müssen wir uns um den Textbereich kümmern. Wir müssen dem Textbereich einige individuelle Stile hinzufügen. Lassen Sie uns weitermachen und den Textbereich auswählen. Ich werde die Höhe auf 215 Ram einstellen. Lassen Sie uns auch etwas Platz am unteren Rand schaffen , indem wir Rand, untere drei Ram verwenden. Außerdem werde ich die Funktion zur Größenänderung deaktivieren. Im Moment können wir die Größe des Textbereichs ändern und wie Sie sehen, kann dies das Layout beeinträchtigen Ich werde diese Funktion deaktivieren. Wir müssen die Größe auf „Nichts“ ändern, okay? Jetzt können wir die Größe des Textbereichs nicht mehr ändern. Als Nächstes werde ich mich um den Button kümmern. Lassen Sie uns fortfahren und Footer Form auswählen, gefolgt vom Button-Element Wir brauchen Width, es wird 20 sein. Dann setze ich die Höhe auf fünf. Ändere auch die Hintergrundfarbe. Lassen Sie uns hier die blaue Farbe verwenden. Als Nächstes platziere ich den Button auf der rechten Seite. Und das können wir einfach tun, indem wir die Eigenschaft margin left mit dem Wert Jetzt wird er auf der rechten Seite platziert. Okay. Als Nächstes entfernen wir den Standardrahmen. Ich werde es auf „Nein“ setzen. Außerdem brauchen wir den Grenzradius. Stellen wir es auf 0,5 Gramm ein und ändern das Fettgewicht. Stellen wir es fett ein und ändern die Farbe des Textes. Ich werde es weiß machen, damit der Button gut aussieht. Ich werde ihm ein paar verschiedene Eigenschaften hinzufügen. Der nächste ist der Buchstabenabstand. Wir brauchen etwas Abstand zwischen den Buchstaben. Machen wir 0,1 RAM draus. Außerdem werde ich den Cursor auf den Zeiger setzen. Das Letzte, was ich tun werde, ist, einen Schatteneffekt zu erzeugen. Lassen Sie uns Box Shadow auf 0,5 Ram setzen, ein Ram. Und die Farbe wird R B A sein. Die Deckkraft wird 0,1 sein. Alles klar, also ich finde, dass die Unterseite ein bisschen nett aussieht Als Nächstes füge ich einen Klick-Effekt hinzu. Dafür müssen wir bottom auswählen, gefolgt von der aktiven Pseudoklasse Und dann müssen wir Transform Translate Y mit dem Wert 0.21 verwenden . Wenn ich klicke, dann bekommen wir hier diesen schönen Klick-Effekt Ordnung, jetzt müssen wir uns um diesen Teil kümmern , hier unten in der Fußzeile Wir müssen die Elemente anpassen und sie so ausrichten also lass uns weitermachen und unten auswählen Ich werde die Breite definieren, sie wird 60% betragen. Dann benötigen wir eine Flexbox, um die Elemente so auszurichten, dass sie Display Flex verwenden. Ich werde mithilfe von Justify Content Platz zwischen den Flex-Elementen schaffen . Abstand zwischen. Und wir müssen sie auch vertikal in der Mitte ausrichten. Verwenden Sie Align Items Center. Okay, sie sind gut ausgerichtet. Als Nächstes müssen wir jedes der Elemente anpassen. Ich meine den Absatz und auch den unteren Teil. Lassen Sie uns weitermachen und mit dem Absatz beginnen. Wählen Sie Fußzeile, unten p. Dann setze ich die Fehlergröße auf 1,4 Ram und ändere auch die Farbe, mache sie mit CCC hellgrau Auch das war's, ungefähr die linke Seite, jetzt müssen wir uns um die Unterseite kümmern Ich wähle Foot Bottom, gefolgt vom Button-Element. Ich werde Breite und Höhe einstellen. Die Breite wird 15 Ram betragen. Dann brauchen wir die Höhe, ich werde sie auf fünf Ram setzen. Ich nehme den Rou-Standardrahmen. Lassen Sie uns es auf keinen setzen und auch den Standardhintergrund abrufen. Lassen Sie uns es auch auf keinen setzen. In Ordnung, als Nächstes wähle ich Link Elements aus. Denken Sie daran, dass wir ein Link-Element innerhalb der Schaltfläche erstellt haben. Es beinhaltet den Pfeil, ich meine das Element. Lassen Sie uns weitermachen und F unten auswählen. Dann brauchen wir die Schaltfläche, gefolgt von den Elementen. Lassen Sie uns die Höhe auf 100% einstellen . Ich werde Flex Box verwenden. Lassen Sie uns das Display auf Flex setzen. Dann werde ich etwas Abstand zwischen dem Text und den Elementen schaffen . Wir müssen den Inhaltsraum gleichmäßig begründen. Dann müssen wir die Elemente vertikal in der Mitte platzieren , indem wir die Mitte der Einzelposten verwenden. Wie Sie sehen können, haben wir etwas Abstand zwischen diesen beiden Teilen. Als Nächstes ändere ich die Telefongröße, sagen wir auf 1,4 RAM. Ändern Sie auch die Farbe. Benutze es erneut, CCC. Dann müssen wir den Text mithilfe der Texttransformation in Großbuchstaben groß mithilfe der Texttransformation Schließlich schaffen Sie mit einem Buchstabenabstand von 0,1 Ram etwas Abstand zwischen den Beinen Buchstabenabstand von 0,1 Ram etwas Abstand Okay, alles sieht gut aus und mit der Fußzeile sind wir eigentlich Als nächstes müssen wir uns um die Scrollleiste kümmern. Ich meine, wir müssen die Bildlaufleiste anpassen. Außerdem werde ich den Link unten entfernen. Sobald wir hier auf diese Schaltfläche klicken, zurück zum Anfang, sollten wir reibungslos nach oben scrollen. In der nächsten Vorlesung werden wir uns um diese Dinge kümmern. Lass uns mit dem nächsten Video weitermachen. 18. Benutzerdefinierte Scrollbar und reibungsloses Scrollen: Ordnung, also in der letzten Vorlesung haben wir die Arbeit an der Haupt-Landingpage unseres Projekts abgeschlossen Arbeit an der Haupt-Landingpage unseres Projekts Wir haben die Fußzeile der Seite angepasst. Wie gesagt, wir müssen nun weitermachen und die Standard-Scrollleiste der Seite anpassen Wie Sie im fertigen Projekt sehen können, haben wir eine nette und coole Bildlaufleiste, die sich von der Standard-Scrollleiste unterscheidet. In dieser Vorlesung werde ich die Bildlaufleiste anpassen. Außerdem werde ich diesen sanften Scroll-Effekt erzeugen. Ich meine, sobald wir hier klicken, diese Schaltfläche wieder nach oben, dann müssen wir reibungslos nach oben scrollen. Lass uns weitermachen und zum VS-Code gehen und uns zunächst um die Bildlaufleiste kümmern. Ich werde neue Kommentare hinzufügen, benutzerdefinierte Bildlaufleiste. Dann wähle ich die Bildlaufleiste aus. Und auf folgende Weise brauchen wir Körperelemente. Dann gefolgt von Webkit, Scrollbar. Auf diese Weise können Sie die Bildlaufleiste auswählen. Es ist ein Pseudoelement. Zuallererst werde ich die Breite der Bildlaufleiste definieren Stellen wir das auf 1,2 m ein. Im Moment haben wir die Breite der Bildlaufleiste definiert. Wenn ich es mache, sagen wir zehn Ram, ich meine 100 Pixel, dann werden Sie sehen, dass die Breite 100 Pixel der Bildlaufleiste entspricht. Gehen wir zurück, 1.2 Ram. Sobald die Breite der Bildlaufleiste definiert ist. Als Nächstes müssen wir hier von der Bildlaufleiste auf diesen Teil klicken. Lass uns weitermachen und diesen Code duplizieren. Wie gesagt, wir brauchen ein Webkit und einen Daumen für die Scrollbar. Ich werde die Hintergrundfarbe ändern. Es wird die blaue Farbe sein , die wir in diesem Projekt verwenden , wie diese Farbe. Außerdem füge ich dem Daumen einen Randradius hinzu. Ich meine, ich möchte, dass die Ecken der Bildlaufleiste abgerundet werden, also fügen wir hier den Randradius hinzu und machen daraus fünf. Okay, hier haben wir also eine blaue Scrollleiste mit einem schönen und coolen Randradius. Das nächste, was ich tun werde, ist die Farbe zu ändern. Ich meine die Hintergrundfarbe des Tracks. Wie Sie sehen können, haben wir hier einen Track mit dunkelgrauer Hintergrundfarbe. Lassen Sie uns weitermachen und diesen Code duplizieren , wir müssen hier eine Spur statt eines Daumens hinzufügen. Lassen Sie uns dann den Grenzradius als Hintergrundfarbe entfernen und mit 121 zu eins weitermachen. Okay, das ist es. Wir haben hier eine nette und coole Bildlaufleiste, die sich von der Standard-Scrollleiste unterscheidet. Um ehrlich zu sein, gefällt mir die Standard-Scrollleiste überhaupt nicht. Ich denke, dass dieser viel besser ist. Okay, das ist über der Scrollleiste. Als Nächstes müssen wir uns um das reibungslose Scrollen kümmern damit wir reibungslos nach oben scrollen können. Sobald wir hier auf diese Schaltfläche klicken, müssen wir nur noch eine Eigenschaft verwenden und sie dem HTML-Element hinzufügen. Ich werde das Scroll-Verhalten verwenden, ich werde dafür sorgen, dass alles glatt läuft. Sobald wir auf die Link-Elemente unten klicken, können wir problemlos nach oben scrollen. Okay. Also das ist es. Wir haben die Arbeit an der Haupt-Landingpage abgeschlossen. Als nächstes müssen wir uns um die Seiten kümmern. Die erste Seite, die wir erstellen werden, wird sich mit dieser Seite befassen. Lassen Sie uns dazu mit der nächsten Vorlesung fortfahren. 19. HTML-Markup für die "Über uns"-Seite erstellen: In der letzten Vorlesung haben wir die Arbeit an der Haupt-Landingpage abgeschlossen Arbeit an der Haupt-Landingpage Ich meine, wir haben all diese Abschnitte erstellt. Jetzt werden wir, wie gesagt, die verschiedenen Seiten erstellen, denn wie Sie wissen, ist unsere Website eine mehrseitige Website. In dieser Vorlesung werden wir damit beginnen, die Info-Seite zu erstellen. Wir können auf verschiedene Arten zur Seite „Über uns“ navigieren . Wir können auf eine der beiden Schaltflächen namens Erkunden klicken. Außerdem können wir von der Navigation aus zur Seite „Über S“ navigieren. Wenn wir auf den Link Über uns klicken, gelangen wir zur Info-Seite. Okay, in dieser Vorlesung werden wir das HTML-Markup erstellen Zuallererst müssen wir neue Dateien für die Info-Seite erstellen neue Dateien für die Info-Seite Lassen Sie uns, der erste wird sich mit HTML befassen. Außerdem benötigen wir eine Datei für CSS. Ich werde diese Datei über das CSS bearbeiten. In Ordnung, lassen Sie uns die HTML-Datei auf die linke Seite verschieben. Dann gehe ich zum Index der HT-Mail-Datei und kopiere die gesamte Seite. Dann füge ich sie ein, die About-HT-Mail-Datei . Lass uns weitermachen und alle Abschnitte löschen. Ich werde diese Abschnitte mit Ausnahme der Fußzeile löschen , weil wir eine Fußzeile benötigen Dann werde ich das Banner aus der Kopfzeile löschen. Was die Navigation angeht, werde ich hier die Namen der HTML-Dateien einfügen , die wir bereits über das HTML erstellt haben Eigentlich müssen wir den Namen der Datei korrigieren , weil es darum gehen sollte Ich werde hier die Namen der Dateien einfügen. Gehen wir zur Index-HTML-Datei und fügen hier die Namen der Dateien anstelle der Rautenzeichen ein. Der erste Link wird Index-HTML sein. Dann werden wir hier über das HTML sprechen, die nächste Seite, die momentan noch nicht erstellt ist, es werden Bücher HTML sein. Dann werden wir Testimonials HTML haben. Was den Kontaktbereich angeht, werde ich hier einfach Kontakt einfügen, weil wir keine separate Seite für den Kontaktbereich haben separate Seite für den Kontaktbereich Ich werde hier ein Pfundzeichen einfügen , gefolgt vom Kontakt. Ordnung, lassen Sie uns weitermachen und diese fünf Links kopieren und sie hier anstelle dieser Links einfügen. Ordnung, jetzt müssen wir die CSS-Datei verknüpfen, die wir gerade erstellt haben. Ich meine, die About-CSS-Datei. Lassen Sie uns diese Zeile duplizieren und den Namen der CSS-Datei ändern. Es wird um CSS gehen. In Ordnung, lassen Sie uns weitermachen und den Browser überprüfen. Wenn wir die Navigation öffnen und auf den Link Über uns klicken, navigieren wir zur Seite Über S. Im Moment haben wir hier nur ein Logo, auch das Menüsymbol und den Fuß. Jetzt müssen wir den Inhalt der Abouts-Seite erstellen. Vorher werde ich eine Sache tun. Gehen wir zur Index-Mail-Datei d, h, t und suchen wir die Schaltfläche Erkunden. Ich werde das H-Referenzattribut definieren. Es wird um Html gehen, denn sobald wir auf diese Schaltfläche klicken, müssen wir zur Bods-Seite navigieren Lass uns zum Browser gehen. Klicken Sie auf die Schaltfläche. Wie Sie sehen können, funktioniert es nicht. Wenn wir auf den Link klicken, gelangen wir zur Seite mit den Wohnungen. Mit der Unterseite und dem Link stimmt etwas nicht. Gehen wir zum Stil der CSS-Datei und suchen wir die Schaltfläche. Ich werde die Hintergrundfarbe des Link-Elements ändern , um zu sehen, was das eigentliche Problem ist. Lass uns die Farbe rot machen. Wie Sie sehen können, deckt das Link-Element nicht den gesamten Boden ab. Aus diesem Grund konnten wir nicht zur Modus-Seite navigieren. Um das zu beheben, setze ich Display auf Flex. Wie Sie jetzt sehen können, deckt das Link-Element die gesamte Schaltfläche ab. Aber wir müssen den Text zentrieren. Deshalb müssen wir hier Justify, Content Center und ein Line Items Center verwenden . Jetzt ist das Problem behoben. Das untere, ich meine, das Link-Element funktioniert einwandfrei. Lassen Sie uns diese Hintergrundfarbe von hier aus entfernen und noch einmal überprüfen. Jetzt sieht alles gut aus und funktioniert gut. In Ordnung, gehen wir zurück zur fett gedruckten HTML-Datei. In das Header-Element werde ich zwei Überschriften einfügen, ich meine H, vier Überschriftenelemente mit der Überschrift SM des Klassennamen-Abschnitts In dem Text wird es um uns gehen. Lass uns diesen Code duplizieren. Wir benötigen H ein Überschriftenelement. Außerdem werde ich den Klassennamen ändern. Es wird die Abschnittsüberschrift LG sein. Was den Text angeht, den ich hier einfügen werde , erkunden Sie unsere Werte. Lass uns den Browser überprüfen. Ich werde zur Info-Seite navigieren . Hier haben wir zwei Überschriften. Sie sind bereits formatiert, weil wir hier die Klassenabschnittsüberschrift SM und die Abschnittsüberschrift LG verwendet haben hier die Klassenabschnittsüberschrift SM und die Abschnittsüberschrift Diese Klassen wurden im Index von HtmiloPile verwendet. Diese Elemente haben bereits einige Stile. Als Nächstes füge ich die Kommentare direkt nach dem Header ein, den wir hier zum Thema „Über uns“ benötigen. Ich werde Abschnittselemente mit dem Klassennamen About öffnen . Innerhalb des Abschnittselements werden wir ein paar verschiedene Teile haben. Der erste Teil wird der Header des Abschnitts „Über uns“ sein. Ich werde Elemente mit dem Klassennamen about section header öffnen . In der Kopfzeile öffne ich H ein Überschriftenelement. Das werden unsere Features sein. Ich werde hier den Klassennamen und die Abschnittsüberschrift LG hinzufügen, weil wir ähnliche Stile benötigen , eigentlich brauchen wir hier Klasse Lassen Sie uns den Wert nehmen und ihn in die Klasse einfügen. Außerdem werde ich den Abschnittsrand verwenden , den wir auf der Hauptseite verwendet haben. Wir brauchen hier eine Abschnittsgrenze. Lass uns den Browser überprüfen. Hier haben wir die Überschrift und den Abschnittsrand. Als Nächstes werde ich die Funktionen erstellen. Ich meine, dieser Teil hier, ich meine diese Funktionen. Lass uns weitermachen und gleich nach der Abschnittsüberschrift werde ich die neue Entwicklung öffnen. Und es werden die Funktionen oben auf der Seite sein , in denen ich die Funktion selbst öffnen werde. In diesem Abschnitt werde ich Google Material Symbols verwenden. Lassen Sie uns daher die Website Material Symbols besuchen . Das erste Symbol, nach dem ich suchen werde, befindet sich in Port Contacts. Ich brauche dieses Symbol hier. Lassen Sie uns den Code kopieren und in das Head-Element einfügen. Dann nehme ich das Span-Element und füge es hier ein. Neben den Span-Elementen werden wir H drei Überschriftenelemente haben und es wird eine weiße Auswahl von Büchern sein. Insgesamt werden wir acht Funktionen haben. Also werde ich diesen Code sieben Mal duplizieren. Dann sollten wir die Symbole und auch die Überschriften ändern. Lassen Sie uns zunächst im Browser überprüfen, ob das Symbol angezeigt wird Wie Sie sehen können, wird das Symbol angezeigt. Gehen wir zur Website von Google Phones und suchen wir nach dem Symbol Grid View. Lassen Sie uns diese Span-Elemente nehmen und dieses ersetzen. Was die Überschrift angeht, so wird sie benutzerfreundlich sein. Schnittstelle. Als Nächstes müssen wir nach Bibliotheksbüchern suchen. Nehmen wir die Fensterelemente und ersetzen diese Ulme hier. Bei der Überschrift handelt es sich um barrierefreie Formate. Dann suche ich nach dem Icon Call Form. Lassen Sie uns dieses Pan-Element kopieren und hier einfügen. Die Überschrift wird „Engagement der Gemeinschaft“ lauten. Lassen Sie uns den Browser überprüfen, alle Symbole werden angezeigt. Als Nächstes werde ich nach der Schule suchen. Nehmen wir diese Panels und fügen sie hier ein. Dann werde ich diesen Inhalt von hier entfernen und Bildungsressourcen einfügen Als Nächstes suche ich nach Sprache, die wir hier brauchen, Sprache. Nehmen wir dieses Span-Element und ersetzen es, eigentlich dieses hier. Was die Überschrift angeht, werde ich Unterstützung für mehrere Sprachen einfügen. Das nächste Symbol wird Wi-Fi Off sein. Lassen Sie uns dieses Span-Element kopieren und hier einfügen. Was das Überschriftenelement betrifft, fügen wir es hier ein, offline lesend. Jetzt werde ich nach dem letzten Symbol suchen. Es wird eine Signatur sein. Wir brauchen eine Unterschrift. Wir brauchen hier a. Nehmen wir das Span-Element und ändern auch die Überschrift. Es werden andere Beförderungen sein. Eine Kamera, auf der alle Symbole sitzen, werden angezeigt. Als Nächstes müssen wir uns um den zweiten Teil des Abschnitts „Über uns“ kümmern . Ich meine den Teamteil. Wir haben hier das Hintergrundbild gefolgt von der Überschrift und auch drei verschiedene Bilder von den Inhalten der Website. Lassen Sie uns weitermachen und die Entwicklung mit dem Klassennamen-Team starten. Ich werde H ein Überschriftenelement verunsichern, es wird Team sein Dann müssen wir nach H einem Überschriftenelement den Zug öffnen und es werden Mitglieder sein, es wird den Mitgliederbereich umschließen Danach öffne ich Tug und es wird das Mitglied selbst sein Jedes Mitglied besteht aus einem Bild und zwei Drehelementen für den Namen und für die Position Lassen Sie uns das Image-Tag öffnen. Ich werde das Out-Attribut für das Quellattribut löschen . Lassen Sie uns den Bilderordner auswählen, und dann müssen wir das erste Mitglied auswählen. Dann öffne ich das Span-Tag mit dem Klassennamen und dem Mitgliedsnamen. Es wird John Roberts sein. Lassen Sie uns das Mitglied zweimal duplizieren , denn insgesamt haben wir drei Teammitglieder Ich werde den Namen des Bildes ändern. Es wird Image-Mitglied zwei sein. Eigentlich haben wir hier vergessen , die Position hinzuzufügen. Fügen wir hier die Position des Mitglieds hinzu. Es ist digitaler Archivar. Ich nehme dieses Fan-Element und füge es für beide Span-Elemente hinzu, ich meine für beide Mitglieder Das zweite Mitglied wird braun sein. Was die Position angeht, werde ich sie hier einfügen, Kurator. Schließlich brauchen wir hier Mitglied Drei. Im Winter wird es ein Mietvertrag sein. Was die Position angeht, fügen wir hier den Community Manager ein. Alles klar? Ich denke , das sind alle Elemente, die gerade erstellt wurden. Die About-Seite sieht ziemlich hässlich aus, aber wir werden uns darum kümmern Das Einzige, was ich tun werde, ist einen neuen Klassennamen für den Fuß hinzuzufügen Es wird Foo sein. Wir benötigen diesen Klassennamen, um dem Fuß einige individuelle Stile hinzuzufügen Fuß einige individuelle Stile hinzuzufügen Auf der Info-Seite wird das gesamte H-Markup der Info-Seite erstellt Als Nächstes müssen wir diese Elemente formatieren. Und dafür fahren wir mit der nächsten Vorlesung fort. 20. Styling Über uns-Seite: Ordnung, in der vorherigen Lektion haben wir das HTML-Markup für die Seite „Über S“ erstellt das HTML-Markup für die Seite „Über S“ Nun, wie gesagt, wir müssen diese Seite jetzt stylen. Wie Sie sehen können, sieht die Seite ziemlich hässlich aus. Lassen Sie uns weitermachen und mit der Anpassung beginnen. Das erste, was ich tun werde, ist , dem Header-Element ein paar verschiedene Klassen hinzuzufügen . Ich werde zwei Klassen hinzufügen, der ersten geht es um Header. Ich werde diese Klasse für individuelles Styling verwenden. Außerdem werde ich hier den Namen der zweiten Klasse hinzufügen , den Seitenkopf. Ich werde diese Klasse auch auf anderen Seiten für das Header-Element verwenden auch auf anderen Seiten für das Header-Element , das wir in den kommenden Vorlesungen erstellen werden. Auch hier dient dieser Klassenname der individuellen Gestaltung. Was den Seitenkopf betrifft, so wird er für ein gängiges Styling verwendet. A Als Nächstes werde ich hier ein paar verschiedene Kommentare einfügen. Ich werde hier einen Kommentar zum Header hinzufügen. Dann brauchen wir das Ende des About-Headers. Ich brauche eigentlich das Ende des About-Headers. Lassen Sie uns diese Zeile nach unten verschieben. Als Nächstes benötigen wir Kommentare zu Funktionen. Ich nehme diese Zeile und füge sie hier ein. Außerdem werde ich Kommentare für das Team hinzufügen. Lassen Sie uns diese Codezeile ausschneiden und unten einfügen. Eigentlich ja, das ist richtig. In Ordnung, das ist es. Ich gehe zur CSS-Datei, ich meine ungefähr zur CSS-Datei, und ich werde ein paar Elemente verstecken. Lassen Sie uns weitermachen und mit dem Abschnitt „Über uns“ beginnen. Fügen wir hier Display N hinzu. Dann werde ich auch das Team ausblenden, ich werde die Fußzeile ausblenden Ich mache das, um unseren Styling-Prozess bequemer und einfacher zu gestalten unseren Styling-Prozess bequemer und einfacher Lassen Sie uns die Anzeige auf „Keine“ setzen. Ich verstecke diese Elemente für eine Weile. Lass uns zum Browser gehen. Wie Sie sehen können, haben wir hier nur das Header-Element. Als Nächstes werde ich zum Stil der CSS-Datei wechseln. Und im Header-Element werde ich den Seitenkopf anpassen. Ich meine dieses Element hier. Lassen Sie uns den Seitenkopf auswählen. Zuallererst werde ich in Ihren Kommentaren für den Seitenkopf diesen Code in die formatierte CSS-Datei schreiben, diesen Code in die formatierte CSS-Datei schreiben da wir diesen Code auch für andere Seiten verwenden werden Wir brauchen hier das Ende des Seitenkopfes. Lassen Sie uns den Seitenkopf auswählen. Definieren Sie zunächst mit der Höhe. Die Breite wird 100% sein. Was die angeht, ich nehme 32, 40, dann verwende ich Flexbox, um den Inhalt auszurichten. Lassen Sie uns Display Flex verwenden, dann müssen wir Flex-Richtung als Spalte angeben, weil ich die Elemente in einer Spalte vertikal ausrichten werde. Danach platzieren wir das Inhaltscenter mithilfe Justify Content Center und einem Einzelpostencenter. Gehen wir zum Browser. Hier haben wir den Header. Ich werde die Überschrift etwas nach unten verschieben. Lassen Sie uns weitermachen und den Seitenkopf auswählen. Gefolgt von der Abschnittsüberschrift SM. Ich werde Marching Top auf Rampe 15 setzen. In Ordnung, das war's also, mit der Ausrichtung. Als Nächstes ändere ich den Hintergrund. Ich werde das Hintergrundbild einstellen. Lassen Sie uns zu der CSS-Datei gehen und ich werde Kommentare dazu inspirieren Über. Eigentlich werde ich hier das übliche Ende platzieren. Ich werde die Überschrift Über mich auswählen. Dann definiere ich den Hintergrund. Lassen Sie uns die lineare Gradientenfunktion verwenden. Die erste Farbe wird 3033-mal RGBA sein und die Deckkraft 0,9 Wie für die zweite Farbe verwende ich dieselbe Farbe, aber die Deckkraft wird 0,7 sein . Dann definiere ich die URL Wählen wir ein Bild mit dem Namen About PG aus. Dann müssen wir die Position in der Mitte haben. Außerdem brauchen wir keine Wiederholung. Außerdem füge ich hier die Hintergrundgröße für den Wert Cover hinzu. Wir haben das Bild als Hintergrund für den Header. Als Nächstes werde ich mich um den Abschnitt „Über uns“ kümmern. Im Moment ist es versteckt. Ich werde diese Codezeile loswerden. Ich werde Flex Box verwenden, um die Flex-Anzeige der Elemente auszurichten. Dann müssen wir die Richtung der Spalte ändern. Außerdem werde Spalte ändern. Außerdem ich die Elemente in der Mitte ausrichten. Hier haben wir die Funktionen. Als Nächstes werde ich etwas Platz schaffen, indem ich die Polsterung auf 15 RAM an der oberen und unteren Seite und auf Null auf der linken und rechten Seite setze Jetzt haben wir etwas Platz innerhalb des Abschnitts. Als Nächstes werde ich mich um die Kopfzeile des Abschnitts kümmern . Füge hier neue Kommentare für den About-Header hinzu. Lassen Sie uns weitermachen und die Abschnittsüberschrift Über uns auswählen. Ich gehe zu einem Zeilentext in der Mitte. Als Nächstes werde ich mit Hilfe von Polsterung etwas Platz am unteren Rand schaffen Hilfe von Polsterung etwas Platz am unteren Rand Unten werden es zehn Ram sein. Außerdem werde ich den Header auf die rechte Seite verschieben , so wie wir ihn im fertigen Projekt haben. Ich meine diesen Header hier. Um das zu tun, werde ich mit den Werten 7% und dann 50% übersetzen den Werten 7% und dann . Wir bewegen die Elemente entlang der X-Achse und auch entlang der Y-Achse. Okay, wie Sie sehen können, befindet sich die Kopfzeile auf der rechten Seite. Eigentlich brauchen wir es hier. Textzeile nach rechts und nicht in der Mitte, weil der Text auf der rechten Seite platziert werden muss. Okay, als Nächstes werde ich mich um die nach dem Element kümmern. Ich werde es hier platzieren. Lassen Sie uns weitermachen und etwa die Abschnittsüberschrift auswählen , gefolgt von der Abschnittsgrenze mit hinter dem Element, für das ich die linke Position auf Auto setzen werde. Dann müssen wir die rechte Position auf Null setzen. Außerdem werde ich Transform Translate X mit dem Wert Null verwenden , um das Element auf der rechten Seite zu platzieren. Jetzt sieht alles gut aus. In Ordnung, sehen wir uns die Kopfzeile oben an. Als Nächstes werde ich mich um die Funktionen kümmern. Lassen Sie uns weitermachen und Ihre neuen Kommentare zu den Funktionen einfügen. Dann wähle ich „ Über Seitenfunktionen“ aus. Zuallererst stelle ich diese Platte auf Flex, weil wir Elemente mit Flex Book ausrichten werden. Dann muss ich das Konferenzzentrum rechtfertigen. Außerdem brauchen wir hier ein Zentrum. Und dann definiere ich die Breite. Lass es uns auf 60% setzen Lass uns einen Blick auf den Browser werfen. Ordnung, danach definiere ich die Breite und Höhe für das Feature. Lassen Sie uns also weitermachen und das Feature selbst auswählen. Ich werde die Breite auf 20 m einstellen, dann wird die Höhe ebenfalls 20 m betragen. Und ich werde auch die Hintergrundfarbe ändern. Stellen wir das auf 18183 mal ein. Als Nächstes werde ich mit einem Rand, sagen wir 23 Rampe, etwas Abstand zwischen diesen Features schaffen mit einem Rand, sagen wir 23 Rampe, etwas Abstand zwischen diesen Features sagen wir 23 Rampe Im Moment werde ich die Features auf zwei verschiedenen Linien platzieren , wie wir es im fertigen Projekt getan haben. Dazu füge ich hier, zum übergeordneten Element, die Eigenschaft flex wrap mit dem Wert p hinzu . Wie Sie nun sehen können, sind die Features auf zwei verschiedenen Linien angeordnet. Danach werde ich die Funktionen anpassen. Ich werde hier ein paar verschiedene Eigenschaften hinzufügen. Der nächste Wert wird der Grenzradius sein , weil wir die Elemente um ihn herum bilden Der Wert wird drei Ram sein. Dann werde ich mit Box Shadow einen Schatteneffekt erzeugen . Die Werte werden 0,5 bis 1 Gramm sein und die Farbe wird RBA sein. Wir brauchen hier schwarze Farbe mit der Opazität 0,2 In Ordnung, dann werde ich die Elemente innerhalb der Features ausrichten Dafür werde ich wieder Flex-Bücher verwenden. Ich werde die Richtung ändern, weil die Elemente vertikal platziert werden sollten. Die Richtung wird eine Spalte sein. Dann werde ich die Elemente in der Mitte ausrichten. Und dann brauchen wir etwas Abstand zwischen den Elementen, indem wir den Inhaltsbereich sogar rechtfertigen. Lassen Sie uns die Ergebnisse überprüfen. Okay, wie Sie sehen können, sind die Elemente gut ausgerichtet. Ich mache den Cursorzeiger. Ordnung, bevor wir diese beiden Elemente gestalten, ich meine die Symbole und die Überschriften, werde ich die Positionen einiger Funktionen ändern einiger Funktionen Ich werde die Funktionen hier auf diese Weise ausrichten. Lassen Sie uns fortfahren und Feature mit Diagrammauswahl auswählen Wir benötigen die Funktion Nummer zwei und dann die Funktion Nummer sechs. Wir benötigen dieselben Positionen für zwei Features. Ich meine an derselben Position , an der wir diese beiden Features mit derselben Entfernung bewegen müssen. Lass uns weitermachen und Transform Translate verwenden. Der Wert wird sechs d sein. Wie Sie sehen können, werden das zweite und die sechs Elemente abgelegt. Machen wir dasselbe mit den restlichen Elementen. Ich werde den Code, den wir brauchen, hier duplizieren, Kind Nummer drei und dann Nummer sieben, wir müssen sie um 12 Ram verschieben. Schließlich müssen wir uns auch um diese beiden Dinge kümmern . Lassen Sie uns diesen Code duplizieren. Ändern Sie hier die Zahlen, die wir brauchen. 4.8 Was den Wert der übersetzten Y-Funktion betrifft, so wird er 18 Ram sein. Okay, wie Sie sehen können, sind die Funktionen perfekt aufeinander abgestimmt. Jetzt müssen wir diesen Teil hier erstellen, ich meine diesen Kreis. Ich werde das mit vier Pseudoelementen machen. Lassen Sie uns das Feature auswählen, gefolgt von den vorherigen Pseudoelementen Lassen Sie uns den Inhalt auf leer setzen. Dann definiere ich W und Höhe. Ich werde beide auf 15 Ram setzen. Als Nächstes werde ich die Hintergrundfarbe ändern. Die Farbe wird 111 sein. Außerdem müssen wir das Element Randradius mit einem Wert von 50% abrunden . Dann werde ich die Position festlegen, um das Element sichtbar zu machen. Dann brauchen wir die relative Position. Für die übergeordneten Elemente ist das übergeordnete Element ein Merkmal, wir benötigen die relative Position. Schauen wir uns die Ergebnisse an, die wir hier haben. Kreisen Sie als Nächstes und ich schätze, wir müssen den Kreis nach oben verschieben. Ich werde die oberste Position auf -40% setzen Bei der linken Position werden es 50% sein . Dann müssen wir das Element perfekt zentrieren Wir müssen translate x mit dem Wert -50% transformieren Okay, hier haben wir den Kreis Wir müssen die Opazität verringern, so wie wir es hier haben. Ich stelle die Deckkraft auf 2,7 ein und blende dann den äußeren Teil des Dafür müssen wir hier Overflow hinzufügen. In Ordnung, das ist ungefähr vor dem Element. Als Nächstes müssen wir uns um die Icons und die Überschriften kümmern. Ich wähle Feature, gefolgt vom Span-Element. Wie Sie sehen können, bedeckt der Kreis im Moment das Span-Element und wir müssen dieses Problem beheben. Setzen wir den Index auf eins. Wie Sie jetzt sehen können, befinden sich die Symbole über den Kreisen. Das Problem ist, als Nächstes zu sprechen. Lassen Sie uns die Telefongröße des Symbols erhöhen . Es werden sechs sein. Außerdem werde ich die Farbe ändern. Lassen Sie uns hier die Farbe 320b verwenden. Die Icons sehen also ziemlich gut aus. Als nächstes müssen wir uns um die Überschriften kümmern. Ich wähle Feature aus, gefolgt vom Element H mit drei Überschriften Lassen Sie uns die Schriftgröße auf 1,8 m einstellen. Dann müssen wir ein Gewicht von 300 haben. Außerdem werde ich die Farbe des Textes ändern. Stellen wir es auf Weiß ein. Dann definiere ich die Breite. Lass es uns auf 70% setzen. Schließlich werde ich Text verwenden, die Linienmitte, okay, also wie Sie sehen können, sehen die Überschriften ziemlich gut aus Und mit den Funktionen sind wir eigentlich fertig. Als Nächstes werde ich mich um den Teambereich kümmern. Ich meine, dieser Abschnitt hier ist gerade versteckt. Zuallererst werde ich hier Kommentare für das Team hinzufügen. Dann werde ich Display None loswerden. Und ich werde diese Bilder kleiner machen , weil sie zu groß sind. Also lasst uns weitermachen und das Mitglied IMG auswählen und die Höhe des Bildes auf 27 Ram setzen. Außerdem werde ich sie mit Object Fit Color füttern. Okay, jetzt haben wir viel bessere Ergebnisse. Als Nächstes werde ich mich um das Team kümmern. Ich bin im Wrapper-Element. Lass uns weitermachen und diesen Code holen, füge ihn hier hinzu. Lassen Sie uns Gewicht und Größe definieren. Die Breite wird 200% sein, dann werde ich Höhe auf 200 m setzen. Außerdem müssen wir das Bild als Hintergrund des Abschnitts festlegen das Bild als Hintergrund des Abschnitts Lassen Sie uns den Hintergrund verwenden. Ich werde die lineare Gradientenfunktion verwenden. Zuallererst müssen wir die Richtung des Farbübergangs definieren . Es wird nach unten gehen. Dann werde ich drei verschiedene Farben verwenden. Die erste ist 3033 mal und die Opazität 0,7. Dann haben wir RGBA mit den Werten 1927 Die Deckkraft wird 0,9 betragen. Was die dritte Farbe angeht, werde ich wieder RGBA 3033 mal verwenden und die Deckkraft 0,9 In Ordnung, als Nächstes müssen wir die werde ich wieder RGBA 3033 mal verwenden und die Deckkraft 0,9 In Ordnung, als Nächstes müssen wir die URL definieren. Ich wähle ein Bild namens Team BG aus. Und dann brauchen wir das Zentrum, keine Wiederholung. Okay, danach verwende ich die Eigenschaft „Hintergrundgröße“ mit dem Wert „Cover“. Und dann lassen Sie uns das Ergebnis überprüfen. Hier haben wir das Hintergrundbild. Wenn wir uns das fertige Projekt ansehen, werden Sie tatsächlich feststellen, dass der Hintergrund eine andere Form hat. Und ich werde dem Element diese Form mithilfe der Eigenschaft Clip Path hinzufügen . Ich werde eine der Websites besuchen. Lassen Sie uns nach Clip Path Property suchen und dann diese Website besuchen. Hier ist es, Bennett Filly genannt. Hier können Sie eine beliebige Form auswählen. In unserem Fall brauchen wir ein Dreieck. Ich werde diese Punkte verschieben , um das Dreieck zu erhalten. Wir brauchen ein perfektes Dreieck. Wir brauchen hier 100% und 50% und 100% Jetzt haben wir das perfekte Dreieck. Lass uns diesen Code von hier holen und hier weitermachen. Wenn wir das Ergebnis überprüfen, werden Sie sehen, dass wir hier das Dreieck haben. Okay? Als Nächstes werde ich die äußeren Teile ausblenden, und dafür müssen wir Abschnittselementen eine Überlaufüberschrift hinzufügen Fügen wir hier Overflow he hinzu. Jetzt haben wir hier nicht mehr die Scrollleiste. Danach werde ich dem Team ein paar verschiedene Eigenschaften hinzufügen . Wir müssen den Inhalt aufeinander abstimmen. Ich werde Display Flex verwenden. Dann müssen wir die Richtung ändern, weil wir die Elemente ausrichten müssen, insbesondere brauchen wir eine Flex-Richtungsspalte. Dann werde ich den Inhalt mithilfe von Justify Content Center und Alignment Items Center in der Mitte platzieren . Lassen Sie uns das Ergebnis, das wir hier haben, die Bilder und als Nächstes auch die Überschrift überprüfen . Ich werde dem einen kleinen Schatteneffekt hinzufügen. Dreieck mit Boxschatten. Die Werte sind 01, Rampe drei Ram und als Farbe verwenden wir Schwarz mit der Opazität 0,9 Okay, nächstes müssen wir uns um die Mitglieder kümmern Ich wähle Wrapper-Entwicklung aus, das heißt Mitglieder Lassen Sie uns die horizontale Linienzeile der Elemente mithilfe von Display-Flex platzieren horizontale Linienzeile der Elemente mithilfe von Display-Flex Wie Sie jetzt sehen können, werden die Bilder horizontal nebeneinander platziert. Als Nächstes werde ich mich um die Überschrift kümmern. Lassen Sie uns fortfahren und Team auswählen , gefolgt vom Überschriftenelement H One. Ich werde die Telefonfamilie wechseln. Verwenden wir hier ein Telefon namens Script Cursive. Dann werde ich die Telefongröße erhöhen. Es werden zehn sein, dann ändere die Farbe. Lass uns die blaue Farbe verwenden. Außerdem werde ich mit Schatten einen Schatteneffekt erzeugen . Die Werte werden 01m2 sein und die RGBA-Farbe wird schwarz mit der Kapazität 0,5 sein . Schließlich benötigen wir etwas Abstand zwischen den Bildern und der Überschrift Verwenden wir Margin für die Werte. -15 Ram an der Oberseite, dann Null, dann 15 Ram an der Unterseite und wieder Null an der linken Seite In Ordnung, setzen wir uns über die Überschrift. Lass uns weitermachen und uns um die Mitglieder kümmern. Ich wähle Mitglied aus und richte dann die Elemente wieder mit Flachsbuch Wir brauchen Display-Flachs. Dann müssen wir die Elemente vertikal ausrichten. Wir müssen die Richtung ändern, es wird die nächste Spalte sein, wir müssen die Elemente mittig ausrichten. Und zum Schluss werde ich mithilfe von Rand etwas Platz schaffen. Die Werte werden oben und unten Null und links und rechts sechs m sein. Lassen Sie uns weitermachen und die Ergebnisse überprüfen wir hier auf den Bildern haben. Unten sehen Sie den Namen des Mitglieds und auch die Position rechts. Als nächstes müssen wir uns um die Bilder kümmern. Ich werde hier ein paar verschiedene Stile hinzufügen. Lassen Sie uns sie mit einem Randradius von 50% abrunden . Dann mache ich sie schwarz-weiß, indem ich die Filter-Grauskala 100% verwende . Außerdem ändere ich den Coursormkeic-Zeiger Ich werde den Bildern den Hover-Fakt hinzufügen, den wir in diesem Projekt ein paar Mal verwendet haben Mal Ich wähle das Bild eines Mitglieds und dann den Mauszeiger aus. Dann brauchen wir auch eine Filter-Graustufe mit dem Wert Null. Ich werde hier einen Übergang hinzufügen, um einen gleichmäßigeren Effekt Wir benötigen einen Filter von 1 Sekunde Okay, jetzt haben wir hier diesen netten und coolen Who-Effekt. Okay, lassen Sie uns weitermachen und die Namen und Positionen der Mitglieder anpassen . Ich werde den Mitgliedsnamen auswählen. Lassen Sie uns die Schriftgröße erhöhen. Es wird 1,8 Ram sein. Dann müssen wir Text in Großbuchstaben umwandeln. Eigentlich brauchen wir hier Großbuchstaben, aber transformieren. Und dann Großbuchstaben. Lass uns die Farbe ändern, sie weiß machen. Außerdem werde ich etwas Abstand zwischen den Gitternetzen mit einem Abstand von 0,1 Ram hinzufügen den Gitternetzen mit einem Abstand von 0,1 Und schließlich etwas Platz am oberen Rand schaffen. Die beiden besten Ram wurden, die Namen sehen ziemlich gut aus. Als nächstes müssen wir uns um die Positionen kümmern. Lass uns weitermachen und diesen Code duplizieren. Ich werde den Klassennamen ändern, es wird Position sein. Dann wird die Telefongröße ein Ram sein. Wir brauchen die Texttransformation in Großbuchstaben, die Farbe wird die blaue Farbe sein, diese hier. Dann brauchen wir einen Abstand von 0,1 Ram. Und lassen Sie uns Margin Top loswerden. Lassen Sie uns die Ergebnisse überprüfen. Die Positionen sehen ziemlich gut aus. Okay, mit dem Teamteil sind wir fertig. Alles sieht ziemlich gut aus. Als nächstes müssen wir uns um die Fußzeile kümmern, die momentan versteckt ist Also werde ich hier Kommentare für die Fußzeile hinzufügen. Lassen Sie uns diese Zeile nach unten verschieben. Ich werde diese Codezeile loswerden. Dann verschiebe ich die Elemente mit margin, Top -50 Ram Dadurch werden die Elemente nach oben verschoben. Als Nächstes platziere ich den Header auf der rechten Seite, so wie wir ihn hier haben. Lassen Sie uns weitermachen und Fußzeile ungefähr auswählen, gefolgt von der Fußzeilenkopfzeile Ich werde Text verwenden, der mit dem Wert rechts ausgerichtet ist. Und dann müssen wir translate x mit dem Wert 8% transformieren . Wie Sie sehen können, befindet sich der Header auf der rechten Seite. Jetzt muss ich nur noch das After-Element auf die rechte Seite verschieben . Dafür müssen wir uns diesen Sektor schnappen. Lass es uns auch hier hinzufügen. Ich werde hier einen Abschnittsrand hinzufügen, wobei das Element, das wir definieren müssen, die rechte Position jetzt Null sein wird, nachdem Pdmon die Position angeführt hat , standardmäßig und ich werde es auf automatisch arbeiten lassen, damit die richtige Position funktioniert Außerdem müssen wir hier translate x mit einem Wert Null transformieren translate x mit einem Wert Null In Ordnung, das gehört zur Info-Seite. Wir sind fertig, alles sieht ziemlich gut aus. Hoffentlich gefällt es dir. Als Nächstes müssen wir uns um die nächste Seite unseres Projekts kümmern , die Buchseite sein wird. Ich meine diese Seite hier. Lassen Sie uns dafür mit der nächsten Vorlesung fortfahren. 21. HTML-Markup für Bücher-Seite erstellen: In der vorherigen Lektion wir die Arbeit an der Seite „Über uns“ abgeschlossen. Wir haben diese Seite gestaltet und sie sieht ziemlich nett und cool Als Nächstes müssen wir weitermachen und die nächste Seite unseres Projekts kümmern, die Buchseite sein wird Hier haben wir die Buchseite. Wie Sie sehen können, besteht sie aus einer Kopfzeile, ich meine diese Kopfzeile hier mit Hintergrundbild. Dann haben wir neun verschiedene Bücher. Unten siehst du die Fußzeile. Ordnung, also in dieser Vorlesung werde ich das HTML-Markup für diese Seite erstellen Gehen wir zurück zum VS-Code. Zuallererst werde ich zwei neue Dateien erstellen. Das erste werden Bücher sein, Do HTML, und dann brauchen wir Bücher. Ordnung, lassen Sie uns die HTML-Datei öffnen und den gesamten Inhalt abrufen. Von hier aus werde ich den gesamten Code kopieren. Fügen wir den Code in die HTML-Datei des Buches ein. Das erste, was ich tun werde, ist den Namen der CSS-Datei zu ändern. Es werden Bücher sein, SS. Dann werde ich die Überschriften ändern. Wir brauchen Bücher. Dann werden die zweite Überschrift unsere Bestseller sein. Als Nächstes lösche ich den Inhalt von der Info-Seite. Ich werde von hier weggehen, lassen Sie uns nur den Kurznamen ändern, den wir hier brauchen. Bücher. Alles klar? Also ich denke, das ist es tatsächlich. Ich werde noch eine Sache machen. Gehen wir zur HTML-Datei mit dem Indexpunkt und suchen wir nach Büchern. Als. Denken Sie daran, dass wir hier die Hauptschaltfläche haben. Alle anzeigen. Und ich werde den Wert des H-Referenzattributs ändern . Sobald wir auf diese Hauptschaltfläche geklickt haben, sollten wir zur Buchseite navigieren. Ich gehe zu Institute Books, HTM. Okay, schauen wir im Browser nach. Lass uns zur Hauptseite gehen. Dann klicken Sie hier auf diese Schaltfläche. Wie Sie sehen können, werden wir zur Seite mit den Büchern weitergeleitet. Im Moment haben wir hier das Logo, das Menüsymbol, auch die Überschriften und die Fußzeile Ordnung, gehen wir zur industriellen HTM-Datei und holen uns die Ich nehme dieses Element, dann gehe ich zurück zu den Büchern in der HDML-Datei und direkt nach der Navigation bin ich eigentlich nicht die Navigation, sondern die Kopfzeile Ich werde neue Kommentare für Bücher einfügen. Dann öffne ich die Abschnittselemente mit dem Klassennamenbuchabschnitt. Ich werde hier den kopierten Code aus dem Index des H-Dateiteams einfügen . Ich meine Bücherliste. Schauen wir uns das Projekt an. Wir haben hier drei verschiedene Bücher. Wie Sie sich in diesem Abschnitt erinnern, benötigen wir auch sechs weitere Bücher. Ich werde das Buch sechsmal duplizieren. Dann werde ich die Namen der Bücher und auch die Autoren ändern . Lass uns das schnell machen. nächste Buch wird Krieg und Frieden von Leo Tolstoi Dann werden wir Jane Eyre von Charlotte haben . Dann wird das nächste Buch erscheinen, ich habe vergessen, die Namen der Bilder zu ändern , die wir hier brauchen. Buch vier. Dann wird es Buch fünf sein. Dann brauchen wir Buch sechs. Der Name wird 1984 sein. Der Autor ist George Orwell. Dann haben wir Buch sieben. Der Name wird Don Quijote sein. den Autor betrifft, wird es We Kill the Servants Dann haben wir Buch Nummer acht. Dann wird es der Herr der Ringe sein. Was den Autor angeht, werde ich hier J R R Tolkien einfügen J R R Tolkien Was das letzte Buch auf der Liste betrifft, so wird es Buch Nummer neun sein Der Name ist The Great Tsp. Was den Autor betrifft, so wird es Scott Feral sein In Ordnung, also lassen Sie uns über das HTML-Markup sprechen. Hoffentlich ist alles richtig. Gehen wir zum Browser und schauen in den Büchern nach. Ich denke, dass alles richtig ist. Lassen Sie uns über das H-L-Markup sprechen. Gehen wir zur nächsten Vorlesung über, in der wir diese Seite gestalten 22. Styling-Bücher-Seite: In der vorherigen Vorlesung haben wir eine neue Seite für unsere Buchseite für Projekt I erstellt. Und wir haben das HTML-Markup erstellt. Jetzt ist es an der Zeit, diese Seite zu gestalten. Wenn Sie sich die Buchseite ansehen, werden Sie tatsächlich feststellen, dass die meisten Elemente bereits gestaltet sind Wir müssen nur ein Hintergrundbild zur Kopfzeile hinzufügen und uns auch um die Ausrichtung dieser Bücher kümmern die Ausrichtung dieser Bücher Gehen wir zum VS-Code. Als erstes werde ich den Klassennamen des Headers ändern. Wir brauchen hier den Buch-Header und nicht den About-Header. Dann werde ich Bücher mit CSS-Dateien öffnen. Lassen Sie uns zunächst Ihre neuen Kommentare für den Header einfügen. Dann wähle ich die Kopfzeile der Bücher aus. Ich werde das Hintergrundbild für die Kopfzeile der Bücher ändern . Lassen Sie uns den Hintergrund auswählen. Dann werde ich lineare Farbverläufe verwenden. Verwenden Sie hier den RGBA-Wert 3033 mal und die Deckkraft 0,9. Dann müssen wir wieder RGBA verwenden, dieselbe Farbe, aber mit der Opazität 0,7. Als Nächstes wähle ich ein Bild aus dem wähle Es werden Bücher BG sein. Dann müssen wir die Position des Hintergrundbildes definieren . Es wird mittig sein und wir brauchen auch hier keine Wiederholung. In Ordnung, schauen wir uns das Projekt an. Wie Sie sehen können, hat der Header den Hintergrund, ich meine das Hintergrundbild. Als Nächstes werde ich mich um die Ausrichtung der Elemente kümmern. Ich werde hier neue Kommentare für den Buchbereich hinzufügen. Dann wähle ich Abschnittselemente aus. Um die Elemente auszurichten, verwende ich CSS, Flax Book, wir benötigen Display Flax Dann müssen wir die Elemente zentrieren. Ich meine den Inhalt. Dafür müssen wir das Inhaltszentrum begründen und die Elemente aufeinander abstimmen. Eigentlich brauchen wir eine Zeile. Außerdem werde ich den Raum innerhalb des Abschnitts erstellen. Stellen wir die Polsterung oben und unten auf 15 m und links und rechts auf Null ein. Okay, danach werde ich die Bücher darauf ausrichten. Lassen Sie uns weitermachen und den Buchabschnitt auswählen , gefolgt von der Bücherliste. Ich werde die Breite auf 80% setzen und dann wieder Flex Book verwenden. Wir brauchen Display Flex. Dann werde ich den Konflikt mit Justified Conf Center in den Mittelpunkt stellen . Um die Bücher auf verschiedenen Zeilen zu platzieren, müssen wir eine der Flexbox-Eigenschaften namens Flex Wrap mit dem Wert p verwenden der Flexbox-Eigenschaften namens Flex Wrap mit dem . In Ordnung, also wie Sie sehen können, sind alle neun Bücher gut zusammen mit der Buchseite platziert , wir sind fertig Die Fußzeile sieht gut aus. Jetzt müssen wir weitermachen und die nächste Seite unseres Projekts erstellen die nächste Seite unseres Projekts Die nächste Seite wird eine Testimonial-Seite sein, auf der wir dafür diesen schönen und coolen Slider erstellen werden Fahren wir mit der nächsten Vorlesung fort. 23. HTML-Markup für die Testimonials-Seite erstellen: Ordnung, in der letzten Vorlesung haben wir Arbeit an der Buchseite abgeschlossen Wie gesagt, jetzt müssen wir weitermachen und mit der Erstellung der nächsten Seite unseres Projekts beginnen. Diese Seite wird die Seite mit den Testimonials sein. Hier haben wir die Seite mit den Testimonials. Wir haben hier den Standard-Header mit Hintergrundbild, und dann können Sie hier den Slider mit den Kundenreferenzen sehen Slider mit den Kundenreferenzen Wir haben hier zwei Steuerelemente, linke und rechte Pfeile Wenn wir darauf klicken, funktioniert der Slider. Außerdem haben wir unten unter den Steuerelementen Punkte Von hier aus können wir das Abspielen des Sliders verwalten. In diesem Abschnitt werden wir all diese Dinge erstellen. Zuerst müssen wir die Seite erstellen und uns dann um das HTML-Markup kümmern Gehen wir zum VS-Code und erstellen wir neue Dateien für die Testimonial-Seite Wir benötigen Testimonial-Html, und dann werde ich das CSS für Testimonials erstellen Ich werde die HTM-Datei auf die linke Seite verschieben . Lass es uns öffnen Okay? Ich hole mir das Zeug aus der Punkt-HTML-Datei des Buches. Ich werde den gesamten Inhalt kopieren und hier einfügen. Ich werde hier einige Änderungen vornehmen. Lassen Sie uns dieses Panel schließen. Ich werde den Namen der CSS-Datei im Link-Element ändern . Es werden Testimonials CSS sein. Dann werde ich den Klassennamen des Header-Elements ändern Es wird eine Kopfzeile mit Testimonials sein. Dann müssen wir den Inhalt der Überschriftenelemente ändern Inhalt der Überschriftenelemente Wir brauchen hier Kunden. Dann wird die zweite Überschrift das sein, was die Kunden sagen. Dann werde ich diesen Abschnitt von hier aus loswerden und den Fuß verlassen. Lassen Sie uns den Klassennamen des Fußzeilenelements ändern. Es werden Kundenreferenzen sein. Außerdem gehe ich zur Index-HTML-Datei und finde hier den Abschnitt mit den Testimonials Wie Sie sich erinnern, haben wir im Bereich mit den Testimonials die wichtigsten Schaltflächen Und wir sollten hier den HTML-Code für Testimonials einfügen, denn sobald wir auf die Schaltfläche auf der Hauptseite klicken, ich meine im Testimonial-Bereich, dann sollten wir zur Testimonial-Seite navigieren Okay, hier haben wir die Kopf- und die Fußzeile. Jetzt müssen wir direkt nach dem Header einen neuen Abschnitt in der HTML-Datei mit den Testimonials erstellen neuen Abschnitt in direkt nach dem Header einen neuen Abschnitt in der HTML-Datei mit den Testimonials Ich werde in neuen Kommentaren nach Testimonials suchen. Dann öffne ich die Abschnittselemente mit dem Testimonial-Bereich für Klassennamen In diesem Element werde ich Entwicklungen mit dem Klassennamen ttmonials oben erstellen dem Klassennamen ttmonials oben Es wird zwei Überschriften und auch die Sterne enthalten Ich öffne H drei Überschriftenelemente mit dem Dann werde ich H ein Überschriftenelement erstellen und der Text wird als Testimonial dienen Dann brauchen wir Sterne. Ich werde ein Tag mit dem Klassennamen Sterne öffnen. Dann füge ich hier fünf Phonoicons ein, für die wir Elemente benötigen Die Klasse ist ein Stern, wir werden fünf Sterne haben Also werde ich diese Codezeile viermal duplizieren. Dann lass uns weitermachen und den Browser überprüfen. Wie Sie sehen können, haben wir hier die Überschriften, gefolgt von den Sternen Als Nächstes werde ich Entwicklungen erstellen und es wird ein Testyules-Wrapper sein Innerhalb des Wrappers werde ich den Slider erstellen, in dem ich die Folie selbst erstellen werde Insgesamt werden wir fünf Folien haben, aber im Moment werde ich eine Folie erstellen, weil wir die Folie stylen müssen und dann müssen wir dafür sorgen, dass der Slider funktioniert Wir werden die restlichen Folien etwas später hinzufügen. Ich werde hier Folienhintergrund einfügen , ich meine Folie BG. Es wird ein leeres Element sein. Nach einem kurzen Hintergrundwissen werde ich eine neue Entwicklung mit dem Klassennamen und dem Folieninhalt erstellen, in den ich zwei Elemente einfügen werde. Ich meine, bei den Telefon-Omics, die wir brauchen, ist das Element mit den Klassen FA durchgehend links Dann werde ich diese Codezeile duplizieren und den Klassennamen ändern, den wir hier brauchen, richtig Lass uns den Browser überprüfen. Wie Sie sehen können, haben wir hier zwei Zitate. Als Nächstes werde ich mich um das Folienbild kümmern. Ich werde Ihre Entwicklung mit dem Klassennamen in die Entwicklung einfügen . Lass uns das Bild öffnen. Ich wähle das Bild aus dem Bilderordner aus und es wird das Bild für den Kunden sein. Danach werde ich eine weitere Entwicklung mit dem Klassennamen als Folientext erstellen , in der wir das Element H mit drei Überschriften benötigen. Es wird die beste Bibliothek sein. Dann öffne ich nach den drei Überschriftenelementen einen Absatz, öffne ich nach den drei Überschriftenelementen einen Absatz in den ich einen Dummy-Text einfügen werde Lass uns Lorum 20 benutzen. Hier haben wir ein paar Dummy-Texte. Nach dem Absatz müssen wir einen weiteren Absatz erstellen. Und es sollte den Klassennamen Client haben. Ich werde Ihren Namen des Kunden einfügen. Sagen wir Bob Smith und dann das Alter von 20. Okay. Nach dem Absatz werde ich mich um die Kontrollen kümmern. Ich meine, die Pfeile auf der linken und rechten Seite des Sliders. Ich meine diese Pfeile. Lassen Sie uns weitermachen und Entwicklungen mit der Steuerung der Klassennamen innerhalb der Entwicklung öffnen . Ich öffne das Element mit der Klasse A mit einem durchgezogenen A-Pfeil nach links und dann brauchen wir den Pfeil nach rechts. Lassen Sie uns die Ergebnisse hier überprüfen. Wir haben die Pfeile links und rechts. Danach werde ich die Entwicklung erstellen. Es wird eine Hülle für die Punkte sein. Fügen wir dem Klassennamen Punkte hinzu. Innerhalb der Punkte werde ich Spanlments erstellen, was ein leeres Element sein wird Duplizieren wir es viermal, denn insgesamt werden wir fünf Punkte haben In Ordnung, das war's vorerst mit dem HTML-Markup. Wie gesagt, wir werden die restlichen Folien etwas später hinzufügen , sobald wir uns um die Bearbeitung des Sliders gekümmert haben Ich meine, wenn wir hier das Javascript zu diesem Teil hinzufügen, haben wir alle Elemente. Wir sollten sie stylen. Eigentlich sind die Punkte nicht sichtbar weil wir hier nur die leeren Span-Elemente haben. Wir werden uns etwas später darum kümmern. Okay, wie gesagt, wir müssen diese Elemente stylen. Und dafür fahren wir mit der nächsten Vorlesung fort. 24. Styling-Erfahrungsberichte Seite: Ordnung, in der vorherigen Vorlesung haben wir das HTML-Markup für die Seite mit den Testimonials erstellt HTML-Markup für die Seite mit den Und jetzt müssen wir den Slider stylen. Und wir müssen uns auch um den Header kümmern. Danach werden wir den Slider zum Laufen bringen. Ordnung, gehen wir zum VS-Code, und in die CSS-Datei mit den Testimonials füge ich neue Kommentare für den Header ein Dann wähle ich Testimonial-Header aus und Ich werde die lineare Gradientenfunktion verwenden. Bei einem RGBA-Wert benötigen wir 3033 mal und die Deckkraft 0,9 Als nächstes benötigen wir einen weiteren RGBA-Wert mit den gleichen Zahlen, aber die Deckkraft wird 0,7 betragen. Danach wähle ich ein Bild aus dem Es wird ein Testimonial-PG sein. Dann werde ich die Position des Hintergrunds definieren. Lassen Sie uns die Position für die X-Achse auf 50% und für die Y-Achse auf 40% setzen. Dann brauchen wir keine Wiederholung. Okay, hier haben wir das Hintergrundbild für den Header. Als nächstes müssen wir uns um den Testimonial-Bereich kümmern , ich meine den Slider Lassen Sie uns also weitermachen und hier Kommentare für Testimonials einfügen hier Kommentare für Testimonials Dann wähle ich den Bereich Testimonials aus. Und innerhalb von Höhen definiert, wird die Breite 100% betragen. Was die Höhe angeht, werde ich sie auf 140 Viewport-Höhe setzen Ich meine 40% des Viewports. Und dann werde ich die Hintergrundfarbe ändern. Es wird 191919 sein. Ordnung. Die Innenhöhen werden auf das Element angewendet und auch die Hintergrundfarbe wird geändert. Als Nächstes werde ich mich um das Testimonial-Top kümmern . Ich meine dieses Element hier, es beinhaltet die Überschriften und auch die Sterne Lassen Sie uns also weitermachen und Testimonial Top auswählen. Zunächst werde ich definieren, die Position absolut sein wird Dann füge ich hier die relative Position hinzu. Weil wir das Element entsprechend den übergeordneten Elementen positionieren werden. Wir brauchen hier eine relative Position. Dann werde ich die Eigenschaften oben und links definieren. Die obere Position wird 10% betragen . Was die linke Position angeht, gehe ich auf 30 bis 50%. Dann müssen wir die Funktion translate x mit dem Wert -50% transformieren Funktion translate x mit dem Wert , weil wir die Elemente zentrieren Schauen wir uns das Projekt an. Hier haben wir den Header, die Überschriften und die Sterne Als nächstes müssen wir diese Elemente vertikal in der Spalte platzieren diese Elemente vertikal in der Spalte Dafür werde ich Flexbox verwenden. Lass uns Display Flex verwenden. Die Spalte Ich verwende die Flex-Richtung und dann richten wir die Elemente in der Mitte aus. Schauen wir uns das Projekt an. Wie Sie sehen können, sind die Überschriften und die Sterne vertikal in der Spalte angeordnet Als Nächstes nehme ich hier die erste Überschrift, bei der es sich um ein H-Element mit drei Überschriften handelt Lassen Sie uns weitermachen und die Top Drei der Testimonials auswählen. Stellen wir die Telefongröße auf zwei Ram ein. Dann wird das Telefon 300 wiegen. Außerdem werde ich die Farbe bei 72 °C ändern . Die erste Überschrift ist nebeneinander angeordnet. Als Nächstes werde ich mich um die zweite Überschrift kümmern. Lassen Sie uns weitermachen und diesen Code duplizieren. Ich werde den Selektor ändern, den wir hier brauchen, H, ein Überschriftenelement Die Schriftgröße wird fünf Ram betragen. Dann setze ich die Schriftstärke auf 300. Als Nächstes brauchen wir Farbe, es wird weiß sein. Dann werde ich Text in Großbuchstaben umwandeln. Erstellen Sie außerdem einen gewissen Abstand zwischen den Buchstaben , indem Sie den Buchstabenabstand von 0,4 Ram verwenden. Dann werde ich mit dem Rand etwas Platz schaffen. Ich werde den Rand oben und unten auf zwei m und auf der linken und rechten Seite auf Null setzen oben und unten auf zwei m und auf der . Okay, die zweite Überschrift ist kundenspezifisch. Als Nächstes werde ich mich um die Sterne kümmern. Ich bin in den Telefonsymbolen. Lassen Sie uns also fortfahren und Testimonial Top auswählen, gefolgt von dem Element Ich werde die Telefongröße auf 1,6 RAM einstellen. Dann wird die Farbe blau sein, ich meine 320e. Dann brauchen wir Spielraum , um etwas Platz auf der linken und rechten Seite der Sterne zu schaffen der linken und rechten Seite der Sterne Ich werde den Rand auf Null und 0,5 Ram setzen. Das ist es. Die Überschriften und auch die Phonomiker Die Sterne sind maßgeschneidert. Als Nächstes werde ich mich um das Bild kümmern , weil es momentan zu groß ist. Lassen Sie uns fortfahren und Folie G auswählen . Ich werde innerhalb der Höhe einstellen. Die Breite wird 15 sein. Dann ändere ich die Höhe auf 16. Dann müssen wir die innere Höhe auf das Bildelement selbst anwenden . Wir benötigen ein Folienbild gefolgt vom Bildelement. Lassen Sie uns mit der Höhe beide auf 100% setzen der Höhe beide auf 100% Dann müssen wir das Bild mit Object Fit Cover anpassen. Wir können sehen, dass das Bild kleiner geworden ist. Als Nächstes kümmere ich mich um die Steuerung. Ich bin in den Pfeiltasten links und rechts. Ich bin in diesen Pfeilen. Lassen Sie uns weitermachen und die Steuerung auswählen. Ich werde mit und Höhen definieren. Lassen Sie uns beide auf fünf setzen. Dann werde ich die Hintergrundfarbe ändern. Es wird 78584 sein. Lassen Sie uns die Elemente um ihn herum mit einem Grenzradius von 50% erstellen . Schauen wir uns das Projekt an Hier haben wir die Kreise. Ich werde die Opazität verringern, sie wird 0,6 sein. Dann platziere ich die Pfeile in der Mitte dieser Kreise Dafür benötigen wir ein Display mit Justify Content Center und einem Line Item Center Wie wir nun sehen, befinden sich die Pfeile in der Mitte der Kreise. Als Nächstes ändern wir die Schriftgröße. Ich mache es drei m. Dann brauchen wir Farbe mit dem Wert 444. Wie Sie sehen können, sind die Pfeile größer. Als Nächstes werde ich die Position der Bedienelemente ändern. Lassen Sie uns die Position auf absolut setzen. Dann werde ich sie vertikal in der Mitte platzieren. Dafür muss die oberste Position 50% liegen. Dann verwende ich Transform Translate Y mit dem Wert -50%. Wie Sie sehen können, werden sie in der Mitte des Abschnitts platziert, in der Mitte vertikal Jetzt müssen wir die Positionen für jeden Pfeil separat definieren die Positionen für jeden Pfeil separat Lassen Sie uns weitermachen und die Steuerelemente mit der Kinderauswahl auswählen. Wir brauchen hier einen Child-Selektor mit dem Wert eins. Lassen Sie uns die linke Position auf 15% setzen Dann werde ich den Code duplizieren , den wir hier benötigen, Kind zwei statt linker Position, ich werde die rechte Position verwenden Okay, wie Sie sehen können, werden die Pfeile als nächstes platziert und positioniert Ich werde mich um die Punkte kümmern, diese Elemente hier. Wie Sie sich erinnern, haben wir leere Span-Elemente erstellt. Lassen Sie uns weitermachen und Punkte auswählen, die übergeordneten Elemente, ich meine den Wrapper Setzen wir die Position auf absolut. Dann muss die untere Position 15% liegen, dann müssen wir die Punkte dafür zentrieren, ich werde die linke Position 50% verwenden und dann müssen wir die Translation x -50% transformieren . Im Moment sind die Elemente nicht sichtbar, aber wir werden uns in einer Minute darum kümmern Wählen wir die Punktspanne aus. Stellen wir die Höhe auf ein Rm ein. Dann werde ich die Hintergrundfarbe ändern. Es wird C sein. Schauen wir uns das Projekt an. Wie Sie sehen können, sind die Span-Elemente nicht sichtbar. Ich werde dieses Problem mithilfe von Flexbooks beheben. Lassen Sie uns das Display auf Flex setzen. Sobald Sie die Anzeigeeigenschaft definiert haben, die Elemente sichtbar. Lassen Sie uns sie in der Mitte ausrichten. Jetzt sollten wir die Span-Elemente sehen. Wir haben hier fünf Span-Elemente. Lassen Sie uns sie mit einem Randradius von 50% abrunden und mit einem Rand von 0,5 Ram auch etwas Abstand zwischen ihnen schaffen . Wie Sie sehen können, haben wir hier fünf Punkte. Als Nächstes werde ich den Cursor ändern. Machen wir es zum Zeiger. Schließlich werde ich einen von ihnen aktivieren. Ich meine, wenn Sie sich das fertige Projekt ansehen, wie Sie sehen können, ist der eine Punkt aktiv. Ich werde dem ersten feinen Element die Klasse active hinzufügen. Dann wähle ich Punkte aus, drehe Elemente, gefolgt von der aktiven Klasse. Stellen wir die Höhe auf 1,5 Ram ein und ändern die Farbe, machen wir sie weiß. Okay, das erste Spin-Element , an das man denkt, ist aktiv. Als Nächstes kümmere ich mich um den Slider, ich meine den Testimonial-Wrapper Lassen Sie uns also weitermachen und direkt nach dem Testimonial-Wrapper den Testimonial-Wrapper auswählen Lassen Sie uns tatsächlich das HTML-Element überprüfen . Das ist richtig, wir müssen es nach dem oberen Teil auswählen, ich meine das Testimonial-Top Lassen Sie uns mit und Höhe definieren Die Breite wird 55% betragen, dann werde ich die Höhe auf 50 Ram setzen Ändern Sie auch die Position, setzen wir sie auf absolut. Dann müssen wir die Verpackung der Zeugenaussage in der Mitte des Abschnitts platzieren Verpackung der Zeugenaussage in der Mitte des Also müssen wir die Eigenschaften oben und links definieren. Beide werden 50% ausmachen. Dann müssen wir mit der Übersetzungsfunktion transformieren. Und die Werte werden -50% und wieder -50% sein. In Ordnung, schauen wir uns das Projekt an Die Titelseite des Zeugnisses ist zentriert, aber die Positionen der Pfeile Das bedeutet, dass wir einen Fehler in der HTML-Datei haben. Lassen Sie uns die Steuerung überprüfen. Wie Sie sehen können, befinden sich die Steuerelemente innerhalb der Testimonious-Verpackung, und sie sollten außerhalb der Testimonious-Verpackung platziert werden der Lassen Sie uns die Steuerelemente von hier aus nehmen und sie nach draußen einfügen. Okay, ich denke, das Problem sollte jetzt behoben sein. Wie Sie sehen können, sind die Steuerelemente an ihren Stellen platziert. Als Nächstes erstelle ich die verbleibenden Folien. Im Moment haben wir nur eine Folie. Lassen Sie uns sie viermal duplizieren , weil wir insgesamt fünf Folien haben werden. Ich werde die Details schnell ändern. Die zweite Folie ist eigentlich das Bild für die zweite Folie, die Bild zwei sein wird Dann haben wir hier Mary Brown. Dann verlassen wir das gleiche Alter. Dann haben wir hier Clin Three. Es wird Nick Jones sein. Lass uns das H ändern und 27 draus machen. Dann haben wir Clin Vier, es wird Brown sein Dann ändern wir das Alter, machen wir es 22. Und endlich haben wir hier Clin Five mit dem Namen John Smith 25 Sie haben also alle fünf Folien Als Nächstes wähle ich Slider und definiere innerhalb der Höhe. Ich werde auf 500% setzen. Das ist für die Höhe, es wird 100% sein Dann werde ich die Folien horizontal nebeneinander platzieren horizontal nebeneinander Dafür werde ich Display Flex verwenden. Wie Sie sehen können, werden die Folien nebeneinander platziert. Ich werde dem Deckblatt der Zeugenaussage einen Rand hinzufügen Deckblatt der Zeugenaussage um deutlich zu sehen, was hier vor sich geht Wir brauchen hier 0,1 RAM Feststoff und die Farbe wird weiß sein Hier haben wir die Testimonios-Verpackung, und jede Folie sollte in die Hülle gelegt werden Um das zu erreichen, definiere ich die Breite der Folie auf 20%. Wie Sie sehen, haben wir die Breite für den Slider definiert und ihn auf 500% gesetzt. Sobald die Breite der Folie 20% beträgt, nimmt sie ein Fünftel des Sliders ein Wie Sie nun in der Box sehen können, haben wir nur eine Folie Als Nächstes wähle ich einen leichten Hintergrund aus und passe ihn an. Wir brauchen Breite, es wird 70% sein , dann definiere ich die Höhe. Machen wir es auf 65% Als Nächstes ändere ich die Hintergrundfarbe. Lassen Sie uns die RGBA-Farbe verwenden. Der erste Wert wird 50 sein. Dann haben wir 176. Dann wird der nächste 206 sein. Und wir brauchen hier wieder Opazität 0,5. Also hier haben wir den Hintergrund der Folie. Lassen Sie uns ihre Position definieren. Ich werde die Position auf absolut setzen. Dann benötigen wir die relative Position für die Folie. Ich meine das übergeordnete Element. Ich werde den Hintergrund in der Mitte der Folie platzieren . Daher müssen wir hier 50% positionieren , dann die linke Position 50% und mit der Übersetzungsfunktion erneut -50% transformieren . Wie Sie sehen können, befindet sich der Hintergrund in der Mitte der Folie Wie Sie sehen, ist der Hintergrund tatsächlich leicht gedreht Deshalb füge ich hier die Drehfunktion Z hinzu, und der Wert wird minus sechs Grad sein. Jetzt ist der Hintergrund der Folie gedreht. Ich werde die Ecken abrunden. Wir brauchen hier einen Grenzradius mit dem Wert zwei Ram. Außerdem werde ich die Opazität verringern. Stellen wir es auf 2,7 ein. Okay, schauen wir uns den leichten Hintergrund Als Nächstes werde ich mich um den leichten Inhalt kümmern, ich meine, dieses weiße Element hier. Lassen Sie uns also weitermachen und leichte Inhalte auswählen. Eigentlich werde ich mir die Styles von hier holen. Wir benötigen einige ähnliche Stile für den Folieninhalt. Die Höhe des Holzes wird ähnlich sein. Als Nächstes werde ich die Hintergrundfarbe ändern. Lass uns EE benutzen. Dann brauchen wir Position Absolute. Und wir müssen das Element zensieren, aber ohne die Rotation Lassen Sie uns also die Funktion „Z drehen“ loswerden. Lassen Sie uns den Inhalt der Folie im Browser überprüfen. Wir benötigen keine Opazität für Folieninhalte. Außerdem werde ich Elemente mithilfe der Flexbox ausrichten. Ich werde hier Display Flex hinzufügen. Dann müssen wir mithilfe von justify content, space between etwas Abstand zwischen den Flex-Elementen schaffen. Und dann werde ich die Elemente in der Mitte ausrichten. Wie Sie sehen können, sind die Flex-Elemente ausgerichtet. Als Nächstes werde ich mithilfe von Padding etwas Platz innerhalb des Folieninhalts schaffen mithilfe von Padding etwas Platz innerhalb des Folieninhalts Es wird an der Ober- und Unterseite Null und an der linken und rechten Seite jeweils fünf Ram Okay, das entspricht ungefähr dem Folieninhalt. Als Nächstes werde ich mich um die kümmern. Ich wähle Folie, gefolgt von den Elementen. Ich werde das Telefon vergrößern, es wird 12 Ram sein. Dann ändere die hier verwendete Farbe. Blaue Farbe. Außerdem müssen wir die Position für die, sagen wir, absolute Position definieren . Ich werde die Positionen für jede Position einzeln definieren. Ich werde Folie I mit der Kinderauswahl auswählen. Wir brauchen das erste Symbol. Lassen Sie uns die obere Position auf -20% setzen . Dann brauchen wir die linke Position Es werden 10% sein. Ich werde diesen Code duplizieren. Wir brauchen dasselbe auch für das zweite Symbol. Lassen Sie uns die untere Position auf -30% setzen und statt der linken Position werde ich die rechte Position verwenden Der Wert wird derselbe sein, 10% Okay, die Anführungszeichen sind gut platziert und dann werde ich mich um das Bild kümmern Das Bild hat bereits einige Stile. Ich meine, die Wrapper-Entwicklung, lass uns das ändern. Ich setze die Breite auf 35% und schaffe dann schaffe etwas Platz auf der rechten Seite der Folie Mg, lass uns den Rand rechts auf drei Ram setzen. Okay, danach werde ich mich um das Bild selbst kümmern . Lassen Sie uns hier ein paar verschiedene Stile hinzufügen. Ich werde das Bild abrunden. Verwenden wir den Grenzradius. Wir müssen das Bild abgerundet machen , aber nicht auf allen vier Seiten. Ich werde den Grenzradius in der oberen linken Ecke auf drei setzen . Dann brauchen wir Null in der oberen rechten Ecke, wir brauchen drei in der unteren rechten Ecke und Null in der linken unteren Ecke. Okay, das ganze Bild sieht also ziemlich gut aus. Als Nächstes mache ich es schwarz-weiß. Verwenden Sie dieselbe Technik beim Filtern der Großskalenfunktion mit dem Wert 100%. Setzen wir den Cursor auf den Zeiger. Lassen Sie uns nun den Hover-Fakt erstellen. Ich wähle das Folienbild gefolgt von den Bildelementen mit dem Hover Lassen Sie uns den Filter auf Graustufen mit dem Wert Null einstellen. Und auch hier brauchen wir Übergang mit einem Filter mit einer Dauer von 1 Sekunde. In Ordnung, lassen Sie uns als Nächstes über das Bild sprechen. Wir müssen die Grenzen rund um das Bild ziehen. Dafür werde ich Elemente nach und vor verwenden. Wählen wir die Folie IMG aus, gefolgt von den Elementen. Dann brauchen wir auch das Before-Element, weil diese Elemente einige gemeinsame Dateien haben werden. Zuallererst werde ich den Inhalt definieren. Es wird leer sein. Dann brauchen wir innerhalb der Höhe, beide entsprechen 100%. Dann setze ich die Position auf absolut. Wir benötigen die relative Position für die übergeordneten Elemente. Als Nächstes setze ich Border 2.2 Ram auf Solid und die Farbe wird RGBA sein Wir benötigen schwarze Farbe mit der Opazität 0,4 Hier haben wir die Als Nächstes mache ich das Abgerundete. Wir benötigen den gleichen Grenzradius , den wir für Bilder verwenden. Jetzt müssen wir die Positionen für diese Elemente separat definieren . Gehen wir weiter und ordnen von hier aus ein Element nach dem anderen ab. Die beiden Positionen werden minus ein Ram sein. Aber dann brauchen wir die linke Position -0,5 Ram. Lassen Sie uns diesen Code duplizieren, den Selektor ändern, den wir hier vor den Pseudoelementen benötigen, wir brauchen hier die untere Position mit dem gleichen Wert und dann müssen wir wieder die rechte Position mit dem Okay, die Bilder sehen ziemlich gut aus. Wie Sie sehen können, befinden sich die Ränder über dem Bild. Wir müssen sie hinter dem Bild platzieren. Lassen Sie uns dieses Problem mithilfe einer Indexeigenschaft mit einem Wert minus eins beheben . Jetzt ist das Problem behoben und mit den Bildern sind wir fertig. Als nächstes müssen wir uns um die rechte Seite der Folie kümmern . Lassen Sie uns weitermachen und den Folientext auswählen und die Breite als 65% definieren . Als Nächstes wähle ich H drei Überschriftenelemente aus. Lassen Sie uns weitermachen und leichten Text auswählen , gefolgt von den drei H-Elementen. Wir benötigen eine Schriftgröße 2,5. Dann definiere ich die Schriftstärke. Machen wir 300 draus, ändern wir die Farbe. Ich mache die Farbe eins zu eins. Und mit dem Rand auch etwas Platz am unteren Rand schaffen. Unterer ein Ram. Okay, die Überschrift sieht also gut aus. Als Nächstes werde ich mich um den Absatz kümmern. Lassen Sie uns weitermachen und leichten Text auswählen , gefolgt vom Element. Ich werde die Schriftgröße auf 1,4 Ram setzen. Dann brauchen wir die Schriftstärke. Es werden 300 sein. Lass uns die Farbe des Textes ändern. Ich werde 020 D14 verwenden. Dann müssen wir die Zeilenhöhe des Textes ändern. Wir brauchen hier die Zeilenhöhe, machen wir 1,6 Ram draus. Schaffen Sie mit dem Rand auch etwas Platz am unteren Rand. Untere drei Ram. Und dann werde ich die Breite des Absatzes ändern. Setzen wir es auf 35 von, okay, damit der Absatz gut aussieht. Als Nächstes werde ich den Namen des Kunden anpassen. Lassen Sie uns also weitermachen und Folientext auswählen, gefolgt vom Client. Ich werde die Telefongröße auf 1,8 setzen und dann die Farbe ändern. Es wird 07235 sein. Okay, die Folien sind maßgeschneidert, sie sehen ziemlich gut aus Als Nächstes müssen wir den Slider mit Javascript zum Laufen bringen. Bevor wir zur nächsten Vorlesung übergehen, werde ich es von hier aus entfernen, lassen Sie uns diese Codezeile löschen. Okay, lass uns mit der nächsten Lektion weitermachen und dafür sorgen, dass der Slider funktioniert. 25. Schieberegler arbeiten lassen: Ordnung, in der vorherigen Vorlesung haben wir den Testimonial-Slider angepasst Wir haben die Folien gestaltet, auch die Pfeile und die Punkte hier, die Jetzt müssen wir den Slider zum Laufen bringen. Dieser Slider wird manchmal Rosal genannt. Möglicherweise stoßen Sie auch auf diesen Namen. Schauen wir uns das fertige Projekt an. Sobald wir auf die Pfeile klicken, wird auch der Slider aktiviert, die entsprechenden Punkte sind aktiv. Und wir können das Abspielen des Sliders auch von hier aus verwalten. Okay, also wir werden diese Dinge mit Javascript machen. Gehen wir zum VS-Code und öffnen wir das Skript oder die JS-Datei. Das erste, was ich tun werde, ist, die Kommentare für diesen Code hier hinzuzufügen. Ich werde hier die Navigation hinzufügen. Wir verwenden Javascript für die Navigation. Lassen Sie uns diese Zeile nach unten verschieben. Und dann werde ich neue Kommentare zu den Testimonials hinzufügen neue Kommentare zu den Testimonials Das erste, was ich tun werde, ist, ein paar verschiedene Variablen auszuwählen , ich meine die Elemente Lassen Sie uns eine Variable erstellen und sie Slider nennen. Ich werde dieses Element mit der Methode „Document Query Select from“ auswählen und wir müssen Schieberegler für den Klassennamen angeben. Ich werde diese Codezeile dreimal duplizieren. Die zweite Variable werden Folien sein. Ich werde alle Folien mit der Methode Query Selector auswählen, alle Und wir müssen hier den Klassennamen Slide angeben. Als nächstes müssen wir die Pfeile auswählen. Ich meine linke und rechte Pfeiltaste. Nennen wir die Variable Linkspfeil. Dann werde ich hier die Steuerelemente für den Klassennamen angeben. Dann müssen wir Elemente auswählen. Wir brauchen hier den Chat-Selektor. Der linke Pfeil ist das erste Element. Lassen Sie uns hier die Nummer eins angeben. Wenn wir uns die Index-HTML-Datei ansehen, dann brauchen wir hier eigentlich eine Testimonial-HTML-Datei Wir haben hier Kontrollen. Der Linkspfeil ist das erste Element innerhalb der Steuerelemente. Lassen Sie uns diese Codezeile loswerden und diese duplizieren. Wir brauchen den Rechtspfeil. Ich werde die Nummer des n-ten Child-Selektors ändern. In diesem Fall brauchen wir Nummer zwei. Okay, die Variablen sind erstellt. Als Nächstes wähle ich einen der Pfeile aus, sagen wir Rechtspfeil. Und ich werde dem Pfeil mit dem Klickereignis einen Emt-Listener hinzufügen Pfeil mit dem Klickereignis Außerdem werde ich hier die Callback-Funktion übergeben, die ausgeführt wird , sobald wir auf den Rechtspfeil klicken Sobald wir auf den Rechtspfeil geklickt haben, verschiebe ich den Schieberegler, den wir benötigen, hierher, den Schieberegler, gefolgt von dieser Stileigenschaft Dann werde ich Transform verwenden. Dann müssen wir die X-Funktion übersetzen. Ich werde den Schieberegler um -20% bewegen . Gehen wir jetzt zum Browser Sobald ich auf den rechten Pfeil klicke, bewegt sich der Slider auf die linke Seite Um diese Bewegung besser sehen zu können, werde ich dem Slider tatsächlich einen Übergang hinzufügen Lassen Sie uns alle 0,8 Sekunden festhalten. Außerdem werde ich die kubische Sir-Funktion mit den Werten 100,1 verwenden . Dadurch wird der Bewegungseffekt viel schöner Klicken wir auf den Rechtspfeil. Wie Sie sehen können, bewegt sich dieser Slider gut. Okay, danach werde ich eine neue Variable erstellen und es wird ein Folienindex sein. Lass es uns auf Null setzen. Tatsächlich wird diese Variable verwendet, um den Überblick über die aktuell angezeigte Folie zu behalten . Sie beginnt bei Null und zeigt die erste Folie an. Okay, jetzt werde ich diesen Code duplizieren. Lass uns die Variable ändern , wenn du links hörst. Dann füge ich hier den Folienindex hinzu, der dem Folienindex minus eins entspricht. In diesem Fall dekrementieren wir die Folienindexvariable um eins, um die vorherige Folie zu verschieben Als Nächstes müssen wir den Stil des Slider-Elements aktualisieren und es horizontal übersetzen. Um die vorherige Folie anzuzeigen, sollte der Umfang der Übersetzung bestimmt werden, indem der Folienindex sollte der Umfang der Übersetzung bestimmt werden, indem der mit -20% multipliziert wird, da jede Folie 20% der -20% multipliziert wird, da jede Folie 20% Breite des Containers einnimmt. Wir benötigen hier Vorlagenzeichenketten und dann die Funktion translate x, Wir benötigen hier Vorlagenzeichenketten und dann die Funktion translate in die ich den Folienindex multipliziert mit -20 einfügen werde % Tatsächlich benötigen wir Prozent außerhalb Kopieren wir diese beiden Zeilen und fügen sie hier ein. Im Fall des Rechtspfeils benötigen wir hier plus Sinus. Lass uns zum Browser gehen und auf die Pfeile klicken. Wie Sie sehen können, verschieben die Folien alle Folien. Wenn wir auf beide Pfeile klicken, sobald wir die letzte Folie erreicht haben und erneut auf den Pfeil klicken, bewegt sich der Schieberegler. Eigentlich brauchen wir das nicht. Wir müssen den Slider anhalten, sobald wir das letzte Objekt erreicht haben, ich meine, die letzte Folie im Slider. Kehren wir jetzt zum VS-Code zurück . Wir müssen bedingte Anweisungen verwenden. Ich werde hier die Bedingung definieren, wenn der Folienindex größer als Null ist, dann brauchen wir den Operator Gerberei Jetzt müssen wir den Folienindex minus eins und dann wieder Null stören , das ist ein Tenory-Operator in Es bewertet die Bedingung, dass der Folienindex größer als Null ist Wenn die Bedingung erfüllt ist, wird der Folienindex minus eins ausgewertet Andernfalls ergibt die Auswertung Null. Das Gleiche brauchen wir auch für den Rechtspfeil. Wenn der Folienindex kleiner ist als die Folienlänge minus eins, dann benötigen wir den Folienindex plus eins. Im zweiten Fall benötigen wir hier Punktlänge der Folien minus eins. Hier entspricht die Folienlänge der Gesamtzahl der Folien. Punktlänge minus eins ergibt den Index der letzten Folie. Da die Indizierung bei Null beginnt, stellt diese Zeile sicher , dass der Folienindex kleiner als der Index der letzten Folie ist kleiner als der Index der , bevor dieser erhöht wird. Wenn der Folienindex kleiner als der Index der letzten Folie ist, wird der Folienindex mit diesem Ausdruck um eins erhöht mit diesem Ausdruck um eins Andernfalls wird der Folienindex auf den Index der letzten Folie gesetzt Okay, gehen wir zum Browser und überprüfen die Ergebnisse. Klicken wir auf den Rechtspfeil. Wie Sie sehen, erreichen wir die letzte Folie, und ich klicke auf den Pfeil, aber der Slider wird nicht abgespielt. Das Gleiche wird mit dem Linkspfeil passieren . Jetzt klicke ich auf den Linkspfeil, aber die Folien bewegen sich nicht. Okay, ich werde die Folien außerhalb der Verpackung verstecken. Lass uns das mit einer Überlaufheizung machen. Jetzt sind sie versteckt und alles funktioniert gut. Okay, als Nächstes müssen wir uns um die Punkte kümmern. Sobald wir auf die Punkte geklickt haben, sollten wir den Schieberegler bewegen. Sobald wir auf die Pfeile geklickt haben, müssen wir außerdem den entsprechenden Punkt aktivieren. Gehen wir zum VS-Code und ich werde hier zwei weitere Variablen hinzufügen. Der erste wird Dots Wrapper sein. Lassen Sie uns dieses Element mithilfe von Dokumenten auswählen und den Abfrageselektor ausführen Und ich werde hier die Punkte des Klassennamens angeben. Lassen Sie uns diesen Code duplizieren. Die zweite Variable werden Punkte sein. In diesem Fall benötigen wir einen Abfrageselektor. Alle Methoden, die ich hier spezifizieren werde, ist dieses Panelement. Ordnung, jetzt müssen wir mit der Futtermethode über jedes Punktelement in der Punktesammlung iterieren jedes Punktelement in Futtermethode über jedes Punktelement in der Punktesammlung Ich werde hier etwas Futter hinzufügen. Wir müssen hier die Calbeck-Funktion mit zwei Parametern einfügen mit zwei Der erste wird Punkt sein und dann brauchen wir auch Index Jetzt müssen wir dem Punkt ein Klickereignis hinzufügen. Ich werde dem Dot-With-Click-Ereignis einen Even-Listener Außerdem müssen wir Ihre Callback-Funktion einfügen , die ausgeführt wird, sobald wir auf den Punkt klicken Jetzt definiere ich den Folienindex. Und es sollte dem Index entsprechen , den wir hier als Parameter verwendet haben. Wenn auf einen Punkt geklickt wird, aktualisiert diese Zeile diese Folie in dieser Variablen auf den Index des angeklickten Dadurch wird die aktuelle Folie effektiv zu der Folie geändert , die dem angeklickten Punkt entspricht Dann müssen wir die aktive Klasse aus dem Punkt entfernen , der zuvor aktiv war Wir müssen den Punkt mit der aktiven Klasse auswählen. Ich werde den Abfrageselektor für Dokumente verwenden. Wir müssen hier Punkte angeben, gefolgt von den aktiven. Eigentlich brauchen wir hier Punkt, dann Klasse aktiv. Wir müssen die aktive Klasse aus ihrer Klassenliste entfernen. Wir brauchen hier eine Klassenliste, gefolgt von der Methode remove. Und wir müssen hier den Klassennamen active angeben. Okay? Danach werde ich den Schieberegler bewegen, also müssen wir diese Linie einhalten. Ordnung, lass uns zum Browser gehen. Klicke auf die Punkte. Eigentlich müssen wir hier noch eine Zeile hinzufügen. Sobald wir die aktive Klasse aus den aktiven Punkten entfernt haben, sollten wir die Klasse aktiv zu der angeklickten Klasse hinzufügen Müssen wir hier eine Methode hinzufügen? Ich werde hier den Klassennamen aktiv angeben. Okay, jetzt sollte der Punkt funktionieren. Wie Sie sehen können, bewegt sich der Schieberegler, sobald wir klicken, und auch der entsprechende Punkt ist aktiv. In Ordnung, also funktioniert alles gut. Als nächstes müssen wir uns darum kümmern sobald wir auf die Pfeile klicken. Sobald wir auf die Pfeile klicken und den Schieberegler bewegen, sollte der entsprechende Punkt aktiv sein. Gehen wir zurück zum VS-Code. Ich werde hier für beide Pfeile Folgendes hinzufügen. Wir brauchen Dot Wrapper, dann Eigentum für Kinder. Und wir müssen hier den Index als Folienindex angeben. Und wir müssen etwas zur Klassenliste hinzufügen. Eigentlich brauchen wir hier Punkte, dann fügen wir Methode hinzu und wir müssen hier den Klassennamen aktiv angeben. In diesem Fall ist Children also die Eigenschaft von Dot Wrapper und stellt eine Sammlung aller untergeordneten Elemente innerhalb des Dot Wrappers Dann haben wir hier den Folienindex, der verwendet wird, um auf ein bestimmtes untergeordnetes Element innerhalb des Punktwrappers zuzugreifen Jeder Navigationspunkt sollte einer Folie im Slider entsprechen, und der Folienindex steht für den Index der aktuell aktiven Folie Dann fügen wir die aktive Klasse zur aktiven Klasse hinzu, ich meine den entsprechenden Punkt. Okay? Jetzt füge ich diese Zeile für beide Pfeile hinzu. Lass uns zum Browser gehen und das Ergebnis überprüfen. Eigentlich müssen wir auf die Pfeile klicken. Wie Sie sehen können, werden die entsprechenden Punkte aktiv, sobald wir auf die Pfeile klicken und den Schieberegler bewegen . Alles funktioniert perfekt. Okay. Bevor wir diesen Vortrag beenden, werde ich den Code neu organisieren Ich werde eine Funktion erstellen, nennen wir sie Set Index Dann werde ich mir diese beiden Zeilen schnappen, weil wir diese beiden Zeilen überall verwenden. Ich werde diese beiden Zeilen hier hinzufügen. Stattdessen rufe ich die Funktion index auf. Lassen Sie uns den Index add here set entfernen und dasselbe auch für den Rechtspfeil tun. Entfernen Sie diese beiden Zeilen und rufen Sie die Funktion set index auf. Okay, jetzt ist unser Code sauberer , wenn nur eine Funktion hinzugefügt wird. Und wir haben hier das Gleiche. Etwas stimmt nicht. Eigentlich sollten wir nur zwei Zeilen nehmen, diese beiden Zeilen hier, und wir nehmen auch diese Zeile. Jetzt sollte also alles funktionieren. Wie Sie sehen können, funktioniert dieser Slider perfekt. In Ordnung, also lassen Sie uns bei der Testimonial-Seite bleiben. Eigentlich können wir sagen, dass das Projekt fast abgeschlossen ist. Wir haben alle Abschnitte, alle Seiten erstellt, und jetzt müssen wir das Projekt an verschiedene Krisen anpassen Lassen Sie uns dazu mit der nächsten Vorlesung fortfahren. 26. Projekt responsiv gestalten – Teil 1: Ordnung, in der vorherigen Vorlesung haben wir die Erstellung unserer Projekte abgeschlossen. Ich meine, wir haben alle Abschnitte auf der Hauptseite erstellt . Außerdem haben wir alle Seiten unseres Webprojekts erstellt und installiert. In diesem Vortrag werde ich, wie gesagt, damit beginnen, unser Projekt an unterschiedliche Bildschirmgrößen und Geräte anzupassen. Webdesign ist bei der Webentwicklung sehr wichtig, da es sicherstellt, dass Websites auf allen Arten von Geräten und Bildschirmgrößen gut funktionieren . Dank der vielen verschiedenen Geräte wie Smartphones und Tablets dank responsivem Webdesign sehen Websites dank responsivem Webdesign überall gut aus und sind einfach zu bedienen. Es spart Zeit und Mühe , da keine separaten Designs für jedes Gerät erforderlich sind. Außerdem bevorzugen Suchmaschinen wie Google Websites, die für Mobilgeräte optimiert sind. Responsives Webdesign kann die Sichtbarkeit einer Website erhöhen. Einfach ausgedrückt ist responsives Webdesign ein Muss in der Webentwicklung, um sicherzustellen, dass Websites auf den zahlreichen Geräten, die heute verwendet werden, benutzerfreundlich und effektiv bleiben . In meinen Webprojekten habe ich es mir zur Priorität gemacht, dass die Website auf verschiedenen Geräten fantastisch aussieht. Wir sprechen von großen Desktop-Bildschirmen, wie 1920 Pixel Breite und 1080 Pixel Höhe und 1.600 Pixel Breite und 900 Pixel Höhe Sowie etwas kleinere wie 14.40 Pixel Breite und 900 Pixel Höhe, 13 66 Pixel Breite, 768 Pixel Höhe und 12 80 Pixel und 780 Pixel Für Tablets habe ich 82000 Pixel und 11 80 Pixel sowie 768 Pixel und 1024 Pixel Und natürlich habe ich für diejenigen , die gerne auf ihren Handys surfen, diese drei Breakpoints hier optimiert. In Ordnung. Also habe ich diese Breakpoints zu meinem responsiven Modus hinzugefügt. Wie Sie sehen können, haben wir hier Bildschirme, was für Desktop-Bildschirme bestimmt ist, ich meine die sechs Haltepunkte Dann haben wir zwei Breakpoints für Tablets und drei Breakpoints für Auf diese Weise stelle ich sicher, dass unabhängig davon, wie jemand auf die Website zugreift, ob es sich um einen Computer, ein Tablet oder ein Mobiltelefon handelt, das Erlebnis reibungslos verläuft und Dieser Ansatz ist heutzutage unverzichtbar da die Leute alle Arten von Geräten verwenden und ich möchte, dass jeder eine positive und benutzerfreundliche Zeit auf meiner Website Responsive Webdesign ist nicht nur ein ausgefallener Begriff. Es geht darum, die Dinge für alle einfach und unterhaltsam zu machen, egal welches Gadget sie verwenden. In Ordnung, ich werde mir die Seite ansehen. Wählen Sie den ersten Unterbrechungspunkt , also den Bildschirm mit einer Breite von 21600 Pixeln und einer Höhe von 900 Pixeln Dann werde ich das Projekt überprüfen. Fast alles sieht gut aus außer der Fußzeile auf der Haupt-Landingpage. Jetzt öffne ich die CSS-Datei im Stil und scrolle dann nach unten und füge neue Kommentare für responsives Webdesign Als Nächstes erstelle ich eine CSS-Medienabfrage, in der ich die maximale Breite definiere, 1.600 Pixel betragen wird Ich werde die Breite der Eingabe in der Eingabegruppe in ändern Breite der Eingabe in der Eingabegruppe in Lassen Sie uns fortfahren und die Eingabegruppe gefolgt von den Eingabeelementen auswählen Eingabegruppe gefolgt von den Eingabeelementen Ich setze die Breite auf 31, Rampe. Gehen wir zurück zum Browser. Wie Sie sehen können, sieht die Fußzeile gut aus. Eigentlich sind wir mit der Haupt-Landingpage hier fertig, weil alles gut aussieht Lassen Sie uns weitermachen und andere Seiten überprüfen wir hier über die Seite haben. Eigentlich sehen die Funktionen zur Seite nicht ganz gut aus. Ich werde sie anpassen. Was den Rest der Elemente angeht, sehen sie gut aus. Ich werde über die CSS-Datei sprechen, die diese Datei vorerst geschlossen hat. Dann werde ich Ihre neuen Kommentare für den responsiven Modus einfügen . Dann werde ich eine Medienabfrage mit einer maximalen Breite von 1.600 Pixeln erstellen mit einer maximalen Breite von 1.600 Pixeln Dann wähle ich die Seitenfunktionen aus. Stellen wir uns auf 70% ein. Jetzt sehen sie gut aus. Mit einer Bonusseite sind wir eigentlich fertig. Alles sieht gut aus. Schauen wir uns als Nächstes die Buchseite an. Es sieht gut aus, aber ich möchte hier eine Kleinigkeit ändern. Lass uns weitermachen und Bücher aufschlagen. CSS-Datei und erstellen Sie neue Kommentare für den responsiven Modus. Erstellen Sie dann erneut eine Medienabfrage mit einer maximalen Breite von 1.600 Pixeln Lassen Sie uns weitermachen und Buch auswählen und den Rand ändern. Im Moment haben wir auf allen vier Seiten einen Spielraum von sechs RAM. Ich werde Rand sechs an der oberen und unteren Seite und drei an der linken und rechten Seite machen an der oberen und unteren Seite und . Ich glaube, wir haben jetzt etwas bessere Ergebnisse. Die Seite mit den Büchern sieht gut aus. Lassen Sie uns weitermachen und die Seite mit den Testimonials überprüfen. Ich denke, auf der Seite mit den Zeugenaussagen sieht alles gut aus, mit diesem Grenzpunkt sind wir fertig Als Nächstes müssen wir dafür sorgen, dass unser Projekt auf den nächsten Breakpoint reagiert , der in diesem Fall 14.40 Pis Breite und 900 Pis Höhe Fahren wir mit der nächsten Vorlesung fort . 27. Responsive Teil 2: In der letzten Vorlesung haben wir damit begonnen, unser Projekt auf verschiedenen Bildschirmgrößen und Geräten responsiv zu gestalten. Wir haben einige Änderungen am ersten Breakpoint vorgenommen , der 1.600 Pixel Breite und 900 Pixel Höhe betrug Als Nächstes müssen wir dafür sorgen, dass unser Projekt an diesem Breakpoint responsiv Ich meine 14.40 Pixel Breite und 900 Pixel Höhe. Lass uns weitermachen und den Breakpoint ändern. Ich werde diesen auswählen. Lass uns weitermachen und die Seite überprüfen. Wie Sie sehen können, müssen wir einige Folienänderungen vornehmen. Lassen Sie uns weitermachen und die CSS-Datei stylen und dann eine neue CSS-Medienabfrage erstellen. Ich werde die maximale Breite auf 14.40 Pixel angeben. Als erstes werde ich die Telefongröße des HTML-Elements verringern. Dadurch können wir die Größe aller Elemente auf der Seite verringern . Lassen Sie uns also weitermachen und HTML auswählen und dann die Schriftgröße verringern. Ich werde es auf 58% bringen. Okay, lassen Sie uns weitermachen und die Ergebnisse überprüfen. Alles sieht gut aus. Eigentlich werde ich mich um die Buchabteilung kümmern , weil ich diese Tatsache nicht hier haben will. Ich meine, ich möchte nicht, dass das Buch vom Hauptsymbol verdeckt wird. Lassen Sie uns eigentlich den vorherigen Breakpoint überprüfen. Wir haben hier das gleiche Problem. Deshalb werde ich hier im vorherigen Breakpoint Folgendes hinzufügen . Wir brauchen ein Buch. Ich werde die Marge ändern. Lassen Sie uns den Spielraum auf sechs Ram oben und unten und drei M an der linken und rechten Seite setzen . Lassen Sie uns jetzt die Ergebnisse überprüfen. Es sieht gut aus. Lass uns den nächsten Breakpoint machen. Dieses Problem haben wir hier nicht mehr. Okay, ich denke, wir können das Feedback des Kunden anpassen. Ich werde den Standardstil ändern. Lass uns weitermachen und auswählen aber Feedback einholen, wenn du dich erinnerst Wir haben standardmäßig innerhalb der Höhe definiert. Eigentlich denke ich, dass wir die beiden Eigenschaften weglassen könnten. Ich meine, wir können sie auskommentieren und die Ergebnisse überprüfen. Nun, wie Sie sehen können, haben wir hier eine geringfügige Änderung und ich denke, es sieht viel besser aus. Es war ein kleiner Fehler von meiner Seite, also werde ich diese beiden Zeilen von hier aus loswerden. Wir brauchen sie nicht mehr. Ordnung. Ich finde, dass die Hauptseite gut aussieht. Lass uns weitermachen und andere Seiten überprüfen. Ich gehe zur Info-Seite. Wie Sie sehen können, haben wir hier das gleiche Problem. Das Menüsymbol bedeckt die Kopfzeile. Wir haben hier das gleiche Problem für die Fußzeile, die Überschrift der Fußzeile Gehen wir zur About-SS-Datei und erstellen wir eine neue CSS-Medienabfrage Ich werde mit 14 40 Fahrzeugen Zeichen setzen. Dann wähle ich die Überschrift eines Abschnitts aus und verschiebe die Überschrift mithilfe von Transform Translate. Ich übersetze auf 60%, das gilt für die X-Achse und 50% für die Y-Achse. Ich meine die horizontale und vertikale Richtung, okay? Das Problem ist also behoben. Eigentlich werde ich die Info-Seite und den vorherigen Breakpoint überprüfen die Info-Seite und den vorherigen Breakpoint Wie Sie sehen können, haben wir hier das gleiche Problem. Ich werde hier Folgendes hinzufügen. Lassen Sie uns die Fußzeile etwa auswählen, gefolgt von der Fußzeilenkopfzeile. Dann verschiebe ich die Kopfzeile mit transform translate x auf die linke Seite setze sie auf 60%. Jetzt ist das Problem an 60%. Jetzt ist das Problem diesem Breakpoint behoben, wenn wir das Projekt am nächsten Breakpoint überprüfen Wie Sie sehen können, sieht es ziemlich gut aus. Okay, ich glaube, mit der Info-Seite sind wir unten. Gehen wir weiter und schauen uns die nächste Seite an, die Buchseite. Alles sieht gut aus. Schauen wir uns die Testimonial-Seite Wie Sie sehen können, sieht es auch gut aus. Ordnung, also ich denke , mit diesem Breakpoint sind wir fertig Ich werde diesen Breakpoint überprüfen. Der nächste hat eine Breite von 13.66 Pixeln und eine Höhe von 768 Pixeln Ich werde Bildschirm vier mit diesen Abmessungen auswählen. Lass uns weitermachen und die Seite überprüfen. Also müssen wir hier einige Änderungen vornehmen. Lassen Sie uns weitermachen und die CSS-Datei im Stil öffnen und eine neue CSS-Medienabfrage erstellen. Ich werde die maximale Breite definieren, sie wird 13 68 Pixel sein. Das erste, was ich tun werde, ist HTML, die Telefongröße des HTML-Elements, wieder zu verringern . Ich wähle HTML aus, setze Telefongröße auf 55% und überprüfe dann die Ergebnisse. Jetzt haben wir viel bessere Ergebnisse. Das Einzige, was ich tun werde, ist , das Banner etwas nach unten zu bewegen. Lassen Sie uns fortfahren und Banner auswählen und die untere Position auf 25 Ram setzen. Okay, dann werde ich die Höhe der Testimonial-Seite erhöhen . Ein bisschen Lassen Sie uns weitermachen und Testimonials auswählen. Ich meine, den Testimonial-Bereich und den Seitenbereich. Setzen wir die Höhe auf 170, die Ansichtshöhe. Okay. Also ich denke, das ist es. Alles sieht gut aus. Lass uns weitermachen und andere Seiten überprüfen. Ich werde nachsehen, ob alles gut aussieht. Als Nächstes haben wir eine Bücherseite. Es sieht auch gut aus. Schauen wir uns die Seite „Nicht Kontakt, sondern Testimonials“ an. Ich denke, wir brauchen hier keine Änderungen. Wir können sagen, dass wir mit diesem Breakpoint fertig sind. Lass uns weitermachen und es überprüfen. Als nächstes haben wir diese Pause, 0,12 80 Pixel und 780 Pixel Ich wähle Bildschirm fünf aus. Lass uns weitermachen und nachschauen. Okay, wir brauchen ein paar Änderungen. Ich werde eine neue CSS-Medienabfrage mit einer maximalen Breite von 12.80 Pixeln erstellen maximalen Breite von 12.80 Pixeln Ich werde den Abschnitt „Über uns“ anpassen . Ich werde die Breite beider Teile ändern. Ich meine, den linken Teil und den rechten Teil. Lass uns weitermachen und links über den Inhalt auswählen. Die Breite wird 45% betragen . Dann werde ich diesen Code duplizieren. Lassen Sie uns den Klassennamen ändern, den wir hier für den Inhalt benötigen, oder? Der Wert der Breiteneigenschaft wird 55% betragen, okay? Das ist es. Als nächstes werde ich mich um die Bücherliste kümmern , weil wir hier das gleiche Problem haben. Das Menüsymbol verdeckt die Bücher. Lassen Sie uns weitermachen und Bücherliste auswählen. Ändern Sie die Breite. Ich sage 80% Sobald wir die Breite geändert haben, werden die Bücher nicht mehr in der Mitte des Abschnitts platziert. Lassen Sie uns das mit Rand a korrigieren. Dann müssen wir auch Flex Box verwenden, um den Inhalt in der Mitte auszurichten. Wir benötigen Display Flex, dann Justify Content Center und Align items Center. Wie Sie sehen können, ist das Problem jetzt behoben. Eigentlich denke ich, dass wir die Flex-Artikel verpacken können. Dafür können wir die Bücher auf zwei Zeilen verteilen. Ich füge hier Flex Wrap mit dem Wert p hinzu. Jetzt denke ich, dass wir mit dem Buchbereich bessere Ergebnisse erzielt haben . Wir sind fertig. Fahren wir mit dem nächsten Abschnitt fort. Der Testimonial-Bereich sieht gut aus. Jetzt müssen wir uns um den Fuß kümmern. Lassen Sie uns weitermachen und den Fußinhalt, den ich auf 70% setzen werde, auswählen Fußinhalt, den ich auf 70% setzen werde, . Jetzt sieht der Inhalt der Fußzeile gut aus Und wir müssen auch die Breite der Unterseite ändern auch die Breite der Unterseite Ich wähle unten. Lassen Sie uns die Breite auf 70% setzen. In Ordnung, also lassen Sie uns auf der Hauptseite sitzen. Lass uns weitermachen und die Seite überprüfen. Wie Sie sehen können, sind die Funktionen durcheinander. Wir müssen uns darum kümmern. Lassen Sie uns weitermachen und die CSS-Datei öffnen und eine neue C-Medienabfrage erstellen. Wir brauchen hier gleich 12.80 Pixel. Ich wähle die Überschrift eines Abschnitts verschiebe sie mit Transform Translate leicht nach links. Wir brauchen hier 50% und wieder 50% Als nächstes müssen wir uns um die Funktionen kümmern. Lass uns weitermachen und etwa Seitenfunktionen auswählen und mit zwei 80% festlegen Okay, also ich finde, alles sieht gut aus. Eigentlich müssen wir die Fußzeile auf die linke Seite verschieben Lassen Sie uns diesen Code korrigieren und ihn hier hinzufügen. Ich werde den Wert von Translate Expansion ändern. Lass es uns auf 55% setzen Okay, jetzt ist das Problem behoben. Lass uns weitermachen und den nächsten Abschnitt überprüfen. Ich meine, die nächste Seite ist Bücherseite, sie sieht gut aus. Dann haben wir eine Seite mit Testimonials. Nun, Sie können sehen, dass wir hier einige Änderungen vornehmen müssen. Lass uns weitermachen und wir müssen hier Testimonials öffnen. Sehen wir uns diese Datei Wir haben hier keinen Code für den responsiven Modus geschrieben. Lassen Sie uns Kommentare einfügen, die responsiv und responsiv sind. Und dann erstellen Sie eine CSS-Medienabfrage mit einer maximalen Breite von 12.80 Pixeln. Ich werde den Folienhintergrund auswählen und seine Breite auf 80% setzen . Wir benötigen dasselbe auch für den Folieninhalt. Lassen Sie uns diesen Code duplizieren und hier Inhalt anstelle von PG hinzufügen. Okay? Wie Sie sehen können, sieht die Folie gut aus und eigentlich ist alles ansprechend und in Ordnung. Lassen Sie uns über diesen Breakpoint sprechen. Wir können diesen Breakpoint hier überprüfen, und dann müssen wir weitermachen und das Projekt auf diesen Breakpoint I mit 1024 Pixeln Breite und 768 Pixeln Höhe reagieren Breakpoint I mit 1024 Pixeln Breite und 768 Pixeln Höhe Lassen Sie uns weitermachen und Bildschirm sechs auswählen. Nun, wir können sehen, dass wir die Änderungen am Breakpoint vornehmen müssen Ich gehe zur Style Do CS-Datei und erstelle eine neue CS-Medienabfrage Es werden 1024 Pixel sein. Zunächst werde ich Schriftgröße des HDML-Elements erneut verringern Lassen Sie uns HDML auswählen und die Schriftgröße auf 52% setzen . Als Nächstes verschiebe ich das Menüsymbol auf die rechte Seite Lassen Sie uns also weitermachen und das Menüsymbol auswählen. Und stellen Sie die richtige Position auf fünf Ram ein. Okay, ich denke, der größte Teil der Seite sieht gut aus. Ich werde das Banner etwas nach unten bewegen. Lass uns weitermachen und Banner auswählen und Spots und Position auf 20 Ram setzen. Dann werde ich mich um die Fußzeile kümmern , weil alles andere gut aussieht Lass uns weitermachen und tatsächlich werde ich mir diesen Code von hier holen Ich werde die Breite des Fußzeileninhalts und des Fußzeilenbodens ändern Fußzeileninhalts und des Fußzeilenbodens Machen wir es jetzt zu 80% Jetzt sieht die Fußzeile mit der Hauptseite tatsächlich gut aus . Wir sind fertig. Lass uns weitermachen und die Seite überprüfen, nun, wir brauchen hier ein paar Änderungen. Lassen Sie uns über die CSS-Datei sprechen und neue CSS-Medien erstellen. Geben wir die maximale Breite auf 1024 Pixel an. Ich wähle etwa die Abschnittsüberschrift aus. Wir müssen den Header auf die linke Seite verschieben. Ich werde die Funktion auf 30% und dann auch auf 50% übersetzen. Lassen Sie uns weitermachen und die Seitenfunktionen auswählen und die Breite auf 90% einstellen . Nun, ich denke, das ist zu viel. Machen wir es auf 40% Nun, ich denke, wenn wir diesen Code-Check loswerden, müssen wir nichts an der Kopfzeile ändern. Lassen Sie uns diesen Code überhaupt loswerden. Es sieht ziemlich gut aus. Als Nächstes werde ich mich um die Bilder im Teambereich kümmern. Lass uns weitermachen und ein Mitglied mit Bildelementen auswählen Mitglied mit Bildelementen ich innerhalb der Höhe verringern werde. Stellen wir beide auf Rampe 23 ein. Okay, sie sehen also gut aus. Eigentlich sieht alles gut aus. Wir können den Header ein wenig nach links verschieben. Das Menüsymbol verdeckt es nicht, aber es befindet sich zu nahe an der Kopfzeile. Also werde ich diesen Code erstellen, lassen Sie uns ihn hier hinzufügen. Und verringern Sie den Wert der Übersetzungserweiterung auf 50%. Es sieht viel besser aus. Lass uns weitermachen und die Seite mit den Büchern überprüfen. Nun, alles sieht gut aus. Dann haben wir hier Testimonials. Wir müssen uns um diese Folien kümmern. Lassen Sie uns weitermachen und die CSS-Datei mit den Testimonials öffnen und neue CS-Medien erstellen Das XW wird 1024 Pixel groß sein. Lassen Sie uns Slid BG auswählen und seine Breite auf 90% setzen . Wir benötigen hier 90% Dann duplizieren Sie diesen Code und ändern Sie den Klassennamen, den wir hier benötigen Inhalt, es wird 90% sein, ich meine die Breite des Inhalts Dann werde ich die Positionen der Bedienelemente ändern. Ich meine die Pfeile nach links und rechts. Lassen Sie uns die Steuerelemente auswählen. Und dann brauchen wir Elemente mit Child-Selektor. Wählen wir den ersten aus, um die linke Position auf 10% zu setzen . Dann duplizieren wir diesen Code ändern die Nummer des n-ten untergeordneten Wir brauchen zwei und wir brauchen hier die rechte Position. Jetzt sieht alles gut aus. Und der Testimonial-Slider, eigentlich denke ich, dass wir das Logo auf die linke Seite verschieben können , weil wir hier ziemlich viel Platz haben Ich werde die CSS-Datei öffnen und starten. Lassen Sie uns das Logo auswählen und die linke Position ändern. Ich werde 15 Ram draus machen. Okay, lassen Sie uns das auf zehn m einstellen. Nun, ich denke, jetzt ist es besser. Schauen wir uns die Seiten an. Okay, das passt zu den Desktop-Bildschirmen. Wir sind fertig. Als Nächstes müssen wir dafür sorgen, dass unser Projekt auf diese Schwachstellen reagiert. Ich meine, diese beiden Breakpoints sind die Breakpoints für Tablets Lassen Sie uns dazu mit der nächsten Vorlesung fortfahren. 28. Responsive Teil 3: Ordnung, lassen Sie uns weitermachen und unser Projekt weiterhin an verschiedene Bildschirmgrößen und Geräte anpassen. In der letzten Vorlesung haben wir die Arbeit an den Desktop-Bildschirmen abgeschlossen. Jetzt müssen wir weitermachen und damit beginnen, das Projekt für Tablets responsiv zu machen . Ich meine, wir müssen dafür sorgen, dass das Projekt auf diese beiden Grenzpunkte reagiert Fangen wir mit dem ersten an. Es werden 820 Pixel und 11 80 Pixel sein. Okay, lassen Sie uns hier die Bildschirmgröße ändern, die wir benötigen (Tabelle). Wie Sie sehen können, müssen wir die Änderungen vornehmen , weil viele Dinge durcheinander sind Kehren wir zum VS-Code in der Style-CSS-Datei zurück. Ich werde neue CSS-Medien mit einer maximalen Breite von 820 Pixeln erstellen . Das erste , was ich tun werde , ist, die Schriftgröße des HTML-Elements wieder zu verringern . Lassen Sie uns HTML auswählen und dann die Schriftgröße als 48% definieren . Dadurch wird die Größe aller Elemente auf der Seite verringert . Als Nächstes platziere ich das Banner in der Mitte der Seite. Also werde ich Banner auswählen. Dann werde ich die richtige Eigenschaft definieren. Es werden 50% sein. Außerdem brauchen wir den Tiefpunkt. Es werden auch 50% sein. Um das Element perfekt zu zentrieren, verwenden wir in diesem Fall die Eigenschaften rechts und unten. Wir müssen Transform Translate mit den Werten 50% und erneut 50% verwenden. Wenn Sie die Eigenschaften links und oben statt rechts und unten verwenden, sollten Sie Translate mit -50% und -50% transformieren -50% und -50% Wie Sie sehen können, befindet sich das Banner in der Mitte. Als Nächstes werde ich mich um den Abschnitt Über mich kümmern. Lassen Sie uns weitermachen und den linken Teil auswählen. Es wird um den verbleibenden Inhalt gehen. Ich werde die Breite definieren. Es wird 40% sein. Dann werde ich diesen Code duplizieren weil wir auch die Breite der rechten Seite definieren müssen. Also brauchen wir hier rechts statt links. Und die Breite wird 60% betragen. In Ordnung, danach werde ich die Telefongröße der kleinen Überschrift ändern. Ich wähle die Abschnittsüberschrift SM und setze die Telefongröße auf 1.4. Dann werde ich mich um den Absatz kümmern. Lassen Sie uns weitermachen und ungefähr P auswählen. Zunächst werde ich die Telefongröße ändern. Es wird 1,6 RAM sein. Und dann werde ich die Breite verringern. Es werden 45 Ram sein. Lass uns weitermachen und den Browser überprüfen. Okay, das Menüsymbol verdeckt also nicht den Text des Absatzes. Als Nächstes werde ich den Buchbereich abarbeiten. Wie Sie sehen können, deckt das Menüsymbol die Abschnittsnummer ab. Ich werde mich um den Header kümmern. Lassen Sie uns fortfahren und Bücher auswählen, gefolgt von der Kopfzeile der Bücher. Ich werde die Breite definieren. Es werden 35 Ram sein. Wie Sie sehen können, wurde die Breite der Kopfzeile geändert, aber wir müssen die Größe des Abschnittsrandes anpassen. Lassen Sie uns fortfahren und die Überschrift Bücher auswählen , gefolgt vom Abschnittsrand. Ich stelle die Breite auf 235 Ram ein. Okay, jetzt ist das Problem behoben und das Menüsymbol verdeckt nicht die Abschnittsnummer. Der Buchbereich sieht gut aus. Als nächstes müssen wir uns um die Zeugnisse kümmern. Ich werde die Höhe des Abschnitts anpassen , weil er momentan zu lang ist. Ich meine die Länge des Abschnitts. Lassen Sie uns weitermachen und Testimonials auswählen und die Höhe auf 100 Poo festlegen Genau, das bezieht sich auf den Abschnitt mit den Testimonials. Als nächstes müssen wir hier die Fußzeile nehmen , die Eingabefelder Gehen wir weiter und wählen die Eingabegruppe gefolgt von den Eingabeelementen aus, und ihre Breite beträgt 28 Rm Lass uns den Browser überprüfen. Wie Sie sehen können, sieht der Fuß gut aus. Eigentlich sind wir mit der Hauptseite fertig. Alle Abschnitte und alle Elemente sehen ziemlich gut aus. Lass uns weitermachen und andere Seiten überprüfen. Ich fange mit den „Über uns“ -Seiten an. Ich kann sehen, dass hier alles durcheinander ist. Lassen Sie uns weitermachen und die CSS-Datei öffnen und neue CS-Medien erstellen Die Markierungen mit werden 820 Pixel betragen. Ich werde mit der Abschnittsüberschrift beginnen. Ich möchte es in der Mitte der Seite platzieren. Lassen Sie uns weitermachen und „ Über die Abschnittsüberschrift“ auswählen. Lassen Sie uns den Text so einstellen, dass die Linie zentriert ist. Und dann werde ich die Transform-Übersetzungsfunktion verwenden. Und ich werde die Werte auf 0,0 setzen . Der Header wird in der Mitte platziert. Als nächstes müssen wir uns hier um dieses blaue Element kümmern. Wir müssen es auch in der Mitte platzieren. Lassen Sie uns weitermachen und etwa die Abschnittsüberschrift auswählen , gefolgt von der Abschnittsgrenze. Dann müssen wir, nachdem wir das Element gesehen haben, die rechte Position auf 50% setzen Um das Element dann in der Mitte zu platzieren, müssen wir translate x mit dem Wert 50% transformieren. Okay, setzen wir uns über die Kopfzeile. Als Nächstes müssen wir uns um die Funktionen kümmern. Wir werden die Ausrichtung der Funktionen ändern. Lassen Sie uns weitermachen und die Seitenfunktionen auswählen . Zuallererst werde ich die Polsterung an der Unterseite ändern Lass es uns auf 25 setzen. Dann werde ich die Ausrichtung der Bilder ändern. Lassen Sie uns weitermachen und die Standardstile finden. Ich werde mir diesen Code von hier holen. Lassen Sie uns ihn hier einfügen und die Änderungen vornehmen. Eigentlich müssen wir hier überall Null einfügen. Lass uns den Browser überprüfen. Wie Sie sehen können, sind die Funktionen nun anders platziert. Ich finde, sie sehen ziemlich gut aus. Als Nächstes werde ich mich um den Teambereich kümmern. Ich werde die Form des Hintergrunds ändern und ihn zu einem Rechteck anstelle eines Dreiecks machen. Lass uns weitermachen und das Team auswählen. Wie Sie sich erinnern, haben wir eine Eigenschaft namens Clip Path verwendet. Ich setze es auf „Keine passe dann die Größe des Elements an. Lassen Sie uns auf 100% setzen. Was die Höhe angeht, werde ich sie auf 70 Epo-Höhe setzen. Die Form des Elements wurde geändert. Eigentlich werde ich diesen Box-Shadow loswerden. Lassen Sie uns Box Shadow auf „Keiner“ setzen. Ordnung, also ich finde, dass der Teambereich ziemlich gut aussieht. Als Nächstes müssen wir die Größe der Bilder ändern. Ich wähle Mitglied aus, gefolgt von den Bildelementen. Lassen Sie uns W und Höhe setzen, beide auf 20 m. Dann ändere ich die Schriftgröße der Elementposition. Stellen wir es auf 1,2 m ein. Wie Sie sehen können, landete die Kopfzeile der Fußzeile auf dem Hintergrund des Teambereichs Wir werden das Problem in einer Minute beheben. Lassen Sie uns weitermachen und Footer about auswählen und den oberen Rand auf Null setzen Jetzt ist das Problem behoben. Als Nächstes werde ich mich um die Kopfzeile der Fußzeile kümmern. Wir werden es in der Mitte der Seite platzieren. Ich wähle die Fußzeile über, gefolgt von der Fußzeile Lassen Sie uns den Text so einstellen, dass die Linie zentriert ist. Dann müssen wir translate x mit dem Wert Null transformieren. Okay, jetzt brauchen wir dasselbe mit diesem After-Element. Ich meine dieses Bullenelement. Wir müssen es in der Mitte platzieren. Ich wähle die Fußzeile ungefähr, gefolgt von der Fußzeilenkopfzeile Dann wähle ich den Abschnittsrand mit dem Element hinter dem Element aus. Die richtige Position muss bei 50% liegen, und dann transformiere ich translate x 50%. Okay, das war's Die Kopfzeile befindet sich in der Mitte und auf der Info-Seite sieht alles ziemlich gut aus. Wir sind fertig. Lass uns weitermachen und andere Seiten überprüfen. Die nächste Seite ist die Buchseite, und ich denke, sie sollte gut aussehen. Wir müssen hier keine Änderungen vornehmen. Als nächstes haben wir den Abschnitt mit Testimonials. Wie Sie sehen können, müssen wir einige Änderungen vornehmen. Lassen Sie uns weitermachen und die CSS-Datei mit den Testimonials öffnen und eine neue CSS-Medienabfrage mit einer maximalen Breite von 820 Pixeln erstellen neue CSS-Medienabfrage mit einer maximalen Breite von 820 Ich werde das Abschnittselement auswählen, ich meine den Abschnitt Testimonials Ich werde die Höhe definieren. Es wird 100 Meter hoch sein. Lassen Sie uns die Ergebnisse überprüfen. Die Höhe ist verringert. Als Nächstes werde ich mich um die Kleinigkeit kümmern. Fangen wir mit dem leichten Hintergrund an. Ich werde die Breite auf 95% setzen. Lassen Sie uns diesen Code duplizieren, weil wir dasselbe mit dem geringfügigen Inhalt benötigen. Lassen Sie uns den Browser überprüfen, die Breite ist erhöht. Als Nächstes werde ich mich um den Absatz kümmern. Lassen Sie uns fortfahren und den Folientext auswählen, gefolgt von den Elementen. Und ich setze auf 232 m. Jetzt haben wir viel bessere Ergebnisse. Als Nächstes werde ich die Positionen der Pfeile leicht ändern . Lassen Sie uns fortfahren und die Steuerelemente auswählen, gefolgt von den Elementen. Dann brauchen wir den n-ten Child-Selektor. Wir brauchen den ersten. Lassen Sie uns die linke Position auf 5% setzen. Dann werde ich diesen Code duplizieren und die Nummer des n-ten Child-Selektors ändern Wir brauchen hier zwei. die Position angeht, so wird sie stimmen. Okay, also mit diesem Breakpoint sieht alles gut aus , wir sind fertig. Lass uns auf die Startseite gehen. Der nächste. Der nächste Breakpoint für Tablets ist dieser Breakpoint Ich werde das überprüfen. Und dann lassen Sie uns weitermachen und Tabelle zwei auswählen. Ich werde mich um die Bücher kümmern. Ich werde sie etwas kleiner machen. Außerdem werde ich mich um den Testimonial-Bereich kümmern . Okay, lassen Sie uns weitermachen und neue CSS-Medien erstellen. In dieser Art von CSS-Datei wird die maximale Breite 768 Pixel betragen. Lassen Sie uns weitermachen und das Buch auswählen und die Breite auf 32 einstellen. Lauf dann brauchen wir ein Buch mit Bildelementen. Ich werde mit 27 R beginnen. In Ordnung, also wurden die Bücher kleiner und ich finde, sie sahen ziemlich gut aus. Als Nächstes werde ich mich um den Testimonial-Bereich kümmern . Lassen Sie uns fortfahren und Testimonials auswählen und ich werde die Höhe des Abschnitts ändern Nehmen wir an, die Höhe des Topfes 2115 anzeigen. Ordnung, danach werde ich mich um die Eingaben in der Fußzeile kümmern Lassen Sie uns weitermachen und die Eingabegruppe auswählen , gefolgt von den Eingabeelementen Gehen wir mit 226 m an. In Ordnung, ich glaube, das war's. Über die Hauptseite. Schauen wir uns andere Seiten an. Die Info-Seite sieht gut aus. Wir müssen hier einen Folienwechsel vornehmen. Ich werde die Breite der Bilder verringern , da, wie Sie sehen können, das Menüsymbol das Bild des Mitglieds verdeckt. Lassen Sie uns weitermachen und über die CSS-Datei sprechen und neue CS-Medien erstellen. Das Maximum wird 768 Pixel betragen. Dann wähle ich ein Mitglied mit Bildelementen aus. Lassen Sie uns die Breite des Bildes auf 18 Ram setzen. Und wir müssen auch die Höhe ändern, aber 32 18 Ram ebenfalls. Okay, das ist ungefähr auf Seite Als Nächstes werde ich die Buchseite überprüfen. Alles sieht toll aus. Dann haben wir eine Testimonial-Seite, sieht gut aus. In Ordnung, das bezieht sich auf die Breakpoints. Schauen wir uns die zweite Breakpoint-Tabelle an. Als Nächstes müssen wir für unser Projekt mobile Telefone entwickeln Und dafür fahren wir mit der nächsten Vorlesung fort. 29. Responsive Projekte machen – Teil 4: In der letzten Vorlesung haben wir damit fertig gemacht, Project Responsive für Tablets zu machen. Wir hatten zwei verschiedene Breakpoints. Diese Breakpoints, und das Projekt reagiert auf beide Tablet-Bildschirme Als Nächstes müssen wir das Projekt für Mobiltelefone responsiv machen das Projekt für Mobiltelefone responsiv Ich meine, wir haben hier drei verschiedene Breakpoints. Lass uns weitermachen und mobile Version auswählen. Wie Sie sehen können, ist hier alles durcheinander. Wir müssen also eine Menge Dinge am Breakpoint tun, gehen wir zum VS-Code und starten die CSS-Datei Ich werde neue CSS-Medien erstellen. Die maximale Breite wird 413 Pixel betragen. Das erste, was ich tun werde, ist die Schriftgröße des HTML-Elements zu ändern Lassen Sie uns HTML auswählen und die Schriftgröße definieren. Ich werde es auf 42% setzen Dadurch wird die Größe aller Elemente verringert. Als Nächstes werde ich mich um das Logo kümmern. Lassen Sie uns Logo auswählen und es ein wenig nach links verschieben. Wir brauchen ihre linke Position mit dem Wert fünf Ram. Als Nächstes kümmere ich mich um das Banner. Ich werde die Größe der Überschriftenelemente verringern. Lassen Sie uns weitermachen und Banner H drei auswählen. Und ändere die Telefongröße. Es werden fünf Ram sein. Dann werde ich diesen Code duplizieren und H ein Überschriftenelement auswählen, die Telefongröße wird 12 Ram sein. Okay, ich denke, dass der Website-Header gut aussieht. Als nächstes haben wir den Abschnitt „Über uns“. Ich wähle den Abschnitt „Über uns“ aus. Lassen Sie uns die Höhe definieren. Es wird eine Sichthöhe von 80 haben. Dann werde ich mithilfe von Polsterungen am unteren Rand des Abschnitts Platz schaffen mithilfe von Polsterungen am unteren Rand des Abschnitts Platz Unten wird der Wert 25 m sein. Als Nächstes ändere ich die Ausrichtung der Elemente Lassen Sie uns zunächst die Größe der Abschnittsnummer verringern. Ich wähle den Abschnitt aus, gefolgt von den Span-Elementen. Lassen Sie uns die Telefongröße verringern. Es wird 16 Re sein. Dann werde ich das Leerzeichen auf der rechten Seite der Zahl verkleinern . Ich wähle etwa „Inhalt links“ aus. Lassen Sie uns die Polsterung auf der rechten Seite auf Null setzen. Dann werde ich die Polsterung für die rechte Seite ändern. Lassen Sie uns weitermachen und „ Über den Inhalt“ auswählen, richtig. Definieren Sie Padding mit den folgenden Werten. Wir benötigen vier RAM an der Oberseite, Null auf der rechten Seite, Null an der Unterseite und sechs auf der linken Seite Ordnung, danach kümmere ich mich um den Hauptknopf. Ich werde es hier platzieren. Lassen Sie uns nun weitermachen und „Über“ auswählen. Gefolgt vom Haupt-PTM. Ich werde die Position auf absolut setzen , sodass wir für die Abschnittselemente eine relative Position benötigen für die Abschnittselemente eine relative Position Lassen Sie uns definieren, dass die unterste Position 15 Ram sein wird. Dann platziere ich die Schaltfläche horizontal in der Mitte mit der linken Position mit dem Wert 50% und transformiere dann translate x mit -50%. Okay, die Schaltfläche ist die nächste Position, ich werde mich um die Überschrift auf der rechten Seite kümmern Lassen Sie uns weitermachen und die Abschnittsüberschrift LG auswählen und die Telefongröße verringern Lass uns 2,5 Ram draus machen. Ordnung, danach kümmere ich mich um die Abschnittsgrenze. Ich werde die Breite verringern. Lass uns weitermachen und „ Über Inhalt“ auswählen, richtig? Dann folgt der Abschnittsrand und die Breite wird auf 25 D gesetzt Alles klar. Ich glaube, das war's mit dem Header. Als nächstes müssen wir den Absatz streichen. Ich werde es in die Mitte stellen. Lass uns weitermachen und über den Inhalt entscheiden, richtig? Gefolgt vom Element. Ich werde die Position auf absolut setzen. Dann müssen wir die Position auf 50% setzen. Die linke Position wird bei 50% liegen Dann müssen wir das Element mit Transform Translate X -50% zentrieren . Lassen Sie uns auch den Text in der Mitte ausrichten Wie Sie nun sehen können, landeten beide Absätze übereinander Lassen Sie uns weitermachen und die Position für den zweiten Absatz ändern . Ich werde tatsächlich, lassen Sie uns den Selektor von hier aus nehmen und dem Absatz das letzte Kind der Klasse hinzufügen letzte Kind der Klasse Ich werde die Position auf 50% setzen . Alles klar, das war's Der Abschnitt „Über uns“ sieht ziemlich gut aus. Als nächstes müssen wir uns um den Buchbereich kümmern. Lassen Sie uns weitermachen und die Kopfzeile der Bücher auswählen. Ich setze den Rand auf der rechten Seite auf drei RAM. Dann werde ich mich um die Abschnittsnummer kümmern. Lassen Sie uns weitermachen und Bücher auswählen, gefolgt von der Sektion Taub Ich ändere das Putting auf der rechten Seite, setzen wir es auf fünf Ram Dann ändere ich die Breite des Randes des Abschnitts. Lassen Sie uns fortfahren und Bücher auswählen, gefolgt vom Abschnittsrand. Und ich werde mit 230 Ram fertig sein. Eigentlich brauchen wir das hier nicht. Die Breite des Randes wurde geändert, aber wie Sie sehen können, hat er seine Position geändert. Wir müssen es auf die rechte Seite verschieben. Dafür verwende ich margin left mit dem Wert to. Okay, das war's also mit der Kopfzeile des Buchabschnitts. Die Bücher selbst sehen gut aus und mit diesem Abschnitt sind wir eigentlich fertig. Als Nächstes müssen wir uns um den Abschnitt mit den Testimonials kümmern. Wie Sie sehen können, müssen wir hier viele Änderungen vornehmen. Lassen Sie uns weitermachen und Abschnittselemente für die Zeugnisse der Klassennamen auswählen Ich werde die Höhe ändern, lassen Sie uns die Höhe auf 125 erhöhen Dann wähle ich die Abschnittsnummer aus. Wir benötigen Ihre Referenzen oben, gefolgt vom Abschnitt, und ich werde den Rand auf der rechten Seite ändern, sagen wir auf fünf Als Nächstes ändere ich die Seite der Grenze. Lassen Sie uns also fortfahren und Testimonials auswählen , gefolgt von der Abschnittsgrenze Eigentlich können wir hier Testimonials ohne Testimonials verwenden hier Testimonials ohne Testimonials Oben, ich werde die Breite 229 Ram einstellen. Lass uns den Browser überprüfen. Ordnung, der Header mit der Abschnittsnummer sieht also gut aus. Als Nächstes müssen wir uns um das Feedback kümmern. Lass uns weitermachen und Feedback oben auswählen. Ich werde die Flexrichtung ändern, aber in diesem Fall verwende ich umgekehrte Spalte, weil ich möchte, dass die ersten Elemente im Abschnitt die Überschrift und nicht das Zitat sind. Wie Sie jetzt sehen können, befindet sich die Überschrift oben im. Und im nächsten Bild werde ich die Polsterung auf der linken Seite loswerden Lass es uns auf Null setzen. Jetzt wird die Überschrift in der Mitte des Abschnitts platziert . Danach werde ich am unteren Rand der Überschrift etwas Platz schaffen . Lassen Sie uns weitermachen und die Feedback-Überschrift auswählen und den Rand unten auf fünf Ram setzen. Danach werde ich mich um den Hintergrund kümmern. Lass uns weitermachen und PG auswählen. Ich werde die Eigenschaften oben und links ändern. Ich meine die Position, setzen wir die oberste Position auf 250 Ram. Was die linke Position angeht, gehe ich auf neun. Und lassen Sie uns auch die Höhe des Elements erhöhen. Lass uns 32 50 Ram. Ordnung, danach kümmere ich mich um das Angebot selbst. Lassen Sie uns also weitermachen und auswählen, lassen Sie uns die Position des Zitats ändern. Die oberste Position wird 58 Ram sein. Dann setze ich die linke Position auf 12 Ram. Und ändere auch die Größe der Elemente. Wir brauchen. Die Breite soll 40 sein. Ändere auch die Höhe, lass uns 37 Ram draus machen. Okay, das Zitat sieht also ziemlich gut aus. Als Nächstes müssen wir uns um den Inhalt des Zitats kümmern . Fangen wir mit dem Telefon Atomic an. Lassen Sie uns weitermachen und „ Ich habe tatsächlich Kopfzeile“ ausgewählt. Wir brauchen eine Telefongröße von fünf. Dann ändere ich das Leerzeichen zwischen der Überschrift, ich meine den Namen des Kunden und dem. Lassen Sie uns weitermachen und den Header auswählen , gefolgt vom ersten Überschriftenelement H. Setzen wir Putting auf Null und dann auf fünf Ram. Jetzt die Überschrift. Die Kopfzeile sieht gut aus. Als Nächstes werde ich mich um den Absatz kümmern. Lassen Sie uns fortfahren und Körper auswählen, gefolgt von den Elementen. Die Breite des Absatzes wird 30 Ram betragen. Dann brauchen wir die Schriftgröße. Lass es uns auf 1.4 setzen Eigentlich brauchen wir hier 1.4 Dann werde ich mit dem Rand Platz am unteren Rand schaffen. Unten mit dem Wert 3,5 Ram. Okay, der Inhalt des Zitats sieht gut aus. Und mit diesem Abschnitt sind wir eigentlich fertig. Lass uns weitermachen und uns um die Fußzeile kümmern. Ich werde die Ausrichtung des Inhalts in der Fußzeile ändern Inhalts in der Fußzeile Lassen Sie uns weitermachen und den Inhalt der Fußzeile auswählen. Lassen Sie uns die Flex-Richtung ändern. Es wird die umgekehrte Spalte sein, weil ich die Eingabefelder am Anfang des Inhalts platzieren möchte . Als Nächstes werde ich die Breite des Formulars und auch den sozialen Teil ändern. Lassen Sie uns fortfahren und Social with Form auswählen und auf 100% setzen. Als Nächstes wähle ich Foot Social einzeln aus. Bevor wir uns um Foot Social kümmern, werde ich mich um das Formular kümmern , weil wir hier an erster Stelle das Formular haben. Lassen Sie uns weitermachen und die Eingabegruppe auswählen und ihre Breite auf 100% setzen Dann wähle ich die Eingabegruppe aus, gefolgt vom Eingabeelement, stelle dessen Breite auf Vererben In diesem Fall erbt das Eingabeelement die Breite vom übergeordneten Wie Sie sehen können, sehen die Eingaben gut aus. Als nächstes werde ich mich um den Boden kümmern. Lassen Sie uns fortfahren und das Formular auswählen, gefolgt von der Unterseite. Begnügen wir uns mit 100%. Dann brauchen wir unten eine Marge von zehn Ram. Wie Sie sehen können, sieht der Boden ziemlich gut aus. Als Nächstes werde ich mich hier um diesen Teil kümmern. Ich meine Foot Social. Platzieren wir den Code hier. Wählen Sie Foot Social aus. Ich werde Flex Box verwenden. Lassen Sie uns den Display-Flex einstellen, weil wir die Elemente horizontal nebeneinander platzieren werden. Und dann lassen Sie uns mithilfe von Justify Content Platz schaffen. Abstand zwischen der Adresse und dem Telefon, wie Sie sehen können . Fantastische Symbole sind nebeneinander angeordnet. Ich werde die Telefon-Aesomeicons in der Mitte vertikal verschieben in der Dafür können wir tatsächlich soziale Medien auswählen und dann Eigenschaft Align Self mit einem Value Center verwenden Die Asomicons des Telefons werden vertikal in der Mitte platziert. Ordnung, mit der Haupt-Landingpage sind wir also fertig. Alles sieht gut aus. Lass uns weitermachen und die Navigation überprüfen. Ich werde dieses Bild ganz loswerden und einfach die Navigationspunkte hier belassen. Lass uns weitermachen und links auswählen und es mit diesem Spiel verstecken. Nein, das Bild ist versteckt. Als Nächstes müssen wir die rechte Seite auf die gesamte Seite ausdehnen . Dafür müssen wir den Klassennamen und die Navigation verwenden. Und dann brauchen wir genug, oder? Das ist mit 100% okay gesagt, das war's also. Die Navigation sieht ziemlich gut aus. In Ordnung, mit der Hauptseite sind wir fertig. Lass uns weitermachen und andere Seiten überprüfen. Schauen wir uns die Seite an, wir müssen dich aus dem Teambereich entfernen. Alle anderen Elemente sehen gut aus. Lassen Sie uns weitermachen und eine Flaschen-CSS-Datei öffnen und eine neue CSS-Medienabfrage erstellen. Wir brauchen max. 430 Pixel. Lassen Sie uns weitermachen und Teambereich auswählen und die Höhe definieren. Ich mache eine Höhe von 100 Aussichtspunkten und platziere dann die Bilder vertikal in einer Spalte Lassen Sie uns weitermachen und Mitglieder auswählen und die Flex-Richtung ändern Es wird eine Spalte sein und dann werde ich etwas Abstand zwischen den Mitgliedern schaffen . Ich wähle den Elementsatz mit einem Abstand vier M an der oberen und unteren Seite und sechs Ram an der linken und rechten Seite. In Ordnung, die Mitglieder sehen gut aus. Wir müssen uns um die Überschrift kümmern. Wählen wir das Team gefolgt von den Überschriftenelementen H aus und ändern den Rand. Es wird Null auf der Oberseite sein, Null auf der rechten Seite, Zehn Ram auf der Unterseite und Null auf der linken Seite. Okay, der Teambereich sieht also gut aus. Und mit der gebogenen Seite sind wir fertig. Lass uns weitermachen und die Buchseite überprüfen , alles sieht gut aus Dann haben wir eine Testimonial-Seite. Wie Sie sehen können, müssen wir einige Änderungen vornehmen. Der Slider, die Folien sehen nicht ganz gut aus. Lassen Sie uns die Testimonials der CSS-Datei öffnen und eine neue CSS-Medienabfrage mit einer maximalen Breite von 430 Pixeln erstellen neue CSS-Medienabfrage mit einer maximalen Breite von 430 Zuallererst werde ich Größe des Testimonial-Wrappers ändern Lassen Sie uns weitermachen und den Testimonial-Wrapper auswählen. Ich werde auf 60% setzen. Was die Höhe angeht, werden es 60 Gramm sein Als Nächstes ändere ich die Größe der Folie selbst. Wir brauchen einen leichten Hintergrund. Stellen wir 80% dann wird die Höhe 90% betragen. Außerdem benötigen wir Folieninhalte. Lassen Sie uns auf 80% setzen und dann brauchen wir eine Höhe von 90% Okay. Danach werde ich mich um die Angebote kümmern. Lassen Sie uns fortfahren und Folie auswählen, gefolgt von den Elementen. Ich werde die Telefongröße ändern. Stellen wir es auf sieben Ram ein. Im Moment sind die Anführungszeichen nicht sichtbar, weil wir die Positionen des Telefons ändern müssen. Lassen Sie uns fortfahren und Folie I auswählen, gefolgt vom N-Selektor Ich wähle das erste Symbol aus. Lassen Sie uns die oberste Position auf -5% setzen. Was die aktuellen Positionen angeht ist sie auf 10% festgelegt, also werde ich sie nicht ändern Lassen Sie uns weitermachen und diesen Code duplizieren. Ändern Sie den Selektor, den wir auch hier benötigen. Jetzt setze ich die unterste Position auf -5% Ordnung, also hier haben wir die Sie sind positioniert und sehen gut aus. Als Nächstes werde ich die Ausrichtung der Folie ändern. Ich werde hier die Spalte für die Flex-Richtung hinzufügen. Und dann brauchen wir Platz zwischen den Flex-Elementen, indem wir den Inhaltsbereich rechtfertigen. Wie Sie sehen können, werden die Flex-Elemente bereits jetzt vertikal in einer Spalte platziert. Ich werde mich um das Bild kümmern. Lassen Sie uns weitermachen und das Folienbild auswählen und die Größe ändern. Breite muss 75% betragen. Was die Höhe angeht, setze ich sie auf 16, dann entfernen wir den Rand auf der rechten Seite. Setzen wir es auf Null. In Ordnung, das Bild sieht also gut aus. Als Nächstes kümmere ich mich um den Text. Lassen Sie uns den Folientext auswählen und seine Breite auf 100% setzen . Und jetzt werde ich die Breite des Absatzes ändern. Lassen Sie uns weitermachen und den Folientext auswählen , gefolgt vom P-Element. Ich werde die Breite auf 25 D setzen. In Ordnung, das entspricht also etwa der Testimonial-Seite Alles sieht gut aus. Eigentlich sind wir mit diesem Breakpoint fertig All diese Abschnitte und alle Seiten sehen ziemlich gut aus. Lassen Sie uns weitermachen und diesen Breakpoint hier überprüfen. Und jetzt müssen wir das Projekt anpassen . Lassen Sie uns am Breakpoint fortfahren und Mobile Two auswählen Ich werde die Telefongröße des HTML-Elements wieder verringern Telefongröße des HTML-Elements Lassen Sie uns weitermachen und eine neue CSS-Medienabfrage mit einer maximalen Breite von 393 Pixeln erstellen maximalen Breite von 393 Pixeln Lassen Sie uns weitermachen und die Telefongröße des HTML-Elements ändern die Telefongröße des HTML-Elements Ich werde 32, 38% Lass uns die Projekte überprüfen. Wie Sie sehen können, sieht alles gut aus. Ich werde nachsehen, dass die Seite „ Über uns“ gut aussieht. Als Nächstes haben wir eine Bücherseite, sie sieht gut aus. Und schauen wir uns die Testimonial-Seite an. Alles sieht ziemlich gut aus. Alles klar, lassen Sie uns über diesen Breakpoint sprechen. Als Nächstes werde ich mich um den nächsten Breakpoint kümmern , der der letzte ist Lassen Sie uns weitermachen und Mobile Three auswählen. In diesem Fall müssen wir einige Änderungen vornehmen. Lassen Sie uns weitermachen und neue S-Medien erstellen. Eigentlich werde ich den Code, den wir hier brauchen, duplizieren , maximale Breite entspricht 375 Pixeln. Ich werde die Telefongröße verringern. Lassen Sie uns 36% daraus machen und das Projekt überprüfen. Der Header der Website sieht gut aus. Als nächstes haben wir den Abschnitt „Über uns“. Es sieht gut aus. Der Buchbereich sieht gut aus. Wir müssen den Abschnitt mit den Testimonials anpassen. Lassen Sie uns weitermachen und Testimonials auswählen. Ich werde die Höhe ändern. Machen wir es 150 Fuß hoch. Jetzt ist das Problem behoben und die Fußzeile sieht auch gut aus Okay, schauen wir uns andere Seiten an. Wir haben hier eine Buchseite, die gut aussieht. Als Nächstes haben wir eine Seite mit Büchern. Es sieht auch gut aus. Und schließlich haben wir hier Testimonials. Ich werde die Höhe des Abschnitts mit den Testimonials erhöhen Höhe des Abschnitts mit den Testimonials Lassen Sie uns also die Testimonials der CSS-Datei öffnen eine neue CSS-Medienabfrage mit einer maximalen Breite von 375 Pixeln erstellen Wählen Sie dann den Abschnitt mit den Testimonials aus und ändern Sie die Höhe. Ich werde die Höhe des Viewports auf 130 erhöhen, okay? Jetzt sieht dieser Abschnitt gut aus und eigentlich sieht alles ziemlich gut aus, okay? Wir können sagen, dass das Projekt für verschiedene Bildschirmgrößen und Geräte anspricht. Bevor wir unseren Kurs beenden, werde ich ein paar Dinge erledigen. Schauen wir uns das fertige Projekt an. Ich werde den Website-Loader erstellen, ich meine diese Animation hier. Dann sollten wir die Website bereitstellen und online stellen. Ordnung, lassen Sie uns weitermachen und mit der nächsten Vorlesung fortfahren. 30. Website Loader erstellen: In der letzten Vorlesung haben wir Arbeit am responsiven Modus abgeschlossen. Unser Projekt reagiert auf verschiedene Bildschirmgrößen und Geräte. Jetzt werden wir , wie gesagt, den Website-Loader erstellen. Schauen wir uns das fertige Projekt an. Wenn wir die Seite neu laden, erscheint diese nette und coole Animation Und sobald die Animation endet, wird die Webseite geladen In dieser Vorlesung werden wir diesen netten und coolen Website-Loader erstellen . Vorher werde ich noch eine Sache machen. Wenn wir die Navigation öffnen und auf den Kontaktlink klicken, navigieren wir zum Kontaktbereich. Wenn wir eine andere Seite öffnen und erneut auf den Kontaktlink klicken, navigieren wir zum Kontaktbereich dieser Seite. In unserem Projekt haben wir diese Funktion nicht. Gehen wir zum VS-Code. Ich werde die Fußzeile finden. Ich werde dem Footer-ID-Attribut den Wert contact hinzufügen Footer-ID-Attribut den Wert contact Dann werde ich mir dieses Attribut schnappen. Lass uns es kopieren und alle HTML-Dateien öffnen. Wir brauchen eine HTML-Flasche, dann HTML-Bücher und die Zeugnisse, dass HTML überall geöffnet ist. Wir müssen das Attribut für den kompletten Server übergeben. Lassen Sie uns Bücher mit HTML-Dateien öffnen und hier die ID hinzufügen. Schließlich haben wir hier die Fußzeile für Testimonials, das heißt ID einfügen In Ordnung. Wenn wir nun zum Browser gehen und auf Link klicken, navigieren wir zum Vertragsbereich. Aber wie Sie sehen können, ist die Navigation nicht geschlossen. Wir befinden uns im Kontaktbereich, müssen aber das Schließen der Navigation verwalten. Sobald wir auf den Kontaktlink geklickt haben, gehen wir zum Java-Skript. Ich werde den Kontaktlink auswählen. Lassen Sie uns einen neuen variablen Kontaktlink erstellen und ihn dann mithilfe der Methode zur Auswahl der Dokumentenabfrage auswählen Wir müssen hier die Navigation angeben , gefolgt von den A-Elementen Und wir brauchen hier das letzte Kind, weil Kontaktlink der letzte Link in den Navigationselementen ist. Okay, danach wähle ich Contact Link und füge ihm einen Event-Listener hinzu auf Ereignisse klicke, füge ich Wenn ich auf Ereignisse klicke, füge ich hier eine Callback-Funktion ein, die ausgeführt wird, sobald auf den Kontaktlink geklickt wird Sobald wir auf den Kontaktlink geklickt haben, müssen wir die Klasse entfernen Navigiere vom Container aus. Eigentlich brauchen wir hier nicht. Nehmen wir diese Codezeile anstelle von togalmove gehen Sie dann zum Browser Ich werde zu einer der Seiten gehen. Klicken wir auf Kontakt-Link. Wie Sie sehen können, werden wir zum Kontaktbereich weitergeleitet. Lass uns zur Startseite gehen. Klicken Sie auf Kontakt. Wir werden zum Kontaktbereich weitergeleitet. In Ordnung, also funktioniert alles gut. Lass uns auf die Startseite gehen. Und dann fange ich an, den Loader zu erstellen. Wir müssen das HDMon-Zeichen hier oben in die Körperelemente direkt vor dem Container einfügen hier oben in die Körperelemente direkt vor dem Container Fügen wir neue Kommentare in einen Loader ein. Dann öffne ich das Dip-Tag mit dem Klassennamen Loader-Wrapper Innerhalb dieser Entwicklung werde ich einen weiteren Dip mit dem Klassennamen-Loader öffnen , der sich auf das HTML-Markup bezieht Ich werde die CSS-Datei im Stil öffnen und den Container finden. Ich werde den Container mit Opazität Null und Sichtbarkeit ausblenden Opazität Null und Sichtbarkeit Dann werde ich Ihre neuen Kommentare für den Loader einfügen Ihre neuen Kommentare für den Loader Ich werde Wrapper auswählen. Definieren wir innerhalb von Höhen. Die Breite wird 100% betragen, dann Höhe 100 (Aussichtspunkthöhe Ändern Sie die Hintergrundfarbe. Lassen Sie uns die Farbe auf 151515 setzen. Dann müssen wir die Position ändern. Dann wird es repariert werden. Außerdem werde ich Eigenschaften am linken oberen Ende definieren, beide als Null. Hier haben wir den Wrapper. Als nächstes müssen wir uns um den Lader kümmern Lass uns weitermachen und Loader auswählen. Ich werde die Breite definieren. Machen wir es auf 40% Dann brauchen wir Höhe. Ich werde es auf eine Rampe von 0,1 einstellen und dann die Hintergrundfarbe ändern. Es wird weiß sein. Lass uns den Browser überprüfen. Hier haben wir den Lader. Ich werde es in der Mitte der Seite platzieren. Verwenden wir dafür Flex Book. Wir müssen hier Flex anzeigen, dann zentriert ausrichten und die Artikel mittig ausrichten. Okay, hier haben wir den Lader. Jetzt werde ich die Animation erstellen, ich meine CSS-Keyframes. Fügen wir hier Keyframes mit dem Namen Loader hinzu. Wir werden ein paar verschiedene Schritte durchführen. Bei 0% werde ich die Skala des Elements verringern. Lassen Sie uns die Funktion scale x verwenden und sie auf Null setzen. Außerdem müssen wir den Ursprung der Transformation ändern . Machen wir es links. Zu Beginn der Animation das Element keine Breite und es wird von seiner linken Seite aus transformiert. Als Nächstes haben wir 20%. Nehmen wir diese beiden Zeilen. Bei 20% werde ich die Skala erhöhen. Machen wir eins draus. Und der Ursprung der Transformation wird wieder links liegen. Nach einem Fortschritt von 20% ist das Element vollständig sichtbar und von seiner linken Seite aus immer noch transformiert. Lassen Sie uns diesen Code duplizieren. Der nächste Schritt ist 25%. Wir brauchen Skala x eins. Was den Ursprung der Transformation angeht, so wird er wieder stimmen. Bei einem Fortschritt von 25% bleibt das Element vollständig sichtbar, aber jetzt wird es von seiner rechten Seite aus transformiert. Lassen Sie uns den Code erneut duplizieren. Der nächste Schritt liegt bei 45%. In diesem Schritt benötigen wir Scale Lex Zero. Der Ursprung der Transformation wird wieder sein, genau bei einem Fortschritt von 45% verschwindet das Element, während es von seiner rechten Seite transformiert wird. Als nächstes haben wir 50% wir brauchen Scalac Null und transformieren Origin Bei einem Fortschritt von 50% bleibt das Element unsichtbar, bleibt das Element unsichtbar obwohl es von der rechten Seite transformiert wird Der nächste Schritt ist 70%. Bei 70% müssen wir einen Wert berechnen und den Ursprung transformieren Richtig Bei einem Fortschritt von 70% erscheint das Element wieder, während es von rechts transformiert wird Als nächstes haben wir 75% Wir müssen hier eins berechnen und den Ursprung links transformieren. Bei einem Fortschritt von 75% bleibt das Element sichtbar, aber jetzt wird es von seiner linken Seite transformiert Schließlich müssen wir hier den Code tatsächlich zu 100% duplizieren. Wir brauchen eine Skalierung von 100% x Null und die Transformation des Ursprungs nach links. Am Ende der Animation verschwindet das Element, während es von links transformiert wird. In Ordnung, um diese Regeln anzuwenden, werde ich dem Loader eine Animation hinzufügen. Wir brauchen den Namen Loader. Und dann wird die Dauer 5 Sekunden betragen. Außerdem möchte ich eine kleine Verzögerungszeit, 0,5 Sekunden. Okay, lass uns zum Browser gehen. Wie Sie sehen können, funktioniert die Animation. Eigentlich werde ich standardmäßig den Loader ausblenden, den ich hier hinzufügen werde, transformiert die Skala x Null. Sobald die Animation endet, wird der Loader verschwinden. In Ordnung, alles sieht gut aus. Als Nächstes füge ich dem Projekt ein V-Skript hinzu. Ich werde das Skript OJS öffnen. Lassen Sie uns hier neue Kommentare für den Loader einfügen. Dann wähle ich den Loader-Wrapper aus. Lassen Sie uns eine neue Variable erstellen, nennen wir sie Loader. Und wählen Sie Loader-Wrapper. Wir brauchen hier Loader-Wrapper. Danach werde ich an den Fensterobjekt-Event-Listener anhängen Bei dem Event brauchen wir hier den Window Event Listener. Das Event wird geladen. Dann füge ich hier eine Callback-Funktion ein, die ausgeführt wird, sobald das Fenster geladen ist Jetzt werde ich eine der in Javascript eingebauten Funktionen namens Set Time Out verwenden in Javascript eingebauten Funktionen namens Set Time Out Lassen Sie uns Set Time Out verwenden. Ich werde Ihre Cobc-Funktion einfügen. Nach einiger Zeit werde ich den Lader verstecken Und auch nach einiger Zeit werde ich den Container wieder anzeigen. Jetzt füge ich dem Loader eine neue Klasse hinzu, die dann in CSS verwendet wird, um den Loader zu verstecken. Auf die gleiche Weise werde ich dem Container eine neue Klasse hinzufügen , die in CSS verwendet wird , um den Container wieder anzuzeigen. Ich werde hier eine Loader-Klassenliste hinzufügen. Ich werde den Klassennamen Hide Next nennen, wir müssen hier hinzufügen, die Verzögerung 6.000 betragen wird , ich meine 6 Sekunden. Dann werde ich diesen Code duplizieren. Wir benötigen unterschiedlich viel Zeit für den Container. Ich werde hier einen Container hinzufügen. Nennen wir den Klassennamen Show. Was die Verzögerungszeit anbelangt, so wird sie 5.500 Millisekunden betragen wird sie 5.500 Millisekunden Okay, gehen wir zur CSS-Datei und ich füge hier die Höhe hinzu , während der Wrapper geladen wird . Ich setze hier die Opazität auf Null und die Sichtbarkeit Dann zeige ich hier den Container, den wir brauchen, zeigen, gefolgt vom Dann brauchen wir hier diese beiden Eigenschaften. Die Kapazität wird eins sein. Was die Sichtbarkeit angeht, die wir hier brauchen, sichtbar. Okay, lass uns den Browser überprüfen und die Seite laden. Hier haben wir den Loader mit Animation. Sobald die Animation endet, erscheint der Container. Wenn wir eine der Seiten öffnen, werden Sie feststellen, dass der Container nicht sichtbar ist, aber nach einiger Zeit wird er angezeigt. Eigentlich brauchen wir das nicht. Ich werde diese Probleme lösen. Gehen wir zum VS-Code und öffnen wir die Index-HTM-Datei. Ich werde dem Container eine Klasse hinzufügen. Es wird der Hauptcontainer sein. Wir müssen den Container verwenden, der sich im indizierten HtmalPile befindet Deshalb füge ich hier eine neue Klasse hinzu. Außerdem werde ich den Hauptteil des Indexes HtmalPile verwenden Hauptteil des Indexes HtmalPile Ich werde hier den Hauptteil hinzufügen, dann werde ich die Bildlaufleiste ausblenden Dafür brauchen wir Körper und dann Überlaufheizung. Als Nächstes wähle ich den Hauptcontainer aus. Ich werde diese Eigenschaften dem Hauptcontainer hinzufügen. Und dann werde ich hier main hinzufügen. Okay, als Nächstes füge ich dem Container eine Position hinzu. Es wird relativ sein. Außerdem benötigen wir Übergänge für den Hauptcontainer, Paul 0,5 Sekunden. Außerdem brauchen wir einen Übergang für den Loader-Wrapper. Fügen wir hier den Übergang Paul 0,5 Sekunden hinzu. Okay, lass uns zum Browser gehen und die Seite neu laden. Jetzt haben wir hier die Animation. Sobald es endet, wird der Container angezeigt. Lassen Sie uns damit beginnen, wie Sie sehen können, wir haben hier keine Probleme mehr. Eigentlich haben wir ein kleines Problem. Sobald die Animation beendet ist, haben wir hier die Scrollleiste nicht mehr und wir können nicht nach unten scrollen. Lassen Sie uns weitermachen und das Problem beheben. Gehe zur Geosky-Datei. Ich werde hier Körperelemente auswählen. Rufen wir den Variablenkörper auf und wählen ihn dann mit der Abfrageselektormethode Geben Sie hier den Klassennamenkörper an. Dann füge ich hier Body Dot Style Dot Overflow hinzu. Es sollte gleich Auto sein. Sobald der Behälter angezeigt wird, benötigen wir keine Überlaufheizung mehr Dadurch können wir die Bildlaufleiste wieder anzeigen. Lass uns zum Browser gehen. Die Animation läuft. Sobald sie beendet ist, wird der Container mit Scrollbar angezeigt und wir können nach unten scrollen Ok Damit alles perfekt funktioniert, ist der Loader erstellt Das nächste, was ich tun werde, ist die Website online zu stellen. Wir müssen es auf der Netlify-Plattform hosten. Lassen Sie uns dazu mit der nächsten Vorlesung fortfahren. 31. Website bereitstellen: In unserer vorherigen Vorlesung haben wir den Website-Loader erstellt, und jetzt ist es an der Zeit, mit dem letzten Schritt fortzufahren, Online-Bereitstellung unserer Website. Es gibt zahlreiche Möglichkeiten, Ihre Website zu hosten, aber in diesem Kurs bevorzuge ich Netlify Netlify ist eine Cloud-Plattform, die eine Reihe von Diensten für moderne Webentwicklung und Hosting bietet für moderne Webentwicklung Es bietet eine Platform-as-a-Service-Lösung , die den Prozess der Bereitstellung und Verwaltung von Websites und Webanwendungen vereinfacht den Prozess der Bereitstellung und Verwaltung von Websites und Webanwendungen Lassen Sie uns weitermachen und Netlify.com besuchen . Als Erstes müssen Sie sich anmelden, was ein ziemlich einfacher Vorgang ist Also werde ich es nicht durchmachen. Ich habe mich bereits registriert, also melde ich mich einfach hier an. Wir haben ein Dashboard des Benutzers. Um die Website bereitzustellen, können Sie entweder Ihr vorhandenes Git-Repository importieren oder einfach Ihren Arbeitsprojektordner per Drag & Drop verschieben. Ich bevorzuge den zweiten Weg, ich ziehe den Projektordner per Drag & Drop. Es wird einige Zeit dauern. Okay, das passt also. Lassen Sie uns weitermachen und auf Open Production Deployee klicken. Hier haben wir unsere Website. Sie ist online. Alles funktioniert gut. Wir haben hier das Projekt. Lassen Sie uns durch verschiedene Seiten navigieren. Wie Sie sehen können, funktioniert alles einwandfrei und sieht gut aus. Schauen wir uns die Testimonial-Seite an. Okay, unsere Website ist also online. Das einzige, was ich tun werde, ist den Domainnamen zu ändern, weil wir hier einen langen Namen mit einigen Zeichen haben. Gehen wir zur Konfiguration der Site. Ich werde den Namen der Seite ändern. Lasst uns diese Charaktere loswerden. Ich rufe die Website an und erstelle eine Bibliothek. Lass es uns speichern. In Ordnung, hier haben wir den Link. Lass uns darauf klicken. Wir haben hier unsere Website mit einem neuen Domainnamen. Sie können es nennen, wie Sie wollen. Ich weiß, dass es kein perfekter Name ist, aber das ist nicht die Hauptsache. In Ordnung, das ist erledigt. Endlich können wir sagen, dass wir mit dem Projekt fertig sind. Herzlichen Glückwunsch, fantastische Arbeit zum Abschluss dieses Kurses. Sie sind jetzt mit den Fähigkeiten ausgestattet , um großartige Websites zu erstellen. Ich möchte mich ganz herzlich bei Ihnen dafür bedanken , dass Sie Teil dieses Kurses sind. Lernen Sie weiter, bleiben Sie neugierig und genießen Sie die Reise. Als Webentwickler wünsche ich Ihnen viel Glück bei all Ihren zukünftigen Projekten. Viel Spaß beim Programmieren und viel Spaß bei den großen Websites. Beeindrucke immer. Viel Glück. Tschüss, tschüss.