Responsive Web-Entwicklung: HTML & CSS für Web-Designer:innen

1. Einführung: Hallo und willkommen zu Responsive Web-Entwicklung, HTML und CSS für Web Designer. Ich bin Chris, ein freiberuflicher Webentwickler und Lehrer hier auf Skillshare.com. In diesem Kurs werde ich Ihnen beibringen, wie Sie vom Design zur Entwicklung gehen , wenn es darum geht, Websites zu erstellen. Im ersten Abschnitt des Kurses werden die Unterschiede zwischen Webdesign und Webentwicklung behandelt. Wir werden über responsive Design gehen, über Code reden und mit ein wenig SEO enden. Im zweiten Abschnitt nehmen wir ein fertiges Design, das in Photoshop erstellt wurde , und verwandeln es in eine vollständig reaktionsfähige Webseite. Trotz des Titels ist diese Klasse so eingerichtet, dass sie sowohl Webdesigner als auch Webentwickler profitieren. Für Webdesigner erfahren Sie, wie Ihre Entwürfe in funktionierende Websites übersetzt werden, damit Sie besser mit Entwicklern kommunizieren oder eigene Designs selbst erstellen können. Für Webentwickler lernen Sie, wie Sie mit Designern arbeiten und eine genaue Kopie ihrer Entwürfe in HTML und CSS erstellen. Ob Sie ein Entwickler sind, der mit einem Designer arbeiten möchte, ein Designer, der mit einem Entwickler arbeiten möchte, oder einfach nur jemand, der Fähigkeiten in beiden Bereichen aufbauen möchte. Dieser Kurs ist für Sie. Also, wenn Sie bereit sind, loszulegen, klicken Sie auf das nächste Video und ich sehe Sie auf der Innenseite. 2. Design und Entwicklung – Responsivität: Bevor wir mit der Erstellung unserer Website beginnen, ist es wichtig zu verstehen, was die Unterschiede zwischen traditionellem Webdesign und Front-End-Webentwicklung sind . Die Hauptfigur, die im Titel dieser Klasse offenbart wird, ist Reaktionsfähigkeit. Im Kontext des Webs bedeutet Responsive Web Design and Development, dass das Layout und das Design Ihrer Webseite auf die Dimensionen des Fensters reagiert, in dem sie enthalten ist. Oft denken wir an Responsive Web Design in Bezug auf die drei gängigsten Geräte, einen Laptop oder Desktop-Computer, ein Tablet oder ein Mobiltelefon. Einige Designer könnten die mobile Version einer bestimmten Website verwechseln , um eine andere Website insgesamt zu sein. Aber in der Regel ist die mobile Website einfach die gleiche wie die Desktop-Version, aber es ist gemacht, um reagieren, so dass es auf die kleinere Bildschirmgröße passt. Sie sehen, während mobile Tablet und PC die wichtigsten Beispiele sind, sie repräsentieren einfach verschiedene Punkte auf einem Fluidspektrum. Wenn ich hier zum Beispiel mein Browserfenster nehme, können Sie sehen, dass die Webseite bereits auf die Änderung der Bildschirmbreite reagiert. Google Chrome kann ich die Bildschirmbreite und -höhe eines Mobiltelefons simulieren , indem ich meine Entwicklertools öffne und auf die Gerätesymbolleiste klicke. Jetzt können Sie die gleiche Version der Website sehen, aber mit einem adaptiven Design, das auf jede Bildschirmgröße aktualisiert wird. Dies kann ein Bereich der Verwirrung zwischen Designern und Entwicklern sein, da Designer ihre Entwürfe in der Regel mit einer festgelegten Leinwand erstellen. Zumindest werden Designer eine Desktop-Version der Website erstellen. Aber idealerweise sollten die Entwickler separate Designs für alle drei gängigen Bildschirmgrößen erhalten , PC, Tablet und Handy. Außerhalb dieser speziellen Bildschirmdimensionen ist es Sache des Entwicklers sicherzustellen, dass das Layout der Webseite fließend bleibt und dass alle Probleme, die zwischen bestimmten Bildschirmgrößen auftreten, aussortiert werden. Für Designer können sie häufig ein Werkzeug wie Adobe InDesign oder Photoshop verwenden , um Abschnitte zu erstellen und Text und Bilder einzufügen. Eine Möglichkeit, dies zu konzeptualisieren, besteht darin, dass jedes Element durch eine Box dargestellt wird. Dieses Konzept übersetzt ziemlich gut in die Web-Entwicklung, außer dass die Boxen ändern die Abmessungen oder Verschiebung Position bei verschiedenen Bildschirmgrößen. Natürlich werden diese Elemente oder Felder, wenn Sie so wollen, durch wie HTML und CSS bestimmt, und genau das werden wir in der nächsten Lektion bekommen. 3. Design und Entwicklung – Code und visuelle Darstellung: In der vorherigen Lektion haben wir darüber gesprochen, wie Designer normalerweise Webdesigns auf einem statischen Canvas erstellen , während in der Webentwicklung Bildschirmgrößen und -elemente fließend sind, was bedeutet, dass ihre Dimensionen und Position es jederzeit ändern können, Dieses Verhalten wird über HTML und CSS möglich gemacht. Ich habe HTML und CSS ausführlich in meiner vorherigen Klasse, Web Development Fundamentals, HTML und CSS, behandelt , aber für diejenigen von Ihnen, die nicht wollen, um tief in diese Themen gehen, HTML ist eine Markup-Sprache, die Struktur zu Web -Seiten und Anwendungen im Internet. CSS ist die Stylesheet-Sprache, die für die Beschreibung der Darstellung von HTML verwendet wird. Wenn ein Nicht-Entwickler auf eine Website schaut, ist dies, was er sehen könnte, aber um zu erstellen, was Sie hier sehen, müssen Sie schreiben, was Sie hier sehen. Dies ist HTML und das ist CSS. Wir werden darauf hinweisen, wie man jedes von ihnen im praktischen Abschnitt dieser Klasse verwendet, aber für jetzt ist der Punkt, den ich mache, dass das Web, wie wir wissen, es besteht aus Inhalten in HTML-Tags enthalten ist, wir haben Regeln von CSS angewendet, , die ihnen Stil und Layout geben. Dies unterscheidet sich von der Art, wie ein Designer ein statisches Webseiten-Markup erstellen würde. beispielsweise ein Werkzeug wie Photoshop verwenden, würden sie aus einer Vielzahl von interaktiven Steuerelementen auswählen, und dann werden diese Auswahlen in einer Photoshop-Datei gespeichert, deren innerer Code Sie nie sehen würden. Jetzt sollen diese Informationen Sie nicht verwirren, sondern einfach einen großen Unterschied zwischen Webdesign und Entwicklung ans Licht bringen. Als Entwickler hatte ich in der Vergangenheit Probleme mit der Kommunikation mit Kunden, die die technische Sprache nicht verstehen. Zum Beispiel werden Farben, Farben in der Webentwicklung entweder durch Hex-Codes, RGBA-Codes, HSLA-Codes oder eine Reihe von anerkannten Etiketten wie weiß oder schwarz dargestellt. Idealerweise sollten Designer es Entwicklern leicht machen zu wissen, welche Farben zu verwenden sind, indem sie explizit über die genaue Farbe benötigen. Ein weiteres Beispiel sind Bemaßungen. Ähnlich wie Farben, wäre es ideal für Designer bestimmte Dimensionen an Entwickler weiterzugeben, anstatt sich darauf zu verlassen, dass der Entwickler es visuell aufnehmen kann. In der Webentwicklung sind die gebräuchlichsten Einheiten Pixel für absolute Höhen und Breiten und EM oder Prozentsatz für relative Höhen und Breiten. In beiden Beispielen können Designer in der Regel in ihre Software gehen und notieren Sie sich die spezifischen Farben oder Abmessungen verwendet, diese für den Entwickler zur Verfügung zu stellen. Die Ausnahme sind natürlich relative Breiten und Höhen. Aber keine Sorge, wenn Sie ein wenig verwirrt von all diesem technischen Sprechen im praktischen Abschnitt dieser Klasse, wir werden tatsächlich eintauchen und ein Design in eine tatsächliche Webseite übersetzen, also bleiben Sie dran dran. Bis dahin haben wir nur noch eine Überlegung zu gehen, und das ist SEO. 4. Design und Entwicklung – SEO: Der letzte Punkt in der Web-Entwicklung, die Designer sollten berücksichtigen, ist SEO. SEO steht für Suchmaschinenoptimierung. In der Web-Entwicklung sollten wir uns in erster Linie mit einer Seite von SEO beschäftigen. Kalt auf der Seite SEO. Während Onpage SEO enthält viele verschiedene Faktoren gemeinsame Bereiche, die Probleme verursachen können, sind Bilder und Überschriften. Lassen Sie uns zuerst Bilder abdecken. Designer können es gewohnt sein, Bilder und Dokumente in höchster Qualität zu exportieren, aber dies ist nicht ideal für das Web. Beim Erstellen von Websites sollten Bilder nur so groß sein, wie sie sein müssen. Der Grund dafür ist die Seitengeschwindigkeit. Wenn Sie ein Bild in HTML verknüpfen, können Sie eine Breite und Höhe selbst in einem CSS-Dokument oder direkt im Element festlegen. Dieser Code wird jedes Mal ausgeführt, wenn auf die Website zugegriffen wird , und das bedeutet, dass das Bild unter dieser Adresse jedes Mal vollständig geladen wird. Natürlich gibt es einige Ausnahmen, aber dies ist das Standardverhalten. Tatsache ist, dass, wenn Sie ein Bild nehmen und es auf eine kleinere Größe in Ihrem Code skalieren, Sie einfach Daten verschwenden und je größer das Bild ist, desto länger dauert die Seite zu laden. Deshalb ist es wichtig, dass der Designer die Bilder mit nicht mehr als der höchstmöglichen Auflösung exportiert . Oder der Entwickler berechnet die höchste benötigte Auflösung und passt die Größe der Bilder entsprechend an. Als nächstes Text und Überschriften. Wenn es um Text geht, ist Ihre Auswahl an Tags wichtig für On-Page-SOOs. Wir werden in Tags geraten, wenn wir anfangen, direkt mit HTML zu arbeiten. Aber im Moment ist es wichtig zu beachten, dass die Verwendung der richtigen Tags nicht einfach darauf hinausgeht, wie es aussieht. In Bezug auf Überschriften-Tags sehe ich manchmal, dass Entwickler den Fehler machen , die jemals die beabsichtigte Schriftgröße hat. Aber wenn Sie sich das Nummerierungssystem für Überschriften in HTML ansehen, werden Sie feststellen, dass das h1-Tag die wichtigste Überschrift und h6, die am wenigsten wichtige Überschrift, definieren soll . Webdesigner und andere Nicht-Entwickler verstehen dieses Konzept möglicherweise nicht. Daher ist es wichtig, die richtige Struktur der Überschriften zu folgen und die Stile jedes Tags zu aktualisieren, wenn das Aussehen dieser Tags nicht korrekt ist. Schließlich, wenn es um Text in Bildern geht, versuchen Sie, dies zu vermeiden, wenn möglich. Bilder reagieren nicht und Suchmaschinen haben es schwer, Text auf ihnen zu lesen, anstatt tatsächlichen Text auf der Seite. In der Vergangenheit war die Verwendung von Bildern, um ein bestimmtes Layout oder Stil zu erhalten, unerlässlich. Aber heutzutage gehen HTML und CSS einen langen Weg, um jeden gewünschten Effekt zu reduzieren. Das ist es für den Theorieabschnitt dieser Klasse. Im nächsten Abschnitt werden wir praktisch und tatsächlich bauen uns eine Webseite aus einem in Photoshop erstellten Mock-up. Wir sehen uns auf dem nächsten Video. 5. PSD zu HTML – vor dem Start: Bevor wir anfangen, ist es wichtig, dass wir über benötigte Kenntnisse und Werkzeuge sprechen. In Bezug auf Software, Sie werden nur einen Web-Browser und den Code-Editor benötigen und für diejenigen von Ihnen, die neu in der Web-Entwicklung sind, ist dies, was beide von den wichtigsten. Ein Browser ist nicht nur das, was Sie verwenden, um im Internet zu surfen, sondern auch das, was Sie verwenden, um HTML-Dokumente auf Ihrem Computer anzuzeigen. Ein Code-Editor ist das, was Sie verwenden, um Ihren Code zu schreiben und ihn zu bearbeiten. Diese beiden sind im Grunde die wesentlichen Werkzeuge für jede meiner Webentwicklungsklassen erforderlich sind. Sie brauchen definitiv einen Ort, um Code zu schreiben und einen Ort, um ihn anzusehen. Darüber hinaus ist eine Kopie von Adobe Photoshop wünschenswert, aber nicht unbedingt erforderlich. Im folgenden Abschnitt werde ich Photoshop verwenden, um das Website-Design zu betrachten, Farben und Schriftarten zu überprüfen, Auffüllungen und Ränder zu bestimmen. Wenn Sie jedoch nicht über Photoshop verfügen, können Sie immer noch folgen. Schließlich empfehle ich in Bezug auf das Wissen, dass Sie bereits die Grundlagen von HTML und CSS kennen. Für ein Grundwissen in HTML und CSS empfehle ich Ihnen, meine vorherige Skillshare Klasse, Web Development Fundamentals, HTML und CSS zu nehmen . Aber wenn Sie wenig Zeit haben, die HTML- und CSS-Abschnitte meines ersten Kurses, das Verständnis der Web-Entwicklung, sollte die HTML- und CSS-Abschnitte meines ersten Kurses, das Verständnis der Web-Entwicklung, eine Anfängeranleitung für das Web ausreichen, um eine grundlegende Einführung in diese beiden Sprachen zu bieten. Abgesehen davon werde ich die notwendigen Dateien bereitstellen, damit Sie den Build in der nächsten Lektion abschließen können. 6. PSD zu HTML – Einrichtung: Inzwischen sollten Sie also einen Code-Editor, einen Webbrowser und sogar Photoshop bereit haben oder als Alternative jede Software, die Dokumente liest. Um ein Design für eine Webseite zu nehmen und diese in eine tatsächliche Webseite zu verwandeln, benötigen Sie das eigentliche Mock up der Webseite, die erforderlichen Bilder und die erforderlichen Schriftarten, Farben und Ränder. Für diejenigen unter Ihnen, die nicht an einer Photoshop-Datei arbeiten, benötigen Sie Ihr Design und stellen Ihnen die Bilder, die spezifischen Farben, die Namen der gewünschten Schriftarten und, wenn möglich, die Schriftgrößen und Ränder zwischen den Elementen zur Verfügung. In diesem Fall werde ich Ihnen diese Informationen zur Verfügung stellen. Wenn Sie über Photoshop verfügen und der Designer Ihnen eine Photoshop-Datei zur Verfügung stellt, können Sie alle diese Informationen aus der Photoshop-Datei selbst abrufen. Das werde ich in dieser Klasse machen. Um zu beginnen, müssen wir zu einer Adresse in unserem Browser gehen. Ich habe die Projektdateien für dieses Projekt auf GitHub gespeichert. Sie müssen also nur auf GitHub.com/Christopherdodd/SkillShare gehen. Sobald Sie zu dieser Seite gelangen, sehen Sie hier ein Repository, und genau hier ist Cuda Project.zip. Klicken Sie darauf, und klicken Sie dann hier auf „Download“. Ich werde meinen auf den Desktop stellen. Also wähle ich Desktop aus und klicke auf „Speichern“. Das ist natürlich eine ZIP-Datei, also müssen wir in unseren Finder oder Windows Explorer gehen, wenn Sie Windows verwenden. Wechseln Sie in Desktop und erweitern Sie das Projekt. Wir können die ZIP-Datei an dieser Stelle loswerden. Wenn wir das Cuda-Projekt öffnen, gibt es zwei Ordner, einer ist die Entwurfsdateien. Wir haben die Photoshop-Datei hier wie durch the.psd bezeichnet. Also, wenn Sie Photoshop nicht haben, machen Sie sich nicht die Mühe, das zu öffnen. Genau hier haben wir das PDF, das das Design darstellt, also wenn ich das öffne, können Sie das Design sehen, das wir heute machen werden. Dies ist, was wir am Ende dieser Klasse mit HTML und CSS machen können. Natürlich gibt es hier auch einige Bilder, und hier kommt unser Asset-Ordner ins Spiel. In unserem Assets-Ordner haben wir diese Bilder zur Verfügung, die wir in unser Projekt einbringen können. Wenn Sie Photoshop nicht verwenden und nur das Mock-up loslegen müssen, benötigen Sie die spezifischen Farben und Schriftarten. Ich habe sie in einem PDF-Dokument für Sie, auch in einem RTF-Dokument, wenn Sie hineingehen und einfügen möchten, sollten Sie in der Lage sein, mit den meisten PDF-Browsern sowieso kopieren und einfügen. Wenn ich das öffne, können Sie eingehen und Farbcodes kopieren und direkt in Ihr Projekt einfügen. Jetzt, da wir unser Design bereit haben, ist es an der Zeit, dieses Projekt zu programmieren, und das werden wir im nächsten Video machen. 7. PSD zu HTML – Struktur: Jetzt, da wir alle unsere Design-Dateien bereit haben, können wir tatsächlich voran gehen und beginnen, dieses Projekt in HTML und CSS zu erstellen. In dieser Lektion werden wir die Struktur mit HTML legen. Dann werden wir in den folgenden Lektionen CSS verwenden, um es zu stylen. Sie werden bald sehen, wie das Projekt mit CSS zusammenkommt, während es allein mit HTML nicht so aussieht. Also habe ich meine Photoshop-Datei direkt vor mir geöffnet, aber natürlich, wie ich bereits erwähnt habe, wenn Sie Photoshop nicht haben, können Sie hier immer noch in unserem Projects Ordner folgen. Ich habe das Mockup in PDF. Also, was ich mit der Photoshop-Datei tun werde, und wenn Sie Photoshop haben, fühlen Sie sich frei, entlang zu folgen. Offensichtlich, was ich mit der Photoshop-Datei tun kann, ist tatsächlich zu gehen und Elemente zu inspizieren. Also kann ich hier reingehen und ich sehe, dass die Schriftart Titillium Web ist, dass das Schriftgewicht fett ist, dass die Schriftgröße 42,16 Pixel beträgt und wenn ich hier anschaue, scheint es weiß zu sein, aber es ist eigentlich kein reines Weiß. Es ist nahe an weiß, aber nicht rein. Was ich getan habe, ist, wenn Sie wieder in den Ordner gehen und Sie auf Farben und Schriftarten klicken, was ich getan habe, ist, dass ich Ihnen explizit gesagt habe, was all diese verschiedenen Elemente in Bezug auf Schriftgrößen, Gewichte und Farben haben. Hoffentlich, und dies ist eine Lektion für Designer und Entwickler, Designer sollten dies zur Entwicklung bereitstellen, da wir nicht Photoshop haben, und Entwickler, die Photoshop nicht haben, sollten diese Informationen von Designern anfordern. Manchmal erwarten Designer, dass Entwickler sich dies nur ansehen und in der Lage sein die Schriftart nur nach Größe herauszufinden oder die Schriftgröße oder das Gewicht herauszufinden, das ist einfach unpraktisch. Stellen Sie also sicher, dass diese Details ausgeschrieben wurden oder in der Photoshop-Datei verfügbar sind, okay? In Ordnung, also ist die andere Sache, die ich zuvor erwähnt habe, abgesehen von Farben und Schriftarten, Dimensionen. Selbst wenn Sie ein kostenloses Tool wie Preview verwenden, können Sie dennoch Bemaßungen überprüfen. Sie können hier auf rechteckige Auswahl klicken und eine Auswahl ziehen, und es gibt tatsächlich ein Werkzeug in Vorschau, wenn Sie Mac verwenden oder ich nicht weiß, was Sie im PC verwenden würden, aber Sie können tatsächlich gehen und Inspector finden. Jetzt, wie ich ziehe, so muss ich die Auswahl wieder tun. Sie können hier sehen, ich bekomme eine Breite und Höhe für diese Auswahl. Es ist also ungefähr 145 zwischen diesem Logo und dem Anfang dieses Textes hier. Das ist wirklich alles, was wir wissen müssen. Der Rest können wir wählen visuell, aber Dinge wie bestimmte Dimensionen, bestimmte Schriftgrößen, Schriftfamilien, Schriftgewichte, einige davon ist oft schwierig, als Entwickler zu identifizieren. Daher ist es wichtig, diese Informationen überall in einem Dokument wie diesem zu erhalten , oder Sie erhalten die vollständige Photoshop-Datei. In Ordnung, also ohne weiteres, lasst uns mit dem Erstellen unseres HTML beginnen. Ich werde ATOM öffnen, das mein Code-Editor ist. Wie Sie hier sehen können, habe ich ein vorheriges Projekt geöffnet, aber ich werde das einfach schließen. Was ich tun werde, ist eine neue Datei zu erstellen. Ich werde ein neues Fenster in Google Chrome öffnen, das mein bevorzugter Browser ist. Was ich tun werde, ist, dass ich zu [unhörbar] HTML gehen werde. Hier bekomme ich meine HTML-Vorlage auf Basisebene. Also werde ich das kopieren, und ich werde es hier hineinbringen. Genau wie in meinen anderen Kursen zu HTML und CSS werde ich in meine Projektdatei eingraben und ich werde diese cuda.html nennen. Da wir nur eine HTML-Datei in dieser bestimmten Klasse erstellen, benenne ich sie nur Cuda. Aber wenn ich mehrere Seiten aufbauen würde, würde ich diesen Index für die Homepage nennen. Nur eine Randnotiz da. Sobald ich das Dokument gespeichert habe, bekomme ich alle schönen Farben und ich bin auch in der Lage, das in meinem Browser zu öffnen. Also schiebe ich das auf die andere Seite. Ich ziehe das in meinen Browser und, voila, wir haben jetzt Zugriff auf unser Projekt. Wenn ich sie nebeneinander setze, kann ich den Code sehen und ich kann die Ausgabe hier sehen. Alles klar, das erste, was ich ändern will, ist der Titel Cuda. Was macht Cuda? Ich werde es noch ein paar Keywords, tolle Websites und mobile Apps geben , lassen Sie uns damit gehen, tolle Websites und mobile Apps. Jetzt nur eine Warnung, bevor wir da reinkommen, könnte das ein bisschen Zeit dauern, um dir den Kopf um das zu wickeln, was ich gerade tun werde. Dies ist kein grundlegender HTML- und CSS-Kurs, daher empfehle ich Ihnen, diese Kurse zu besuchen, wenn Sie es noch nicht getan haben. Aber was ich jetzt tun werde, ist, die Struktur festzulegen , von der ich glaube, dass es für dieses Design Sinn machen würde. Es gibt mehrere Möglichkeiten, dies zu tun, und Sie können es beim ersten Mal nicht richtig machen. Wenn Sie CSS einfügen, müssen Sie möglicherweise Ihren HTML ändern. All das ist in Ordnung. Ich habe dieses Projekt bereits erstellt, also habe ich ein gutes Verständnis davon, was HTML funktionierte und was nicht, und ich musste einige Änderungen vornehmen. Behalten Sie das im Hinterkopf, während wir durchmachen. Ein Teil meines Denkprozesses ist Ihnen vielleicht nicht sofort klar, aber das kommt wiederum nur aus meinem Grundwissen und meiner Erfahrung mit dem Aufbau ähnlicher Projekte. Also, ja, wie ich es mache und wenn Sie Fragen haben, zögern Sie nicht, in der Diskussion zu fragen. Also das ist mein kleiner Haftungsausschluss, bevor wir anfangen. Lasst uns das tatsächlich durchmachen und bauen. Also, was ich hier sehe, sind drei Abschnitte, okay? Also, wenn ich das öffne, gibt es hier diesen Abschnitt, der durch diese lila Box dargestellt wird. Es gibt diesen Abschnitt hier, der die schöne grüne Box ist. Sie haben diesen Abschnitt, der schön und blau ist, und hier unten ist eigentlich ein vierter Abschnitt, aber das ist eher eine Fußzeile. Sie haben also Abschnitt 1, Abschnitt 2, Abschnitt 3 und eine Fußzeile. Wie Sie sehen können, ist der Header , den wir diesen Teil hier betrachten können, tatsächlich Teil des ersten Abschnitts. Also werde ich das in Abschnitt 1 verschachteln, okay? Das andere, was mir sofort auffällt, ist, dass es nichts außerhalb der Grenzen dieser beiden Rasterlinien gibt, okay? Dies ist etwas, das in der Webentwicklung üblich ist, ein Container genannt wird. Jetzt alles, was wir auf der Seite setzen, wenn es eine Bildschirmgröße ist, die ziemlich groß ist, erstreckt sich es nicht auf die volle Breite des Bildschirms. Es befindet sich in einem Behälter mit einer maximalen Breite von, nun, schauen wir uns einfach an und sehen, was die maximale Breite davon ist. Sie können hier sehen, ich ziehe nur mein Auswahlwerkzeug von einer Seite zur anderen. Was wir also in unserem HTML tun werden, ist, Container in jeden Abschnitt von 1140 eingebaut zu haben , und Sie werden sehen, dass in der Praxis sehr bald passiert, okay? Dies könnte zu einer langen Lektion werden, damit ich das in zwei Teile teilen könnte, aber lasst uns sofort loslegen. Also werde ich das loswerden, und ich werde das einrücken, etwas mehr Platz in unserem Dokument bekommen, ich mag viel Leerraum. Was wir tun werden, ist der erste Abschnitt, also werde ich einrücken, einen Abschnitt erstellen. Ich werde diesem Abschnitt eine ID von Abschnitt 1 geben, sehr erfinderisch, ich weiß. Schließen Sie dann das Tag. Wenn Sie neu in HTML sind, benötigen Sie ein öffnendes und schließendes Tag, und Sie werden Inhalte dazwischen haben. Ok. Dann haben wir noch zwei weitere Abschnitte wie diese. Also werde ich diesen Abschnitt 2, Abschnitt 3 nennen und dann haben wir eine Fußzeile. Dies ist also die obersten Elemente unserer Webseite, drei Abschnitte und eine Fußzeile. Jetzt in diesem speziellen Abschnitt, was ich tun werde, ist ein Container zu erstellen, und das ist nur ein div mit einer Klasse von Containern. wird sichergestellt, dass der gesamte Inhalt nicht breiter als 1140 Pixel wird. Ich werde das einfach in alles kopieren und einfügen, einschließlich der Fußzeile, denn wie Sie sehen können, liegt die Fußzeile auch innerhalb dieser Grenzen. Ok. Also, jetzt haben wir einen Abschnitt und einen Container. Das nächste, was ich will, ist ein Header. Um diesen Header zu erstellen, werde ich Header-Tags öffnen und schließen, und das erste, was in der Kopfzeile ist ein Bild, also img-src. Hier kann ich ein Logo ansprechen. Wenn ich also in ein Verzeichnis gehe, können wir hier Assets sehen und dann können wir dort Logo sehen. So assets/logo.png. Jetzt können Sie zu jedem Zeitpunkt tatsächlich gehen und die Seite neu laden und sehen, was Sie vor sich haben. Wie Sie hier sehen können, kommt das Bild nicht durch. Ich frage mich, warum. Also geh und inspiziere hier unten. Das Bild kommt tatsächlich über, aber es ist weiß. Da es also einen weißen Hintergrund gibt und ein weißes Bild gibt, kann man es nicht wirklich sehen. Für diejenigen von Ihnen, die es nicht wissen, ist das der Inspektor und ich bin in der Lage, jede Webseite zu betrachten und zu überprüfen, was in Echtzeit vor sich geht. Das ist also wirklich cool, wenn du noch keine meiner vorherigen Klassen absolviert hast. Also, was ich tun werde, weil wir so ein paar kleine Probleme haben werden. Ich werde nur den HTML zuerst erstellen, und dann schauen wir uns an, wie es als rein HTML-Dokument aussieht, und dann werden wir das CSS erstellen und Sie werden ein Gefühl bekommen , warum wir definitiv CSS brauchen. Also haben wir das Bild. Was ich jetzt tun werde, ist ein Navi zu machen. Sie haben also das Öffnen und Schließen von nav, und im Inneren werde ich eine ungeordnete Liste machen. Dann für Listenelemente ihre LI, Also werde ich eine erstellen und dann duplizieren. Also der erste ist zu Hause, und die andere Sache über diese Links ist, dass sie nicht nur Elemente dort auflisten, natürlich Links, und um einen Link zu bezeichnen, müssen wir nur das a-Tag verwenden. Wenn Sie also Links erstellen und die Seite noch nicht haben, zu der Sie verlinken können, verwenden Sie oft nur einen Hash und müssen ihn schließen. Da gehen wir. Jetzt können wir das kopieren, und wir können einfach den Namen ändern. Also zu Hause, und wenn Sie sich fragen, warum ich es nicht in Großbuchstaben mache, können wir das tatsächlich in CSS tun, und das wird es uns eigentlich einfacher machen. Wenn wir unseren Code schreiben, müssen wir ihn nicht in Großbuchstaben betrachten, und wenn wir ihn aus irgendeinem Grund in keine Großbuchstaben ändern wollten, könnten wir einfach einen Stil ändern und das würde zurückgehen. Die andere Sache hier ist, dass der erste Link aktiv ist. Es hat eine Kiste um sie herum. Das wird diese Kiste bedeuten. Sie hätten dies auf anderen Websites gesehen. Wenn Sie sich auf der aktiven Seite befinden, gibt es eine Art Hinweis, und in diesem speziellen Design gibt es eine Box um den Standort, an dem Sie sich befinden. Wir sind im Moment auf der Homepage, also gibt es eine Box um zu Hause, also ist der einfachste Weg, dies in der üblichen Konvention zu tun , eine Klausel zum Listenelement von active hinzuzufügen. Also, jetzt haben wir unser nav und unser Bild in einem Header. Jetzt können wir nach unten gehen und diesen nächsten Abschnitt erstellen, der die Hauptüberschrift und der Aufruf zum Handeln ist. Ich werde diesem eine ID geben, ich habe lange und hart darüber nachgedacht, aber ich konnte keinen besseren Namen, Hauptüberschrift und CTA finden. Ich weiß, das ist lang und wahrscheinlich nicht der beste Name, aber es ist der beschreibendste. Also gehe ich damit. Nun, diese spezielle Überschrift hier, es ist die Überschrift auf der obersten Ebene unserer Webseite. Also ist es h1, die wir verwenden müssen. Das andere gute daran, Photoshop zu haben, ist, dass ich den Text aus der Photoshop-Datei direkt in mein HTML-Dokument kopieren kann. letzte Sache außer der Überschrift ist natürlich die Schaltfläche, und in HTML, wenn Sie das Button-Tag verwenden, erhalten Sie einige Stile, die ziemlich hässlich aussehen. Ich zeige dir, was ich damit meine. Ich ändere das in Button, dann werde ich sagen, Arbeit mit uns. Hier sehen Sie, dass das Standardformat für eine Schaltfläche ist. So ist es manchmal einfacher zu stylen, wenn Sie dies nur zu einem Link machen und es dann wie eine Schaltfläche stylen. Es wird also wahrscheinlich sowieso zu einer anderen Seite auf Ihrer Website verlinken, also möchten wir das sowieso als Link erstellen. Ich werde diesem nur eine Klasse geben, weil es tatsächlich zwei dieser Tasten gibt, und wir werden sie auf ähnliche Weise stylen wollen. Ich werde diesem eine Klasse geben, damit wir es von Big Button anvisieren können. Das ist so ziemlich der erste Abschnitt. Jetzt gehen wir zum zweiten Abschnitt, lassen Sie uns identifizieren, was die Elemente sind. Was wir haben, ist dieser Überschriftenabschnitt mit einer Überschrift, einer Zeile und einem Absatz, und dann haben wir diese vier Spalten mit einem Symbol, einer Überschrift und einem Absatz wieder. Das erste, was ich tun werde, ist, dass wir unseren Container schon hier haben. Ich werde diesen ersten kleinen Abschnitt erstellen, ich als Überschriftenabschnitt einstufen werde. Eigentlich, lassen Sie uns Abschnitt nicht verwenden, weil wir Abschnitt hier verwenden. Nennen wir es ein Titelfeld, Box ist ein bisschen anders, also bekomme ich es nicht mit Abschnitt verwechselt. Im Titelfeld. Wie gesagt, wir haben eine Überschrift, und wir haben bereits eine Top-Level-Überschrift, also müssen wir weiter in die Liste gehen und Rubrik 2 verwenden, ich werde Dienstleistungen eingeben, die wir anbieten. Wieder werde ich bis zum Ende warten, um das alles in Hauptstädte zu ändern , weil wir das mit einem Stil machen können. Als nächstes haben wir diese Zeile hier, und normalerweise, um eine grundlegende Zeile in HTML zu machen, können wir nur diese horizontale Tag-Regel verwenden, aber es wird schwierig sein, sie genau so zu stylen. Also, was ich tun werde, ist ein div zu haben, ihm eine Klasse von Zeile zu geben, und dann können wir CSS verwenden, um ihm all diese Stile zu geben, die es wie eine Zeile aussehen lassen. Dann unten haben wir nur ein Absatz-Tag, und wie ich es vorher getan habe, kann ich einfach den ganzen Text auswählen und ihn direkt einfügen. Also haben wir unser Titelfeld hier, und jetzt können wir anfangen, unsere Spalten zu bauen. Also, was wir zuerst brauchen, ist ein Abschnitt alles dafür. Was diese Dinge werden in der Regel Blurbs genannt. Also werde ich das Ding nennen, das sie alle als Autotextzeile enthält, und dann werde ich vier Divisionen mit der Klasse des Autotextes erstellen. Bevor wir das viermal duplizieren, sind diese Autotexte ziemlich dasselbe. Also, was ich tun werde, ist zuerst einen von ihnen zu bauen und dann kopieren und einfügen. Der erste, wir haben ein Bild. Wenn ich in Vermögenswerte gehe und wie heißt es dann? Flag icon.png. Ein kleiner Hack ist, dass Sie da reingehen können, klicken, um zu versuchen und umzubenennen, und dann tatsächlich nur den Namen kopieren, damit wir das hineinlegen können. Dann gehen wir zu einer anderen Überschrift und ich werde es zu einer Rubrik 3 machen , weil wir die Hierarchie hinunter bewegen, und ich werde das Branding nennen. Dann werde ich in den Absatz setzen, und dann haben Sie einen Autotext. Erstellen Sie hier etwas Platz, und lassen Sie uns das dreimal duplizieren. Ich werde auch für diesen hier expandieren. Jetzt müssen wir durchgehen und nur die Symboladresse, den Titel und den Text ändern . Zurück zu hier, das nächste wird das Buntstiftsymbol sein.Also werde ich einfach kopieren und einfügen, den Dateinamen, und wir werden es Design nennen. Ich könnte hier schnell vorwärts gehen, weil ich im Grunde dasselbe für alle vier von ihnen tue. Alles klar, am Ende haben wir unsere Sektion zwei. Wir haben unser Titelfeld mit einer Überschrift, einer Zeile und einem Absatz. Dann haben wir unsere Reihe von Autotexten mit vier Autotexten mit jeweils einem Bild, einer Überschrift und einem Absatz. Also gehen wir einfach zurück und schauen uns diese Seite an Seite an Seite an. Sie können sehen, wie der HTML-Code zu den Elementen übersetzt wir auf dem Design selbst identifiziert haben. Jetzt haben wir gerade den dritten Abschnitt, um in Kontakt zu treten. Dies wird das schwierigste sein, denn Formen sind immer knifflig mit Responsive Design. Genau wie die letzten werde ich hier runtergehen, und ich kann dieses Titelfeld tatsächlich kopieren und einfügen, weil es dasselbe ist. Ich kann die Überschrift ändern, um Kontakt aufzunehmen, und dann kann ich den Absatztext kopieren und ersetzen. In Ordnung, Tittelboxen sind bereits drin. Das ist großartig. Nun, was ich tun werde, ist ein div für das Formular zu erstellen. Es gibt nur ein Kontaktformular, also werde ich diesem eine ID des Kontaktformulars geben. Dann werde ich tatsächlich ein Formular öffnen. Das ist es, was ein Formular zum Laufen bringt. Sie müssen es tatsächlich in ein Formular einfügen. Dann, was ich tun werde, was im Moment vielleicht keinen vollkommenen Sinn ergibt, aber es wird, wenn wir anfangen, es mit CSS zu stylen, ist, Zeilen für jede dieser verschiedenen Zeilen in der Form zu erstellen. Es wird nur das Stylen einfacher machen. Wir können tatsächlich Flex-Styling verwenden, was ich Ihnen in einem späteren Video zeigen werde. Ich werde das eine Formreihe nennen. Ich will drei dieser Formreihen. Eine für Name und E-Mail, eine für Nachricht und eine für die Schaltfläche. Jetzt haben wir drei Formreihen. Der erste, wir werden zwei Eingänge eingeben. Erste, Eingabetyp, Text, geben Sie ihm einen Namen von „name“ und einen Platzhalter von „Ihr Name“. Der Text, der in diesem Feld angezeigt wird, wird als Platzhalter bezeichnet, falls Sie es nicht bemerkt haben. Das ist alles, was wir brauchen. Dann können wir gehen und eine Eingabe für E-Mail erstellen. Ihre E-Mail wird der Platzhalter für diese sein. Jetzt unten hier unten, dieses Textfeld ist eigentlich kein Eingabetag, glauben Sie es oder nicht, also habe ich Textbereich zu tun.Als Attribut auf Textbereich, sind wir in der Lage, Platzhalter zu sagen. Der Vollständigkeit halber werde ich ihm auch einen Namen geben, der Nachricht sein wird. Die letzte, wir werden eine weitere große Schaltfläche tun, aber dieses Mal muss es eine Eingabe sein, damit das Formular gesendet werden kann. Wir werden in einem anderen Eingabetyp von senden, Klasse der großen Schaltfläche setzen , weil es auf die gleiche Weise formatiert werden wird, und der Wert wird bestimmen, was in den tatsächlichen Inhalt der Schaltflächen geht. In diesem Fall wird es „Nachricht senden“ sein. Ordnung, ich bin sicher, dass diese Lektion eine lange war, aber tragen Sie mir nur ein bisschen mehr mit , weil wir nur noch einen Abschnitt haben, und es ist der Fußbereich. Also wieder mit dem Fußzeilenabschnitt, ist es ähnlich wie der nav Abschnitt, weil wir eine Liste von Links haben. Aber ich würde es nicht unbedingt ein nav nennen, weil es nicht zu anderen Orten auf der Website navigiert. Es ist tatsächlich Links zu externen Social-Media-Websites. Semantisch werde ich es nur ein div anstelle eines nav nennen, um all diese Links zu halten. Ich werde diesem div eine Klasse von Fußzeilenlinks geben. Jetzt, wie ich bereits erwähnt habe, ist es eine Liste, also werde ich eine ungeordnete Liste erstellen und dann die verschiedenen Elemente haben. Genau wie die obige , wird es Listen mit Links in ihnen sein. So sehr schnell, und ich könnte ein bisschen vorwärts gehen. Ich werde in die Links setzen. In Ordnung. Der letzte Schritt, wie Sie hier sehen können, ist Twitter ist in blau. Ich gehe davon aus, dass das für den aktiven Link ist. Ich weiß nicht, wie es ein aktiver Link sein könnte , wo, wenn Sie nicht wirklich auf der Twitter-Seite sind, aber wir werden es auf die gleiche Weise behandeln und wir werden ihm eine Klasse von aktiven geben. Grundsätzlich wird jede dieser Links mit einer Klasse von aktiven diese andere Farbe haben. Genau wie hier oben wird jede dieser Links mit einer Klasse von aktiven diese Box um sie herum haben. Das ist die übliche Art, das zu tun, also halten wir an dieser Konvention fest. Süß. Also, das ist so ziemlich es Jungs. Für das HTML habe ich bereits viele Klassen eingefügt, aber keine dieser Klassen ist mit CSS verknüpft. Werfen wir einen Blick darauf, wie es im Browser aussieht. Ich muss nur meine Seite aktualisieren, und Walah Blick auf dieses schöne Design. Also Jungs, was Sie gerade betrachten, ist HTML ohne irgendwelche Stile überhaupt. Es gibt keine Inline-Stile, es gibt keine CSS-Datei, und das ist, was es aussieht. Wie Sie sehen können, wird CSS all das schwere Heben für uns tun, wenn es darum geht, was das hier ist. Also gut, deshalb ist dies nur eine Lektion, indem Sie den HTML-Code auf, und dann wird der Rest der Lektionen auf CSS sein. Was wir tun werden, ist, dass wir es Abschnitt für Abschnitt aufteilen. Wir werden tatsächlich Stilregeln erstellen. Dann werden Sie sehen, dass diese Struktur tatsächlich zusammenkommt und ziemlich nah an dem aussehen, was wir hier haben. Ich hoffe, ich habe dich in diesem Video nicht verloren. Tut mir leid, wenn es ein bisschen lang war. Ich hoffe, Sie in der nächsten zu sehen, wo wir tatsächlich anfangen dies wie unser Design aussehen zu lassen, genau hier. Wir sehen uns im nächsten Video. 8. CSS – Abschnitt 1: In Ordnung. In der letzten Lektion haben wir die HTML-Struktur unserer neu gestalteten Webseite angelegt. Wie Sie sehen können, tut HTML ein wenig, um den Inhalt auf der Seite zu erhalten, aber wir brauchen viel CSS, damit es so aussieht. Das ist es, worum es in den nächsten drei Lektionen geht. Wir werden es in drei Abschnitte aufteilen, Abschnitt 1, Abschnitt 2, Abschnitt 3, einschließlich der Fußzeile, und dann werden wir daran arbeiten, es reaktionsschnell zu machen. Natürlich werden wir CSS Entscheidungen treffen, die die beste Chance sicherstellen, dass es reagiert, wenn wir zu niedrigeren Bildschirmgrößen gehen. Aber unweigerlich gibt es immer wenig Probleme, die auftauchen. Wir werden lernen, wie man diese auch mit Medienabfragen beheben kann. Schließlich werden wir dieses Menü in etwas verwandeln, das umschaltbar ist. Ich weiß nicht, ob das ein Wort ist, aber im Grunde, was passieren wird, ist das wird zusammenziehen und dann können wir es auf dem Handy ein- und ausschalten, was ziemlich Standard-Feature über viele Websites in diesen Tagen ist. In dieser ersten Lektion werden wir den ersten Abschnitt machen und das sollte uns beschäftigen. Zuerst gehen wir in unseren Code-Editor, und was wir tun müssen, ist eine neue Datei zu erstellen, um all unsere CSS zu beherbergen. Ich werde auf Neue Datei klicken, und ich werde es sofort speichern, damit wir unsere Färbung erhalten, also navigieren Sie in Ihr Projektverzeichnis, und lassen Sie es einfach mit unserer HTML-Datei richtig machen. Ich werde es styles.css nennen. Nun ist der zweite Teil davon, diese CSS-Datei mit unserem HTML-Dokument zu verknüpfen. Wie wir das tun, ist, indem wir in die head-Tags gehen, ein Link-Tag mit einem rel von Stylesheet erstellen und auf die Datei styles.css verlinken. Da es sich im selben Ordner befindet, müssen wir keine Ordner oder irgendetwas ablegen. Wir können einfach styles.css gehen. Das erste, was ich tun möchte, ist dieser Container, ich werde anfangen, indem ich eine Klasse CSS-Definition einfüge. Auch hier ist dies keine grundlegende CSS- und HTML-Klasse, sondern Punkte für Klassen. Sehen Sie, wie wir Klasse als Attribut auf einige dieser Tags gesetzt haben. Wir können diese Klasse anvisieren, indem wir einen Punkt setzen, und dann den Namen dieser Klasse, und dann in geschweiften Klammern, alle unsere Stile. Dasselbe für id. Wenn wir ein einzelnes Element auf der Seite identifizieren, würden wir id verwenden, und um eine ID zu zielen, würden wir Hash und dann den Namen verwenden. Zum Beispiel, für diese Hauptüberschrift in cta, die wir ein wenig erreichen werden, würden wir es genau so anvisieren. Jetzt möchte ich als erstes eine maximale Breite für diesen Container erstellen. Ich erinnere mich, dass wir gesagt haben, 1140 Pixel. Das zweite, was wir tun wollen, ist sicherzustellen , dass seine Zentren in der Mitte der Seite. Ich werde ihm einen Rand links von Auto und eine Margin-rechts von Auto geben. Grundsätzlich, wenn Sie ein Element mit einer festen Breite haben, können Sie es innerhalb des übergeordneten Elements mit margin-left auto und margin-right auto zentrieren . Wenn wir jetzt auf unsere Website zurückgehen und neu laden, können Sie sehen, dass es einige schöne Abstände auf beiden Seiten hat. Wenn wir das in ziehen, wird es weiterhin diese schöne Box beibehalten, diesen schönen Container in der Mitte der Seite rechts nach oben, bis wir einen Punkt treffen wo die Bildschirmbreite kleiner ist als diese Zahl hier, 1140. Wir haben unseren Container, das wird sich auf die ganze Seite auswirken, und jetzt lasst uns an dem ersten Abschnitt arbeiten. Was ich gerne verwenden möchte, sind Kommentare, um die verschiedenen Teile meines CSS-Dokuments zu beschriften, also werde ich hier einen Kommentar einfügen. Das wird nichts tun. Dies ist nur für uns, wenn wir uns den Code ansehen, und so können Sie einen Kommentar einfügen, indem Sie mit einem Schrägstrich und einem Sternchen beginnen und mit einem Sternchen enden Schrägstrich beginnen. Jetzt werde ich meinen ersten Abschnitt mit dem Hash-Symbol anvisieren, das ich Ihnen kurz zuvor gezeigt habe. Was wir tun werden, ist diesem Abschnitt diesen violetten Hintergrund zu geben. Für diejenigen von Ihnen, die Photoshop haben, können Sie tatsächlich darauf klicken, und mit ein paar verschiedenen Klicks, können Sie gehen und finden Sie den Hex-Code. Ich kann jetzt tatsächlich ein Attribut für die Hintergrundfarbe erstellen, den Hash einfügen, den Code einfügen. Wenn Sie dies ohne die Photoshop-Datei tun würden, wird es in Ihren Farben und Schriftarten Dokument sein, und Sie würden nur Abschnitt 1 Hintergrund sehen, da es ist. Auch wenn Sie Photoshop nicht haben, denken Sie daran, dass Sie immer noch folgen können. Aber ich werde Photoshop von nun an nutzen, um diese Dinge herauszufinden. Wir haben ihm die Hintergrundfarbe gegeben, mal sehen, was passiert, wenn wir die Seite aktualisieren. Voila, wir haben diesen schönen Hintergrund. Aber wir haben hier ein Problem. Der Körper hat einen Rand. Ich weiß nicht, warum das gerade passiert, aber wir können das leicht beheben, indem ich wieder hierher gehe, weil ich all unsere universellen Stile an die Spitze stelle. Wir können den gesamten Körper unseres HTML-Dokuments ausrichten. Ich werde sicherstellen, dass es keine Marge oder Polsterung gibt, indem ich einfach Marge und Polsterung Null setze. Jetzt geht es an die Ränder. Wie Sie hier sehen können, haben wir immer noch unseren Container. Wir können unser Logo jetzt sehen, weil wir keinen weißen Hintergrund haben, aber wir haben noch einen langen Weg vor uns. In Bezug auf Abschnitt 1 möchte ich auch sicherstellen, dass es groß genug ist, weil es viel Platz in unserem Design gibt. Ich werde entweder das Kontrollkästchen in Photoshop aktivieren oder ich kann eine Auswahl ziehen und die ungefähre Höhe dieses Elements sehen, und wir können unseren Abschnitt tatsächlich beheben, um gleich zu sein. Es ist ungefähr 595-596 groß. Was ich tun werde, ist zu unserer Abschnittsdefinition hier zurückzukehren, geben Sie ihm eine min Höhe von 595. Da gehen wir. Es wird offensichtlich im Moment keinen Sinn ergeben, aber was wir tun werden, ist, das hier nach oben zu bewegen, das in der Mitte zu bewegen, das einem schönen großen Knopf zu machen. Zurück zum Design, immer mit Bezug auf das Design, wir haben den ersten Abschnitt unseres Abschnitts, oder der erste Bereich unseres Abschnitts ist dieser Header. Wie Sie sehen können, gibt es ein bisschen einen Spielraum darüber. Was ich tun werde, ist einer anderen Auswahl beizutreten, um herauszufinden, wie viel das ist, und sagen wir, das sind etwa 55. Ich brunde es gerne auf die nächsten fünf Pixel. Wir werden in Ziel-Header gehen. Denken Sie daran, wenn Sie auf ein HTML-Tag oder -Element ausgerichtet sind, sind Sie nur auf alle ausgerichtet. Sie müssen keinen Hash oder einen Punkt verwenden. Sie können einfach explizit in das Element einfügen , das Sie zielen, und das wirkt sich auf alle Elemente aus. Im Moment haben wir nur ein Header-Tag, also wird dies nur dieses beeinflussen. Was ich tun werde, ist, ihm eine Polsterung von 55 Pixeln zu geben. Ich weiß, ich sagte Marge, aber wenn wir das in Marge ändern, was es tun wird, ist, den ganzen Abschnitt nach unten zu schieben und dann bekommen Sie diesen Leerraum hier oben. Wir wollen das nicht, wir wollen Polsterung oben. Erweitern Sie das. Das nächste, woran wir arbeiten werden, ist dieses Menü. Im Moment sieht es wie eine Standard-Liste von Links aus. Was ich damit meine, ist, dass wir dieses Standard-Styling für Links haben, wo unser Browser es in einen blauen Text verwandeln und es unterstrichen geben wird, und dann auch diese hässlichen Punkte, das ist das Standardverhalten, Dinge Listen zu machen und sie Links. Wir müssen das außer Kraft setzen. Ich werde die Listenelemente ausrichten, indem ich zuerst nav auswähle, dann in die ungeordnete Liste gehe und dann alle Listenelemente in diesen ungeordneten Listen auswähle. Was ich tun werde, ist zuerst den Anzeigestil zu ändern. Anstelle von Anzeigeblock , der es derzeit ist, werde ich ihm Inline-Block anzeigen lassen. Ich rette das auf. Sie werden jetzt sehen, es geht jetzt inline statt blockieren. Auch hier ist dies keine grundlegende CSS-Klasse, sondern eine schnelle Erklärung von Inline versus Block. Sie können Block als etwas vorstellen, das die gesamte Breite für die Seite erweitert und dann übereinander stapelt, wie unsere Webseite jetzt ist, können Sie sehen, alles ist nur übereinander gestapelt. Das ist das Standardverhalten der meisten Elemente, die nur als Block angezeigt werden. Aber die Verwendung von Inline-Block ermöglicht es uns, diese Elemente inline zu haben. Wenn der Bildschirm zu einem Punkt kommt, an dem er nicht alle diese Inline unterstützen kann, wird er wieder blockiert. Es ist eine sehr häufige Anzeigemethode, Inline-Block. Jetzt möchte ich diese Textdekoration loswerden, wie sie in CSS bekannt ist. Ich werde eine Ebene tiefer ausrichten und die Textdekoration deaktivieren. Textdekoration, keine. Da gehen wir. Wir haben immer noch blau. Ich werde reingehen und die Farbe weiß machen, und da gehen wir. Eine Sache, die mir jetzt auffällt, ist, dass wir ein paar ziemlich hässliche Schriftarten haben. Das ist wahrscheinlich etwas, das ich am Anfang hätte einrichten sollen, aber ich werde, ich entdecke es jetzt. Unsere Schriftart, die wir verwenden, wie hier geschrieben, ist Titillium Web. Wie können wir Titillium Web in unser Projekt? Was wir tun werden, ist in unseren Browser gehen und nach Titillium Web Font suchen. Jetzt können wir in Google Fonts gehen, und Google Fonts speichern diese Schriftart in einem sogenannten CDN. Eine öffentliche Adresse, zu der wir verlinken und diese Schriftart einbringen können. Ich werde diese Schriftart auswählen, und dann werde ich auf Anpassen klicken. Andernfalls wird es uns nur regelmäßig geben, also werde ich auf Anpassen klicken. Es wird uns eine Reihe von verschiedenen Optionen geben. Ich möchte in der Lage sein, Licht, regelmäßig und fett zu wählen. Das sind, was wir für das Projekt brauchen. Aber wenn Sie vermuten, dass wir mehr brauchen, können Sie einfach alle auswählen. Wir können diese Schriftarten auch herunterladen und auf unserer Website aufbewahren. Aber für den Zweck dieses Kurses werde ich nur dieses Tag hier verwenden, das wir mit der Schriftart von Google verknüpfen werden, und dann geben wir das in unserem CSS an. Google macht es uns einfach. Wir müssen nur nehmen, was hier steht, und es in unser Projekt einfügen. Erste Dinge zuerst, das geht. Ich habe vergessen, das End-Tag dort zu machen. Nun, es hat immer noch funktioniert. Wie auch immer, ich beziehe mich jetzt auf externe Schriftarten. Das sollte jetzt verknüpft werden. Was ich jetzt tun kann, ist, den Körperfonds festzulegen. Dies werden die Standardschriftarten von allem im Körper unseres Dokuments sein. Ich kann das kopieren und die Schriftfamilie zu Titillium ändern, ich finde es wirklich schwer, diese zu Titillium Web auszusprechen. Schließen wir das, gehen Sie zurück zu unserem Projekt und sehen, was passiert. Hallo, wir haben jetzt eine andere Schriftart. Es wird also bestimmte Punkte geben, an denen wir fett benutzen und Lichter benutzen werden, denke ich. Aber für jetzt können wir einfach alles auf Titillium Web setzen. Das nächste, was ich tun möchte, ist die NAB nach rechts zu schweben. Wie Sie hier sehen können, kommt es unter dem Logo und das will ich nicht. Ich will, dass es nach rechts schwebt. Jetzt ist es auf der rechten Seite. Es sieht in dieser Ansicht etwas eingeschränkt aus. Aber wie Sie sehen können, wenn wir größer als 1140 Pixel sind, hat es einen schönen Rand. Wir werden zu einer kleineren Bildschirmgröße in einer späteren Lektion zu bekommen. Aber das, was wir hier haben, werde ich weiter daran arbeiten, die so zu machen, wie wir sie wollen. Ich möchte Sie noch einmal daran erinnern, bevor ich weitermache, dass Sie vielleicht ein paar Versuche machen , um es genau so zu bekommen, wie es hier aussieht, und das ist völlig in Ordnung. Ich hatte vorher etwas Übung. Einige meiner Prozesse sind Ihnen vielleicht nicht sofort klar, aber geben Sie es einfach los und versuchen Sie verschiedene Dinge, wenn das Auffüllen nicht funktioniert, versuchen Sie Margen. Wenn die Margen nicht funktionieren, versuchen Sie es einfach weiter und Sie werden dort irgendwann etwas recherchieren. So lernen die meisten von uns Webentwicklung. Aber im Moment haben Sie mich dazu gebracht, Sie durch, wie ich es gemacht habe und hoffentlich wird es Sinn machen, wenn nicht wie immer Diskussionsfeld unten, wenn Sie irgendwelche Fragen haben. nächste Sache, die Polsterung und die Box. Ich werde in den Listeneintrag gehen und ich werde ihm etwas Polsterung geben. Schauen wir uns das Design noch einmal an. Wie Sie sehen können, gibt es oben und unten ein wenig Polsterung, aber links und rechts gibt es mehr Polsterung. Ich werde das nur schätzen. Ziehen wir einfach ein bisschen eine Auswahl Zehe. Sie können die Breite dort etwa 17 Pixel sehen, und die obere ist etwa 15 Pixel. Es sind ungefähr 16 Pixel auf beiden Seiten tatsächlich. Fangen wir damit an. Beginnen wir mit 16 Pixeln Polsterung. Für aktiv werde ich dieses spezifische Element mit einer Klasse von aktivem Ziel ansprechen, geben Sie ihm diese Hintergrundfarbe. Auch hier verwende ich Photoshop, um dies zu tun, aber Sie können das Dokument diese bestimmte Farbe einchecken. Ich gehe hier rein, hash diese bestimmte Farbe, und dann können wir sie tatsächlich auf dem Bildschirm sehen. Wie Sie jetzt sehen können, setzen Sie einfach diese Polsterung und diese Hintergrundfarbe ein, und wir haben bereits einen großen Unterschied gemacht. Natürlich, eine Sache, die ich hier sehen kann, ist, dass wir diese harten Kanten haben. Was wir tun können, um diese zu glätten, wird verwendet, was man Grenzradius nennt. Ich werde das zu unserem aktiven Link-Element hinzufügen. Randradius, fünf Pixel sind in der Regel eine gute Menge. Da gehen wir. Nun, wie Sie sehen können, ist die Polsterung hier etwas rechteckiger. Ich werde das etwas ändern. Was ich tun werde, ist die Polsterung gegen oben und unten nach links und rechts zu ändern. Ich denke, das ist ein bisschen näher. Vielleicht etwas weniger Polsterung auf der Oberseite. Ein wenig mehr Polsterung auf der rechten Seite. Wieder, es ist nicht in Hauptstädten. Die Art und Weise, wie wir das tun können, ist die Verwendung von Text transformieren, und wir können Großbuchstaben auswählen. Jetzt wird jedes Listenelement innerhalb eines nav Großbuchstaben haben. Wie Sie sehen können, gibt es immer noch einen kleinen Unterschied, aber ich werde weitermachen, weil ich nicht zu lange mit irgendeinem kleinen bisschen Element verbringen möchte . Natürlich ist die Liebe zum Detail wichtig, aber Sie können durchgehen und damit experimentieren, um es perfekt zu machen. Schauen wir uns mal an. Sieht aus, als wäre ein Kopf im Moment ziemlich gut. Der nächste Schritt ist dieser ganze Abschnitt. Ich beschriftete das in einem HTML-Dokument als Hauptüberschrift und CTA. Was ich tun werde, ist einen Stil dafür zu schaffen. Hauptüberschrift und CTA. Was will ich nun von meiner Hauptüberschrift und CTA? Zuallererst habe ich bemerkt, dass alles auf der Seite zentriert ist. Ich habe auch bemerkt, dass es hier einen gewissen Spielraum gibt. Wenn ich mir das ansehe, die Ränder etwa 150 Pixel. Was ich tun werde, ist, diesem einen Rand oben von 145 Pixeln zu geben. Jetzt ist es mehr in der Mitte. Aber dann werde ich ihm auch eine Textausrichtung des Zentrums geben, so dass es in der Mitte auftaucht. Da gehen wir. Das nächste, was in dieser Hauptüberschrift und CTA ist die eigentliche Überschrift. Ich kann die Rubrik, die sich innerhalb der Hauptüberschrift und des CTA befindet, anvisieren , indem ich die Hauptüberschrift und den CTA mit einem h1 danach einfüge Das erste, was ich merke, ist, dass die Farbe weiß ist, nicht schwarz. Da gehen wir. Die Schriftgröße ist eigentlich viel größer. Wenn ich hier reingehe, kann ich 42.16 überprüfen. Ich werde nur mit 42 Pixeln gehen. Schriftgröße, 42 Pixel. Sie werden feststellen, dass es ein Schriftgewicht ist, fett. Zum Glück haben wir auch dieses Schriftgewicht installiert. Wir können hier runter gehen und Schriftgewicht fett machen. Jetzt schauen wir uns mal an. Wow, sieh dir das an. Es ist so oft, dass die kleinsten Änderungen eine ziemlich große Wirkung haben können. Es ist verrückt zu denken, dass wir mit dem angefangen haben, was wir vorher angeschaut haben, was wäre, wenn ich diesen Stylesheet-Link einfach loswerde. Das haben wir uns vorher angesehen. Ich weiß nicht, wie lange wir seit vielleicht 15 Minuten Codierung laufen. Wir haben jetzt diesen schönen Frieden. Offensichtlich stehe ich mir selbst voraus. Es gibt noch eine Sache Stil hier und das ist der Knopf. Aber ich wollte nur kurz darauf hinweisen. Da die Schaltfläche wird so ziemlich das gleiche wie die Sendenachrichten-Taste hier unten gestylt werden. Ich werde einen Stil über Abschnitt eins für große Schaltfläche setzen. Big Button hat ein paar verschiedene Stile darauf. Vor allem hat es eine Menge Polsterung. Auch wenn Sie das Auswahlwerkzeug oben zeichnen, hat es etwa 27. An den Seiten. Es ist etwa 83 Jahre alt. Diese Zahlen werden nicht genau sein, aber sie geben uns einen guten Ausgangspunkt. Ich gehe rein und mache Polsterung von 25, 90, 25, 90. Auch für den Text wollen wir, dass es White ist. Schauen wir uns jetzt mal an. Wir können tatsächlich sehen, wie die Polsterung für uns funktioniert. Wir haben auch diese Unterstreichung, also müssen wir das beheben. Aber was wir tun können, ist, einen Stil für speziell diese Schaltfläche hinzuzufügen , um es den orangefarbenen Hintergrund zu machen. Dann können wir tatsächlich sehen, wie die Polsterung funktioniert. Was ich tun werde, ist mit diesem Selektor zu beginnen und es ist ein Tag, also werde ich es mit einem auswählen. eine Sache, die ich bemerkt habe, ist die unterstrichene, so werde ich loswerden von Textdekoration. Das zweite, was ich tun werde, ist, ihm diese Hintergrundfarbe zu geben. Die Hintergrundfarbe ist, wenn ich dieses Element auf Photoshop reingehe und inspiziere, da ist es, lege es hinein. Jetzt schauen wir mal, was passiert. Wir haben diesen großen orangefarbenen Knopf. Ich merke ein paar Dinge. Die Arbeit der US-Taste ist in Großbuchstaben und die Schriftgröße ist eigentlich ein wenig größer als auch. hier reingehe, sehe ich, dass es tatsächlich 18 Pixel sind. Genau wie zuvor, um es zu Großbuchstaben, können wir Text transformieren Großbuchstaben verwenden. Wir können die Schriftgröße auf 18 Pixel fixieren. Jetzt wird es etwas größer. Leider ist die Großschreibung nicht das gleiche wie Großbuchstaben. Tut mir Leid. Großschreibung für den Fall, dass Sie sich fragen, einfach den ersten Buchstaben jedes Wortes groß schreiben. Da gehen wir. Arbeiten Sie mit uns. Eine andere Sache, die ich merke, ist, dass es einen gewissen Rand zwischen der Schaltfläche und dem Text gibt. Das sind etwa 60 Pixel Rand. Wie Sie sehen können, gibt es bereits ein wenig Marge mit dem Überschriften-Tag, das eingebaut kommt. Aber wir können es auf 60 Pixel erweitern. Ich gehe zur Überschrift, Rand unten 60 Pixel. Das drückt den Knopf ein wenig nach unten. Eine andere Sache, Border-Radius, um ihm die schöne gekrümmte Kante zu geben. Da gehen wir. Gibt es noch etwas? Ich denke, das ist ziemlich gut, Leute. Unser erster Abschnitt ist ziemlich vollständig. Offensichtlich, wenn wir die Größe ändern, funktioniert es ziemlich gut bis zu einem bestimmten Punkt, wir werden zu beheben ansprechende Probleme in einem späteren Video bekommen. Aber für Abschnitt eins, ich denke, wir haben es in einem ziemlich guten Zustand. Es könnte ein paar Diskrepanzen geben, aber ich bin ziemlich glücklich damit. Ich hoffe, Sie konnten mit dieser Lektion folgen, wir werden jetzt ziemlich genau das gleiche tun, aber mit diesem Abschnitt und diesem Abschnitt und dann natürlich der Fußzeile, und dann werden Sie dieses ganze Projekt sehen so werden. Aber dann oben darauf, werden wir auch machen es reaktionsschnell und funktionieren gut auf jeder Bildschirmgröße. Das ist die aufregende Zukunft dieser Klasse. Ich hoffe, Sie in der nächsten Lektion zu sehen. Wir sehen uns dann. 9. CSS – Abschnitt 2: Alles klar, willkommen zurück Jungs. In dieser Lektion werden wir mit der Erstellung des CSS für unsere Lernseite fortfahren , um es daraus zu machen. Wir werden uns hier in dieser Lektion auf diesen zweiten Abschnitt konzentrieren. Dann machen wir in der nächsten Lektion den letzten Abschnitt. Genau wie zuvor werde ich mit dem Abschnitt selbst beginnen. Wenn ich hier klicke und auf das Rechteck klicke, wenn ich Photoshop verwende, kann ich die Füllung herausfinden, so dass die Farbe der Box und die Höhe davon. Lassen Sie uns diese Stile sofort einwählen. Zunächst einmal werde ich hier etwas Raum schaffen, damit ihr leichter sehen könnt, was ich tippe. Ich werde ein wenig betrügen und kopieren, was wir hier haben. Ich werde weiterhin jeden Abschnitt mit einem Kommentar trennen, nur um Lesbarkeit für mich selbst und wer auch immer kommt, und schaut sich dieses Stylesheet später auf der Strecke an. Für Abschnitt 2, wie ich bereits erwähnt, Hintergrundfarbe, wie ich gerade kopiert habe, habe ich leider schon meine Zwischenablage mit etwas anderem gefüllt, also muss ich wieder hineingehen und das noch einmal kopieren. Dann sind die Höhen, die hier oben ist, 747 Pixel. Ich werde mit 745 gehen, nur weil ich gerne abrunden und ich min-height verwenden werde. Nun benutze ich auch hier oben min-height, und Sie haben sich vielleicht gefragt, warum ich min-height und nicht height verwende. Es hat mit Reaktionsfähigkeit zu tun. Im Moment wollen wir, dass es eine minimale Höhe hat, wenn alle , ich denke, Elemente leicht darin passen. Aber wenn wir zu einer kleineren Bildschirmgröße gehen, können Sie hier mit Abschnitt 1 sehen, Sie sehen, dass die Höhe der Box größer wird und wir wollen, dass die Höhen des Abschnitts größer werden, um alle Elemente einzuschließen. Jetzt werden wir diesen Text kleiner machen und einige der Dimensionen der Elemente ändern , wenn wir in kleinere Bildschirmgrößen kommen. Aber egal, wir wollen, dass das eine minimale Höhe ist, aber auf kleineren Bildschirmgrößen freuen wir uns, dass es so lange reicht, wie es sein muss, um den gesamten Inhalt einzubeziehen. Hoffentlich klärt das das auf, wenn du dich fragst. Wenn ich zum zweiten Abschnitt scrolle, speichern Sie auf dem Dokument, aktualisieren Sie die Seite, jetzt können Sie sehen, dass wir einen grünen Hintergrund haben. Wenn ich die ganze Seite ausdehne, ist der Inhalt tatsächlich größer als die Min-Höhe in diesem Fall, also sehen wir diese Min-Höhe nicht tatsächlich. Aber sobald wir anfangen, diese Seite an Seite zu stellen, werden Sie das sehen. Eine Sache, die mir auffällt, die nicht ganz richtig ist, ist, dass hier eine Lücke besteht. Ich weiß aus Erfahrung, dass Überschriften-Tags standardmäßig einen oberen und unteren Rand haben. Im Inspektor sehen wir das an diesem orangefarbenen Bereich. Wenn ich den Mauszeiger über die Überschrift 2 führe, sehen wir oben und unten einen orangefarbenen Bereich. Ich weiß, dass das hier diesen Leerraum verursacht. Was ich tun werde, ist dieses H2 als nächstes zu bewirken. In unserem HTML nannten wir es ein Titelfeld, ich werde wieder Leerzeichen nach unten, wählen Titel-Feld, H2. Was ich tun werde, ist das Margin-top los zu werden, damit wir das loswerden können, und was ich später tun werde, ist eine Polsterung, was ich jetzt nicht tun werde, aber ich werde etwas Polsterung oben setzen, so dass es immer noch etwas Platz davon hat -Zeile an die Überschrift. Ich bin mir ein bisschen voraus, indem ich bereits an dieser Überschrift arbeite, aber ich wollte diesen kleinen weißen Raum sofort loswerden. Zurück zu unserem gesamten Abschnitt, eine Sache, die wir für den gesamten Abschnitt brauchen, ist die Farbe muss weiß sein. Wieder, setzen in Farbe weiß, speichern, dass, und da gehst du. Nun, da wir die Stile für den gesamten Abschnitt eingefügt haben, lassen Sie uns an den einzelnen Teilen arbeiten. Wir haben zuerst diesen Titelfeld-Bereich mit der Überschrift und dem Absatz. Wie wir ein wenig früher gesehen haben, hat der Titelfeld-Bereich die Klasse der Titel-Box, und wir haben ein H2 ein div mit einer Klasse von Linie und einem P-Tag. Ein paar Dinge, die ich über das Design dieses Titelfeldes bemerkt habe, ist die Nummer eins, es ist zentriert, so dass dies nach links schwebt oder nach links ausgerichtet ist, also müssen wir den Text zentrieren. Dann ist die zweite Sache, wenn ich die Bildschirmgröße erweitere, Sie können sehen, dass der Zeilenumbruch ziemlich eng geschieht, und wie wir das erreichen können, ist, indem Sie eine maximale Breite einfügen , so dass es sich nicht länger als um diese Breite erstreckt. Zuerst werde ich ausräumen, hier einen Titelkastenstil einfügen, Text ausrichten zentrieren, und schauen wir uns an, wie breit dieser Text ist. Wenn ich ein Auswahlwerkzeug um ihn herum zeichne, sind es etwa sechs oder neun. Wieder möchte ich abrunden, also werde ich eine maximale Breite von 609 Pixeln machen. Nun, was das tun wird, ist, den Text auszurichten und ihm eine maximale Breite zu geben, aber er wird immer noch auf der linken Seite erscheinen. Nun, wie wir das beheben können, ist jetzt, wo wir eine feste Breite haben, können wir in margin-links- und margin-rechts-Reihenfolge setzen, und jetzt wird das in der Mitte erscheinen. Denken Sie daran, wenn wir ein Blockelement mit fester Breite haben, können wir es innerhalb seines übergeordneten Elements zentrieren, indem wir margin-links- und margin-rechts-Reihenfolge verwenden. Jetzt gehe ich zurück zu diesem H1 und was ich will, ist etwas Polsterung oben. Hier können Sie sehen, dass zwischen dem oberen Teil des Abschnitts und der Überschrift eine Menge Polsterung ist. Wir haben die Marge losgeworden, also wird es jetzt keine inhärente Marge geben . Aber das ist cool. Wir können unsere eigene Polsterhöhe wählen, und es sieht so aus, als wären es etwa 120 Pixel. Ich werde hier reingehen, eine Polsterung von 120 Pixeln erstellen. Glücklicherweise tötet meine Codiersoftware jedes Mal, wenn ich speichere, diese zusätzliche Zeile. Ich könnte nur einen Kommentar eintragen, nur damit es aufhört, das zu tun. Tut mir Leid. Gehen wir zurück zu unserer Webseite. Jetzt können wir sehen, dass es hier einen großen Raum gibt. Es wird nicht ganz richtig aussehen, bis wir diese Richtung richtig haben. Was wir dafür tun müssen, ist es größer zu machen und es kapitalisiert zu machen. Wenn ich hineingehe und diesen Text auswähle, kann ich sehen, dass er 40 Pixel fett ist und offensichtlich groß geschrieben ist. Gehen wir rein und machen das. Schriftgröße, 40 Pixel, Schriftgewicht, Fett, Text-Transformation Großbuchstaben. Gehen wir zurück in unser Projekt und sehen, was passiert. Da gehen wir. Das ist so ziemlich die Abschnittsüberschrift erledigt. Das nächste ist die Zeile, und im Moment gibt es keine Zeile, also müssen wir diese Zeile mit CSS erstellen. Zunächst einmal müssen wir es Ziel, so Titel-Box, dann Zeile, und ich werde wieder die Photoshop-Datei als Referenz verwenden. Wir können einen Blick auf die Abmessungen dieser Box werfen, indem Sie hier klicken. Wir können sehen, dass die Breite 87 ist und die Höhe vier ist. Lasst uns diese in unser CSS einwählen. Breite 87 Pixel, Höhe, vier Pixel. Jetzt wird es noch nicht auftauchen. Der Raum wird erstellt, wie Sie sehen können, aber er wird nicht erscheinen, bis wir ihm eine Farbe geben, genau wie jedes div in HTML. Es wird keine Farbe zeigen, es sei denn, wir geben ihm eine Farbe. Wenn wir uns diese Box ansehen, können wir sehen, dass die Füllung ziemlich vollständig schwarz ist , aber was sie hat, ist eine Deckkraft. Ich kann das sagen, indem ich die Ebenen anschaue und hier die Deckkraft überprüfe. Wenn das 100 Prozent wäre, wäre es nur eine solide schwarze Linie. Aber sehen Sie, wie es ein wenig in den Hintergrund verblasst. Das liegt daran, dass es eine Deckkraft von 15 Prozent hat. Die Art und Weise, wie wir das in CSS einwählen können, ist die Verwendung von RGBA. RGBA ist eine Möglichkeit, einen Farbcode einzugeben. Für diese kleine Funktion gibt es vier Parameter. Der erste ist der rote Kanal, der zweite ist der grüne Kanal, der dritte ist der blaue Kanal, und der letzte, ich weiß nicht, wofür „A“ steht, aber hier können wir die Deckkraft. Der RGB-Code für Schwarz ist nur Nullen ringsum, da es kein Rot, Grün oder Blau gibt. Ich werde tun, ist Null; Null; Null, und dann für die Deckkraft werde ich es als Dezimalstelle setzen, also 0,15. Wenn ich das speichere, lade die Seite neu, du kannst sehen, dass wir eine Zeile haben, aber natürlich ist es hier links. Was wir tun werden, ist wieder, linksmargin-links- und margin-rechts-Reihenfolge, egal in welcher Reihenfolge Sie sie tun, und jetzt ist es in der Mitte. Wir haben unsere Überschrift, wir müssen uns ausrichten und wir müssen jetzt an diesem Absatz arbeiten. Ich denke, es geht nur darum, die Schriftgröße zu ändern. Wenn ich mich hier eingrabe, kann ich sehen, dass die Schriftgröße 18 Pixel beträgt und das Gewicht nur regelmäßig ist, also müssen wir das nicht ändern. in das Titelfeld gehe, das P-Tag darin abzurufen, umdas P-Tag darin abzurufen,werde ich die Schriftgröße auf 18 Pixel einstellen. Zurück sehen wir nun, dass unser Titelfeld ziemlich eng mit dem arbeitet , was wir in unserer Fotoshop-Datei haben. Das einzige, was ich hier wirklich bemerken kann, das in unseren anders ist, ist, dass es hier ein bisschen weniger Polsterung gibt, also schauen Sie sich einfach die 20 Pixel an. Ich werde wieder in die Linie gehen. Auch hier ist das wegen dieser Überschrift mit ihrem erben Rand, es wird von Natur aus etwas Rand unten haben. Wie Sie hier sehen können, ist dieser orangefarbene Raum der Abstand zwischen dem Text und der Zeile. Was ich tun werde, ist den unteren Rand der Überschrift auf 20 Pixel zu ändern. Nun, Sie können sehen, dass es nicht gerade perfekt ist, weil es auch hier eine gewisse Zeilenhöhe gibt, so dass wir die Zeilenhöhe ändern können. Andernfalls können wir einfach den Rand unten wählen , bis er näher am eigentlichen Design ist. Ich denke, das ist ziemlich nah genug. Süß. Das ist das Titelfeld. Wenn ich das Fenster erweitern, sieht ziemlich gut aus. Jetzt müssen wir diese Spalten zum Laufen bringen. Was ich tun werde, ist in meinen HTML zurückzugehen und einen Blick auf das zu werfen, was wir haben. Wir haben hier ein div namens Autotextzeile, und dann haben wir vier Autotexte. Um sie alle nebeneinander zu sitzen, was ich tun werde, ist ihnen eine engere Breite zu geben und dann das Anzeigeattribut Inline-Block zu verwenden. Wenn ich zu unserer CSS-Datei gehe, werde ich eine Regel für den Autotext erstellen, und was ich tun werde, ist, dass es hier tatsächlich vier Spalten gibt. Nun, theoretisch, wenn wir 100 Prozent der Breite haben, mit der wir arbeiten können, können wir alle diese Spalten 25 Prozent machen, und dann ergibt sich das bis zu 100. Aber in Wirklichkeit gibt es andere Dinge wie Rand, Polsterung und Rahmen, die die horizontale Breite und Höhe von Elementen ergänzen. Um sicher zu sein, ist eine gute Zahl, die etwas weniger als 25 ist, 23,33 Prozent. Ich werde die Breite davon auf 23,33 Prozent fixieren, und da es eine relative Breite ist, bedeutet dies, dass die Breite dieser Elemente reagieren wird , wenn der Container kleiner als 1.140 Pixel wird, was was wir wollen und du wirst sehen, dass in nur einer Sekunde funktioniert. Natürlich haben wir die Breite, aber es wird nicht in Zeile angezeigt, es sei denn, wir setzen den Anzeigestil auf Inline oder Inline-Block, also habe ich das getan. Jetzt werde ich wieder zu meinem Browser wechseln, Refresh und voila drücken. Jetzt können Sie sehen, dass sie alle schön nebeneinander sitzen. Nur um Ihnen zu zeigen, wenn wir es nicht 25 Prozent schaffen würden, gäbe es einen kleinen Zeilenumbruch, denn es gibt immer Padding Marge und Grenzen, die im Weg stehen. 23,3 Prozent gibt ihm ein wenig Atemraum, so dass sie alle schön zusammen sitzen können. Die andere Sache ist die Zentrierung innerhalb dieser Säulen. Wie Sie mich immer wieder tun gesehen haben, werde ich ihm einen Stil von Text-Align-Zentrum geben, und dort können Sie sehen, dass wir ziemlich weit gekommen sind. Wenn wir zu unserem Design zurückkehren, können wir sehen, dass dies tatsächlich ein bisschen zu nah an dem obigen Absatz ist. Wieder werde ich nur die Höhe dieser überprüfen, dass 80 Pixel. Ich werde der Autotextzeile einen Rand oben von 80 Pixeln geben. Da gehen wir. Zurück zum Design, jetzt denke ich, dass es Zeit ist, an den Autotexten zu arbeiten, und was wir für die Autotexte tun können, ist, die Größe dieser Überschriften und Absätze zu aktualisieren und auch diese Überschriften zu kapitalisieren. Was ich dafür tun werde, zielen Sie auf die Überschrift innerhalb des Autotextes, was ich denke, ist ein H3. Lasst uns das einfach nochmals überprüfen. Ja, also H3s innerhalb der divs mit einer Klasse von Autotexten, wir werden die Schriftgröße dieser ändern, also lassen Sie uns bestimmen, was das sind. Vierundzwanzig Pixel und auch fett, so müssen wir auch die Schriftstärke ändern. Schriftgröße, 24 Pixel und Schriftgewicht fett, und natürlich, Text transformieren Großbuchstaben. Speichern Sie das, und jetzt haben wir einen größeren Text. Es gibt ein bisschen von dem Alignment-Problem hier, aber wir werden das in nur einer Sekunde erreichen. Das letzte, was ich tun möchte, bevor wir das beheben, ist nur sicherzustellen , dass diese Absätze die richtige Schriftgröße haben. Was ich dafür tun werde, ist zu Photoshop gehen, wählen Sie die Schriftart, sagen, dass 16 Pixel, und wählen Sie einfach, dass in den Autotext. Wieder, beginnend mit dem Autotext und dann auf alle Ps innerhalb des Autotextes, werde ich die Schriftgröße auf 16 Pixel fixieren. Wenn wir die Seite aktualisieren, können wir sehen, dass es keine Änderung vorgenommen hat und so dass Text muss alle bereit gewesen 16 Pixel. Das letzte, was ich denke, dass wir in diesem Abschnitt zu tun haben , ist die Arbeit an diesem Spielraum hier. Ich werde wieder einen Blick mit meinem Auswahlwerkzeug werfen, sehen, das sind etwa 60 Pixel, und was ich tun werde, ist in diesen Stil für Überschrift 3 zurückzugehen und ihm einen Rand von 60 Pixeln zu geben. Wenn ich das speichere und die Seite aktualisiere, können Sie jetzt sehen, dass sich alles nach unten bewegt. Aber es gibt ein letztes Problem, und das ist, dass diese Überschrift für das Branding nicht mit den übrigen Überschriften übereinstimmt. Nun, warum ist das so? Nun, wenn Sie sich eine Sekunde nehmen, um sich die Absätze hier anzusehen, jeder von ihnen ist in zwei Zeilen, außer diesem. Wenn wir tatsächlich in der Lage waren, zu gehen und die Textmenge in diesem Absatz zu ändern, lassen Sie uns einfach alles jenseits dieses Kommas loswerden, Sie werden sehen, dass alles wieder in Ausrichtung ist, weil der Text nur über zwei -Linien. Wir könnten etwas Text entfernen und sie würden gut ausrichten, aber das ist keine wirklich gute Lösung, besonders wenn wir mehr Text für verschiedene Autotexte einfügen möchten, und es kann auch immer noch brechen, wenn wir die Bildschirmgröße senken, wie es jetzt tut . Der beste Weg und der einfachste Weg, dies zum Laufen zu bringen, ist die Verwendung von Anzeigetabelle. Alles, was wir tun müssen, ist hier zurück zu gehen und für den Autotext anstelle von Inline-Block, Inline-Tabelle, speichern Sie das , aktualisieren Sie die Seite, und selbst mit dieser zweiten oder dritten Textzeile ist alles schön ausgerichtet, als wäre es eine Tabelle mit drei Zeilen. Das ist ein netter kleiner Hack, der uns in dieser Version von CSS zur Verfügung steht. Wenn dies eine Tabelle mit drei Zeilen war, können Sie sehen, dass jede Zeile jetzt ungefähr die gleiche Höhe hat, und natürlich haben wir unsere Spalten, die wir vorher eingerichtet haben. Das ist ein kleiner Hack, um das zum Laufen zu bringen. Manchmal braucht es etwas Experimentieren mit dem Anzeigestil, um kleine Probleme wie diese zu beheben. Im nächsten Abschnitt werden wir uns tatsächlich einen anderen ansehen, der Display-Flex genannt wird. Diese verschiedenen Darstellungsstile können Ihnen bei diesen Problemen helfen. Ja, das fasst so ziemlich Abschnitt 2 zusammen. Wenn ich hier zurückblicke, sieht es ziemlich gut aus, abgesehen von einer weiteren Sache, und das ist, wie Sie hier sehen können, das Gleiche, über das wir hier oben gesprochen haben. Es scheint eine maximale Breite in diesen Absätzen zu geben, oder wenn ich nur meinen Cursor um ihn ziehe, kann ich sehen, dass er etwa 200 Pixel breit ist. Wir gehen rein, geben ihm eine maximale Breite von 200 Pixeln und wie Sie sehen können, bewegt es sich immer noch nach links. Wir müssen reingehen und das Ding tun, das wir immer getan haben, um die Dinge ins Zentrum zu bringen, und das ist margin-linksreihenfolge, margin-rechte Ordnung. Speichern Sie das, und wie Sie jetzt sehen können, wird der Abstand zwischen dieser maximalen Breite erstellt , wodurch diese Wörter auf eine neue Zeile aufbrechen. Abschließende Überprüfung. Ich denke, es sieht ziemlich nah am Design aus. Wieder, kleine Liebe zum Detail. Sie könnten hineingehen und sicherstellen, dass, wenn die Dinge fünf Pixel Unterschied sind, Sie hineingehen und sie perfekt machen können. Aber ich denke, für unsere Zwecke und für den Zweck dieser Klasse sind wir ziemlich nah dran, wo es sein muss, und wenn ich mein Fenster hineinziehe, können Sie den Effekt dieser relativen Breitengrößen sehen. Denken Sie daran, dass wir 23,33 Prozent anstelle einer Pixelbreite verwendet haben und was das erlaubt ist, wenn wir auf diesen kleineren Bildschirmgrößen sind, können wir beginnen, sie aufgrund der Größe ihres Containers anpassen zu sehen. Wie Sie sehen können, bauen wir bereits in einigen Praktiken auf, die die beste Chance gewährleisten, dass unsere Webseite so schnell wie möglich reagiert. Wieder, sobald wir auf eine Größe wie diese gekommen sind, beginnt es ein bisschen chaotisch zu werden, also müssen wir das reparieren. Aber ansonsten reagiert es ziemlich auf einen bestimmten Punkt und das ist der Vorteil, voraus zu denken und diese relativen Stile zu verwenden. Das ist Abschnitt 2. Im nächsten Video werden wir Abschnitt 3 und auch die Fußzeile machen. Ich freue mich darauf, Sie auf dieser Seite zu sehen. 10. CSS – Abschnitt 3: Alles klar, willkommen zurück Jungs. Wir sind jetzt auf dem Homestretch, um diese Webseite auf mindestens Desktop schön aussehen zu lassen. Wir haben jetzt Abschnitt 1 und Abschnitt 2 erledigt. Jetzt geht es nur darum, das schön aussehen zu lassen. Wie Sie sehen können, unsere Stile, die wir für das Titelfeld erstellt haben, bereits durchgekommen, so dass wir diesen Abschnitt nicht noch einmal tun müssen. Das ist das Tolle an Klassen und Erstellen von Stilen für sie, Sie können diese Stile wiederverwenden. Die Sache, die die meiste Arbeit in dieser Lektion hier nehmen wird, wird diese Form hier sein. Erste Dinge zuerst, wie wir in allen vorherigen Lektionen getan haben, werden wir die allgemeinen Stile für diesen Abschnitt festlegen und wir werden das gleiche Format wie die vorherigen folgen. Ich werde nur den ganzen Abschnitt 2s kopieren , weil wir die gleichen Attribute verwenden werden. Benennen Sie das in Abschnitt 3 um, und was wir ändern werden, ist die Hintergrundfarbe und die Min-Höhe. Wie immer werde ich in meine Photoshop-Datei gehen, um herauszufinden, was das sein sollte. Wie immer kann ich hier auf „Fill“ klicken und den exakten Hex-Code der Farbe erhalten. Ich kann die Höhe hier seine 820 Pixel hoch sehen. Lasst uns die sofort einwählen. Ich werde diesen Hex-Code dazu ändern und die Min-Höhe auf 820 Pixel ändern. zu unserem Projekt zurückkehren, können Sie jetzt sehen, dass die Höhe hat Einfluss auf die Farbe des Textes genommen ist anders und wir haben diesen schönen blauen Hintergrund. Mit den Abschnittsstilen und auch den Titelfeld-Stilen, die bereits für uns gemacht wurden , ist das einzige, woran wir für diesen Abschnitt arbeiten müssen, das Formular selbst und das wird uns ziemlich beschäftigt halten, denn wie Sie sehen können, dieses Formular nicht aus so etwas wie das, was wir hier haben. Zunächst einmal werfen wir einen Blick auf unser HTML. Wie Sie hier sehen können, haben wir einen Container div mit der ID des Kontaktformulars. Wir haben das eigentliche Formular im Inneren, und dann haben wir drei Formularzeilen, jede mit unterschiedlichen Eingaben. Wie Sie hier sehen können, haben wir diese beiden in einer Zeile vorhanden, die in einer Zeile vorhanden ist, und die Submit-Button in einer Zeile ebenfalls vorhanden ist. Jetzt gibt es einige kleine Probleme hier, wie Sie den Text auf der Schaltfläche nicht sehen können , weil er weiß ist und die Schaltfläche weiß ist. Das werden wir in nur einer Sekunde erreichen. Aber um mit dem übergeordneten Element zu beginnen, lassen Sie uns zunächst einen Stil für das Kontaktformular erstellen. In meinem CSS erstelle ich eine Stilregel für alles mit einer ID des Kontaktformulars, das dieses div genau hier sein wird. Was ich tun möchte, ist genau wie wir hier für das Titelfeld getan haben , ist, ihm eine maximale Breite zu geben und es zu zentrieren. Ich gehe in meine Photoshop-Datei und finde heraus, wie groß dieses Formular ist. Auf das nächste Pixel gerundet, ist es etwa 871, 870, sorry. Ich werde hineingehen und diesem eine maximale Breite von 870 Pixeln geben. Jetzt, da es eine feste Breite hat, können wir Rand links Reihenfolge und Rand rechts Reihenfolge verwenden, um es innerhalb seines übergeordneten Elements zu zentrieren. Im Moment ist dies alles nach links ausgerichtet, aber wenn wir es am Frontend untersuchen wollen, können Sie sehen, dass es jetzt in einem Container vorhanden ist , der zentriert ist und auf 870 Pixel beschränkt ist. Jetzt, da wir diese Grundlage haben, ist es Zeit, die tatsächlichen Elemente innerhalb zu stylen und wir können dies tun , indem wir den Tag Level Selector verwenden. Alle Eingaben und Textbereiche, ich möchte, dass die Farbe des eingegebenen Textes weiß ist. Ich möchte auch, dass der Hintergrund der Hintergrund ist, den wir hier haben. Wenn ich mir diese Boxen und in Photoshop anschaue, gehen Sie hinein und greifen Sie den Hex-Code. Ich kann zu meinem Code wechseln. Software, ändern Sie die Hintergrundfarbe in das. auf unser Design zurückkommen, können Sie sehen, dass es sich auf jede Eingabe und jeden Textbereich auswirkt. Nun ist das Problem damit, dass unser Submit-Button auch ein Eingabeelement ist , also wird es auch diese Schaltfläche beeinflussen, die vielleicht nicht beabsichtigt war und definitiv dafür wollen wir nicht die gleichen Stile wie wir in unserer Eingabe , um unsere Eingabe-Schaltfläche zu beeinflussen. Was wir tun werden, ist, dass wir einige Attributselektoren hier setzen müssen , um sicherzustellen, dass es nur diese beiden und nicht diese Eingabe auswählt. Dies wird ein bisschen wackelig aussehen, wenn Sie vorher nicht an CSS gewöhnt sind, aber wir können ein Attribut und einen Wert mit diesen eckigen Klammern in CSS anvisieren. Wir werden die Eingaben mit einer Art von Text anvisieren. Dann müssen wir eine andere erstellen, weil dies tatsächlich Art von E-Mail ist, also kopieren das und ändern Sie den Typ in E-Mail. Wenn ich das speichere, werden Sie sehen, dass es sich nicht mehr auf die Schaltfläche „Senden“ auswirkt. Nur diese Eingaben und dieser Textbereich. Das andere, was ich bemerkt habe, ist, dass es diese hässliche Grenze hat. Ich werde sagen, Grenze keiner, damit das loswird. Ich merke, dass der Platzhalter, obwohl er in der Lage ist, mit der Farbe weiß einzugeben. Wie Sie hier unten sehen können, haben wir geändert, dass die Farbe Weiß den Platzhalter nicht wirklich ändert. Es ändert nur den Text, den Sie in diese Felder eingeben. Um dies zu tun, müssen wir ein wenig von einem speziellen Selektortyp verwenden, und das ist ein Pseudo-Selektor. Wie wir das tun, ist durch Eingabe und ich werde alle diese Doppelpunkt, Doppelpunkt, Platzhalter auswählen. diese Weise können wir den Platzhalter bestimmter Elemente innerhalb von CSS anvisieren. Ich weiß, es könnte irgendwie funky aussehen, aber so ist es. Ich werde das zu weiß färben und dann Wallah, Sie können hier sehen, dass der Platzhalter nicht durchkommt und tatsächlich ein bisschen Text da drin ist. Das liegt daran, dass jeder Raum, den du hier reinlegst, jeder weiße Raum, auf den man stoßen wird. Lasst uns die Tags schließen und da geht's los. Textarea, ist seltsam, weil es eine Eingabe ist, aber es verhält sich einfach nicht so wie eine Eingabe. Zurück zum CSS gibt es noch ein paar weitere Änderungen, die wir hier vornehmen müssen. Wir möchten sicherstellen, dass die Schriftgröße die gleiche wie unser Design ist. Wir wollen auch einen gewissen Spielraum hinzufügen. Dann müssen wir diese natürlich so groß machen, wie sie sein müssen, also sind sie im Moment ziemlich klein, wir wollen, dass diese 50 Prozent breit ist, diese etwa 50 Prozent breit ist, und diese, um die ganze Breite unseres Behälters. gehen hier in unser Stylesheet gehen tatsächlich zuerst in unser Design. Wir können hineingehen, verwenden Sie das Textwerkzeug, um den Text hier auszuwählen und sehen, dass es 18 Pixel ist. Eingehen, Schriftgröße, 18 Pixel. Jetzt ist die Schriftgröße größer, aber die Felder sind einfach zu nah beieinander. Lassen Sie es uns ein wenig Marge setzen. Ich werde hier eine grobe Berechnung der Marge machen. Der Abstand zwischen sagt etwa 28. Hier, es ist etwa 44, gerade gehen mit 26 für jetzt. Marge, und das könnte sich in Zukunft ändern, aber lassen Sie uns einfach 26 für die Marge tun. Wie Sie sehen können, ist das ein bisschen zu viel, also werde ich es auf vielleicht 16. Wir müssen das ändern, aber das ist okay für jetzt. Was ich tun möchte, ist sicherzustellen, dass diese sich über die gesamte Breite des Containers erstrecken, also werde ich jetzt Zeile für Zeile daran arbeiten. Wir müssen die fixieren, nicht nur die Breite, sondern auch die Höhe von ihnen. Für die ersten beiden geben Sie Text und Eingabe-E-Mail ein. Ich werde hier etwas Platz schaffen. Wir machen die Breite 50 Prozent und die Höhe. Was sollten wir für die Höhe tun? Wenn wir wieder in die Box gehen, müssen Sie nur diese Auswahl löschen. Gehen Sie in die Box, wir können sehen, die Höhe ist 56 Pixel. Lasst uns diese Höhe hier wählen. Jetzt, wenn wir die Seite aktualisieren, wie Sie sehen können, wie ich bereits erwähnt habe, wobei die Spalten hier oben jeweils 25 Prozent sind. Wenn wir sie jeweils zu 50 Prozent machen, mit dem Anzeigestil von Inline, wird es zu einer neuen Linie brechen und wir müssen es etwas weniger Breite geben, damit es zusammenkleben kann. Da gehst du, mit 45 Prozent. Wir müssen das in einer Weile ändern und ich zeige Ihnen, wie wir das in einer Sekunde machen werden. Aber im Moment müssen wir diese zu 100 Prozent verlängern und dann werden wir auch die Höhe des einen herausfinden. Also gehen Sie hier hinein, klicken Sie auf das „Rechteck-Werkzeug“, damit wir die Höhe sehen können. Wir können sehen, dass es 200 Pixel sind. Ich werde meinen Textbereich in meinem CSS anvisieren, die Höhe auf 200 Pixel fixieren und die Breite auf 100 Prozent setzen. Jetzt können Sie sehen, dass die obere Zeile und die zweite Zeile ungefähr die volle Breite des Containers geht. Nun, wie ich es dir bereits gezeigt habe, müssen wir das 50-50 sein. Aber wegen der Marge, wegen allem anderen, steht es nicht an, also haben wir diese Kante, die nicht perfekt mit dieser Kante ausgerichtet ist. Was wir tun werden, um das zu beheben, ist, dass es auf 50 zurückgesetzt wird. Aber dann haben wir wieder dasselbe Problem. Wie kommen wir darüber hinaus? Nun, da können wir unseren Freund Display Flex benutzen. Wenn Sie sich fragen, warum ich diese Zeilen zu Beginn erstellt habe, class="form-row">, war es genau für diesen Zweck. Wenn ich also hier reingehe und eine Stil-Regel für Form-Zeile erstelle, kann ich Ihnen die Magie des Display-Flex zeigen. Ich werde dies so einstellen, dass Flex angezeigt wird. Ich werde die Seite aktualisieren und voila. Jetzt können Sie sehen, dass die Kanten perfekt ausgerichtet sind und es biegt sich, nehme ich an, könnte man sagen, um dieses Ergebnis zu erzielen. Selbst wenn ich die Größe der Seite ändere, bleibt sie immer noch perfekt von Kante zu Kante ausgerichtet. Das ist die Schönheit von Flex. Wir kommen ziemlich nah dran, wo wir es haben wollen. Ich merke jetzt zwei Dinge, die sich zwischen der Photoshop-Datei und unserem Dokument unterscheiden, und das ist Grenzradius und auch eine Polsterung hier auf der linken Seite. Ich werde gehen und das jetzt reparieren. Für alle Eingaben werde ich hineingehen und den Grenzradius auf fünf Pixel ändern, wie wir es überall sonst getan haben und ich werde eine Polsterung von etwa 16 haben. Wenn ich die Seite aktualisiere, können Sie sehen, beginnt ein bisschen schöner aussehen. Jetzt gibt es auch diesen Rand für den Textbereich, und das sind etwa 24 Pixel. Also im Textbereich speziell werde ich ihm eine Polsterung von 24 Pixeln geben. Dort können Sie sehen, dass wir eine schöne bequeme Polsterung haben. Das ist eigentlich ziemlich nah an dem, was wir hier haben. Es könnte ein wenig Unterschied mit der Marge geben, aber insgesamt bin ich ziemlich zufrieden damit. Ich bin bereit, hier zu unserem Knopf zu gehen. Da wir bereits einen Stil für große Schaltfläche hier oben festgelegt haben, können wir diese Stile recyceln, und so wird es vor allem darum gehen, die Hintergrundfarbe zu ändern. Also die Hintergrundfarbe der Schaltfläche, wenn wir in und wählen Sie das Feld hier, finden Sie sein Füllattribut und kopieren. Wir können die Hintergrundfarbe unseres Eingabetyps senden ändern. Du gehst also hierher und zielst darauf hin, wie wir unseren Text und unsere E-Mail gezielt haben. Muss nur [type = „submit"] sagen und dann den # -Code von 30bae7 Hintergrundfarbe färben. In Ordnung. Wie Sie sehen können, ist es viel schöner, jetzt, wo wir in diese Hintergrundfarbe setzen. Aber was wir auch tun müssen, ist, diese hässliche Grenze loszuwerden. In Ordnung. Genau wie hier müssen wir sicherstellen, dass der Text größer und groß geschrieben ist, glaube ich. Außerdem müssen wir diesen Knopf zentrieren und wir werden auch an einem kleinen Teil der Marge arbeiten. Wenn ich wieder in mein Design gehe, kann ich überprüfen, was die Schriftgröße meiner Schaltfläche ist. Es sind 18 Pixel. Lassen Sie uns das in wählen, Schriftgröße 18 Pixel. Und wie ich bereits erwähnt habe, ist es kapitalisiert. Also müssen wir Text Transformation Großbuchstaben verwenden, und dann natürlich wollen wir, dass es zentriert wird. Rand links: Auto, Rand rechts: Auto Speichern Sie das. Komm rüber und da gehst du. Es ist mehr in der Mitte. Wir müssen nur noch einmal den Grenzradius reparieren. Schauen wir uns das im Vergleich zu unserem Design an. Ziemlich nah dran. Das einzige, wie ich bereits erwähnt habe, ist der Rand, also das sind etwa 60 Pixel und wir könnten ihm hier eine Margin-top von 60 Pixeln geben. Aber wenn wir untersuchen und sehen, dass wir die Reihe größer machen, indem wir hier eine Marge haben. Was ich in diesem Fall mache, richte einen Rand oben auf der Eingabe ein. Ich werde einen Inline-Stil auf die Form-Reihe davor setzen und ihr einen Randunterschied von 60. Dadurch wird nur sichergestellt, dass die Höhen dieser Formzeilen gleich bleiben und der Rand zwischen diesen Zeilen festgelegt wird. Was ich für angemessener halte, aber gleichzeitig spielt es keine Rolle. Du hättest auch den Rand auf die Schaltfläche setzen können. In Ordnung. Das ist unsere Form erledigt. Gehen wir schnell zur Fußzeile und schließen Sie diesen Abschnitt ein und gehen Sie dann zu Medienabfragen. Dafür müssen wir etwas Ähnliches tun wie das, was wir hier oben getan haben. Es ist nur eine Reihe von Links, die derzeit als Liste angeordnet sind, also müssen wir etwas Ähnliches tun wie das, was wir dafür getan haben. Ich werde tatsächlich kopieren und einfügen, was wir hier haben. Blättern Sie nach unten, fügen Sie das in ein. Anstelle von nav ul li, was wir zielen, sind Fußzeilenlinks, und so können Sie das hier unten überprüfen. Wir haben Fußzeilenlinks mit einem ul und dann lis. Wir wollen nicht, dass sie groß geschrieben werden, also gebe ich ihm eine Texttransformation in Großbuchstaben, aber mal sehen, was passiert, wenn wir das tun. Großartig. Jetzt müssen wir auch die Textdekoration loswerden und sie weiß machen. Also werde ich das kopieren und einfügen. Erneut ändern nav zu Fußzeilenverknüpfungen. Jetzt können Sie sie leider nicht sehen, da wir tatsächlich die Hintergrundfarbe der Fußzeile ändern müssen. So Fußzeile ist nur ein Tag, so können wir in unsere Photoshop-Datei gehen, wie wir alle in diesem Abschnitt getan haben. Klicken Sie auf das Feld, finden Sie die Hintergrundfarbe davon heraus, und wählen Sie es dann in unser CSS. Also, da gehst du hin. Wir haben die passende Hintergrundfarbe, aber wir sind noch nicht ganz da, weil wir diesen Rand oberhalb und unterhalb der Liste haben. Also, wenn ich das untersuchen soll, kann ich feststellen, dass die tatsächliche ungeordnete Liste, wie Sie hier an diesen orangefarbenen Linien sehen können, Rand erzeugt. Also werde ich hineingehen und diese bestimmten ungeordneten Listen wie diese anvisieren und den Rand auf Null setzen. Jetzt, wenn ich zurückgehe, aktualisieren Sie die Seite, jetzt ist es wieder normal. Also zwei Dinge, die ich jetzt von diesem bis hierher bemerkte, ist, Nummer 1, wir müssen die Schrift größer machen. Also inspizieren Sie das in nur einer Sekunde. Auch, dass wir das hier zur Seite hängen, wo wir möchten, dass es mehr zentriert ist. Also werden wir dem Container eine maximale Breite geben und ihn zentrieren, genau wie wir es mit anderen Elementen hier oben getan haben. Also, wenn ich hier zurück zu meiner Photoshop-Datei gehe, kann ich diesen Text überprüfen und sehen, dass es 24 Pixel ist. Also lasst uns das jetzt machen. Die Schriftgröße: 24 Pixel. Jetzt mit dem Container, wenn ich hier anschaue, geht es darum, ein Auswahlwerkzeug zu nehmen und es von einer Seite zur anderen zu setzen, es ist etwa 945 Breite, also werde ich einen Stil für die Links erstellen. Maximale Breite dieses Betrags, der 945 war, und wie üblich margin-linksreihenfolge, margin-rechts-reihenfolge, speichern Sie das. Gehen Sie zurück zu unserem Dokument hier. Jetzt können Sie sehen, dass es zentriert. Die einzige andere wirklich offensichtliche Sache hier ist, dass Twitter eine andere Farbe in diesem Design hat, und das liegt daran, soweit ich das sagen kann, es ist ein aktiver Link, wie ich bereits erwähnt habe, ich weiß nicht, wie es sein könnte , wenn wir gerade nicht auf der Website von Twitter sind. Aber egal, wir haben beschlossen, es wie ein aktiver Link zu stylen. Also habe ich diesen Hex-Code kopiert, und was ich tun werde, ist das Ziel dasselbe wie ich gerade oben angestrebt habe, aber dieses Mal setze den Punkt aktiv auf das Li und dann Farbe-Hash 30bae7, und da gehst du. Jetzt, um es perfekt zu machen, gibt es hier einige Polster- und Randprobleme, so wie Sie sehen können, gibt es ein bisschen Marge zwischen hier und da, etwa 45 Pixel und unten ungefähr gleich. Dann sind auch zwischen ihnen etwa 50 Pixel zwischen ihnen. Also, um ein ähnliches Ergebnis zu erhalten, was ich tun werde, ist, etwas Polsterung auf die Liste selbst zu setzen. Polsterung oben Was war es noch einmal? Etwa 50 Polsterung oben 50 Pixel, Polsterung unten, 50 Pixel, und dann zwischen den Listenelementen selbst haben wir bereits etwas Polsterung, aber vielleicht können wir es ein bisschen größer machen, also gehe ich , um diese von 16 auf 20 zu ändern. zurück in unser Design gehen, können Sie jetzt sehen, dass es viel mehr Polsterung gibt, und es gibt etwas mehr Spielraum zwischen jedem dieser Elemente. Es ist eigentlich ein bisschen zu viel, also was ich tun könnte, ist, das auf etwa die Hälfte zu wählen. So Polsterung oben, Polsterung unten 25. Das sieht viel mehr wie das aus, was wir hier unten haben. Auch hier könnte es ein paar kleine Diskrepanzen geben, aber für den Zweck dieser Lektion denke ich, wir haben es ziemlich nah an dem, was es sein muss, und wenn Sie die Größe ändern, können Sie sehen, dass es ziemlich gut geht, reagiert als auch. Aber wie ich in den vorherigen Lektionen erwähnt habe, können Sie beginnen, den Seitenumbruch an verschiedenen Punkten in allen Abschnitten zu sehen, wenn wir ihn ein wenig einbringen. Mit diesem wird der Text also ein bisschen groß und zusammengeklebt. Das Menü wird in eine neue Zeile eingeblendet. Dieser Knopf fällt um und geht über die Schnitthöhe hinaus. Hier unten werden diese Spalten super eng und dann eine erzwungene Pause in einer neuen Zeile, und natürlich diese, Form hier , und die Fußzeile, wir müssen einige Änderungen daran vornehmen. Die Art und Weise, wie wir dies tun können, besteht darin, sogenannte Medienabfragen zu verwenden. So können Sie jetzt eine Website oder eine Webseite sehen, die wir für Desktop entwickelt haben , die ziemlich gut funktioniert und auf einen bestimmten Punkt reagiert, aber was wir tun müssen, ist in diesen Medienabfragen hinzuzufügen, um sicherzustellen, dass es aussieht perfekt auf jeder Bildschirmgröße. Im nächsten Video werde ich Ihnen zeigen, wie das geht, aber ich bin sehr aufgeregt, dass wir jetzt verändert haben, was war. Ich werde das nochmal tun, nur um den Unterschied zu zeigen. Was war das jetzt nur, indem ich einige CSS-Stile einfügte. Das ist die Macht von CSS genau dort. Also gib dir einen Klaps auf den Rücken, weil du so weit kommst. Wir haben nur noch ein wenig in Bezug auf Medienabfragen zu tun, dann werde ich Ihnen zeigen, wie man die mobile Menü-Sache macht, die auf mobilen Websites ziemlich üblich ist. Sprechen Sie auch ein wenig über Bootstrap, und dann schließen wir die Klasse ein. Also nicht lange, bleib da drin, Jungs, und ich sehe dich auf dem nächsten Video. 11. CSS – Medienabfragen: Willkommen zurück Jungs. In dieser Lektion werden wir über Medienabfragen sprechen, und wir werden Medienabfragen verwenden, um unsere Webseite vollständig reaktionsfähig zu machen. Denken Sie daran, wenn ich die Größe der Seite in einigen früheren Lektionen ändere, begann es ein bisschen wackelig zu werden, beginnt eine Pause ein wenig, und wir können all das mit Medienabfragen beheben. Was sind Medienanfragen? Nun, es gibt tatsächlich ein paar Dinge, die Sie mit Medienanfragen tun können. Ich habe die Definition hier von w3schools.com. Sie können Medienabfragen verwenden, um viele Dinge wie Breite und Höhe, Ausrichtung, Auflösung zu überprüfen . Aber im Kontext der Responsive Webentwicklung können wir Medienabfragen verwenden, um die Stilregeln unserer Elemente basierend auf einer Reihe von Bildschirmgrößen zu ändern . Für den Bereich der Bildschirmgrößen sprechen wir in der Regel über Bildschirmbreiten. Lassen Sie uns eintauchen und zeigen Ihnen sofort ein Beispiel. Das erste, was ich kenne, ist brechen, und ich stelle meine Medienabfragen gerne an die Spitze meiner CSS-Dateien, damit sie zuerst geladen werden. Das erste, was ich bemerkte, ist, was ich Ihnen vorher gezeigt habe, wenn ich die Größe des Fensters ändere und ich unter 1140 Pixel bekomme, fange ich an, enge Ränder auf beiden Seiten zu bekommen, und ich will das nicht. Hier unten erscheint es nicht wirklich, aber hier oben in der Kopfzeile tut es. Was ich tun möchte, ist anstatt margin-left auto, margin-right auto, weil es nicht mehr wirksam wird, weil es kleiner als der Container ist. Ich möchte tatsächlich eine Marge fixieren. Was ich gerade getan habe, war ein Element inspiziert, und das brachte die Entwickler-Tools. Ich werde die Entwicklertools für den Rest dieser Lektion offen halten. Der Grund, warum ist, da ich die Größe ändere können Sie in der Ecke sehen, wenn auch sehr kurz mit einer Bildschirmbreite, also kann ich tatsächlich sehen, an welchem Punkt Bildschirmbreiten brechen. Für diesen speziellen Container weiß ich, dass es sein wird, wenn er weniger als 140 Pixel ist. Ich bin mir nicht sicher, welchen Browser Sie verwenden, aber wenn Sie Chrome verwenden, können Sie nach den Entwicklertools suchen. Ich glaube, sie sind im Menü Ansicht, Entwickler, Entwicklertools. Ich habe sie bereits geöffnet, also haben sie einfach geschlossen. Eine andere Ansicht, die Sie verwenden können, um diese Dimensionen wieder anzuzeigen, besteht darin, hier auf der Gerätesymbolleiste zu klicken, und dann befinden Sie sich auf Responsive Knoten. Sie können die Größe des Fensters ändern, und diese Breite bleibt dort oben. Eine Sache, die Sie über die responsive Ansicht in Google Chrome Entwicklertools beachten sollten , ist, dass es eine mobile Umgebung simuliert. Wenn Sie es vorwärts verwenden möchten, bevor wir in die kleinsten Bildschirmgrößen wie hier unten kommen , wo es eher wie ein Telefon oder Tablet ist, müssen wir ein zusätzliches Tag in unserem HTML einfügen, und wir werden , um sowieso dazu zu kommen, also könnten wir es genauso gut jetzt tun. Wir müssen das Meta-Tag für Ansichtsfenster einfügen. Ich erwarte nicht, dass Sie wissen, was das ist, aber wenn wir nur eingeben, Meta-Tag für Viewport oder Viewport Meta-Tag in Google, Es wird für uns kommen. Ich war schon auf diesem Link, was eine ziemlich gute Ressource von Mozilla ist. Wenn wir hier nach unten scrollen, können wir das Ansichtsfenster-Tag sehen, das wir in diesem Projekt einfügen müssen. Bevor wir es reinlegen, was ist das? Nun, hier ist ein bisschen Hintergrund, wenn Sie mehr darüber lesen möchten. Grundsätzlich zwingt es, dass das Ansichtsfenster mit der Bildschirmgröße identisch ist. Wenn Sie sich fragen, warum dies nicht standardmäßig wäre, ist dies eine Möglichkeit, nicht mobile optimierte Websites auf schmalen Bildschirmgrößen im Allgemeinen besser aussehen zu lassen . Es sind eigentlich vier Seiten, die nicht mobil optimiert sind. Natürlich ist in diesem Tag und Zeitalter, in dem die Entwicklung all unserer Websites mobil reagiert, so dass es fast eine Selbstverständlichkeit ist, dass wir dieses Tag in unserem HTML setzen möchten. Ein bisschen ein hat dich da. Es ist nur etwas, das wir uns bei der Entwicklung mobiler responsive Websites erinnern müssen. Stellen Sie sicher, dass das Ansichtsfenster gleich der Gerätebreite ist. Das ist alles, was wir brauchen, um in unser HTML zu schreiben. Gehen wir zurück zu unseren Stilen und erstellen tatsächlich einige Medienabfragen. Ich stelle meine Medienabfragen gerne an die Spitze, damit sie schnell geladen werden. Wie Sie einen schreiben, verwenden Sie ein at Symbol Medien, Bildschirm, und dann ist dies, wenn Sie Ihre maximale Breite oder Min-Breite eingeben. Sie können auch Höhen setzen, aber für die Zwecke dieser Lektion müssen wir nur Breiten machen. Wie ich bereits erwähnt habe, beginnt der Rand dieses Containers einmal zu brechen, wo niedriger als 1140 Pixel sind. Ich setze dies auf max. Breite, 1140 Pixel. Anschließend öffnen Sie die Medienabfrage, indem Sie diese geschweiften Klammern wieder verwenden. Dann können Sie in den geschweiften Klammern eine CSS-Regel wie üblich ausführen. Ich kann eine Regel für Container anstelle von margin-left auto, margin-right auto erstellen, ich gehe margin-left, etwa 15 Pixel, margin-right 15 Pixel. Wenn ich das speichere, lade die Seite neu, du kannst sehen, dass nichts passiert ist. Lassen Sie mich das überprüfen. Wenn ich in den Container gehe und ihn inspiziere, wirst du sehen, dass die Stile durchkommen, aber sie sind durchgestrichen. Das bedeutet, dass sie von diesen hier außer Kraft gesetzt werden. Wenn ich diese deaktiviere, werden Sie sehen, dass diese jetzt zutreffen. Natürlich können wir sie nicht für jede Website-Nutzung deaktivieren. Wir müssen einen Weg finden, das für alle Benutzer zu beheben. Ein einfacher Hack, den wir verwenden können, ist Ausrufezeichen, wichtig. Wenn Sie das direkt nach dem Wert für das Attribut setzen, speichern Sie das, aktualisieren Sie die Seite, dann wird es überschreiben, was wir hier haben. Jetzt gibt es eine ganze Hierarchie der Spezifität in CSS, die ich in meinem Kurs auf CSS und HTML übergegangen bin. Wenn Sie mehr über die Hierarchie erfahren möchten, können Sie sich diesen Kurs ansehen, wie ich bereits erwähnt habe. Grundsätzlich müssen wir nur ein wichtiges setzen, um über diese Regel in der Hierarchie hinauszugehen. Nun gibt es eine andere Möglichkeit, dies zu tun, und das ist, indem wir diese Regel in eine andere Medienabfrage einfügen, die für diese Bildschirmgröße nicht gilt, da dies für jede Bildschirmgröße gilt, da sie sich nicht innerhalb einer Medienabfrage befindet. Ich könnte das nur für diesen speziellen Fall tun, zumindest zu Demonstrationszwecken. Was ich tun kann, ist eine ziemlich ähnliche Medienabfrage über diese eine, aber anstelle von max-Breite setze ich min-width, und ich werde den gleichen Wert einwählen, aber einen zusätzlichen. Jetzt werde ich diese Stile kopieren. Die maximale Breite kann auf beiden Bildschirmgrößen gleich bleiben. Aber ich werde die margin-left und margin-right auto entfernen, und habe das nur, wenn die Bildschirmgröße größer als 1141 Pixel ist. Wenn es niedriger wird als das, dann wird es in diesem Bereich sein, und der Rand links und Rand rechts sind jeweils 15 Pixel. Wenn ich das speichere, aktualisieren Sie die Seite hier drüben, Sie können den gleichen Effekt sehen. Ziehen Sie dieses ansprechende Fenster ein wenig mehr und sehen Sie, welche Änderungen wir möglicherweise an kleineren Bildschirmgrößen vornehmen müssen. Eine Sache, die ich bemerkt habe, ist, dass die Fußzeile beginnt, um etwa auf eine neue Zeile zu brechen, lasst uns es aufwählen und sehen, bei 932, das ist, wenn dies beginnt, auf eine neue Zeile zu brechen. Jetzt müssen wir hier eine Designentscheidung treffen. Was werden wir eigentlich tun, wenn die Bildschirmgröße zu klein ist , dass sie nicht alle mit der gleichen Schriftgröße und Polsterung haben kann. Nun, was ich denke, ist am besten geeignet, den Zeilenumbruch zu haben, aber den gesamten Text zentriert zu haben. Sie sehen hier, wie GitHub nach links schwebt. Wir möchten, dass GitHub in der Mitte schwebt, und wir wollen, dass die Zeilen so gleichmäßig wie möglich sind, in Bezug auf die Anzahl der Links sie in jeder Zeile haben. Wieder, das ist nur mein Denken. Sie können es tun, wie Sie wollen, aber das ist, was ich denke, ist der beste Weg, dies zu tun. Ich werde es hier in meinen Entwicklertools simulieren. Was ich tun kann, ist die maximale Breite der Fuß-Links zu wählen bis wir anfangen zu sehen, dass mehr von ihnen in die zweite Zeile fallen. Derzeit sind wir auf 900, also wird es niedriger sein müssen als das. Lassen Sie uns 850 wählen und sehen, was passiert. Hoffentlich sind Sie mit der Verwendung der Entwickler-Tools vertraut. Ich benutze sie während dieses Kurses ausgiebig, weil sie ein großartiges Werkzeug sind und Sie in Echtzeit mit verschiedenen Stilen experimentieren können. Wenn Sie es nicht so tun können, können Sie immer direkt zu Ihrer CSS-Datei gehen, speichern, die Seite neu laden, speichern , die Seite neu laden, die Seite neu laden, aber das ist ein bisschen schneller. Wir haben eine zweite, um auf eine neue Zeile zu fallen, indem wir diese maximale Breite nach unten bringen. Nun, wir haben tatsächlich eine ungleichmäßige Anzahl von Links, also werden wir nicht genau dasselbe in jeder Zeile haben, aber vier und drei sind nah genug. Ich gehe bis zu dem Punkt, an dem es kaputt ist. Das ist 676. Jetzt müssen wir uns an Breiten erinnern. Ich habe die Haltepunkte vergessen, also werde ich nur ein Medienabfrageframework erstellen. Ich werde nur ein leeres Feld schaffen, um das hineinzufügen. Aber wir wissen, dass wir vollständige Links auf eine maximale Breite dieses Wertes aktualisieren möchten. Wann wollen wir, dass das passiert? Wenn ich die Seite neu lade, können wir den Punkt, an dem sie bricht, in eine neue Zeile neu identifizieren. Mit der responsiven Ansicht wähle ich die Nummern herunter und es sieht so aus, als wäre es 932. Wir werden es hier in 932 Pixel setzen. Aktualisieren Sie die Seite. Wir können hier sehen, dass unser Stil wieder überschrieben wird. Wir werden diesen Hack von Wichtigem verwenden, und wenn ich wieder aktualisiere, können Sie sehen, dass, sobald wir von 933 auf einen niedrigeren Punkt runter sind, es auf zwei Zeilen brechen wird. Natürlich möchte ich, dass das alles zentriert ist. Eine Sache, die ich dagegen tun kann, ist in einem Stil von Text ausrichten Mitte gesetzt. Auch hier ist dies nur in meinen Entwicklertools, um zu überprüfen, ob es funktioniert. Ja, sieht gut aus. Lassen Sie uns hier reingehen, und Text ausrichten Mitte. Laden Sie die Seite neu, um zu sehen, dass diese Änderungen dauerhaft gemacht wurden. Ja, jetzt haben wir es auf eine neue Linie zerbrochen. Bevor wir nach oben scrollen und an den kleineren Bildschirmgrößen arbeiten, merke ich tatsächlich ein bisschen ein Problem, das Sie vielleicht verpasst haben. Das ist, dass hier links mehr Platz ist als rechts. Dies sitzt nicht genau in der Mitte, und das wird ausgeprägter werden, wenn wir die Bildschirmbreite senken. Wie Sie hier sehen können, ist es definitiv zur Seite. Wenn ich zurück zu 908 gehe und ich einen Blick auf den Inspektor für dieLinks habe einen Blick auf den Inspektor für die , sieht in Bezug auf die Boxen auf dem Bildschirm in Ordnung aus. Aber wenn ich in UL gehe, kann ich sehen, dass die Polsterung, die durch die grüne Box dargestellt wird, oben, unten und links ist. Wir setzen die obere und untere Polsterung explizit, aber aus irgendeinem Grund gibt es eine linke Polsterung. Dies muss etwas sein, das standardmäßig mit ungeordneten Listen kommt. Aber es ist etwas, das wir loswerden können, indem wir eine Regel einfügen, Polsterung links 0. Dort können Sie sehen, dass wir das Problem gelöst haben. das dauerhaft zu machen, müssen wir es natürlich in unsere CSS-Datei einfügen. Ich werde einen Stil für Fußzeilenverknüpfungen UL erstellen und die Polsterung links auf 0 ändern. Wenn wir nun die Seite aktualisieren, wird diese Änderung dauerhaft sein. Jetzt, da wir diesen zusätzlichen Platz haben, der durch Polsterung belegt wurde, können wir diese maximale Breite tatsächlich ändern, wenn wir wollen. Ich kann es noch mehr abwählen, so dass mehr der Links auf die neue Linie brechen. Das ist 636, scheint dort zu sein, wo es ist. Ich werde das hier aktualisieren. 636. Aktualisieren Sie die Seite. Jetzt können Sie unsere Fußzeile und unsere Fußzeilenlinks online schön in der Mitte der Seite sehen. zurück zu 908 gehen und einen Blick auf die Seite werfen, während wir die Bildschirmbreite senken, schauen wir uns an, welche Probleme auftreten. Das wird ein bisschen eng, aber ich mache mir noch keine Sorgen darüber. Ich gehe runter auf etwa 800. War immer noch in Ordnung. Noch weiter runter auf etwa 750. Schauen wir uns jetzt mal an. Alles sieht gut aus, abgesehen von hier, wir können sehen, dass diese Gezeiten in zwei Linien brechen, also vermasselt die Ausrichtung ein wenig. Eine Möglichkeit, das zu beheben, besteht darin, die Schriftgröße zu reduzieren. Ich werde es nur im eigentlichen Inspektor abwählen. 22 sollte ausreichen, um dieses Problem zu klären. Aber natürlich muss ich herausfinden, wann dieses Problem auftritt. Ich werde mich auf diese Überschrift konzentrieren, mein Fenster herausziehen, und es sieht so aus, als ob es bei einer maximalen Breite von 797 vorkommt. Wie immer werde ich eine Medienabfrage dafür machen, und nur als kleine Nebenanmerkung, Jungs. Sie müssen nicht so viele Medienabfragen stellen, wir könnten einige davon tatsächlich kombinieren. Aber das ist genau die Art, wie ich es gerne mache. Traditionell möchten Sie diese kombinieren oder sogar bestimmte Haltepunkte haben, wie in Bootstrap, die ich Ihnen später zeigen werde. Aber für mich gehe ich einfach nur durch und repariere Dinge nur , wenn es genau auf die Bildschirmbreite kommt. Das ist genau die Art, wie ich es gerne mache. Fühlen Sie sich frei, es anders zu machen. Randnotiz ist vorbei. Ich werde einen Stil für die Autotext-Überschrift erstellen, um es 22 Pixel zu machen. Schriftgröße 22 Pixel, und weil wir einen vorherigen Stil überschreiben, wo Sie wichtig darauf setzen müssen, und da gehen Sie. Bei 797 waren ziemlich gut, ziehen wir in unserem Fenster noch mehr hinunter auf etwa 735. Ja, 700 oder 695. Jetzt können Sie sehen, dass der Zeilenumbruch wieder mit der Überschrift passiert. Aber das ist gesagt, anstatt die Schriftgröße der Überschrift zu ändern. Ich denke, es ist an der Zeit, dass diese vierspaltige Zeile in eine zweispaltige, zweireihige Situation wird. Wir können dies tun, indem wir die Zeilenbreite verdoppeln. Offensichtlich, wenn wir in kleinere und kleinere Bildschirmgrößen gehen, wird es einen Punkt geben, an dem die Spalte in eine neue Zeile bricht. Wir könnten es genauso gut früh in den Rücken ersticken und dann können wir auch dieses Überschriftenproblem beheben. Was ich tun werde, ist mit 46,66 Prozent in meinen Entwicklertools zu experimentieren , nur um zu sehen, dass es funktioniert. Sie können sehen, dass es das tut. Ich werde eine Bildschirmbreite wählen, wenn dies wieder zu brechen beginnt. Es scheint um 732 zu passieren. Wiederum mit Medienabfragen, maximale Breite 732, Autotext Breite 46,66 Prozent, und wichtig, um sicherzustellen, dass es überschreibt den vorherigen Stil. Aktualisieren Sie die Seite. Jetzt können Sie sehen, dass es, sobald es 732 erreicht ist, in zwei Zeilen mit jeweils zwei Spalten aufgeteilt wird. Eine andere Sache, die ich bemerkte, dass wir vorher nicht wirklich gesehen haben, wenn sie alle nebeneinander aufgereiht sind, ist, dass wir ein bisschen Marge auf der Unterseite brauchen. Hier sehen Sie, dass das etwas zu nah am nächsten Abschnitt ist, und diese beiden sind ein bisschen zu nah beieinander. Ich werde dem Autotext auch etwas Marge unten geben. Rand unten 30 Pixel. Dort kann man sehen, dass zwischen den Elementen ein bisschen mehr Atemraum ist. Ich musste das nicht wichtig machen, weil wir noch keine Regel für den Rand definiert haben. 704, wählen wir uns auf etwa, gehen wir mit 50 Schritten, 650. Das geht mir ziemlich gut. Gehen wir runter auf 600, die Form sieht gut aus. Jetzt haben wir ein Problem. Wir können sehen, dass sich unser Button in den nächsten Abschnitt erstreckt. Ich werde mich anrufen, um zu sehen, wann diese Änderung passiert. Es scheint genau um 619 zu passieren. Wie ich das lösen werde, ist dieser Text sowieso ein bisschen groß aussieht. Ich kann die Größe davon reduzieren und das bringt diesen Knopf zurück in den Abschnitt. Sie sollten mittlerweile daran gewöhnt sein, Medienabfragen zu schreiben , weil wir schon so viele von ihnen geschrieben haben. Wählen Sie einfach in einer maximalen Breite von 619, und für die Überschriftengröße ist es jetzt auf 42, ich denke, 35 wird ausreichen. Lassen Sie es uns in den Inspektor-Tools einwählen. Ja, das sieht ziemlich gut aus. Ich gehe in die Hauptüberschrift und CTA, H1-Schriftgröße 35 Pixel, und natürlich wichtig, diesen vorherigen Stil zu überschreiben. Wenn wir nun die Seite aktualisieren, wird das dauerhaft sein. Wie Sie sehen können, sobald es diesen Punkt erreicht, wird der Text kleiner und wir haben nicht, dass diese Schaltfläche in den nächsten Abschnitt geht. Eine andere Sache, die Sie bemerken werden, ist unsere Speisekarte hier oben. Es bricht auf eine neue Linie und es sieht nicht mehr toll aus. Das ist etwas, das Sie jetzt beheben können, aber wir werden tatsächlich ein mobiles Menü speziell für Mobilgeräte erstellen. Ich mache mir in diesem Stadium keine Sorgen, das wird die nächste Lektion sein. Aber schauen wir uns alles andere auf unserer Seite an. Alles andere sieht noch ganz in Ordnung aus. Ich werde weitermachen, 550. Jetzt gehen wir auf die Größen ein, die Sie möglicherweise auf Ihrem Telefon sehen. Hier können Sie sehen, dass der Text ein bisschen groß ist, wir werden den Knopf wieder brechen. Ich kann es einfach sagen. 450. Das ist in Ordnung, 400 und jetzt können Sie sehen, dass der Knopf wieder in diesen Abschnitt einbricht. Ich werde so ziemlich den gleichen Stil machen, aber fügen Sie einfach einen neuen Haltepunkt hinzu. Am Breakpoint von 404 möchte ich, dass die Überschrift noch kleiner wird. Ich werde es auf 25 wählen, nur damit es uns etwas Raum gibt, damit wir arbeiten können wenn wir in die noch kleineren Bildschirmgrößen gehen. Ich kann grundsätzlich kopieren, was wir hier bereits haben, dies auf 25 ändern und den Bruchpunkt oder die maximale Breite auf 404 ändern. Nun, wenn ich die Seite aktualisiere, können Sie sehen, sobald sie zu dem Punkt kommt, an dem die Schaltfläche brechen würde, sie kommt jetzt wieder in die Ausrichtung. Wie Sie hier auf den Diensten sehen können, die wir anbieten, Es fängt an, ein wenig eng mit diesen Spalten zu werden, also was ich tun werde, ist es von nun an eine einspaltige Zeile zu machen. Machen wir es bei 404, nur um uns das Schreiben einer anderen Medienabfrage zu ersparen. Was ich tun werde, ist hier reingehen, Autotext, Breite und machen wir es zu 90 Prozent. Das wird sicherstellen, dass nur einer in jeder Reihe geht. Wir müssen diesen wichtigen Tag wie gewohnt eintragen. Speichern, aktualisieren Sie die Seite, und los geht's. Nun, wir haben ein Problem mit Marge und dann, wenn Sie das sehen können , aber es gibt ein bisschen mehr Platz auf der rechten Seite, als es auf der linken Seite war, also was ich tun werde, ist, ihm eine gleiche Marge auf der linken Seite von 5 Prozent und eine Marge auf das Recht von 5 Prozent. Vorausgesetzt, dass es keine Polsterung gibt, werden 5 plus 5 plus 90 bis zu 100 addieren und es sollte gut ausrichten. Wie Sie sehen können, hat es. Scrollen Sie nach unten, es wird ein wenig eng hier, aber lassen Sie mich einfach ein wenig niedrigste Bildschirmgröße bei 350 gehen. Denken Sie daran, das Menü hier zu ignorieren. Auf unserem Formular wird es ein bisschen eng, aber alles sieht gut aus. Ich werde es auf 300 wählen und bei 300 können Sie anfangen zu sehen, wie Knöpfe durcheinander werden. Genau hier wird die Nachricht senden und die Arbeit mit uns Button ein bisschen durcheinander. Jetzt möchten Sie nicht für Bildschirmgrößen optimieren , die wie lächerlich klein sind, wie 200. Sobald wir in diese kleineren Bildschirmgrößen gekommen sind, simuliere ich gerne die Bildschirmgrößen beliebter Geräte. Auf dem Galaxy S5 ist das, was unsere Website wird mit 360 Pixel Breite aussehen. Auf dem Pixel 2 mit einer Breite von 411 wird es so aussehen. Bei Pixel 2 Excel wird es so aussehen, und so weiter und so weiter. Wenn wir auf die Ansicht für iPhone 5 gehen, können Sie sehen, dass Mobiltelefone so niedrig wie 320 gehen. Ich denke, das ist ungefähr so niedrig wie es wird und das ist, wenn Sie sehen können, dass der Knopf oben und auch hier unten durcheinander geht. Was ich tun werde, ist, an diesem Knopf zu arbeiten , und vielleicht könnte das es für uns beenden. Wenn ich hier experimentiere, wenn ich die Schriftgröße verkleinere, wird das vielleicht funktionieren. Ja. Also werde ich das tun. Lasst uns herausfinden, an welchem Punkt. Wir können immer nur 320 wählen, aber ich werde den genauen Punkt finden , dass es vermasselt, so dass es auf allen Bildschirmgrößen reagiert. Sie es nach unten wählen, sieht es so aus, als ob es um 314 passiert, aber aus irgendeinem Grund, wenn wir die Seite auf 320, iPhone 5 aktualisieren , wird es ein bisschen durcheinander. Lassen Sie uns einfach 320 auf Medienbildschirm und maximale Breite 320 tun . Wir werden die Schriftgröße der großen Taste zu reduzieren, was war es, dass wir beschlossen haben? Ich denke, es waren 15 Pixel und wir werden eine wichtige auf das Ende setzen. Wenn ich nun die Seite aktualisiere, können Sie sehen, dass die Schaltflächen nicht mehr kaputt sind. Wenn ich hier runter gehe, dieser Knopf auch nicht kaputt. Nun, was Sie vielleicht tun möchten, ist, den Platzhalter und den Text, den Sie hier eingeben, kleiner zu machen und vielleicht möchten Sie tatsächlich auf Mobilgeräten testen, um zu sehen, ob Sie das tun müssen. Aber für den Zweck dieser Klasse, denke ich, wir haben es nahe genug, um mobile Reaktionsfähigkeit. wir einen Blick auf unsere Arbeit, indem wir in den Responsive-Modus zurückkehren und sie von einer breiten Bildschirmgröße auf eine enge Bildschirmgröße ziehen. Lassen Sie uns es Abschnitt für Abschnitt machen und haben eine letzte Überprüfung, um zu sehen, ob etwas Großes außer dem Menü natürlich bricht. Hier können Sie sehen, wie es bald brechen wird, aber wir setzen diese Medienanfragen. Wieder, wenn wir kleiner und kleiner gehen, bricht es unter 300, aber ich glaube nicht, dass es irgendwelche Bildschirmgrößen gibt, die weniger als 300 sind, also müssen wir wahrscheinlich nicht dafür optimieren. Werfen wir einen Blick auf unseren zweiten Abschnitt. Wie Sie sehen können, beginnt es als vierspaltige Zeile, wird enger und enger. Die Überschrift wird kleiner und dann brechen wir in eine zweispaltige Zeile und dann brechen wir bei einer bestimmten Bildschirmgröße in eine einspaltige Zeile auf. Dann für das Formular, das Formular, an dem wir nicht viele Änderungen vornehmen mussten. Ich glaube nicht, dass wir daran etwas geändert haben. Das ist die Schönheit von Flex und wie wir es eingerichtet haben. Wenn wir tiefer und tiefer und tiefer gehen, sieht es weiterhin gut aus. Vielleicht wollen wir die Textgröße dieser Adresse hier und natürlich die Fußzeile reduzieren. Wenn wir nach unten gehen, können wir sehen, dass, sobald wir gezwungen sind, auf eine neue Linie zu brechen, es zwei zusätzliche, Links auf eine neue Linie, zentriert sie in der Mitte und dann, wenn Sie innen und innen ziehen, Es bleibt zentriert und es sieht gut aus. Da geht ihr, Leute. Das ist unsere Website jetzt für Mobilgeräte mit Medienanfragen eingerichtet. Wieder, wie ich bereits erwähnt habe, ist das Menü das Letzte, was wir klären müssen. Was wir tun werden, ist, was man hier ein Hamburger-Symbol nennt, so dass Sie das Menü ein- und ausschalten können und wir werden es schöner formatieren. Das ist ziemlich Standard in modernen Websites und Web-Apps. Ich denke, das ist eine wichtige Lektion. Hoffentlich dauerte diese Lektion nicht zu lange über Medienabfragen. Wie gesagt, ich habe gerne viele Medienabfragen, aber Sie können einige davon auch kombinieren und weniger Haltepunkte haben, weniger Punkte, wo Dinge passieren. Aber wie ich es gerne mache, ist weit anfangen, die Bildschirmbreite senken und fixieren, wie Sie gehen. Verschiedene Striche für verschiedene Leute Jungs, es gibt keine falsche Art, es zu tun. Solange die Website auf allen Bildschirmgrößen gut erscheint, ist das das Wichtigste. Danke, dass du Jungs gesehen hast, ich freue mich darauf, dich im nächsten Video zu sehen, wo wir an diesem mobilen Menü arbeiten werden. 12. Ein Menü für Mobilgeräte erstellen: Um unser reaktionsfähiges Webseiten-Projekt abzuschließen, machen wir in dieser Lektion dieses Menü in ein umschaltbares , mobiles Responsive-Menü. Wenn wir hier die Bildschirmbreite senken, kann ich sehen, dass es klebt und bricht auf eine neue Zeile und bei einer bestimmten Bildschirmgröße bricht einer der Elemente auf eine dritte Zeile. Nun, das sieht nicht so schlecht aus ohne 1, 2, 3, 4, 5 Menü-Links, aber auf einigen anderen Websites haben wir vielleicht sechs oder mehr Menüpunkte und sobald wir hier eine Bildschirmbreite erreicht haben, beginnt es ein wenig überfüllt zu werden. Es beginnt schwieriger für Menschen zu sein, mit dem Daumen auf Handy zu drücken und wir brauchen eine Lösung. Eine wirklich gemeinsame, und die, die wir in diesem Projekt aufbauen werden, ist etwas, das Sie wahrscheinlich vorher gesehen haben. Ich werde meine eigene Website öffnen, christhedeveloper.com und Sie können sehen, dass wir hier ein Top-Level-Menü haben , dass, wenn wir die Bildschirmgröße zu einem Hamburger-Symbol wird, das wir jetzt das Menü in einer vertikalen Art und Weise umschalten können. Das ist der Unterschied zwischen Desktop und einer mobilen Version. Um dies zu tun, werden wir natürlich HTML und CSS brauchen, aber wir werden auch JavaScript brauchen. Denn wenn ich Dinge ein- und ausschalten möchte, mache ich die Webseite interaktiv und für alle Interaktivität am Frontend müssen wir JavaScript verwenden. Das erste, was ich tun möchte, ist, den Link zu erstellen , um das Menü zu erweitern und zusammenzufassen, und was wir dafür brauchen, ist das Hamburger-Symbol. Nun, genau wie wir es beim Importieren der Schriftart für Titillium Web getan haben, um diese Schriftart in unserem Projekt zu verwenden, müssen wir eine so genannte Symbolschriftart importieren. Eine Symbolschriftart ist ziemlich dasselbe wie eine normale Textschriftart, außer anstelle dieser Buchstaben des Alphabets, werden wir verschiedene Symbole haben. Die Symbolschriftart, die wir für dieses Projekt und wahrscheinlich die beliebteste in der Welt verwenden werden, heißt Font Awesome, und Sie können darauf zugreifen, indem Sie auf fontawesome.com gehen. Klicken Sie einfach auf Start Using Free, und hier ist der einfachste Weg, um es in Ihrer Webseite einzurichten, indem Sie einfach dieses Stück HTML kopieren. Ich werde das kopieren und genau wie ich bereits erwähnt habe, als wir das Google-Tag gemacht haben, werden wir es einfach von einem externen CDN verknüpfen, was bedeutet, dass wir die Schriftart nicht selbst herunterladen müssen. Da geht es, es ist ein ziemlich langes Tag, es gibt einige Attribute, die wir nicht wirklich verstehen müssen. Dies wird die Datei importieren, die wir benötigen, um auf das Hamburger-Symbol zuzugreifen. Zurück zur Font Awesome Website, müssen wir nur die Referenz für das Hamburger-Symbol suchen. Wir können in Symbole gehen und es gibt über 5.000 von ihnen, damit wir hier filtern können. Die, die wir suchen, heißt Barrs und Sie können hier sehen, es ist der erste Gegenstand. Ich werde darauf klicken und es wird mir den genauen HTML-Code geben , den wir in diesem Projekt einfügen müssen, damit es angezeigt wird. Ich werde klicken, um zu kopieren und was ich tun werde, ist, in unserem Header, etwas Raum zu schaffen und ich werde es nach dem Nav setzen. Ich werde ein Link-Tag einfügen, und jetzt werde ich es einfach leer haben. Ich werde ihm eine ID des Menü-Symbols geben, und später werde ich dort etwas JavaScript-Code einfügen , so dass es tatsächlich etwas tun wird, wenn wir darauf klicken. Innerhalb dieses Link-Tags werde ich den Code einfügen, den wir gerade von dort kopiert haben. Wenn wir zurück zu unserer Website gehen und die Seite aktualisieren, können Sie sehen, dass wir das Hamburger-Symbol dort haben, aber es ist direkt gegen das Logo und es ist blau und es ist nicht wirklich richtig formatiert. Das ist, was wir als nächstes tun müssen, und die andere Sache ist, dass wir nicht wollen, dass es auf Desktop-EVA angezeigt wird. Ich werde dem Link ein Stilattribut hinzufügen und es so einstellen, dass keine angezeigt wird. Was dies tun wird, ist sicherzustellen, dass es standardmäßig nicht angezeigt wird, wenn wir unsere Website laden. Jetzt wollen wir natürlich, dass es auf einer kleineren Bildschirmgröße angezeigt wird. Was ich tun werde, ist einen Breakpoint zu finden , der mit einer unserer Medienabfragen übereinstimmt, nur um es einfacher zu machen, und dann werde ich es auf Mobilgeräten zeigen. unsere Entwicklertools wieder öffnen, damit wir Bildschirmpeitschen sehen können, werde ich die Fensterbreite bis zu einem Punkt bringen , an dem ich denke, dass es in das mobile Menü einbrechen muss. Nun, weil wir nicht viele Menü-Links haben, können wir tatsächlich ziemlich weit gehen, ohne in das mobile Menü zu brechen. Auf anderen Websites haben Sie möglicherweise sechs oder mehr Links, so dass Sie den Bruchpunkt früher machen oder sogar einige der Links ausblenden möchten. Aber für uns werde ich nur um 797 wählen. Wieder, Sie können wählen, wo Sie es setzen wollen, wir könnten es viel später hier unten tun, wie 619, oder hier oben bei 797, es liegt an Ihnen. Es ist einfach einfacher, wenn wir einen Bruchpunkt verwenden, wir hier in unseren Medienabfragen bereits festgelegt haben. zu unserem Code gehe, sagte ich, dass wir bei 797 Pixeln umschalten werden. Was ich tun werde, Zielmenü-Symbol und setzen Sie es auf Inline-Block anzuzeigen, und wir müssen es wichtig machen, weil wir bereits den Stil der Anzeige keine auf dem tatsächlichen Element platziert haben. Wir müssen wichtig verwenden, um das zu überschreiben. nun die Seite aktualisieren, sehen Sie, dass das Symbol nicht angezeigt wird, aber wenn wir die Breite des Fensters auf niedriger als 797 reduzieren, können Sie sehen, dass es dort angezeigt wird. Jetzt müssen wir viel mehr Stile hinzufügen, damit das funktioniert, also lasst uns damit beginnen. Wenn wir den Bildschirm bringen, den wir wieder haben, ist das erste, was ich merke, dass er blau und klein ist. Um diese Farbe Weiß und Schriftgröße zu beheben, werde ich auf 25 Pixel setzen. Wenn Sie nun ein wenig verwirrt sind, warum wir Schriftgröße verwenden, denken Sie daran, dass wir Symbolschriftarten verwenden und nur weil es keine alphabetischen Buchstaben sind, fungiert es immer noch als Schriftart innerhalb von HTML. Wenn ich die Seite aktualisiere, können Sie sehen, dass sie viel größer aussieht und jetzt weiß ist. Es sieht so aus, wie wir es wollen, aber die Position davon ist immer noch ein Problem. Nun, eine Sache, zu der wir neigen könnten, ist, es nach rechts zu schweben. Jetzt können Sie sehen, dass es hier zwischen dem Bild und dem Menü schwebt. Aber die Sache ist auf Handy, wir wollen nicht wirklich, dass dieses Menü erscheint. Wir wollen, dass es vertikal angezeigt wird, wenn wir das ein- und ausschalten. Eine andere Sache, die wir in dieser Medienabfrage tun müssen, ist das Menü ganz auszuschalten. Wenn wir hier rüber schauen, ist es nur in diesem Navi, dem wir keine ID gegeben haben, und wir haben nav nur einmal verwendet, so dass es für uns sicher ist, den Tag-Level-Selektor zu verwenden. Was wir tun werden, ist das nav so einstellen, dass keine auf dieser Bildschirmgröße angezeigt wird. Wenn ich nun die Seite aktualisiere, können Sie sehen, dass, sobald wir diese Bildschirmgröße erreicht haben, das Desktop-Menü ausgeblendet wird und dann ein Hamburger-Symbol angezeigt wird. Wir müssen ihm nur einen gewissen Spielraum geben, weil es hier direkt an den Rand geklebt ist. Ich werde es 15 Pixel Rand auf der rechten Seite geben. Jetzt können Sie sehen, dass es von der Seite kommt. Es ist auch ein wenig höher als unser Logo hier, so dass Sie vielleicht auch einen gewissen Rand nach oben geben möchten, vielleicht etwa 10 Pixel. Es gibt einen anderen Weg, wie wir das mit Position absolut tun könnten, aber ich werde Sie nicht weiter verwirren. Es gibt tatsächlich ein paar Möglichkeiten, wie wir dieses Symbol zum Auftauchen bringen können. Ich werde die Marge oben auf fünf reduzieren. Ich denke, das ist ein bisschen mehr in der Schlange. Süß. Nun, da wir das Desktop-Menü auf Handy versteckt haben, und statt, dass wir stattdessen dieses Hamburger-Symbol haben, das nächste, was wir tun müssen, ist dieses Hamburger-Symbol zu bekommen , um tatsächlich das Menü umzuschalten. Andernfalls sollte das Desktop-Menü zunächst ausgeblendet werden? Dafür müssen wir JavaScript verwenden, da jedes Mal, wenn wir Benutzereingaben akzeptieren und etwas auf der Seite ändern müssen, müssen wir JavaScript verwenden. Was ich tun werde, ist, etwas JavaScript zu kopieren und einzufügen weil dies nicht gerade ein JavaScript-Kurs ist. Aber ich werde erklären, was die Funktion, die wir verwenden werden, ist und wie sie tatsächlich funktioniert. Erstens, bevor wir die Funktion tatsächlich erstellen, möchte ich hier ein Attribut zu unserem Link hinzufügen. Dieses Attribut wird on-click aufgerufen werden, und im Inneren werde ich eine JavaScript-Funktion hinzufügen. Die JavaScript-Funktion wird Toggle Menu genannt werden, und um eine Funktion zu definieren, müssen wir offene und schließende Klammern und einen Doppelpunkt setzen. Nun, was dies in technischer Sprache tun wird, ist, diese Funktion zum On-Click-Ereignis dieses Link-Tags hinzuzufügen . Aber wirklich alles, was Sie wissen müssen, ist, dass diese Funktion ausgelöst wird, wenn wir auf diesen Link klicken. Um dieses Menü aus- und einschalten zu können, müssen wir es irgendwie kennzeichnen. Wir könnten es mit nav taggen, also nur ein Tag-Level-Selektor, aber es besteht die Möglichkeit, dass es mehrere nav Tags geben könnte. Ich werde hier nur ein bisschen fleißiger sein und das tatsächlich mit einer ID definieren. Ich werde dieses Hauptmenü anrufen. Das ist alles, was wir in unserem HTML tun müssen, um dies zum Laufen zu bringen. Nun, für das JavaScript, das ich am Ende der Seite setzen werde. Wir können etwas JavaScript in unser HTML-Dokument mit Skript-Tags einfügen, und dann dazwischen werde ich meine Funktion kopieren und einfügen. Dies ist die Funktion, die ich früher vorbereitet habe. Es wird Toggle-Menü genannt. Wie Sie sehen können, dass dem Namen hier oben entspricht, und was es tun wird, ist das Element durch die ID des Hauptmenüs zu greifen , das genau hier ist, , das genau hier ist,das nav und wird überprüfen, ob es derzeit das -Anzeigestilblock. Wenn dies der Fall ist, stellen Sie die Anzeige auf keine ein. Wenn nicht, wird es auf Blockierung gesetzt. Ziemlich ein einfaches Stück Code. Es wird nur den Anzeigestil von keiner zu Block umschalten , basierend darauf, ob er sich derzeit im Block oder momentan in keinem befindet. Eine ziemlich grundlegende Funktion dort. Wenn ich nun die Seite speichere und neu lade, sieht jetzt alles gleich aus. Aber wenn ich auf dieses Symbol klicke, können Sie sehen, dass es das Menü aus- und einschaltet. Jetzt ist das Problem hier, dass wir das gleiche Menü haben wie wir es auf dem Desktop tun. Es ist genau das gleiche Desktop-Menü, nur auf einer anderen Bildschirmgröße. Das nächste, was wir tun müssen, ist, den Stil dieses Menüs zu ändern. Was ich tun werde, damit es das Desktop-Menü nicht beeinflusst , ist es in dieser Medienabfrage zu definieren. In dieser Medienabfrage wird das Menü-Symbol angezeigt. Es wird all diese Attribute haben. Das nav wird standardmäßig ausschalten, aber wenn wir darauf klicken, ändert sich das, um Inline-Block anzuzeigen. Um dies zu beenden, müssen wir nur Stile geben, um es vertikal zu machen. Wir haben bereits eine ID definiert, so dass ich in und Ziel-Hauptmenü mit seiner ID gehen und um die Ergebnisse zu erhalten, die ich will, werde ich das Menü volle Breite machen, und ich werde jedes Element im Menü machen. Mit einem abhängigen Selektor hier richte ich Listenelemente innerhalb einer ungeordneten Liste im Hauptmenü an. Ich werde festlegen, dass Block anstelle von Inline-Block angezeigt wird. Wenn ich das speichere, aktualisieren Sie die Seite jetzt können Sie sehen, wenn Sie im Menü wechseln, erhalten Sie eine vertikale Liste. Das Problem mit diesem vertikalen Menü ist nun , dass es auch unser Hamburger-Symbol nach unten drückt. Das liegt daran, dass alle unsere Elemente schweben. Denken Sie daran, dass wir dieses Menü-Symbol so eingestellt haben, dass es rechts schwebt und wenn wir nach unten scrollen, wo wir das nav definiert haben, haben wir es so eingestellt, dass es auch rechts schwebt. Wenn diese schwebenden Elemente, wenn eine ändert sich das andere wird sich ändern. Wir müssen dieses Symbol nur auf der rechten Seite fixieren, anstatt es schweben zu lassen. Was ich tun werde, ist die Position absolut zu verwenden, und anstelle von Rand oben werden wir es auf die oberen 5 Pixel und die rechten 15 Pixel setzen. Möglicherweise sind Sie mit der Position absolut nicht vertraut, aber es ist nur eine Möglichkeit, die Positionierung eines Elements zu ändern , um es an einer bestimmten Position zu fixieren, und verwenden Sie oben, rechts, links und unten, um es basierend auf dem Fenster zu positionieren. Aktualisieren der Seite. Jetzt wird es zu weit oben sein, aber wenigstens klebt es an der einen Stelle. Ich werde hier mit ein paar Tops experimentieren. Vielleicht 20 Pixel, nicht viel mehr. Versuchen wir es mit 50 Pixeln. Versuchen wir es 55. Jetzt, wo ich damit experimentiert habe, werde ich 50 an unsere Spitze hinzufügen, 55 Pixel machen. Da geht ihr, Leute. Das ist eine Möglichkeit, den Schwimmer zu umgehen, indem wir ihn an dieser Kante des Fensters befestigen, indem wir die Position absolut verwenden. Das sieht bisher ziemlich gut aus, aber was ich tun möchte, um es deutlicher zu machen, wo das Menü beginnt und endet, ist, ihm eine Grenze zu geben. Wenn ich hier in unser Hauptmenü gehe, werde ich einen Rahmen definieren und es wird eine 1 Pixel, feste weiße Linie sein. Lassen Sie uns das versuchen. Aktualisieren Sie die Seite und schalten Sie sie dann ein. Sie können nun einen Rahmen um das Menü sehen. Aber ich mag es nicht ganz an den Seiten und oben, also werde ich das in Grenze unten ändern, damit es nur auf den Boden geht. Aktualisieren Sie die Seite, und jetzt können Sie sehen, dass es eine Zeile hier gibt , um Ihnen zu sagen, dass dies das Ende des Menüs ist. Wir könnten auch Grenzen auf die Einzelposten selbst setzen, aber das sieht für mich in Ordnung aus. Vielleicht wollen wir tatsächlich einen auf die Oberseite legen. Rand, oben, 1 Pixel. Wieder, Leute, eine Menge von diesem Zeug ist subjektiv, also wenn Sie da reingehen wollen, verfeinern Sie es ein bisschen mehr und machen Sie es schöner und mobiler aussehen, tun Sie das definitiv. Ich würde wahrscheinlich ein bisschen mehr Rand an die Spitze hinzufügen wollen. Es ist wie Saison nach Geschmack. Es ist eine Menge Subjektivität involviert und ja, nutze einfach deinen eigenen Ermessen, wie du es sehen willst. Aber insgesamt bin ich ziemlich glücklich damit. Wenn wir jetzt auf Desktop und Handy getestet haben, auf dem Desktop, wenn wir die Größe ändern, wird es nicht angezeigt. Aber wenn wir die Seite aktualisieren, wird sie angezeigt und dann, wenn wir in kleinere Bildschirmgrößen gehen , können wir sie ein- und ausschalten. Wenn wir es eingeschaltet haben und dann wieder rüber gehen, dann können wir sehen, wie es eingeschaltet ist. Wenn wir dieses kleine Problem beheben wollten, könnten wir ein anderes JavaScript-Ereignis erstellen, das erkennen würde, wenn der Bildschirm größer wird und dann das Menü wieder einschalten würde. Aber ich denke, es ist ein ziemlich kleines Problem, weil viele Leute ihr Fenster nicht so neu dimensionieren werden. Sie werden wahrscheinlich ihre Fensterbreite in der Breite laden , in der sie es verwenden werden. Das ist ein kleines Extra, das wir in setzen können, aber für den Zweck dieser Klasse Ich denke, wir haben genug getan, um die Mechanik zu zeigen, wie Sie dieses mobile Menü zum Laufen bringen würden und wie Sie es auf dem Desktop verstecken und dann auf mobil. Das ist es für dieses ansprechende Webseiten-Design. Ich hoffe, das war nicht allzu lange ein praktischer Abschnitt für euch. Ich habe eine Bonusstunde nach dieser über Bootstrap. Wenn Sie daran interessiert sind, wie Sie optimieren und Zeit sparen können , um all diese Stile zu erstellen, bleiben Sie auf jeden Fall für die Bonusstunde. Die Bonusstunde auf Bootstrap wird über die Verwendung von vorgefertigten Stilen sein. Wie Sie hier sehen können, hat der Großteil dieser Klasse diese CSS-Stile geschrieben. Aber mit Bootstrap können wir unser HTML in einer bestimmten Weise mit bestimmten Klassen schreiben und müssen nicht so viel CSS schreiben. Wenn Sie daran interessiert sind, das zu tun, was wir gerade getan haben, schneller Bootstrap verwenden, bleiben Sie definitiv herum. Wir sehen uns im nächsten Video. 13. Bonus: Einführung in Bootstrap: Willkommen alle zu unserer Bonusstunde auf Bootstrap, der beliebtesten HTML-, CSS- und JavaScript-Bibliothek der Welt. Was bedeutet das alles? Nun, Bootstrap ist nur ein Haufen Code, den wir in unser Projekt anschließen können , der uns Zeit beim Schreiben all dieser Stile und auch etwas JavaScript sparen lässt. Wenn wir auf getbootstrap.com gehen oder Bootstrap in Google suchen, können wir auf die Bootstrap-Website gelangen. Wenn Sie nun herumgraben möchten, wird dies kein ausführliches Video auf Bootstrap sein. Fühlen Sie sich frei, die Dokumentation zu lesen, schauen Sie sich ein paar Beispiele an. Was ich in diesem speziellen Video tun wollte, ist zu demonstrieren, wie Bootstrap unser aktuelles Projekt beeinflussen würde und wie wir unser HTML ändern würden, um Stile zu verwenden, die bereits in Bootstrap integriert sind , um uns Zeit beim Erstellen von Webseiten zu sparen von Set-Designs oder Website-Mockups. Ich habe Ihnen das einige Male während des Kurses gezeigt, aber wenn ich hier reingehe und den Link lösche oder auskommentiere, so dass es nicht mehr auf das Stylesheet zutrifft, und ich aktualisiere die Seite, das ist, was unsere Webseite aussieht wie ohne CSS. Nun, was wir tun können, ist in Bootstrap hinzufügen und sehen, wie sich das auf unsere HTML-Seite auswirkt, und dann können wir Bootstrap-Stile und -Klassen verwenden , um es ähnlich aussehen zu lassen, wie wir mit Bootstrap hatten. Gehen wir zurück zu unserem Bootstrap Home und klicken Sie auf „Erste Schritte“. Nun, genau wie wir es mit Google Fonts und Font Awesome getan haben, können wir die Font, das CSS, all das selbstherunterladen das CSS, all das selbst und dann darauf verweisen. Aber ich benutze gerne das CDN, erspart es uns, es auf unseren Computer herunterzuladen. Wenn ich nur das HTML-Tag kopiere, das sie hier festgelegt haben, wird CSS in unser Dokument geladen. Für die Zwecke dieser Lektion werde ich mich nicht mit dem JavaScript beschäftigen. Dies ist nur das CSS. Sobald wir das geladen haben, werde ich diese Seite aktualisieren und sehen, was passiert. Wie Sie sehen können, sehen wir bereits einige Stiländerungen. Die Schriftart ist anders, und wir können auch sehen, dass sie auch unseren Container verwendet. Aber in der Bootstrap-Version eines Containers gibt es viel mehr Haltepunkte und Teile, in denen es die Breite des Containers ändert. Gehen wir in unsere Dokumentation für Bootstrap, lassen Sie uns den Header mit Bootstrap neu erstellen. Ich werde hier auf „Komponenten“ klicken, und wir können beginnen, einige der Bootstrap-Komponenten zu verwenden. Für den Header werde ich Navbar finden, was dem Header in Bootstrap entspricht. Hier können Sie den HTML-Code sehen, der benötigt wird, um diese Navbar hier zu erstellen. Um unsere so aussehen zu lassen, müssten wir kein CSS ändern, da es bereits eingebaut ist. Wir müssten nur diesen HTML einfügen. Was ich tun werde, ist das zu kopieren, ich werde diese Seite an Seite platzieren, nur damit ich ul Tags kopieren kann. Startseite wird die gleiche Reihe von Funktionen sein. Wir werden herumsetzen. Dann statt der Preisgestaltung arbeiten, und dann ist dies ein deaktivierter Link. Das brauchen wir nicht wirklich, also werde ich das löschen. Kopieren und fügen Sie diese beiden erneut für unsere anderen Links ein. Blog und Kontakt. Ich werde Blog und Kontakt setzen. Nun, da wir über Menüpunkte kopiert haben, können wir einfach unser altes nav komplett löschen. Wenn ich das speichere, gehen Sie zurück zu unserem Projekt, lassen Sie uns sehen, wie es beeinflusst hat. Jetzt können Sie sehen, dass wir diese Navbar für uns erstellt haben. Es ist nicht genau wie unser Design, aber es spart uns viel Zeit mit der Erstellung von CSS. Wie Sie sehen, ob Sie hier Beispiele angesprochen haben, alle Bootstrap-Websites gleich aus, da sie dieselben Stile verwenden, so dass Sie ein bisschen einen Bootstrap-Look erhalten. Vielleicht sind Sie mit dem Bootstrap-Look jetzt vertraut, wenn Sie es sehen. Wenn Sie eine Website sehen, die so aussieht, können Sie vermuten, dass es sich um Bootstrap handelt. Sie können tatsächlich überprüfen, indem Sie in den Quellcode gehen und nach dem Verweis auf Bootstrap suchen. Hier können Sie es direkt dort sehen. Auch hier wird es nicht genau wie unser Design zeigen, aber was ein wirklich leistungsfähiges Merkmal von Bootstrap ist das Säulensystem. Aber bevor wir hier zu diesen Spalten kommen, möchte ich diesen Knopf reparieren. In Bootstrap haben Sie Button-Styles direkt aus der Box. Ich werde hier auf „Buttons“ klicken, und Sie können eine Klasse von btn btn-primary verwenden um jedes Link-Tag in eine Schaltfläche zu verwandeln, die so aussieht. Das werde ich tun. Anstelle der großen Taste der Klasse werde ich das durch Klasse btn, btn-primary ersetzen, die Seite neu laden, und jetzt können Sie sehen, dass wir einen Bootstrap-Stil Button haben , wo, wenn wir unseren Cursor darüber setzen, Cursor dreht sich zu einem Zeiger, und auch die Farbe der Schaltfläche ändert sich, so dass wir wissen, dass es sich um eine Schaltfläche handelt. Wie ich schon sagte, es sind jedoch die Spalten, die Bootstrap sehr mächtig machen. In Bezug auf die Dienstleistungen, die wir anbieten, können wir dies in ein Säulensystem in Bootstrap ändern. Um nachzusehen, wie Sie das tun würden, können wir hier auf „Layout“ klicken und wir können mehr über das Raster erfahren. Hier können Sie die verschiedenen Bruchpunkte sehen , wenn sich ein Stil an diesen bestimmten Punkten ändert. Denken Sie daran, im vorherigen Video habe ich darüber gesprochen wie wir in meinem Ansatz viele verschiedene Haltepunkte verwendet haben. In Bootstrap haben sie nur 1, 2, 3, 4 große Haltepunkte. Jedenfalls, das ist nur eine Nebennotiz. Wenn wir nach unten scrollen, haben sie keinen Abschnitt über Zeilen und Spalten. Ich denke, es könnte hier in einer anderen Speisekarte sein. Lassen Sie mich in diesem Feld suchen, Zeilen, Grid-System. Los geht's. Sie befindet sich im Menüpunkt „Raster“ in „Layout“. Hier können Sie sehen, wie es funktioniert. Ich ermutige Sie, dies zu lesen, wenn Sie an Bootstrap interessiert sind. Es ist ziemlich tief und es ist eine großartige Ressource, um zu lernen, wie es funktioniert. Aber im Grunde, was Sie haben, ist divs mit einer Klasse von Zeile, und dann in ihnen haben Sie divs mit einer Klasse von col. Um dann zu definieren, welche Breite Sie diese Spalten haben möchten, können Sie in einen anderen Stil einfügen, der dem HTML-Element mitteilt, wie groß Sie es sein möchten. Dies ist natürlich ein reaktionsfähiges System. Es wird diese Proportionen beibehalten, wenn Sie die Größe der Seite ändern. Los geht's. Responsive Klassen. Wie das mit unserem Projekt zusammenhängt, ist, dass wir diese Autotext-Reihe haben, und dann haben wir Autotexte. Also statt Autotext Zeile und Autotext, werde ich nur loswerden von Autotext und habe es als Zeile, und dann alle Autotexte in Spalten ändern. Da wir vier Spalten haben, die wir gleich breit wollen und Bootstrap auf einem 12-Spalten-System arbeitet, müssen wir 12 durch 4 teilen, und das wird bestimmen, welche Klasse wir verwenden. Also 12 geteilt durch 4 ist 3, so können wir hier einen Bindestrich setzen und es zu einem dreispaltigen Layout machen, und dann in die Nummer 3 setzen. Ich speichere das, aktualisiere die Seite hier drüben. Sie werden jetzt sehen, dass wir sofort eine ziemlich schöne Spalte haben. Wenn wir die Größe der Seite ändern, schauen Sie sich dies an, sie beginnen, die Größe zu ändern. An einem bestimmten Punkt bricht es zusammen. Sobald es zusammenbricht, müssen wir jedoch keine neuen CSS-Regeln erstellen. Alles, was wir tun müssen, ist mehr Klassen zu unseren Spalten hier hinzuzufügen. Wir wollen, dass es an einem bestimmten Haltepunkt auf eine neue Zeile bricht. Bootstrap Breakpoints als Referenz verwenden, können Sie hier extra klein, mittel, groß und extra groß sehen . Nehmen wir an, bei mittlerem möchten wir, dass es sich um ein Zwei-Spalten-Layout pro Zeile handelt. Zusätzlich zu Col 3, haben col md für mittel und dann statt drei, sechs; was diese Zahl verdoppelt. Wenn wir nun die Seite aktualisieren, ändert sie die Spalte. Wenn wir die Seite auf diese Weise ändern, ändert sie sich leider nicht von diesem Col-Mid 6-Layout. Was wir tun müssen, ist große dazwischen hinzuzufügen. Der Code für die größte ist lg. Ich werde das speichern, die Seite aktualisieren, und jetzt, wenn es auf diesem Medium ist, wird es ein zweispaltiges Layout sein. Dann, wenn es auf mittleren Bildschirmgrößen niedriger sind, wird es ein zweispaltiges Layout sein. Sie können tatsächlich sehen, dass es später auch in ein einspaltiges Layout bricht. Zieh es einfach wieder raus. Sie können sehen, dass wir diese responsiven Spalten haben ohne selbst ein CSS schreiben zu müssen, ist es nur darum, die richtigen Klassen hier oben zu verwenden. Wenn Sie sich die Bootstrap-Datei tatsächlich ansehen, ist sie riesig. Es gibt so viele verschiedene CSS-Stile. Es würde eine lange, lange Zeit dauern, um es selbst zu schreiben. Es gibt viel, was wir mit nur Klassen und IDs in Bootstrap tun können. Alle CSS ist im Grunde für uns geschrieben, abgesehen von Dingen, die wir selbst anpassen möchten. Wie zum Beispiel die Hintergründe, die wir hatten, haben wir diese Hintergrundfarben im Moment nicht. Wir müssten noch einige Stile selbst schreiben. Wir verknüpfen immer noch ein externes Stylesheet und schreiben darüber hinaus unsere eigenen Stile. Aber wie Sie sehen können, können wir uns um einige der gängigen Stylingaspekte kümmern, indem Sie Bootstrap-Klassen verwenden. Eine andere Sache, auf die ich Ihre Aufmerksamkeit lenken möchte, ist es uns standardmäßig ein mobiles Menü gegeben hat. Sehen Sie, wie, wenn wir weiter hineingehen, es sich zusammenzieht. Aber das Problem und der Grund, warum es nicht umgeschaltet wird, ist , dass wir dieses JavaScript auch importieren müssen. Denken Sie daran, dass wir nur das Stylesheet verknüpft haben, nicht das JavaScript. Nur um das schnell zu beheben, kann ich all diese JavaScript-Links kopieren, zu meinem Kopf gehen, ich werde hier erweitern, all diese JavaScript-Links einfügen, speichern, zu unserem Projekt zurückkehren und es kleiner machen. Jetzt können Sie sehen, dass unser Menü umgeschaltet wird. Ich werde nicht die ganze Seite durchlaufen und sie mit Bootstrap neu erstellen, das würde einfach zu lange dauern, und das ist nur eine Bonusstunde. Ich wollte Ihnen nur zeigen, dass Sie Bootstrap verwenden können, um Zeit zu sparen, einige bereits erstellte Stile zu nutzen und Sie hoffentlich davor zu bewahren, ein so großes Stylesheet zu schreiben, wie Sie es hier getan haben. Das, was Bootstrap wirklich hilft, ist, was ich Ihnen gezeigt habe, das Säulensystem ist erstaunlich. Die Spalten und Container, wir müssen uns nicht selbst aktualisieren. Bootstrap ist sehr gut darin, dass alles gut auf verschiedene Bildschirmgrößen passt. Es kümmert sich um eine Menge von dieser reaktionsschnellen Arbeit für uns. Wenn Sie mit Bootstrap als Ausgangspunkt entwickeln, haben Sie eine ziemlich gute Chance, dass alles gut auf Mobilgeräten und Desktops funktioniert. Das ist so ziemlich es Jungs. Das ist die Bonusstunde, in der wir über Bootstrap sprechen. Wenn du willst, dass ich mit Bootstrap ausführe, lass es mich wissen. Es könnte eine Idee für eine zukünftige Klasse sein. Wie auch immer Jungs, ich hoffe, dass Sie ein oder zwei Dinge über die Erstellung von Webseiten basierend auf Designs gelernt haben . Wieder, wenn es einen bestimmten Bereich gibt, der Sie verwirrt hat, ob es das JavaScript ist, ob es das HTML-CSS ist, gehen Sie definitiv meine anderen Klassen an, wenn Sie interessiert sind , können Sie eine Verständnis dessen, was alles tut. Leider hatte ich keine Zeit, über alle Grundlagen von HTML und CSS zu gehen und beim Klassenprojekt zu bleiben. Aber wenn Sie interessiert sind, können Sie eingehen und Ihr Wissen mit diesen Klassen stärken. Nochmals vielen Dank, dass ihr mir in dieser Klasse beigetreten seid. Wir werden die Schlussfolgerung im nächsten Video abschließen. Das war's, Leute. Danke fürs Zuschauen. 14. Schlussbemerkung: Das schließt diese Klasse auf Responsive Web-Entwicklung so ziemlich ab. Für Ihr Klassenprojekt möchte ich, dass Sie ein Website-Design übernehmen, egal ob es sich um eine Vorlage handelt, die Sie online gefunden haben oder eine vorhandene Website, und versuchen, es mit HTML und CSS zu replizieren. Wenn Sie fertig sind, sollten Sie es mit dem Rest der Klasse teilen. Denken Sie daran, Jungs, Designs in HTML und CSS zu übersetzen, wie wir es in dieser Klasse getan haben, ist eine Fähigkeit, die mit der Praxis besser wird. Also erwarte ich nicht, dass Sie genau wissen , welches HTML-Element oder CSS-Stil in jedem einzelnen Szenario verwendet werden soll. Höchstwahrscheinlich wird es ein wenig Versuch und Irrtum sein, und natürlich eine Menge von guten altmodischen Googeln. Wenn Sie jedoch Tipps oder Anleitungen benötigen, hinterlassen Sie einen Kommentar in das Diskussionsfeld unten, und ich werde mein Bestes tun, um Sie in die richtige Richtung zu zeigen. Jedenfalls, Leute, danke fürs Zuschauen. Ich hoffe, Sie wieder in einigen meiner anderen Klassen zu sehen.