Programmieren für dein eigenes Portfolio – HTML und CSS Grundlagen

1. Einführung: Hallo, mein Name ist Aga und ich bin Designerin, aber ich kann auch programmieren. In diesen Klassen werden wir das Portfolio von Designern codieren, was bedeutet, dass wir HTML- und CSS-Grundlagen lernen werden, indem wir das Layout Schritt für Schritt implementieren. Sollten Designer codieren? Nun, jeder hat seine eigene Antwort. Ich werde noch weiter in diese Debatte eingehen. Mein Ziel ist nicht, Sie zu einem Entwickler zu machen, mein Ziel ist es, Ihnen zu zeigen, dass Code ein großartiges Werkzeug für UI- und UX-Designer ist , um ihre Ideen in der realen Umgebung für die Projekte auszudrücken, die ein Webbrowser ist. Nach dem Kurs werden Sie in der Lage sein, Ihre Projekte besser an Entwickler zu übergeben und besser ihre Sprache zu sprechen. Zusammenfassend werden Sie HTML-Tags, CSS-Grundlagen und Eigenschaften lernen , Google-Schriften auf der Website implementieren und Devtools in einem Webbrowser verwenden. Der Kurs richtet sich an UI- und UX-Designer, die mit praktischen Beispielen HTML und CSS lernen möchten . Vorherige Codierungskenntnisse sind nicht erforderlich. Wir werden die Grundlagen Schritt für Schritt abdecken, so dass Sie in der Lage sein, einfach mitzuverfolgen. Ich hoffe, Sie werden Spaß haben und schließlich erkunden, dass Codierung sehr nützlich ist. Wir sehen uns in der ersten Lektion. 2. HTML-Grundlagen: Willkommen bei der ersten Lektion, wir werden einige wichtige Dinge behandeln, um unsere Codierungsreise zu beginnen. Erstens lernen wir einige Codierungsgrundlagen in HTML CSS kennen, und sobald wir mit ihnen vertraut sind, starten wir unser Projekt, das ein Portfolio ist. Was wir brauchen, ist ein Code-Editor, ich empfehle, Atom herunterzuladen. Atom ist eine freie Software, die sehr einfach zu bedienen ist. Es ist ein Code-Editor und Sie können es für einen Mac, PC oder wenn Sie ein Linux-Benutzer sind herunterladen . Die nächste Sache ist Ihr Lieblings-Web-Browser. Ich benutze Chrome, aber fühle mich frei, Firefox zu verwenden. Das Letzte, was wir brauchen, sind ein DevTools. DevTools helfen uns, durch unseren Code zu navigieren und das CSS direkt in einen Webbrowser zu experimentieren. Aber keine Sorge, im Moment werden wir alle Details während des Unterrichts und der Übungen behandeln. Wir werden auch ein Paket mit den Materialien verwenden, die ich für Sie vorbereitet habe. Wir haben Dateien und zwei Ordner. Wir haben Übung eins im Portfolio. Im Portfolio finden Sie einige Assets, Bilder und Index HTML-Vorlage, die Sie gehen, um die zukünftigen Übungen zu verwenden. Sie können das Paket mit den Materialien aus dem Quellbereich auf der Kursseite herunterladen. Lassen Sie uns in die Struktur des HTML-Dokuments eintauchen, um zu sehen, wie eine sehr einfache Website gebaut wird. Jede Website beginnt mit dem Doctype. Was ist Doctype? Es ist Dokument Registerkarte Deklaration, und es definiert, dass dies das eigentliche HTML-Dokument ist. Es gibt auch Informationen an den Browser, dass es sich um die Website handelt, die gerendert werden soll. Es enthält auch die Informationen über die Version des HTML-Dokuments. Für den Moment, nehmen Sie es einfach als selbstverständlich. Wir werden nicht auf Details darüber eingehen. Als nächstes ist der Vater aller HTML-Tags, die HTML ist. Wie Sie sehen können, ist es ein offenes Tag, in dieser zweiten Zeile, und in der allerletzten Zeile des Dokuments, haben wir das schließende Tag von HTML. Es gibt Informationen, dass wir tatsächlich HTML-Code schreiben, und dies ist das HTML-Dokument. HTML-Tag wird von Kopf und Körper gefolgt. Was ist zwischen halbem Text? Alles, was es dort platziert wird, ist es eigentlich nirgendwo angezeigt, aber es ist sehr wichtig in Bezug auf die Google-Suche und den Browser. Wir haben den Titel, Tag und der Titel zeigt den Titel und den Web-Browser. Wir haben auch einige Links und Importe zu externen und internen Dateien. Aber keine Sorge, wir haben die Kopfpartie abgedeckt. Was ist noch übrig? Dies ist der Körper und zwischen body-Tags, wir setzen alles, was auf der Website generiert wird, wie Überschriften wie h1, Absätze wie p, Text, Listen, Bilder, was immer Sie wollen. Wir können auch die Analogie verwenden, um zu erinnern, was sind die Zutaten der Website, weil wir genau wie menschliche, Kopf und ein Körper Abschnitte. Die Frage, die Sie vielleicht haben, ist, wie lernen Sie eigentlich alle diese HTML-Tags? Lernst du sie auswendig? Eigentlich ist die beste Methode, nur zu programmieren und zu lernen, indem Sie einige Beispiele betrachten. Übung macht den Master, so dass es keinen Sinn, alle Tags am allerersten Anfang zu lernen. Ich habe einige HTML-Tags ausgewählt und sie sind die beliebtesten, also werden wir sie in Übungen verwenden. Sind Sie bereit für unsere erste Codierung Übung? Lasst uns zur nächsten Lektion gehen. 3. Erste Übung in HTML: Die beste Art zu lernen, wie man kodiert, ist, die Theorie in die Praxis umzusetzen. Beginnen wir mit der allerersten Übung. Lassen Sie uns den Atom Editor öffnen, wo Sie sehen können, ist der Willkommensbildschirm. Neben Atom, wir brauchen auch Atom-Plugin, das uns helfen wird , die Änderungen, die wir im Code zur Verfügung stellen, leicht zu sehen. Es heißt Live-Vorschau, und wir müssen es installieren, indem wir es googeln. Lassen Sie uns Atom Live-Vorschau im Webbrowser eingeben. Öffnen Sie den ersten Link und klicken Sie auf „Installieren“. Es wird uns auffordern, unsere Software zu öffnen, was in Ordnung ist, und wir klicken auf „Installieren“. Jetzt können wir sehen, dass das Plugin installiert ist, so dass wir glücklich sind, fortzufahren. Ich kann jetzt das Einstellungsfenster und den Begrüßungsführer schließen. Wir wollen HTML-Datei erstellen, wie können wir es tun? Nun, wir klicken einfach auf Befehl N oder Control N. Ich klickte auf Befehl S, um die Datei zu speichern, und ich suche nach meinem Paketordner. In Übung 1 möchte ich die Datei index.html erstellen. Es bedeutet, dass dies ein HTML-Dokument sein wird, und klicken Sie auf „Speichern“. Unser HTML-Dokument ist jetzt leer, wir müssen es mit einigen HTML-Tags füllen. Wir müssen mit DOCTYPE Deklaration beginnen, also schreibe ich, DOCTYPE HTML und HTML-Tag, öffne und schließe. Zwischen diesen Tags haben wir die beiden Abschnitte. Erinnerst du dich an sie? Der erste Kopf und der zweite Körper. Im Kopf können wir jetzt den Titel unserer Seite, die Übung 1 ist, setzen. Speichern Sie es. Wir haben Live-Preview-Plugin installiert, also lassen Sie es uns einschalten. Wir navigieren zum Atom und klicken auf „Pakete“. Suchen Sie nach HTML-Vorschau. Wir klicken auf „Vorschau aktivieren“. Jetzt ist das Fenster geöffnet und auf der rechten Seite können Sie unsere Website sehen. Es ist jetzt leer, weil nichts im Körper geschrieben ist. Aber wenn wir zum Beispiel schreiben, Hallo dort. Speichern Sie es. Es werden automatisch alle Änderungen generiert, die wir vorgenommen haben. Es ist viel einfacher für uns zu sehen, was im Internet passiert. Aber wir wollen einige HTML-Tags verwenden. Lasst uns diesen Hi dort Text mit h1 umschließen. H1 steht für Überschrift der ersten Ebene. Wir können ein paar Überschriften haben. Als nächstes ist die h2, also Überschrift der Ebene 2 und wir können so schreiben, willkommen zum Kurs. Natürlich müssen wir das Tag schließen und Sie werden auf der rechten Seite sehen , dass wir eine größere und eine kleinere Überschrift haben. Was ist mit einem Absatz hier? Der Textblock wird durch Öffnen von p und einem schließenden p umbrochen . Natürlich können wir ihn kopieren und duplizieren. Wir haben jetzt zwei Absätze. Wenn Sie einen Link schreiben möchten, zum Beispiel auf die externe Website, verwenden wir ein Tag. Wir schreiben ein. Zwischen einem Tag werden wir das Tag schreiben, dass es auf der Website angezeigt wird. Zum Beispiel ist dies der Link zu meiner Website. Sie können sehen, dass es noch nicht passiert. Wir müssen ein Attribut für ein Tag definieren. Attribut ist etwas, das direkt nach dem Namen des Tags erscheint, und für ein haben wir href, und in href setzen wir die Adresse der Website. Zum Beispiel füge ich mein Instagram hinzu. Ich sehe, dass der Link in einer blauen Farbe unterstrichen ist. Dies ist der Standardstil, der vom Webbrowser hinzugefügt wird. Wenn ich darauf klicke, bin ich auf meinem Instagram. Um zu Ihrer Website zurückzukehren, klicken Sie einfach auf Befehl S im Index HTML-Fenster. Wir sind jetzt wieder auf der Website. Um einfach durch den Code zu navigieren und ihn leicht zu lesen, können wir alle Elemente der hier angezeigten Zeilencodes umschließen, so dass wir auf „Ansicht“ klicken. Es wäre viel einfacher für uns, den Code zu schreiben und zu lesen. Wir haben die Überschriften, Absätze, wir haben den Link. Was ist mit der Anzeige einer Liste auf unserer Website mit Aufzählungspunkten? Jede Liste dort beginnt mit dem öffnenden Tag. Ul steht für ungeordnete Liste. Wir öffnen und schließen es. Natürlich haben wir die Elemente der Listen, zum Beispiel HTML, CSS, div Tools. Wo Sie sehen können, ist, dass jedes Element der Liste mit dem Aufzählungspunkt beginnt. Wenn Sie es auf Zahlen ändern möchten, müssen wir ein anderes Tag anwenden, das ol ist, Das steht für geordnete Liste. Plötzlich haben wir die Zahlen. Was ist mit dem Anhängen eines Bildes auf unserer Website? Wir können img-Tag anwenden, und es ist gut zu wissen, dass img es tatsächlich ein leeres Tag ist. Es bedeutet, dass es innerhalb des Tags geschlossen wird, so dass wir es nicht so schreiben. Es hat keinen Inhalt im Inneren. Wir schließen dieses Tag so. Ein img hat mehrere Attribute, die wir definieren müssen, damit das Bild angezeigt wird. Der erste ist src, der für Quelle steht, und hier schreiben wir den Pfad zu unserem Bild. Ein weiteres Attribut ist alt, das ist der alternative Text, der angezeigt wird, wenn Ihr Bild nicht geladen werden kann. Es ist auch gut zu wissen, dass es besser für unsere Zugänglichkeit ist, einen Text bereitzustellen, da Alt von Bildschirmlesegeräten für Leute gelesen wird, die Ihre Seite nicht genau wie wir lesen können. Lasst uns den Weg durch unser Bild legen. Wir möchten coding.jpg anzeigen. Es ist die Datei, die es nur hier in der Struktur aller unserer Dateien ist. Wir schreiben nur den Namen davon, es ist coding.jpg. Die Erweiterung ist sehr wichtig. Jetzt können wir sehen, dass das Bild angezeigt wird. Natürlich können wir es kopieren und die Bilder haben. Wir müssen auch den alternativen Text zur Verfügung stellen. Dies ist das Bild, das meine Klassen fördert. Wir können den Alt-Text nirgends sehen. Aber wenn wir den Namen ändern, zum Beispiel einen hinzufügen, sehen wir, dass das Bild nicht geladen werden kann, weil eine solche Datei nicht existiert. Aber zumindest gibt es uns die Informationen, was der Autor hier präsentieren wollte. Wir können das lesen, das ist das Bild, das meine Klassen fördert. Jetzt komme ich zurück zum richtigen Dateinamen. Auf dieser Website üben Sie sehr einfache Codezeilen zu schreiben. Es gibt Tonnen von anderen HTML-Tags. Aber wir werden sie Schritt für Schritt lernen. Das letzte Tag, das ich in diesen Lektionen üben möchte, ist div. Div ist irgendwie ein sehr generisches Tag, so dass wir es für viele verschiedene Zwecke verwenden können. Wir können es verwenden, um einige Spalten zu erstellen, einige Elemente der Website. In den nächsten Lektionen wäre es viel einfacher für Sie zu verstehen, warum wir tatsächlich div brauchen. In div können wir einige Bestell-Tags platzieren, also machen wir das nächste. Wir können sehen, dass div tatsächlich das Elternteil der geordneten Liste ist. Ich kann es in ungeordnete ändern, um zwei separate Listen zu haben. Ich habe auch über div-Tools erwähnt. Wie können wir sie tatsächlich starten und wofür sind sie? Wir müssen zurück zu unserem Ordner. Ich befinde mich im Paketordner und öffne Übung 1. Wir haben unsere index.html, und ich werde diese Datei im Webbrowser öffnen. Ich benutze Chrome. Was ich jetzt tun werde, ist, dass ich die div-Tools öffne. Ich kann es tun, indem Sie mit der rechten Maustaste Inspect. Oder ich kann die Verknüpfung verwenden, die Befehlsoption I oder Steuerungsoption I unter Windows ist. Inspect und ich sehe meinen HTML-Code hier. Div-Tools verdrängen den gesamten Code, und ich kann leicht durch ihn navigieren. Ich kann auch einige bestimmte Elemente der Website auswählen und sehen, wo der eigentliche Code für die Generierung dieses Elements verantwortlich ist. Es ist sehr nützlich und ziemlich ordentlich. Ich hoffe, dass Sie es viel benutzen werden. Eine andere Sache, die ich an div-Tools mag, ist, dass wir leicht mit unserem Code experimentieren können. Zum Beispiel kann ich einige Elemente entfernen, ich kann den Text ändern, und ich kann auch einige neue Dinge hinzufügen, wie zwei Absätze. Aber sehr wichtig, dass Sie sich daran erinnern müssen , ist , dass alle Änderungen, die wir tun, in der lokalen Datei gespeichert werden, tatsächlich im lokalen Speicher des Webbrowsers. Wenn wir die Website aktualisieren, indem Sie auf Befehl R oder Control R auf einem PC klicken, werden Sie sehen, dass die Website wieder in den vorherigen Zustand zurückkehrt. Deshalb haben wir nicht alle Änderungen vorgenommen, die in div Tools vorgenommen wurden , und wir haben sie nicht in unsere HTML-Datei eingeführt. Wenn Sie mit dieser Codezeile etwas anderes machen und sie zum Beispiel ersetzen möchten, hallo. Um es länger zu behalten, müssen Sie auch zum Atom Editor zurückkehren und es auch hier ändern. Ich speichere, gehe zurück zum Webbrowser und aktualisiere und ich habe diesen Hallo Text ersetzt. Div-Tools sind auch sehr nützlich, wenn man über Stil spricht, s, aber wir werden in der nächsten Lektion darauf eingehen. 4. Erste Schritte mit CSS: In dieser Lektion konzentrieren wir uns auf CSS, so dass wir unsere Website an den Stylisten senden, dank Holz, wird unsere Website endlich einige Farben bekommen. Wie schreiben wir CSS? Nun, wir müssen wirklich schreiben, eine neue Datei erstellen. Wir gehen zurück zum Atom, und wir müssen eine neue Datei erstellen und speichern, Command S als styles.css. Dot CSS Erweiterung ist sehr wichtig, weil es die Informationen gibt, dass dies die tatsächliche Cascading Stylesheet-Datei ist und wir können es verwenden, um die Stile auf der Website zu importieren. Ich schreibe styles.css, aber Sie können dies auch als Mystyles schreiben, Sie können es nennen, wie immer Sie wollen, ich ziehe es vor, es styles.css zu nennen. Jetzt haben wir unser Dokument fertig. Was ist CSS? CSS ist eine andere Sprache, die uns hilft, einige Elemente der Website zu stylen und ein sehr wichtiges Objekt in CSS wird als Selector bezeichnet. Selector wählt einige Elemente der Website aus, die Sie erstellen und wendet einige bestimmte Eigenschaften wie Hintergrund, Farben oder Schriftfamilien an. In HTML sprachen wir über Tags, also werden wir in Stilen Selektoren haben. Lassen Sie uns unsere erste erstellen. Zum Beispiel möchten wir alle Absätze färben, also müssen wir das Tag schreiben, das für Absätze verantwortlich ist, die p ist, also wähle ich alle p oder Absätze aus und schreibe geschweifte Klammern und in ihnen schreibe ich einige CSS -Eigenschaften. Zum Beispiel, Farbe, rosa. Eine sehr wichtige Sache in CSS ist, jede Zeile mit Semikolon zu beenden, vergessen Sie es nicht. Sie können auch mehr CSS-Selektoren schreiben, zum Beispiel h1, also Überschrift, das ist der ersten Ebene wird eine andere Farbe haben, sagen wir lachs. Ich speichere es mit Command S oder Control S auf PCs und naja, nichts ist passiert. Die Sache ist, dass wir diese Stile importieren und sie mit HTML verbinden müssen. Wie können wir das tun? Nun, wir tun dies mit einem Tag namens Link. Für Link haben wir eine spezifische App für Buttes wie rel , die für Relation und Stylesheet steht. Wir schreiben auch href, so dass der Pfad zu unseren Stilen, die styles.css ist, und Sie können sehen, dass die Website neue Farben hat, die Lachs Überschrift und rosa Absätze ist, so dass unsere Stile begann endlich zu funktionieren. Lassen Sie uns kurz zusammenfassen, was wir getan haben. Wir haben eine andere Datei erstellt, styles.css, wir haben zwei Selektoren, Selektor für Absatz und Selektor für Überschrift, und wir haben auch unsere Datei styles.css in HTML-Dokument verknüpft. Natürlich können wir noch viel mehr Eigenschaften hinzufügen, um unsere Website noch bunter zu machen. Wir können Hintergründe für jeden Absatz hinzufügen, zum Beispiel gelb. Wir speichern es und sehen, dass unsere Absätze gelben Hintergrund haben. Wir können auch entfernen Unterstreichungen auf jedem der A, so dass jeder der Link, können wir Textdekoration schreiben, keine, und wir können auch seine Farbe von blau zu rosa ändern. Die Frage, die Sie gerade haben könnten, ist, wie können Sie wissen, dass Farbeigenschaft tatsächlich existiert? Nun, Sie müssen es einfach durch Übung lernen, aber ich hoffe, dass Sie während meiner Übungen viel besser mit den bestimmten CSS-Requisiten vertraut sind. Wir haben einige Stile hinzugefügt, vielleicht lassen Sie es uns entfernen, weil es aussieht, als wäre es ein Absatz. Es ist blau, und wir haben zwei Absätze. Wie wäre es, einen Unterschied zu machen und einen der Absätze hervorzuheben? Zum Beispiel durch Anwenden eines anderen Hintergrunds. Nun, wenn wir p Selektor schreiben, bedeutet dies, dass es alle Absätze auswählt, auf die der Browser stößt, so dass wir hier nicht einen anderen Hintergrund anwenden können, weil es einfach nicht weiß, welcher des Absatzes blau sein sollte und welcher gelb. Um einige Elemente zu unterscheiden, verwenden wir CSS-Klassen. CSS-Klasse ist eine ziemlich wichtige Idee, es bedeutet, dass wir einige CSS-Eigenschaften nur auf Elemente mit der spezifischen Klasse anwenden können. Lassen Sie uns eine erstklassige erstellen, nennen wir dieses Highlight. Die Regel ist sehr einfach, wir erstellen auch einen Namen, aber vor dem Namen, müssen wir den Punkt hinzufügen. Dot bedeutet, dass es eine Klasse sein wird, also haben.highlight, wir lesen dies als Klassenhervorhebung und in geschweiften Klammern fügen wir CSS-Eigenschaften hinzu, zum Beispiel Hintergrundblau, ich speichere es und meine Absätze sind immer noch gleich, das gleiche, weil wir auch CSS-Klasse in HTML anwenden müssen. Nehmen wir an, dass das erste p hervorgehoben werden sollte, sollte also den blauen Hintergrund haben. Wir fügen zu p Tag das Attribut, das Klasse genannt wird, und den Namen der Klasse, so ist es Highlight. Ich speichere es und sehe, dass dieser Absatz eine Klasse Highlight und Haus hat, dass Krone blau, so ist alles richtig und der andere Absatz ist gelb. Wenn ich dieses kopiere und es unten einfüge, hätte es die gleichen Stile wie der Selektor p. Wenn wir diese Klasse mit der letzten hinzufügen, werden Sie sehen, dass die Klasse angewendet wird. CSS-Klasse kann mehrmals verwendet werden, und es kann auch für verschiedene Elemente verwendet werden, zum Beispiel für die Überschrift. Nicht nur diese Absätze haben den Hintergrund, sondern auch die Überschrift Hallo. Sie können mit CSS-Klassen spielen und verschiedene Eigenschaften wie die Schriftgröße anwenden. Nehmen wir an, wir wollen, dass die Schriftart 20 Pixel beträgt und plötzlich die Absätze größer sind. Wir können die Farbe auf Weiß ändern und Sie werden sehen, dass es sich sofort geändert hat. Das sehr interessante hier ist, dass dieser Selektor anfänglich Farbe rosa hat, aber wir haben es überschrieben, mit dem Klassenhighlight und hinzugefügt Weiß zu seiner Farbe. Lassen Sie uns jetzt zum Webbrowser wechseln, die Seite aktualisieren, und werfen Sie einen Blick in Dev-Tools. Dies ist die gleiche Website, die Sie gerade vor einer Minute gesehen haben und wenn wir die Entwicklungstools öffnen, nur um Sie daran zu erinnern, dass wir mit der rechten Maustaste Inspect öffnen, oder Sie können die Verknüpfungen Befehl Option I oder Control Alt I verwenden Hier müssen wir zu Elementen wechseln. Wir sehen hier, den HTML-Code. Wenn ich einige Elemente hervorheben, zum Beispiel den Absatz, können Sie sehen, dass die Highlight-Klasse hier angezeigt wird, und es gibt uns die Informationen, dass dieses Stück Code, dieser Text auf der Website hier angezeigt wird, hat Hintergrund blau, Schriftgröße 20 Pixel und Farbe Weiß. Ich kann es auskommentieren, bedeutet, dass ich diese Änderungen einfach nicht möchte und es geht zurück zu den vorherigen CSS-Einstellungen. Wenn ich wieder komme, werden Sie sehen, dass Farbe und Hintergrund vom Selektor p durchgestrichen sind. Es bedeutet, dass wir sie mit dem Klassenhighlight überschrieben haben, daher ist es gut, Dev-Tools zu verwenden, um zu sehen, was passiert und welche Änderungen tatsächlich angewendet werden. Wenn wir eine andere Klasse erstellen, zum Beispiel größere und definierte Schriftgröße auf 40 Pixel, lassen Sie uns sehen, was passiert, wenn wir es auf diesen Absatz anwenden. Wie verbinde ich zwei Klassen? Nun, es ist einfach, weil wir nur ein Leerzeichen zwischen ihnen hinzufügen müssen und versuchen, die zweite Klasse zu nennen. Wir haben Highlight und größer angewendet, und wir können sehen, dass der letzte Absatz eine größere Schriftgröße hat. Wenn wir zu Dev-Tools wechseln und die Website verweist, werden wir sehen, dass die größere Klasse die Schriftgröße überschrieben hat. Anfangs waren es 20 Pixel, aber mit der nächsten Klasse, größer, wurde der neue Wert angewendet, so dass die Regeln einfach sind. Wenn wir mehr Klassen mit den gleichen CSS-Eigenschaften verwenden, denken Sie daran, dass diejenige, die als letzte im Dokument styles.css definiert ist , die größere Macht hätte. 5. Weitere CSS-Eigenschaften ausprobieren: In diesen Klassen werden wir einige CSS-Eigenschaften wieder anwenden. Ich werde Ihnen ein Setup im Atom-Editor zeigen. Manchmal müssen Sie HTML und CSS gleichzeitig bearbeiten. So ist es einfacher, zwei Spalten im Atom-Editor anzuzeigen. Jetzt schließe ich die Vorschau. Was ich mache, klicke ich auf „Ansicht“, „Panes“, „Split Right“. Dank ihm habe ich die beiden Säulen, zwei Fenster nahe beieinander. In einem möchte ich Stile, dieses CSS und auf dem zweiten Index HTML haben. Jetzt kann ich HTML-Code und CSS gleichzeitig in der Vorschau anzeigen. Was ist, wenn ich den Hintergrund für meine Website anwenden möchte? Was ist, wenn ich meinen Hintergrund in einer bestimmten Farbe haben möchte? Wir können es leicht tun, indem Sie Körper-Selektor anwenden. Wir versuchen normalerweise, Stile von oben auf der Unterseite der Website zu schreiben. Wenn der Körper irgendwie die Mutter aller HTML-Tags ist, versuchen wir es ganz oben zu schreiben, damit es später einfacher ist , Stile zu scannen und HTML zu scannen. Es macht Sinn für uns, dass dies die ganze Struktur ist. Was ich jedoch hervorheben möchte, ist, dass die Reihenfolge der spezifischen Selektoren keine Rolle spielt. Das einzige, was Sie sich merken müssen, ist, dass, wenn wir zwei, die gleichen Selektoren haben , aber an verschiedenen Orten geschrieben, und sie haben die gleiche Eigenschaft, zum Beispiel Farbe. Hier habe ich blau und oben habe ich Lachs, derjenige, der gepflückt wird, ist derjenige, der tatsächlich an der allerletzten Position geschrieben wird. Also h1 wird blau anstelle von Lachs sein, weil diese Zeile überschrieben würde. Ich lösche diesen, speichere, und wir haben den Body-Selektor. Ich möchte die Hintergrundfarbe anwenden. Dies ist die Eigenschaft, die für die Änderung der Farbe der Website verantwortlich ist. Wir können uns etwas Farbe einfallen lassen, zum Beispiel hellblau. Ich speichere es, komme zurück zu meiner Website, erfrischend, und sicherlich, meine Website ist in blau. Sie könnten fragen, wie ich die Farben auswähle, weil Sie ein Designer sind und Sie möchten einige weniger anspruchsvolle Farben hier anwenden. Sie können hier einfügen, Hexadezimalcode, Hexadezimalcode. Wenn Sie den Wert jetzt nicht kennen, können Sie die Farbpalette in Entwicklerwerkzeugen verwenden. Dies ist ein weiteres sehr nützliches Feature, das ich in diesen Tools verwende. Ich kann einfach diejenige abholen, mit der ich zufrieden bin, und es wieder in meinen Mantel kleben. Speichern, aktualisieren und sehen Sie, dass meine Änderungen angewendet werden. Leider ist unsere Website im Moment nicht sehr schön, aber nehmen Sie es einfach, wir sind auf dem Weg zum Portfolio Teil ziemlich bald. Eine andere Sache, die wir in CSS anwenden können, sind Ränder und Polsterungen. Wir können Einfluss darauf haben, wie das Element voneinander getrennt ist. Nehmen wir an, ich möchte einen größeren Abstand zwischen dem Bild und der Liste, die ich hier habe , haben. Lassen Sie uns ein wenig mit den Dev-Tools experimentieren. Ich wähle „Bild“ aus, und ich möchte hier einen Selektor erstellen. Ich klicke auf dieses „Plus“ auf der rechten Seite, und ich möchte Marge anwenden. Ich schreibe Rand, zum Beispiel, 50 Pixel von jeder der Seiten, also oben, links, rechts und unten. Ich kann sehen, während ich dieses Element inspiziere darüber schwebe, dass es einen orangefarbenen Rahmen gibt. Es zeigt mir die Marge, die angewendet wird. Wenn ich auf „Computed“ tippen musste, ist dies das sogenannte Box-Modell, Sie werden sehen, dass wir hier den Rand haben und jeder der Kanten 50 Pixel hat. Wir können auch Padding hinzufügen, was der innere Rand ist. Zum Beispiel, 20 Pixel, so dass der Abstand zwischen dem Bild und den Listen erhöht wird. Wir können auch Rand hinzufügen. Ein Pixel der Breite der Rahmenlinie, wir wollen es solide und in schwarzer Farbe haben. Das bedeutet Schwarz im hexadezimalen Code, aber wir können auch schwarz schreiben. Sie werden sehen, dass Padding der innere Raum zwischen dem Bild selbst und dem Rand ist. Sie können es auch in der Box Modell überprüfen sagen, dass, dies ist unser Bild, das sind die Polsterungen, wir haben die Grenze, und wir haben auch die Ränder. Um diese Änderungen beizubehalten, müssen wir den gesamten Selektor kopieren, zu Atom zurückkehren und ihn in unser CSS einfügen. Aktualisieren der Seite und die Änderungen werden angewendet. Natürlich können wir hier viel mit CSS spielen. Aber ich denke, es wird besser sein, sich auf unsere Portfolioprojekte zu konzentrieren und unser Wissen in die Praxis umzusetzen. In der nächsten Lektion beginnen wir die Portfolioprojekte, was bedeutet, dass wir das Layout Schritt für Schritt dekonstruieren werden. 6. Unser Portfolio-Projekt beginnen: Lassen Sie uns zu dem Ordner wechseln, der das Portfolio genannt wird. Es ist in unserem Paket enthalten. Wir sind in Atom und öffnen den ganzen Ordner. Wir klicken auf „Paket“, „Portfolio“ und „Öffnen“. Unser Portfolio befindet sich derzeit in Atom, so dass wir die gesamte Struktur sehen können, den ganzen Baum des Ordners. Ich klicke auf index.html, und wie Sie sehen können, ist es bereits geschrieben. Ich meine, das Skelett der ganz einfachen Website. Was wir tun werden, ist, dass wir es mit mehr Tags im Körper füllen, und sicher müssen wir an Stilen arbeiten. Im CSS-Ordner haben wir style.css, die Empathie ist und auf unsere Eigenschaften wartet. Wir haben bootstrap-grid.css. Dies ist das Raster, das wir verwenden werden, und es stammt aus dem Bootstrap-Framework. Mach dir vorerst keine Sorgen darüber. Ich werde alles in den nächsten Lektionen erklären. Wir haben auch einige Assets, die den gesamten Text enthält, den es im Portfolio enthalten ist, so dass Sie es einfach kopieren und in das Projekt einfügen können. Wir haben zwei Bilder, zwei Akten. Das eine, das das Portfolio präsentiert, das eigentliche Layout für das Portfolio, das Grafikdesign und das andere, das die Schriftgrößen für die gegebenen Elemente anzeigt. Später müssen Sie es nicht erraten, Sie können diese Zahlen auf einfache Weise für die Überschriften oder Absätze anwenden. Schauen wir uns an, wie das Portfolio aussieht. Ich befinde mich momentan im Portfolio-Ordner. Ich eröffne Assets und Portfolio-Layout. Wir können hier sehen, dass dies die Website ist, die wir codieren werden, und es gibt einige Abschnitte, zum Beispiel Abschnitte, die die Projekte beschreiben, wie der Abschnitt mit dem Kontakt. Wir haben auch die Navigation, Intro-Text und einige Schaltflächen. Während des Kurses können Sie Ihre eigenen Projekte nutzen, Ihre eigenen Bilder verwenden, Ihre eigenen Inhalte verwenden. Sie können aber auch die Inhalte verwenden, die ich für diesen Kurs erstellt habe. Die allererste Übung, die wir mit dem Portfolio tun müssen , besteht darin, über dieses Skelett der Website, über das Markup nachzudenken. Welche Abschnitte können wir hier sehen und welche Arten von Elementen enthalten sind. Wir müssen das Layout irgendwie dekonstruieren und es in die HTML-Denkweise einfügen. Was ich hier ganz oben sehe, ist die Navigation. Unten habe ich den ganzen Header. Wie der Einführungsbereich der Website. Wir haben die Überschrift, einen Text, wir haben den Knopf und das Bild. Dies sind die beiden Spalten. Ich habe etwas auf der linken Seite und etwas auf der rechten Seite. Im Folgenden habe ich einen anderen Abschnitt, der eine Liste einiger Fähigkeiten von Jane ist. Darunter habe ich drei gleiche Elemente des Layouts, drei die gleichen Abschnitte, die Projekte präsentieren. Meine Projekte aus dem Portfolio. Ich habe einen, mit dem blauen Hintergrund, ich habe den zweiten, mit dem weißen Hintergrund, und der dritte genauso wie beim ersten. Was unterscheidet sich zwischen ihnen? Es ist unser Vorland, dass Farben, die Hintergrundfarben, und auch die Komposition. Hier befindet sich das Bild auf der linken Seite und im anderen Beispiel befindet sich das Bild auf der rechten Seite. Wir werden es auch berücksichtigen, während der Erstellung der Website. Ganz unten haben wir die Fußzeile mit dem Copyright. Lassen Sie uns anfangen, HTML für ein, dass zu schreiben. Ich komme zurück zu Atom, und ich öffne index.html. Ich habe index.html geöffnet und möchte auch Portfolio-Layout haben. Ich klicke auf „Ansicht“, „'Panes“, „Rechts“. Lassen Sie mich hier index.html öffnen. Ich werde die Übersicht über das Layout haben, ich klicke auch hier, „Ansicht“, „Soft Wrap umschalten“. Meine Codezeilen sind umschlossen, daher ist es einfacher für mich, den Code zu schreiben. Ich sehe das Portfolio, und ich habe ganz am Anfang erwähnt, dass das, was ich sehen kann, die Navigation der Spitze ist. Ich muss Ihnen sagen, dass es ein spezifisches HTML-Tag für unsere Navigation gibt, das nav genannt wird. Ich öffne nav und schließe nav. In der Navigation habe ich all diese Links auf die Website. Ich kann Kopie von content.txt verwenden, ich werde es in diese Spalte einfügen, und ich werde es kopieren und in die Navigation einfügen. Wir haben unsere Navigation, aber jeder dieser Links von jedem dieser Navigationselement kann tatsächlich ein Element der Liste sein. Liste muss nicht vertikal sein, sie kann auch horizontal sein. Wir werden uns im Stylesheet ändern. Aber für jetzt, schreiben Sie einfach die Liste mit HTML. Es wird ungeordnete Liste sein, weil wir keine Zahlen brauchen, und jeder Text hier wird ein separates Element der Navigation sein. Wir haben Kontakt, natürlich Abschluss-Tag. Wir haben Arbeiten, wir müssen öffnen und schließen. Wir haben Erfahrung, und dann die nächste. Wir haben alle Elemente in der Liste. Wie Sie sehen können, haben wir hier die lange Schlange. Mach dir vorerst keine Sorgen darüber. Konzentrieren wir uns nur auf den Text. Ich rette es. Dies ist das ganze nav, und lasst uns index.html öffnen. Ich bin in Portfolio-Ordner, ich klicke auf „In Chrome öffnen“. Ich öffne das Portfolio, HTML, es heißt index.html und einen Webbrowser, und ich sehe, dass meine Navigation hier ist, meine Liste ist auch da, und wir haben alle Listenelemente. Sehen Sie, was als Nächstes kommt. Wir haben die Navigation abgedeckt. Die Last und Navigation haben wir den gesamten Header-Abschnitt, es heißt Header. Wir verwenden Header-Tag. Zwischen Header werden wir den Inhalt davon setzen. Wir haben den Intro-Text die Überschrift h1. Wir können es kopieren, hi, ich bin Jane Doe von hier. Wenn Sie sich fragen, wie wir tatsächlich den Text brechen und die Jane Doe in die nächste Zeile setzen können. Ich zeige, dass wir tatsächlich br verwenden können, die für break steht, und dies wird in zwei Zeilen angezeigt. Bitte denken Sie daran, dass break-Tag, br wir verwenden es nur, um die Textblöcke zu brechen und nicht für Elemente, nicht für größere Ränder oder Leerzeichen. Für Ränder, Ausblenden und Größen verwenden wir CSS-Eigenschaften. Wir haben die Überschrift, und unten zur Überschrift, gibt es eine Liste von einigen Erfolgen oder Karrierepunkten von Jane. Wir können wieder, kopieren Sie den Text und setzen Sie ihn in ungeordnete Liste. Ich öffne Tag, schließe, und wir wickeln jeden Text mit li, um es schneller zu machen, kopiere es einfach. Ich speichere und überprüfe, was auf meiner Website ist. Jetzt kann ich die Navigation sehen. Ich habe Heidekraut, die einige Kinder, h1, ungeordnete Liste und einige Elemente der Liste hat . Was kommt als Nächstes? Werfen Sie einen Blick auf das Portfolio, und wir sehen, dass unter der Liste, haben wir die Schaltfläche. Die Schaltfläche wird es irgendwo verknüpfen, also lassen Sie uns ein Tag verwenden. Moment wissen wir nicht, wo es zeigen wird, also können wir href Attribut Empathie verwenden. Zwischen den a -Tags das öffnende und schließende, können wir den Text schreiben, dass es auf einem Projekt ist. Es heißt, fügen Sie mich auf Linkedin hinzu. Ich kann sehen, dass der Link auf einer Website generiert wird. Wir haben die linke Seite bereit. Was ist mit der rechten Spalte? Es gibt hier ein Bild. Lass es uns ein Bild sagen. Denn jetzt lassen Sie uns einfach die Quelle überspringen. Für Alt können wir diese Jane Doe schreiben. Dies wird Jane Doe präsentieren, und schließen mit einem Bild. Dies ist das leere Tag. Lassen Sie uns die Struktur unserer Dateien sehen. Wir bearbeiten gerade index.html, und wir sehen, dass Jane jpg im Ordner img versteckt ist. Der Pfad zu Janes Bild ist der Ordnername, Schrägstrich und der Name der Datei. Es ist jane.jpg. Ich erfrische die Seite und sehe, dass das Bild, das sieht hell. Mach dir vorerst keine Sorgen über die Position der Elemente und wie sie ausgerichtet werden. Wir werden das in den nächsten Modulen des Kurses behandeln. Wenn wir zum Layout zurückkehren, werden wir sehen, dass wir den Header-Teil fast fertig haben. Wir müssen nur die Beschriftung zum Bild hinzufügen. Dazu verwenden wir ein spezielles Tag in HTML, das Figur genannt wird, und es umschließt das Bild, und auch Figcaption-Tag in dem wir Foto von Sam Manns auf unsplash.com setzen. Ich schließe auch die Figcaption. Ich möchte meinen Code sauber halten, deshalb lege ich Tap hier und schneide den Code. Wir können leicht sehen, dass die Figur das übergeordnete Tag von img und figcaption ist. Ich speichere es, erfrische und sehe, dass wir Untertitel unter dem Bild haben. Fahren wir mit dem nächsten Teil des Layouts in der nächsten Lektion fort. 7. Aufbau der übrigen Abschnitte und Elemente in HTML: Lassen Sie uns das nächste Element, die nächsten Abschnitte des Layouts, abdecken . Wir sind mit der Kopfzeile fertig, und jetzt erstellen wir die nächste. Also, Header schließt hier, und wir haben hier die Abschnitte mit der Fähigkeitenliste. Lassen Sie uns einen neuen Abschnitt erstellen, wird es Abschnitt-Tag in HTML genannt. Wir haben den Header, der sehr spezifisch für das Layout ist. Es ist die Kopfzeile, im oberen Bereich der Seite, und wir gehen zum nächsten Abschnitt, der allgemeinen Sache. Der Abschnitt wird die Liste enthalten, die im Inhalt ist. Ich kopiere es und lege in eine Bestellliste ein. Auch hier muss jedes der Elemente der Liste durch Li-Tag umbrochen werden. Ich schließe. Alles sieht korrekt aus, speichert, und lasst uns die Website aktualisieren, die wir haben. Jetzt haben wir die Liste fertig, und hier ist unser Abschnitt. Zurück zum Atom. Unter der Liste haben wir drei Projekte. Übrigens werde ich Ihnen zeigen, wie Sie Kommentare in Ihrem Code erstellen können. Kommentare sind sehr nützlich, da Sie dort eine persönliche Notiz hinzufügen können. Sie können den Code strukturieren. Zum Beispiel hier ist dies der Projektabschnitt, und ich habe Kommentar mit diesen Zeichen geschrieben. Aber es ist auch einfach, den Text zu schreiben, den Sie auskommentieren möchten. Sie markieren es, und klicken Sie auf „Kommentar“ oder „Strg“ und Schrägstrich auf Ihrer Tastatur. Der Code-Editor flops automatisch um ihn herum, diese spezifischen Zeichen. Ich habe Projekte, und es ist ausgegraut, so dass Sie sofort sehen, dass dies der Kommentar ist. Es wird nicht auf der Website zu sehen, aber es wird im Code sein. Ich schreibe Abschnitt, und ich schreibe hier, Projekt 1 und kommentiere es aus. Wir haben das Projekt 1 hier, und was ist Einsicht? Wir haben die linke und die rechte Spalte. In der linken Spalte haben wir die Überschrift, es ist h 2, weil wir bereits h 1 haben, ganz oben. Dies ist die Überschrift, die den kleineren Schriftgrad hat. So wenden wir h 2. Lassen Sie uns dieses programmieren, das erste Projekt. Wir haben das erste Bild. Also schreiben wir, img. Was ist die Quelle und alt? Nun, die Quelle des Bildes, lassen Sie uns hier überprüfen. Ich klicke auf den Baum des ganzen Ordners, die Struktur des Ordners, und sehe, dass es img ist und es Kosmetik jpg heißt. Ich muss den spezifischen Pfad dazu schreiben. Es ist ein IMG-Ordner, Kosmetik jpg, also schreibe ich img/, also geben wir img Ordner cosmetics.jpg ein. Hier können wir Kosmetika schreiben. Wir haben das Bild, aber wieder, wir müssen eine Beschriftung hinzufügen. Wenn Sie an der Spitze schauen, haben wir Figur-Tag verwendet, und wir haben Feigenunterschrift. Also lassen Sie es uns wiederverwenden. Ich schreibe Figur als Elternteil, des Bildes, schließe auch. Dies ist das untergeordnete Element des Abschnitts. Also auch einfügen, Figur und was fehlt, ist die Feigenbeschriftung. Hier füge ich hinzu, die Beschriftung aus dem Kontext, die hier fehlt. Die ehrliche Kompanie auf Unsplash. Speichern wir es, aktualisieren Sie die Website, und ich habe das Bild, und ich habe meine Beschriftung bereit. Dies sind das separate Abschnitt-Tag, ich über Kommentare erwähnt habe. Sie können sehen, dass sie hier grün markiert sind, und sie werden im Mantel angezeigt, aber Sie können auf dieser Website kein Wort Text, Projekte oder Projekt 1 sehen . Es wird also nicht erzeugt. Keine Sorge dafür. Wir gehen auf die rechte Seite, die h 2 enthält. Lassen Sie uns Branding-Strategie für weibliche Kosmetik kopieren. Wir können hier Pause gebrauchen. Setzen Sie in die nächste Zeile, und dann haben wir den einfachen Absatz mit dem Text, dass es hier ist. Ich kopiere es nur und füge ein. Dies ist nur eine moderne Version von Lorem ipsum. Lass es uns speichern und sehen, was noch fehlt. Wir haben den Knopf. Es heißt mehr lesen. Also füge ich h Tag hinzu, öffne, schließe und dann mehr lesen, speichern, und ich habe mehr unten gelesen. Absatz, Überschrift. Sie können sehen, dass, gibt es eine Pause zwischen Branding-Strategie, und für weibliche Kosmetik. Also funktioniert alles. Lasst uns jetzt weitermachen. Wir haben den zweiten Teil des Projekts. Wir können Projekt 2 schreiben, es nochmals auskommentieren und Abschnitt erstellen. Hier beginnen wir mit h 2, nehmen Benutzererfahrung, App-Design, h 2, Schließen. Wir können auch Pause verwenden, und dann Absatz. Für einen Absatz verwenden wir Lorem ipsum. Wieder, leider, habe ich zu viel kopiert. Es ist also so. Wir haben mehr gelesen. Um es schneller zu machen, können wir kopieren und einfügen, weil es das gleiche Element ist. Das, was fehlt, ist das Bild. Auch hier können wir die ganze Figur kopieren, für die Erzeugung des Bildes und der Beschriftung verantwortlich ist. Ich füge es ein. Ich habe nicht von dem Raum erwähnt. Sie sind die Zeilen im HTML-Code, aber Sie können sie so viele tun, wie Sie möchten. Es hat keinen Einfluss auf die Art und Weise, wie die Website generiert wird. Wenn Sie zum Beispiel persönliche Notizen machen müssen, fügen wir hier ein Bild mit der Beschriftung hinzu. Sie können es natürlich kopieren und für Ihre eigenen Zwecke verwenden. Hier müssen wir nur den Bildnamen ändern. Mal sehen, im Ordner heißt es Dashboard-App, also ändere ich Dashboard-App. Hier müssen wir all dies auch ändern, Dashboard-App und die Beschriftung, die von hier genommen wird. Sparen, erfrischend, und wir haben den nächsten Abschnitt bereit. Wir haben hier Projekt 2 eröffnet. Dann das nächste Projekt 3, das dritte Projekt auf unserer Liste. Noch mal, mal sehen. Wir beginnen mit einem Bild. Wieder können wir kopieren und einfügen Figur. Hier haben wir eine iPad-App, in verschiedenen Bildunterschriften. Lassen Sie uns den Namen der Datei überprüfen, müssen wir bekommen. Es ist iPad-App. Ich nenne es iPad-App. Aus dem Inhalt nehme ich die Beschriftung. Auch hier müssen wir h anwenden 2, das heißt iPad-App für die Künstler, Pause und Absatz. Kopieren Sie den gesamten Text. Ich speichere es, und ich muss den Abschnitt schließen. Ich habe vergessen, das Abschnitt-Tag zu öffnen. Jedes der Projekte gewinnt also mit dem Abschnitt-Tag, und natürlich muss es geschlossen werden. Weil unser Code unordentlich werden könnte. Ich aktualisiere die aktuelle Website und den Webbrowser und sehe, dass wir das Bild mit der Beschriftung, der Überschrift, dem Absatz erhalten haben, und es ist das dritte Projekt. Wir sind fast fertig mit dem Skelett unserer Website. Was fehlt noch? Sehen wir uns das Portfolio an. Wir können sehen, dass dies die Fußzeile ist. Ich werde den Code säubern. Ich erstelle Fußzeile, öffne und schließe. Ich habe die Steuer, die ziemlich groß ist. Ich denke, dass es die Überschrift sein sollte, also lasst uns h 2 benutzen. Sie sich keine Sorgen um die Größen für jetzt. Also kopiere ich, alle Fragen, finde mich hier, Jane. Ich mache Pause. Ich setze auch die letzte Zeile des Textes ein, die sich am unteren Rand der Seite befindet. Ich kopiere, und setze es, dann Absatz. Speichern Sie es. Meine Website hat derzeit die Fußzeile. Wie Sie sehen können, ist es nicht sehr umwerfend, und es gibt jede Menge Arbeit zu erledigen, aber keine Sorge. Wir werden in jedes Element der Website zu bekommen, jedes HTML-Tag, und stylen es, wie es aussieht und verzögern, haben wir. Genau wie die Projekte, die ich für Sie vorbereitet habe. 8. Webtypografie: In diesen Klassen werden wir eine Pause von HTML-Code machen und wir werden uns auf Web-Typografie konzentrieren. Klingt aufregend? Ich möchte Google Fonts wirklich auf meiner Website anwenden, also lassen Sie uns sehen, wie wir es tun können. Was ich tun muss, ist, dass ich die Website fonts.google.com öffne, und ich suche nach den Schriftarten, die in meinem Projekt verwendet werden. Es gibt zwei Schriftarten, die erste ist Inknut, die ich für die Überschriften verwendet habe, es ist Inknut Antiqua. Also, was ich tun kann, ist, dass ich auf Plus klicke, also wird es diese Schriftart auswählen, und ich habe das Panel, das mir zeigt, dass die Schriftart ausgewählt ist. Ich habe auch eine andere Schriftart, die IBM Plex Mono genannt wird, also ist dies der Text, den ich für den Körper verwendet habe. Ich klicke auch auf das Plus-Symbol, und ich sehe, dass zwei Familien ausgewählt sind. Google Fonts gibt uns die Anleitung, wie wir Schriftart, die wir auf der Website verwendet haben, einbetten können. Die gute Nachricht ist, dass wir viele von ihnen haben, so können wir verschiedene Optionen und verschiedene Schriften auswählen, und sie sind kostenlos und werden auf Google-Servern gehostet. Die Standardoption zum Einbetten der Schriftart besteht darin, den Code hier zu verwenden. Es ist ein Stück HTML-Tag namens link , den Sie bereits auf Ihrer Website angewendet haben, während Sie Stile verknüpfen. Sie können Schriftarten auch mit CSS-Import einbetten, aber ich würde es vorziehen, bei der ersten zu bleiben Kopieren wir sie also und fügen Sie den Code in den Kopfbereich Ihres HTML-Dokuments ein. Das bedeutet, dass wir zurück zu Atom gehen. Wir sind in unserem HTML-Dokument, und ich gehe ganz nach oben, den Kopfbereich meiner Datei. Also habe ich Kopfbereich, und unter dem Link-Tag, das ich bereits mit styles.css habe, mache ich die neue Zeile und füge den gesamten Code ein, den ich von Google Fonts kopiert habe. Ich rette es, und wir sind fast fertig. Also die Sache, die wir jetzt tun müssen, ist tatsächlich CSS zu erstellen. Wir müssen CSS erstellen, das die Schriftarten, die wir auf die gegebenen Elemente der Website ausgewählt haben, anwenden wird. Also lassen Sie uns CSS, style.css öffnen. Es wird diese Platte in der neuen Spalte sein. Eigentlich haben wir keine Zeilen CSS-Code geschrieben, also wird es unsere erste sein. Die Sache ist, wenn wir unter unser Projekt schauen, da haben wir Inknut Antiqua. Das ist also diese, die dekorative Serifen-Schrift, die auf die Überschriften angewendet wird, die Liste hier, und das war's. IBM Plex Mono Schrift erscheint überall außer den Orten, wo Antiqua kommt. So können wir dies auf eine Weise tun. Ich gehe zurück zu Atom und schreibe, dass der ganze Körper bedeutet, dass die gesamte Website IBM Plex Mono haben wird. Also lassen Sie uns für eine Weile zurück zu Google Fonts und sehen, wie wir unsere Schriften in CSS angeben können. Dies sind die CSS-Regeln, die wir auf unser CSS-Dokument anwenden können. Dies ist font-family property mit Inknut Antiqua, und hier ist IBM Plex Mono, also kopiere ich die letzte, weil ich IBM Plex Mono für den ganzen Körper meiner Website verwenden möchte . Also füge ich es ein, und es bedeutet, dass der gesamte Text, der im Körper erscheint, IBM Plex Mono haben wird. Lassen Sie uns die Seite aktualisieren und prüfen, ob die Änderungen angewendet werden. Ich habe eine neue Schriftart bereit, und das ist völlig anders als Times New Roman, und das ist sicher IBM Plex Mono. Wenn wir auf einem der Elemente navigieren, können wir sehen, dass Schriftfamilie IBM Plex Mono angewendet wird. Wenn ich es auskommentiere, werden Sie sehen, dass es auf die Standardschriftart zurückkommt, die Times New Roman ist. Ordnung, aber ich habe auch erwähnt, dass wir im Projekt Antiqua für alle Überschriften und die Liste verwendet haben, also lassen Sie es uns in CSS anwenden. Also H1, H2 und die Liste, die hier unter der Navigation erscheint, die diese ist, haben Antiqua. Also für jetzt werde ich „ul li“ schreiben. So können wir den gleichen Stil für mehrere HTML-Elemente schreiben, und wir können sie mit Doppelpunkten teilen. Also haben wir den gleichen Stil für H1, H2 und alle Elemente der Liste „ul“ angewendet . Also bin ich auf Google-Schriften und ich sehe, dass dieses Stück Code Inknut Antiqua in meiner Web-Typografie anwenden würde. Also füge ich es für diese Selektoren ein. Ich speichere, aktualisiere die Seite und sehe, dass die Überschrift, die Liste darunter Inknut Antiqua angewendet hat. Leider habe ich diese Schriftart auch auf die Navigation angewendet. Wenn ich das mit meinem Projekt vergleiche, werde ich sehen, dass ich hier IBM Plex Mono verwendet habe. Wie können wir diese Toolliste unterscheiden, erinnern Sie sich an CSS-Klassen? Ich hoffe, Sie tun es, also lassen Sie uns sie anwenden. Lassen Sie uns CSS-Klasse erstellen, zum Beispiel können wir die Klasse für diese Liste erstellen und nannte es die „Skills List“. Also habe ich die Klasse „Skills List“ genannt. Es ist das Attribut in HTML, aber ich muss auch hier in meinem CSS-Stylesheet hinzufügen. Also erstelle ich den Punkt, was Klasse bedeutet, und dann den Namen, es ist Skills List. Ich möchte, dass es Inknut Antiqua für diese anwendet, also kopiere ich die ganze Zeile, speichere sie, und von hier entferne ich „ul li“. Es bedeutet, dass diese Schriftart, Inknut, wird nicht mehr auf „ul li“ angewendet werden, also alle Elemente der Liste. So können wir kopieren und speichern. Ich aktualisiere, und jetzt kann ich sehen, dass endlich meine gesamte Navigation in IBM Plex Mono ist, und die Liste unter der Navigation ist in Inknut Antiqua. Genau wie in meinem Projekt, um meinen Code sauberer und nicht wiederholbarer zu machen, kopiere ich einfach diese Klasse, füge einen Doppelpunkt hinzu, füge die Liste und entferne den letzten Selektor. Diese Regel bedeutet also, dass Inknut Antiqua Schriftart auf alle H1, auf alle H2 und alle HTML-Elemente angewendet wird , die eine Klasse namens Skills List haben. So fügen wir Google-Schriftarten auf unserer Website hinzu. Dies ist, wie wir sie in HTML-Dokument importieren. Das erste, was wir hinzufügen müssen, ist das Link-Tag, das die URLs zu bestimmten Schriftarten enthält, und es wird auf der Google Fonts-Website generiert. Die zweite Sache ist, CSS mit den gegebenen Regeln anzuwenden , die auf der Website der Google-Schriftarten erwähnt werden. Denken Sie also bitte an diese beiden Schritte. Natürlich können Sie für Ihre zukünftigen Projekte Schriftarten auswählen, was auch immer Sie wollen. Es gibt viele Schriftarten auf Google-Schriftarten, so zögern Sie nicht, zu verwenden, was Sie wollen und wann immer Sie möchten. 9. Elemente auf dem definierten Raster platzieren: In dieser Lektion konzentrieren wir uns auf Gitter. Wir werden unsere Elemente der Website entsprechend dem Layout platzieren. Schließlich haben wir einige Spalten und einige Abschnitte, so dass es für unsere Augen viel einfacher wäre, es zu betrachten. So sieht unsere Website derzeit aus,. Was wir tun müssen, ist, dass wir diese Elemente in Spalten setzen müssen. Wenn Sie es mit unserem Layout vergleichen, werden wir sehen, dass einige Elemente nahe beieinander liegen und einige voneinander getrennt sind. Dafür verwenden wir Grit von Bootstrap. Was ist Bootstrap? Bootstrap ist ein Open-Source-Toolkit, es ist die Front-End-kompetente Bibliothek. Es ist ein sehr großes und leistungsfähiges Werkzeug. Wir werden jedoch nur ein Stück davon verwenden, das Gitter ist. Wir werden die Rasterleiste nicht selbst programmieren. Wir werden eine Bibliothek benutzen und sie an unsere eigenen Bedürfnisse anpassen. Die Abrechnung der Layouts wäre viel einfacher. Wenn Sie neugierig auf grit System sind, können Sie die Dokumentation öffnen, die auf getbootstrap.com verfügbar ist. Sie können über die alte Theorie lesen, die hinter Gitter und Bootstrap steht. Aber ich werde Ihnen die wichtigsten Dinge erzählen, die Sie wissen müssen, damit es funktioniert. Kommen wir zurück zu unserem HTML-Dokument und konzentrieren wir uns für eine Weile auf HTML. Wenn ich den ganzen Ordner öffne, werde ich sehen, dass ich Bootstrap Grid CSS habe. Sie können Code da draußen sehen. Alles, was es hier in CSS geschrieben ist. Aber ich will nicht, dass Sie es analysieren, auswendig lernen oder lernen. Wir werden nur das Raster verwenden, das hier definiert ist. Wenn wir dieses Stylesheet verwenden möchten, müssen wir es auch in unserem HTML-Dokument verknüpfen. Wir haben unsere styles.css, wir haben externe Schriftarten, aber wir brauchen auch Bootstrap. Ich möchte es vor meinen Stilen verknüpfen. Die Frage ist, warum ich es vorher mache oder nicht als letzter Link-Tag? Die Antwort ist, dass Bootstrap-Raster einige Stile haben könnte , die einen Konflikt verursachen können, der unsere Stile tatsächlich überschreiben kann. Um unsere Stile wichtiger zu machen, setzen wir sie auf den letzten Platz in Bezug auf das Stylesheet, das wir haben. Ich ändere den Namen hier. Die Datei wird Bootstrap-Grid genannt. Entschuldigung, ich komme zurück zu meinem HTML. Ich rette es. Mein Bootstrap-Raster wird angewendet. Mal sehen, ob ich keine Änderungen sehen kann. Nun, eigentlich ist noch nichts passiert. Aber wenn ich tiefer in meinen HTML-Code und Hüte Abschnitt eingrabe, werde ich sehen, dass Bootstrap-Grid-CSS angewendet wird. Die Frage, die Sie haben könnten, ist, wie wir Bootstrap Grid verwenden können. In der Dokumentation, dass sie uns zeigen, wie drei Spalten erstellt werden, können wir hier HTML-Code mit einigen Attributen sehen, die Klassen, CSS-Klassen sind, und wir werden sie auch verwenden. Das allererste Tag ist div. Hast du dich an div erinnert? Das ist der Container. Dies ist das Tag, das sehr generisch ist und wir können es für verschiedene Zwecke verwenden, hauptsächlich für Layout-Sache, zum Platzieren der Elemente, Verschachteln usw. Wir haben div mit einem Klassencontainer, und unten gibt es eine Zeile. Zeilenklasse bedeutet, dass alle Elemente, alle Spalten, die enthalten sind, in einer Zeile angezeigt werden, also eins nach dem anderen, genau wie hier. Lassen Sie uns Container kopieren und zeichnen. Lassen Sie uns sie in unser HTML-Dokument einfügen, aber bevor wir unser Layout überprüfen werden. Ich eröffne das Portfolio-Layout gerade hier. Wenn ich es vergrößere, werden Sie sehen, dass hier der Container ist und ich zwei Spalten habe. Container, Zeile, Klassen würden für den Header-Abschnitt angewendet werden. Ich habe die Kopfzeile. In der Kopfzeile füge ich diese beiden Zeilen ein, die ich aus der Dokumentation kopiert habe. Ich habe den Container geöffnet, aber ich muss auch dieses div schließen. Es wird geschlossen, kurz bevor der Header geschlossen wird. Also füge ich div hinzu, ich mache hier tippen. Alles, was es als die Kinder dieses Containers enthalten ist. Ich habe Zeile Ich brauche Zeile, um zwei Spalten in der Nähe einer Charta anzuzeigen. Ich muss auch die Zeile kurz vor einem div schließen. Auch Verschachtelung der Elemente innerhalb eines Chatters. Ich kann sehen, dass all diese Elemente hier erwähnt, alle Kinder der Reihe. Was wird als nächstes in der Dokumentation erwähnt? Wir haben eine andere Klasse, die Col-sm genannt wird. Es bedeutet, dass dies eine Spalte ist und die Breite der Spalten automatisch generiert wird, abhängig davon, wie viele Spalten wir haben. Wir werden so viel Platz nehmen, wie sie brauchen. Lassen Sie mich es auch kopieren. Wenn wir es mit dem Layout vergleichen, sehen wir, dass dies eine Spalte ist und dies die zweite ist. Alles hier wie Überschrift, Liste und das Muster wäre in einem div namens col-sm. Alles hier, gefüllt dieser Ort wird Kinder aus diesem div sein, also muss ich es schließen. Obwohl der nächste Inhalt eine weitere Spalte sein wird. Wieder fügen wir div und figure ein, wären die Kinder dieses div. Lassen Sie uns zusammenfassen, was tatsächlich passiert ist. Ich mache es besser für das Display geeignet. Wir haben den Container, er fängt hier an und schließt hier. Der gesamte Header befindet sich auf einem Container. Was macht die Klasse eigentlich? Nun, Sie werden in einer Minute im Web-Browser sehen. Unter Container, Wir haben eine Zeile und Zeile hilft uns, diese Elemente in der Nähe von einander anzuzeigen. Wir haben eine Spalte und die zweite. Wir können Kommentare verwenden. Linke Spalte. Dies ist die linke Spalte und darunter haben wir die rechte Spalte. Jetzt ist es viel einfacher zu folgen, dass dies die rechte Spalte ist und dies die linke Spalte ist. Achten Sie immer auf die Bekleidungssteuer, denn manchmal ist es sehr einfach, chaotisch in Ihren Code zu bekommen. Wenn Sie also auf das Tag klicken, werden Sie sehen, dass die blaue Unterstreichung, können Sie leicht sehen, ob das angegebene Tag tatsächlich geschlossen ist. Hier, wenn ich auf div klicke, sehe ich, dass dies das öffnende Tag ist und in der 37. Zeile wird es geschlossen. Das gleiche mit der rechten Spalte. Ich habe das Öffnen des div-Tags und das Schließen der 45. Zeile. Lass es uns retten. Mal sehen, was auf der Website generiert wird. Ich werde die div-Tools schließen und sehen, dass ich eigentlich zwei Spalten habe. Wenn ich Inspect laufen, werden Sie sehen, dass sie auf die volle Seite gestreckt werden. Also volle Breite, so gibt es nicht mehr zwei separate Spalten. Aber wenn ich die Position der div-Tools ändere, um die Auflösung, die Breite des Fenster-Browsers größer zu machen , werde ich sehen, dass sie passen. Dass sie nacheinander nahe beieinander angezeigt werden. Ich kann sehen, dass dies meine linke Spalte und hier meine rechte Spalte ist. Eine Meinung, dass wir auf dieser Ebene des Layouts anpassen können, ist die Breite zu ändern, die Größe tatsächlich des Bildes, das wir setzen, um es kleiner zu machen , um tatsächlich die volle Breite der Spalten zu füllen. Kommen wir zurück zum Stil CSS. können wir schreiben. Jedes Bild, das wir auf der Website angezeigt haben, würde die maximale Breite des Containers nehmen. Maximal des Bildes beträgt 100 Prozent des übergeordneten Bildes. Es bedeutet, dass, wenn die Col-sm-Klasse eine bestimmte Breite angewendet hat, zum Beispiel 600 Pixel , das Bild, obwohl es natürliche Größe hat, seine ursprüngliche Größe 700 Pixel ist, es 600 Pixel nicht überschreiten wird, weil wir seine Breite durch diese Codezeile. Schreib es uns hier. Hier zeige ich Ihnen, wie wir Kommentare in CSS machen können. Ich kann einfach einen Text schreiben, also begrenzt dies die Breite des Bildes, also dauert es 100 Breite des übergeordneten Maximums. Ich markiere den ganzen Text, und wieder, Kommentar Schrägstrich, also ist alles hier geschrieben ein Kommentar. Es ist ein bisschen anders, weil wir in HTML diese Zeichen haben, und in CSS haben wir Schrägstrich und Sternchen. Speichern wir es und lassen Sie uns unsere Website aktualisieren. Plötzlich können Sie sehen, dass das Bild kleiner wird und es die gesamte Breite der Spalte benötigt, also haben wir die beiden Spalten nahe beieinander. Der Header, sagen wir, es ist bereit in Bezug auf das Gitter. Wir müssen die Spalte 1, die linke und rechte, und alles ist in einer Reihe mit dem Container. Was der Container tut, ist, dass er unsere Breite begrenzt und es hängt von Bildschirmauflösungen ab. Für größere Bildschirme wäre dieser Behälter größer, für kleinere, wäre kleiner. Dies ist das responsive Webdesign, und wir werden in diesem Kurs nicht näher eingehen, aber ich werde einige Dinge erwähnen, die Sie während der Verwendung von Bootstrap verwenden können. Der Header ist fertig. Lassen Sie uns zu verschiedenen Teilen des Layouts wechseln. Wenn Sie auf dem Layout hier sehen, haben wir die vollständige Zeile der Liste, so können wir es vorerst überspringen, weil es nur die volle Breite ist und wir keine Spalten haben und wir diesen Abschnitt nicht zwischen zwei Elementen teilen, so dass es ist jetzt okay für mich. Wir sind jetzt in den Projekten, so dass wir sehen, dass wir wieder zwei Spalten haben. Wir müssen das gleiche tun, wir müssen die Containerzeile und Klasse anwenden, die Spalte col-sm genannt wird. Das Projekt 1, wir haben den ganzen Abschnitt, wir haben einen Container angewendet, wir haben die Zeile, also habe ich die linke Spalte hier. Ich werde die richtige Spalte haben, also schreibe ich die rechte Spalte. Ich mache mehr Platz für leichter zu lesen. Ich habe die richtige Spalte und wende col-sm Klasse an. Ich habe das div. Lasst uns die Kreuzung machen. Ich habe die Vertiefung gemacht, mein Coll sieht sauberer aus. Mal sehen. Dies ist der Anfang der rechten Spalte, es schließt sich hier. Dies ist der Anfang der linken Spalte. Es schließt hier. Wir müssen die Reihe schließen. Sie können sehen, dass es nicht durch die blaue Linie unterstrichen ist, also gibt uns Atom die Information, dass dieses Tag, dieses div nicht geschlossen ist. Schließen wir es unter der rechten Spalte. Nun, es ist richtig. Sie müssen auch das Container-div schließen. Genau hier mache ich die Einkerbung. Noch einmal und unser Code sieht jetzt gut aus. Wir haben linke, rechte Spalte, speichern wir sie und sehen. Ich bin wieder im Browser, aktualisiere die Seite und sehe, dass das Bild in der linken Spalte ist und alle Texte in der rechten Spalte sind. Es erinnert uns langsam an das Layout, das wir anstreben. Lassen Sie uns mehr Inhalt der Produkte in Spalten setzen. Wir machen es genau dasselbe. Ich werde diese Codezeilen wiederverwenden und sie hier einfügen. Ich schließe das div für die linke Spalte. Ich muss die nächste Spalte hinzufügen, das Bild mit der Beschriftung, wenn Sie sehen können, wird dies unsere rechte Spalte sein. Schließen des div, Einrückung, und natürlich müssen wir div für Zeile 1 Container verdoppeln. Wenn wir sehen, Container geschlossen ist, Zeile ist geschlossen, und wir haben zwei Spalten. Was müssen Sie sich an diese Klassen von Grid Bootstrap erinnern , ist, dass Zeile nur verwendet werden soll, um Spalten zu behalten, so dass wir sie nirgendwo anders verwenden. Wenn wir nur Spalten nahe beieinander anzeigen möchten, verwenden wir Zeile, und dies ist die einzige Situation. Container hilft uns, eine bestimmte Breite der Seite zu halten. Speichern, ich schalte zum Browser und ich sehe, dass das zweite Projekt innerhalb von zwei Spalten ist. Wir haben das letzte, das letzte Projekt. Auch hier können wir den Code wiederverwenden, den wir haben. Dies ist Projekt 3, also auf der linken Spalte, haben wir das Bild. Natürlich brauchen wir die richtige Spalte, kommentieren und einfügen. Natürlich müssen wir die rechte Spalte schließen. Die Linke ist bereits geschlossen, wir haben Einrückungen gemacht, und natürlich schließen Zeile. Jetzt müssen wir die Zeile schließen, weil es das Kind eines Containers ist. Wir schließen die Reihe, und hier schließen wir den Container. Lassen Sie mich schnell überprüfen, ob es uns gut geht. Wir können nur hinzufügen, dass dies die richtige Spalte ist, speichern, aktualisieren. Ich sehe, dass ich Abschnitte mit Spalten habe. Es erinnert uns langsam an das Layout. Wenn Sie überprüfen möchten, wie freie Spalten aussehen würden, können Sie den Test durchführen. Im allerletzten Projekt kann ich die rechte Spalte kopieren und einfach duplizieren. Was ich von Bootstrap erwarte, ist, drei Spalten nahe beieinander anzuzeigen. Ich habe drei Spalten, also ist es später sehr einfach zu multiplizieren. Diese drei Spalten haben die gleiche Größe, die gleiche Breite, sie sind geteilt. Wenn Sie es ändern möchten, ändern Sie die Proportionen, zum Beispiel, haben Sie das Foto größer, lassen Sie uns in der Dokumentation von Bootstrap sehen. Wir scrollen zu dem Teil, wo wir unterschiedliche Breite haben. Zum Beispiel ist hier eine Spalte breiter und die andere schmal. Hier wenden wir eine bestimmte Proportionen an. Stellen Sie sich vor, wir haben 12 kleine Spalten und wir verschmelzen sie einfach , um die Spalte größer zu machen. Wenn ich möchte, dass meine Kolumne tatsächlich die Hälfte des verfügbaren Platzes nimmt, schreibe ich sechs, weil sechs zu 12 die Hälfte ist. Wenn ich dies auf mein Bild hier im dritten Projekt anwenden möchte, so für das Foto, schreibe ich hier col-6, und der andere würde automatisch Platz nehmen, was übrig ist. Sie teilen die Hälfte des gesamten Containers auf diese beiden Spalten. Ich aktualisiere die Website und sehe, dass mein Bild zwei Mal größer ist als seine Fellows Spalten. Für die Fußzeile sind wir im Moment damit in Ordnung, weil die Fußzeile nicht zwei Spalten verwendet. Es ist wie ein einspaltiges Layout, ein Spaltenelement des Layouts. Wir sind fast bereit mit der Ausrichtung auf LMS, es gibt einige Verbesserungen, die benötigt werden müssen. Aber für jetzt, lasst uns mit Bootstrap-Grid aufhören. Wenn Sie gerne mehr über das Bootstrap-Grid erfahren möchten, empfehle ich Ihnen dringend, die Dokumentation zu überprüfen. Es gibt viele Beispiele, wie Sie verschiedene Drehungen der Spalte erstellen können, wie Sie sie im horizontalen Modus stapeln können und schließlich, wie Sie auf ihrer responsiven Seite der Raster arbeiten. 10. 1/2 Elemente auf dem festgelegten Raster platzieren: In dieser Lektion konzentrieren wir uns auf Gitter. Wir werden unsere Elemente der Website entsprechend dem Layout platzieren. Schließlich haben wir einige Spalten und einige Abschnitte, so dass es für unsere Augen viel einfacher wäre, es zu betrachten. So sieht unsere Website derzeit aus. Was wir tun müssen, ist, dass wir diese Elemente in Spalten setzen müssen. Wenn Sie es mit unserem Layout vergleichen, werden wir sehen, dass einige Elemente nahe beieinander liegen, einige sind getrennt. Dafür verwenden wir Grid von Bootstrap. Was ist Bootstrap? Bootstrap ist ein Open-Source-Toolkit, es ist eine Front-End-Komponentenbibliothek. Es ist ein sehr großes und leistungsfähiges Werkzeug. Wir werden jedoch nur ein Stück davon verwenden, das Gitter ist. Wir werden das Gitter nicht selbst programmieren. Wir werden die Bibliothek verwenden und sie an unsere Bedürfnisse anpassen, so dass die Abrechnung der Layouts viel einfacher wäre. Wenn Sie neugierig auf Grid-System sind, können Sie die Dokumentation öffnen, die auf getbootstrap.com verfügbar ist und Sie können über die ältere Theorie lesen, die hinter Grid und Bootstrap steht. Aber ich werde Ihnen die wichtigsten Dinge erzählen, die Sie wissen müssen, damit es funktioniert. Gehen wir also zurück zu unserem HTML-Dokument, und konzentrieren wir uns für eine Weile auf HTML. Wenn ich den ganzen Ordner öffne, werde ich sehen, dass ich bootstrap-grid.css habe. Sie können ein paar Codes da draußen sehen. Alles, was es hier geschrieben ist, ist CSS, aber ich möchte nicht, dass Sie es analysieren, auswendig lernen oder lernen. Wir werden nur das Raster verwenden, das hier definiert ist. Wenn wir dieses Stylesheet verwenden möchten, müssen wir es auch in unserem HTML-Dokument verknüpfen. Wir haben unsere styles.css, wir haben externe Schriften, aber wir brauchen auch Bootstrap. Ich möchte es vor meinen Stilen verknüpfen. Die Frage ist, warum ich es vorher nicht als letzte Link-Tag mache, die Antwort ist, dass Bootstrap-Grid einige Stile haben könnte , die einen Konflikt verursachen können, der unsere Stile tatsächlich überschreiben kann. Um unsere Stile wichtiger zu machen, setzen wir es auf den letzten Platz in Bezug auf das Stylesheet, das wir haben. Ich ändere den Namen hier, die Datei heißt Bootstrap-Grid. Ich komme zurück zu meinem HTML, ich speichere es und mein Bootstrap-Raster wird angewendet. Mal sehen, ob ich keine Änderungen sehen kann. Nun, eigentlich ist noch nichts passiert, aber wenn ich tiefer in meinen HTML-Code im Kopfbereich eingrabe, werde ich sehen, dass bootstrap-grid.css angewendet wird. Die Frage, die Sie vielleicht haben, ist, wie wir Bootstrap-Grid verwenden können? In der Dokumentation, dass sie uns zeigen, wie drei Spalten erstellt werden, können wir hier HTML-Code mit einigen Attributen sehen, die CSS-Klassen sind und wir werden sie auch verwenden. Das allererste Tag ist div, hast du dich an div erinnert? Dies ist der Container, das ist das Tag, dass es sehr generisch ist und wir können es für verschiedene Zwecke verwenden, hauptsächlich für Layout-Sache, zum Platzieren der Elemente, Verschachteln usw. Wir haben div mit einem Klassencontainer und unten gibt es eine Reihe. Zeilenklasse bedeutet, dass alle Elemente, alle Spalten, die enthalten sind, in einer Zeile angezeigt werden, also eins nach dem anderen genau wie hier. Lassen Sie uns Container und Zeile kopieren und lassen Sie uns sie in unser HTML-Dokument, aber bevor wir gehen, um unser Layout zu überprüfen. Ich eröffne das Portfolio-Layout gerade hier. Wenn ich es vergrößere, werden Sie sehen, dass hier der Container ist und ich zwei Spalten habe. Container, Zeile, Klassen würden für den Header-Abschnitt angewendet werden. Ich habe den Header, und in der Kopfzeile füge ich diese beiden Zeilen ein, die ich aus der Dokumentation kopiert habe. Ich lasse den Container geöffnet, aber ich muss auch dieses div schließen. Es wird geschlossen, kurz bevor der Header geschlossen wird. Ich füge div hinzu, tippe hier. Alles, was es enthalten ist, sind Kinder dieses Containers. Ich habe Zeile, ich brauche Zeile, um zwei Spalten in der Nähe eines Chatters anzuzeigen. Ich muss auch die Zeile kurz vor einem div schließen, aber ich werde auch in den Elementen innerhalb eines Chatters nisten. In Ordnung. Ich kann sehen, dass all diese hier erwähnten Elemente Kinder der Reihe sind. Was wird als Nächstes in der Dokumentation erwähnt? Wir haben eine andere Klasse, die nur Col-sm genannt würde. bedeutet, dass dies eine Spalte ist und die Breite der Spalten automatisch generiert wird, abhängig davon, wie viele Spalten wir haben, so dass sie so viel Platz benötigen, wie sie benötigen. Lassen Sie mich es auch kopieren. Wenn wir es mit dem Layout vergleichen, werden wir sehen, dass dies eine Spalte ist und dies die zweite ist. Alles hier wie Überschrift, Liste und die Schaltfläche wäre in einem div namens col-sm. Alles hier bis zu diesem Ort wird Kinder dieses div sein, also muss ich es schließen. Der nächste Inhalt wird eine weitere Spalte sein. Wieder fügen wir div und figure ein, wären die Kinder dieses div. Lassen Sie uns zusammenfassen, was tatsächlich passiert ist, ich mache es besser für das Display geeignet. Wir haben den Container, er fängt hier an und schließt hier. Der gesamte Header ist ein Container. Was diese Klasse tatsächlich macht? Nun, Sie werden in einer Minute im Web-Browser sehen. Unter Container haben wir eine Zeile, und Zeile hilft uns, diese Elemente nahe beieinander anzuzeigen. Wir haben eine Spalte und die zweite. Wir können Kommentare verwenden, linke Spalte, dies ist die linke Spalte und darunter haben wir die rechte Spalte. Jetzt ist es viel einfacher zu folgen, dass dies die rechte Spalte ist und das ist die linke Spalte. Achten Sie immer auf die schließenden Tags, weil es manchmal sehr einfach ist , in Ihren Code chaotisch zu bekommen. Wenn Sie auf das Tag klicken, sehen Sie die blaue Unterstreichung, Sie können leicht sehen, ob das angegebene Tag tatsächlich geschlossen ist. Hier, wenn ich auf „div“ klicke, sehe ich, dass dies das öffnende Tag ist und in 37 Zeile es geschlossen wird. Das gleiche mit der rechten Spalte habe ich das Tag geöffnet und die 45. Zeile geschlossen. Lass es uns retten. Mal sehen, was auf der Website generiert wird. Ich werde die DevTools schließen und sehen, dass ich eigentlich zwei Spalten habe. Wenn ich Inspect ausführe, werden Sie sehen, dass sie auf die volle Seite gestreckt werden, also volle Breite. Es gibt nicht mehr zwei separate Spalten, aber wenn ich die Position der DevTools ändere , um die Breite des Fenster-Browsers größer zu machen, werde ich sehen, dass sie passen und dass sie nacheinander nahe beieinander angezeigt werden. Ich kann sehen, dass dies meine linke Spalte und hier meine rechte Spalte ist. Eine Sache, die wir auf dieser Ebene des Layouts anpassen können, ist, die Größe des Bildes zu ändern , das wir setzen, um es kleiner zu machen, um tatsächlich die volle Breite der Spalten zu füllen. Lassen Sie uns zurück zu Stil CSS. Wir können schreiben, dass jedes Bild, das wir auf der Website angezeigt haben , die maximale Breite des Containers nehmen würde, so dass das Maximum ihres Bildes 100 Prozent des Elternteils sein wird. Es bedeutet, dass, wenn col-sm Klasse ein spezifisches mit angewendet hat, zum Beispiel 600 Pixel, das Bild obwohl seine ursprüngliche Größe 700 Pixel ist, es 600 Pixel nicht überschreiten wird, weil wir seine Breite durch diese Codezeile einschränken. Schreib es uns hier. Hier zeige ich Ihnen, wie wir Kommentare in CSS machen können. Ich kann einfach einen Text schreiben, also begrenzt dies die Breite des Bildes. Es dauert 100 Breite des übergeordneten Maximums. Ich markiere den ganzen Text und nochmals Kommentare Schrägstrich, also ist alles hier geschrieben ein Kommentar. Es ist ein bisschen anders, weil wir in HTML diese Zeichen haben und in CSS wir Schrägstriche und Sternchen haben. Ordnung. Speichern wir es und lassen Sie uns unsere Website aktualisieren. Plötzlich kann man sehen, dass das Bild kleiner wird und es die ganze Breite der Spalte benötigt. Wir haben die beiden Säulen nahe beieinander. Der Header, sagen wir, er ist bereit in Bezug auf das Gitter. Wir haben die erste Spalte, die linke und die rechte, und alles ist in einer Reihe mit dem Container. Was der Container tut, ist es unsere Breite begrenzt und es hängt von den Bildschirmauflösungen ab. Für größere Bildschirme wäre der Container größer, denn kleiner wäre kleiner. Dies ist das responsive Webdesign und wir werden in diesem Kurs nicht näher eingehen, aber ich werde einige Dinge erwähnen, die Sie während der Verwendung von Bootstrap verwenden können. 11. 2/2 Elemente auf dem festgelegten Raster platzieren – Teil 1.: Der Header ist fertig, lassen Sie uns zu verschiedenen Teilen des Layouts wechseln. Wenn Sie auf dem Layout hier sehen würden, haben wir die vollständige Zeile der Liste. Wir können es vorerst überspringen, weil es nur eine volle Breite hat und wir keine Spalten haben und wir diesen Abschnitt nicht zwischen zwei Elementen teilen, also ist es vorerst in Ordnung. Wir sind jetzt in den Projekten, also sehen wir, dass wir wieder zwei Spalten haben, wir müssen sagen, dass wir die Containerzeile und Klasse namens col-sm anwenden müssen. In dem Projekt eins haben wir den ganzen Abschnitt. Wir haben einen Behälter angelegt, wir haben die Reihe. Ich habe die linke Spalte hier, ich werde die rechten Spalten haben, also schreibe ich die rechte Spalte. Ich mache mehr Platz für leichter zu lesen. Ich habe die richtige Spalte und wende col-sm Klasse an. Ich habe das div, lass uns die Kreuzung machen. Ich habe den Einzug gemacht, mein Code sieht sauberer aus, und mal sehen. Dies ist der Anfang der rechten Spalte, sie schließt hier. Dies ist der Anfang der linken Spalte, es näher hier, fast da. Wir müssen die Reihe schließen. Sie können sehen, dass es nicht durch die blaue Linie unterstrichen ist, also gibt es uns die Informationen, Atom gibt uns die Informationen. Es gibt dieses Tag, dieses div ist nicht geschlossen. Schließen wir es in der rechten Spalte. Jetzt ist es richtig und Sie müssen auch das Container-div schließen. Genau hier mache ich die Einrückung noch einmal und unser Code sieht jetzt gut aus. Wir haben links, rechte Spalte. Lass es uns speichern und sehen. Ich bin wieder im Browser und aktualisiere die Seite und sehe, dass das Bild in der linken Spalte ist und alle Texte in der rechten Spalte sind. Es erinnert uns langsam an das Layout, das wir anstreben. Lassen Sie uns mehr Inhalte der Projekte in Spalten setzen. Wir machen es genau dasselbe. Ich verwende diese Codezeilen wieder und füge sie hier ein. Ich schließe das div für die linke Spalte. Ich muss die nächste Spalte hinzufügen. Das Bild mit der Beschriftung, wenn Sie sehen können, wird dies unsere rechte Spalte sein. Schließen des div, Einrückung, und natürlich müssen wir div verdoppeln, also für Zeile und Container. Wenn wir sehen, ist Container geschlossen, Zeile geschlossen, und wir haben zwei Spalten. Was Sie sich über diese Klassen von Grid Bootstrap merken müssen , ist, dass Zeile nur verwendet werden soll, um Spalten zu behalten, so dass wir sie nirgendwo anders verwenden. Wenn wir nur Spalten nahe einander anzeigen möchten, werden wir Zeile verwenden, und dies ist die einzige Situation. Container hilft uns, eine bestimmte Breite der Seite zu halten. Sparen. Ich wechsele zum Browser, und ich sehe, dass das zweite Projekt innerhalb von zwei Spalten ist. Wir haben das letzte, letzte Projekt. Wieder können wir den Code, den wir haben, wiederverwenden. Dies ist das Projekt 3. Auf der linken Seite Spalte haben wir das Bild, und wir brauchen die rechte Spalte, rechte Spalte, Kommentar, Tempo es, und natürlich müssen wir die rechte Spalte schließen. Die linke ist bereits geschlossen, wir können Einrückung und Schließung des Behälters tun. Wir müssen die Zeile schließen, weil es das Kind eines Containers ist, also schließen wir Zeile, und hier schließen wir den Container. Lassen Sie mich schnell überprüfen, ob es uns gut geht. Hier können wir nur hinzufügen, dass dies richtige Spalte ist, Speichern, Aktualisieren, und ich sehe, dass ich Abschnitte mit Spalten habe und es uns langsam an das Layout erinnert. Wenn Sie überprüfen möchten, wie drei Spalten aussehen würden, können Sie den Test durchführen. Das allerletzte Projekt, ich kann die rechte Spalte kopieren und einfach duplizieren, und was ich von Bootstrap erwarte, ist, drei Spalten nahe beieinander anzuzeigen. Ich habe jetzt drei Säulen. Später ist es sehr einfach, sich zu vermehren. Diese drei Spalten haben die gleiche Größe, die gleiche Breite, sie sind geteilt. Wenn Sie es ändern möchten, ändern Sie die Proportionen, zum Beispiel, haben Sie das Foto größer. Lassen Sie uns in der Dokumentation von Bootstrap sehen, wir scrollen zu dem Teil, wo wir unterschiedliche Breite haben. Zum Beispiel ist hier eine Spalte breiter und die andere schmal. Hier wenden wir eine bestimmte Proportionen an. Stellen Sie sich vor, wir haben 12 kleine Spalten und wir verschmelzen sie einfach , um die Spalte größer zu machen. Wenn ich möchte, dass meine Kolumne tatsächlich die Hälfte des verfügbaren Platzes nimmt, schreibe ich sechs, weil sechs zu 12 die Hälfte ist. Wenn ich dies auf mein Bild hier im dritten Projekt anwenden möchte, so für das Foto, schreibe ich hier col-6, und der andere würde automatisch Platz nehmen, was übrig ist. Sie teilen die Hälfte des gesamten Containers auf diese beiden Spalten. Ich aktualisiere die Website und sehe, dass mein Bild zwei Mal größer ist als seine Kolleginnen. Für die Fußzeile sind wir damit in Ordnung, weil die Fußzeile nicht zwei Spalten verwendet, es ist wie eine Spalte, ein Stück Layout, ein Spaltenelement des Layouts. Wir sind fast bereit, die Elemente auszurichten. Es gibt einige Verbesserungen, die benötigt werden müssen, aber jetzt lassen Sie uns mit Bootstrap-Grid aufhören. Wenn Sie gerne mehr über das Bootstrap-Grid erfahren möchten, empfehle ich Ihnen dringend, die Dokumentation zu überprüfen. Es gibt viele Beispiele, wie Sie verschiedene Breiten der Spalte erstellen können, wie Sie sie in den horizontalen Modus stapeln können und schließlich, wie Sie auf ihrer responsiven Seite des Rasters arbeiten. 12. Die Navigation erstellen: In dieser Lektion werden wir einige CSS-Magie anwenden, um unsere Website viel vertrauter mit dem Projekt aussehen zu lassen, das wir haben. Wir kümmern uns um die Navigation ganz oben im Dokument. Wenn wir es mit dem Projekt vergleichen, werden wir sehen, dass die Navigation oben ist, dass jedes Element der Liste horizontal angezeigt wird, so dass sie nahe beieinander sind, nicht untereinander. Auch was es hier unter statischem Bild nicht zu sehen ist, möchte ich meine Navigation ganz oben fixieren. Es wird eine klebrige Navigation sein, und wir werden in CSS lernen, wie es geht. Wir kommen zurück zum Atom, und ich werde meine Spalten im Atom schnell wiederholen, um hier Stile zu sehen. Ich habe Stile bereit. Meine Navigation hat eine blaue Farbe, lassen Sie mich sie aus dem Inhalt txt kopieren , der alle dort aufgeführten Werte enthält. Wenn ich zu Inhalt txt wechseln, sehe ich ganz unten, dass ich die Farbe für die Navigation habe. Es ist der Hex-Code, ich kann es kopieren, und ich werde in CSS verwenden. Wir haben die Navigation, wenn ich zu meiner Website wechseln, werde ich sehen, dass dies das ganze nav ist. Was ist mit dem Anwenden einer Hintergrundfarbe? Ich erstelle einen Selektor für nav, nur in den DevTools, und verwende Hintergrundfarbe, sorry Farben, ich vermisse Tippfehler hier, Hintergrundfarbe. Ich füge den Wert der Farbe ein. Ich sehe, dass es blau ist, fantastisch. Ich kann in den ganzen Selektor kopieren und es in meinem CSS anwenden und speichern, und es ist fertig. Wenn ich aktualisiere, wird die Änderung gespeichert. Was wir mit der Liste tun können, um sie ähnlich der Navigation zu machen, die wir im Projekt haben. Ich muss über etwas erwähnen, dass es Anzeigeeigenschaft in CSS genannt wird. Standardmäßig wird jedes Listenelement, jedes li, standardmäßig als Blockelement angezeigt. Block-Element bedeutet, dass es die volle Breite des Containers nimmt. Wenn Sie das blaue Highlight in den DevTools sehen, werden Sie feststellen, dass es tatsächlich den gesamten Speicherplatz benötigt, den es hat, oder dann bestimmte Container ausführt. Wir müssen diese Anzeigeeigenschaft von Block zu Inline-Block ändern, was bedeutet, dass Listenelement wird nur den Platz nehmen , den es benötigt, um den Inhalt angezeigt werden. Wenn ich einen Selektor ul li erstelle und hier schreibe Anzeige Inline-Block, werden Sie sehen, dass alle meine Elemente nahe beieinander sind. Sie werden vertikal angezeigt, und wenn ich in den DevTools navigiere, werden Sie sehen, dass es nur die Breite dauert, die tatsächlich der Inhalt definiert. Wenn ich hier einen längeren Text hinzufüge, wäre die Breite größer, da der Inhalt länger ist. In der Blockanzeige spielt es keine Rolle, wie unser Inhalt aussieht, da er immer 100 Prozent Breite des Containers benötigt. Wir möchten Anzeige Inline-Blockeigenschaft anwenden, aber wir wollen nicht auf jedem Listenelement angezeigt werden, das wir auf unserer Website haben, da wir verschiedene Abschnitte haben. Zum Beispiel haben wir hier auch eine Liste, die im Projekt, dass die gegebenen Elemente vertikal angezeigt werden. Wir können dies tun, indem wir einen komplexen Selektor erstellen, was bedeutet, dass wir nur bestimmte CSS auf die li-Elemente anwenden, aus der ungeordneten Liste, die im nav-Tag existiert. Es wird unseren CSS-Bereich schmaler machen, so dass die Anzeige Inline-Block auf die Liste angewendet wird , die nur im nav-Tag enthalten ist, nur auf diese. Ich speichere es, erfrische und sehe, dass diese Liste intakt ist, hat sich nichts geändert. Aber wenn wir den Code überprüfen und schauen, was hier passiert, werden wir auf der Registerkarte Computer sehen, dass es einige Ränder gibt und einige Pads, und wir möchten es völlig auf Null zurücksetzen. Was wir tun können, können wir tatsächlich schreiben Rand: 0; Padding: 0; für diese gegebene Liste. Aktualisieren, lassen Sie mich es einfach speichern, aktualisieren und sehen, dass das Listenelement keine Ränder haben. Aber die Ränder, die wir sehen , kommen tatsächlich von ul. Schreiben wir ul, lassen Sie uns CSS kopieren, und schließlich sind unsere Ränder weg. Aber wir haben einige Ränder vom Körper, es sind eigentlich acht Pixel von jedem der Website, Sie können den orangefarbenen Rand sehen. Wir wenden die gleiche Technik an, wir können tatsächlich diesen Körper hinzufügen und ul, sie haben Marge: 0; Polsterung: 0; Wir können auch den Platz auf ihrem Körper ändern, so dass es viel konsistenter in Bezug auf den Code sein wird. Ich speichere es, aktualisiere und sehe, dass meine Navigation ganz am Anfang der Ränder des Fensterbrowsers beginnt , was das Verhalten ist, das ich erreichen möchte. Mal sehen, wie die Navigation in unserem Projekt aussieht. Wir haben etwas Platz und die gesamte Navigation ist zentriert. Lassen Sie uns versuchen, dies anzuwenden. Wir können Zentrierung Identifikation auf verschiedene Arten tun. Eigentlich können Sie einige Elemente in CSS auf verschiedene Arten zentrieren, es gibt einige verschiedene Methoden. Was ich tun werde, ist, ich werde nur nav ul hinzufügen, und hier oben Rand: 0 auto; was bedeutet, dass dies, der erste Platz, bezieht sich auf oben und unten, so dass die Ränder oben und unten Liste, und dies auf der rechten und der linken Seite. Auto bedeutet, dass es automatisch angepasst wird, so dass es natürlich unser Element zentriert. Ich rette es, und mal sehen. Das letzte, was wir tun müssen, ist, das ganze Element zu zentrieren. So wenden wir Text-Align-Zentrum an und dank ihm ist unsere Liste in der Mitte des Navigationsabschnitts. Lassen Sie mich einfach die letzte Zeile kopieren, anwenden, und wir haben unsere Navigation zentriert. Wir können tatsächlich Padding anwenden, um mehr Platz um die ganze Liste zu machen. Wir können Padding 30 Pixel anwenden und wir haben die Navigation größer. Ich kopiere es, füge, speichere und wir kommen näher. Wichtig ist auch, dass wir etwas Abstand zwischen den Elementen der Liste brauchen , also ausrichten. Dafür können wir auch Marge verwenden. Wenn wir zwei Positionen haben, bezieht sich die erste auf oben und unten und die zweite nach links und rechts. Wenn ich also 10 Pixel anwende, werden Sie einige Leerzeichen um sie herum sehen. Lassen Sie uns testen, ob wir größer bearbeiten können. Ja, es sieht besser aus. Also kopiere ich es. Nun, wenn ihr euch alle ausrichtet. Ich kann zu Kommentaren hier tun, dass Null bezieht sich auf oben und unten und 15 Pixel nach links und rechts. Ich kann mein Fenster vergrößern und Soft-Warp umschalten, damit es leichter zu lesen ist. Wir haben unsere Kommentare bereit, wir haben Marge angewendet und was kommt als nächstes? Ich erwähnte, dass wir diese klebrige Navigation gerne haben würden. Also müssen wir die Position fixieren und dafür werden wir CSS-Eigenschaft verwenden, die es Position genannt wird. Für die gesamte Navigation muss ich die Position fixiert anwenden. Seltsame Dinge sind mit meinem Layout passiert, aber keine Sorgen für jetzt. Ich kann sehen, dass, obwohl ich scrolle, meine Navigation immer noch auf der gleichen Position ist. Leider ist es hinter allen anderen Elementen. Es sieht aus wie die Ebenen, aber wir möchten die Navigation ganz oben halten. Dazu verwenden wir z-Index. Weist dem Browser an, welche Ebene dieses Element übernehmen soll. Je größer und die Zahl ist, desto Vorderseite wird das Element sein. Wenn ich also eins bin, wird es größer von Null sein, weil Null der Standardwert ist. Wenn bei fünf, ist es immer noch das gleiche, weil es größer als Null ist und es auf der Oberseite der anderen Elemente sein wird. Also habe ich z-Index 1 und was ich gerne tun würde, ist die Navigation auf die volle Breite zu dehnen. Also schreibe ich Breite 100 Prozent, und meine Navigation ist fixiert. Ich kann dies kopieren und in den Navigationsselektor einfügen. Die Sache, die Sie beobachten können, ist, dass Inhalte unter der Navigation, so dass alles aus der Kopfzeile ausgeschnitten wird, weil es durch die Navigation ausgeblendet ist. Was ich tun muss, ist, einen gewissen Rand aus dem Header anzuwenden, aber wir werden einige neue CSS-Eigenschaften verwenden. Zuerst erstellen Sie Selektor aus Header und wir werden schreiben, oben 70 Pixel. Es bedeutet, dass unser Inhalt tatsächlich 70 Pixel unterhalb seiner natürlichen Position beginnen wird. Also würden wir einen weißen Raum auf der Oberseite bekommen. Wir müssen auch relativ positionieren, weil Eigenschaft wie oben, unten, rechts und links nur arbeiten, wenn die Position relativ oder absolut angewendet wird. Bitte denken Sie daran. Wir haben Position relativ, die uns hilft, das Element relativ platziert. Ich meine, es nutzt seine natürliche Position und nimmt es als Nullpunkt. Wenn Sie also die Position um 70 Pixel von links oder rechts ändern möchten, können Sie sie einfach so verwenden. Es würde diesen Punkt als Punkt Null behandeln, weil es der natürliche Ort des Elements ist, aber wir wollen, dass es oben 70 Prozent hält. Jetzt kann ich sehen, dass ich etwas Platz für die Navigation habe und es ist behoben. So funktioniert es wie eine Wende. Aber ich würde es vielleicht auch auf 110 erhöhen, um mehr Leerraum zur Verfügung zu haben. Unser Header ist ein neues Element, also kann ich es unter nav einfügen. Ich speichere es und sehe, dass meine Änderungen angewendet werden. Das letzte, was für die Navigation für jetzt, ist, die Buchstaben in Großbuchstaben zu ändern und wir können es auch mit CSS tun. Also wende ich eine bestimmte CSS-Eigenschaft für das Listenelement an, das text-transform genannt wird, und wir möchten es in Großbuchstaben transformieren. Jetzt wird jedes Element, jeder Buchstabe in Großbuchstaben geschrieben. Auch können wir den Buchstabenabstand mit Buchstabenabstand Eigenschaft zum Beispiel um ein Pixel erhöhen . Es wird in Bezug auf Typografie schöner aussehen. Ich kopiere diese zwei neuen Zeilen und verwende im Stil CSS 27. Zeile, speichere sie, aktualisiere und sehe, dass meine Änderungen beibehalten werden. Wenn Sie es mit dem Projekt vergleichen, sehen wir, dass wir diese eine Zeile haben. Moment lassen Sie es uns überspringen und speichern wir es für die letzten Optimierungen am Ende des Kurses. Jetzt werden wir uns auf das nächste Element konzentrieren, das der Header der Website ist. 13. Optimieren der Kopfzeile: Es ist an der Zeit, sich jetzt auf das Header-Element unserer Website zu konzentrieren. Was wir tun werden, ist, die Größe der Überschrift zu ändern und sich um die Liste und die Schaltfläche zu kümmern, und etwas Seltsames passiert hier, also keine Sorge, wir werden alles abdecken und wir werden auch den Hintergrund auf die Kopfzeile anwenden. Das ist etwas, worauf wir anstreben. Wenn Sie einen Blick in den Assets-Ordner des Portfolios werfen, werden Sie die Schriftgrößen sehen, so dass Sie wissen, dass ich 100 Pixel für die h1 in 15 Pixeln für die Body-Tags verwendet habe, so dass wir es leicht in unser CSS anwenden können. Ich bin zu Atom gewechselt, ich schließe unnötige Fenster, also werden wir uns vorerst nur auf CSS konzentrieren. Lassen Sie mich das Fenster vergrößern. Ich habe erwähnt, dass wir für h1, dass es im Stundendokument ist, die Schriftgröße 100 Pixel verwenden. Für einen Körper verwenden wir 15 Pixel, so dass wir definieren können, dass der ganze Körper 15 Pixel haben wird, und wenn eine Navigation für jedes Element, wir verwenden 14 Pixel. Lassen Sie sich auf eine Website beziehen und wir haben sehr große Überschrift und sehr große Zeilenhöhe, also lassen Sie uns es auf einen optimalen Wert ändern, der 150 ist, ich kopiere einfügen h1 150. Was will ich sonst noch tun? Eigentlich ist diese Zeilenhöhe größer, als ich geplant habe, also können wir sie vielleicht auf 130 ändern. Ja, es ist näher am Projekt. Für die letzten Optimierungen können wir später experimentieren. Aber jetzt möchte ich mich auf das Geringste hier konzentrieren und diese seltsamen Dinge passieren. Lassen Sie uns untersuchen und sehen, was mit dem Header passiert. Ich habe die Position der Kopfzeile mit oben geändert. Was es tut, ändert es die tatsächliche Position des Headers, aber es belässt die anderen Elemente an der gleichen Stelle. Wie Sie auf der linken Seite sehen können, bleibt die Liste an der gleichen Stelle, egal ob ich den Spitzenwert auskommentiere oder nicht. Also müssen wir einige berichten, wie, das ist eine einfache Lösung, um es zu tun, ich werde nur Rand unten mit dem gleichen Wert hinzufügen, wie ich für die Spitze beantragt habe. Es sind also 110 Pixel und ich werde sehen, dass es tatsächlich besser wird. Ich kann auch die Marge erhöhen, um es glatter und bei etwas Leerraum aussehen zu lassen. Sagen wir also 160 oder vielleicht 220, sieht viel besser aus, also kopiere ich es und füge es in den Header-Selektor ein. Kümmern wir uns um diese Liste. Wir möchten diese Aufzählungspunkte an erster Stelle entfernen und auch die Schriftart passend machen. Also eigentlich habe ich einen Fehler gemacht, weil ich Skills Liste nicht auf diesen Abschnitt angewendet, wenn wir hier überprüfen, Ich habe IBM Plex und auf meiner Website habe ich Inknut Antiqua, also muss ich es ändern. Schnell werden wir dies in HTML wiederholen, tragen Sie mit mir. Diese Klasse Skills-Liste sollte eigentlich auf diese angewendet werden. Tut mir leid für die Verwirrung. Ich denke, dass jetzt alles richtig sein sollte. Also bin ich erfrischend auf Website und es sieht gut aus. Was ich mit dieser Steuer tun möchte, ist für zeigen mehr und Zeilenhöhe, und entfernen Sie auch diese Aufzählungspunkte . Wie ich das tun kann, nun, ich werde einen generischen Selektor für ältere Elementliste in einer geordneten Liste erstellen, also ist es List-Stil, keine, und es wird diese Aufzählungszeichen entfernen. So wie das hier. Ich kann es unter h1 einfügen, und eine andere Sache ist, dass ich die Marge erhöhen möchte. Ich kann Rand oben und unten haben, um es näher an unser Layout aussehen zu lassen. Ich kopiere und füge mich ein. Button, wir möchten die Schaltfläche stylen und auch einige Ränder hinzufügen. Für ein Tag, also für unseren Link, der hier ist, würde ich eine Klasse erstellen. Es wäre viel einfacher für uns, es unter Kontrolle zu haben, also lassen Sie uns zurück zu CSS und ich habe Schaltfläche, und hier kann ich einige Stile anwenden. Wenn ich das Projekt anschaue, sieht es wie Schaltfläche aus, also hat es abgerundete Ecken, es hat Rahmenradius und es hat den Rahmen im Allgemeinen. Lasst uns Grenze anwenden. Ein Pixel, solide, es ist schwarz. Lass es uns retten und sehen, es ist nichts passiert. Ich denke, ich weiß warum, weil ich keine HTML-Datei gespeichert habe. Bitte denken Sie daran, wenn Sie aufgrund von Änderungen in HTML CSS, sollten Sie beide Dateien speichern. Nun, ich habe den Rahmen, ich mag nicht, dass mein Text unterstrichen muss, also kann ich Text-Dekoration-Tag unterstreichen. Nein, es tut mir leid, ich möchte das zurücksetzen, es ist keine, Farbe ist schwarz, und ich möchte etwas Polsterung hinzufügen. Zum Beispiel, 10 Pixel, 20 Pixel, es ist besser und auch Rand von oben. Ich schreibe Rand oben wie 30 Pixel. Die Marge ist nicht anwendbar und die Antwort auf diese Frage, warum sie nicht angewendet wird, ist tatsächlich A Inline-Element. Was bedeutet das? Es bedeutet, dass wir nur alles beeinflussen können, was in der horizontalen Linie passiert ist und nicht in die vertikale, so dass wir keine Werte oben oder unten anwenden können. Damit es funktioniert, müssen wir die Anzeige von Inline ändern, die unter dem Standard für A zu Inline-Block ist. Jetzt werden wir in der Lage sein, die Ränder auf der oberen und unteren die Höhe des Elements zu ändern . Ich kopiere alle Stile, die ich angewendet habe, füge sie ein, speichere, erfrischende und sitze, die noch hier sind. Perfekt. Aber wir müssen auch den Grenzradius festlegen. Wir können dies mit Border-Radius tun, sagen wir 20 Pixel, ich denke, es ist ausreichend. Ich werde auch ein wenig die Polsterung von rechts und oben auf Drittel der Pixel erhöhen , und es sieht ziemlich cool aus. Aktualisieren und unsere Website wird viel besser. Ich erinnere mich, dass wir auch die große Beschriftung auf eine kleinere Größe ändern müssen. Wir können in der Schriftgrößendatei sehen, dass es 10 Pixel hat, also lassen Sie uns Fig Caption Selektor erstellen und an die Schriftgröße auf 10 Pixel senden. Ich aktualisiere die Seite und sehe, dass meine Änderungen bereitgestellt werden. Ich überprüfe jetzt das Projekt, das Portfolio, was sonst noch fehlt, ist sicher die Box, der Schatten auf dem Bild und der Hintergrund. Wir werden das in der nächsten Lektion behandeln. 14. Hinzufügen von Hintergrundbild und Rahmenschatten: Jetzt lasst uns am Hintergrund arbeiten. Wir können Hintergrundfarbe anwenden und wir können Hintergrundbild anwenden. Wenn Sie unsere Bild-Ordner im Portfolio überprüfen, werden Sie sehen, dass wir Hintergrund-PNG-Datei haben. Wir werden diese Datei verwenden, um den Hintergrund für die Heidekraut anzuwenden. Wechseln wir zu Atom in [unhörbar]. Ich konzentriere mich jetzt auf Kopfzeile. Ich suche nach Header. Wenn Sie nach einigen Selektor- oder CSS-Klassen suchen, können Sie Control oder Command F verwenden, um sie zu finden. Ich habe den Header und ich möchte hier einen Hintergrund anwenden. Wir werden Hintergrundbild anwenden. Hier ist die Regel. Sie müssen die URL schreiben. Es wird den Pfad des Elements enthalten. Lassen Sie uns schnell einen Blick auf den Ordner werfen, den wir haben. Unser Hintergrund ist ein IMG-Ordner, aber wir bearbeiten die Datei, die es im Stil CSS ist, also ist es in Ordnern, CSS. Das, was wir tun müssen, sind wir derzeit in CSS-Ordner, wir bearbeiten Stil CSS. Um zum Bild, der Hintergrunddatei, zu gelangen, müssen wir diesen Ordner verlassen. Wir müssen zurücktreten, zurück. Wir sind auf dieser Ebene und dann müssen wir IMG eingeben und wir können Hintergrund-PNG sehen. Wie wir es tatsächlich in Code schreiben. Nun, um auf die höhere Ebene der Struktur zurückzukehren, verwenden wir zwei Punkte und Schrägstrich. Es bedeutet, dass wir aus dem Ordner CSS, und plötzlich sind wir hier. Wir müssen IMG betreten. Ich schreibe nur IMG und dann den Namen des Bildes. Es heißt background.jpg. Ich habe es gerettet. Gehen Sie zurück zur Website, aktualisieren Sie sie und sehen Sie, dass mein Hintergrund nicht generiert wird. Lassen Sie mich nochmals nachsehen. Die Sache ist, dass Hintergrund PNG-Erweiterung hat, also muss ich es ändern, speichern, aktualisieren und ich kann sehen, dass tatsächlich zwei blaue Streifen angewendet werden. Die Sache ist, dass der Hintergrund wiederholt wird. Wenn Sie diese Funktionalität entfernen möchten, entfernen Sie diese Eigenschaft, wir müssen Hintergrundwiederholung definieren, keine Wiederholung. So wird unser Hintergrund nicht mehr wiederholt. Möchten Sie auch die Position unseres Hintergrunds hinzufügen. Wir können sehen, dass der Header nicht der Navigation entspricht, die wir haben, wie der verfügbare Platz, so können wir die Position der Kopfzeile von 110 auf, zum Beispiel, 70 Pixel ändern . Nav und Header würden es Shutter machen, also würde es viel schöner aussehen. Ich kopiere den gesamten Code für den Header und stütze ihn. Ich sehe, dass mein Hintergrund näher kommt. Jetzt habe ich meine Entwickler-Tools auf der Unterseite. Ich werde viel mehr Kontrolle haben, um zu sehen, wie sich der Hintergrund verhält. Um es zu ändern, müssen wir tatsächlich die Hintergrundgröße anpassen. Dies ist die ursprüngliche Größe des Hintergrunds. Wir müssen es dehnen und wir können es tun, indem wir Hintergrundgröße anwenden. Wenn ich Abdeckung anwenden, wird es das gesamte Diagramm dehnen, um den Bereich abzudecken. In unserem Projekt endet der Hintergrund irgendwo hier. Wir müssen auch Hintergrundposition Y hinzufügen. Zum Beispiel werde ich damit experimentieren. Es ist zu viel. So etwas oder so. Ja, wir kommen näher. Lassen Sie uns es so behalten, dass unsere Hintergrundgröße abgedeckt wird. Es wird den ganzen Behälter ausfüllen. Auch werden wir die Position der Y-Achse ändern, die vertikal ist. Ich muss diese beiden neuen CSS-Eigenschaften kopieren. Zurück zu Atom, Einfügen, Speichern, Aktualisieren, Ich kann Dev-Tools schließen, um eine bessere Ansicht zu haben. Jetzt sieht mein Header viel besser aus. Das nächste, was ich anwenden möchte, ist der Kastenschatten auf dem Bild. Box Schatten ist eine weitere coole CSS-Eigenschaft. Lassen Sie uns div Werkzeuge öffnen. Jetzt können wir es in diese Position ändern. Wir können für dieses Bild bearbeiten, für dieses aktuelle und nur dies, weil die anderen Bilder, sie haben keine Kastenschatten im Projekt. Wir müssen eine CSS-Klasse hinzufügen, um sie irgendwie zu unterscheiden. Ich bin in meinem HTML-Dokument und suche nach einem Bild, dass es die richtige Spalte ist. Lassen Sie uns Klassen-Intro-Bild hinzufügen. In CSS füge ich Klassen-Intro-Bild hinzu und füge Box-Shadow hinzu. Box-Schatten hat freie Werte, erstens, wie es auf der X platziert wird, die zweite Y-Achse, wie unscharf es sein sollte und was sollte die Farbe sein. Wir werden etwas Transparenz verwenden, also werden wir RGBA verwenden. RGB, bemerken Sie bereits von Rot, Grün und Blau und A ist der Alphakanal, der für die Transparenz verantwortlich ist. Ich erinnere mich an die schwarze Farbe in RGB, es ist Null, Null, Null. Das letzte ist Alphakanäle, wie transparent unsere Farbe ist, wir können hier schreiben, 20 Prozent. Ich rette es. Mal sehen. Mein Schatten wird angewendet. Was ich hier sehen kann, ist, dass es ausgeschnitten ist, also kann ich etwas Rand oben anwenden, um mehr Platz von oben und auch Rand unten zu machen, um den Text zu Beschriftung ein bisschen besser aussehen zu lassen. Ich kopiere es. Ich kopiere und füge zur Klasse namens Intro, IMG, erfrischend hinzu, ich habe meinen Box-Header bereits. Was fehlt noch? Ich denke, dass wir dem Projekt sehr nahe sind. Wir können andere Optimierungen überspringen, um am nächsten Abschnitt zu arbeiten, die die Liste ist. Wir werden das in der nächsten Lektion tun. 15. Gestaltung der Listen- und Projektabschnitte: Konzentrieren wir uns jetzt auf den Abschnitt mit der Liste, in der alle Fähigkeiten erwähnt werden, die Jane hat. Wie wir sehen können, ist es zentriert und es hat eine größere Schriftgröße, die 50 Pixel ist. Kommen wir zurück zu unserem Code. Dafür haben wir Skills Liste angewendet. Ich habe eine neue Klasse bereit, da sie woanders ist, ja, es ist hier, aber es ist in Ordnung, hier kombinieren wir einige Selektoren und Klassen. Aber diese Eigenschaften werden nur die ersten Kompetenzlisten angewendet, so dass es in Ordnung ist, ein neues CSS-Objekt unter allen Klassen zu erstellen, die wir vorher haben. Wir wollen den Text sicher zentrieren und wir tun dies durch Textausrichten zentrieren, korrigieren und wir wollen die Schriftgröße auf 50 Pixel erhöhen, und lassen Sie uns unsere Website aktualisieren. Es sieht viel besser aus, ich würde den Rand und die Zeilenhöhe verringern , weil es ziemlich groß für die Fähigkeitenliste ist. Wir haben Skills Listen und lassen uns Versorgungslinie wie 150 Prozent verstecken, was viel besser aussieht und wir können auch Margin-bottom aus der Liste anwenden, wie 60 Pixel oder vielleicht größer, 100 Pixel oder vielleicht 130, also haben wir viel mehr Platz zwischen den Elementen. Ich kopiere es und füge es in die Klasse ein, die ich bereits habe. Lassen Sie uns aktualisieren, und so sieht unsere Liste aus. Sie müssen zugeben, dass es ziemlich einfach zu beheben war. Der Header-Abschnitt ist fast fertig, die Liste ist fertig. Jetzt ist es an der Zeit, sich um die Projekte zu kümmern. Wir können sicher die vordere Säule entfernen, weil es nur für Demonstrationszwecke war. Ich gehe ganz zum Ende des Projekts, es ist Projekt 3, drittes Projekt, ich entferne die zusätzliche Spalte, die ich nicht brauche. Es ist in Ordnung. Woran ich jetzt arbeiten muss, ist definitiv die Größe der Überschriften zu ändern oder ist es tatsächlich gemacht? Nein, es ist noch nicht fertig. Es sollte 50 Pixel sein. Ich würde auch an der Zeilenhöhe für die Überschrift, für den Absatz und für den unteren Teil arbeiten. Die gute Nachricht ist, dass wir die Klasse, die wir für diese Schaltfläche verwendet haben, wiederverwenden und sie überall anwenden können , wo wir brauchen. Für alle lesen Sie mehr, acht Steuer. Kommen wir zurück zu CSS, ich erwähnte, dass wir für h2 Schriftgröße 50 Pixel wollen. Hier habe ich h1. Um den Code leicht zu lesen, erstellen wir unter h1 h2 Selektor, also schreibe ich Schriftgröße 50 Pixel und Zeilenhöhe, sagen wir 130 Prozent. Ich speichere es und sehe, dass meine Schriftart erhöht wird. Ich sehe, dass es einen Unterschied im Schriftgewicht gibt, dass dieser dünner ist. Ich möchte diese Kühnheit aus der Überschrift entfernen. Wir können es tun, indem wir Schriftart für h1&h2 anwenden , da standardmäßig jede Überschrift Schriftgewicht fett hat. Wir wollen es Schriftgewicht normal haben. Jetzt gibt es einen Unterschied. Lassen Sie mich einfach schnell die Schriftgrößen überprüfen. Ich habe das Dokument in Schriftgröße geöffnet und ich sah, dass unsere Überschriften h2 eigentlich 30 Pixel haben sollten, nicht 50, also müssen wir es korrigieren, also h2 wird 30 Pixel haben und jetzt sieht es viel besser aus. Lassen Sie uns auf jeden Absatz eine größere Zeilenhöhe anwenden, wie 160 Prozent, also haben wir p , Zeilenhöhe, 150 Prozent und jetzt ist es viel besser. Die nächste Sache ist, Klassenschaltfläche auf einen Text anzuwenden. In HTML für das erste Projekt, das hier ist, habe ich href, also wenden wir das nächste Attribut an, das Klasse ist, und wir wenden unten an. Ich speichere es, erfrische und sehe, dass der Knopf hier funktioniert. Ich möchte diese Kacheln auch für diesen Button oder für den einen anwenden , der eigentlich nicht hier ist, also müssen wir sie auch platzieren. Ich kopiere es, suche nach dem nächsten, es ist hier. Dort p habe ich auch den Knopf. Die Sache, die ich nicht mag, ist, dass alles sehr gequetscht ist, also möchte ich mehr Räume zwischen Projekten geben. Wir können dies tun, indem wir CSS-Klasse für Dissektionen anwenden. Wenn wir Def-Tools starten, werden Sie sehen, dass wir diesen Abschnitt für das Projekt 1, das Projekt 2, das Projekt 3. Für alle von ihnen können wir Klasse anwenden, es wird die Ränder auf der Oberseite und auf der Unterseite zu erhöhen. Was ich jetzt mache, komme ich zum allerersten Projekt zurück und füge Klassenprojekt hinzu. Ich kopiere das Attribut, Abschnitt und den nächsten. Jetzt hat jeder Abschnitt des Projekts eine Projektklasse, ich kann diese Klasse erstellen, sagen wir, es wird nur Projektklasse sein und ich kann Marge von oben und unten anwenden, sagen wir 50 Pixel oder sogar 70, um mehr Platz zu geben, es sieht schöner aus. Wenn wir es mit unserem Projekt vergleichen, können Sie sehen, dass das erste und das dritte Projekt den Hintergrund haben und der Rand zwischen unten und dem Absatz kleiner ist, als wir es derzeit haben. Lassen Sie uns daran arbeiten. Erstes und drittes Projekt wird einen Hintergrund haben, so dass wir CSS-Klasse anwenden können. Ein anderes haben wir Projekt und wir können es auf blau anwenden. Auch hier, blau werden wir die gleiche Farbe verwenden, wie wir für die Navigation verwendet, so dass die Hintergrundfarbe und wir diese Farbe anwenden. Entschuldigung, es ist das Projekt 2, also muss ich das Projekt 1 finden. Für das dritte Projekt, Projekt 3, das hier ist, speichere ich HTML und speichere CSS. Zurück zu meinem Browser und ich sehe, dass der Hintergrund angewendet wird. Was ich nicht mag, ist, dass der ganze Container keine Polsterung hat, also würde ich für jedes Projekt auch Planetpixel oder sogar mehr des Auffüllens hinzufügen und vielleicht den Rand etwas verringern, so. Es sieht viel besser aus. Ich nehme die ganze Klasse und ersetze sie, speichere sie und überprüfe sie. Die Sache, die ich erwähnte, war, dass der Boden die Margin-Spitze definiert hat, so dass wir auf verschiedene Weise handeln können, um es zu lösen. Zum Beispiel können wir den Rand entfernen, wenn der Boden in der Projektklasse erscheint. Wir haben Projektklasse und wir geben die Informationen an den Browser, dass hey, wenn wir die Klasse haben, die den Taktstock genannt wird, dass sie im Klassenprojekt enthalten ist, können Sie diesen Rand entfernen, lassen Sie uns es auf dass sie im Klassenprojekt enthalten ist, können Sie diesen Rand entfernen, Null setzen, lassen Sie uns schreiben so eine Weise. Wenn wir Projektklasse und Bottom Insight haben, setzen wir Margin-top auf Null oder vielleicht nicht Null, aber 10 Pixel, so dass wir ein wenig Platz haben und jetzt sieht es viel besser aus. Wir sind fast bereit, ich habe den Rand auf Bildrand-bottom angewendet, also die Sache, die ich tun kann, um es universeller zu machen, also die Sache, die ich tun kann, um es universeller zu machen,kann ich diesen Rand von hier entfernen und ihn auf jede Figcaption anwenden, so dass jede Figcaption die gleichen Rand von oben. Die Änderung, die ich mache, war von Intro ING zu nehmen, ich habe den Rand entfernt und ich habe margin-top 10 Pixel zu figcaption hinzugefügt , speichern, erfrischend. Ich habe den Rand hier und die gleichen Werte für die Beschriftungen in diesen Elementen auch. Was fehlt hier noch? Sicher müssen wir an der Fußzeile arbeiten. Lassen Sie uns in der vollen Breite des Browsers sehen. Wir werden CSS-Magie für diese Fußzeile anwenden. Was muss sicher getan werden, der Text zentriert und die Schriftgröße auf 50 Pixel eingestellt wird. Machen wir es in der nächsten Lektion. 16. So gestaltest du die Fußzeile: Wir nähern uns den letzten Schritten, also kümmern wir uns um die Fußzeile unserer Website. Was wir hier tun müssen, ist, dass wir den Text zentrieren müssen, wir müssen die Schriftgröße erhöhen. Lassen Sie uns zurück zu diesem Text CSS. Wir haben unsere Fußzeile und H2, und wir haben bereits die Dateischriftgröße für H2 definiert, das ist 30 Pixel, aber in unserem Projekt hat es 50. Anstatt eine andere Klasse zu erstellen, können wir einfach den Selektor bereitstellen, der aus Fußzeile und H2 besteht. Unser Browser wird versuchen, H2 innerhalb des Fußzeilen-Tags zu finden und nur hier wird es 50 Pixel Schriftgröße anwenden. Wir müssen auch den Text zentrieren. Eigentlich werden wir den Text auf dem gesamten Filter zentrieren , weil der Absatz ebenfalls zentriert ist, also ist es Textausrichtung Mitte. Lassen Sie uns die Seite aktualisieren. Ich bin beinahe zufrieden damit. Die Sache, die ich anwenden möchte, sind einige Ränder oben und unten. Ich verwende Rand oben und unten 50 Pixel. Eigentlich ein bisschen mehr, lassen Sie uns 100 hinzufügen. Jetzt ist es viel besser. Außerdem möchte ich etwas Leerzeichen zwischen Überschrift und Absatz hinzufügen. Lassen Sie uns einen Rand oben für das H2 hinzufügen, dass es in der Fußzeile ist, 50 Pixel. Es ist nicht Rand oben, sondern margin-bottom. Tut mir Leid dafür. Es ist ziemlich klein, also was ist mit 100. Ja, jetzt sieht es viel besser aus. Unsere Fußzeile ist fertig. Das, was ich gerne ein wenig arbeiten möchte, ist die Ausrichtung der dicken Beschriftung und eines Textes im zweiten Projekt. Wenn wir die PNG-Datei öffnen, werden Sie sehen, dass der Text hier auf der rechten Seite ausgerichtet ist, und diese, dicke Beschriftung, hat die gleiche Ausrichtung. Dies hat auch eine Linienausrichtung. Wir müssen zusätzliche Klasse anwenden, nennen wir das, Rechtsausrichtung, und wir werden Textausrichtung, CSS-Eigenschaft, text-align verwenden , und dann müssen wir es auf das Projekt Nummer 2 anwenden. Für das gesamte Projekt werden wir hier die richtige Ausrichtung anwenden. Ich kann sehen, dass mein ganzer Text war, dann ist die Spalte im zweiten Projekt nach rechts ausgerichtet. Was noch fehlt, ist, dass wir die dicke Beschriftung für dieses Projekt eins und das Projekt drei rechts ausrichten müssen. Ich suche nach Projekt eins und die dicke Beschriftung ist hier, also füge ich Klasse hinzu. Die gleiche richtige Ausrichtung, ich kopiere es, und suche nach drei zu projizieren, und die dicke Beschriftung hier auch. Ich füge Klasse hinzu, speichere sie und aktualisiere die Website, und ich kann sehen, dass der Text ausgerichtet ist. In Ordnung. Kümmern wir uns in den letzten Wochen um die Navigation. 17. So gestaltest du die Navigation: In dieser Lektion kümmern wir uns um die Navigation. Wenn Sie das Projekt öffnen, werden Sie sehen, dass wir die schwarze Linie haben. Wie kann es gemacht werden? Es ist nicht so kompliziert. Gehen wir zurück zum Code. Was wir in unserer Navigation tun müssen, die ganz oben ist, müssen wir ein leeres Tag erstellen, dass es zwischen Behance, Twitter, LinkedIn, etc. Hier haben wir li, dann haben wir leer, Klasse. Wir werden es retten. Lass uns sehen. Wir haben diesen Raum dazwischen. Wenn wir Dev Tools verwenden, werden Sie sehen, dass nichts hier ist, aber eigentlich brauchen wir ein wenig mehr Platz, damit wir die Breite definieren können. Zum Beispiel, 50 Pixel, und wir können border-top hinzufügen, so dass nur der obere Rand wird den Rahmen haben, ein Pixel und schwarze Farbe. Ich denke, es sollte ein bisschen länger sein, also wie 70 oder sogar 90 Pixel. Was ich nicht mag, ist, dass es eigentlich nicht in der Mitte ist. Wir können es leicht mit einigen Tricks positionieren. Du kennst schon oben. Zum Beispiel können wir oben, 10 Pixel anwenden, und damit es funktioniert, müssen wir Position haben, relativ, aber es geht tatsächlich nach unten, und das ist Zähler [unhörbar] CSS, aber wenn wir wollen, um die obere Position und machen es tatsächlich näher an der oberen Kante, müssen Sie Minus hinzufügen, so dass es den kleineren Abstand zwischen der oberen Kante haben wird. Ich denke, dass fünf Pixel genug sind, damit wir die ganze Klasse kopieren können. Dies bedeutet tatsächlich, dass diese Stile nur funktionieren, wenn li eine leere Klasse angewendet hat. So können wir es einfach kopieren und irgendwo in der Nähe unserer Navigation einfügen , so dass es konsistent ist. Wir haben unsere Linie, und wir können auch einige Links zu unseren Medien hinzufügen. Zum Beispiel, wenn ich externen Link Twitter verwenden werde, kann ich meinen Twitter-Account hinzufügen, nur wirklich mein persönliches, nicht Jane's Doe, aber wen interessiert es? Also habe ich Aganaplocha, dies mein richtiger Name, und ich füge auch ein anderes Attribut hinzu, das Ziel ist, leer, und es sagt unserem Browser, den Link in einem neuen Fenster zu öffnen. Ich speichere es, und sehe, dass mein Link leider violett ist und die Textdekoration hat. Aus diesem Grund werden einige Standardstile vom Browser angewendet, daher müssen wir sie zurücksetzen. Wir können dies leicht durch nav li a tun, so dass alle a, die in den Listenelementen sind, Textdekoration auf keine gesetzt, Farbe schwarz, und ich bin glücklich damit. Wenn ich darauf klicke, wird mein Twitter geöffnet. Was wäre, wenn wir diese Elemente mit den spezifischen Bereichen der Website verknüpfen möchten? Wir werden Ankerlinks verwenden, und wir werden IDs verwenden. Wie können wir das tun? Wir müssen „a“ erstellen und in crop Attribut, müssen wir eine bestimmte ID hinzufügen, wenn wir einen Link zu Kontakt hinzufügen möchten, nennen wir es Kontakt, aber Sie können es wo immer Sie wollen. Sie können es Jane Kontakt setzen, benennen Sie es, wie Sie möchten. Wir haben Kontakt und wir haben einen Ausweis. ID beginnt mit Hash. Jetzt müssen wir diese ID als Attribut für den spezifischen Abschnitt erstellen. Stellen wir uns vor, dass die Fußzeile unser Kontaktbereich sein würde. Also müssen wir ID erstellen, also ID-Attribut und der Name müssen gleich sein, wie wir es hier definieren. Im Nav nennt man es Kontakt. Gehen wir zurück zur ID, und wir rufen diesen Kontakt an. Lassen Sie uns speichern, aktualisieren, klicken, und wir sind am unteren Rand der Seite. Dasselbe können wir auch mit Works tun. So Works wird uns zu Projekten scrollen. Das erste Projekt startet die ID. Also haben wir das Klassenprojekt, aber wir müssen auch ID-Projekte haben, und dies muss in der Verbindung reflektiert werden. Wenn wir Works haben, erstelle ich „a“ ID-Projekte, und natürlich muss ich ein Tag schließen. Für die Erfahrung können wir zum Beispiel auf den allerersten Abschnitt zum Header verlinken. Also Header würde ID-Erfahrung haben, und wir müssen es auch verknüpfen. Ich speichere und aktualisiere. Wenn ich also auf Works klicke, befinde ich mich ganz oben im Abschnitt Arbeit. Wenn ich auf Erfahrung klicke, bin ich ganz oben, und wenn ich auf Kontakt klicke, bin ich unten. Für andere Abschnitte können Sie Ihre eigenen Links verwenden, und Sie können versuchen, sie als eine andere Übung zu behandeln. Also sind wir mit der Navigation fertig. Was muss noch hinzugefügt werden? Ich würde gerne einen kleinen Übergang von Funktionen hinzufügen. Also schweben Sie Effekte auf die Schaltflächen. Wir werden das in der nächsten Lektion tun. 18. CSS-Übergangsfunktion: Alles klar, das ist eine der Finals-Lektion. In dieser Lektion werden wir uns auf CSS-Übergangsfunktionen konzentrieren , so dass wir die Farben der Schaltfläche ändern, um den Mauszeiger zu bewegen. Wir haben unsere Schaltfläche, aber wenn wir den Mauszeiger über unseren Cursor bewegen, passiert nichts. Wir möchten den Hintergrund in Schwarz ändern und die Farbe des Textes auf Weiß haben. Wie wir das tun können, müssen wir Pseudo-Klasse verwenden, die Hover genannt wird. Ich suche nach meinem Knopfkurs. Alles klar, lassen Sie uns nur auf CSS wechseln. Hover-Klasse ist eine Pseudo-Klasse, also schreiben wir es so. Wir schreiben den Namen der Klasse, so dass wir nach dem Doppelpunkt schweben und es bedeutet, dass diese Pseudo-Klasse nur für die Buttonklasse gewidmet wäre. Immer wenn wir den Mauszeiger über Element bewegen, das Schaltfläche Klasse hat, wird sich etwas ändern. Lassen Sie uns 'Hintergrund' schreiben, es ändert sich zu schwarz, und lassen Sie uns Farbe zu Weiß hinzufügen und speichern Sie es. Aktualisieren Sie unsere Seite und wenn wir den Mauszeiger über, können wir die Änderung sehen. Aber was ich daran nicht mag, ist, dass die Veränderung sehr aggressiv ist, also ist es wie Null oder eins. Ich möchte die Übergangsfunktion haben, so dass wir dies auch mit CSS tun können und zurück zu Atom und für mein Element, meine ursprüngliche Elementschaltfläche, muss ich Übergang schreiben. Was wird so zum Beispiel geändert werden, Hintergrund. Wie lange wird es dauern, bis die Änderung so zum Beispiel, eine halbe Sekunde und was wäre die Funktion, so würde es erleichtern in und heraus, so dass die Änderung wird sehr weich und sehr glatt von Anfang an und am Ende. Sie können sehen, dass sich der Hintergrund sehr glatt ändert, aber die Farbe wirkt immer noch aggressiv. Wir brauchen auch diese Übergangsfunktion für die Farbe, und wir können alle anderen Eigenschaften kopieren. Jetzt ist die Änderung sehr glatt und ich mag es wirklich und es wurde nur mit ein paar Zeilen Code gemacht. Sie können diese Dinge leicht ändern. Sie können Farben, Hintergründe, Ränder usw. ändern, was wir sonst noch tun können? Nun, wir können auch einige anwenden, zum Beispiel, Texttransformation oder Textdekoration, um den Text zu unterstreichen, wenn wir den Mauszeiger über die Navigation bewegen. Wir kommen zurück zu der Navigation, die hier ist, also haben wir 'nav li a', also kopieren wir den gesamten Selektor, fügen Sie ihn hier ein, wir fügen Pseudo-Klasse hinzu, die Hover ist und Textdekoration unterstrichen hinzufügen. Lass uns sehen. Wenn ich den Mauszeiger über, habe ich den Text. Dies ist noch nicht der Link, deshalb haben wir deshalb nicht die Unterstreichung des Textes. Natürlich, fühlen Sie sich frei zu experimentieren, um viel mehr zu tun. Der Himmel ist die Grenze. Sie können total Spaß mit Übergangsfunktionen und mit Pseudo-Klasse haben, also hoffe ich, dass Sie einige interessante Effekte erzielen werden. So sieht die finale Website aus. Es ist fast eins zu eins für mein Projekt, also bin ich sehr zufrieden und ich hoffe, dass Sie es schaffen, etwas Ähnliches mit Ihrem Code, mit Ihrem CSS und HTML zu erreichen . Ich hoffe, Sie schaffen es, einige Theorie in die Praxis umzusetzen und zu sehen, wie CSS und HTML zusammenarbeiten. Zögern Sie nicht, Dev Tools zu verwenden, um einige neue Funktionen zu finden oder zu experimentieren, die Hintergrundfarbe zu ändern, die Typografie zu ändern, um alles zu tun, was Sie wollen mit der Website. Sie können die Vorlage leicht wiederholen, um sie an Ihre Bedürfnisse, Ihren Geschmack und Ihre Ästhetik anzupassen . Ich halte die Daumen für all deine Experimente. 19. Zusammenfassung des Kurses: Lassen Sie uns den letzten Blick auf unsere Website werfen. Zunächst haben wir uns um die Navigation gekümmert und wir haben die Listenelemente und wir haben Anker Geschmack angewendet, so dass wir leicht durch unsere Website navigieren können. Wir haben auch externe Links, zum Beispiel einen Twitter-Account. Wir haben den Header-Abschnitt mit einem Foto erstellt. Wir haben Kastenschatten angewendet. Wir haben die Untertitel, wir haben die Unterseite mit der Animation, mit der Übergangsfunktion, mit der Pseudo-Klasse gelten, die Hover ist. Wir haben die Liste, wir haben die größere Überschrift. Wir haben verschiedene Schriftarten angewendet. Wir haben verschiedene Gesichter. Wir haben den Text zentriert. Wir haben zwei Säulen in unserem Raster. Wir haben die Bilder beigefügt. Wir haben verschiedene Textausrichtung auf der linken Seite, auf der rechten Seite, und wir haben auch die Fußzeile. Ich hoffe, dass Sie einige Abschnitte der Website wiederverwenden werden. Ich hoffe, dass Sie CSS und praktische Beispiele in Ihrer täglichen Arbeit anwenden werden. Vielen Dank für die Teilnahme an meinem Kurs. Ich hoffe, dass Sie viel Spaß haben. Ich hoffe, dass Sie glaubten, dass Codierung ein großartiges Werkzeug ist, um einige Experimente mit UI im wirklichen Leben zu machen , das ein Webbrowser ist.