Baue eine Mega-Responsive-Website: HTML, CSS, JavaScript (2024)

1. Einführung: Hallo und willkommen auf unserer praxisorientierten, auf Kurs erstellten , sehr responsiven Website mit HTML, CSS und Javascript. Ich möchte mich bei Ihnen dafür bedanken sich für diesen Kurs angemeldet Wenn Sie sich darauf freuen, direkt in die Erstellung einer echten mehrseitigen Website einzutauchen , dann sind Sie bei uns genau richtig Während dieses Kurses werde ich Sie begleiten, wenn wir mithilfe von HTML, CSS und Chavscript 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 werden zunächst einen Website-Header erstellen, gefolgt von der Navigationsleiste mit benutzerfreundlichen Drop-down-Menüs für jeden Navigationselement. Als Nächstes werden wir uns mit dem Abschnitt Dienste befassen , gefolgt vom Projektbereich mit einem dynamischen Filter für Projektkategorien Wenn Sie auf einen der Links klicken, werden die entsprechenden Projekte angezeigt In Zukunft werden wir einen Vorlagenbereich entwickeln , der aus zwei Teilen besteht. Der erste Teil ist hier sichtbar und der zweite Teil wird mit einem Klick auf eine Play-Schaltfläche zum Leben erweckt. Der Videoplayer ist voll funktionsfähig. Es bietet Kontrolle über die Lautstärke der Wiedergabe. Sie können vorwärts und rückwärts springen. Wir können auch die Geschwindigkeit wählen. Außerdem finden Sie hier den Bild-im-Bild-Modus und die Wiedergabe im Vollbildmodus. Nach dem Vorlagenbereich werden wir einen Kontaktbereich erstellen , auf den eine Fußzeile folgt , um die Website abzuschließen Wie gesagt, unsere Website ist mehrseitig und Sie können zu verschiedenen Seiten navigieren, indem Sie auf die Links in der Navigationsleiste Sie werden eine Kundenseite mit Kundenreferenzen entdecken mit Kundenreferenzen Dann werden wir eine Projektseite mit einem ansprechenden Wat haben mit einem ansprechenden Wat Dann wird die nächste Seite eine Kontaktseite sein , die mit Formularen und Chat-Optionen ausgestattet ist . Außerdem haben wir hier eine Kontoseite zum Einloggen und schließlich eine Preisseite. Wie ich bereits erwähnt habe, reagiert die Website auf verschiedene Bildschirmgrößen. 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 und ziemlich gut aussieht Ordnung, 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 extra große Bildschirme mit einer Auflösung von 1920 Pixeln und einer Höhe von 1080 Pixeln Wenn Sie einen kleineren Bildschirm verwenden, empfehle ich, während der Vorlesungen in den responsiven Modus zu wechseln und die Breite und Höhe entsprechend festzulegen. Dadurch wird sichergestellt, dass das Projekt auf kleineren Bildschirmen optimal aussieht , bis wir es vollständig responsiv gemacht haben. Okay, ich hoffe, Sie werden genauso viel Spaß daran haben, an diesem Projekt zu arbeiten wie ich. Lassen Sie uns ohne weitere Umschweife loslegen. 2. SET-UP: Hallo und willkommen zum Kurs. Wir freuen uns , dass Sie hier sind, und wir sind zuversichtlich, dass Sie diesen Kurs angenehm finden werden. Bevor wir uns mit unserem Projekt befassen, bereiten wir zunächst unser Arbeitsumfeld vor. Wenn Sie bereits eingerichtet und bereit sind, Code zu schreiben, können Sie dieses Video überspringen und direkt mit dem Projekt beginnen. Wenn Sie jedoch noch nicht vorbereitet sind , ist das völlig in Ordnung. werden wir Sie durch die Einrichtung einiger wichtiger Tools führen diesem Kurs werden wir Sie durch die Einrichtung einiger wichtiger Tools führen. Es gibt zwei Haupttools, die Sie benötigen einen modernen Webbrowser und einen Texteditor. Für unseren Webbrowser werde ich Google Chrome verwenden, aber ich empfehle auch Mozilla, Firefox. Sie haben diese Browser wahrscheinlich schon, aber lassen Sie uns kurz durchgehen, wie Sie sie herunterladen können Falls Sie Google Chrome verwenden möchten, besuchen Sie einfach diese URL und laden Sie den Browser herunter. Der Installationsvorgang ist unkompliziert, sodass wir nicht viel Zeit damit verbringen werden. Für Mozilla, Firefox, können Sie es über diese URL abrufen. Beide Links werden dieser Vorlesung der Einfachheit halber beigefügt . In Ordnung, lassen Sie uns jetzt über den Texteditor sprechen. Wir werden Visual Studio Code verwenden , einen der besten Texteditoren, die heute verfügbar sind. Sie können jedoch gerne Ihren bevorzugten Texteditor verwenden , falls Sie einen haben. Es liegt immer noch ganz bei Ihnen. Ich empfehle, Visual Studio-Code eine zu geben. Versuchen Sie, Visual Studio-Code herunterzuladen Besuchen Sie diese Website und wählen Sie die Version für Ihr Betriebssystem, Windows, Mac oder Linux. Der Installationsvorgang für Visual Studio-Code ist ebenfalls unkompliziert. Sie sollten keine Probleme haben. Sobald Sie diese beiden Tools installiert haben, können Sie mit dem Kurs beginnen. Lass uns gleich eintauchen. 3. Erste Schritte: Hallo und willkommen in unserem neuen Bereich , in dem wir mit der Erstellung unseres Projekts beginnen werden. Ich habe einen neuen Ordner auf dem Desktop erstellt. Es heißt Responsive Website. Wenn ich es öffne, findest du hier zwei verschiedene Ordner. Das erste sind Bilder, in denen ich all die verschiedenen Bilder habe , die wir während des gesamten Projekts verwenden werden. Der zweite Ordner heißt Videos. Ich habe hier ein einziges Video. Okay, lassen Sie uns weitermachen und diesen Ordner im VS-Code öffnen. Neben diesen beiden Ordnern werde ich auch andere Ordner erstellen. Wie Sie wissen, ist unser Projekt eine mehrseitige Website, sodass wir ein paar verschiedene HTM- und CSS- und JAS-Dateien haben werden verschiedene HTM- und CSS- und JAS-Dateien Ich werde sie in separaten Ordnern speichern. Der erste Ordner wird sein, eigentlich brauchen wir hier den Ordner und die Datei. Der erste Ordner wird HTML sein, in dem ich eine Indexpunkt-HTML-Datei erstellen werde. Dann wird der nächste Ordner sein, eigentlich müssen wir ihn außerhalb des HTML-Ordners erstellen. Der zweite Ordner wird CSS sein. Ich werde hier eine SS-Datei im Stil erstellen. Als Nächstes müssen wir einen Ordner für das V-Skript erstellen , in den ich die Skriptdatei einfügen werde. Ordnung, lassen Sie uns eine HTML-Datei öffnen und das grundlegende HTML-Dokument erstellen. Dafür verwende ich ein integriertes Paket mit dem VS-Code. Es heißt Amet. Wenn ich ein Ausrufezeichen einfüge und die Eingabetaste drücke, erhalten wir hier die grundlegende Das erste, was ich hier tun werde, ist, den Titel anstelle des Dokuments zu ändern den Titel anstelle des Dokuments Ich werde eine responsive Website einfügen. Als Nächstes werde ich CSS- und Jovscp-Dateien verknüpfen Dafür müssen wir das Link-Tag im Head-Element öffnen. Dann müssen wir im H-Referenzattribut den Pfad der Datei angeben. Zunächst müssen wir den aktuellen Ordner verlassen , der HTML ist. Dafür werde ich zwei Punkte einfügen. Dann weiter, jetzt können wir den benötigten Ordner auswählen. Es wird CSS sein und dann brauchen wir den Stil SS. In Ordnung, genauso werde ich die Jovsc-Datei verlinken. Zuallererst müssen wir das Script-Tag direkt über dem schließenden Body-Tag öffnen Script-Tag direkt über dem schließenden Body-Tag Dann füge ich Ihr Quellattribut ein , in dem wir den Teil der Datei angeben müssen. Auch hier müssen wir den aktuellen Ordner verlassen. Wir brauchen hier zwei Punkte, gefolgt vom Vorwärts. Dann müssen wir JS-Ordner und dann das Skript oder die JS-Datei auswählen. In Ordnung, alle drei Dateien sind miteinander verbunden. Jetzt öffne ich den Ordner im Browser mit Live-Server. Wie Sie sehen können, läuft das Projekt im Browser. Wenn Sie mit dem Live-Server-Paket nicht vertraut sind, können Sie es tatsächlich mit dem Live-Server-Paket nicht vertraut sind, im VS-Code finden. Lassen Sie uns diese Nachrichten schließen. Sie können hier in den Paketen nach Live-Servern suchen. Sie können dieses Paket installieren und das Projekt im Browser ausführen. Wenn Sie das Live-Server-Paket verwenden und einige Änderungen und Aktualisierungen am Projekt vornehmen , müssen Sie die Seite nicht jedes Mal aktualisieren , wenn die Seite automatisch neu geladen wird und die Änderungen und Aktualisierungen Ihres Projekts ausgeführt Ordnung, als Nächstes werde ich den Editor und den Browser so nebeneinander platzieren den Editor und den Browser so nebeneinander Um unseren Arbeitsprozess komfortabler und einfacher zu gestalten , können Sie zwischen Browser und Editor wechseln. Als Nächstes werde ich also gesamten Projekts auch einige andere CDN-Links hinzufügen Wir werden das Telefon benutzen, ein paar Icons. Um sie verwenden zu können, müssen wir nach Telefonen suchen CDN JS Dann müssen wir den ersten Link von hier kopieren. Als Nächstes müssen wir das Link-Tag im Head-Element öffnen und den CDN-Link hier in das H-Referenzattribut einfügen den CDN-Link hier in das H-Referenzattribut Außerdem werde ich gesamten Projekts Google-Telefone verwenden Lassen Sie uns weitermachen und die Google Phones-Website besuchen. Ich werde hier nach Telefonen suchen. Das erste Telefon, das ich während des gesamten Projekts verwenden werde , wird Croson One sein Lassen Sie uns weitermachen und diesen Stil auswählen. Als Nächstes suche ich nach einem Telefon namens Uli. Ich weiß nicht, ob ich es richtig ausspreche, dieses Telefon. Wählen wir diesen Stil Das letzte Telefon, das ich benutze, wird Ta sein. Lassen Sie uns weitermachen und ein paar verschiedene Stile auswählen. Als Nächstes nehme ich diesen Link von hier und füge ihn in das Head-Element ein. In Ordnung, das ist es also. Unser Arbeitsumfeld ist vorbereitet und jetzt müssen wir damit beginnen, das HT-Markup dafür zu erstellen. Fahren wir mit der nächsten Vorlesung fort. 4. Header HTML: Erstelle die Markup-Struktur: Ordnung, in der vorherigen Vorlesung haben wir unsere Arbeitsumgebung vorbereitet Wir haben verschiedene Dateien und Ordner erstellt. Außerdem haben wir das grundlegende HTML-Dokument erstellt, in dem wir die Links für die Phonosomik, auch für die Google-Telefone, auch für die Jetzt ist es an der Zeit, mit der Erstellung des HTML-Markups für unseren ersten Abschnitt zu beginnen HTML-Markups für unseren ersten Abschnitt zu Wenn wir uns das fertige Projekt ansehen, sehen Sie hier den Header der Website mit der Navigation In dieser Vorlesung werden wir das HTML-Markup erstellen. Markup für das Banner und auch für die Hintergründe. Was die Navigation angeht, werden wir uns etwas später darum kümmern Lassen Sie uns weitermachen und mit der Erstellung des HTM-Markups beginnen . Eigentlich werde ich den Code ein bisschen vergrößern . Das erste, was ich tun werde, ist, die Kommentare für den Container zu erstellen , den wir hier brauchen , das Ende des Containers. Ich werde alle Abschnitte und Teile mit den Kommentaren voneinander trennen alle Abschnitte und . Lassen Sie uns das Tag mit dem Klassencontainer öffnen. Als Nächstes werden wir den Header erstellen. Aber vorher werde ich hier noch einmal die Kommentare für den Header einfügen . Lassen Sie uns hier das HTML-Five-Header-Tag einfügen. Als Nächstes müssen wir das Banner erstellen. Aber lassen Sie uns hier den Kommentar für das Banner einfügen , das wir hier benötigen. Ende des Banners. Öffnen wir das P-Tag mit dem Klassennamen-Banner. Das Banner wird drei verschiedene Dateien enthalten. Wir werden zwei Überschriften haben und auch die untere, die erste wird aus H-Ein-Überschriftenelementen mit dem Text Create bestehen Als Nächstes benötigen wir drei Überschriftenelemente. Der Text wird moderne und schöne Themen haben. Jetzt unten werde ich die Schaltfläche mit dem Link-Element umschließen denn am Ende des Tages, wenn wir auf die Schaltfläche klicken, müssen wir zu der anderen Seite wechseln. Wir brauchen ein Element. Im Moment mache ich das im Pfundzeichen. Dann lassen Sie uns den Typ der Schaltfläche erstellen , die Schaltfläche sein wird. Dann werde ich heute mitmachen. Stimmt, das ist, es geht um das Banner. Als Nächstes müssen wir uns um die Hintergründe kümmern. Ich werde Ihre Kommentare für die Hintergründe einfügen. Dann öffne ich das Tag mit den Hintergründen der Klassennamen. Insgesamt werden wir drei verschiedene Hintergründe haben. Der erste wird der Haupthintergrund sein. Ich werde Tag the BG Main öffnen. Lassen Sie uns diese Codezeile zweimal duplizieren. Ändern Sie die Klassennamen, die wir hier benötigen, G eins und dann G zwei. Ordnung, ich denke, das war's mit dem Tabellen-Markup der Kopfzeile. Lass uns einen Blick darauf werfen Wir haben hier nur drei Elemente, die sichtbar sind, die Überschriften und die Schaltfläche Diese Hintergründe sind nicht sichtbar, weil wir hier nur die leeren, tiefgründigen Elemente haben In Ordnung, jetzt ist es an der Zeit , diese Elemente zu stylen. Und dafür fahren wir mit der nächsten Vorlesung fort. 5. Standard-CSS-Stile erstellen: Okay, in der letzten Lektion haben wir das HTM-Markup für unseren ersten Abschnitt erstellt , der der Header der Website sein wird, dieser Teil der Website Jetzt müssen wir anfangen, etwas CSS zu schreiben. Ich werde die Style-CSS-Datei öffnen. Eigentlich werde ich die Datei auf der rechten Seite des Code-Editors platzieren . In diesem Fall sind beide Dateien sichtbar und es ist bequemer für uns. In dieser Vorlesung werden wir einige Standardstile erstellen , die für jedes Element verwendet werden , das wir hier benötigen. Ende der Standardstile, dann wähle ich jedes Element aus, und dafür müssen wir ein Sternchen verwenden In diesem Fall sind alle Elemente ausgewählt. Das erste, was ich tun werde, ist, den Standardrand und die Standardpolsterung der Elemente zu entfernen Standardrand und die Standardpolsterung der Elemente Wenn wir den Browser überprüfen, können Sie hier den Abstand zwischen den Elementen sehen Das bedeutet also, dass die Elemente einen gewissen Standardrand haben. Lassen Sie uns den Rand auf Null setzen. Außerdem werde ich die Polsterung ebenfalls auf Null setzen. Wenn wir nun die Elemente überprüfen, können Sie sehen, dass das Leerzeichen entfernt wurde Okay, als Nächstes stelle ich die Größe der Box auf die Rahmenbox ein. Tatsächlich ist das Rahmenfeld eine Möglichkeit, dem Webbrowser mitzuteilen, dass er die Größe der Elemente auf einer Webseite einfacher anpassen soll, wenn Sie die Innenhöhe eines Elements festlegen. Durch das Rahmenfeld bezieht der Browser den Rahmen und die Innenabstände in diese Maße Wenn Sie sagen, dass ein Element 100 Pixel breit sein sollte, schließen diese 100 Pixel den Rahmen und den Innenabstand mit ein, und der tatsächliche Inhalt innerhalb des Felds passt sich an diesen Raum Auf diese Weise können Sie die Größe eines Elements bequemer steuern eines Elements bequemer Okay, als Nächstes setze ich Dekoration auf N. In diesem Fall entfernen wir die Unterstreichungen aus den Links Als Nächstes verwende ich es und setze es ebenfalls auf Non. Mit diesem Code entfernen wir Standardkonturen von Elementen wie Eingaben oder Schaltflächen. Schließlich werde ich die Telefonfamilie für jedes Element festlegen. Wie Sie wissen, holen wir uns ein paar verschiedene Telefone von der Google Phones-Website. Ich werde eines der Telefone benutzen, nennen wir es Ut. Ordnung. Wie Sie sehen können, wird die Schriftart für jedes Element geändert. Danach werde ich die Schriftgröße des H mal-Elements auf 62,5% setzen . Dieser Code setzt die Schriftgröße für das gesamte HTML-Dokument auf 62,5% der Standardmäßig haben die meisten Browser eine Standardschriftgröße für Text, die normalerweise bei etwa 16 Pixeln liegt Wenn Sie die Telefongröße auf 62,5% einstellen, bedeutet dies, dass gesamte Text auf Ihrer Webseite 62,5% der Dies wird häufig als Optimierung im Webdesign verwendet. 62,5% von 16 Pixeln sind zehn Pixel, was eine nette runde Zahl ist Das macht es einfacher, mit relativen Einheiten wie M zu arbeiten . Wir werden gesamten Projekts Ram als Maßeinheit verwenden Aus diesem Grund habe ich die Schriftgröße des HTML-Codes auf 62,5% festgelegt . Wenn Sie beispielsweise für etwas eine Breite von zwei Ram festlegen, wird es 20 Pixel breit sein, da jeder Ram zehn Pixel groß ist Das macht es bequemer und einfacher, mit den Größen in Ihrem Webdesign zu arbeiten Wenn wir die Ergebnisse überprüfen, können Sie feststellen, dass die Elemente kleiner wurden. Das liegt an der Schriftgröße des HTML-Elements, die jetzt auf 62,5% eingestellt ist . Das ist alles mit den Standardstilen Fahren wir mit der nächsten Vorlesung fort. 6. Hintergründe im Header stylen: Ordnung, in der letzten Vorlesung haben wir angefangen, etwas CSS zu schreiben. Wir haben einige Standardstile erstellt, und jetzt müssen wir weitermachen und uns um den Header kümmern. Zunächst werde ich unsichere Kommentare für den Container erstellen dann den Container auswählen Lassen Sie uns weitermachen und innerhalb der Höhe definieren. Die Breite wird 100% betragen . Die Höhe wird ebenfalls 100% betragen. Außerdem werde ich die Hintergrundfarbe ändern. Lassen Sie uns die Hintergrundfarbe auf Weiß setzen. Im Moment hat sich hier nichts geändert. Lassen Sie uns als Nächstes weitermachen und uns um den Header kümmern. Ich werde Kommentare für den Header erstellen. Dann lass uns weitermachen und Header mit einem Tag-Namen auswählen. Ich werde mit Höhe definieren. Die Breite wird 100% betragen. Was die Höhe angeht , werde ich bis zur Höhe des Viewports 100 untersuchen Das bedeutet, dass der Header als Höhe 100% des Sichtfensters einnimmt als Höhe 100% des Sichtfensters einnimmt Ordnung, jetzt werde ich die Hintergründe stylen und dann machen wir weiter und kümmern uns um das Banner. Lass uns weitermachen und hier neue Kommentare für die Hintergründe einfügen . Dann wähle ich Entwicklungen innerhalb des Hintergrunds aus, also diese drei Entwicklungen, die wir hier benötigen, Hintergründe, gefolgt vom Selektor, und ich werde die Position für alle drei Entwicklungen auf absolut setzen alle drei Entwicklungen auf absolut Zuallererst müssen wir die Elemente positionieren In diesem Fall werde ich Elemente entsprechend den übergeordneten Elementen positionieren, was in diesem Fall der Header ist Um das Element entsprechend seinem übergeordneten Element zu positionieren , müssen wir dem übergeordneten Element eine Position zuweisen , jedoch mit einem relativen Wert. Danach wähle ich den ersten Hintergrund aus , in unserem Fall Background Main I Ground , den ihr hier seht, diesen. Lassen Sie uns weitermachen und den Hintergrundmittelwert auswählen. Zuallererst, wie innerhalb von Höhen definiert, werde ich 150% für die Höhen festlegen, es wird auch 150% sein In diesem Fall nimmt das Element 150% der Höhe seines übergeordneten In diesem Fall handelt es sich bei dem übergeordneten Element um Hintergründe. Aber wie Sie sehen können, gibt es bei Hintergründen keine Innenhöhe. Der Haupthintergrund nimmt 150% der Breite und Höhe des Header-Elements ein Im Moment haben wir hier die gleichen Ergebnisse. Nichts ist sichtbar, ich meine der Hintergrund. Jetzt stelle ich den Hintergrund mit linearer Verlaufsfunktion ein. Die Richtung wird nach rechts sein. Dann brauchen wir drei verschiedene Farben. Die erste ist eigentlich, dass wir hier zwei links und nicht zwei rechte brauchen. Die erste Farbe wird transparent sein. Dann brauchen wir die zweite Farbe, die lila sein wird. Die dunkle, wir brauchen hier 4400 Pi. Außerdem brauchen wir hier die zweite Farbe, sie wird wieder lila sein Aber den helleren werde ich hier 4400b verwenden Lassen Sie mich hier erklären, was dieser Code macht. Wie Sie sehen können, erstellt dieser Code einen Hintergrund für den Header. Es verwendet einen Farbverlauf, der auf der linken Seite beginnt und von transparent über dunkelviolett bis hin zu etwas hellerem Violett reicht . Es verleiht dem Hintergrund einen sanften Farbübergang von links nach rechts, von dunkelviolett zu hellerem Violett und dann transparent. Ordnung, als Nächstes setze ich die Position der Elemente auf -95%. Außerdem werde ich die linke Position definieren, sie wird -95%. Außerdem werde ich die linke Position definieren, -10% sein. Lassen Sie uns im Browser nachschauen Das Element ist positioniert und jetzt müssen wir dieses Element mithilfe der Transform-Eigenschaft drehen Ich werde hier zwei Funktionen verwenden, Rotate Z und Skew X. Ich werde jede Funktion einzeln erklären Die Funktion „Z drehen“ wird den Wert -15 Grad haben. Außerdem benötigen wir hier eine Schrägstellung von x mit dem Wert 30 Grad. Die erste Funktion, ich meine die Funktion „Z drehen“, lässt ein Element auf der Webseite um 15 Grad gegen den Uhrzeigersinn drehen oder kippen Dadurch wird das Element leicht nach links geneigt, als ob Sie einen Bilderrahmen leicht zur Seite drehen Bei der zweiten Funktion skew x wird ein Element auf einer Webseite um 30 Grad nach rechts geneigt oder geneigt Es ist, als würde man das Element zur Seite neigen, sodass es wie ein paralleler Boden aussieht Wie Sie sehen können, haben wir hier solche Ergebnisse. Jetzt müssen wir die Ecke des Hintergrunds abrunden, und dafür verwende ich Eigenschaft namens Radius, sie wird vier verschiedene Werte haben. Die ersten drei Werte sind ebenfalls Null. Der letzte Wert, der die untere linke Ecke des Elements angibt , wird zehn m lang sein. Nun, wie Sie sehen können, ist die Ecke des Elements abgerundet. Abschließend werde ich die Opazität etwas verringern. Sagen wir 2.9 In Ordnung. Wie Sie sehen können, haben wir hier eine Scrollleiste. Eigentlich brauchen wir sie nicht. Um die Bildlaufleiste loszuwerden, weise ich der Container-Eigenschaft overflow hidden zu , wir die Bildlaufleiste ausblenden können Okay, also alles sieht gut aus. Als Nächstes werde ich mich um den zweiten Hintergrund kümmern, ich meine den Hintergrund. Dieser, der unter dem Haupthintergrund platziert ist. Lassen Sie uns weitermachen und einen Hintergrund auswählen. Definiere innerhalb von Höhen. In diesem Fall werde ich auf 50% setzen , dann wird die Höhe auf 100% eingestellt. Auch hier verwende ich einen Hintergrund mit linearer Verlaufsfunktion. In diesem Fall benötigen wir hier die Standardrichtung. Ich werde hier nicht zwei links oder zwei rechts oder so einfügen . Die erste Farbe wird transparent sein. Dann füge ich hier den Prozentwert , den ich sehr bald erläutern werde. Fügen wir hier die zweite Farbe ein. Es wird F 26 C sein . Dann brauchen wir hier die dritte Farbe. Es wird F724b sein. Hier gibt der Prozentwert, ich meine 60%, die Position an, an der der Farbübergang innerhalb des linearen Gradienten stattfindet Einfach ausgedrückt bedeutet dies, dass der Hintergrund zunächst transparent ist und dann zur ersten Farbe wechselt, dann zur ersten Farbe wechselt wenn 60% des Farbverlaufs abgeschlossen sind, und für die restlichen 40% des Farbverlaufs zur zweiten Farbe In diesem Code sind 60% des Farbverlaufs transparent und dann geht er sanft zur ersten Farbe über, wodurch ein gleichmäßiger Farbübergang auf dem Hintergrund Okay, kümmern wir uns um die Position. Ich werde die Position auf -40% einstellen . Außerdem brauchen wir die richtige Position Es wird bei -10% liegen, dass das Element positioniert ist. Ich schätze mal, wir müssen es drehen wie den ersten Hintergrund, den ich verwenden werde Eigentlich brauchen wir hier dieselben Eigenschaften und Werte. Lass uns diesen Code kopieren und hier einfügen. Der Hintergrund ist gedreht und sieht gut aus. Lassen Sie uns in diesem Fall die Ecke des Hintergrunds mithilfe eines Randradius abrunden . Wir brauchen hier 000.5 Lauf. Der Hintergrund sieht ziemlich nett aus, aber wir haben hier ein kleines Problem Wir müssen diesen Hintergrund unter dem Haupthintergrund platzieren . Dafür verwende ich die Z-Index-Eigenschaft. Standardmäßig hat jedes Element eine Z-Indexeigenschaft mit dem Wert Null. Aber wenn wir hier einen Index mit dem Wert hinzufügen, sagen wir einen, der größer als Null ist, dann wird der Hintergrund hinter mir unter dem Hintergrund in landen . Okay, was den zweiten Hintergrund angeht, müssen wir uns jetzt um den dritten Hintergrund kümmern , der in unserem Fall Hintergrund zwei ist. Eigentlich denke ich, dass es besser ist, wenn wir diesen Code hier duplizieren. Lass uns den Klassennamen ändern. Die Breite und Höhe werden ähnlich sein, 50% und 100%. Was den linearen Farbverlauf angeht, werde ich ihn leicht ändern. Wir brauchen hier 70% Außerdem brauchen wir hier verschiedene Farben. Die zweite Farbe wird eine 5995 sein. Was die dritte Farbe angeht, werde ich das Institut E einsetzen. Dann brauchen wir hier Was die Positionen angeht, werde ich zwei Positionen auf 60% setzen . Die richtige Position wird 10% sein. Wir benötigen hier dieselbe Transformationseigenschaft. Der Grenzradius wird wieder derselbe sein. Lassen Sie uns jetzt die Ergebnisse überprüfen. Wie Sie sehen können, landete der Hintergrund hinter dem Haupthintergrund. Um das zu beheben, benötigen wir erneut die Z-Index-Eigenschaft. In diesem Fall sollte der Wert der Z-Indexeigenschaft jedoch sollte der Wert der Z-Indexeigenschaft größer als der Wert der Z-Indexeigenschaft sein. Setzen wir es auf zwei. Jetzt sollte der Hintergrund sichtbar sein, und ja, er ist sichtbar. Das einzige, was ich tun werde , ist Opazität hinzuzufügen. Ich möchte die Deckkraft verringern 2.4 Außerdem werde ich dem Hintergrund einige Schatteneffekte hinzufügen, die wir hier benötigen Box-Schatten mit den Werten sieben und vier Ram. Die sechs Ram, und die Farbe wird RGBA 000 und die Opazität 0,9 sein . Dieser Code fügt einem Element auf der Webseite einen Schatten Lassen Sie mich erklären, was diese Werte bewirken. Die erste Zahl sieben Ram bestimmt, wie weit der Schatten horizontal vom Element entfernt ist. Der zweite Wert, vier Ram, bestimmt, wie weit der Schatten vertikal vom Element entfernt ist. Die dritte Zahl, sechs Ram , bestimmt die Größe oder den Balken des Schattens. Was die Farbe betrifft, so gibt sie die Farbe des Schattens an. In diesem Fall ist es ein sehr dunkler, fast schwarzer Schatten, weil wir hier drei Nullen haben, was auf die schwarze Farbe hinweist Aber wir haben hier die Opazität 0,9, wodurch die dunkelschwarze Farbe etwas Irgendwann haben wir hier diesen schönen und coolen Schatteneffekt In Ordnung, das gehört eigentlich zu den Hintergründen. Ich werde hier aufhören und zur nächsten Vorlesung übergehen, in der wir das Banner des Headers gestalten werden. 7. Banner im Header entwerfen: Ordnung, in der letzten Vorlesung haben wir die Hintergründe der Kopfzeile gestaltet Wie Sie sehen können, haben wir hier drei verschiedene Hintergründe, die positioniert sind und ziemlich gut aussehen Jetzt müssen wir uns um das Banner kümmern, das sich gerade in der oberen linken Ecke der Seite befindet. Eigentlich ist es hinter dem Hintergrund platziert. Maine. Lass uns weitermachen und neue Commons für das Banner einfügen. Dann wähle ich Banner aus und definiere seine Position, die absolut sein wird. Wie Sie wissen, benötigen wir, wenn wir Position Absolute verwenden, Position Relative für das übergeordnete Element. Wie Sie sehen können, hat Header Lady die Position Relative. Als Nächstes setze ich die beiden Positionen auf 18%. Dann haben wir hier die linke Position. Es wird 20% sein. Wie Sie sehen können, das Banner seine Position geändert. Es befindet sich unter dem Haupthintergrund. Also müssen wir das mit der Index-Eigenschaft beheben. Ich werde den Index 24 setzen. Wie ich jetzt sehen kann, ist das Problem behoben. Ordnung, jetzt ist es an der Zeit, jedes der Elemente separat anzupassen. Ich fange mit dem ersten Überschriftenelement an, das H eins ist. Lassen Sie uns also fortfahren und Banner auswählen, gefolgt vom Element H mit einer Überschrift. Zuallererst werde ich die Telefonfamilie ändern. In diesem Fall benutzen wir das Telefon Mull. Es wird kursiv sein. Dann werde ich das Telefon vergrößern, es auf 13 Ram machen Lass uns den Browser überprüfen. Die Telefongröße wurde geändert, und wir haben hier auch eine andere Telefonfamilie. Als nächstes werde ich die Farbe ändern, sie wird weiß sein. Ich werde hier einen Schatteneffekt hinzufügen. In diesem Fall verwenden wir Textschatten. Es funktioniert auf ähnliche Weise wie der Boxschatten. Ich werde die Werte 01 Ram interferieren, dann haben wir drei Ram. Was die Farbe angeht, die ich verwenden werde , ist Schwarz, aber in diesem Fall mit einer geringeren Deckkraft, oder es wird 0,3 sein. Wie Sie sehen können, sieht der Header ziemlich gut aus Als Nächstes gehe ich auf das zweite Überschriftenelement zurück, das drei ist Lassen Sie uns fortfahren und Bender auswählen, gefolgt von den drei Überschriftenelementen H. Ich werde die Schriftgröße ändern, in diesem Fall werden es drei Ram sein. Dann werde ich die Schriftstärke ändern. Lassen Sie uns die Schriftstärken verringern und sie auf 300 setzen. Dann werde ich Text in Großbuchstaben umwandeln. Jetzt werde ich die Farbe der Überschrift ändern. Es wird weiß sein. Benutze wieder Tech Shadow. Nehmen wir diese Codezeile. Das einzige, was ich hier tun werde, ist die Opazität zu verringern Es wird 0,1 sein. Schließlich werde ich mit Margin etwas Platz schaffen Der Rand oben wird Null sein. Dann haben wir Null auf der rechten Seite. Als nächstes haben wir den Boden, es werden drei Ram sein. Was die linke Seite angeht, werde ich sie auf einen Ram einstellen. Ordnung, das war's, mit der zweiten Überschrift. Jetzt ist es an der Zeit, die Unterseite anzupassen. Lassen Sie uns fortfahren und Banner gefolgt von der Schaltfläche auswählen. Zuallererst werde ich mit der Höhe festlegen. Lass uns mit 215 Ram beginnen. Dann wird die Höhe fünf Gramm betragen. Außerdem werde ich den Hintergrund ändern. Lassen Sie uns wieder lineare Farbverläufe verwenden. Die Richtung des Farbübergangs wird zwei sein, oder? Dann brauchen wir hier die erste Farbe, die A drei EC sein wird , es ist eine violette Farbe. Dann brauchen wir noch eine lila Farbe, die 84 sein wird, dann 30. Es ist wieder eine lila Farbe, aber die dunklere. Schauen wir uns den Button an, den wir hier haben. Schöner und cooler Hintergrund mit Farbverlauf. Als Nächstes werde ich den Standardrahmen loswerden. Lassen Sie uns den Wert auf „Keine“ setzen, da ich die Schaltfläche mithilfe des Rahmenradius abrunden werde . Lassen Sie uns es an den Ram senden und den Browser Schritt für Schritt oder Button überprüfen . Sieht toll aus. Als Nächstes stelle ich die Telefongröße auf 1,6 Ram ein. Außerdem werde ich das Gewicht des Telefons erhöhen. Dann lassen Sie uns Text in Großbuchstaben umwandeln. Der Text sieht ziemlich gut aus, aber wir müssen ihm etwas mehr Stil hinzufügen. Wir müssen mithilfe des Buchstabenabstands einen gewissen Abstand zwischen den Buchstaben schaffen . Es wird 0,1 RAM sein und auch die Farbe ändern. Wir brauchen hellere Farben. Ich werde die Farbe auf Weiß setzen. Jetzt sieht der Button ziemlich nett und cool aus. Als Nächstes füge ich dem Element einen Schatteneffekt hinzu, indem ich Pox Shadow mit dem Wert 01 Ram, Three Ram Und die Farbe wird RTB A mit der geringeren Opazität 0,1 sein . Wie Sie sehen können, hat die Schaltfläche den Schatteneffekt Dann werde ich mit dem linken Rand etwas Platz auf der linken Seite schaffen mit dem linken Rand etwas Platz auf der linken Seite Es wird eine Rampe sein. Und ändern Sie auch den Typ des Cursors, machen Sie ihn zum Zeiger. Okay, bevor wir diese Vorlesung beenden, möchte ich unserer Schaltfläche noch etwas hinzufügen. Ich werde einen Hover-Effekt erzeugen. Sobald wir den Mauszeiger über die Schaltfläche bewegen, müssen wir sie mit der Transform Translate Funktion nach oben bewegen Lassen Sie uns fortfahren und Banner auswählen, gefolgt von der Schaltfläche. Und wir brauchen hier Pseudoklassen-Hover. Lassen Sie uns die Funktion transform translate y verwenden. Sie ermöglicht es uns, die Elemente entsprechend der Y-Achse zu bewegen. Ich meine vertikal. Ich werde hier einen negativen Wert hinzufügen. Es wird -0,2 Ram sein. Wenn ich im Browser nachschaue, wie Sie sehen können, , sobald wir den Mauszeiger über die Schaltfläche oben, sobald wir den Mauszeiger über die Schaltfläche bewegen Lassen Sie uns diesen Effekt mithilfe von Transition sanfter gestalten. Ich werde hier eine Transformation hinzufügen. Und die Dauer des Effekts wird 0,3 Sekunden betragen. Wenn ich jetzt mit der Maus über die Schaltfläche fahre, erhalten wir diesen schönen und coolen Effekt Also gut, das gehört eigentlich zu dem Banner. Als Nächstes kümmern wir uns um die Navigation, das Logo und die Of-Leiste, diese Navigationselemente mit ihren Drop-down-Menüs Lass uns weitermachen und uns darum kümmern. 8. Das HTML-Markup der Navigation erstellen: Hallo und willkommen in Ihrem neuen Bereich, in dem wir eine Navigationsleiste für unser Projekt erstellen werden eine Navigationsleiste für unser Projekt erstellen Im letzten Abschnitt haben wir den Header der Website erstellt , der aus einem Banner besteht. Es befindet sich auf der linken Seite der Seite. Außerdem haben wir hier drei verschiedene Hintergründe, die meiner Meinung nach ziemlich gut aussehen. Schauen wir uns das fertige Projekt an. Die Navigationsleiste wird aus einem Logo bestehen. Es befindet sich in der oberen linken Ecke der Seite. Außerdem werden wir die Navigationselemente haben , die horizontal in einer Reihe angeordnet sind. Jedes Navigationselement hat ein Drop-down-Menü, mit Ausnahme der Schaltfläche. In dieser Vorlesung werden wir HTML-Markup für das Logo und auch für die Navigationselemente erstellen HTML-Markup für das Logo und auch für die Navigationselemente Was die Dropdowns angeht, werden wir uns etwas später darum kümmern Okay, lassen Sie uns weitermachen und den VS-Code öffnen und mit der Erstellung des HTML-Markups beginnen Zuallererst werde ich hier Kommentare für die Navigation einfügen hier Kommentare für die Navigation Dann öffne ich HTML Five Novelment mit dem Klassennamen Offer Als Nächstes müssen wir das Logo erstellen. Zuerst werde ich die Kommentare für das Logo einfügen. Dann öffne ich den Link Elements. Wir verwenden hier das Link-Element, denn wenn wir auf das Logo klicken, müssen wir zur Hauptseite, dem Index-HTML, wechseln. Wenn ich zu einer der Seiten hier gehe und dann auf das Logo klicke, sollten wir zur Hauptseite I zurückkehren, dem Index der HTM-Datei Im H-Referenzattribut werde ich den Index HTML angeben Dann brauchen wir hier die Entwicklung mit dem Klassenlogo. Das Logo wird aus ein paar verschiedenen Span-Elementen bestehen . Lassen Sie uns das Span-Tag öffnen und Code einfügen. Und dann brauchen wir wieder Span-Elemente mit dem Text Create. Als Nächstes öffne ich ein weiteres Span-Tag. Ich werde Ihre Vorlagen einfügen. Okay, das war's, mit dem Logo. Als Nächstes müssen wir die Navigationselemente erstellen. Ich werde Ihre Kommentare für Artikel einfügen. Und dann öffne ich eine Liste mit allen Elementen mit dem Klassennamen, keine Elemente. Die Liste wird aus sechs verschiedenen Listenelementen bestehen. Wir benötigen hier LI-Elemente und es wird die Klasse No Item haben. Dann öffne ich innerhalb des LI-Elements den Link wie das Logo, wir müssen hier die Namen der Seiten angeben. Zuerst bin ich hier im Kurs, es wird kein Link sein und dann wird das erste Objekt zu Hause sein. Sobald wir auf den ersten Artikel geklickt haben, sollten wir zur Hauptseite zurückkehren. Ich meine den Index der HTML-Datei. Schauen wir uns die fertige Version an. Wenn ich auf eine der Seiten gehe und dann auf Home klicke, kehren wir zur Hauptseite zurück. Ich gehe wieder zum Institut und indiziere HTML insgesamt. Wir werden sechs verschiedene Listenelemente haben. Deshalb werde ich das LI-Element fünfmal duplizieren und dann die Elemente ändern. Der zweite Punkt werden Kunden sein. Wir müssen den Namen der HTML-Datei ändern. Eigentlich sind diese Dateien noch nicht erstellt. Wir werden uns in den kommenden Abschnitten um sie kümmern. In diesem Fall gebe ich nur die Namen der HTML-Dateien an. Wir werden sie später erstellen. Okay, der dritte Artikel werden Produkte sein. Ändern Sie die HTML-Datei . Als Nächstes müssen wir die Produkte hören. Wir nehmen Kontakt auf, dann werde ich Ihre Konten aufrufen. Schließlich müssen wir die Preisgestaltung hören. Wie gesagt, es wird ein Button sein und nicht der Link. Ich werde den Klassennamen, den wir hier brauchen, jetzt ändern, PTN. Ändern Sie auch den Namen der HL-Datei. Es wird die Preisgestaltung für HTML festlegen. Ordnung. Ich denke, das war's mit dem HTML-Markup Schauen wir uns die Projekte an. Wie Sie sehen können, befinden sich die Navigationselemente und auch das Logo hinter dem Hintergrund. Und auch das Layout der Hintergründe wurde leicht verändert. Wir müssen uns um sie kümmern und diese Probleme lösen. Lassen Sie uns weitermachen und mit der nächsten Vorlesung fortfahren. 9. Entwerfen des Logos der Website: Ordnung, in der letzten Vorlesung haben wir das HDML-Markup für die Navigationsleiste unseres Projekts erstellt das HDML-Markup für die Navigationsleiste unseres Projekts Und jetzt ist es an der Zeit, dieses Element zu stylen. In dieser Vorlesung werden wir das Logo gestalten. Gehen wir zurück zur CSS-Datei und beginnen, den CSS-Code zu schreiben. Wir müssen hier neue Kommentare für die Navigation hinzufügen. Ich werde Nav-Elemente auswählen, die einen Klassennamen haben. Nein, zunächst werde ich seine Position definieren. Es wird repariert werden. Außerdem müssen wir die oberen und linken Eigenschaften definieren. Beide werden jetzt Null sein, hier hat sich nichts geändert. Wie Sie sehen können, befinden sich die Elemente der Navigation hinter dem Hintergrund, und das müssen wir beheben. Um dieses Problem zu beheben, müssen wir eine Index-Eigenschaft verwenden und ich werde ihr einen höheren Wert zuweisen. Sagen wir zehn. Wie Sie jetzt sehen können, werden Elemente nicht mehr hinter dem Hintergrund platziert. Als Nächstes stelle ich die Breite und Höhe der Navigation, die mit definiert ist, auf 100% fest. Was die Höhe angeht, setze ich sie auf 12 Ram. Außerdem werde ich hier eine temporäre Hintergrundfarbe hinzufügen , um besser sehen zu können, wo sich die Navigationsleiste befindet. Lassen Sie uns die Farbe einstellen. Sagen wir hellgrau. Es wird CC sein. Hier machen wir unser Nickerchen. Es befindet sich oben auf der Webseite. Als Nächstes werde ich mithilfe von Padding etwas Platz schaffen. Die Polsterung oben und unten wird Null sein. Was die linke Seite und die rechte Seite betrifft, werde ich sie schnell auf 15 einstellen Wie Sie sehen können, haben wir hier etwas Platz auf der linken und rechten Seite. Als Nächstes verwende ich die Flexbox, um die Elemente auszurichten. Wie Sie jetzt wissen, besteht ein Teil aus zwei verschiedenen Teilen. Wir haben das Logo und die Navigationselemente. Wir müssen beide Elemente horizontal auf der linken und rechten Seite in einer Reihe platzieren . Dafür müssen wir Display Flex verwenden. Wie Sie sehen können, sind das Logo und die Navigationselemente nebeneinander angeordnet. Um sie auf der linken und rechten Seite zu platzieren, verwende ich justify content mit dem Werteabstand dazwischen. Wie Sie sehen können, befindet sich das Logo jetzt auf der linken Seite. Die Navigationselemente befinden sich auf der rechten Seite der Nr. Okay. Als Nächstes platziere ich Elemente, ich meine, die Elemente der Navigationsleiste vertikal in der Mitte. Und dafür verwende ich eine weitere Eigenschaft von CSS, Flexbox, und sie heißt Align Items Und ich werde es in die Mitte stellen. Jetzt werden die Elemente vertikal in der Mitte platziert. In Ordnung, das war's jetzt mit der Jetzt-Leiste. Als Nächstes werde ich mich um das Logo kümmern. Wir müssen neue Kommentare für das Logo eintragen. Dann wähle ich Developments mit dem Klassennamen-Logo aus Auch hier werde ich Flex-Bücher verwenden, um die Elemente auszurichten. Lassen Sie uns die Anzeige auf Flex setzen. In diesem Fall werde ich die Elemente vertikal übereinander platzieren . Dafür müssen wir die Richtung von Flex Book ändern und es wird eine Spalte sein. Wie Sie jetzt sehen können, sind die Elemente vertikal angeordnet. Als Nächstes wähle ich das erste Span-Element im Logo aus. Ich meine diesen. Dafür brauchen wir hier ein Logo. Dann Span-Elemente. Jetzt müssen wir eine der Pseudoklassen namens nth child selector verwenden namens nth child Hier müssen wir die Nummer angeben. Wie gesagt, wir müssen das erste Span-Element auswählen. Deshalb setze ich dir einen. Zuallererst werde ich die Telefonfamilie ändern. Lass uns das Telefon benutzen, das Maulwürfe heißt. Lassen Sie uns auch die Telefongröße erhöhen. Ich werde es auf drei Ram einstellen. Schauen wir uns hier die ersten Span-Elemente an. Lass uns die Schriftstärke ändern. Ich werde es fett machen. Lassen Sie uns Text in Großbuchstaben umwandeln und die Farbe ändern. Ich werde weiße Farbe verwenden. Hier haben wir das erste Span-Element des Logos. Lassen Sie uns eigentlich weitermachen und diesen temporären Hintergrund loswerden. Ich denke, wir brauchen es jetzt nicht mehr. Das Logo sieht viel besser aus. Als Nächstes wähle ich das Span-Element aus, das innerhalb des ersten Fensterelements platziert wird. Dieses ist das Element, das der Text erstellt. Dafür benötigen wir zuerst das Logo, gefolgt vom Span-Element mit der Diagrammauswahl Und dann brauchen wir wieder das Span-Element. Lass uns die Telefongröße ändern. Es wird 1,8 Ram sein. Die Größe dieses Teils, dieses Pan-Elements, wurde geändert, jetzt wird der Text kleiner. Wir müssen das Element wie der Text hier nach oben verschieben. Dafür werde ich Transform verwenden. Mit der Funktion Translate Y wird das Element entsprechend der Y-Achse bewegt. Ich meine, es bewegt das Element vertikal. Um das Element nach oben zu bewegen, müssen wir einen negativen Wert verwenden. In diesem Fall wird es 0,8 sein. Wie Sie sehen können, das Element nicht nach oben bewegt. Das Problem ist, dass Spanelon ein Inline-Element ist. Und sobald Sie das Inline-Element haben, wird die Transformationseigenschaft nicht angewendet Wir müssen also Elemente von einem Inline-Block in einen Inline-Block umwandeln von einem Inline-Block in einen , um die Transformationseigenschaft anzuwenden. Jetzt sollte das Problem behoben sein. Ordnung, wie Sie sehen können, ist das Element platziert und die Transformationseigenschaft funktioniert einwandfrei. Als Nächstes wähle ich das zweite Span-Element aus. Ich meine, mit dieser Vorlage wir diesen Selektor tatsächlich von hier kopieren Und ändere den Ni-Selektor. Wir brauchen zwei. Lass uns die Schriftfamilie ändern. Es wird Croson One Cosi sein. Dann brauchen wir die Schriftgröße, sie wird 1,5 Rams sein Ich werde die Farbe ändern. Fügen wir es zu DDT hinzu , einer hellgrauen Farbe Hier haben wir das zweite Spanlement. Als Nächstes werde ich mithilfe des Buchstabenabstands etwas Abstand zwischen den Buchstaben schaffen , und das wird 0,1 Ram sein Außerdem werde ich die Elemente auf der rechten Seite platzieren. Und dafür verwenden wir die Linieneigenschaft mit dem Wert, richtig, der Text wird auf der rechten Seite platziert. Aber das ist eigentlich nicht das, was wir hier brauchen. Wenn wir uns die fertige Version ansehen, sehen Sie, dass das zweite Spin-Element schön auf der rechten Seite platziert ist. Wir müssen es leicht nach rechts und auch wieder nach oben bewegen , ich werde die Transform-Eigenschaft verwenden. Wir müssen hier die Funktion als die Werte übersetzen , an die ich hier übergeben werde. 0,2 Ram, hier auch Zeile, minus ein Ram. Der erste Wert, 2,2 Ram, verschiebt das Element horizontal um 22 Pixel nach rechts. Beim zweiten Wert minus einem Ram wird das Element vertikal um zehn Pixel nach oben verschoben. Das negative Vorzeichen, im Fall der Richtung, ist nach oben. Was die positiven Werte anbelangt, würden sie es nach unten verschieben Jetzt haben wir hier das gleiche Problem. Weisen wir dem zweiten Element auch den Display-Inline-Block zu. Wie Sie sehen können, ist das Problem jetzt behoben. Wir haben hier schöne und coole Ergebnisse. Abschließend möchte ich dem Logo einen kleinen Schatteneffekt hinzufügen. Ich meine die Span-Elemente. Lassen Sie uns weitermachen und alle Span-Elemente in der Schatteneigenschaft des Logotextes mit den Werten 0,5 Ram, ein Ram auswählen Schatteneigenschaft des Logotextes . Dann wird die Farbe RGBA sein, schwarze Farbe mit geringerer Opazität, und sie wird 0,2 sein. In Ordnung, hier haben wir also das Logo Mit dem Logo sieht es ziemlich gut aus. Wir sind jetzt fertig, es ist Zeit, weiterzumachen und die Navigationselemente anzupassen. Machen wir weiter und machen das in der nächsten Vorlesung. 10. Styling-Navigationselemente: Ordnung, in der letzten Vorlesung haben wir das Logo der Website entworfen. Jetzt ist es an der Zeit, weiterzumachen und die Navigationsleiste weiter zu gestalten. In dieser Vorlesung werde ich die Navigationselemente gestalten. Gehen wir zum VS-Code. Bevor wir mit der Gestaltung der Navigationselemente beginnen, möchte ich die Navigation zunächst mit der Gestaltung der Navigationselemente beginnen, nach oben verschieben. Ich meine außerhalb der Kopfzeile. Lassen Sie uns den Code von hier ausschneiden und hier einfügen. Okay, nach dem Logo werde ich neue Kommentare für Navigationselemente sehen. Dann wähle ich das UL-Element aus, das den Klassennamen Now items hat. Zuallererst werde ich die Breite definieren. Es wird 50% sein Dann werde ich die Navigationselemente nebeneinander platzieren , horizontal in einer Reihe. Denn im Moment sind sie vertikal angeordnet. Um das zu tun, werde ich Flex Box verwenden. Wir brauchen Display Flex. Wenn wir nun die Ergebnisse überprüfen, werden Sie feststellen, dass die Elemente horizontal in einer Reihe angeordnet sind. Als Nächstes werde ich etwas Abstand zwischen den Elementen schaffen und dafür eine der Flexbox-Eigenschaften namens „Inhalt rechtfertigen“ verwenden . Und ich werde ihr einen Wert zuweisen, der auch Leerzeichen genannt wird. Dadurch wird ein gleichmäßiger Abstand zwischen den Elementen geschaffen. Ordnung, danach fahren wir fort und wählen die LI-Elemente aus, die den Klassennamen des Elements haben. Ich werde dafür die Standard-Aufzählungszeichen loswerden. Lassen Sie uns den Listenstil verwenden und ihm den Wert Keiner zuweisen. Wie Sie sehen können, sind die Kugeln weg. Als Nächstes wähle ich die Link-Elemente aus, die wir hier benötigen. Kein Link. Lass uns das Telefon vergrößern. Ich werde es bis Ram schaffen, dann werde ich Text in Großbuchstaben umwandeln. Eigentlich brauchen wir hier eine Texttransformation und den Wert appl case Und ändere auch die Farbe. Die Farbe wird weiß sein. Lassen Sie uns das Ergebnis überprüfen. Wie Sie sehen können, sehen die Navigationselemente ziemlich gut aus. Als Nächstes werde ich etwas Platz zwischen den Buchstaben schaffen. Lass uns 0,1 Ram draus machen. Danach werde ich den Link-Elementen mithilfe von Tech Shadow einen kleinen Schatteneffekt hinzufügen . Die Werte werden 0,5 Gramm pro Ram sein. Und die schwarze RGBA-Farbe mit der Opazität 0,2 Alles klar, also ich finde, die Knöpfe sehen ziemlich gut aus Jetzt müssen wir uns um den letzten Punkt kümmern, der der Button sein wird, ich meine den Preisbutton ich meine den Lassen Sie uns weitermachen und dieses Element jetzt mit dem Klassennamen PTN auswählen dieses Element jetzt mit dem Klassennamen PTN Definieren wir innerhalb der Höhe. Ich werde die Breite auf 13 Ram setzen. Was die Höhe angeht, werde ich fünf Ram draus machen. Ändere auch die Hintergrundfarbe. Stellen wir es auf Weiß ein. Wie Sie sehen können, werden die With-Höhen nicht auf die Elemente angewendet und wir haben hier das gleiche Problem. Ich meine, das Link-Element ist standardmäßig ein Inline-Element und daher werden innerhalb von Höhen nicht auf das Element angewendet, wir müssen es ändern. In diesem Fall werde ich Display Flex verwenden , da wir auch andere Flexbox-Eigenschaften benötigen. Deshalb verwende ich hier Flachs und nicht Inline-Block oder Block. Wenn ich jetzt das Ergebnis überprüfe, werden Sie feststellen, dass die Innenhöhe auf das Element angewendet wird, sodass der Inhalt in der Mitte der Box platziert der Inhalt in der Mitte der Box Und dafür verwende ich Justify Content with the Value Center. Und außerdem brauchen wir Line Items Center, Justify Content Center. Richten Sie das Element in der Mitte horizontal aus. Wie bei der Einzelpostenmitte wird das Element vertikal in der Mitte platziert. Jetzt haben wir hier die perfekte Zentrierung. Ich werde die Link-Elemente und auch die Unterseite vertikal in der Mitte platzieren . Dafür können wir hier die Mitte der Einzelposten hinzufügen und das Problem wird behoben. Jetzt sind die Linkelemente und der Button schön in der Mitte platziert. Lassen Sie uns weitermachen und hier ein paar weitere Stile hinzufügen. Als Nächstes werde ich die Schaltfläche abrunden , indem ich den Radius verwende, es wird Form sein, jetzt ist die Schaltfläche abgerundet. Außerdem füge ich dem unteren Teil einen kleinen Schatteneffekt hinzu, indem ich Box-Schatten mit den Werten 01 Ram verwende . Dann haben wir hier drei Ram. Die Farbe wird RTP A mit der Opazität 0,1 sein . Wir haben hier einen schönen Schatteneffekt Danach werde ich das Telefon ausschalten. Lassen Sie uns das Telefon vergrößern. Es werden zwei Widder sein. Ich werde den Buchstabenabstand verwenden. Es wird 0,1 Ram sein. Lass uns die Farbe ändern. Ich werde die Farbe F88 344 verwenden. Es wird eine orange Farbe haben, wie die Artikel mit dem Knopf. Ich werde den Text in Großbuchstaben schreiben. Lassen Sie uns Texaner in Großbuchstaben schreiben. Ordnung, die Knöpfe mit dem Knopf sehen ziemlich gut aus Ich werde der Schaltfläche einen Hover-Effekt hinzufügen. Eigentlich werde ich den ähnlichen Hover-Effekt verwenden. Lassen Sie uns den Knopf PTN wählen. Mit dem Hover müssen wir uns transformieren. Der Wert für Translate Y wird -0,2 n sein . Wenn ich mit der Maus über die Schaltfläche fahre, bewegt sie sich Aber wie Sie sehen, brauchen wir einen reibungslosen Übergang. Verwenden Sie die Übergangseigenschaft, die wir hier für die Transformation benötigen. Die Dauer des Effekts wird 0,3 Sekunden betragen. Jetzt haben wir hier einen schönen und coolen Hover-Effekt. In Ordnung, das sind eigentlich ungefähr die n Artikel. Jetzt müssen wir zu jedem Navigationselement das Drop-down-Menü hinzufügen , so wie wir es im fertigen Projekt haben. Lassen Sie uns dazu weitermachen und mit der nächsten Vorlesung fortfahren. 11. Das HTML-Markup des ersten Dropdown-Programms erstellen: Ordnung, in der letzten Lektion haben wir Navigationselemente und auch die Schaltfläche angepasst Und jetzt ist es an der Zeit, weiterzumachen und mit der Erstellung des Drop-down-Menüs zu beginnen . Ich meine das Drop-down-Menü für den ersten Navigationspunkt. Schauen wir uns das fertige Projekt an. Wenn ich mit der Maus über das erste Navigationselement fahre, erscheint das Drop-down-Menü Wie Sie sehen können, besteht das erste Drop-down-Menü aus zwei Hauptteilen Wir haben die linke Seite und wir haben auch die rechte Seite. Auf der linken Seite haben wir die Liste der Funktionen. Wie Sie sehen können, tritt beim Bewegen des Mauszeigers über die Listenelemente ein geringer Hover-Effekt Die rechte Seite ist komplexer. Wir haben hier die Telefonsymbole mit Hover-Effekt. Außerdem haben wir einige Textelemente mit unterschiedlichen Farben Und unten kannst du den Button sehen. Ordnung, das ist es. Was wir in dieser Vorlesung schaffen werden. Ich werde das HTML-Markup erstellen und dann werden wir das Hauptmenü der Stadt entwerfen Ordnung, gehen wir zum VS-Code und beginnen mit der Erstellung des HTML-Markups Wir müssen die Kommentare direkt nach dem Link-Element innerhalb des LI-Elements einfügen die Kommentare direkt nach dem Link-Element innerhalb des LI-Elements Lassen Sie uns Ihre Kommentare für das Drop-down-Menü einfügen. Es wird das erste Drop-down-Menü sein, das wir hier brauchen, ein Drop-down-Menü. Dann öffne ich im ersten Drop-down-Menü tiefe Elemente , die zwei verschiedene Klassen haben werden. Der erste wird ein allgemeiner Klassenname sein , Dropdown. Außerdem brauchen wir hier, ein Drop-down-Menü. Als Nächstes füge ich hier ein weiteres tiefes Element ein, das die linke Seite des Drop-down-Menüs sein wird, das wir hier benötigen. Lass einen nach links fallen. Lassen Sie uns auch die rechte Seite erstellen. Lassen Sie uns diese Codezeile duplizieren und den Klassennamen ändern. Du musst einen rauswerfen, richtig. In Ordnung, zuerst kümmern wir uns um die linke Seite. Ich werde hier H einfügen, drei Überschriftenelemente mit den Textmerkmalen. Dann brauchen wir nach der Überschrift eine weitere Entwicklung, die am wenigsten sein wird, ich meine den Wrapper innerhalb der Entwicklung Ich werde eine weitere erstellen , die das Feature-Element sein Also werde ich hier den Klassennamen und das Features-Element hinzufügen. Jedes Listenelement wird aus zwei Elementen bestehen. Das erste wird ein Phonosomicon sein. Für das zweite haben wir hier Sanelement, wenn wir uns das fertige Projekt ansehen und die linke Seite überprüfen Wie Sie sehen können, haben wir also die Phonosomicons und auch das Panelement Lassen Sie uns I-Elemente mit den Klassen FA solid A star und dann stattdessen hier span element unsichern solid A , der Text wird In Ordnung, insgesamt werden wir 11 verschiedene Listenelemente haben. Deshalb werde ich den Eintrag auf der Feature-Liste zehnmal duplizieren. Dann müssen wir die Klassennamen der Telefone und auch den Inhalt der Span-Elemente ändern und auch den Inhalt der Span-Elemente Das zweite Element wird ein Festkörper sein , gestapelte A-Boxen Was dieses Lüfterelement betrifft, so werden es mehr als 100 Elemente sein Dann wird das dritte Phonosomicon eine feste A-Datei sein Was dieses Lüfterelement angeht, werde ich mehr als 1.000 Layouts einfügen Das nächste Phonosomicon wird ein Festkörper sein, eine Stiftspitze. Außerdem müssen wir dieses Panel ändern. Ich werde dein No-Code-Design einfügen. Danach wird das Mikrofon des Telefons ein solider Schraubenschlüssel sein Was dieses Panel angeht, werde ich Ihren Theme Builder einfügen Dann wird das nächste Symbol ein Festkörper sein , ein Autoeinkauf Da wir dieses Panel ändern müssen , das E-Commerce sein wird Dann werden wir ein Netzwerk verkabeln lassen und auch diese Panels ändern Wir werden hier einen Arbeitsablauf haben. Dann wird die nächste eine feste Glühbirne sein. Was dieses Panel angeht, fügen wir hier Marketing Als Nächstes werden wir hier eine Phase solider Code-Entwickler haben. Das nächste Symbol wird ein solider Desktop sein. Was dieses Panel angeht, werde ich Nebenbeispiele einfügen. Schließlich benötigen wir hier das letzte Symbol das Panelment einfügt Okay, kommen wir zum ersten Teil, ich meine die linke Seite des Drop-down-Menüs Hier haben wir alle Phonomicons und Spanlments. Als nächstes müssen wir hier von der rechten Seite abbiegen. Zuallererst brauchen wir hier die dritte Rubrik, die Dienstleistungen sein wird. Dann werde ich nach der Überschrift diese Drop-down-Dienste öffnen . Dann werde ich innerhalb der Entwicklung ein weiteres D öffnen, das selbst ein Dropdown-Service sein wird . Es wird Elemente beinhalten und auch die Entwicklung, die sich selbst einschließen wird , zwei Bereichselemente. Fügen wir hier das I-Element ein, bei dem es sich um einen Aa-Solida-Schraubenschlüssel handeln wird Dann brauchen wir hier, wie gesagt, eine Entwicklung mit dem Dropdown-Service für Klassennamen Ich werde zwei Span-Elemente einführen. Der erste wird Thin Builder sein. Lassen Sie uns diese Codezeile duplizieren. Das zweite Span-Element wird der Thin Builder Nummer eins sein. Jetzt werde ich den Dropdown-Service duplizieren. Insgesamt werden wir sieben Drop-Down-Dienste haben. Lassen Sie uns diesen Code sechsmal duplizieren. Jetzt müssen wir die Phonetik und auch den Inhalt der Span-Elemente ändern die Phonetik und auch den Inhalt der Span-Elemente Das zweite Phonsomicon wird ein Feststoff sein. Eigentlich müssen wir hier dieses T entfernen, sonst wird das Symbol nicht angezeigt Lass es uns loswerden. Wie gesagt, das Phonoomicon wird ein Festkörper sein, eine Glühbirne Was den Marktplatz für Panelmentse angeht. Was das zweite Panelement betrifft, werde ich hier Module, Layouts und Themen einfügen Dann wird das nächste Phonosomicon ein Festkörper sein, eine Wolke. Was diese Panelemente angeht, lassen Sie uns in die Cloud eintauchen. Und dann wird der zweite Cloud-Speicher für Designer sein Das nächste Phosmicon wird ein Festkörper sein, ein Gehirn. Wir werden die Paneele wechseln. Ai Spanel wird Websites mit erstellen Dann wird das nächste Symbol eine solide Personengruppe sein. Was die Panelemente angeht, brauchen wir Teams. Dann wird die zweite die Zusammenarbeit für Agenturen sein Dann brauchen wir einen soliden Globus. Was das Panelmentseed-Hosting betrifft, wird das zweite das schnelle Hosting der Websites sein schnelle Hosting der Websites Jetzt müssen wir den letzten Top-Down-Service ändern. Wir brauchen eine solide Krone. Was die Span-Elemente angeht, lassen Sie uns IP stören und das zweite wird 2047-Unterstützung sein und das zählt In Ordnung, alle Dropdown-Services sind vorbereitet. Als letztes müssen wir die Schaltfläche erstellen, die hier platziert werden sollte Öffnen wir den Button-Typ, der Button sein wird. Was den Inhalt angeht, werde ich heute ins beitreten. Ordnung. Ich hoffe, alles ist richtig. Das werden wir in den nächsten Vorlesungen sehen. Schauen wir uns die Ergebnisse an, die wir hier haben. Dienste, alle Symbole werden angezeigt. Jetzt müssen wir weitermachen und das erste Dropdown dafür gestalten Fahren wir mit der nächsten Vorlesung fort. 12. Styling-Funktionen im ersten Dropdown: Ordnung, also in der letzten Lektion haben wir das HTML-Markup für unser erstes Drop-down-Menü erstellt HTML-Markup für unser erstes Drop-down-Menü Ich meine das Drop-down-Menü von Home Link. Jetzt ist es an der Zeit, das Drop-down-Menü anzupassen. Gehen wir zur CSS-Datei und fügen direkt nach Navlink neue Kommentare für das Drop-down-Menü Es wird das erste Drop-down-Menü sein, das wir hier brauchen. Dropdown eins, dann von Dropdown eins. In Ordnung, lassen Sie uns weitermachen und Drop-down-Eins auswählen. Zuallererst setze ich seine Position auf absolut. Wir werden dieses Element entsprechend dem übergeordneten Element positionieren , das kein Element ist. Ich werde es keinem Element zuordnen, die Position ist relativ. Wir benötigen es, um untergeordnete Elemente zu positionieren. In diesem Fall wählen Sie eines entsprechend dem übergeordneten Element aus, bei dem es sich nicht um ein Element handelt. In Ordnung, lassen Sie uns die Eigenschaften top und let definieren. Die oberste Position wird 4,9 m sein . Was die linke Position angeht, werde ich es auf -24 m schaffen. Lassen Sie uns das Ergebnis überprüfen Wie Sie sehen können, ist das Drop-down-Menü positioniert. Jetzt definiere ich die Hintergrundfarbe und sie wird weiß sein. In Ordnung, hier haben wir das Drop-down-Menü. Jetzt müssen wir die, mit der Höhe des Elements, definieren. Ich werde mit 96 Ram spielen. Was die Höhe angeht, so wird es 60 Ram sein. Als Nächstes werde ich Funktionen und Dienste horizontal nebeneinander platzieren . Und dafür werde ich Flex Box verwenden, wir müssen Flex anzeigen. Wenn wir das Ergebnis überprüfen, werden Sie feststellen, dass Funktionen und Dienste, ich meine die linke und rechte Seite des Top-Down-Menüs, horizontal nebeneinander angeordnet sind. Ordnung, danach werde ich das Top-Down-Menü mithilfe des Randradius etwas abgerundet machen . Ich werde es auf einen Ram einstellen. Außerdem werde ich mit Po-Schatten einen kleinen Schatteneffekt erzeugen . Die Werte werden 01 Ram sein, dann drei Ram als Farbe. Ich werde den RGBA-Wert verwenden. Die Farbe wird schwarz mit einer geringeren Deckkraft sein, 0,2, wie Sie in den Ecken des Drop-down-Menüs um sie herum sehen können den Ecken des Drop-down-Menüs um sie herum sehen Und wir haben hier auch nette und coole Schatteneffekte. Als Nächstes werde ich im Drop-down-Menü etwas Platz dafür schaffen . Lass uns Pudding verwenden Ich setze es auf zwei RAM. In Ordnung, das ist es. In Bezug auf Drop One meine ich das Wrapper-Element Als Nächstes werde ich mich um die linke und rechte Seite kümmern. Ich wähle eine Option links aus und definiere ihre Breite. Es wird 30% sein. Außerdem werde ich mithilfe von Polsterungen etwas Platz auf der rechten Seite des Elements schaffen , oder Der Wert wird vier m sein . Jetzt ist der erste Teil, in dem ich mich befinde, die linke Seite hat die Breite, und wir haben auch etwas Platz hinter der linken Seite Als Nächstes werde ich diesen Code duplizieren und dasselbe auch für die rechte Seite tun. Die Breite der rechten Seite wird 70% betragen. Außerdem brauchen wir hier die Polsterung links Und es wird laufen. Ordnung, als Nächstes werde ich mich um die Überschriften beider Seiten kümmern die Überschriften beider Seiten Wir benötigen die gleichen Stile für beide Überschriften. Ich werde beide auswählen. Wir müssen eins links runterlassen, H drei. Lassen Sie uns den Code duplizieren und von links nach rechts ändern. Fügen wir hier Stile für die Überschrift hinzu. Zuallererst werde ich die Telefonfamilie ändern. Es wird Molly kursiv sein. Dann werde ich die Telefongröße auf 1,8 Ram einstellen. Wir brauchen Farbe. Es wird Farbe 86987 sein Wie Sie sehen können, sehen die Überschriften gut aus. Als Nächstes werde ich unten mit Polsterung etwas Platz schaffen unten mit Polsterung etwas Platz Unten wird es ein Ram sein. Außerdem brauchen wir Marge. Unten werden es drei Ram sein und unten einen Rand bilden. Wir brauchen hier unten, die Breite wird 0,2 Ram betragen. Dann brauchen wir Vollton als Farbe, die ich hier verwenden werde , RGBA, 134-15-2167 und die Deckkraft wird 0,5 sein. Ich habe hier graue Lass uns nachschauen. Wie Sie sehen können, haben wir hier unten einen schönen und coolen Rand. Und tatsächlich sehen die Überschriften der linken und rechten Seite ziemlich gut aus Ordnung. Als Nächstes wählen wir den Eintrag in der Liste der Funktionen aus. In diesem Teil befinden sich die beiden Elemente , die im Feature-Listenelement platziert sind. Ich werde das Element mit der Features-Liste auswählen, lassen Sie uns den Rand festlegen. Wir benötigen 1,5 Fram oben und unten und Null auf der linken und rechten Seite Dann werde ich die Elemente mithilfe der Flexbox horizontal nebeneinander platzieren mithilfe der Flexbox horizontal nebeneinander Außerdem benötigen wir einen Einzelposten. Es wird die Elemente in der Mitte vertikal ausrichten und dann den Typ des Cursors ändern und ihn zum Zeiger machen. Okay, jetzt haben wir etwas Abstand zwischen den Elementen und auch der Cursor hat sich geändert. Danach werde ich Symbole und dann die Span-Elemente anpassen. Fangen wir mit den Symbolen an. Ich wähle das Features-Element , gefolgt von den Elementen. Lass uns die Schriftgröße zwei Rams betragen. Ich setze die Breite auf vier RAM und ändere dann die Farbe. Die Farbe wird Grau sein, die wir kürzlich verwendet haben. Lass uns nachschauen. Wie Sie sehen können, sehen die Symbole ziemlich gut aus. Lassen Sie uns weitermachen und die Lüfterelemente anpassen. Ich wähle erneut das Element in der Liste der Funktionen aus, gefolgt von den Lüfterelementen. Ich werde das Telefon vergrößern, es wird 1,8 RAM sein. Was die Farbe angeht, werde ich dieselbe Farbe verwenden. Ich meine die graue Farbe. Wie Sie sehen können, sehen die Pan-Elemente ziemlich gut aus. Das Einzige, was wir in dieser Vorlesung tun müssen, ist , einen kleinen Schwebeeffekt zu erzeugen Sobald wir den Mauszeiger über das Symbol oder das Span-Element bewegen, sollten sie ihre Farbe ändern Lass uns weitermachen und das tun. Ich wähle Funktionen aus, ein Listenelement mit dem Mauszeiger Wir brauchen auch ihre Elemente. Wir müssen Span-Elemente auswählen. Sobald wir mit der Maus über die Elemente fahren, müssen wir die Farbe ändern Die Farbe wird zwei bis zwei sein. Die Farbe ist dunkelgrau. Wenn ich jetzt mit der Maus darüber fahre, siehst du, dass sich die Farbe geändert hat Aber wir brauchen einen reibungslosen Übergang. Fügen wir beiden Elementen eine Übergangseigenschaft hinzu. Wir brauchen deine Farbe. Und die Dauer wird 0,3 Sekunden betragen. Wenn ich jetzt mit der Maus über die Artikel fahre, ändern sie ihre Farbe gleichmäßig Ich finde, es sieht ziemlich gut aus. Als nächstes müssen wir uns um die rechte Seite kümmern. Und dafür werde ich mit der nächsten Vorlesung weitermachen. 13. Styling-Services im ersten Dropdown: Okay, in der letzten Lektion haben wir die linke Seite des Dropdownmenüs gestaltet, ich meine die Und jetzt müssen wir uns um den zweiten Teil unseres Drop-down-Menüs kümmern den zweiten Teil unseres Drop-down-Menüs Ich meine, der Teil mit den Dienstleistungen, die rechte Seite. Gehen wir zum VS-Code und wählen Dropdown Services aus. Ich definiere die Höhe, es wird 45 Kinderwagen sein Außerdem werde ich die Elemente wieder mit einem Flachsbuch ausrichten die Elemente wieder mit einem Flachsbuch Wir brauchen Display Flex. Wir müssen die Richtung ändern, weil wir Elemente vertikal ausrichten müssen. Wir brauchen also, dass die Flex-Richtung der Spalte entspricht. Ordnung, jetzt wähle ich wieder den Dropdown-Service selbst aus. Lass uns Flexbox benutzen. Wir brauchen Display-Flex. Dann müssen wir mit Margin Bottom ein Leerzeichen am unteren Rand des Elements erstellen . Es wird 3,5 RAM sein. Als Nächstes ändere ich den Cursor und setze darauf, dass er zeigt. Ordnung, jetzt werde ich die Elemente in der Mitte vertikal ausrichten. Ich werde hier ein Zentrum für Einzelposten hinzufügen. Wie Sie sehen können, befinden sich die Symbole und die Textelemente in der Mitte Danach werde ich die Symbole anpassen. Lassen Sie uns weitermachen und den Dropdown-Service auswählen, gefolgt vom Element. Ich werde innerhalb der Höhe zunehmen. Ich werde beide auf 5,5 Ram einstellen. Das gilt auch für die Höhe. Dann lass uns den Hintergrund ändern. Lass uns den Hintergrund ändern. Ich werde die lineare Gradientenfunktion verwenden. Die Richtung des Farbübergangs wird zwei sein, oder? Was die Farben angeht, wird die erste Farbe B1501 sein. Was die zweite Farbe angeht, werde ich 723 verwenden Das sind die lila Farben. Die helleren und die dunkleren können die Phonetik sehen. Ich meine, diese Boxen haben einen linearen Farbverlauf. Als Nächstes gehe ich zu den Flex-Artikeln. Wir müssen sie in zwei Spalten platzieren. Ich verwende Flex Wrap mit dem Wert p. Jetzt sind die Elemente in zwei Spalten angeordnet. Wir haben hier viel bessere Ergebnisse. Danach füge ich hier ein paar weitere Stile hinzu. Wir müssen die Boxen abrunden, und dafür verwenden wir den Randradius mit dem Wert von 50%. Jetzt sind die Elemente abgerundet und wir müssen die Symbole in der Mitte dieser Kreise platzieren . Dafür werde ich X Book verwenden. Dafür brauchen wir Flachs zur Schau, dann ein Konferenzzentrum und ein Einzelteilzentrum Wie Sie jetzt sehen können, sind die Symbole perfekt zentriert. Danach passen wir die Symbole an. Wir müssen die Telefongröße erhöhen. Es wird 2,5 Ram sein. Dann werde ich die Farbe ändern. Lass es uns weiß machen. Außerdem werde ich Po Shadow auf 0,5 m einstellen, zwei Ram. Eigentlich brauchen wir hier m. Was die Farbe angeht, werde ich den RGBA-Wert verwenden, aber in diesem Fall müssen wir die Farbe Lila verwenden Der erste Wert wird eins bis sechs sein. Dann werden wir hier 35 haben. Dann wird der nächste Wert 218 sein , was die Opazität angeht. Ich sage 2.3 Okay, die Icons sehen ziemlich gut Als Nächstes füge ich auf der rechten Seite jedes Symbols ein kleines Leerzeichen hinzu. Fügen wir hier einen Rand hinzu. Richtig und mach es zur Rampe. Okay, danach werde ich einen kleinen Schwebeeffekt erzeugen Sobald wir den Mauszeiger über die Dienste bewegen, sollten wir die Größe der Symbole erhöhen Ich werde den Dropdown-Service mit dem Hover auswählen. Dann brauchen wir Elemente. Um das Element zu vergrößern, verwende ich die Skalierungsfunktion. Wir brauchen Transformation, wir brauchen Transformation und Skalierung. Und ich werde hier 1.1 einfügen . Wenn ich jetzt mit der Maus über die Symbole fahre, werden sie größer, ich meine die Größe des Symbols Lassen Sie uns diesen Effekt glatter machen. Verwenden Sie den Übergang Wir müssen uns hier transformieren. Und die Dauer wird 0,3 Sekunden betragen. Jetzt haben wir hier viel bessere Ergebnisse. Die Größe des Icons nimmt mit gleichmäßiger Wirkung zu. Ordnung, als Nächstes werde ich mich um den Dropdown-Serviceartikel kümmern . Ich meine, diese Textelemente haben wir hier zwei verschiedene Elemente, und wir müssen sie vertikal platzieren Lassen Sie uns weitermachen und den Dropdown-Serviceartikel auswählen. Verwenden Sie Flex Box. Wir brauchen Display-Flachs. Dann müssen wir die Richtung ändern. Es wird eine Kolumne sein. Wie Sie jetzt die Textelemente sehen können, sind die Span-Elemente vertikal angeordnet Wie Sie gerade sehen können, haben alle Symbole dieselbe Hintergrundfarbe Wenn wir uns das fertige Projekt ansehen, werden Sie feststellen, dass jeder Artikel eine andere Hintergrundfarbe hat. Wir müssen uns darum kümmern. Ich wähle den ersten Dropdown-Service hier den ersten Dropdown-Service aus, den wir brauchen, Child Selector Und wir müssen hier die Nummer eins angeben. Dann brauchen wir Elemente. Lassen Sie uns auch den Hintergrund korrigieren, wir müssen uns Box Shadow von hier holen Wie Sie auf dem ersten Bild sehen können, hat das Phomicon jetzt die lila Hintergrundfarbe Eigentlich werde ich diesen Code sechsmal duplizieren , weil wir insgesamt sieben Symbole haben Wir haben hier sieben Elemente. Lassen Sie uns die Chart-Selektoren ändern. Wir müssen die Zahlen 1-7 hören Jetzt müssen wir die Hintergrundfarben ändern Das zweite Symbol werden die Hintergrundfarben sein. 31 DCA. Eins. Was die zweite Farbe angeht, werde ich 23683 einführen und auch den Boxschatten ändern , den wir hier benötigen 35214131. Lass uns den Browser überprüfen. Wie Sie sehen können, hat das zweite Telefon jetzt eine grüne Farbe Ich meine die Hintergrundfarbe. Kümmern wir uns um den dritten Punkt. Wir brauchen hier Farben, 351, EC. Für den zweiten Anrufer werden es 22 DCF sein Ändere auch den Box-Schatten, den wir hier brauchen, 45, dann wieder Die dritte Phonemik ist bereit. Lass uns weitermachen und uns um den vierten Punkt kümmern. Die Farbe wird 0030 sein. Die zweite, die wir hier brauchen, 03. 48. Als Nächstes ändere ich den Box-Schatten, den wir hier brauchen. 3180216. Lass uns den Browser überprüfen. Das vierte Telefon, Atomican, ist maßgeschneidert. Gehen wir zum fünften über. Wir brauchen hier F9625. Was den zweiten Anrufer betrifft, wird es FA 751 sein Und dann ändere den Box-Schatten, den wir hier brauchen , 250, dann 11728 Wir haben hier die orange Hintergrundfarbe. Gehen wir zum nächsten Telefonmikrofon über, das hier das sechste ist. Drei bis 93f. Dann wird die zweite Farbe 2371f sein, während der Schatten 35 und dann 113255 sein wird 35 und dann 113255 sein Hier haben wir das sechste Symbol, und jetzt müssen wir uns um das letzte Schriftsymbol kümmern Die erste Farbe wird 28235 sein. Was die zweite Farbe angeht, brauchen wir hier 202, 52c, einen Boxschatten Fügen wir hier 32 und dann 3744 ein. Okay, also alle Telefon-Comics sind vorbereitet. Sie sehen ziemlich nett aus. Und jetzt müssen wir uns um die Spannelemente kümmern. Ich meine, diese Textelemente. Zuallererst werde ich mich um das erste Span-Element kümmern Lassen Sie uns das Dropdown-Serviceelement auswählen, dann müssen wir Span the Child auswählen. Wir benötigen das erste Span-Element. Wir ändern die Telefonfamilie. Es wird Molly Cursive sein. Dann werde ich die Schrift einstellen . Viel zu gewagt. Die Farbe wird 150f1 sein. Dann setze ich den Buchstabenabstand auf 0,1 m. Lassen Sie uns Text in Großbuchstaben umwandeln Wir brauchen hier eine Texttransformation und der Wert wird nicht in Großbuchstaben gerendert. Wie Sie sehen können, werden die Stile auf das erste Pan-Element angewendet. Im Moment haben sie dieselbe Farbe, das müssen wir ändern. Außerdem müssen wir die Größe der Pan-Elemente erhöhen . Wählen wir hier Serviceelement aus und folgen Sie dem Pan-Element Stellen Sie die Telefongröße auf 1,6 RAM ein. Jetzt wurde die Schrift der beiden Spin-Elemente vergrößert. Was die Farben angeht, werde ich den ersten Service wählen. Dann müssen wir den Serviceartikel auflisten, gefolgt von den Spin-Elementen. Auch hier benötigen wir hier und den Chi-Selektor. Wir brauchen das erste Spin-Element. Nehmen wir die Farbe von hier und fügen sie unten ein. Jetzt hat nur das erste Span-Element die violette Farbe. Als Nächstes müssen wir dasselbe für die restlichen Elemente tun. Ich werde diesen Code sechsmal duplizieren. Lassen Sie uns die Selektoren ändern. Wir brauchen Zahlen von eins bis sieben, wie wir es für die Phonomikrofone gemacht haben , die zweite Farbe Es wird 31c1 sein. Es hat eine grüne Farbe. Dann wird das dritte Spannelment 3f51c sein. Lass uns alle Farben ändern und dann den Browser überprüfen. Als nächstes brauchen wir 0030. Dann wird der fünfte Artikel f9625 sein. Dann brauchen wir 3293 FF. Was die letzten Span-Elemente angeht, benötigen wir hier 28 bis 35. In Ordnung, schauen wir im Browser nach. Wie Sie sehen können, haben alle Span-Elemente die richtigen Aufrufe. Jetzt müssen wir die zweiten Span-Elemente anpassen. Wählen wir dafür das Drop-down-Menü Service Item Span aus, und wir benötigen hier einen Chat-Selektor mit der Nummer zwei. Ich stelle das Telefon auf 300 und ändere auch die Farbe Nehmen wir hier 66, wir brauchen hier das Pfundzeichen, dann 6672 Es ist eine graue Farbe. Wie Sie sehen können, wurden die Farben für die zweiten Span-Elemente geändert. Schließlich müssen wir die Schaltfläche anpassen. Lassen Sie uns weitermachen und die rechte Dropdown-Taste auswählen. Lassen Sie uns zunächst die Breite definieren. Es wird 100% sein und die Höhe wird vier Ram betragen. Und ändere auch die Hintergrundfarbe. Lassen Sie uns hier die Farbe 3776 verwenden. Hier haben wir den Boden. Wir müssen den Faltrand loswerden. Setzen wir ihn auf neun und runden die Ecken mit dem Randradius ab. Es werden zwei Ram sein. Jetzt sieht der Boden viel besser aus. Kümmern wir uns um die Schrift. Ich werde die Schriftgröße auf einen Punkt im Forum einstellen. Dann wird die Schriftstärke fett sein. Wenn ich Text in Großbuchstaben umwandeln die Farben ändern werde, wird die Farbe weiß sein Dann füge ich etwas Abstand zwischen den Buchstaben hinzu. Und schließlich ändere den Cursor, lass ihn zeigen. Ordnung, der zweite Teil des Drop-down-Menüs ist vorbereitet und gestaltet. Es sieht ziemlich gut aus. Jetzt müssen wir dafür sorgen, dass das Drop-down-Menü funktioniert. Ich meine, wir müssen es standardmäßig ausblenden und es dann wieder einblenden, sobald wir mit der Maus über den Roman fahren, ich meine, das erste Romandesign Außerdem müssen wir hier dieses Dreieck erstellen Dafür. Fahren wir mit der nächsten Vorlesung fort. 14. Das Dropdown-Menü zum Laufen bringen: Ordnung, in der letzten Vorlesung haben wir das Styling des Drop-down-Menüs abgeschlossen Und jetzt müssen wir dafür sorgen, dass es funktioniert. Standardmäßig sollte das Drop-down-Menü ausgeblendet sein Sobald wir den Mauszeiger über das Navigationselement bewegen, sollte es mit einem reibungslosen Übergang angezeigt werden Schauen wir uns das fertige Projekt an. Wie Sie sehen können, ist das Dropdown standardmäßig ausgeblendet. Sobald ich mit der Maus über das Navigationselement fahre, wird es angezeigt Sie können hier dieses Dreieck sehen , das wir auch in dieser Vorlesung erstellen müssen Lassen Sie uns weitermachen und zum VS-Code zurückkehren. Zuallererst werde ich das Dreieck dafür erstellen , das ich nach dem Pseudoelement verwenden werde Das Dreieck wird Teil des Navigationselements sein, daher brauchen wir hier kein Element, gefolgt vom Child-Selektor Wir benötigen den ersten Navigationspunkt. Und dann verwende ich nach dem Pseudo-Element, der Inhalt wird leer sein Dann werde ich die Position definieren. Es wird absolut sein. Ich werde das Element entsprechend dem übergeordneten Element positionieren . In diesem Fall ist das übergeordnete Element kein Element. Aber im Moment, wie Sie sehen können, hat es bereits die relative Position. Als Nächstes werde ich die Eigenschaften oben und links definieren. Die beiden Positionen werden 2,9 Ram sein. Was die linke Position angeht, werde ich sie auf 50% setzen. Das Dreieck sollte in der Mitte des Navigationselements platziert werden. Um das Element zu zentrieren, verwende ich die Funktion transform translate x mit dem Wert -50%. Das Dreieck wird mit einem kleinen Trick unter Verwendung von Rändern erstellt Ich verwende den linken Rand mit den Werten einfarbig und die Farbe soll transparent sein Dann werde ich diesen Code zweimal duplizieren. Lassen Sie uns von links nach rechts grenzen, die Werte werden gleich sein. Dann brauchen wir den unteren Rand. Anstelle von transparenter Farbe werde ich weiße Farbe verwenden. Wie Sie sehen können, wird das Dreieck erstellt und in der Mitte des Navigationslichts platziert. Jetzt werde ich dieses Element und auch das Drop-down-Menü ausblenden . Um das Element auszublenden, verwende ich Opacity Zero und Visibility Hidden Wir brauchen dasselbe auch für das Dropdown. Wie Sie jetzt sehen können, sind beide Elemente ausgeblendet. Und jetzt müssen wir gegen sie Berufung einlegen. Sobald wir hier mit dem Mauszeiger über das Objekt I fahren, kein Element mit dem Mauszeiger gefolgt vom F, um die Elemente zu sehen, benötigen wir diese beiden Eigenschaften um das Element anzuzeigen Die Opazität muss eins sein und die Sichtbarkeit muss sichtbar sein. Außerdem werde ich hier auch für das Drop-down-Menü etwas hinzufügen hier auch für das Drop-down-Menü etwas Platzieren wir hier die Deckkraft eins und die Sichtbarkeit ist machbar. Wenn ich jetzt mit der Maus über den Punkt „Nein“ auf dem Dreieck „Ja“ fahre, müssen wir hier einen auswählen. Jetzt werden beide Elemente angezeigt. Das einzige, was ich tun muss, ist, dieses Erscheinungsbild etwas glatter zu gestalten dieses Erscheinungsbild etwas glatter Und dafür werde ich Transition verwenden. Die Werte werden alle 0,3 Sekunden betragen. Wenn ich jetzt mit der Maus über den Drehknopf fahre, erhalten wir ein nettes und cooleres, glatteres Aussehen des Drop-down-Menüs und des In Ordnung, das war's mit dem ersten Drop-down-Menü. Jetzt müssen wir uns um den zweiten kümmern. Und dafür fahren wir mit der nächsten Vorlesung fort. 15. Das HTML-Markup für das zweite Dropdown erstellen: Okay, in der letzten Lektion haben wir die Arbeit am ersten Drop-down-Menü abgeschlossen, das gut funktioniert und ziemlich nett und cool aussieht Jetzt ist es an der Zeit, sich um das zweite Drop-down-Menü zu kümmern. Lassen Sie uns weitermachen und uns das fertige Projekt ansehen. Wenn wir den Mauszeiger über das zweite Element bewegen, bei dem es sich um Kunden handelt, wird das zweite Drop-down-Menü angezeigt Wie Sie sehen können, besteht es aus vier verschiedenen Teilen. Jeder von ihnen hat eine schöne und coole Hintergrundfarbe mit einigen linearen Verlaufseffekten. Außerdem besteht jeder Teil aus einem P. Dann haben wir hier die Überschrift und etwas Text. Okay, das war's also mit dem zweiten Drop-down-Menü. Wie üblich werden wir das HTM-Markup erstellen und uns dann um das Styling kümmern Wir müssen den zweiten Navigationspunkt finden , nämlich Direkt nach den Link-Elementen werde ich Kommentare für das zweite Drop-down-Menü einfügen. Dann werde ich Entwicklungen mit Kursen eröffnen. Dann runter, wir brauchen Dropdown zwei. Dann gehe ich zu Open Development, wo es einen Klassennamen für Kunden geben wird . Wie gesagt, jeder Artikel wird aus einem Telefon-Asomicon bestehen. Dann haben wir die Überschrift und den Absatz. Öffnen wir die Elemente I, die die Klassen A Regular und dann A Envelope gelten. Danach benötigen wir hier H, drei Überschriftenelemente. Der Text wird von Webdesign-Agenturen verfasst. Außerdem brauchen wir hier einen Absatz mit etwas Klamauk, um hier ein paar Damen unterzubringen, ich werde Lehm eintippen Dann müssen wir hier die Anzahl der Wörter angeben. In diesem Fall werde ich deine 15 Dummy-Wörter einfügen. Jetzt werde ich die Eingabetaste drücken. Wie Sie sehen können, haben wir hier einen Dummy-Text mit 15 Wörtern In Ordnung, lassen Sie uns über den ersten Punkt sprechen. Wie Sie wissen, werden wir insgesamt vier Artikel haben. Ich werde diese Entwicklung dreimal duplizieren. Und dann müssen wir hier die Symbole und auch die Überschriften ändern die Symbole und auch die Überschriften Der zweite Punkt, ich meine, das zweite Symbol wird ein Festkörper sein Dann brauchen wir FA Earth America. Was die Überschrift angeht, werde ich hier einfügen, Besitzer von Onlineshops. Dann müssen wir den dritten Artikel ändern. Eigentlich haben wir hier einen kleinen Fehler, normal. Lassen Sie uns die Klassen des dritten Symbols ändern. Es werden FA-Marken sein, dann A-Sketch. Was die Überschrift angeht, werde ich Webdesign als Freelancer einrichten Jetzt müssen wir uns um den letzten Punkt kümmern. Wir müssen die Klassen des Symbols ändern , wir brauchen FA Solid FA Store. Was das Überschriftenelement angeht, werde ich Ihre Kleinunternehmer einfügen. Ordnung, ich denke, das entspricht ungefähr dem H-Tel-Aufschlag. Lass uns einen Blick darauf werfen Wie Sie sehen können, haben wir hier das zweite Drop-down-Menü. Ich meine, das H Tl Markup. Und jetzt ist es an der Zeit, diese Elemente zu stylen. Und dafür fahren wir mit der nächsten Vorlesung fort. 16. Das zweite Dropdown stylen: Ordnung, in der vorherigen Lektion haben wir das HTML-Markup für unser zweites Dropdownmenü erstellt HTML-Markup für unser zweites Dropdownmenü Und jetzt ist es an der Zeit, es zu stylen und es dann zum Laufen zu bringen. Gehen wir zurück zum VS-Code und ich werde New Commons für das zweite Drop-down-Menü auswählen, das wir hier benötigen. Dropdown zwei und dann Ende von Dropdown zwei. Wie ihr wisst, werden wir fünf verschiedene Drop-down-Menüs haben , die alle den gleichen Stil haben werden. Anstatt immer wieder dieselben Stile zu schreiben, werde ich sie alle anhand eines gemeinsamen Klassennamens auswählen , den wir den Drop-down-Menüs zugewiesen haben. Dieser Klassenname hier, Drop-down-Liste. Ich werde sie alle auswählen. Holen Sie sich hier einige dieser Stile in den gängigen Stilen. Nun, diese beiden Codezeilen positioniere ich, absolut und an oberster Stelle. Außerdem werden wir hier eine Hintergrundfarbe haben. Dann diese drei Codezeilen, Grenzradius, Box Shuttle und Padding Außerdem werde ich mir diese Stile schnappen und sie auch hier hinzufügen Als Nächstes ändere ich hier kam statt Dropdown eine, die wir hier brauchen, Dropdown. Eigentlich werde ich mir diesen Code schnappen und ihn hier einfügen. Außerdem werde ich die untergeordnete Auswahl von hier entfernen, untergeordnete Auswahl von hier entfernen da wir für jedes Navigationselement ein Dreieck benötigen. Eigentlich bin ich der Meinung, dass alles bereit ist. Lass uns zum Browser gehen und prüfen, ob alles gut funktioniert. Wie Sie sehen können, werden einige dieser Stile auf das Dropdown angewendet, das zweite Dropdown bereits. Gehen wir zum VS-Code , wählen das zweite Drop-down-Menü aus und fügen Sie ihm auch einige Stile hinzu. Wir müssen hier die Breite als 90 Ram definieren. Dann brauchen wir die Höhe, es werden 37 Rams sein. Ich definiere die linke Position, es wird -27 Ram sein Und dann müssen wir Flexbooks verwenden. Lassen Sie uns die Anzeige auf Flex setzen und die Ergebnisse überprüfen. Wie Sie sehen können, haben wir jetzt viel bessere Ergebnisse. Die Elemente sind schön horizontal in einer Reihe angeordnet. Jetzt müssen wir sie auswählen. Personalisieren. Wählen wir den Kundenartikel aus, den ich auf 100% setzen werde . Dann müssen wir hier die Marge auf Null setzen. Und dann 0,5 Ram. Wir brauchen hier 0,5 Ram. Außerdem werde ich Padding definieren, lass es uns auf 0,7 Ram setzen Jetzt haben wir etwas Platz zwischen den Elementen. Als Nächstes verwende ich wieder Flexbooks, um die Elemente innerhalb des Artikels des Kunden auszurichten . Lassen Sie uns die Anzeige auf Flex setzen. Dann müssen wir die Richtung ändern, weil wir Elemente vertikal ausrichten müssen. Und dafür müssen wir die Flex-Richtung auf die Spalte einstellen. Außerdem werde ich das Align Items Center verwenden. Okay? Wie Sie sehen können, werden die Elemente in den Objekten mithilfe von Flexbooks in der Mitte platziert. Setzen wir den Cursor auf den Zeiger. Okay, als Nächstes werde ich die Hintergrundfarbe für jedes Kundenelement ändern. Wie Sie sich erinnern, hat jedes Element eine andere Hintergrundfarbe mit linearem Farbverlauf. Machen wir also weiter und machen das für jeden Artikel. Ich werde den ersten mit der Kinderauswahl auswählen. Ich werde hier Nummer eins spezifizieren. Was den Hintergrund angeht, müssen wir, wie gesagt, einen linearen Farbverlauf verwenden. Das erste , was wir hier tun müssen, ist die Richtung zu definieren. Ich werde es auf 135 Grad einstellen. Als Nächstes definiere ich die erste Farbe, die eine Sieben sein wird. Was die zweite Farbe angeht, so wird es eine Sieben sein. Lassen Sie uns die Ergebnisse überprüfen. Wie Sie sehen können, hat das erste Element eine Hintergrundfarbe. Ich werde die Ecken des Artikels abrunden. Verwenden wir dafür hier den Grenzradius mit dem Wert eine Rampe. Jetzt haben wir hier einen schönen Grenzradius. Lassen Sie uns auch die Farbe für den Rest der Artikel ändern. Ich werde diesen Code dreimal duplizieren, dann werde ich die Zahlen ändern. Wir brauchen Zahlen von eins bis vier. Was die Farben angeht, werde ich sie ändern. Die erste Farbe für den zweiten Artikel wird F 2f6ff sein Was den zweiten Artikel angeht, werden es neun CAD sein. Schauen wir uns den zweiten Artikel an, den wir hier in himmelblauer Farbe haben Als Nächstes müssen wir die Farben für den dritten Artikel ändern. Die erste Farbe wird F1fd, F sieben sein. Was die zweite Farbe angeht, machen wir sie zu F, F, F. Sie ist grün Und jetzt müssen wir die Farben für den letzten Artikel ändern, wir werden hier FFF vier ED einfügen Für die zweite Farbe fügen wir hier 87c5 hinzu. Ordnung, also haben alle vier Elemente eine schöne und coole Hintergrundfarbe mit linearem Verlaufseffekt Jetzt müssen wir uns um die Elemente in den Gegenständen kümmern . Lass uns weitermachen und mit den Telefonatomen beginnen. Zuallererst werde ich die Größe der Artikel erhöhen . Lassen Sie uns hier Elemente auswählen und die Telefongröße auf zehn Ram setzen. Wie Sie sehen können, ist die Größe der Symbole größer. Jetzt müssen wir die Farben für jeden Artikel separat ändern . Wir müssen den ersten Artikel auswählen , gefolgt vom Telefonsymbol. Lassen Sie uns die Farbe auf AC 63 A setzen ausgehen, dass das erste Telefonsymbol seine Farbe geändert hat wir davon ausgehen, dass das erste Telefonsymbol seine Farbe geändert hat, machen wir dasselbe für die restlichen Symbole. Ich werde diesen Code dreimal duplizieren und die Nummern der Kartenauswahl sowie die Farben ändern Die zweite Farbe wird 15f3 sein. Dann werden wir hier einen F C F 77 haben. Was das letzte Symbol betrifft, das ich hier verwenden werde , Farbe FF 8645 Wie Sie sehen können, sehen die Symbole ziemlich gut aus, sie haben unterschiedliche Farben Jetzt müssen wir uns um die Überschriften kümmern, also lasst uns weitermachen und Überschriften auswählen Wir benötigen den Artikel Ihres Kunden, gefolgt von dem Element H mit drei Überschriften Ich werde das Telefon vergrößern. Es wird 2,5 Fram sein. Dann haben wir hier das Gewicht des Handys. Ich werde es auf 300 setzen. Als Nächstes müssen wir Text in Großbuchstaben umwandeln. Außerdem werde ich eine Linie zur Mitte setzen. Als Nächstes werde ich die Linienhöhe ändern. Stellen wir es auf 3,5 Ram ein. Und außerdem etwas Platz am unteren Rand mit dem Wert 0,7 Ram schaffen . Jetzt sehen die Überschriften viel besser aus. Als Gast müssen wir die Farben der Überschriften ändern, und die Farben sollten den Farben der Symbole entsprechen Ich werde das auf einfache Weise tun. Ich werde hier einen Selektor für die Überschrift hinzufügen, wir benötigen den Artikel Ihres Kunden Dann brauchen wir den Chart-Selektor. Wir müssen hier einen angeben. Wir müssen hier H drei Überschriftenelemente hinzufügen. Kopieren wir den Selektor und fügen ihn für die restlichen Elemente Ich werde die Nummern der Diagrammauswahl ändern. Wir brauchen hier Zahlen von eins bis vier. Lass uns zum Browser gehen. Wie Sie sehen können, haben die Überschriften die richtigen Farben und sie sehen ziemlich gut aus Das einzige, was ich tun muss, ist das Leistungsdiagramm anzupassen Lassen Sie uns den Artikel des Kunden auswählen, gefolgt von den Elementen. Lassen Sie uns die Schriftgröße auf 1,6 Ram setzen. Dann wird die Schriftstärke 300 sein. Außerdem werde ich die Mitte der Textzeile zentrieren. Jetzt sieht eigentlich alles ziemlich gut aus. Mit dem zweiten Drop-down-Menü sind wir fertig. Jetzt ist es an der Zeit, weiterzumachen und das dritte Drop-down-Menü zu kümmern. 17. Das HTML-Markup für das dritte Dropdown erstellen: Ordnung, in der vorherigen Lektion haben wir die Gestaltung des zweiten Dropdownmenüs abgeschlossen Ich meine, das Drop-down-Menü des Kunden. Jetzt ist es an der Zeit, weiterzumachen und das dritte Drop-down-Menü zu erstellen Schauen wir uns das fertige Projekt an. Wenn wir mit der Maus über das Produktelement fahren, sehen wir hier das dritte Drop-down-Menü, das meiner Meinung nach ziemlich gut aussieht Wir haben hier ein paar verschiedene Symbole und auch einige Details zu den Produkten Und unten kannst du sitzen. Als Erstes müssen wir das HTML-Markup erstellen, wir müssen den dritten Navigationspunkt finden, der Produkte ist, und nach dem Link-Element, ich meine den schließenden Link-Tag, müssen wir neue Kommentare für die drei Drop-down-Menüs einfügen Dann öffne ich das Tag mit der Dropdownliste für die Klassen und das Drop-down-Menü mit den drei Als Nächstes öffne ich ein weiteres Dip-Tag, sich um Produkte handeln wird. Es wird die Hülle des Inhalts sein. Als Nächstes werde ich hier das Produkt selbst einfügen. Dieses Element wird Phonosomicu und zwei Span-Elemente enthalten Phonosomicu und Wenn wir uns das Drop-down-Menü ansehen, werden Sie hier das Phonosomicu und auch die beiden Span-Elemente sehen . Fügen wir hier I-Elemente mit den Klassen Solid ein, einen Dann öffne ich T. Ich werde hier zwei Span-Elemente einfügen Das erste wird Theme und Page Builder sein. Dann brauchen wir das zweite Span-Element , in das ich den folgenden Text einfügen werde, das Thema Nummer eins und Visual Page Builder. Lassen Sie uns über die Produkte insgesamt sprechen, wir werden fünf Produkte haben, daher werde ich diesen Artikel viermal duplizieren. Und dann müssen wir hier geringfügige Änderungen vornehmen. Ich werde die Phonosomicons und auch den Inhalt des Span-Elements ändern die Phonosomicons und auch den Inhalt des Das zweite Phonosomicon wird eine feste Datei sein, dann wird das erste Span-Element ein Page Builder-Plug-In sein dann wird das erste Span-Element ein Page Builder-Plug-In sein . Was das zweite Span-Element angeht, werde ich Insitu-Themen und Layouts Dann wird das dritte Phonosomicon eine Phase sein, ein solides ein Was die Pan-Elemente angeht, werde ich Ihr zusätzliches Magazin-Thema einfügen Was das zweite Sanelement angeht, fügen wir dann das beste Theme für Blogger Um 16:00 Uhr wird ein fester Umschlag wie die Panels sein ein fester Umschlag wie Bei der ersten Option handelt es sich um E-Mail-Opt-ins Mal Bloom von Mal Bloom . Was das zweite betrifft, wird Panelment das ultimative E-Mail-Opt-Plugin sein das ultimative E-Mail-Opt-Plugin Was das letzte Produkt angeht, wird das Telefon solide sein das Panel angeht, das ich bin, füge dein Was die zweiten Telefone angeht, wird Micon das Teilen in sozialen Netzwerken fördern Ordnung, und das Letzte, was ich tun muss, ist die Schaltfläche zu erstellen , die wir unten einfügen müssen Lass uns den Knopf öffnen. Der Typ wird Button sein. Was den Inhalt angeht, werde ich mich anmelden, um Ok herunterzuladen. Das ist ungefähr das dritte Drop-down-Menü Ich meine das H-T-Markup. Lassen Sie uns die Ergebnisse überprüfen. Wenn ich mit der Maus über den Produktartikel fahre , wird hier das Drop-down-Menü angezeigt Es gibt bereits einige Stile, da wir in der letzten Vorlesung einige gängige Stile für Dropdowns definiert haben in der letzten Vorlesung einige gängige Stile für Dropdowns Daher gibt es bereits einige Stile. Jetzt müssen wir dafür sorgen, dass es wie die fertige Version aussieht dass es wie die fertige Version Fahren wir mit der nächsten Vorlesung fort. 18. Das dritte Dropdown stylen: In der letzten Lektion haben wir das HTML-Markup für das dritte Drop-down-Menü erstellt das HTML-Markup für das dritte Drop-down-Menü Wie Sie sehen können, enthält das Dropdown bereits einige Stile, da wir bereits einige gängige Stile für jedes Dropdown definiert haben . Jetzt müssen wir mit dem Styling des dritten Drop-down-Menüs fortfahren und es fertigstellen. Gehen wir zum VS-Code und fügen neue Kommentare für die drei Drop-down-Menüs ein. Lassen Sie uns weitermachen und Dropdown drei auswählen. Ich werde Breite und Höhe definieren. Die Breite wird 40 sein. Was die Höhe angeht, werde ich sie auf 47 setzen . Als nächstes definiere ich die linke Position, sie wird 50% betragen. Außerdem müssen wir das Element mit transform translate x -50% zensieren . Das Element wurde perfekt in der Mitte positioniert Schließlich füge ich hinzu, dass das Drop-down-Menü tatsächlich eine Polsterung hat, aber ich werde den Standardstil überschreiben Lassen Sie uns jetzt Padding verwenden. Standardmäßig hat jedes Dropdown Pad zwei. Und ich werde die Polsterung an der Oberseite ändern und daraus einen Ram machen Was die restlichen Seiten angeht, belasse ich es bei zwei M. In Ordnung, danach werde ich die Produkte personalisieren diesem Element werden die Produkte, wie gesagt, den Diensten in der ersten Drop-down-Liste, dem Telefon, Atomics und auch diesen Span-Elementen ähnlich sein Wenn ich mir die fertige Version ansehe, werden Sie feststellen, dass sie sich ziemlich ähnlich sind Ich werde diese Kacheln aus dem ersten Drop-down-Menü verwenden . Scrollen wir nach oben und suchen wir nach den Drop-down-Diensten. Hier haben wir sie. Ich werde hier Produkte hinzufügen. Mal sehen, was wir gerade haben. Wie Sie sehen können, sind die Symbole und die Bedienfelder horizontal in einer Reihe angeordnet Fahren wir fort und fügen hier Produkte I hinzu. Jetzt sind die Phonosomicons nicht sichtbar, da wir ihre Farben separat definieren müssen Jetzt sind die Phonosomicons nicht sichtbar, da wir ihre Farben separat definieren müssen . Dafür bin ich eigentlich, lassen Sie uns diese Leerzeichen von hier aus loswerden Ich werde hier Produkte der ersten Kategorie hinzufügen hier Produkte der ersten . Wenn wir dann das Ergebnis überprüfen, werden Sie sehen, dass das erste Phonosomicon seine Hintergrundfarbe hat und es ziemlich gut aussieht Wir müssen dasselbe für den Rest der Symbole tun. Ich werde diesen Selektor kopieren und hier bearbeiten. Lassen Sie uns den Anchit-Selektor ändern. Wir brauchen hier zwei, dann machen wir dasselbe für das dritte Element, auch für das vierte, und wir brauchen dasselbe auch für das fünfte Symbol Insgesamt werden wir fünf Produkte haben. Lassen Sie uns nachsehen, wie Sie auf dem Telefon sehen können, tolle Symbole ziemlich gut aus. Wir brauchen auch hier den gleichen Hover-Effekt. Ich meine, bei diesem Hover-Effekt fügen wir hier auch den Selektor für Produkte Wir brauchen Hover, dann Elemente. Jetzt haben wir den gleichen Hover-Effekt. Ordnung, als Nächstes muss ich mich um die Wirbelsäulenelemente kümmern Ich werde hier ein Produkt hinzufügen , das die Hülle der Spannelemente ist Jetzt sind diese Spinelemente vertikal ausgerichtet. Als Nächstes füge ich hier das Produkt und dann das Span-Element Dadurch wird die Telefongröße der Span-Elemente geändert. Wie Sie sehen können, hat sich die Telefongröße geändert. Jetzt müssen wir jedes Span-Element anpassen. Ich fange mit dem ersten an. Fügen wir hier Produkte hinzu und dann das Span-Element. Bei der Diagrammauswahl benötigen wir das erste Span-Element. Wenn ich das überprüfe, werden Sie sagen , dass das erste Span-Element angepasst ist Jetzt müssen wir die Farben des ersten Lüfterelements ändern. Wir brauchen die richtigen Farben. Wir haben es im ersten Drop-down-Menü. Ich gehe hier zu einer neuen Auswahl für die Produkte. Wir brauchen Produkt Child One. Dann brauchen wir Entwicklung, gefolgt von den Span-Elementen, wiederum mit Child-Selektor Jetzt müssen wir uns an einen halten. Lass uns weitermachen und nachschauen. Wie Sie sehen können, hat das erste Pan-Element eine andere Farbe. Dieselbe Farbe, die wir für das Symbol haben. Machen wir dasselbe für die restlichen Span-Elemente. Ich werde diesen Selektor hierher kopieren. Wir müssen die Nummer des Produkts ändern. Es wird an zweiter Stelle stehen. Dann machen wir dasselbe für das dritte Produkt. Als nächstes haben wir Produkt Nummer vier, und dann brauchen wir dasselbe für Produkt Nummer fünf. Wie Sie sehen können, haben alle Span-Elemente, die ersten Span-Elemente, ihre Farben geändert und sie sehen ziemlich gut aus. Jetzt müssen wir uns um die zweiten Span-Elemente kümmern. Ich werde hier den Selektor für die Produkte hinzufügen , die wir hier benötigen, den Span mit untergeordnetem Selektor, wir brauchen hier den zweiten Wie Sie sehen können, sieht das zweite Phänomen ziemlich gut aus. Ordnung, als Nächstes werde ich den Raum zwischen den Produkten definieren Ich gehe zurück zum dritten Dropdown. Lassen Sie uns Produkte auswählen und die Marge definieren. Wir benötigen oben und unten eine Marge von 1,7 RAM. Was die linke und rechte Seite betrifft, so wird es Null sein. Jetzt müssen wir uns um den Boden kümmern. Lass uns weitermachen und es stylen. Wählen Sie Drop-down-Liste drei, gefolgt von der unteren. Ich definiere die Breite, sie wird 100% sein, dann wird die Höhe vier m betragen. Lassen Sie uns die Hintergrundfarbe ändern. Es wird die lila Farbe sein, die wir hier brauchen, 9544c. Als Nächstes werde ich die Fehlergrenze loswerden. Außerdem werde ich die Schaltfläche mit dem Randradius abrunden, es werden zwei Ram sein. Danach werde ich mich um das Telefon kümmern. Lass uns die Telefongröße ändern. Es wird 1,4 sein, dann werde ich das Telefon zum Einschalten bringen. Lassen Sie uns Text in Großbuchstaben umwandeln und die Farbe ändern. Die Farbe muss weiß sein. Der Button sieht ziemlich gut aus. Als Nächstes werde ich den Abstand zwischen den Buchstaben vergrößern. Lass es uns 0.1 machen. Ändere auch den Cursorzeiger. Schließlich werde ich den Button etwas nach unten platzieren. Lass uns das mit Transform machen. Übersetze y mit dem Wert eins r. Okay, das war's. Das dritte Drop-down-Menü sieht ziemlich gut aus. Und jetzt müssen wir weitermachen und uns um den nächsten kümmern. 19. Das HTML-Markup für das vierte Dropdown erstellen: Ordnung, in der vorherigen Lektion haben wir Design des dritten Drop-down-Menüs abgeschlossen, was meiner Meinung nach ziemlich gut aussieht Und jetzt müssen wir weitermachen und anfangen , das nächste Drop-down-Menü zu erstellen. Ich meine das Drop-down-Menü für den Kontaktlink. Schauen wir uns das fertige Projekt an. Hier haben wir das vierte Drop-down-Menü. Es besteht aus Phononen und einigen Links. Und das haben wir auch hier unten unter dem Button. Okay, lassen Sie uns weitermachen und mit der Erstellung des HTM-Markups beginnen . Wir müssen das vierte Objekt ohne Kontakt finden. Und ich werde hier Kommentare für Dropdown 4 einfügen. Als Nächstes öffne ich Deep Tag, das zwei verschiedene Klassen haben wird. Das erste wird ein allgemeines Drop-down-Menü für Klassennamen sein . Was das zweite betrifft , so wird es ein Drop-down-Menü mit vier individuellen Klassennamen sein . Dann müssen wir ein weiteres tiefes Element öffnen und das sind die Kontaktoptionen. Als Nächstes füge ich ein weiteres Tag ein. Es wird aus den Elementen ph und span bestehen. Ich werde einen durchsichtigen A-Umschlag der Klasse öffnen. Als Nächstes gehe ich zum Gremium des Instituts, das sich insgesamt mit Ihnen befassen wird. Wir werden sechs verschiedene Entwicklungen haben. Lassen Sie uns das fünfmal duplizieren dann die Pontons und auch die Paneele austauschen Das zweite Symbol wird ein solides Gemeingut sein. Was das Span-Element angeht, werde ich den Chat mit dem Vertrieb stören. Dann wird das nächste Phonosomicon ein solides, ein Benutzer, ich bin gestört, Konten und Tabletten sein ein Benutzer, ich bin gestört, Konten Dann wird das nächste Phonosomicon ein Feststoff sein. Ein Schraubenschlüssel. Was die Spannelemente angeht, ich störe den technischen Support, dann haben wir hier eine solide Gruppe von Leuten Außerdem werde ich den Inhalt dieses Panels ändern. Es wird als Gemeinschaft sein. Schließlich müssen wir den letzten Punkt ändern. Das Telefon wird aus festen Dateizeilen bestehen. die Panels angeht, werde ich in der Dokumentation darauf eingehen Okay, das Letzte, was wir tun müssen , ist den Boden zu erstellen Fügen wir hier ein Button-Tag mit dem Typ Button ein. Was den Inhalt des Buttons angeht, werde ich mit uns teilen. Okay, auf dieser Seite geht es um das H-tl-Markup des vierten Dropdownmenüs Wie Sie sehen können, haben wir hier das H Tl-Markup, das bereits einige Stile hat, weil wir einige gängige Stile für Dropdowns definiert haben Daher werden diese Stile auch auf das vierte Dropdown angewendet Wir müssen das Drop-down-Menü weiter gestalten. Und dafür fahren wir mit der nächsten Vorlesung fort. 20. Das vierte Dropdown stylen: In der vorherigen Vorlesung haben wir das HTML-Markup für unser viertes Drop-down-Menü vorbereitet HTML-Markup für unser viertes Drop-down-Menü Und jetzt müssen wir es stylen. Gehen wir zum VS-Code und fügen neue Kommentare ein. Vier. Wählen Sie vier aus, dann wähle ich das Drop-down-Menü mit dem individuellen Klassennamen. Wenn Sie vier auswählen, müssen wir mit der Höhe definieren. Die Breite wird 28 Ram betragen. Was die Höhe angeht, werde ich 233 Ram einstellen. Wie Sie sehen können, ist das Drop-down-Menü größer. Als Nächstes werde ich die Position ändern. Ich möchte es in der Mitte platzieren. Dafür müssen wir die linke Position definieren und sie auf 50% setzen. Um das Element dann perfekt zu zentrieren, müssen wir transform, translate x für den Wert -50% verwenden . Nun, wie Sie sehen können, ist das Drop-down-Menü perfekt zentriert Abschließend werde ich die Polsterung definieren. Lassen Sie uns das Padding auf einen Ram oben und dann auf den Rest der Seiten auf Ram einstellen dann auf den Rest der Seiten auf Ram Wir müssen m dreimal so groß sein, wie die Polsterung auf das Element angewendet wird Okay, als Nächstes werde ich die Entwicklung anpassen. Ich meine Entwicklung, die das Phonemicon und dieses Pan-Element beinhaltet Lassen Sie uns weitermachen und Kontaktoptionen auswählen. Gefolgt von einer Tiefe definiere ich den Rand , der oben und unten 1,4 m und links und rechts Null sein wird . Außerdem werde ich auf Zeiger setzen. Wie Sie sehen können, wird der Rand angewendet. Wir haben einen gewissen Abstand zwischen den Entwicklungen. Als Nächstes nehme ich das Phontosomicon ab. Lassen Sie uns fortfahren und Kontaktoptionen auswählen, gefolgt vom Element Ich werde die Breite auf 24 m einstellen. Dann wird die Schriftgröße des Phontosomicons zwei sein Und wir müssen auch die Farbe ändern. Ich werde Farbe 3293 verwenden. Lassen Sie uns das Ergebnis überprüfen. Wie Sie sehen können, sehen die Telefon-Osomicons ziemlich gut aus. Als Nächstes müssen wir die Span-Elemente anpassen . Ich wähle Kontaktoptionen aus, gefolgt vom Span-Element. Als Erstes werde ich die Telefongröße ändern. Es wird 1,6 Ram sein. Dann werde ich Text in Großbuchstaben umwandeln. Ändere auch die Farbe. Ich werde dieselbe Farbe verwenden, die wir für das Phonesomicon verwendet haben Erstellen Sie außerdem einen gewissen Abstand zwischen den Buchstaben, indem Sie einen Buchstabenabstand mit dem Wert 0,1 Ram verwenden einen Buchstabenabstand mit dem Wert 0,1 Ram Gehen wir zum Browser. Wie Sie sehen können, sehen die Fensterelemente ziemlich gut aus. Und das einzige, was Sie tun müssen, ist, die Schaltfläche zu stylen, die sich darunter befindet. Lassen Sie uns weitermachen und unten Dropdown Four auswählen. Zuallererst werde ich mit in der Höhe definieren. Die Breite wird 100% betragen. Was die Höhe angeht, werde ich sie auf Form einstellen. Außerdem müssen wir die Hintergrundfarbe ändern. Lassen Sie uns hier die Farbe 2371 verwenden. Hier haben wir die Schaltfläche als Nächstes, um sie aus der Standardreihenfolge zu Außerdem werde ich den Button abrunden. Lassen Sie uns weitermachen und den Grenzwert auf „Nein“ setzen. Was den Grenzradius angeht, werde ich ihn jetzt zum Laufen bringen. Unser Button ist viel schöner. Als nächstes müssen wir uns um die Schrift kümmern. Lassen Sie uns zunächst die Schriftgröße definieren. Es wird 1,4 Ram sein. Dann werde ich das Telefon fetter machen , indem ich die Schriftstärke fett verwende Transformiere den Text auch nach Groß- und Kleinschreibung und ändere die Farbe. Die Farbe wird weiß sein. Die Schrift sieht ziemlich gut aus. Das einzige, was ich tun muss, ist, mit dem Buchstabenabstand, 0,1 RAM, etwas Abstand zwischen den Buchstaben zu schaffen mit dem Buchstabenabstand, 0,1 RAM, etwas Abstand zwischen den Buchstaben zu Und außerdem mache ich den Cursorzeiger wieder. Das ist es. Das vierte Drop-down-Menü sieht ziemlich gut aus. Wir haben die Arbeit daran abgeschlossen. Als nächstes müssen wir uns um das nächste Drop-down-Menü kümmern , das das fünfte und das letzte Drop-down-Menü sein wird . Fahren wir mit der nächsten Vorlesung fort. 21. HTML-Markup für das fünfte Dropdown erstellen: Ordnung, in der vorherigen Lektion haben wir die Arbeit an unserem vierten Drop-down-Menü abgeschlossen Ich habe das Drop-down-Menü für den Kontaktlink erstellt. Ich finde es sieht ziemlich gut aus. Und jetzt müssen wir weitermachen und uns um das letzte Drop-down-Menü kümmern, das für die Kontoverknüpfung vorgesehen ist Lassen Sie uns weitermachen und uns das fertige Projekt ansehen. Hier haben wir unser letztes Drop-down-Menü. Wie Sie sehen können, besteht es aus verschiedenen Elementen Wir haben zwei verschiedene Eingaben für Benutzername und Passwort. Dann können Sie hier das Kontrollkästchen sehen , auf das die Schaltfläche folgt. Und unten können Sie einige Links sehen. Wenn Sie Ihren Benutzernamen oder Ihr Passwort vergessen haben, helfen Ihnen diese Links , Ihr Konto wiederherzustellen. Das ist ungefähr das letzte Drop-down-Menü. Wie üblich werde ich das HTML-Markup erstellen und dann werden wir das Markup stylen Lassen Sie uns weitermachen und den Link für Konten finden und neue Kommentare für Dropdown Five erstellen Dann gehe ich zur offenen Entwicklungsumgebung über, die zwei verschiedene Klassen haben wird Dropdown und Dropdown fünf. Dann öffne ich das Formular-Tag. Lassen Sie uns das Action-Attribut loswerden, wir brauchen es nicht. Ich werde hier den Klassennamen hinzufügen, der das Kontoformular sein wird. Innerhalb der Formularelemente, die ich erstellen werde, was die Zähleingabegruppe sein wird, wird es zwei Eingabefelder enthalten. Ich werde das Eingabe-Tag mit dem Typ Text öffnen, und wir benötigen hier auch ein Platzhalterattribut als Wert Ich werde hier den Benutzernamen einfügen. Lassen Sie uns diese Codezeile duplizieren. Das zweite Eingabefeld dient dem Passwort. Ich werde den Typ ändern. Es wird auch ein Passwort sein. Lassen Sie uns das Platzhalterattribut ändern, das wir hier benötigen, das Passwort Okay, schauen wir uns die Eingabegruppe an. Als Nächstes werde ich eine Entwicklung erstellen , die Eingabe und Bezeichnung beinhaltet. Ich meine Eingabe für das Kontrollkästchen. Fügen wir der Entwicklung einen Klassennamen hinzu und er wird aktiviert. Dann werde ich Eingabeelemente einrichten. Der Typ wird ein Kontrollkästchen sein. Außerdem benötigen wir Ihr ID-Attribut mit der Wertprüfung. Als Nächstes öffne ich das Etikett und füge in den vier Attributen Häkchen auch als Text ein. Ich füge Ihr, erinnern Sie sich an mich, wir haben Ihr ID-Attribut verwendet und auch vier Attribute mit den gleichen Werten ein. Schauen wir uns den Browser an. Wenn ich auf das Etikett klicke, wird das Kontrollkästchen aktiviert. Deshalb haben wir diese beiden Attribute mit denselben Werten verwendet . Ordnung, als Nächstes füge ich deinen Button mit der Texttaste ein Ich werde deine Textmember-Sperre einfügen. Danach werde ich einen Absatz erstellen, in den wir den folgenden Text einfügen werden, den Sie vergessen haben. Dann brauchen wir ihre Span-Elemente, ihren Benutzernamen. Als Nächstes brauchen wir wieder Span-Elemente mit dem Textpass. Schließlich brauchen wir hier ein Fragezeichen. Okay, das entspricht ungefähr dem HTML-Markup für Dropdown Five. Hier haben wir das HTML-Markup. Als Nächstes müssen wir diese Elemente stylen. Und dafür fahren wir mit der nächsten Vorlesung fort. 22. Das fünfte Dropdown stylen: In der vorherigen Vorlesung haben wir das HTM-Markup für unser letztes Drop-down-Menü vorbereitet das HTM-Markup für unser letztes Drop-down-Menü Ich meine, das Drop-down-Menü für das Linkkonto. Jetzt müssen wir es anpassen. Eigentlich werden wir die Navigation in dieser Vorlesung beenden. Schauen wir uns das fertige Projekt an, das Drop-down-Menü. Das letzte Drop-down-Menü sollte so aussehen. Gehen wir zum VS-Code und fügen neue Kommentare für Dropdown 5 Dann wähle ich fünf, das Rapper-Deep-Element, und definiere es innerhalb der Höhe Die Breite wird 30 RAM betragen. Was die Höhe angeht, werde ich 32 Ram draus machen. Wie Sie sehen können, hat sich die Größe des Top-Down-Menüs geändert. Als Nächstes werde ich das Element zensieren. Ich werde das mit der linken Position von 50% machen . Außerdem müssen wir translate x mit dem Wert -50% transformieren translate x mit dem Wert . Dadurch können wir das Element perfekt zensieren Wie Sie sehen können, ist das Drop-down-Menü zentriert. Als Nächstes werde ich die Polsterung definieren. Ich werde eine Polsterung von 2,5 Ram auf allen vier Seiten machen. Die Polsterung ist erstellt, der Raum innerhalb des Drop-down-Menüs Das war's mit der Wrapper-Entwicklung. Als Nächstes wähle ich Input Group aus. Ich werde die Eingaben mit Flax Box ausrichten. Wir brauchen Display Flex. Dann müssen wir die Eingaben vertikal ausrichten. Und dafür müssen wir die Richtung der Flexbox ändern und sie zu einer Spalte machen. Okay, das war's mit der Eingabegruppe. Als Nächstes müssen wir die Eingabe selbst anpassen. Lassen Sie uns fortfahren und die Eingabegruppe auswählen, gefolgt vom Eingabe-Tag. Zuallererst werde ich die geschriebene Höhe definieren. Die Breite wird 100% betragen. Was die Höhe angeht, werde ich fünf daraus machen. Lassen Sie uns auch die Hintergrundfarbe ändern. In diesem Fall werde ich die RGBA-Farbe verwenden. Der erste Wert wird 191 sein, dann wird der nächste 213 sein Denn der dritte Wert wird 240 sein. Dann müssen wir die Opazität definieren, und ich werde die Opazität auf 2,4 setzen. Wie Sie sehen können, sich die Größe der Eingaben geändert Und wir haben hier auch eine andere Hintergrundfarbe. Als Nächstes werde ich etwas Platz innerhalb der Eingaben schaffen , und wir benötigen auch etwas Platz zwischen den Eingabefeldern. Ich werde die Polsterung auf 2,5 Ram oben und unten und einen Ram auf der linken und rechten Seite einstellen oben und unten und einen Ram auf der linken und rechten Seite Dann werde ich die Eingaben mit Margin Bottom trennen. Es werden drei Durchläufe sein. Wie Sie sehen können, wurde der Raum innerhalb der Eingaben geschaffen und wir haben die Eingänge auch voneinander getrennt. Als Nächstes werde ich den Standardrahmen mit Border None entfernen . Ich werde die Eingaben leicht abgerundet machen. Wir müssen das mit dem Grenzradius machen und der Wert wird 0,5 sein . Jetzt sehen die Eingaben viel besser aus. Als Nächstes werde ich mich um die Standardeinstellung kümmern. Ich werde die Schriftgröße ändern. Lassen Sie uns die Schriftgröße auf 1,6 Ram setzen. Und ich werde auch die Farbe ändern. Verwenden wir die Farbe 444, die dunkelgrau ist. Jetzt werden die Schrift und die Farbe tatsächlich mit dem Eingabefeld geändert, wir sind fertig. Als Nächstes werde ich die Farbe des Platzhalterattributs ändern Dazu müssen wir die Eingabegruppe und dann die Eingabe auswählen, worauf das Platzhalter-Pseudo, das Platzhalter-Pseudoelement folgt Platzhalter-Pseudo, das Platzhalter-Pseudoelement Das ist ein Pseudoelement, wir brauchen hier Farbe. Ich werde die Farbe 888 verwenden, was eine hellere graue Farbe ist Okay, wie Sie sehen können, wird die Farbe des Platzhalterattributs tatsächlich mit den Eingaben geändert . Wir sind fertig. Als Nächstes werde ich mich um das Kontrollkästchen und das Etikett kümmern . Ich werde die Wrapper-Entwicklung auswählen , bei der die Klassennamen überprüft Ich werde dafür das Kontrollkästchen und das Etikett etwas nach oben verschieben das Etikett etwas nach oben Lassen Sie uns Margin Top mit dem Wert minus zwei verwenden. Wie Sie sehen können, haben sich die Elemente nach oben bewegt. Als Nächstes werde ich mich um das Etikett kümmern, lassen Sie uns das überprüfen, gefolgt von der Bezeichnung, ich werde die Schriftgröße auf 1,6 RAM setzen. Dann brauchen wir einen Teich. Es werden 300, 300 sein. Außerdem werde ich die Farbe ändern. Lass uns Farbe 777 verwenden. Okay, das Kontrollkästchen und das Etikett sehen gut aus. Jetzt kümmere ich mich um den Boden. Lassen Sie uns weitermachen und das Kontoformular auswählen. Gefolgt von unten werde ich auf 100% setzen , dann wird die Höhe voll Ram sein. Ich werde die Rückseite um eine Farbe ändern. Verwenden wir hier Farbe zwei, D zwei DCF, die Größe der Unterseite und auch der Rückseite werden eine Farbe geändert Als Nächstes werde ich den Standardrahmen loswerden. Ich werde den Knopf abrunden. Wir brauchen hier Grenze keinen. Außerdem benötigen wir den Grenzradius mit dem Wert Ram. Jetzt sollten wir viel bessere Ergebnisse haben. Der Button sieht ziemlich gut aus. Jetzt müssen wir uns um das Telefon kümmern. Lass uns die Telefongröße ändern. Stellen wir es auf 1,4 Ram ein. Dann müssen die Schriftstärken mutiger sein. Außerdem werde ich Text in Großbuchstaben umwandeln und die Farbe ändern, ihn weiß machen Wir haben ein viel besseres Ergebnis. Button sieht gut aus, aber wir müssen diesem Element einige Mos-Stile hinzufügen . Ich werde den Abstand zwischen den Buchstaben vergrößern. Machen wir daraus 0,1 Ram. Ändere auch den Cursor, mache ihn zum Zeiger. Wir brauchen etwas Platz oben und unten auf der Unterseite. Ich werde den Spielraum oben auf drei Ram setzen. Dann brauchen wir Null auf der rechten Seite, 1,5 RAM auf der Unterseite und Null auf der linken Seite. Jetzt haben wir viel bessere Ergebnisse. Wir haben oben und unten auf der Schaltfläche etwas Platz. Und das ist eigentlich alles mit dem Button. Als Nächstes müssen wir den Absatz unten anpassen. Wählen wir Kontoformular aus. Lassen Sie uns die Telefongröße auf 1,5 Fram einstellen. Dann brauchen wir Text, eine Linie als Mittelpunkt Außerdem werde ich hier das Telefongewicht 300 hinzufügen. Hier haben wir den Absatz. Denken Sie daran, dass wir hier zwei Links haben. Ich meine Benutzername und Passwort, wir müssen diese beiden Wörter anpassen. Sie sind Span-Elemente. Wir haben hier zwei Span-Elemente. Ich wähle Kontoformular und dann Span. Lassen Sie uns die Farbe des Elements ändern. Es wird 2371 sein. Dann müssen wir den Cursor als Zeiger verwenden. Dann wechsle ich gegen acht, sagen wir 2400, okay? Also sieht eigentlich alles ziemlich gut aus. Mit dem Drop-down-Menü sind wir fertig. Wir können auch sagen, dass wir mit der Navigation fertig sind. Als nächstes müssen wir uns um den nächsten Abschnitt der Landingpage kümmern , nämlich um diesen. Es ist ziemlich nett. Lassen Sie uns mit der nächsten Vorlesung fortfahren und mit dem Aufbau dieses Abschnitts beginnen. 23. Den Abschnitt HTML-Markup für Services erstellen: Ordnung, in der letzten Vorlesung haben wir die Arbeit an der Navigation abgeschlossen Wir haben alle Drop-down-Menüs erstellt. Und jetzt müssen wir weitermachen und mit der Erstellung des nächsten Abschnitts unserer Landingpage beginnen . Schauen wir uns das fertige Projekt an. Der nächste Abschnitt wird sich mit den Diensten befassen. Der Abschnitt wird aus einer Überschrift bestehen, dann werden wir neun verschiedene Dienste haben. Jeder Dienst wird aus einer Ponsomicon-Überschrift und etwas Text bestehen Ponsomicon-Überschrift und etwas Text Und außerdem werden wir hier nette und coole Hintergründe haben hier nette und coole Diese verschiedenen Formen, die meiner Meinung nach nett und cool aussehen. Ordnung, wie üblich werden wir damit beginnen, diesen Abschnitt zu erstellen indem wir das HTML-Markup erstellen Kehren wir zum VS-Code zurück und erstellen wir nach dem Header neue Kommentare für Dienste Dann öffne ich das Abschnitts-Tag mit den Klassendiensten. Als Nächstes öffne ich das Tag, das der Wrapper für den Inhalt sein wird, und weise dem Namen Services den Wrapper zu Im Wrapper öffne ich H ein Überschriften-Tag und füge Ihren Inhalt ein, was wir Ihren Inhalt ein, was Dann öffne ich nach der Überschrift das Dip-Tag und es wird die Liste der Dienste sein Lassen Sie uns zu diesem Element die Liste der Klassennamendienste hinzufügen. In der Liste werde ich die Dienste erstellen. Lassen Sie uns das Tag mit dem Klassennamen-Service öffnen. Wie gesagt, jeder Dienst wird eine Phonosomicon-Überschrift und auch einen Absatz mit etwas Dummy-Text enthalten Phonosomicon-Überschrift und auch einen Absatz mit etwas Ich werde die I-Elemente mit der Klasse einordnen. Ein solider FA-Laptop. Dann, nachdem Phonomicon ich das H-Tag mit drei Überschriften geöffnet habe, wird es die Webseitenerstellung nach dem Überschriftenelement sein Ich öffne den Tag füge dir Dummy-Text mit sagen wir 20 Wörtern ein Hier ist es. Okay, das ist es. Was den ersten Service angeht, werden wir insgesamt neun Dienste haben. Ich werde dieses Element achtmal duplizieren. Dann werde ich die Phonetik und die Überschriften ändern. Das zweite Phonomicon wird aus festen FA-Pfeilen festen FA-Pfeilen Bei den Überschriftenelementen wird es um Content Management gehen Dann wird das dritte Symbol FA Brands sein , der A-Logger. Was das Überschriftenelement angeht, werde ich zum Insider-Bloggen Dann wird das nächste Phonomicon ein Festkörper sein, ein Globus. Was die Überschrift angeht, wird es Handel sein Dann werden wir hier eine Marke haben , eine Suchmaschine. Dann müssen wir das Überschriftenelement ändern, es wird CEO sein. Dann ändere ich das Phonosomicon, es wird ein Festkörper Was das Überschriftenelement angeht, das ist Benutzerverwaltung. Das nächste Phonomicon wird ein solides FA-Ticket sein. Lassen Sie uns das Element H mit den drei Überschriften ändern, es wird mehrsprachig unterstützt Als Nächstes werden wir hier ein solides FA-Hashtags für die Überschrift haben: Integration in soziale Medien Und das letzte Symbol im Service wird Parents FA, Rocket Chat sein Parents FA, Rocket Chat Das war's, mit den Diensten. Schauen wir uns das Ergebnis an. Hier haben wir alle Dienste und alle Symbole werden angezeigt. Das einzige , was Sie tun müssen, ist , zwei Hintergründe zu erstellen. Für diese beiden Formen benötigen wir zwei tiefe Elemente direkt über dem letzten Bereich. Wir brauchen hier den Klassennamen Services G eins und dann Services PG zwei. Okay. Das HTML-Markup des Servicebereichs wird erstellt Die letzten beiden Elemente, ich meine, diese Hintergründe sind noch nicht sichtbar weil es sich nur um leere Elemente handelt Jetzt ist es an der Zeit, diesen Abschnitt anzupassen. Und dafür fahren wir mit der nächsten Vorlesung fort. 24. Abschnitt Styling-Services: Ordnung, also in der vorherigen Vorlesung haben wir das HTML-Markup für unseren neuen Abschnitt erstellt , ich meine den Servicebereich Jetzt ist es an der Zeit, weiterzumachen und diesen Abschnitt zu gestalten. Gehen wir zurück zum VS-Code und fügen neue Kommentare nach dem Header Wir benötigen hier Kommentare für Dienste. Dann wähle ich bei den Diensten das Abschnittselement aus. Zuallererst werde ich innerhalb der Höhe definieren. Die Breite wird 100% betragen. Was die Höhe angeht, werde ich die Höhe 170 und die Höhe des Ansichtsfensters festlegen Das bedeutet, dass die Höhe 170% des Sichtfensters einnimmt 170% des Sichtfensters einnimmt Wenn wir den Browser überprüfen, werden Sie feststellen, dass der Abschnitt eine Höhe von 170% der angezeigten Ansicht Okay, lassen Sie uns vorerst über das Abschnittselement sprechen. Als Nächstes wähle ich Services Wrapper aus. Ich definiere mit 60% und ändere dann die Hintergrundfarbe Es wird weiß sein. Außerdem werde ich hier einen Boxschatten hinzufügen um das Element sichtbar zu machen. Der Boxschatten wird die folgenden Werte haben 02 Ram, dann haben wir sechs Ram. Was die Farbe angeht, werde ich den RGBA-Wert verwenden. Ich werde hier 130 und dann 162235 einfügen. Und dann brauchen wir Opazität, und sie wird 0,3 sein. Nun, wie Sie sehen können, hat das Element einen Kastenschatten und es ist auf der Seite sichtbar Danach werde ich mich um die Position des Wrappers kümmern Position des Wrappers Lassen Sie uns die Position auf absolut setzen. Ich werde den Services-Wrapper nach seinen übergeordneten Elementen positionieren , was in diesem Fall Services sind Wir benötigen die relative Position für das übergeordnete Element. Ich werde die Position auf 50% setzen , dann wird die linke Position auf 50% gesetzt . Ich versuche, das Element auf der Seite dafür perfekt zu zensieren das Element auf der Seite dafür perfekt Wie Sie bereits wissen, müssen wir Transform mit Übersetzungsfunktion verwenden Transform mit Übersetzungsfunktion Und wir müssen hier -50% und -50% hinzufügen. Wir brauchen hier zwei -50%, weil wir versuchen , das Element vertikal und horizontal zu zensieren Wenn ich jetzt im Browser nachschaue, wirst du feststellen, dass das Element in beiden Richtungen perfekt zentriert ist perfekt zentriert Ich meine vertikal und horizontal. Ordnung, danach werde ich mit Polsterung etwas Platz schaffen Stellen wir die Polsterung oben und unten auf sechs Ram ein. Was die linke und rechte Seite angeht, werde ich die Polsterung auf Null setzen Wir haben oben und unten etwas Platz . Als Nächstes mache ich das Element leicht abgerundet, indem ich einen Randradius mit dem Wert 1 Ram verwende. Außerdem werde ich die Elemente mithilfe der Flachsbox ausrichten, die wir hier benötigen, um Flachs anzuzeigen Dann werde ich die Flex-Elemente vertikal platzieren. Wir müssen die Richtung der Flexbox ändern. Es wird eine Kolumne sein. Außerdem werde ich die Elemente in der Mitte ausrichten. Wie Sie sehen können, werden die Elemente vertikal in der Spalte platziert vertikal in der Spalte und auch der Inhalt wird in der Mitte platziert. In Ordnung, lassen Sie uns über den Services-Wrapper sprechen. Als Nächstes bin ich der Stil der Überschriftenelemente. Lassen Sie uns weitermachen und den Services-Wrapper mit H einem Überschriftenelement auswählen Services-Wrapper mit H einem Überschriftenelement Ich werde die Telefonfamilie wechseln. In diesem Fall werde ich Telefone namens Mull Cursive verwenden. Dann werde ich das Telefon vergrößern, es wird drei Ram sein Lassen Sie uns auch Text in Großbuchstaben umwandeln. Dann ist das Telefon, das Telefon wird fett gedruckt sein und auch den Anrufer wechseln Ich werde Anrufer 39 benutzen. 4353. Es hat eine dunkelgraue Farbe Schauen wir uns die Überschrift an. Wie Sie sehen können, sieht die Überschrift ziemlich gut aus. Ich werde den Abstand zwischen den Buchstaben mithilfe des Buchstabenabstands vergrößern . Es wird 0,1 Ram sein. Außerdem werde ich am unteren Rand des Elements etwas Platz schaffen , indem ich Marching Bottom mit dem Wert acht Ram verwende Okay, das war's, mit der Überschrift. Als nächstes werde ich mich am wenigsten um die Dienste kümmern. Lassen Sie uns weitermachen und die Liste der Dienste auswählen. Ich werde wieder Flexbox benutzen. Lassen Sie uns das Display auf Flex setzen. Um dann die Flex-Elemente zu umschließen, um die Elemente in ein paar verschiedenen Zeilen zu platzieren , müssen wir Wrap mit dem Wert p verwenden. Außerdem verwende ich Justify Content Center , verwende ich Justify Content Center um die Flex-Elemente horizontal zu zentrieren. Im Moment wird hier nichts geändert, weil wir den Diensten, also den Elementen selbst, die Höhe zuweisen müssen . Sobald wir das getan haben, werden die Elemente in verschiedene Rollen eingeteilt , so wie wir es in der fertigen Version haben. Okay, als Gast müssen wir den Service selbst auswählen und mit Höhe definieren. Die Breite wird 28 Ram betragen. Was die Höhe angeht, werde ich 35 Ram draus machen. Wie Sie sehen können, haben wir drei verschiedene Reihen, und in jeder Zeile können Sie die drei Elemente sehen. In Ordnung, das Layout ist fertig. Jetzt müssen wir die Artikel anpassen. Ich werde Platz zwischen den Elementen auf der linken und rechten Seite schaffen . Ich werde Margin verwenden. Wir brauchen hier Null oben und unten und 2,5 Fram auf der linken und rechten Seite Jetzt haben wir Platz zwischen den Diensten. Als Nächstes werde ich wieder Flexbox benutzen. Lassen Sie uns das Display auf Flex setzen. Dann werde ich die Richtung ändern , weil die Elemente innerhalb der Dienste vertikal platziert werden müssen. Dafür müssen wir die Flex-Richtung auf die Spalte einstellen. Dann werde ich die Elemente mithilfe einer Linie zentrieren. Artikel zentrieren und rechtfertigen Inhalt, den wir hier brauchen, Inhaltszentrum. Wie Sie sehen können, befinden sich die Elemente innerhalb der Dienste in der Mitte. Als Nächstes werde ich mich um die Phonoicons kümmern Wählen wir Service, gefolgt von dem Element, das ich innerhalb der Höhe setzen werde , beide auf zehn Dann werde ich die Hintergrundfarbe ändern. Es wird weiß sein. Außerdem brauchen wir Box Shadow, es wird 01 Ram Ram sein. Dann brauchen wir RGBA-Farbe. Die Werte werden 75 sein, dann 1192 zu eins, und die Opazität wird 0,15 sein . Hier haben wir Ich werde die Felder um ihn herum mit einem Randradius anordnen, er wird bei 50% liegen. Jetzt haben wir Als Nächstes werde ich die Symbole in der Mitte dieser Kreise platzieren . Dafür werde ich wieder Flexbox verwenden. Wir benötigen Display Flex und dann ein Line Item Center und ein Justify Content Center. Jetzt werden die Symbole in der Mitte der Kreise platziert. Lassen Sie uns sie vergrößern, indem wir die Schriftgröße auf Formular einstellen. Außerdem werde ich am unteren Rand der Symbole etwas Platz schaffen . Lassen Sie uns den unteren Rand zwei M setzen Okay, hier haben wir die Telefonsymbole. Jetzt müssen wir als Gast die Farben für jedes Symbol ändern. Ich werde mit dem ersten Symbol beginnen, aber bevor wir das tun, werde ich mir die fertige Version ansehen. Wie Sie sehen können, hat jedes Symbol eine andere Farbe. Wenn Sie sich jedoch die Farben ansehen, werden Sie feststellen, dass wir hier einen linearen Verlaufseffekt haben. Ich werde diesen Effekt erzeugen. Zuallererst werde ich den ersten Dienst mithilfe der Chatauswahl auswählen Dann brauchen wir Element. Um mit dem Textelement einen linearen Verlaufseffekt zu erzielen, verwende ich die folgende Technik. Zuallererst benötigen wir einen Hintergrund mit linearer Verlaufsfunktion. Ich füge hier ein. Die erste Farbe wird weiß sein. Was die zweite Farbe angeht, werde ich eins bis 59 einfügen. Außerdem werde ich hier 60% hinzufügen. Das bedeutet, dass Farbübergang nach 60% der Elemente beginnt. Wenn wir den Browser überprüfen, werden Sie feststellen, dass das Phonosomicon immer noch die schwarze Farbe hat, Hintergrund des Kreises jedoch Eigentlich brauchen wir das nicht. Wir müssen die Farbe des Icons selbst ändern. Um das zu tun, werde ich hier zwei verschiedene Eigenschaften hinzufügen. Der erste wird ein Web-Ket-Hintergrundclip sein. Der Wert wird Text sein. Bei der zweiten Eigenschaft wird es sich um die Web-Ket-Textfeldfarbe handeln. Ich werde hier transparent als Wert hinzufügen. Wie Sie sehen können, haben wir hier ein schönes und cooles Ergebnis Das Ponme-Symbol hat einen linearen Verlaufseffekt Machen wir dasselbe für den Rest der Symbole. Ich werde diesen Code achtmal duplizieren, weil wir insgesamt neun Symbole haben werden. Lassen Sie uns die Zahlen des Selektors ändern. Und wir müssen auch die Farben ändern. Die zweite Farbe wird FA 751c sein. Das zweite Symbol sieht ziemlich gut aus. Lassen Sie uns weitermachen und alle Symbole ändern , wenn Sie drei hier sehen, die Farbe ist drei bis 93. Dann haben wir hier vier. Die Farbe wird 31 DCA 1 sein. Dann werden wir ein fünftes Symbol haben. Was die Farbe angeht, werde ich hier 4400b hinzufügen. Dann haben wir den sechsten Artikel. Fügen wir hier f4800 hinzu. Dann werden wir das siebte Symbol haben. Was die Farbe angeht, werde ich hier F26 AC einfügen. Dann brauchen wir hier das Symbol Nummer acht. Was den Anrufer betrifft, benutzen wir 0010. Wir müssen das letzte Symbol ändern. Es wird b6004 sein. Wie Sie sehen können, haben alle Symbole unterschiedliche Hintergrundfarben mit linearem Verlauf Und sie sehen ziemlich gut aus. Okay, jetzt müssen wir uns um die Überschriften in den Diensten kümmern die Überschriften in den Diensten Lassen Sie uns weitermachen und Service drei auswählen. Ich werde die Telefonfamilie wechseln. Es wird Croson eins sein, kursiv, dann wird die Telefongröße Tom sein Ich werde die Farbe ändern. Lassen Sie uns die Farbe auf 5728 setzen. Wir brauchen hier das Pfund-Zeichen. Schließlich füge ich hier noch eine Marge hinzu. Lassen Sie uns den Rand auf zwei Ram oben und unten und Null auf der linken und rechten Seite setzen . Ich kann sehen, dass die Überschriften ziemlich gut aussehen. Jetzt müssen wir uns um die Absätze kümmern. Lassen Sie uns weitermachen und Service auswählen. Ich werde die Pfundgröße auf 1,6 Ram setzen, aber dann müssen wir den Text in der Mitte ausrichten. Ändern Sie abschließend die Farbe. Ich werde hier 889b9 verwenden. In Ordnung. Wie Sie sehen können, sehen die Dienste ziemlich gut aus. Wir sind fast fertig mit dem Abschnitt. Das Einzige, was ich tun muss, ist mich um die Hintergründe zu kümmern . Ich meine diese Formen hier. Lass uns weitermachen und das tun. Ich fange mit dem Kreis an. Wählen wir Service PG One aus. Ich werde Breite und Höhe auf Straßenbahn einstellen. Dann werde ich den Hintergrund ändern. Wir müssen lineare Gradienten verwenden. Die Richtung wird zwei Rechte haben. Dann brauchen wir transparent als erste Farbe. Die zweite Farbe wird transparent sein, ebenso wie für die dritte Farbe werde ich hier f437 hinzufügen Hier haben wir die Elemente im Hintergrund. Wie gesagt, es wird ein Kreis sein, also werde ich den Kesselradius mit dem Wert 50% verwenden . Außerdem werde ich die Position des Elements ändern. Lassen Sie uns die Position auf absolut setzen. Dann müssen wir die Position so einstellen, dass sie Null ist. Was die richtige Position angeht, werden es 10% sein Wie Sie sehen können, ist der Kreis die Position. Eigentlich deckt es die Dienstleistungen ab. Das brauchen wir nicht. Um das zu beheben, werde ich dem Services-Wrapper eine Index-Eigenschaft mit einem höheren Wert als Null hinzufügen Services-Wrapper eine Index-Eigenschaft mit einem höheren Wert als Null Lassen Sie uns es auf eins setzen. Wie Sie sehen können, ist das Problem behoben, okay? Das einzige, was mit dem Kreis zu tun hat , ist, die Opazität zu verringern Damit es viel schöner aussieht, werde ich die Deckkraft auf 2.3 einstellen. Wie Sie sehen können, haben wir jetzt viel Das war's, mit dem Kreis. Jetzt kümmere ich mich um den zweiten Hintergrund , der rechteckig ist. Eigentlich werde ich diesen Code duplizieren. Lass uns den Klassennamen ändern. Es werden Dienste G zwei sein. Wir brauchen innerhalb der Höhen dasselbe wie für den Hintergrund. Ich werde die Farbe ändern, die wir hier brauchen, 74b5. Dann ändere ich den Grenzradius. In diesem Fall benötigen wir 15 Ram. Außerdem werde ich die obere Position auf die untere ändern. Es werden 5% sein. Was die rechte Position angeht, müssen wir sie in die linke ändern. Die linke Position wird 12 sein. 12% Schauen wir uns die Ergebnisse an, die wir hier haben, das Rechteck und ich werde es leicht drehen. Verwenden wir Transformation, Rotate Z und der Wert wird minus zehn Grad sein. Eigentlich stimmt hier etwas nicht, weil wir in der fertigen Version ein anderes Ergebnis haben. Lass uns den Code überprüfen. Es ist komisch, weil alles richtig zu sein scheint. Oh ja, wir müssen die Richtung ändern. In diesem Fall sollte die Richtung nach links und nicht nach rechts sein. Ich denke, es behebt das Problem. Das Problem ist behoben und alles scheint perfekt zu sein. Okay, das war's mit diesem Abschnitt, ich finde, er sieht ziemlich gut aus und du magst ihn. Als Nächstes muss ich mich um die Navigation kümmern, denn sobald wir nach unten scrollen, müssen wir dafür sorgen, dass die Navigation klebrig bleibt und oben fixiert ist. Dieser Effekt hier, sobald wir scrollen , ändert die Navigation ihren Hintergrund. Es ist am oberen Rand der Seite fixiert. Um diesen Effekt zu erzielen, fahren wir mit der nächsten Vorlesung fort. 25. Sticky Navbar auf Scroll erstellen: Ordnung, in der vorherigen Vorlesung haben wir die Gestaltung des Servicebereichs abgeschlossen Es sieht ziemlich gut aus. Wie gesagt, wir kümmern uns um die Navigation. Wir müssen es nicht klebrig machen. Sobald wir auf der Seite nach unten gescrollt haben, schauen wir uns das fertige Projekt an. Sobald wir die Seite nach unten scrollen, müssen wir ein paar Dinge ändern. Wir müssen die Hintergrundfarbe der Navigation ändern. Außerdem müssen wir die Farben des Logos und der Navigationselemente ändern . Wir müssen den Boden anpassen. Außerdem müssen wir die Positionen der Drop-down-Menüs ändern . Okay, das ist es also, was wir in dieser Vorlesung tun werden. Jetzt ist es an der Zeit, ein bisschen Javascript zu verwenden. Lassen Sie uns die JS-Skriptdatei öffnen. Das erste, was ich tun werde, ist die Navigation auszuwählen. Ich werde eine neue Variable erstellen. Ich werde es Par nennen. Wir müssen Navigation auswählen, und dafür verwende ich die Query-Select-Methode. Wir müssen hier den Klassennamen angeben , der kein Teil sein wird. Okay. Die Navigation ist ausgewählt. Und jetzt müssen wir prüfen, ob die vertikale Scrollposition einer Webseite größer als Null ist. Ich werde ein Fensterobjekt verwenden. Tatsächlich bezieht sich Fenster auf das Webbrowser-Fenster oder die aktuelle Wanne, die Sie gerade betrachten. Wir müssen das Fensterobjekt verwenden und ihm einen Event-Listener hinzufügen Der Typ des Ereignisses wird Scroll sein. Außerdem werde ich hier eine Callback-Funktion platzieren , die ausgeführt wird, sobald wir die Seite nach unten scrollen Jetzt müssen wir überprüfen, ob das Fenster gescrollt wird oder nicht. Dafür verwende ich die if-Anweisung als Bedingung, die ich hier einfügen werde Window Scroll Y. Tatsächlich ist Scroll Y eine Eigenschaft, die angibt , um wie viele Pixel die Seite vertikal von oben gescrollt wurde Wenn sie größer als Null ist, bedeutet das, dass Sie vom Anfang der Seite nach unten scrollen vom Anfang der Seite nach unten scrollen Wir müssen prüfen, ob der Fenster-Scroll Y größer als Null ist. Wenn es wahr ist, werde ich der Navbar eine neue Klasse hinzufügen Und dann werden wir neue Stile in der CSS-Datei definieren. Für diese neu erstellte Klasse werde ich Navbar verwenden Dann greife ich auf die Klassenliste des Nickerchens zu, wir müssen hier eine neue Klasse hinzufügen und ich nenne sie Sticky Auch hier gilt: Wenn die Seite nach unten gescrollt wird, erhält der Naber die neue Klasse Sticky Als Nächstes benötigen wir Aussagen. Wenn die Eigenschaft Window Scroll Y nicht größer als Null ist, müssen wir Back Class Sticky aus dem Napper entfernen Wir brauchen eine Napper Dot Class List. Dann müssen wir die Methode remove verwenden. Und wir müssen hier nochmal angeben, Sticky. In Ordnung, das war's mit dem Java-Skript. Jetzt gehe ich zurück zur CSS-Datei. Wir müssen Napper mit einer Sticky-Klasse auswählen. Ich werde Napper Sticky einfügen und wir müssen neue Stile definieren Ich werde die Höhe verringern, es wird ein Ram sein Und ich werde auch die Hintergrundfarbe ändern. Stellen wir es auf Weiß ein. Wenn wir jetzt nach unten scrollen, werden die neuen Styles auf den Napper angewendet Wie Sie sehen können, ist die Hintergrundfarbe weiß und auch die Höhe des Nickerchens hat abgenommen. Okay, als Nächstes werde ich diesen Effekt sanfter machen Und dafür müssen wir den Übergang der Werte verwenden, die gesamte Dauer wird 0,3 Sekunden betragen Sobald wir scrollen, wird der Effekt glatter. Ordnung, als Nächstes füge ich der Of-Leiste einen kleinen Schatteneffekt hinzu Lassen Sie uns hier Box Shadow mit den Werten 01 Ram, ten Ram verwenden , und die Farbe wird RGB, A 130-16-2235 sein , und die Deckkraft wird 0,6 sein, sobald wir scrollen Sie werden hier einen schönen und coolen Schatteneffekt sehen. Ordnung, als Nächstes werde ich die Farbe des Logos ändern . Lass uns weitermachen und Span-Elemente auswählen. wieder Sticky verwenden, brauchen wir hier Sticky, dann Logo, gefolgt vom Span-Element. Ich werde die Farbe ändern. Es wird 0926 vor sieben sein. Außerdem werde ich Tech Shadow aus dem Logo entfernen. Sagen wir, es ist eigentlich gar nichts, die Farbe wird nicht verändert. Da stimmt etwas nicht. Wir müssen diesen Code unten nach dem Code hinzufügen, in dem wir diese Pan-Elemente formatieren, damit nach dem Code hinzufügen, in dem dieser Code funktionieren sollte Wenn wir nach unten scrollen, sehen wir, dass die Farbe des Logos geändert wurde Okay, jetzt brauchen wir dasselbe für die Artikel ohne Artikel. Lass uns hier keinen Link finden, den wir brauchen. Dann kein Link, wir müssen die Farbe ändern. Es wird dieselbe Farbe haben, 092627. Außerdem müssen wir Tech Shadow loswerden . Setzen wir es auf „Keine“. Wie Sie sehen können, hat sich die Farbe der O-Elemente geändert. Als Nächstes müssen wir die Position des Dreiecks ändern, das das nachgeordnete Element des Nav-Elements ist. Außerdem werde ich die Position des Drop-down-Menüs ändern . Fügen wir hier Sticky hinzu, gefolgt von den Anzeigenelementen. Gehen wir zu Position zwei über. Wir brauchen hier geschweifte Klammern. Wir müssen uns so positionieren, dass wir sechs Ram sind. Was das Drop-down-Menü angeht, verwenden wir Sticky gefolgt von Dropdown Ich werde die Position auf Straßenbahn setzen und auch den Schatten der Box ändern Lass uns 0110 Ram draus machen. Und die Farbe wird die mit niedrigerer Deckkraft sein , 0,4 Wie Sie sehen können, die Positionen des Dreiecks und der Menüs von oben nach unten geändert Und wir haben hier auch einen schönen und coolen Box-Shadow. Das einzige, was Sie tun müssen , ist die Schaltfläche anzupassen. Eigentlich haben wir hier ein kleines Problem. Wir brauchen dieses Dreieck hier nicht. Ich werde das reparieren. Finden wir das Pseudoelement, das ein Dreieck ist Wir müssen hier den Button ausschließen. Und das können wir auf folgende Weise tun. Sie können hier sehen , dass wir einen Artikel auswählen. Und nach den Pseudoelementen müssen wir, um das Element von hier aus zu entfernen, um das Element von hier aus zu entfernen, eine der aufgerufenen Pseudoklassen verwenden Wir müssen hier das untere Element angeben, eigentlich ist es das letzte obere Element, sodass wir daraus eine Pseudoklasse ableiten können, die als letztes Kind Es wird den unteren Teil von hier aus ausschließen. Wenn wir jetzt nachschauen, wie Sie sehen können, haben wir hier das Dreieck nicht mehr. Das Problem ist behoben. Ordnung, das Letzte, was ich tun muss, ist, die Unterseite anzupassen, sobald wir nach unten scrollen. Also lass uns weitermachen und den Button finden. Es sollte nach den Drop-Downs sein. Es ist hier. Wählen wir die Schaltfläche mit der Klasse Sticky aus. Ich werde den Hintergrund ändern. Lassen Sie uns lineare Farbverläufe verwenden. Wir brauchen eine Richtung , die aus zwei Rechten besteht. Was die Farben angeht, wird die erste Farbe F459 sein. Was die zweite Farbe angeht, werde ich hier F3598 einfügen. Dann müssen wir durch den Off-Box-Shadow kommen, es wird keiner sein Außerdem werde ich die Farbe des Buttons ändern. Es wird weiß sein, wie Sie sehen können. Der Button sieht eigentlich ziemlich gut aus. Das war's mit dem herausragenden Par, alles sieht perfekt aus und funktioniert perfekt. Wir können mit der nächsten Vorlesung fortfahren und uns um den nächsten Abschnitt kümmern. 26. Das HTML-Markup für Projekte erstellen: In der vorherigen Vorlesung haben wir einen Sticky-Of-Balken erstellt. Sobald wir auf der Seite nach unten scrollen, werden Sie sehen , dass wir hier einen festen Balken ohne Balken am oberen Rand der Webseite haben . Ich finde es sieht ziemlich nett und cool aus. Als Nächstes müssen wir einen weiteren Abschnitt erstellen , der Projekt genannt wird. Wenn wir uns das fertige Projekt ansehen, werden wir hier den Projektbereich sehen , den ich für sehr beeindruckend und cool halte. Der Abschnitt besteht aus Überschriften, dann haben wir hier eine kleine Navigation mit verschiedenen Kategorien der Websites. Sie können hier Wirtschaft, Essen, Gesundheit, Reisen sehen. Ansonsten, wenn ich auf eine der Kategorien klicke, dann bekommen wir hier die richtigen Webseiten-Pakete. Die Navigation funktioniert einwandfrei. Wir haben hier die Schaltfläche Alle ansehen, und wenn wir darauf klicken, werden alle Projekte angezeigt. Ich denke, dieser Abschnitt wird sehr interessant sein. Wir werden HTML, CSS und auch Java-Skript verwenden. Jetzt ist es an der Zeit, mit der Erstellung des Abschnitts zu beginnen. Wie üblich werde ich mit HTML-Markup beginnen. Lassen Sie uns hier neue Kommentare einfügen. Ich werde das Abschnitts-Tag mit den Klassenprojekten öffnen. Dann beginnen wir, wie gesagt, mit Überschrift und Absatz. Ich öffne H, ein Überschriftenelement mit dem Text 100 plus vollständige Websites. Dann werden wir einen Absatz haben, der, wie Sie bereits wissen, etwas Dummy-Text enthalten wird Um einen Dummy-Text zu erstellen, müssen wir einen Lom schreiben und dann die Anzahl der Wörter angeben In unserem Fall werde ich 30 Wörter erstellen. Hier haben wir unseren Dummy-Absatz für Absatz. Wir müssen eine Navigation erstellen. Öffnen wir das Tag mit dem Klassenfilter von Overall, wir werden sechs verschiedene Links haben. Fünf davon werden verschiedene Kategorien sein. Was den sechsten Link betrifft, wird es die Schaltfläche „Alle anzeigen“ sein. Ich werde den Link mit dem Klassenfilter-Link öffnen. Dann werde ich als Text Ihr Unternehmen einfügen. Außerdem müssen Sie ein Attribut namens Datentyp einfügen , in dem wir den Typ angeben müssen, ich meine die Kategorie des Projekts. In diesem Fall brauchen wir Geschäfte. Lassen Sie uns das Link-Element fünfmal duplizieren und dann die Kategorien ändern. Das zweite wird Essen sein. Wir müssen auch den Datentyp ändern. Dann wird das nächste Thema Gesundheit sein. Dann werden wir hier reisen müssen. Dann wird der nächste ein anderer sein. Endlich brauchen wir hier eine Ansicht. Alles was den Datentyp angeht, werde ich hier alles einfügen. In Ordnung, also lasst uns über die Filternavigation sprechen. Als Nächstes müssen wir die Projekte erstellen. Ich öffne den Deep-Tag mit der Liste der Klassennamen-Projekte , in der ich das Projekt erstellen werde. Jedes Projekt wird aus drei verschiedenen Bildern bestehen, so wie wir es hier im fertigen Projekt haben. Wie Sie sehen können, besteht jedes Projekt aus drei verschiedenen Bildern. Wir müssen hier drei verschiedene Bilder einfügen. Aber vorher müssen wir hier das Datentypattribut hinzufügen , um die Kategorie auch hier zu spezifizieren. Die erste Kategorie wird Geschäft sein. Ich werde drei verschiedene Bilder einfügen. Lass uns das Bild öffnen. Ich werde hier den Pfad des Bildes angeben. Zuallererst müssen wir den aktuellen Ordner angeben. Wählen Sie dann den Bilderordner aus und suchen Sie das erste Bild, das als Webbild, Bild eins, verwendet werden soll. Lassen Sie uns diesen Code zweimal duplizieren und die Namen der Bilder ändern, die wir hier benötigen. Web eins Bild zwei und dann Web eins Bild drei. In Ordnung, das ist es. Über das erste Projekt, wie Sie sehen können, haben wir hier die Überschrift, dann sehen wir hier die Navigation. Und auch drei verschiedene Bilder, die momentan zu viel größer sind . Aber das werden wir reparieren. Lassen Sie uns weitermachen und Projekte 11 Mal duplizieren, denn insgesamt werden wir 12 verschiedene Projekte haben. Lassen Sie uns weitermachen und einige Änderungen vornehmen. Der zweite Datentyp wird ein anderer sein. Außerdem müssen wir hier den Namen der Bilder ändern , die wir hier benötigen, Web Two. Dann geht es beim dritten Projekt um Lebensmittel. Wir brauchen hier drei. Dann wird das nächste Projekt Health Web Four sein. Als Nächstes werden wir andere haben, lassen Sie uns die Namen der Bilder ändern, die wir benötigen. Web fünf. Dann wird der nächste Datentyp Gesundheit sein. Was die Bilder angeht, wir brauchen Web Six. Dann haben wir dein Web Seven. Das nächste Projekt wird in der Kategorie Reisen sein, es wird Web 8 sein. Dann ist das nächste Spiel Foot Web Nine. Dann werden wir Geschäfte machen. Lassen wir den Mehrwert hier bei Null. Wir brauchen Web Ten. Dann werden wir Foot Web 11 haben. Und der letzte Typ wird geschäftlich sein. Ich werde es nicht ändern, was die Namen der Bilder angeht, die wir hier brauchen, Web 12. Okay. Das war's, das HTML-Markup für den Projektbereich ist fertig Schauen wir uns den Browser an. Wie Sie sehen können, haben wir hier alle 12 Projekte. Alles ist bereit. Und jetzt ist es an der Zeit, diesen Abschnitt dafür zu stylen. Fahren wir mit der nächsten Vorlesung fort. 27. Styling-Header von Projekten und Filternavigation: In der vorherigen Vorlesung haben wir das HTML-Markup für unseren Projektbereich vorbereitet HTML-Markup für unseren Projektbereich Wie Sie sehen können, sind alle Bilder hier für das Web. Es ist Zeit, diesen Abschnitt zu gestalten. In dieser Vorlesung werden wir den ersten Teil des Abschnitts gestalten, ich meine den Überschriftenabsatz und die Filternavigation. Und dann werden wir weitermachen und auch die Webseiten-Pakete gestalten. Okay, gehen wir zum V-Code direkt nach den Diensten, um neue Kommentare für Projekte festzulegen. Dann wähle ich den Bereich Projekte aus. Zunächst werde ich Breite und Höhe definieren. Die Breite wird 100% betragen. Was die Höhe angeht, werde ich sie ebenfalls auf 100% festlegen. Als Nächstes werde ich am oberen und unteren Rand des Abschnitts etwas Platz schaffen . Ich setze das Padding auf 25 Ram, dann auf 015 Ram Außerdem werde ich Elemente mithilfe von Flex Book im Display Flex ausrichten Flex Book im Display Flex Um die Elemente dann vertikal auszurichten, müssen wir die Richtung ändern. Die Flex-Richtung wird die Spalte sein. Ich werde die Elemente in der Mitte ausrichten. Wie Sie den Inhalt sehen können, befinden sich die Flex-Elemente in der Mitte. Außerdem haben wir oben und unten im Abschnitt etwas Platz . Als Nächstes wähle ich ein Überschriftenelement aus. Wir brauchen hier Projekte H one. Ich werde die Telefonfamilie wechseln. Es wird Mull-Schreibschrift sein. Außerdem muss das Telefon größer sein. Stellen wir es auf sechs Ram ein. Dann werde ich mit dem unteren Rand etwas Platz am unteren Rand schaffen . Lassen Sie uns den unteren Rand auf setzen und ich werde auch die Farbe der Überschrift ändern. Die Farbe wird f4800 sein. Schauen wir uns die Überschrift an. Wie Sie sehen können, sieht die Überschrift ziemlich gut aus. Als Nächstes werde ich mich um den Absatz kümmern. Ich werde Projekte P auswählen. Setzen wir auf 90 Ram. Dann gehe ich zu einem Zeilentext in der Mitte. Als Nächstes möchte ich die Telefongröße erhöhen. Stellen wir es auf zwei Ram ein. Außerdem müssen wir die Farbe ändern. Lassen Sie uns die Farbe auf 57 bis acht setzen. Schaffen Sie außerdem unten etwas Platz. Setzen wir den unteren Rand auf vier RAM. Wie Sie sehen können, sieht der Absatz ziemlich gut aus. Als Nächstes werde ich mich um die Navigation kümmern. Lassen Sie uns weitermachen und Filter Aus wählen. Das erste , was ich tun werde, ist die Breite zu definieren. Es wird 80% sein, dann werde ich die Höhe auf zehn Ram setzen. Ändere auch die Hintergrundfarbe. Es wird weiß sein. Dann gehe ich zu Box Shadow , um die Navigation sichtbar zu machen. Ich werde Box Shadow auf 02 Ram setzen. Acht Ram als Farbe. Ich werde TBA verwenden. Die Werte werden 130 sein, dann 162. Wählen wir diese Werte aus. Ich werde Opacity 2.2 einstellen Okay, hier haben wir die Filternavigation Als Nächstes mache ich es leicht abgerundet und verwende den Randradius Stellen wir es auf einen Ram ein. Dann werde ich Flexbox benutzen. Stellen wir das Display auf Flex. Ich werde die Elemente in der Mitte vertikal ausrichten. Wie Sie sehen können, sind die Elemente vertikal in der Mitte angeordnet. Jetzt werde ich mithilfe von Justify Content Space einen Abstand zwischen den Elementen erstellen . diesem Wert können wir einen gleichmäßigen Abstand zwischen den Flex-Elementen schaffen . Schließlich benötigen wir etwas Platz zwischen der Navigation und den Bildern. Ich mache das mit Margin, Bottom mit dem Wert Sechs. Okay, jetzt ist die Navigation von den Bildern getrennt. Als Nächstes werde ich den Link anpassen. In der Filternavigation wähle ich den Link Filternavigation aus. Lassen Sie uns Breite und Höhe festlegen. Die Breite wird 14 Ram betragen. Dann werde ich die Höhe auf vier Ram setzen. Lass uns die Hintergrundfarbe ändern. Es wird F245 sein. Wie Sie sehen können, werden Breite und Höhe sowie hinten eine Farbe auf die Linkelemente angewendet Als Nächstes werde ich die Elemente mithilfe des Randradius rund gestalten . Es werden vier sein, also müssen wir die Links in der Mitte platzieren. Dafür werde ich wieder CSS Flexbox verwenden. Wir benötigen Display Flex, dann Justify Content Center und ein Einzelpostencenter Wie Sie sehen können, befinden sich die Links in der Mitte. Lassen Sie uns weitermachen und die Schriftgröße auf ein Punktform einstellen. Dann brauchen wir die Schriftstärke, sie wird fett sein. Außerdem müssen wir Text in Großbuchstaben umwandeln und dann die Farbe ändern. Es wird 919 AA sein. Lass uns einen Blick darauf werfen Die Navigation sieht ziemlich gut aus. Ich werde mithilfe des Buchstabenabstands einen Abstand zwischen den Buchstaben erstellen . Lass es uns auf 0.1 run setzen. Ordnung, jetzt werde ich ein paar Hover-Effekte erzeugen Sobald wir mit der Maus über die Links fahren, sollten sie ihre Hintergrundfarbe ändern Und ich möchte sie auch ein bisschen nach oben verschieben. Lassen Sie uns den Filterlink mit dem Mauszeiger auswählen. Ich werde die Hintergrundfarbe ändern. Wird ein D F zwei sein. Außerdem müssen wir das Element ein wenig nach oben verschieben. Wir müssen Y transformieren, übersetzen und der Wert wird -0.1 sein . Der Ho-Effekt funktioniert gut, aber wir brauchen einen glatteren Fügen wir den Übergang A 0,3 Sekunden hinzu. Jetzt funktioniert alles einwandfrei. Eigentlich denke ich, dass die Höhe der Links etwas geringer ist. Schauen wir uns die fertige Version an. Ja, es ist definitiv kleiner. Lass uns die Höhe erhöhen, fünf draus machen. Jetzt haben wir bessere Ergebnisse. Als Nächstes werde ich die Ansichtsschaltfläche standardmäßig aktivieren. Wie Sie sehen können, hat die Ansicht ganz unten eine unterschiedliche Hintergrundfarbe und auch die Farbe des Telefons ist weiß. Um das zu tun, füge ich dem Link, den ich mir zuletzt angesehen habe, eine neue Klasse hinzu. Fügen wir hier Active hinzu. Dann wähle ich die aktive Klasse und ändere die Hintergrundfarbe. Es wird f401 sein und wir brauchen auch die Farbe des Textes, weiß Wir müssen zu den Klassen hinzufügen und nicht zum Datentypattribut Das war ein kleiner Fehler. Jetzt sollte der Stil angewendet werden. Das einzige, was ich tun muss, ist die Hintergrundfarbe zu ändern. Ich werde mit dem Mauszeiger auf Aktiv klicken. Lass uns die Hintergrundfarbe ändern. Es wird C611 sein. Jetzt funktioniert alles gut. Wir haben die Arbeit am ersten Teil unseres Abschnitts abgeschlossen . Als Nächstes müssen wir diese Website-Pakete anpassen. Im Moment haben wir hier größere Bilder. Wir müssen uns weiter darum kümmern. Fahren wir mit der nächsten Vorlesung fort. 28. Styling-Website-Packs: Ordnung, in der vorherigen Lektion hatten wir Stil, den ersten Teil des Projektabschnitts, ich meine den Überschriftenabsatz und die Filternavigation. Und jetzt müssen wir uns um die Webseiten-Pakete kümmern. Insgesamt haben wir hier 12 Website-Pakete. Sie sind in verschiedenen Linien angeordnet. Wir haben vier Reihen. In jeder Zeile haben wir drei Websites. Gehen wir zum VS-Code und beginnen mit dem Stylen. Im zweiten Teil des Projektabschnitts müssen wir Projekte auswählen und ich werde Breite und Höhe definieren. Die Breite wird 33 Ram betragen. Was die Höhe angeht, werde ich auch die Höhe 233 Ram einstellen. Als Nächstes werde ich Bilder auswählen und stylen. Im Moment sind sie zu groß, also müssen wir uns darum kümmern und sie kleiner machen. Ich wähle das erste Bild aus, das wir benötigen, das Projektbild und dann die Kinderauswahl Wir brauchen hier das erste Bild. Ich werde die Breite auf 22 setzen. Was die Höhe angeht, werde ich sie auf 100% setzen. Das erste Bild ist jetzt kleiner, aber tatsächlich ist es gestreckt und es sieht nicht gut aus. Um dieses Problem zu beheben, wähle ich ein Bild aus und verwende die Eigenschaft Object Feet mit dem Wert Cover. Wie Sie jetzt sehen können, sehen die Bilder wirklich gut aus. Als Nächstes werde ich diesen Code zweimal duplizieren. Lass uns die Zahlen hier ändern. Wir brauchen das n-te Kind zwei und das n-te Kind drei. Das zweite Bild wird 20 Ram sein. Was die Höhe angeht, werde ich sie auf 30 Ram setzen. Dann haben wir Bild Nummer drei. Die Breite wird 100% betragen. Was die Höhe angeht, werde ich sie auf 70% setzen. In Ordnung, Nächstes wähle ich die Projektliste aus. Ich werde mit und Höhe definieren. Die Breite wird 70% betragen. Was die Höhe angeht, werde ich sie auf 100% einstellen. Dann werde ich Flex Box verwenden, um die Elemente auszurichten. Wir brauchen Display Flex. Dann benötigen wir Justify Content Center, um die Flex-Elemente horizontal zu zentrieren. Dann benötigen wir Wrap mit dem Wert p, um Webseiten-Pakete in verschiedenen Zeilen auszurichten. Wie Sie jetzt sehen können sind die Bilder in verschiedenen Zeilen angeordnet. Im Moment sehen sie nicht ganz gut aus, aber das werden wir bald beheben. Als Nächstes setze ich die Position des Bildes auf absolut. Dann benötigen wir die relative Position für das übergeordnete Element , in diesem Fall das Projekt. Wir benötigen Ihre relative Position, da wir die Bilder entsprechend dem übergeordneten Element positionieren werden. Jetzt haben alle Bilder die absolute Position. Als Nächstes setze ich die Position für jedes Bild auf 50%. Als Nächstes benötigen wir Positionen für das erste Bild. Ich werde die linke Position auf 50% setzen . Um das Bild perfekt in der Mitte zu platzieren, müssen wir Transform Translate mit den Werten -50% erneut -50% verwenden den Werten -50% erneut -50% . Die ersten Bilder werden im Projekt perfekt in der Mitte platziert Als Nächstes füge ich dem ersten Bild einen Schatteneffekt hinzu. Lass uns Box Shadow verwenden. Ich werde hier die folgenden Werte hinzufügen. Wir benötigen 01 RAM und dann vollen RAM und RTB A. Ich werde schwarze Farbe für die Opazität verwenden 0.4 Wie Sie sehen können, haben die ersten Bilder den Schatteneffekt Sie sind nicht vollständig sichtbar. Um das zu beheben, verwende ich die Index-Eigenschaft. Lassen Sie uns den Index 22 setzen. Jetzt sollten sie vollständig sichtbar sein. Ja, sie sind sichtbar. Als Nächstes werde ich mich um das zweite Bild kümmern. Lassen Sie uns die linke Position auf -5% setzen. Außerdem müssen wir übersetzen , nicht übersetzen, transformieren, und dann müssen wir Y -50% übersetzen . Die zweiten Bilder werden hier positioniert Auch hier handelt es sich um eine Indexeigenschaft, da sie nicht vollständig sichtbar sind Lassen Sie uns einen Index auf eins setzen. Jetzt sind sie sichtbar, aber sie befinden sich hinter den ersten Bildern, und genau das brauchen wir. Ich werde hier Box Shadow hinzufügen. Die Werte werden 03 Ram, acht Ram sein. Die Farbe wird RGBA, 130162 sein. Lassen Sie uns diesen Wert wählen und die Opazität ändern. Es wird 0,9 sein Jetzt haben die zweiten Bilder diesen schönen und coolen Schatteneffekt Eigentlich werde ich die Ecken der Bilder abrunden. Verwenden wir für den Radius. Setzen wir es auf einen Ram. Jetzt sehen die Bilder viel besser aus. Als Nächstes werde ich mich um das dritte Bild kümmern. Ich werde die richtige Position für das dritte Bild auf -10% setzen . Auch hier müssen wir transformieren, Y -50% übersetzen, die dritten Bilder sind Fügen wir hier den Boxschatten hinzu. Eigentlich brauchen wir die gleichen Werte. Kopieren wir sie von hier und fügen sie unten ein. Jetzt sind die dritten Bilder positioniert und haben einen Boxschatten. Das einzige, was ich tun muss, ist die Webseiten-Pakete voneinander zu trennen. Ich füge hier Rand fünf hinzu. Außerdem werde ich den Cursor zeigen lassen, okay? Also sieht alles perfekt aus und wo die Projekte, die wir gemacht haben, bin ich in den Webseiten-Paketen. Alles ist gestylt und sieht ziemlich gut aus. Jetzt müssen wir dafür sorgen, dass diese Navigation funktioniert. Sobald wir auf eine der Kategorien geklickt haben, sollten die richtigen Bilder angezeigt werden. Um das zu tun, werde ich zur nächsten Vorlesung übergehen. 29. Filternavigation funktionieren lassen: Ordnung, in der vorherigen Vorlesung haben wir die Gestaltung des Projektbereichs abgeschlossen. Wie Sie sehen können, sieht alles ziemlich gut aus. Und jetzt müssen wir dafür sorgen, dass die Navigation funktioniert. Ich meine, sobald wir auf eine der Kategorien klicken, sollten die richtigen Website-Pakete angezeigt werden. Schauen wir uns das fertige Projekt an. Wenn ich auf einen der Links klicke, werden die richtigen Websites angezeigt. Wenn ich auf die Schaltfläche Alle anzeigen klicke, werden alle Websites angezeigt. In Ordnung, genau das werden wir in dieser Vorlesung tun. Gehen wir zur JS-Datei des Skripts. Eigentlich ist das Erste, was ich hier tun werde, Kommentare für Napper hinzuzufügen, weil ich es vergessen habe Wir brauchen hier jetzt ein. Und dann werde ich neue Kommentare für den Projektabschnitt einfügen Zunächst wähle ich alle Linkelemente und speichere sie in der Variablen. Lassen Sie uns eine neue Variable erstellen. Ich nenne es Filter-Links. Dann müssen wir alle Links mit der Methode Query Selector All auswählen mit der Methode Query Selector All Diese Methode ermöglicht es uns, mehrere Elemente mit demselben Klassennamen auszuwählen In diesem Fall benötigen wir hier einen Klassennamenfilter, keinen Link. Diese Methode gibt eine Knotenliste zurück, die eine Sammlung ist. Es ist ein array-ähnliches Objekt. Jetzt müssen wir die Knotenliste durchsehen. Ich meine, Links filtern und jedem Link einen Event-Listener hinzufügen Wir brauchen Filterlinks, gefolgt von einer Futtermethode. Tatsächlich gibt es für jede Methode eine Array-Hilfsmethode. Im Go-Skript wird sie verwendet, um die Elemente einer Array- oder Knotenliste zu durchsuchen und für jedes Element eine bestimmte Aktion oder Operation auszuführen . Wir müssen eine Callback-Funktion sicherstellen. Diese Funktion wird für jedes Element in der Knotenliste ausgeführt für jedes Element in der Knotenliste Ich werde ein Argument versichern. Es wird ein Filterlink sein. Es stellt das aktuelle Element in der Knotenliste verarbeitet wird. Jetzt können wir dem Filterlink einen Event-Listener hinzufügen. Der Typ des Ereignisses wird ebenfalls angeklickt. Ich werde eine Callback-Funktion sicherstellen, Ich werde eine Callback-Funktion sicherstellen die ausgeführt wird, sobald wir auf den Link klicken Wenn wir uns den Browser ansehen und auf einen der Links hier klicken, gelangen wir zum Anfang der Website Tatsächlich ist es ein Standardverhalten des Link-Elements. Und wir müssen dieses Standardverhalten verhindern , dafür müssen wir hier und sogar Objekte übergeben, dann können wir die Methode prevent default verwenden. Wenn ich jetzt auf die Links klicke, werden wir nicht mehr zum Seitenanfang navigieren. Ordnung, wie Sie wissen, der letzte Link, ich meine, die Schaltfläche „ Alle anzeigen hat der letzte Link, ich meine, die Schaltfläche „ Alle anzeigen“ eine aktive Standardklasse. Sobald wir auf einen der Links klicken, sollten wir diese Klasse, ich meine Klasse aktiv, aus dem aktuellen Element entfernen ich meine Klasse aktiv, aus dem und wir müssen sie dem angeklickten Element hinzufügen Um das zu tun , wähle ich Elemente mit der Abfrageselektor-Methode Ich werde hier den Klassennamen angeben. Wir brauchen einen Filterlink und wir müssen hier die aktive Klasse hinzufügen. Sobald es aktiv ist, wird das Link-Element ausgewählt. Jetzt können wir die aktive Klasse aus diesem Element entfernen. Wir benötigen eine Klassenlisteneigenschaft. Dann brauchen wir die Methode remove. Und wir müssen hier den Klassennamen active angeben. Sobald wir auf die Link-Elemente klicken, wird die aktive Klasse aus dem Element entfernt und dem angeklickten Element hinzugefügt Um nun dem angeklickten Element eine aktive Klasse hinzuzufügen, müssen wir hier Link, Klasse, Liste, Hinzufügen filtern und das müssen wir Klassengesetz einrichten. In Ordnung, schauen wir im Browser nach. Wenn wir auf einen der Links klicken, werden Sie feststellen, dass der Hintergrund geändert wurde. Eigentlich funktioniert es gut. In Ordnung, jetzt müssen wir uns um die Projekte kümmern. Lassen Sie uns weitermachen und alle Projekte erneut auswählen, indem wir den Abfrageselektor verwenden, alle Methoden, die wir hier angeben müssen, den Klassennamen, das Projekt Jetzt werde ich alle Projekte verstecken. Sobald wir auf den Filterlink geklickt haben, müssen wir uns die Projekte ansehen Dabei handelt es sich um einen Knoten, zumindest um eine Sammlung, und wir müssen jedes Projekt ausblenden. Um das zu tun, wähle ich Projekte aus, gefolgt von einer Suchmethode Ich werde hier die Callback-Funktion übergeben. Das Argument wird Projekt sein. Um die Projekte auszublenden, füge ich dem Projekt jetzt eine neue Klasse hinzu. Und dann werden wir diese Klasse in CSS verwenden. Um das Element auszublenden, benötigen wir eine Projektklassenliste. Und wir müssen hier den Klassennamen angeben. In diesem Fall nenne ich es Verstecken. Gehen wir nun zur CSS-Datei und wählen das Projekt mit der Klasse Hide aus. Um das Element auszublenden, verwende ich display none. Wenn wir jetzt auf einen der Links klicken, werden alle Projekte aktualisiert. Okay, jetzt müssen wir Projekte entsprechend den Kategorien ein- und ausblenden . Und dafür müssen wir hier eine bedingte Aussage verwenden. Ich meine wenn Aussage. Lassen Sie uns die If-Anweisung als Bedingung erstellen . Ich werde hier das Folgende übergeben. Wir brauchen Filter Link Dot Get Attribut. Ich werde hier ein Attribut namens Datentyp übergeben. Wie Sie sich erinnern, haben wir den Links und auch den Projekten Datentypattribute hinzugefügt . Wenn dieser Ausdruck „ project get attributes“ entspricht , dann „Datentyp“. Diese Bedingung, wenn der Datentyp des angeklickten Filterlinks dem Datentyp des Projekts entspricht Mit anderen Worten, es wird geprüft, ob der Filterlink und das Projekt zu der Kategorie oder dem Typ gehören Wenn diese Bedingung erfüllt ist, müssen wir weiterhin die passenden Projekte anzeigen. Aber das ist nicht alles, was wir hier oder der Aussage hinzufügen müssen, wir müssen eine weitere Bedingung überprüfen, nämlich Attribut filter link get. Wir müssen hier das Datentypattribut angeben. Wenn dies allen entspricht, prüft dieser Teil der Bedingung ob der Datentyp des angeklickten Filter-Links auf all gesetzt ist Diese Bedingung wird verwendet, um anzugeben, dass alle Projekte unabhängig von ihrem Typ oder der Kategorie angezeigt werden sollen unabhängig von ihrem Typ oder der Kategorie In Ordnung, der Zustand der Erklärung ist fertig. Wenn es wahr ist, müssen wir das Projekt anzeigen. Daher müssen wir die Klassenhöhe aus dem Projekt entfernen . Wir brauchen die Klassenliste des Projekts, entfernen. Wir müssen hier die Höhe des Klassennamens angeben. Ordnung, ich denke, das war's jetzt, die Navigation sollte funktionieren. Lass uns klicken, wir haben hier ein Problem. Lassen Sie uns die Seite und den Konsolen-Tab überprüfen. Wir haben hier einen Fehler, der besagt, dass das Projekt nicht definiert ist. Wir brauchen die 29. Zeile. Eigentlich müssen wir hier die Anweisungen übergeben. Deshalb wird das Projekt nicht anerkannt. Jetzt sollte das Problem behoben sein. Lass uns nachschauen. Wenn wir erneut klicken, haben wir ein Problem. Die Eigenschaften von undefined reading remove können nicht gelesen werden. Lassen Sie uns diese Codezeile hier überprüfen, Klassenliste mit dem Großbuchstaben L. Wenn ich das nun überprüfe, dann wird alles perfekt funktionieren Endlich funktioniert die Navigation einwandfrei, mit dem Projektbereich sind wir fertig. Hoffentlich war es interessant und du lernst ein paar neue Sachen. Lass uns mit der nächsten Vorlesung weitermachen. 30. Den Abschnitt HTML-Markup für Vorlagen erstellen: Ordnung, in der vorherigen Vorlesung haben wir die Arbeit am Projektabschnitt abgeschlossen Es sieht ziemlich gut aus und funktioniert auch gut. Ich meine diese Filternavigation. Jetzt ist es an der Zeit, weiterzumachen und mit dem Aufbau des nächsten Abschnitts zu beginnen. Schauen wir uns das fertige Projekt an. Der nächste Abschnitt wird der Abschnitt Vorlagen heißen. Dieser Abschnitt besteht aus zwei verschiedenen Teilen. Der erste Teil ist das, was Sie gerade hier sehen. Was den zweiten Teil betrifft, so wird es das Video sein. Lassen Sie uns weitermachen und den Abschnitt beschreiben. Der erste Teil wird die linke und rechte Seite umfassen. Auf der linken Seite sehen Sie den Überschriftenabsatz und den unteren Teil. der rechten Seite können Sie hier drei verschiedene Bilder sehen. Und auch unten unten können Sie den Teileffekt der Bilder sehen. Wir beginnen mit dem ersten Teil und fahren dann mit dem Video fort. Zunächst müssen wir das HTML-Markup erstellen. Gehen wir zum VS-Code und fügen direkt nach den Projekten, für die wir Kommentare für Vorlagen benötigen, neue Kommentare Dann öffne ich Abschnittselemente mit den Klassennamenvorlagen. Wie gesagt, der erste Teil unseres Abschnitts wird aus zwei verschiedenen Teilen bestehen. Ich meine die linke Seite und die rechte Seite. Ich werde das P-Tag öffnen, das als Vorlagen übrig bleiben wird . Es wird aus einer Überschrift, einem Absatz und der Schaltfläche bestehen. Ich werde H ein Überschriftenelement öffnen , bei dem es sich um Vorlagen handeln wird. Als nächstes brauchen wir einen Absatz. Der Absatz wird aus einem Scheintext bestehen. Ich werde hier einfügen, Lorem, und dann wird die Anzahl der Wörter 30 sein Hier haben wir den Dummy-Text. Dann brauchen wir den Typ, den die Unterseite haben soll, aber wir werden hier auch den Klassennamen haben, wo es Templates sein werden, PTN Was den Text angeht, den ich über die Vorlage einfügen werde, okay, das war's. Ungefähr auf der rechten Seite. Es geht nur um die linke Seite, nicht um die rechte Seite. Jetzt müssen wir uns um die rechte Seite kümmern. Ich werde den Deep-Tag öffnen, bei dem es sich um Vorlagen handeln wird. Richtig? Wir werden hier drei verschiedene Bilder und eine Spielkolbe haben. Lassen Sie uns Bildelemente einfügen. Ich gebe den Pfad des Bildes an, das wir benötigen um den Autoordner zu verlassen, und wähle dann Bilder aus. Ich wähle Web 8, Bild eins. Dann Web-Bild zwei, wir brauchen Web Eight-Bild drei. In Ordnung, lassen Sie uns über die Bilder sprechen. Als Nächstes brauchen wir den Play-Button. Ich werde das Tag mit der Schaltfläche für den Klassennamen öffnen. Wir werden diesen Taktstock mit eingeschalteten Telefonen herstellen. Ich öffne ein erstes Button-Tag mit dem Klassennamen Play PTN Dann füge ich Ihre Elemente mit den Klassen FA Solid FA Play der das HTML-Markup für den Vorlagenbereich bereit ist Ich bin im ersten Teil des Abschnitts. Hier haben wir die Elemente. Jetzt ist es an der Zeit, weiterzumachen und diese Elemente anzupassen. Lassen Sie uns dazu mit der nächsten Vorlesung fortfahren. 31. Abschnitt Styling-Vorlagen: Ordnung, in der vorherigen Lektion haben wir also das HTML-Markup für den Vorlagenbereich erstellt, und jetzt müssen wir diesen Abschnitt formatieren Gehen wir zum VS-Code und fügen neue Kommentare in die CSS-Datei Wir brauchen Commons für Vorlagen. Dann wähle ich den Vorlagenbereich aus. Zuallererst definiere ich Breite und Höhe. Die Breite wird 100% betragen. Was die Höhe angeht, werde ich die Höhe des Viewports auf 100 Es wird 100% des Viewports sein. Als Nächstes werde ich den Hintergrund ändern. Lassen Sie uns die lineare Gradientenfunktion verwenden. Die Richtung des Farbübergangs wird zwei nach links sein. Dann füge ich Ihren ersten Anrufer ein. Es wird 8430 sein. Dann haben wir die zweite Farbe. Es wird 8430 sein. Es hat tatsächlich dieselbe Farbe wie beim dritten Anrufer. Es wird 409 sein. Schauen wir uns den Browser an. Wie Sie sehen können, haben wir hier eine lineare Einstufung in Fett. Als Nächstes werde ich die rechte Seite für eine Weile verstecken. Lassen Sie uns Vorlagen auswählen, richtig. Hier hinzufügen, keine anzeigen. Wie Sie sehen können, ist der rechte Teil versteckt und wir haben hier nur die linke Seite. Zuerst werde ich die linke Seite anpassen und dann werden wir uns auch um die rechte Seite kümmern. Lassen Sie uns weitermachen und links Vorlagen auswählen. Ich werde die Breite auf 50% setzen , sie nimmt die Hälfte des Abschnitts ein. Dann setze ich die Position auf absolut. Ich werde die linken Vorlagen entsprechend den übergeordneten Elementen positionieren . Wir benötigen die relative Position für die Vorlagen. Als Nächstes definiere ich die Eigenschaften oben und links. Beide werden Null sein. Lassen Sie uns außerdem mithilfe von Padding etwas Platz innerhalb des Elements schaffen mithilfe von Padding etwas Platz innerhalb des Elements Ich werde die Polsterung oben auf 25 Ram einstellen. Dann haben wir zehn Ram auf der rechten Seite, Null unten und zehn Ram auf der linken Seite Auch hier haben wir die Elemente, auch den Raum innerhalb der linken Seite. Als Nächstes werde ich mich um die Überschrift kümmern. Lassen Sie uns weitermachen und Vorlagen auswählen. Links eine Überschrift: Elemente. Zuallererst werde ich die Telefonfamilie definieren. Stellen wir das Telefon auf Molly Cursive. Als Nächstes stelle ich die Telefongröße ein, es werden sieben Rams sein Lassen Sie uns Text in Opera-Case umwandeln. Dann brauchen wir etwas Abstand zwischen den Buchstaben. Stellen wir es auf 2,5 Ram ein. Also werde ich die Farbe ändern. Es wird weiß sein. Wie Sie sehen können, sieht die Überschrift ziemlich gut aus. Lassen Sie uns weitere Stile hinzufügen. Ich werde einige Schatteneffekte mit Schatten erzeugen. Wir brauchen hier 0,5 Ram. Zweitens, die Farbe wird RGBA sein, schwarze Farbe mit der Opazität 0,3. Schließlich werde ich mit dem unteren Rand der Überschrift etwas Platz schaffen , der Wert wird drei Ram sein Okay, lassen Sie uns als Nächstes über die Überschrift sprechen. Ich werde mich um den Absatz kümmern. Lassen Sie uns weitermachen und die verbleibenden Vorlagen auswählen. Zunächst definiere ich die Breite des Absatzes. Es werden 60 Ram sein. Dann setzen wir die Schriftgröße auf 1,6 Rams. Ich werde hier die Schriftstärke einstellen, die wir benötigen. Schriftstärke: Es wird 300 sein , um einen Abstand zwischen den Buchstaben zu schaffen. Stellen wir es auf 2.1 Ram ein und ändern die Farbe. Die Farbe wird 222 sein. Hier haben wir den Absatz. Als nächstes werde ich wieder Tech Shadow verwenden. Kopieren wir diese Codezeile und fügen sie hier hinzu. Ich werde die Opazität verringern. Lass uns 0,1 Ram draus machen. Eigentlich nicht Ram, sondern nur 0,1 Wenn Sie schließlich eine größere Unterseite hören, um den Raum unten zu vergrößern, addieren wir es zu sieben. Okay, schauen wir uns den nächsten Absatz an. Wir müssen den Boden anpassen. Lassen Sie uns weitermachen und Vorlagen auswählen. Eigentlich brauchen wir hier keine Vorlagen mehr. Wir brauchen Vorlagen BTN, es hat seinen individuellen Klassennamen. Lassen Sie uns zunächst mit 213 Ram beginnen. Dann wird die Höhe des Bodens sechs Ram betragen. Als nächstes brauchen wir eine Hintergrundfarbe. Ich werde es auf Weiß setzen. Schauen wir uns die Unterseite an. Wir müssen den Standardrahmen loswerden und auch den unteren Rand abrunden. Wir brauchen hier keine Grenze und dann einen Grenzradius. Es werden drei Ram sein. Okay, danach müssen wir uns um die Schriften kümmern. Die Schriftgröße wird 1,8 Ram betragen. Dann werde ich den Punkt fett machen. Lassen Sie uns auch Text in Großbuchstaben umwandeln. Dann benötigen wir einen Buchstabenabstand , um einen gewissen Abstand zwischen den Buchstaben zu schaffen. Es wird 0,1 RAM sein und auch die Farbe der Telefone ändern. Die Farbe wird A, A, drei EC sein. Lass uns jetzt einen Blick darauf werfen. Der Button sieht ziemlich gut aus. Das einzige, was wir tun müssen, ist, mit Box Shadow einen Schatteneffekt zu erzeugen . Wir brauchen hier 01 Ram, drei Ram, und die Farbe wird RGBA sein, mit der Opazität ebenfalls 0,1 Außerdem müssen wir hier zeigen. Okay, das war's also, ungefähr die linke Seite, jetzt müssen wir uns um die rechte Seite kümmern. Wie Sie gerade wissen, ist die rechte Seite versteckt. Ab hier werde ich Display None loswerden. Ich werde die Breite und Höhe der rechten Seite einstellen. Die Breite wird 50% betragen Dann brauchen wir die Höhe, ich werde sie auf 100% setzen ich werde die Position auf absolut setzen. Dann werden die beiden Positionen Null sein. Wir müssen die richtige Position definieren, die ebenfalls Null sein wird. Wie Sie sehen können, befinden sich die Elemente auf der rechten Seite des Abschnitts. Als Nächstes nehme ich dir die Bilder mit. Zunächst wähle ich alle Bilder aus, die wir hier benötigen, Vorlagen, rechts, gefolgt vom Bild-Tack Die Bilder werden zwei gängige Stile haben. Die erste wird die absolute Position sein. Außerdem werden wir hier einen Grenzradius haben und es wird ein Ram sein. Als Nächstes müssen wir jedes Bild separat anpassen. Lassen Sie uns mit dem ersten Bild beginnen, das wir hier benötigen, rechten Vorlagenbild, gefolgt vom n-ten Child-Selektor. Wählen Sie das erste Bild aus, wir müssen die Breite definieren Es werden 40 Ram sein. Außerdem werde ich die Position des ersten Bildes definieren . Die oberste Position wird bei 50% liegen . Dann brauchen wir die richtige Position, es werden 25% sein. Wir müssen das Bild vertikal zentrieren. Und dafür verwende ich hier Transform Translate Y mit dem Wert -50%. Habe das erste Bild, dieses. Machen wir es mit der Index-Eigenschaft sichtbar , weil es hinter den anderen Bildern gelandet ist . Setzen wir den Index auf eins. Jetzt können Sie hier sehen , dass das erste Bild vollständig sichtbar ist. Als Nächstes werde ich mit Po-Schatten einen Schatteneffekt erzeugen . Die Werte werden 027 Ram und die Farbe wird RGBA mit der Opazität 0,4 sein. Außerdem werde ich die Opazität des Bildes leicht verringern Stellen wir es wieder auf 2,8 ein, hier haben wir Es sieht ziemlich gut aus. Lassen Sie uns weitermachen und das zweite Bild anpassen. Eigentlich werde ich diesen Code duplizieren dann den n-ten Chat-Selektor ändern Es werden zwei sein, die Breite wird 20 Ram sein. Dann müssen wir hier 20% statt der richtigen Position positionieren. Ich werde hier die linke Position verwenden. Und der Wert wird 18% sein. Wir brauchen hier nicht transformieren, übersetzen. Lassen Sie uns es loswerden. Der Box-Schatten wird unterschiedliche Werte haben. Wir brauchen hier 18 Gramm. Was die Opazität angeht, wird sie 0,6 sein Außerdem wird die Opazität von hier aus entfernt. Dann schauen Sie sich den Browser an. Hier haben wir das zweite Bild. Es sieht ziemlich gut aus und ist richtig positioniert. Als nächstes müssen wir uns um das dritte Bild kümmern. Ich werde diesen Code duplizieren und den n-ten Chat-Selektor ändern. Es werden drei sein. Die Breite des Bildes wird sieben sein. Dann wird die Position 22% betragen . Als nächstes brauchen wir die richtige Position, es sind 5%. Außerdem müssen wir die Deckkraft des Boxschattens ändern, sie wird 0,5 sein. Dann füge hier die Opazität hinzu, sie wird 0,5 sein Ich werde die Index-Eigenschaft entfernen weil wir sie hier nicht benötigen Ich glaube, das war's mit dem dritten Bild. Lass uns einen Blick darauf werfen. Wie Sie sehen können, sind alle drei Bilder ausgerichtet und sehen ziemlich gut aus. Okay, jetzt müssen wir uns um den Play-Button kümmern. Lass uns weitermachen und Development Play Button auswählen. Ich setze die Position auf absolut, dann bleiben noch 57% übrig. Die Position wird 23% betragen. Schauen wir uns das mal an. Der Button ist nicht sichtbar. Es landete hinter den Bildern, die wir hier brauchen, der Index-Eigenschaft. Lassen Sie uns den Index auf drei setzen. Jetzt sollte der Button hier sichtbar sein. Taste. Als Nächstes müssen wir Play BTN auswählen und innerhalb der Höhe definieren Es werden 20 Ram sein. Ich meine die beiden Immobilien. Als Nächstes werde ich die Hintergrundfarbe ändern. Stellen wir es auf Weiß ein. Außerdem werde ich das Element mit einem Randradius mit einem Wert von 50% abrunden . Hier spiele BTN I, der Kreis Als Nächstes müssen wir den Standardrand der Unterseite entfernen. Sagen wir, Grenze zu keiner. Dann brauchen wir Box Shadow. Die Werte werden 01 Ram sein. Zehn Ram. Wir brauchen RGBA, schwarze Farbe mit der Opazität 0,6 Schließlich müssen wir hier den Cursor zeigen Der Kreis, die Unterseite sieht ziemlich gut aus. Als nächstes müssen wir die Rückseite des Bodens erstellen. Dieser Teil hier, dieser durchsichtige Kreis. Und ich werde dieses Element mit vier Pseudoelementen erstellen mit vier Pseudoelementen Ich wähle Play BTN, gefolgt von den vier Pseudoelementen Definieren wir den Inhalt, er wird leer sein. Als nächstes brauchen wir Gewicht und Größe. Stellen wir beide auf 26 Ram ein. Dann setze ich die Hintergrundfarbe auf RGBA. Wir brauchen hier weiße Farbe, das ist 25053 mal, aber wir brauchen eine geringere Deckkraft, das ist 25053 mal, aber wir brauchen eine geringere Deckkraft, 0,1 richtig. Jetzt ist das, vorher, das Element nicht sichtbar, weil wir seine Position definieren müssen Lassen Sie uns die Position auf absolut setzen. Die oberste Position wird bei 50% liegen, dann wird die linke Position ebenfalls bei 50% liegen. Ich versuche, das Element dafür zu zentrieren. Wie ihr bereits wisst, müssen wir hier mit den Werten -50% transformieren und wieder -50% übersetzen . Jetzt sollte das Element sichtbar sein Hier haben wir die Elemente. Lassen Sie uns es mit dem Randradius abrunden. Es werden 50% sein. Außerdem brauchen wir Box Shadow. Eigentlich werde ich mir von hier aus Box Shadow holen. Ich meine, die Werte müssen wir nur ändern, um die Opazität zu ändern. Es wird 0,3 sein Jetzt können wir deutlich den Kreis als Nächstes sehen, wir müssen uns um die Phase kümmern Es ist zu klein. Jetzt wählen wir Elemente aus. Wir brauchen Play BTN. Die Telefongröße wird sieben Ram betragen. Was die Farbe des Symbols angeht, werde ich es auf 2025 setzen. Also, wie Sie sehen können , wurde das Telefon als Symbol größer und sieht ziemlich gut aus. Als nächstes müssen wir die Hover-Effekte erstellen. Die Effekte. Zuallererst kümmere ich mich um das Play-BTN, wählen wir es mit der Maus aus, ich werde den Maßstab des Elements erhöhen Dafür müssen wir die Skala verändern. Und es wird 1,2 sein. Wir brauchen ihren Übergang, alle 0,3 Sekunden. Wie Sie jetzt sehen können, nimmt die Skala zu, sobald wir den Mauszeiger über die Schaltfläche Jetzt müssen wir die vier Elemente etwas kleiner machen. Wenn wir mit der Maus darüber fahren, müssen wir Play auswählen. Btn mit Hover, gefolgt von den Kraftelementen. Wir müssen den Maßstab der Elemente verringern. Holen wir uns diesen Code von hier. Und stellen Sie die Skala 0,9, die wir hier brauchen , alle 0,3 Sekunden ein. Sobald wir den Mauszeiger über den Boden bewegen, die Skala des Elements ab Aber wie Sie sehen können, bewegt sich das Element nach unten. Das passiert, weil standardmäßig zum Element gezwungen wird, dass hier die Transformation übersetzt wird. Wir müssen hier auch kopieren, übersetzen und bearbeiten. Lassen Sie uns die Übersetzungsfunktion kopieren und hier bearbeiten. Jetzt sollte das Problem behoben sein. Wie Sie sehen können, funktioniert alles ziemlich gut. Jetzt müssen wir den Polareffekt erzeugen. Ich meine, wir müssen Elemente erstellen, die die Bilder teilweise verdecken und einen gewissen Unschärfeeffekt Ich werde vorher Elemente des Abschnitts erstellen. Wir brauchen hier Vorlagen, gefolgt von den vier Elementen. Definieren wir den Inhalt, er wird leer sein. Dann brauchen wir innerhalb der Höhe, ich setze beide auf Straßenbahn. Dann brauchen wir Hintergrundinformationen. Ich werde die lineare Gradientenfunktion verwenden. Die Richtung des Farbübergangs wird zwei nach unten zeigen. Dann wird die erste Farbe transparent sein. Dann brauchen wir die zweite Farbe und es wird acht für 30 sein, diese. Was die dritte Farbe angeht, müssen wir jetzt die gleiche 84430 A verwenden , bevor das Element nicht sichtbar ist Weil es hinter anderen Elementen gelandet ist, hinter dem Abschnittselement Um das Element sichtbar zu machen, benötigen wir den Index mit dem Wert vier. Das Element ist nicht sichtbar. Tatsächlich passiert es, weil wir die Position definieren müssen. Ich hab's vergessen. Wir brauchen Position Absolute. Dann wird die unterste Position bei -5% liegen. Was die richtige Position angeht, sage ich zwei, 10% Jetzt sollte das Element sichtbar sein Ja, es ist sichtbar. Als Nächstes müssen wir eine Eigenschaft namens Filter verwenden , mit der wir einen polaren Effekt erzeugen können. Ich werde einen Filter mit Polarfunktion verwenden Filter mit Polarfunktion und der Wert wird sieben sein. Wie Sie sehen können, haben wir hier einen ziemlich schönen und coolen Effekt. Jetzt haben wir ein kleines Problem. Der Button und das Element oben hinter dem Vorher-Element. Um das zu beheben, müssen wir den Wert der Index-Eigenschaft erhöhen . Im Moment sind es drei. Machen wir fünf draus, was höher als vier ist. Jetzt sollte das Problem behoben sein. Okay? Alles sieht ziemlich gut aus. Und mit dem Styling des ersten Teils des Vorlagenabschnitts sind wir als Nächstes fertig. Wir müssen das Video in diesen Abschnitt einbetten. Lassen Sie uns dazu mit der nächsten Vorlesung fortfahren. 32. Das HTML-Markup für Video Player erstellen: In der vorherigen Lektion haben wir den Abschnitt mit den Vorlagen gestaltet, ich meine den ersten Teil des Jetzt ist es an der Zeit, weiterzumachen und den zweiten Teil zu erledigen. Ich meine, wir müssen durch das Video zu dem Abschnitt schlendern. Schauen wir uns das fertige Projekt an. Wenn ich auf die Play-Schaltfläche klicke, wird das Video angezeigt. Wenn ich auf die Play-Schaltfläche klicke, wird es abgespielt. Eigentlich funktionieren alle Steuerungen einwandfrei. Hier haben wir hier Geschwindigkeitsoptionen. Im Moment wird das Video im normalen Modus abgespielt. Wenn ich, sagen wir, auf zwei X klicke, wird es schnell abgespielt. Als nächstes haben wir hier ein Bild. Im Bildmodus können Sie dieses kleine Fenster per Drag & Drop ziehen. Außerdem haben wir hier den Vollbildmodus. Wenn ich darauf klicke, wird das Video im Vollbildmodus abgespielt. Das war's, was wir tun werden Wenn ich auf die X-Schaltfläche klicke, wird das Video geschlossen. Lassen Sie uns weitermachen und mit der Erstellung des HTML-Markups beginnen . Im HTML-Markup werden wir uns auf viele verschiedene Elemente konzentrieren und der Vorlesung folgen Ich werde neue Kommentare direkt über dem Tag für den letzten Abschnitt einfügen , den wir für das Video benötigen Dann öffne das Element, es wird ein Videocontainer sein , in den ich ein weiteres Deep einfügen werde und es wird Video sein. Ich werde ein X-Schließmuster erstellen. Das ist ein Open-Tag mit der Klasse PTN. Fügen Sie dann ein Element ein, bei dem die Klassen eine feste FA X-Markierung haben. Danach öffne ich ein anderes und es wird der Controls-Wrapper sein Als Nächstes benötigen wir ein weiteres Dip-Tag und es wird eine Video-Timeline sein , in der wir einen Fortschrittsbereich haben werden Dieses Element wird ein Span-Tag mit Null enthalten. Außerdem werden wir hier noch einen Sprung und das wird ein Teil des Fortschritts sein. Dieses Element wird leer sein. Als Nächstes müssen wir Videosteuerungen erstellen , bei denen wir verschiedene Optionen haben werden. Ich meine Optionen auf der linken Seite, in der Mitte und auf der rechten Seite, wir brauchen tiefe Elemente mit den Klassenoptionen links. Ich werde diese Codezeile zweimal duplizieren. Wie gesagt, wir brauchen Optionen in der Mitte, auch auf der rechten Seite. Kümmern wir uns um die Optionen. Eigentlich brauchen wir deine Optionen und keine Option. Kümmern wir uns hier um die Optionen auf der linken Seite , die vier Lautstärken haben wird . Ich werde das Element unsicher machen, wenn die Klassen eine solide Lautstärke haben. Als Nächstes werde ich ein Eingabe-Tag erstellen. Der Typ wird Bereich sein. Außerdem werde ich hier ein paar verschiedene Attribute hinzufügen . Der erste wird ein Minimum sein. Ich werde es auf Null setzen. Dann haben wir das Maximum und es wird eins sein. Außerdem benötigen wir ein weiteres Attribut namens step. Der Wert wird „Alles klar“ sein, das ist ungefähr der Bereich. Als Nächstes werde ich eine weitere Entwicklung erstellen und es wird ein Video-Timer sein. Drinnen. Der Video-Timer wird drei verschiedene Span-Elemente haben. Der erste wird die aktuelle Zeit sein. Ich gehe auf Null. Lassen Sie uns das Span-Element zweimal duplizieren. Das zweite wird ein Separator sein. Ich werde einfügen. Vorwärts. Was das dritte Span-Element betrifft, so wird es die Videodauer sein. Als Nächstes werde ich mich um die Optionen in der Mitte kümmern . Wir werden hier drei verschiedene Knöpfe haben. Lassen Sie uns einen Button erstellen, bei dem die Klasse rückwärts springt. Ich werde deine Elemente einfügen. Es wird FAS FA rückwärts sein. Lass uns den Button zweimal duplizieren. Das zweite Button-Element wird für die Spiel-Pose bestimmt sein. Lass uns den Klassennamen ändern. Was das Element angeht, wird es ein Spiel der FASFA sein. Was die dritte Schaltfläche angeht, brauchen wir hier, vorwärts statt rückwärts Lassen Sie uns über die Optionen in der Mitte sprechen. Als nächstes haben wir Optionen auf der rechten Seite. Ich werde deine Entwicklung einfügen. Es wird Playback-Inhalt sein. Ich werde Ihre Taste einfügen, was die Wiedergabegeschwindigkeit sein wird. Hier werde ich das Google-Material-Symbol anstelle des Elements verwenden . Gehen wir zum Browser und suchen wir nach Google-Material-Symbolen. Wir müssen die Google Fonts-Website besuchen, auf wir die Schriftarten von Select hier abgerufen haben Dieser Stil wird abgerundet sein. Dann werde ich nach Zeitlupenvideos suchen. Das ist das Symbol, das wir brauchen. Lass uns auf dieses Symbol klicken. Und dann werde ich diesen Link von hier kopieren. Wir müssen den Link in das Head-Element einfügen. Dann müssen wir dieses Span-Element von hier kopieren. Fügen wir das Span-Element in die Schaltfläche ein. Prüfen Sie dann, ob das Symbol angezeigt wird. Wie Sie sehen können, haben wir hier das Symbol, es wird angezeigt. Als nächstes müssen wir hier Geschwindigkeitsoptionen hinzufügen. Insgesamt werden wir fünf verschiedene Geschwindigkeitsoptionen haben, die wir benötigen. Die erste Option wird zwei x sein. Lassen Sie uns die Entwicklung viermal duplizieren und die Optionen ändern. Die zweite wird 1,5 sein, dann werden wir hier normal sein. Die nächste wird 0,75 sein . Was die letzte Geschwindigkeitsoption angeht, wird sie 0,5 sein. Außerdem müssen wir den Entwicklungen auch die Attribute hinzufügen Das Attribut wird Datengeschwindigkeit sein, und wir müssen hier die ähnlichen Werte einfügen , wir brauchen hier zwei. Dann 1,5 wie gewohnt, ich werde hier einen verwenden. Dann haben wir hier 0,75 und schließlich 0,5. Das war's, zu den Geschwindigkeitsoptionen Als Nächstes müssen wir hier ein Symbol für ein Bild hinzufügen. Im Bildmodus benötigen wir einen Button mit der Klasse Pick in Peak. Das heißt, wir brauchen hier eigentlich Peak in Peak. Das bedeutet Bild-im-Bild-Modus. Auch hier müssen wir uns das Symbol schnappen. Lass uns nach Bild in Bild suchen. Das ist das Symbol. Ich nehme das Span-Element und füge es hier in die Schaltfläche ein. Wenn wir den Browser überprüfen, werden Sie sehen, dass das Symbol angezeigt wird Ordnung, als nächstes brauchen wir eine weitere Taste für den Vollbildmodus. Fügen wir hier den Cluster-Bildschirm hinzu. Ich werde Element mit den Klassen FA solid, FA, expand verwenden . Schließlich müssen wir das Video einbetten. Wir müssen hier das Video selbst einfügen. Wir müssen das Video-Tag im Quellattribut öffnen. Wir müssen den Pfad der Datei angeben. Zuallererst müssen wir den aktuellen Ordner verlassen. Dann müssen wir einen Ordner namens Videos auswählen. Und wir müssen diese Datei hier auswählen. In Ordnung, ich denke, das bezieht sich auf das HTML-Markup. Ich hoffe, dass hier alles richtig ist. Wir haben gerade alle Elemente, alles ist durcheinander Sie können hier die Elemente aus der Kopfzeile sehen. Und das passiert, weil es in dem Video um unser Projekt geht. Es ist die Vorschau unseres Projekts. Deshalb siehst du hier die Elemente aus der Kopfzeile. Wir werden diese Probleme beheben und diese Elemente in den kommenden Vorlesungen anpassen . Lass uns weitermachen. 33. Styling-Video-Player: In der vorherigen Vorlesung haben wir das HDML-Markup für das Video vorbereitet, ich meine für den zweiten Teil des Vorlagenabschnitts Jetzt ist es an der Zeit, diese Elemente zu stylen. Im Moment ist hier alles durcheinander, aber das werden wir bald beheben Das Erste, was ich dann tun werde , bevor wir anfangen, diese Elemente zu stylen, ist , ein kleines Problem zu beheben Wie Sie sehen können, wird dieses Symbol hier nicht angezeigt. Wenn wir den HTML-Code überprüfen, werden Sie feststellen, dass hier D fehlt. Ich meine, wir brauchen ein festes Gesicht. Jetzt sollte das Problem behoben sein. Wie Sie sehen können, wird das Symbol angezeigt. Okay, jetzt gehen wir zur CSS-Datei und erstellen neue Commons für das Video. Ich werde einen Videocontainer auswählen. Zunächst werde ich die Position des Videos definieren . Es wird repariert werden. Dann werde ich die Eigenschaften oben und links definieren. Ich werde Top auf Null setzen. Dann wird die linke Position Null sein. Ich werde innerhalb der Höhe definieren. Lassen Sie uns beide auf 100% setzen . Dann werde ich die Hintergrundfarbe ändern. Lassen Sie uns die Hintergrundfarbe auf einen RGBA-Wert setzen. Die Werte werden zwei bis sieben sein, dann zwei für zwei, dann haben wir 253 Was die Opazität angeht, werde ich sie auf 2,9 einstellen. Hier haben wir den Videocontainer Aber wir haben hier das Problem. Es landete hinter einigen Elementen. Um dieses Problem zu beheben, müssen wir die Index-Eigenschaft definieren. Setzen wir es auf einen höheren Wert. Sagen wir 100. Jetzt ist das Problem behoben. Der Videocontainer ist erstellt, er hat den Stil Als Nächstes wähle ich Video I, dieses Element hier Lassen Sie uns Video auswählen und seine Breite definieren. Es werden 90 m sein. Was die Höhe angeht, werde ich die Höhe auf O setzen. Außerdem müssen wir das Video selbst auswählen. Ich meine hier dieses Element, wählen wir es mit dem Tag-Namen aus und setzen die Höhe auf 100%. In diesem Fall nimmt es 100% der Höhe des übergeordneten Elements ein. Jetzt haben wir hier das Video. Als Nächstes werde ich es in der Mitte des Containers platzieren . Um das zu tun, werde ich Bücher aus Flachs verwenden. Wir benötigen Display Flex, dann Justify Content Center und das Line Item Center Wie Sie jetzt sehen können, befindet sich das Video in der Mitte der Seite. Als Nächstes füge ich dem Video einen kleinen Schatten hinzu. Lass uns Box Shadow verwenden. Ich werde hier die folgenden Werte einfügen. Wir brauchen null, dann einen Ram. Zehn Ram als Farbe. Ich werde RGBA verwenden. Die Werte werden 2052 sein, dann auch eins bis neun, die Ich gehe auf 32,7. Wie Sie sehen können, hat das Video einen schönen und coolen Danach werde ich den Controls Wrapper abnehmen. Lassen Sie uns auf 100% setzen dann setze ich die Position auf absolut Als Nächstes definiere ich die linke Position, sie wird Null sein. Was die untere Position anbelangt, werde ich sie auf -5,5 m einstellen, die Steuerung Wrapper und die Dup unten unten Das passiert, weil wir relative Position für das Video benötigen Wie Sie jetzt sehen können, ist der Wrapper für die Steuerelemente korrekt positioniert Um besser sehen zu können, füge ich hier eine temporäre Hintergrundfarbe Nehmen wir an, Sie lesen hier, wir haben den Controls Wrapper In Ordnung, lassen Sie uns diese Hintergrundfarbe loswerden. Als Nächstes werde ich mich um die Video-Timeline kümmern. Wählen wir dieses Element aus. Ich werde die Position absolut setzen. Dann setze ich auf 100%. Was die Höhe angeht, wird es 0,7 Ram sein. Dann setze ich den Cursor auf den Zeiger. Außerdem werde ich, um dieses Element anzuzeigen, wieder eine temporäre Hintergrundfarbe verwenden . Stellen wir es auf Rot. Hier haben wir die Video-Timeline. Als nächstes müssen wir uns um den Fortschrittsbereich kümmern. Ab jetzt werde ich diese Farbe loswerden. Und dann wähle ich den Fortschrittsbereich aus. Wir brauchen Höhe, es werden 0,3 Ram sein. Dann brauchen wir ihre Hintergrundfarbe. Ich werde RGBA-Farbe verwenden. Es wird weiße Farbe sein, aber mit geringerer Opazität, 0,6. Hier haben wir den Fortschrittsbereich Als Nächstes werde ich mich um die Span-Elemente kümmern. Ich meine hier dieses Span-Element, das sich innerhalb des Fortschrittsbereichs befindet Ich wähle den Fortschrittsbereich, gefolgt vom T. Lassen Sie uns die Position auf absolut setzen. Dann benötigen wir die relative Position für das übergeordnete Element , also den Fortschrittsbereich. Danach werde ich die Eigenschaften oben links definieren. Im Moment gehe ich zu einer Linie in der Mitte des Fortschrittsbereichs. Dafür setze ich die Position auf -2,5 Frame. Dann brauchen wir die linke Position, es wird 50% sein Um das Element perfekt zu zentrieren, müssen wir die Funktion translate x mit dem Wert -50% transformieren . Als Nächstes ändere ich die Farbe Es wird 333 sein und auch die Schriftgröße definieren. Ich werde es auf 1,3 Ram einstellen. Hier haben wir das Pan-Element. Als Nächstes kümmere ich mich um den Fortschrittsbalken. Lassen Sie uns weitermachen und Fortschrittsleiste auswählen. Ich werde eine Breite definieren. Lassen Sie uns sie für eine Weile auf 50% setzen. Dann wird die Höhe 100% sein . Ich werde die Hintergrundfarbe ändern. Es wird 2289 sein. Es ist blau. Hier haben wir den Fortschrittsbalken. Als Nächstes gehe ich zum Kreis des Fortschrittsbalkens. Ich werde diesen Kreis erstellen, indem ich vor dem Element, das wir hier brauchen, den Fortschrittsbalken verwende, gefolgt von den vier, dem Element, bei dem ich den Inhalt auf leer setzen werde. Als Nächstes stelle ich die Höhe beide auf 1,3 m ein. Dann benötigen wir einen Grenzradius von 50%. Da wir den Kreis erstellen und auch die Hintergrundfarbe ändern werden, werde ich dieselbe blaue Farbe verwenden. Als Nächstes benötigen wir die Position, um das Element anzuzeigen. Die Position wird absolut sein. Wir benötigen die relative Position für das Kraftelement. Dann werden die beiden Positionen bei 50% liegen . Dann brauchen wir die richtige Position. Ich werde es auf Null setzen. Um das Element dann vertikal zu zentrieren, müssen wir Y um -50% transformieren Jetzt sollte der Kreis sichtbar sein Hier haben wir es. In Ordnung, als Nächstes kümmere ich mich um die Videosteuerung. Lassen Sie uns weitermachen und Videosteuerungen auswählen. Wir brauchen Kontrollen im Container. Lassen Sie uns zunächst die Breite definieren. Es wird 100% sein. Dann werde ich die Elemente ausrichten. Ich meine Flex-Artikel mit Flex-Büchern. Wir brauchen Display Flex. Als Nächstes benötigen wir die Mitte der Einzelposten , um die Flex-Artikel vertikal zu zentrieren. Außerdem werde ich Platz zwischen den Flex-Elementen schaffen . Mit Leerzeichen dazwischen meine ich, den inhaltlichen Abstand dazwischen zu rechtfertigen. Lassen Sie uns das Ergebnis überprüfen. Wie Sie sehen können, sind die Steuerelemente ausgerichtet. Als Nächstes werde ich mithilfe von Padding etwas Platz innerhalb des Elements schaffen mithilfe von Padding etwas Platz innerhalb des Elements Die Polsterung wird oben und unten aus einem Ram und zwei Ram auf der linken und rechten Außerdem werde ich die Hintergrundfarbe ändern. Es wird RGBA sein, schwarze Farbe mit einer Opazität von 0,5 Okay, hier haben wir also Videosteuerungen Als Nächstes werde ich mich hier um die Optionen kümmern. Wir haben drei Optionen, ich meine Optionen auf der linken Seite. Dann haben wir Optionen in der Mitte und Optionen auf der rechten Seite. Ich hoffe, du erinnerst dich von hier an sie. Optionen übrig. Dann haben wir das Optionscenter und die Optionen rechts. Lassen Sie uns weitermachen und Optionen auswählen. Ich werde das Display auf Flex einstellen. Dann werde ich die Breite für jede Option definieren. Ich werde 100% durch drei teilen, um jedem Element die gerade Breite zuzuweisen. Dafür berechnen wir dann die Funktion, wir einige Berechnungen durchführen können Wie gesagt, wir müssen 100% durch drei teilen. Dann werde ich die Elemente in der Mitte ausrichten, insbesondere mit der Option Elemente zentrieren. Ordnung, danach wähle ich das zweite Optionselement und das dritte Optionselement benötigen , weil wir für diese Optionen eine individuelle Ausrichtung Ich wähle das zweite Optionselement aus. Wir müssen hier das Inhaltszentrum rechtfertigen. Dann lassen Sie uns diesen Code duplizieren und den Child-Selektor ändern. Wir brauchen drei Was den Wert der Eigenschaft justify content angeht, so wird er flexibel sein. Wie Sie jetzt sehen können, sind die Optionen perfekt aufeinander abgestimmt. Jetzt müssen wir uns um die Knöpfe kümmern. Wählen wir die Schaltfläche, ich meine die Optionen-Schaltfläche, ich stelle die Höhe auf ein, dann müssen wir den Standardrahmen von unten entfernen . Lassen Sie uns den Rand auf keinen setzen. Als Nächstes werde ich die Standard-Hintergrundfarbe entfernen. Ich werde die Hintergrundfarbe auf transparent setzen. Und dann ändere die Farbe des Textes. Es wird weiß sein. Schließlich müssen wir den Cursor als Zeiger verwenden. Ordnung, jetzt, wo Sie die Schaltflächen sehen können, die Symbole ziemlich gut aus. Als Nächstes wähle ich Elemente aus. Wir brauchen Optionen. Ich werde das Telefon vergrößern, sagen wir auf 1,9 m. In Ordnung, los geht's. Aber als Nächstes werde ich mich um das Eingabeelement kümmern, das einen Bereich der Lautstärke darstellt. Ich werde Options Input auswählen. Ich werde die Höhe definieren. Es wird 0,4 Ram sein, dann wird die Breite 7,5 sein. Außerdem brauchen wir etwas Platz auf der rechten Seite mit Margin, oder? Sagen wir es zu einem Ram. Ich denke, das Eingabeelement, der Bereich der Lautstärke. Ziemlich nett. Als Nächstes müssen wir uns um die Span-Elemente des Video-Timers kümmern. Lassen Sie uns weitermachen und Video Time Time Line auswählen . Wir brauchen das Span-Element. Setzen wir die Farbe auf Weiß. Wie Sie sehen können, wurden die Span-Elemente weiß. müssen wir, von den Geschwindigkeitsoptionen gehe ich zu den Geschwindigkeitsoptionen, lassen Sie uns die Breite definieren. Es wird 9,5 RAM sein. Dann brauchen wir eine absolute Position. Relative Position für die übergeordneten Elemente. In diesem Fall ist Parent ein Playback-Inhalt, wir brauchen hier eine relative Position. Dann müssen wir die untere Position für die Geschwindigkeitsoptionen definieren . Es wird wie bei der linken Position sein, ich werde es auf minus vier Ram setzen. Dann werde ich die Hintergrundfarbe ändern. Hier wird es weiß sein, wir haben die Geschwindigkeitsoptionen. Als Nächstes werde ich es leicht abgerundet machen. Lassen Sie uns den Grenzradius 2.4 ausführen. In Ordnung, das ist es. Was die Geschwindigkeitsoptionen und die Entwicklung angeht, dann müssen wir uns um diese Textelemente kümmern , ich meine die Tiefen Ich wähle „ Geschwindigkeitsoptionen“ und dann „Entwicklung Lassen Sie uns die Telefongröße auf 1,4 RAM einstellen. Dann werde ich etwas Platz in der Entwicklung schaffen. Sagen wir Pudding, 2,5 Ram oben drauf. Dann brauchen wir Null auf der rechten Seite, 0,5 auf der Unterseite und 1,5 RAM auf der linken Seite Dann wieder verwenden, näher 0,2 Okay, jetzt sehen die Geschwindigkeitsoptionen viel besser aus. Als Nächstes müssen wir eine der Geschwindigkeitsoptionen aktivieren. Eigentlich werde ich diese Option ganz normal aktivieren. Die Standard-Geschwindigkeitsoption, die ich zur dritten Entwicklung hinzufügen werde , was normal ist, wird die aktive Option sein. Dann wähle ich hier die aktive Option. Lass uns die Hintergrundfarbe ändern. Es wird die blaue Farbe sein, die wir kürzlich verwendet haben. Dann muss die Farbe weiß sein. Okay, wie Sie sehen können, haben wir hier eine nette und coole Standard-Geschwindigkeitsoption, was normal ist. Okay, das Letzte, was ich mit den Steuerelementen machen werde , ist, diese Symbole perfekt in der Mitte zu platzieren. Ich meine die vertikale Zentrierung, wie Sie sehen, sie sind nicht perfekt zentriert Um das zu tun, wähle ich hier Optionen und dann Optionen Spin Ich stelle W und die Höhe 100% ein. Dann verwende ich die Zeilenhöhe. Ich werde es so einstellen, dass es zusammengeklappt wird. Wie Sie jetzt sehen können, ist das Problem behoben. Ordnung, das Einzige , was ich in diesem Video tun werde , ist, mich um den X-Schließknopf zu kümmern . Es sollte hier platziert werden. Lassen Sie uns weitermachen und PTM auswählen. Eigentlich brauchen wir hier ein Element, ich meine das Symbol Ich werde die Position auf absolut setzen. Dann müssen wir die Position auf -6% einstellen. Die richtige Position wird Null sein Außerdem werde ich die Schriftgröße auf 3.022,2 Ram erhöhen Schriftgröße auf 3.022,2 Ram Und dann zeigen Sie mit dem Cursor. In Ordnung, das ist es also. Wir sind mit dem Styling des Videos fertig, es sieht ziemlich gut aus. Als Nächstes müssen wir dafür sorgen , dass es dafür funktioniert. Fahren wir mit der nächsten Vorlesung fort. 34. Play/Pause-Button arbeiten lassen: In der vorherigen Lektion haben wir das Styling des Videoplayers abgeschlossen und jetzt müssen wir ihn zum Laufen bringen. Dafür werde ich Javascript verwenden. Gehen wir zum VS-Code und öffnen wir das Skript oder die JS-Datei. Ich werde neue Kommentare für das Video einfügen. Dann werde ich ein paar verschiedene Elemente auswählen. Der erste wird ein Videocontainer sein. Ich werde dieses Element mithilfe der Abfrageselektor-Methode auswählen mithilfe der Abfrageselektor-Methode Wir müssen hier den Klassennamen, den Videocontainer, angeben. Als Nächstes wähle ich das Video selbst aus. Ich meine die Videodatei. Nennen wir das variable Hauptvideo. Und wählen Sie dieses Element mit dem Tag-Namen aus. Wir haben dieses Element hier ausgewählt, Video auch, ich werde eine weitere Variable erstellen und sie wird Play-BTN sein Wählen wir das Element aus, das wir hier benötigen, Klassenname, Pose, und wir müssen auch das Insider-Element auswählen, weil es ein Telefon ist, auch ein Mikrofon Okay, wir haben drei verschiedene Elemente ausgewählt, den Videocontainer, das Video selbst und auch die Play-Taste. Jetzt müssen wir der Play-Schaltfläche mit Click-Event einen Event-Listener hinzufügen Play-Schaltfläche mit Click-Event einen Event-Listener Sobald wir auf die Play-Schaltfläche klicken, sollte das Video abgespielt werden Dann sollte es beim nächsten Klick. Ich werde dem Play-BTN einen Event-Listener hinzufügen. Lassen Sie uns hier das Klickereignis angeben. Außerdem werde ich eine Callback-Funktion einrichten. Diese Funktion wird ausgeführt, sobald wir auf die Schaltfläche klicken. Wir müssen überprüfen, ob das Video gepostet wurde oder nicht. Wenn ja, bedeutet das, dass das Video nicht abgespielt wird. Wenn das Video gepostet wurde, sollte es abgespielt werden. Wir benötigen eine if-Anweisung , in die ich die folgende Bedingung einfüge. Wir brauchen den Hauptvideobeitrag. Es ist eine eingebaute Eigenschaft in Java-Skript. Wenn es wahr ist, sollten wir das Video abspielen. Dafür werde ich eine eingebaute Funktion verwenden , die Clay genannt wird. Ordnung, als Nächstes brauchen wir eine L-Anweisung, in der wir das Video posten müssen. Wir brauchen eine Methode namens Post. In Ordnung, lass uns zum Browser gehen und nachschauen. Klicken Sie auf die Schaltfläche. Wie Sie sehen können, wird das Video abgespielt. Sobald ich auf die Schaltfläche klicke, wird sie angehalten. In Ordnung, also funktioniert alles gut. Als Nächstes müssen wir das Symbol ändern. Ich meine, wenn das Video abgespielt wird, sollten wir hier die Pose-Taste anzeigen. Und sobald wir das Video gepostet haben, sollten wir hier wieder den Play-Button haben. Wir müssen die Knöpfe ersetzen, ich meine die Icons. Dafür werde ich dem Hauptvideo sogar einen Hörer hinzufügen Die Veranstaltung wird gespielt. Außerdem werde ich hier eine Callback-Funktion hinzufügen. Sie wird ausgeführt, sobald das Video abgespielt wird. Wenn das Video abgespielt wird, müssen wir die Klasse des Telefonsymbols ersetzen. Wir brauchen eine Plattenliste, dann müssen wir die Ersetzungsmethode verwenden Wir müssen die aktuelle Klasse ersetzen, bei der es sich um ein Theaterstück handelt. Wir müssen es durch FA-Post ersetzen. Es wird das Symbol ändern. Wir brauchen dasselbe für das Pose-Event, das wir hier brauchen. Dann füge ich hier FAA-Spiel In Ordnung, lassen Sie uns überprüfen, ob es funktioniert. Sobald wir klicken, wird das Video abgespielt und auch das Symbol wird geändert. Wie Sie sehen können, funktioniert alles perfekt. Also gut, das war's für den Moment. Fahren wir mit der nächsten Vorlesung fort. 35. Fortschrittsbalken aktualisieren: Ordnung, in der vorherigen Vorlesung haben wir die Play-Taste programmiert. Sobald ich darauf klicke, wird das Video abgespielt. Auch das Symbol wird sich ändern. Wenn ich dann auf die Schaltfläche „Posten“ klicke, wird das Video angehalten. Bisher funktioniert alles perfekt. Als nächstes müssen wir uns um den Fortschrittsbalken kümmern. Im Moment ist es standardmäßig bei 50%, wir müssen es ändern und wir müssen die Breite des Fortschrittsbalkens entsprechend dem Videofortschritt aktualisieren . Gehen wir zurück zur Javas-Datei. Zunächst wähle ich den Fortschrittsbalken aus. Lassen Sie uns eine neue Variable erstellen. Es wird ein Fortschrittsbalken sein. Ich werde dieses Element erneut mit der Abfrageselektor-Methode auswählen erneut mit der Abfrageselektor-Methode Ich werde hier den Klassennamen und den Fortschrittsbalken angeben. Als Nächstes werde ich die Breite des Fortschrittsbalkens ändern. Wie ich schon sagte, sind es 50% und ich werde es auf Null setzen. Wie Sie sehen können, ist die Breite des Fortschrittsteils Null. Eigentlich werde ich die Position ändern , bevor das Element außerhalb des Videoplayers gelandet ist. Im Moment ist die rechte Position auf Null gesetzt und ich werde sie auf -1,3 m setzen . Jetzt ist das Problem behoben Als Nächstes füge ich dem Hauptvideo einen Event-Listener hinzu Und das Ereignis wird ein Zeitupdate sein. Zeitaktualisierungsereignis wird regelmäßig ausgelöst , wenn die Videowiedergabe im Laufe der Zeit voranschreitet Ich werde dem Hauptvideo einen Event-Listener hinzufügen. Wie gesagt, die Veranstaltung wird ein Zeitupdate sein. Wir brauchen hier eine Callback-Funktion. Sie wird ausgeführt, sobald die Wiedergabezeit des Videos abgelaufen ist. Ich werde die Strukturierung verwenden und zwei Eigenschaften, die aktuelle Uhrzeit und die Dauer, aus dem Ereignisobjekt abrufen aktuelle Uhrzeit und die Dauer, aus dem Ereignisobjekt Wir brauchen hier Ziele. Und ich werde hier das Event-Objekt als Argument platzieren. Diese Codezeile extrahiert zwei Eigenschaften, aktuelle Zeit und die Dauer, aus dem Gedankenzielobjekt. In diesem Kontext steht Target für das Videoelement, in diesem Fall für das Hauptvideo. Aktuelle Zeit steht für die aktuelle Wiedergabezeit des Videos in Sekunden. Und die Dauer steht für die Gesamtdauer des Videos, ebenfalls in Sekunden. Ich werde diese beiden Eigenschaften in der Konsole anzeigen. Lassen Sie uns hier die aktuelle Uhrzeit und Dauer einfügen. Dann gehe ich zum Browser, inspiziere die Seite und überprüfe den Konsolen-Tab. Sobald ich auf die Play-Schaltfläche klicke, wird hier die aktuelle Uhrzeit in Sekunden angezeigt. Und wir haben hier auch die Gesamtdauer, Gesamtzeit des Videos. Okay, gehen wir zurück zur Charles-Datei. Ich werde diese Codezeile loswerden. Als Nächstes werde ich den prozentualen Wert des Fortschrittsteils definieren . Dafür müssen wir eine neue Variable erstellen. Ich nenne es Person. Es entspricht der aktuellen Zeit geteilt durch die Dauer. Wir müssen es mit 100 multiplizieren. Diese Zeile berechnet den Prozentsatz des Videos, der abgespielt wurde Sie teilt die aktuelle Zeit durch die Dauer und multipliziert das Ergebnis mit 100, um es in einen Prozentwert umzurechnen Dieser Wert gibt an, wie weit die Videowiedergabe fortgeschritten ist Jetzt müssen wir diesen Wert zum Stil des Fortschrittsbalkens hinzufügen diesen Wert zum Stil des Fortschrittsbalkens Dafür müssen wir den Fortschrittsbalken auswählen. Dann benötigen wir die Stileigenschaft gefolgt von der Breite. Dann öffne ich, dann öffne ich Template-Zeichenketten. Wir müssen hier den Prozentwert übergeben , den wir gerade definiert haben. Wir benötigen Kalibrierung, gefolgt vom Prozentzeichen. Diese Linie aktualisiert die Breite eines Fortschrittsbalkenelements , um den Fortschritt des Videos visuell darzustellen Sie legt die Breiteneigenschaft des CSS-Stils für Fortschrittsbalken auf den berechneten Personenwert fest, gefolgt vom Prozentzeichen. Dadurch wird der Fortschrittsbalken vergrößert oder verkleinert. Wenn das Video abgespielt wird, oder sechs, ist alles einsatzbereit Der Fortschrittsbalken. Wenn ich auf die Play-Schaltfläche klicke, wird der Fortschrittsbalken entsprechend aktualisiert, sodass alles einwandfrei funktioniert. Ordnung, lassen Sie uns über dieses Video sprechen, lassen Sie uns mit dem nächsten weitermachen. 36. Video vorwärts und rückwärts überspringen: In der vorherigen Vorlesung haben wir den Fortschrittsbalken programmiert Sobald wir mit der Wiedergabe des Videos beginnen, wird der Fortschrittsbalken im Verlauf des Videos automatisch aktualisiert im Verlauf des Videos automatisch Als Nächstes werde ich diese Schaltflächen zum Vorwärts - und Rückwärtsspringen programmieren diese Schaltflächen zum Vorwärts - und Rückwärtsspringen Wenn wir uns das fertige Projekt ansehen und auf die Schaltflächen „Zurück“ und „Vorwärts “ klicken, funktionieren sie, wie Sie sehen können Das Video ist neu bindend. Gehen wir zur Geos-Datei und wählen zwei Elemente aus, das Die Tasten springen vorwärts und rückwärts . Also werde ich eine Variable erstellen und sie Skip Backward nennen Ich werde das Element mithilfe der Abfrageselektormethode auswählen mithilfe der Abfrageselektormethode Wir müssen hier rückwärts springen, gefolgt von den Elementen. Lassen Sie uns diesen Code duplizieren und rückwärts zu vorwärts wechseln. Wir brauchen für, alles klar, jetzt müssen wir beiden Buttons mit Click-Event einen Event-Listener hinzufügen beiden Buttons mit Click-Event Und dann müssen wir das Überspringen des Videos definieren , indem wir eine gewisse Zeit zur aktuellen Zeit des Videos hinzufügen und subtrahieren aktuellen Zeit Fügen wir rückwärts einen Event-Listener hinzu. Wir brauchen Click-Event. Dann müssen wir hier eine Callback-Funktion übergeben , die ausgeführt wird, sobald wir auf den unteren Rand klicken Wie gesagt, wir müssen eine gewisse Zeit von der aktuellen Zeit des Videos abziehen Zeit von der aktuellen Zeit des Deshalb brauchen wir ihr Hauptvideo, die aktuelle Uhrzeit. Wir brauchen ihre aktuelle Zeit, dann ist minus gleich, ich ziehe 5 Wenn ich jetzt mit der Wiedergabe des Videos beginne und Rückwärtstaste klicke, wird das Video um 5 Sekunden übersprungen Die Schaltfläche zum Zurückspringen funktioniert einwandfrei. Als nächstes müssen wir dasselbe mit der Schaltfläche „Vorwärts springen“ machen. Ich werde diesen Code duplizieren. Wir müssen die Variable ändern, sie wird übersprungen. Wir müssen hier nochmal 5 Sekunden hinzufügen. Hier subtrahieren wir 5 Sekunden von der aktuellen Wiedergabezeit des Videos Das Video wird um 5 Sekunden zurückgespult , wenn auf die Schaltfläche zum Zurückspringen geklickt wird Auf die gleiche Weise verlängern wir die Wiedergabezeit des Videos um 5 Sekunden und das Video wird um 5 Sekunden vorgespult, wenn auf die Taste „Vorwärts halten “ geklickt wird wenn auf die Taste „Vorwärts halten Wenn wir die Ergebnisse überprüfen und auf die Schaltflächen zum Überspringen klicken, werden Sie feststellen, dass alles einwandfrei funktioniert Schauen wir uns die Tasten „ Zurück halten“ und „Vorwärts“ an. Lassen Sie uns mit der nächsten Vorlesung fortfahren. 37. Arbeiten an der Lautstärkeregelung: In der vorherigen Lektion haben wir die Tasten „Zurück springen“ und „Vorwärts springen“ programmiert die Tasten „Zurück springen“ und „Vorwärts springen Wenn wir das Video abspielen und dann auf diese Schaltflächen klicken, wird das Video übersprungen Sie funktionieren gut. Als nächstes müssen wir uns um die Lautstärketaste kümmern . Wenn wir uns das fertige Projekt ansehen und das Video abspielen, hören Sie den Ton des Videos. Wenn ich auf die Lautstärketaste klicke, wird der Ton des Videos stummgeschaltet. Und Sie können auch sehen, dass das Symbol geändert wurde. Wir werden diesen Button in dieser Vorlesung programmieren und uns dann um den Slider kümmern. In Ordnung, gehen wir zum VS-Code. Zuallererst werde ich hier Kommentare hinzufügen, weil der Code immer größer wird. Und um Verwirrung zu vermeiden, fügen wir die Kommentare hinzu. Ich werde hier den Fortschrittsbalken hinzufügen, das Ende des Fortschrittsbalkens. Dann haben wir hier die Schaltfläche „Pose abspielen“. Eigentlich müssen wir diese Zeile hier hinzufügen. Und dann haben wir Skip-Buttons. Ordnung, jetzt ist es an der Zeit, sich um die Lautstärketaste zu kümmern . Ich werde Lautstärke wählen. Batson. Ändern wir den Namen Dann müssen wir den Klassennamen ändern, wird Lautstärke I am Telefon sein, also Symbol. Dann werde ich hier neue Kommentare hinzufügen. Ich werde der Lautstärketaste einen Event-Listener hinzufügen. Beim Klickereignis benötigen wir Volume BTN und fügen einen Event-Listener hinzu. Ich werde dein Klickereignis einfügen. Außerdem benötigen wir eine Callback-Funktion, die ausgeführt wird, sobald wir auf die Lautstärketaste klicken Jetzt müssen wir eine Anweisung verwenden, in der ich den aktuellen Status der Lautstärketaste überprüfen werde der Lautstärketaste In der Bedingung in der Aussage und dann werde ich es erklären. Wir brauchen keinen Operator, gefolgt von einer Volumen-PCN-Klassenliste. Dann verwende ich die Methode contains. Ich werde hier den Klassennamen angeben, ein hohes Volumen hat. Diese Bedingung prüft, ob die Lautstärketaste nicht die FA-Lautstärke hoch eingestellt hat. Die Methode class contains wird verwendet , um festzustellen, ob eine Klasse für das Element vorhanden ist. Wenn die Taste nicht die Klasse FA-Lautstärke hoch hat, bedeutet dies, dass die Lautstärke derzeit nicht auf die höchste Stufe eingestellt ist . Wenn diese Bedingung zutrifft, müssen wir die Lautstärke 2,5 einstellen . Das bedeutet, dass wir die Lautstärkeeigenschaft des Hauptvideoelements auf 50% setzen . Als Nächstes müssen wir das Symbol ersetzen. Wenn diese Bedingung zutrifft, müssen wir das Telefon austauschen. Also das Symbol, das wir brauchen, müssen die Volumen-PTN-Klassenliste ersetzen. Wir müssen hier die FA-Marke für Band X überschreiten. Dieses Symbol zeigt uns, dass der Ton stummgeschaltet ist. Jetzt brauchen wir diesen Klassennamen. Lass uns ihn kopieren und hier einfügen. Ordnung, danach müssen wir die L-Anweisung verwenden , in der wir die Lautstärke des Videos auf Null setzen müssen. Wir müssen den Ton stummschalten. Wir benötigen die Hauptlautstärke des Videos. Es sollte gleich Null sein. Außerdem müssen wir das hier benötigte Symbol ersetzen, FA Volume High, dann ein Volume X-Zeichen. Lassen Sie mich das noch einmal erklären. Diese Zeile ersetzt die Markierung der Klasse FA für Lautstärke X, die für ein Stummschaltsymbol steht, FA Volume High, was für ein Symbol mit hoher Lautstärke steht. Dadurch wird das Boson-Symbol für die Lautstärke visuell aktualisiert, um anzuzeigen, dass die Lautstärke jetzt höher ist Was diese Zeile hier betrifft, ersetzt sie die Klasse FA Volume High durch die Markierung FA Volume X. Symbol der Lautstärketaste wird visuell aktualisiert um anzuzeigen, dass die Lautstärke stummgeschaltet ist Gehen wir zum Browser und prüfen, ob es gut funktioniert. Ich werde das Video abspielen, den Sound. Wenn ich auf die Lautstärketaste klicke, wird der Ton stummgeschaltet und das Symbol ändert sich Wie Sie sehen können, funktioniert alles einwandfrei. Die Lautstärketaste ist programmiert. Als nächstes müssen wir uns dafür um diesen Slider kümmern. Fahren wir mit der nächsten Vorlesung fort. 38. Arbeiten an Volume Slider: In der vorherigen Vorlesung haben wir die Lautstärketaste programmiert. Jetzt müssen wir uns wie gesagt um den Lautstärkeregler kümmern, dieses Eingabeelement hier. Schauen wir uns das fertige Projekt an und spielen das Video ab. Sie können mit dem Slider interagieren und die Lautstärke entsprechend ändern. Wenn ich diesen Kreis auf die linke Seite ziehe, wird das Video stummgeschaltet und das Symbol ändert sich entsprechend. Das werden wir in dieser Vorlesung tun. Gehen wir zurück zum VS-Code wählen die Eingabeelemente aus, aber zuerst werde ich die Kommentare ändern. Lassen wir hier die Lautstärke stehen, weil wir hier auch den Code des Sliders hinzufügen werden. Ich werde hier nur die Lautstärke belassen. Dann wähle ich Eingabeelemente aus. Wir brauchen einen Lautstärkeregler. Ich werde den Klassennamen ändern. Er muss gehen. Es ist der Teil der Optionen auf der linken Seite. Wir brauchen links und dann rechts eingeben, das Element ist ausgewählt. Als nächstes müssen wir dem Element, das wir brauchen, einen Event-Listener hinzufügen . Hier müssen wir den Lautstärkeregler hinzufügen, wir müssen einen Event-Listener hinzufügen Das Ereignis wird eingegeben. Dieses Ereignis wird immer dann ausgelöst, wenn der Wert des Eingabeelements ändert. In diesem Fall, wenn der Benutzer mit dem Lautstärkeregler interagiert Ich werde Ihre Eingabe weitergeben und dann benötigen wir eine Fehlerfunktion , die ausgeführt wird, sobald das Ereignis eintritt Jetzt werde ich die Lautstärke des Videos definieren. Wir benötigen die Hauptlautstärke des Videos. Wir müssen den Wert vom Zielobjekt abrufen. Wir brauchen hier den Zielwert. Wir müssen ihn mit eins multiplizieren. Und ich werde erklären , warum wir das tun. Diese Zeile setzt die Lautstärkeeigenschaft des Hauptvideoelements auf den aktuellen Wert des Lautstärkereglers , der in diesem Fall auf den Wert der Multiplikation mit eins abzielen soll den Wert der Multiplikation mit eins diese Konvertierung wird sichergestellt, dass der Wert als Zahl und nicht als Zeichenfolge behandelt wird Als Nächstes müssen wir die if-Anweisung verwenden. Wir benötigen eine if-Anweisung mit der folgenden Bedingung. Das Hauptvideo ist gleich Null. Diese Bedingung überprüft, ob die Lautstärke des Videos auf Null gesetzt ist. Mit anderen Worten, ob es stummgeschaltet ist oder nicht. Wenn die Lautstärke stummgeschaltet ist, müssen wir das Lautstärketastensymbol aktualisieren, um auf hinzuweisen Wenn es nicht stummgeschaltet ist, müssen wir das Symbol aktualisieren, um eine hohe Lautstärke anzuzeigen Wir müssen wieder diese Leitungen benutzen. Wir brauchen hier diese Codezeile. Und dann müssen wir in der L-Anweisung die X-Markierung durch das Symbol für hohe Lautstärke ersetzen. Ich werde diese Codezeile hier übergeben. Ordnung, endlich werde ich hier den Lautstärkereglerwert hinzufügen , der der Lautstärke des Hauptvideos entspricht . Diese Codezeile legt den Wert des Lautstärkereglers , dass er der aktuellen Lautstärke des Hauptvideoelements entspricht . Dadurch wird sichergestellt, dass die Position des Schiebereglers visuell die aktuelle Lautstärkeeinstellung widerspiegelt wenn die Seite geladen oder der Schieberegler zum ersten Mal angezeigt wird. Ordnung, gehen wir zum Browser und überprüfen, ob alles gut funktioniert. Ich werde das Video abspielen. Dann lass uns den Slider verfolgen. Eigentlich funktioniert der Slider nicht. Lass uns den Code überprüfen. Vielleicht haben wir hier irgendwo einen Fehler. Wir benötigen die Hauptlautstärke des Videos. Ich habe vergessen, diese Immobilie hier zu schreiben. Jetzt denke ich, dass der Code funktionieren sollte. Lass uns nachschauen. Jetzt haben wir immer noch ein Problem. Gehen wir zurück zum VS-Code. Das Problem ist, dass uns hier das Event-Objekt fehlt. Jetzt denke ich, dass es funktionieren sollte. Ja. Jetzt funktioniert dieser Slider einwandfrei. Und wir können damit interagieren und die Lautstärke entsprechend ändern. In Ordnung, das war's also mit der Lautstärke. Fahren wir mit der nächsten Vorlesung fort. 39. Geschwindigkeitsoptionen steuern: In der vorherigen Vorlesung ist es uns gelungen, die Lautstärke zu regeln. Ich meine, wir haben die Lautstärketaste und auch den Lautstärkeregler programmiert . Und jetzt ist es an der Zeit, weiterzumachen und sich um die Geschwindigkeitsoptionen zu kümmern. Wenn wir uns das fertige Projekt ansehen und das Video abspielen, können wir hier eine beliebige Geschwindigkeit wählen. Lass uns Two X spielen. Wie du siehst, wird das Video schneller abgespielt. Das Gleiche haben wir mit niedrigerer Geschwindigkeit. Das Video wird mit niedrigerer Geschwindigkeit abgespielt . Okay? Das ist es, was wir in dieser Vorlesung tun werden. Gehen wir zum VS-Code. Ich werde zwei verschiedene Elemente auswählen. Der erste wird der Speedbutton sein. Ich wähle die Methode „Element is Inquiry Electron“ aus. Lassen Sie uns hier den Klassennamen angeben. Es wird die Wiedergabegeschwindigkeit sein. Wir brauchen hier ein Span-Element , weil der Batson ein Spin-Element ist Außerdem werde ich Geschwindigkeitsoptionen auswählen. Wir brauchen hier Geschwindigkeitsoptionen. Ich meine, bei der Wrapper-Entwicklung dieses Elements müssen wir den Klassennamen angeben und es werden Geschwindigkeitsoptionen sein Okay? Also das Erste , was ich tun werde, ist das Ein - und Ausblenden der Geschwindigkeitsoptionen zu verwalten. Sobald wir auf die Geschwindigkeitsschaltfläche klicken , sind die Geschwindigkeitsoptionen standardmäßig sichtbar. Im Moment sind die Geschwindigkeitsoptionen standardmäßig sichtbar. Wir müssen es ändern. Ich werde Klickereignisse zur Geschwindigkeitsschaltfläche hinzufügen. Eigentlich brauchen wir hier neue Kommentare für die Geschwindigkeitsoptionen. Dann füge ich der Geschwindigkeitsschaltfläche mit Click-Event einen Event-Listener Geschwindigkeitsschaltfläche mit Click-Event Außerdem benötigen wir hier eine Callback-Funktion, die ausgeführt wird, sobald Sie auf die Geschwindigkeitsschaltfläche klicken Ich werde zu den Geschwindigkeitsoptionen eine neue Klasse mit einer Gesamtmethode hinzufügen . Ich werde diesen Klassennamen in der CSS-Datei verwenden und wir werden neue Stile für diesen neuen Klassennamen definieren Ich werde Geschwindigkeitsoptionen verwenden, gefolgt von der Klassenlisteneigenschaft. Dann brauchen wir, wie gesagt, die totale Methode, wir müssen hier den Klassennamen angeben Ich nenne es Show. Als Nächstes müssen wir zur CSS-Datei gehen und die Geschwindigkeitsoptionen mit der neu erstellten Klassenshow auswählen . Zuallererst müssen wir die Geschwindigkeitsoptionen ausblenden. Ich werde die Deckkraft auf Null und die Sichtbarkeit auf ausgeblendet setzen Null und die Sichtbarkeit auf ausgeblendet setzen Dann benötigen wir diese beiden Eigenschaften mit unterschiedlichen Werten. Opazität wird eins sein, denn die Sichtbarkeit wird auch sichtbar sein Um den Effekt gleichmäßiger zu machen , lassen Sie uns einfach Wir brauchen hier Undurchsichtigkeit. Dann wird die Dauer 0,15 Sekunden betragen. Außerdem werde ich hier hinzufügen, dass es okay ist. Wie Sie sehen können, sind die Geschwindigkeitsoptionen ausgeblendet. Sobald ich auf die Schaltfläche klicke, werden sie angezeigt. Okay, alles funktioniert gut. Als Nächstes werde ich die Geschwindigkeitsoptionen ausblenden , wenn wir auf eine beliebige Stelle auf der Seite im Dokument klicken . Um das zu tun, werde ich Dokument einen Event-Listener hinzufügen Wir benötigen einen Event-Listener mit Klickereignissen. Außerdem werde ich hier eine Callback-Funktion einfügen. Ich werde zuerst Aussagen verwenden. Ich werde hier die Bedingung einfügen und sie dann erklären. Wir brauchen ein Ziel, das nicht gleich einer Spanne ist. Dann brauchen wir die zweite Bedingung mit unserem Operator. Es wird der Name der Zielklasse sein. Entspricht nicht dem Klassennamen des Span-Elements. Ich meine diesen, die materiellen Symbole sind abgerundet. Lassen Sie mich erklären, was dieser Zustand bedeutet. Diese Bedingung überprüft, ob das Ziel des angeklickten Elements kein Span-Element ist oder ob der Klassenname nicht , d. h. ob der Klassenname Materialsymbole nicht abgerundet Es wird geprüft, ob es sich bei dem angeklickten Element um etwas anderes als ein bestimmtes Span-Element handelt etwas anderes als ein bestimmtes Span-Element Mit dieser Klasse meine ich Klassenname, Materialsymbole rund Wenn diese Bedingung zutrifft, müssen wir die Klasse Show aus den Geschwindigkeitsoptionen entfernen. Ich werde mir diesen Code schnappen und die totale Methode in remove ändern Wenn wir jetzt zum Browser gehen, die Geschwindigkeitsoptionen anzeigen und dann auf eine beliebige Stelle auf der Seite klicken, stimmt hier etwas Lassen Sie uns die Registerkarte „Konsole“ überprüfen. Der Fehler besagt, dass das nicht definiert ist, da ich vermutet habe , dass wir vergessen haben, hier sogar ein Objekt als Parameter einzufügen Jetzt sollte der Code funktionieren. Lassen Sie uns die Geschwindigkeitsoptionen anzeigen und dann auf eine beliebige Stelle auf der Seite klicken. Jetzt funktioniert alles einwandfrei. Ordnung, als Nächstes werde ich mich um die Auswahl dieser Optionen kümmern. Wir müssen Entwicklungen auswählen , die in den Geschwindigkeitsoptionen zusammengefasst sind. Wir müssen diese Optionen hier auswählen Dafür werde ich eine neue Variable erstellen. Lassen Sie uns diesen Code duplizieren. Ich werde den Namen ändern. Es werden Geschwindigkeitsoptionen sein, Dinge, die wir hier hinzufügen müssen. Als Nächstes werde ich mir die Geschwindigkeitsoptionen und die Entwicklungen ansehen . Lassen Sie uns hier neu erstellte Optionen mit variabler Geschwindigkeit verwenden . Dann benötigen wir für jede Methode, die es uns ermöglicht, durch die Sammlung zu iterieren Ich werde hier eine Callback-Funktion hinzufügen , die einen Parameter benötigt Es wird eine Option sein, es ist ein aktuelles Objekt in der Schleife Ich werde der Option mit Klickereignis einen Even-Listener hinzufügen Option mit Klickereignis einen Even-Listener Dann brauchen wir hier wieder eine Callback-Funktion. Dieser Code durchläuft jede der ausgewählten Entwicklungen mithilfe der Forage-Methode Für jede Entwicklung, die eine Option für die Wiedergabegeschwindigkeit darstellt, wird ein Klickereignis-Listener eingerichtet Als Nächstes müssen wir die Geschwindigkeit der Wiedergabe definieren. Entsprechend den angeklickten Geschwindigkeitsoptionen. Wir benötigen Ihre Hauptwiedergaberate für Videos. Es ist eine eingebaute Eigenschaft in Java-Skript. Sie sollte der Option Dataset Do Speed entsprechen. Wir haben die Wiedergabegeschwindigkeit definiert , die der Geschwindigkeit von Option Dataset entspricht. Wir holen uns hier die Werte aus diesen Attributen. Wie Sie sich erinnern, haben wir jeder Geschwindigkeitsoption ein Datengeschwindigkeitsattribut mit den richtigen Werten hinzugefügt jeder Geschwindigkeitsoption ein Datengeschwindigkeitsattribut mit den richtigen Werten Wir greifen hier auf diese Werte Auch in dieser Zeile steht, dass die Eigenschaft „Wiedergabegeschwindigkeit“ des Haupt-Videoelements dem Wert entspricht, der im Datengeschwindigkeitsattribut des angeklickten Elements gespeichert Datengeschwindigkeitsattribut des angeklickten Elements Die Datensatzeigenschaft ermöglicht Ihnen den Zugriff auf benutzerdefinierte Datenattribute in HTML-Elementen In diesem Fall wird sie verwendet, um die Werte für die Wiedergabegeschwindigkeit zu speichern , die jeder Option zugeordnet sind. Ich spreche hier über diese Werte. Okay, als Nächstes werde ich die aktive Option ändern. Wie Sie wissen, ist die aktive Option standardmäßig normal. Wir fügen dem HTML-Element eine Klasse hinzu. Dieses Element hier. Sie können hier die Option Klasse aktiv sehen. Wir müssen diese Klasse ändern. Wir müssen diese Klasse aus diesem Element entfernen und sie dem angeklickten Element hinzufügen Um das zu tun, benötigen wir Geschwindigkeitsoptionen. Dann müssen wir Elemente mit der Option Klasse aktiv auswählen. Wir brauchen hier die aktive Option. Und wir müssen die aktive Option Klassenname aus der Klasseneigenschaft entfernen aktive Option Klassenname aus der Klasseneigenschaft und sie zur Klickoption hinzufügen. Wir brauchen eine Klassenliste. die Klasse wird eine aktive Option sein. In Ordnung, ich denke, das war's jetzt, der Code sollte funktionieren. Lass uns Option wählen. Lass uns das Video abspielen. Und dann wählen Sie die Option Geschwindigkeit. Etwas stimmt hier nicht. Lassen Sie uns die Geschwindigkeitsoptionen und Elemente des Konsolen-Tabs überprüfen. Dieses Futter ist keine Funktion. Lassen Sie uns diese Codezeile überprüfen : Geschwindigkeitsoptionen, Artikel, Futter Eigentlich sieht hier alles richtig aus. Lassen Sie uns die Variablen überprüfen. Ja, wir brauchen hier den Abfrageselektor, die All-Methode, weil wir fünf verschiedene Elemente auswählen Lassen Sie uns nun die Ergebnisse überprüfen. Lassen Sie uns das Video mit der Option Select Speed abspielen. Es funktioniert immer noch nicht. Jetzt werde ich den Code noch einmal überprüfen. Ich denke, hier scheint alles richtig zu sein. Das Schlimme ist, dass wir nicht hierher kommen. Irgendwelche Fehler. Ich werde überprüfen, ob das Klickereignis ordnungsgemäß funktioniert. Ich werde zur Konsole laufen, dieses Element hier. Ich werde auf die Geschwindigkeitsoption klicken und dann auf Konsole klicken. Wir bekommen hier nicht die Ergebnisse. Das bedeutet, dass das Klickereignis hier nicht funktioniert. Vielleicht landen die Geschwindigkeitsoptionen hinter einigen Elementen, weshalb das Klickereignis nicht funktioniert. Ich werde hier versuchen, eine Indexeigenschaft mit einem höheren Wert hinzuzufügen . Sagen wir zehn. Lass uns nachschauen, ob es funktioniert. Das war das Problem. Jetzt funktioniert alles gut. Wir können die Geschwindigkeitsoptionen problemlos ändern. In Ordnung, es geht also um die Geschwindigkeitsoptionen. Es tut mir leid für die letzten Missverständnisse, aber eigentlich finde ich, dass es nicht schlimm ist Es ist gut für dich, für die Schüler, denn wenn du den Code schreibst, wirst du auf solche Situationen stoßen Oft sollten Sie wissen, wie Sie das Problem beheben, die Box finden und so weiter. Okay, das ist es. Lass uns mit der nächsten Vorlesung weitermachen. 40. Bild-im-Bild- und Vollbildmodi: In der letzten Vorlesung haben wir die Geschwindigkeitsoptionen programmiert. Jetzt müssen wir weitermachen und diese beiden Knöpfe kümmern. Der erste ist der Bild-im-Bild-Modus. Was den zweiten betrifft, handelt es sich um einen Vollbildmodus. Schauen wir uns das fertige Projekt an. Sobald wir im Bildmodus auf das Bild klicken, wird dieses kleine Fenster angezeigt Sie können das Fenster verfolgen und löschen. So funktioniert der Bild-im-Bild-Modus. Was den Vollbildmodus betrifft Wenn wir hier auf den Zyklus klicken, wird das Video abgespielt. Im Vollbildmodus können Sie das Fenster von hier aus minimieren, okay? Also werden wir diese beiden Tasten in dieser Vorlesung programmieren. Gehen wir zum VS-Code. Zuallererst werde ich eine neue Variable erstellen. Nennen wir es Bild, ich wähle PTN. Wir müssen es mit der Abfrageselektor-Methode auswählen. Lassen Sie uns hier den Klassennamen angeben. Wählen Sie die Auswahl aus, gefolgt von dem Panel, das wir hier benötigen. Gedanken. Als Nächstes werde ich hier neue Kommentare erstellen. Lassen Sie uns diese Codezeile eigentlich von hier aus loswerden. Wir benötigen Kommentare für den Bild-im-Bild-Modus Ich werde dem Bild-in-Bild-Modus einen Event-Listener hinzufügen , BTN die Variable, die wir gerade erstellt haben Fügen wir hier einen Bild-Listener mit Click-Event hinzu. Außerdem benötigen wir hier eine Callback-Funktion um das Video im Bild abzuspielen Im Bildmodus müssen wir eine der eingebauten Java-Funktionen verwenden Es heißt Bild in Bild anfordern. Wir müssen diese Methode an das Hauptvideo anhängen. Wie gesagt, wir benötigen eine Bild-in-Bild-Anfrage. Ordnung, gehen wir zum Browser und klicken hier auf dieses Symbol. Wie Sie sehen können, haben wir hier ein kleines Fenster, das Sie ziehen können. Und das Fensterbild im Bildmodus funktioniert perfekt. Okay. Jetzt ist es Vollbildmodus. Dreh dich um, lass uns zum VS-Code gehen und eine neue Variable erstellen. Ich werde diese Codezeile duplizieren. Wir benötigen BTN im Vollbildmodus und ich werde hier den Klassennamen ändern Wir benötigen ein Vollbild-I-Element. Dann werde ich neue Kommentare für den Vollbildmodus eingeben. Eigentlich werde ich mir diesen Code schnappen. Fügen wir es hier ein und ändern wir die Schaltfläche, die wir hier benötigen, Vollbild BTN. Für die Methode anstelle der Anforderungsmethode benötigen wir die Anforderungsmethode im Vollbildmodus Gehen wir nun zum Browser und klicken auf die Schaltfläche Vollbild. Es funktioniert nicht. Wir haben hier einen Fehler, die Eigenschaften von können nicht gelesen werden. Lassen Sie uns jetzt den Code überprüfen. Vollbild, BTN, lassen Sie uns die Variable überprüfen , die wir hier als Typ haben Alles was wir hier brauchen, Doppel-LS. Jetzt sollte es funktionieren. Klicken wir auf das Vollbildsymbol. Und ja, wir haben hier den Vollbildmodus. Es funktioniert gut. In Ordnung, das war's mit dem Bild - und dem Vollbildmodus Beide funktionieren einwandfrei Als nächstes müssen wir uns um die Video-Timeline kümmern . Fahren wir mit der nächsten Vorlesung fort. 41. Arbeiten an der Video-Timeline: In der vorherigen Vorlesung haben wir die Schaltflächen für das Bild und den Vollbildmodus programmiert Schaltflächen für das Bild und den Vollbildmodus Beide Modi funktionieren einwandfrei. Jetzt müssen wir weitermachen und uns um die Video-Timeline kümmern . Ich meine, wir müssen den Fortschrittsteil dynamisch gestalten. Außerdem müssen wir die aktuelle Uhrzeit des Videos und auch die Videodauer anzeigen die aktuelle Uhrzeit des . Schauen wir uns das fertige Projekt an. Wie Sie sehen können, haben wir hier die Videodauer. Wenn wir anfangen, das Video abzuspielen, wird die aktuelle Uhrzeit angezeigt, als ob ich irgendwo hier klicken würde. Dann der Fortschrittsbalken, wir werden aktualisieren. Okay, das ist es. Was wir in dieser Vorlesung tun werden. Gehen wir zum VS-Code. Ich werde ein Element namens Video Time Line auswählen. Lassen Sie uns eine Variable erstellen und sie Video-Zeitlinie nennen. Ich werde dieses Element mit der Abfrageselektor-Methode auswählen mit der Abfrageselektor-Methode Wir müssen hier den Klassennamen angeben. Es wird eine Video-Timeline sein. Als Nächstes füge ich die Kommentare für die Video-Zeitleiste ein. Dann füge ich der Videozeitleiste mit einem Klickereignis einen Event-Listener Videozeitleiste mit einem Klickereignis einen Event-Listener Ich möchte Sie daran erinnern, wo dieses Element, das wir in der HTML-Datei haben , die Video-Timeline ist Es umschließt den Fortschrittsbereich. Ich werde der Video-Timeline einen Event-Listener hinzufügen. Lassen Sie uns diese Event-Listener-Methode verwenden und dann hier das Klick-Ereignis angeben Als Nächstes benötigen wir eine Callback-Funktion , die ausgeführt wird, sobald Sie auf die Timeline klicken Ich werde eine neue Variable definieren , mit der die Timeline erstellt werden soll Ich werde es der Breite des Video-Zeitlinien-Clients gleichsetzen . Diese Zeile berechnet die Breite des Video-Zeitleistenelements und speichert sie in einer Variablen Diese Breite stellt die Gesamtbreite der Zeitleiste dar. Sie wird benötigt , um festzustellen, wo der Benutzer im Verhältnis zur Zeitleiste geklickt hat Um das zu verdeutlichen, werde ich diese variable Zeitleistenbreite zur Konsole aufrufen Lassen Sie uns die Seite untersuchen. Eigentlich werde ich dieses Fenster an das aktuelle Top anhängen. Wenn ich auf die Video-Zeitleiste klicke, erhalten wir 900, das sind Pixel. Die gesamte Breite der Videozeitleiste beträgt 900 Pixel. Auch hier berechnet die Eigenschaft Breite des Clients die Breite des Elements Ordnung, lassen Sie uns diese Codezeile loswerden. Als Nächstes werde ich die aktuelle Uhrzeit des Videos definieren Wir benötigen die aktuelle Uhrzeit des Hauptvideos. Es sollte dem folgenden Ausdruck entsprechen , den ich hier verwenden werde, Offset x. Ich werde diese Dinge gleich erklären. Wir benötigen ihre Zeitleiste mit der Variablen , die wir hier definiert haben. Als nächstes müssen wir es mit der Dauer des Hauptvideos multiplizieren. Lassen Sie mich erklären , was hier passiert. In dieser Zeile wird die aktuelle Wiedergabezeit des Hauptvideoelements anhand der Stelle berechnet und festgelegt die aktuelle Wiedergabezeit des Hauptvideoelements anhand der Hauptvideoelements anhand der , auf der der Benutzer auf die Zeitleiste geklickt hat So funktioniert es. Do Offset X steht für die horizontale Position des Klickereignisses innerhalb des Video-Timeline-Elements. Es gibt an, wo der Benutzer auf der Timeline geklickt hat. Ich renne zum Konsolenpunkt. Offset X. Eigentlich müssen wir ihren Parameter übergeben. Wenn ich auf die Video-Timeline klicke, erhalten wir die Position an der der Nutzer entlang der Timeline klickt. Wir kommen hierher, die genauen Positionen in Pixeln. Ordnung, als Nächstes haben wir hier Offset x geteilt durch die Zeitlinie. Damit wird die relative Position des Klicks innerhalb der Zeitlinie als Bruchteil der Gesamtbreite der Zeitleiste berechnet innerhalb der Zeitlinie als Bruchteil der Gesamtbreite der Zeitleiste Dieser Bruch liegt zwischen 0 und 1 Als Nächstes multiplizieren wir mit der Dauer des Hauptvideos Es gibt die Gesamtdauer des Videos in Sekunden an. Das Ergebnis der Berechnung bestimmt die genaue Wiedergabeposition im Video. wird die aktuelle Uhrzeit des Hauptvideos auf diese Position gesetzt, sodass der Benutzer effektiv nach dem Klickpunkt im Video suchen kann. Wenn ich zum Hauptvideo der Konsole gehe, die aktuelle Uhrzeit einstelle, wenn wir dann zum Browser gehen und auf die Timeline klicken, wird mir die aktuelle Uhrzeit des Videos in Sekunden angezeigt. Okay. Als Nächstes werde ich eine neue Variable erstellen. Ich nenne es Videozeit. Lassen Sie uns das Element mithilfe der Abfrageselektor-Methode auswählen. Ich werde hier den Klassennamen und die aktuelle Uhrzeit angeben. Ich werde dich daran erinnern , wo dieses Element ist. Wir haben hier die aktuelle Uhrzeit. Es ist ein Span-Element. Standardmäßig haben wir hier Nullen. Jetzt müssen wir die aktuelle Uhrzeit des Videos in diesem Element anzeigen die aktuelle Uhrzeit des Videos in diesem Element Wir müssen hier die aktuelle Uhrzeit anzeigen. Dazu müssen wir die aktuelle Videozeit einfügen, innere Text entspricht der aktuellen Uhrzeit Gehen wir zum Browser und beginnen, das Video abzuspielen. Wie Sie sehen können, sind wir in Sekunden hier. Aber wir müssen diesen Wert formatieren. Wir brauchen ihn nicht. Wir müssen die aktuelle Uhrzeit in dem Format anzeigen die aktuelle Uhrzeit in dem , wie wir es hier in der fertigen Version haben. Wir brauchen dieses Format hier. Um das zu tun, gehe ich zurück zum VS-Code. Ich werde eine neue Funktion erstellen. Eigentlich werde ich diese Funktion hier einfügen. Nennen wir die Funktion Format Time. Es wird eine Pfeilfunktion sein. Ich werde hier einen Parameter einfügen. Es wird Zeit sein. Das Erste, was ich tun werde, ist Sekunden zu definieren. Wir brauchen eine neue Variable namens Sekunden. Sie wird gleich t Floor sein und wir müssen hier den Zeitmodul 60 einfügen Diese Zeile berechnet die verbleibenden Sekunden anhand des Moduls des Zeitwerts Bei 60 wird sichergestellt, dass Sekunden einen Wert von 0-59 enthalten . Auf die gleiche Weise, wie wir die Sekunden definieren müssen, lassen Sie uns diese Codezeile , die wir hier benötigen, duplizieren Minuten, wir müssen die Zeit durch 60 teilen, dann brauchen wir Modul Diese Zeile berechnet die Anzahl der Minuten, indem sie den Zeitwert durch 60 teilt und den Mindestwert nimmt. Die Modulos-Operation wird erneut verwendet, um sicherzustellen, dass Minuten zwischen 0 und 59 liegen. Als Nächstes müssen wir die Stunden definieren Ich werde diese Codezeile duplizieren. Wir brauchen Stunden, dann Mathe für Zeit geteilt durch 3.600 wir hier nicht mehr brauchen. Modul 60, diese Zeile berechnet die Anzahl der Stunden, indem der Zeitwert durch 3.630 geteilt der Zeitwert durch 600 bedeutet, dass 60 Sekunden mit 60 Minuten multipliziert werden. Es gibt die Gesamtzahl der Stunden und den Zeitwert an. Als Nächstes müssen wir sicherstellen, dass einstellige Sekunden, Minuten und Stunden aus Gründen der Einheitlichkeit in der Anzeige mit einer führenden Null formatiert werden Gründen der Einheitlichkeit in der Anzeige mit einer führenden Null Wenn Sekunden beispielsweise weniger als zehn sind, sollten wir ihr eine führende Null hinzufügen Um das zu tun, gehe ich davon aus, dass Sekunden 2 Sekunden entsprechen, dann ist die Bedingung weniger als zehn. Wir brauchen ihr Fragezeichen. Wenn diese Bedingung wahr ist, brauchen wir hier die Vorlagenzeichenfolgen Null gefolgt von den Sekunden. Wenn es falsch ist, dann brauchen wir nur Sekunden. Wir brauchen dasselbe auch für die Minuten und Stunden. Lassen Sie uns diese Codezeile hier zweimal duplizieren, Minuten und dann Stunden. Ordnung, als Nächstes verwende ich die if-Anweisung, bei der wir überprüfen müssen, ob Stunden gleich Null sind. Wir brauchen eine Abrechnung und wir müssen die Öffnungszeiten überprüfen. Wir brauchen Stunden, die Null entsprechen. Wenn diese Bedingung zutrifft, müssen wir das folgende Ergebnis zurückgeben, das wir hier benötigen , Minuten und Sekunden. Dann müssen wir zurückkehren. Dann holen wir uns diesen Code von hier. Füge ihn hier ein. Und ich füge hier Stunden mit Spalte hinzu, okay? Die folgende bedingte Anweisung prüft , ob der Stundenwert gleich Null ist. Ist dies der Fall, bedeutet dies, dass die Zeit weniger als 1 Stunde beträgt. Und die Funktion gibt eine Zeichenfolge im Format Minuten und Sekunden zurück. Wenn Stunden größer als Null sind, bedeutet dies, dass der Zeitwert Stunden enthält. Und die Funktion gibt eine Zeichenfolge im Format Stunden, Minuten und Sekunden zurück. Sobald die Funktion bereit ist, können wir die aktuelle Uhrzeit formatieren. Ich werde die Funktion hier als das Argument aufrufen , das ich hier einfügen werde, aktuelle Uhrzeit. Also sollte jetzt die aktuelle Uhrzeit sichtbar sein. Lass uns das Video abspielen. Ups, wir haben hier einen Fehler. Unseres ist nicht definiert. Lassen Sie uns die Aussage überprüfen. Ja, wir haben hier einen Tippfehler. Wir brauchen Stunden ohne. Ich habe diesen Fehler mehrmals gemacht. Lassen Sie uns das jetzt überprüfen. Ja, wir haben hier die aktuelle Uhrzeit aktualisiert. Okay, lassen Sie uns über die aktuelle Uhrzeit sprechen. Als nächstes müssen wir uns um die Videodauer kümmern. Gehen wir zurück zum VS-Code. Ich werde eine neue Variable erstellen. Nennen wir es Videodauer. Ich werde dieses Element erneut mit der Abfrageselektor-Methode auswählen erneut mit der Abfrageselektor-Methode Lassen Sie uns hier den Klassennamen und die Videodauer angeben. Wir haben dieses Element neben der aktuellen Uhrzeit, und das Trennzeichen hier ist die Videodauer. Ich werde der Videodauer einen Event-Listener hinzufügen. Es tut mir leid, zum Hauptvideo. Das Ereignis wird in Daten geladen. Das Ereignis geladene Daten wird ausgelöst, wenn das Video genügend Daten geladen hat, um mit der Wiedergabe zu beginnen. Als Nächstes müssen wir eine Callback-Funktion stören. Diese Funktion wird ausgeführt, sobald genügend Daten geladen wurden, um mit der Wiedergabe zu beginnen Hier müssen wir den Inhalt der Videodauer definieren , die wir benötigen. Hier in unserer Texteigenschaft wird es die Hauptvideodauer sein. Okay, lassen Sie uns die Ergebnisse überprüfen. Wie Sie sehen können, haben wir hier die Gesamtzahl der Sekunden. Wir müssen es in dasselbe Format umwandeln , das wir für die aktuelle Zeit verwenden. Um das zu tun, müssen wir nur die Funktion format time aufrufen. Und wir müssen die Dauer des Hauptvideos als Argument angeben. Wenn wir die Ergebnisse überprüfen, werden Sie feststellen, dass hier die aktuelle Uhrzeit in demselben Format angezeigt wird , das wir für die aktuelle Uhrzeit verwendet haben. Okay, das war's für den Moment. Gehen wir zur nächsten Vorlesung über. 42. Erstellen von ziehbaren Fortschrittsbalken: In der vorherigen Vorlesung haben wir an der Video-Zeitleiste gearbeitet Ich meine, die aktuelle Uhrzeit des Videos und auch die Videodauer. Beide funktionieren einwandfrei und werden aktualisiert, sobald wir das Video abspielen. Als nächstes müssen wir uns um den Fortschrittsbalken kümmern. Wir müssen den ziehbaren Fortschrittsbalken erstellen. Außerdem müssen wir uns um diese Zeit kümmern. Hier müssen wir die aktuelle Uhrzeit aktualisieren. Sobald wir den Fortschrittsbalken gezogen haben, schauen wir uns die fertigen Projekte an. Wie Sie sehen können, kann ich den Fortschrittsbalken ziehen und auch die aktuelle Uhrzeit wird entsprechend aktualisiert. Wir müssen das schaffen. in diesem Video sogar wir in diesem Video sogar zum VS-Code. Als erstes werde ich der Video-Timeline einen Event-Listener hinzufügen Die Veranstaltung wird ein Meilenstein sein. Das Meilensteinereignis wird ausgelöst sobald die Maustaste über einem Element gedrückt wird. Es ist spezifischer, wenn die Maustaste gedrückt wird, ohne dass die Taste losgelassen werden muss. Dieses Ereignis wird häufig verwendet, um den Beginn einer Benutzerinteraktion zu erkennen, z. B. den Beginn eines Ziehvorgangs oder eines Endes. Außerdem tritt dieses Ereignis vor dem Klickereignis auf, wenn die Maus nicht vom Ende wegbewegt wird. Der Unterschied zwischen dem Klickereignis und dem Mousedown-Ereignis ist der folgende Das Klickereignis wird nach einer vollständigen Klickaktion ausgelöst , bei der die Maustaste über einem Element gedrückt und dann wieder losgelassen wird Maustaste über einem Element gedrückt und dann wieder losgelassen Es erfordert, dass sowohl das Ereignis „Maus runter Ereignis „ Maus hoch“ für dasselbe Element ausgelöst werden. Außerdem wird das Klickereignis im Allgemeinen für Aktionen verwendet , die ausgelöst werden sollen, sobald ein Benutzer ein Element ausgewählt oder aktiviert hat , z. B. das Drücken der Schaltfläche zum Absenden eines Formulars usw. Jetzt übergebe ich hier eine Callback-Funktion. Dann brauchen wir wieder eine Video-Timeline mit Event-Listener. In diesem Fall wird das Ereignis eine Mausbewegung sein. Jetzt fügen wir einen Bild-Listener für das Mausbewegungsereignis Jetzt müssen wir die Funktion aufrufen , die Dale Progress Bar heißt Im Moment ist diese Funktion noch nicht erstellt, aber wir werden sie gleich erstellen. Wir fügen einen Event-Listener für das Mouse-Move-Event hinzu. Wenn der Benutzer die Maus bewegt, wird die Funktion zum Ziehen des Fortschrittsbalkens aufgerufen Der Fortschrittsbalken und die Videozeit werden aktualisiert , wenn der Benutzer zieht Ich werde diese Funktion erstellen. Lassen Sie uns eine neue Variable erstellen und dann diesen Namen hier verwenden. Wir brauchen hier ein Event-Objekt, dann eine Pfeilfunktion. Das erste, was ich tun werde, ist diese beiden Zeilen von hier aus zu holen. Wie Sie sich erinnern, speichert diese Codezeile die Breite des Video-Zeitleistenelements. Was die zweite Codezeile betrifft, berechnet und aktualisiert sie die aktuelle Uhrzeit des Videos auf der Grundlage der Stelle der der Benutzer auf der Zeitleiste klickt Neben diesen beiden Codezeilen übergebe ich hier eine Breite im Fortschrittsbalkenstil, Breite im Fortschrittsbalkenstil Offset x entspricht. Und wir benötigen hier Pixel Jetzt finden wir die Breite des Fortschrittsbalkens. Offset x gibt den horizontalen Versatz des Mauszeigers zwischen dem Ereignis und der Anschlagkante des Zielknotens an. Der Fortschrittsbalken wird effektiv auf den Punkt eingestellt , an dem der Benutzer klickt oder zieht Wenn wir jetzt zum Browser und zum Fortschrittsbalken gehen , wird es funktionieren Wie Sie sehen können, können wir den Fortschrittsbalken jetzt ziehen. Ich drücke die Maustaste, aber wenn ich einfach mit der Maus über die Video-Timeline fahre, kann ich den Fortschrittsbalken ziehen Das brauchen wir nicht. Wir müssen den Fortschrittsbalken nicht ziehen, wenn der Mauszeiger darüber bewegt wird, sondern wir müssen den Fortschrittsbalken ziehen sobald wir auf die Videozeitleiste klicken Um dieses Problem zu beheben, werde ich diesen Code duplizieren Wir müssen die Video-Zeitleiste in einen Videocontainer umwandeln. Dieses Element umschließt den gesamten Inhalt des Videos. Jetzt werde ich den Event-Listener aus der Video-Timeline entfernen Okay, jetzt sollte das Problem behoben sein. Eigentlich brauchen wir Maus hoch und Maus runter. Okay, jetzt gehen wir zum Browser und überprüfen die Ergebnisse. Jetzt drücke ich die Maustaste, aber sobald ich die Taste loslasse und den Mauszeiger aber sobald ich die Taste loslasse und den einfach über die Videozeitleiste fahre, können wir den Fortschrittsbalken nicht verfolgen Okay, das Problem ist also behoben. Als Nächstes müssen wir die aktuelle Uhrzeit des Videos aktualisieren. Dafür werde ich diese Codezeile verwenden. Fügen wir es hier ein. Wir müssen hier das Hauptvideo hinzufügen. Wenn ich jetzt den Fortschrittsbalken verfolge, werden Sie feststellen, dass die aktuelle Uhrzeit entsprechend aktualisiert wird. Es funktioniert einwandfrei. In Ordnung, als Nächstes müssen wir uns um die aktuelle Uhrzeit kümmern. Sobald wir den Fortschrittsbalken verfolgt , meine ich, müssen wir hier an diesem Element arbeiten. Wie Sie sich erinnern, handelt es ein Spannelement. Innerhalb des Fortschrittsbereichs um ein Spannelement. Innerhalb des Fortschrittsbereichs müssen wir uns um dieses Element kümmern. Ich werde der Video-Timeline einen Event-Listener hinzufügen. Das Ereignis wird mit der Maus bewegt. Dann benötigen wir Event-Objekte gefolgt von der Callback-Funktion Ich werde dieses Element auswählen. Wir müssen die Variable erstellen, es wird Progresszeit sein. Wir müssen hier das Dokument auswählen. Lassen Sie uns hier das Element namens Fortschrittsbereich angeben. Dann brauchen wir das Span-Element. Danach werde ich den Offset x des Elements definieren. Lassen Sie uns den Offset x erstellen. Und er sollte dem Offset X entsprechen. Wir erhalten hier den horizontalen Versatz des Mauszeigers zwischen dem Ereignis und Puddingkante des Zielelements , der Videozeitlinie Als Nächstes müssen wir die linke Position der Fortschrittszeit definieren die linke Position der Fortschrittszeit Wir brauchen hier die Fortschrittszeit und den verbleibenden Stil. Es wird Offset X sein und wir brauchen Pixel. Jetzt setzen wir die linke CSS-Eigenschaft des Elements progress in auf den Offset-X-Wert. Verschieben Sie die Zeitvorschau so, mit dem Mauszeiger auf der Zeitleiste ausgerichtet wird. Wenn ich zum Browser gehe und den Mauszeiger über die Videozeitleiste bewege, können Sie sehen, dass sich das Span-Element entlang der Videozeitlinie bewegt Als Nächstes müssen wir die Breite der Zeitleiste definieren. Ich werde diese Codezeile kopieren. Jetzt müssen wir die aktuelle Uhrzeit des Span-Elements definieren . Lassen Sie uns eine Variable erstellen. Es wird Zeit für den Fortschrittsbalken. Ich werde diesen Wert hier korrigieren. Jetzt berechnen wir die Zeit , die der aktuellen Mausposition der Timeline entspricht Mausposition der Timeline Dazu wird die Maus an der eingestellten X-Position durch die Gesamtbreite der Timeline dividiert , was einen Bruchteil ergibt, der angibt, wo sich die Maus auf der Timeline befindet. Dieser Bruchteil wird dann mit der Gesamtdauer des Hauptvideos multipliziert , um die entsprechende Zeit im Video zu erhalten die entsprechende Zeit im Video Jetzt müssen wir die Zeit formatieren und anzeigen. Ich werde der Fortschrittszeit die innere Texteigenschaft hinzufügen. Dann brauchen wir die Formatzeit. Ich werde hier den Fortschritt in Teilzeit weitergeben. In Ordnung, gehen wir zum Browser. Wie Sie sehen können, wird die Uhrzeit aktualisiert, sobald ich mit der Maus über die Video-Timeline fahre Aber wir haben hier ein kleines Problem. Standardmäßig müssen wir hier die Zeit und auch den Kreis ausblenden . Sobald wir dann mit der Maus über die Video-Zeitleiste fahren, sollten sie erscheinen Wir brauchen CSS. Ich werde beide Elemente auswählen. Fortschrittsbereich, Spanne. Außerdem benötigen wir einen Fortschrittsbalken vor dem Element. Ich werde sie mithilfe der Anzeige ausblenden. Dann auf Hover, Video Timeline Hover. Dann die Spanne des Fortschrittsbereichs. Dann brauchen wir hier den Fortschrittsbalken. Vorher müssen wir die Elemente mit dem Display-Block wieder anzeigen. Wie Sie jetzt sehen können, der Kreis und das Span-Element beide ausgeblendet. Sobald ich mit der Maus über die Video-Timeline fahre, werden sie wieder angezeigt In Ordnung, also funktioniert alles gut. Wir haben den Gable Progress Bar erstellt. Fahren wir mit der nächsten Vorlesung fort. 43. Verbergen und Anzeigen der Steuerelemente: Ordnung, in der vorherigen Lektion haben wir einen nachverfolgbaren Fortschrittsbalken erstellt Und jetzt müssen wir uns darum kümmern, die Videosteuerungen ein- und auszublenden Außerdem müssen wir die X-Schließtaste und die Play-Schaltfläche auf der Landingpage programmieren die X-Schließtaste und die Play-Schaltfläche . Schauen wir uns die fertigen Projekte an. Wenn ich das Video abspiele und dann die Maus anhalte, werden die Videosteuerungen nach 3 Sekunden ausgeblendet. Wenn ich die Maus bewege, werden sie wieder angezeigt. Wie gesagt, wir werden diese Sache in diesem Video regeln. Außerdem müssen wir die X-Schließtaste programmieren, der das Video geschlossen wird, und auch die Play-Taste. Wenn ich darauf klicke, erscheint das Video. Okay, lass uns zum VS-Code gehen. Das erste , was ich tun werde, ist, den Control-Wrapper zu finden und sie mithilfe von Capacity Zero Visibility Hidden Capacity Zero Visibility Wie Sie sehen können, sind die Videosteuerungen versteckt. Als nächstes müssen wir zur JS-Datei des Skripts gehen und dort neue Kommentare für die Steuerelemente erstellen, genau genommen werde ich und hier . Wir müssen eine Funktion erstellen. Ich nenne es de Controls, das wird eine Pfeilfunktion sein. Dann werde ich eine der eingebauten Javascri-Methoden namens set time verwenden Javascri-Methoden namens set time Motet-Zeitfunktion ist eine integrierte Java-Scot-Methode , die einen Timer festlegt und eine Funktion oder einen bestimmten Code ausführt Sobald der Timer abgelaufen ist, werde ich hier eine Callback-Funktion übergeben. Das ist das erste Argument. Dann müssen wir hier das zweite Argument platzieren, das die Zeitdauer angibt, und sie wird in Millisekunden ausgedrückt Ich werde hier wieder 3.000 platzieren. Das erste Argument von set time out ist eine weitere Fehlerfunktion. Diese innere Funktion definiert, was passieren wird, wenn der Timer abgelaufen ist. Das zweite Argument ist die Zeitverzögerung in Millisekunden Hier ist es auf 3.000 Millisekunden eingestellt, was Okay, als Codeblock werde ich die Videocontainer-Klasse entfernen lassen, ich werde hier den Namen der Klasse angeben Nennen wir es Show Controls. Die Show Controls-Klasse fügt CSS-Stile hinzu , die die Steuerelemente des Videoplayers sichtbar machen. Durch das Entfernen dieser Klasse werden die Steuerelemente in der Ansicht ausgeblendet. Als Nächstes rufe ich diese Funktion auf. Jetzt müssen wir zur CSS-Datei gehen und die Klassenanzeige-Steuerelemente verwenden. Zuallererst werde ich den Controls-Wrapper finden. Als Nächstes wähle ich den Videocontainer aus, gefolgt von den Steuerelementen für die Klassenshow Dann müssen wir den Controls-Wrapper auswählen . Wir müssen die Steuerelemente sichtbar machen. Zuallererst definiere ich, dass die Position Null sein wird, ich meine die unterste Position. Dann brauchen wir Kapazität eins und eine sichtbare Sichtbarkeit. Außerdem werde ich den Übergang verwenden, um einen gleichmäßigeren Effekt zu erzielen. Wir brauchen hier alles, dann wird die Dauer 0,08 Sekunden Und wir brauchen hier ist. Dann füge ich dem Videocontainer in der HTM-Datei die Klasse Show Controls Videocontainer in der HTM-Datei die Fügen wir hier Show Controls ein und gehen wir dann zum Browser Wenn ich 3 Sekunden warte, verschwinden die Steuerelemente. Jetzt müssen wir sie anzeigen, sobald die Maus bewegt wird. Dafür füge ich hier den Videocontainer mit Event-Listener Die Veranstaltung wird verschoben. Wir müssen hier die Funktion aufrufen. Jetzt müssen wir der Videocontainer-Klasse Show-Steuerelemente hinzufügen . Wenn ich jetzt für 3 Sekunden die Mausbewegung unterbreche, werden die Videosteuerungen ausgeblendet und sobald ich die Maus bewege, werden sie angezeigt. Okay, wir müssen die Steuerelemente anzeigen , während das Video gedreht wird. Dafür gehe ich zurück zur untergeordneten Datei und erstelle hier direkt über der Set-Timeout-Funktion eine Anweisung . Wir benötigen eine If-Anweisung , in der wir überprüfen müssen, ob das Hauptvideo posiert ist oder nicht. Dann brauchen wir eine Rückmeldung. Lass es mich erklären. Was mache ich hier? Diese Aussage überprüft eine Bedingung. Basierend auf den Ergebnissen der Bedingung wird entweder die Ausführung der restlichen Funktion fortgesetzt oder die Anzahl der Rückgabewerte der Funktion wird vorzeitig überschritten. Der Beitrag ist eine Eigenschaft, die einen Mobbing-Wert zurückgibt. Wahr oder falsch. Die if-Anweisung, wenn die Bedingung wahr ist, wenn das Video gepostet wurde, dann ist die Bedingung in der if-Anweisung erfüllt. Wenn die Bedingung erfüllt ist, wird die Return-Anweisung ausgeführt. Die Rückgabeanweisung überschreitet sofort die höhengesteuerte Funktion. Bedeutet, dass der Code, der der Return-Anweisung innerhalb der Funktion de control folgt der Return-Anweisung innerhalb , nicht ausgeführt wird. Einfach ausgedrückt: Wenn das Video posiert wird, tut die Funktion nichts und hört sofort auf zu laufen. Wenn die Bedingung falsch ist, was bedeutet, dass das Video abgespielt wird, ist die Bedingung der if-Anweisung nicht erfüllt und die Return-Anweisung wird nicht ausgeführt. Die Funktion fährt dann der Ausführung des eingestellten Timeout-Blocks fort , der 3 Sekunden wartet und dann den Code innerhalb seiner Callback-Funktion ausführt, wodurch die Show Controls-Klasse aus dem Videocontainer entfernt Dies führt dazu, dass die Videosteuerungen nach der Verzögerung ausgeblendet werden Hoffentlich verstehst du , was diese Codezeile macht. Lass uns zum Browser gehen. Wenn ich das Video abspiele und es dann pausiere, verschwinden die Steuerelemente nicht. Der Code funktioniert einwandfrei. Als Nächstes werde ich die Ausführung der Set-Timeout-Funktion beenden Sobald wir dafür die Maus bewegen, erstelle ich eine neue Variable Es wird ein Timer sein. Ich werde die Variable dekodieren , ohne ihr irgendwelche Werte zuzuweisen Als Nächstes weise ich dieser Variablen, dem Timer , eine festgelegte Timeout-Funktion zu Danach werde ich eine der integrierten Java Sc-Methoden namens Clear Time Out verwenden integrierten Java Sc-Methoden namens Clear Time Out Ich werde hier den variablen Timer übergeben. Es wird die Ausführung der eingestellten Timeout-Funktion beenden. Außerdem müssen wir hier die Funktion zur Höhensteuerung aufrufen. Ordnung, lass uns zum Browser gehen und prüfen, ob alles gut funktioniert. Ich werde das Video abspielen und 3 Sekunden warten. Die Bedienelemente sind versteckt. Wenn ich die Maus bewege, werden sie wieder angezeigt. Wenn ich das Video poste, die Steuerelemente sichtbar. Ich denke, alles funktioniert perfekt. Und jetzt müssen wir uns um den X-Schließknopf und auch um den Play-Button im Vorlagenbereich kümmern den X-Schließknopf und . Gehen wir zurück zur Chavs-Datei und erstellen neue Variablen. Ich werde diesen Code duplizieren, wir brauchen Play Button. Ich werde dieses Element mit dem Klassennamen auswählen. Abspielen. Btn x PTN Lassen Sie uns hier einfügen. X PTN gefolgt vom Land. Okay, jetzt müssen wir beiden Mustern Klickereignisse hinzufügen. Fügen wir hier den Play-Button und den Event-Listener hinzufügen ein. Und ich werde hier das Klickereignis spezifizieren. Dann brauchen wir hier eine Callback-Funktion. Ich werde dem Videocontainer eine neue Klasse hinzufügen , die wir verwenden werden Dann benötigen wir in der CSS-Datei eine Klassenliste für Videocontainer. Ich werde den Klassennamen einfügen. Nennen wir es Show-Video. Dann werde ich diese Schaltfläche zur Codeänderung duplizieren. Es wird X-Baton sein. Dann ändere ich die Methode in Remove. Außerdem werde ich das Video posten, sobald wir den Videocontainer geschlossen haben , den wir hier brauchen mainvideook In Jovscript ist alles fertig. Gehen wir zur CSS-Datei. Und zuerst werde ich den Videocontainer verstecken, den wir hier brauchen, Kapazität Null und Sichtbarkeit zehn. Als Nächstes wähle ich einen Videocontainer mit einem Video zur Klassenshow aus. Ich werde das Video anzeigen. Wir brauchen Opazität eins und sichtbare Sichtbarkeit. Außerdem werde ich den Übergang verwenden, um glattere Effekte zu Wir brauchen einen Übergang und dann Deckkraft von 0,3 Sekunden, okay? Wie Sie sehen können, ist das Video standardmäßig ausgeblendet Wenn ich auf die Play-Schaltfläche klicke, wird der Videoplayer angezeigt. Wenn ich auf die Schließtaste X klicke, wird sie ausgeblendet. Ordnung, ich denke, alles, was wir haben, Ordnung und mit dem Videoplayer sind wir fertig. Hoffentlich war es interessant. Wir haben viel Javascript verwendet und ich denke, du hast ein paar neue Dinge gelernt. Okay, jetzt ist es an der Zeit den nächsten Abschnitt unseres Projekts zu erstellen. Lassen Sie uns dazu mit der nächsten Vorlesung fortfahren. 44. Das HTML-Markup für den Abonnement-Abschnitt erstellen: Ordnung, in der vorherigen Lektion haben wir die Arbeit am Vorlagenbereich abgeschlossen Ich meine, wir haben die Arbeit am zweiten Teil des Vorlagenbereichs abgeschlossen , bei dem sich um einen Videoplayer handelte. Wir haben den Videoplayer erstellt und dafür gesorgt, dass er erfolgreich funktioniert. Und jetzt müssen wir weitermachen und mit der Erstellung des nächsten Abschnitts unseres Projekts beginnen. Schauen wir uns die fertige Version an. Der nächste Abschnitt ist ein Abonnementbereich. Es ist ein netter und cooler, aber kleiner Abschnitt. Wir haben hier eine dunkle Box in der Mitte der Seite. Es beinhaltet ein paar verschiedene Elemente. Wir haben hier das Google-Material-Symbol, gefolgt vom Überschriftenabsatz, und wir haben hier auch ein Eingabeelement mit einer Schaltfläche. Die Box hat einen schönen und coolen Schatteneffekt. Okay, das ist alles über den Abonnement-Bereich. Gehen wir zum VS-Code. Und zuerst werde ich das HTML-Markup direkt nach dem Vorlagenbereich erstellen das HTML-Markup direkt nach dem Vorlagenbereich neue Kommentare einfügen Es wird abonnieren, dann brauchen wir das Ende des Abonnements Als Nächstes öffne ich den Abschnitts-Tag mit dem Abonnieren. Das erste Element, das ich in das Abschnittselement einfügen werde, wird der Wrapper sein Lassen Sie uns mit dem Abonnement-Wrapper öffnen dann erstelle ich das Symbol, das wir entwickeln müssen, mit der Klasse Es wird das Google-Material-Symbol sein. Ich werde die Website Google Material Symbols besuchen. Klicken wir hier auf diesen Link. Ich werde nach einem Symbol namens Mark suchen. Lesen. Hier haben wir das Symbol. Ich werde dieses Panel von hier aus ausschneiden und in die Entwicklung einfügen, ich werde die Gliederung in abgerundet ändern Lass uns den Browser überprüfen. Wie Sie sehen können, haben wir hier das Google Material-Symbol. Als Nächstes werde ich die H-One-Überschriftenelemente mit dem Text Abonnieren erstellen . Als Nächstes haben wir den Absatz. Der Text wird in Ihre E-Mail-Adresse eingegeben , um Updates zu erhalten. Nach dem Absatz öffne ich das Tag mit der Eingabegruppe Klassenabonnement. In der Entwicklung werden wir ein Eingabe-Tag mit dem Typ E-Mail haben . Außerdem werde ich hier ein Platzhalterattribut hinzufügen und es wird deine E-Mail sein Als nächstes brauchen wir den Boden. Der Typ wird unten sein wie der Text. Ich werde ins abonnieren. Okay. Das letzte Element , das ich erschaffen werde, wird der Schatten sein. Ich meine, wir brauchen Tuck mit dem Klassennamen, Subscribe Shadow Das wird ein leeres Element sein. Das war's mit dem HD-Markup. Schauen wir uns den Browser an . Wir haben hier alle Elemente Jetzt ist es an der Zeit, weiterzumachen und diese Elemente zu stylen. Lass uns weitermachen. 45. Styling-Abonnement-Abschnitt: In der letzten Lektion haben wir HTML-Markup für den Abonnement-Bereich erstellt HTML-Markup für den Abonnement-Bereich Jetzt müssen wir, wie gesagt, diese Elemente formatieren. Schauen wir uns noch einmal das fertige Projekt an. Hier haben wir den Abonnement-Bereich. Wir müssen diese Elemente stylen und auch diesen schönen und coolen Schatteneffekt erzeugen . Okay, gehen wir zum VS-Code in der CSS-Datei. Ich werde direkt nach dem Vorlagenbereich, den wir hier benötigen, neue Kommentare einfügen , abonnieren. Dann wähle ich die Abschnittselemente mit dem Klassennamen Abonnieren aus. Das erste, was ich tun werde, ist mit der Höhe zu definieren. Ich werde auf 100% setzen. Was die Höhe angeht, wird sie 100 Viewport-Höhe sein Ich meine 100% des Viewports. Lassen Sie uns auch die Hintergrundfarbe ändern. Ich werde einen linearen Farbverlauf verwenden. Die Hintergrundfarbe wird der des Vorlagenabschnitts ähneln des Vorlagenabschnitts Ich werde definieren, dass die Richtung links zwei sein wird. Dann müssen wir hier drei Farben übergeben. Der erste wird 8430 sein. Ich werde wieder diese Farbe verwenden, 8430. Was die dritte Farbe angeht, es wird 409 sein, okay? Die Hintergrundfarbe wird geändert und auch die Breite und Höhe werden auf das Abschnittselement angewendet. Kehren wir zum VS-Code zurück und kümmern uns um die Ausrichtung der Elemente. Ich werde die Flex-Box von CS verwenden. Wir brauchen Display Flex. Dann platziere ich den Inhalt in der Mitte des Abschnitts. Dafür müssen wir ein Inhaltszentrum und dann ein Einzelpostenzentrum begründen . Wie Sie sehen können, befinden sich die Elemente in der Mitte des Abschnitts. Als Nächstes werde ich den Abonnement-Wrapper ausrüsten, das ist diese dunkle Box Lassen Sie uns weitermachen und Wrapper abonnieren auswählen. Lassen Sie uns innerhalb von Höhen definieren. Die Breite wird 80 sein, das entspricht der Höhe. Ich werde 50 draus machen. Und dann ändere die Hintergrundfarbe, es wird 231, D34 sein Hier haben wir die Verpackung. Als Nächstes werde ich die Ecken abrunden. Dafür müssen wir den Radius verwenden. Der Wert wird ein Ram sein. Außerdem werde ich die Elemente wieder mit der Flexbox ausrichten . Wir brauchen Display-Flex. Dann werde ich die Richtung ändern, weil wir Flex-Elemente vertikal ausrichten müssen . Die Flex-Richtung muss die Spalte sein. Als Nächstes werde ich einen gleichmäßigen Abstand zwischen den Flex-Elementen schaffen . Dafür müssen wir den Inhalt nicht in der Mitte, sondern in der Mitte gleichmäßig begründen . Schließlich gehe ich zu einer horizontalen Zeile in der Mitte. Dafür brauchen wir ein Einzelpostenzentrum, wir brauchen hier in der Mitte, okay. Wie Sie sehen können, sind die Elemente vertikal in der Mitte angeordnet. Als Nächstes werde ich mich um das Symbol kümmern. Wählen wir das Abonnieren-Symbol, gefolgt vom Span-Element. Ich werde das Telefon vergrößern. Es werden zehn Gramm sein. Außerdem werde ich die Farbe des Symbols ändern. Die Farbe wird 035 sein. Wir haben hier eine nette und coole Ikone. Als Nächstes werde ich mich um die Überschrift kümmern. Lassen Sie uns fortfahren und den Wrapper abonnieren auswählen, gefolgt vom Element H One Heading Ich werde das Telefon vergrößern, es wird vier Ram sein Dann werde ich die Schriftstärke ändern. Lass es uns leichter machen. Stellen Sie die Schriftstärke auf 300 ein. Als Nächstes werde ich die Farbe ändern. Ich werde Farbe AA verwenden. Es ist eine graue Farbe. Dann verschiebe ich das Element mit Margin Top ein wenig nach oben. Wir brauchen einen negativen Wert und er wird minus fünf Frames sein. Okay, die Überschrift sieht ziemlich gut aus. Als Nächstes nehme ich hier den Absatz, lassen Sie uns diesen Code duplizieren und dann den Selektor ändern, den wir hier benötigen. Die Telefongröße wird 1,8 Ram betragen. Dann benötigen wir den gleichen Wert für das Telefongewicht. Die Farbe wird 999 sein. Es hat eine etwas dunklere graue Farbe. Was den oberen Rand angeht, werde ich hier abzüglich fünf Ram bleiben. Das ist es. Was den nächsten Absatz angeht, müssen wir uns um die Eingabe und das Ende kümmern. Zuallererst wähle ich Wrapper aus, ich meine Eingabegruppe abonnieren. Lassen Sie uns die Breite definieren Es werden 50 Ram sein. Dann werde ich die Höhe ändern. Stellen wir es auf 5,5 Frame ein. Um dieses Element sichtbar zu machen, füge ich hier eine temporäre Speckfarbe hinzu. Stellen wir es auf Rot. Hier haben wir den Wrapper, Subscribe-Eingabegruppe. Als Nächstes werde ich mich um die Eingabeelemente kümmern. Also brauchen wir wieder die Eingabegruppe abonnieren, gefolgt von den Eingabeelementen. Zuallererst setze ich die Position auf absolut. Dann benötigen wir die relative Position für das übergeordnete Element, das die Eingabegruppe ist. Als Nächstes setze ich die Höhe auf 100%. In diesem Fall nimmt das Eingabeelement die Höhe seines übergeordneten Elements an. Ich meine 50 Ram und 5,5 Ram. Schauen wir uns den Browser an. Hier haben wir die Elemente. Lassen Sie uns diese Hintergrundfarbe loswerden. Wir brauchen es nicht mehr. Okay. werde ich die Hintergrundfarbe ändern. Stellen wir es auf 1b16 bis neun ein. Außerdem werde ich den Fehlerrand entfernen und dann die Ecken der Eingaberunde mit einem Randradius mit dem Wert von fünf Ram erstellen Eingaberunde mit einem Randradius mit dem Wert von fünf Ram Das Eingabeelement sieht viel Als Nächstes werde ich mit Pudding etwas Platz innerhalb der Eingabe schaffen mit Pudding etwas Platz innerhalb der Eingabe Die Polsterung besteht also aus einem Ram oben, dann einem Ram auf der rechten Seite, einem Ram unten und zwei Ram auf der linken Jetzt haben wir etwas Platz in der Eingabe. Als nächstes müssen wir uns um das Telefon kümmern. Stellen wir die Telefongröße auf 1,6 Ram ein. Dann wird der Telefontarif 300 betragen. Außerdem werde ich die Farbe ändern. Lass uns einen 05 FD benutzen. Okay, also alles sieht ziemlich gut aus. Als Nächstes werde ich mich um das Platzhalterattribut kümmern das Platzhalterattribut Lassen Sie uns fortfahren und die Eingabegruppe abonnieren auswählen, gefolgt vom Eingabeelement Und dann brauchen wir ein Platzhalter-Pseudoelement. Ich werde die Telefongröße ändern . Es wird 1,6 sein. Außerdem werde ich die Farbe ändern. Lass uns dieselbe Farbe verwenden. Verkäufer können sehen, dass der Platzhalter geändert wurde. Okay, lassen Sie uns über die Eingabeelemente sprechen. Als nächstes müssen wir uns um den Boden kümmern , der sich gerade hinter dem Eingabeelement befindet. Lass uns weitermachen und auswählen, wir brauchen hier die Eingabegruppe abonnieren, gefolgt vom unteren Element. Definieren wir innerhalb der Höhe. Die Breite wird 16 Ram betragen. Dann beträgt die Höhe 100% Sie nimmt die Höhe des übergeordneten Elements ein, 5,5 Ram. Eigentlich kannst du hier entweder 100% schreiben oder erben. Es wird genauso funktionieren, aber ich bevorzuge 100%, ich weiß nicht warum Als Nächstes definiere ich die Hintergrundfarbe. Lassen Sie uns den Hintergrund auf 644 EF setzen. Als Nächstes werde ich die Position der Taste ändern , um zu sehen, wie sie aussieht Lassen Sie uns die Position auf absolut setzen. Dann müssen wir die Position so einstellen, dass sie Null ist. Und wir müssen auch die richtige Position auf Null setzen. Jetzt ist der Button sichtbar. Lassen Sie uns den Fehlerrand entfernen und die Schaltfläche auch abrunden. Wir brauchen den Rand ohne, dann wird der Grenzradius fünf Fram sein, der Button sieht viel besser aus. Als Nächstes nehme ich dich von den Telefonen ab. Die Telefonseite wird 1,5 Fram sein, wir brauchen zwei Pontights, es wird fett sein Außerdem werde ich Text in Großbuchstaben umwandeln, dann die Farbe ändern und ihn weiß machen Lassen Sie uns das Ergebnis überprüfen. Wie Sie sehen können, sieht der Button ziemlich gut aus. Das einzige, was wir tun müssen, ist, etwas Abstand zwischen den Buchstaben zu schaffen . Und ich werde der Schaltfläche auch einen kleinen Schatteneffekt hinzufügen. Ich werde den Buchstabenabstand auf 0,2 m einstellen . Was den Schatten der Box angeht, wird er 01 sein, dann fünf als Farbe. Ich werde RGBA mit der Opazität 0,2 verwenden , das ist die schwarze Farbe Lassen Sie uns abschließend den Cursorpunkt setzen. Okay, das ist es. Der Button ist fertig und eigentlich sind alle Elemente gestylt. Das einzige, was ich tun muss, ist einen Schatteneffekt zu erzeugen Ich meine diesen Effekt hier. Soweit ich mich erinnere, haben wir die Elemente namens Subscribe Shadow erstellt , die Entwicklung, die leer ist. Also werde ich dieses Element auswählen. Zuallererst, innerhalb von Höhen definiert, wird die Breite 80% betragen. Das ist für die Höhe. Ich werde es auf 12 Ram setzen. Dann brauchen wir eine Hintergrundfarbe. Ich setze es auf 116 bis neun. Hier haben wir den Schatten. Lass uns die Position ändern. Ich werde die Position auf absolut setzen. Wir müssen dieses Element entsprechend den Abschnittselementen positionieren . Wir benötigen die relative Position für die Abschnittselemente , sodass ich die untere Position auf minus sieben Ram setzen werde . Da die linke Position bei 50% liegen soll, müssen wir das Element horizontal zentrieren. Dafür müssen wir die Transformation mit der Übersetzungsfunktion verwenden . In diesem Fall müssen wir x übersetzen und der Wert wird -50% betragen. Wie Sie sehen können, ist das Element zentriert Jetzt werde ich die Elemente vertikal um die X-Achse drehen vertikal um die X-Achse Dafür müssen wir die Funktion Rotate X verwenden. Und der Wert wird Siento-Grad sein. Jetzt wird das Element als nächstes gedreht, ich werde es abrunden Bei Verwendung des Randradius beträgt der Wert 30%, sodass das Element abgerundet ist. Und jetzt müssen wir es verschwimmen lassen , so wie wir es im fertigen Projekt haben Um das zu tun, verwende ich Filtereigenschaft mit der Funktion polar und der Wert wird drei Ram sein Außerdem werde ich die Deckkraft auf 2,7 einstellen . Jetzt haben wir hier den Schatteneffekt, aber wir müssen ihn in einen Drei-D-Effekt umwandeln Drei-D-Effekt so wie wir ihn im fertigen Projekt haben Um eine Drei-D-Umgebung zu erstellen, weise ich dem Abschnitt eine Elementeigenschaft namens Perspektive zu dem Abschnitt eine Elementeigenschaft namens Perspektive Es ermöglicht uns, die Drei-D-Umgebung zu erstellen, der Wert wird 50 Ram sein. Außerdem benötigen wir eine Eigenschaft namens transform style für das übergeordnete Element des Schattens , den Subscribe-Wrapper Wir benötigen hier einen Transformationsstil, bei dem der Wert beibehalten wird, drei D. Jetzt wird der Drei-D-Effekt angewendet. Lassen Sie uns einen Blick darauf werfen. Wie Sie sehen können, haben wir hier einen schönen und coolen Schatteneffekt. Es ist ein Drei-D-Effekt , der sich über den Abonnement-Bereich erstreckt. Ich finde, es sieht ziemlich nett und modern aus. Fahren wir mit der nächsten Vorlesung fort. 46. HTML-Markup für Footer erstellen: Ordnung, in der letzten Lektion haben wir den Abonnement-Bereich fertig gestaltet Es sieht ziemlich nett und modern aus. Und jetzt müssen wir weitermachen und den letzten Abschnitt der ersten Seite, die Homepage, erstellen . Es wird eine Fußzeile sein. Hier haben wir die Fußzeile. Es ist einfach, aber ich finde, es sieht ziemlich gut aus Wir haben hier verschiedene Links, auch die Telefonsymbole. Unten sehen Sie die Navigationselemente, die funktionieren. Wenn wir auf eines der Navigationselemente klicken, gelangen wir zur richtigen Seite. Wie Sie sehen können, funktionieren alle Links einwandfrei. Okay, lassen Sie uns weitermachen und zunächst wie gewohnt das HTML-Markup erstellen Ich werde deine neuen Kommentare für die Fußzeile einfügen. Dann öffne ich H fünf Fuß. Es wird zwei verschiedene Teile beinhalten. Wir werden diesen Teil hier und die Fußzeile unten bearbeiten müssen. Die Navigationselemente, die wir hier benötigen. Tiefer Zug mit der Fußzeile der Klasse oben. Außerdem werde ich auch die Fußzeile unten erstellen. Für den Anfang werden Social-Media-Symbole enthalten sein. Ich werde mit der Klasse über soziale Medien Kontakt aufnehmen. Es ist so, dass wir hier Medien brauchen. Es wird ein individueller Klassenname sein. Aber außerdem werde ich hier einen gemeinsamen Klassennamen hinzufügen. Und es wird ein Punkt in der Fußzeile sein, ich habe die dritte Überschrift, der Text wird uns folgen Dann brauchen wir hier eine Entwicklung , die die Icons umhüllt. Ich nenne es Icons, ich füge Ihre Telefonsymbole ein. Die erste Phase wird eine Marken-A-Phase sein. Insgesamt werden wir sieben verschiedene Symbole haben, daher werde ich diese Codezeile sechsmal duplizieren dann die Klassennamen ändern. Der zweite wird FA Instagram sein. Dann werden wir hier eine verlinkte haben. Dann wird das nächste ein Twitter sein. Im Moment hat Twitter einen anderen Namen, aber trotzdem werde ich ihn hier einfügen. Als nächstes werden wir Pinterest haben. Dann wird das nächste Symbol ein Tribble sein. Schließlich müssen wir das tun, okay, damit auch alle Telefonsymbole erstellt werden Lassen Sie uns überprüfen, ob sie alle sichtbar sind und angezeigt werden. Hier haben wir sieben verschiedene Symbole und alle werden angezeigt. Okay, als Nächstes werde ich mich um das nächste Filterelement kümmern und es werden einige Links sein. Zuerst füge ich deine drei Überschriftenelemente ein, es werden Funktionen sein. Dann brauchen wir Link-Elemente. Das erste wird mehr als 1.000 Layouts umfassen. Ich werde diese Codezeile fünfmal duplizieren , weil wir sechs verschiedene Links haben werden. Ich meine, das zweite Linkelement wird aus mehr als 100 Elementen bestehen. Dann wird das nächste kein Code-Design sein. Dann wird der nächste E-Commerce sein. Eigentlich sind Links irgendwelche Bauchlinks Sie hier einfügen können, was Sie wollen Es liegt absolut an dir. Dann ist das nächste Element der Arbeitsablauf. Schließlich bin ich unsicher im Marketing. Okay, das ist es. Was das zweite Fußzeilenelement angeht, werde ich dieses Element tatsächlich zweimal duplizieren Dann werde ich die Überschrift ändern. Lassen Sie uns hier den ersten Buchstaben ändern, er sollte groß sein. Die zweite Rubrik wird Dienstleistungen sein. In diesem Fußzeilenpunkt werden wir fünf haben. Link. Also werde ich eines davon löschen und dann den Inhalt der Link-Elemente ändern. Der erste wird Marketplace sein. Dann werden wir Theme Builder haben. Der nächste wird Cloud sein. Dann werden wir hier endlich mal zu Intro Themes gehen Okay, das war's mit dem zweiten Fem, eigentlich ist es der dritte Fußzeilenpunkt und der zweite, der letzte Fußzeilenpunkt wird Wir werden hier vier Links haben. Ich werde hier etwas über uns schreiben. Dann werden wir blockieren, die nächsten werden Spediteure sein. Das letzte Verbindungselement wird Kontakt sein. In Ordnung, das ist ungefähr mit den Fußzeilenelementen. Eigentlich ist das alles, ungefähr der obere Teil der Fußzeile. Ich werde mir den unteren Teil der Fußzeile ansehen. Wir werden hier sechs verschiedene Linkelemente haben und das werden Navigationselemente sein Ich werde Linkelemente im H-Referenzattribut öffnen . Ich werde Index-HTML einfügen , weil dieses Link-Element uns zur Startseite führt. Dann lassen Sie uns diese Codezeile fünfmal duplizieren, weil wir insgesamt sechs verschiedene Navigationselemente haben. Der zweite wird für Kunden sein. Dann werden wir sofort Produkte haben, diese Links, ich meine, diese Seiten werden nicht erstellt. Wir werden sie in den kommenden Vorlesungen erstellen. Aber wie dem auch sei, ich werde hier die Namen der Dateien angeben. Der nächste wird Kontakt sein. Dann werden wir ein Konto haben. Abschließend möchte ich zur Preisgestaltung sagen, Preisgestaltung dass es meiner Meinung nach um den extremen Preisaufschlag geht Alle Elemente sind geschaffen. Lass uns den Browser überprüfen. Wie Sie sehen können, haben wir hier alle Links und auch die Telefon-Asomicons Jetzt ist es an der Zeit, diese Elemente zu stylen. Und dafür fahren wir mit der nächsten Vorlesung fort. 47. Styling-Fußzeile: In der vorherigen Lektion haben wir das HDML-Markup für die Fußzeile erstellt, und jetzt ist es an der Zeit, diese Elemente zu Schauen wir uns das fertige Projekt noch einmal an. Hier haben wir die Fußzeile, die einfach ist, aber ich finde, sie sieht ziemlich nett und modern Gehen wir zum VS-Code und fangen wir an, CSS zu schreiben. Bevor wir das tun, werde ich hier ein Element hinzufügen weil ich in der letzten Vorlesung vergessen habe, es zu erstellen. Wir benötigen hier den Inhalt der Fußzeile , der den Inhalt der Fußzeile Lassen Sie uns diesen Schluss, Deep Talk, ausschneiden und ihn unten einfügen Okay, das ist es. Das H-On-Markup ist fertig. Ich werde Ihre neuen Kommentare für die Fußzeile hinzufügen. Als Nächstes wähle ich das Fußzeilenelement aus. Zunächst definiere ich die Breite und Höhe. Die Breite wird 100% betragen. Was die Höhe angeht, werde ich die Höhe des Topfes auf 60 erhöhen. Ich meine 60% des Viewports. Lassen Sie uns außerdem mithilfe von Padding etwas Platz in der Fußzeile schaffen mithilfe von Padding etwas Platz in der Fußzeile Der Pudding wird zehn Widder oben sein, dann Null auf der rechten Seite, drei Widder am unteren Ende, Null auf der Null auf der Okay? Wie Sie sehen können, werden Breite , Höhe und auch der Pudding auf die Elemente angewendet Als Nächstes werde ich mich um den Inhalt der Fußzeile kümmern. Lassen Sie uns diese Elemente auswählen. Definieren Sie zunächst Breite und Höhe. Die Breite wird 100% betragen. Was die Höhe angeht, werde ich sie ebenfalls auf 100% festlegen. Als Nächstes richte ich die Elemente mithilfe der CSS-Flex-Box Wir müssen Flex anzeigen. Dann werde ich die Elemente, ich meine die Flex-Elemente, vertikal in einer Spalte platzieren . Wir müssen die Richtung des Flexes ändern und es wird eine Spalte sein. Dann werde ich Abstand zwischen den Flex-Elementen schaffen , indem ich einen konkreten Abstand dazwischen begründe. Lassen Sie uns außerdem die Elemente in der Mitte ausrichten. Auch hier, wie Sie die Elemente sehen können, meine ich, dass die Ober- und Unterseite ausgerichtet sind. Als Nächstes werde ich mich um die Oberseite kümmern. Lassen Sie uns weitermachen und „Fuß nach oben“ auswählen. Ich setze mit auf 100%. Dann richte ich die Elemente horizontal in einer Reihe aus. Und dafür verwenden wir wieder Flex-Bücher. Um Abstand zwischen den Flex-Elementen zu schaffen, verwende ich die Methode zum Ausrichten von Inhalten mit gleichmäßigem Werteabstand. Okay? Die Elemente, der erste Teil oben in der Fußzeile, sind gut ausgerichtet Okay. Als Nächstes werde ich mich um die sozialen Medien kümmern. Ich werde die Fußzeile Social Media auswählen. Und ich werde die Breite definieren. Sie wird 30% betragen. Wie ich sehen kann, die Breite des ersten Fußzeilenelements in den Social-Media-Symbolen erhöht Es macht 30% der Fußzeile aus. Als Nächstes wähle ich das Fußzeilenelement aus. Es ist ein allgemeiner Klassenname für alle vier Fußzeilenelemente Wir müssen CSS und Flexbooks verwenden Ich werde Flex-Elemente vertikal in einer Spalte ausrichten. Als Gast müssen wir die Richtung ändern und es wird eine Spalte sein. Wie Sie sehen können, werden die Flex-Elemente in einer Spalte platziert. Als Nächstes kümmern wir uns um die Überschriften. Ich wähle die dritte Seite des Fußzeilenelements aus. Wir benötigen dieselben Stile für alle Überschriftenelemente. Ich werde die Telefonfamilie ändern, sie wird kursiv sein, dann wird das Telefon 2,5 Ram groß sein Ich werde die Farbe ändern, nehmen wir Farbe 007 Außerdem werde ich mit dem Rand etwas Platz am unteren Rand schaffen . Untere zwei Ram. Wie Sie sehen können, sehen die Überschriften ziemlich gut aus Als nächstes müssen wir uns um die Icons kümmern. Wählen wir die Symbole aus, gefolgt vom Element. Ich werde das Telefon vergrößern, es wird 2,5 Ram sein. Dann brauchen wir Platz auf der rechten Seite jedes Symbols. Ich werde Marching Right mit dem Wert zwei Ram verwenden. Und ändere auch den Coursermate-Zeiger. Okay, jetzt haben wir größere Symbole. Als Gast müssen wir die Farbe für jeden Artikel ändern. Lass uns weitermachen und mit dem ersten beginnen. Ich wähle die Icons I aus, gefolgt von der n-ten Child-Auswahl Wir benötigen als erstes Objekt ein Symbol, die Farbe wird 187 sein 72. Lassen Sie uns das Ergebnis überprüfen. Wie Sie sehen können, hat sich die Farbe des ersten Artikels geändert. Machen wir dasselbe für den Rest der Symbole. Ich werde diesen Code sechsmal duplizieren, weil wir insgesamt sieben Symbole haben. Eigentlich brauchen wir sieben Symbole und acht. Ich werde die Nummern der Chart-Selektoren ändern. Wir brauchen Zahlen, wir brauchen Zahlen von eins bis sieben. Außerdem müssen wir die Farben ändern. Die zweite Farbe wird C323 sein. Dann werden wir eine 662 haben. Der nächste wird 112 sein. Dann werden wir hier D081 haben. Der sechste Artikel ist die Farbe 4c89. Außerdem brauchen wir hier rote Farbe, die F0000 ist. Okay, wie Sie sehen können, die Farben der Symbole geändert und sie sehen ziemlich gut aus Als Nächstes müssen wir uns hier um die Links kümmern, ich werde den Fußartikel auswählen. Lass uns die Telefongröße ändern. Es wird 1,8 Ram sein. Dann brauchen wir Platz am unteren Rand mit Margin Bottom. Und es werden 1,5 Ram sein. Und ändere auch die Farbe des Links. Es wird 394353 sein. Es hat eine dunkelgraue Farbe. Hier haben wir die Links. Eigentlich denke ich, dass wir zu viel Abstand zwischen ihnen haben. Lassen Sie uns die Marge verringern. Potson, mach es auf 1,4 Ram. Machen wir 1,3 Ram draus. Ich denke, wir haben jetzt bessere Ergebnisse. Als nächstes mussten wir uns um die Unterseite kümmern. Wählen wir die Fußzeile Unten. Ich werde die Breite auf 100% setzen . Dann müssen wir die Elemente mit Flexbox ausrichten Wir müssen Flex anzeigen. Dann werde ich mithilfe von Justify Content Space Platz zwischen den Flex-Elementen schaffen . Außerdem werde ich Align Items Center verwenden , um die Flex-Elemente horizontal zu zentrieren. Wie Sie sehen können, sind die Linkelemente gut in der horizontalen Reihe angeordnet, sie sind ausgerichtet. Jetzt werde ich oben einen Rand erstellen, den Rand, den wir hier haben. Verwenden wir Border Top und die Werte werden 0,2 Ram Solid als Farbe sein. Ich werde den RGBA-Wert verwenden, wir brauchen Null, dann 122, dann wird der nächste Wert 170 sein Was die Opazität angeht, werde ich sie auf 0,2 setzen. Außerdem brauchen wir hier oben etwas Platz , oben zwischen den Navigationselementen und dem Lassen Sie uns dafür sorgen, dass sich der Abstand in der Polsterung befindet, der obere Teil eines Rams. Ordnung, endlich müssen wir die Link-Elemente anpassen Ich wähle Fußboden gefolgt vom Link-Element. Wir brauchen eine Schriftfamilie. Es wird Croissant One Curs sein, dann stelle ich Schriftgröße zwei ein, Und ändere auch die Farbe des Link-Elements. Es wird 007 AA sein, okay? Wie Sie sehen können, sehen die Link-Elemente ziemlich gut aus. Eigentlich sind wir mit der Fußzeile fertig. Wir können sagen, dass wir die Arbeit an der Hauptseite, der Homepage, abgeschlossen haben Arbeit an der Hauptseite, der Homepage, Alles sieht ziemlich gut aus. Als nächstes müssen wir uns um die Seiten, Kunden, Produkte, Kontakte und Kontopreise kümmern . Wir müssen fünf verschiedene Seiten erstellen. Außerdem müssen wir dafür sorgen, dass das gesamte Projekt auf unterschiedliche Bildschirmgrößen und Geräte reagiert. Trotzdem müssen wir viele Dinge tun. Fahren wir mit der nächsten Vorlesung fort. 48. Benutzerdefinierte Scrollbar erstellen: In der vorherigen Lektion haben wir Arbeit an der Fußzeile abgeschlossen Es sieht ziemlich gut aus. Wie gesagt, wir müssen weitermachen und mit der Erstellung der Seiten beginnen , da die Startseite bereits gestaltet und angepasst ist Bevor wir weitermachen und mit der Erstellung der Seiten beginnen, möchte ich noch etwas tun Wenn wir uns das fertige Projekt ansehen, werden Sie hier feststellen, dass wir hier eine benutzerdefinierte Scrollleiste haben. Sie unterscheidet sich von der standardmäßigen Standard-Scrollbar. Ich meine von diesem hier. In dieser Vorlesung werde ich die Bildlaufleiste ändern. Gehen wir zum VS-Code und scrollen wir direkt nach den Standardstilen nach oben Ich werde neue Commons für die benutzerdefinierte Bildlaufleiste einfügen. Dann wähle ich Körperelemente aus, gefolgt von einem der CD-Elemente. Es heißt Webkit Scroll Bar. Jetzt definiere ich die Breite der Scrollleiste. Stellen wir es auf 1,5 Ram ein. Als Nächstes müssen wir ein weiteres Pseudoelement definieren und es heißt Web Kit, Scrollbar, Thumb, was dieser Teil hier ist Jetzt definiere ich den Hintergrund und lass uns hier den linearen Farbverlauf verwenden Die erste Farbe wird 830 sein. Für die zweite werde ich B55 verwenden. Wenn wir jetzt nachschauen, werden Sie feststellen, dass der Daumen verändert wurde Wir haben hier einen Daumen mit unterschiedlicher Hintergrundfarbe. Jetzt müssen wir uns um die Strecke kümmern. Eigentlich kann es gerade sehen, dass die Spur weiß ist. Aber wie dem auch sei, ich werde es definieren , weil Sie möglicherweise eine andere Spur mit einer anderen Farbe benötigen. In Zukunft sollten Sie wissen, wie Sie es ändern können. Ich wähle Body, dann Webkit, Scroll, Bar, Track Lassen Sie uns die Hintergrundfarbe weiß machen. Die Strecke ist weiß. Wenn wir die Farbe ändern und sie, sagen wir, grün machen , dann ändert die Spur ihre Hintergrundfarbe. Auf diese Weise können Sie die Hintergrundfarbe der Scrollbar-Spur ändern die Hintergrundfarbe der Scrollbar-Spur Lass uns wieder hierher kommen. Schon wieder weiße Farbe. Das ist es. Wir haben die Standard-Scrollleiste geändert und sie modern und nett aussehen lassen. Jetzt ist es Zeit, mit der nächsten Lektion fortzufahren, in der wir mit der Erstellung der Seiten beginnen müssen. 49. Navbar anpassen: Ordnung, also in der vorherigen Lektion haben wir eine benutzerdefinierte Bildlaufleiste erstellt , die ziemlich gut aussieht und sich von den Standard- und Standard-Scrollbalken unterscheidet von den Standard- und Standard-Scrollbalken Jetzt müssen wir, wie gesagt, mit der Erstellung der Seiten beginnen. In diesem Vortrag werde ich damit beginnen , die Kundenseite zu erstellen. Gehen wir zum fertigen Projekt und schauen uns noch einmal die Kundenseite an. Hier haben wir die Kundenseite , die aus einer Überschrift besteht. Dann haben wir hier einige Testimonials von verschiedenen Kunden Und unten haben wir dieselbe Fußzeile , die wir für die Hauptseite erstellt haben, ich meine auch die Startseite Wir haben hier die Navigation. Sie ähnelt der Hauptnavigation. Das einzige, was mit der Navigation zu tun hat , ist, die Farbe des Logos und auch der Navigationselemente zu ändern . Außerdem müssen wir den Hintergrund, die Farbe und die Farbe der Schaltfläche ändern . Okay, lassen Sie uns weitermachen und mit der Arbeit an der Kundenseite beginnen. Als erstes werde ich hier im HTML-Ordner eine neue Datei erstellen . Die Datei wird Clients sein, also HTML. Lass uns diese Datei öffnen. Ich werde es hierher verschieben. Die Kundenseite. Ich meine, die HTML-Datei wird erstellt. Jetzt werde ich mir den gesamten Inhalt schnappen. Lassen Sie uns den gesamten Code kopieren und hier einfügen. Dann lösche ich alle Abschnitte außer der Navigation. Lassen Sie uns alles außer der Navigation löschen , die wir hier haben. Die gesamte Navigation von der Startseite aus. Außerdem alle Links, die wir in diesem Projekt verwenden. Lass uns den Browser überprüfen. Gehe zur Kundenseite. Hier haben wir die Navigation und die gesamte Seite ist leer. Wie gesagt, wir müssen die Navigation leicht ändern. Ich meine, wir müssen die Farben des Logos und der Navigationselemente ändern . Ich werde der n-ten Leiste einen neuen Klassennamen hinzufügen und es wird mehrseitig sein Dann gehe ich zur CSS-Datei und wir müssen das Span-Element des Logos finden Hier haben wir es. wähle die neu hinzugefügte Klasse aus, mehrseitig genug, gefolgt vom Logo Dann brauchen wir das Span-Element. Lass uns die Farbe des Textes ändern. Es wird 0926 vor sieben sein. Außerdem werde ich den Schatteneffekt loswerden , denn wenn wir den weißen Hintergrund haben, dann sieht der Schatten nicht besonders gut aus Ich werde den Textschatten auf „Nein“ setzen. Lass uns den Browser überprüfen. Wie Sie sehen können, hat sich die Farbe des Logos geändert und jetzt sieht es viel besser aus. Nehmen wir hier die Navigationspunkte. Ich werde hier Linkelemente finden, wir haben keinen Link. Und ich werde hier auf mehrere Seiten klicken, gefolgt von keinem Link. Dann werde ich die Farbe ändern. Die Farbe wird zwischen 0926 und sieben sein. Und ich werde Tech Shadow auch loswerden. Setzen wir es auf „Keine“. Wie Sie sehen können, sich die Farbe der tauben Gegenstände geändert Okay, jetzt müssen wir uns um den Hintern kümmern. Finden wir den Boden, der sich hinter den Tropfen befindet. Während ich fünf rauf und runter gehe. Dann sollten wir hier ja fündig werden, PTN. Ich wähle „ Mehrere Seiten nach oben“, gefolgt von „Keine Artikel Dann müssen wir auswählen, eigentlich brauchen wir hier Artikel und Artikel. Als nächstes brauchen wir kein PTN. Ich werde den Hintergrund ändern, den wir hier brauchen. Lineare Gradienten Die Richtung des Farbübergangs wird zwei sein, oder? Dann wird die erste Farbe F459 sein. Was die zweite Farbe angeht, werde ich F3598 verwenden Wie Sie sehen können, hat sich die Grundfarbe geändert. Als Nächstes ändere ich die Farbe des Textes und er wird weiß. Außerdem werde ich Box Shadow loswerden. Setzen wir es auf „Nichts“, okay? Wie Sie sehen können, sieht die Navigation ziemlich gut aus. Das einzige, was ich in Bezug auf die Navigation tun muss, ist, den Box-Schatten der Drop-down-Menüs zu ändern . Ich werde es leicht ändern. Lass uns dann Dropdown finden . Ich werde hier hinzufügen, eigentlich müssen wir den Code hier platzieren. Ich wähle Multipage no, gefolgt von O Items Dann müssen wir nach unten gehen. Der Schatten der Box wird 0110 sein. Dann brauchen wir RGP-Farbe 130. Dann wird der nächste 162 sein. Dann brauchen wir 235 und die Opazität wird 0,4 sein. Okay Wie Sie sehen können, haben wir hier einen anderen Schatteneffekt und ich denke, er ist viel besser als der vorherige für den weißen Hintergrund In Ordnung, mit der Navigation sind wir fertig. Lass uns überprüfen, ob die Tiki-No-Bar gut funktioniert. Dafür werde ich die Höhe des Containers für eine Weile erhöhen Höhe des Containers für eine Weile Ich werde Stilattribute verwenden. Dann brauchen wir Höhen. Stellen wir es auf 150 ein und geben die Höhe ein. Und jetzt überprüfe die Ergebnisse. Wie Sie sehen können, funktioniert der Sticking El Bar einwandfrei. Wir haben hier eine benutzerdefinierte Bildlaufleiste, aber wir werden sie ändern. Wir brauchen die lila Bildlaufleiste hier nicht. Soweit ich mich erinnere. Wir haben hier eine grüne Scrollleiste. Wir werden es etwas später ändern. Okay, alles funktioniert gut. Die Navigation sieht ziemlich gut aus. Als Nächstes müssen wir den Inhalt zur Kundenseite hinzufügen. Lassen Sie uns dazu mit der nächsten Vorlesung fortfahren. 50. Erstelle das HTML-Markup für Erfahrungsberichte: In der vorherigen Vorlesung haben wir begonnen, an der Kundenseite zu arbeiten Wir haben die Navigation angepasst und jetzt ist es an der Zeit, den Inhalt zur Seite hinzuzufügen. Schauen wir uns das fertige Projekt an. Die Kundenseite wird die Testimonials der Kunden enthalten die Testimonials der Wir werden das HTML-Markup für den Inhalt der Kundenseite erstellen das HTML-Markup für den Inhalt der Kundenseite Gehen wir zum VS-Code und fügen direkt nach der Navigation neue Kommentare für die Testimonials Dann öffne ich den Abschnitt mit den Zeugnissen der Klassennamen Das erste Element , das ich hier einfügen werde, wird der Header sein Wir brauchen Entwicklungen mit dem Header der Zeugnisse von Klassennamen Dann öffne ich ein Überschriften-Tag mit dem Text, was Kunden über uns sagen Dann brauchen wir weiter, weil wir den Trust-Pilot hinzufügen werden . Nach dem Überschriftenelement öffne ich ein Deep-Tag mit den Sternen für den Klassennamen. Wir werden hier Sterne haben. Ich werde hier ein Google-Material-Symbol einfügen. Gehen wir zum Browser und suchen wir nach Google-Materialsymbolen. Dann müssen wir das Symbol mit dem Namen Hotel Class finden. Dies ist das Symbol, das wir brauchen. Eigentlich werde ich es rund machen, dann nimm das Span-Element und füge es hier ein. Wenn wir den Browser überprüfen, werden Sie hier sehen, dass der Stern auf der Seite angezeigt wird. Als Nächstes füge ich Tug mit dem Klassennamen Trust Pilot Dann brauchen wir das Span-Element, Put den Text Trust Pilot Danach füge ich hier fünf Sterne hinzu. Lass uns Deep Tug öffnen. Gehen Sie dann zum Browser und suchen Sie nach dem Symbol mit dem Namen Stern Wir brauchen dieses Symbol. Nehmen wir das Span-Element und fügen es in die Entwicklung ein. Insgesamt werden wir fünf Sterne haben. Deshalb werde ich diese Codezeile viermal duplizieren . Lass uns den Browser überprüfen. Wie Sie sehen können, haben wir hier fünf Sterne. Okay, das nächste, was ich tun werde , ist eine weitere Entwicklung zu entwickeln, und das wird ein Wrapper für Testimonials sein Insgesamt werden wir 12 verschiedene Testimonials haben. Lassen Sie uns den Deep Tug mit dem Zeugnis des Klassennamens beginnen. Wir werden das erste Testimonial erstellen und dann das Testimonial duplizieren und einige Änderungen vornehmen Das Testimonial wird zwei verschiedene Elemente enthalten. Wir werden Testimonial Top und Testimonial Body haben. Lassen Sie uns de tu mit dem Klassennamen öffnen. Das Testimonial wird das Bild des Kunden und auch den Namen enthalten des Kunden und auch den Ich werde ein Bild-Tag einfügen, dann müssen wir den Pfad des Bildes angeben Vorher müssen wir den aktuellen Ordner verlassen. Im Moment befinden wir uns im Htiml-Ordner. Wir müssen den Ordner verlassen, wir brauchen Punkte und s. Dann müssen wir den Bilderordner aufrufen und den Client auswählen Ich brauche einen Namen, ich werde das Span-Tag öffnen. Der Name wird John Smith sein. Hier haben wir das Bild des Kunden und auch den Namen. Okay, lassen Sie uns über das Top-Element des Testimonials sprechen. Als Nächstes brauchen wir das Testimonial Body. den Elementen gehören die Überschrift der Sterne und der Absatz. Eigentlich ist es eine Überschrift, es ist auch ein Absatz Lassen Sie uns hier Sterne einfügen. Ich nehme diese Elemente mit fünf Sternen und füge sie dann hier ein. Als Nächstes benötigen wir einen Absatz mit Dummy-Text. Wir brauchen fünf Wörter. Ich werde deine Lorin Five einfügen und dann einen weiteren Absatz einfügen Wenn wir uns das fertige Projekt ansehen, werden Sie tatsächlich feststellen, dass wir hier verschiedene Absätze haben Die Länge der Absätze ist unterschiedlich. Im Moment lasse ich dieses Element leer, und dann kümmern wir uns etwas später darum. Okay, lassen Sie uns für das erste Testimonial über das HTML-Markup Wie gesagt, wir werden 12 verschiedene Testimonials haben. Ich werde diesen Code 11 Mal duplizieren und dann einige Änderungen vornehmen Wir müssen das ändern, zuerst werde ich hier die Anzahl der Wörter einfügen . Ich meine, wir brauchen Lauren 30. Dann müssen wir uns um das zweite Testimonial kümmern , das wir hier brauchen, Kunde Dann wird der Name Jack Brown sein. Ich benutze ein paar Domainnamen, du kannst benutzen, was du willst Als Nächstes werde ich Lauren 40 überlisten. Dann haben wir hier Kunde drei. Der Name wird Smith sein. Was den Absatz angeht, werde ich mich einmischen, Lauren 50. Dann haben wir hier Kunde Vier und der Name wird Nick Peters sein den Absatz betrifft, werden wir hier 30 Wörter haben Wir brauchen Lauren 30. Okay. Als Nächstes brauchen wir Client Five mit dem Namen Philip Dough. Was den Absatz angeht, so wird es Laura 13 sein. Eigentlich brauchen wir hier 12 Artikel. Es ist der erste 112345. Es sind sechs Artikel, also werde ich es sechsmal duplizieren Jetzt hoffe ich, dass wir 12 Testimonials haben. Es ist das fünfte Zeugnis. Jetzt brauchen wir hier Kunde sechs. Dann wird der Name Jane Smith sein. Was den Absatz angeht, so wird es Lauren 40 sein. Dann ist der nächste Kunde Kunde Sieben mit dem Namen Jessica Mendes, und der Absatz wird Lauren 40 sein Es war das siebte Zeugnis. Wir brauchen hier den achten Kunden mit dem Namen Steve Thompson. Der Absatz wird Lauren 50 sein. Wir brauchen hier neun und es wird Maria Green sein. Und der Absatz wird, ähm, 60 sein. Und dann haben wir hier Kunde Zehn. Dann sind es Alexis, Alexis Smith, und wir brauchen Lorem Dann Kunde 11, Bob Brown, Lum Endlich brauchen wir Kunde 12. Es wird Rose Hanson sein. Was den Absatz angeht, werde ich hier Laurum 40 einfügen Okay, ich denke, das H-Zeit-Markup ist fertig und ich hoffe, dass hier alles korrekt ist Lass uns zum Browser gehen und nachschauen. Hier haben wir Bilder mit unterschiedlichen Namen und Absätzen. Ich denke, alles, was wir hier nicht haben, das Bild für den 11. Kunden. Wir haben vielleicht einen Fehler. Das ist Kunde 11. Jetzt ist das Problem behoben. Ich denke, alles scheint richtig zu sein. Jetzt müssen wir diesen Abschnitt anpassen. Fahren wir mit der nächsten Vorlesung fort. 51. Abschnitt mit Styling-Erfahrungsberichten: In der vorherigen Lektion haben wir das HTML-Markup für die Kundenseite erstellt das HTML-Markup für die Kundenseite Wir haben den Testimonial-Bereich erstellt. Sie können hier alle Elemente sehen. Jetzt müssen wir anfangen, diese Elemente zu stylen. Aber bevor wir das tun, werde ich eine Sache tun. Wie Sie sehen können, haben wir hier eine Bildlaufleiste, die die lila Hintergrundfarbe hat Aber wenn wir uns das fertige Projekt ansehen, werden Sie feststellen, dass die Bildlaufleiste eine andere grüne Farbe hat Ich werde mich als Erstes darum kümmern. Gehen wir zum VS-Code und erstellen wir zunächst eine neue Datei im CSS-Ordner. Es werden Kunden sein. Dann werde ich diese Datei hierher verschieben. Wir müssen die CSS-Datei des Kunden mit der HTML-Datei verknüpfen. Ich meine, Kunden verwenden HTML. Ich werde diesen Code duplizieren. Und wir müssen hier den Namen der Datei ändern , die Clients lauten soll. Okay, sobald die Dateien verbunden sind. Als Nächstes gehe ich zur Kachel-CSS-Datei und hole mir diesen Code. Ich meine, den Code, in dem wir die Hintergrundfarbe der Bildlaufleiste ändern die Hintergrundfarbe der Bildlaufleiste Schlag. Kopieren wir diesen Code und gehen wir dann zu den Clients von CS File Zunächst füge ich Ihre Kommentare für die benutzerdefinierte Bildlaufleiste ein und füge dann den Hier müssen wir diese beiden Farben ändern. Die erste Farbe wird 0067 A sein Für die zweite Farbe verwende ich 34 DC 87. Wie Sie sehen können, hat sich die Farbe, ich meine die Hintergrundfarbe der Bildlaufleiste, geändert Und es sieht ziemlich gut aus. In Ordnung, schauen wir uns das mit der Scrollbar an. Als Nächstes müssen wir Sie aus dem Bereich mit den Testimonials herausnehmen. Ich werde Ihre neuen Kommentare für Testimonials einfügen. Dann müssen wir das Abschnittselement auswählen, das Testimonials für Klassennamen enthält Zuallererst definiere ich die Handhöhe der Abschnittselemente Ich setze beide auf 100%. Dann verschiebe ich den Abschnitt mit Margin Top nach unten. Ich setze den oberen Rand, eigentlich erstellen wir den Abstand zwischen dem oberen Rand der Seite und dem Abschnitt. Als Nächstes verwende ich CSS Flexbox, um die Flex-Elemente auszurichten Ich werde Display auf Flex setzen. Dann werde ich die Richtung ändern , weil wir die Elemente vertikal ausrichten werden. Die Flex-Richtung muss der Spalte entsprechen. Außerdem müssen wir die Elemente in der Mitte ausrichten, wie Sie sehen können, den Inhalt in der Mitte. Eigentlich müssen wir die Größe der Bilder ändern , weil sie momentan zu groß sind. Ich wähle zuerst das Testimonial aus, gefolgt vom Bildstapel Stellen wir die Höhe des Bildes ein, beide auf sechs Ram Dann stelle ich die Füße des Objekts so ein, dass es bedeckt ist, um zu vermeiden, die Bilder schrumpfen und die Bildqualität beeinträchtigt wird Dann mache ich die Bilder rund. Dafür benötigen wir für den Radius einen Wert von 50% Chem. Wie Sie sehen können, haben wir hier ein viel besseres Ergebnis, weil die Bilder kleiner wurden. Als Nächstes werde ich mich um den Header kümmern. Ich bin hier, Testimonial-Header. Wir müssen den Text in der Mitte ausrichten. Als Nächstes werde ich mich um das H-Ein-Überschriftenelement kümmern . Lassen Sie uns fortfahren und den Testimonial-Header auswählen , gefolgt vom H-One-Überschriftenelement Lassen Sie uns zunächst die Telefonfamilie ändern. Es wird Molly Cursive sein. Dann werde ich die Telefongröße auf Pi setzen. Außerdem müssen wir die Farbe, die hier verwendet wird, Farbe 0926, auf sieben ändern Farbe 0926, auf sieben Lass uns den Browser überprüfen. Wir haben hier die Überschrift. Jetzt werde ich den Abstand zwischen den Buchstaben vergrößern. Stellen wir es auf 0,2 Ram ein. Außerdem werde ich die Breite der Überschrift verringern. Stellen wir es auf 70% ein. Wie Sie sehen können, befindet sich die Überschrift auf der linken Seite der Seite. Wir müssen es in der Mitte platzieren, und dafür verwende ich den Rand, obwohl wir damit das Element in der Mitte platzieren können. Wenn Sie das Element zentrieren möchten, müssen Sie Breite und Rand zusammen verwenden. Merken Sie sich das. Wie Sie sehen, befindet sich die Überschrift jetzt in der Mitte. Als Nächstes werde ich die Zeilenhöhe ändern. Lassen Sie uns die Zeilenhöhe auf acht setzen. Okay, als Nächstes werde ich mich um die Sterne kümmern. Wählen wir die Wrapper-Entwicklung den Klassennamen Stars Ich werde Flexbox verwenden, um die Elemente auszurichten. Wie Sie sehen können, sind die Elemente horizontal in einer Reihe angeordnet. Als Nächstes werde ich mich um die Position des Elements kümmern . Lassen Sie uns die Position auf absolut setzen. Wir müssen Elemente entsprechend ihrem übergeordneten Element positionieren . Wir benötigen die relative Position für das übergeordnete Element, also den Testimonial-Header Jetzt definiere ich die beiden Positionen, es werden 50% sein. Was die richtige Position angeht, werde ich sie auf 15% setzen. Okay, schauen wir uns die Ergebnisse Die Elemente sind schön und korrekt platziert. Als Nächstes werde ich mich um den Trustpilot kümmern, aber wie ich sehe, sind die Sterne umrissen. Wenn wir uns das fertige Projekt ansehen, können Sie sehen, dass die Sterne nicht umrissen, sondern gefüllt sind. Gehen wir zu den Google-Material-Symbolen. Schauen wir uns die Website an. Wie Sie im Bereich Filter sehen können, haben wir hier eine Option namens Feld und wir müssen sie einschalten. Wenn ich jetzt nach dem Symbol suche, werden Sie sehen, dass es sich um ein Feld handelt. Wenn ich auf das Symbol klicke, können Sie sehen , dass wir hier genau das gleiche Span-Element, den exakt gleichen Klassennamen und den Inhaltsstern haben. Der einzige Unterschied, den wir hier haben , ist, dass in diesem Fall, wenn wir die Feldsymbole verwenden, der Wert der Feldeigenschaft gleich eins ist. Wenn wir jedoch den Link in unserer H Neal-Datei überprüfen, werden Sie feststellen, dass wir hier eine Feldeigenschaft haben Der entsprechende Wert ist Null. Wenn ich Null auf Eins ändere und im Browser nachschaue, wirst du sehen, dass alle Sterne gefüllt sind. Okay? Das Problem ist behoben. Lassen Sie uns weitermachen und uns um das nächste Element kümmern , nämlich Trust Pilot. Ich wähle Trust-Pilot und definiere den Rand oben, weil wir oben etwas Platz brauchen Lassen Sie uns den oberen Rand auf ein m setzen. Okay, als Nächstes werde ich mich hier um dieses Textelement kümmern. Ich meine Trust Pilot. Gehen wir zum VS-Code- und Vertrauenspilotprogramm gefolgt von den Panelements, wenn wir uns das HTML-Markup ansehen Sie können hier sehen , dass dieses Element, das Trustpilot-Element, verschiedene Span-Elemente enthält Wir haben hier den Text Span Trustpilot und wir haben hier auch die Symbole mit Span-Elementen In unserem Fall müssen wir nur dieses Span-Element auswählen. Dafür werde ich einen der CSS-Kombinatoren verwenden , dieses Zeichen hier. Damit können wir hier nur das erste untergeordnete Span-Element auswählen hier nur das erste untergeordnete Span-Element Wenn ich hier Stile wie Schriftgröße 2,5 Ram hinzufüge, dann Farbe 0926 bis Sieben Außerdem werde ich den Buchstabenabstand verwenden. Sagen wir es, 2,3 Ram. Wenn wir dann den Browser überprüfen, werden Sie feststellen, dass nur dieses Span-Element gestylt ist, diese Sterne werden nicht verändert Wenn ich es los werde, unterschreibe bitte von hier aus und ändere dann die Farbe, um andere Ergebnisse Wie Sie sehen können, sind jetzt all diese Pan-Elemente geändert. Aber wenn wir hier den Kombinator hinzufügen, dann ändert sich das Panelement Okay, ich hoffe, dass es dir klar ist, ich werde diese Kacheln zurückholen Okay, als Nächstes müssen wir uns um die Sterne kümmern. Ich wähle Trust Pilot, gefolgt von der Entwicklung. Und dann brauchen wir Span. Lass uns die Farbe ändern. Es wird 00 sein. Dann brauchen wir Schriftgröße drei, Ram. Außerdem werde ich Margin verwenden. Die Marge wird oben und unten Null sein -0,25 Ram. Es ist auf der linken und rechten Seite. Okay, die Sterne sehen ziemlich gut aus. Als Nächstes werde ich mich hier um diesen Stern kümmern. Ich werde Sterne auswählen, gefolgt vom Span-Element. Jetzt müssen wir dieselbe Technik anwenden. Wir brauchen das erste untergeordnete Element. Ich werde wieder den CSS-Kombinator verwenden. Lass uns die Schriftgröße ändern. Es werden fünf Ram sein. Dann brauchen wir Farbe. Ich werde die Farbe auf 00b 67 setzen. Außerdem müssen wir auf der rechten Seite marschieren. Stellen wir es auf einen Ram ein. Ich denke, dass wir mit dem Header fertig sind. Alles sieht ziemlich gut aus. Als nächstes müssen wir uns um die Zeugnisse kümmern. Ich gehe zum VS-Code und wähle Testimonial aus. Ich werde die Breite und Höhe des Testimonials definieren und Höhe des Testimonials Die Breite wird 33 Ram betragen. Was die Höhe angeht, werde ich sie auf 100% setzen. Als Nächstes werde ich die Testimonials in verschiedenen Zeilen platzieren Dafür wähle ich den Testimonials Wrapper aus, wir den Wert auf 80% fest, dann verwende ich Flex Box Wir benötigen Display Flex, um die Flex-Elemente auf verschiedenen Zeilen zu platzieren Wir müssen Flex Wrap Wrap verwenden. Außerdem werde ich den Inhalt begründen und ihn in den Mittelpunkt stellen. Wie Sie nun sehen können, stimmen die Zeugnisse überein. Als Nächstes werde ich etwas Platz innerhalb des Testimonials-Wrappers schaffen , den ich verwenden werde Wir brauchen eine Polsterung von zehn RAM oben und unten und null auf der linken und rechten Seite Okay. Alles sieht ziemlich gut aus. Als Nächstes müssen wir zum Testimonial zurückkehren, und ich werde hier ein paar verschiedene Stile hinzufügen Wir brauchen Spielraum, um Platz zwischen den Testimonials zu schaffen Fügen wir es zu zwei Ram auf allen vier Seiten hinzu. Dann setze ich Box Shadow auf 01 Ram, zehn Ram. Die Farbe wird 113 sein. Null, dann brauchen wir 162. Als Nächstes nehme ich 235, und als Deckkraft nehme ich 0,4. Jetzt sehen die Testimonials Als Nächstes werde ich sie abrunden . Dafür benötigen wir einen Grenzradius mit dem Wert eins Ram. Außerdem werde ich mit Polsterung etwas Platz innerhalb des Testimonials schaffen innerhalb des Testimonials Stellen wir es auf allen vier Seiten auf zwei m ein. In Ordnung. Als Nächstes kümmere ich mich um das Testimonial-Top. Ich meine das Bild und den Namen. Zuallererst wähle ich den Wrapper aus, der als Testimonial ganz oben steht Eigentlich ist Testimonial Top und nicht Testimonial Top. Lassen Sie uns Flex Books verwenden, um Flex anzuzeigen Dann werde ich die Elemente in der Mitte ausrichten. Lassen Sie uns außerdem mithilfe des Randes Platz am unteren Rand schaffen. Unten, 1,5 Ram. In Ordnung, danach wähle ich Span-Elemente aus, ich meine den Namen des Kunden. Lassen Sie uns diesen Code nach dem Bild schreiben, ich wähle zuerst Testimonial aus, gefolgt vom Span-Element Ich werde das Telefon vergrößern. Sagen wir es auf 1,8 Ram. Der Text wird in Großbuchstaben geschrieben. Wir brauchen die Texttransformation in Großbuchstaben. Dann setze ich den linken Rand auf zwei Ram. Als Nächstes brauchen wir Farbe, und es wird 588 sein Schließlich benötigen wir einen Buchstabenabstand von 0,1. Okay, die Namen sehen alle ziemlich nett aus. Als Nächstes müssen wir uns um die tieferen Elemente im Inneren des Testimonials kümmern . Ich meine die Hülle der Sterne. Wählen wir das Testimonial-Gremium gefolgt von der Entwicklung Ich setze den Rand auf einen Widder oben und unten und Null auf der linken und rechten Seite Jetzt haben wir etwas Platz. Als Nächstes werde ich mich um die Sterne kümmern. Wählen wir Testimonial Body aus, gefolgt von der Entwicklung. Und dann brauchen wir Span vergrößere ich das Telefon auf drei Meter. Dann ändere ich die Farbe. Ich werde hier diese grüne Farbe verwenden. Die Sterne sehen ziemlich gut aus. Die einzige Sache, die wir tun müssen, ist, uns um diese Paragraphen zu kümmern. Fangen wir mit dem ersten Absatz an. Ich wähle den Testimonial-Körper aus, gefolgt von den Elementen Und dann brauchen wir N Child Selector. Wir brauchen Child Selector. Du denkst vielleicht, dass ich hier einen schreibe. Aber wenn wir uns die HT-Mail-Datei ansehen, werden Sie feststellen, dass der Absatz das zweite Mitglied der Entwicklung ist . Statt einem brauchen wir hier zwei. Lassen Sie uns die Telefongröße erhöhen. Es wird 1,8 Ram sein. Dann brauchen wir Phone Family. Dann stelle ich Molly-Schreibschrift ein. Lassen Sie uns diese Zeile als Nächstes nach oben verschieben. Ich werde das Gewicht des Telefons fett formatieren. Und ich werde die Farbe ändern. Es wird 0926 vor sieben sein. Schließlich werde ich hier Margin, Bottom One, Ram verwenden Margin, Bottom One, Ram Okay, lassen Sie uns die Ergebnisse überprüfen. Der erste Absatz sieht ziemlich gut aus. Als nächstes müssen wir uns hier mit dem zweiten Absatz befassen. Eigentlich werde ich diesen Code duplizieren und dann die Diagrammauswahl ändern Es werden drei sein. Ich werde die Telefonfamilie loswerden, dann wird die Telefongröße 1,6 Ram sein. Dann brauchen wir ein Telefongewicht von 300 und Farbe von 466. Endlich brauchen wir Marge. Unterer ein Ram. Okay, das ist es. Die Testimonials sind gestylt und sie sehen ziemlich gut aus. Mit dem Abschnitt mit den Testimonials sind wir fertig. Aber bevor wir mit der Vorlesung fertig sind, werde ich noch etwas tun Wenn wir uns das fertige Projekt ansehen, werden Sie feststellen, dass wir hier das I im Fuß haben , das wir für die Startseite erstellt haben. Das einzige, was ich tun werde, ist einfach das HTM-Markup der Fußzeile von der Startseite zu kopieren das HTM-Markup der Fußzeile von der Startseite Lassen Sie uns es kopieren und in die Kundenseite einfügen . Wenn ich hier die Fußzeile kopiere und einfüge und dann im Browser nachschaue, wirst du sehen, dass wir hier genau die gleiche Fußzeile haben , die wir auf der Startseite hatten Okay, das ist es, die Kundenseite ist fertig. Als nächstes müssen wir uns um die Produktseite kümmern. Und dafür fahren wir mit der nächsten Vorlesung fort. 52. Das HTML-Markup für Produkte erstellen: Im vorherigen Abschnitt haben wir die Kundenseite erstellt Es sieht ziemlich nett und cool aus. Jetzt ist es an der Zeit, weiterzumachen und mit der Erstellung unserer nächsten Seite zu beginnen, die die Produktseite sein wird. Gehen wir zur fertigen Version unseres Projekts und gehen wir zur Produktseite. Die Produktseite besteht aus verschiedenen Teilen. Wir werden hier die Kopfzeile haben, die zwei Überschriften enthält Dann haben wir hier diesen Teil, der zwei Seiten umfasst, links und rechts Auf der linken Seite haben wir einige Textelemente. Und mit der Schaltfläche auf der rechten Seite können Sie schöne und coole Bilder des Projekts sehen Dann haben wir hier einen Bereich , der so etwas wie ein Promo-Bereich ist. Wir haben hier einen schönen und coolen Horror-Effekt. Unten sehen Sie die Fußzeile, die wir auf den vorherigen Seiten I verwendet haben, auf der Startseite und der Kundenseite Das ist alles worum es geht. Die Produktseite, ich finde, sie sieht ziemlich nett und cool aus und ist auch modern. Es ist Zeit, mit dem Aufbau dieser Seite zu beginnen. Ich gehe zum VS-Code. Ich werde eine neue Seite erstellen, ich meine HTML-Datei, und ich werde sie Produkt-HTML nennen. Lassen Sie uns auch die CSS-Datei erstellen und sie Produkte SS nennen. Ich werde dann eigentlich zwei Dateien schließen, wir brauchen Kunden. Lass es uns öffnen. Ich werde den gesamten Inhalt kopieren und einfügen. Die Produkte der HTML-Datei, wir müssen diese Standard-HTML-Elemente hier beibehalten. Wir müssen nur den Namen der CS-Datei ändern. Es werden Produkte sein, die wir hier brauchen. Produkte. Als Nächstes verlasse ich hier die Navigation. Ich werde den Abschnitt mit den Testimonials löschen. Lassen Sie uns den Abschnitt mit den Testimonials löschen. Ich denke, das ist es. Die HTML-Datei ist fertig. Schauen wir uns die Produktseite an. Wie Sie sehen können, haben wir hier die Navigation und die Fußzeile Ich werde die Fußzeile für eine Weile verstecken. Um unseren Arbeitsprozess komfortabler zu gestalten. Wir haben verschiedene Möglichkeiten , die Elemente zu verstecken. In diesem Fall verwende ich das Attribut namens. Wie Sie sehen können, ist die Fußzeile ausgeblendet. Okay? Also, wie gesagt, wir werden anfangen, eine Produktseite zu erstellen. Und das erste, was wir tun müssen, ist, das HTML-Markup wie gewohnt vorzubereiten . Unsichere neue Kommentare für Produkte Dann öffne ich Abschnittselemente mit dem Klassennamen Produkte Als Nächstes brauchen wir Developments, das den Inhalt umhüllen wird Ich nenne es „ Products Wrapper“. Wie gesagt, die Produktseite wird drei verschiedene Teile enthalten Die erste wird die Kopfzeile sein, die wir hier benötigen, Produktkopfzeile. Sie wird zwei Überschriftenelemente enthalten. Das erste wird aus einem Überschriftenelement bestehen. Ich werde hier Themes und Plugins einfügen. Dann brauchen wir H drei Überschriftenelemente. Der Text wird mit den beliebtesten Themen und Plug-ins der Welt abgerechnet den beliebtesten Themen und Plug-ins der Welt abgerechnet Okay, lassen Sie uns über den Header sprechen. Als nächstes müssen wir den zweiten Teil erstellen. Ich nenne es Produktinhalte. Lassen Sie uns Entwicklungen mit dem Klassennamen „ Produktinhalt“ erstellen . Ich weiß nicht, ob es ein guter Name ist, aber ich werde ihn trotzdem nennen. Innerhalb des Produktinhalts. Wir werden zwei Seiten haben. Ich meine, die linke Seite und die rechte Seite. Wir brauchen Entwicklungen , bei denen der Produktinhalt übrig bleibt. Ich werde auch die rechte Seite erstellen. Wir brauchen Produktinhalte, oder? Okay, kümmern wir uns um die linke Seite. Auf der linken Seite werden wir H eine Überschrift haben , aus der der Text besteht. Dann werde ich hier einen Absatz mit etwas Loam Ipsum Dummy-Text einfügen Absatz mit etwas Loam Ipsum Dummy-Text Die Anzahl der Wörter wird 13 sein. Außerdem brauchen wir einen Knopf. Der Typ wird sein, wir brauchen hier das Typattribut und es wird ein Button sein. Ich werde mich an den Klassennamen halten. Die Klasse wird Produkte sein, PTN. Der Text des Buttons, ich werde genau hier, mehr über uns erfahren, befindet sich ungefähr auf der linken Seite Kümmern wir uns jetzt um die rechte Seite. Und die rechte Seite wird fünf verschiedene Bilder haben. Wir benötigen dein Image-Tag. Dann müssen wir den Pfad der Datei angeben. Zunächst müssen wir den aktuellen Ordner verlassen. Dann müssen wir den Bilderordner aufrufen. Und ich wähle Web Two, Bild eins. Lassen Sie uns diese Codezeile viermal duplizieren , weil wir fünf Bilder benötigen. Das zweite Bild wird Web Two sein, Bild zwei. Dann haben wir Web zwei, Bild drei. Als nächstes wird Web Five, Bild eins, und Web Five, Bild zwei, sein. Hier dreht sich alles um den Inhalt der Produkte. Wir haben hier gerade die Bilder, sie sind zu viel größer, aber wir werden uns darum kümmern. Als Nächstes werde ich den dritten Teil des Abschnitts erstellen. Der dritte Teil wird, wie gesagt, die Werbung für Produkte sein. Wir werden zwei Teile haben. Der erste Teil wird Formen sein. Diese Formen hier. Wir haben hier einen Kreis, zwei Kreise und das Rechteck, das ich hier einfügen werde . Entwicklungen und es Werbeformen für Produkte sein. Wir werden hier ein Rechteck haben, dann werde ich einen kleinen Kreis erstellen und dann brauchen wir einen großen Kreis. Danach werde ich eine weitere Entwicklung einfügen und es wird Werbeinhalt sein. Innerhalb des Werbeinhalts benötigen wir H ein Überschriftenelement. Der Text wird 100.000 sein. Wir brauchen hier mehr als 100.000 Kunden, die bereits tolle und moderne Websites mit Code und Create erstellen. Dann müssen wir uns der mächtigsten Community anschließen. Okay, das ist ungefähr das Überschriftenelement. Als Nächstes brauchen wir Batson. Der Typ wird Patson sein. den Text angeht, den wir hier brauchen, melden Sie sich noch heute an, aber ich werde den Absatz in den Text einmischen Wir bieten eine 30-tägige Geld-zurück-Garantie. Schließ dich uns an. Okay. Und zum Schluss füge ich deine Entwicklung ein. Es wird Promo Shadow sein. Wir werden diesen schönen und coolen Schatteneffekt erzeugen. Deshalb haben wir diese Entwicklung hier geschaffen. Okay, ich denke, das sind alle Elemente erstellt und das HTML-Markup ist fertig Jetzt müssen wir diese Elemente stylen. Und dafür fahren wir mit der nächsten Vorlesung fort. 53. Inhaltsabschnitt für Stylingprodukte: Ordnung, in der vorherigen Lektion haben wir das HTML-Markup für die Produktseite erstellt Jetzt ist es an der Zeit, diese Elemente zu stylen. Bevor wir mit der Gestaltung dieses Abschnitts beginnen , werde ich tatsächlich etwas in der HTML-Datei ändern. Ich habe hier fünf verschiedene Bilder hinzugefügt, aber eigentlich brauchen wir nur drei davon. Die ersten drei Bilder, es war mein Fehler, und das tut mir leid. Ich werde diese beiden Bilder löschen, weil wir sie nicht benötigen. Dann werde ich mich um das CSS kümmern, denn denken Sie daran, dass wir in der vorherigen Vorlesung eine neue CSS-Datei erstellt haben . Es heißt Produkt-CSS. Ich werde es öffnen, lassen Sie uns diese Datei auf die rechte Seite verschieben. Dann werde ich die CSS-Datei des Kunden schließen. Das erste, was ich tun werde, ist, Kommentare zu Produkten hinzuzufügen. Dann wähle ich das Abschnittselement aus. Es sind Produkte. Zuallererst werde ich innerhalb der Höhe definieren. Die Breite wird 100% betragen. Was die Höhe angeht, werde ich sie ebenfalls auf 100% festlegen. Außerdem werde ich oben im Abschnitt Platz schaffen, indem ich durch Marschieren von oben durch laufe Okay, also Breite und Höhe werden auf den Abschnitt angewendet. Und wir haben hier auch den Raum zwischen der Navigation und dem Abschnitt. Auch die Bildlaufleiste wird angezeigt. Wenn wir uns das fertige Projekt ansehen, werden Sie feststellen, dass wir hier eine Scrollleiste mit einer anderen Hintergrundfarbe haben . Ich werde es ändern. Gehen wir zurück zum VS-Code. Ich werde die Style-CSS-Datei öffnen. Wir müssen den gesamten Code korrigieren und hier einfügen. Dann lösche ich diesen Code. Wir brauchen ihn nicht. Außerdem müssen wir den Scrollbar-Track löschen. Als Nächstes ändern wir hier die Farben. Die erste Farbe wird 14b3 sein. Das ist für die zweite Farbe, die ich hier verwenden werde. 538 FT 538 Sie können sehen, dass sich die Hintergrundfarbe der Bildlaufleiste geändert hat Und es sieht ziemlich gut aus und passt zu den Farben dieser Seite. Als nächstes werde ich mich um die Verpackung der Produkte kümmern. Wählen wir dieses Element, die Breite und Höhe aus. Beide werden zu 100% sein. Dann werde ich Flexbox verwenden , um die Elemente auszurichten. Wir brauchen Display Flex. Dann ändere ich die Richtung , weil wir die Elemente vertikal ausrichten werden. Die Flex-Richtung muss der Spalte entsprechen. Außerdem werde ich die Elemente in der Mitte horizontal ausrichten . 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 die Kopfzeile der Produkte auswählen. Wir müssen den Text mithilfe von Text in der Mitte ausrichten. Mittig ausrichten. Der Text der Überschrift wird in der Mitte platziert. Als nächstes müssen wir uns um die Überschriften kümmern. Ich fange mit der ersten Überschrift an, die H eins ist. Wir benötigen den Produkt-Header gefolgt vom Hone-Header-Element. Zuallererst werde ich die Telefonfamilie definieren. Es wird sein, wir brauchen nicht, wir brauchen Telefonfamilie. Es wird Molly kursiv sein. Dann werde ich die Schriftgröße ändern. Die Schriftgröße wird sechs Runden betragen. Da wir einen Buchstabenabstand benötigen , um Platz zwischen den Buchstaben zu schaffen, wird er 0,2 Ram betragen. Und zum Schluss werde ich die Farbe der Überschrift ändern . Die Farbe wird 26353 sein. Okay, die erste Überschrift sieht ziemlich gut aus. Als nächstes müssen wir uns um die zweite Überschrift kümmern, die drei ist. Lass uns auswählen. Produktüberschrift, gefolgt von den drei Überschriftenelementen H. Zuallererst werde ich die Schriftgröße definieren. Es werden drei Ram sein. Dann brauchen wir Gewicht. Dann mache ich 300 draus. Ändere auch die Farbe. Die Farbe wird 567599 sein, dann erstellen Sie einen Rand. Ich bin im Raum, der Rand wird zwei Ram oben sein, dann Null auf der rechten Seite, dann 15 Ram unten, Null auf der linken Also hier haben wir den Header. Beide Überschriften sehen ziemlich gut aus und jetzt müssen wir uns um den Produktinhalt kümmern Ich meine, dieser Teil hier, wie gesagt, und wie Sie sehen, sind die Bilder größer Ich werde die Größe der Bilder ändern und dann werden wir den Rest der Elemente stylen. Ich werde Produkte und Inhalte auswählen. Genau dann benötigen wir Ihr Bild mit dem Nth Child Selector. Ich wähle das erste Bild aus. Wir müssen die Breite definieren. Es werden 35 Ram sein. Dann lassen Sie uns diesen Code zweimal duplizieren und die Anzahl der n-ten untergeordneten Selektoren ändern Wir benötigen 2.3. Das zweite Bild wird gleich 20 Ram haben Was das dritte Bild betrifft, so wird es 30 Ram sein. Jetzt werden die Bilder kleiner und wir können den Rest der Elemente stylen. Ich wähle den Wrapper, also den Produktinhalt Zuallererst werde ich innerhalb der Höhe definieren. Die Breite wird 80% betragen. Was die Höhe angeht, werde ich 90 Ram daraus machen. Um dieses Element sichtbar zu machen, müssen wir einen Boxschatten für den Wert 01 Ram, zehn Ram hinzufügen, und die Farbe wird der RGBA-Wert sein Der erste Wert ist 130, dann haben wir 162, dann brauchen wir 235 Und schließlich wird die Deckkraft 0,4 betragen . Nun, wie Sie sehen können das Element, ich meine den Produktinhalt, das Wrapper-Element sichtbar Als Nächstes werde ich die Polsterung aufkleben , um etwas Platz innerhalb des Elements zu schaffen Die Polsterung wird auf allen vier Seiten aus fünf Ram bestehen. Lassen Sie uns außerdem die Ecken des Elements mithilfe des Randradius abrunden Und der Wert wird ein Ram sein. Wir haben hier eine Polsterung und auch die Ecken drum herum. Als Nächstes werde ich die Elemente innerhalb des Produktinhalts mithilfe von CSS, Flax Box, ausrichten innerhalb des Produktinhalts mithilfe von CSS, Flax Box, Ich werde hier eine Display-Flagge hinzufügen und wir müssen die Artikel auch in der Mitte ausrichten Eigentlich haben wir hier ein kleines Problem. Dieser Teil sollte außerhalb des Produktinhalts platziert werden . Das könnte das Problem sein. Aus Versehen habe ich Prom-Inhalte in den Produktinhalt aufgenommen . Lassen Sie uns diesen Code herausschneiden und ihn außerhalb der Entwicklungen hinzufügen. Jetzt sollte das Problem behoben sein. Nun, wir haben hier das gleiche Problem. Lassen Sie uns den Inhalt der Produkte finden. Dies ist der Abschluss, das Tag des Produktinhalts. Daher müssen wir, wie gesagt, den Code des Chromoinhalts abrufen den Code des Chromoinhalts und ihn außerhalb des Produktinhalts einfügen Jetzt sollte das Problem mit Sicherheit behoben sein. Und ja, wie Sie sehen können, der Inhalt des Romo-Inhalts befindet sich der Inhalt des Romo-Inhalts außerhalb des Produktinhalts Sobald dieses Problem behoben ist, müssen wir die Elemente im Produktinhalt anpassen die Elemente im Produktinhalt Wir müssen mit dem verbleibenden Produktinhalt beginnen. Definieren wir, dass die Breite 40% des Produktinhalts ausmachen soll . Was die Höhe angeht, werde ich sie auf 100% einstellen , dann werde ich die Polsterung erstellen Ich meine etwas Platz innerhalb des Elements. Die Polsterung wird oben und unten 15 Gramm und links und rechts Null sein. Als Nächstes müssen wir die Elemente mithilfe der Flexbox ausrichten. Ich werde Display Flex verwenden. Dann müssen wir die Flex-Elemente vertikal in einer Spalte platzieren. Daher müssen wir die Richtung ändern , in der es sich um eine Spalte handeln soll. Außerdem werde ich Abstand zwischen den Flex-Elementen schaffen , indem ich den Inhaltsbereich gleichmäßig ausrichte. Dadurch wird ein gleichmäßiger Abstand zwischen den Flex-Elementen hinzugefügt. Wie Sie sehen können, sind die Elemente auf der linken Seite ausgerichtet. Als Nächstes müssen wir jedes der Elemente anpassen. Wir müssen mit der Überschrift beginnen. Ich werde H ein Überschriftenelement auswählen. Wir benötigen den verbleibenden Produktinhalt, gefolgt vom Element H mit einer Überschrift. Lassen Sie uns zunächst die Telefonfamilie ändern. Es wird Croissant One Co. sein . Dann müssen wir die Telefongröße ändern Es werden zehn RAM sein. Hier haben wir die Überschrift. Wenn ich mir das fertige Projekt und die Überschrift ansehe, werden Sie feststellen, dass die Überschrift einen linearen Verlaufseffekt hat. Wir haben hier blaue Farbe. Wie Sie sehen können, hat die Farbe einen linearen Verlaufseffekt. Gehen wir zum VS-Code und setzen wir den Hintergrund auf linearen Farbverlauf. Wir müssen die Richtung der Farbe ändern. Der Übergang wird zu zweit sein, oder? Dann wird die erste Farbe 35730 sein. Das ist für die zweite Farbe, es werden zwei bis 509 sein Außerdem werde ich 80% einhalten, um den Farbübergang zu ändern. Als Nächstes müssen wir die folgende Eigenschaft verwenden. Es heißt Web Kit-Hintergrundclip Es sollte auf Text eingestellt sein. Schließlich brauchen wir transparente Farben. Jetzt sollte die Überschrift einen linearen Verlaufseffekt haben . Wir haben hier. Ich denke, es unterscheidet sich vom fertigen Projekt. Lassen Sie uns die Farben überprüfen, die wir benötigen. 357.3 es sollte 730 und dann 22509 sein. Okay, jetzt haben wir hier genau die gleiche Hintergrundfarbe Ich meine, die linearen Infektionen , die wir im fertigen Projekt haben Okay, setzen wir uns über die Überschrift. Als Nächstes müssen wir uns um den Absatz kümmern, Produkte und den verbleibenden Inhalt auswählen, gefolgt von den Elementen. Lassen Sie uns zunächst die Telefonfamilie ändern. Ich werde dein Telefon namens Mull per benutzen, dann wird die Telefongröße 1,6 Ram sein Außerdem werde ich die Farbe des Textes ändern. Die Farbe wird 537983 sein. Dann werde ich den Abstand zwischen der Überschrift und dem Absatz mithilfe des oberen Randes verringern und dem Absatz mithilfe In diesem Fall benötigen wir einen negativen Wert minus fünf Ram. Wie Sie sehen können, ist der Absatz gekachelt. Eigentlich werde ich die Zeilenhöhe ändern, sie wird 2,5 Ram sein. Jetzt haben wir hier eine etwas bessere Tatsache. Okay, das war's mit dem Absatz. Als Nächstes werde ich mich um den unteren Teil kümmern. Gehen wir weiter und wählen Produkte, Inhalt links, gefolgt von den unteren Elementen. Die Breite der Unterseite wird 50% der linken Seite betragen. Die Höhe wird sechs Gramm betragen. Ich werde den Hintergrund ändern und einen linearen Farbverlauf verwenden. Der lineare Farbverlauf wird derselbe sein , den wir für die Überschrift verwendet haben. Ich werde den Wert kopieren. Wie Sie sehen können, haben wir hier den gleichen linearen Verlaufseffekt. Als nächstes müssen wir den Standardrand der Unterseite entfernen. Lassen Sie uns den Rand auf keinen setzen und die Ecken mithilfe des Randradius abrunden. Der Wert wird fünf Ram sein. Jetzt sieht der Knopf ziemlich gut aus, wir müssen uns um das Telefon kümmern. Lassen Sie uns die Telefongröße einstellen. Auf 1,6 Ram. Dann müssen wir Text in Großbuchstaben umwandeln. Lassen Sie uns die Farbe auf Weiß setzen, aber dann brauchen wir einen Buchstabenabstand Der Abstand zwischen den Buchstaben wird 0,2 Ram betragen. Und zum Schluss setzen wir uns näher an 0,0. Wie Sie sehen können, sieht die Schaltfläche ziemlich gut aus. Eigentlich sind wir mit der linken Seite fertig. Alles sieht ziemlich gut aus. Als nächstes müssen wir uns um die rechte Seite kümmern. Ich werde die rechte Seite auswählen. Ich meine Elemente mit dem Klassennamen Produktinhalt. Richtig, lassen Sie uns die Breite definieren. Es wird 60% der übergeordneten Elemente ausmachen. Dann wähle ich Bild aus. Lassen Sie uns diesen Selektor hier verwenden. Wir werden hier einige gängige Stile hinzufügen. Der erste wird Position sein. Ich werde die Position auf absolut setzen. Und dann brauchen wir die relative Position für die übergeordneten Elemente, ich meine den Inhalt des Produkts. Weil wir die Bilder entsprechend den Inhaltselementen der Produkte ausrichten werden. Ich werde hier die relative Position hinzufügen. Dann werde ich die Ecken der Bilder mit dem Randradius abrunden. Es wird ein Ram sein. Außerdem benötigen wir Box Shadow für alle Bilder mit den Werten 02 Ram, acht Ram, und die Farbe wird schwarz sein. Was die Opazität angeht, werde ich sie auf 0,5 setzen. Okay, hier haben wir die Bilder mit Boxschatten Als Nächstes müssen wir die Bilder dafür positionieren. Lassen Sie uns den einzelnen Bildern einige Stile hinzufügen. Ich füge hier die Höhe hinzu, sie wird 70 sein. Um die Qualität des Bildes beizubehalten und eine Verkleinerung zu vermeiden, verwende ich dann Verkleinerung zu vermeiden, Object Feet Cover Wir müssen hier abdecken und eindämmen. Okay, als Nächstes müssen wir uns um die Positionen kümmern. Die beiden Positionen werden bei 50% liegen, dann brauchen wir die richtige Position. Ich werde es auf 15% setzen. Als Nächstes müssen wir das Inhaltselement vertikal innerhalb des Produkts zentrieren. Dazu müssen wir die Funktion Transform mit Translate Y verwenden und der Wert wird -50% betragen. Wie Sie sehen können, ist das erste Bild ausgerichtet und vertikal in der Mitte der Elemente I platziert vertikal in der Mitte der Elemente I Als nächstes müssen wir uns um das zweite Bild kümmern . Ich werde hier hinzufügen. Position wird 20% für die richtige Position betragen, 30 bis 33%. Das zweite Bild ist ausgerichtet und jetzt müssen wir uns um das dritte Bild, die Position, kümmern . Eigentlich müssen wir nicht positionieren, wir brauchen die unterste Position. Die unterste Position wird 20% sein, dann brauchen wir richtige Position, 3%. Das war's. Die Bilder sind ausgerichtet und mit dem Inhaltselement des Produkts sind wir fertig. Als Nächstes müssen wir den Inhalt dafür übernehmen. Fahren wir mit der nächsten Vorlesung fort. 54. Styling-Produkte Promo-Bereich: In der vorherigen Vorlesung haben wir den ersten Teil der Produktseite gestaltet den ersten Teil der Produktseite Ich meine den Inhalt der Produkte. Jetzt müssen wir uns um den zweiten Teil kümmern, nämlich die Werbung für Produkte. Alle Elemente sind erstellt und vorbereitet und wir müssen sie noch einmal stylen. Schauen wir uns das fertige Projekt an. Wir werden diesen Abschnitt hier anpassen. Und wir müssen diesen schönen und coolen Hover-Effekt erzeugen. Okay, gehen wir zum VS-Code und wählen die Werbeaktion für Produkte aus. Ich werde Breite und Höhe definieren. Die Breite wird 100% betragen. Das ist für die Höhe. Es wird eine Höhe von 150 Viewports haben, ich meine eine Höhe von 50% der Ansicht Lass uns den Browser überprüfen. Wie Sie sehen können, wird die Höhe nicht auf das Werbeelement des Produkts angewendet. Möglicherweise haben wir einen Fehler in der HTML-Datei. Hier haben wir Produktwerbung. Werbung für Produkte sollte den Inhalt dieses Abschnitts enthalten . Lassen Sie uns das abschließende Tag überprüfen. Okay, wir haben hier ein paar Fehler. Wir müssen diesen Code von hier streichen, weil er nicht Teil des Produktinhalts ist. Fügen wir ihn hier ein. Außerdem müssen wir Werbeinhalte in die Produktwerbung aufnehmen . Wir müssen dieses Element hier einbeziehen. Jetzt denke ich und ich hoffe, dass alles korrekt ist und der Code hier funktionieren sollte. Wir haben eine Höhe, die 50% des Viewports entspricht Auch die Breite wird zu 100% angewendet. Okay. Danach werde ich mich um die Formen kümmern, diese drei Formen hier. Ich werde mit dem Romo-Rechteck beginnen. Lassen Sie uns weitermachen und diese Elemente auswählen. Zuallererst müssen wir die Breite und Höhe definieren. Beide werden 60 m lang sein. Dann werde ich die Hintergrundfarbe ändern. Eigentlich werde ich einen linearen Farbverlauf verwenden. Ich werde die Richtung des Farbübergangs definieren des Farbübergangs und sie auf 135 Grad einstellen. In diesem Fall wird die Richtung diagonal sein. Die erste Farbe wird 184b sein. Was die zweite Farbe angeht, werde ich sie transparent machen Und ich werde auch den Prozentwert definieren. Es werden 8% sein. Hier haben wir das Rechteck und den Hintergrund mit linearem Farbverlauf. Als Nächstes werde ich mich um die Position dieses Elements kümmern . Die Position wird absolut sein. Um dieses Element entsprechend den übergeordneten Elementen, also der Werbung für Produkte, zu positionieren dieses Element entsprechend den übergeordneten Elementen, also der Produkte, , verwende ich Position relativ. Als Nächstes definieren wir die Positionen links und oben. Ich werde mit der obersten Position beginnen. Es wird 25% sein, dann wird die linke Position 10% sein. Schauen wir im Browser nach. Wie Sie sehen können, befindet sich das Rechteck als nächstes. Ich werde es rund machen denn wenn wir uns das fertige Projekt ansehen, werden Sie feststellen, dass es abgerundet ist. Ich werde den Randradius mit dem Wert zehn Ram verwenden , da Sie die Ecken des Rechtecks um ihn herum sehen können. Als Nächstes werde ich dieses Element drehen. Dafür müssen wir die Funktion Rotate Z transformieren. Wir müssen das Element um den Wert, den ich einfügen werde, um 45 Grad drehen . Wie Sie sehen können, ist das Rechteck gedreht. Und schließlich werde ich die Opazität des Rechtecks verringern die Opazität des Rechtecks Machen wir 0,2 Okay, das ist es. Über das Promo-Rechteck. Als Nächstes werde ich dich aus dem Kreis holen. Ich meine den kleinen. Lassen Sie uns weitermachen und einen kleinen Kreis auswählen , den wir innerhalb der Höhe definieren. Die Breite wird Form sein. Was die Höhe angeht, werde ich sie auch formen lassen. Dann brauchen wir eine Hintergrundfarbe, die A D00 sein wird Dann müssen wir die Elemente mit einem Randradius mit einem Wert von 50% abrunden Randradius mit einem Wert von 50% Überprüfe den Browser. Hier haben wir den Kreis. Danach werde ich mich um die Position kümmern. Lassen Sie uns ihre Position auf absolut setzen. Dann müssen wir uns auf 20% positionieren . Was die richtige Position angeht, werde ich sie auf 40% setzen. Wie Sie sehen können, ist der Kreis positioniert. Und das Letzte, was ich tun werde, ist die Opazität leicht zu verringern Lassen Sie uns die Opazität auf 0,7 setzen Okay, mal sehen, an dem kleinen Kreis Als nächstes müssen wir uns um den großen Kreis kümmern. Lass uns weitermachen und tatsächlich werde ich diesen Code duplizieren, den Klassennamen ändern. Wir brauchen hier einen großen Kreis mit Höhe von 50 Ram. Dann müssen wir die Hintergrundfarbe ändern. Ich werde Farbe 34 DC verwenden, dann 87. Es ist eine grüne Farbe. Dann benötigen wir einen Grenzradius von 50% und eine absolute Position. Als Nächstes müssen wir eine Position setzen und sie wird 25% betragen . Was die richtige Position angeht, werde ich sie zu 12% sagen. Lassen Sie uns die Opazität loswerden Im Fall des großen Kreises brauchen wir es nicht. Okay, hier haben wir schon den großen grünen Kreis und alle Formen. Als nächstes müssen wir uns um den Promo-Inhalt kümmern. Ich meine dieses Element hier. Lassen Sie uns Werbeinhalte auswählen. Ich stelle die Breite auf 60% ein. Dann beträgt die Höhe 45 Gramm. Außerdem werde ich den Hintergrund mithilfe eines linearen Farbverlaufs ändern den Hintergrund mithilfe eines linearen Farbverlaufs Lassen Sie uns die lineare Gradientenfunktion verwenden. Definieren wir zunächst die Richtung des Farbübergangs. In diesem Fall werde ich zwei verwenden, oder? Dann wird die erste Farbe 184 PB sein. Was die zweite Farbe angeht, werde ich 13036 verwenden Hier haben wir den Promo-Inhalt. Ich werde es hier in der Mitte platzieren. Dafür müssen wir die Position ändern. Ich werde die Position auf absolut setzen. Um das Element dann perfekt zu zentrieren, benötigen wir dieselbe Technik. Wir müssen die Eigenschaften oben links verwenden und transformieren. Ich werde die obere Position auf 50% setzen , dann wird die linke Position auf 50% gesetzt. Außerdem müssen wir mit der Übersetzungsfunktion transformieren und die Werte werden -50% und wieder -50% betragen. In diesem Fall befindet sich das Element nun perfekt in der Mitte des Als Nächstes mache ich die Box leicht abgerundet. Dafür benötigen wir einen Grenzradius mit dem Wert 1,5 von. Ich werde etwas Platz in der Box schaffen, aber wir brauchen nur Platz auf der linken und rechten Seite. Wir müssen den Wert 0,5 Frame angeben. Okay, danach werde ich den Inhalt des Werbeinhalts anpassen , ich meine dieses Element. Um die Elemente auszurichten, verwende ich S Flex Box. Wir brauchen Display Flex. Dann werde ich die Richtung ändern , weil wir die Flex-Elemente vertikal platzieren werden. Deshalb müssen wir die Richtung ändern und es wird eine Spalte sein. Dann werde ich den Inhalt in beide Richtungen zentrieren. Ich bin horizontal und vertikal. Und dafür müssen wir ein Inhaltszentrum und auch ein Einzelpostenzentrum rechtfertigen . Schauen wir uns den Browser an. Wie Sie sehen können, befindet sich der Inhalt in der Mitte. Als Nächstes werde ich den Cursor-Datensatzzeiger so ändern , dass alles bereit ist. Als Nächstes müssen wir jedes Element hier im Promo-Inhalt anpassen . Ich fange mit der Überschrift an. Wählen wir den Inhalt der Werbeaktion aus, gefolgt vom Element H mit einer Überschrift. Ich werde die Telefonfamilie so einstellen, dass sie kursiv schreibt. Dann wird das Telefon vier Ram groß sein. Außerdem werde ich den Abstand zwischen den Buchstaben vergrößern . Sagen wir 2,2 Ram. Ich werde den Text groß schreiben. Daher müssen wir eine Texttransformation mit dem Wert Capitalize verwenden Texttransformation mit dem Wert Capitalize Ändern Sie abschließend die Farbe und machen Sie sie weiß. Die Überschrift ist angepasst, aber wie Sie sehen können, müssen wir den Text in der Mitte ausrichten. Dafür füge ich hier ein Textzentrum hinzu. Jetzt wird der Text in der Mitte platziert. In Ordnung, das ist alles über die Überschrift. Als Nächstes müssen wir den Knopf abnehmen. Lassen Sie uns fortfahren und Promo-Inhalte auswählen, gefolgt vom Button-Element. Lassen Sie uns zunächst innerhalb von Höhen definieren. Die Breite wird 25 Ram betragen. Dann brauchen wir Höhen, die sechs Ram sein werden. Dann ändern wir die Hintergrundfarbe. Ich werde 34 DC verwenden. Ich meine hier diese Farbe, die wir im Fall des großen Kreises verwendet haben. Okay, lass uns den Browser überprüfen. Also hier haben wir den Button, eigentlich brauchen wir etwas Abstand zwischen diesen drei Elementen. Ich werde diesen Raum mithilfe von Rand erstellen. Lassen Sie uns den Rand oben auf sieben Ram und dann auf Null auf der rechten Seite setzen . Fünf Frames unten und Null auf der linken Seite. Jetzt haben wir Platz. Als Nächstes müssen wir den Standardrahmen entfernen und den Button abrunden. Wir brauchen Border None, dann einen Randradius mit dem Wert Five Ram Button. Sieht nett aus, aber wir müssen uns um die Schrift kümmern. Lass uns die Schriftgröße ändern. Es werden zwei Ram sein. Dann müssen wir die Schriftstärke fett angeben. Außerdem werde ich Text in Großbuchstaben umwandeln, dann die Farbe ändern und ihn weiß machen. Schließlich brauchen wir etwas Abstand zwischen den Buchstaben. Stellen wir es auf 0,2 Ram ein. Und ändere auch das Cos, mach es zum Zeiger. Das war's, mit dem Knopf, er sieht ziemlich gut aus. Schließlich müssen wir uns um den Absatz kümmern. Lassen Sie uns also weitermachen und Werbeinhalte auswählen. Lassen Sie uns die Schriftgröße auf 2,5 Ram setzen. Dann wird das Telefongewicht 300 betragen. Außerdem muss die Farbe weiß sein. Dann werde ich den Text groß schreiben. Wir benötigen eine Texttransformation mit dem Wert, der großgeschrieben werden soll. Und schließlich schaffen Sie Platz zwischen den Buchstaben bei 32,1 RAM. Okay, der Absatz sieht auch ziemlich gut aus, und tatsächlich sind alle drei Elemente innerhalb des Promo-Inhalts angepasst Als Nächstes müssen wir den Schatten erstellen. Ich meine diesen Schatten hier. Wie Sie sich erinnern, haben wir ein leeres Element namens Promo-Schatten erstellt . Ich werde dieses Element auswählen. Wir brauchen Promo Shadow. Wir nehmen innerhalb der Häute, die Breite wird 90% betragen, dann werden die Häute zehn Ram sein Lassen Sie uns die Hintergrundfarbe ändern. Ich werde die Farbe 0525c verwenden. Hier haben wir den Schatten. Als nächstes müssen wir uns um seine Position kümmern. Lassen Sie uns die Position absolut setzen. Dann muss die untere Position bei -20% liegen . Die Position des Schattens wird geändert Als nächstes müssen wir es auf den Radius abrunden. Stellen wir es auf zehn Ram ein. Aber dann werde ich die Elemente mit der Funktion transform rotate x drehen. Und der Wert wird 20 Grad sein. Das Element ist leicht gedreht. Als nächstes müssen wir den Unschärfeeffekt erzeugen. Dazu müssen wir mit der Blar-Funktion filtern und der Wert wird drei RAM sein, das Element ist unscharf und jetzt müssen wir die Deckkraft leicht verringern Stellen wir die Deckkraft auf 2,7 ein. Okay, der Schatten Als Nächstes müssen wir die Drei-D-Umgebung erstellen. Und die Wirkung des Schattens wird viel cooler sein. Ich gehe zurück zum VS-Code. Um die Three-D-Umgebung zu erstellen, müssen wir eine Eigenschaft namens Perspective verwenden. Und ich werde es dem Wrapper hinzufügen, das ist eine Produktwerbung, die Perspective auf 50 Ram gesetzt Um diese Eigenschaft dann auf den Schatten anzuwenden, müssen wir dem übergeordneten Element des Promo-Schattenelements eine weitere Eigenschaft hinzufügen übergeordneten Element des Promo-Schattenelements In diesem Fall handelt es sich bei dem übergeordneten Objekt um den Werbeinhalt, und wir müssen hier den Transformationsstil hinzufügen. Der Wert bleibt erhalten, drei D. Nun, wie Sie sehen können, haben wir hier ein viel besseres und cooleres Ergebnis. Okay, jetzt ist es an der Zeit, den Hover-Effekt zu erzeugen. Beim Schweben Ich werde den Promo-Inhalt an den Benutzer übertragen. Dieser Effekt kommt dem Nutzer näher. Wir müssen das mithilfe der Transform-Eigenschaft tun. Zuallererst füge ich hier hinzu , Mauszeiger zum Inhalt von Romo Dann müssen wir uns transformieren. Wenn ich hier nur die Funktion translate Z verwende, dann überschreiben wir diesen Code hier. Wir müssen uns diese Funktion schnappen und sie hier hinzufügen. Und wir müssen hier die Funktion Translate Z mit dem Wert zehn hinzufügen . der Hoffect als Gast einwandfrei funktioniert, müssen wir diesen Effekt sanfter machen Dafür benötigen wir einen Übergang mit den Werten a und 0,5 Sekunde Jetzt haben wir nette und coole Who-Facts. Als Nächstes müssen wir den Hintergrund der Produktwerbung ändern . Außerdem müssen wir diese Formen ebenfalls verschieben. Um das zu tun, werde ich Java-Skript verwenden. Sie denken vielleicht, dass wir das mit CSS machen können. Aber sobald wir die Elemente ausgewählt haben, müssen wir den Stil des übergeordneten Elements, also der Produktwerbung , ändern . Das können wir nicht mit CSS machen. Deshalb werde ich Javascript verwenden. Lassen Sie uns tatsächlich eine neue Javascript-Datei im JS-Ordner erstellen . Ich werde es Produkte JS nennen. Dann müssen wir dieses Element mit der HTML-Datei verknüpfen. Lassen Sie uns diesen Code hier duplizieren und den Namen der Datei ändern. Es werden Produkte S sein . Ich werde diese Datei hierher verschieben. Zuallererst müssen wir zwei verschiedene Elemente auswählen. Der erste ist der Wrapper. Lassen Sie uns eine neue Variable erstellen und sie Produkte nennen. Ich werde dieses Element mithilfe der Abfrageselektor-Methode auswählen mithilfe der Abfrageselektor-Methode Lassen Sie uns hier den Klassennamen angeben. Lassen Sie uns diese Zeile duplizieren. Die zweite Variable wird der Werbeinhalt sein. Lass uns den Klassennamen ändern. Wir brauchen hier Werbeinhalte. Danach werde ich Promo-Inhalt einen Event-Listener hinzufügen Wir brauchen keine Punkte, wir brauchen Werbeinhalte. Eigentlich brauchen wir hier Inhalte. Wie gesagt, ich werde diese Elemente im Event-Listener hinzufügen und das Ereignis wird mit der Maus darüber bewegt Es ist dasselbe wie der Hover-Effekt. Als Nächstes müssen wir hier die ABC-Funktion übergeben, die ausgeführt wird, sobald wir den Mauszeiger über die Elemente bewegen, ich meine den Promo-Inhalt Ich werde dem Werbeelement für Produkte eine neue Klasse hinzufügen. Dann werden wir diese neue Klasse in der CSS-Datei verwenden und den neuen Stil definieren. Ich füge hier die Eigenschaft der Produktwerbeklasse hinzu und füge dann die Methode hinzu. Ich werde den Klassennamen animate nennen. Wir müssen die Produktwerbung auf Hover erweitern. Aber sobald wir die Maus verlassen, müssen wir diesen Klassennamen aus dem Werbeelement für Produkte entfernen aus dem Werbeelement für Produkte Deshalb werde ich diesen Code hier duplizieren. Bei Mouse-Out-Events müssen wir die Klasse Animate aus den Produkten entfernen, die mit der Werbung verkauft werden können Das war's mit dem Regierungsskript. Als Nächstes müssen wir zur CSS-Datei zurückkehren und nach Werbeprodukten suchen Ich werde dieses Element mit der Klasse Animate auswählen. Wir brauchen Animate, gefolgt von Pro-Product-Promo Wir müssen die Hintergrundfarbe ändern. Ich werde den RGBA-Wert verwenden und es wird zehn sein. 59, dann 156, und die Opazität wird 0,7 sein. Verwenden Sie auch den Übergang für weichere Effekte, wir benötigen hier alle 0,3 Sekunden Wenn ich mit der Maus über den Inhalt der Werbeaktion fahre, wird der Hintergrund geändert Alles funktioniert einwandfrei. Als nächstes müssen wir uns um die Formen kümmern. Ich werde Promo Rectangle auswählen. Bei der Animate-Klasse benötigen wir Animates, gefolgt vom Promo-Rechteck, wenn der Mauszeiger darüber bewegt Ich werde die Opazität der Elemente erhöhen. Sagen wir es 2.8 Außerdem müssen wir die Größe des Rechtecks mithilfe der Skalierungsfunktion erhöhen des Rechtecks mithilfe der Skalierungsfunktion Aber neben der Skalierungsfunktion müssen wir hier auch die Funktion „ Z drehen“ hinzufügen. Um zu vermeiden, dass der Code überschrieben wird, werde ich mir diesen Code von hier holen Fügen Sie hier auch die Skalierungsfunktion hinzu. Ich werde den Maßstab des Rechtecks erhöhen. Lass es uns 1.4 machen. Außerdem brauchen wir einen Übergang. Es werden nur 0,3 Sekunden dauern. Okay, lass uns den Mauszeiger über den Romo-Inhalt bewegen. Wie Sie sehen können, vergrößert sich der Maßstab des Rechtecks, wenn Sie den Mauszeiger darüber bewegen Und auch die Opazität des Elements nimmt zu. In Ordnung, lass uns zu den nächsten Formen übergehen. Ich meine, wir müssen uns um den kleinen Kreis kümmern. Wählen Sie es mit der Klasse Animate aus. Im Fall des kleinen Kreises werde ich die Deckkraft auf eins erhöhen Außerdem werde ich die Skala erhöhen. Machen wir es auch 1.4. Fügen wir hier eine Übergangsumfrage von 0,3 Sekunden hinzu. Wie Sie sehen können, haben wir auch mit dem kleinen Kreis einen schönen und coolen Effekt. Als nächstes müssen wir die dritte Form annehmen, das ist dieser große Kreis hier. Wählen wir einen großen Kreis mit der Klasse Animate aus. Im Fall des großen Kreises müssen wir nur den Maßstab vergrößern Lassen Sie uns es auf 1,4 setzen und auch Übergangsaufruf 0,3 Sekunden hinzufügen. In Ordnung, also sieht alles ziemlich gut aus. Alles, was wir tun müssen, ist dem Schatten auszuweichen. Wir müssen auch den Schatten beim Schweben ändern. Lass uns den Schatten finden und ihn dann auswählen. Klasse animate beim Hover aktiviert ist, werde ich die Höhe erhöhen Es werden 13 Ram sein. Ich werde die untere Position ändern. Sagen wir es zwei -15%, dann ändere ich, auch den Polareffekt brauchen wir hier, 2,5 Ram Lassen Sie uns abschließend die Opazität auf 0,9 ändern . Ich füge hier den Übergang p 0,3 Wenn ich mit der Maus über den Inhalt fahre, ändert sich der Schatten Eigentlich haben wir hier einen schönen und coolen Effekt. Okay, mit dem Promo-Bereich für Produkte sind wir fertig. Das einzige, was wir im Fall der Produktseite tun müssen , ist, hier die Fußzeile hinzuzufügen Ich meine den Fuß , den wir zur Kundenseite hinzufügen . Denken Sie daran, dass wir dazu nur die Fußzeile von hier kopieren und einfügen müssen hier kopieren und einfügen Habe hier eigentlich schon die Fußzeile. Wir mussten nicht kopieren und einfügen, wir müssen nur dieses Attribut von hier aus entfernen Ich habe nur vergessen, dass wir hier eine Fußzeile haben. Jetzt sollte alles gut funktionieren. Wir können sagen, dass wir mit der Produktseite fertig sind. Alles sieht gut aus und funktioniert gut. Okay, lassen Sie uns über die Produktseite sprechen. Als Nächstes müssen wir uns um die Kontaktseite kümmern. Fahren wir mit der nächsten Vorlesung fort. 55. Das HTML-Markup für die Kontaktseite erstellen: In der vorherigen Vorlesung haben wir die Arbeit an der Produktseite abgeschlossen Es sieht ziemlich nett und cool aus. Jetzt müssen wir weitermachen und um die nächste Seite kümmern, die Kontaktseite. Schauen wir uns das fertige Projekt an. Hier haben wir die Kontaktseite. Es besteht aus einer Kopfzeile , in der wir zwei verschiedene Überschriften haben Außerdem können Sie hier zwei verschiedene Teile sehen. Auf der linken Seite sehen Sie ein paar verschiedene Eingabefelder. Wir können das Support-Team kontaktieren. der rechten Seite finden Sie hier einen technischen Support Wir können mit dem Support chatten. Außerdem können Sie hier einige verschiedene Optionen sehen. Außerdem haben wir hier einen netten und coolen Kreis hinter dem Support-Team-Bereich. Okay, das ist ungefähr der Kontaktbereich. Gehen wir zum VS-Code und organisieren wir die Arbeitsdateien für eine neue Seite. Ich werde diese Dateien schließen. Dann werde ich eine neue Datei im HTML-Ordner erstellen. Es wird Kontakt-Html sein. Außerdem werde ich eine Kontaktdatei erstellen. Als Nächstes verschiebe ich diese Datei hierher auf die linke Seite. Kopieren wir dann den gesamten Inhalt der Produkt-HTM-Datei und fügen ihn hier Dann werde ich diese Datei schließen. Wir müssen den Namen der CSS-Datei ändern. Es wird Contact CSS heißen. Dann müssen wir den Produktbereich entfernen . Dieser Abschnitt hier. Lass uns ihn loswerden. Außerdem werde ich die Fußzeile für eine Weile verstecken und diesen Link von hier aus entfernen, damit alles fertig ist Gehen wir zur Kontaktseite. Hier haben wir die leere Seite mit nur der Navigation. In dieser Vorlesung werde ich das HTM Male Markup für den Kontaktbereich erstellen das HTM Male Markup für den Kontaktbereich Lassen Sie uns Ihre Kommentare für den Kontakt eintragen. Dann öffne ich Abschnittselemente mit dem Klassennamen contact innerhalb des Abschnittselements, das wir benötigen, nämlich Kontakt-Wrapper Es wird den gesamten Inhalt dieses Abschnitts umschließen. Als Nächstes füge ich hier das leere Feld Developments ein, das heißt Kontaktkreis, ich meine diesen Kreis hier. Danach müssen wir den Header erstellen. Also öffne ich das P-Tag mit dem Klassennamen Contact Header , in den ich zwei verschiedene Überschriften einfügen werde Das erste wird H sein, ein Überschriftenelement mit dem Textkontakt Was die zweite Überschrift betrifft, wird es sich um ein Element mit drei Überschriften von H handeln. Ich werde versichern. Wenn Sie Fragen haben, wenden Sie sich bitte an uns Das war's mit dem Header. Als Nächstes müssen wir das Element versichern, welches die Inhaltsseite des Kontakts sein wird Wir werden zwei Teile haben Formular-Wrapper und ich kontaktiere den Support-Wrapper Diese beiden Teile hier lassen uns Deep Tag öffnen , der als Kontaktformular-Wrapper dienen wird Ich werde das Google-Material-Symbol einfügen. Gehen wir zum Browser und suchen wir nach Google-Material-Symbolen. Ich werde nach einem Symbol namens Gruppe suchen. Hier haben wir es tatsächlich, ich werde abgerundet wählen. Lassen Sie uns das Span-Element von hier kopieren und hier einfügen. Ich werde überprüfen, ob das Symbol angezeigt wird. Wie Sie sehen können, haben wir hier ein Symbol. Okay, als Nächstes benötigen wir vier Überschriftenelemente und es wird Kontakt sein. Das Support-Team. werde ich in Ihren Absatz mit dem Text Wenn Sie Fragen haben, senden Sie uns eine E-Mail. Nach dem Absatz öffne ich die Formularelemente. Innerhalb der Formularelemente werden wir ein paar verschiedene Eingaben haben. Ich werde die Eingabe mit dem Typ Text öffnen, und wir benötigen hier auch ein Platzhalterattribut Geben Sie den Textnamen ein. Ich werde diesen Code zweimal duplizieren. Die nächste Eingabe ist für E-Mail, wir müssen den Typ und auch das Platzhalterattribut ändern , es wird die E-Mail-Adresse sein Was das dritte Eingabeelement angeht, werde ich hier springen und Text eingeben Was das Platzhalterattribut angeht, werde ich Ihren Betreff einfügen Nach der Eingabe der Elemente benötigen wir den Textbereich, er wird ein Platzhalterattribut haben, der Text wird Ihre Nachricht sein Dann brauchen wir hier endlich eine Schaltfläche mit dem Typ Button als Text der Schaltfläche Ich werde auf Ihrer Website eine Nachricht einreichen. Okay, das ist es. Über den Wrapper für das Kontaktformular. Als Nächstes werde ich den zweiten Teil erstellen , der als Kontakt-Support-Wrapper dienen wird Kontakt-Support-Wrapper Ich werde hier wieder das Google-Material-Symbol einfügen. Gehen wir auf die Website und suchen wir nach dem Symbol Construction. Nun, wir müssen uns dieses Symbol schnappen. Lass uns das kopieren. Panelmentlose, dieser Tab Fügen wir hier ein Panelment ein und überprüfen Sie dann den Browser und Hier haben wir das zweite Symbol nach dem Span-Element. Ich werde Ihre vier Überschriften mit dem Text Technischer Support einfügen . Dann haben wir hier einen Absatz mit dem Text. Wenn Sie Hilfe benötigen, können Sie direkt mit unserem Support-Team chatten. Danach werde ich Ihre Schaltfläche mit dem Typ Button einfügen . Ich werde hier den Klassennamen hinzufügen. Es wird Chat BTN sein. Was den Text angeht, werde ich Chat mit Support einfügen. Als Nächstes füge ich das p-Tag ein, das die Support-Liste sein wird. Ich werde hier ein paar verschiedene Muster einfügen. Lassen Sie uns das Button-Tag mit den Typen öffnen. Außerdem werde ich hier den Klassennamen hinzufügen. Es wird am wenigsten PTN unterstützen. Das erste PTN. Das erste Muster wird vorher als Community vier verschiedene Muster haben Also werde ich es dreimal duplizieren. Dann werde ich den Inhalt jedes Musters ändern. Der zweite ist Browse Documentation. Dann haben wir hier, treten Sie der Facebook-Gruppe bei. Endlich müssen wir hier, erkunden, den Block erkunden. Ich denke, das war's mit der Nullmarkierung unseres Kontaktbereichs Ich hoffe, dass alles korrekt ist. Wir werden sehen, dass wir alle Elemente hier haben, wenn wir anfangen, diesen Abschnitt zu gestalten. Sie sind vorbereitet und jetzt müssen wir diesen Abschnitt gestalten Lassen Sie uns dazu mit der nächsten Vorlesung fortfahren. 56. Styling-Kontaktabschnitt: In der vorherigen Lektion haben wir das HTML-Markup für den Kontaktbereich erstellt das HTML-Markup für den Kontaktbereich Wie gesagt, wir müssen diesen Abschnitt noch einmal stylen. Schauen wir uns das fertige Projekt an. So sieht die Kontaktseite aus. Wir haben hier eine Kopfzeile und zwei verschiedene Teile. Wir werden alle Elemente anpassen. Gehen wir zum VS-Code und fügen neue Kommentare in die CSS-Datei ein. Es wird Kontakt sein. Dann wähle ich Abschnittselement aus, das den Klassennamen Kontakt hat. Und ich definiere mit in der Höhe, die Breite wird 100% sein. Was die Höhe angeht, werde ich sie auf 150 Viewport-Höhe setzen Ich meine 50% des Viewports. Außerdem werde ich etwas Platz auf der oberen Seite schaffen , indem ich den Rand, obere 30 m, verwende . Wie Sie sehen können, werden diese Kacheln aufgetragen Eigentlich werden wir die Bildlaufleiste ändern. Wenn wir uns das fertige Projekt ansehen, werden Sie feststellen, dass wir hier eine blaue Scrollleiste haben. Ich werde den Code aus der Produktdatei kopieren. Wir brauchen diesen Code. Ich nehme ihn und füge ihn hier oben ein. Wie Sie jetzt sehen können, wurde die Bildlaufleiste geändert. Okay, als Nächstes werde ich mich um den Content Wrapper kümmern. Ich werde innerhalb von Höhen definieren, beide Werte werden 100% betragen. Außerdem werde ich den Inhalt mithilfe der Flachsbox ausrichten Wir brauchen Display-Flachs. Wir müssen die Richtung ändern, weil wir flexible Artikel vertikal ausrichten Die Richtung muss eine Spalte sein. Außerdem werde ich die Elemente in der Mitte ausrichten. Okay, wie Sie sehen können, ist der Inhalt des Kontaktbereichs aufeinander abgestimmt. Als Nächstes werde ich mich um den Kreis kümmern. Ich bin hier in diesem Kreis. Lass uns weitermachen und Kontaktkreis auswählen. Ich werde mit Höhen definieren. Gehen wir von 290 m aus. Dann wird die Höhe ebenfalls 90 Ram betragen. Wir machen dieses Element darum herum, also müssen wir den Radius mit einem Wert von 50% begrenzen. Als Nächstes werde ich den Hintergrund ändern. Ich werde einen linearen Farbverlauf verwenden. Zuallererst, wie definiert, die Richtung, es werden zwei sein, richtig? Was die Farben angeht, wird die erste Farbe 651f sein. Was die zweite Farbe angeht, werde ich sie transparent machen Und außerdem benötigen wir hier den transparenten Prozentwert 30%. Hier haben wir den Kreis mit einem linearen Verlaufseffekt. Ich werde die Position des Elements ändern. Lassen Sie uns die Position auf absolut setzen. Dann benötigen wir Position Relative oder das übergeordnete Element , also den Kontakt-Wrapper Wir werden das Element entsprechend dem übergeordneten Element entsprechend dem Kontakt-Wrapper positionieren übergeordneten Element entsprechend dem Kontakt-Wrapper Also brauchen wir hier eine relative Position. Als Nächstes definiere ich die untere Position, und sie wird 12% betragen. Was die linke Position betrifft, werde ich sie auf 20% setzen. Schließlich werde ich die Opazität des Kreises verringern Machen wir 0,2. Der Kreis ist gut positioniert. Als Nächstes werde ich mich um die Überschriften kümmern. Lassen Sie uns weitermachen und den Kontakt-Header auswählen. Ich werde den Text mithilfe von Text Align Center in der Mitte ausrichten. Wie Sie sehen können, wird der Text in der Mitte der beiden Überschriften platziert in der Mitte der beiden Überschriften Ich fange an, die erste Überschrift zu gestalten. Lassen Sie uns weitermachen und den Kontaktheader H one auswählen. Lass uns die Telefonfamilie ändern. Es wird Lee-Kursivschrift sein. Dann werde ich die Telefongröße definieren. Stellen wir es auf sechs Ram ein. Außerdem benötigen wir einen Buchstabenabstand. Ich mache einen Leerraum zwischen den Buchstaben 0,2 Ram und ändere auch die Farbe der Überschrift, sodass es 26353 sein wird Okay, wie Sie sehen können, sieht die erste Überschrift ziemlich gut aus Als nächstes müssen wir uns um die zweite Überschrift kümmern. Wählen wir den Kontaktheader gefolgt von den drei Überschriftenelementen H aus. Lassen Sie uns die Telefongröße erhöhen. Es werden drei Runden sein. Dann werde ich das Gewicht des Handys ändern. Stellen wir es auf 300 ein. Ich ändere die Farbe der Überschrift und sie wird 567599 sein Dann müssen wir an der Oberseite und auch an der Unterseite etwas Platz schaffen der Oberseite und auch an der Unterseite etwas Platz Ich werde Margin verwenden und es werden zwei Ram an der Oberseite sein. Die Null auf der rechten Seite, 15 Ram auf der Unterseite und dann Null auf der linken Seite. Okay, hier haben wir die zweite Überschrift. Beide sehen ziemlich gut aus. Als nächstes müssen wir uns um den Kontaktinhalt kümmern. Ich meine, dieser Teil hier. Lassen Sie uns weitermachen und Inhalt kontaktieren auswählen. Ich werde beide Teile des Kontaktinhalts horizontal nebeneinander platzieren . Und dafür werde ich Flex Book verwenden. Wie Sie sehen können, sind beide Seiten horizontal angeordnet. Als Nächstes wähle ich den ersten Teil , nämlich den Kontaktformularumbruch. Definieren wir innerhalb von Höhen. Die Breite wird 45 Ram betragen. Dann brauchen wir Höhe, es werden 78 Ram sein. Und dann werde ich die Hintergrundfarbe ändern. Es wird weiß sein. Um das Element deutlich sichtbar zu machen, definieren wir den Boxschatten. Wir benötigen 01 Ram, zehn Ram und die RGBA-Farbe Die Werte sind 130162, dann 235, und die Opazität wird 0,4 sein . Hier haben wir den ersten Teil, die linke Seite des Eigentlich muss der Kreis hinter diesen Elementen platziert werden. Dafür verwende ich eine Index-Eigenschaft. Lassen Sie uns den Index auf zehn setzen und dann den Browser überprüfen. Wie Sie jetzt sehen können, ist der Kreis hinter dem Element gelandet. Als Nächstes werde ich mithilfe von Polstern etwas Platz in der Box schaffen mithilfe von Polstern etwas Platz in der Box Die Polsterung wird an der Ober- und Unterseite aus vier und linken und rechten Seite aus zwei Ram-Polstern Ordnung, danach werde ich die Ecken der Box abrunden Dafür benötigen wir einen Grenzradius von einem Ram. Dann werde ich mit Margin Platz auf der linken und rechten Seite des Elements schaffen . Wir brauchen hier 0,3 Ram. Außerdem werde ich den Text in der Mitte ausrichten , der ungefähr auf dem Wrapper liegt Wie Sie sehen können, haben wir hier tatsächlich ein winziges Problem Die Navigation landet hinter diesem Element. Ich werde das Problem beheben. Lass uns den Stil öffnen. Lassen Sie uns die Datei ablegen und herausfinden die Navigationsleiste, die wir hier haben, die Index-Eigenschaft ist, und ich werde den Wert erhöhen. Lassen Sie uns den Wert auf 100 setzen. Jetzt haben wir hier das gleiche Problem. Lassen Sie uns den Index auf 1.000 setzen. Nun, das Problem ist behoben. Okay, lassen Sie uns weitermachen und den Kontext-Abschnitt weiter gestalten. Im Moment werde ich mich um das Symbol kümmern, das ein materielles Symbol von Google ist. Lassen Sie uns fortfahren und den Contact Form Wrapper auswählen, gefolgt vom Pan-Element Erhöhen Sie dann die Telefongröße. Es wird ein Gramm sein. Außerdem werde ich die Farbe des Symbols ändern, und ich werde 2842 sagen Wie ich sehen kann, sieht das Symbol ziemlich gut aus. Als nächstes müssen wir uns um die Überschrift kümmern. Wählen wir den Kontakt-Formular-Wrapper aus, gefolgt von den vier Überschriften. Ich stelle für die Telefonfamilie die Schreibschrift Mull Cursive setze dann die Telefongröße auf Dann brauchen wir das Telefongewicht, es wird 300 sein. Dann werde ich Text in Großbuchstaben umwandeln. Als Nächstes ändern wir die Farbe des Textes. Ich werde hier dieselbe Farbe verwenden, nehmen wir sie von hier. Und füge hier ein Pfundzeichen hinzu. Dann werde ich den Abstand zwischen den Buchstaben vergrößern. Stellen wir es auf 2.1 Ram ein. Schließlich werde ich mit Margin etwas Platz schaffen. Wir brauchen einen Rand, drei Ram an der Oberseite. Dann haben wir Null auf der rechten Seite, einen Ram auf der Unterseite und Null auf der linken Seite. Hier haben wir die Überschrift, sie sieht ziemlich gut aus. Als nächstes müssen wir uns hier um den Absatz kümmern . Ich werde den Kontaktformular-Wrapper auswählen. Lassen Sie uns zunächst die Größe definieren, es wird 1.8 Ram sein Dann werde ich die Farbe ändern. Dann machen wir 5646 draus. Ändern Sie die Schriftstärke Verlegen wir die Reihe oben, dann müssen wir an der unteren Seite marschieren Setzen wir es auf sieben, lassen Sie die Säge laufen , die sich über dem Absatz befindet Die Oberseite der Verpackung sieht ziemlich gut aus. Als nächstes müssen wir uns um das Formular kümmern, ich meine diese Eingabefelder Lassen Sie uns also weitermachen und Formular-Wrapper auswählen, gefolgt von den Formularelementen Ich werde Flex Box verwenden, um die Eingabefelder auszurichten, wir benötigen Display Flex Um dann die Eingabeelemente vertikal in einer Spalte zu platzieren , müssen wir die Richtung der Flexbox ändern und sie auf Spalte setzen. Wie Sie sehen können, sind die Eingabefelder vertikal in einer Spalte angeordnet. Als Nächstes werde ich sie anpassen. Ich setze auf Wrapper, gefolgt von der Eingabe t. Dann wählen wir auch den Textbereich Lassen Sie uns zunächst ein bisschen definieren. Es wird 100% sein Dann werde ich Leerzeichen I ändern, dann werde ich etwas Abstand zwischen den Eingaben schaffen. Lassen Sie uns den Spielraum auf zwei Ram setzen. Und dann Null, ändere die Hintergrundfarbe der Eingänge und setze sie auf 024 Lass uns den Browser überprüfen. Okay, als Nächstes werde ich den Platz in den Eingängen vergrößern. Dafür werde ich Pudding verwenden. Es wird auf allen Seiten ein Widder sein, außer auf der linken Seite Es werden zwei Ram sein, ich meine zwei Ram auf der linken Seite. Wie Sie sehen können, haben wir Platz in den Eingängen. Als Nächstes werde ich diesen Standardrahmen entfernen. Lassen Sie uns den Rand auf keinen setzen. Ich werde die Ecken etwas abgerundet machen, indem ich einen Randradius mit dem Wert 0,5 fram verwende Randradius mit dem Wert 0,5 fram Dann setzen wir die Schriftgröße auf 1,5 Fram und ändern auch die Schriftstärke Ich werde 300 draus machen, okay? Wie Sie sehen können, sehen die Eingabefelder ziemlich gut aus. Als Nächstes müssen wir die Höhe für Eingaben und für den Text Aa separat definieren , da wir für diese Elemente unterschiedliche Höhen benötigen. Wählen wir den Kontaktformular-Wrapper dann die Eingaben aus und setzen wir die Höhe auf fünf Dann werde ich diesen Code duplizieren und die Eingabe in Text Aa ändern Wir brauchen eine Körpergröße von zehn Ram. Außerdem werde ich hier eine weitere Immobilie hinzufügen. Es heißt Re Size und ich werde es zu keinem machen. Wir können die Größe des Textbereichs nicht mehr ändern. Okay, ich finde, diese Eingabefelder sehen ziemlich gut aus. Als Nächstes müssen wir uns um die Platzhalterattribute kümmern. Ich werde die Farbe des Platzhalterattributs für Eingaben und auch für den Textbereich ändern des Platzhalterattributs für Eingaben und auch für den Textbereich Ich werde mir diesen Selektor von hier aus holen. Dann vorbei, lass uns kopieren und einfügen. Ich werde hier eine Platzhalter-Pseudoklasse hinzufügen, ich meine Pseudoelement Dann füge ich hier eine Farbeigenschaft hinzu. Und die Farbe wird 0335 sein. Wie Sie sehen können, haben die Platzhalterattribute ihre Farben geändert und sie sehen ziemlich gut aus Als nächstes müssen wir uns um den Button kümmern. Lassen Sie uns weitermachen und Contact Form Wrapper auswählen, gefolgt vom Boson-Element Ich ändere die Höhe, es werden fünf Ram sein Dann werde ich den Hintergrund mithilfe eines linearen Farbverlaufs ändern . Die Richtung wird zwei Rechte haben. Dann müssen wir hier zwei verschiedene Farben einfügen. Der erste wird C40c sein. Was die zweite Farbe angeht, mache ich 85, genau genommen 852 A. Die Farbe Ich meine, die Hintergrundfarbe hat jetzt einen linearen Farbverlauf Ich werde den Standardrahmen entfernen, ihn auf „Nicht“ setzen und die Schaltfläche mithilfe des Rahmenradius abrunden. Es werden fünf Ram sein. Jetzt haben wir hier viel bessere Ergebnisse. Ich werde die Schrift ändern. Ich werde die Schriftart anpassen und nicht ändern, die Telefongröße auf 1,4 Ram einstellen. Dann wird das Gewicht des Telefons fett gedruckt sein. Als Nächstes werde ich den Text in „pro Fall“ umwandeln. Erhöhen Sie auch den Abstand zwischen den Buchstaben. Mach es 0,1 Ram. Ändere die Farbe, es wird weiß sein. Und schließlich benötigen wir einen Cursorpunkt, sich über dem ersten Teil des Kontaktinhalts befindet , da wir hier den zweiten Teil nehmen müssen. Lassen Sie uns weitermachen und den Kontakt-Support-Wrapper auswählen. Ich werde Breite und Höhe definieren. Die Breite wird es hier mit 45 Ram schwingen . Dann brauchen wir Größe, ich mache 67 Ram draus. Dann ändere die Hintergrundfarbe, mach sie weiß. Außerdem benötigen wir Box Shadow, um das Element sichtbar zu machen Der Boxschatten wird als Farbe 0110 Ram sein. Ich werde diese Farbe hier einfügen. Hier haben wir den zweiten Teil, den ich hier für den Radius hinzufügen werde, es wird ein Ram sein. Dann brauchen wir einen Rand auf der linken und rechten Seite, es werden drei Ram sein. Außerdem ist es ein Linientext in der Mitte. Okay, danach nehme ich hier das Symbol. Wählen wir den Kontakt-Support-Wrapper, gefolgt von diesem Panelelement, das wir hier benötigen, Telefongröße, es werden acht Ram sein Dann füge ich hier Farbe hinzu. Die Farbe wird 6797 FF sein. Eigentlich haben wir hier ein Problem, das wir hier brauchen. Wenden Sie sich an den Support-Wrapper. Jetzt ist das Problem behoben. Eigentlich glaube ich, dass uns hier etwas fehlt , weil wir hier keinen Platz haben. Wir brauchen Platz und wir mussten ihn mit Polsterung schaffen . Fehlt hier. Füllung mit den Werten vier Ram und dann zwei Ram. Jetzt sollte das Problem behoben sein. Ja, jetzt haben wir hier das gleiche Ergebnis. Ich werde mich um die Überschrift kümmern. Lassen Sie uns weitermachen und den Kontakt-Support-Wrapper auswählen , gefolgt vom Element H mit vier Überschriften Ich werde die Telefonfamilie so einstellen, dass sie kursiv schreibt. Dann wird das Telefon 1,6 mm groß sein. Ändern Sie die Telefongewichte, es wird 300 sein. Dann werde ich Text in Großbuchstaben umwandeln. Also lass uns die Farbe ändern. Ich werde 6797f draus machen. Schauen wir uns den Browser an, die Überschrift sieht gut aus Als Nächstes werde ich den Abstand zwischen den Buchstaben vergrößern . Lass uns 0,1 Ram draus machen. Außerdem benötigen wir Platz unter Verwendung von Rand. Der Rand wird drei Ram an der Oberseite sein, Null auf der rechten Seite, ein Ram an der Unterseite und dann Null auf der linken Seite. Okay, die Überschrift sieht ziemlich gut aus. Als Nächstes müssen wir den Absatz hier herausnehmen. Lassen Sie uns fortfahren und den Support-Wrapper kontaktieren, gefolgt von dem Element auswählen Support-Wrapper kontaktieren, gefolgt von dem Element Die Schriftgröße wird 1,8 Ram betragen. Dann haben wir hier die Schriftstärke. Es werden 300 sein. Wenden wir uns der Farbe zu. Ich mache 56460 draus. Dann brauchen wir einen Rand an der Unterseite. Stellen wir es auf vier Ram ein. Das ist ungefähr der Absatz. Als nächstes müssen wir uns um die Hütte BTN kümmern. Ich meine diesen Button hier. Lass uns weitermachen und einfach BTN auswählen. Ich werde die Breite auf 100% setzen, dann wird die Höhe fünf sein Ich werde den Hintergrund ändern. Lassen Sie uns wieder lineare Farbverläufe verwenden. Die Richtung wird zwei Rechte für die Farben sein. Ich werde 651f verwenden. Die zweite Farbe wird 48 FF sein. Schauen wir uns den Boden hier an. Wir haben den Boden. Ich werde den Standardrahmen loswerden. Außerdem benötigen wir hier einen Grenzradius mit einem Wert von fünf M. Schauen wir uns den unteren Rand an. Es sieht ziemlich gut aus. Nehmen wir hier die Punkte. Ich werde die Telefongröße auf 1,4 m einstellen . Dann wird es fett gedruckt Außerdem mache ich es pro Groß-/Kleinschreibung, dann vergrößere ich den Abstand zwischen den Buchstaben Stellen wir es auf 2.1 Ram ein. Ändere die Farbe, mach sie weiß. Wie Sie sehen können, sieht die Unterseite ziemlich gut aus. Das einzige, was ich tun muss , ist den Platz unten zu vergrößern. Und wir müssen auch den Cursorzeiger machen. Lassen Sie uns also den unteren Rand auf fünf Ram setzen. Und dann der Cursorzeiger. Ups. Okay. Eigentlich ja, Cursor. Nun, wir haben hier ein kleines Problem. Ich denke, dass wir die Z-Index-Eigenschaft auch für diesen Teil benötigen , weil ich vermute, dass der Kreis diesen Teil überlappt Ich werde hier hinzufügen, nicht hier, sondern hier. Index mit dem Wert zehn. Lassen Sie uns jetzt nachschauen. Wie Sie sehen können, ist das Problem behoben. Ordnung, als Nächstes müssen wir uns hier um diese Muster kümmern, wir werden sie so stylen. Lassen Sie uns weitermachen und den Wrapper auswählen , der eine Liste zur Unterstützung von Klassennamen hat Ich werde Display Flex verwenden, weil wir diese Schaltflächen mit Flexbox ausrichten Ich werde sie vertikal in der Spalte ausrichten. Die Flex-Richtung muss der Spalte entsprechen. In Ordnung, jetzt werden wir sie anpassen. Lassen Sie uns fortfahren und die Support-Liste auswählen, gefolgt vom Button-Element. Stellen wir die Höhe ein, machen wir 4,5 RAM daraus. Außerdem benötigen wir Platz zwischen diesen Tasten. Wir brauchen einen Rand von einem RAM oben und unten und Null auf der linken und rechten Seite . Ändern Sie auch die Hintergrundfarbe. Verwenden Sie hier die Farbe F245. Schauen wir uns als Nächstes die Ergebnisse an. Ich werde den Standardrahmen loswerden. Lassen Sie uns den Rand auf keinen setzen. Wir benötigen den Grenzradius, um die Ecken abzurunden. Der Grenzradius wird vier Ram betragen. Dann kümmere ich mich um die Telefone. Stellen wir die Telefongröße auf 1,4 Ram ein. Ich werde Text in Großbuchstaben umwandeln. Dann wird die Farbe vier A sein, nicht ein, sondern acht A. F. Dann brauchen wir Let Spacing, setzen wir es auf 2,1 Ram. Und schließlich brauchen wir den Courser-Pointer, okay? Wie Sie sehen können, sieht alles ziemlich gut aus. Und eigentlich sind wir mit dieser Seite fast fertig. Das einzige , was wir tun müssen, ist hier die Fußzeile hinzuzufügen Dafür müssen wir nur die Attribute entfernen, die wir hier hinzugefügt haben Ich meine, das Attribut hier, lass es uns entfernen. Hier haben wir eigentlich die Fußzeile mit der Kontaktseite. Wir sind fertig. Als Nächstes müssen wir die nächste Seite unseres Projekts erstellen. Es ist eine Kontoseite. Lassen Sie uns dazu mit der nächsten Vorlesung fortfahren. 57. Das HTML-Markup für die Kontoseite erstellen: In der vorherigen Vorlesung haben wir die Arbeit an der Kontaktseite abgeschlossen Wie Sie sehen können, sieht es ziemlich gut aus. Und jetzt müssen wir mit der nächsten Seite weitermachen , der Kontoseite. Schauen wir uns das fertige Projekt an. Hier haben wir die Kontoseite. Wie Sie sehen können, besteht sie aus einer Kopfzeile und wir haben hier die Eingabefelder. Ich meine das Formular mit dem Symbol und auch mit der Schaltfläche Senden. Unten siehst du einen weiteren Boden. Wir können hier den Kreis sehen, schönen und coolen Hintergrund des Formulars darstellt. Unten sehen Sie die Standardfußzeile. Okay, das war's also mit der Kontoseite. Gehen wir zum VS-Code und ich werde die Arbeitsdateien organisieren. Wir müssen eine neue HTML-Datei im HTML-Ordner erstellen , Konto HTML. Dann werde ich eine neue CSS-Datei im CSS-Ordner erstellen. Gehen wir zur Kontakt-HTML-Datei und kopieren den gesamten Code. Ich werde es hier einfügen. Lassen Sie uns diese Datei schließen. Ich werde hier einige Änderungen vornehmen. Wir müssen den Namen der CSS-Datei ändern, es werden Konten sein. Außerdem werde ich den Kontaktbereich loswerden, also müssen wir die Fußzeile verstecken Lass es uns verstecken. Okay, ich glaube, ich werde diese Datei auf die rechte Seite verschieben. Lassen Sie uns überprüfen, ob der Browser zur Kontoseite wechselt. Hier haben wir die Kontoseite, die momentan leer ist. Wir haben hier nur die Navigation. Ich werde das HTML-Markup erstellen. Lassen Sie uns Ihre neuen Kommentare zur Rechnung einfügen. Ich werde das Abschnitts-Tag mit einem Klassennamen-Konto öffnen. Als Nächstes brauchen wir Entwicklungen, nämlich Account-Wrapper Also das Erste, was ich hier einfügen werde, ist Account Circle Ich bin im Hintergrund des Formulars. Als Nächstes füge ich Ihren Header ein. Es wird aus zwei Überschriftenelementen bestehen. Das erste wird H eine Überschrift mit dem Textelement Leerzeichen sein. Was die zweite Überschrift angeht, meine ich die drei H-Überschriftenelemente, wir hier benötigen, um Ihr Konto zu verwalten, Produkte herunterzuladen und mit uns zu chatten. Außerdem benötigen wir hier 2047 , die etwa im Account-Header sitzen Als Nächstes öffne ich ein weiteres tiefes Element mit dem Klassennamen Account Form Wrapper Das erste, was ich hier einfügen werde, sind Span-Elemente, ich meine das Google-Material-Symbol Gehen wir zum Browser und besuchen dann die Website. Ich werde nach dem Symbol mit dem Namen Person Check suchen. Eigentlich ist das das Symbol. Ich wähle abgerundet. Dann nimm das Span-Element und füge es hier ein. Ich werde den Browser überprüfen. Wenn das Symbol angezeigt wird, haben wir hier das Symbol. Als Nächstes füge ich hier vier Elemente hinzu , in denen wir den Klassennamen haben werden. Kontoeingaben. Ich werde Ihr Eingabe-Tag mit dem Typ Text und mit dem Platzhalterattribut einfügen , es wird Nutzername sein Dann benötigen wir eine weitere Eingabe für das Passwort. Ich werde den Typ ändern, es wird Passwort sein. Außerdem müssen wir das Platzhalterattribut ändern. Ich werde dein Passwort eingeben. Danach werde ich ein weiteres Deep-Tag öffnen und es wird eine Kontoüberprüfung durchgeführt. Also werde ich hier ein Eingabe-Tag mit dem Typ-Kontrollkästchen einfügen . Außerdem werde ich hier das ID-Attribut hinzufügen. Es wird eine Kontoüberprüfung sein. Als Nächstes benötigen wir ein Label innerhalb von vier Attributen. Ich werde den gleichen Wert einfügen, ich meine, den Wert, den wir für das ID-Attribut verwendet haben , überprüfen . Lass uns hier einfügen, erinnere dich hier an mich. Dieselben Werte für ID und vier Attribute, denn sobald wir auf das Label klicken, sollte die Eingabe überprüft werden. Deshalb haben wir hier dieselben Werte verwendet. Als Nächstes werde ich die Schaltfläche mit dem Typ Button als Text vermischen. Ich werde beim Einloggen stören. Dann gehe ich nach dem Button in den Absatz mit dem Text Ich habe deinen vergessen. Dann müssen wir das Span-Element, den Benutzernamen oder erneut Spin Passport öffnen . Wir haben diese Wörter mit Span-Elementen umhüllt , weil sie Links sein werden. Ich werde hier ein Fragezeichen hinzufügen. Okay, das war's mit den Formularelementen. Als Nächstes müssen wir nach dieser Entwicklung eine weitere Schaltfläche hinzufügen . Das ist die Schaltfläche „Öffnen“ mit den Typen. Außerdem werde ich hier den Klassennamen hinzufügen. Nennen wir es PTN , weil es außerhalb des Formulars stehen sollte . Der Text Ich werde noch kein Mitglied vorstellen. Treten Sie heute bei. Okay, ich denke, das war's mit dem HTML-Markup. Alles ist bereit. Lass uns den Browser überprüfen. Wir haben hier alle Elemente für die Kontoseite. Als Nächstes müssen wir diese Elemente dafür anpassen. Fahren wir mit der nächsten Vorlesung fort. 58. Abschnitt für Styling-Konto: In der vorherigen Lektion haben wir das HTML-Markup für die Kontoseite erstellt Jetzt wird vermutet, dass wir diese Elemente formatieren müssen. Ich werde Ihnen noch einmal die fertige Version unseres Projekts zeigen die fertige Version unseres Projekts Hier haben wir die Kontoseite. Es besteht aus einer Kopfzeile und dann haben wir ein Formular mit diesem kreisförmigen Hintergrund und unten können Sie die Fußzeile sehen Gehen wir zum VS-Code und fügen hier neue Kommentare für das Konto ein Dann wähle ich Abschnittselement mit einem Klassennamenkonto aus. Zuallererst, wie mit und Höhe definiert, wird die Breite 100% betragen. Was die Höhe angeht, werde ich sie 120 machen. Höhe des Viewports. Außerdem benötigen wir oben Platz, indem wir den Rand verwenden Top 30, okay? Die Breite und Höhe werden auf das Element angewendet. Eigentlich kannst du hier die Scrollleiste sehen. Wenn wir uns das fertige Projekt ansehen, werden Sie sehen, dass wir hier eine blaue Scrollleiste haben . Lass es uns ändern Ich gehe zur Kontakt-CSS-Datei und hole mir diesen Code von hier, der Kontaktseite. Wir haben eine blaue Scrollleiste. Ich werde diesen Code kopieren und hier einfügen. Okay? Wie Sie sehen können, hat die Bildlaufleiste ihre Hintergrundfarbe geändert. Als Nächstes wähle ich Account Wrapper aus. Wir müssen innerhalb der Höhe definieren. Lassen Sie uns beide auf 100% setzen . Außerdem werde ich Flex Box verwenden, um die Elemente auszurichten. Wir brauchen Display-Flex. Dann müssen wir die Richtung ändern, weil wir zwei vertikale Linienelemente haben. Wir benötigen also eine Spalte mit flexibler Richtung und dann einen Zeilenmittelpunkt. Okay, jetzt kümmere ich mich um den Kreis. Ich meine diesen Kreis hier. Gehen wir zurück zum VS-Code und wählen einen Zählkreis aus. Definieren wir innerhalb von Höhen. Die Breite wird 70 sein. Was die Höhe angeht, werde ich es auch 70 m schaffen. Dann lass uns den Hintergrund ändern. Ich werde einen linearen Farbverlauf verwenden. Die Richtung wird zwei nach links sein. Was die Farben betrifft, so wird die erste Farbe 651f sein. Was die zweite Farbe angeht, werde ich sie transparent machen Hier haben wir das Element, das momentan kein Kreis ist. Wir müssen den Grenzradius auf 50% setzen . Jetzt hat das Element die Form eines Kreises. Als Nächstes werde ich mich um seine Position kümmern. Wir brauchen Position Absolute. Dann füge ich hier die relative Position hinzu. Weil wir das Element entsprechend seinem übergeordneten Element positionieren werden. In unserem Fall ist das übergeordnete Element ein Count-Wrapper. Die untere Position wird 20% betragen. Was die linke Position angeht, werde ich sie auf 33% setzen. Schließlich verringern wir die Deckkraft 0,2. Hier haben wir den Kreis Als Nächstes werde ich mich um den Header kümmern. Tatsächlich wird der Header dem Kopf der vorherigen Seite ähneln, ich meine der Kontaktseite. Um zu vermeiden, denselben Code zu schreiben, öffne ich Kontakt-CSS-Datei und hole mir den Code der Kopfzeile. Lass es uns hier einfügen. Und ändere die Klassennamen. Wir benötigen dein Konto. Lass uns den Browser überprüfen. Wie Sie sehen können, sieht der Header ziemlich gut aus. beiden Überschriften werde ich nur den Rand unten verringern Stellen wir es auf 12 Ram ein. Okay, das war's, mit dem Header. Als Nächstes werde ich mich um das Formular kümmern. Lassen Sie uns den Wrapper auswählen. Ich meine, zuerst einen Zählform-Wrapper , definiere seine Breite Es wird 50 Gramm sein. Dann brauchen wir Größe. Ich werde es auch auf 50 Ram setzen. Dann werde ich die Hintergrundfarbe auf Weiß setzen , damit dieser Almon deutlich sichtbar ist Ich werde Box Shadow auf 01 Ram setzen. Acht Ram. Was die Farbe angeht, die ich verwenden werde, brauchen wir hier Null, dann einen Ram. Und der RGBA-Wert 130-16-2235 und die Opazität 0,3 Hier haben wir gerade den Wrapper, er ist hinter dem und die Opazität 0,3 Hier haben wir gerade den Wrapper, er ist hinter dem Kreis gelandet. Ich werde das mit der Z-Index-Eigenschaft beheben. Setzen wir es auf zehn. Jetzt ist das Problem behoben. Als Nächstes werde ich die Ecken der Hülle abrunden Lassen Sie uns den Grenzradius auf einen Ram setzen. Ich werde die Elemente innerhalb des Wrappers mithilfe der Flexbox ausrichten Elemente innerhalb des Wrappers mithilfe der Flexbox Wir brauchen Display-Flachs. Um die Elemente dann vertikal auszurichten, stelle ich die Flex-Richtung auf die Spalte ein Außerdem benötigen wir ein Einzelpostenzentrum. Okay, die Elemente sind ausgerichtet. Als Nächstes werde ich mich um das Spin-Element I im Symbol kümmern . Lassen Sie uns also weitermachen und Konto aus dem Wrapper auswählen , gefolgt von den Pan-Elementen Wenn wir uns den HTML-Code ansehen, werden Sie tatsächlich feststellen, dass wir hier ein paar verschiedene Span-Elemente haben Wir müssen hier dieses Span-Element auswählen, nur dieses. Deshalb werde ich einen der CSS-Kombinatoren verwenden. In diesem Fall wählen wir nur dieses Span-Element aus. Ich werde die Höhe auf neun Ram einstellen. Dann ändern wir die Hintergrundfarbe. Es wird FC8f sein. Dann werde ich die Elemente abrunden, das Epod, den Radius 50%. Danach platziere ich das Symbol in der Mitte des Kreises Dafür werde ich Flex Box verwenden. Wir benötigen Flachs zur Ausstellung, Inhaltszentrum für Rechtfertigungen und ein Einzelpostenzentrum Wie Sie sehen können, befindet sich das Symbol in der Mitte des Kreises Als Nächstes werde ich die Telefongröße erhöhen. Lass uns 26 einstellen. Ich werde die Farbe ändern. Lassen Sie uns die Farbe auf 3776 setzen. Jetzt brauchen wir Platz am unteren Rand, aber ich glaube, dass wir den Jahresabstand verpasst haben. Ich meine, in der Verpackung, weil wir keinen Platz in der Hülle haben, sollten wir die Polsterung auf drei Ram an der Ober- und Unterseite und zwei Ram auf der linken und rechten Seite einstellen der Ober- und Unterseite und zwei Ram auf der linken und zwei Ram auf der linken Okay, jetzt haben wir Platz im Wrapper und ich füge hier Marching Bottom hinzu, um Platz am unteren Rand des Icons zu schaffen Stellen wir es auf drei m ein. Okay, das war's mit dem Symbol Als nächstes müssen wir uns um die Eingabeelemente kümmern. Ich werde Wrapper-Con-Eingaben auswählen. Ich werde Flexbox benutzen. Wir benötigen Display-Flex und dann Flex-Richtungsspalte , weil wir die Eingaben vertikal ausrichten werden. Stellen wir die Flex-Richtung auf die Spalte ein. Wie Sie jetzt sehen können, sind die Eingaben vertikal angeordnet. Als Nächstes werde ich sie anpassen. Lassen Sie uns also weitermachen und Kontoeingaben gefolgt vom Eingabeelement auswählen . Ich werde die Breite auf 40 Ram setzen, dann wird die Höhe auf fünf Ram gesetzt. Ich werde die Hintergrundfarbe ändern. Lassen Sie uns die Hintergrundfarbe auf F setzen, Null bis Vier. Als Nächstes benötigen wir etwas Abstand zwischen den Eingaben, also setze ich den Rand, um den unteren Rand tatsächlich auf drei Ram zu setzen . Dann werde ich die Fehlergrenze loswerden, sagen wir, zu keiner Grenze . Und machen Sie die Eingabe außerdem mit einem Randradius von 0,5 Ram abgerundet . Jetzt sehen die Eingaben ziemlich gut aus. Als Nächstes müssen wir mithilfe von Padding etwas Platz innerhalb der Eingaben schaffen mithilfe von Padding etwas Platz innerhalb der Eingaben Ich werde die Polsterung auf 0,5 Ram an der Ober - und Unterseite und einen Ram auf der linken und rechten Seite einstellen 0,5 Ram an der Ober - und Unterseite und einen Ram auf der linken und rechten Als Nächstes müssen wir die Schriftgröße ändern, die ich habe. Stellen Sie die Telefongröße auf 1,6 RAM ein und ändern Sie auch die Farbe. Es wird 444 sein, was eine graue, dunkelgraue Farbe ist. Okay, das ist also über die Eingänge. Als Nächstes müssen wir hier den Platzhalter nehmen. Ich werde Kontoeingaben auswählen. Dann benötigen wir ein Eingabeelement, gefolgt von der Platzhalter-Pseudoklasse Ich meine Pseudoelement. Die Farbe wird 888 sein. Okay, danach werde ich mich um das Kontrollkästchen kümmern. Lassen Sie uns weitermachen und einen Zählscheck auswählen. Es ist eine Wrapper-Entwicklung. Ich werde Marge definieren. Ich werde das Element leicht nach oben verschieben. Ich werde den Rand auf der oberen Seite setzen, minus zwei Ram. Dann brauchen wir Null auf der rechten Seite, drei Ram unten und Null auf der linken Seite. Ordnung, danach werde ich den Cursor in Zeiger ändern Wählen Sie Kontoprüfung gefolgt vom Eingabeelement und setzen Sie den Mauszeiger auf Zeiger Jetzt haben wir hier einen Zeiger. Danach werde ich mich um das Etikett kümmern. Lassen Sie uns weitermachen und Kontocheck auswählen, gefolgt vom Etikett. Ich werde das Telefon vergrößern. Stellen wir es auf 1,6 ein, dann beträgt das Gewicht des Telefons 300. Ich werde die Farbe ändern. Stellen wir es auf 777 ein. Und ändere auch den Courser-Zeiger. Okay, das war's mit der Checkbox. Als nächstes müssen wir uns um den Button kümmern. Ich wähle den Account-Formular-Wrapper aus, gefolgt vom Button-Element Ich werde die Breite auf 100% setzen, dann beträgt die Höhe fünf Ram Als Nächstes werde ich die Hintergrundfarbe ändern. Die Farbe wird 3776 sein. Dann werde ich die Fehlergrenze loswerden. Lassen Sie uns dafür sorgen, dass der Grenzradius nicht verändert wird. Machen wir den Knopf rund. Ich stelle es auf vier ein. Hier haben wir den Button , der gut aussieht, aber wir müssen uns um die Schrift kümmern. Lassen Sie uns weitermachen und die Schriftgröße auf 1,5 Ram einstellen. Dann muss die Schrift fett sein, da ich Text in Großbuchstaben umwandeln werde. Dann brauchen wir Farbe, es wird weiß sein. Als Nächstes setze ich den Buchstabenabstand auf 0,1 Ram. Und lassen Sie uns auch den Cursor ändern und ihn zum Zeiger machen. In Ordnung, der Button sieht ziemlich gut aus. Alles, was ich tun muss, ist etwas Platz zu schaffen. Ich werde den Rand auf 1,5 Fram an der Oberseite setzen und brauche hier dann 1,5 Fram an der Ober- und Unterseite Eigentlich werde ich dann auf der linken und rechten Seite Null setzen auf der linken und rechten Seite Null In Ordnung, das war's mit dem Button. Lass uns weitermachen und uns um den Absatz kümmern. Ich wähle Act Form Wrapper, gefolgt vom Element Ich werde das Telefon vergrößern. Es wird 1,8 Ram sein. Dann werden wir hier die Textzeile in der Mitte haben. Wir müssen den Text zentrieren. Und ich werde auch das Gewicht des Telefons ändern. Sagen wir es auf 300. Okay. Der Absatz sieht nett aus. Wie Sie sich erinnern, haben wir zwei Span-Elemente innerhalb des Absatzes. Ich bin dabei, der Benutzername und das Passwort. Ich werde es anpassen. Dann wählen wir Account Foam Wrapper gefolgt von den Elementen Und dann brauchen wir Span. Ich werde die Farbe ändern. Es wird 2371 sein. Dann brauchen wir ein Schaumgewicht von 400. Und dann werde ich noch etwas klarstellen, das war's mit dem Absatz Alles sieht ziemlich gut aus. Das einzige, was wir tun müssen, ist, diese Schaltfläche hier anzupassen. Ich wähle die Schaltfläche mit einem Klassennamen, BT und aus. Eigentlich werde ich diesen Code von hier kopieren , weil wir ähnliche Stile benötigen. Die Breite wird 35 Fram betragen, dann benötigen wir die gleiche Höhe wie für den Hintergrund Ich werde die Funktion für lineare Gradienten verwenden. Die Richtung wird nach rechts sein. Wir brauchen Farben. Der erste wird f48f sein. Für die zweite Farbe werde ich F3393 verwenden Als Nächstes benötigen wir einen Grenzradius ohne Grenze. Für Am werden alle diese Kacheln gleich sein. Das einzige, was ich hier ändern werde , ist die Marge. Wir brauchen Margin Top. Der Wert wird von der zweiten Schaltfläche übernommen. Sieht ziemlich nett aus. Eigentlich sind wir fast fertig mit dieser Seite. Das einzige, was wir tun müssen, ist die Fußzeile wieder einzublenden Dafür müssen wir nur das Attribut hidden von hier entfernen Jetzt sieht alles ziemlich gut aus und wir sind mit der Kontoseite fertig. Als Nächstes müssen wir uns um die letzte Seite kümmern , die eine Preisseite ist. Lassen Sie uns dazu mit der nächsten Vorlesung fortfahren. 59. Das HTML-Markup für die Preisgestaltung erstellen: In der vorherigen Lektion haben wir die Arbeit an der Kontoseite abgeschlossen Arbeit an der Kontoseite Es sieht ziemlich gut aus. Jetzt müssen wir weitermachen und uns um die letzte Seite unseres Projekts kümmern , und das wird die Preisseite sein. Gehen wir zur fertigen Version unseres Projekts und schauen uns die Preisseite an. Sie besteht aus einer Kopfzeile. Wir haben hier einige materielle Symbole. Dann können Sie hier zwei verschiedene Preisoptionen sehen , den Jahreszugang und den lebenslangen Zugang. Außerdem haben wir hier ein paar verschiedene Formen als Hintergrund für diese Optionen. Unten sehen Sie die Standardfußzeile, die wir auf den vorherigen Seiten verwendet haben Das war's mit der Preisseite. In dieser Vorlesung werde ich das HTML-Markup erstellen. Gehen wir zum VS-Code. Dann werde ich neue Dateien in den HTML- und CSS-Ordnern erstellen , die wir hier benötigen, wobei der Preis für HTML festgelegt wird. Dann werde ich eine CSS-Datei mit Preisangaben erstellen. Lassen Sie uns diese Datei auf die rechte Seite verschieben. Dann gehe ich zu dem Konto auf HTM der Datei und kopiere den gesamten Code Lass es uns hier einfügen. Ich werde einige Änderungen vornehmen. Wir müssen den Namen der CSS-Datei ändern. Es wird die Preisgestaltung für CSS sein. Ich werde den Kontobereich loswerden. Außerdem werde ich die Fußzeile verstecken. Lass uns den Browser überprüfen. Wir haben hier die Preisseite. Sie ist momentan leer. Wir haben hier nur die Navigation. Also lass uns weitermachen und antworten. Um das HDM-Markup zu erstellen, werde ich Ihre Kommentare zur Preisgestaltung einfügen Dann öffne ich Abschnitts-Tag mit dem Klassennamen Pricing, dem ersten Element innerhalb des Abschnittselements, erstelle einen Preisfindungs-Wrapper, in ich ein weiteres tiefes Element einfüge Und es werden Preisgestaltungen sein. Wir werden drei verschiedene Formen haben. Bei der ersten Variante handelt es sich um ein rechteckiges Preismodell. Dann werde ich einen kleinen Preiskreis erstellen. Dann brauchen wir einen großen Kreis. Ich werde diese Codezeile duplizieren und einfach den Klassennamen ändern. Wir brauchen Pricing Large Circle. Okay, nach den Formen werde ich eine Preisüberschrift erstellen , in der wir drei verschiedene Überschriften haben werden Das erste wird aus Elementen mit einer Überschrift dem Text Einfache Preisgestaltung bestehen Dann öffne ich wieder H One Heading Elements und es sollte vollständig sein, da es eine unbegrenzte Anzahl von Websites gibt. Und dann werde ich nach diesen Überschriftenelementen H drei Überschriften mit dem Text Join öffnen . Über 100.000 Kunden erhalten Zugriff auf eine unbegrenzte Anzahl von Websites. Moderne sie. Eigentlich brauchen wir hier moderne Themes und Plugins. Und wir brauchen auch den ultimativen Homepage-Baukasten. Okay, als Nächstes werde ich öffnen und es werden Rezensionen sein, die wir im Absatz machen müssen. Mit dem Text. Hervorragend. Dann öffne ich das P-Tag, es wird Preissterne angezeigt. Wir müssen auf die Google Material Symbols-Website gehen und nach Star suchen. Wir brauchen Feldsymbole, und ich werde auch abgerundet auswählen. Lassen Sie uns die Span-Elemente kopieren. Wir benötigen fünf verschiedene SAN-Elemente. Ich werde diese Codezeile viermal duplizieren. Dann lass uns weitermachen und im Browser überprüfen , ob die Symbole angezeigt werden. Wie Sie sehen können, haben wir hier fünf Sterne. Danach brauchen wir wieder einen Absatz mit den Textbesprechungen. Nach dem nächsten Absatz öffne ich das Tag mit dem Klassennamen Pricing, Trust, Pilot. In dieses Element werde ich erneut das Google-Symbol einfügen. Lass uns weitermachen und nach dem Symbol namens Hotel suchen. Wir brauchen dieses Symbol hier. Lassen Sie uns dieses Span-Element kopieren und hier einfügen. Dann überprüfe den Browser. Wir haben hier das Symbol. Danach werde ich hier ein weiteres Span-Element mit dem Text Trust Pilot einfügen . Mit diesem Span-Element sind wir mit dem Header fertig. Als Nächstes bin ich hier, tiefgründige Elemente mit den Preislisten für den Klassennamen. Wir werden zwei verschiedene Karten haben. Lass uns die erste erstellen. Eigentlich werde ich hier noch eine Preisübersicht mit Klassennamen hinzufügen , die noch übrig ist. Das wird der individuelle Klassenname sein. Was die Preisliste angeht, werde ich sie als allgemeinen Klassennamen verwenden. In der Karte werden wir tiefgründige Elemente mit dem Klassennamen Pricing oben haben , in die ich ein H-Element mit drei Überschriften und dem Text jährliches X einfügen werde . Dann benötigen wir H ein Überschriftenelement für den Preis. Der Preis wird 99,90$ sein. Nach der Überschrift brauchen wir dann wieder Sterne. Ich werde das P-Tag mit den Preissternen des Klassennamens öffnen Preissternen des Klassennamens Dann lassen Sie uns dieses Panel hierher kopieren. Wir brauchen fünf Sterne. Also werde ich dieses Panel viermal duplizieren. Lass uns den Browser überprüfen. Wir haben hier die Sterne. Als Nächstes öffne ich Elemente mit der Klassennamenliste, in der wir ein paar verschiedene Listenelemente haben werden. Lassen Sie uns LI-Elemente öffnen. Das erste wird aus Hunderten von Website-Paketen bestehen. Insgesamt werden wir sechs Listenelemente haben. Deshalb werde ich diesen Artikel fünfmal duplizieren und dann den Inhalt ändern. Das zweite sind Produktupdates, dann Premium-Support. Dann wird die nächste Option die unbegrenzte Nutzung der Website sein. Dann wird die nächste eine risikofreie Garantie sein. Dann werde ich mich für eine einmalige Gebühr einmischen, okay? Also hier haben wir die Listenelemente. Als Nächstes öffne ich die Schaltfläche mit der Texttaste. Außerdem werde ich hier den Klassennamen hinzufügen und es wird Preiskarte BTN als Text erscheinen, den ich heute eintragen werde Okay. Eigentlich glaube ich, das war's mit der ersten Karte. Alle Elemente sind geschaffen. Als Nächstes werde ich diese Elemente duplizieren , da wir auch eine zweite Karte benötigen. Ich werde es duplizieren. Wir müssen einige Änderungen vornehmen. Lasst uns den Klassennamen ändern. Wir brauchen eine Preisliste, und dann werde ich den Inhalt der Überschriften ändern In diesem Fall benötigen wir eine Zeitachse. Was den Preis angeht, wird es 249,90 $ sein . Dann brauchen wir Sterne als Kartenliste Ich werde geringfügige Änderungen vornehmen . Wir benötigen lebenslange Produktupdates, den lebenslangen Premium-Support. Was den Rest der Artikel betrifft, werde ich sie nicht ändern. Ich denke, dass alles bereit ist. Hoffentlich haben wir hier keine Fehler und alles ist korrekt. Das werden wir in der nächsten Vorlesung sehen, wo wir diese Elemente stylen werden. Schauen wir uns jetzt den Browser an. Alle Elemente sind vorbereitet. Fahren wir fort und fahren mit der nächsten Lektion fort, in der wir die Preisgestaltung gestalten werden. 60. Formenstil: In der vorherigen Lektion haben wir das HTML-Markup für den Preisbereich erstellt Alle Elemente werden erstellt und vorbereitet. Jetzt müssen wir anfangen, diese Elemente zu stylen. Gehen wir zum VS-Code in der Preis-CSS-Datei. Ich werde neue Kommentare für den Preisbereich einfügen. Dann wähle ich die Abschnittselemente aus, die Preisgestaltung für den Klassennamen, eigentlich brauchen wir hier die Preisgestaltung. Das erste , was wir tun müssen, ist das W und die Höhe zu definieren. Die Breite wird 100% betragen. Was die Höhe angeht, werde ich die Höhe des Viewports auf 150 Ich meine 50% des Viewports. Dann benötigen wir den oberen Rand 30, um Platz am oberen Rand des Abschnitts zu schaffen Okay, mit der Höhe werden die Elemente versehen. Als Nächstes müssen wir die Hintergrundfarbe für die Bildlaufleiste ändern . Ich gehe zu dem Konto dieser Datei. Schnapp dir den Code, den wir hier haben, blaue Scrollleiste. Ich werde diesen Code hier einfügen. Wie Sie sehen können, hat sich die Hintergrundfarbe der Bildlaufleiste geändert. Als Nächstes wähle ich Pricing Wrapper aus. Ich werde innerhalb von Höhen definieren. Lassen Sie uns beide Eigenschaften auf 100% setzen . Dann werde ich die Elemente mit der Flexbox ausrichten. Wir brauchen Display-Flachs. Dann ändere ich die Richtung und mache daraus eine Spalte Da wir Flex-Elemente vertikal ausrichten werden, muss die Textrichtung der Spalte entsprechen. Außerdem werde ich eine Zeile in der Mitte platzieren. Okay, ich kann sehen, dass der Inhalt in der Mitte platziert ist. Als Nächstes werde ich mich um die Formen dieses Abschnitts kümmern . Ich meine diese drei Formen, das Rechteck und diese beiden Kreise. Lass uns weitermachen und mit dem Rechteck beginnen. Ich werde das Preisrechteck auswählen. Lassen Sie uns zunächst die Höhe in Schriftform definieren. Ich stelle beide auf 50 m ein. Dann ändere ich die Hintergrundfarbe. Eigentlich werde ich einen linearen Farbverlauf verwenden. Die Richtung des Farbübergangs wird 135 Grad betragen. Dann wähle ich die erste Farbe aus, sie wird 184 BB sein. Was die zweite Farbe betrifft, so wird sie mit einem Prozentwert von 8% transparent sein mit einem Prozentwert von 8% transparent . Hier haben wir das Rechteck mit linearem Verlaufseffekt. Als Nächstes werde ich es mit dem Randradius zehn abrunden. Dann müssen wir die Position ändern. Ich werde die Position auf absolut setzen. Um dann das Element entsprechend dem übergeordneten Element zu positionieren , was die Preisgestaltung darstellt, benötigen wir die relative Position für das übergeordnete Element Dann setze ich die oberste Eigenschaft auf 30%. Was die Lab-Eigenschaft angeht, werde ich sie auf 15% setzen. Schauen wir im Browser nach Hier haben wir das Rechteck, das wir brauchen, um es zu drehen. Ich werde die Übertragung mit der Funktion „Z drehen“ verwenden, und der Wert wird 45 Grad sein. Wie Sie sehen können, ist das Rechteck gedreht. Das Letzte an dieser Form ist, die Opazität zu verringern Stellen wir die Deckkraft ein 2.2 In Ordnung, lassen Sie uns über die erste Ich bin dabei, das Rechteck. Als Nächstes werde ich mich um die zweite Form kümmern, das ist dieser kleine Kreis hier. Ich werde Pricing Small Circle auswählen. Zunächst werde ich, wie innerhalb von Höhen definiert , beide auf acht Gramm einstellen, aber dann werde ich die Hintergrundfarbe ändern. Lassen Sie uns hier die Farbe 34d, d87 verwenden. Es ist eine grüne Farbe. Als Nächstes benötigen wir einen Randradius von 50%, um das Element benötigen wir einen Randradius abzurunden. Dann ändere ich die Position der Elemente. Lass es uns auf absolut setzen. Dann definierte ich die oberen und rechten Eigenschaften. Die oberste Position wird 25% betragen . Was die richtige Position angeht, werde ich sie auf 15% setzen. Hier haben wir den kleinen Kreis. Als Nächstes müssen wir uns um die dritte Form kümmern, ich meine, diesen großen Kreis hier. Gehen wir zum VS-Code und wählen Pricing Large Circle aus. Lassen Sie uns zunächst die Höhe innerhalb der Höhe definieren. Ich werde sie beide nach Fort to Ram schicken. Dann müssen wir den Hintergrund ändern. Ich werde wieder den linearen Gradienten verwenden. Die Richtung des Farbübergangs wird zwei Rechte haben. Dann brauchen wir zuerst Farbe, die transparent sein wird. Was die zweite Farbe angeht, wird es 71186 sein Außerdem benötigen wir einen Prozentwert von 9%. Wir haben hier den Fehler gemacht, dass wir 71186 benötigen Jetzt scheint alles richtig zu sein. Hier haben wir das Element, das sich gerade im Kreis befindet. Kümmern wir uns darum. Wir benötigen einen Grenzradius von 50% Jetzt können Sie hier den Kreis mit linearen Grenzflächen sehen Als nächstes müssen wir uns um die Position dieses Elements kümmern die Position dieses Wir brauchen die absolute Position. Dann werde ich die unterste Position definieren. Es werden 15% sein Dann definiere ich die richtige Position. Lass uns bis zu 15% studieren. Und zum Schluss werde ich die Opazität ändern Fangen wir an 2.2 Alle drei Formen sind individuell angepasst und positioniert Als Nächstes müssen wir uns um den Header der Seite kümmern . Lassen Sie uns dazu mit der nächsten Vorlesung fortfahren. 61. Styling-Header: Okay, in der letzten Vorlesung haben wir diese Formen hier gestylt Wie gesagt, wir müssen weitermachen und die Kopfzeile der Preisseite anpassen Gehen wir zum VS-Code und wählen dann die Preisüberschrift aus. Ich zentriere den Text, ich meine, wir brauchen die Textzeile in der Mitte. Außerdem werde ich mit dem Rand Platz auf der Unterseite schaffen . Unten 20 Ram. Wie Sie sehen können, ist der Text in der Mitte platziert und wir haben hier auch das Leerzeichen. Als Nächstes werde ich mich einzeln um die Überschriften kümmern einzeln um die Überschriften Ich werde mit der ersten Überschrift beginnen. Eigentlich werde ich beide Überschriften gleichzeitig anpassen , weil wir hier zwei Elemente mit einer Überschrift haben . Ich werde sie auswählen. Wir benötigen die Preisüberschrift gefolgt von dem Element H mit einer Überschrift. Zuallererst werde ich die Telefonfamilie ändern. Es wird Mode Coursin'm sein, ich werde die Schriftgröße herausfinden, es wird fünf Ram sein Außerdem brauchen wir Platz zwischen den Buchstaben. Stellen wir den Buchstabenabstand 2,2 Ram ein und suchen nach einer Flechte. Die Farbe, die wir hier verwenden, Farbe 26353. Okay? Wie Sie sehen können, sind die ersten beiden Überschriften angepasst, sie sehen ziemlich gut aus Als Nächstes müssen wir uns um das Element mit den drei Überschriften von H kümmern. Ich werde tatsächlich, lassen Sie uns diesen Code duplizieren, den Selektor ändern, den wir hier brauchen, H drei. Dann werde ich die Telefonfamilie loswerden. Außerdem werde ich die Telefongröße auf zwei Ram einstellen. Dann müssen wir den Buchstabenabstand loswerden. Die Farbe der Überschrift wird 567599 sein. Außerdem werde ich hier das Telefongewicht 300 hinzufügen. Lass uns den Browser überprüfen. Ich werde die Breite der Überschrift verringern. Stellen wir zwei Ram ein. Und dann der Browser, die Breite wird verringert. Aber wie Sie sehen können, müssen wir die Überschrift in der Mitte platzieren. Deshalb werde ich Marschieren benutzen. Wir müssen marschieren, es werden zwei Ram an der Oberseite sein Dann brauchen wir Auto auf der rechten Seite, dann zwei Ram. Lassen Sie uns eigentlich zwei loswerden, weil wir dieselben Werte für die Unterseite und auch für die linke Seite benötigen . Also können wir hier nur zwei Ram und Auto lassen. Lass uns nachschauen. Wie Sie sehen können, befindet sich die Überschrift in der Mitte und wir haben auch etwas Platz an der Ober- und Unterseite. Okay, lassen Sie uns als Nächstes über die Überschriften sprechen. Ich werde mich hier um diesen Teil kümmern. Ich werde den Absatz auswählen. Lassen Sie uns die Schriftgröße auf zwei Ram setzen. Dann brauchen wir die Schriftstärke. Es werden 300 sein. Außerdem werde ich mit dem Rand etwas Platz auf der rechten Seite schaffen , oder? Der Wert wird ein Ram sein. Okay, die Absätze sind also maßgeschneidert. Als Nächstes werde ich mich um die Sterne kümmern. Lassen Sie uns die Wrapper-Entwicklung auswählen, bei der es sich um Rezensionen handelt. Ich werde Flex Box verwenden, um die Elemente auszurichten. Lassen Sie uns das Display auf Flex setzen. Dann müssen wir das Content Center begründen. Wie Sie sehen können, sind die Elemente horizontal in einer Reihe angeordnet. Als Nächstes wähle ich Pricing Stars aus, das ist die Umhüllung der Symbole Wählen wir Preissterne und schaffen Platz auf der rechten Seite, indem wir nach rechts marschieren, einen Ram verwenden Okay, jetzt müssen wir die Sterne anpassen. Ich werde Span-Element auswählen. Ich meine, diese Span-Elemente hier brauchen wir Preissterne, gefolgt von den Span-Elementen, lassen Sie uns die Telefongröße auf 2,5 Ram setzen. Und ich werde auch die Farbe der Sterne ändern. Die Farbe wird 03b 57 sein. Es ist eine grüne Farbe. Wie Sie sehen können, sehen die Sterne ziemlich gut aus. Als Nächstes werde ich mich hier um diesen Teil kümmern. Wählen wir Pricing Trust Pilot aus. Ich werde Flex Box verwenden. Stellen wir die Anzeige auf Flaggen ein. Dann müssen wir die Elemente in der Mitte ausrichten. Außerdem müssen wir die Elemente leicht nach oben verschieben, indem Margin Top mit einem negativen Wert von -0,5 Ram Okay, jetzt sieht es ziemlich gut aus. Als Nächstes müssen wir diese beiden Elemente hier anpassen. Lassen Sie uns mit dem ersten Span-Element beginnen , bei dem es sich um ein Symbol handelt. Ich wähle Pricing Trust Pilot aus, gefolgt vom Span-Element mit Selektor Wie gesagt, wir müssen uns um das erste Span-Element kümmern, das ist ein Symbol, das wir hier brauchen, ich werde die Telefongröße auf 3,5 setzen. Was die Farbe angeht, werde ich dieselbe Farbe verwenden Nehmen wir es und fügen es hier ein. Okay, wie Sie sehen können, sieht das Symbol ziemlich gut aus. Das Letzte, was wir tun müssen, ist, uns hier um dieses Element zu kümmern. Ich werde diesen Code duplizieren. Wir benötigen das Span-Element bis zum zweiten Span-Element. Lassen Sie uns die Farbe loswerden und die Telefongröße ändern , die wir zum Laufen benötigen. In Ordnung, das ist der Header. Sieht ziemlich nett aus. Als Nächstes müssen wir uns um die Karten kümmern. Und dafür fahren wir mit der nächsten Vorlesung fort. 62. Styling-Preiskarten: Ordnung, also nachdem wir den Header gestaltet haben, müssen wir uns als Nächstes um die Karten kümmern. Wir müssen beide stylen. Gehen wir also zurück zum VS-Code und fangen wir an, die Karten zu stylen. Ich werde die Wrapper-Entwicklung auswählen, bei der es sich um Preiskarten handelt Und ich werde Flexbook verwenden , um die Karten horizontal in einer Reihe zu platzieren die Karten horizontal in einer Reihe Ich meine Seite an Seite. Also müssen wir Flex anzeigen. Wenn wir uns das Projekt ansehen, werden Sie feststellen, dass die Karten nebeneinander platziert sind. Als Nächstes werde ich die Karten anpassen. Wie Sie sich erinnern, gibt es für jede Karte noch eine Preiskarte mit einer gemeinsamen Klassenbezeichnung und außerdem eine Preiskarte mit individuellem Klassennamen. Zuallererst werde ich beiden Karten einige gängige Stile hinzufügen . Deshalb werde ich sie anhand einer gemeinsamen Preisübersicht mit Klassennamen auswählen . Ich werde die verbreiterten Höhen definieren. Die Breite wird 45 Ram betragen. Was die Höhe angeht, werde ich 70 Ram draus machen. Dann werde ich die Hintergrundfarbe ändern. Es wird weiß sein. Und um die Karten klar zu sehen, werde ich den Boxschatten mit den Werten definieren. 01 Ram, zehn Ram, und die Farbe ist RGB, A 130-16-2235, und die Opazität wird 0,4 sein A 130-16-2235, und die Opazität Wie Sie sehen können, haben wir hier zwei Karten. Eigentlich überlappen sich die Formen, ich meine, diese Elemente auf den Karten Ich werde sie hinter den Karten platzieren, und dafür können wir die Index-Eigenschaft definieren Lass es uns auf zehn setzen, okay? Wie Sie sehen, ist das Problem jetzt behoben. Okay? Danach werde ich etwas Platz zwischen den Karten schaffen. Lassen Sie uns das mit Margin machen. Der Rand wird an der Ober- und Unterseite Null sein. Was die linke und rechte Seite angeht, werde ich den Rand auf 1,5 m setzen . Jetzt haben wir Platz zwischen den Karten. Als Nächstes werde ich auch innerhalb der Karte Platz schaffen. Dafür brauchen wir Polsterung. Die Polsterung besteht aus vier Rampen an der Ober- und Unterseite und dann aus sechs Rampen an der linken und rechten Seite. In Ordnung. Danach werde ich die Ecken der Karten abrunden. Außerdem müssen wir die Gegenstände auf der Karte mithilfe von Büchern aus Flachs ausrichten Gegenstände auf der Karte mithilfe von Büchern aus Flachs Setzen wir den Grenzradius auf, eigentlich brauchen wir hier den Grenzradius Der Grenzradius wird ein Ram sein. Dann brauchen wir, wie gesagt, Flexbooks. Ich werde das Display auf Flex einstellen. Dann ändere ich die Richtung, weil wir die Elemente auf der Karte vertikal ausrichten werden. Also setze ich die Flex-Richtung auf Spalte, platzieren wir sie nach unten. Als Nächstes lege ich die Elemente in die Mitte. Wir müssen die Artikel in der Mitte ausrichten. Außerdem müssen wir den Text mithilfe von Text erfassen. Mittig ausrichten. Okay, das ist es. Über die gängigen Arten der Karten. Als Nächstes werde ich die H-Elemente separat anpassen. Wir beginnen mit den Überschriften, ich meine die drei Überschriftenelemente von H. Lassen Sie uns weitermachen und das Preismodell auswählen, gefolgt von „Eigentlich brauchen wir Ihre Preisübersicht“ oben Und dann H drei Überschriftenelemente. Zuallererst werde ich die Telefonfamilie definieren. Es wird kursiv sein. Dann brauchen wir die Telefongröße, ich werde die Telefongröße auf 1,8 Ram einstellen Dann müssen wir den Text in Großbuchstaben umwandeln. Ich werde Platz zwischen den Buchstaben schaffen. Stellen wir es auf 2,2 RAM ein. Schließlich werde ich mit Margin Bottom etwas Platz am unteren Rand schaffen , der Wert wird zwei Durchläufe sein, okay? Wie Sie sehen können, sind die Überschriften personalisiert. Wenn wir uns jedoch das fertige Projekt ansehen, werden Sie feststellen, dass die Überschriften unterschiedliche Farben haben Und auch hier sehen wir den linearen Verlaufseffekt. Ich werde die Farbe separat definieren. Lassen Sie uns weitermachen und links die Preisübersicht auswählen, dann greife ich hier zum Selektor. Ich werde benutzen. Linearer Farbverlauf. Die Richtung des Farbübergangs erfolgt nach rechts. Dann müssen wir die Farben definieren. Die erste Farbe wird 441d sein. Für die zweite Farbe werde ich 0b38 verwenden Außerdem werde ich mich an 90% halten. Als Nächstes benötigen wir eine Eigenschaft namens Webkit-Hintergrundclip, es wird Text sein Außerdem müssen wir die Farbe auf transparent setzen. Okay, wie Sie sehen können, sieht die Überschrift der ersten Karte ziemlich gut aus. Wir haben hier einen linearen Verlaufseffekt. Machen wir dasselbe auch für die zweite Überschrift. Ich werde diesen Code duplizieren. Dann müssen wir den Klassennamen ändern. Wir brauchen hier eine Preisliste, richtig? Und wir müssen auch die Farben ändern. Die erste Farbe wird C sein, sechs EFF. Für die zweite Farbe werde ich sie auf 71186 setzen. Okay, lassen Sie uns die Ergebnisse überprüfen. Wie Sie sehen können, sieht die zweite Überschrift auch ziemlich gut aus. Als nächstes müssen wir uns um die Preise kümmern. Ich werde die erste Preisgestaltung wählen. Ich werde die Telefonfamilie auf Molly umstellen. Lassen Sie uns eigentlich diesen Code von hier holen und dann einige Änderungen vornehmen Die Telefongröße wird sechs Ram betragen. Dann brauchen wir, eigentlich brauchen wir hier keine Großbuchstaben. Ich glaube, das ist es eigentlich. Schauen wir uns den Browser an, die Überschriften, die Preise sehen gut aus Wir müssen die Farben ändern, und wir müssen dasselbe tun, was wir für die vorherigen Überschriften getan haben für die vorherigen Überschriften getan Wir können hier einfach auswählen. Lassen Sie uns den Selektor duplizieren. Lasst uns den Calibra loswerden, den wir hier brauchen. Und auch H eine Überschrift für Elemente. Lassen Sie uns überprüfen, ob der Browserpreis dieselbe Farbe mit Verlaufseffekt hat. Machen wir dasselbe auch für die zweite Karte. Lassen Sie uns diesen Selektor tatsächlich von hier kopieren. Und dann ändere einfach den Klassennamen, den wir hier brauchen, oder? In Ordnung, das ist es. Die Überschriften sehen ziemlich gut aus und als Nächstes müssen wir uns um die Sterne kümmern Gehen wir zurück zum VS-Code. Ich werde einen Wrapper mit einem Klassennamen und einer Preiskarte mit Sternen auswählen einem Klassennamen und einer Preiskarte mit Sternen Ich werde unten etwas Platz schaffen, indem ich den unteren Rand für Ram verwende Dann müssen wir wieder das Pan-Element auswählen, das wir benötigen, und dann die Pricing-Kartensterne, gefolgt von diesem Pan-Element Ich werde die Farbe des Sterns ändern. Lass uns hier 0357 verwenden. Wie Sie sehen können, sehen die Sterne ziemlich gut aus. Als Nächstes müssen wir uns um diese Listen kümmern. Hier wähle ich UL Elements mit der Preisliste für Klassennamen aus. Das erste, was ich tun werde, ist die Standardaufzählungszeichen zu entfernen Wir brauchen keinen Listenstil. Außerdem werde ich mit Margin Bottom for etwas Platz auf der Unterseite schaffen . Okay. Wie Sie sehen können, sind die Kugeln entfernt und wir haben auch etwas Platz unten Als nächstes müssen wir uns um die Listenelemente kümmern. Ich wähle die Preisliste aus, gefolgt von den LI-Elementen. Eigentlich brauchen wir hier. Preiskarte am wenigsten und links. Dann sollte das LI-Element folgen. Ich werde das Telefon vergrößern, es werden zwei Ram sein. Dann brauchen wir das Gewicht des Handys, sagen wir, auf 300, da ich die Farbe ändern werde . Stellen wir es auf 567599 ein. Dann brauchen wir einen Rand, 1,5 Ram oben und unten und dann Null auf der linken und rechten Seite und dann Null auf der linken und rechten Wie Sie sehen können, sehen die wenigsten Artikel ziemlich gut aus. Als nächstes müssen wir die Farbe des fünftkleinsten Elements zumindest ändern . Ich meine, wir müssen den kleinsten Gegenstand grün machen. Dafür wähle ich LI-Elemente aus, gefolgt vom n-ten Child-Selektor. Wir müssen den fünften Punkt auswählen. Die Farbe wird 0357 sein. Wie Sie sehen können, hat der fünfte Artikel jetzt eine andere Farbe Jetzt müssen wir uns um den letzten Gegenstand kümmern. Wir müssen den letzten Punkt überstreichen. Eine Tatsache hier, lassen Sie uns weitermachen und den Listenpunkt der ersten Karte auswählen Wir benötigen noch eine Preiskarte, gefolgt von der Preisliste. Und dann brauchen wir ein li-Element, gefolgt vom letzten Child-Selektor Wir brauchen dein letztes Kind. Ich verwende eine Eigenschaft namens Textdekoration mit durchgehendem Wert. Dann brauchen wir Opazität 0,5 Okay. Das ist es ungefähr das Mindeste. Als nächstes müssen wir uns um die Knöpfe kümmern. Ich werde die Preiskarte BTN auswählen. Ich stelle die Breite auf 100% ein, dann beträgt die Höhe sechs Rams Ich werde die Grenze ändern. Ich meine, wir müssen den Standardrahmen loswerden, lassen Sie uns ihn auf keinen setzen, dann brauchen wir einen Grenzradius von fünf Ram. Dann setzen wir die Schriftgröße auf 1,6 Rams. Ich werde Text in Großbuchstaben umwandeln, die Farbe ändern, es wird weiß sein. Dann müssen wir etwas Abstand zwischen den Buchstaben schaffen. Stellen wir es auf 2.2 Ram ein. Schließlich setze ich den Cursor auf den Zeiger. Moment sehen die Schaltflächen nicht ganz gut aus, weil wir die Hintergrundfarben für jede Schaltfläche ändern müssen. Wir benötigen lineare Farbverläufe für beide Muster, sie haben unterschiedliche Farben Ich wähle links die Preisübersicht aus, gefolgt von der Preis-PTN Dann werde ich den Hintergrund ändern. Lassen Sie uns lineare Farbverläufe verwenden. Eigentlich benötigen wir die ähnlichen Werte , die wir für die Überschrift verwendet haben Also werde ich mir diesen Code von hier holen. Lass uns den Browser überprüfen. Das erste Muster sieht ziemlich gut aus. Machen wir dasselbe auch für das zweite. Ich werde diesen Code duplizieren, dann von links nach rechts wechseln und auch die Werte von hier abrufen. Lassen Sie uns den Wert hier einfügen. Wie Sie sehen können, sehen die beiden Tasten ziemlich gut aus. Eigentlich sind wir mit den Karten fast fertig. Ich muss noch eine Sache erledigen. Wenn wir uns das fertige Projekt ansehen, werden Sie feststellen, dass die Karte auf der rechten Seite etwas größer aussieht als die linke Karte. Sie denken vielleicht, dass wir die Innenhöhe vergrößern werden, aber das ist nicht das, was wir tun werden. Ich werde in der Umgebung kreativ sein und dann werde ich diese Karte in die Nähe des Benutzers bringen. Um in der Umgebung etwas zu erschaffen, müssen wir eine Eigenschaft namens Perspective verwenden. Wir müssen es zu den Preislisten hinzufügen. Der Wert wird 50 Ram sein. Und dann wähle ich die Preiskarte, richtig? Ich werde Transform verwenden und dann eine Funktion mit dem Wert fünf Ram übersetzen. Wie Sie jetzt sehen können, ist die zweite Karte, ich meine die Karte auf der rechten Seite näher an den Benutzer herangefahren. Ich finde, es sieht ziemlich gut aus. Okay, mit der Preisseite sind wir fast am Boden. Das einzige, was wir tun müssen, ist die Fußzeile anzuzeigen Ich werde das Attribut namens loswerden und das war's. Okay. Die Preisseite sieht eigentlich ziemlich nett und modern aus, mit den Seiten sind wir fertig. Als Nächstes müssen wir dafür sorgen, dass das Projekt auf unterschiedliche Bildschirmgrößen und Geräte reagiert. Fahren wir mit der nächsten Vorlesung fort. 63. Projekt für größere Bildschirme responsiv machen: Hallo und willkommen in unserem neuen Bereich, in dem wir unser Projekt auf unser Projekt auf verschiedene Bildschirmgrößen und Geräte anpassen werden. Im letzten Abschnitt haben wir die Arbeit an dem Projekt abgeschlossen. Ich meine, wir haben alle Seiten erstellt und gestaltet. Alles sieht ziemlich nett und modern aus, aber jetzt müssen wir das Projekt responsiv gestalten Ich möchte ein wenig über die Bedeutung des responsiven Webdesigns in der Webentwicklung sprechen Bedeutung des responsiven . Tatsächlich ist es bei der Webentwicklung sehr wichtig, da es sicherstellt, dass die Websites auf allen Arten von Geräten und Bildschirmgrößen gut funktionieren . Bei so vielen verschiedenen Geräten wie Smartphones und Tablets trägt responsives Webdesign dazu bei, trägt responsives Webdesign dazu bei Websites überall gut aussehen und einfach zu bedienen sind. Es spart auch 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 auch die Sichtbarkeit einer Website erhöhen. Einfach ausgedrückt, responsives Webdesign ist ein Muss in der Webentwicklung, um sicherzustellen, dass die Websites auf den zahlreichen Geräten, die die Leute heute in meinem Webprojekt verwenden, benutzerfreundlich und effektiv bleiben auf den zahlreichen Geräten, die die Leute heute in meinem Webprojekt verwenden, benutzerfreundlich und effektiv Geräten, die die Leute heute in meinem Webprojekt verwenden, Ich habe es mir zur Priorität gemacht, die Website auf verschiedenen Geräten fantastisch aussehen zu lassen . Wir sprechen von großen Desktop-Bildschirmen wie 1920 Pixeln und auch 1.600 Pixeln Sowie etwas kleinere wie 14 × 40 Pixel, 1960, 6,12 × 80 Vier Tabletten. Ich habe 820 Pixel und 768 Pixel. Für diejenigen, die gerne auf ihren Handys surfen, habe ich natürlich für 43.393,3 75 Pixel optimiert Auf diese Weise stelle ich sicher, dass unabhängig davon, wie jemand auf die Website zugreift, ob auf einem Computer, Tablet oder Mobiltelefon, das Erlebnis reibungslos verläuft 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. Okay? Wie Sie wissen, haben wir unser Projekt auf dieser extra großen Bildschirmgröße aufgebaut , und jetzt müssen wir dafür sorgen, dass es an diesen Bruchstellen ansprechbar ist . Der erste Breakpoint wird dieser hier sein. Ich werde das Projekt mit all seinen Seiten responsiv machen und dann werden wir zu einem anderen Breakpoint übergehen Okay, lassen Sie uns die Seite untersuchen und den responsiven Modus wechseln Wie Sie sehen können, haben wir hier diese Dimensionen. Ich meine, 1920 Pixel Breite und 1080 Pixel Höhe. Wie gesagt, der erste Breakpoint wird 1.600 Pixeln und 900 Pixeln Ich werde hier diese Dimensionen einfügen. Dann gehe ich zum VS-Code. Lassen Sie uns diese Datei hier schließen. Dann werde ich hier neue Commons für Responsive einfügen. Dann werde ich CSS Media Query verwenden , um die maximale Breite des Bildschirms zu definieren. Wir brauchen ein Schild, dem die Medien folgen. Dann müssen wir die maximale Breite des Bildschirms angeben. Es werden 1.600 Pixel sein. Jetzt können wir hier die Kacheln einfügen, die wir benötigen. Das erste, was ich tun werde, ist die Schriftgröße des HTML-Elements zu ändern. Wie Sie sich erinnern, haben wir die Schriftgröße des HTML-Codes auf 62,5% festgelegt des HTML-Codes auf 62,5% , um die Maßeinheit Ram zu verwenden Und ich werde die Schriftgröße des Hmal-Elements verringern Schriftgröße des Hmal-Elements Dadurch wird die Größe aller Elemente des gesamten Projekts verringert . Ich werde die Schriftgröße des Hmal-Elements 60% erhöhen. Jetzt wurden alle Elemente im Projekt kleiner. Als Nächstes werde ich mich um die Navigationsleiste kümmern. Ich werde die Polsterung auf dem verringern. Linke und rechte Seite. Ich wähle Nein und setze Putting auf 0,10. Als Nächstes ändere ich die Breite der Felder „Keine Elemente Ich, das Wrapper-Deep-Element. Ich wähle keine Elemente aus und setze die Breite auf 55%. Wie Sie sehen können, wird Breite auf 55%. Wie Sie sehen können, die Breite der Navigationselemente das Wrapper-Element vergrößert Als Nächstes werde ich das Drop-down-Menü entfernen. Wie Sie sehen können, haben wir hier eine kleine Lücke zwischen dem Drop-down-Menü und dem Dreieck. Ich werde das Problem beheben. Lassen Sie uns das Drop-down-Menü auswählen. Ändere die eingenommene Position, ich setze sie auf 4,5 RAM. Wie Sie sehen können, haben wir hier nicht mehr die Lücke zwischen dem Dreieck und dem Drop-down-Menü. Als Nächstes werde ich mich um den Servicebereich kümmern. Lassen Sie uns den Services-Wrapper auswählen und die Breite auf 70% setzen . Okay, jetzt haben wir ein besseres Ergebnis Als Nächstes werde ich mich um die Projektliste kümmern. Lassen Sie uns weitermachen und die Projektliste auswählen. Ich werde auf 80% setzen Okay, dieser Abschnitt sieht also auch gut aus. Als Nächstes komme ich zum Vorlagenbereich. Ich werde die Bilder anpassen. Lassen Sie uns die Vorlage rechts gefolgt vom Bild erstellen. Dann brauchen wir Child Select. Wählen wir das erste Bild aus. Ich ändere die beiden Positionen, es werden 45% sein. Dann setzen wir die Breite auf 35 Ram. Ich werde den Code, den wir brauchen, hier duplizieren. Drittes Bild, dann werde ich die obere Position loswerden und die Breite ändern. Machen wir 55 Ram draus. Okay, jetzt sieht alles gut aus. Als nächstes müssen wir uns um diese kleine Lücke hier kümmern . Eigentlich denke ich, dass es ein Browserfehler ist , den wir hier sehen. Diese kleine Lücke. Wie auch immer, ich werde das Problem lösen. Wählen wir den Abonnementbereich aus. Ich setze die Marschspitze auf minus ein M. Jetzt haben wir keine Lücke mehr und alles sieht ganz gut aus Okay. Also ich denke, es geht um die Homepage. Als nächstes müssen wir uns um die verbleibende Seite kümmern. Gehen wir zur Kundenseite. Wir müssen die Breite der Testimonials erhöhen , ich meine den Gehen wir zurück zum VS-Code und öffnen die Clients der Ich werde Ihre Kommentare für Responsive einfügen. Dann benötigen wir die maximale Breite der CSS-Medienabfrage 1.600 Pixeln Ich werde den Testimonials Wrapper auswählen. Lassen Sie uns die Breite auf 90% setzen Okay, jetzt sieht der Abschnitt ziemlich Ich denke, dass wir hier an diesem Breakpoint nichts ändern müssen . Gehen wir zur nächsten Seite über , der Produktseite. Ich werde hier Änderungen an der Folie vornehmen. Lassen Sie uns weitermachen und die Produktseite öffnen. Dann brauchen wir ihre Kommentare, damit sie reagiert. Ich werde Media X mit 1.600 Pixeln definieren. Wir brauchen Jahr 1.600 Pixel. Ich wähle den Produktinhalt aus und ändere die Breite auf 90%. Als Nächstes werde ich mich um den Werbeinhalt kümmern Ich bin das Überschriftenelement. Lassen Sie uns fortfahren und den Inhalt der Werbeaktion auswählen, gefolgt vom ersten Überschriftenelement H. Ich werde die Telefongröße ändern. Stellen wir es auf 3,5 m ein. Okay, jetzt sieht der Werbeinhalt gut aus. Eigentlich sind wir mit der Produktseite fertig. Lassen Sie uns weitermachen und die Inhaltsseite überprüfen. Ich finde, alles sieht gut aus. Schauen wir uns als Nächstes die Kontoseite an. Wir brauchen hier keine Änderungen. Was die Preisseite angeht, werde ich Ihre Folienänderungen vornehmen. Kehren wir zum VS-Code zurück und öffnen wir die Pricing-SS-Datei. Lassen Sie uns Kommentare einfügen. Ich werde eine Caesars Media-Abfrage mit Xw von 1.600 Pixeln erstellen Xw von 1.600 Lassen Sie uns weitermachen und den kleinen Kreis auswählen. Und die richtige Position zu ändern, wird um 10% sein. Außerdem werde ich mich um die Position des großen Kreises kümmern . Dann duplizieren wir diesen Code. Ich werde den Klassennamen ändern. Es wird groß sein. Ich werde die richtige Position auf 10% setzen und auch die Boxim-Position ändern Es wird 12% sein, okay. Es sieht alles ziemlich gut aus. Und an diesem Breakpoint meine ich 1.600 Pixel Breite und 900 Pixel Höhe Wir sind fertig. Damit wir diesen Breakpoint als Nächstes überprüfen können, müssen wir uns hier um diesen Breakpoint kümmern Lassen Sie uns dafür mit der nächsten Vorlesung fortfahren. 64. Projekt für kleinere Bildschirme responsiv machen - Teil 1: In der vorherigen Vorlesung haben wir das Projekt responsiv gestaltet. Beim Breakpoint meine ich 1.600 Pixel Breite und 900 Pixel Höhe Jetzt ist es an der Zeit, weiterzumachen und das Projekt auf verschiedenen Bildschirmgrößen responsiv zu Der nächste Breakpoint wird dieser sein. Ich meine, 14, 40 Pixel und 900 Pixel Höhe. Kehren wir zum Browser zurück und ändern die Abmessungen im responsiven Modus. Wir brauchen hier 14, 40 Pixel und dann 900 Pixel. Gehen Sie dann zurück zum VS-Code, öffnen Sie die Style-CSS-Datei und erstellen Sie eine neue CSS-Medienabfrage. Die maximale Breite wird 14.40 Pixel betragen. Als erstes werde ich die Schriftgröße des H-Timel-Elements ändern Ich werde es wieder verringern. Die Schriftgröße wird 48 Pixel betragen. Ich meine, Prozent, nicht die Pixel. Jetzt wurden die Elemente wieder kleiner. Als Nächstes werde ich mich um die Dinge kümmern , um die Wrapper-Entwicklung Lassen Sie uns keine Artikel auswählen. Erhöhen Sie erneut die Breite. Ich werde es auf 60% setzen Okay, ich denke, wir brauchen keine Änderungen am Header. Als nächstes müssen wir uns um den Servicebereich kümmern. Ich werde Services Wrapper auswählen. Definiere die Breite. Die Breite wird 75% betragen Okay, der Servicebereich sieht gut aus. Als Nächstes werde ich mich um den Projektbereich kümmern. Ich werde die Breite der Navigation erhöhen. Ich meine diese Navigation hier. Außerdem werde ich die Breite des Projekts unter erhöhen Lassen Sie uns weitermachen und Filter auswählen und die Breite auf 85% einstellen . Dann wähle ich hier Projektliste aus. Projektliste, und ich werde sie auch auf 85% einstellen. Okay? Also der Projektabschnitt sieht ziemlich gut aus. Als Nächstes werde ich mich um den Vorlagenbereich kümmern. Das einzige, was ich tun werde, ist, diesen Absatz, den ich in der Breite dieses Absatzes habe, etwas kleiner zu machen diesen Absatz, den ich in der Breite . Lassen Sie uns weitermachen und die übrig gebliebenen Vorlagen auswählen, gefolgt von den Elementen, die ich mit 250 festlegen werde. In Ordnung, ich denke, das ist ungefähr die Startseite. Alles sieht ziemlich gut aus. Als nächstes müssen wir uns um die Kundenseite kümmern. Lassen Sie uns die CSS-Datei des Clients öffnen und eine neue CSS-Medienabfrage mit einer maximalen Breite von 40,40 Pixeln erstellen neue CSS-Medienabfrage mit einer maximalen Breite von 40,40 Pixeln Ich werde die Breite des Testimonial-Wrappers erhöhen , ich meine dieses Wrapper-Element ich meine dieses Lassen Sie uns weitermachen und den Testimonial-Wrapper auswählen und seine Breite auf 95% einstellen . Dann werde ich die Breite des Testimonials selbst ändern Wählen wir Testimonial aus und setzen wir die Breite auf 32. Auch hier sieht der Testimonial-Bereich mit dieser Seite gut aus. Wir sind fertig. Schauen wir uns als Nächstes die Produktseite an. Wir müssen Ihre geringfügigen Änderungen vornehmen. Ich werde Produkte der CSS-Datei öffnen und dann müssen wir neue CSS-Medien erstellen. Abfrage max. Die Breite wird 14,40 Pixel betragen. Dann wähle ich Werbeinhalte aus und setze die Breite auf 70%. Dann kümmere ich mich um die Formen. Wählen wir das Promo-Rechteck aus. Ich werde die linke Position auf 8% setzen und ich werde sie auch auf Position ändern. Lassen Sie uns den Wert auf 25% setzen. Als Nächstes werde ich mich um den großen Kreis kümmern. Ich werde auch seine Position ändern. Wählen wir den großen Kreis aus. Setzen Sie die untere Position auf 25%. Außerdem werde ich die rechte Position auf 8% ändern . Das war's. Der Promo-Bereich sieht gut aus. Eigentlich sind wir mit dieser Seite fertig. Schauen wir uns die Kontaktseite an. Es sieht gut aus. Außerdem sieht die Kontoseite auch gut aus. Schauen wir uns den Abschnitt mit den Preisen an. Also werde ich die Position des Kreises leicht ändern. Ich werde die Datei Pricing öffnen. Und dann lassen Sie uns eine Nachrichtenmedienabfrage mit einer maximalen Breite von 14.40 Pixeln erstellen . Ich wähle Pricing Small Circle. Ich werde seine richtige Position ändern. Lass uns 7% draus machen, okay? Das heißt, an den Breakpoints sieht alles ziemlich gut aus. Und ich werde diesen Breakpoint hier überprüfen. Als Nächstes müssen wir dafür sorgen, dass das Projekt auf diesen Breakpoint reagiert Und dafür fahren wir mit der nächsten Vorlesung fort. 65. Projekt für kleinere Bildschirme responsiv machen - Teil 2: In der vorherigen Vorlesung haben wir das Projekt an diesem Punkt responsiv gemacht das Projekt an diesem Punkt responsiv Hier habe ich die Bildschirmgröße mit den folgenden Abmessungen 14, 40 Pixel Breite und 900 Pixel Höhe. Als Nächstes müssen wir uns um den nächsten Breakpoint kümmern . Ich bin in diesem hier. Gehen wir zurück zum Browser und ändern die Dimensionen, die wir hier benötigen, 13, 66 und dann 768. Ich gehe zurück zum VS-Code. Gehen wir zur Style-CSS-Datei und erstellen wir eine neue CSS-Medienabfrage. Die maximale Breite wird 13.66 Pixel betragen. Als erstes werde ich die Telefongröße des HTML-Elements ändern. Ich werde die Telefongröße auf 56% einstellen , wodurch die Größe der Elemente verringert wird. Als Nächstes werde ich mich um die Projekte kümmern , weil die ersten beiden Abschnitte gut aussehen. Kümmern wir uns um die Projekte. Ich werde Projekt auswählen. Ich werde die Breite ändern, es werden die beiden Ram sein. Außerdem müssen wir die Größe der Bilder ändern. Ich werde das erste Bild mit dem n-ten Child Selector Insider auswählen mit dem n-ten Child Selector Insider Die Breite des ersten Bildes wird 19 Ram betragen. Dann werde ich diesen Code zweimal duplizieren, weil wir auch die verbleibenden zwei Bilder anpassen müssen. Das zweite Bild, die Breite des zweiten Bildes wird 17 Ram betragen. Dann definiere ich die linke Position und setze sie auf Null. Was das dritte Bild angeht, setzen wir es auf 90% und ich werde auch die rechte Position auf Null setzen, okay? Wie Sie sehen können, hat sich die Breite der Bilder geändert und sie sehen ziemlich gut aus. Okay, als nächstes müssen wir uns um den Vorlagenbereich kümmern. Ich werde die Bilder aufnehmen. Gehen wir zum VS-Code und wählen die Vorlage rechts aus, gefolgt von den Bildelementen. Wählen Sie erneut aus, wir benötigen das erste Bild. Ich definiere, lass uns 30 Ram draus machen. Außerdem werde ich die beiden Positionen auf 45% ändern. Als nächstes werde ich diesen Code duplizieren, den Selektor ändern Wir brauchen dein zweites Bild. Ich definiere die Breite des zweiten Bildes. Es werden 17 Ram sein. Okay, schauen wir im Browser nach. Ich finde, alles sieht ziemlich gut aus. Als nächstes müssen wir uns um den Schatten kümmern. Ich meine, dieser Unschärfeeffekt besteht, soweit Sie sich daran erinnern, soweit Sie sich daran erinnern, aus vier Elementen des Vorlagenbereichs Ich wähle Vorlagen aus, gefolgt von den vier Elementen Ich werde die Innenhöhe ändern. Gehen wir von 270 m aus. Die Höhe wird ebenfalls 70 m betragen. Außerdem werde ich die Position des Elements ändern , das wir benötigen. Die unterste Position wird Null sein. Und wir brauchen auch die richtige Position, die bei 8% liegen wird Jetzt haben wir tatsächlich bessere Ergebnisse mit der Startseite. Wir sind fertig. All diese Abschnitte sehen gut aus. Schauen wir uns den Rest der Seiten an. Ich finde, die Kundenseite sieht auch gut aus. Schauen wir uns die Produktseite an. Ich werde hier einige Änderungen vornehmen. Gehen wir zum VS-Code und öffnen wir die Produkte der CSS-Datei. Ich werde ein neues C-Medium erstellen. Geben Sie das Maximum an, sodass es 13.66 Pixel sein wird. Zuallererst werde ich mich um die Bilder kümmern. Lassen Sie uns den Inhalt der Produkte auswählen. Genau dann brauchen wir ein Bild mit Kinderauswahl. Ich werde das erste Bild auswählen. Lassen Sie uns die Höhen innerhalb der Höhe ändern. Ich werde die Breite auf 30 Ram setzen. Dann wird die Höhe 60 Ram betragen. Außerdem werde ich die Position des Bildes ändern. Lassen Sie uns die obere Position auf 45% setzen. Was die rechte Position betrifft, wird die Position 13% betragen Das erste Bild ist angepasst. Als nächstes müssen wir uns um das zweite Bild kümmern. Ich werde diesen Code hier duplizieren. Dann werde ich den Selektor ändern, wir brauchen ihr zweites Bild Die Breite wird 17 Ram betragen. Dann werde ich die Höhe loswerden, zur Position wechseln, es werden 20% sein . Was die richtige Position angeht, werde ich es auf 29% bringen. Okay, das zweite Bild sieht gut aus. Als nächstes müssen wir uns um das dritte Bild kümmern. Lassen Sie uns weitermachen und den Code, den wir benötigen, erneut duplizieren. Drittes Bild, ich werde mit 226 Ram einstellen. Dann brauchen wir hier die untere Position, es werden 28% sein. Dann werde ich die richtige Position auf 3% setzen . Die Bilder sehen gut aus. Eigentlich sind wir mit diesem Teil hier, fertig. Lassen Sie uns weitermachen und uns um den Promo-Inhalt kümmern. Ich wähle den Promo-Inhalt aus, lass uns die Höhe ändern. Die Breite wird 60% betragen. Was die Höhe angeht, werde ich 40 Ram daraus machen. Dann werde ich den großen Kreis anpassen. Sobald wir den Mauszeiger über den Inhalt der Werbeaktion bewegen, wähle ich „Großer Kreis“ mit der Klasse animieren Ich werde die Skala ändern. Es wird 1,3 sein Jetzt haben wir bessere Ergebnisse. Eigentlich denke ich, dass wir die Überschrift anpassen müssen, weil ich denke, dass sie größer ist, als wir hier brauchen. Ich werde Werbeinhalte mit H einem Überschriftenelement auswählen . Lassen Sie uns jetzt die Größe auf drei setzen. Es sieht ziemlich gut aus. Als nächstes kümmere ich mich um den Schatten. Lass uns weitermachen und Promo Shadow auswählen. Ich werde die unterste Position ändern. Es wird -14% sein Dann ändere ich den Schatten, ich meine die unterste Position des Schattens Sobald wir den Mauszeiger über den Inhalt der Werbeaktion bewegen, werde ich diesen Code duplizieren Dann müssen wir hier die Klasse Animate hinzufügen. Ich werde die unterste Position auf 17% setzen Okay, jetzt sieht alles gut aus Und mit diesem Abschnitt sind wir eigentlich fertig. Schauen wir uns andere Seiten an. Die Kontaktseite sieht gut aus. Ich denke, dass die Kontoseite auch gut aussieht. Als nächstes haben wir hier den Abschnitt mit den Preisen. Es sieht auch gut aus. Ich glaube, das ist es. Was die Breakpoints angeht, das Projekt sieht gut aus Ich werde diesen Breakpoint überprüfen. Der nächste Breakpoint ist dieser hier, die Bildschirmgröße mit den Abmessungen 12, 80 Pixel Breite und 780 Pixel Höhe Am Breakpoint müssen wir die Schriftgröße des H mel-Elements ändern Das ist alles über diesen Breakpoint. Ich werde diesem Breakpoint keinen neuen Videovortrag widmen diesem Breakpoint keinen neuen Videovortrag Ich werde das Projekt am Breakpoint anpassen. Gehen wir in dieser Vorlesung zum VS-Code und öffnen die formatierte CSS-Datei Lassen Sie uns eine neue Css-Medienabfrage mit einer maximalen Breite von 12.80 Pixeln Wählen Sie dann das Htimil-Element und ändern Sie die Telefongröße. Es wird 52% sein Dann werde ich hier die Abmessungen ändern. Schauen wir uns also das Projekt an. Wie Sie sehen können, sieht alles gut aus. An diesem Breakpoint müssen wir nichts ändern. Eigentlich habe ich eine Sache auf der Startseite vergessen. Ich habe den Videoplayer noch nicht überprüft. Das ist mein Fehler. Aber wie Sie sehen können, sieht es gut aus. Wir müssen hier nichts ändern Okay, das liegt an diesen Breakpoints Ich werde das auch überprüfen . Als Nächstes müssen wir uns hier um diesen Breakpoint kümmern . Lassen Sie uns dafür mit der nächsten Vorlesung fortfahren. 66. Projekt für kleinere Bildschirme responsiv machen - Teil 3: In der vorherigen Vorlesung haben wir das Projekt an diesen beiden Grenzpunkten hier responsiv gemacht an diesen beiden Grenzpunkten hier responsiv Jetzt müssen wir weitermachen und uns um den nächsten Breakpoint kümmern , der eine Breite von 1024 Pixeln und eine Höhe von 768 Pixeln haben wird 1024 Pixeln und eine Höhe von 768 Pixeln Gehen wir zurück zum Browser und ändern wir die Abmessungen. Hier brauchen wir 1.024,7 68. Kehren wir zum VS-Code zurück und erstellen wir eine neue CS-Medienabfrage In der Stildatei werde ich die maximale Breite als 1024 Pixel definieren . Als erstes werde ich mich um die Navigation kümmern. Lassen Sie uns weitermachen und kein Teil auswählen und die Polsterung ändern. Ich werde die Polsterung auf 0,5 Frame einstellen. Dann werde ich mich um die Verpackung der Nova-Artikel kümmern die Verpackung der Nova-Artikel Ich werde Nova-Elemente auswählen die Breite auf 65% einstellen. Wie Sie sehen können, sehen die Navigationselemente gut aus Als Nächstes werde ich mich um das Logo kümmern. Ich wähle Logo, gefolgt von den Panlements. Aber in diesem Fall wähle ich das erste Pan-Element aus, das wir hier benötigen, untergeordnete Auswahl mit dem Wert eins Ich werde die Schrift auf 2,5 Ram setzen. Dann werde ich diesen Code duplizieren. Ich werde hier Span-Elemente hinzufügen. Lassen Sie uns die Schriftgröße auf 1,5 Ram setzen. Dann wähle ich das zweite Span-Element aus. Ich werde diesen Code hierher kopieren. Lassen Sie uns den n-ten Child-Selektor ändern. Wir brauchen hier zwei. Was die Telefongröße angeht, werde ich dafür sorgen, dass es 1.2 läuft. Das war's, mit dem Logo. Als Nächstes werde ich mich um das Banner kümmern. Ich werde ein Banner auswählen. Ich werde die Position des Banners ändern. Lassen Sie uns die Position auf 16% setzen. Was die linke Position angeht, werde ich sie auf 18% setzen. Als Nächstes werde ich mich um die Überschriften kümmern. Wählen wir Banner mit H, einem Überschriftenelement. Ich werde die Schriftgröße auf neun Ram setzen. Was die zweite Überschrift angeht, werde ich den Code duplizieren , den wir hier brauchen, Banner drei. Was die Schriftgröße angeht, werden es zwei sein. Okay, das Banner sieht gut aus. Als Nächstes werde ich mich um die Hintergründe kümmern. Wir müssen geringfügige Änderungen vornehmen. Ich wähle VG 1 und setze richtige Position auf -5% Vorher müssen wir uns um den Haupthintergrund kümmern Ich werde G Main auswählen. Lassen Sie uns die linke Position auf -25% setzen . Für den dritten Hintergrund wähle ich Hintergrund zwei Lassen Sie uns auf 60% setzen. Okay, ich finde, die Hintergründe sehen gut aus . Und mit der Kopfzeile sind wir fertig Als Nächstes müssen wir uns um den Servicebereich kümmern. Ich bin Select Services. Ich werde die Höhe der Dienste auf eine Sichtweite von 190 einstellen . Dann ändern wir den Rand. Ich werde den Spielraum an der Ober - und Unterseite auf 15 Ram setzen . Was die linke und rechte Seite angeht, werde ich den Rand wieder auf Null setzen. Als Nächstes werde ich mich um Formen, Hintergründe, den Kreis und dieses Rechteck kümmern . Ich wähle die Dienste G one aus. Ich werde die Position ändern. Die oberste Position wird -15% sein . Dann werde ich die richtige Position auf 3% setzen . Außerdem werde ich die Höhe von zehn auf 60 Ram setzen Ich werde die Elemente motorisch machen. Lassen Sie uns auch die Höhe auf 60 Ram setzen. Okay, hier haben wir den Kreis und ich denke, wir haben viel bessere Ergebnisse. Kümmern wir uns um das Rechteck. Lassen Sie uns diesen Code tatsächlich duplizieren. Ändern Sie hier den Klassennamen, den wir brauchen. Was die Positionen angeht, werde ich die unterste Position festlegen. -12% werde ich dann eine linke Position verwenden und der Wert wird 5% sein. Was die WHEN-Höhe angeht, werde ich diese beiden Codezeilen hier belassen Gehen wir zum Browser. Wie Sie sehen können, haben wir hier ein Rechteck und eigentlich sieht dieser Abschnitt gut aus. Wir müssen nur Ihre eine geringfügige Änderung vornehmen. Wir müssen den Abstand zwischen diesen Gegenständen vergrößern. Ich wähle jetzt die Liste der Dienste aus. Liste der Dienste hat die Inhaltseigenschaft mit dem Wertzentrum in unserem Fall auf dieser Bildschirmgröße gerechtfertigt . Ich werde den Wert der Eigenschaft „Inhalt rechtfertigen“ ändern der Eigenschaft „Inhalt rechtfertigen und ihm den Wert „Space Evenly“ zuweisen. Jetzt ist der Raum viel größer und ich finde, er sieht viel besser aus. Okay, mit dem Servicebereich sind wir fertig. Als Nächstes müssen wir uns um den Vorlagenbereich kümmern , da der Projektbereich gut aussieht. Kümmern wir uns um den Vorlagenbereich. Ich nehme die linke Seite ab. Lassen Sie uns die Vorlagen übrig lassen. Ich werde die Polsterung ändern. Nehmen wir an, die Polsterung beträgt 25 Fram oben, dann zehn Ram auf der rechten Seite, Null auf der Unterseite und fünf Fram auf der linken Als Nächstes nehme ich Sie von der Überschrift ab. Lassen Sie uns weitermachen und Vorlagen links auswählen . H, eine Überschrift, Elemente. Ich werde die Telefongröße ändern, es wird fünf Ram sein. Dann werde ich den Code, den wir brauchen, hier duplizieren. Absatz, ich werde die Breite des Absatzes ändern. Es werden 45 Ram sein. Was die Telefongröße angeht, werde ich sie auf 1,5 Ram einstellen. Die Überschrift und der Absatz sehen gut aus. Als nächstes müssen wir uns um den Boden kümmern. Ich werde zehn Platten auswählen, PTN. Zuallererst werde ich die Breite verringern. Stellen wir es auf 27 Ram ein. Dann müssen wir die Höhe ändern. Es wird 5,5 Ram sein. Und dann ändere die Telefongröße. Ich werde auf 1,6 Ram einstellen. In Ordnung, das ist ungefähr auf der linken Seite. Kümmern wir uns um die rechte Seite. Ich werde die Bilder anpassen. Lassen Sie uns die Vorlagen rechts auswählen, gefolgt vom Bild. In diesem Fall benötigen wir das erste Bild. Lassen Sie uns die Diagrammauswahl verwenden und das erste Bild auswählen. Ich werde die obere Position ändern, sie wird 45% betragen. Lassen Sie uns auch die Breite ändern Ich werde 25 Frames draus machen. Dann lass uns diesen Code duplizieren. Wir brauchen ihr zweites Bild. Die oberste Position wird 25% sein, dann brauchen wir die linke Position wird 20% sein. Was die Breite angeht, werde ich 214 Ram sagen. Schließlich müssen wir uns um das dritte Bild kümmern. Lassen Sie uns diesen Code duplizieren, den Wert der Diagrammauswahl ändern , wir brauchen hier drei. Im Fall des dritten Bildes brauchen wir zwei Positionen auf 27%. Dann werde ich die linke Position los und setzen wir auf 240 Ram Okay, die Bilder sehen ziemlich gut aus. Als Nächstes werde ich mich um den Button kümmern, ich meine den Play-Button. Lass uns weitermachen und die Play-Taste wählen. Ich werde die Höhe für beide auf 17 Ram einstellen . Außerdem werde ich die Before-Sit-Elemente der Play-Taste anpassen. Lassen Sie uns hier vorher hinzufügen und innerhalb der Höhen festlegen, beide auf 23 Ram. Okay, der Button ist also personalisiert. Und zum Schluss werde ich mich hier um den Blar-Effekt kümmern hier um den Blar-Effekt kümmern Wir müssen Vorlagen mit vier Pseudoelementen auswählen. Ich stelle die Höhe für beide auf 60 Ram und ändere dann die untere Position auf 10% Okay Ich glaube, das steht ungefähr auf der Startseite am Breakpoint. Alles sieht gut aus Schauen wir uns den Videoplayer an, er sieht auch gut aus. Lass uns weitermachen und andere Seiten überprüfen. Die Kundenseite sieht gut aus. Was die Produktseite betrifft, werde ich hier einige Änderungen vornehmen. Gehen wir zum VS-Code und öffnen wir die Produkt-CSS-Datei. Ich werde eine neue CSS-Medienabfrage mit einer Mux-Breite von 1024 Teilen erstellen mit einer Mux-Breite von 1024 Teilen Zuallererst werde ich mich um die Überschrift im Absatz auf der linken Seite des ersten Abschnitts kümmern die Überschrift im Absatz auf der . Hier. Ich werde den Inhalt der Produkte auswählen. Wir benötigen den Inhalt der Produkte, dann brauchen wir H, eine Überschrift. Ich werde die Schriftgröße ändern. Es wird Ram sein. Lassen Sie uns diesen Code duplizieren und den Absatz auswählen. Die Schriftgröße für den Absatz wird 1,5 Runden betragen. Das ist es, ungefähr die linke Seite. Als nächstes werde ich mich um die Bilder auf der rechten Seite kümmern . Lassen Sie uns fortfahren und Produkte, Inhalt rechts auswählen, gefolgt von den Bildelementen. Und dann müssen wir das Diagramm auswählen. Da wir das erste Bild auswählen müssen, stelle ich 228 Ram ein. Was die Höhe angeht, so wird es 55 Ram sein. Dann werde ich diesen Code zweimal duplizieren , weil wir uns auch um die restlichen zwei Bilder kümmern müssen. Wir brauchen hier Bild zwei. Lassen Sie uns die Höhe loswerden und die Breite ändern. Es werden 15 Ram sein. Was das dritte Bild angeht, werde ich mit 224 Ram spielen. Brauche Bild drei. Okay, ich finde, der erste Abschnitt sieht gut aus. Als Nächstes müssen wir uns um den Promo-Inhalt kümmern. Lassen Sie uns also weitermachen und dieses Element auswählen. Lassen Sie uns auf 70% setzen dann kümmere ich mich um die Überschrift. Wählen wir den Promo-Inhalt aus, gefolgt vom ersten Überschriftenelement H. Ich werde die Telefongröße auf 2,5 RAM einstellen. Jetzt sieht die Überschrift gut aus. Als nächstes müssen wir uns um die Formen kümmern, ich meine das Rechteck und diese Kreise. Lassen Sie uns weitermachen und mit dem Promo-Rechteck beginnen. Ich stelle die Höhe auf 50 m ein. Ich meine beide Eigenschaften, dann wähle ich den kleinen Kreis aus. Lassen Sie uns die Position des Kreises ändern. Ich werde die oberste Position auf 25% setzen . Die richtige Position wird 40% betragen. Als Nächstes werde ich mich um die großen Kreise kümmern. Wählen Sie einen großen Kreis aus, dann nehme ich die Höhe innerhalb der Höhe von hier aus. Stellen wir die Höhe ein, beide auf 40 Gramm. Okay, der Inhalt von Romo sieht nett aus. Ich werde hier die Position des großen Kreises ändern hier die Position des großen Kreises Sobald wir den Mauszeiger über das Element bewegen, wähle ich den großen Kreis die Klasse animiert ist, setze Wenn die Klasse animiert ist, setze ich die Weitwinkelposition auf -2%, okay Jetzt denke ich, dass wir mit dieser Seite tatsächlich viel bessere Ergebnisse erzielt haben mit dieser Seite tatsächlich viel bessere Ergebnisse erzielt Wir sind fertig. Lassen Sie uns die Inhaltsseite überprüfen. Es sieht gut aus. Die Kontoseite sieht gut aus. Sowie für die Preisseite. Ich werde hier einige Änderungen vornehmen. Lassen Sie uns die Preisdatei öffnen und eine neue CSS-Medienabfrage erstellen. Lassen Sie uns hier die maximale Breite angeben. Es werden 1024 Pixel sein. Ich werde das Auto mit Preisgestaltung auswählen. Ich werde die Breite 24 auf einstellen. Dann nehme ich dich aus dem Rechteck. Wählen wir ein Rechteck aus. Ich werde die Position ändern. Die oberste Position wird 28% betragen dann die linke Position 5%. Außerdem werde ich mich mit der Körpergröße ändern. Stellen wir beide auf 40 Gramm ein. Lass uns den Browser überprüfen. Hier haben wir das Rechteck. Als nächstes kümmern wir uns um den großen Kreis. Ich werde diesen Code duplizieren. Lass uns den Klassennamen ändern. Wir brauchen Large Circle statt Top- und Let-Eigenschaften. Wir brauchen die Positionen unten und rechts. Die unterste Position wird 10% sein . Dann ändere ich von links nach rechts und die rechte Position wird 5% betragen . Was die innere Höhe angeht, werde ich beide auf 30 Ram setzen. Tatsächlich wird der Code nicht auf die Elemente angewendet, weil wir hier einen großen Kreis angeben müssen und nicht nur einen großen Kreis. Lassen Sie uns nun den Browser überprüfen, der Code ist angewendet. Ein großer Kreis ist gut. Lassen Sie uns Sie aus dem kleinen Kreis herausnehmen. Lassen Sie uns diesen Code duplizieren. Ich benutze, deine oberste Position wird 30% sein, dann brauchen wir richtige Position wird 5% sein . Es ist wahrscheinlich innerhalb der Höhe. Ich stelle beide auf sechs Rap, den wir hier brauchen. Kleiner Kreis. Okay, eigentlich denke ich, dass wir den Kreis leicht nach oben verschieben können. Lassen Sie uns also die oberste Position verringern. Lassen Sie uns den Wert auf 28% setzen. Ich werde den Wert erneut ändern. Nehmen wir an, wir erreichen eine Spitzenposition von 26%. Okay, ich denke, das sind ungefähr diese Breakpoints. Alle Seiten sehen gut aus. Als Nächstes müssen wir unser Projekt auf Tablets responsiv machen. Lassen Sie uns diesen Grenzpunkt hier überprüfen und mit der nächsten Lektion fortfahren, in der wir damit beginnen, das Projekt auf Tablets responsiv zu gestalten . 67. Hamburger-Menü erstellen - Teil 1: Ordnung, in der vorherigen Vorlesung haben wir die Arbeit am Breakpoint abgeschlossen Wie gesagt, wir müssen weitermachen und das Projekt auf Tablets responsiv Ich meine, an diesen Breakpoints hier gehen wir zum Browser und ändern die Abmessungen des Bildschirms Wir brauchen hier 820 Pixel und dann 11 80 Pixel. Das ist die Bildschirmgröße des Tablets. Gehen wir zum VS-Code und öffnen wir die Style-CSS-Datei. Ich werde eine neue CS-Medienabfrage erstellen. Lassen Sie uns die maximale Breite angeben. Es werden 820 Pixel sein. Okay. Bevor wir also anfangen, den Code zu schreiben, werde ich die fertige Version unseres Projekts an diesem Breakpoint überprüfen . Wie Sie sehen können, haben wir hier die Navigationselemente nicht mehr . Sie können hier das Menüsymbol sehen. Wenn ich darauf klicke, bekommen wir hier das Hamburger-Menü. Wir haben hier Navigationspunkte. Unten sehen Sie die Preise unten. Wenn ich auf eines der Navigationselemente klicke, werden hier die Drop-down-Menüs angezeigt. Wir müssen die Navigation ändern. Ich meine, wir müssen die Navigation umgestalten , damit sie so aussieht. Gehen wir zum VS-Code. Als erstes werde ich die Navigationselemente ausblenden. Ich werde Nova-Artikel auswählen. Dann füge ich hier Display N hinzu. Wie ich sehen kann, sind die Navigationselemente ausgeblendet. Als Nächstes erstelle ich das Menüsymbol. Dafür gehe ich direkt nach dem Logo zum Index der HTM-Datei Ich werde neue Kommentare für das Menüsymbol einfügen. Dann öffne ich Deep Tug, es wird das Menüsymbol sein Das Menüsymbol wird aus zwei Zeilen bestehen. Ich werde Deep Tug mit der Kurszeile öffnen. Und dann brauchen wir Zeile eins. Der erste ist der gemeinsame Klassenname. Was den zweiten betrifft, so handelt es sich um einen individuellen Klassennamen. Ich werde diesen Code duplizieren , weil wir zwei Zeilen benötigen. Lass uns den Klassennamen ändern. Es wird Zeile zwei sein. In Ordnung, das Menüsymbol ist erstellt. Als Nächstes werde ich dieses Element anpassen. Ich wähle das Menüsymbol aus. Lass uns fertig sein, wir können beide vor vier Ram verstecken. Ich werde hier eine temporäre Hintergrundfarbe hinzufügen um das Symbol anzuzeigen Lass uns zum Browser gehen. Wie Sie sehen können, haben wir hier das Menüsymbol. Okay, lassen Sie uns die Position des Menüsymbols definieren. Ich werde es auf absolute Aminoposition fünf Ram setzen. Richtig? Position wird auch fünf Ram sein. Ordnung, danach werde ich die Zeilen anzeigen. Im Moment sind es nur leere Entwicklungen. Deshalb können wir die Linien auf der Seite nicht sehen. Ich wähle die Zeile aus und setze sie auf 100%, dann beträgt die Höhe 0,4 Ram. Was die Hintergrundfarbe angeht, werde ich sie auf Weiß setzen. Jetzt werde ich die temporäre rote Hintergrundfarbe entfernen . Wir haben hier zwei Zeilen. Wie Sie jetzt sehen können, müssen wir diese Linien trennen, und dafür können wir Flexbox verwenden. Ich werde dem Menüsymbol eine Flexbox hinzufügen. Wenn es Flex anzeigt, müssen wir die Richtung ändern, da die Linien vertikal in einer Spalte angeordnet werden sollten. Die Flex-Richtung wird die Spalte sein. Dann brauchen wir Platz zwischen den Zeilen. Und dafür werde ich den inhaltlichen Abstand dazwischen rechtfertigen. Solchen Platz brauchen wir hier nicht. Eigentlich sollte die Höhe des Menüsymbols zwei m und nicht vier m betragen . Jetzt sieht das Menüsymbol gut aus. Als Nächstes werde ich die Navigation transformieren und sie so aussehen lassen. Wir müssen die Hintergrundfarbe der Navigation ändern, und wir müssen auch die Farbe des Textes und des Symbols ändern . Gehen wir zum VS-Code. Ich werde Nuer auswählen. Lass uns die Hintergrundfarbe ändern. Es wird weiß sein. Dann werde ich die Farbe des Logos ändern. Lassen Sie uns weitermachen und Nuer auswählen, gefolgt vom Logo. Und dann brauchen wir das Span-Element. Ich werde die Farbe auf F40 setzen. Dann fange ich dir Text Shadow an, sagen wir mal None Da Sie die Farbe des Textes sehen können, meine ich, die Farbe des Logos hat sich geändert und es sieht gut aus. Als Nächstes werde ich das Menüsymbol anpassen. Ich werde die Hintergrundfarbe ändern. Lassen Sie uns hier dieselbe Farbe verwenden , die wir vor einer Minute verwendet haben. Wir brauchen hier 40. Wie Sie sehen können, haben die Linien eine unterschiedliche Hintergrundfarbe. Als Nächstes werde ich das Symbol in eine X-Schließtaste umwandeln. Dafür wähle ich Zeile eins aus. Ich werde die Transformationseigenschaft verwenden. Bei der Drehfunktion beträgt der Wert 45 Grad. Außerdem werde ich die Linie mit der übersetzten Y-Funktion leicht verschieben . Der Wert wird 1.2 sein. Lassen Sie uns diesen Code duplizieren und die zweite Zeile, die wir hier benötigen, anpassen Drehen wir sie um negative 45 Grad. Was die übersetzte Y-Funktion betrifft, brauchen wir hier negativ 1.2 Lassen Sie uns den Browser überprüfen. Wie Sie sehen können, haben wir hier x. Jetzt müssen wir uns um die Navigationspunkte kümmern . Im Moment sind sie versteckt. Ich werde Display None loswerden Statt Display None füge ich hier Display Flex hinzu. Wir müssen die Navigationselemente vertikal in einer Spalte platzieren . Daher muss die Flex-Richtung der Spalte entsprechen. Als Nächstes werde ich Elemente mithilfe von justify content flexibilisieren. Elemente biegen, starten und ausrichten. Flex-Start-Eigenschaften und -Werte. Lassen Sie uns den Browser überprüfen. Wir haben hier Navigationspunkte. Wir müssen die Position des Elements ändern. Setzen wir es auf absolut. Dann setze ich die Position zwei auf 12 Ram, weil die Höhe des oberen Rams 12 Ram beträgt. Was die linke Position angeht, werde ich sie auf Null setzen. Dann definiere ich mit Höhe, die Breite der Navigationselemente wird 100% sein. Was die Höhe angeht, werde ich hier eine kleine Berechnung durchführen, wir brauchen Schnittfunktion, die Höhe beträgt 100, Höhe des Viewpots -12 Gramm, was der Höhe der Wenn ich hier die Akron-Farbe mit dem Wert 245 hinzufüge, erhalten wir In Ordnung, jetzt müssen wir die Navigationselemente anpassen. Ich werde das Navigationselement auswählen , aber ich muss das letzte Element ausschließen. Ich meine, wir brauchen hier keine Pseudoklasse, wir müssen hier das letzte Kind hinzufügen Jetzt der Code, ich meine die Kacheln, werden für alle Nov-Artikel außer dem letzten Kind angewendet alle Nov-Artikel außer dem letzten Kind Unten stelle ich die Breite auf 100% ein, dann beträgt die Höhe 12 Gramm. Außerdem werde ich Flexbox verwenden. Wir müssen die Gegenstände in der Mitte ausrichten. Dann werde ich mit Polsterung etwas Platz auf der linken Seite schaffen mit Polsterung etwas Platz auf der linken Seite Links drei Ram. Die Navigationselemente sind gut ausgerichtet. Jetzt müssen wir die Links anpassen. Ich werde hier keinen Artikel auswählen, den wir benötigen. Kein Element, gefolgt von den Link-Elementen. Auch hier müssen wir den Boden ausschließen. Ich werde hier einfügen. Kein BTN. Lass uns die Farbe des Links ändern. Die Farbe wird zwischen 0926 und sieben liegen. Und lasst uns auch den Schatten loswerden. Setzen wir Tech Shadow auf Non. Wie Sie sehen können, sehen die Links gut aus. Danach werde ich diese Pluszeichen hier erstellen. Und das werde ich mit vier Elementen machen. Lassen Sie uns fortfahren und „Kein Element“ auswählen, gefolgt von den vier Elementen als Inhalt, den ich hier einfügen werde , plus Sinus. Dann benötigen wir die Schriftgröße. Es wird Form sein. Außerdem werde ich die Farbe ändern. Lassen Sie uns hier die Farbe F4a0 verwenden. Hier haben wir die Plus-Sinus. Eigentlich brauchen wir keinen Plus-Sinus mit der Taste, ich werde den Button hier ausschließen Dafür müssen wir wieder verwenden. Dann müssen wir hier das letzte Kind hinzufügen. Wie Sie sehen können, haben wir hier kein Pluszeichen mehr. In Ordnung. Jetzt müssen wir uns um die Position des Pluszeichens kümmern . Dafür setze ich die Position auf absolut. Dann müssen wir die Position auf 50% einstellen, da die richtige Position Null sein wird. Dann müssen wir das Element vertikal zentrieren. Dafür transformiere ich Y um -50%. Wie Sie sehen können, haben wir hier den Plus-Sinus Als Nächstes definiere ich Breite und Höhe. Die Breite wird zehn sein. Was die Höhe angeht, würde ich sagen, dass sechs gelaufen sind. Wir müssen die Elemente zentrieren. Dafür verwende ich Display Flex mit Justify Content Center und einem Line Item Center. Okay, das war's, mit dem Pluszeichen. Als nächstes müssen wir uns um den letzten Navigationspunkt kümmern, nämlich um diese Schaltfläche hier. Ich meine die niedrigste Preisgestaltung. Ich wähle Novem, gefolgt vom letzten. Schau dir die Klasse an, lass uns die Position absolut setzen. Dann müssen wir die untere Position auf Null setzen. Außerdem brauchen wir die linke Position, sie wird ebenfalls Null sein. Dann müssen wir Breite und Höhe definieren. Die Breite wird 100% betragen. Was die Höhe angeht, werde ich 12 Ram daraus machen. Dann definiere ich die Hintergrundfarbe. Es wird weiß sein. Schauen wir uns den Browser an, den wir hier unten haben. Lassen Sie uns die Flexbox verwenden, um das Element auszurichten. Lassen Sie uns Display auf Flex setzen. Dann müssen wir die Inhaltsmitte ausrichten und die Elemente mittig ausrichten, um die Unterseite zu zentrieren. Wie Sie sehen können, ist die Unterseite zentriert. Lassen Sie uns hier Schatten mithilfe von Box Shadow hinzufügen. Die Werte werden 01 Ram sein, zehn Ram als Farbe, ich werde R GPA verwenden Die Werte werden 130-16-2235 und die Opazität 0,2 sein. Das war's mit den übergeordneten Jetzt müssen wir den Button selbst anpassen. Lassen Sie uns weitermachen und PTN auswählen. Ich setze auf 290, 5%, dann beträgt die Höhe sechs Ram Nehmen wir eine beliebige Hintergrundfarbe, ich nehme 40. Dann muss die Farbe weiß sein. Schließlich setze ich die Punktgröße auf 2,2 m. Okay? Wie Sie sehen können, sieht die Unterseite ziemlich gut aus. Eigentlich haben wir hier das gleiche Ergebnis , das wir als nächstes brauchten. Wir müssen dafür sorgen, dass das Hamburger-Menü funktioniert, und wir müssen uns auch um die Drop-down-Menüs dafür kümmern Fahren wir mit der nächsten Vorlesung fort. 68. Hamburger-Menü erstellen - Teil 2: In der vorherigen Vorlesung haben wir also damit begonnen, Project responsiv für Tablets zu gestalten Sie können hier die Abmessungen für Tablets sehen. Wir kreieren das Hamburger-Menü. In dieser Vorlesung werde ich die Drop-down-Menüs anpassen, weil sie momentan die Drop-down-Menüs anpassen nicht besonders gut aussehen Ich werde alle fünf Dropdowns gestalten. Gehen wir zurück zum DS-Code. Als Erstes werde ich diese Dreiecke hier verstecken, weil wir sie nicht mehr brauchen. Ich meine, wir brauchen sie nicht für Tablets. Wählen wir novem, gefolgt von dem After-Element, das wir hier benötigen. Um das After-Element auszublenden, verwende ich Display None Wie Sie sehen können, sind die Dreiecke versteckt. Als Nächstes wähle ich das erste Drop-down-Menü aus. Ich definiere mit, es wird 100% sein Dann müssen wir die oberste Position ändern Es wird 12 Gramm sein. Was die Beinposition angeht, werde ich sie auf Null setzen. Lass uns den Browser überprüfen. Wie Sie sehen können, hat sich die Position geändert. Eigentlich sehen wir hier die Nava-Artikel. Das bedeutet, dass das Drop-down-Menü hinter den Nav-Elementen gelandet Um dieses Problem zu beheben, verwende ich die Index-Eigenschaft. Lassen Sie uns sie auf 100 setzen. Jetzt ist das Problem behoben. Als Nächstes werde ich die Grenzideen von hier aus loswerden. Ich werde den Grenzradius auf Null setzen, um den Boxschatten loszuwerden Lassen Sie uns ihn auf „Keiner“ setzen. Dann werde ich die Richtung des Flexes ändern. Ich meine, ich werde Funktionen und Dienste vertikal übereinander platzieren . Deshalb werde ich die Flex-Richtung auf Spalte setzen und dann Pudding loswerden Ich werde es auf Null setzen , dass es ungefähr oben nach unten sitzt, ich meine den Wrapper als nächstes, ich werde mich um die linke und rechte Seite kümmern , weil das Top-Down-Menü momentan schrecklich aussieht Ich wähle Top Down, eins links. Stellen wir 100% dann beträgt die Höhe 50%. Als Nächstes werde ich mit Marching Bottom Platz am unteren Rand schaffen mit Marching Bottom Platz am unteren Rand Stellen wir es auf fünf Ram ein. Endlich brauchen wir Polsterung. Stellen wir es auf zwei Ram ein. Ordnung, danach wähle ich die Liste der Funktionen aus. Lassen Sie uns die Liste der Funktionen auswählen. Ich stelle die Höhe auf 100% verwende dann Flex Box. Lassen Sie uns das Display auf Flex setzen. Dann müssen wir die Richtung ändern. Lassen Sie uns die Flex-Richtung auf die Spalte setzen. Und schließlich müssen wir die Flex-Artikel verpacken. Ich meine, wir müssen die Flex-Artikel auf ein paar verschiedenen Linien platzieren . Wir brauchen Flex Wrap, um die linke Seite des Drop-down-Menüs zu umwickeln. Sieht gut aus. Als Nächstes kümmere ich mich um die rechte Seite. Lassen Sie uns weitermachen und das Drop-down-Menü rechts auswählen. Ich werde die Breite auf 100% setzen , dann wird die Höhe 75 Ram sein. Eigentlich nicht Ram, sondern Prozent. Dann setze ich die Polsterung auf der Oberseite auf Null, dann zwei Ram auf der rechten Seite, 13 Ram auf der Unterseite und zwei Ram auf der linken Seite Okay, als Nächstes wähle ich Drop-down-Dienste aus. Lassen Sie uns die Breite auf 100% setzen, dann wird die Höhe 100% sein. Dann brauchen wir ihr Display Flex. Außerdem werde ich die Richtung ändern, in der es die Spalte sein wird. Und wie in der Feature-Liste verwende ich hier eigentlich die gleichen Werte. Fügen wir hier einfach den Klassennamen hinzu. Und werde diesen Code von hier aus los. Wie Sie sehen können, sieht die rechte Seite gut aus. Ich werde die Hintergrundfarbe ändern. Fügen wir hier die Hintergrundfarbe Weiß hinzu. Okay, ich finde, das erste Drop-down-Menü sieht gut aus. Als nächstes müssen wir uns um das zweite Drop-down-Menü kümmern. Ich werde Dropdown zwei auswählen. Lassen Sie uns zunächst die Höhe innerhalb der Höhe definieren. Die Breite wird 100% betragen. Was die Höhe angeht, werde ich sie auf 75 Ram setzen. Dann werde ich die Position ändern. Die Spitzenposition wird 12 Ram sein. Was die linke Position betrifft, setzen wir sie auf Null und überprüfen dann den Browser. Hier haben wir das zweite Dropdown. Wie beim ersten müssen wir die Index-Eigenschaft verwenden, da sie hinter den Nub-Elementen gelandet ist Ich werde den Index auf 100 setzen. Jetzt ist das Problem behoben. Als nächstes müssen wir, wie Sie vermuten, die Richtung der Flexbox ändern . Ich werde das ändern, ich werde die Flex-Richtung auf die Spalte setzen , die wir hier brauchen, Spalte. Okay. Als Nächstes werde ich den Radius los, setzen wir ihn auf Null. Außerdem brauchen wir keinen Box-Shadow, es wird keiner sein. Und dann setze ich die Polsterung auf zwei Ram an der Oberseite, auf Ram auf der rechten Seite, Null an der Unterseite und zwei Ram auf der linken Seite Als Nächstes werde ich etwas Abstand zwischen den Elementen schaffen. Ich wähle die zweite Dropdownliste mit Entwicklung setze den Rand oben auf Null, auf 0,5 Ram auf der rechten Seite, zwei Ram auf der Unterseite und auf 0,5 Ram auf der linken Seite. Wir haben hier etwas Platz. Als Nächstes wähle ich die Elemente aus und verkleinere sie. Lassen Sie uns weitermachen und Drop Down to auswählen, dann brauchen wir Entwicklungen. Und dann setzen wir die Schriftgröße auf fünf Ram. Nun haben wir hier das Problem mit der Höhe des Dropdowns. Ich habe hier, Höhe 75 Ram. Lassen Sie uns diesen Wert von hier aus loswerden und die Höhe einfach auf Auto setzen. Lassen Sie uns die Ergebnisse überprüfen. Okay, das Dropdown sieht eigentlich ziemlich gut aus, mit dem zweiten Drop-down-Menü sind wir fertig Lassen Sie uns weitermachen und uns um den Rest der Dropdowns kümmern. Eigentlich werden wir einige ähnliche Werte und Eigenschaften verwenden , um immer wieder denselben Code zu schreiben Ich werde alle Dropdowns gleichzeitig auswählen. Fangen wir mit der ersten an, dann werde ich sie fünfmal duplizieren und die Zahlen ändern, die wir benötigen Lass zwei fallen, dann lass drei fallen. Als nächstes fallen wir vier runter und schließlich fallen fünf runter. Ich werde mir von hier einige Immobilien wie diese beiden Immobilien hier schnappen . Lass uns sie schneiden. Außerdem benötigen wir den Schatten und den Randradius der Box sowie die Index-Eigenschaft. Fügen wir sie hier hinzu. Ich werde diese Eigenschaften aus dem zweiten Drop-down-Menü löschen . Okay, jetzt denke ich, dass alle fünf Drop-down-Menüs gut aussehen sollten. Lass uns nachschauen, die Produkte sehen gut aus. Als nächstes haben wir Kontakt. Es sieht auch gut aus. Und das Drop-down-Menü für das Konto sieht auch gut aus. Okay, alle fünf Drop-down-Menüs sind individuell angepasst. Als Nächstes müssen wir dafür sorgen, dass das Hamburger-Menü dafür funktioniert. Fahren wir mit der nächsten Vorlesung fort. 69. Damit Hamburger-Menü funktionieren: In der vorherigen Vorlesung haben wir die Drop-down-Menüs für alle Navigationselemente angepasst Drop-down-Menüs für alle Navigationselemente In dieser Vorlesung werde ich nun dafür sorgen, dass das Hamburger-Menü funktioniert Lassen Sie uns weitermachen und uns das fertige Projekt ansehen. Standardmäßig haben wir hier das Menüsymbol und die Navigationselemente sind ausgeblendet. Wenn ich auf das Symbol klicke, erscheint die Navigation. Navigationselemente mit den Drop-down-Menüs. Ich werde mich in diesem Vortrag um diese Dinge kümmern. Gehen wir zum VS-Code. Das Erste, was ich tun werde, bevor wir anfangen, die Navigation zum Laufen zu bringen, ist, ich einen kleinen Fehler aus der vorherigen Vorlesung habe. Wenn wir uns die beiden Drop-down-Menüs ansehen, werden Sie feststellen, dass uns hier die Flex-Richtung mit der Wertespalte fehlt . Wir haben es entfernt. Statt dieser Zeile müssen wir Box Shed bei keinem entfernen. Das war mein Fehler. Okay, jetzt können wir damit beginnen, das Hamburger-Menü zum Laufen Das erste, was ich tun werde, ist, zur Javascript-Datei zu gehen und das Menüsymbol auszuwählen Ich werde eine neue Variable erstellen, nennen wir sie Menüsymbol und wählen sie dann mit der Abfrageselektor-Methode Ich werde hier den Klassennamen und das Menüsymbol angeben. Das Menüsymbol ist ausgewählt und jetzt müssen wir dem Symbol mit Click-Event einen Event-Listener hinzufügen Ich werde dem Menüsymbol einen Event-Listener hinzufügen. Wie gesagt, wir müssen hier auf das Ereignis klicken, gefolgt von der Calbeck-Funktion, die ausgeführt wird, sobald wir auf das Menüsymbol in der Calbeck-Funktion klicken das Menüsymbol in der Calbeck-Funktion Ich werde dem Knapper mithilfe der Total-Methode einen neuen Klassennamen hinzufügen Knapper mithilfe der Total-Methode einen neuen Klassennamen Sobald wir auf das Menüsymbol geklickt haben, müssen wir der Schaltfläche eine neue Klasse hinzufügen Und sobald wir erneut klicken, müssen wir diesen Klassennamen aus dem Nickerchen entfernen. Dafür müssen wir die Methode to verwenden, wir brauchen hier die Oberklassenliste, gefolgt von der Total-Methode Ich werde hier eine neue Klasse hinzufügen, nennen wir sie Hamburger Gehen wir zur CSS-Datei. Ich werde Nov-Artikel ausblenden, indem ich „Keine anzeigen“ verwende. Dann müssen wir den folgenden Elementen die neu erstellte Klasse Hamburger hinzufügen folgenden Elementen die neu erstellte Klasse Hamburger hinzufügen Das erste sind Nov-Artikel, wir müssen hier Hamburger hinzufügen Als Nächstes füge ich der Navbar die Klasse Hamburger hinzu Außerdem müssen wir hier Hamburger hinzufügen . Dann werde ich dem Novem Hamburger hinzufügen. Dann brauchen wir Novem für die Link-Elemente. Schließlich werde ich den Zeilen Hamburger hinzufügen. Ich meine Zeile eins und Zeile zwei als hier C-Hamburger. Okay, lass uns zum VS-Code gehen und dann das Ergebnis überprüfen. Sobald ich auf das Menüsymbol klicke, werden die Navigationselemente angezeigt. Wenn wir dann auf die schließende X-Schaltfläche klicken, die Höhe der Navigation in Ordnung. Alles funktioniert gut. Als Nächstes müssen wir die Farbe des Menüsymbols ändern , da es weiß sein sollte. Ich suche nach einer Linie und ändere die Farbe auf Weiß. Ich werde den Übergang beibehalten, um einen gleichmäßigeren Effekt zu erzielen, den wir hier transformieren müssen Dann wird die Dauer 0,3 Sekunden betragen. Außerdem werde ich die sogenannte Transition-Timing-Funktion verwenden. Wie Sie sehen können, haben wir hier weiße Linien. Wenn ich auf das Menüsymbol klicke, verwandeln sich die Linien glatter. Sobald wir jedoch die Navigation angezeigt haben, sehen wir das Menüsymbol nicht mehr , da die Linien weiß sind Wir müssen uns darum kümmern. Ich wähle Line mit der Hamburger-Klasse, die wir ändern müssen, wir brauchen hier die Zeile mit dem Klassennamen Wir müssen die Hintergrundfarbe ändern und es wird f40 sein Okay, jetzt funktioniert alles gut. In Ordnung. Als Nächstes werde ich hier ein paar kleine Probleme beheben. Ich meine, sobald wir die Navigation aufrufen und dann nach unten scrollen, siehst du, dass das Nickerchen klebrig geworden ist. Und das brauchen wir eigentlich nicht. Wir müssen diese Aktion verhindern. Gehen wir zurück zur Vs-Datei und suchen wir das Fenster mit dem Scroll-Ereignis. Jetzt müssen wir eine Anweisung verwenden, bei der wir angeben müssen, ob die Fensterbreite kleiner oder gleich 820 Pixeln ist Wenn die Of-Leiste die Klasse Hamburger hat, müssen wir diese beiden Bedingungen gleichzeitig überprüfen Ich verwende die if-Anweisung und die Bedingung ist, dass innere Breite des Fensters kleiner oder gleich 820 Pixeln ist kleiner oder gleich 820 Pixeln Wir müssen überprüfen, ob die Bar-Klassenliste die Klasse Hamburger enthält Wenn diese Bedingung zutrifft, müssen wir die Klasse Sticky aus der oberen Spalte entfernen Wir müssen hier keine Klassenliste entfernen. Wir müssen hier den Klassennamen Sticky angeben. Außerdem müssen wir die L-Anweisung verwenden. Wenn die Bedingung falsch ist, müssen wir die Klasse Sticky basierend auf der Scroll-Position umschalten die Klasse Sticky basierend auf der Scroll-Position Wenn die Scroll-Position, das Scroll-Y des Fensters, größer als Null ist, dann müssen wir die Klasse Sticky hinzufügen Andernfalls müssen wir es entfernen. Wir müssen hier die Klassenliste für Togo übergeben. Wir müssen hier zwei Dinge spezifizieren. Wir brauchen Sticky für Klassennamen, dann brauchen wir Window Scroll. Y ist größer als Null. In Ordnung, ich denke, das ist es. Jetzt sollte der Code funktionieren. Lassen Sie uns die Ergebnisse überprüfen. Ich werde die Navigation anzeigen. Wenn wir dann nach unten scrollen, haben wir hier das gleiche Ergebnis. Irgendwas stimmt hier nicht. Lass uns den Code überprüfen. Der Zustand ist korrekt. Wir müssen Class Ticky aus dem Nein-Teil entfernen. Und dann müssen wir es mit der Klasse togal hinzufügen. Ja, wir brauchen diese If-Anweisung hier nicht mehr. Wir müssen es entfernen, weil wir mit der Total-Methode die Klasse Sticky zum Now-Teil hinzufügen Total-Methode die Klasse Sticky zum Now-Teil Wir benötigen die vorherige if-Anweisung nicht mehr. Jetzt sollte der Code funktionieren. Lassen Sie uns die Navigation anzeigen und dann nach unten scrollen. Und ja, das klebrige No-Teil haben wir hier nicht mehr. Okay. Wenn ich die Navigation schließe und dann nach unten scrolle, wirst du sehen, dass das Symbol nicht mehr sichtbar ist. Ich meine, die Linien sind weiß und auch die Position ist anders. Wir brauchen diese Position nicht für das Symbol. Kümmern wir uns darum. Ich gehe zurück zur AVES-Datei. Wir müssen die if-Anweisung innerhalb des Scroll-Events erstellen. Wir müssen prüfen, ob Eigenschaft Window Scroll Y größer als Null ist. Wenn diese Bedingung zutrifft, füge ich dem Menüsymbol eine neue Klasse hinzu, die dann in der CSS-Datei verwendet wird. Um neue Stile zu erstellen, benötigen wir das Menüsymbol und die Klassenliste. Ich nenne die neue Klasse Position , weil wir die Position des Menüsymbols ändern. Andernfalls, wenn die Bedingung falsch ist, benötigen wir eine L-Anweisung, in der wir die Klasse entfernen müssen. Position aus dem Menü. Außerdem brauchen wir noch eine If-Anweisung, bei der wir überprüfen müssen, ob das Nickerchen Klassen-Hamburger enthält oder nicht Wir benötigen eine if-Anweisung mit der folgenden Bedingung. Wir brauchen Class Contains. Wir müssen hier den Klassennamen Hamburger angeben. Wenn diese Bedingung zutrifft, müssen wir die Klassenposition aus dem Menü entfernen Wir brauchen dieselbe Aussage. Als Nächstes müssen wir die Klassenposition verwenden und neue Stile definieren. Ich werde das Menüsymbol finden. Hier haben wir es. Lassen Sie uns die Klassenposition verwenden, gefolgt vom Menü. Ich setze die Position auf vier m. Dann müssen wir transformieren, um Y -50% zu transformieren. setze die Position auf vier m. Dann müssen wir transformieren, um Y -50% zu transformieren Fügen wir hier einen Übergang hinzu, um einen gleichmäßigeren Effekt zu erzielen. Wir benötigen hier 0,3 Sekunden Außerdem müssen wir die Farbe der Linien ändern. Ich werde hier kein Sticky hinzufügen, gefolgt von der Linie. Wir müssen die Farbe der Linie ändern , wenn wir die klebende Alper haben . Deshalb verwende ich Nob-Sticky-Farbe Die Hintergrundfarbe wird zwischen 0926 und sieben liegen. Okay, lass uns nachsehen. Wenn ich nach unten scrolle, wird die Position des Symbols geändert. Und auch hier haben wir dunkle Linien. Okay, alles funktioniert gut. Als nächstes müssen wir uns um die Drop-down-Menüs kümmern . Sobald wir auf den Navigationspunkt klicken, sollte das richtige Dropdown-Menü erscheinen Sobald wir dann zurück zum Navigationselement klicken , sollte es ausgeblendet werden Im Moment denken Sie vielleicht, dass wir hier bereits ein Click-Event haben, aber das ist nicht richtig. Es ist ein Hover-Effekt. Wenn Sie eine kleinere Bildschirmgröße haben, funktioniert der Hover-Effekt wieder wie ein Klickereignis , das ist kein Klickereignis Wir müssen es erstellen. Wir müssen das Drop-down-Menü anzeigen und klicken. Und wir müssen dieses Zeichen auch hier transformieren. Wir brauchen ein Minuszeichen statt eines Pluszeichens. Lass uns weitermachen und diese machen. Ich werde eine neue Variable erstellen und es werden keine Elemente sein. Wir müssen alle Nov-Artikel auswählen. Wählen wir sie mit der Methode Query Select oder All aus. Ich werde hier den Klassennamen angeben. Es wird ein Navigationselement sein. Als Nächstes werde ich mir die Nov-Artikel ansehen. Lassen Sie uns für jede Methode, die wir hier benötigen, den Parameter n item verwenden Wir müssen jedem Nav-Element ein Klickereignis hinzufügen. Wir brauchen hier kein Element gefolgt von der Listener-Methode add event Wir müssen hier das Klickereignis angeben. Außerdem werde ich hier eine Callback-Funktion einrichten. Jetzt müssen wir überprüfen, ob das angeklickte Navigationselement eine neue Klasse hat, die dann in der CSS-Datei verwendet wird , um neue Stile zu erstellen Ich meine dieselbe Technik, die wir während des gesamten Projekts verwendet haben Auch hier müssen wir überprüfen, ob das angeklickte Navigationselement die neue Klasse hat Ich werde if-Anweisungen verwenden , bei denen wir die folgende Bedingung erfüllen müssen Novem-Klassenliste enthält und wir müssen hier den Klassennamen angeben Ich nenne es Show. Wenn diese Bedingung wahr ist, müssen wir sie entfernen. Ich meine, wir müssen die Sichtbarkeit ausschalten. Ich werde hier Nav-Artikel hinzufügen, Klassenliste entfernen. Wir müssen hier den Klassennamen angeben. Dann brauchen wir eine L-Anweisung , wenn die Bedingung falsch ist. Wenn für das Navigationselement die Klasse nicht angezeigt wird, müssen wir durch alle Navigationselemente iterieren Wir müssen die Klassenshow aus allen Elementen entfernen. Danach müssen wir die Klassenshow zum angeklickten Navigationselement hinzufügen Klassenshow zum angeklickten Navigationselement Das bedeutet, dass wir die vollständige Sichtbarkeit aktivieren müssen. Nochmals, ich werde neue Futterartikel sammeln. Wir müssen uns die Artikel ansehen. Lassen Sie uns das Parameterelement einhalten. Ich werde Class Show aus der Artikelliste entfernen . Punkt entfernen. Ich werde hier die Klassenausstellung bestehen. Und dann müssen wir dem Nob-Item eine Klassenshow hinzufügen. Wir brauchen hier eine Nob-Item-Klassenliste. Fügen Sie hinzu, wir müssen hier den Klassennamen angeben, anzeigen. Auch hier gilt: Wenn ein Navigationselement angeklickt wird, wird die Callback-Funktion ausgeführt Wenn das angeklickte Navigationselement bereits über die Show-Klasse verfügt, bedeutet dies, dass das Element derzeit sichtbar ist In diesem Fall entfernt der Code die Show-Klasse aus dem angeklickten Element, wodurch sie effektiv ausgeblendet Wenn das angeklickte Navigationselement dann nicht über die Show-Klasse verfügt, bedeutet dies, dass das Element derzeit ausgeblendet ist In diesem Fall entfernt der Code zunächst die Show-Klasse aus allen Navigationselementen Anschließend wird die Show-Klasse nur dem angeklickten Navigationselement hinzugefügt , sodass sie sichtbar ist, während alle anderen ausgeblendet Okay, hoffentlich verstehst du diese Dinge. Als Nächstes müssen wir zur CSS-Datei gehen und Drop Down finden. Ich werde Drop Down auswählen. Ich meine den allgemeinen Klassennamen, den wir hier brauchen, Opacity Zero und Visibility Hidden Dann wähle ich ein Nav-Element mit Hover-Fact aus. Dann müssen wir wieder Dropdown verwenden. Wir brauchen hier den gleichen Code. Ich meine die gleichen Eigenschaften und Werte. Dann wähle ich Novem aus, gefolgt von der Klasse. Dann müssen wir wieder nach unten gehen. Ich setze die Deckkraft auf eins und die Sichtbarkeit sichtbar. Auch hier denke ich, dass alles richtig ist. Lass uns zum Browser gehen und das Ergebnis überprüfen. Wenn ich auf das Navigationselement klicke, erscheint das Drop-down-Menü. Sobald ich zurück zum Navigationselement klicke , wird es beheizt. Wie Sie sehen können, funktioniert alles einwandfrei. Als nächstes müssen wir das Pluszeichen in ein Minus umwandeln. Gehen wir zum VS-Code und suchen ein Nov-Item mit vier Elementen. Hier haben wir es. Lassen Sie uns weitermachen und bei der Klassenausstellung kein Objekt auswählen, gefolgt von den vier. Sehen Sie sich das Element an. Wir müssen den Inhalt ändern und ihn zu einem Minus machen. Okay, lass uns den Browser überprüfen. Klicken Sie auf das Navigationselement. Wie Sie sehen können, haben wir hier jetzt Minuszeichen statt eines Pluszeichens, okay? Alles oder expine. Aber wir müssen noch etwas tun. Wenn ich die Navigation schließe, scrolle nach unten und klicke auf das Menüsymbol. Die Navigation wird angezeigt. Aber wie Sie sehen können, ist der jetzige Teil immer noch klebrig. Und auch die Hintergrundfarbe der Linien ist dunkel. Wir müssen diese Probleme lösen. Ich gehe zurück zur Java-Script-Datei. Ich werde hier hinzufügen, wo wir das Klick-Event mit Menüsymbol haben. Wir müssen Class Sticky aus dem Now-Teil entfernen. Ich werde hier keinen Schalter pro Klassenliste hinzufügen. Wir müssen hier den Klassennamen angeben, Hamburger. Dann müssen wir überprüfen, ob die Hamburger-Klasse nicht vorhanden ist und ob das Fenster gescrollt ist Ich werde hier eine IF-Anweisung hinzufügen , bei der wir die folgende Bedingung erfüllen müssen Wir brauchen keinen Operator, dann enthält die Klassenliste die Klasse Hamburger Dann brauchen wir hier einen Operator. Und wir müssen prüfen, ob das Scroll-Y des Fensters nicht gleich Null ist. Wenn diese Bedingung wahr ist, wenn beide Bedingungen wahr sind, bedeutet das, dass die Hamburger-Klasse nicht vorhanden ist und das Fenster gekritzelt ist In diesem Fall wird die Klasse Sticky zur Napper-Here-Liste hinzugefügt . Wir brauchen hier Sticky. Außerdem müssen wir hier dem Menüsymbol die Klassenposition hinzufügen. Holen wir uns diesen Codepass hier. Als Nächstes benötigen wir die L-Anweisung, bei der wir die Klassenposition aus dem Menüsymbol entfernen müssen, das wir entfernen. Okay, ich glaube, das ist es. Endlich sind wir mit dem Hamburger-Menü fertig. Lassen Sie uns den Browser überprüfen und auf das Menüsymbol klicken. Nun, es funktioniert nicht. Es bedeutet, dass wir einen Fehler haben. Lass uns den Code überprüfen. Die Bedingung in der Aussage ist korrekt. Dann müssen wir Sticky to hinzufügen, jetzt müssen wir die Klassenposition für das Menüsymbol angeben. Und dann müssen wir die Klassenposition vom Menüsymbol entfernen . Nun, wir haben hier einen Fehler. Ich weiß nicht, warum ich hier diese Zeile hinzugefügt habe. Eigentlich brauchen wir hier jetzt. Teilklassenliste, Klassen-Sticky entfernen. Es ist jetzt mein Fehler. Ich denke, es sollte funktionieren. Lass uns klicken. Und ja, alles funktioniert gut. Lass uns scrollen und dann klicken. Wie Sie sehen können, funktioniert alles perfekt. Also gut, lassen Sie uns über das Hamburger-Menü sprechen. Als Nächstes müssen wir die restlichen Abschnitte der Startseite anpassen die restlichen Abschnitte der Startseite Und wir müssen auch die anderen Seiten anpassen. Lassen Sie uns dazu mit der nächsten Vorlesung fortfahren. 70. Project responsive für Tablets machen: In der vorherigen Vorlesung haben wir die Arbeit am Hamburger-Menü abgeschlossen Arbeit am Hamburger-Menü Es funktioniert einwandfrei. Und jetzt müssen wir weitermachen und die restlichen Bereiche der Homepage anpassen . Und wir müssen auch die restlichen Seiten anpassen. Gehen wir zum VS-Code und wählen Header aus. Ich werde die Höhe der Kopfzeile ändern. Es wird eine Ansichtshöhe von 70 haben. Als Nächstes werde ich mich um diese Hintergründe kümmern , hier bin ich bei diesen drei Elementen. Lass uns weitermachen und PG Main auswählen. Ich werde die Breite erhöhen, sie wird auf 50% und ich werde auch die Position des Elements ändern. Die oberste Position wird -105% sein . Was die linke Position angeht, werde ich auf -50% setzen . Das ist alles, ungefähr der erste Hintergrund Als Nächstes müssen wir uns um diese beiden Hintergründe kümmern. Hier wähle ich G Lass uns die richtige Position ändern. Es wird -10% sein. Lassen Sie uns diesen Code duplizieren und die zweite Rückrunde anpassen Wir müssen den Klassennamen ändern Im Fall des zweiten Hintergrunds werde ich G zwei sein Fall des zweiten Hintergrunds Ich werde das Minuszeichen loswerden Lassen wir hier nur 10% übrig. Okay, lassen wir uns auf den Header konzentrieren, alles sieht gut aus. Als nächstes müssen wir uns um den Servicebereich kümmern. Lassen Sie uns weitermachen und Dienste auswählen. Ich werde die Höhe ändern. Sie wird 120 m hoch sein. Dann werde ich mich um den Hintergrund kümmern. Ich bin hier in dieser Form. Lassen Sie uns weitermachen und Dienste G one auswählen. Lass uns die Position ändern. zweite Position wird -20% sein . Was die richtige Position angeht, werde ich sie auf -5% setzen. Dann lassen Sie uns diesen Code duplizieren und den Klassennamen ändern Wir brauchen hier Dienste g zwei. Im Fall des zweiten Elements werde ich zur richtigen Position kommen. Dann brauchen wir hier die linke Position. Ich werde es auf Null setzen. Okay, das war's mit dem Servicebereich. Als nächstes müssen wir uns um den Projektbereich kümmern. Ich werde die Navigation anpassen. Lassen Sie uns fortfahren und Filter von auswählen. Ich werde die Breite ändern. Es wird 90% sein. Dann wähle ich das Link-Element, das wir hier füllen müssen, setze die Breite auf 12. Was die Höhe angeht, werde ich 4,5 Ram draus machen. Wie Sie sehen können, sieht die Navigation gut aus. Als nächstes müssen wir uns um die Projektliste kümmern. Ich wähle Projektliste und setze auf 90%. Als Nächstes werde ich mich um den Vorlagenbereich kümmern, werde ich mich um den Vorlagenbereich kümmern weil ich denke, dass wir mit dem Projektbereich fertig sind. Lassen Sie uns weitermachen und das Abschnittselement mit den Klassennamen-Vorlagen auswählen . Ich werde die Höhe auf 90 Ram setzen. Eigentlich nicht M, sondern Höhe angeben, dann setze ich den unteren Rand auf minus einen Ram. Dann werde ich mich um die linke Seite kümmern. Lassen Sie uns links die Vorlagen auswählen. Ich werde die linke Position auf 5% setzen. Außerdem werde ich die Polsterung ändern Die Polsterung beträgt 12 an der Oberseite, dann zehn Ram auf der rechten Seite, Null an der Unterseite und dann zehn Ram auf der linken Okay, danach werde ich mich um die Bilder auf der rechten Seite kümmern Lassen Sie uns weitermachen und Vorlagen auswählen. Genau dann brauchen wir ein Bild mit dem n-ten Child-Selektor. Ich werde das erste Bild auswählen . Lass uns die Breite ändern. Es werden 30 Rennen sein. Dann wechsle ich zur Position, ich werde auf 70% setzen. Lassen Sie uns diesen Code zweimal duplizieren , weil wir auch die verbleibenden zwei Bilder anpassen müssen . Lassen Sie uns den Child-Selektor ändern, wir brauchen hier 2.3 für das zweite Bild Ich werde die Breite auf 18 Ram setzen. Dann wird die obere Position bei 2% liegen. Außerdem benötigen wir die linke Position, setzen wir sie auf -15%. Okay, als nächstes haben wir hier die dritte Bildbreite, die 48 Ram beträgt Was die oberste Position angeht, werde ich sie auf Position 57% bringen. Okay, wir haben die Positionen der Bilder geändert Als Nächstes müssen wir uns mit diesem Element befassen. Hier meine ich den Unschärfeeffekt, die vier Elemente. Also wähle ich Vorlagen aus, gefolgt von den vier su-Elementen Lassen Sie uns Breite und Höhe auf 60 Ram setzen. Als Nächstes setze ich die untere Position auf -5%. Dann wird die richtige Position auf 5% gesetzt Dann wird die richtige Position auf . Außerdem werde ich den Hintergrund ändern Ich meine linearer Gradient, ich werde die Richtung ändern, es wird zwei unten sein Dann wird die erste Farbe transparent sein. Für den zweiten Anrufer wird es 8430 sein Wir werden den dritten Anrufer hier haben und es wird 863c0 sein, okay Das war's also mit dem Unschärfeeffekt . Als nächstes müssen wir uns um den Boden kümmern. Ich wähle Play Bottom. Ich werde zwei Positionen auf 60% setzen . Was die linke Position angeht, wird es -8% sein. Okay, das entspricht also ungefähr dem Vorlagenbereich Der Videoplayer sieht gut aus. Als Nächstes werde ich mich um die Fußzeile kümmern. Lassen Sie uns weitermachen und die Fußzeile auswählen. Höhe ändern, es wird die Höhe des Viewports 40 sein. Dann müssen wir die Polsterung ändern. Ich gehe zu 3026 an der Oberseite. Die Null auf der rechten Seite, drei Ram auf der Unterseite und Null auf der linken Seite In Ordnung, ich werde mich um die sozialen Medien kümmern. Lassen Sie uns Social Media auswählen und ich werde die Breite auf 35% einstellen. Okay. Ich denke, das ist ungefähr die Startseite. Alles sieht ziemlich gut aus. Lass uns weitermachen und die Kundenseite überprüfen. Wir müssen diese Seite anpassen. Als Erstes werde ich das Menüsymbol anzeigen. Ich öffne die HTM-Datei des Clients nehme dann das Menüsymbol aus der indizierten alten H-Tim-Datei. Lassen Sie uns dieses Element kopieren und direkt hinter dem Logo einfügen Lass uns den Browser überprüfen. Wie Sie sehen können, ist das Menüsymbol weiß. Bis wir nach unten scrollen. Wir müssen es ändern. Eigentlich werde ich hier einen gemeinsamen Klassennamen hinzufügen. Nennen wir es ich, ich werde es auf Seiten nennen, vielleicht hast du einen besseren Namen. Als Nächstes suche ich hier nach dem Menüsymbol und wähle die Symbolseiten aus. Lassen Sie uns die Hintergrundfarbe ändern. Eigentlich brauchen wir ihre Leitung. Ändern wir die Hintergrundfarbe und machen 0926 auf sieben. Okay, lass uns den Browser überprüfen. Jetzt haben wir hier das Menüsymbol mit dunklen Linien. Und wir müssen nicht nach unten scrollen, um es anzuzeigen. Okay, also werde ich mich um den Kopf der Kundenseite kümmern . Lassen Sie uns die Kundenseite öffnen und eine neue CSS-Medienabfrage erstellen. Es werden 820 Pixel sein. Ich wähle den Testimonial-Header gefolgt vom H-Überschriftenelement Lassen Sie uns auf 80% setzen. Was die Schriftgröße der Überschrift angeht, werde ich sie auf 4,7 setzen. Okay, als Nächstes entferne ich die Sterne Wählen wir Sterne aus und setzen die rechte Position auf 12% Alles klar, also sieht alles gut aus. Wir können weitermachen und die nächste Seite, die Produktseite, überprüfen . Wir müssen dasselbe mit dem Menüsymbol tun. Und auch hier müssen wir einige Änderungen vornehmen. Lassen Sie uns weitermachen und Produkt-HTML öffnen. Dann werde ich mir diesen Code von hier holen. Lassen Sie uns das Menüsymbol nach dem Logo einfügen. Jetzt können Sie hier das Menüsymbol mit dunklen Linien sehen. Als Nächstes werde ich neue CSS-Medien erstellen und die Produkte der CSS-Datei abfragen. Wir benötigen CSS-Medien, gefolgt von der maximalen Breite, die acht Turn-Pixel betragen wird Ich werde den Inhalt der Produkte auswählen. Ich werde die Höhe ändern, es wird 115 Ram sein. Dann werde ich die Richtung der Flexbox ändern. Wir müssen die Flex-Artikel vertikal platzieren. Deshalb brauchen wir hier eine Spalte für die Flex-Richtung. Außerdem werde ich die Elemente in der Mitte ausrichten und dann den Abstand ändern. Die Polsterung wird fünf Ram an der Oberseite, Null an der rechten Seite, fünf Ram an der Unterseite und dann zehn Ram an der linken Okay, hier haben wir den Inhalt der Produkte. Lassen Sie uns weitermachen und die linke Seite anpassen. Ich wähle Produkte aus. Verbleibender Inhalt. Stellen wir den Wert auf 60% ein, dann setze ich die Höhe auf Auto. Außerdem brauchen wir Polsterung Es werden fünf Fram oben und unten sein und dann Null auf der rechten und linken Seite dann Null auf der rechten und linken Ordnung, danach wähle ich Absatz aus Lassen Sie uns weitermachen und Produkte auswählen. Linker Inhalt, gefolgt vom P-Element. Ich setze den Rand auf drei RAM auf der oberen Seite und dann auf Null auf der rechten Seite. Als Nächstes benötigen wir fünf Ram an der Unterseite und Null an der linken Seite. Okay, ich denke, wir sind mit der linken Seite fertig. Als nächstes müssen wir uns um die Bilder kümmern. Ich wähle Produkte aus, Inhalt rechts, gefolgt von den Bildelementen. Und wir müssen das erste Bild mit dem N-Chat-Selektor auswählen Ich werde die Größe des ersten Bildes ändern. Wir müssen die Breite definieren, es wird 22 Ram sein. Dann setze ich die Höhe auf 44 Ram. Dann werde ich die Position des Bildes ändern. Die oberste Position wird 65% betragen . Was die rechte Position angeht, werde ich sie auf 24% setzen. Wie Sie sehen können, sich die Position und die Größe für das erste Bild geändert. Als Nächstes müssen wir uns um den Rest der Bilder kümmern . Ich werde diesen Code zweimal duplizieren , wir brauchen hier. Zweites Bild, ich werde die Breite auf 12 Ram setzen. Dann werde ich auf die Höhe kommen. Die oberste Position wird bei 50% liegen . Was die richtige Position angeht, werde ich sie auf 43 Ram Ram setzen. Als nächstes haben wir hier das dritte Bild, das ich mit 220 Gramm einstellen werde. Dann brauchen wir die untere Position, sie wird 21% sein. Was die richtige Position angeht, werde ich sie auf 11% setzen. Okay, ich denke, das war's mit den Bildern. Wie Sie sehen können, sehen sie mit diesem Abschnitt gut aus , wir sind fertig. Als nächstes müssen wir uns um den Promo-Inhalt kümmern. Ich werde Werbeprodukte auswählen. Lassen Sie uns die Höhe auf 120 setzen. Höhe des Viewports. Als Nächstes werde ich mich um die Formen kümmern Ich werde Promo Rectangle auswählen. Lassen Sie uns innerhalb der Höhen gehen, beide auf 42. Als Nächstes ändere ich die Position des Elements. Die oberste Position wird 32% betragen . Was die linke Position angeht, werde ich sie auf 6% setzen Okay, als Nächstes müssen wir den kleinen Kreis entfernen. Hier wähle ich den kleinen Kreis aus. Lassen Sie uns die Position des kleinen Kreises auf 30% setzen Die richtige Position wird 40% betragen. Okay. Danach nehme ich den großen Kreis ab. Wählen wir einen großen Kreis aus. Ich werde beide Positionen auf 30% setzen . Die richtige Position wird 5% sein. In Ordnung, endlich werde ich mich um die Überschrift des Werbeinhalts kümmern . Lassen Sie uns also weitermachen und Promo-Inhalt auswählen, gefolgt vom Element H mit einer Überschrift. Ich werde die Schriftgröße ändern. Es wird laufen. Okay. Ich denke, das gehört zu diesem Abschnitt. Alles sieht gut aus. Als nächstes müssen wir uns um den Kontaktbereich kümmern. Wie Sie sehen können, müssen wir einige Änderungen vornehmen. Lassen Sie uns die Kontakt-HTML-Datei öffnen. Zuallererst werde ich mich um das Menüsymbol kümmern. Lassen Sie uns das Logo suchen und das Menüsymbol hier einfügen. Sie können hier das Menüsymbol sehen. Danach werde ich eine neue CSS-Medienabfrage in der Kontaktdatei erstellen . Zuerst werde ich Kommentare einmischen, damit sie reagieren. Dann werde ich eine CSS-Medienabfrage mit einer maximalen Breite von 820 Pixeln erstellen mit einer maximalen Breite von 820 Pixeln Als Nächstes wähle ich das Abschnittselement aus. Ich werde die Höhe ändern. Es wird 110 Ansichten sein, Höhe angeben. Als Nächstes wähle ich drei Überschriftenelemente aus. Wir benötigen hier den Kontakt-Header gefolgt vom H-Element mit drei Überschriften. Lassen Sie uns die Breite auf 70% setzen. Dann müssen wir den Rand ändern. Ich werde den Rand auf zwei Ram an der Oberseite setzen. Dann brauchen wir Auto auf der rechten Seite, 15 Ram auf der Unterseite und Auto auf der linken Seite. Es ermöglicht uns, die Elemente zu zentrieren. Okay, als Nächstes kümmere ich mich um den Kreis, diesen Hintergrund hier. Lassen Sie uns den Kontaktkreis auswählen. Ich werde mich mit und Höhe ändern. Stellen wir beide auf 70 Ram ein. Dann müssen wir die Position des Kreises ändern. Lassen Sie uns die untere Position auf 25% setzen . Was die linke Position angeht, werde ich sie auf 2% setzen. Lassen Sie uns den Browser überprüfen. Der Kreis ist hier platziert, er ist nicht ganz sichtbar. Aber wenn ich die Bacon-Farbe ändere und sie auf Rot setze, dann findest du die Position des Kreises. Wir werden die Größe dieser beiden Elemente ändern. Ich wähle den Kontakt-Formular-Wrapper, legen wir mit 235 Ram Was die Höhe angeht, werde ich sie auf 78 Ram einstellen. Als Nächstes werde ich diesen Code duplizieren und den Klassennamen ändern. Wir brauchen deine Unterstützung. Die Höhe wird 67 sein, okay. Das ist ungefähr die Kontaktseite. Sie können hier den Kreis sehen. Ich finde, alles sieht ziemlich gut aus. Als nächstes müssen wir uns um die nächste Seite kümmern, die eine Zählseite ist. Gehen wir also zurück zum VS-Code und öffnen wir das Konto-HTML. Ich nehme das Menüsymbol von hier aus und füge es ein. Die Konto-HTML-Datei, das Symbol ist sichtbar. Ich öffne die Konto-CS-Datei und gehe dann zu den internen Kommentaren, um sie zu beantworten. Als Nächstes müssen wir eine CSS-Medienabfrage für die maximale Breite von 820 Pixeln erstellen CSS-Medienabfrage für die maximale Breite von 820 Pixeln Ich werde die Abschnittselemente auswählen . Lassen Sie uns die Höhe auf eine Höhe von 100 Fuß einstellen. Dann werde ich die Größe des Kreises ändern. Und wir müssen auch die Position des Kreises ändern. Lassen Sie uns Breite und Höhe für beide auf 65 m einstellen . Für die Position wird die untere Position 39% betragen . Für die linke Position werde ich sie auf 23% setzen. Okay. Ich glaube, das ist es. Was die Kontoseite angeht, sieht alles gut aus. Als Nächstes müssen wir uns um die letzte Seite am Breakpoint kümmern , und das wird die Preisseite sein Lassen Sie uns hier die HTML-Datei mit den Preisangaben öffnen. Dann gehe ich zum Menü. Fügen wir es nach dem Logo ein und prüfen, ob das Symbol angezeigt wird. Wie Sie sehen können, wird das Symbol angezeigt. Ich gehe zur Preisgestaltung der CS-Datei über und erstelle eine neue CSS-Medienabfrage mit einer maximalen Breite von 820 Pixeln. Das erste, was ich tun werde, ist den Preisbereich auszuwählen. Ich werde das Fell ändern. Es werden 120 Fahrzeuge sein. Als Nächstes werde ich mich um die Formen kümmern. Wählen wir das Preisrechteck aus. Ich ändere die linke Position auf -3%. Dann müssen wir uns um den kleinen Kreis kümmern , der momentan nicht sichtbar ist Ich werde den kleinen Kreis auswählen. Eigentlich brauchen wir Preise. Nehmen wir an der Höhe an, es werden sechs Ram sein. Als Nächstes müssen wir uns positionieren. Ich werde es auf 25% setzen Die richtige Position wird 1% sein, ich werde den Kreis sogar auf 20% nach oben verschieben . Ich denke, das ist sogar besser. Ich denke, wir müssen auch das Rechteck nach oben verschieben, weil mir dieses Ergebnis hier nicht ganz gefällt. Nehmen wir an, sagen wir 25%. Wir können das Rechteck leicht nach oben verschieben. Stellen wir die Position auf 20% ein. Jetzt sieht das Rechteck besser aus, aber ich denke, 20% sind zu viel. Stellen wir die Position auf 22% ein. Okay, jetzt denke ich, dass es viel besser ist. In Ordnung, als Nächstes müssen wir uns um den großen Kreis kümmern. Ich werde einen großen Kreis auswählen. Nehmen wir diese vier Zeilen von hier aus. Ich werde die Höhe auf 40 Ram reduzieren. Dann brauchen wir hier. Unterste Position, es werden 25% sein. Was die richtige Position angeht, werde ich auf -5% setzen. Okay, ich finde, es sieht gut aus Als Nächstes werde ich mich um den Header kümmern. Lassen Sie uns die Überschrift „Preisgestaltung“ auswählen. Lassen Sie uns mit 28 m beginnen. Dann kümmere ich mich um die Karten. Wir brauchen den Drei-D-Effekt hier nicht mehr. Ich wähle Preislisten aus und setze dann die Perspektive auf Keine. Okay, endlich werde ich mich um die Karte auf der rechten Seite kümmern. Wie Sie sich erinnern, haben wir die Funktion „Z übersetzen“ für die richtige Karte verwendet , also werde ich die Preiskarte wählen, oder? Dann müssen wir mit der Funktion Translate Z transformieren und ich werde sie auf Null setzen. Okay, das passt. Sobald wir das Drei-D-Leerzeichen entfernt haben, müssen wir meiner Meinung nach die Position für den kleinen Kreis ändern , auch für das Rechteck. Platzieren wir den kleinen Kreis etwas nach unten. Stellen wir die Position auf 25% ein. Okay, das ist gut. Ich werde auch den Wert der obersten Position für das Rechteck erhöhen . Lass es uns auf 25% setzen. In Ordnung. Ich denke, das ist ungefähr auf der Preisseite und ich denke, mit diesem Grenzwert sind wir fertig Ich meine den Breakpoint für die Tabelle Lassen Sie uns als Nächstes diesen Breakpoint überprüfen Wir müssen dafür sorgen, dass die Website auf den Breakpoint reagiert. Und dafür fahren wir mit der nächsten Vorlesung fort. 71. Projekt responsiv für Handys machen: Ordnung, in der vorherigen Vorlesung haben wir das Projekt an diesem Punkt responsiv gemacht. Ich meine den Breakpoint für Tablets. Als Nächstes müssen wir uns hier um diesen Breakpoint kümmern . Dies ist der zweite Breakpoint für das Tablet. Gehen wir zurück zum Browser und ändern wir die Abmessungen, die wir hier benötigen. 768, dann 1024. Wenn wir die Homepage überprüfen, werden Sie feststellen, dass alles gut aussieht. Ich werde die Seiten überprüfen. Schauen wir uns die Kundenseite an. Ich denke, dass wir uns hier nicht ändern müssen. Gehen wir zur nächsten Seite, es sind Produkte. Die Produktseite sieht auch gut aus. Als nächstes haben wir eine Kontaktseite. Es sieht gut aus. Aber dann haben wir eine Kontoseite. Ich denke, wir müssen die Position des Kreises ändern. Gehen wir zum VS-Code und öffnen wir die Account-CSS-Datei. Ich werde eine neue CSS-Medienabfrage erstellen. Der Maximalwert wird 768 Pixel betragen. Dann wähle ich Account Circle aus. Ich werde die unterste Position definieren. Es werden jetzt 30% sein, alles sieht gut aus. Als Nächstes werde ich die Preisseite überprüfen. Ich werde diese Seite anpassen. Ich bin in den Formen und Hintergründen der Karten. Gehen wir zum VS-Code und öffnen Pricing für die CSS-Datei. Ich werde eine neue CSS-Medienabfrage erstellen. Lassen Sie uns die maximale Breite angeben. Wir benötigen 768 Pixel. Ich wähle Pricing Rectangle. Lassen Sie uns die oberste Position auf 30% ändern . Für die linke Position setze ich sie auf -6%. Dann wähle ich Pricing Large Circle Lassen Sie uns die unterste Position auf 12% setzen . In Ordnung. Ich glaube, das ist es. Am Breakpoint sieht alles gut aus. Und wir können sagen, dass die Website für Tablets gut aussieht. Ich werde diesen Breakpoint hier überprüfen. Wie Sie jetzt sehen können, müssen wir weitermachen und damit beginnen, das Projekt für Mobiltelefone responsiv zu machen Der erste Breakpoint hat eine Breite von 430 Pixeln und eine Höhe von 32 Pixeln Ich werde die Abmessungen auf 43932 setzen. Wie Sie sehen können, ist hier alles durcheinander. Lassen Sie uns weitermachen und das Projekt anpassen. Ich werde die CSS-Datei im Stil öffnen. Lassen Sie uns eine neue CC-Medienabfrage erstellen. Das maximale Wi wird 430 Pixel betragen. Das erste, was ich tun werde, ist HTML-Elemente auszuwählen. Wir müssen die Schriftgröße verringern. Lassen Sie uns die Schriftgröße auf 45% setzen Dadurch werden die Größen aller Elemente verringert. Als Nächstes werde ich mich um den Servicebereich kümmern , und dann kehren wir zum Header zurück. Ich werde Dienste auswählen. Lassen Sie uns die Höhe des Abschnitts erhöhen. Ich werde es auf eine Topfhöhe von 40 einstellen. Jetzt haben wir also ein besseres Ergebnis, aber wir müssen uns um die Formen kümmern , die ich im Hintergrund habe. Lassen Sie uns weitermachen und Dienste G one auswählen. Ich werde die Position ändern. Die oberste Position wird -10% liegen. Was die richtige Position angeht, werde ich sie ebenfalls auf -10% setzen Lass uns den Browser überprüfen. Die erste Form sieht gut aus. Kümmern wir uns um das Rechteck. Ich werde diesen Code duplizieren. Lassen Sie uns den Klassennamen ändern, den wir hier benötigen. G zwei, ich bin. Definiere die unterste Position und es wird -8% sein. Okay Das war's mit dem Servicebereich. Als Nächstes werde ich mich um das Banner kümmern. Lass uns weitermachen und Banner auswählen. Ich werde die linke Position definieren, es werden 8% sein. Als Nächstes werde ich mich um die Hintergründe kümmern. Ich werde mit dem Haupthintergrund beginnen. Wählen wir G Main aus. Ich werde Positionen definieren. Die obere Position wird -75% sein . Was die linke Position betrifft, werde ich sie auf minus eins, 20% setzen . Dann werde ich den Hintergrund ändern, den linearen Verlauf Lassen Sie uns die lineare Gradientenfunktion definieren. Der Übergang der Farben, ich meine, die Richtung des Übergangs wird nach links sein. Dann brauchen wir zuerst Farbe, es wird 44005 sein Was die zweite Farbe angeht, werde ich wieder 4400b verwenden Als nächstes müssen wir uns um den zweiten Hintergrund kümmern. Ich meine, wir müssen G zwei auswählen. Ich werde die linke Position auf 20% setzen . Okay, ich denke, das war's. Was den Header angeht, sieht alles gut aus. Als nächstes müssen wir uns um den Projektbereich kümmern. Ich werde mit den Überschriften beginnen. Lassen Sie uns weitermachen und Projekte H mit einer Überschrift auswählen. Ich werde eine Größe auf vier Ram setzen. Als Nächstes werde ich mich um den Absatz kümmern. Eigentlich habe ich gesagt, dass es in die Richtung geht, also ist das mein Fehler. Es ist ein Absatz. Ich werde Projekte auswählen. Ich werde die Breite 250 einstellen. Okay. Als Nächstes werde ich mich um die Navigation kümmern. Ich werde die Links in zwei Zeilen platzieren. Wir müssen Filter nach oben auswählen, ich werde die Höhe definieren. Es werden 15 Ram sein. Um die Links dann auf zwei Zeilen zu platzieren, müssen wir Flex mit dem Wert p verwenden. Okay, jetzt sind die Links auf zwei Zeilen platziert, aber wir brauchen hier die gleiche Anzahl von Links auf jeder Zeile. Ich vergrößere den Abstand zwischen den Navigationslinks. Lassen Sie uns den Filterlink auswählen und den Rand auf einen Lauf setzen. Jetzt ist das Problem behoben und mit diesem Abschnitt sind wir fertig. Alles sieht gut aus. Als nächstes müssen wir uns um den Vorlagenbereich kümmern. Ich werde mich um die linke Seite kümmern. Lass uns weitermachen und die linke Vorlage auswählen. Ich werde die linke Position auf Null setzen. Als Nächstes muss die Breite 100% betragen. Außerdem werde ich die Polsterung ändern Lassen Sie uns die Polsterung auf 12 Ram an der Oberseite setzen, dann auf fünf Ram auf der rechten Seite, Null an der Unterseite und fünf Ram auf der linken Danach platziere ich die Flex-Elemente in der Mitte des Abschnitts Dafür werde ich Flexbox verwenden. Stellen wir diese Platte auf Flex ein. Dann müssen wir die Richtung ändern , weil wir die Flex-Elemente vertikal in einer Spalte platzieren werden. Wir brauchen die flexible Richtung als Spalte, dann brauchen wir Justify Conference Center und auch einen Einzelposten-Mittelpunkt. Okay. Also das ist ungefähr auf der linken Seite. Eigentlich gehe ich zu einer Zeile mit dem Text des Absatzes in der Mitte. Ich wähle links die Vorlagen aus und verwende die Textzeile in der Mitte. Okay, jetzt sieht alles gut aus. Als nächstes müssen wir die Bilder und auch die Unterseite aufnehmen. Fangen wir mit den Bildern an. Ich werde die Vorlage auswählen, richtig. Gefolgt von den Bildelementen und ich wähle das erste Bild mit dem n-ten Child-Selektor Ich werde die Breite ändern, es wird 23 Ram sein Dann werde ich die Position wechseln. Die oberste Position wird 65% sein . Was die richtige Position angeht, werde ich sie auf 40% setzen. Dann werde ich diesen Code zweimal duplizieren , weil wir uns um die restlichen Bilder kümmern müssen, die wir hier brauchen, Bild zwei und dann Bild drei. Die Breite des zweiten Bildes wird 14 Ram betragen. Dann wird die Position 51% betragen , da wir die linke Position hier brauchen. linke Position wird -55% betragen . Als nächstes müssen wir uns um das dritte Bild kümmern Lass uns mit 38 Ram beginnen. Dann werden die beiden Positionen 55% betragen . Was die richtige Position angeht, werde ich sie auf 10% setzen. Alles klar, also lassen Sie uns als Nächstes über die Bilder sprechen. Ich werde mich hier um diesen Schatten kümmern . Ich meine, wir müssen Vorlagen mit kostenlosen Elementen auswählen. Definieren wir die richtige Position. Es wird -7% sein, aber dann brauchen wir die unterste Position, es werden -10% sein. Außerdem werde ich den Hintergrund ändern Verwenden wir einen linearen Farbverlauf. Die Richtung wird zwei nach links sein. Was die Farben betrifft, so wird die erste transparent sein. Dann benutze ich den zweiten Anrufer, 8430. Was den dritten Anrufer betrifft, wird es 409b sein Okay? Alles sieht gut aus. Wir müssen uns um den Play-Button kümmern . Lass uns den Wrapper auswählen. Definiere die linke Position auf -25%. Dann wähle ich Play BTN, ich werde die Größe des Elements verringern Lassen Sie uns Breite und Höhe einstellen, beide auf 15 Außerdem werde ich die Größe vor dem Element ändern. Lassen Sie uns diesen Code duplizieren und hier davor das Element with height for before hinzufügen hier davor das Element with height , das 19,5% betragen wird, nicht Prozent, sondern Ram Ordnung. Ich finde, alles sieht gut aus. Das einzige, was wir tun müssen, ist die Größe des Phm-Symbols zu ändern Ich werde BTN spielen, gefolgt von dem Element Ich werde die Schriftgröße auf fünf Ram setzen. In Ordnung, das ist es. Was den Play-Button angeht, werde ich im Videoplayer nachschauen. Wie Sie sehen, ist es an der Zeit, sich um den Videoplayer zu kümmern den Videoplayer zu kümmern , da er nicht ganz gut aussieht. Ich werde weitermachen und Video auswählen. Ich meine, der Wrapper, lass uns die Breite auf 50 setzen. Das ist für die Höhe. Das wird automatisch sein. Jetzt müssen wir uns um die Kontrollen kümmern. Lassen Sie uns die Videosteuerung auswählen. Wir brauchen hier Kontrollen. Ich werde die Polsterung ändern. Es wird eine Rampe an der Ober- und Unterseite und null an der linken und rechten Seite Als Nächstes müssen wir uns um die Optionen auf der linken Seite kümmern. Ich werde mit der verbleibenden Klasse Optionen auswählen. Stellen wir uns auf 40% ein. Jetzt sieht alles gut aus. Ich werde die Position der X-Schließtaste ändern. Wählen wir X PTN, gefolgt vom Element Ich stelle die Position auf -8% Ken, den Videoplayer, ein. Sieht ziemlich nett Lassen Sie uns es schließen und mit dem nächsten Abschnitt fortfahren. Es ist ein Abonnementbereich. Wir müssen diesen Abschnitt ebenfalls anpassen. Ich habe den Wrapper abonniert, lass uns die Breite auf 50 setzen. Dann kümmere ich mich um die Eingabe. Und unten werde ich die Eingabe abonnieren, wir brauchen deine Eingabegruppe abonnieren, lass uns 240 Ram einstellen. Als Nächstes gehe ich zu den Eingaben, benutzen wir den Selektor wir hier hinzufügen müssen. Ich werde mit der Höhe auf 100% setzen Okay, das war's mit dem abonnierten Bereich Als Nächstes müssen wir uns um die Fußzeile kümmern , weil die Elemente, insbesondere die Social-Media-Symbole, durcheinander sind Ich werde die Fußzeile auswählen. Stellen wir die Höhe 245 ein, geben wir die Höhe ein. Ich werde die Position der Social-Media-Symbole ändern . Ich werde sie hier platzieren. Wählen Sie unten soziale Medien aus. Lassen Sie uns die Position auf absolut setzen. Dann benötigen wir die relative Position für das übergeordnete Element, also die Fußzeile Als nächstes brauchen wir die unterste Position. Es werden sechs Ram sein. Lassen Sie uns auch auf 100% setzen . Dann werde ich die Elemente horizontal in einer Rolle platzieren. Deshalb müssen wir die Richtung der Flexbox ändern , und in diesem Fall wird es die Rolle sein. Schließlich müssen wir das Content Center rechtfertigen. Okay, wie Sie sehen können, die Überschrift und die Social-Media-Symbole sind die Überschrift und die Social-Media-Symbole hier gut platziert. Wir brauchen etwas Abstand zwischen der Überschrift und den Symbolen. Also wähle ich Foot-Social-Media , gefolgt von den drei Überschriftenelementen H. Und ich werde den Rand auf der rechten Seite auf fünf m setzen. Okay, jetzt sieht alles gut aus. Als Nächstes werde ich mich hier um diese Links kümmern. Ich werde die Schriftgröße ändern. Lassen Sie uns fortfahren und Fußboden auswählen, gefolgt von den Elementen. Ich bin der Link. Die Telefongröße wird 1,8 Ram betragen. In Ordnung, ich denke, das war's mit der Homepage. Als Nächstes müssen wir uns um die Navigation kümmern. Ich werde die Drop-Downs überprüfen. Wie Sie sehen können, müssen wir hier einige Änderungen vornehmen. Ich werde diese PanElementsIOSecond-Panels hier verstecken diese PanElementsIOSecond-Panels Gehen wir zum VS-Code und wählen wir den Dropdown-Service aus. Dann brauchen wir Entwicklungen, gefolgt von der Spanne. Und wir müssen das zweite Pan-Element mit dem Child-Selektor auswählen Lassen Sie uns die Anzeige auf „Keine“ setzen. Wie Sie sehen können, sind diese Pan-Elemente ausgeblendet. Als Nächstes ändere ich die Größe der rechten Seite des ersten Drop-down-Menüs Lassen Sie uns das Drop-down-Menü rechts auswählen und die Breite auf 100% setzen. Was die Höhe angeht, werde ich auf 75% setzen. Eigentlich sehen alle anderen Drop-down-Menüs gut aus Daher können wir das mit der Startseite und mit der Navigation sagen . Wir sind fertig. Als Nächstes werde ich andere Seiten überprüfen. Schauen wir uns die Kundenseite an. Wir haben zwei, passen Sie diese Seite an. Lassen Sie uns weitermachen und die CSS-Datei des Clients öffnen und eine neue CSS-Medienabfrage erstellen. Geben Sie dann xw an, es werden 430 Pixel sein. Ich wähle den Testimonial-Header , gefolgt vom Hone-Header-Element. Ich werde die Telefongröße definieren. Es wird auch Form sein. Ich werde die Sterne verstecken. Lassen Sie uns Sterne auswählen und „Nicht anzeigen“ verwenden. Okay, jetzt sieht alles gut aus und mit der Kundenseite sind wir fertig. Als Nächstes wähle ich die Produktseite aus. Wie Sie sehen können, müssen wir diese Seite anpassen. Lassen Sie uns Produkte der CCS-Datei öffnen und eine neue Ss-Medienabfrage erstellen Ich werde spezifizieren, dass Mawi es sein wird. 430 Pixel. Dann wähle ich die Kopfzeile der Produkte aus , gefolgt vom Element H mit einer Überschrift. Stellen wir die Telefongröße auf vier Ram ein. Okay, als Nächstes kümmere ich mich um die zweite Überschrift. Lass uns weitermachen und diesen Code duplizieren. Ich werde den Selektor ändern. Wir brauchen H drei, dann wird die Telefongröße 2,5 sein. Außerdem ändere ich die Breite, sagen wir auf 80% Dann müssen wir die Überschrift dafür zentrieren Ich definiere den Rand, es werden zwei Reihen nach oben laufen. Dann auf der rechten Seite, 15 Ram an der Unterseite und O auf der linken Seite. Wie Sie sehen können, befindet sich die Überschrift in der Mitte. In Ordnung, das ist Kabel, der Header. Als Nächstes müssen wir uns um den Abschnitt mit den Produktinhalten kümmern. Ich werde Wrapper Product Content auswählen. Lassen Sie uns Polsterung definieren. Es werden fünf Ram an der Ober- und Unterseite und null an der linken und rechten Seite Als Nächstes werde ich mich hier um diesen Teil kümmern. Wählen Sie Produkte | Inhalt links aus. Ich werde es auf 100% einstellen, aber dann lass uns Flex Box verwenden. Wir brauchen Display Flex. Außerdem müssen wir die Richtung ändern, da die Flex-Elemente vertikal in der Spalte platziert werden sollten. Daher muss die Flex-Richtung der Spalte entsprechen. Außerdem werde ich die Elemente so einstellen, dass sie zentriert sind. Okay, als Nächstes werde ich die Ausrichtung des Absatzes ändern. Ich meine den Text des Absatzes. Lassen Sie uns weitermachen und Produkte auswählen. Linker Inhalt, gefolgt von den Elementen. Zuallererst werde ich die Breite ändern. Es wird 8% sein. Dann platzieren wir den Text mithilfe von Text in der Mitte. Ein Linienmittelpunkt. Eigentlich haben wir hier ein Problem, weil dieser Inhalt in der Mitte des Abschnitts platziert werden sollte . Gehen wir zurück zum VS-Code. Und eigentlich brauchen wir hier Produktinhalte und keine Inhalte. Wie Sie sehen können, ist das Problem behoben. Ordnung, danach werde ich mich hier um die Bilder kümmern. Lassen Sie uns den Inhalt der Produkte rechts auswählen , gefolgt von den Bildelementen. Und wir benötigen das erste Bild mit der Diagrammauswahl. Ich werde mit und Höhe definieren. Die Breite wird 18 Ram betragen. Dann brauchen wir Höhe, es werden 36 Ram sein. Außerdem werde ich die Position des Bildes ändern. Die oberste Position wird 75% betragen . Was die richtige Position angeht, sage ich zu 30% Lassen Sie uns diesen Code zweimal duplizieren und die Diagrammselektoren ändern Wir brauchen Bild Nummer zwei und Bild Nummer drei. Dann setze ich die Breite des zweiten Bildes auf zehn Ram. Ich werde die Höhe loswerden , da die obere Position bei 63% liegt . Dann brauchen wir die rechte Position, die 57% betragen wird. Für das dritte Bild werde ich die Breite auf 18 Ram setzen. Lassen wir diesen Wert hier stehen. Wir brauchen keine Höhe. Was die Positionen angeht, die wir hier brauchen, unterste Position. Ich werde es auf 13% setzen Die richtige Position wird 7% sein. Okay, ich denke, das Kabel ist die Bilder. Lassen Sie uns jetzt die Ergebnisse überprüfen. Ich denke, mit diesem Abschnitt sieht alles gut aus. Wir sind fertig. Lass uns weitermachen und um den zweiten Abschnitt kümmern. Ich, der Promo-Inhalt. Ich wähle Produkte mit Werbeaktion aus und setze die Höhe auf 100 H. Als Nächstes wähle ich den Inhalt der Werbeaktion aus und definiere Breite auf 8%. Jetzt müssen wir den Inhalt der Werbeaktion anpassen, wenn der Mauszeiger darüber bewegt wird Jetzt müssen wir den Inhalt der Werbeaktion anpassen, wenn der Mauszeiger darüber bewegt Gehen wir zum VS-Code und wählen mit Hover den Promo-Inhalt Hover, ich werde die Transformationseigenschaft ändern. Verwenden wir hier Translate. Die Werte werden wieder -50% sein -50% Dann müssen wir den Wert der Funktion Translate Z ändern . Es werden sechs sein. Okay, jetzt sieht alles gut aus. Als Nächstes müssen wir uns um die Formen kümmern , die hinter dem Werbeinhalt stehen. Ich fange mit dem Rechteck an. Wählen wir das Promo-Rechteck aus. Ich werde die Höhe für beide auf 35 Ram einstellen . Als Nächstes ändere ich die Position des Rechtecks, das wir hier benötigen. Die oberste Position wird 28% betragen. Was die linke Position angeht, werde ich sie auf -3% setzen. Okay Danach werde ich mich um den großen Kreis kümmern. Wählen wir einen großen Kreis aus. Eigentlich werde ich mir diesen Code von hier holen. Wir brauchen mit in der Höhe, mit den gleichen Werten, wie die Position unten sein wird und der Wert bei 27% liegen wird. Was die linke Position betrifft, werde ich sie mit der rechten Position ändern und der Wert wird -8% sein. In Ordnung, schließlich müssen wir den kleinen Kreis anpassen Wählen Sie einen kleinen Kreis und ändern Sie die Position. Die oberste Position wird 26% betragen . Was die richtige Position angeht, sage ich zu 30% Okay, das war's mit den Formen. Als Nächstes müssen wir uns um die Überschrift und den Absatz innerhalb des Werbeinhalts kümmern . Ich werde Inhalt und ein Überschriftenelement auswählen. Ich werde die Telefongröße ändern. Es wird 1.8 sein Dann werde ich mich um den Absatz kümmern. Wir benötigen Werbeinhalte, gefolgt vom P-Element. Und die Telefongröße wird ebenfalls 1,8 Ram betragen. Ordnung, ich denke, das war's mit der Produktseite, alles sieht gut aus. Als nächstes müssen wir uns um die nächste Seite kümmern und es wird die Kontaktseite sein. Wie Sie sehen können, müssen wir diese Seite anpassen. Lassen Sie uns weitermachen und die Kontakt-CSS-Datei öffnen und ein neues CSS-Medien-Curry erstellen , mit dem wir das X angeben müssen. Zunächst wähle ich die Abschnittselemente mit dem Klassennamen contact aus und setze die Höhe auf 180 Blickpunkthöhe Dann werde ich mich um den Header kümmern. Lassen Sie uns den Kontakt-Header auswählen gefolgt vom H-Ein-Überschriftenelement. Ich werde die Schriftgröße ändern, es werden vier Ram sein. Als Nächstes werde ich diesen Code duplizieren und mich um die zweite Überschrift kümmern , die H drei ist Ich werde die Schriftgröße auf 2,5 Ram setzen. Dann füge ich hier hinzu, dass es 80% sein werden und dann müssen wir die Überschrift erfassen. Ich werde Margin mit den Werten zwei Ram Alto 15 und dann auch Auto verwenden . Das ist also ungefähr der Header. Als Nächstes werde ich mich hier um diese beiden Teile kümmern . Ich werde den Inhalt des Kontakts auswählen. Wir müssen die Richtung der Flexbox ändern , weil wir diese beiden Elemente vertikal übereinander platzieren werden. Ich werde die Flex-Richtung auf die Spalte einstellen. Dann brauchen wir ein Einzelpostenzentrum. Wie Sie jetzt sehen können, sind sie vertikal angeordnet. Wir müssen einen Raum zwischen diesen Elementen schaffen. Ich wähle den Kontaktformular-Wrapper und dann definiere ich den Rand Es wird Null auf der Oberseite sein, drei Ram auf der rechten Seite, zehn Ram auf der Unterseite und drei Ram auf der linken Seite Jetzt haben wir hier etwas Platz. Als Nächstes werde ich mich um die Position des Kreises kümmern . Lass uns weitermachen und Kontaktkreis auswählen. Wir müssen die untere Position auf 30% ändern . Was die linke Position angeht, werde ich sie auf 5% setzen. Okay, ich denke, alles sieht gut aus und wir müssen zur nächsten Seite übergehen. Es wird eine Kontoseite sein. Ich gehe zum BS-Code und eröffne ein Konto für die CSS-Datei. Lassen Sie uns eine neue CSS-Medienabfrage erstellen. Wir brauchen hier, Mawi, 430 Pixel. Ich wähle Account Circle aus. Lassen Sie uns die Größe des Kreises ändern. Ich werde mit 260 Runs loslegen. Außerdem benötigen wir Höhen mit demselben Wert. Dann werde ich die Position des Kreises ändern. Fügen wir die untere Position zu 34% hinzu. Was die linke Position angeht, werden es 10% sein. Okay, Nächstes werde ich mich um den Header kümmern. Fügen wir hier eine Kopfzeile hinzu. Wir benötigen H, eine Überschrift, Elemente. Ich werde die Telefongröße ändern, es wird ein Formular sein, dann werde ich diesen Code duplizieren. Wählen Sie H drei Überschriftenelemente aus. Wir benötigen also eine Schriftgröße von 2,5 Ram. Dann brauchen wir die Breite, sie wird 80% betragen . Dann müssen wir das Element mit dem Rand zentrieren. Wir müssen 15 rennen und wieder. Oder Ok, das steht ungefähr auf der Kontoseite. Als Nächstes werde ich Sie von der Preisseite weiterleiten. Gehen wir zum VS-Code und öffnen die Preisgestaltung in der CSS-Datei. Ich werde hier eine neue CSS-Medienabfrage mit einer maximalen Breite von 430 Pixeln hinzufügen . Ich werde die Höhe des Abschnitts ändern. Wählen wir die Preisgestaltung aus und setzen wir die Höhe auf 18 (Ansichtshöhe). Als Nächstes werde ich den Header entfernen. Lassen Sie uns die Überschrift „Preisgestaltung“ auswählen, gefolgt von den Elementen der Tron-Überschrift. Ich werde die Schriftgröße auf vier Ram setzen. Dann müssen wir die Breite des Headers ändern. Es werden 50 Ram sein. Dann müssen wir das Element mit dem Gesamtrand zentrieren. Okay, danach übernehme ich die zweite Überschrift. Ich werde diesen Code duplizieren, den Selektor ändern. Wir brauchen H drei, ich werde die Telefongröße auf zwei Ram setzen. Dann brauchen wir die gleiche Breite, wie für die Marge. Dann zwei M, dann zwei Ram. Auch hier können wir eigentlich nur zwei M und O lassen. Es wird genau dasselbe sein. Okay, das war's mit dem H, den drei Überschriftenelementen. Als Nächstes werde ich mich um die Karten kümmern. Wir müssen sie vertikal platzieren. Und dafür müssen wir Preiskarten auswählen. Um die Richtung der Flexbox zu ändern, wird es eine Spalte sein. Jetzt werden sie vertikal in einer Spalte platziert. Ich werde Platz zwischen den Karten schaffen. Ich wähle Preisübersicht, setze die Marge auf Null, dann 1,5, dann zehn Runden und wieder 1,5 R. Jetzt haben wir den Abstand zwischen den Karten, und als Nächstes kümmere ich mich um die Formen. Lassen Sie uns weitermachen und mit dem Promo-Rechteck beginnen. Ich werde hier den Code für das Rechteck hinzufügen. Wir brauchen ein Rechteck für die Preisgestaltung und kein Rechteck für Werbeaktionen. Ich werde die beiden Positionen auf 20% ändern . Hier haben wir das Rechteck. Als Nächstes werde ich mich um den kleinen Kreis kümmern. Lass uns weitermachen und den kleinen Kreis auswählen. Wir brauchen Pricing Small Circle. Ich werde die Position auf 17% setzen . Die richtige Position wird bei 5% liegen. Schließlich werde ich mich um den großen Kreis kümmern . Wir müssen die Position ändern. Wir brauchen einen großen Preiskreis und die unterste Position wird 8% liegen. Okay, ich denke, Everton sieht am Breakpoint gut aus Wir können sagen, dass mit den ersten Breakpoints der Mobiltelefone Wir können diesen Breakpoint hier überprüfen und wir können uns um den nächsten Breakpoint kümmern Ich werde auf der Website nach dem Breakpoint suchen. Lassen Sie uns weitermachen und die Abmessungen ändern, die wir hier benötigen, 393 und 893 Pixel Schauen wir uns die Projekte an. Wenn alles gut aussieht, die Homepage gut aussieht, schauen wir uns andere Seiten an. Die Kundenseite sieht gut aus. Als nächstes haben wir eine Produktseite, sie sieht auch gut aus. Dann werde ich die Kontaktseite überprüfen. Als nächstes haben wir eine Kontoseite und endlich eine Preisseite. Wie Sie sehen können, sieht alles gut aus. An diesem Breakpoint müssen wir nichts ändern. Nun, ich werde diesen Grenzwert hier überprüfen und Sie vom letzten Breakpoint für Mobiltelefone wegnehmen , er wird 375 Pixel breit und 667 Pixel hoch sein 667 Pixel Lassen Sie uns also weitermachen und die Abmessungen ändern , die wir hier benötigen, 375,6 Also, wie Sie sehen können, ist alles durcheinander. wieder an diesem Breakpoint Lassen Sie uns wieder an diesem Breakpoint weitermachen und die CS-Datei mit dem Stil öffnen und eine neue CSS-Medienabfrage erstellen Es werden 375 Pixel sein. Ich werde mich zuerst um den Bereich Dienste kümmern, lassen Sie uns Dienste auswählen und die Höhe erhöhen. Es wird eine Viewport-Höhe von 350 haben. Okay. Als Nächstes kümmere ich mich um die Dienste von G One. Lassen Sie uns die oberste Position auf -7% setzen . Dann werde ich mich um den Hintergrund hier in der Kopfzeile kümmern Lass uns weitermachen und BG zwei auswählen. Ich werde die linke Position auf 30% setzen Okay, als Nächstes werde ich die Navigation überprüfen Wir müssen hier einige Änderungen vornehmen. Ich werde die Höhe des Navigationselements verringern. Lassen Sie uns weitermachen und kein Element auswählen , aber wir müssen das Novem, das unten steht, wieder ausschließen das Novem, das unten steht, wieder Ich werde hier das letzte Kind zur Klasse hinzufügen. Außerdem müssen wir hier die Klasse Hamblger hinzufügen, wir müssen die Höhe verringern. Es werden acht sein. Dann ändere ich die Polsterung auf der linken Seite, sagen wir, auf drei m. Wie ich sehen kann, die Höhe der Navigationselemente geändert Als Nächstes werde ich die Positionen der Drop-down-Menüs ändern. Wir müssen Dropdown auswählen und dann den Widerstand auf Acht-Run setzen In Ordnung, als Nächstes füge ich dem ersten Drop-down-Menü eine Bildlaufleiste hinzu. Lassen Sie uns weitermachen und Dropdown one auswählen. Und dann verwenden Sie die Overflow-Y-Eigenschaft, die wir hier benötigen Scrollen Sie jetzt, wie Sie sehen können, wir können im Drop-down-Menü nach unten scrollen Kümmern wir uns um das zweite Dropdown. Ich werde Dropdown zwei auswählen. Lassen Sie uns die Höhe auf 32,5 Ram setzen. Außerdem wähle ich das zweite Drop-down-Menü mit den Entwicklungen aus und setze die Höhe auf das nächste Ich werde die Symbole und auch die Absätze ausblenden. Lassen Sie uns zwei auswählen, gefolgt von den Entwicklungen, und dann setzen wir die Anzeige auf Keine. Wir brauchen dasselbe auch für den Absatz. Wechseln wir zu, in Ordnung, das war's also mit dem zweiten Drop-down-Menü. Gehen wir zum dritten über. Ich werde das dritte Drop-down-Menü anpassen . Wählen wir Dropdown 3 aus, um die Höhe des dritten Drop-down-Menüs zu ändern . Es wird 45 sein. Dann werde ich die zweiten Spin-Elemente im Drop-down-Menü verstecken die zweiten Spin-Elemente im Drop-down-Menü Wählen wir Dropdown drei aus, gefolgt von der Entwicklung Dann brauchen wir Span mit Selector. Wir müssen zweite Span-Elemente auswählen. Fügen wir hier hinzu, dass keine angezeigt werden. Okay, das war's mit dem dritten Dropdown. Der vierte Dropdown sieht gut aus. Was das fünfte Dropdown angeht, werde ich es anpassen. Lassen Sie uns weitermachen und Dropdown Five auswählen. Ich werde die Höhe ändern. Es wird 30 sein. Dann setze ich die Einstellung auf 1,5. Als Nächstes werde ich mich um die Schaltfläche kümmern, ich meine die Preisgestaltung. Lassen Sie uns fortfahren und Artikel mit letztem Kind auswählen. Also Klasse, ich werde die Höhe auf zehn Ram setzen. Dann werde ich auch die Höhe des Buttons ändern . Lassen Sie uns den Code, den wir brauchen, hier duplizieren. O BTN Ich werde die Höhe auf fünf Ram setzen. In Ordnung, schauen wir im Browser nach. sieht eigentlich alles gut aus Mit der Navigation sieht eigentlich alles gut aus. Wir sind fertig. Lass uns weitermachen und andere Abschnitte überprüfen. Alles sieht gut aus. Wie Sie sehen können, benötigt die Fußzeile einige Anpassungen Lass uns weitermachen und uns darum kümmern. Ich wähle Fußzeile und erhöhe die Höhe Sagen wir 255 Fuß hoch. Jetzt sieht die Fußzeile gut aus. Okay. Das ist ungefähr die Homepage. Als Nächstes werde ich andere Seiten überprüfen. Die Seite des Kunden sieht gut aus. Als Nächstes haben wir eine Produktseite. Auf der Produktseite müssen wir uns um den Werbeinhalt kümmern. Lassen Sie uns Produkte der CSS-Datei öffnen und neue CSS-Medien erstellen. Query Maxwit wird 375 Pixel groß sein. Ich werde das Promo-Rechteck auswählen. Stellen wir die Höhe beide auf 30 ein. Dann setze ich die oberste Position auf 23%. Als Nächstes werde ich mich um den großen Kreis kümmern. Ich werde mit der Höhe festlegen. Eigentlich holen wir uns diesen Code von hier. Die Breite und Höhe werden 30 sein. Was die Positionen angeht, die wir hier brauchen, unterste Position. Es wird 20% an der richtigen Position sein und 30 -11% gehen. Lassen Sie uns das Ergebnis überprüfen Alles sieht gut aus. Als nächstes die Position des kleinen Kreises. Lassen Sie uns den kleinen Kreis auswählen und seine oberste Position auf 20% setzen . Okay, ich werde die Position des kleinen Kreises ändern , wenn Sie den Mauszeiger darüber Gehen wir zurück zum VS-Code und duplizieren wir diesen Code. Ich werde hier die Klasse Animate hinzufügen. Die Spitzenposition wird bei 13% liegen . Jetzt denke ich, dass mit dem Produktbereich alles gut aussieht Ich meine die Produktseite, wir sind fertig. Schauen wir uns die Kontaktseite an. Ich werde diese Seite anpassen. Lassen Sie uns die Kontakt-CSS-Datei öffnen und eine neue CSS-Medienabfrage erstellen. Wir benötigen max. 375 Pixel. Lassen Sie uns den Kontaktbereich auswählen und Höhe für den Blickpunkt auf 220 einstellen Okay, jetzt ist das Problem behoben. Lass uns weitermachen und die Kontoseite überprüfen. Wir müssen auch diese Seite anpassen. Ich werde ein Konto für die CSS-Datei eröffnen. Lassen Sie uns diesen Code eigentlich von hier holen. Wir brauchen einen Kontobereich. Die Höhe wird 130 m betragen. Dann werde ich die Breite des Kontos für den Wrapper verringern des Kontos für den Wrapper Lassen Sie uns ein Konto für ein Wrapper-Set mit 245 Ram auswählen. Okay, jetzt sieht alles gut aus mit der Kontoseite. Wir sind fertig. Schauen wir uns die Preisseite an. Nun, wir müssen die Höhe der Preisseite erhöhen. Fügen wir hier die Medienabfrage ein, wählen die Preisgestaltung aus und setzen Sie die Höhe auf 250 Topfhöhe. Okay, das ist es. Alle Seiten, einschließlich der Homepage, sehen an diesem Breakpoint gut aus Ich meine, der Breakpoint für Mobiltelefone, eigentlich können wir sagen, dass unser Projekt auf all diese eigentlich beliebten Breakpoints reagiert all diese eigentlich beliebten Wir können auch den letzten Breakpoint überprüfen. Es war das längste Video des Kurses. Aber endlich sind wir mit dem Projekt fertig. Das einzige, was wir tun müssen , ist die Website bereitzustellen. Ich meine, dafür müssen wir es hosten und online stellen. Fahren wir mit der nächsten Vorlesung fort. 72. Website bereitstellen: Ordnung, in unserer vorherigen Vorlesung haben wir unser Projekt erfolgreich an verschiedene Bildschirmgrößen und Geräte angepasst. Jetzt ist es an der Zeit, mit dem letzten Schritt fortzufahren und unsere Website online bereitzustellen. 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 Verwaltung von Websites und Webanwendungen Lass uns Netlify Com besuchen. Das erste, was Sie tun müssen, ist sich anzumelden. Es ist ein ziemlich einfacher Vorgang. Ich werde es nicht durchmachen. Ich habe mich bereits registriert, also melde ich mich einfach an. Hier haben wir 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 meine, ich ziehe den Projektordner per Drag & Drop. Aber bevor ich das mache, möchte ich eines beachten, denn erinnere mich daran, dass wir drei verschiedene Ordner für HTML-, CSS- und Charles-Dateien hatten . Wenn ich diese Ordner behalten würde, würde Atlifi die Website nicht korrekt bereitstellen Wir müssen unsere Dateien so zusammenhalten. Lassen Sie uns die Projekte im VS-Code öffnen. Sobald ich die Ordner entfernt und alle Arbeitsdateien zusammengelegt habe, hätte ich die Pfade der verknüpften Dateien ändern sollen. Wenn ich den Pfad der CSS-Datei im Dateistil überprüfe, werden Sie feststellen, dass wir hier nicht mehr zwei Punkte mit Schrägstrich und dann den Ordnernamen CSS haben zwei Punkte mit Schrägstrich und dann den Ordnernamen CSS Ich habe das Gleiche auch für die Bilder gemacht. Wie Sie sehen können, haben wir hier einen Bilderordner ohne Punkte und Schrägstriche Okay? Stellen Sie sicher, dass Sie auch die Pfade der Dateien und Bilder geändert haben. Wie auch sonst, wenn Sie die Website bereitstellen, werden Sie die Kacheln oder Bilder nicht sehen. In Ordnung, ich denke, wir sind bereit, den Ordner hier abzulegen. Ich werde diesen Pfad verlassen und dann werde ich den Ordner hier ablegen. Es wird einige Zeit dauern. Wie Sie sehen, war die Implementierung erfolgreich. Ich klicke auf Erste Schritte und dann hier. Ich werde hier auf den Link klicken. Wie Sie sehen können, ist unsere Website jetzt online. Wir können sehen, dass alles gut aussieht und alles gut funktioniert. Wir können zu verschiedenen Seiten navigieren, alles funktioniert und sieht gut aus. Wir können sagen, dass unsere Website online ist. Ich möchte noch etwas tun. Wie Sie sehen können, hat Netlify einen Tummy-Domainnamen generiert Und ich möchte es ändern. Lass uns hier klicken. Konfiguration der Website. Ich werde den Namen der Website ändern. Sie verwenden alle Namen, die Sie möchten. Es liegt an dir. Ich werde diese Charaktere löschen. Und ich werde die Website anrufen. Ich weiß nicht, sagen wir, nennen wir sie Website erstellen. Es ist nicht der perfekte Name, aber mir fielen keine anderen Namen ein. Ich werde den Namen speichern Wenn ich dann auf den Link klicke, siehst du hier den Domainnamen und erstellst eine Website, Netlify Dot App Okay, jetzt wissen Sie, wie Sie Ihre Website auf Netlify hosten können. Auch hier gibt es unzählige Möglichkeiten, die Websites zu hosten. Sie können die Domainnamen usw. kaufen. In Ordnung, herzlichen Glückwunsch. Fantastische Arbeit beim 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. Lerne weiter, bleib neugierig und genieße die Reise. Als Webentwickler wünsche ich Ihnen viel Glück bei all Ihren zukünftigen Projekten. Viel Spaß beim Programmieren und mögen Ihre Websites immer beeindrucken. Viel Glück. Tschüss, tschüss.