HTML5 & CSS3 für Anfänger:innen

1. Promo: Sind Sie auf der Suche nach einem Kurs, der Sie von einem kompletten Anfänger bis zum Aufbau Ihrer eigenen HTML Vorfahren Website führt ? Oder vielleicht kennen Sie bereits etwas XML und CSS. - Was? Sie kämpfen mit dem Aufbau einer realen Welt Website. Wenn er eine dieser Fragen mit Ja beantwortet hat, bist du auf den weißen Kurs gekommen. Hi, mein Name ist Alex. Wie mich zu meinem HTML Five und CSS drei Master-Kurs zu führen. Nun, das sind die Kosten für speziell entwickelt, um Ihnen zu zeigen, wie Sie sich bewerben können. HTML NCs sagt, echte Krieg responsive Websites zu bauen, der Kurs ist in mehrere Abschnitte in den ersten 2 Abschnitten unterteilt. Ich werde Ihnen die Grundlagen von HTML und CSS vorstellen, und dann in Abschnitt drei wird anwenden, was Sie in den 1. 2 Abschnitten gelernt haben, um diese schöne Riel Station Responsive Website zu bauen . Nun, diesem Kurs geht es nicht nur um Codierung. Darüber hinaus, um über externe fünf Inzest Geschichte zu erfahren, Ich werde Ihnen zeigen, wie Sie Ihren Aufwärtsgang für Geschwindigkeit optimieren und für solche Motoren S C o. Ich werde Ihnen vorstellen, Domain-Namen waren Holston und schließlich werde ich Ihnen zeigen, wie Sie starten Sie Ihre Website Leben im Internet. Es gibt auch spezielle Abschnitte, die Ihnen die Grundlagen von PHP vermitteln, in denen Sie lernen, wie Sie aufregen interaktiver werden können. Und es gibt auch einen Abschnitt gewidmet, um Sie über die Grundlagen von Web-Design zu lehren , so dass Sie lernen, wie Sie schöne moderne Websites für sich selbst oder für Ihre Kunden entwerfen können , denn auch kommt in über 11 Stunden Inhalt, Quiz, Aufgaben, relativ Ressourcen, und Sie bekommen jemals Lager überall im Kurs Alberta, um Sie mit Unterstützung so schnell wie möglich. Nun, wenn Sie schon einmal über HTML fünf unaufhörliche Geschichte erfahren wollten. Dies ist der perfekte Kurs für Sie und ich hoffe, dass es im Kurs wird, und ich hoffe, Sie sehen auf der Innenseite, dass sie ist. 2. Einführung in HTML: In Ordnung. Also lassen Sie uns über H t m l sprechen. Was genau ist HTML? Nun, das steht für die Hypertext-Markup-Sprache. Genau dafür steht H t m l. Also ist die große Frage jetzt in Ordnung, Ordnung. Was genau macht HTML? Nun, ich mag diese Analogie zu verwenden, wenn jeder erklärbar ist. HTML ist vorstellen, dass eine Website ist der menschliche Körper. Ok, denk nur kurz darüber nach. Diese Website ist ein menschlicher Körper. HTML wäre das Skelett von den menschlichen Körpern. Es ist im Grunde irgendwie wie der Kern strukturell einer Website. Sie können keine Website haben. Wir haben HTML. Es ist praktisch unmöglich. Also im Grunde acht ähnliche Formen das Rückgrat oder das Skelett von einem Husten, jede einzelne Webseite im Internet, man kann keine Webseite ohne HTML haben. Es ist so, als hätte man einen menschlichen Körper ohne Pfanne, und es wird nicht nur nicht passieren. Das ist also im Grunde das, was h t m. L ist. Also, was ich hier habe, ist eine sehr einfache a tm Helpage im Internet, und was Sie hier sehen können, ist meist nur Text. Aber er kann auch hier ein Bild sehen. Also, wenn ich einen Blick auf den Code hinter dieser Seite werfen wollte. Ich benutze den tapferen Browser. Also, wenn ich dich kontrolliere, wird das mich zur Seitenquelle bringen. Der Quellcode für die Seite. Ich glaube, Kontrolle Sie ist auch für Google Coombe anwendbar. Wenn Sie Firefox oder vielleicht sogar den Safari-Browser verwenden, kann es anders sein. Aber wenn Sie mit der rechten Maustaste klicken, sollten Sie etwas sagen, dass Cesar Seite anzeigen. Also klicken Sie einfach darauf und Sie sollten in der Lage sein, den Code für die Seite zu sehen. Also, was? Hier können Sie den Jargon sehen, Zaid den Code sie sehr auf sexy Code hinter diesem auf sexy Seite. Ein Großteil der Dinge, die Sie hier sehen, ist HTML. Aber es ist nicht nur eine Ähnlichkeit. auch Haben Sieauchetwas Javascript wie das. Aber mach dir keine Sorgen. Konzentrieren wir uns einfach auf die HTML-Teile. Hier können Sie also ein Beispiel für eine einfache externe Seite sehen. Sie können die P-Tag-Hypertext-Markup-Sprache sehen. Ah, P-Klasse. Das ganze Zeug, das du hier siehst, ist Alter T m l. Aber keine Sorge. Wir werden viel, viel tiefer mit HTML umgehen. Ich werde Ihnen genau die Kernstruktur erklären. Und ah, Sie werden ein viel besseres Verständnis davon haben, wie XML funktioniert. Hinter dem Sinn in diesem Video sind einfach nicht in HTML einzuführen und Ihnen auch ein Beispiel dafür zu geben , wie der Quellcode von HTML aussieht. Das ist also, denke ich, viel Glück. Wir sehen uns in der nächsten Klasse. 3. So erstellst du deinen ersten HTML-Code: Lass uns gleich was Spaßiges machen. Ok? Wir werden jetzt unsere allererste HTML-Seite erstellen. Ich weiß, du kennst HTML nicht, aber mach dir keine Sorgen. Vertrau mir einfach. Das wird lustig, okay? Ich möchte, dass Sie zum Beispiel einen Ordner an einer beliebigen Stelle auf einem Computer erstellen . Ich bin in meinem Dokumentenordner, und ich werde einen neuen Ordner erstellen, und ich werde diesen Ordner HTML in Ordnung nennen. Und dann innerhalb dieses Ordners, werde ich eine neue Datei erstellen und Sie nimmt dokumentiert durch das Textdokument, und wir werden nur nennen, dass das neue Textdokument. Ich werde es jetzt öffnen. Innerhalb des Dokuments. Amüsante Notiz. Pad Sieh dir das an. Okay, ich werde das tun. Ich werde ein paar Klammern öffnen, wir werden H eins eingeben und dann werde ich willkommen sagen. Und dann werde ich wieder H eintippen. Aber jetzt, vor diesem H, der 2. 1, werde ich einen Ford-Schrägstrich hinzufügen, okay, und dann eine neue Linie. Ich werde etwas Ähnliches machen, aber dieses Mal wird es ein P. und dann werde ich sagen, mein Name ist Billie Jean. In Ordnung. Und dann werde ich es schließen, wie mit einem Kauen auf einem Schrägstrich und dann ap Verstehst du das? Okay, jetzt werde ich voran gehen und die Akte treffen, und ich werde den Hintern retten. Alle Akten. Aber jetzt der Name. Ich werde den Namen zu billy dot h t m l ändern Alles klar. Ich werde jetzt voran gehen und sparen. Und jetzt innerhalb dieses Ordners, sollten Sie Billy sehen, dass HTML einfach doppelklicken Sie darauf. Und du gehst. Ich benutze den PC. Also standardmäßig, Internet Internet Explorer ist meine Standardfähigkeiten sind, so dass es öffnen Sie es und Internet Explorer, und wie Sie es jetzt betrachten, es speichert. Willkommen. Mein Name ist Billy Jean. Hoffentlich haben Sie ähnliche Ergebnisse. Und wenn Sie Glückwünsche gemacht haben. Geben Sie tatsächlich nur innerhalb Ihres ersten Stückes offic ähnlichen Code 4. Klacken installieren: für den Rest dieses Kurses werden wir mit einem Text und ihm gehen oder unseren Code beleuchten und bearbeiten. Und jetzt gibt es da draußen einen ganzen Haufen Texas. Aber die eine alte Empfehlung wäre Klammern aus zu vielen Gründen. Eine ist die Tatsache, dass es kostenlos ist, und zweitens ist die Tatsache, dass es speziell voller HTML- und CSS-Code gebaut wurde. Und oh, es ist auch kompatibel mit Boat Ah, PCs und Macs. Es ist also eine gute Wahl. Es ist schon bequem zu Fuß mit einer anderen Art von Text, den ich sie genommen habe. jeden Fall können Sie mit einem Texteditor bleiben. Es wird dir gut gehen, aber ich werde mit Klammern gehen. Gehen Sie einfach nach Pakistan I o. und klicken Sie einfach auf die blauen Bolton, die sagen Download-Klammern. Jetzt ist die eigentliche Installation von Datensätzen ziemlich unkompliziert. Auf der allerersten Seite können Sie so etwas sehen, dass Sie einfach auf diese beiden Kästchen überprüfen, die Klammern auf den Pfad für kommen online und dann auch zu erkunden hinzufügen . Sie können das auch überprüfen . Sie brauchen nicht, dass das normalerweise als nächstes aufrufen und auf installieren klicken, und das ist ziemlich viel es Also wollen Sie diese Nachricht? Hey, weißt du, dass du zulassen willst, dass es Änderungen vornimmt? Ja, um einfach voranzugehen und zu klicken. Ja. Und, ähm, das ist ah, im Grunde sehr, sehr unkompliziert. Nichts Kompliziertes. Sollte nicht zu lange dauern, um Klammern zu installieren. Und ah, ich warte nur auf ein paar, okay? Ich werde das Video pausieren und alle wieder aufnehmen, sobald die Lösung abgeschlossen ist. In Ordnung? Sobald Sie also mit gestohlenen Klammern fertig sind und Sie es lernen, wird dies die erste Seite sein, die Sie sehen würden. Sie werden auf den Screenshots sehen, die Sie möglicherweise Index dot html mit einigen Beispiel-HTML-Code sehen. Und Sie werden auch eine andere Datei unser Hauptpunkt CSS sehen. Also, das war viel es für die Installation von Klammern. Deutsch Avonex Video Bär wird nicht anfangen, HTML in viel tiefer Detail zu erkunden. 5. HTML-Tags und Elemente: Alles klar, also lasst uns mit der Kernstruktur eines HTML-Seiten-Immigranten beginnen. Verwenden Sie die Indexpunkt-HTML-Seite, die mit der Installation von Klammern kommt. Jetzt können Sie sehen, dass dies ein sehr langes Dokument ist, aber lassen Sie uns einen genaueren Blick darauf werfen, was genau wir hier haben. Werfen wir einen Blick auf diesen speziellen Abschnitt, der sagen ist, was diese Klammern hier in, Sie können sehen, dass wir P Recht haben. Und dann haben wir auch ein schließendes P. Das P hier ist, was wir als Tag bezeichnen. Grundsätzlich ist alles, was Sie auf dieser Seite sehen, die eine öffnende und schließende Klammer hat, ein Tag. So wären Beispiele wie das head-Tag, das Meta-Tag body Tag, H ein Tag P e M H drei Samp und so weiter. Das sind Tags. Tags werden in den meisten Fällen verwendet, um eine bestimmte Art von Inhalt zu identifizieren. So, zum Beispiel, das P hier steht für Absatz, so bleibt es, richtig. All diesen Text, den sie verwenden, hier willkommen in Klammern sind moderne Open Source genannt ein wenig. All das Zeug ist ein Absatz. Das ist, was das P-Tag voll aller hier verwendet wird, wo Sie haben, wie ein H die H-Tanse für eine Überschrift. Also ist H eins im Grunde eine Überschrift, und es bleibt immer mit Klammern besetzt. Also diese Tag dieses h man identifiziert diesen Text als Überschrift, genau wie mit H zwei identifizieren Ah, dies ist Ihr Führer als eine andere Art von Überschrift und so weiter diese Tags. Nun, wenn Sie beim Öffnen haben, markieren Sie es schließendes Tag. Und natürlich, der Inhalt zwischen diesen Tags, das ist, wo wir Sie als Element passen. Also im Grunde älteste von Ihrem Senior I th, der mit schwarzen Köpfen besetzt wird und dann die schließende h eins alles, was ist, wo wir Sie als Element passen. Eine Sache, die ich erwähnen sollte, bevor wir weitermachen, ist, dass jede Bestellung, die meisten Tags eine Öffnung und eine Schließung haben. Nicht alle, aber die überwältigende Mehrheit. Okay, deshalb siehst du hier einen. Und dann sehen Sie die Kleidung und einen Trim mit dem Vorwärtsschrägstrich GHT mit dem Ford Schrägstrich H zwei, um es das gleiche mit dem P als auch zu schließen, die e m und jemand. Das ist also nur eine sehr wichtige Sache, die Sie über Tags wissen sollten. Die meisten von ihnen haben die Öffnung und dann die Schließung. Und dann sind die Inhalte, die Sie zwischen diesen Tags und Angriffen selbst haben das, was wir Ihnen als Element passen. Jetzt können Sie auch Elemente im Inneren haben, oft Element. Das beste Beispiel hier wäre das body-Tag. Der Körperblick auf diesen Weg führt dich. Sie können sehen, dass wir diese Leichenmarke haben, oder? Klicken Sie niemals darauf. Man kann sagen, es ist in grün hervorgehoben Nachbarn abkühlen. Werfen Sie einen Blick auf, wo es schließt. Denken Sie daran, dass jedes öffnende Tag eine Schließung haben muss, und Sie können es direkt hier unten sehen. Hier schließt sich das body-Tag, und Sie können sehen, wie viele Informationen wie viele Tags und Elemente sich innerhalb dieses body-Tags befinden . Das ist alles viel. Also, nur um Sie noch einmal wissen zu lassen, kann ein Element Elemente darin enthalten. Tags werden verwendet, um Datenbits zu identifizieren, ob es sich um ein Bild, einen Text oder versteckte usw. handelt, und dann werden Ihre Tags, die meisten von ihnen haben immer ihre Schließung, so dass Sie ein H ein Tag haben können und dann die Schließen eines Tron-Tags und so weiter. Also, das ist im Grunde essen für die Gerichtsstruktur von einer HTML-Seite. Danke, dass Sie zugesehen haben. Wir sehen uns in der nächsten Klasse. 6. HTML-Eigenschaften: Gehen wir jetzt weiter, um über HTML-Attribute zu sprechen. Jetzt werden Attribute verwendet, um zusätzliche Informationen über ein bestimmtes Tag bereitzustellen. Also als Beispiel, lassen Sie uns den ganzen Weg nach unten gehen und dann, wo Sie diese ein Tag mit den H ref Attributen haben . Grundsätzlich wird das A-Tag verwendet, um einen Link zu identifizieren, der Sie auf den A Treff klicken können. Hier sind die Attribute aus dem A-Tag, die uns die Quelle aus dem Link mitteilen. Also im Grunde, wenn Sie auf diesen Link klicken, wo gehen Sie zum H wo bietet diese Informationen Jetzt, auf dem neuen das A-Tag, Sie haben die i m g tack. Das I m g wird verwendet, um ein Bild darzustellen. Richtig? Und jetzt hier drin haben Sie unsere Hommage das A lt Attribut, das ist der alternative Text. Also im Grunde, die lt Attribute ein noch in denen ein Stein Der Browser, dass hey, der alternative Text für dieses Bild ist ein Bildschirm kurz zeigt CSS schnelle Bearbeitung Kann Sie jemals einen Grundkurs auf S e O genommen haben ? Sie werden Ihnen immer sagen, dass Hey, um Ihre Bilder zu optimieren, Sie wollen sicherstellen, dass sie alternative Texte haben. Dies ist, wie Sie das alte Zelt von Sex für ein Bild mit HTML hinzufügen würden und dann in hier haben Sie auch die s. Ich werde sehen. Attribut SRC Stents für die Quelle, im Grunde sagen diese. Okay, das ist die Quelle des Bildes. Hier finden Sie dieses spezielle Bild. Also, das ist es für Attribute. Sie stellen im Grunde zusätzliche Informationen über ein Tag zur Verfügung. Du hast einen ganzen Haufen von ihnen da draußen. Sie haben Attribute, die uns comptel sagen, den Stil, der anrufen oder das Versteck mit und so weiter und so weiter von verschiedenen Arten von Technologie. Das war's also. Vollständige Attribute. Wir sehen uns in der nächsten Klasse. 7. HTML: Jetzt, da wir über HTML-Tags und Attribute erfahren haben, ist es an der Zeit, unsere Hände schmutzig zu machen, indem wir unser erstes offizielles Stück Code schreiben. Und um dies zu tun, werde ich über zwei Klammern gehen und dann zur Datei gehen und dann auf neu klicken, um in einer neuen Datei zu öffnen . Das erste ist, bevor wir heute Abend anfangen können. Es ist ein ähnlicher Code. Wir müssen unser Dokument als jedes Team einreichen wird identifizieren. Und um dies zu tun, haben wir das öffnende Tag und dann haben wir die Post Trog und dann in Kapsel wir haben DOC-Typ und dann Raum, , und dann html. Dies identifiziert diese Datei im Grunde nur als HTML-Dokument. Es ist im Grunde gut für Browser, im Grunde gut für Browser, richtig. Und dann wird als nächstes das HTML-Tag selbst sein. Offiziell jetzt identifizieren und sagen, Hey, das ist in jeder einzelnen Datei, und jetzt innerhalb dieses Systems wird Datei. Ich werde auf der Tastatur die Tabulatortaste drücken, um das anzuzeigen. Okay, jetzt haben wir ein Element innerhalb des HTML-Tags. Okay, dieses Element wird das Körper-Tag sein. Der Bootsangriff wird normalerweise verwendet, um Inhalte zu identifizieren, die im Browser angezeigt werden . Also Bilder oder die Dateien Video Zeug wie das alles, was auf ihre Körper Tag fallen sollte. Grundsätzlich alles in Ihrem Body-Tag im Browser angezeigt. Also, weil das body-Tag und jetzt wieder eine weitere Registerkarte. Und lassen Sie uns den Eierstock zuerst H ein Tag jeden hinzufügen, und ich werde sagen, das ist sehr, sehr groß. Ich werde das H ein Tag schließen. Lass uns wieder etwas ganz Ähnliches machen. Wir haben auch Hte . Das ist sehr groß. Was machen wir? Wir haben die Kante geschlossen, um zu markieren. Kommen wir runter. Seine drei Tag jetzt und sehen, das ist groß. Schließen wir das HDB-Tag, und dann können wir für H fünf gehen. Aber komm einfach auf sechs Jahre und ich kann sagen, das ist klein. Das sind, was wir dich als Header ärgern. In Ordnung, also haben wir 81 h zwei h drei und dann h sechs. Ich werde jetzt voran gehen und das Körper-Tag schließen. In Ordnung? Und dann schließlich das HTML-Tag geschlossen. So strukturieren Sie mit HTML aufgerufen. Stellen Sie sicher, dass Sie in dent Elemente, die unter ein bestimmtes Element fallen. Alles klar, ich werde jetzt voran gehen und Datei drücken, Hintern retten und nennen wir seinen Kopf in Punkt html Klicken Sie auf Speichern und da gehst du. Ich werde jetzt voran gehen und den Ordner öffnen, der den XML DoubleClick überträgt . Und da gehst du. Jetzt können Sie die Ausgabe sehen. Das ist sehr, sehr groß. Das ist H ein h zwei h drei und dann sechs Jahre alt. Also die Überschriften sind wichtig, weil sie dem Broza sagen, wie ein bestimmtes Stück Inhalt jetzt angezeigt werden soll, weil wir gesagt haben, dass dies sehr, sehr groß fällt unter ein H ein Tag. Der Bruder weiß das. Ok. Und die meisten zeigen diesen bestimmten Text mit sehr großen Größen, weil es ein h one Tag ist. Und es ist auch wichtig, weil für Ihre S e O, wann immer Sie versuchen, unsere Seiten oder Beiträge für solche Motoren zu optimieren, Sie wollen einen Kopf Instruktoren haben. Sie haben h eins ganz oben und dann unter einem 20 Canavan H zwei und dann NH drei und so weiter. So ist dies auch wichtig für S e O. Aber neben dem Kopf als sechs von ihnen, H eins bis H sechs. Wir haben auch das P-Tag, das verwendet wird, um Absatz zu identifizieren. Also zwischen H drei und H sechs werde ich ein P-Tag öffnen und ich werde sagen, dass das in einem geschlossenen API-Tag normal ist . Und jetzt gehen wir weiter und speichern Sie die Datei. Geh zurück zu meinen Glocken. Ah, lasst uns die Seite auffrischen und los geht's. Jetzt können Sie das P-Tag in Aktion sehen. Das ist normal. Normalerweise neigt das P-Tag in Bezug auf die Größe dazu, fallen zu lassen. Es ist normalerweise etwas kleiner als ein H drei Tag, aber größer als ein H vier h fünf oder H sechs Tag. Das ist also voll. Die Überschrift Tags, sowie die Absatz-Tags Veber nützlich ful sind die Anzeige von Überschriften sowie, ah, normalen Text. Normaler Text wird die P-Tags sein. Und natürlich, Ihre Überschriften wären Ihre H Warnungen. Alter tun ist und so weiter und so weiter. Das ist also ein deutsches Avonex Video. Bell wird weiterhin HTML-Code beleuchten 8. Hyper-Links: bereits, wir haben über Überschriften und P-Tags gesprochen. wir nun einen Blick auf das A-Tag, das zur Identifizierung von Links verwendet wird. In Ordnung, also lasst uns das machen. Ich werde eine neue Zeile nach dem Alter sechs Tag öffnen, und ich werde sagen, ein, das ist der Link-Tag und dann die Attribute eines treff gleich und dann in Mänteln und gehen, um die U. R L für die Website hinzuzufügen . Also das ist Doppelpunkt vier Schrägstrich vier Schrägstrich w W, dass der Web Affe online dot com und jetzt der eigentliche Text, auf den die Leute klicken. Ich werde sagen, Visit my blawg und dann können wir ein Tag schließen und da gehst du. Jetzt können Sie sehen, was wir hier gemacht haben. Wir haben ein Tag, das den Link und dann die a treff darstellt, die die Quelle in Mänteln ist. Und dann schließen wir das. Und dann sagten wir: Besuche mein Blut, das wird der eigentliche Text sein, und dann schließen wir das A-Tag. Lasst uns jetzt voran gehen und das retten. Gehen wir rüber zu meinem Browser. Lassen Sie uns voran und aktualisieren Sie die Seite, und jetzt können Sie sehen, dass sie dort besuchen meine blawg Wenn ich jetzt voran gehe und auf den Link klicke , können Sie sehen, dass es dauert direkt zu meinem blawg. Und genau so funktionieren Links mit HTML. Aber jetzt, da wir über Links sprechen, zeige ich dir etwas. Ich hab 'ne kühle. Ok. Sehen Sie, als wir auf diesen Link schnell hier geklickt haben, hat es uns auf die Website gebracht. Aber dann hat es den neuen Link nicht in einem neuen Tab geöffnet. Wenn du das machst, wollen wir, dass das der Fall ist. Ok? Wir wollen nicht, dass diese neue Verärgerung die Macht übernimmt. Ah, die Leute, die wir hier haben. Wie erhalten wir Links, um in neuen Fenstern oder neuen Tabs zu öffnen? Gehen wir zurück zu unserem Code. Und dann, wo wir die h ref haben. In Ordnung, ich werde einen Raum schaffen, okay? Ich füge noch weitere Attribute hinzu. Und das wird das Ziel gleich sein. Und jetzt können Sie die Option der Rechte hier aus leer auf der Schule und dann leer sehen. Dies ist das Attribut, das uns sagt, dass Hey, wenn Sie auf diesen Link klicken, der bläst, es wird sich in einem neuen Tab öffnen. Schauen wir es uns mal an. Lasst uns jetzt weitermachen und er rettet. Gehen wir zurück zum Browser. Wir sind frisch. Und jetzt passiert das, wenn ich auf den Link klicke. Da gehst du hin. Es wurde in einer neuen Registerkarte geöffnet, und genau so funktionieren Hyperlinks in HTML. Jetzt. Wir könnten auch interne Links haben. Das wird einfach ah, eine Seite mit einer anderen Seite verknüpfen , oder sogar Fälle, in denen wir das haben, was wir die Knöchelflügel nennen, wo, wenn Sie auf den Link klicken, Sie nicht zu einer anderen Seite führen, eine andere Web-Stable, die es Sie bringen könnte. Ein weiterer Abschnitt innerhalb dieser genau gleichen Seite wird einen Blick darauf werfen, dass ein wenig später im Kurs. Aber das ist es für Hyperlinks. Danke, dass Sie zugesehen haben. Wir sehen uns in der nächsten Klasse. 9. Bilder und Dateipfade: Lassen Sie mich Ihnen zeigen, wie Sie Bilder zu Ihrer HTML-Datei hinzufügen können. Aber bevor wir dies tun, möchte ich, dass Sie mir einen Gefallen tun, gehen Sie zu Ihrem aktuellen HTML-Ordner und fügen Sie dann ein Bild hinzu. Also das gibt jetzt. Zum Beispiel habe ich die XML-Punkt-PNG-Datei und dann in Ihrem Schätzordner, erstellen Sie einen anderen Ordner namens Images. Und dann fügen Sie anstelle des Image-Ordners ein Bild hinzu. Also habe ich in meinem Fall gerade diese Art. Es wird PNG-Datei und dann im HTML-Ordner, habe ich die HCM-Halter PNG-Datei. Übrigens, Ihre Bilder müssen keine PNG-Dateien sein. Es könnte auch J. Peg sein . Es spielt keine Rolle. Alles klar , wie zeigen wir den Typen an? Nun, ich gehe rüber zu meinen Klammern Lehrbuch-Text, Ed, es wird. Und jetzt lassen Sie uns das Bild-Tag nur auf dem raffinierten A-Tag hinzufügen. Und dann werde ich sagen, S r C gleich und dann werde ich die HTML-dunkle PNG-Datei hinzufügen, okay, okay, und dann Leerzeichen und dann vier Schrägstrich Dies ist, wie Sie das Bild-Tag schließen würden, so dass Sie nichts wie offene Klammer vier Schrägstrich haben und dann Ich bin GNN schließende Klammer. Nein, diese Weise würden Sie das Bild-Tag schließen. Wir haben auch das Quellattribut verwendet, um die Quelle der Jungs anzugeben. Du kannst es jetzt sehen, also lass uns jetzt vorgehen und das speichern. Ich gehe über Internet Explorer bezieht sich auf die Seite, und da gehst du. Jetzt haben wir unser Bild angezeigt. Aber wie zeigen wir dann das zweite Bild an, das die Skynet-Punkt-PNG-Datei sein wird? Nun, wenn wir zurück zu den Taschen Text Eddie Tool, öffnen wir eine andere Zeile und dann sagen wir AMG SRC gleich und dann Mäntel, Sagen wir, in Capital Salat Art es Punkt p und G und dann Raum. Und dann schließen wir das, und dann komme ich hierher und sage: Save, Save, mal sehen, was passieren wird. Ich gehe zurück nach Explora. Lassen Sie uns auf Seite und nun, wie Sie jetzt sehen können, wird nichts angezeigt. In der Tat haben wir hier einen Hinweis darauf, dass hey, etwas, das ausgebildet ist, zu zeigen, aber etwas ist nicht ganz leicht. Also, was genau ist hier los? wird. Er war das Problem. Okay, wenn wir vergleichen. Ach, die beiden Bilder. Skynet von PNG befindet sich in einem Ordner namens Images, während HTML das PNG innerhalb des Stammordners ist. Alles klar? Und denken Sie auch daran, dass das Dokument kalt ist. Überschrift Gedanken HTM. Oh, das ist die eigentliche Akte. Wurden den den Weg, den er die HTML jetzt überführt, weil das Bild extern, die PNG und der Kopf in der hmm-Datei sind innerhalb der gleichen vollen Hund Uhren verlängern Mel. Wir können einfach einfach direkt die Soße vom Bild hinzufügen. Da sich das zweite Bild jedoch in einem anderen Ordner befindet, verglichen mit dem Kopf in der HTML-Datei, müssen wir den Ordner angeben, in dem sich der Ordner befindet. Also, im Grunde müssen wir jetzt hier reinkommen und Bilder sagen. Oh, tut mir leid. Lass uns hier wieder rein gehen. Wir sagen Bilder und dann vier Schrägstrich-Skynet. Phil, PNG. Nun, dies ist der Pfad, um diese Kanada-PNG-Datei anzuzeigen. Zuerst gehen wir zu ihm in einen Ordner namens Images. Und dann statt der Bilder Ordner finden Sie eine Datei namens Skynet Got PNG. Wann immer ich weitermachen kann, speichern Sie die Datei. Gehen wir zurück zum Explorer. Aktualisieren Sie die Seite. Und da gehst du hin. Jetzt haben wir das Bild, das diese Platte ist. So können Sie genau so Bilder anzeigen, aber auch ein kleines Hören und Dateipfade, wenn Sie versuchen, ein Bild oder etwas anderes hinzuzufügen . Solange sich diese Datei innerhalb des gleichen Ordners befindet, wie die Hauptdokumente in diesem Fall das XML überschreiben, oder wir können einfach den Namen aus dieser Datei eingeben. Aber wenn die, wenn die Datei in einem anderen Ordner ist, müssen Sie angeben, dass für den ersten und dann vier Schrägstrich und dann den Namen aus dieser Datei So das ist, wie Sie Bilder anzeigen können. Aber bevor ich gehe, können wir auch den alten vorläufigen Text hinzufügen. Vergiss das nicht. Also ich m g s r c, dass wir dann auch hier kommen und sagen, l t gleich. Und dann in Mänteln sagen wir HTML Datei Logo und dann auch hier drin können wir genau das gleiche tun und dann sagen, dass Lt gleich ist und dann Mäntel Himmel Net Logo, Zeug wie das, so dass wir einfach speichern können, und ah, das ist ziemlich viel es. Also, da gehst du hin. So fügen Sie Bilder zu Ihrem HTML-Dokument hinzu 10. Aufgabe 1: schon. Es ist Zeit für Ihren allerersten Auftrag, und was ich möchte, dass Sie tun, ist ziemlich einfach. Bisher haben Sie gelernt, wie Sie Hyperlinks mit dem A-Tag hinzufügen. Sie haben auch gelernt, wie Sie Bilder mit dem I M G Tag wie hinzufügen. Aber was ich in dieser Aufgabe tun wollte, wurde verwendet, um herauszufinden, wie Sie eines Ihrer Bilder anklickbar machen können , so dass, wenn jemand auf dieses Bild klickt, es wird sie zu einem neuen Aufruhr als Beispiel bringen. Hier drin, mein HTML Fünf Logo. Wenn ich auf das Bild klicke, bringt es mich direkt zum Web Monkey Online, Doc home. Also, anderen Worten, ich habe ein anklickbares Bild, das einen Link zum Affen Lendl Calm hat. Außerdem der Link auch in einer neuen Registerkarte geöffnet. Also möchte ich, dass Sie versuchen, darüber nachzudenken, einen Weg herauszufinden, wie Sie ein Bild mit HTML anklickbar machen können und auch sicherstellen, dass, wenn darauf geklickt wird, es sich in einem neuen Browser öffnet . Viel Glück 11. Aufgabe 1 Lösung: Hoffentlich waren Sie in der Lage, die Kais zu lösen. Und wenn Sie es taten, herzlichen Glückwunsch. Aber wenn du dir keine Sorgen machst. Ich werde Ihnen zeigen, wie Sie ein anklickbares Bild mit HTML erstellen können. In Ordnung, lassen Sie mich weitermachen. Zuallererst, und wir zuerst diese Seite. Und wie Sie jetzt sehen können, ist das Logo nicht anklickbar. Also, wie lösen wir das? Nun, wir gehen zurück zu allen Klammern. Das ist die Akte. Das Bild, das wir anklickbar machen wollen die html dopey n G final. Also werde ich eine neue Zeile erstellen. Und was ich tun werde, ist das. Wir wissen, dass das A-Tag verwendet wird, um 18 Links zu erstellen, oder? Also lassen Sie uns voran und fügen Sie das A-Tag hinzu. Lassen Sie uns den Link hinzufügen, zu dem es uns führen wird. Und das ist natürlich. Ah, https, Doppelpunkt Ford Schrägstrich w w Punkt uh, der Web-Affe auf Linie Punkt com Denken Sie daran, es soll sich in einem neuen Tab öffnen, so dass wir die Zielattribute als auch hinzufügen. Fügen wir hinzu, dass man leer genannt wurde. Okay, jetzt brauchen wir keinen Text. Wir brauchen nur, dass das Bild anklickbar ist. Also, was, wir werden tun, ist sehr einfach. Ich werde hier drinnen etwas Platz aufgeben. Das A-Tag wurde geöffnet, Wie Sie sehen können, rechts, Wir werden das Bild innerhalb der A-Steuer einschließen. Also werden wir ein Ende hinzufügen und hier zeigen, dass dieses Bild unter dem A-Tag steht. Und ganz einfach, wir werden jetzt einfach weitermachen und das A Tag schließen. Lassen Sie mich das richtig machen. Und da gehst du mit gerade beendet sind anklickbares Bild. Lasst uns jetzt voran gehen und das retten. Ich gehe zurück zum Explorer. Aber zuerst eine Seite. Und jetzt, wenn ich auf das Logo klicke, öffnet es das Bett Affe online dot com. Genau so können Sie mit HTML ein anklickbares Bild erstellen. 12. HTML-Listen: Lassen Sie uns darüber sprechen, wie Sie Listen Jahre in HTML erstellen und Listen sind ziemlich viel ein großes Unternehmen über viele Websites. Und als Beispiel, hier drüben auf dieser Dummy-XML-Seite hier unten, können Sie sehen, dass wir tun. Sie haben eine Liste von einem Luchs-Eimer, die ich Eimer schulde. Team Blawg Eimer auf. Gute Nabe. Das ist eine Liste. Warte hier. Und es ist im Grunde eine auf geordnete Liste und geordnete Listen. Auf der anderen Seite hätten Sie 123456 vielleicht A B C D. hätten Sie 123456 vielleicht A B C D. Wie können wir also acht Listen mit HTML? Nun, es ist sehr einfach. Gehen wir zu unseren Klammern, schreiben Sie ein Werkzeug und dann, was ich tun werde, ist, lassen Sie mich einfach voran und entfernen Sie das zweite Bild. Das brauchen wir nicht. Also, gerade unter dem a Tag hier, werde ich mich in einem neuen Tag öffnen und ich werde diese u L nennen. Dies stellt eine geordnete Liste dar. Wenn es eine geordnete Liste geben wird, würde o l verwenden. Aber sieh dir das an. Okay? Ich werde eine neue Zeile öffnen und dann rückgängig machen, wenn ich nicht auflisten werde. Die tatsächlichen Elemente sind unter dem auf der Liste. Die 1. 1 wird also l I sein. Das repräsentiert das erste Mitglied von dieser Liste. Rufen wir diesen Apfel an, damit wir anrufen können. Es kann eine Liste unserer Lebensmittel sein. Vielleicht, damit wir das schließen können. Öffnen wir eine weitere Zeile und fügen wir eine weitere Frucht hinzu. Ich und das wird orange sein. Da gehst du. Und dann lassen Sie uns noch einen hinzufügen und, ah, welchen Fuß? Sicher haften Sie Guava. Ich bin sicher, dass du nie darüber nachgedacht hast, okay? Und schließlich werden wir auf der Bestellliste schließen. Und da gehst du. So würden Sie eine auf geordnete Liste erstellen. Zuerst eröffnest du dich mit dem U L. und dann die eigentlichen Listenelemente selbst. Du wirst das l ein Tag haben und dann schließen. Ellen Tags dazwischen. Jedes Listenelement jetzt, eine geordnete Liste, wie ich schon sagte, ist ziemlich fast das gleiche. Ich kopiere diesen Block einfach wie Klickkopie, und ich werde bezahlen. Setzen Sie sich hier hin. Der Unterschied Dill ist, dass anstelle von dir l es o L sein wird. Dies wird eine geordnete Liste darstellen, und du bist gut, den Unterschied jetzt zu sehen. Ich schaffe hier nur etwas Platz. Okay, lassen Sie uns voran und speichern Sie das und ich gehe zurück zu HTML Document waren zuerst eine Seite und jetzt können Sie auf anderen Liste sehen Apple, orange Glover und dann die geordnete Liste von Apple, Orange und Glover. So können Sie auf geordnete und geordnete Listen erstellen. Verwendung von HTML ein anderes als schwächen tun mit Listen besteht darin, die Standardsymbole, die die Listenelemente darstellen, zu ändern . Nun, standardmäßig in hier, können Sie sehen, dass die auf bestellte Mietvertrag hat, wie der Kreis den schwarzen Kreis repräsentiert H Listenelement und dann die Bestelllisten Bigelow 123 Sie können dies tatsächlich ändern. Und wir können dies ändern, indem wir etwas, das als Stil Eigenschaft bekannt ist, wird über Eigenschaften sehr, sehr bald sprechen Eigenschaften sehr, . Aber überprüfe diesen Anwalt, wo du dich hast. Nun, ich werde etwas Platz hinzufügen, und ich werde sagen, Stil ist gleich. Und dann in Mänteln, werde ich sagen, Liste und dann können Sie sehen, die Eigenschaft bewertet die am wenigsten Stil Typ. Welche Art von Typ aus der Liste. Ich kann nicht in unsere Anzeige hier gehen, jetzt können Sie mehrere Werte sehen, die Ihnen zur Verfügung gestellt werden. jedoch versuchen, Lassen Sie unsjedoch versuchen,mit Square als Beispiel zu gehen, oder? Und dann, am Ende des Quadrats, werde ich einen Semikolon hinzufügen. Alles klar, lassen Sie uns das retten. Und nun gehen wir zurück, um zuerst die Seite zu erkunden. Und jetzt können Sie sehen, dass die ICANN von den dunklen Kreisen zwei Quadrate geändert hat. So können Sie den Standard ändern. Ich könnte in den geringsten Artikeln für unsere eigenen oder jene Listen vertreten. Und wie Sie hier sehen können, haben wir Zugang zu allen Vela. Neben dem Platz, Sagen wir, zum Beispiel, was haben wir sonst noch hier drin? Wir haben auch die Scheibe für Sache. Datenträger ist die Standardeinstellung. Versuchen wir es mit Disk. Lass uns das retten. Lass uns mit Scheibe gehen. Mal sehen, wie das mit frischem auftauchen würde. Okay, so können Sie sehen, dass dies in der Tat ist, der Standard, weil manchmal einige Browser, aber interpretieren, ein wenig anders diskutieren. Also für die Erkundung der Festplatte ist der Standard. Aber wir haben noch einen. Wir können mit gehen, was unser Kreis ist, sagt Go. Es ist Kreis und mal sehen, wie das sicher aussehen würde. Es ist hier zuerst eine Seite und OK, also im Grunde Kreis und Disco genau von der gleichen Sache mit erkunden. Wenn Sie einen anderen Browser verwenden, sagen wir Chrome oder Safari, haben Sie möglicherweise etwas andere Ergebnisse, die jetzt zurückgehen. Wir haben auch eine Möglichkeit, die Standardsymbole für zu ändern oder diese Liste wurde viel sein wird . Die exakt gleiche Methode wird unseren Stil sagen und dann gleich sein. Und dann in Mänteln, schwächen Siehe ah Liste Stil Typ genau dort. Und er betrachtete anders. Velas armenische Dezimalscheibe Georgisch. Ach, mal sehen, wir haben kein niedrigeres Griechisch. Lass uns mit niederem Griechisch gehen und sehen, wie das aussieht. Lassen Sie uns sind Semikolon am Ende und dann können wir speichern Lassen Sie uns gehen zu Explorer-Refresh Und jetzt können Sie sehen, wir haben jetzt die unteren Griechen sind Ziffern, die unsere Bestellliste repräsentieren. So können Sie die Standardsymbole ändern, die die auf geordnete und geordnete kleinste Elemente darstellen , die nicht in erwähnt werden, bevor wir dies aufrunden, ist, dass Sie auch Listen innerhalb einer Liste erstellen können . Also im Grunde verschachtelte Liste Das ist auch über Fred . So, das war's. Zum Beispiel, wo Sie Orange in der Liste auf geordneter Liste haben. Lassen Sie uns, dass sie eine andere Liste innerhalb von Orange erstellen wollen, die wir hier tun werden. Ist das hier. Fügen Sie einfach hinzu, und in dichten repräsentiert die neue Liste und dann wird Sie sein. L wieder und dann innerhalb der U gut, aber nicht gehen, um die verschachtelte Liste hinzuzufügen. Also lassen Sie uns sagen, zum Beispiel, bekam die roten oh Orangen nur als Beispiel, Warten Orangen. Und dann können wir auch eine Menge von anderen Zeiten von Orangen gibt es? Wir haben Gelb. Orange hat recht. Gelbe Orangen. Schließen wir das. Und dann schließlich werden wir die auf geordnete verschachtelte Liste schließen und dass Sie sie haben. Lasst uns jetzt weitermachen und das retten. Gehen wir zum Explorer. Aktualisieren Sie die Seite und gehen Sie. Jetzt können Sie sehen, dass wir haben und auf geordneter Liste innerhalb der ursprünglichen eine andere Liste. Und so können Sie verschachtelte Listen mit extremen El erstellen 13. HTML: Lassen Sie mich Ihnen nun die HTML-Stilattribute vorstellen. Und dies ist ein Attribut, mit dem Sie verschiedene Arten von Stilen zwei verschiedene Arten von Elementen hinzufügen können. Dass es eine allgemeine Formel dafür gibt, und das wäre der Tag-Name in Klammern. Und dann Stil, natürlich, gleich in Mänteln, die Eigenschaft aus dem Stil und dann der Wert von dieser Eigenschaft. Nun könnte ein sehr klassisches Beispiel sein, dass wir in einer Hintergrundfarbe zu unserem Körperelement. So wie Sie jetzt sehen können, haben wir Körper-Stil gleich Hintergrundfarbe Tasche auf Abruf hier ist die Eigenschaft und dann blau ist der Wert von dieser Eigenschaft. Dies ist, wie Sie den Stil ach setzen verwenden können, Lassen Sie uns es in die Tat umsetzen. Lassen Sie uns an der Hintergrundfarbe zu unserem Körperelement in unseren Klammern. SMS, es wird. Also hier drüben werde ich sagen, kurz nach dem Körperelement, werde ich sagen, Buddy-Stil gleich und dann in Mänteln muss das Property Festival hinzufügen, das die hintere Grundfarbe sein wird Festival hinzufügen, und dann Doppelpunkt, und Sie können die verschiedenen Arten von denen sehen, die wir haben. In der Tat, Lassen Sie uns mit Ah gehen, gehen Sie mit Burly würde als Beispiel, richtig, Und dann, am Ende der Entwicklung der Eigenschaft wird ein Semikolon hinzufügen. Und da gehst du hin. Gehen wir jetzt weiter und speichern Sie die Datei. Gehen zu gehen über Internet Explorer bezieht sich auf die Seite, und voila, genau wie das hatte die Hintergrundfarbe, ah, body tag. Nun, zusätzlich zu ändern in der Rückseite und Farben, off page oder website, gibt es andere Dinge, die wir auch tun können. Wir könnten auch hinzufügen, zum Beispiel, wie die Änderung, die Schriftfarbe für unseren Text, und das geht jetzt. Lassen Sie uns versuchen, die Schriftfarbe für das H ein-Tag zu ändern. Also, was ich tun werde, ist, dass ich ein Stil gleich ist. Und dann in Mänteln, werden wir die Kahlo Eigenschaft hinzufügen. Beachten Sie, dass das Festlegen von Eigenschaften nur für sitzende Arten von Elementen verfügbar sind. Zum Beispiel können Sie den ah-Hintergrund, den ich bin, nicht hinzufügen, so dass Sie den Aufruf alles hinzufügen können, was Sie die Farbe Eigenschaft mit, sagen wir, dem body-Tagverwenden können Eigenschaft mit, sagen wir, dem body-Tag . Es wird nicht funktionieren. Sie müssen stattdessen Hintergrundfarbe verwenden. In Ordnung, du kannst keinen Bagram-Culo auf einem Bild-Tag verwenden. Es wird nur keinen Sinn ergeben. Also in diesem Fall, für die H ein h zwei Jahre, wenn Sie die Farbe ändern möchten, muss der Text den Eigenschaftsabruf verwenden. Alles klar , in diesem Fall geben wir den Wert von Lassen Sie uns Ihr Rot als Beispiel sehen. In Ordnung, also haben wir die Farbe geändert, um sie zu lesen. Lasst uns jetzt voran gehen und das retten. Gehen wir zurück, Teoh Broza Preference die Seite. Und da gehen Sie, so können Sie sehen, die H jetzt ist in rot, Also das gleiche gilt für die anderen Text-Tags Ihre H ein Z H verwenden H 30 p Tag. Sie können die Farbe, die Spaß Farbe ändern, indem Sie einfach die Eigenschaft off color verwenden. Aber du könntest auch etwas anderes tun. Wir können eine andere Art von Stil hinzufügen, die wird der Text ausrichten in diesem Fall, Lassen Sie uns hier für das Alter von zwei kommen und sagen, Stil und dann werden wir sagen, gleich und dann in Mänteln. Gehen wir mit dem Text, unserer Linie Eigenschaft, und dann können wir sagen, zentrieren wie der Wert andere Wähler natürlich, würde von links nach rechts, rechtfertigen Dinge wie das. Lassen Sie uns voran und setzen Sie es in tatsächlich, um das zu retten. Gehen wir zurück zu dir. Perot's, äh, bezieht sich auf die Seite und da gehst du. Wir haben nun unseren H 2-Text in der Mitte unserer Seite ausgerichtet. Die verschiedenen Arten unserer Eigenschaften und ihre Werte dort ziemlich viel und viel hängt von dem Element oder dem Tag ab, auf das Sie sie tatsächlich anwenden. Bevor ich gehe, möchte ich Ihnen noch ein Beispiel geben. Bevor ich gehe, Lasst uns den A-Link hier anvisieren, der sagt, dass wir meinen Blawg besuchen. Was ich tun werde, ist, dass ich tatsächlich drei verschiedene Arten von Eigenschaften hinzufügen werde. Also zuerst werden wir den Standardwert in der Zeile entfernen. Wir werden die Farbe des Textes ändern, und wir werden auch den Text in Großbuchstaben umwandeln. Also lasst uns das machen. In Ordnung, ich gehe über zwei Klammern und ich habe das A-Tag genau hier. Also nach dem Ziel werde ich diese Stilattribute öffnen und dann gleich und dann in Mänteln, aufgelistet die 1. 1, um die Unterstreichung zu entfernen, wird Textdekorationseigenschaft sein, und dann wäre der Wert hier keine gesagt nein Dekorationen. Lasst uns im Semidarm. Die nächste Eigenschaft wäre, dass Text Transformation, und wir werden seine in Großbuchstaben Licht verwandeln. Und dann wäre der letzte hier nicht die Farbe. Und lassen Sie uns mit all seinen ein Grün als Beispiel gehen. Gipfelpunkt. So gehen Sie mit bearbeiten drei verschiedene Eigenschaften mit drei verschiedenen Werten. Lassen Sie uns voran gehen, Speichern und andere gehen zurück zum Explorer waren zuerst eine Seite. Und da gehen Sie nicht mehr auf die Linie Großbuchstaben von Etta und der Text ist jetzt grün, so dass Sie mehrere Eigenschaften und mehrere Werte für diese Eigenschaften zu einem hinzufügen können . Ah, ein einzelnes Element. Nun ist die Anzahl der Attribute und Tags, die wir bisher behandelt haben, nur ein sehr, sehr winziger Bruchteil der Gesamtzahl der Tags, und tatsächlich ist es mit HTML verfügbar. Jetzt werden wir später in diesem Kurs noch ein paar mehr davon abdecken. Aber wenn Sie daran interessiert sind, den östlichen Zugriff auf alle Tags zu erhalten, alle Attribute gut, können Sie zu HTML gehen, um vier Schrägstriche Attribute zu beruhigen, und dann können Sie hier alle möglichen Typen von Attributen sehen , die Sie anwenden können verschiedene Arten von Tags mit den Erklärungen neben ihnen. Es ist eine Menge, und dann können Sie auch zu ford Slash Tags gehen. Und hier sehen Sie alle Tags, die Sie mit HTML verwenden können. , Ich würde nicht empfehlen,dass du deine ganze Zeit damit verbringst, all das durchzugehen. Sie müssen nicht jede einzelne Aktion kennen, aber Sie müssen nicht jedes einzelne Tag kennen. Es ist so, als würden Sie versuchen, jedes einzelne Wort in einem bestimmten Sprache in,sagen wir, Englisch und Japanisch zu kennen sagen wir, . Sie wissen, dass Sie nicht jedes einzelne Wort kennen müssen, solange Sie die am häufigsten verwendeten Tags kennen und die verwendeten Attribute und dann die Eigenschaften und die Typen dieser Eigenschaften waren, die Sie anwenden können die verwendeten Attribute und dann die Eigenschaften und die Typen dieser Eigenschaften waren, die Sie anwenden können zu ihnen. Du wirst gut gehen. Plus, wenn Sie beginnen, über CSS zu lernen, werden Sie feststellen, sagen wir, es ist viel einfacher zu gehen und Styling-Änderungen an Ihren Elementen und mehr, wenn es um Stil geht, Stattdessen sind Sie viel besser dran, mehr Zeit zu investieren Live in CIA sagt als, ah HTML-Styling. Das war's also. Denken ist viel Glück ein Deutscher, sogar extra Israel wird jetzt einen Blick auf Text Voll matin. Dann seh ich dich. 14. Textformatierung: Willkommen zurück. Und ich hoffe wirklich, dass Sie den Kurs so weit genießen, dass wir ziemlich viel über HTML und Ah abgedeckt haben , lasst uns weitermachen. Im Moment werde ich Ihnen zeigen, wie Sie einige Formatierungsänderungen an Ihrem eigentlichen Text vornehmen können. Aber bevor wir das tun können, lassen Sie uns einen tatsächlichen Absatz mit einigen Zeilen hinzufügen. Also, um dies zu tun, werde ich rüber gehen, um zu lernen, ob ein Kerl, dem ich Einschränkungen schulde, im Grunde verwendet wird, um Dummy-Text zu generieren , der Entwickler nützliche Testzwecke verwendet. Also werde ich jetzt einfach weitermachen. Und das ist ein paar dieser Zeilen hier zu kopieren und einfach das zu kopieren und ich werde über zwei Klammern gehen. Lassen Sie uns unten ein neues Absatz-Tag öffnen. Genau hier, Pete. Tag. Fügen Sie das hinzu, und schließen Sie dann das p-Tag. Okay, wie können wir also Formatierungsänderungen an unserem eigentlichen Text vornehmen? Wir können dieses Talent eigentlich nicht verwenden , weil Attribute nur auf Tags anwendbar sind, richtig? Aber was wäre, wenn zum Beispiel wir zum Beispielein Konzept Schildkröte genau hier machen wollten, würde dieses besondere es mutig machen. Wie würden wir das tun? Was wir verwenden können sitzende Arten von Tags und speziell, um es fett zu machen. Wir werden ein Tag benutzen, das B-Tag genannt wird, was natürlich ich das kühne repräsentiert. Oh, Tag. Also werde ich hier rüber kommen und diese Steuer jetzt schließen. Der konstruierte Turm wird mutig sein. Lassen Sie uns ein weiteres Tag hinzufügen, um den Modus weiß zu verwenden. Hier. Lasst uns das kursiv machen. Okay, lassen Sie uns diesen Tag kursiv gestalten. Ich werde hier reinkommen. Lass uns das schließen. In der Tat, lassen Sie uns Mount Temple verwenden. Also zwei Worte. Lassen Sie uns diese beiden kursiv machen. Lassen Sie uns schließen, dass wir ein anderes Tag haben, das ist die Betonung Tag , das wird, natürlich, e m sein natürlich, e m sein aber nur werde die Tags hinzufügen und dann werden wir sehen, wie sie aussehen, wenn wir zuerst ein Seite kam hier nahe, dass wir auch einige andere zusätzliche Änderungen vornehmen können, wie Hinzufügen oder macht es in Arten von Text, sind tiefgestellt 11 hochgestellt. Also lasst uns diese SAPIEN hier machen. Lassen Sie uns das zu einem Super-Skript machen. Es wird S u P keine Sorge geben, Sie werden sehen, was diese tatsächlich tun Sie in nur einem Moment und nach dem S werde ich voran gehen und schließen, dass. Also haben wir die s in SAPIEN hochgestellt Ah gemacht, mal sehen, schicken Sie uns den Hals. Wir werden das letzte Mal hier machen. Ein tiefgestellt, so dass das S U B-Tag verwendet wird. Und dann ist das gleich da. Schließen Sie das. Oh, richtig. Und, äh Okay, lassen Sie uns jetzt vorgehen und das speichern. Also haben wir 12345 verschiedene Arten von Tags hinzugefügt. Gehen wir hier rüber zu dir Meine kurzen Glocken sind aufgefrischt Die Seite Lasst uns hier runterkommen. Und nun, da gehst du. Jetzt können Sie Constrictor sehen. Der Lehrer ist jetzt mutig. Ich benutze mein eigenes Temperament ist ein kursiver Magnat, der auch dem metallischen Stil sehr ähnlich ist . Aber und hier unten können Sie sagen p sehen und das s ist hochgestellt, was bedeutet, dass es oben geht und dann in Selektoren das S ein Substrat ist. Richman ist es geht runter. So können Sie unsere Formatierungsänderungen an bestimmten Kriegen vornehmen, sogar bestimmte Buchstaben mit Tags mit HTML. Nun, bevor ich gehe, gibt es eines des Tags, das dem fett Tag sehr ähnlich ist, und das wird die starke Steuer sein. Als Beispiel fügen wir das starke Tag zu ipsum hinzu. Alles klar, mache ein paar, äh, ich bin einfach hier rüber und entferne die 1. 1 Ok. Ich werde voran gehen und das retten. Ich komme zurück, um mich frisch zu mutigen. Jetzt können Sie sehen, Epsom ist auch jetzt fett. Aber eine Frage ist, was ist der Unterschied zwischen dem Bowl Tag und dem starken Tag? Wenn alles, was sie tun, ist eigentlich nur den Text fett zu machen? Nun, aus Sicht der Anzeige gibt es keinen Unterschied, weil beide fett sind. Hinter den Kulissen verbeugt sich jedoch auch legt mehr Wert auf Text mit dem starken Tag. Die starke Steuer sollte für Text verwendet werden, der sehr, sehr wichtig, sehrwichtig und mit einem Gefühl der Dringlichkeit ist sehr wichtig, sehr . Die Ball-Taggants, die verwendet wird, macht es einfach Art von nimmt mutig. Vielleicht ah, Name einer Person, Name eines Ortes, Zeug wie das. Und dann wird es auch wichtig, wenn Sie mit CSS arbeiten, denn mit CSS können Sie OK sagen, alle Elemente, alle Tags, alle Texte, was auch immer das starke Tag haben, machen sie rot, und dann alle Textauszeichnungen, die das Bull-Tag haben, machen ihre Michelob schwarz. Du könntest so etwas tun. Also am Ende des Tages, es ist nicht super wichtig. Esther, ob verwendet ein starkes Tag oder das Ball-Tag, aber für die Zwecke, es zu tun, die richtige Art und Weise verwendet ein Bowl Tag, wenn Sie nur wollen, um einen Text ein fett zu machen und dann, wenn Sie bestimmte Text die sehr, sehr enorme Bedeutung. Vielleicht wie ein Mantel oder so etwas, könnten Sie das starke Etikett für sie verwenden. Wir werden ein bisschen mehr darüber reden, während wir in CSS vorankommen. Aber das ist es für Text für Martin mit seinem verdammten Glück, ich werde dich in der nächsten Klasse sehen. 15. Block vs Inline-Elemente: Lassen Sie uns mit dem Kurs fortfahren, und jetzt lassen Sie uns über etwas sehr, sehr Wichtiges sprechen , und das wird das Konzept in Zeile und Blockelemente einfach in HTML sein. Sie haben in der Regel zwei Arten von verschiedenen Arten von Elementen. Sie haben die Blockelemente, und dann haben Sie, was wir die In-Line-Elemente jetzt nennen. Der Unterschied zwischen diesem ist auch, auch, dass die Blockelemente Elemente sind, die standardmäßig ihre eigenen separaten Zeilen besetzen würden. Als Beispiel. Hier können Sie sehen, dass, wenn wir die H ein Tags, die H zwei und H drei und sogar das P-Tag ausgeben , Sie sehen können, dass sie alle auf separaten Linien stehen. Das liegt daran, dass sie standardmäßig Blockelemente sind. So blockieren Sie Element, das Sie angezeigt haben. Es nimmt eine Zeile ein, so dass es auf sich allein in einer einzigen Zeile ist. Jedes andere Element, das danach kommt, wird es in die nächste Zeile drücken. Das nennen wir Blockelemente. Nun, Ellen Elemente genau im Gegenteil. Sie können beliebig viele Inland-Elemente auf derselben Linie hinzufügen. nun Wenn wirnunein wenig zu unserem Text zurückkehren, haben wir festgestellt, dass das H die P-Tags warnt und das alles. Das sind Blockelemente. jedoch Ihre England-Elemente wärenjedochdas A-Tag und die Bild-Tags. Also lasst es uns zum Beispiel hier drinnen. Warum habe ich die erste Verbindung. Ich werde voran gehen, und ich werde einfach den exakt gleichen Text kopieren. Und dann lassen Sie uns in Ulan erstellen und fügen Sie dann den gleichen Link wieder ein. Gehen wir jetzt und sicher. Das ist aktualisieren Sie die Seite. Und jetzt hier unten können Sie sehen, dass wir jetzt die Werkzeuge nebeneinander haben. Und das liegt daran, dass Tags natürlich in Zeilenelementen sind. Wenn Sie in h ein Tag auf einem John Element kopiert und Sie Tempo dieser direkt neben einem anderen H ein Element, Ich garantiere Ihnen, dass die 2. 1 wird in die nächste Zeile gehen. Auf diese Weise laufen Blockelemente standardmäßig. Jetzt können Sie die Art und Weise ändern, wie diese Elemente standardmäßig laufen. Zum Beispiel, wenn ich erzwingen wollte, sagen wir das erste ein Tag hier unten, um wie ein Blockelement zu handeln, ich kann das tatsächlich tun, und natürlich wird es eine Eigenschaft dafür geben Lassen Sie uns dies tun. Ok? Ich werde zum Stil gehen, und dann nach dem grünen Vela für das Farbattribut werde ich eine neue Eigenschaft hinzufügen und dass das, was die Anzeigeeigenschaft genannt wird, und dann wird der Wert Block sein. Alles klar, jetzt erzähle ich dem ersten Link den ersten Angriff, der als Blockelement fungiert. Lass uns das jetzt retten, es sei denn, es würde passieren. Ich werde die Seite jetzt aktualisieren, und da gehst du. Jetzt können Sie sehen, dass die erste ein Tag oben nach unten, oben, oben, hier oben,während die 2. 1 dort unten ist, so dass Sie in Linienelementen zwingen können, als Blockelemente zu fungieren . Und zufällig können Sie Blockelemente zwingen, sich wie England-Elemente zu verhalten. Anstatt also den Wert aus unserem Block für die Anzeigeeigenschaft zu verwenden, würden Sie in diesem Fall in Zeile verwenden. So wurde Ihnen das Konzept, Off-Block-Elemente und In-Line-Element vorgestellt . Dies wird sehr wichtig werden, wenn wir beginnen, in CIA-Sets einzutauchen. Aber für jetzt, was hast du getan? Du kennst den Unterschied zwischen diesen beiden. Wir sehen uns in der nächsten Klasse 16. Der Break: Ich möchte Ihre Aufmerksamkeit auf ein bestimmtes Tag lenken, das ich glaube, Sie würden sehr nützlich finden, wenn Sie beginnen, Verärgerungen mit HTML zu erstellen. Zuvor habe ich Ihnen gezeigt, wie Sie aylan-Elemente wie ein Tag zwingen können, sich wie ein Blockelement zu verhalten, indem Sie einfach die display-Eigenschaft verwenden und dann den Block rechts entwickeln. jedoch Es gibtjedocheine viel bessere Möglichkeit, die exakt gleichen Ergebnisse zu erzielen, ohne die display-Eigenschaft zu verwenden . Während Sie in diesem Fall jetzt tun können, lassen Sie mich einfach zeigen, dass ich voran gehen und entfernen Sie die Anzeigeeigenschaft. In Ordnung? Also, wenn ich die 1. 8 erzwingen möchte, kümmere ich mich darum, wie ein Blockelement zu handeln. Was ich tun kann, ist eine neue Zeile zu erstellen, und dann werde ich das Tag hinzufügen, sind und im Raum und dann vier Schrägstriche Dies ist im Grunde ein Break-Tag. Es sagt HTML, dass hey, Erstellen einer neuen Zeile für den Inhalt, der folgen soll. Das ist im Grunde das, was dieses Tag tut. Lasst uns jetzt weitermachen und sparen. Gehen wir zurück, Teoh meine kurzen Profile, die die Seite aktualisieren und da gehen Sie genau die gleichen Raketen erreicht, aber alle viel einfacher. Warten Sie. Je mehr Tags Sie hinzufügen, desto mehr gebremst am größten Platz. Also, als Beispiel, lassen Sie mich das einfach kopieren, okay? Und lasst uns das machen. Ich gehe jetzt einfach weiter und füge einige ein paar mehr ein. Lass uns jetzt voran gehen sparen. Lasst uns die Seite auffrischen und ah, Opps. Entschuldigen Sie, Lassen Sie uns diese Seite aktualisieren und jetzt können Sie die Ergebnisse sehen. Jetzt können Sie sehen, dass zwischen dem ersten Hirsch hier und dem zweiten Tag viel Platz ist. Jetzt fragst du dich vielleicht, Hey, Alex, warte mal. Was ist mit dem Bild? Warum taucht dieses Bild zwischen der ersten AG und dem A-Tag überhaupt Teig auf? Wenn wir hier auf unsere Seite gehen, können Sie sehen, dass das Bild nach dem zweiten kommt. Ein Etikett. Eigentlich ist das, was Sie hier sehen, genau richtig. Es liegt daran, dass dieses Bild so groß ist. Sie denken, es ist über dem zweiten Angriff, aber sie sind tatsächlich auf der gleichen Linie. Wenn er die achtziger Jahre hier bemerkt und dann ist das Bild gleich daneben. Ist das, weil das Bild wirklich, wirklich groß ist ? Deshalb sieht es so aus, als ob das Bild tatsächlich über dem zweiten Angriff steht. Es ist nicht der Fall, dass tatsächlich auf der gleichen Zeile. Also, das ist es für das Break-Tag. Danke, dass Sie zugesehen haben. Wir sehen uns in der nächsten Klasse. 17. Divs und Span: ballistisch über zwei sehr wichtige Tags. Und das wird das taube Tag und die Span-Tags sein. Lassen Sie mich Ihnen eine Frage stellen, oder? Lassen Sie mich Ihnen eine Frage stellen, Wenn Sie die Farbe ändern wollten, sagen wir die Farbe von einem bestimmten Wort. Sagen wir, zum Beispiel, Ruhm ist der Weltruhm hier unten. Wenn Sie die Farbe von der Standard-schwarzen Zehe ändern wollten, sagen wir, rot, wie würden Sie das tun? Jetzt wissen wir, dass es eine Eigenschaft namens Farbe gibt, mit der wir die Farbe von schwarz zu rot ändern können. Und wir wissen, dass es ein Attribut gibt, das als Stil bekannt ist, das wir tatsächlich verwenden können, um diese Änderung zu implementieren , richtig. Aber das Problem ist, dass Attribute nur mit Tags laufen. Jetzt ist die Fames nur ein Wort. Ist es nicht. Es sind keine echten Stiefel. Wie können wir also die Farbe von diesem bestimmten Wort ändern? Nun, hier kommt das Span-Tag ins Spiel. Sehen Sie, mit dem span Tag, können wir Wörter ausrichten. Wir können es Buchstaben, Zahlen nehmen . Wir können es alles nehmen und das span -Tag verwenden, um die Eigenschaft von diesem bestimmten Element zu ändern . Also wollen sie jetzt die Farbe von Schwarz zu Rot ändern, um Ruhm zu erhalten. Ich werde das tun. Ich werde ein neues Tag öffnen und span sagen, und dann werde ich Stil sagen. Jetzt können wir die Stilattribute an dieses Span-Tag anhängen, und dann können wir jetzt sagen, Okay gleich und dann in Mänteln. Aber natürlich, jetzt gehen, um Anrufer zu sagen und dann wird jetzt, natürlich, auf den Wert von Red Semi Colon und lassen Sie uns voran und schließen Sie die Öffnung. Aber denken Sie daran, natürlich ist es Angriff. Also müssen wir auch das Tag schließen. Nach dem Wort werde ich jetzt hier reinkommen und das Ost-Pan-Tag hinzufügen und schließen. Richtig, also gehst du hin. Lasst uns jetzt voran gehen und das retten. Lassen Sie uns die Seite aktualisieren. Lass uns hier runter gehen und da gehst du. So können Sie auch, die fams ist jetzt in rot, dank dieser pan-Tag, so können Sie eine Spanne angeheftet verwenden, um Wörter, Buchstaben, Zahlen, alles, was Sie könnten auch zufällig ändern die Eigenschaft, die wir sind Umgang mit. Wir könnten vielleicht die Textilinien-Eigenschaft ändern, könnten aber die Textdekoration ändern, um Eigenschaft anzuzeigen und so weiter. Und so weiter, so dass es für das SPAN-Tag. Was ist mit dem Dev-Tag? Jetzt wird der diff tug verwendet, um Abschnitte auf allen Webseiten zu zielen. Es gibt ein Beispiel. Im Moment haben wir, sagen wir, zum Beispiel, Sie wollten gezielt einen Abschnitt mit dem H den ganzen Weg hier unten auf das erste Ah, ein Tag-Licht. Lassen Sie uns, dass ich diesem speziellen Abschnitt eine andere Hintergrundfarbe geben wollte. Wir würden das Dave Element in einem solchen Fall verwenden. Als Beispiel, weil ich hierher komme und was ich tun werde, ist, dass ich eine Registerkarte hinzufügen werde, um alles ans Licht zu bringen . Kommen wir nach dem Körper-Tag und Schaden, der das neue Tag öffnet, was natürlichder Dev Tacked E i V seinwird der Dev Tacked E i V sein Und dann hier unten, kann ich nicht weiter gehen und das taube Tag schließen. Also im Grunde haben wir jetzt diesen ganz neuen Abschnitt gegeben, wir haben diesen Abschnitt vom Rest der Webseite geteilt. Also von hier, jetzt, kann ich hier reinkommen und sagen OK, def Stil ist gleich und dann codiert, Ähm, ich gehe nicht. Kommen Sie rein und sagen Sie Hintergrund, Äh, Farbe und sagen wir „Ah grün“ als Beispiel. Gehen wir weiter und speichern Sie das. Aktualisieren Sie die Seite, und wenn ich Schule jetzt zurück, können Sie sehen, dass der Abschnitt den Kopf und das Element bis zu dem, wo wir das Alter haben , in dem Sie sehen können, weil es genau die gleiche Farbe wie die Hintergrundfarbe haben wir gezielt. Wir haben im Grunde die Rückseite geändert und diesen gesamten Abschnitt gefärbt, indem wir das Dev-Tag verwenden, das sie haben Element. Also, das ist, was Sie normalerweise dibs voll jetzt verwenden. Technisch gesehen könnten Sie irgendwie mit der Verwendung mehrerer Körpersteuern davonkommen. So zum Beispiel könnten Sie zum Beispieldas erste Aufzählungs-Tag hier drüben schließen könnten Sie zum Beispieldas erste Aufzählungs-Tag hier drüben schließenund dann ein weiteres Körper-Tag öffnen. Aber das ist einfach schrecklich kalt. Und das ist wie das schlechteste XML aller Zeiten. Also bitte tun Sie das nicht. Ihre Webseite sollte immer nur ein einziges Body-Tag haben. Wenn Sie göttliche Abschnitte von Ihrer Seite gut verwendet den Dev-Angriff. Das ist es, was sie voll ist. Das war's also für die Daves und diese Pan-Tags. Pantex werden wieder verwendet, um Wörter zu markieren. Lassen Sie, wie Sie erkennen verwenden können, um die Eigenschaften von diesen Arten von Elementen zu ändern, während die Daves verwendet werden, um Abschnitte auf Ihrer Taube zu zielen. Natürlich sind Dev-Tags oder Elemente Blockelemente, während Ihre SPAN-Tags in der Regel in Linienelementen sind. Das war's also für Daves und Spannweite. Denk an eine Wache, die ich dich in der nächsten Klasse sehen werde. 18. Inline- und Blockelemente: Nun, da Sie mit dem vertraut sind, was Block und in Linienelementen sind, lassen Sie uns eine Ebene um. Okay, mal sehen, wie wir England und Blockelemente zu diesem Spielinhalt kombinieren können . Also zuerst werde ich die Hintergrundfarbe für den Dev ändern, den wir zuvor erstellt haben . Lasst uns diesmal mit unserer Orange gehen und nicht grün, damit wir unsere A-Tags sehen können. Lasst uns das retten. Okay, lasst uns was Lustiges versuchen. Wie jetzt haben wir das H ein Tag genau hier. Das ist sehr, sehr groß. Was ist, wenn wir tatsächlich AP-Tag innerhalb der H eine Steuer hinzugefügt haben? Im Grunde fügen wir nun ein Blockelement innerhalb eines anderen Block-Elements hinzu. Wie wirkt sich das auf das Display aus? Dieser Sitz? Ah, lasst uns einfach weitermachen und diese zusätzlichen Worte entfernen. Okay, also müssen wir das H. auf Steuern pinkeln. Kommen wir hier rein. Lassen Sie uns sparen und mal sehen, es wird irgendeinen Unterschied kommen hier erste Seite und nun, wie gegen die jetzt, gibt es keinen Unterschied. Es fungiert immer noch als H ein-Tag, so dass es wirklich Blockelemente innerhalb anderer Blockelemente hinzufügt, nichts ändert . Du wirst es sein. Sie werden so ziemlich das gleiche Ergebnis die meiste Zeit erhalten. Jedoch, Was, wenn wir runterkommen? Schlagen Sie, wo wir unsere Marke haben? Alles klar, gehen wir mit dem zweiten. Ein Etikett. , Was ist,wenn ich hier reinkomme und sagte: Weißt du was? Ich werde das in jedem Tag machen. Alles klar, jetzt fügen wir ein Tag innerhalb des H ein-Tags hinzu. Mal sehen, was passieren wird. Das ist schließen Sie das H ein Tag. Gehen wir sicher wieder rein. Geh zurück, Teoh Broza verweist auf die Seite. Jetzt können Sie sehen, dass der zweite Tag, der zweite Angriff ist jetzt so groß wie der H ein Text hier drüben. Der einzige Grund, warum es aussieht, weil, ähm, alle Buchstaben sind auch Großbuchstaben. Die hier sind alle Kleinstädte, mit Ausnahme des ersten Abschlags. Das passiert also im Grunde, wenn Sie Blockelemente kombinieren. Wenn er Blockelemente anstelle von anderen Blockelementen hätte, Sie nicht wirklich eine Änderung bekommen. Aber wenn Sie ein Ellen Element im Zeichen eines Blocks hinzufügen. Elementar Ratet mal was? Das Blockelement wirkt sich auf die Art und Weise aus, wie das Hauptlinienelement angezeigt wird. Beachten Sie jedoch, jedoch, dass dies nicht immer der Fall ist. Es gibt Fälle, in denen selbst wenn Sie ein Alien-Element innerhalb eines Blockelements hinzufügen, möglicherweise keinen Unterschied sehen. Mach dir keine Sorgen. Wenn Sie beginnen, komfortabler mit HTML zu arbeiten und Sie beginnen, verschiedene Arten von Aufgaben zu übernehmen, mit verschiedenen Attributen und Tags und solchen Dingen zu arbeiten, würden Sie sich an die Hölle gewöhnen. Diese Dinger funktionieren tatsächlich. Aber im Moment wollte ich nur, dass Sie wissen, dass Sie eine Linie Elemente innerhalb von Blockelementen hinzufügen können und diese beeinflussen die Art und Weise, wie diese Binnenelemente tatsächlich angezeigt werden. Das war's also. Vielen Dank für so viel Glück. Wir sehen uns in der nächsten Klasse. 19. Der Kopftag: Lassen Sie mich Ihnen eines der wichtigsten Tags für HTML vorstellen. Und das wird der Hedda Tag sein. Dies ist ein Tag, mit dem Sie sehr wichtige Informationen über Ihre Website anzeigen , einschließlich der Titelbeschreibung. Kopfangriff könnten Sie sogar Keywords für S E O anvisieren. Und Sie könnten sogar einige CSS-Styling als auch einbeziehen. Also lasst uns das machen. Ich werde Ihnen zeigen, wie Sie zuerst den Stapel nutzen können. Und obwohl wir werden eine neue in Dent und in Opium auf dem HTML direkt auf die Rate erstellen , die wir das Head-Tag hinzufügen werden. Es ist nicht Hedda Butthead, okay? Jetzt fällt es normalerweise auf das HTML-Tag. Also, zuerst werde ich hier tun, ist, dass wir jetzt den Titel von unserer Website ändern werden. So wie es ist, schauen Sie sich wie er an. Alles, was es sagt, ist Punkt HTML und das macht absolut keinen Sinn. Wenn wir diese Seite jetzt ins Internet hochgeladen haben, würde alles sagen, ist die Überschrift der externen. Aber bedeutet das so, allen aufgeregt einen beschreibenden Titel zu geben? Wir gehen vor einem Tag zurück zu unserem Kopf, um ein neues Tag namens Titel-Tag zu benutzen . Und dann können wir jetzt HTML-Tutorials für Anfänger sagen. Aber gehen wir weiter und schließen das. Lass uns jetzt nicht rüber kommen und das Dokument speichern. Geh rüber zu Broza. Achten Sie nun auf die Registerkarte. Gehen wir voran, nie frisch. Und da gehst du. Jetzt bleibt es. HTML-Tutorials für Anfänger Viel beschreibender. Nun, zusätzlich, um mit dem Titel-Tag zu gehen, könnten wir eine andere Art von Tag hinzufügen und lassen Sie mich einfach tun. Ich werde die Tags einfügen, die bereits zuvor kopiert wurden. Und das wird das Meta-Tag sein. Sehr, sehr, sehr wichtig und sehr nützliches Tag. Grundsätzlich kann der Met Angriff verwendet werden, um Einstellungsarten aus Sehr wichtige Informationen wie der Zeichensatz unserer Beschreibung außerhalb der Website anzuzeigen. Die Keywords waren Targeting für einen CEO und so weiter. Nun, die 1. 1 er hier ist der Meta-Zeichensatz und Sie betrachten utf unsere Strich Acht validieren . Was genau ist das? Nun, wenn Sie beginnen, Symbole auf Ihrer Website wie das at Symbol, das Prozentsymbol Dinge wie diese. Es gibt Möglichkeiten, wie es tatsächlich HTML-Code hat. Die Einheiten, die verwendet werden, um diese Arten von Zeichen anzuzeigen. Jetzt in anderen, für Ihren Browser, Lage zu sein, diese HTML-Symbole zu interpretieren, müssten Sie den Zeichensatz, mit dem Sie gehen, enthalten . UTF acht ist im Allgemeinen die bevorzugte Option, da es universell ist und die überwältigende Mehrheit aus Symbolen und Zeichen enthält . Die einzige andere Instanz, in der Sie utf acht nicht verwenden und einen anderen Wert verwenden können, wäre wenn Sie die Website mit einer anderen Art von Sprache erstellen würden, vielleicht Spanisch oder Griechisch oder so etwas. Aber normalerweise wird es ut f aßen. Dafür ist das hier. Jetzt haben Sie eine Beschreibung. Meta-Name entspricht Beschreibung und dann sind die Inhalte im Grunde kostenlose Web-Tutorials. In diesem Fall, gerade jetzt, beschreiben wir nur den gesamten Inhalt über die Website. Jetzt hier ist der Meta-Name gleich Schlüsselwörtern und im Inhalt html CSS. Dies sind die Schlüsselwörter für S e O. Also, wenn Sie Ihre Seiten für S e O optimieren wollen , genau so würden Sie das tun. Und schließlich haben Sie auch den Meta-Namen gleich Autor. Dies ist, wenn Sie den Namen des Autors außerhalb der Website oder den Beitrag der Seite einfügen möchten. Und dann, weißt du, genau so könntest du das machen. Noch eine Sache, die es zu erwähnen ist, wäre Stil. Und Sie können tatsächlich einige CSS Styling in Ihren Kopf Angriff einfügen. Wie machen wir das? Okay, sagen wir, zum Beispiel, wir wollten die Hintergrundfarbe von unserer gesamten Website ändern. Nein, hier drüben. Wir haben bereits die Körper-Stil sind gleich in zurück, und Qallab wirklich würde. Die Sache ist, dieses Körper-Tag wird nur die Homepage oder die Seite beeinflussen, auf der dieses spezielle Gericht steht. Es wird sich nicht auf alle Seiten einer Website auswirken. jedoch Wenn wirjedochalle Seiten auf uns auf alle Body-Tags auf unserer Seite auf einmal ausrichten wollten, könnten wir CSS verwenden, also lassen Sie mich einfach sehen, wovon ich spreche. Ich werde alle entwickelten, die wir hier drin haben, entfernen und den Bootsangriff einfach so lassen, wie er ist . Sieh dir das an. Ok. Ich werde den neuen Tag off-Stil einschließen und dann innerhalb des Style-Tags werden wir jetzt hinzufügen. Das Element, das wir in diesem Fall anvisieren wollen, wird das Körperelement sein, richtig? Es wird also Körper und dann geschweifte Klammern sein. In Ordnung, eröffne eine neue Leitung. Und jetzt lassen Sie uns die Eigenschaft hinzufügen. Und das war es, was ich sein wollte. Hintergrundfarbe und, sagen wir, Aqua tatsächlich zurück. Nun, lassen Sie uns mit Blue als Beispiel gehen und im Semi Colon Nowsagen wir im Grunde, sagen wir im Grunde, OK, jeder Element auf einer Website ändert seine Farbe zurück zu blau. In Ordnung, lassen Sie uns noch einen hinzufügen. Werfen wir einen Blick auf D L I. Ellen, die wir hier haben wie Apple Challenge, Nehmen wir an, wollte alle von ihnen eine einzige Farbe aus geben. Sagen wir, grün so, um das zu tun. Sehr einfach Herbal. Sagen Sie einfach L I, das ist das Element Ziele und White Kali hockt sich. Tut mir Leid. Cola Hosenträger, und dann in einer neuen Linie, sagen wir Farbe und dann sagen wir grünen Semikolon. Nun, im Grunde sagen wir, dass jedes einzelne Verbündete Element auf einer Website seine Farbe in Grün ändert. Lass uns jetzt voran gehen und den Kopf ein Tag schließen. Vergiss nicht, dein Head-Tag zu schließen. Sehr, sehr wichtig. Lasst uns jetzt weitermachen und das retten. Lass uns gehen. Über was? du Broza? Nun, zuerst die Seite und da gehst du. Erste Dinge zuerst. Unsere Seiten haben jetzt die Rückseite culo off blue. Aber dann unten kann man sehen, dass die Ally Elemente grün sind und ihr okay, grün und blau keine tolle Kombination ist. Also lasst uns das einfach schnell machen. Lassen Sie uns stattdessen die Hintergrundfarbe von Blau in unser lieber Grau ändern. In Ordnung, gehen wir wieder hier rein. Speichern Gehen Sie zurück. Teoh Browser bezieht sich auf die Seite und da gehst du. So jetzt können Sie sehen, dass jedes Verbündete Element auf grün gesetzt wurde. Und dann natürlich ist unsere Hintergrundfarbenatürlichauf einen großen Kurs gesetzt. Wir haben hier eine bestimmte Bergen-Farbe für den Dave eingestellt. Deshalb hat es immer noch seine orange Farbe. So wird die Tasche Onkel einer Seite nicht überschreibt die Hintergrundfarbe von einem Tag von innen . Also genau so macht man Gebrauch aus dem Kopf. Ich meinte und glaube es oder nicht. Was Sie hier sehen Dieser Stil, dies ist Ihre erste Einführung zu bewerten. Dies ist, was wir als internes CSS fit sind. Weil es darin enthalten ist. Oft würde jedes allgemeine Dokument reguläre Saisons eine separate Datei für sich sein. Und dann müssen Sie Ihr HTML-Dokument mit diesem Dokument verknüpfen. Wir werden darüber etwas später abseits des Kurses reden. Aber vorerst war dies Ihre Einführung in den Kopfangriff. Sehr, sehr wichtig. Sehr lebenswichtiger Tag für Extremkrankheiten. Danke, dass Sie zugesehen haben. Wir sehen uns in der nächsten Klasse. 20. HTML 5: wie Sie am Ende dieses Abschnitts auf HTML Elect beginnen, um einen Blick auf die H ähnliche fünf semantische Elemente zu nehmen . Was genau sind diese semantischen Elemente? Nun, sie werden hauptsächlich für die Bereitstellung struktureller Inhalte verwendet. Und es gibt eine größere Bedeutung ist, weil durch die Bereitstellung Ihrer Inhalte, strukturelle Suchmaschinen besser in der Lage sein, zu verstehen, worum es bei Ihren Inhalten geht. Dadurch können Sie Ihre Inhalte viel besser für Suchmaschinen optimieren. Und zusätzlich dazu, es macht nur Ihre Inhalte so viel einfacher und so viel sauberer zu lesen und zu verstehen. Werfen wir einen Blick auf ein paar aus. Dann haben Sie, wie der Artikel beiseite, Sie haben die Fußzeile, die Sie Kopf nach oben. Du hast den Knave. Bevor ich diesen Kopf fortsetze,unterscheidet sich ein Tag hier von dem Head-Tag, über das wir zuvor gesprochen haben. Bevor ich diesen Kopf fortsetze, Was ist der Unterschied? Siehe, das head-Tag wird verwendet, um Informationen zu enthalten, die Sie normalerweise nicht am Frontend sehen würden . Informationen über den Schlüssel war Ihr Ziel in den Titel von Ihrer Website ist Beschreibung, das Zeichen sagte, das Zeichen sagte, und so weiter die Skripte, das sind die Arten von Informationen, die in Ihrem Kopf Tag enthalten . Ihr Kopf-Angriff, auf der anderen Seite, würde in der Regel Informationen wie das Logo von Ihrer Website, das Hauptmenü und so weiter enthalten . Als Beispiel, Werfen wir einen Blick auf meinen Block hier drüben. Wenn ich das kaputt machen wollte, siehst du was? Wo haben das Logo und dann das Hauptmenü. Das wäre von innen aus meinem Kopf. Ein Etikett. Und auch, weil, wenn ich zu einem Beitrag oder einer Seite auf meiner Website gehe, die Informationen im Kopf-Angriff in der Regel konsistent. Gleiches gilt für das Fouda-Tag, das Informationen im Fußzeilenbereich meiner Website enthält. Und das geht jetzt, Sie können sehen, wir haben einen Abschnitt über, einige Sat Lings und einige Social Media. Das wäre im Inneren des Food-Tat-Tags enthalten, das ist der, den Sie hier sehen. Diese semantischen Elemente enthalten also Informationen über die strukturellen und auch Inhalte unserer Website. Jetzt hast du das jetzt Element genau hier. Dies würde verwendet werden, um Ihr Hauptnavigationsmenü zu enthalten. Und dann haben Sie andere wie Ihren Hauptabschnittsartikel, der in der Regel geändert werden könnte . Ah, diese, weil sie im Grunde verwendet werden, um Ah zu enthalten, den tatsächlichen Inhalt von Ihrer Website und hier im Moment, können Sie eine Art von wie eine Aufschlüsselung sehen. Eine gerade Die Aufschlüsselung, wie diese thematischen Elemente verwendet werden. Also, dass du, wie, wie, das Hedda-Tag unten hast. Sie haben das Essen oben, und dann haben Sie den Knave mit dem Hauptnavigationsmenü und dann den tatsächlichen Inhalt, Sie könnten Ihre Elemente wie Abschnitt verwenden. Du könntest Artikel gebrauchen. Du könntest sogar Dibs gebrauchen. Wir haben schon über Spenden gesprochen. Das musst du nicht unbedingt. Ihr Abschnittsartikel und dann zugewiesen wird in der Regel verwendet, um Informationen zu enthalten, die in diesem Fall sofort von Ihrer Seite entscheiden würden. Vielleicht wie eine Sidebar. Ich bin nur ein Beispiel. Also werden wir viel nah mit diesen Elementen gehen, wenn wir anfangen, unsere eigentliche Website zu bauen . Aber im Moment wollte ich Ihnen nur vorstellen, weil es wichtig ist, dass Sie wissen, dass sie existieren und was es ist, dass sie tatsächlich tun. So fühlen Sie sich frei, auf diese Website zu gehen, werden Gericht Kamera ogg befreit, und dann können Sie für HTML fünf semantische Elemente suchen. Dies ist ein sehr, sehr beschreibender Artikel. Sie werden Ihnen beschreiben, was diese Elemente sind und wie sie verwendet werden. Aber wie ich schon sagte, Alia wird sie näher betrachten, wenn wir anfangen, unsere Website zu bauen. Danke, dass Sie zugesehen haben. Wir sehen uns in der nächsten Klasse. 21. HTML 5: Nun, da hast du es. Wir sind bis zum Ende dieses Abschnitts über HTML fünf gekommen, und Sie haben ziemlich viel gelernt. Jetzt haben Sie über die XML-Tags gelernt, die Attribute, die Hengsteigenschaft sind ihre Werte, Elemente und vieles mehr. Jetzt haben wir natürlichnicht natürlich alles über ein Gartenopfer von fünf abgedeckt. Wir haben nicht über acht ähnliche Formen gesprochen. Wir haben auch nicht über Tische gesprochen . Wir werden uns diese ansehen, sobald Sie mit dem Aufbau unserer Websites beginnen. Das macht sich keine Sorgen. In der Zwischenzeit, wenn Sie ein bisschen mehr über HTML auf ihre eigene Freizeit lernen möchten, aber gelobt, aber gelobt, gehen Sie zu W drei Schulen, die kommen und dann überprüfen Sie die Registerkarte für HTML. Hier können Sie alle notwendigen Informationen sehen und alle Arten von Informationen über die verschiedenen Arten von Elementen und Tags und Attributen und all das Zeug fortgesetzt . Also, wenn Sie interessiert sind, würde ich Ihnen empfehlen, besuchen W drei Schulen Kommen Sie nicht, aber das ist es für jetzt. Für Sistema fünf haben Sie die Grundlagen gelernt. Lassen Sie uns jetzt auf Kinder über die Grundlagen von CSS 22. CSS Vorschau: In Ordnung. Also willkommen offiziell in der CSS Sektion und wir sind fertig mit HTML für jetzt. Vorwärts bewegen. Es geht nur um Schwestern. Von nun an, bis wir zu Abschnitt drei kommen, wo werden nun XML und CSS kombinieren, um diese bestimmte Website zu erstellen, die Sie betrachten ? In diesem Abschnitt werde ich Ihnen die Grundlagen von CSS vorstellen und auch über die häufigsten Arten von Designs sprechen , die Sie mit CSS anwenden können. Jetzt ist CSS ein sehr, sehr, sehr breites Thema. Ich könnte einen 10-stündigen Kurs machen, der nur über CSS spricht, aber wir haben keine 10 Stunden. Also, was ich in diesem Abschnitt tun werde, ist, dass ich Ihnen die beliebtesten zu den gängigsten Arten von Designs vorstellen , mit denen Sie nicht spielen können, sagt CS. Und dann in Abschnitt drei, wenn wir diese spezielle Website bauen, werde ich Ihnen noch mehr vorstellen. Arcia sagt Fähigkeiten. Lehnen Sie sich zurück, entspannen Sie sich und ich hoffe, Sie genießen diesen Abschnitt. Lasst uns loslegen 23. Was ist CSS: All das ist ein Willkommen in diesem brandneuen Abschnitt, wo wir über C. S s sprechen werden . Und die offensichtliche erste Frage hier wird sein, was genau C S s ist, CSS Stents für Cascading Stylesheets. Jetzt weiß ich, dass dies keinen Sinn ergibt, aber mit der Zeit wird es sich jetzt auch erinnern, wenn wir über HTML sprechen und wir Analogie von einer Website verwendet haben, die ein menschlicher Körper ist und HTML-Bean das Skelett ist Nun, CSS wäre im Grunde jeder Code, der HTML aussehen lässt Besser. Das ist im Grunde das, was CSS sein würde. Wenn wir also die Analogie des menschlichen Körpers verwenden würden, wären Anfälle wie die Hautmuskeln, die Haare, alles, was den menschlichen Körper besser aussehen lässt. So bildet CSS den Kernstil und das Framework von jedem Webstrand im Internet. Das ist nicht zu sehen, dass Sie Stil haben können, ohne C sagt, dass Sie können. Ich meine, wir habe Ihnen gezeigt, wie Sie einige Stil-Änderungen an Ihrem es ist Tim L. Unser Dokument missbraucht nur reines HTML. Aber CSS idealerweise der deutsche Faktor sein, sollte idealerweise der deutsche Faktor sein,weil es Tailing so viel einfacher und viel besser macht, so Carlos Hintergründe, Hover-Effekte, Animationen vom Styling, alles , die eine Webseiten-Website attraktiver aussehen lassen kann. Es ist in der Regel mit C. S gemacht . Also, das ist eine kurze Einführung in CSS Deutsch sogar Eier Video, wo wir jetzt beginnen zu Fuß mit CSS. 24. Die Dateien herunterladen: Alles klar. Bevor wir mit dem Rest des CSS-Kurses fortfahren, möchte ich, dass Sie etwas für mich tun, das an dieses Video angehängt ist. Sie werden eine ZIP-Datei finden, und wenn Sie diese Datei herunterladen und auf Zip, sollten Sie diese drei Dateien haben. Grundsätzlich haben Sie einen, ah, ah, einen Index der HTML-Datei einen Stil, der uns Datei setzt. Und du hättest auch einen Ordner mit drei verschiedenen Bildern. , Abhängig von der Plattform,auf der Sie diesen Kurs ansehen oder diesen Kurs besuchen, finden Sie ihn entweder an dieses Video oder Sie finden ihn sogar in Ihren Projekten. Sektional, bitte gehen Sie weiter. Laden Sie die ZIP-Datei auf zip und bestätigen Sie, dass Sie Zugriff auf diese Dokumente haben, bevor Sie mit dem Westen aus dem Kurs fortfahren. 25. Grundlegendes CSS-Syntax: Nun, hoffentlich hattest du keine Probleme. Build in n Zugriff auf die Dateien erhalten. Und wenn Sie das nicht getan haben, gehen Sie bitte jetzt vor und öffnen Sie die Stil-Punkt-CSS-Datei mit den Klammern, TexUtil oder einem anderen Text ein wenig, den Sie verwenden. Also lassen Sie mich Ihnen genau zeigen, wie die Syntax von CS sagt. Grundsätzlich werden Sie ein Element auswählen, auf das Sie Ihren Stil anwenden möchten. Also, wenn wir zu unserem Index Punkt html gehen, haben wir das h ein Tag genau hier. Also lasst uns versuchen, etwas Stil auf unsere H anzuwenden. Wir werden jetzt hier reinkommen und dann H eins sagen, das sind die elementaren Flugzeuge sagen und dann Kohli Klammern und dann in Seite der kalibrierten. Wir werden eine Eigenschaft von diesem Element spähen. Es wird diesen Stil auch spielen wollen . In diesem Fall, sagen wir, wollte die Schriftgröße ändern und es müsste es ein bisschen größer machen. Also gehen wir mit 50 Pixeln und dann Semikolon. Dies hier ist die grundlegende Syntax von jedem CSS-Code. Zuerst haben Sie das Element, das Sie diese Aussage anwenden, auch Sie haben Ihre Kollegen Klammern und dann innerhalb der Kalibrierung würde die Eigenschaft haben. In diesem Fall ist es Spaß Größe Doppelpunkt und dann der Wert von der Eigenschaft und dann ein Semikolon. Lassen Sie uns noch einen hinzufügen. Lasst uns mit dem Text gehen. Ah, Linie und gehen wir mit der Mitte. Also mein Dickdarm und da gehst du. Lasst uns jetzt voran gehen und das retten. Nun, wenn wir versuchen, zu einem Browser zu gehen und bezieht sich auf Seite, Sie wieder bemerken, dass es keine Änderung Das H ein Ziel bekommen ausgewählte CSS. Es ist immer noch auf der linken Seite liegen und die Schriftgröße hat sich noch nicht geändert. Das liegt daran, obwohl wir diesen Stil haben, dass Situs Datei, es ist nicht mit unserer Index Punkt HTML-Datei verknüpft. Also müssen wir beide miteinander verknüpfen. Wie machst du das? Ich werde das nächste Video mitteilen. Dann sehen wir uns. 26. HTML und CSS verbinden: Willkommen jetzt zurück. Zuvor haben wir erfolgreich einige Code zu unserem Stil DOT sagt seine Datei, Aber leider, weil wir den Stil nicht verknüpft haben, dass Städte fiel auf unsere Index Punkt html Datei die Änderungen , eine nicht angewendet. Die große Frage im Moment ist also, wie wir unsere Style-Datei mit unserer HTML-Datei verknüpfen? Nun, um dies zu tun, fräsen Sie über den Index Punkt html und dann innerhalb von den Kopf Tag, überprüfen Sie diese neue Aktion. Aber es nennt sich Link. Alles klar, im Grunde ist das sagen Hey, wir fügen einen Link hinzu und das erste Tal wird Schiene gleich sein und das in Mäntel-Stylesheet . Also im Grunde ist der Wal eine Möglichkeit, okay zu sagen, welche Art von Verbindung es in diesem Fall jetzt geben wird. Es ist eine Stylesheet-Datei, und dann wird das nächste Tal für die H ref sein. Die eigentliche Quelle. Der Link zu dieser Datei, der Link zu dieser talentierten Datei und genau wie mit Bildern, denn der Stil, der Datei und Indexpunkt-HTML-Datei in genau demselben Ordner setzt, wird es einfach sehr einfach sein. Stil-Punkt-CSS. Wenn, natürlich, dies, wenn die Zelle, die Schwestern fiel in einem anderen volleren kalten Stile, zum Beispiel, dann wäre die Atria Fear Stile Ford Schrägstrich und dann gestylt Schwestern, genau wie mit Bildern. Richtig, also gehst du hin. Wir haben den Lincoln erfolgreich nicht geschafft. Lass uns weitermachen und das schließen. Ich komme sofort hier rein. Speichern Sie meine Akte. Und jetzt gehen wir rüber. Teoh Boza, erfrischen Sie die Seite. Und da gehst du hin. Jetzt können Sie sehen, dass die H nun an der Mitte ausgerichtet ist. Außerdem wurde die Schriftgröße auf 30 Pixel eingestellt. Also herzlichen Glückwunsch. Wir haben nun erfolgreich unsere Style Dot CSS Datei mit unserer Index Dot HTML Datei verknüpft. 27. Die Macht von CSS: Nun, Comebacks in einem vorherigen Video ist erfolgreich unser HTML-Dokument mit unserem CSS Stylesheet verknüpft . Aber die große Frage im Moment ist, was genau das Besondere an CSS ist? Ich meine, gut. Wir waren in der Lage, es hinzuzufügen. Fun Größe und auch eine Linie sind 81 in die Mitte geheftet. Aber wir hätten das mit HTML Isabel tun können, oder? Also, warum CSS? Warum sogar das Styling mit CSS stören? Nun, Sie sehen, die wahre Macht von CS sagt, liegt in seiner Fähigkeit, Styling-Änderungen an mehreren Elementen aus einer einzigen Codezeile vorzunehmen. Jetzt ist ein Beispiel. Wenn ich zurück zu meinem Index Punkt html hier in ging, können Sie sehen, dass wir mehrere Alter drei Tags haben. Warten Sie, zum Beispiel, wir haben die Politik in Klammern ist ein H drei. Ted. Wir haben nicht jedes Tag hier auch. Wir haben hier noch ein „H drei“ -Tag, ein weiteres hier unten. Wenn wir unseren H drei Tags eine bestimmte Farbe mit HTML geben wollten, müssten wir zu jedem einzeln gehen und dann OK sagen, es ist drei hier, entspricht den Text-Follikel blau, und dann zur nächsten Textfarbe blau und so weiter und so weiter Mit CSS können wir die Abkühlung jedes einzelnen h drei Tag vom Schreiben ändern. Ah, sehr kleines Stück Code. Wie das, was wir hier drin haben. Also als Beispiel, wenn ich hier reinkam und ich es drei sagte und dann lass uns eine Farbe geben und wir werden sagen, Farbe hier ist blau. Mal sehen, was passieren wird. Ich komm sofort hier rein. Akte. Lasst uns Ah, sicher. Und jetzt lasst uns rüber gehen. Was Sie Rosa kommen hier bezieht sich auf die Seite und jetzt können Sie sehen, dass jedes einzelne Alter drei Tag ist jetzt in blau genau so. Das hier ist also die wahre Power Off CSS. Sie können Änderungen an allen Arten von Elementen aus einer einzigen Zeile aus Code vornehmen. Es ist so einfach. Aber wenn dann hier dieses Okay ist, können Sie mehrere Arten von Elementen gleichzeitig beeinflussen. - Was? Ich meine, hier ist das. Okay, also haben wir einen Chuan, den wir zwei b haben, wenn wir wollen. Aus irgendeinem Grund, wenn Sie es genau den gleichen Stil in beiden Arten von Elementen hinzufügen möchten, können wir sie auch tun. Also alles, was ich in diesem Fall tun würde, wäre hierher zu kommen nach 81 Ich werde ein Koma hinzufügen und dann h drei. Jetzt im Grunde, ich sage für alle H eins und H drei Schlepper, geben Sie ihnen ein Telefon, sagt von 30 Pixel und richtete sie in der Mitte. Schauen wir es uns mal an. Kommen Sie wieder her, Save. Geh zurück zu meinem Boza. Nun, zuerst die Seite und einfach so, Sie können jetzt sehen, dass die H eins und die A drei Vorträge alle auf die Mitte ausgerichtet sind und alle eine Wissenschaft von 30 Pixeln genau so haben. Hier ist also die wahre Ausschalten von CSS, die die Möglichkeit hat, mehrere Styling-Änderungen an mehreren Elementen gleichzeitig vorzunehmen. Und das Beste ist, wenn ich in Zukunft meine Meinung ändern und sagen wollte Weißt du was? Anstatt diesen Jungs eine lustige Größe von 50 Pixeln zu geben, möchte ich sie auf 24 Pixel ändern. Alles, was wir tun müssen, ist nur hierher zu kommen. Share entwickelt 50 bis 24 und das war's. Ich speichere meine Änderungen und alle H- und HB-Tags sind exakt mit genau dem gleichen Wert betroffen . Ich muss nicht zu jedem einzelnen h ein Taegu gehen, jeder einzelne, um anzugreifen und die Änderung dort vorzunehmen. Da in Lügen liegt, ist die wahre Abschaltung CS die Möglichkeit, mehrere Änderungen an mehreren Elementen vorzunehmen, alle von einer einzigen Zeile aus Code. 28. Das Familienrecht: Lassen Sie uns über eine der wichtigsten Eigenschaften sprechen, die Sie jemals auf Ihrer Website einstellen können , und das wird die Schriftfamilie Eigenschaft extrem wichtig sein. Und es reicht nicht für dich, nur einen Wert zu setzen und zu sagen: Okay, Okay, ja, das ist die Entwicklungsfondsfamilie. Ich werde weitermachen. Nein, du musst sehr vorsichtig sein. Und es gibt bestimmte Regeln, die gelten Wann immer Sie versucht haben, eine gute Familie zu setzen. Die vordere Familie ist im Wesentlichen das Eigentum. Sie werden die Art von Front diktiert, die Ihre Werke jetzt im Idealfall ein neues HTML-Dokument verwenden würden Idealfall . Es gibt drei Haupttypen von Tags, die Sie sprechen können, dass Sie Ihren Kopf in Ziel. Null jeder will 86 Sie können es zu einem P-Tags nehmen, das wäre der normale Text, und Sie können auch nehmen Sie es Ihre acht Tags als gut. - Natürlich. Es gab bestimmte Fälle, in denen Sie auch wie Ihre kleinsten Elemente und so weiter erhalten können. Aber die Big Three sind normalerweise deine Überschriften, dein normaler Text und deine Heiple Links. Jetzt ist das Richtige. Es gibt verschiedene Arten von Spaß Familien, Tausende und Tausende von ihnen, aber es gibt auch verschiedene Arten von Browsern. Du hast Chrome Firefox-Safari in jemandem. Nicht alle Browser sind in der Lage, alle Arten zu interpretieren oder Familien zu finanzieren. In der Tat gibt es nicht einen einzigen Browser, der jede Art von Frontfamilie interpretieren kann. Was das bedeutet, ist, dass Sie eine bestimmte Fondsfamilie wählen, die sehr gut aussehen würde auf den meisten linken Auswirkungen. Perlen sind es, aber auf Coombe könnte es anders aussehen. Das liegt daran, dass Crew Schwierigkeiten beim Lesen haben könnte oder dieses Flugzeug, diese Art von Spaß Familie. Denken Sie daran, dass Ihre Brüder wie Dolmetscher sind. Sie interpretieren dich, XML und Sisters Code, und dann zeigen sie, was sie interpretiert haben. Aber das ist gesagt, gibt es vor Familien der Konstante gesetzt, um Web sicher zu sein. Das bedeutet, dass es sich um lustige Familien handelt, die alle Browser interpretieren können. Nun, wenn Sie gehen über W drei Schulen dot com und Sie suchen nach den Sätzen von Web sichere Formulare Dokument. Hier können Sie die Telefonfamilien sehen, die sicher sind. Sie haben die sieben Fonds, Sie haben die sensorischen Gelder. Sie können die Beispiele direkt dort sehen. Sie haben Ihre Modellraum-Handys sowie also das sind die Telefonfamilien, die jeder Typ aus Browser in der Lage sein würde zu interpretieren. Dies ist wichtig, da Sie in der Regel eine Fallback-Fondsfamilie festlegen möchten, wann immer Sie Ihre primäre Fondsfamilie gewählt haben . Was ich meine, ist, wenn Sie eine benutzerdefinierte Front-Familie wählen, Sie wollen es wieder, so dass im Falle einer bestimmten Browse, Ich kann nicht interpretieren Ihre falsche Wahl für Front-Familie. Es wird die zweite Trades interpretieren, die Ihre Schuld zurück sein wird. Und Sie möchten immer eine dieser lustigen Familien hier als Fallback-Option festlegen. Eine Sache zu erwähnen ist auch, dass Sie für Ihren regulären Text sieben Fonds haben und Sie haben einige. Also, wenn Sie normalerweise mit diesen Songs gehen wollen, Sir, wir haben dies die Telefone, die nicht haben, wie zum Beispiel Styling, zum Beispiel Styling, wie hier, wo Sie Ihre Entschuldigung Geld haben. Werfen Sie einen Blick auf die T-Shirts, zum Beispiel, und die G. Sie können sehen, wie es gestylt ist, wenn Sie Text haben und Sie viel Text haben. Dies könnte ein bisschen schwieriger zu führen, aber mit Sunseri, wenn Sie sehen können, der Tee ist die Spaltung normalerweise der Jesus spielte normal. Sophia Text. Sie möchten in der Regel mit einem der Songs Serif Schriftarten gehen. So wollen Sie für Ihre Überschriften gehen. Du könntest eines der Seri Telefone benutzen. Ich denke, das wird es gut sein. Sie werden dort nicht zu viel von einem Problem haben. Eine andere Sache, die Sie auch erwähnen sollten, ist, dass Sie, wenn Sie Ihre Fondsfamilien einrichten, nicht gehen wollen. Sie verwenden nicht mehr als maximal drei verschiedene Arten von Telefonfamilien auf Ihrer Website. In der Regel würden Sie eine für Familie für Ihre Überschriften für Ihre Titel, eine andere lustige Familie für Ihren regulären Text und dann vielleicht eine andere Freundesfamilie für Ihre Hyperlinks Ihre A-Tags festlegen eine andere lustige Familie für Ihren regulären Text . Aber alt nach empfehlen Sie gehen mit Familien eine für Ihre Überschriften und dann eine für Ihre regulären Text jährlichen Hyperlinks zu finanzieren . Das ist normalerweise der Weg, den Sie gehen möchten, also nicht mehr als zwei oder drei Fondsfamilien auf Ihrer Website. Okay, gehen wir zurück zu unserem HTML-Dokument. In Ordnung. Wenn ich hier tun will, ist das. Ich werde Ihnen zeigen, wie Sie die Frontfamilie für Ihre P-Tags einstellen können, die Ihr regulärer Text beginnen würde . Sehen Sie, bewerten Sie. Was ich tun werde, ist, dass ich P sage und dann öffnen wir unseren Stil. Eine Option. Jetzt sieh dir das an. Ich werde sagen, Fund Familie, Ordnung, und ich werde Lieder sagen. Sarif wird die Fondsfamilie sein. Das ist das. Jemand ruft an, was hierher kommt. Lasst uns retten. Lassen Sie uns zu Ihrem Browser gehen Jetzt beachten Sie, dass die Standard-Telefonfamilie ist in der Regel mal New Woman. Das ist in der Regel die Standard-Spaß-Familie für Profis. Als so beziehen wir uns auf Pitch jetzt und wie Sie sehen können, dass es zu den Songs geändert. Sirleaf. Ok, perfekt. Sun Surf ist einer der Web Safe. Fonsi gibt es hier zu, Sohn Sarif. Aber lassen Sie uns jetzt eine andere Form Familie als unsere primäre Fondsfamilie für die P-Tags verwenden. Jetzt hat Google fast 1000 verschiedene Google-Fonds, und eines meiner Lieblings-Handys ist die Mont Mehrere Front. Ich benutze diese Front gerne für meinen regulären Text. Es ist derjenige, den ich dir zeigen darf. Es ist genau hier. Das ist es. Mehr von Sarah, richtig? Gehen wir weiter und versuchen es. Ich gehe zurück zu meinem HTML-Dokument und ob als ein paar Sarif zu sagen. Lasst uns jetzt hierher kommen und sagen, Mont Serve Bei der guten Nachricht über Mont Seventh ist die Tatsache , dass ich so gut wie jedes Browsen interpretieren kann. Auch wenn es ein Brauch ist, Google angerufen. Es ist immer noch ganz sicher. Also werde ich sagen, Monserrat, Speichern wir das. Gehen wir zurück zu einem mutigen Browser in bezieht sich auf die Seite, und jetzt können Sie sehen, das Telefon hat sich auf Monat geändert. Sarah. Ehrfürchtig. Doch obwohl Monster, obwohl Monster, was ist ein Google-Schriftarten? Und Sie haben alle Google-Telefone hier drin, nicht alle von ihnen sind in der Lage, leicht von Browsern interpretiert werden. Als Beispiel, Lasst uns hier runterkommen. Siehst du, es gibt noch eine Front, die Sophia heißt. In Ordnung, Justiz ein Beispiel. Jetzt kommen wir runter. Also hier ist es hier. Sophia. Das ist eine furchtbare lustige Familie für deinen normalen Text, aber ich werde sie benutzen, um zu zeigen, worüber ich reden möchte. Richtig? Lassen Sie uns den Wert aus der Telefonfamilie von einem Satz ändern, um Angst zu säen. Stattdessen, Sophia, komm sicher wieder rein. Gehen wir zu unserem tapferen Browser. Bezieht sich auf Seite. Merkst du einen Unterschied, es ist Veränderung. Es ist kein Monster mehr. Aber das ist nicht Sophia. Sieh dir an, wie Sophia aussieht, wie du sehen kannst. Es ist sehr, sehr abgestandene Leine. Aber was Sie hier haben, ist mal neue Frau, weil der tapfere Bruder die Sofia-Familie nicht interpretieren kann . Wenn ich zu fünf Fox gehe und ich mich erfrischen, siehst du, dass genau das Gleiche ist. Kein Unterschied ist immer noch die gleichen Zeiten. Neue Frau. Das ist, weil Bell uns in der Regel eine schwierige Zeit in der Lage, E Sophia Fonds Familie zu interpretieren . In dieser Art von Instanz möchten Sie also eine Standard-Fallback-Option festlegen. Also in diesem Fall, jetzt, werde ich mein Koma hinzufügen und dann Söhne Sarif als die volle Rückenoption sagen. Gehen wir hier wieder rein. Rette Coach. Du bist Broza. Nun, zuerst die Seite und jetzt können Sie sehen, San Serif ist jetzt in Aktion, weil der tapfere Browser Sofia nicht interpretieren kann. Genau deshalb möchten Sie eine Fallback-Option festlegen. Aber was, wenn Sie tatsächlich wollten, um diese Sophia oft Familie verwenden? Nun, es gibt einen Weg, wie wir das tun können. Was Sie tun möchten, ist, dass Sie zu Ihrem HTML-Dokument gehen möchten und wo Sie dann Ihr Head-Tag haben , werde ich einen Code hier einfügen und hier ist es. Grundsätzlich bereite ich den Link zur Telefonfamilie von Sophia und das ist genau hier. Es ist ein P s und dann Telefone, die Google ap istock Com Force letztes Jahr sagt, und dann Familienanrufe. Sophia, lass uns das nicht retten und sehen, was passiert. Wir gehen zurück zu meinem tapferen Broza bezieht die Seite, und jetzt können Sie sehen, dass die Sofia-Familie in Aktion ist? Das ist, weil wir in dem HTML-Dokument gesagt haben, wo unsere Bälle ich die Telefonfamilie finden kann . In Fällen, in denen Sie einen regulären Google-Fonds für Ihren Text festlegen und es scheint nicht zu funktionieren, möchten Sie zu Ihrem Head-Tag gehen und dann diese Art von Link anhängen. So ersetzen Sie einfach Sophia durch den Namen der anderen aus der Familie, die Sie tatsächlich verwenden möchten . Aber das wurde gesagt, Lassen Sie mich einfach sagen, dass ich Ihnen später in diesem Kurs einen besseren Weg zeigen werde. Lincoln Ah, Brauch. Google-Formulare zu Ihrem HTML-Dokument. Das funktioniert perfekt. Es ist nur, dass es die Geschwindigkeit von Ihrer Website beeinflussen könnte, wenn sie geladen wird. Weil jetzt Ihre Website, es muss zunächst einmal mit Google verknüpft und dann finden Sie die Spaß Familie, die Sie angegeben haben erbt in der Regel viel besser, dass Spaß Familie vor Ort auf Ihrem Webserver zu haben . Ich zeige dir, wie du das später machen kannst. Also mach dir keine Sorgen. Ich geh wieder rein und ziehe Sofia zurück. Teoh Monserrat wird dem nicht dienen. Gehen wir hier wieder rein. Lasst uns retten. Gehen Sie zurück zu einem Broza waren zuerst eine Seite und da gehen Sie. OK, also ist das typischerweise wieder für die lustigen Familien. Nur eine kurze Zusammenfassung. Sie haben Ihre websicheren Mittel und möchten eines von ihnen für Ihre Fallback-Option für Ihren Text festlegen . Sie wollen in der Regel mit den sensorischen Fonds für Ihren Kopf gehen, wie Sie mit einem Serie Fonds gehen könnte und auch für Google-Telefone. Viele von ihnen würden normal mit Ihren Browsern laufen. , In bestimmten Fällen,in denen es nicht zu laufen scheint, dann möchten Sie zu Ihrem HTML-Head-Tag gehen und dann diesen Link direkt hier hinzufügen. Fügen Sie dann den Namen der Telefonfamilie hinzu, die Sie mit Ihrer Website verknüpfen möchten. Also, das ist es zum Spaß. Familie. Danke, dass Sie zugesehen haben. Wir sehen uns in der nächsten Klasse. 29. Andere Schrifteigenschaften: schon. So haben wir uns im vorherigen Video erfolgreich mit der Fondsfamilie befasst. Aber jetzt werfen wir einen Blick auf einige zusätzliche Texteigenschaften mit CSS. Und wie Sie sehen können, habe ich bereits für zusätzliche Eigenschaften hinzugefügt. Wir haben die Schriftgröße, die natürlich die Größe eines Textes angibt. Dies kann von einem Pixel bis zu 10.000 Pixel gehen, und es hängt wirklich davon ab, wie groß oder wie klein Sie Ihre Buchstaben erscheinen möchten. Und dann hat das Frontgewicht Sie im Grunde erfrischt. Wie fett oder wie hell der Text wäre. Jetzt ist der Wert hier, den Sie sehen, 600. Aber Sie haben andere Werte, wie fett, leichter. Also bin ich nur entfernen diese 600 mal sehen Entwicklung, die wir haben. Also haben wir leichtere, mutige Felsbrocken und dann normal. Normal ist natürlich der Standardwert, Aber wie gesagt, Aber wie gesagt, besser als mit leichterem Felsbrocken zu gehen, können Sie es in Zahlen angeben, mit denen Sie gehen können, wie 300 zum Beispiel, 405 100. Also, als Beispiel, lasst uns einfach voran gehen und Thistle retten. Es ist der Unterschied. Es sind also 300, die sehr, sehr leicht sind. Gehen wir zurück, um es frisch zu halten. So jetzt können Sie sehen, dass dies der Wert von 300 ist. Aber wenn wir zurückgehen und ich sagte, weißt du was? Ich werde das 700 machen. Nun, das wird viel mutiger. Gehen wir hier wieder rein. Aktualisieren. Jetzt überlegen Sie Texas. Ah, viel ist zusammengeklappt. Beachten Sie jedoch, jedoch, dass die Werte hier von der Fondsfamilie abhängen. Nicht alle lustigen Familien werden Werte für 607 100 oder sogar 800 haben. Es hängt alles von der Frontfamilie ab. Viele Male werden Sie feststellen, dass die meisten lustigen Familien zumindest eine leichte Variation haben würden, die normalerweise 304 100 ist. Sie werden die normale Version haben, die normalerweise 500 dann eine fett Variation ist, die normalerweise 700 oder 800 ist. So können Sie einfach mit Entwicklern spielen und sehen, was für $5 sind mit dem angegebenen Spaß für mich verfügbar , dass Sie jetzt Zeilenhöhe gewählt haben. Natürlich zeigt dies die ah, die Entfernung zwischen unseren Wäldern auf einer anderen ah-Linie. Im Moment sind das 16 Pixel, aber demonstrieren Sie, lassen Sie uns jetzt voran und ändert den Wert bis zu, sagen wir, 24 Pixel. Du kannst also verstehen, was ich hier zu sagen versuche. Nun, gehen wir weiter und speichern das. Lassen Sie uns zurück zu Ihnen über bezieht sich auf Seite So jetzt können Sie sehen, dies ist 24 Picks. Außerdem gibt es keinen Abstand mehr zwischen den Textzeilen, die wir haben. Sie können sehen, das ist, was die Linienhöhen im Wesentlichen tut. Und dann haben wir auch einen Buchstabenraum und der Abstand zwischen den Buchstaben zwei Pixel ist was wir derzeit haben. Lassen Sie uns diese acht Pixel machen, damit Sie den sehr offensichtlichen Unterschied sehen können. Gehen wir hier wieder rein. Das sind also zwei Pixel, und jetzt sind das acht Pixel, was natürlich nur schrecklich ist. Idealerweise möchten Sie keinen Salatpatienten verwenden. In den meisten Fällen haben Sie andere Eigenschaften, worüber wir in nur einem Moment sprechen werden. Aber es gibt noch eine weitere, über die wir wirklich reden müssen, und das wird jetzt die Farbeneigenschaft sein. Bisher wurden wir verwendet, um Werte wie blau, rot grün zu geben , aber mit CSS und sogar mit extremen el haben Sie tatsächlich Zugriff auf Tausende und Tausende von verschiedenen Arten von Farben. Nun, wenn Sie zu html Kalakota dot com hier gehen, werden Sie diese Bar sehen, und genau hier können Sie die Art von Cola wählen, mit der Sie gehen möchten. Buchstäblich. Die Millionen, natürlich zur Verfügung stehen, sind hier drin. Also, was Sie tun möchten, ist, wenn Sie einmal gewählt haben, Sie mögen eine bestimmte Variante der Farbe. Hier haben Sie, was als die Hex-Werte bekannt ist. Einfach kopieren Sie hier entwickelt. Und dann können Sie das einfach für Ihren Textwert in Coal Valley anwenden. Also lasst uns das machen. Ich werde jetzt vorgehen und das retten. Das wird so aussehen wie alle Verletzten. Gehen wir zurück zu einem Texturbefehl aktualisieren. Und jetzt können Sie sehen, dass alles jetzt wie eine Orange ist. Also wieder, Sie können dies verwenden, um sehr spezifische Halsbänder auszuwählen, die Sie auf Ihren Text anwenden möchten. Das ist also ziemlich 81 mehr Sache zu erwähnen, wenn Sie zu den w drei Schulen dot com CSS gehen und dann nach dem CSS-Text suchen, der hier den ganzen Weg hier unten passiert, werden Sie einige zusätzliche Eigenschaften sehen, wie den Richtungstext Dekoration. Hier können Sie angeben, ob Sie auf der Linie möchten. Deine SMS. Vielleicht fügen Sie einen Bindestrich hinzu. Dinge wie diese haben Sie einen Textüberlauf , über den wir ein bisschen später sprechen werden. Sie haben Gemeinderaum, in dem ist wie Lasst uns Becken. Aber jetzt handelt es sich um den Abstand zwischen Wörtern in Ihrem Text und dann natürlich vertikal ausgerichtet , über den wir später heute darüber sprechen werden. Ein paar weitere Eigenschaften, die wir diskutieren, wie wir im Kurs weiter. Aber vorerst sind dies normalerweise die beliebtesten Eigenschaften, die Sie auf Ihren Text anwenden würden. Ein Monat, bevor ich zusammenkomme, ist das die Polizei? Denken Sie daran, dass alle diese auch auf Ihre Überschriften, Ihre H, anwendbar sind. Es ist Student jemand und auch, zum größten Teil, Ihre acht Tags als auch. Grundsätzlich jede Art von Text aus auch unsere Listen. Also denke ich daran, zuzusehen. Wir sehen uns in der nächsten Klasse 30. CSS Kurse und IDs: Lassen Sie uns weiter mit unserer Reise in die Welt von CSS. Und schauen wir uns etwas sehr Wichtiges an, auf das man nicht verzichten kann. Wenn es um CSS-Code in. Ich möchte Ihnen eine Frage stellen. In Ordnung, gehen wir zu dir zurück. Ah, Editor Genau hier Index Punkt html Datei. Jetzt würden Sie bemerken, dass wir mehrere Dibs haben, oder? Wir haben hier einen, der der erste Tag ist, der diesen Text enthält. Wir haben hier einen leeren Dave. Wir haben auch noch einen Dave hier. Das ist ein weiterer Dave. Hier unten gibt es auch noch einen. Das enthält die Bilder und einige Absätze. Okay, jetzt könnten wir leicht herkommen und sagen: Weißt du was? Wir wollen unseren Dibs eine Hintergrundfarbe geben. Ah, weit. Sagen wir Rot nur als Beispiel, oder? Ich werde die Farbe unseres Textes entfernen. Die Staaten gehen zurück zu Schwarz. Also lasst uns das wieder auf Rotkohle machen. Nun, wenn ich zu meiner Broza gehe und jetzt eine Erfrischung... kannst du sehen, dass alle unsere Daves die rote Tasche in Farbe haben . Ehrfürchtig. Aber was, wenn du bestimmten Dave die Tasche auf Culo von Red geben willst und andere sie so lassen wie sie sind. Wie würdest du das machen? Was, wenn du eine Tasche geben willst? Onkel von Blau an Onley Einen bestimmten Dev, wie würdest du das machen? Dies ist wirklich Konzept von Klassen und ich ds kommt ins Spiel, sagen wir, mit Klassen können Sie einer Gruppe von Elementen eine Klasse zuweisen und dann den exakt gleichen Stil in alle gleichzeitig anwenden . Aber dann, mit einem I d, können Sie ein bestimmtes Element anvisieren und sein eigenes einzigartiges Styling auf das bestimmte Element anwenden . Also gehen wir zurück zu unserer Indexpunkt-HTML-Datei hier. Das war's also. Zum Beispiel. Ich wollte das allererste Leben hier geben. Wir geben ihm die Hintergrundfarbe von Red Cape. Ich werde sagen, Dave, Dave, Klasse ist gleich. Und jetzt hier drin, habe ich diesen Tag der roten Klasse gegeben. Lasst uns den alten Weg bis zum letzten Tag beruhigen , den wir hier drüben haben. Lassen Sie uns auch die gleiche Klasse von rot geben. Okay, aber dann werde ich etwas anderes tun. Ich werde in der Mitte zum Tod gehen. Eigentlich die, die die Bilder hier unten enthält. Lass uns das hier geben und wir geben ihm einen Ausweis. Eine andere Klasse, aber auf ich d off blue. Was ich also im Wesentlichen tun werde, ist, dass ich diesem bestimmten Dave die Hintergrundfarbe von Blau geben werde und die anderen beiden haben die Klasse „Lesen Sie es zurück und kühlen Sie sich ab, rot. Also, um das zu tun, gehe ich rüber. Speichern Sie einfach meine sind in der genauen Schätzdatei. Zuerst gehen wir zu unserem Stil, dass CSS Also, was werde ich hier tun? Ist das in Ordnung? Ich werde zuerst sagen, dass Punkte den Arzt nicht lesen, was er die Klasse repräsentiert. Also im Grunde sage ich, dass jedes Element, das eine Klasse von Rot hat, die Tasche und den Culo rot geben. Und dann jede Klasse, die ein i d off blue Ideen hat, haben Sie den Hashtag verwendet, um ein I d darzustellen. Alles klar, also jedes Element, das das i d off blue hat Nun, geben Sie ihm eine Tasche. Braune Farbe, Hintergrundfarbe off blue. In Ordnung, also lassen Sie es uns in die Praxis umsetzen. Ich werde jetzt weitermachen. und speichern. Lassen Sie uns gehen zu Broza bezieht sich auf die Seite und schauen Sie sich den Hut. Also ist das allererste Leben hier im Bett. Der letzte ist Invasion, während dieser in blau ist. So können Sie also genau IDs und Klassen verwenden. Aber es wird noch interessanter. Sie können tatsächlich mehrere Klassen auf ein einzelnes Element anwenden. Gehen wir zurück zu unserem Index mit jedem Samuel, richtig? Nehmen wir an, zum Beispiel, Also, wenn Sie an diesem Tag, wenn Sie in den Text in die Mitte verbünden wollten, was ich hier tun werde, ist der allererste Tag derjenige, der ein Ende von rot hat. Ich werde eine weitere Klasse des Raumes hinzufügen und dann sagen, Mitte OK, und jetzt schauen wir uns einen anderen Dave hier an. Ah, der eine Mal sehen, auf welchen anderen Def wir das anwenden können? Okay, wir haben eigentlich, ich schätze was? Ich werde diese Klasse außerhalb der Mitte nicht nur auf einen Dave, sondern auch auf ein anderes Element anwenden . Und das geht jetzt, ich werde ihm das P-Tag auf dem Zeitalter geben, das Cesar in der Praxis vorhersagt, OK, also werde ich sagen, P-Klasse ist gleich und dann, natürlich, lesen. Also wissen Sie, was ich so gemacht habe. Ich habe die Tut mir leid gegeben, nicht gelesen. In die Mitte setzen. Ich entschuldige mich. Mitte. Okay, Also gehen wir den ersten Tag der Klasse des Zentrums und auch diese p-Element direkt in der Klasse des Zentrums als auch gegeben . Lasst uns jetzt voran gehen und sparen. Das ist gut. Bewegen Sie ein Schlepptau. Ein Stil, der CSS. Ich werde jetzt noch eine Klasse hinzufügen. Das wird im Zentrum sein. Ok. Und jetzt wollen Sie hier unsere Texte auf den Satz ausrichten. Ich werde einen Text sehen. Der Linienmittelpunkt. In Ordnung, gehen wir jetzt weiter und sparen. Gehen Sie zurück zu einem Browser. Bezieht sich auf Seite und mal sehen, was wir haben. Okay, nun, sieh dir das an. Also hat der allererste Tag hier den Text in der Mitte, und dann hat das P-Tag hier seinen eigenen Text in der Mitte. Sie können sehen, dass es das ist, das direkt unter Projekten in Klammern ist. Wenn wir zurück zu unserem nächsten E-Mail-Dokument gehen, so dass Sie Vorhersagen und Pakete direkt hier und dann die p-Klasse des Zentrums sehen können . Genau deshalb wird der Text hier heiß gesendet, damit Sie sehen können, wie Sie Klassen und Ideen anwenden können . Ideen sind speziell für ein einzelnes Element. Du kannst dich nicht bewerben, und ich d auf mehr als ein Element. Ideen sind einzigartig. Sie sollen spezifisch für ein einzelnes Element sein. Aber mit Klassen können Sie Klassen verwenden, um verschiedenen Arten von Elementen Styling zuzuweisen, und es muss nicht das gleiche Element sein, das Sie hier sehen können. Zurück zum Hostel, es ist CSS. Wir haben die Klasse der Mitte auf die beiden AP-Tag genau hier und auch auf Additiv angewendet. Und wir sind auch in der Lage, dies zu tun, weil der bestimmte Stil oder Eigenschaft anwenden wollte, was Text ist. Die Zeile bezieht sich sowohl auf dibs als auch auf up-Text. Es gibt keine Möglichkeit, wird bauen, um eine Textillinie außerhalb der Mitte auf,sagen wir, ein Bild anzuwenden sagen wir, , zum Beispiel, weil Sie diese Linie auf einem Bildelement nicht nehmen können, ist es nicht nur passiert jetzt. Sie könnten auch sehr spezifisch werden, während Sie die Klasse verwenden. Sofort. Wie es ist, sind wir ST-Punkt-Zentrum im Grunde mit den Zielen und jedem Element, das die Klasse außerhalb der Mitte hat . Aber wenn auch ich hier reinkomme und jetzt p dot center sagen, diese Änderungen, denn jetzt sagen wir, dass jedes P-Tag, das eine Klasse außerhalb der Mitte hat, seinen Text an der Mitte ausrichtet. Dies ist sehr anders als Joe, sagen sind nicht geschickt. Lassen Sie es uns auf eine Probe stellen. Lasst uns retten, gehen wir. Aber du bist Broza. Lassen Sie uns die Seite aktualisieren und jetzt können Sie sehen, dass der erste Davits Text Nein ist. Ein Mädchen in die Mitte, während die P E-Klasse genau hier über der Mitte. Es ist Texas auf die Mitte ausgerichtet, also kenne ich den Unterschied zwischen der Aufnahme nur der Klasse und dann weiter, einschließlich eines Angriffselements vor der Klasse. Es gibt jetzt einen großen Unterschied zwischen den beiden. Sie könnten auch mehrere Klassen und ich ds gleichzeitig ansprechen. Um dies zu demonstrieren, werde ich Ihnen ein Beispiel geben. Lassen Sie mich einfach voran und entfernen Sie die Front. Warte hier ab 700. Alles klar, gehen wir jetzt weiter und speichern Sie das zuerst und sehen wir einfach den Unterschied. Lassen Sie uns auffrischen. Okay, der ganze Text im Moment ist im Grunde Bigelow. Und im Gewicht. Nichts ist zu mutig. Okay, gehen wir wieder rein. Lass uns das machen. Ok? Ich werde jetzt hier reinkommen und jede Klasse des Zentrums sagen, und dann war ich jetzt im Koma . Es und ich werden jede Klasse auch von rot sagen, ein anderes Komma. Und dann sage ich ein I d off blue. Und jetzt können wir die Eigenschaft hinzufügen und es im Voraus sagen. Gewicht von 700. Was ich hier getan habe ist, dass ich gesagt habe, jedes Element, das eine Klasse von Zentrum hat, alle hat eine Klasse Harvard alle eine Vorstellung von Blau hat. Machen Sie seinen Inhalt, haben einen Fonds Gewicht von 700. Wissen Sie, dass wir ein Koma verwendet haben, um die Klassen zu trennen. Und ich d's geht jetzt hier und retten Gehen Sie zurück zu unseren Mädchen sind die Seite auffrischen und jetzt können Sie sehen, dass die erste geteilte es eine Klasse von Rot hat. Es macht Spaß, es ist 807 100 bei diesem auch. Ist 700 auch, weil es eine Klasse außerhalb der Mitte hat. Während der reguläre Text hier noch Legler ist. Denn dieser Dave hat keine Klasse von Rot oder Santo auf Idee von Blau und so weiter und so weiter. So könnten Sie I e ds und Klassen nutzen. Die Quintessenz hier ist, dass Klassen verwendet werden können, um mehrere Elemente gleichzeitig zu zielen . Während Ideen verwendet werden, um ein sehr spezifisches Element zu zielen, das der Kernunterschied zwischen Klassen und Ideen ist. Und natürlich natürlich werden Sie Walker mit Klassen ausgesetzt sein. Und 80 ist viel mehr, wenn wir in diesem Kurs Fortschritte machen. Danke, dass Sie zugesehen haben. Wir sehen uns in der nächsten Klasse. 31. Die Background: Willkommen zurück. Hoffe, Sie genießen diesen CSS Kurs weit jetzt. So weit, so gut mit Explode. Ein wichtiger Weg, um einen Hintergrund Teoh Elemente hinzufügen. Und das war die Verwendung der Hintergrundfarbe Eigenschaft, die natürlich eine Tasche auf Farbe hinzufügt. Aber was, wenn Sie ein Bild hinzufügen möchten, anstatt ein Bild als Hintergrund verwenden zu wollen? Wie wird das jetzt tun? Ich möchte zurück zu dem Ordner, der enthält, sind jeweils ähnliche Dateien in Bildern voll dort? Das sind die drei Bilder, die wir haben, oder? Achte sehr genau auf, Tiu. Das zweite Bild. Das hier. Es sind 300 Pixel mal 168 Das wird sehr, sehr bald ein echtes Ereignis werden. Aber ich möchte, dass wir dieses Bild hier als Hintergrund verwenden. Also, um das zu tun, gehe ich zurück in Klammern und lass uns zu unserer Indexpunkt-HTML-Datei gehen. Und ich werde die Bilder der Tasche auf diesen leeren Dave auftragen, den wir hier haben. Die direkt über dem r bekommt Studie mit Ihren Dateien sind Kommentar. Alles klar, was ich tun werde, ist, dass ich das geben werde, Dave und ich... und ich werde diese Abschnittsstelle nennen. Also, so würden Sie mehr als einen verwenden, wenn Sie Ihre I d S.nennen wollen S. sind Ihre Klassen mit mehr als einer würde einen Bindestrich verwenden. Teoh, trennen Sie diese Worte. Okay, also Bildbereich werde ich jetzt vorgehen und die Datei speichern. Lassen Sie uns zu einem Stil Punkt CSS gehen. Jetzt sage ich Dev, es tut mir leid. Hash-Tag und dann Abschnitt Bild Abschnitt. In Ordnung, jetzt zuerst werde ich zuersteine Hintergrundfarbe hinzufügen. Zunächst einmal, also lasst uns das tun. Ah, Hintergrundanrufer. Und das wird schwarz. Alles klar, jetzt sehen wir, was sicher passieren wird. Geh rüber. Teoh Broza bezieht sich auf die Seite und Ah, na ja, wie Sie jetzt sehen können, sehen wir kein div mit einem schwarzen Hintergrund. Das liegt daran, dass der Dave jetzt, wie er ist Mt. Da ist nichts drin. Es gibt keine Steuer, kein Bild, absolut nichts. Eine Möglichkeit, tatsächlich eine schwarze Tasche in einer Farbe zu zeigen, wäre, etwas Inhalt hinzuzufügen oder wir können eine Höhe einstellen. Und mit für die Tauben, und ich werde Ihnen jetzt neue Eigenschaften von Höhen vorstellen und weil ich sagen werde 1000 Pixel und dann mit, sagen wir, 1250 Pixel, so können Sie es auf jeden Fall verstecken. Und mit für Ihre Container, Ihre Dave, Ihre Abschnitte und so weiter und so weiter. Also lasst uns weitermachen. Jetzt speichern Sie das. Gehen wir zurück zu Ihren Rechnungen sind die Seite aktualisiert und okay, so hier ist es. Moment ist es derjenige, der hier wartet, damit Sie sehen können, dass wir jetzt unseren leeren Abschnitt haben . Ich bin zu Dave mit 1000 Pixeln und versteckt 1250 Pixel und mit der Hintergrundfarbe aus schwarz. Ehrfürchtig. Okay, jetzt gehen wir zurück. Lassen Sie uns nun das Hintergrundbild anwenden. Um dies zu tun, werde ich Hintergrund-Strichbild sagen. Jetzt müssen Sie die u angeben. R L. R L. Wo werden Schwestern finden diese Datei dieses Bild, das wir uns einen Hintergrund verwenden wollen, so dass wir gehen, um Ihre von L und dann in Klammern Mäntel zu sehen. Erinnern Sie sich an den Dateipfad, den wir in HTML gelernt haben? Ich werde Bilder sagen, weil es in einem Ordner namens Bilder und Bilder ist und es wird CSS geben. Das ist zwei p und G. Dies ist die Quelle unseres Rückens auf Bild. Gehen wir jetzt sicher. Gehen Sie zurück für zuerst eine Seite und werfen Sie einen Blick auf das jetzt können Sie sehen, dass. Okay, das Bild hat jetzt die gesamte Breite und Höhe von unserem Abschnitt übernommen. Aber Sie werden auch das Warten eine Minute bemerken. Es wiederholt was? Denken Sie daran, dass dieses Bild nur 300 von unseren 168 Pixeln ist , glaube ich, aber wir stellen die Höhe und Breite dieses Abschnitts auf viel, viel größer. Als Ergebnis standardmäßig das Hintergrundbild, wiederholt CSS standardmäßig das Hintergrundbild,so dass sie sowohl mit seinem Container belegen als auch ausblenden können . Aber lasst uns etwas anderes machen. Ich werde eine neue Eigenschaft hinzufügen und das wird als Hintergrundseufzer bezeichnet. Sehr, sehr, sehr wichtig. Jetzt sieh dir das an. Automatisch ist in der Regel die Standardeinstellung. Diese Art der sicheren Option. Lass mich retten. Geh zurück hier zwei Fässer, die immer frisch sind, und du siehst, dass es wirklich keine Veränderung gibt. Grundsätzlich alles gibt es eine Möglichkeit zu sagen, Lassen Sie die Glocken wird den besten Weg aus der Anzeige der Rückseite auf Bild bestimmen . Okay, keine Veränderung. Aber wenn ich wieder reingehe und sage, du weißt was? Ich werde den Hintergrund nicht mehr wiederholen. Ein neuer Eigenschaftenhintergrund wiederholt keine Wiederholungen. Das ist richtig. Jetzt sage ich nicht das Hintergrundbild ausgewählt werden. Okay, mal sehen, was passiert. Geh zurück. Sparen Sie hier zu kommen. Sind wir jetzt frisch? Siehst du das? Mit Auto CSS wird nur das Bild so gut wie möglich angezeigt. Es wird sich nicht dehnen. Das Bild wird so sauber wie möglich angezeigt. Und dann wird für den Rest aus dem Container die Hintergrundfarbe angezeigt. kannst du sehen, oder? Okay, gehen wir jetzt zurück. Wir wechseln die Tasche auf Größe von Auto auf etwas, das als Abdeckung bekannt ist. Was ist der Unterschied? Werfen Sie einen Blick. Ich werde jetzt den Kampf retten. Geh zurück, Serbe Elza und jetzt sieh dir das an. Ich werde mich erfrischen und Blalock sieh dir das an. Grundsätzlich mit der Bucht Alu für die Hintergrundgröße sagen Hey CSS, Ich möchte, dass Sie sicherstellen, dass die Tasche auf Bild wird immer die volle mit und Höhe von seinem Behälter besetzen . mir egal, ob das Baghlan-Bild kleiner ist als der Container. Wenn Sie dieses Bild so dehnen müssen, dass es immer mit seinem Inhalt besetzt und verbirgt . Und deshalb können Sie jetzt sehen, dass das Bild gestreckt wurde, nicht klar. Es ist verschwommen und man kann sogar sehen, dass ein Teil des Bildes abgeschnitten wurde, weil, in Verzweiflung sagt, es gibt eine Belastung und sagen , Hey , okay, ich werde nur sicherstellen, dass dieses Bild immer seine Kontinentalmaterie. Was? Das ist genau das, was der Wert aus der Deckung bewirkt. Es gibt noch einen. Ein anderer Wert in diesem wird enthalten genannt. Ähnlich, aber anders. Lass uns jetzt weitermachen und das retten. Geh zurück zu unserem Boza. Wir sind frisch und das Aussehen, dass es einen Unterschied gibt, oder? Im Moment können Sie sehen, dass, obwohl das Bild noch verschwommen ist, es immer noch verschwommen ist. Sie können immer noch das gesamte Bild sehen, und Sie können sogar sehen, die Tasche und Farbe schwarz Freitag. Was nun diese enthielt, ist, dass es ein Z. Egal was passiert, ich werde immer sicherstellen, dass die gesamte Tasche auf dem Bild immer sichtbar ist. Es ist nicht so, wo die Priorität ist. Der Container, im Grunde der Bagman. Bilder gestreckt. Der gesamte Behälter ist enthalten. Es ist das Baghlan Bild selbst. Das ist die Priorität. Wir stellen sicher, dass das Hintergrundbild immer angezeigt wird. Es wird zu jeder Zeit vollständig gezeigt. Auch wenn Sie etwas Platz lassen müssen. Das ist in Ordnung. In diesem Fall jetzt, der Raum ist die Hintergrundfarbe. Das ist in Ordnung. Die Priorität ist es, sicherzustellen, dass das Baghlan Bild immer sichtbar ist, auch wenn und natürlich auch, manchmal die Tasche ein Bild Blut sein wird, genau wie mit Deckel. Aber wenigstens wird das gesamte Hintergrundbild immer angezeigt. Das ist der Hauptunterschied zwischen Abdeckung und enthalten. Gehen wir jetzt wieder rein. Zusätzlich zu enthalten Abdeckung ein Auto können Sie Werte Lexus setzen, zum Beispiel, Nehmen wir an, 75 Pixel endemisch und sagen auch, 50 Pixel. Also im Grunde nie sagen OK, wir werden die Tasche auf Websites geben und gefüttert Pixel in mit und Säuglinge Pixel in der Höhe. Mal sehen, wie dies aussehen würde wie Lassen Sie uns speichern, gehen wir zurück hier bezieht sich auf die Seite, und da gehst du. Also, jetzt haben wir das Hintergrundbild gegeben, wissen Sie, mit uns und für Pick verkauft und Kopf von 50 Pixeln, so dass Sie sehen können, es ist sehr, sehr klein. Sie könnten alle Werte wie hinzufügen, sagen wir, zum Beispiel, über andere und mit zwei verschiedenen Jungs, Nehmen wir an, 400 Pixel. Also im Grunde, was das hier tut, ist, dass wir sagen, setzen Sie ein mit off funder Pixel und dann die Höhe setzen Sie es auf auto. Das ist es, was das ist. Also lasst uns weitermachen. Speichern. Gehen Sie zurück zu Balza, aktualisiert die Seite, und sie gehen gut mit einem Fonds von Pixeln und einer Höhe eingestellt, um automatisch zurück. Wir haben auch unterschiedliche Werte für den Hintergrund. Wiederholen. Sie können mit Werten wie gehen, sagen wir, zum Beispiel, sind wiederholen X. Alles klar, also lassen Sie uns das überprüfen. Lassen Sie uns mit Wiederholung X gehen. Grundsätzlich sagen wir, dass wir die Tasche auf Bild setzen, aber Onley horizontal. Das ist am X-Ausgang. Um dies zu demonstrieren, gehen wir zurück zur Hintergrundgröße, die auf auto gesetzt ist. Okay, gehen wir weiter, sparen. Gehen Sie zurück zu einem Browser oder zuerst eine Seite, so dass Sie jetzt sehen können, es auf Lee ausgefüllt die horizontale Achse voll an der Tasche auf Bild. Richtig. Aber wenn ich wieder hier reingehe und ich sage, anstatt X-Tor mit der Wiederholung zu wiederholen, warum dies hier wird stattdessen vertikal sein. Also lasst uns sparen. Gehen Sie zurück zum Browse. Unsere bezieht sich auf die Seite und da gehst du. Jetzt können Sie sehen, es fühlt sich die Höhe von seinem Behälter besser als die mit dem Inhalt . Also, das ist im Grunde der Beutel Boden Wiederholen Sie Werte in Aktion. Jetzt gibt es eine weitere Hintergrundeigenschaft, die wir uns ansehen sollen, und das wird die Hintergrundpositions-Eigenschaft sein. In diesem Fall jetzt wird es jetztwieder in Position sein. Nun, was das ist, ist mit Rücken und Gegenwart. Sie können CSS sagen, auf welchen Teil des Bildes Sie sich konzentrieren möchten. Also, um das zu demonstrieren, was ich tun werde, ist, lasst uns entfernen. Alles klar, lassen Sie uns einfach wieder auf die Größe von Auto zu Abdeckung, und wir können sogar einfach entfernen, die sich wieder bewegt hat. Wiederholen Sie, da die Größe von Carvel so ziemlich den gesamten Kontinent bedeckt, so dass es keine Notwendigkeit zu wiederholen Also lasst uns das tun. Ich werde jetzt voran gehen und Nein retten. Ich habe noch keine Werte für den Rücken in Position hinzugefügt. Also gehen wir zurück zu unserer Broza. Aktualisieren Sie die Seite und okay, so jetzt können Sie das sehen. Ist das der Fehler? Dieser Status zeigt das Baghlan-Bild an. Wenn es sagt, dass zu decken, Sie können einen Teil des CSS hier abgeschnitten wurde. Aber was, wenn ich hier reinkam und ich für die Position sagte, konzentrieren wir uns auf die Mitte von einer vertikalen Achse und auch abweichend vom rechten Ausgang, also konzentrieren wir uns in der Mitte des Bildes. Stattdessen lassen Sie uns speichern Gehen Sie zurück zu unserem Browser, verweist auf die Seite, und jetzt können Sie sehen, dass CSS jetzt seinen Fokus verschoben hat, so dass das Bild jetzt richtig in seiner Mitte ist ein Split, wahrscheinlich an seiner eigenes Zentrum. Jetzt können Sie alle seine E-Mails sehen und Sie können alle aus CSS sehen. Aber es gibt andere Velas schwächere Sitzen auch in ihm. Wir können gehen, aber sagen wir, links. Und dann könnten wir hier auch unten sagen. Dies ist eine Möglichkeit, lasst uns jetzt voran gehen sparen. Geh zurück, Teoh, durchstöbern unsere Erfrischung, und jetzt siehst du, dass die Konzentration auf der linken Seite und dann unten liegt. Da ist die Konzentration hier. Aber wenn ich wieder hier reingehe und ich wechselte zu, sagen wir, Rechte unten statt sicher, Gehen Sie zurück zu einem broza, bezieht sich auf die Seite und wie Sie sehen können, der Fokus hat sich jetzt stattdessen nach rechts aus dem Bild verschoben und dann die unten. So können Sie sehen, dass dies immer ist, wie Sie die Art und Weise ändern können oder in dem Winkel, mit dem Sie sagen wollen, ist es, Ihr Bild bei und in der Regel für die ersten Werte hier in anzuzeigen. Sie gehen normalerweise entweder mit links oder rechts oder vielleicht sogar mit der Mitte, und dann für den zweiten Wert wäre dies für die vertikale Achse entweder oben in der Mitte oder unten, also ist das die Hintergrundposition in Aktion. Natürlich werden wir uns das etwas spät ansehen, sobald wir mit dem Aufbau unserer Website beginnen. Aber das sind die häufigsten hatten die Cornell-Hintergrundeigenschaften, besonders wenn es um den Umgang mit dem Hintergrundbild geht, mit dem Sie zu tun haben, wissen Sie, Baghran-Größe zurück auf wiederholte Baghlan-Position auf, natürlich das Hintergrundbild selbst. Sie könnten mehr als mehr Burger ein Bild setzen, wenn Sie möchten. Es ist möglich, aber wir werden uns so viel ansehen, viel später. Will damit beginnen, unsere Website zu bauen, aber für jetzt war dies, wie Sie Ihre Tasche auf Bild setzen. Aber nachdem das Bild s Ihr Hintergrund dort gewarnt hat, ist weniger Intimation, die immer sicherstellen, dass die Bilder, die Sie als Hintergründe verwenden werden, zumindest gleich groß sind wie der Container, mit dem Sie sie anwenden möchten . Also, im Idealfall, wenn wir gehen, um ein Hintergrundbild für diesen Abschnitt anwenden, mit der Höhe der 1000 Pixel auf der mit off unsere 12 50 ideal Build sind mit diesem Bild gegangen . Das hier, das Größere. Die Schwestern, die PNG umherwanderten. Dies wäre ein viel besseres Bild als Ihre Tasche zu verwenden, und weil es sehr, sehr groß ist, ist es groß genug, um die Breite und Höhe von unserem Abschnitt zu kompilieren. Stellen Sie also als Erinnerung immer sicher, dass Ihre Hintergrundbilder, das eigentliche Bild selbst, groß genug sind, um die volle Breite und Höhe außerhalb des Kontinents zu belegen. Sie beabsichtigen, sie auf diese Weise zu setzen. Sie werden nie auf diese Weise gestreckt werden. Es wird immer so sauber wie möglich angezeigt. Das ist es für Hintergrundbilder. Wir sehen uns im nächsten Video. 32. Eigenschaften anzeigen: Lassen Sie uns nun über eine bestimmte Eigenschaft sprechen, die Sie sehr nützlich finden würden, und das wird die Anzeigeeigenschaft jetzt sein. Wir haben darüber wirklich ein wenig kurz diskutiert, wenn wir über HTML und speziell die Unterschiede zwischen den Zeilenelementen und Block-Level-Elementen sprechen . Nun, so wie ein Auffrischungsblock Level Elemente sind Ihr Kopf in eine Kirche gewonnen Entschuldigung Ihre P-Tags , Ihre Debs und sie stehen typischerweise allein auf einer Linie, die sie nicht stehen oder sitzen nebeneinander eine Zeile. Elemente können tatsächlich nebeneinander bleiben, und dies neigen dazu, Ihr Hyperlink, Rollbahn-Tags, Bilder und so weiter zu sein Rollbahn-Tags, . nun Mit der display-Eigenschaft können Sienundie Art und Weise ändern, wie Elemente auf Blockebene angezeigt werden, und Sie können auch die Art und Weise ändern, wie in Linienelementen alle als Beispiel angezeigt werden. Hier drüben haben wir unsere H eins, die sagen, dass wir Prominente CSS bekommen. Und dann haben wir hte, dass dies Ihr Führer jetzt standardmäßig ist, natürlich, sie sind jetzt auf separaten Zeilen, wie Sie sehen können. Aber wenn ich zu meinem Stil zurückging, dass CSS und ich sagte, Ich werde eine neue Erklärung hinzufügen und sagen h ein h zwei Lassen Sie uns öffnen. Unser Kollege Brace ist jetzt die Immobilie aus dem Display. Ich werde ihm einen Wert geben, der in der Reihe ist. Alles klar, das ist sicher. Gehen Sie zum Browser, aktualisieren Sie. Und jetzt können Sie sehen, dass die H ein und H ankündigen bleiben Seite an Seite. Wir könnten etwas entgegengesetztes mit den Bildern hier unten machen, Sie können sehen, dass Bild zwei und drei nebeneinander sind. Wenn wir ihnen eine disparate Eigenschaft aus Block geben, dann werden sie auf ihrer eigenen separaten Zeile sein. So sind das die Menschen. Aber es funktioniert, aber es ist eigentlich ein anderer Wert , über den ich reden möchte. Und es wird der In-Line-Blockwert genannt werden. Wie genau funktioniert das? Sie sehen, dass Sie dem Linienelement oder einem Blockebenenelement standardmäßig keine Höhe oder mit hinzufügen können. Aber wenn Sie ihnen eine Anzeige aus im Zeilenblock geben, werden Sie dann in der Lage sein, sie mit einem Set mit Let's do this zu versorgen. Ich werde unsere Erklärung entfernen, die in der Schlange für H ein h zwei bleibt. Ich werde hier runterkommen und ich werde Bild sagen. In Ordnung, also komme ich in drei Bilder im Originaldokument. Ich werde hier reinkommen und sagen „Anzeige“. Jetzt sieh dir das an. Ich werde sagen, im Zeilenblock, Ordnung. Und jetzt werde ich Ihnen sagen, mit 33 Prozent. Also im Grunde, ich sage alles in Ordnung, jedes Bild in unserem HTML-Dokument zeigt sie als In-Line-Block an und gibt ihnen dann einen mit 33%. Diese, die 33% bedeutet einfach das dies in Bezug auf ihren Container ist. In diesem Fall jetzt, wenn Sie hier rüber kommen, würden Sie feststellen, dass die drei Bilder im Inneren eines Todes mit einem i d off blue sind. Im Grunde nimmt das erste Bild 1/3 der Breite des gesamten Deve-Containers ein. Dann wird eine zweite Zeile der dritten und dann die letzte auch 1/3 besetzen. Das ist es, was das einfach bedeutet. Lasst uns weitermachen. Sicheres Dokument. Lass uns jetzt rüber gehen und sehen, was jetzt passieren wird. Beachten Sie, dass das erste Bild natürlich sehr, sehr groß ist . Mal sehen, was passiert. Ich werde aktualisieren, und jetzt können Sie plötzlich die drei Bilder sehen und jetzt Seite an Seite, weil wir ihnen ein Set mit 33% gegeben haben. Aber bevor wir ihnen ihre mit einem 33% geben konnten, mussten wir sie einstellen oder ich gebe ihnen den Anzeigewert im Line-Block aus. Das ist also, wo in Lyon Block wird Gunst nützlich sein, wenn Sie eine Höhe einstellen oder zur Verfügung stellen wollen , oder mit entweder einem Blutspiegel Element oder einer Fluggesellschaft Elemente, die Sie ihnen geben wollen, um Wert aus England Block zuerst anzuzeigen. Jetzt gibt es eine weitere Eigenschaft oder einen anderen Wert, was der Wert aus ist? Keiner im Grunde. Also jedes Ja, und Sie wissen, was das Element nicht anzeigt. Also, wenn sie das speichern, gehen wir zurück, um zu durchsuchen kommen hierher. Aktualisieren. Na ja, da gehst du. Jetzt keine Bilder mehr. Die Frage ist natürlich, natürlich, wann würden Sie diesen bestimmten Art-Off-Wert für die Anzeige verwenden? Dies ist in der Regel bei reaktionsfähigen Displays sehr beliebt. Menü Gestaltung Ihrer Website, um gut auf einem mobilen Gerät aussehen. Es gibt bestimmte Elemente oder Inhalte, wie vielleicht Animationen, Schieberegler, die auf einem Mobiltelefon nicht so gut aussehen. Du könntest das also ausdrücklich sagen. Hey, wenn jemand diese Website auf einem Mobiltelefon ansieht, zeigen Sie dieses Licht nicht an. Ich habe dieses Bild oder so etwas nicht angezeigt. Also, hier könnten Sie den Wert aus verwenden. Keine für die Eigenschaft aus diesem Spiel. Lassen Sie mich weitermachen. Wir bewegen das „Hören Sie zurück, um im Linienblock anzuzeigen, Junge. Also, das war's. Vielen Dank, dass Sie zugesehen haben. Wir sehen uns in der nächsten Klasse. 33. CSS Reine: Willkommen zurück. Lassen Sie uns nun über andere abgesetzte Eigenschaften sprechen, die sehr, sehr wichtig sind . Und wir sprechen über Ränder, Muster und Grenzen, und diese sind sehr wichtig für die Art und Weise, wie Ihre Inhalte sind. Das hat gespielt. Aber was genau sind diese drei? Was ist in der Marge? Was ist Polsterung? Was ist eine Grenze? Nun, um das zu demonstrieren, werden wir einige Dinge tun. Zuallererst dachten wir, HTML-Dokument. Ich werde diese Idee für den Dave entfernen, der unsere Bilder hält. Und dann hier unten, der allererste Pitak am Muttertag. Ich werde das mal ausprobieren, und ich d Entschuldigung, ein I d von ah, sagen wir orange. Okay. Und dann wird das nächste Tag sein, ich gebe ihm ein I d von sagen wir grau. Okay, lassen Sie uns speichern, gehen Sie zu einem Stil, den CSS Jetzt überprüfen Sie dies. Okay, ich werde die 1. 1 geben, die orange ist. Das ist ein P alle Interesse an einer sehr spezifischen Kelly Zahnspangen öffnen. Lassen Sie uns eine Hintergrundfarbe von Orange geben, offensichtlich, und dann geben wir ihm eine mit, sagen wir, 475 Pixel und dann werde ich ihm eine Höhe von 100 Pixel geben. In Ordnung, ich werde weitermachen und alles kopieren. Und dann werde ich einfügen, und dann werde ich einfach das i d off orange hier in grau ändern. Und dann natürlich auch geht Jenny natürlich auchCola hierher von Orange nach Glee. Lasst uns retten. Gehen Sie zu unserem Boza, aktualisieren Sie die Seite und lassen Sie uns sehen, was wir haben. Und da gehst du. Alles klar, beide Vorwand. Mit dem zurück auf Kahlo's und mit einer Höhe von 100 Pixeln mit allen 475 Pixeln Jetzt können Sie feststellen, dass der Text direkt am Rand seines Containers ist. Schauen Sie nach links und es wird nach rechts von der AHL schauen. INGE Pitak, Sie können sehen, warum hat das D für Ende? Es ist direkt neben dem Vorstand. Es ist direkt neben dem Rand. Wie schaffen wir Raum, bevor ich Ihnen zeige, wie das geht? Lasst uns Grenzen hinzufügen, oder? Ich werde hier reinkommen und sagen „Grenze“. Zwei Pixel. Solides Rot. Was genau habe ich nicht gehört, haben einen Rahmen um das P-Tag hinzugefügt und ich sagte, machen Sie es dick aus zwei Pixeln. So wählen Sie zwei Pixel stellt die Dicke außerhalb des Rahmens. Sollied bedeutet die Art des Körpers, weil Sie einen festen Körper haben können, Sie können eine Tochter gestrichelt und so weiter, und dann rot stellt die Farbe außerhalb des Rahmens dar. Ich werde voran gehen und sparen. Geh wieder hier rein. Wir sind frisch, und jetzt siehst du die Grenze genau dort. Trotzdem ist der Text direkt neben der Grenze und hier drüben sowie das Texas direkt neben dem Rand seines Containers. Wenn wir also etwas Raum zwischen dem Text schaffen wollten und es alle Container gekauft hat, müssen wir Muster verwenden, die Muster sind, um den Raum zwischen Inhalten zu schaffen . Aber es ist ein Bild. Ah, Text oder jede Art von Element schaffen im Grunde Raum zwischen diesem Element und seiner Grenze oder Container. Also, wenn ich zurück zu Klammern gehe und ich sage für das erste P orange, lass uns hier reinkommen und sagen, dass 20 Pixel abfüllen. Okay, sparen wir. Gehen Sie zurück hier für zuerst die Seite, und jetzt können Sie sehen, dass es viel mehr Platz um 20 Pixel von den oberen 10 Pixeln auf beiden Seiten. Der Boden. Es ist irrelevant, weil es war. Es gibt immer Abstand zwischen dem Text auf der Unterseite, um damit zu beginnen, weil wir den Container mit Höhe von 100 Pixel gegeben haben, wenn wir keine Höhe zur Verfügung gestellt haben. In der Tat, lassen Sie uns das tun. Lassen Sie uns die Höhen vollständig entfernen. Also auch hier keine Höhe von 100 Pixeln mehr. Keine Höhe mehr von 100 Pixeln. Lasst uns retten. Gehen Sie zurück zu den Rechnungen, aktualisieren Sie und jetzt können Sie den Unterschied sehen. Das erste p-Tag sieht viel sauberer und sauberer aus, weil es klopft, während der zweite sehr, sehr rau aussieht , weil es keine Polsterung gibt. Aber lasst uns das ändern. Okay, ich gehe zurück zu Klammern und nicht für das zweite p-Tag, das ist derjenige mit der Idee von großartig. Ich werde hier reinkommen und sagen, Padden, Padden, sieh dir das an. Ich sage 10 Pixel und dann 20 Pixel. Sie würden den Unterschied bemerken, dass wir in der 1. 1 hier Muster 20 Pixel gegeben haben. Hier sind es 10 Pixel. 0 10 Pixel, nicht 10 x Entschuldigung. 10 Pixel und dann 20 Pixel. Der Unterschied hier ist, dass es in diesem Szenario ist, in dem Sie zwei verschiedene Vela's für Ihr Muster haben . Die Freunde Vela werden nach oben und unten sein. Die zweite wird für die Seiten links und breit sein. Also lasst uns das retten. Go Bachir Barrels sind zuerst eine Seite und sie gehen Sie jetzt P Tech Nummer zwei hat 10 Pixel von oben und unten 20 Pixel nach links und Licht. Es gibt einen anderen Weg, wie man weiße Muster hier drinnen kann. Sie können 1/3 Wert geben und dieser Kerl ist jetzt wird es 50 Pixel sein. Was dies tun wird, ist 10 Pixel oben, 20 Pixel für beide Seiten, 50 50 Pixel vom unteren Safe. Gute Boxer Fässer werden die Seite aktualisiert und da geht's. Jetzt hat der Boden 50 Pixel, oder? Es gibt sogar 1/4 Weg direkt in unseren Mustern. Und da ich jetzt 1/4 Wert in diesem Fall zur Verfügung stelle, werde ich 100 Pixel sagen. Wenn Sie erraten können, was das hier bedeutet, ist, dass 10 Pixel auf der oberen 20 von teilt heftig von der Unterseite 100 von der linken Speichern Gehen Sie zurück zu ihren Bögen heraus, aktualisieren und wie Sie sehen können, dass die linke hat die meisten, weil es 100 Pixel und die andere Muster bleiben gleich. Das sind also die vier verschiedenen Möglichkeiten, wie man sich abschreiben kann. Ihre Musterung kann eine gültige entwickelt drei Werte oder vier Werte geben. Ok, genial, wunderschön. Wir haben gesehen, was Grenzen sind etwas Muster sind. Was ist mit Margen? Was genau ist eine Marge? Ränder werden verwendet, um Raum zu schaffen, ein Abstand zwischen einem Element in einem anderen. Es unterscheidet sich von Rändern, die Raum zwischen einem Element und seinem Container schaffen, oder seine Rahmenmuster sind interner. Die Ränder sind externe Ränder ist jetzt in Ordnung, Weihnachten zwischen einem Element in einem anderen. Wenn ich hier reinkomme, habe P orange und ich sagte, Ma Jing, schau dir das an. Unten 100 Pixel. Ich werde retten. Gehen Sie zurück nach Ambrose Sind die Entfernung zwischen dem ersten Pitak und der zweiten rechts hier. Es ist nicht so viel richtig, aber wenn ich jetzt aktualisiere, können Sie sehen, dass es viel mehr ist, weil wir ihm eine Marge gegeben haben. Unterer Wert von 100 Pixel. Grundsätzlich haben wir von unten aus dem Pitak mit der Idee gesagt. Orange gab eine Entfernung von 100 Pixeln zum nächsten Element, das zufällig das p-Tag mit dem i d off grey ist, wir könnten diesen gleichen Effekt erzeugen, indem wir genau das Gegenteil hier kommen und sagen OK, ah p Grau. Lassen Sie uns Ihnen einen Rand von den oberen 100 Pixel sicher. Gehen Sie zurück zu den Broza bezieht sich auf die Seite, und es gibt keinen Unterschied, weil wir einfach die gleiche Anzeigetafel verlassen haben, indem Sie die Werte auf die entgegengesetzte Weise ändern . Also Vorfälle, die den P orange Rand unten von 100 Pixel mit BNP gegeben große vorstellen Top-Wert von 100 Pixel, so dass Sie auch breite Rand linken Rand. Warum es können Sie die für diejenigen auf die gleiche Weise beendet haben. Sie könnten sogar Muster auf die gleiche Weise schreiben. Also Gewalt sagen, klopfte 10 Pixel von oben, können Sie sagen klopfen oben und dann 10 Pixel. Dies ist im Wesentlichen eine kurze Art zu schreiben Op Ed enthüllt für alle vier Seiten. Wenn Sie Padding für nur eine Seite hinzufügen möchten, lassen Sie es uns einladen. Sie würden sagen, Entschuldigung Strich Lichter. Okay, also bedenken Sie das. Eine weitere Sache, die ich erwähnen muss, bevor ich dies umdrehe, ist ein Muster nie negative Werte haben kann . Es ist unmöglich. Marge ist, auf der anderen Seite, kann negative Werte haben. Sieh dir das an. Okay. Ich gehe zurück auf den Platz. Sieht gut aus, oder? Die Art von Idee sieht anständig aus. Aber was, wenn ich hier reinkomme und sagte: Weißt du was? Entfernen wir den Rand oben, aber ich sehe ihn nicht. 100 Pixel. Ordnung, ich werde hier reinkommen und sagen negative 25 Pixel. Was wird passieren? Ist das sicher? Geh wieder rein, Refresh. Und jetzt können Sie sehen, dass das zweite p-Tag im Wesentlichen in das erste p-Tag gesprungen . kannst du sehen, oder? Wenn ich zurückgehe, erhöhen wir den Wert hier auf 50 Pixel. Verdoppeln wir es. Komm wieder rein. Aktualisieren. Und jetzt können Sie sehen, dass es jetzt noch mehr aufgestanden ist, also ist dies der Effekt aus. Hinzufügen eines negativen Werts für Ihre Ränder. Es gibt Situationen, in denen Sie etwas wie dieses verwenden möchten. Sie könnten in der Regel beinhalten Sie versuchen, sagte vielleicht wie ein Hintergrundvideo für Container, und er bemerkte, dass Sie auch wollen, dass die Tasche rund um unser Video einen anderen Behälter als auch besetzen . Dies sind die Art von Szenarien, in denen Sie möglicherweise wie eine negative Marge verwenden müssen. Es ist nicht sehr üblich, aber es gibt Verwendungen dafür, wie Sie beginnen, Seiten mit CSS HTML aufzubauen. Sie möchten vielleicht traditionelle Ränder verwenden, in denen Sie möglicherweise negative Ränder verwenden müssen, aber größtenteils müssen Sie sie nicht als solche verwenden. Also ich bin gerade geändert diese 50 Pixel zurück zu nur ein Glas speichern 50 Pixel speichern. Geh zurück, lass uns einfach erfrischen und los gehst du. Das ist im Wesentlichen für Mougins. Muster und Board haben natürlich viel mehr mit ihnen zu tun, während wir in diesem Kurs vorankommen. Danke, dass Sie zugesehen haben. Wir sehen uns in der nächsten Klasse 34. CSS Box-Modell: Alles klar, bevor wir im Kurs Fortschritte machen. Ich möchte über das CSS-Box-Modell sprechen, weil es wichtig ist, dass Sie genau verstehen Auszeichnung. Das ist eigentlich. So. Das Box-Modell wird verwendet, um die Gesamthöhe zu berechnen und mit oft Element, so als Beispiel , wenn Sie vorhaben, die Summe mit Ofenelement zu berechnen, wäre dies die von, wie Sie die mit haben würden, sagten sie, mit der Elemente zu beginnen. Und dann haben Sie plus das linke Pad und das weiße Pad in der linken Grenze weißen Rand, wenn es gibt. Und dann natürlich der linke Rand und dann der rechte Marsch. Und dies wird die Formel für die Berechnung der Summe mit oft Element auf so ziemlich die gleiche Weise sein. Sie können die Gesamthöhe eines Elements berechnen, indem Sie zuerst die eingestellten Höhen und dann das obere Adam untere Muster, Rand und dann den oberen Rand und den unteren Rand hinzufügen. Dies wäre der Weg, um die Gesamthöhe von einem Element zu berechnen. Es ist also eine Formel im Kopf. Lassen Sie uns versuchen zu berechnen, dass mit R P-Tags nicht gut funktioniert und ausblenden. Also fangen wir mit P orange an. zuerst die Summe berechnen, mit der Lassen Sie unszuerst die Summe berechnen, mit derhier nicht lebt, wird das Set mit zuerst sein , was , für 75 ist und dann bemerken, dass wir zwei Pixel Grenze links und weiß ab zu Pixel haben , so wird das vier Pixel sein. Dies wird auf die fünf plus vier und dann die Pad Internet-Pixel auf allen Seiten gezwungen werden. Also verlassen heute Abend wird es ein Muster aus für die Pixel kombiniert haben. Also wird es in fünf plus vier plus 40 gezwungen werden, die dir 519 geben sollten. So ist es wenig mit aus dem Peter mit der Idee von Orange ist 519. Aber was ist mit der Höhe? Es gibt keine eingestellte Höhe, also gehen wir einfach mit einem Patent allem, aber Sie werden für die Pixel sein, weil wir ein Haustier in 20 von den oberen 20 von unten und dann noch vier haben, weil wir bekam zwei Pixel Grenze von oben und unten, also wird es 40 plus vier sein, was Ihnen 44 Pixel in der Höhe geben würde. Was ist mit dem zweiten Peter Reglementiert mit einem I d off. Großartig. Sie können dieses Video pausieren und versuchen, die Gesamthöhe mit einer Gesamthöhe von diesem Element Composer-Video jetzt zu berechnen . Und ich werde voran gehen und lösen das Also was ist mit der Summe mit zuerst, wir haben sie mit oder 475 gesetzt und dann hier sind die Muster anders geschrieben. Aber wir wissen, dass der zweite Wert hier für das Recht ist. Der dritte Wert hier ist für die linke. Es gab keine Grenzen. - Das ist in Ordnung. Also gehen wir einfach mit 4 75 plus 20 plus 100, die Ihnen 585 für wenig mit geben sollten und dann für die Gesamthöhe gibt es keine besagte Höhe. Aber wir wissen, dass es hier klopfte 10 Pixel ist von oben. Der dritte Kerl hier ist für die Pixel von unten. So dass sechs von Pixeln und stellen Sie sich oben. Und in ein paar der Pixel, die Ihnen ah gibt, 110 Pixel in der Gesamthöhe. Das ist im Grunde, wie man die Gesamthöhe und mit einem Element mit dem CSS-Box-Modell berechnet . Danke, dass Sie zugesehen haben. Wir sehen uns in der nächsten Klasse 35. Maximale Richtigkeit: elastisch über eine andere Eigenschaft, die Sie sehr nützlich finden würden und diese Eigenschaft wird das Maximum mit Eigenschaft sein. Was genau ist diese Eigenschaft? Nun, es wird normalerweise verwendet, um responsive Designs Ihrer Website zu erstellen. Und was genau ist ein reaktionsfähiges Design? Nun, Responsive Design ist, wenn Ihre Website würde sehr gut aussehen, unabhängig von der Bildschirmgröße. Egal, ob jemand Ihre Website auf seinem Computer, seinem Tablet oder vielleicht sogar einem Mobiltelefon ansieht, Ihre Website wird immer vorzeigbar und ordentlich aussehen. Jetzt ist die max mit Eigenschaft sehr wichtig, um einen solchen Effekt zu erzeugen. Nun, um dies zu demonstrieren, gehe ich zurück zu unserem HTML-Dokument und lass uns einen Blick darauf werfen, was wir hier drin haben. Wir haben den Dave-Abschnitt hier mit der Idee des Image-Abschnitts. Was ich tun werde, ist zu gehen, um bei CSS zu beginnen, und ich werde tatsächlich das gesamte def verstecken. Also komm her und sag Anzeige und sagen wir, äh, äh, dieses Stück ist auf keines eingestellt. In Ordnung? Okay, geh weiter und spart. Jetzt gibt es eine andere Sache, die wir tun werden, und das ist, ich werde das Set mit für die P mit dem Großen getaggt mit der Idee von Grau entfernen . Lassen Sie uns das Set mit Speichern entfernen. Jetzt gehen wir zurück zu unseren Perlen. Ich werde uns auf Page verweisen, und das ist genau das, was wir haben. Sofort. Sie können den offensichtlichen Unterschied zwischen den beiden p-Elementen sehen. Die 1. 1 hat einen Satz von 475 Pixeln. Die 2. 1 hat keinen Satz mehr mit und als Ergebnis ein Element auf Blockebene, weil es ein P-Tag ist. Es ist keine Besetzung, mit unserem A-Bildschirm zu täuschen, wie Sie sehen können. Okay, aber lassen Sie mich jetzt etwas sagen, ich Was, wenn wir diese Bildschirmgröße kleiner machen würden? Nun, an diesem Punkt, können Sie sehen, dass alles noch ziemlich gut aussieht. Und wenn Sie jemals die Größe des Bildschirms reduzieren, die die Größe des Bildschirms ist, können Sie sehen, dass sogar die Bilder kleiner werden. Der Text wird immer ist irgendwie wie in mehrere Zeilen zu brechen. An diesem Punkt können Sie jetzt sehen, das heißt, es ist immer noch ansprechbar. Und eine Möglichkeit, wie Sie feststellen können, wann eine Seite anspricht, ist, wenn Sie an dieser Stelle keine horizontale Schulbox sehen . Genau jetzt, genau hier. Sie können auch wir haben jetzt eine Bildlaufleiste Wann immer Sie dies sehen, das bedeutet, dass die Website nicht reagiert. Und das passiert, wenn es Inhalte gibt, die breiter oder größer sind als die Münzbildgröße. Und ich war als Ergebnis, Sie haben jetzt irgendwie wie einen Überlauf. Jetzt werde ich das so klein wie möglich machen und Sie können sehen Ja, wir haben definitiv irgendwo ein bisschen einen Überlauf. Wenn ich jetzt von oben beginne, kann man jetzt sehen, dass der Tag von mit rotem Hintergrund nicht überlaufen scheint , denn wenn ich mich hier verschiebe , , kann man nichts sehen. Aber wenn eine kubanische Schulung unten, alles ist immer noch ausgerichtet, ein noch ausgerichtet. Aber jetzt können Sie sehen, dass das P-Tag mit der Idee von Orange derjenige ist, der den Überlauf verursacht . Sie können mit diesem bestimmten Teil direkt hier außerhalb der tatsächlichen Bildschirmgröße sehen, und das ist, wo wir jetzt diesen Überlauf haben. Aber wenn ich weiter unten gehe, wir sicher, dass es der Einzige ist, damit Sie sehen können, dass es der einzige ist. Der finale verschiedene rote Hintergrund ist reaktionsschnell. Aber es ist dieser Haupt Peter großartig hier. Das ist nicht ansprechbar. Und der Grund dafür ist einfach, weil wir ihm ein Set mit 407 5 Pixeln gegeben haben. Aber es ist grün. Bildschirmgröße beträgt derzeit wahrscheinlich etwa 400 Pixel. Okay, also was ist die Lösung hier? Lösung besteht darin, die mit zu Max mit Safe zu ändern. Geh zurück zu ihm. Aber ich war da. Aktualisieren Sie die Seite. Und jetzt können Sie sehen, dass es keinen Überfluss mehr gibt. Die gesamte Seite ist jetzt ansprechbar. Dies ist der große Unterschied zwischen mit und Max mit im Grunde, mit Max mit uns sagen okay, gehen Sie nie über dieses Teilchen hinaus. Ah, mit diesem speziellen Set mit, wenn Sie das mit kleiner machen müssen, so dass es reagiert , dann tun Sie das auch. Genau darum geht es beim Max mit Eigentum. Das war's also. bevor ich gehe, Aberbevor ich gehe, werde ich etwas wirklich schnell sagen und es wird eine Frage sein, eigentlich. Was wäre, wenn wir RP-Tag genau hier zentralisieren wollten. Die P-Elemente wollten zentralisieren. Legen Sie es direkt dort in der Mitte von unserem Bildschirm. Wie würdest du das machen? Wir dürfen keine Textilien verwenden. Und weil Texas Grundbesitzer geht mit tatsächlichen Text. Aber wir haben es mit einem Element zu tun, das hier im Grunde zu zentralisieren. Was Sie tun möchten, ist, zum Element zu gehen. In diesem Fall ist es gerade das P-Orange. Was ich tun werde, ist, dass ich Marge und dann Null und ein Auto sagen werde. Okay, gehen wir sicher voran. Komm wieder hier rein. Nun, zuerst die Seite, und jetzt können Sie sehen, dass Ah, orange Element ist jetzt genau da in der Mitte von fragen. Dies ist also einer der CSS-Tricks, die Sie beachten müssen. Grundsätzlich, um jedes Element auf Blockebene zu zentralisieren, müssen Sie es einen Satz mit geben und dann die Ränder auf Null und Auto sagen, genau wie wir es hier getan haben. Wir geben es einen Satz mit Jetzt, Sie könnten auch die unregelmäßige mit tun und tun Marge Null auto. Es wird auch das Element auf Blockebene zentralisieren. Aber denken Sie daran, es wird nicht reagieren, aber Sie tun es max mit. Und dann sagst du Jim Margen auf Null. Ein Auto, das automatisch Ihre Elemente auf Blockebene zentralisiert. Das ist also, was für die Maxwells. Aber was denkst du? Ein Vermögen. Wir sehen uns in der nächsten Klasse. 36. Die Position: Schauen wir uns eine endgültige Eigenschaft an, und das wird jetzt die Positionseigenschaft sein. Wie Sie vielleicht bereits aus dem Namen erraten haben, es im Grunde verwendet, um die Position auf dem Element auf unserer Webseite zu setzen. Nun, standardmäßig, wenn Sie Inhalte mit HTML erstellen und Sie verwenden hört auf, es zu Stil durchsuchen als auch, Vanda solche Inhalte. Natürlich können Sie jetzt sehen, dass der Inhalt von links nach rechts geht, die Elemente übereinander stecken und so weiter, und sogar hier unten mit dem P-Tag mit der Idee von Orange waren im vorherigen Video. Wir setzen den Wert hier mit Rändern auf die genaue Mitte . Ihr Auto, Alle diese sind natürlich durch. Aber was, wenn wir es wollten? Nehmen wir an, zum Beispiel, verschieben Sie die Position von diesem P-Tag hier, etwas mehr zum Licht oder vielleicht etwas mehr nach oben. Wie würdest du das machen? Hier kommt die Eigenschaft aus Position ins Spiel. Nun standardmäßig haben wir standardmäßigeinen statischen Wert für jedes einzelne Element. Also, wenn ich jetzt hier reinkam und ich sagte Position und dann sagte ich: Ah, Ah, statisch ist das hier, es tut mir leid. Position. Das ist ein Rechtschreibfehler. Ordnung, Also, InOrdnung, Also,wenn ich reinkam und ich die Position statisch sagte, tut das wirklich nichts, weil alle Elemente standardmäßig eine statische Position haben, richtig? Aber was ist, wenn ich hier reinkomme und sagte, ich werde das ändern? Nein. Zu selten erreichen. Und ich werde einen Wert von oben 400 Pixel geben. Nun, achte genau auf. Was ist dieser relative Wert für die Position? Was das tut, ist, dass es bleibt. Betrachten Sie die natürliche Position von diesem Element. zuerst Verwenden Siezuerstseine Position als Onkel und dann von dieser Position, verschieben Sie seine Position durch die Werte ersetzen für vielleicht eine obere Schule links, Licht oder unten. Also hier drin haben wir von oben gesagt jetzt 400 Pixel. Richtig. Lassen Sie uns diesen Effekt in Aktion sehen. Ich werde zu den Kräften rüber gehen genau auf die natürliche Position dieses Elements achten. Als wäre das die natürliche Position in der Mitte. Wenn ich aktualisiere, können Sie jetzt sehen, dass es es um 400 Pixel von seiner natürlichen Position nach unten gestoßen hat. So funktioniert relativ. Dann denkst du vielleicht selbst. Warten Sie eine Minute. Haben wir nicht gesagt, dass es von oben sein soll? Ja, du denkst vielleicht, weil wir hier oben sind. Es soll den Inhalt nach oben stoßen, oder? Bono ist das Gegenteil. So funktioniert das. Wenn ich hier reinkam und sagte: Okay, Okay, lassen Sie uns 200 Pixel links machen, denken Sie vielleicht, OK, das wird sich ändern. Das Peak-Tag wird seinen Inhalt nach links verschieben, aber unter Pixel, aber es wird tatsächlich nach rechts sein. Gehen wir voran und sicher. Geh zurück zu den Rebellen, erfrischen Sie sich . Und jetzt können Sie sehen, dass es jetzt um zusätzliche 200 Pixel zum Weiß springt. Genau so funktioniert der Wert aus relativ. Und genau wie bei oben und links, können Sie auch Advil nützlich rechts und unten als gut. Denken Sie daran, dass die Werte hier neigen dazu, in die entgegengesetzte Richtung zu wirken Wenn Sie also eine gültige nach unten geben, wird der Inhalt nach oben verschickt. Sie geben Ihren Wert nach rechts, es wird den Inhalt nach links verschieben. Genau so funktioniert das. Ok, genial. Ich werde jetzt weitermachen und das entfernen. Okay, lass uns retten. Links es um den zweiten Wert für unsere Position. Eigenschaft. Und das wird der Wert von AB sein. Also, Lute, lasst uns zu unserem Index der HTML-Datei gehen. Nun, achte hier drinnen genau auf, richtig? Wir haben ein div, und statt dieses live, haben wir das H zwei b Tag. Wir haben auch eine Pizza mit der Klasse außerhalb der Mitte. Falls ich das noch nicht erwähnt habe. All diese Elemente sind im Grunde Kinder von diesen Div. Dieser Dave, der alles besetzt, ist im Wesentlichen der Vorfahren oder das Elternteil jedem einzelnen Element im Inneren hier drin. Nun, das ist wichtig zu verstehen, weil wir jetzt über die absolute Position sprechen werden . Die absolute Position ignoriert im Wesentlichen die natürliche Position aus dem Element auf wie, relativ, das sagt, OK, ausgehend von der Position, der natürlichen Position dieses Elements, lasst uns jetzt Verschieben Sie es durch soziale. Also und so mit absoluten betrachtet es nicht die natürliche Position alle für das Element. Vielmehr wird es zugeben, dass die Position vom unmittelbaren und Sinn dieses Element abgerissen hat. Und wenn es keinen unmittelbaren Vorfahren von diesem Element gibt. Es wird einfach den View-Port als Knöchel verwenden. Wovon rede ich? Kommen wir rein. Geh einfach zu Start-ups. CSS. Und ich werde diese Klasse hier anvisieren, abseits der Mitte. Ok. Die Spitze des letzten Video-Center. Lasst uns gezielt. Ich werde jetzt hier reinkommen und Stellung sagen, Position? Absolute. Und ich werde sagen, „top off“. Nehmen wir an, 20 Pixel gehen rüber zum Broza. Nun, das ist das Element des Targetings, richtig? Das ist der Text hier. Gehen Sie nie weiter und aktualisieren Sie sich. Jetzt können Sie sehen, dass es hier hochgestoßen wurde. Wie ist das passiert? Siehst du, die absolute Position hat ein Gesetz. Es hat eine Regel, und sie werden im Wesentlichen hier ist dies Zunächst wird es einen Blick auf das Element nehmen Wir haben derzeit den Wert aus absolut für seine Position in diesem Fall angewendet . Im Moment ist es die P-Klasse aus der Mitte Licht. Was wird tun, ist, dass es OK sagen wird, was ist der unmittelbare Vorfahren von diesem bestimmten Element in diesem Fall gerade jetzt ist es der Dev tut das genau hier jetzt, weil wir das nicht gegeben haben, DIV ein besagter Fellow für die Position. Es wird auf den nächsten möglichen und vernünftigen Blick, was in diesem Fall, wenn wir den ganzen Weg nach oben gehen wollen, wird es dieses Abschnitt-Tag genau hier sein, weil dieser Dave innerhalb dieses Abschnitts ist. Es wird prüfen, ob dieser Abschnitt zu sehen ist. Okay, was ist mit diesem Abschnitt? Hat es eine besagte Mitnahrungsmittelposition? Wenn dies nicht der Fall ist, wird es einen Blick auf den nächsten möglichen Vorfahren werfen , der der Körper und sie schließlich sein würde. Aber es hat nicht eine bessere, wenn der letzte letzte Vorfahren hat keine, sagte Kerl für die Position. Es wird einfach den View Port verwenden, der der Browser ist, da es ein Cole ist. Genau so funktioniert es. Also, um dies zu demonstrieren, lassen Sie uns über ihn gehen und sagen OK dafür, Dave, Lassen Sie uns diesen Dave verwenden, Wie die Knöchelpunkte sagen, Dev-Stil gleich ist und dann geben wir ihm eine Position aus relativ. Alles klar, lassen Sie uns jetzt voran und sparen, wenn wir zurück zum Browser gehen und jetzt aktualisieren, ist es hier runter gesprungen, weil es jetzt seinen Dave benutzt. Es ist ein unmittelbarer Vorfahre , der ein Dave als der und Kohlepunkt ist. Versuchen wir etwas anderes. Ich werde mir schnappen, was wir hier getan haben. Dieser Stil. Ich werde das durchschneiden, damit dieser Dave nicht mehr der unmittelbare Vorfahre ist. Wir gehen alle Opiate Abschnitt Tempo, die wir sparen. Und wenn wir zurück zum Browser gehen und wir jetzt aktualisieren, können Sie sehen, dass es jetzt hier unten ist, weil es über. Es ist hier oben, weil es jetzt diesen Abschnitt Tag als seine und Kohle verwendet. Genau so funktioniert die absolute Position. Es ignoriert die natürliche Position außerhalb des Elements, auf das der Wert von absoluten angewendet wurde. Aber ist es, auf die nächste einen Sinn Toe zu sehen, ob es eine sagte Bella dafür? Und wenn es keine gibt, wird es einfach den View-Port als eigenen Knöchel verwendet. Genau so funktioniert die APP Salute Position jetzt. Um ehrlich zu sein, finden Sie wahrscheinlich nicht zu viele Verwendungen für das Absolute. In der Tat neigt es dazu, das Layout von Websites ziemlich viel zu brechen, aber es hat seine Verwendung, und wir werden einen Blick auf diejenigen Werfen es später schlagen? Aber vorerst werde ich den Wert entfernen, weil wir ihn nicht mehr brauchen. Lasst uns retten. Lassen Sie uns zum Index des HTML gehen und ich werde auch den Stil für den Abschnitt entfernen. Okay, das ist werfen Sie einen Blick auf warn, mehr Wert für die Position, und es geht gerade jetzt, es wird der Wert aus fest sein. Alles klar, das ist sehr, sehr interessant. Eine behoben, im Wesentlichen sagen, ist das. Hey, egal was, bewegen Sie die Position nicht von diesem Element. Auch wenn der Benutzer nach unten surft oder auf Flughäfen surft. Behalten Sie dieses Element genau dort, wo es sein soll. Als Beispiel, gehen wir zurück zu unseren Glocken, was? Also in Ihrem Kopf, können Sie sehen, wie wir scrollen die Inhalte Schulen nach unten im Wesentlichen rechts. Sie können das im Grunde sehen, wie es funktioniert. Aber sagen wir, hey, wollen schnelle Editierkräfte machen und JavaScript, das Sie immer erscheinen lassen wollen, wird es nicht beheben, dass, wenn wir nach unten Schule, es nicht nach oben schult. Lass uns das machen. Ich werde über den Index von HTML gehen und es ist ah, derjenige Wo ist es? Okay, es ist genau hier. Schnelles Bearbeiten für CSS und JavaScript, rechts. Also lasst uns ist, ich werde einfach sehr, sehr schnell das geben und ich d So können wir unseren Start von CSS verwenden. Nur jucken ich d gleich und wir werden sagen Fixed Nein, richtig, Speichern wir gehen Wähler Stil, CSS und dann einfach ah, hier unten. Ich sage nur „fixiert“. Und ich werde sagen, die Position hier ist im Grunde fixiert. Okay, lassen Sie uns speichern Gehen Sie zurück zum Browser. Lassen Sie uns die Seite aktualisieren. Und jetzt können Sie sehen, dass es hier zu jeder Zeit ist, auch wenn das Ziel Ihrer Schule runter ist, es wird immer so im Wesentlichen erscheinen, es klebrig ist. Also, wenn Sie diese Navigationsmenüs sehen, die Spitze der Websites, die immer Tag sind, auch wenn Sie dort unten im Grunde diesen Wert genau hier aus für die Position aus den Navigationselementen davon fixiert ist einer der die besten Verwendungen für diesen bestimmten Wert. Sie können es verwenden, um klebrige Menüs an der Spitze Ihres Browsers und natürlich einstellen. Wenn Sie dieses Alter setzen wollten, um ganz oben zu wiederholen oder einfach hier rein zu kommen und sagen top off null, aber es ist Semikolon, lassen Sie uns speichern, gehen Sie zurück zu einem Browser. Und jetzt, wenn wir uns erfrischen, wird es hier immer ganz oben sein. Egal was, und verwenden Sie gehen nach unten. Es wird immer an der Spitze sein, egal was du tust. Außerdem würde das Set in Textilien ignorieren, der Mitte liegen oder so etwas. Also, zum Beispiel, wenn wir hergekommen sind und dann sagten wir OK, machen wir diesen Text zu dieser Zeile. Ach, Zentrum sparen. Geh wieder hier rein. Aktualisieren. Sie können jetzt sehen, dass es nicht ins Zentrum geht. Es ist immer noch genau dort. Wenn Sie dies also in die Mitte schieben möchten, müssten Sie dies nicht verwenden. Tendiert, wie oben kommen hier und sagen links, Sagen wir vielleicht 400 Pixel. Und eigentlich, lass uns gehen. Mehr wie 700 Pixel, schätze ich. Also haben wir den Sammler Broza frisch gerettet. Also, jetzt ist es ja, vielleicht sieben war ein B 200 mehr wie 600, aber jetzt ist es mehr in Richtung Zentrum. Das ist im Grunde, wie das Ventil aus fest für die Positionseigenschaft funktioniert. Eine letzte Position, über die wir reden müssen, bevor wir da sind. Dies wird der Wert aus klebrig sein. Jetzt weiß ich, dass wir gerade über die feste Position gesprochen haben und wie sie zum Kleben von Menüs verwendet wird, aber in Wirklichkeit ist der Wert aus klebrig eigentlich ein bisschen nützlicher. Und es ist ein bisschen besser zu verwenden als die feste Position. Wovon rede ich gerade? Sie können sehen, dass die schnelle Bearbeitung voller CSS und JavaScript. Es ist immer fixiert. Es bewegt sich nie. Es wird nie geschult. Es wird nie untergeschult. Richtig? Wenn du zurückgehst, um uns bei der Akte zu helfen werde ich mich hier zu klebrig ändern. Und lasst uns die linke entfernen. 700 Pixel. Lasst uns retten. Geh zurück zu den Glocken sind jetzt. Wenn ich jetzt die Seite verweise, können Sie den Text hier sehen. Es seit normaler natürlicher Position. Richtig. Und als wir anfangen, die Schule zu unterrichten, ist es auch schulisch. Normalerweise ist bisher nichts passiert. Aber während wir weiter unterhalten, ruft das Paar jetzt ab, können Sie sehen, dass es erreicht ist. Es tut mir leid. Jetzt können Sie hier genau hier sehen. Es hat den oberen Rand des View-Port erreicht. Das ist der Typ der Brüder jetzt, wenn ich weiter nach unten scrolle. Es ist nicht mehr Schule in allen Inhalten. Der Vorteil wird nun die Schule in oben beginnen, Schule aufbauen, Schule auf Teal, um zu diesem Punkt zu gelangen, wo es jetzt auch Schulen, aber in einem bestimmten Bereich hier ist es nicht nach oben scrollen. Nun warum, das liegt daran, dass es eine Einschränkung mit klebrigem Element gibt. Grundsätzlich ein Element weiterhin klebrig, solange sein übergeordnetes Element im Ansichtsport sichtbar ist. Wenn wir zu unserem Index dot html zurückkehren und wir hierher kommen, ist das Elternteil hier dieser besondere Dev. So lange wir den Inhalt von diesem gesamten Dev sehen können, das Element hier, das die Person aus klebrig hat, weiterhin an der Spitze des Browsers bleiben. So funktioniert das. Also, um dies besser zu demonstrieren, lasst uns das tun. Okay, ich werde diese hier entfernen . Werde ich es hier ganz nach oben bringen? Und in der Tat, lassen Sie uns das tun. Ich werde hier ein neues Tag erstellen und das nennen wir ein weiteres H ein Tag. Wir geben Ihnen die ideale Lösung, und wir sagen einfach, äh, ich bin klebrig, weißt du, wie jeder. Okay, ich werde diese h ein Tag hier entfernen, weil wir nicht mehr als ein h ein Tag auf einer Seite haben wollen . Speichern Sie das. Geh zurück zu einem Boza. Kommen wir rüber. Aktualisieren Sie die Seite. In Ordnung. Sie können sehen, dass ich oben rechts klebrig bin. Und das ist, was da unten genannt wird, beginnt zur Schule. Aber jetzt wird es für immer an der Spitze sein, weil es Eltern im Wesentlichen das Körper-Tag ist , das im Grunde besetzt ist, was im Grunde das Elternteil von allen Inhalten auf der Webseite ist. Lassen Sie uns noch ein bisschen mehr demonstrieren. Ich werde zurück zu den fixierten hier und ich werde sagen, Ma Jin top off, sagen wir, 100 Pixel, Recht, dass speichern Sie dies, gehen Sie zurück zum Durchsuchen, Lassen Sie uns aktualisieren und OK, so dass Sie kann jetzt sehen, dass dies die plötzliche Position ist, weil wir uns vorstellen 100 Pixel oben gegeben haben. Jetzt, jede Schule unten, können Sie sehen, dass es abkühlt. Es ruft an, bis es jetzt aufsteht, und dann wird es immer genau da oben sein. Also in Wirklichkeit, wenn Sie sich ein klebriges Menü erstellen möchten, könnte die Verwendung der Position aus klebrig tatsächlich besser sein, als das aus fixiert zu verwenden. Ich weiß, dass dies ein sehr, sehr langes Video war , aber hoffentlich haben Sie jetzt die verschiedenen Werte für Ihre Position gelernt. Eigenschaft relativ, absolute Feigen. Und natürlich natürlich klebrig. Vielen Dank, dass Sie sich das Video ansehen. Wir sehen uns in der nächsten Klasse. 37. Das Index: Werfen wir einen Blick auf eine endgültige Eigenschaft. Ich weiß es. Ich sagte im vorherigen Video, dass die Position die letzte Eigenschaft sein wird, aber ich verspreche, das wird die letzte Eigenschaft sein, über die wir reden werden. Und das wird die Z-Index-Eigenschaft sein. Ziemlich nützlich. Nun, um zu erklären, was diese besondere Eigenschaft es tut. Ich habe einige kleine Änderungen an unserem HTML-Dokument vorgenommen. Im Grunde habe ich hier die P-orangefarbene Tag-Position von Absoluten gegeben und dann oben minus vier Pixel positioniert und dann das große P-Tag. Ich habe es Position absolut gegeben und dann oben minus 10 Pixel positioniert. Aber dann habe ich auch den Dave hier gemacht, der sie hält. Ich gebe ihm die Position des Verwandten, so dass sie diesen speziellen Dave als ihre Knöchelpunkte verwenden werden . Und natürlich ist dies das Ergebnis genau hier. Sie können jetzt sehen, dass der zweite Tag von mit dem i d off grey das erste API-Tag mit dem i d off orange überlappt . Dies ist, wo die Z-Indexeigenschaft ins Spiel kommt. Was wäre, wenn wir wollten, dass der orangefarbene Pitak tatsächlich zuerst angezeigt wird und dann das graue P-Tag dahinter angezeigt wird. Wer würde das benutzen? Der Index für diese Art von Situation. So fällt der Standard-Samt, der Index ist Null. Also alles, was Sie in diesem Fall jetzt tun müssen, um den orangen Pitak Ford zu schieben, wäre im Grunde im Grunde, hier rein zu kommen und dann zum P auf Motor zu gehen und ihm einen Z-Index von alles über Null zu geben . Also können wir einfach sagen wollen, zum Beispiel lasst uns voran gehen, speichern Sie das. Gehen Sie hier wieder rein und aktualisieren Sie die Seite. Und jetzt können Sie sehen, dass das P-Element mit der Idee von Orange jetzt vorne ist. Dies ist die Verwendung aus dem Z-Index. Ebenso könnten wir hier wieder reingehen und sagen, OK, nun, wir werden jetzt einen grauen Tag geben. Ist der Index von vier? Nein, ich rette. Und wie du vielleicht schon vermuten kannst, wird es wieder vor der Pizza mit dem Id off gehen. Immer. Das ist im Grunde, was wir Dizzy Index vier verwenden. Danke, dass Sie zugesehen haben. Ich werde dich in der nächsten Klasse sehen 38. CSS Spezialität: eine Runde dieses Abschnitts auf CSS. Lassen Sie uns über CSS Spacey C T sprechen. Nun ist dies ein äußerst wichtiges Konzept von CSS, und es ist eines, mit dem Sie vertraut sein sollten, weil, wie ich sagte, es ist sehr, sehr wichtig. Also, was genau ist Spezifität? Nun, sagen wir, zum Beispiel gab es zwei oder mehr widersprüchliche CSS-Regeln, die genau auf das gleiche Element hinwiesen. Dein Bruder wird in diesem Fall einige Regeln befolgen, um zu bestimmen, welche am spezifischsten ist und daher auf die Elemente angewendet wird. Denken Sie nun an Spezifität als eine Art Schule oder Rang. Sie bestimmen, welche Stildeklaration letztendlich auf ein Element angewendet wird. Nun, nur damit Sie wissen, Spezifität, Spezifität ist normalerweise ein Grund, warum einige Ihrer CSS-Regeln nicht für bestimmte Elemente gelten . Selbst wenn Sie denken, dass sie schießen, ist es normalerweise, weil es eine andere Regel gibt, die ein bisschen spezifischer ist als die mit der Sie gerade gehen. Was genau ist diese Spezifität, Hierarchie? Alle diese Regeln gut, es gibt im Grunde vier Kategorien, die die Spezifität Ebene von einem Selektor definieren wird . Sie haben die Linienstile, die natürlich damit gegabelt haben, wir natürlich damit gegabelt haben,ist im Grunde derjenige, in dem Sie einen Stil direkt auf ein Element anwenden, normalerweise im HTML-Dokument. Als nächstes haben Sie die Ideen mit, natürlich, dem Hash-Tag-Symbol. Dann haben Sie Ihre Klassen, Attribute und Zedernklassen. Wir haben über Klassen und Attribute gesprochen. Der Unterricht wird später darüber sprechen. Und schließlich, auf Ebene vier, haben Sie Ihre Elemente und Ihre Pseudo-Elemente, von denen wir natürlich nicht sprechen. Dennoch werden Elemente etwas später darüber sprechen. Dies sind die vier Hauptkategorien mit der Linie verkauft die mächtigsten vier von DS und Klassen und dann Ihre Elemente. Wie genau würden Sie diese Spezifität berechnen? Nun, werfen wir einen Blick auf einige Beispiele hier. Jetzt haben wir Ihre Regula jedes einzelne Tag nur für sich, aber das nächste haben Sie die Klasse H, und dann haben Sie auch die I. D. H. D. H. Eins. Und schließlich haben Sie das Inline-Styling voll von dem H. Alle von ihnen haben unterschiedliche Farben gelten für sie, aber letztendlich ist es Option D, die den Ellen Hengst Wind aus gesagt hat, weil, naja, es ist die mächtigste jetzt, wenn wir nur drei Optionen mit die Elemente der I D und Klasse. Nun, es ist der I. D. In diesem Fall, der gewinnen würde, weil Ideen spezifischer sind. Sie sind mächtiger als Klassen. Und dann schließlich, natürlich, wenn Sie nur zwei Optionen zwischen dem Element und in der Klasse hätten, würde die Klasse gewinnen. Weil die Klasse spezifischer ist. Es ist mächtiger als nur das Element, das alleine steht. Nun, in einem seltenen Vorfall, wo die gleiche Regel zweimal in einem äußeren Stil geschrieben wird, dann ist es normalerweise die Lowell-Regel, die angewendet wird. Also in diesem Fall, zum Beispiel, wenn Sie zwei verschiedene Hintergrundfarben für das exakt gleiche Element in diesem Fall gerade jetzt gelb angewendet und dann gelesen, die zweite ist, wird diejenige sein, die wird letztendlich angewendet, da sie niedriger ist als die gelbe Deklaration im Stylesheet. Werfen wir nun einen Blick auf die CSS Spezifität in Aktion. Mit ein paar Lebensbeispielen und wir werden tun, werden wir diese Struktur genau hier anvisieren . Die Bombe mit der Leichenmarke hier drüben. Also haben wir im Grunde das Körperelement, das das äußerste Element ist. Wir werden die Sektion haben, die nächste, das Fleisch, es ist ah, inneres Element. Und dann innerhalb dieses Abschnitts ohne Dev und dann statt des Tages, wenn wir den Pitak hier haben und dann können Sie auch die m Steuer eines guten sehen, werden wir den Angriff anvisieren, weil es das innerste Element ist, das als Ein Meerschweinchen . in diesem Experiment Lassen Sie mich zunächst voran gehen und entfernen Sie diese h eins, weil wir es nicht mehr brauchen. Lasst uns retten. Ich werde zu meinem Stil gehen, dass CSS und ich werde auch die Hintergrundfarbe für diesen bestimmten Dev mit der Klasse von Rot entfernen . Es ist genau hier, also werde ich das entfernen. Lassen Sie uns den Hintergrund entfernen. Kahlo. Lasst uns retten. Geh zurück, Teoh Broza Und okay, sieht gut aus, wie es finden sollte. Gehen wir nicht zurück zu Klammern, und das erste, was ich tun werde, ist, dass wir dem Körper-Tag das Körperelement geben. Geben wir ihm eine Farbe, und es wird mein aller Zeiten Liebling sein. Kahlo Miststück bezahlt. Ich mache Witze. Das ist nicht meine Lieblingsfarbe. Gehen wir zurück, Teoh. Wie ist das? Aktualisieren Sie die Seite und okay, so rosa hat übernommen. Okay, gehen wir zurück. Und jetzt, was ich hier tun werde, ist das. Okay, geben wir diesen Abschnitt. Geben wir ihm eine Klasse von sagen wir Abschnitt acht, okay? Und dann, während wir dabei sind, lasst uns auch hierher kommen und dieser speziellen P-Elementklasse von sagen wir, Klasse, keine Klassenarmee geben Klasse, . Geben wir ihm eine Klasse aus. Weißt du, Dash P, wir geben es auch auf I d Oh, Dash P ich bin nicht kreativ mit meinen Ideen und Klassen, aber hey, aber hey, was auch immer. Lass es uns einfach machen. Lass uns einfach weitermachen. Ich werde das retten. Gehen wir zurück zu Estella. CSS. Was ich jetzt tun werde, ist, dass ich Klasse von Abschnitt acht geben werde. War es Abschnitt acht? Ich bin bestätigen, dass es Abschnitt es war. Okay, nur sicher, dass ich hier nicht den Verstand verliere. Abschnittshilfen Und dann lasst uns das eine Farbe von Aquaman geben. In Ordnung, Akwa sicher. Gehen Sie zurück zum Browse. Ah, aktualisieren Sie die Seite. Akwa hat die Macht übernommen. Okay, gut. Wir wissen das alles. Okay, machen wir weiter. Das passiert genau hier. Jetzt nur, damit Sie sich bewusst sind, ist die Klasse offensichtlich mächtiger als die regulären Elemente, also wird die Klasse verwirrter und nur blutig Wir haben darüber bereits gesprochen, aber gehen wir zurück zum Index der jeden Tag Post. Es sei denn, es ist etwas anderes in ihm. Wir haben diese Klasse angegriffen, richtig. Sektion acht. Wir werden jetzt eine Farbe für den Dave hinzufügen, die auch eine Klasse von Rot hat und auch diese P-Klasse hier eine andere Farbe als auch geben wird . Also lasst uns das machen. Ich werde jetzt hier reinkommen, und ich sage OK für Red. Haben Sie schon die Sammlung hier. Wir geben ihm seine eigene Farbe rot, aber dann sieh dir das an. Ich werde jetzt hier reinkommen, und ich werde sagen, was ist die P-Klasse wieder? Es ist nicht P. Also werde ich jetzt hier reinkommen und in einem Strich sehen. P hat seine eigene Farbe aus und lasst uns mit Ah gehen, mal sehen, welche gehen wir? Gehen wir mit Korallen. Alles klar, das ist sicher. Okay, wer wird jetzt diesen Wettbewerb gewinnen? Weil wir mit dem Unterricht umgehen. Jetzt haben wir Abschnitt Acht seine eigene Farbe gegeben. Wir haben der roten Klasse ein eigenes Qala gegeben. Wir haben auch der NRP-Klasse einen eigenen Anrufer gegeben. Also, wer wird gewinnen? Gehen wir zurück zu unseren Bögen heraus bevorzugt die Seite und jetzt können Sie sehen, dass es curl sein wird . Im Wesentlichen hat das einen. Aber das, wo Farbe auch in gewisser Weise gewonnen hat. Warum, Wenn wir zurück zu unserem Dokument, werfen Sie einen Blick auf diese. Obwohl dieser Dave diese P-Klasse hier in einem p enthält und wir diese Farbe in einem Stück Koralle durch gegeben haben, haben wir diesen Dave hier von rot gegeben, weil die P-Klasse hier näher an diesen m Tag genau hier mit dem Text ist . Es wird für den M. gelten der M wird den Korallenruf bekommen. Wenn wir hier zu einem Browser zurückkehren, können Sie sehen, dass die Klammern eine andere Art davon sind. Es wird die Korallenfarbe haben, weil es drinnen ist. Es ist inside off ein p Element, das eine Klasse aus in einem P hat Also, obwohl der Dave hier, der auch in gewisser Weise diese m Tag hält. Obwohl es seinen Onkel von Red hatte, würde die M mit den unmittelbarsten Vorfahren Unser Stil gehen. In diesem Fall hatte die P-Klasse gerade den Abruf P. Deshalb ging das M mit. Aber lassen Sie uns hier eine kleine Wendung machen. Lassen Sie uns zurück zu Stil gehen, dass CSS genau die gleiche P-Klasse hier, die eine Nähe einer API hat , die wir sein eigenes I d eine andere Farbe geben werden. Es ist raus. R p Ich werde das kopieren. Kommen wir wieder rein. Pace das. Lasst uns umziehen. Erscheinen Sie jetzt auch. Außerhalb p Und dann für die Farbe. Mal sehen. Aber gehen wir mit Blue. Einfaches Sicher. Geh zurück nach Broza. Aktualisieren Sie die Seite. Oh, warte mal. Oh, ich denke, es könnte ein Fehler gemacht werden, und Oh, ja, natürlich. Wir haben einen Fehler gemacht. Ja, ich habe die Klasse nicht zu einem Id geändert ich bin so ein Idioten. Verzeihen Sie mir. In Ordnung, also raus nach Pete. Das ist der Id. Geh zurück zur Broza. Wir sind frisch und jetzt gehst du. Die Farbe hat nun auf Blau gewechselt, weil denken Sie daran, dass Ideen spezifischer sind als Klassen. Aber wir sind noch nicht fertig. Gehen wir zurück zum Index von HTML und raus für die M hier. Wir geben ihm seinen eigenen Stil, gleich Anrufer. Und lasst uns mit Ach, Azzurri gehen. Und ich bin mir sicher, dass Sie jetzt schon wissen, was das Ergebnis hier von Kurs sein wird. Sie können sehen, dass dies jetzt die Azzurri Farbe in Aktion ist, weil wir es gegeben haben. Und im Linienstyling, das natürlich am stärksten ist , sind die Schließung, die Sie einem bestimmten Element geben können. Also, das ist es für CSS. Spezifität wird mit diesem viel mehr im nächsten Abschnitt gehen. Aber das war's. Vielen Dank, dass Sie zugesehen haben. Wir sehen uns im nächsten Abschnitt. 39. Projektvorschau: Alles klar. Die Zeit ist gekommen, und ich hoffe, Sie sind bereit, denn gemeinsam werden wir uns diese volle warme Seite Website namens Web Impact aufbauen . Jetzt, wo der Einfluss ist, baute ein fiktives Geschäftsunternehmen ihr Geschäft auf. Sie sind spezialisiert auf Webdienste. Internet-Dienste. Grundsätzlich so das Angebot. Dinge wie Cybersicherheitsdienste. Ach, Webdesign. Was widmen die App des Menschen? Anwendungsinstanz wie diese. In diesem, Pedro Upside geht es darum, das Unternehmen zu fördern und zu beschreiben, worum es im Unternehmen geht . Also, wie Sie an der Spitze sehen können, haben wir, ah, Logo, wir haben ah Mei Navigationsmenü. Wir haben auch diesen Abschnitt, in dem Sie, wie die Hauptüberschrift, entdeckt haben wie die Hauptüberschrift, , wer sie sind. Sie können sehen, dass das Hintergrundbild im Grunde in den Hintergrund verschmilzt, weil das Logo und im Navigationsmenü oben auf dem Baghlan Bild sind. Also zeige ich Ihnen, wie Sie das erreichen können. Sie haben die beiden Tasten Idee, und über einen Abschnitt sieben ist Abschnitt als auch zur Verfügung gestellt. Warum gehen mit diesen sehr, sehr wichtig ein Mythos? Das Team Es gab acht von ihnen Testimonial Abschnitt ein Kundenbereich, natürlich. Und dann schließlich ein Kontakt oder Abschnitt mit einem Formular. Und natürlich wird es eine Fußzeile mit einigen weiteren Links, Social Media Likens und natürlich die alle Rechte vorbehalten Text geben Social Media Likens und natürlich natürlich . Wie Sie sehen können, ist dies eine volle. Die Seite war verärgert, aber es geht nicht nur um den Inhalt und die Abschnitte in den Spalten. Es wird auch einige Animationen geben, die du sehen kannst. Im Moment siehst du diesen Knopf direkt hier zum Licht. Vor allem diese Abschnitte haben diese besondere sind in diesen beiden Pfeilen gebracht. Wenn Sie auf diesen Pfeil klicken, bringt es Sie den ganzen Weg zurück nach oben, was nützlich ist, sehr nützlich für eine Seite Websites, also werde ich Ihnen zeigen, wie Sie das erreichen können. Der Logo-Host hat auch ein wenig. Animation gegen, wenn Sie auf dem Kreis schweben beginnt sich zu drehen sind kontinuierlich so auch diese anderen kleinen zusätzlichen Fähigkeiten, die Sie anwenden können, um wirklich eine Website abheben und machen es begünstigt aufgeregt. So weit, so gut. Sie haben gelernt, über HTML sogar zu bewerten. Aber es ist eine ganz andere Sache, beide kombinieren zu können, um eine vollständige Website zu erstellen. Das ist also genau das, was Sie in diesem Abschnitt lernen werden. Sie werden in etwas mehr HTML Und natürlich, Sie werden viel mehr lernen. CS ist es auch. Ich hoffe, Sie sind so aufgeregt wie ich, denn jetzt ist dies der echte Deal jetzt, aber kommt in einem Schaden wirklich, wirklich Schulden. Siehst du, wir bauen etwas Reales. Lehnen Sie sich zurück, entspannen Sie sich und ich hoffe, Sie genießen den Abschnitt Lassen Sie uns loslegen. 40. Den Projektabteilung herunterladen: alles in Ordnung so immer, um das Produkt zu beginnen. Aber bevor wir das tun, müssen Sie ein paar Dateien herunterladen. Sie finden sie entweder im Schutzbereich oder in den Anhängen dieses Videos, je nachdem, wo Sie diesen Kurs besuchen. Aber Sie werden seine Dateien Final Code finden und Starter Kit schützen. Wir werden mit den Projekten arbeiten. Themieren Sie es. Zuallererst finden Sie eine Indexdatei. Es sagt Datei, das ist der Code wird studieren, setzen Sie es mit. Und dann ist der endgültige Code der komplette Code für den gesamten Kurs. Sie können das als Referenz verwenden, wenn Sie stecken bleiben und schließlich gibt es ein externes System Guidebook of Credit für Sie. Es wird Ihnen einige sehr schnelle Tipps zu CSS XML und auch einige Links zu einigen anderen Websites geben. Wir können mehr über HTML und CSS erfahren. Ich hoffe, Sie finden diese Datei sehr, sehr nützlich. Das war's also. Gehen Sie mit den Dateien weiter und ich sehe Sie zu Beginn des Projekts. 41. Der Starter: Hoffentlich waren Sie in der Lage, die Dokumente und die Dateien zu extrahieren, und das ist es, was Sie bleiben sollten. Sobald Sie fertig sind, haben Sie die Indexpunkt-HTML-Datei, die gut ist, wie Sie jetzt sehen können, gibt es noch keinen Inhalt und die Datei, Aber dann, Aber dann, in Ihrem Assets-Ordner, Sie sollten zu allen Ordnern haben, die Sie das CSS haben und dann Bilder Bilder. Es ist ziemlich unkompliziert hier drin. Sie hätten Ihr Fave-Icon-Logo. Der Held , der eine Tasche auf Bild sein wird, wird einen Blick darauf werfen und dann haben Sie Bilder für Ihre Teammitglieder auch für die Kunden . Und dann, natürlich, für die Taschenrunden, die verwendet werden und dann für den CSS-Ordner, der hier führt, müssen Sie den Hauptpunkt-CSS ablegen , der bereits Code enthalten wird. All diese Cordy, die bereits vertraut ist, warum hattest du die Leichenmarke? Sie haben den Fonds, Familie Schriftgröße, Tasche und Farbe und so weiter. Ich habe den Angriff hier für stark, die den Text fett an der Vorderseite Gewicht von 700 machen und dann für den Kopf als off einige Styling für H diejenigen H zwei h drei und in für den Absatz haben auch drei Eigenschaften für den Spaß hinzugefügt Größe Zeilenhöhe und dann etwas Rand. Also natürlich, wenn wir in diesem Kurs Fortschritte machen, könnten wir hier und da einige kleine Verbesserungen vornehmen. Aber das ist die Kälte, die Sie für den Hauptpunkt-CSS behalten sollten und dann für den Index dot html haben wir den ähnlichen Code, den Sie zuvor gesehen haben. Jede menschliche Sprache, auch einige Kopf-Attacken. In hier haben wir den Titel wird Auswirkungen bauen erstaunliche Websites und genau hier haben wir die beiden Stylesheets normalisiert CSS, über die ich in nur einem Moment Haupt von CSS und dann auch die fünf Icon sprechen. Sie werden es auch hier finden. Das ist das Fünf-Symbol für die Website und jetzt sieht es wie ein Blick auf das normalisierte CSS . Also, was ist das? Im Grunde ist es. Lassen Sie mich hier runterkommen. Die normalisierte CSS ist eine Datei, die von einer bestimmten Person geschrieben wird, die CSS liebt. Aber was es tut, ist, dass sie Datei ist Männer, um die Art und Weise, wie Ihre Inhalte aussehen über alle verschiedenen Browser zu stabilisieren . Also die Idee hier ist, dass standardmäßig die verschiedenen Arten von Browsern Firefox, Internet, Explorer, Chrome. Sie haben etwas andere Möglichkeiten, Inhalte zu interpretieren. Also, als Beispiel, wenn Sie versucht, in einem H ein Tag mit anzuzeigen, Let's Say Firefox, Firefox könnte hinzufügen, wir möchten 0,5 Pixel Rand zu einem H vor komm, komm könnte eine hinzufügen Punkt auf Praktikant Explore möglicherweise keine Ränder usw. hinzufügen. Im Grunde ist die Idee hier, Ihr Quantum in allen Browsern genau gleich aussehen zu lassen. Nun, wenn wir uns den eigentlichen Code selbst genauer ansehen. Aber ich meine, ich habe das hier geöffnet, es gibt eine Menge. Es gibt eine Menge von Schnüren hier, viele von visuell vertraut mit, zum Beispiel, so hier können Sie sehen, dass die Kommentare direkt hier, richtig, zum Beispiel, wie schwere sagen, entfernen Sie die Marge in allen Befugnissen als so. Wie ich schon sagte, einige Brüder könnten einige zusätzliche Marge hinzufügen, um Arten von Tags festzulegen. Also genau hier haben wir gesagt, Marge ist auf Null für den Körper gesetzt. Die wichtigsten zeigt an, dass Sie hier unten einige zusätzliche Eigenschaften und einige Werte blockieren können. Scrollen Sie einfach nach unten. Du fängst an, alles zu sehen. Meine Toten aus Familie Modellraum voll die kalten K B D. Sam Tags und so weiter. Du kommst den ganzen Weg hierher und siehst noch andere Informationen. Mach dir keine Sorgen. Ich kenne einige davon, mit denen Sie noch nicht vertraut sind, aber am Ende dieses Kurses werden Sie in der Lage sein, genau zu verstehen, was all diese Eigenschaften sind und was die Werte auch bedeuten. Das ist also so ziemlich der Code, mit dem wir anfangen werden. So Deutschland, sehr nächste Glas jetzt beginnen, den Header für unsere Website zu bauen. 42. Das Inspect: Okay, Also, bevor wir mit dem Projektabschnitt beginnen, wollte ich ein paar Minuten verbringen, um Ihnen ein Werkzeug vorstellen, das wir in diesem Abschnitt verwenden werden . Und dies ist ein Tool, auf das Sie als Webentwickler nicht verzichten können. Und es wird das Inspektionswerkzeug geben. Jetzt. Was Sie hier sehen, ist das fertige Produkt, das fertig war verärgert, das wir bis zum Ende dieses Abschnitts bauen werden. Aber nein, es ist, dass, wenn ich mit der rechten Maustaste irgendwo auf der Website, Sie werden diese Zeile hier kalt sehen Inspect. Nun lassen Sie mich darauf hinweisen, dass ich den Brave-Browser verwende, aber es ist ziemlich das gleiche Konzept für jede andere Art von Browseransichten. In Firefox verwenden Sie Chrome mit Apples Safari Internet Explorer. Es ist ziemlich dasselbe. Sie werden entweder sehen, inspizieren, inspizieren oder Werkzeug inspizieren Entweder eines dieser drei. Wenn sie darauf klicken, ist es im Grunde Oh, tut mir leid. Ich hatte nicht vor, dass das passiert. Äh, okay. Du sagst, es ist immer seltsam, wenn sie merkwürdige Dinge aufzeichnen. Es ist wie, Ah, du denkst, dass das hier durchsucht. Sie haben einen eigenen Geist. Sie wissen, wann ich aufnehme und sie beginnen sich ohnehin falsch zu verhalten. Also, was ist passiert? Es hat im Grunde dieses spezielle Fenster herausgebracht. Und genau hier nennen wir das Inspektionswerkzeug. Es erlaubt uns, einen Blick auf den HTML-Code in der Zeile sowie den CSS-Code, aus dem die Website besteht, zu werfen. Hier drüben links haben wir den externen Code hier drüben zum Licht. Wir haben den CSS-Code. jedoch Wenn diesjedochdas erste Mal ist, dass Sie dieses Tool öffnen, können Sie feststellen, dass es nicht vom Browser getrennt ist. Sie können sehen, meins ist bereits Details. Ich kann es bewegen. Also, was Sie tun wollen, um es zu lösen, wäre einfach zu eine Zitrone. Zuallererst befestigen wir es zurück. Also hier oben habe ich diese drei Knöpfe. Ich werde es wieder an den Boden andocken, damit Sie vielleicht finden, dass Ihre so etwas ist . Wie Sie sehen können, ist es nicht mehr losgelöst, es ist verbunden, es ist an der Seite fixiert. Sie möchten also ganz oben rechts nach drei Knöpfen suchen. Und das hängt von Ihrem Browser ab. könnte man so etwas wie Trennen sagen. Es ist normalerweise innerhalb der ersten oder der zweiten Option. Also meins in diesem Fall, weil ich die tapferen Kräfte benutze. Ich bin ähnlich gehen auf Schloss hier klicken und jetzt ist es kostenlos. Also, wenn Sie roh verwenden, könnten Sie etwas wie lösen oder frei setzen oder so etwas sagen. Es hängt alles davon ab, aber es ist normalerweise die erste der zweiten Option. Okay, also wurde meins angehängt. Und schauen wir uns genauer an, was genau wir hier haben. Wie ich schon sagte, Alia, hier drüben haben wir den HTML-Code auf der rechten Seite. Wir haben den CSS-Code, Aber beachten Sie, dass, wenn ich mit der Maus über die Elemente auf der HTML-Seite verschiedene Teile meiner Seite hervorgehoben wird, das ist, Ihnen zu sagen, dass Hey, wo Sie gerade jetzt sind. Aber Sie konzentrieren sich auf Ist dieser besondere Bereich bemerken, dass ich meinen Mund gerade jetzt auf diese Klasse der Marke, und Sie können sehen, was war Highlight Kopf der Art und Weise der Wirkung und das Logo ist nicht hervorgehoben. Das sollte dir sagen. Okay, im Moment, das ist das Element, das hält oder kontrolliert, dass jeder Website in den Kopf weg, ich habe das Logo und den Text. Wenn ich nach unten scrolle, nach unten. Wenn ich nach unten gezogen naff Klasse von Männern, Sie alle von einem plötzlichen jetzt können Sie sehen, das Menü wird hervorgehoben. Wenn ich also auf die Speisekarte gehen möchte, kann ich hier reinkommen und dann einfach das Menü öffnen und anfangen, nach innen zu gehen. Er wird auch bemerken, dass wir Äpfel haben, die nach rechts weisen, die darauf hinweisen , dass innerhalb dieses bestimmten Elements, gibt es andere Elemente. Deshalb, wenn ich auf die natürlich der Marke klicke, deren Hinweis, dass wir jetzt ein DIV oder die Klasse des Logo-Dash Rap und dann gibt es auch einen SPAN-Klasse kalten Namen. Beide haben auch genug Elemente, so dass ich auf das Schließen des lokalen Rap klicken kann , und jetzt habe ich ein A-Tag, aber sie sind immer noch schmal. Ich koche auf der wieder, und genau hier können Sie sehen, wir haben jetzt das Bild, ein Hinweis, dass, wenn ich auf der Bildklasse schwebe, er den Aspekt aus dem Logo sehen kann. Das ist nicht hervorgehoben es speziell das kreisförmige Logo und beachten Sie, dass es nicht mehr . Ich war nur sagt uns, dass das Bild Ursache hier ist das enorme Kind von diesem besonderen Tag. Wenn das gleiche gilt für die spanische Klasse des Namens, Ich kann es erweitern, anstatt eine Taktik zu haben und es wieder aufwenden und einladend und sagen, wir haben nach Spanien Klassen ein für den Web-Text für leicht das Web, vier Schrägstrich Text und dann die Reihenfolge für die Auswirkungen. Und da ist es. Also, was ich jetzt tun werde, ist, dass ich im Grunde alle Elemente erweitern werde und genau hier können Sie sehen, das sind im Grunde die zu großen Großväter der großen Mumien dieser speziellen Seite, die wir hatten. Und dann haben wir Körper Körper ist der Tag halten in allem. Aber auch bei diesem Hinweis, dass beide noch im HTML sind das allmächtige HTML-Tag , das Head-Tag , , im Grunde genommen Ritual nahm ein Boot hat nur die Links zu fünf Icons. Zwei Skripte und so weiter werden später darüber sprechen. Es ist tatsächlich das body-Tag in diesem Fall, das den gesamten Inhalt der gesamten Seite enthält. Und wenn ich die Leichenmarke erweitern, können Sie alle sehen, dass diese wie der Leutnant David oder die Leutnant oder die Generäle von allen großen Teilen sind. Also haben wir den Kopf nach oben. Beachten Sie übrigens, dass, wenn ich auf Hedda habe, es scheint, als wäre es die ganze Seite. Das ist Bean hervorgehoben, aber das ist nicht wahr. Wenn ich hier einfach nach unten scrolle und ich gehe zurück zu Kopf, bemerkte ich den Kopf auf out stoppt knapp über dem weißen Bagram Bethea Potters Text, der uns sagt , dass Okay, das ist der Bereich, den der Kopf ein Tag besetzt. Es nimmt die Tasche ein, ein Bild des Sehens des Logos und dann natürlich das Menü. Und dann, wenn ich beginne, hier nach unten zu scrollen, Gliedmaßen, die mit den Glocken nach oben aufgerufen werden, können Sie sehen, dass wir den Abschnitt über hervorgehoben haben. Wir haben das Limit. Keramik Dies kann etwas kleiner sein. Okay, gehen wir weiter runter. Sie können sehen, wir haben die über uns Abschnitt dient einen Abschnitt. Wir haben die ah, Warum uns Abschnitt direkt hier hervorgehoben. Wie Sie sehen können, gilt dasselbe für das Team. Sie haben Zeugnisse und so weiter. Und so weiter. Okay, lass mich das etwas größer machen. Sie können auch feststellen, dass, wenn wir den Mauszeiger über all diese Abschnitte bewegen, Sie möglicherweise beginnen, verschiedene Arten von Farben zu sehen, vor allem den grünen Kahlo. Siehst du diese grüne Farbe hier? Genau unten rechts da. Lass mich vielleicht ein bisschen Drogen runter. Also haben Sie gesagt, diese grüne Farbe direkt dort, die davon erzählt, dass Padden Green in diesem Fall ein Patent anzeigt. Es kann auch von Ihrem Browser abhängen. Ich benutze Brave it. Wie ich schon gesagt habe. Und mit Brave Green bedeutet unser Padden. Und wenn er bemerkt, ist, wenn ich auf Abschnitt I d klicke. Lassen Sie mich hierher kommen. Ich werde dieses Kontrollkästchen deaktivieren, das patentierte Pixel bleibt. Wenn ich das nicht überprüfe, entferne ich das Muster. Jetzt können Sie sehen, dass es normale Polsterung gibt. Eman Eindhoven Dienstleistungen. Die grüne Farbe ist nicht mehr vorhanden. Also wieder, ah, grün üblich repräsentiert Padden. Und dann für Marge, könnten Sie eine andere Art Off-Farbe haben, die normalerweise vielleicht orange ist. Also das geht jetzt Notizen ist, dass, wenn ich auf den Tod schweben, schließen Sie Inhalte, so weit Notizen ist, dass wir jetzt orange auf der Wissenschaft links auf Lichter, die bedeutend bedeutet, dass zeigt Monitor, die Ränder wurden angewendet. Also wieder hängt es von Ihrem Browser Orange meine Männer Muster in Ihren eigenen Brauen auf meins. In diesem Fall ist Orange von unseren für die Ränder und in Grün, die auch Idee grün sehen kann oder die Muster. Lassen Sie uns über die CSS Aspekte sprechen. Nun, hier rüber zum Licht. Wie ich schon sagte, Sie haben die CSS-Abschnitte. OK, es hängt also alles davon ab, welchen Aspekt Sie außerhalb Ihrer Website inspizieren möchten. Wenn ich hier runter kam und ich mit der rechten Maustaste auf den Sende-Button klicke und ich gehe, um Sie zu inspizieren sehen wir jetzt, dass das Tool uns in der Tat direkt nach unten in den HTML-Bereich gebracht hat, wo der Boden aus war Setzen Sie es, Sie können sehen, es ist genau hier. Du kannst es sehen. Es gehört zu den diff schließen Feld Strich Kohle, und es hat eine Klasse von Knöpfen von Fleisch und in grün hat drei verschiedene Klassen. Aber interessanterweise, schauen Sie hier nach links, und ich bin sicher, rechts und rechts hier können Sie sehen, dass die CS auf diesen Boden angewendet wurde . Sie können sehen, hier haben wir den Bagman. Coehlo. Also kam ich hier rein und sie klickten auf den Wert. Und ich sagte: Weißt du was? Ich werde Änderungen lesen. Jetzt können Sie plötzlich sehen, dass die Farbe jetzt von grün auf rot geändert wurde. Hinweis: jedoch Seien Siejedochnicht zu aufgeregt. Diese Veränderungen meinte ich das Leben. Es ist nicht so, wenn man hier etwas ändert. Es wird automatisch gespeichert. Nein, das ist nur voll. Unsere Front und Tests grundsätzlich lebensfähig. Aktualisieren Sie die Seite. Die Änderung wird wieder normal. Um zurück zu den Anfangsbuchstaben zu gehen, sind Zitronenfarbe. Die Verwendung des Inspektors ist nur, um Ihnen zu erlauben, Ihre Änderungen Leben zu sehen, wie Sie sie anwenden, so dass anstatt Sie auf die Rückhand gehen müssen, wenden Sie Ihren Code an. Sagen Sie, wenn Sie zurückkommen, um jedes frische zu durchsuchen, können Sie einfach diese Änderungen anwenden. Weiß kämpfen dort auf der get go und sehen, wie sie aussehen, auf die gleiche Weise könnte ich die Telefongröße ändern , die 15 Pixel gerade jetzt ist. Ich könnte etwas Größeres mitnehmen. Das ist Gold Weg zu 30 Pixel an meinem Tag kann sehen, wie die Pixel aussehen würden. jedoch auch, Ich möchtejedoch auch,dass Sie Ihre Aufmerksamkeit auf etwas wollten, was einige Schaltflächen haben könnten, wie einen Hover-Effekt. Oder einige Alaune könnten Hover-Effekt haben. Was bedeutet, dass, wenn Sie auf sie schweben, wie ich es jetzt tue, wenn Sie schweben und sie etwas passiert, wie Sie gerade sehen können, wenn ich auf der Unterseite jeder schwebe und irgendwo zu grün ist. Wenn Sie also das CSS für solche überprüfen möchten, ist das, was Sie tun müssen, ein wenig knifflig. Aber mach dir keine Sorgen. Ich zeige dir hier rüber, sage ich. Aber Sie haben die sind im Grunde die Symbolleiste, die Sie sehen können. Sie haben den Hoff Toggle Elemente Zustand eines Klicks dort. Moment können Sie die verschiedenen Arten von Zuständen sehen, dass Cannabis, die auf den Boden angewendet werden kann wir suchen Hover richtig? Also, wenn ich auf Hover direkt dort klicke, beachten Sie, dass jetzt Haben Sie jetzt das CSS angewendet wurde, wenn wir ho über auf der Unterseite. Das ist in Ordnung. Er kann es nicht sehen, sagt Button. Das Senden und dann Doppelpunkt schweben und Sie betrachten, jedoch Effekt direkt dort angewendet wird. Also der Grund, warum ich sagte, es ist mein Baby Trick ist, weil verschiedene Brüder verschiedene Möglichkeiten haben , die Hover-Zustände auszulösen. Aber jeder hat es. Sie finden es irgendwo entlang der Symbolleiste. Also Limiter an. Überprüfen Sie das noch einmal. Und wie gesagt, der ganze Punkt über die Inspektoren ermöglicht es Ihnen, einen Blick auf die HTML-Struktur einer Seite in der Zeile zu werfen und dann versucht, Live-CSS-Änderungen anzuwenden. Also nochmal, lasst uns noch eins machen. Wenn ich ging zu den lassen Sie uns sagen, lassen Sie mich hier kommen Teoh Dienstleistungen zur Verfügung gestellt Nacht So haben wir Service vorgesehen Abschnitt Licht hier. Wenn ich gehen, um Dienstleistungen den ganzen Weg hier oben und ich klicke dort jetzt können Sie sehen Dienstleistungen hat die Idee von Dienstleistungen. Dies ist das Baghlan-Bild, das angewendet wird. Ich könnte wählen, um das Kontrollkästchen zu besitzen, und Sie können jetzt sehen, dass wir kein Hintergrundbild mehr angewendet haben , weil wir das Kontrollkästchen nicht erneut aktiviert haben. Sie können Änderungen am Leben vornehmen. Lassen Sie mich das wieder reinlegen. Lassen Sie mich den Abschnitt erweitern. Ich habe eine Klasse von Inhalten. Okay, ich werde es erweitern für die ich habe einen H zwei Service zur Verfügung gestellt. Also, wenn ich auf das Alter klicken, um hier oben auf der rechten Seite zu markieren, können Sie sehen, all dies ist auf unsere H zwei angewendet worden. Wir haben ein Telefon sagt nach zwei Pixeln, ein Textlösegeld in Großbuchstaben und so weiter. Also wieder, ich kann hier reinkommen und sagen, OK, das Frontgewicht finanziert. Testen wir stattdessen 800. Jetzt können Sie die Texas viel mehr sehen, weil wir von 400 auf 800 geändert haben. Sie können das A-Tag hier für diesen Link erweitern. Sie können einen genaueren Blick darauf werfen und sehen, wie es konstruiert ist, Veränderungen im Leben vornehmen und so weiter und so weiter. Das ist also die ganze Idee hinter der Verwendung des Inspect-Tools auf jeder Website. Nun, um dies abzuschließen, wollte ich Sie nur daran erinnern, dass Sie das Inspect-Tool auf jede Website im Internet anwenden können . Es spielt keine Rolle, ob die Website für das FBI, CIA und das Weiße Haus M I. Sechs ist. Was auch immer. Solange die Website im Internet live ist, können Sie diese Website einsehen. Also habe ich es getan. Zum Beispiel bin ich auf dem Web Monkey Academy dot com Ich kann entscheiden, zu tun, ist rechts Klicken Sie hier, klicken Sie auf Inspect und dann beginnen, Ah zu machen, nur einige lustige Änderungen, Richtig? Als Beispiel könnte ich sogar hier klicken, wo du das HTML hast, und ich könnte den Text nur zum Spaß ändern und Ah sagen und einfach sagen, Hey, Leute, weißt du, Sieh mich an oder so. Nur etwas Seltsames, oder? Drücken Sie die Eingabetaste. Und jetzt plötzlich sagt der Texaner hier: Hey, Leute, Leute, sieh mich an. Nur der Punkt von China machen ihn ist, dass Sie können Sie alles tun, was Sie auf der Website wie wir wollen , wenn Sie derjenige, der tatsächlich besaß diese Website, so dass Sie Änderungen an den Kahlo's, die Telefongrößen und so weiter und so weiter machen können an den Kahlo's, . und nur ein bisschen Spaß haben. Aber auf den schwersten Notizen, wenn Sie tatsächlich einen Blick werfen und die HTML-Struktur sehen wollen oder vielleicht sogar das Geschlecht auf eine Website angewendet wurde , können Sie dies mit Inspector tun, nur um etwas Inspiration zu bekommen oder einfach nur um eine Idee zu bekommen . Wie etwas, was nicht ist, wurde als Beispiel getan. Ich habe Facebook hier reingezogen, und ich mag wirklich den blauen Kragen, den Facebook hat. Dieser besondere Blauton ist einer der wirklich diese wahrscheinlich meine Lieblings-Blauton . Also, wenn ich herausfinden wollte, welche Farbe das ist, kann ich wahrscheinlich ganz Tag auf der Bar, klicken Sie auf Inspektionen und dann alle einfach beginnen, sich hier umzusehen und zu sehen. Fangen Sie einfach an, zwischen Elementen und Syrien zu wechseln. Ok? Sie können jetzt sehen, dies ist genau, wo wir den Hintergrund Corbyn angewendet haben und zu bestätigen, dass, wenn ich dieses Kontrollkästchen deaktivieren OK. Immer noch die gleiche Lektion. Checkers Bücher. Okay, jetzt können Sie sehen, dass die blaue Hintergrundfarbe nicht mehr da ist. Also das sagt uns definitiv, dass Hey, das ist die Farbe wurde diese besondere Blauton anwenden und das ist der Wert. Es sind drei Bestie. Es wird 5998 sein, und da gehst du. Also wieder können Sie Inspect-Elemente verwenden, um mehr Informationen über die Website zu erfahren Welche Farben sie in verwenden. Sogar der Rat bildete eine Familie, die sie benutzen, oder? Also, wenn ich vielleicht diesen Text hier markiert, klicken Sie mit der rechten Maustaste, lassen Sie uns überprüfen. Mal sehen, was Spaß Familien hier benutzt werden. Lasst uns sitzen. Kannst du es finden? Ah, wir sehen nicht. Es war wie Helvetica Arial. Einige überlebten, aber das ist abgesagt, wie Sie sehen können. Also, wenn Sie sehen, wie ein Bindestrich erscheint auf dem Grundstück und es ist Celadon, Mittwoch ist ein weiterer Wert off Beleuchtung entwickelt, die Sie gerade betrachten. Also, um das zu tun, müssen wir okay, damit Sie sehen, warum. Heute ist eine weitere lustige Familie pervers hier erklärt. Und es heißt „Vererben“. Also erben bedeutet nur, dass die eigentliche Telefonfamilie von einem Tod genommen wurde, der über diesem speziellen Teufel schaut. Wenn wir also anfangen, hier oben zu klicken, klicken Sie weiter hier oben, Sie können sehen, ob es immer noch vererbt bleibt. Es hat uns nicht verändert. Sie weiter höher und höher. Okay, lass uns das schließen. Lassen Sie uns dieses erben erben Erben erweitern sieht aus, als ob es den ganzen Weg zum Körper geht und dann schließlich im Körper. Jetzt können Sie sehen, dies ist, wo wir Helvetica Ariel und sensorische. sind also tatsächlich. Das Telefon wurde auf der Website angewendet, und da geht's. Also werde ich tun, nach einige Zeit zu verbringen, spielen mit dem Tool, gehen Sie zu Ihren Lieblings-Websites, Rechtsklick inspizierten Tools. Versuchen Sie herauszufinden, was Spaß sagt, dass insbesondere Bartons angewendet wurden, oder finden Sie heraus, die Hintergrundfarbe angewendet wird. Es ist so und einfach nur Spaß haben. Je mehr Sie das Werkzeug verwenden, desto komfortabler werden Sie das bei der Verwendung bekommen. Das ist also so viel Glück zu danken. Wenn Sie Fragen dazu haben, wie Sie dies nutzen können, mit allen Mitteln Richard zu sein, um zu erreichen, kann mehr als glücklich sein, Ihre Frage zu beantworten, denn dies ist eine sehr, sehr wichtige Fähigkeit zu haben. Danke fürs Ansehen, und ich werde in der nächsten Klasse sehen. 43. Aufbau des Header: Okay, also lasst uns den Header für unsere Website erstellen. Und ich habe das fertige Produkt hier hochgezogen, und Sie können sehen, dass dies das Ziel ist. Das ist es, worauf wir zielen. Werfen wir einen genaueren Blick auf das, was wir rechts auf der linken Seite haben. Wir haben das Logo, aber Sie könnten feststellen, dass dieses Logo eigentlich aus zwei Teilen besteht. Sie haben das Bild, das IHS dreht sich um, wenn wir auf sie schweben, und dann haben Sie tatsächlichen Text, die unser Web und eine Wirkung. Ich möchte, dass du einen Moment nachdenkst. Wie denkst du, können wir diese Art von Design erreichen? Ich spreche gerade von einem Text. Sie würden bemerken, Web ist in weiß und diese vier Schlitten und was gut ist und eine Wirkung hat eine hellblaue Farbe. Wie glauben Sie, dass wir diese Art von Design erreichen können, während Sie darüber nachdenken? Hier drüben , rechts, haben wir unsere Menüpunkte. Wir haben sieben von ihnen und sie haben auch etwas Styling, das einen Blick auf ein wenig später werfen wird . Aber lassen Sie uns über die Struktur nachdenken, weil wir jetzt über HTML sprechen. Die Struktur hier ist, dass wir einen Container haben, der das Logo und dann die Menüpunkte auf dem Licht hält . Aber dann können wir auch eine Spalte speziell für das Logo haben, die Metrik im Stil schwächen und dann eine weitere Spalte speziell für die Menüpunkte. Also lasst uns das machen. Ich werde zu meinen Klammern gehen, und bevor wir anfangen, den HTML-Code zur Indexpunkt-XML-Datei hinzuzufügen, gibt es etwas, das wir tun müssen, das wichtig ist, und ich habe das absichtlich ausgelassen. Die Sache ist, normalerweise neigen viele Entwickler dazu, ihre Tags zu schließen. Ich bin schuldig. Ich habe das schon so oft getan, also schauen Sie sich die Akte jetzt an und sagen Sie mir, welche Steuer müssen wir Ihrer Meinung nach schließen? Es ist ziemlich einfach. Es sollte ziemlich offensichtlich sein. Wir müssen das Körper-Tag schließen, also gehen wir weiter und schließen das. zuerst Lassen Sie unszuersthier runter kommen, alles klar, und dann müssen wir auch das HTML-Tag schließen. Das ist ein weiterer Tag, den wir schließen müssen. Okay, das ist, dass ich jetzt etwas Raum schaffen werde. Also lasst uns das hier runterbringen und mich einfach weitermachen und wir haben Indien und Oh bewegt. Okay. In Ordnung. Also das erste, was hier richtig ist, ist, dass wir das Hedda-Tag hinzufügen, weil wir im Kopf nach oben gehen. Also lasst uns das machen. Und dann die Macht des Bettes. Ich werde auch jetzt voran gehen und einfach die Hedda schließen Lassen Sie uns etwas Platz schaffen. Alles klar , was machen wir jetzt? Das erste, was ich tun werde, ist, den Container zu erstellen, der sowohl das Logo als auch die Menüpunkte enthält . Also lasst uns das machen. Wir werden ein div hinzufügen, und wir können das nennen. Lassen Sie uns eine Klasse von unseren Inhalten geben. Wir werden diese spezielle Klasse immer und immer wieder wiederverwenden, und Sie werden sehen, warum. Dies wird also der Dev sein, der die Menüpunkte und das Logo enthält. Gehen wir weiter und schließen Sie einfach den Deal jetzt. Okay? Ich werde etwas Raum schaffen und fein. Okay, jetzt haben wir den Container fertig. Wir müssen keine Spalte speziell nicht für das Logo hinzufügen. Also lasst uns ein anderes Div erstellen. Und geben wir ihm eine Klasse und ich werde diese Klassenmarke nennen, weil das Logo die Marke ist . Lassen Sie uns ihm eine Klasse von Marken geben. Lassen Sie uns den Dev schließen Und jetzt innerhalb von der Marke Dev, fangen wir an, den Inhalt für das Logo hinzuzufügen. Also zuerst, sein erstes Jahr ist, dass ich hier noch einen Dev hinzufügen werde, und wir können diesen Tag der Klasse anrufen. Geben wir dem eine Klasse aus, Sagen wir lokale Rap, okay? Und jetzt werden wir in diesem speziellen Dev das Bild hinzufügen, das Logo selbst. Also lassen Sie uns jetzt voran und geben ihm ein Bild und wir geben nur diese Klassen. Nun, nennen wir das Klassenlogo. Und jetzt für die Quelle, wird es sein, dass wir es in Vermögenswerten haben. CSS Nein, wie es tut mir leid, Assets, Bilder und dann Logo der PNG. Okay, das sollte richtig sein. Und ich werde etwas anderes hinzufügen, das den ganzen Text nennt. Nun, wenn wir nicht über den ganzen Text gesprochen haben und Sie nicht wissen, was es ist im Grunde ganz Texas sehr, sehr nützlich, weil Menschen, die blind sind, verwenden sie bestimmte Software, um den Inhalt von einer Website jetzt zu führen weil sie die Bilder nicht sehen können. Und weil solche Software Bilder nicht beschreiben kann, würden sie den alternativen Text für dieses Bild verwenden, um zu beschreiben, was dieses Bild für den Blinden ist . So ist es ideal für blinde Benutzer. Und auch Suchmaschinen wie Google werden Sie belohnen. Wenn Ihre Bilder alternativen Text haben, so ist es sehr, sehr, sehr wichtig. Um es hinzuzufügen, war der ganze Text einfach. State Ault gleich und dann und Coats. Ich werde sagen, Web-Impact-Logo, denn das ist, was es ist, oder? Web Impact Logo Und ich denke, wir sind gut und okay, ich werde jetzt einfach vorgehen und das retten und schauen wir uns an, was wir hier runtergekommen sind . Aber zuerst eine Seite und okay, so gut. Jetzt erscheint das Logo. Okay, gehen wir zurück. Zwei schwarze. Es ist in Ordnung. Was als nächstes? Ging Jetzt werden wir den Namen der Web Impact Text hinzufügen. Also wieder, wir werden einen neuen Dev erstellen oder ob wir ihn nicht einmal brauchen. In diesem Fall können wir mit einer einfachen Spanne gehen. Leslie, es ist okay. Ich werde mit dieser Spanne gehen und wir riefen ist eine Klasse verbringen Klasse gleich und und wurde einfach seinen Namen genannt. Und dann, wenn eine neue Zeile, werde ich jetzt hier reinkommen und sagen, Span-Klasse gleich. Also, jetzt werden wir den überschwemmten Kraft-Text hinzufügen , der Web ist. Also geben wir dem einfach einen Kurs ab. Lassen Sie mich hier reinkommen und Namen sagen. Sagen wir, Web, okay. Also, dieser Text hier wird Web und dann Ford Schrägstrich sein, weil denken Sie daran, ich höre das im Logo. Gehen wir hier zurück. Sie sehen Web und dann vier Schrägstrich ist nicht weiß. Also, die sind zusammen und dann Auswirkungen auf diese und blies. Es wird eine andere Klasse sein. Gehen wir zurück. Das ist Web. Schließen wir die Pfanne. Und jetzt können wir die neue Spanne für die Auswirkungen der Spanklasse gleich hinzufügen und dann werde ich Name und dann Impact sagen , okay. Und dann wird der Text selbst jetzt Auswirkungen haben. Und jetzt können wir die Spanne schließen und dann können wir die Spanne selbst die Hauptspanne schließen, die den Text hält und das ist es. Dann stellen Sie sicher, dass es uns gut geht. Ich entferne jeden leeren Raum und ah, okay. Es gibt ein bisschen ein Problem, weil Sie jetzt feststellen können, dass Körper und HTML rot sind. Das sagt uns jetzt, dass irgendwo etwas fehlt. wir sicher, dass das alles korrekt ist. Also ist dieser Dave geschlossen. Dieser Dave wurde geschlossen. Auch dieser Dave wurde geschlossen. Und Oh, genau hier. Die Spannweite wurde nicht geschlossen. Also lasst uns voran gehen und diese Spannweite schließen. Äh, okay, das ist die Art von Problem, mit dem Sie als Webentwickler konfrontiert werden, speziell mit HTML und CSS. Also fangen Sie an, sich daran zu gewöhnen. Ich werde jetzt die Akte speichern und zu unseren Schlägen zurückkehren. Ah, und mal sehen, was wir haben. Lassen Sie uns auffrischen und OK, so gut. Wir haben jetzt Web-Auswirkungen und natürlich nicht etwas Styling tun, müssen natürlich nicht etwas Styling tun, um es genau so aussehen zu lassen, was ziemlich interessant sein wird. Aber Sie sollten sich die Arten von Eigenschaften werden hier in denken, zum Beispiel, Web eine Wirkung. Offensichtlich wird die vordere Größe größer sein. Sie werden separate Klassen für ihre Spannweiten und natürlich Texttransformation haben. Das Logo selbst wird viel kleiner sein als das, was wir derzeit haben. Und vor allem, der Text und der lokale erscheinen nebeneinander. Das sind Dinge, über die wir nachdenken sollten. Lassen Sie uns zu unseren Klammern gehen und gehen wir zu unserem Haupt, dass CSS. Und da wir Stylin speziell die Markenabteilung sind, denken Sie daran, dass wir es jetzt mit dem Markenbereich zu tun haben. Ich werde hier ein paar SMS erstellen, also kopiere ich dieses Weiß hier. Lassen Sie uns das kopieren. Beruhigen Sie sich hier und fügen Sie ein, dass Andrew Cold Marke ist. Das wird der ganze Stil und speziell für die Markenabteilung sein. Alles klar , was machen wir zuerst? Lasst uns mit dem einfacheren Einweg gehen. Gehen wir mit dem Textfestival. Okay, also gehen wir zurück zu unserem Index von HTML, wir haben den Span-Namen Web, der Web und dann Name Impact ist. Also lasst uns das sehr, sehr schnell machen. Ich werde jetzt hier reinkommen, Name eingeben, Strich Impact. Und das einzige, was Minuten hier tun, ist, ihm die Farbe zu geben. Also lasst uns diese Farbe machen und es ist weiß. Also wird es f f f f f f f f f f f f f f f f f f f Ich werde nur das alte kopieren, komm runter, wir fügen ein. Aber jetzt haben wir es mit einem Namen zu tun, der ah wäre, Web, ich glaube, also lasst uns hier runter kommen und die Spanne auf Web ändern. Jetzt für die Farbe, die ich weiß, dass die Farbe hier fünf b a D a f f OK sein wird, aber wenn wir zurück zu unserer HTML-Struktur hier oben, denken Sie daran, wir haben eine Spanklasse von Namen halten beide und ich speziell erstellt ist, weil Hinweis dass der Text ist groß es, und auch die Telefongröße. Also, ob sie nicht die gleiche Telefongröße anwenden müssen und den gleichen Text verwandeln einen schlechten Fall in diese sparsame Klasse und dann diese Bank weniger bereit genau hier als auch wir können nur eine Platte auf Lee zu dieser Schmerzklasse off name. Deshalb habe ich diese Klasse erstellt. Also lasst uns das machen. Es wird hier ganz oben sein. Celeste ist, ich werde hier reinkommen und sagen, äh Punktname. Dann gehen wir weiter und fügen Sie einige Eigenschaften hinzu. Also die 1. 1 hier wird die Schriftgröße sein. Ah, lass uns mit 17 Pixeln gehen. Moment müssen wir vielleicht diese Texttransformation ändern. Offensichtlich ist es ein Fall und dann lassen Sie uns mit dem Telefon gehen, um auch zu warten. Wir machen das will 700. Also ist es ein bisschen mutig, und ich denke, wir sollten gut gehen. Gehen wir jetzt weiter und speichern Sie das einfach. Werfen wir einen Blick auf das, was wir Aktualisieren haben. Und OK, also offensichtlich wirst du die Auswirkungen nicht sehen, weil, naja, es ist weit und höher. Wir müssen das Hintergrundbild hinzufügen, damit Sie es zeigen können. Aber oh, wir haben es gemacht. Es tut mir leid. Ich habe einen Fehler gemacht. Web ist diejenige in weiß und dann ist unsere Wirkung derjenige in blau. Oh, mein Gott, ich entschuldige mich dafür. Lasst uns diese Änderung schnell vornehmen. Ah, Web, richtig. Er sollte weiß sein. Ah, ich bin so eine Idiotin. Kommen wir runter. Machen Sie das General schnell. Äh, okay. F f f f f f f f f f f f f f f f f f f f f f f f f f . . Das sollte sein. Ich habe gekündigt. Jetzt gehen wir wieder rein, dein frisches und okay, also Waffen und weißer Aufprall sind in Blau. Ok, gehen wir zurück. Und jetzt schauen wir uns an, was wir hier noch tun können. Lassen Sie uns versuchen, den Text an der Seite des Bildes auszurichten. Um das zu tun, müssen wir ein paar Änderungen am Logo selbst vornehmen. Werfen wir einen Blick auf das, was wir im Index mit HTML haben. Also genau hier haben wir die Klasse der lokalen Rap, die das Logo hält. Also vielleicht können wir Anzeige in Lane auf diese Klasse von Logo-Rap blockiert anwenden. Also lasst uns das machen. Ich komme rein und lass uns mit dem Logo ganz oben gehen . Also lasst uns etwas Raum schaffen. Also komm ich sofort rein und sage Logo Oh, das ist ein bisschen zu viel. Lassen Sie mich hier Platz hinzufügen. Ok, Logo. Und ich werde sagen, Dash Rap, öffnen wir unsere Kollegen Klammern. Und dann, nun, lasst uns das mitmachen. Spielen Sie im Linienblock ab. Okay, also lasst uns Transceiver was passieren wird? Ich werde jetzt vorgehen und sparen. Gehen wir zurück. Das ist Erfrischung. Und das hat immer noch nicht funktioniert. Okay, kein Problem. Gehen wir zurück und sehen, was wir sonst noch tun können. Was ich tun werde, ist, dass ich ein mit für das Logo selbst setzen werde. Werfen Sie einen Blick auf das Logo. Sie können hier sehen, dass es deutlich kleiner ist. Also werden wir hier ein Logo hinzufügen. Also werde ich hier reinkommen und wir kommen einfach hierher. Dunkles Logo Und ich werde das mit aus geben. Lasst uns vorerst mit 60 Pixeln gehen. Also mein Dickdarm, lassen Sie uns jetzt einen Blick auf das werfen, was wir haben. Komm wieder rein. Lassen Sie uns die Seite aktualisieren. Und jetzt können Sie sehen, dass wir jetzt die genaue Größe haben. 60 Pixel sind, aber Sie werden auch den kreisförmigen Rand bemerken, rechts, Jake, und sehen, dass er blau ist. Um diese besondere Funktion zu erreichen, müssen wir tun, ist, dass wir ein bisschen Grenze und dann ein Grenzradio hinzufügen müssen. Also lasst uns das versuchen. Ich gehe wieder hier rein und wir gehen rüber zur lokalen Rap-Klasse, also werde ich sagen, Grenze zwei Pixel. Gehen wir mit Solid und dann weiß ich, dass das Halsband genau dasselbe ist. Es werden fünf b d e a F f... F f und dann um die Grenzen kreisen zu lassen. Ich erinnere mich, dass diese Eigenschaft namens Border Radius und ich denke, es ist, dass es vier Pixel . Das ist es, was wir brauchen, um es zu kreisen. Lass uns speichern, Gehen wir zurück, Lasst uns die Seite aktualisieren und da gehst du. Obwohl Sie bemerken werden, dass das Logo selbst es ein bisschen weiter nach oben ist. Es ist nicht perfekt in der Mitte von der Grenze ausgerichtet, so gibt es eine Eigenschaft, die wir anwenden können, und es wird die vertikale genannt, unsere Linie, die dafür sorgt, dass das Logo direkt in der Mitte dort in der Mitten von unserer Grenze. Also, um das zu tun, werde ich hier reinspringen, zurück zu einem mentalen CSS und dann für das Logo hier. Ich werde mich bei dir bewerben und sagen Vertical ah, Linie wird Mitte sein. Okay, lassen Sie uns das retten. Gehen wir zurück zu den Rebellen. Lassen Sie uns auffrischen. Und jetzt können Sie sehen, dass das Logo jetzt perfekt dort in der Mitte platziert ist, und deshalb werde ich für Topf anhalten. Sobald das Springen Teil zwei. Wo wird weiterhin die Kopfzeile von unserer Website zu entwerfen? Dann sehen wir uns. 44. Aufbau des Header Teil: Nun, Comebacks. Und wenn Ihr Video erfolgreich hinzugefügt wird, ah Logo aber etwas Design und wir haben auch die Web-Impact Text hinzugefügt. Aber jetzt ist es Zeit, die Menüpunkte alle sieben von ihnen hinzuzufügen. Also der Kopf von uns, ihr Klammern und in meinem unexakten HTML, werde ich das neue Tag direkt unter der Spanne hinzufügen. Bitte zahlen Sie. Sehr aufmerksam, weißer Junge. Dieses div für die Marke genau hier. Wir werden ein neues Tag für das Menü direkt unter diesen Hierarchien hinzufügen. Also genau hier werde ich etwas Platz hinzufügen, und dann wird das Tag für das Menü wird der Knave sein. Es ist eine HTML-Steuer speziell für Ihre Menüpunkte. Also benutze immer diesen speziellen Angriff im Gegensatz zu Davy Könnte ihn benutzen, Dave, wenn du wolltest. Aber es ist peinlicher, mit dem Knave-Tag zu gehen. Also genau hier werde ich dem eine Klasse geben, und wir werden seine Speisekarte einfach sehr, sehr, sehreinfach nennen , sehr . Habe Klassenmenü und okay, lassen Sie uns voran und schließen Sie den Knave. Oh, ich lass uns etwas Platz schaffen und wir werden viele Artikel als Liste hinzufügen, also gehen wir mit der Bestellliste von U L. und dann einfach so, fügen wir L hinzu. Es tut mir leid. Lassen Sie uns das ul Festival schließen. Und dann innen, lassen Sie uns L I Die erste 1 der allererste Listeneintrag hinzufügen. Und das ist eigentlich nicht erinnern. Kommen wir wieder rein. Alles klar, also über Dienstleistungen, richtig? Ich werde wieder hier reinkommen. Also, was ich hier tun werde, ist, dass ich einfach alle Listenelemente für das Menü hinzufüge und dann immer, ähm, das Video, sobald ich wieder willkommen bin dann immer, ähm , das Video, und gegen das gerade jetzt ist, habe ich die verbleibende Menüversuche. Ich habe auch die Tags für sie hinzugefügt. Die A-Tags, die Links im Grunde, und diese werden die Knöchel-Tags genannt. Die Idee hier ist, dass, wenn Leute auf diese Links klicken, sie zu den Abschnitten führen, in denen wir den Inhalt für das Element haben, auf das sie geklickt haben . Keine Sorge, darüber reden wir später. Aber für jetzt, stellen Sie sicher, dass Sie Ihre Hashtags und dann den Text haben, der den eigentlichen Menüpunkt darstellt. Nun, hier ist meine Seite. Nach frisch, Sie können sehen, genau dort haben wir alle unsere Menüpunkte, aber wir müssen einige ernsthafte CSS Änderungen machen. Also lasst uns wieder Teoh Klammern gehen und ich werde das Haupt dieses CSS öffnen. Was ich hier tun werde, ist, dass ich die Marke schnappe. Lassen Sie uns das kopieren. Lassen Sie uns den ganzen Weg hierher kommen und fügen Sie den neuen Abschnitt zwischen, Natürlich, Menü sein. Okay, schaffen wir viel Platz. Kommen wir wieder hierher, Ordnung. erste Interesse ist die Menüklasse selbst. Wir werden hier ein paar Änderungen vornehmen. Die lustige Familie. Sie müssen geändert werden und ist in der Regel eine gute Idee, eine andere Form Familie für Ihre Menüpunkte haben und in einem anderen für Ihre Tech so Monster wird es für den Körper sein. Und dann, für viele Gegenstände waren dabei, eine latell zu verwenden. Fühlen Sie sich frei, einen anderen Menüpunkt zu verwenden, wenn Sie möchten. Wir könnten auch das Halsband von unserem Text hinzufügen , der weiß sein wird, aber ich möchte das nicht tun, weil die Tasche bereits weiß ist und wir müssen in der Lage sein unsere gekauften Menüpunkte zu sehen. Extras von Definitiv auseinander Fall sind, dass wir die Position auch relativ machen, für gutes Maß, relativ und OK, das ist für die Menüklasse hier runter kommen wird. Nehmen wir eine Änderung am Menü vor. Sie l Weil wir den Standard entfernen möchten, Styling diese Kreise für die Menüpunkte so gut kommen jetzt und sagen, die Liste Stil Typ. Und natürlich geben wir einfach. Das sind keine. Wir wollen keine Listenstile. Wir geben diesem auch ein Muster von einem Pixel. Und für ein gutes Maß wird die Marge auf Null gesetzt. Und dann lasst uns hier runterkommen und ähnliches für die Airlie-Gegenstände selbst hier runterkommen . Werde ich einen ungeraden Rand von 10 Pixeln und dann ein Pixel für links und rechts? Und das wäre das. Gehen wir weiter, und das ist nur speichern und sehen, wie das jetzt aussieht. Lassen Sie uns aktualisieren und OK, sehen viel, viel, viel besser jetzt, wie es ist, aber wir können einige tatsächliche Änderungen am Text selbst vornehmen. Wir können vielleicht die Telefongröße bei etwas Funk Gewicht als auch ändern, können sie aber auch als Inline-Block-Seife anzeigen. Lass uns das alles machen. Ich gehe zurück zu Klammern und hier unten wird Menü haben und dann ein so wie jetzt bekommen lassen Sie uns direkt Änderungen an der Technik vornehmen. Also werde ich auf die lustige Größe gehen und ah, lassen Sie uns mit 16 Pixeln Schriftart gehen. Warten Sie. Mal sehen. Frontal, warte. Ich denke an vielleicht etwas wie, sagen wir 400, ich denke. Lass uns gehen 400 und dann wieder die Farbe. Wir könnten die Farbe in Weiß ändern, aber das will ich nicht tun. Aber wir werden die Anzeige zwei im Zeilenblock ändern. Ok. Ah, die Position wird diese auch auf relativ setzen. Und ah, für ein gutes Maß, Textdekoration. Sagen wir das nicht. Wir wollen keine Dekoration. Was denn je? Okay, gehen wir weiter, sparen und schauen wir uns an, was wir haben. Frisch und okay. Nicht schlecht auszusehen. Wir kommen jetzt dorthin. Offensichtlich ist die große Herausforderung hier, unsere Menüpunkte ins Licht zu bringen und dabei unser Logo links zu halten. Nun, dies ist eine Eigenschaft, über die ich noch nicht gesprochen habe, aber es gibt eine Eigenschaft, die als Float-Eigenschaft bekannt ist. Die Idee hier ist, dass wir schweben. Sie können Elemente oder Inhalte entweder links von Ihrer Seite oder nach rechts verschieben. Also, was ich tun werde, ist, dass ich hier wieder reinkomme, um Klammern zu haben. Und wenn wir auf die HTML-Struktur gehen, denken Sie daran, dass wir zwei Hauptspalten haben, eine mit dem Logo, eine mit den Menüpunkten. Die für das Logo ist die Markenklasse, während sie für die Menüpunkte wollen, ist natürlich die Klasse aus dem Menü. Lassen Sie uns unsere Float-Eigenschaften hinzufügen. Ich gehe rüber, um CSS und für die Marke hier zu pflegen. Ich öffne die Marke der Markenklasse und sage „Float links“. Also schweben wir die Marke nach links. Ich werde ihm auch eine Position von relativ wirklich tive geben. Und da gehst du. Und dann hier unten für die Speisekarte, werde ich die Speisekarte nach rechts schweben. Gehen wir jetzt voran und speichern und lassen Sie uns die Änderungen sehen. Lassen Sie uns erfrischen und voila! Jetzt können Sie sehen, dass etwas sehr Interessantes passiert, dass Menüpunkte jetzt auf der rechten Seite sind. Das Logo ist jetzt auf der linken Seite, und Sie würden auch feststellen, dass der Text die Web-Auswirkungen jetzt direkt neben dem lokalen, weil wir die Inhalte von unserer Marke nach links schweben. Aber unsere Verbündeten eine Liste Elemente werden immer noch als Blöcke angezeigt, so dass wir das ändern können. Ich füge auch in der Grippe den Schwimmer rechts hinzu? Es tut mir leid. Schwebe links, Bruder für unsere Verbündeten. Ein Leicester. Dieser Schwimmer ist sicher. Gehen wir zurück. Lass uns erfrischen und da gehst du. Also sind wir immer noch ziemlich weit davon entfernt, das zu erreichen, was wir gerade hier haben. Aber wir kommen allmählich dorthin. Das ist es also, um unsere Menüpunkte hinzuzufügen und auch mit der flood Eigenschaft zu arbeiten. Deutschland, Vendex Variable wird weiterhin auf unseren Kopf gehen. 45. Entwerfen unseres Header 1: Nun, komm zurück. Also lassen Sie uns weiter Kopf entwickeln. Aber bevor wir das tun, muss ich Ihre Absicht auf einen Pfeil zeigen, den ich hier gemacht habe. Jede Waffe in der Struktur. Also genau hier, wo wir die Dev-Klasse der Marke so nah haben und sie haben hier sollte eigentlich draußen sein, weil dieser Dave der klassischen Marke soll das Logo sowie den Namen der Web-Impact Namen enthalten . Also werde ich das hier schneiden, und ich werde es direkt außerhalb der Klamotten kleben und so umspannen. Und dann werde ich hier eine Einladung machen, und so soll es sein. Also in den Behälter der Marke, Sie haben die Klasse Logo-Rap, und dann haben Sie diese Schmerzklasse aus Namen. Also entschuldige ich mich. Es ist ein Fehler meinerseits. Aber das sind einige der Dinge, die passiert sind, wenn Sie unsere Websites erstellen. Sie sind immer anfällig zu machen sind diese Arten von Fehlern oder tun entschuldigen Sie sich dafür. Aber lassen Sie uns jetzt weitermachen. Ich werde voran gehen und sparen und schauen wir uns an, was wir tatsächlich auf unserer Seite tun können. jetzt. Also genau hier. Sie würden bemerken, dass der Inhalt mehr in Richtung Zentrum ist, oder? Es ist nicht wie das, was wir derzeit haben, wo der Inhalt genau hier an den Rändern ist. Also müssen wir einen Inhalt in die Seite eines Containers legen und dann versucht, den Inhalt in der Mitte auszurichten . Also gehen wir zurück, Teoh HTML-Dokument. Und genau hier können Sie sehen, dass wir den Tag der Klasseninhalte haben. Dies ist der Hauptinhalt, der das niedrige Ziel, die Menüpunkte und so weiter hält. Und in der Tat ist diese Klasse von Inhalten eine Klasse, die wir immer und immer wieder in diesem Gericht verwenden werden. Also lasst uns das machen. Ich gehe rüber zu Maine und schnappe mich den Markentext. Ich werde etwas Styling für eine Content-Klasse hinzufügen. Lassen Sie mich diesen Weg hinzufügen, und ich werde diesen Inhalt nennen, okay? Und jetzt werde ich die Klasse der Inhalte selbst hinzufügen. Es sei denn, es gibt ein paar Sachen. Okay. Das erste ist, dass wir das mit deklarieren werden, was natürlich 100% sein würde natürlich . Es ist eine gute Idee, 100%. Aber jetzt werden wir ein Maximum mit 402.140 Pixeln setzen. Das wird also der Container mit für unseren Inhalt sein. Gehen wir jetzt sicher vor. Gehen wir zurück zum Broza Refresh. Und jetzt können Sie sehen, dass der Inhalt im Grunde hier jetzt gedrängt wird. Mehr sind in Richtung Weiß nach links, wie man besser sehen kann. Wir müssen also immer noch versuchen, herauszufinden, wie wir unsere Inhalte mehr in Richtung Zentrum zentralisieren können . Und weil wir die XML-Struktur für den Markencontainer geändert haben, können Sie jetzt sehen, dass unser Texas nun direkt neben dem lokalen ausgerichtet ist. Also nochmal, ich entschuldige mich für diese Verwirrung. Ich hätte bemerken sollen, dass Ah, ich Alia geschlagen habe. Aber lassen Sie uns versuchen, unser Logo und die Menüpunkte mehr in die Mitte zu bringen. Also, erinnerst du dich an diesen Trick, nicht wahr? Ich zeigte Ihnen die Marge und dann Null Auto Trick. Nun, ich werde das hier spielen, also machen wir das. Das ist sicher. Gehen Sie zurück zu einem Browser-Refresh und es geht los. So im Moment können Sie sehen, dass der Inhalt jetzt mehr in Richtung der Mitte ausgerichtet ist, so wieder sehr schnell wollen Sie erreichen dies sehr, sehr, sehr schnell. Sie werden ein Maximum mit für Ihren Container und dann einfach die Ränder hinzufügen. Sie auch diejenigen, die das Ihnen geben wird, sind diese Art von Struktur. In Ordnung, ein paar weitere Dinge zu tun, Gonn Kopf zurück zu unserem CSS und genau hier werde ich auch seltsam etwas Polsterung, also können wir Pat in 0 20 Pixel für links sehen. Und im Moment, erinnern Sie sich an Entscheidungen Box Modell, wo die Summe mit wird auch die Grenze enthalten, wie die Muster sich vorstellen. Nun, das werden wir tun. Also wird es Bücher Größe in wird die Eigenschaft Box Größe sein, und dann die Velo von Grenze Boxen, was wir hinzufügen werden. Das hier wird also bedeuten, dass es mit unseren Rändern und Mustern einschließt. Und es ist normalerweise so, wie Sie gehen wollen. Wenn Sie in Ihre Container-Position eingestellt, werde ich mit Verwandten wie gewohnt und voila gehen. Okay. Ich werde runterkommen und dich auch Marke schlagen. Und wenn Sie es hier bemerken, wird das Logo immer noch oben bombardiert. Also müssen wir etwas Marge hinzufügen. Also werden wir der Klasse Margen hinzufügen, oder dass der Container, der das Logo hält , was natürlich die Marke ist natürlich . Also gehen wir zurück zur Marke jetzt und genau hier werde ich Margin sagen und ich werde sagen 20 Pixel und dann Null links und rechts. Gehen wir jetzt weiter und sicher. Gehen wir zurück zu den Glocken sind erfrischen und da gehst du. Die Dinge sehen jetzt definitiv viel, viel besser aus, aber es gibt noch etwas Arbeit, die wir tun müssen. Wir müssen einige Ränder zum Menüpunkt hinzufügen, und wenn Sie direkt hier auf unserem fertigen Produkt bemerken, würden Sie feststellen, dass das Logo und die vielen Elemente im Grunde den Kopf nach oben sie sind ein bisschen breiter als der Rest aus dem tatsächlichen Inhalt . Du siehst es vielleicht nicht, aber glaub mir, es ist da. Der Header ist nur ein bisschen breiter. Also werden wir tun, ist, dass wir auch das Maximum mit aus dem Kopf zu erhöhen sind speziell in Ordnung, Also lasst uns das tun, zum Beispiel, war, Gehen wir zurück in Klammern und geht über, um CSS zu halten. Lassen Sie uns einfach voran gehen und fügen Sie Ränder zu unserem Menü hinzu, also werde ich hier reinkommen und sagen, Marge ist 25 Pixel Null. Okay. Und jetzt für unseren Header. Sieh dir das an. Ich werde zum Index mit HTML gehen. Und genau hier haben wir den Inhalt der Todesklasse. Ich werde eine weitere Klasse aus weit hinzufügen. Okay, im Grunde haben wir zwei Klassen hier, Inhalt und breit. Und jetzt rette ich das einfach. Lassen Sie mich die Datei speichern. Ich gehe nach Maine. Diese CSS Emma. Wir haben den Inhalt genau hier. Ich werde hier reinkommen und Punktinhalt sagen und dann nicht weit bemerken. Es gibt keinen Platz, da diese beiden Klassen zu den gleichen Elementen gehören. Also werde ich jetzt hier reinkommen und einfach Max mit sagen, und ich werde 12 sagen. Lass uns 12 50 Pixel gehen. Es ist also nur ein bisschen breiter als die 1140 Pixel. Lasst uns jetzt weitermachen und das retten. Gehen wir zurück. Teoh Browser. Äh, es kommt hierher. Lassen Sie uns auffrischen. Und da gehst du. Okay. Viel, viel besser. Jetzt, hier drüben, können Sie sehen, wie es aussieht, und wir müssen einen Weg finden, wie wir diesen Effekt erzielen können, wo, wenn wir auf die Menüpunkte bewegen , Sie vielleicht bemerken, dass der ursprüngliche Text Sie ernsthaft wie etwa, zum Beispiel, es geht nach unten und dann eine andere über wie, kommt über sie. Also im Grunde ist es, als hätten wir zwei Texte hier, einen, den wir sehen können, und dann einen anderen, der den Platz vom vorherigen nimmt, wenn wir auf diesen Menüpunkt bewegen und Sie können auch die Hintergrundfarbe sehen ändert sich auch in Blau. Wie können wir das erreichen? Nun, das erste, was wir hier tun werden, ist, dass wir die Struktur von unseren Menüpunkten ändern werden. Grundsätzlich werden wir den Text wiederholen. Anstatt jetzt nur einen über Link zu haben, müssen wir es für Dienstleistungen haben, warum wir? Und dann werden wir einen im Standardzustand verstecken. Und dann, wenn wir auf die Standardversion hoffen, wird es sich jetzt verstecken, und sie werden jetzt die Harvard States Version im Grunde zeigen, also helfe ich ihnen, Sinn zu machen. Keine Sorge. Es sollte sinnvoll sein, wenn wir es weiter bauen. Also, was ich tun werde, ist, dass ich zu unserem Index jedes Ähnlichen zurückgehe und wir werden die Struktur von unseren Menüpunkten ändern, also sieh dir das an. Ich werde hier vor allem etwas Platz schaffen , und ich werde hier eine neue Zeile hinzufügen. Lass uns das auch schließen, und okay, sieh dir an, was ich hier erledigen werde. Ich werde sagen, bei einer Reise geht es darum, hier etwas Platz zu schaffen. Alles klar, hier. Also die Idee hier ist, dass wir den Übertext zweimal hinzufügen werden, was zwei verschiedene Span-Klassen bedeutet. Okay, also werde ich die allererste Spanne hier hinzufügen, und er nannte seine Stiftklasse gleich, nennen wir das eine Standardeinstellung. Okay, also wäre dies der Standardmenüeintrag, den wir sehen, wenn wir die Seite laden. Also lassen Sie uns Text hier hinzugefügt und dann werde ich die Spanne schließen, und dann wird die nächste Pan-Klasse hier derjenige sein, der angezeigt wird, wenn wir Khobar auf dem Menüpunkt. Okay, also rufen wir das hier vorbei. Okay? Also im Grunde kommt es über, wer mich auf dem Menüpunkt beenden. Ich werde den Text wiederholen und diesen auch nennen. Ich werde weiter gehen schließt pan. Und da hast du es. Also genau hier. Dies wird das strukturelle haben für unsere Menüpunkte. Wie ich zur Verteidigung Pan-Klassen eine sagte, die der Standard sein wird. Und dann Wunder wird erscheinen, wenn wir hoffen, dass über die Standardeinstellung sind viele Artikel. Also, was ich hier tun werde, ist, dass ich genau die gleiche Struktur für alle Hauptpunkte machen werde. Ich werde das Video pausieren und fortsetzen, sobald ich fertig bin. Willkommen zurück und ist wieder da. Sehen Sie, jetzt habe ich die Spanisch-Klassen Standard und über für alle Menüpunkte hinzugefügt, die ich gespeichert habe. Nun, wenn Sie dasselbe tun, ist genau das, was Sie schießen. Sehen Sie, wenn Sie sich aktualisieren, können Sie sehen, jetzt haben wir den Text mit Pizza drin, aber es ist okay. Wir werden jetzt ein paar wichtige Änderungen vornehmen. Ich gehe zurück zu Maklern, sehe keine Einschätzung und das Erste, was wir hier machen werden. Ist das okay? werden wir die Span-Klassen selbst stylen Zuerstwerden wir die Span-Klassen selbst stylen. Okay, wir werden einige von allen hinzufügen, die für sie beginnen. Also lasst uns dieses Menü A machen und dann spannen. Also wird der gesamte Text auf den Menüpunkten dieses Styling zusammen haben. Das erste, was zuerst ist, dass wir eine Position von einem Verwandten setzen und das wird sehr, sehr wichtig sein sehr, . Sehr, sehr bald anzeigen. Wir betrachten dies auch als In-Line-Block, und wir werden einige Polsterung von 10 Pixeln hinzufügen. Und lasst uns auch den Buddha machen. Es tut mir leid, die Buchgröße in der Unterkunft auch. Und natürlich gehen wir mit dem Wert der Buddha-Bücher. Lass uns das retten. Gehen wir zurück zum Browser. Das ist erfrischend und sie gehen, okay, gut. So im Moment können Sie sehen, dass es jetzt mehr Platz gibt, weil wir auch ein Muster hinzugefügt haben . Wir haben die Anzeige in Lyon Block hinzugefügt, so dass es beginnt ziemlich ordentlich aussehen. Jetzt lasst uns stylen. Die Standardeinstellung sagt aus unseren Menüpunkten direkt hier. Sie können sehen, dass der Standardstatus den bräunlich dunklen Hintergrund hat. Es hat die Grenze. Es hat wie, ah, hellste blaue Grenze obere Farbe dort als auch. Also mal sehen, wie wir das Design hinzufügen können, das hier zurück geht. Also werden wir im Grunde die Span-Klasse von Standard anvisieren. Deshalb werden wir es verstauen und das machen wir genau hier. Hier unten. Ich werde sagen Punkt Menü Abstand oder Standard. Okay. Und lasst uns im Hintergrund Coehlo möglich. Okay, also haben wir die Tasche und den Culo und ich habe sie hier. Es sind 40 40 40. Wir fügen auch einen Rahmen hinzu, der ein Pixel ist. Es wird solide und auch braun sein. Das wird also für mich Leid sein. 555 und dann die Kugel Top Farbe. Es hat die hellste blaue Farbe, also werde ich sagen,, aber es ist eine Farbe und der Wert es wird ein 00 b eins e vier sein. Ich glaube, das ist richtig. Und lassen Sie uns auch die Anzeige für den Online-Block machen. Und Ah, okay, gehen wir weiter. Jetzt sicher. Gehen wir zurück und sehen, was wir haben. Und Voila. Okay, wir kommen dorthin. Wird da reinkommen. Das einzige, was jetzt ist, dass wir versuchen müssen, einen Weg herauszufinden, wie wir die Menüpunkte zurück zu Div ICT bekommen können , aber auch, wie wir den Überzustand für die Menüpunkte verstecken können. Also alle Menüpunkte ohne die Hintergrundfarbe, müssen wir sie verstecken. Aber wie können wir das tun? Wie können wir so viele Gegenstände verstecken? Nun, um Zeit zu sparen, werde ich Ihnen sagen, was wir tun werden, oder? Wir kommen wieder rein und ich füge das Klassenmenü hinzu. Das wird sehr interessiert sein, und jetzt werde ich hier reinkommen und ganz leise werde ich Position sagen. Kannst du den Schleier der Position hier erraten? Es wird absolut sein. Voila. Gehen wir weiter. Speichern Sie das. Geh zurück zu einer Broza-Erfrischung und los geht's. Die Idee hier ist, dass sich daran erinnern, wann immer wir es mit der Position absolut zu tun haben, wird ein solches Element sich am nächsten übergeordneten Element mit der Position aus relativ verankern . Es ist genau hier, Frank. Über zwei Index Punkt html. Es ist genau hier. Sie können sehen, dass wir die über Span-Klasse haben, über die absolut ist. Aber dann zeigt die eine Steuer selbst eine Steuer an Position relativ. Es ist genau hier auf der Hauptseite, dass CIA sagt, Sie können rechts eine Position Vela tive sehen. Das ist es, was gerade passiert. Die Absolutionselemente verankern sich nun an den scheinbaren A-Tags. Aber Sie werden feststellen, dass der Text immer noch irgendwie verschüttet wird. Also, um das zu beheben, werde ich jetzt wieder hier reinkommen und für den Erwachsenen über die Klasse, werde ich sagen, „ Lust off zero. Also mein Dickdarm und sehr schnell kommen wir hier runter auf die Speisekarte. Lassen Sie uns hinzufügen, ich bin so auf der Speisekarte A's. Stattdessen fügen wir jetzt die Farbe für Weiß hinzu. Okay, machen wir das. Das ist sicher und 1/2 voraus hier drin, und ich erfrischen mich. Da gehst du. Also im Grunde, weil wir gesagt haben, dass links Null ist, haben wir im Grunde die absolut schiebenden Elemente an den Rand von den scheinbaren Containern geschoben , die die A-Tags haben. Das ist, warum Sie vielleicht auch bemerken, dass es Sex jetzt ist mutig. Sie sind nicht so, wie das Licht nimmt, sehen Sie hier. Das ist wie ein Frontgewicht von vielleicht 300 hier. Das ist mehr wie ein Frontgewicht von 600 Kain bekommt warum das ist, weil wir beide Texte zur gleichen Zeit sehen . Sie haben den Standard über Text am rechten Tag und dann hinter dem etwa X, Sie haben die über beide für die über-Klasse, Also im Grunde verdoppelt sich der Text. Deshalb ist es jetzt Bold. Verstehst du das? Also im Grunde haben Sie den ersten Text erscheinen und dann direkt dahinter. Sie haben jetzt den Text mit der Klasse aus über. Deshalb ist es mutig. Und wir müssen etwas dagegen unternehmen. Also, wie können wir den Text hinter dem Text mit einer Klasse von oben verstecken? Wie können wir Onley die Klasse von Standard zeigen, aber in der hohen Klasse aus über. Es ist sehr, sehr einfach. Ich werde hier wieder rein gehen, und hier ist genau das, was wir tun werden. Ich gebe Sieh dir das an. Okay? Ich werde den Eltern eine Steuer geben. Also werde ich hier reinkommen und ich werde Höhen sagen. Lasst uns mit 40 Pixeln gehen, okay? Und dann werde ich mich sofort anrufen, und ich werde Top-Minus 40 abgenutzte Pixel sagen. Im Grunde werfen wir die Texte mit der Klasse aus, aber wir werden drei über die acht Tags selbst, wenn sie jetzt hier reinkommen. Sicherer Kopf hier wieder rein. Wir frisch Und da gehst du. Jetzt ist der Text verschwunden. Du kannst ich dir besser verstehen lassen? zeig dir logischerweise etwas, wenn ich hier runterkomme und OK sagte, was ist Liebe? Banner für 21 Gehen wir mit Minderjährigen sind 13 statt und lassen Sie uns den Unterschied sehen. Okay, wenn ich mich gerade erneuere, kannst du es wissen? Siehst du, das ist der Text dahinter, Freitag. Also versuchen wir es zu schieben. Gelegenheit verschleppt. Was ich also einfach wieder tat, war, dem Inhalt von sich selbst das Menü eine Spanne zu geben, die wir ihren Köpfen für die Pixel geben und dann einfach die Klasse über Bestellungen verbergen. Geben Sie ihm minus 41 Pixel bis zum Tod. Und wenn ich hierher zurückkomme nochmals erfrischen würde, siehst du, dass es weg ist. Das ist also ein Trick, den Sie in Zukunft anwenden möchten. In der Reihenfolge Seasons Projekte. Das ist viel zu lange gegangen. Also danke, dass Sie die deutsche Veranstaltung erregbar gesehen haben. Setzen Sie unser Gebäude aus dem Kopf nach oben 46. Entwerfen unseres Header: Willkommen zurück. Hoffe, Sie genießen die Lektionen Die weit so zuvor waren wir in der Lage, ein gewisses Ausmaß verbergen den Spanentext für die über-Klasse. Im Moment ist alles, was auf dem Menü ruht, der Text für die Standardspanne. Aber der Text für die Überspanne ist eigentlich noch da. Es ist genau hier oben. Wir können es nicht sehen, weil die Menüelemente, auf denen der Text auf weiß gesetzt wurde. Wir haben eine weiße Tasche auf Farbe. Also, um sie zu sehen, lassen Sie uns etwas tun, das ich zurück zu Klammern und für die über-Klasse gehen werde, Lassen Sie uns voran und fügen Sie eine Hintergrundfarbe hinzu. In Ordnung, also lass uns das Hinterland machen. So buchstabieren Sie Hintergrund-Tasche auf Farbe, und ich werde es 00 b eins und vier geben. Und lassen Sie uns auch die Grenze zur Verfügung stellen. Und ich habe richtige Idioten entwickelt, ein Pixel, eine feste Grenze. Aber die Farbe dieser genau gleichen Spalte 00 b. Ich werde nicht e vier. Technisch gesehen müssen Sie nicht einmal die Grenze hinzufügen. Aber hey, lassen Sie uns das einfach hinzufügen. In Ordnung, ich werde jetzt vorgehen und sparen. Geh zurück. Teoh Broza waren frisch und da geht's. Überlebt. Jetzt können Sie sehen, dass es genau da ist. Aber das sollte nicht passieren, ich weil wir tatsächlich eine Höhe zur Verfügung gestellt haben. Vergiss das nicht. Wir kamen herein und sagten für die A-Spanne, wir geben ihm eine Höhe von 40 Pixeln. Das hier ist definitiv höher als 40 Pixel. Also, was könnte passieren? Was wir tun müssen, ist, dass wir eine neue Eigenschaft bereitstellen müssen, die als Überlaufeigenschaft bekannt ist und sie im Grunde mit Überlauf auf versteckt setzen, wenn Inhalt eines Elements aus seinem Container geht . Es könnte sein, weil Sie solche Inhalte positioniert haben. Absolut. Was ziemlich viel passiert. Sie können die Überlaufeigenschaft verwenden, um diesen Inhalt auszublenden. Also hier ist ausführbare Datei, die wir tun werden. Ich gehe hier rein und gehe rüber zu dem scheinbaren Element, welches die Speisekarte ist? A nicht die Span-Klasse, sondern das eigentliche ein Element selbst. Ich komme hier rein, und ich sage „Überlauf“. Versteckt. In Ordnung. Also im Grunde sagen wir gerade jetzt, dass jeder Inhalt, der über 40 Pixel geht, es im Grunde verbirgt. Also gehen wir wieder hier rein, zuerst die Seite und wie sie gegangen ist. Es ist immer noch da, technisch gesehen, aber im Moment haben wir gesagt, dass er es nicht versteckt hat. Das wollen wir nicht sehen. Das wollen wir also im Idealfall sehen. Aber wie erreichen wir diesen Effekt jetzt genau hier? So dass, wenn wir den Mauszeiger auf die Menüelemente zeigen, die Klasse aus Standard verschwindet. Und dann erscheint der für Over. Sie betrachten blaue Hintergrundfarbe, die angezeigt wird. Das sagt uns gerade jetzt, dass es die Klasse aus da drüben jetzt gesehen wurden, wenn wir ho über die Menüpunkte. Wie erreichen wir diesen Effekt? Will, dies zu tun, werde ich Ihnen einen neuen Selektor vorstellen, der als Hover auswählbar bekannt ist. Grundsätzlich, mit dieser Wahl, können wir setzen Arten von Änderungen anwenden, wenn wir Khobar auf einem Element. Also, um dies zu tun, sieh dir das an. Ich werde wieder in Ihre Klammern gehen und ich werde eine neue Erklärung erstellen. Ich werde sagen, ich dachte Menü A und jetzt der Doppelpunkt und dann schweben. Dies hier ist der Hover-Selektor in Aktion. So wählen Sie das Element aus. Sie möchten den Übereffekt auf Sie hinzugefügt Köln und Inditex Hauver Raum anwenden. Und jetzt, was ich tun werde, ist, dass ich wählen werde. Ich ziehe die Klasse rüber. Wir wollen nun den Übertext zeigen, wenn wir über unseren Menüpunkt. Ich hoffe, das ergibt Sinn. Ich werde jetzt reinkommen, adäquat Zahnspangen und lass uns das tun. Wie denkst du, können wir jetzt den Übertext anzeigen, wenn wir den Menüpunkt gedrückt halten? Denken Sie an alles, was wir getan haben, um es in erster Linie zu verstecken, was wir ihm eine Top-Position gegenüber Bergleuten für 21 Pixel gaben. Also, um es hier auszugleichen, können wir einfach hier reinkommen und Top-Null sagen. Und da gehst du bei einem Semikolon speichern. Gehen Sie zurück zu einem Boza, aktualisieren Sie die Seite. Und jetzt sieh dir das an. Wenn ich auf die Elemente jetzt hoffe, können Sie sehen, dass der O Vertex jetzt erscheint, weil mit der Tasche auf Farbänderungen jetzt wissen wir, dass es der Hover-Text ist, der tatsächlich drin ist, aber wir sind noch nicht fertig. Wenn Sie einen Blick auf unsere Modell-Website, beachten Sie, dass die Änderung im Text im Hintergrund ist irgendwie glatt auf, wie das, was wir derzeit haben. Sofort. Es ist sehr, sehr sofort mit über auf den Menüpunkten und es ist sofort, als gäbe es keine Änderung. Ich meine, es gibt keine Verzögerung, es ist nicht glatt, ist nur sehr, sehr augenblicklich. Und obwohl das funktioniert, ist es nicht ganz dasselbe wie das, was wir gerade hier haben. Das ist viel schicker und viel glatter. Also, wie erreichen wir diesen Effekt, wo es eine kleine Verzögerung gibt, wenn wir die Menüpunkte halten und dann auch bemerken, dass der Standardtext unter zu gehen scheint, während die Überholungen von oben auf kommt , Wenn Sie diesen Effekt richtig sehen können dort. Also, wie erreichen wir das? Nun, ich werde Ihnen eine neue Reihe von Eigenschaften vorstellen. Bekannte s CSS Übergänge. Grundsätzlich können CSS-Übergänge Effekte auf ein Element anwenden. Typischerweise, wenn wir hoffen, dass Balken auf diesem Element gerade jetzt, wie es ist, wenn ich zurück zu den Klammern gehe, wo wenden wir auch die Hover-Effekte an? Es wird zu der Over-Klasse, die nicht so richtig hier sind. Und dann später werden wir dasselbe auch auf etwas anwenden, das der Standardklasse sehr ähnlich ist. Anstatt also auch den Übergang zur über-Klasse und dann auch zur Standardklasse zu spielen , wenden wir es einfach auf eine Klasse an, die beide abdeckt, was das Menü sein wird. Eine Spanne wieder, wenn ich zu meinen HTML-Dokumentnotizen zurückgehe, ist genau hier. Wir haben vorbei, wir haben Standard. Beide sind Spannweiten, und beide fallen darauf. Das A-Tag, das zufällig fällt auf, dass die Menüklasse. Deshalb werden wir gezielt dieses bestimmte Element anvisieren. Gewartet Menü A ausgegeben. Also hier ist es. Übergang. In Ordnung. Und jetzt in anderen für den Übergang zur Arbeit, müssen wir die Effekte anwenden. Also eine Einstellung Art von Eigenschaft, es könnte die mit ihm die Höhe sein. Es könnte jetzt die Position in diesem Fall sein. Da wir Elemente oben bewegen. Normalerweise werden wir es zu den höchsten Werten bringen. Da wird es oben sein. Es heißt also im Grunde, dass wir den Übergang auf die Top-Eigenschaft anwenden, und jetzt können wir etwas anwenden, das als die Dauer bekannt ist. Wie viel Zeit sollten Sie nehmen weitere vier den Übergang zu beginnen und zu beenden. In diesem Fall werde ich mit 40,2 Sekunden gehen, weil es ziemlich schnell sein wird. Und schließlich können wir den tatsächlichen Effekt selbst hinzufügen. Wie wollen wir den Übergang vorantreiben? Sie begann schnell und langsam. Sollte es so langsame und schnelle Dinge wie das sein. Ich gehe mit der Leichtigkeit raus, dass er rauskommt, die entwickelt werden würde. Das bedeutet also im Grunde, dass es schnell zählt, aber dann und langsam ist das, was die Leichtigkeit aus ist. Leichtigkeit in wäre das Gegenteil, wo es langsam Ende schnell beginnen wird. Also, da gehst du hin. Das ist ein Übergang. Ich werde jetzt voran gehen, sparen. Gehen wir zurück zu einem Browser. Wir zuerst eine Seite, und jetzt können Sie den Effekt sehen? Es dauert im Grunde 0,2 Sekunden, um den Übergang zu beenden, aber Sie können sehen, dass es einen Unterschied macht, was wir ursprünglich hatten. jedoch Wenn wirjedochwieder hier reingehen, bemerken Sie, dass noch etwas fehlt und das ist eine Tatsache, dass der Standardtext sinkt , geht er herunter, wenn wir auf den Menüpunkt hoffen, während der Übertext von oben, haben wir in der Lage, die Überholungen unserer Zahlung zu erreichen, weil wir bereits in unseren Taschen. Wir haben bereits gesagt, wenn wir unsere auf dem Gegenstand halten, das ein Element fügt Top Null für die über-Klasse hinzu. So konnten wir den Übertext erreichen, den ich von oben malte. Aber wie setzen wir es jetzt so ein, dass die Standardklasse heruntergeht, wenn wir über unseren Menüpunkt hinausgehen, wird es in diesem Fall ziemlich ähnlich sein. Ich werde das hier unter der Standardeinstellung kopieren. Ich werde hier reinkommen, Einfügen, Lasst uns die Over-Klasse auf Standard ändern und jetzt wird es hart sein. Aber jetzt können wir mit 41 Pixeln gehen. Allerdings waren noch nicht weg. Eine Sache, die Sie beachten sollten, ist, dass, wenn Sie versuchen, Übergänge auf die Children eines Elements ihrer Eigenschaft anzuwenden , Sie die Einheit darauf abzielen, diese Eigenschaft auf das übergeordnete Element selbst zu sagen. In diesem Fall, was genau alle tun? Wir wenden die Übergangseffekte auf die Klassen aus über, und das Standardrecht und die Eigenschaft, bei der Targeting die oberste Eigenschaft ist. Die verschiedene Klasse hat sich für 21 entwickelt Die über-Klasse hat einen Wert von Null, wenn wir Übergang als solche gepflanzt werden, müssen wir zum Elternelement gehen, das menuet span ist. Wenn es gerade eine Community ist und einfach nur ein Top Null ist. Geben Sie ihm den Standardwert. Dies ist wichtig, damit Ihre Übergänge funktionieren. Also bedenken Sie das in der Zukunft. Immer wenn Sie einen Übergang zu Children Elementen abspielen und feststellen, dass sie diese bestimmte Eigenschaft nicht funktionieren, setzen Ihre Ziele ihre Eigenschaft auf das scheinbare Element und geben ihm seinen Standardwert Potenzial. Dann ist Ihr übertragbarer Spaziergang. Also lasst uns jetzt weitermachen und das speichern. Gehen wir zurück zu unserem Broza. Lassen Sie uns aktualisieren, und jetzt können Sie den Effekt sehen, der richtig läuft. Und da gehst du. In der Tat, lasst uns noch eine Sache machen, bevor wir um den Stopp herum. Ändern wir stattdessen die Dauer 23 Sekunden, damit Sie den Effekt wirklich in Aktion sehen können. Gehen wir hier wieder rein. Lassen Sie uns die Seite aktualisieren und jetzt können Sie es richtig sehen? Tot drei Sekunden. Und da gehst du. Ziemlich cool, richtig? Und in der Tat könnten wir etwas Interessantes tun. Anstatt mit den oberen 4 bis 1 Pixel für die Standardeinstellung zu gehen. Wie wäre es, wenn wir negativ für die Zehe waren? Ein Pixel? Lasst uns retten. Gehen wir hier wieder rein. Lassen Sie uns auffrischen und jetzt können Sie den Unterschied sehen, richtig? Sie können irgendwie Verteidigung so sitzen, wie es funktionieren würde. So ist es wirklich alt die Schmerzen auf Ihre eine besondere Präferenz. Und dann sieht das jetzt irgendwie hässlich aus. Aber wenn wir wieder zu unseren Klammern zurückkehren und das 2,2 Sekunden zurückbringen, wird es viel besser aussehen. Gehen wir zurück, inhalieren. Es ist sehr frisch, und jetzt können Sie die Änderung sehen, dass es ist Es sieht ein bisschen besser, aber es sieht irgendwie seltsam aus, weil es scheint, dass beide Menüpunkte nebeneinander springen zur gleichen Zeit, wenn Sie das sehen. Also wollte ich dir nur zeigen, was du mit den Übergangseffekten machen kannst und, ah, lass dich einfach wissen, dass es Möglichkeiten gibt. Weißt du, es geht darum, die Werte zu ändern und so einen Slum. Stellen Sie einfach sicher, dass dies auf den Standard zurückgesetzt wird , der 41 Pixel ist, nicht negativ für 21 speichern. Geh wieder hier rein. Zuerst die Seite. Und da gehst du. Also, wen wir endlich in der Lage waren, fast fertig zu bauen den Kopf nach oben. Und mach dir keine Sorgen über Übergänge. Wir werden viel später in diesem Kurs über Übergänge sprechen. In Ordnung, also mach dir keine Sorgen. Wir werden Übergänge genauer behandeln. So Deutschland für das nächste Video erträglich. Jetzt gehen Sie weiter und fügen Sie das Hintergrundbild für unsere Hedda hinzu. Dann sehe ich dich. 47. Das Hintergrundbild hinzufügen: Willkommen zurück. Lassen Sie uns also fortfahren, indem Sie versuchen, das Hintergrundbild für Hedda hinzuzufügen. Und das ist im Grunde das Baghlan-Bild, das wir auf den Hintergrund anwenden wollen. Also lasst uns das machen. Ich gehe offensichtlich zu Klammern. Jetzt werde ich einen neuen Abschnitt erstellen. Salam Ambrose könnte den Kopf als Text greifen und wir können diese atemberaubende für Heather genau hier einfügen und anstelle von Kopf, wie ich diese die Kopfzeile nennen werde nur Kopf nach oben und lassen Sie uns das tun, als würde ich jetzt voran gehen und den Hintergrund hinzufügen. Es tut mir leid. Nehmen wir den Kopf-Angriff. Zuallererst, traf ein Tag. Öffnen Sie die Code-Klammern, und fügen Sie jetzt das Hintergrundbild, Hintergrund, das Bild hinzu, und dann öffnen Sie die Klammern und ah, wir werden auch die Doppelmäntel hinzufügen. Wie zielen wir also auf das Bild ab, das wir verwenden möchten? Nun, wenn wir jetzt zu unserer Mappe zurückkehren, werden die Trends in Main oft genannt, die CIA sagt. Aber das Bild, das wir versuchen zu zielen, befindet sich in einem anderen Ordner namens Images, und das ist das Bild hier, Held Doj PG. Also im Grunde müssen wir diesen Ordner namens Assets verlassen und dann springen. Es tut mir leid, rief CSS an und springt dann in den Ordner namens Images, und dann nehme ich das Bild selbst. Also, um das zu erreichen, überprüfen Sie diese Arktis. Ich werde hier reingehen und zu zwei Punkten hinzufügen, um dem CSS-Ordner zu entkommen. Und jetzt werden wir in den Images Ordner springen und dann gezielt die geheilt oder J . P. G Datei. Lass uns das jetzt retten und, ah, mal sehen, was hier passieren wird. Lassen Sie uns die Seite aktualisieren und nichts. Es gibt kein Hintergrundbild, aber das liegt daran, dass unser Header keine Höhe hat. Wir müssen dem Header eine Höhe von irgendeiner Art geben. Gehen wir zurück zu unseren Klammern. Also sagen wir einfach, zum Beispiel, ich kann hier reinkommen und Hallo sagen. Ah, gehen wir zu 500 Pixeln. Sagen wir, dass Gold gesichert er, weil ich die Seite auffrischen und da gehst du. So können Sie jetzt mit 500 Pixeln aus der Höhe sehen, können Sie einen Teil aus dem schlechten Gewehr Bild sehen. jedoch, Beachten Siejedoch,dass hier drüben das Hintergrundbild im Wesentlichen die gesamte Höhe von unserem Schielen spürt . Erst wenn wir anfangen, nach unten zu scrollen, siehst du kein, ähm, außerhalb des Hintergrundbildes. Um diesen Effekt zu erzielen, nimmt die Tasche auf dem Bild die volle Höhe vom Bildschirm ein. Wenn Sie die Seite starten, müssen wir einen ganz besonderen Wert namens View-Port-Höhe hinzufügen, die H. Also überprüfen Sie dies. Ich werde hier wieder reingehen und statt 500 Pixel werde ich zu 100 wechseln. Also hat er nicht entfernt, dass ich auf 100 Neid h ändert. Dies hier ist der Standardwert auf jede Höhe gegeben, wenn Sie die Tasche ein Bild wollen, um die volle Höhe zu entsprechen. Und ich werde jetzt einfach vorgehen, sparen. Und jetzt lasst uns etwas Magie sehen. Lass uns hier reinkommen, die Seite auffrischen und da gehst du direkt vom Fledermaus. Die Tasche auf Bild kombiniert die volle Höhe, und das ist, weil der Kopf gibt, sind eine Höhe von 100 View-Ports, so ein anderer Wert könnte interessant finden könnte der View-Port, mit dem wäre VW. Das heißt, falls Sie möchten, dass Ihr Hintergrund vollständig mit Ihrem Bildschirm läuft. Aber da wir eine Tasche verwenden, ein Bild, das groß genug ist. Das müssen wir nicht einstellen. Denken Sie daran, die 100 V h. Dies wird immer Ihren Kopf geben, äh, was Element Sie spielen entwickelt, um immer sicherzustellen, dass es die Nahrungsmittelhöhe von Ihrem Bildschirm einnimmt . In Ordnung, ich werde hier noch ein paar weitere Eigenschaften hinzufügen. Lassen Sie uns mit der Hintergrundgröße gehen. Erinnern Sie sich, wir haben über Größe gesprochen? Wir haben Deckung Container Bürger Abdeckung. Lassen Sie uns auch sagen, der Hintergrund für Bodenposition, ich werde mit der Mitte gehen und dann eine weitere Eigenschaft Hintergrund Anhang, und ich werde diesen einen festen Safe nennen. Jetzt wissen Sie, was die Tasche auf Größe tut? Was die Position macht die Anhänge. Es wird im Grunde das Hintergrundbild korrigiert. Das ist der Wert, den du hier siehst. Es ist, was Sie hier sehen, wenn wir versuchen, nach unten zu scrollen Notizen ist, dass die Tasche ein Bild einfach bleibt direkt dort. Es geht nicht nach oben, wenn wir nach unten scrollen. Also, um diesen Effekt zu erzielen, das ist, warum ich die durch Pistole Befestigung fixiert. Sobel sagte, dass in der Tat, wollen Sie beginnen, Text direkt unter unserer Kopfzeile hinzuzufügen. Also habe ich das gerettet und lass uns einfach wieder reingehen und uns auffrischen. Und okay, das nächste Mal, wenn Sie das hinzufügen müssen, wäre die Kapazität bemerkte die schwarze Schicht direkt dort . Wir müssen in der Lage sein, das zu unserem Hintergrundbild hinzuzufügen, so dass, wenn wir beginnen, unsere Texte hinzuzufügen , wie die Ebene Ihres Unternehmens, es besser lesbar ist. Um dies zu erreichen, gibt es einige Wochen, in denen wir das tun können. Aber ich werde Ihnen den einfachsten Weg zeigen, dies zu tun. In Ordnung, gehen wir zurück zu Klammern. Nun, wo Sie das Baghlan-Bild haben, werde ich nur ein wenig Platz hinzufügen, und dann werde ich einem Nouvelle eine kalte Abgrenzung Grady int zur Verfügung stellen. Okay, und jetzt in Li Lina. Großartig. Und ich werde ein Farbmodell mit dem Namen RGB A hinzufügen von dem Sie vielleicht gehört haben. Das steht im Grunde für Rot, Grün, Blau und, ähm, al Fahm. Damit können wir tatsächlich das Schwarze übermäßig hinzufügen, also sieh dir das an. Ok. Ich werde wieder neue Klammern öffnen. Ich gehe mit Null für Rot, Null für Blau, Null für Blau, eine weitere Null für Grün, und dann tut mir leid, Kaiser für rote Null für Grüns hier für Blau. Und dann endlich gehen wir mit 0,7 für den Alfa. Aber dann müssen wir diesen Oliver gegen alle Kopie RGB A bis zum 0.7 wiederholen. Ich füge hier ein Koma hinzu, zahlt das wieder. Und dann außerhalb der schließenden Klammer, füge ich ein Abkommen für die U R l hinzu und ah, das sollte gut sein. Lass mich jetzt weitermachen und sparen. Gehen wir wieder rein. Hier bezieht sich die Seite und die Art, wie Sie gehen. Also im Grunde ist die 0.7, was diktiert, wie dunkel die Tasche ist und im Wesentlichen sein wird . Also, wenn du zum Beispiel wieder hier reinkommst und wir sagten: Nun, Nun, lass uns diese 12 machen, anstatt hierher zu kommen, mach das auch. Gehen wir zurück. Sie werden einen sofortigen Unterschied Aktualisieren bemerken. Und dort kann man sehen, dass es nicht ganz so dockage ist wie zuvor. Es ist viel mehr Fäule, im Wesentlichen. Also werden die Werte, die wir am Ende haben, uns vorschreiben, wie dunkel es sein wird. Wenn wir zum Beispiel den ganzen Weg zu 0,9 gegangen sind. Okay, geh wieder hier rein und ging dann zuerst zu meinen Augenbrauen zurück. Jetzt ist es sehr, sehr, sehr dunkel. Also 0.7 ist ein schöner Ort, in dem man sein kann. Also werde ich das alles wieder ändern 2.7. Und da gehst du. Okay, gehen wir einfach wieder rein. Die Glocken raus, erfrischen sich. Und wir sind fast da. Fast nur ein paar Dinge, weil es sich ändern musste. Offensichtlich ist der Web-Impact-Text hier viel kleiner als das, was wir hier haben. Also lasst uns versuchen, das zu beheben. Ich werde hier reinkommen und mein Spectral benutzen und mal sehen, ob ich dort zum spanischen Klassennamen komme und das Telefon von 17 geändert habe und ich bin in einem höheren Alter, 26 Pixel, zum Beispiel. Ich finde, das sieht ziemlich schön aus. Lassen Sie uns auch versuchen, eine vertikale Linie Mitte hinzuzufügen. Okay, Und dann können Sie vielleicht auch hinzufügen, wie Marge auf der linken Seite, um weg von der lokalen oder nur ein wenig zu schätzen. Lasst uns mit fünf Pixeln gehen und mal sehen, ich denke, das sieht ähnlich aus wie wir hier haben, obwohl das noch ein bisschen größer ist. und mal sehen, ich denke, das sieht ähnlich aus wie wir hier haben, Gehen wir wieder hier rein und Ah, gehen wir vielleicht mit 20 acht Pixeln . Und Ah, okay, das sollte nah genug sein. Ich denke, das ist vollkommen in Ordnung. Ordnung, ich gehe wieder hier rein und lass uns diese Werte hinzufügen. Also bin ich auf die Namensklasse ausgerichtet. Es ist hier unten. Alles klar , was genau haben wir? Wir haben vertikale Ausrichtung auf die Mitte und im Rand links für fünf Pixel gesetzt. Und vergessen wir nicht, was die Telefongröße von 17. Und ich glaube, wir gingen den ganzen Weg zu 28 Pixeln, die das gespeichert haben. Gehen Sie zurück zu Ihren Rechnungen beziehen sich auf Seite und dort gehen Sie. Also nicht schlecht überhaupt waren sehr, sehr fast die In der Tat haben wir tatsächlich erfolgreich alles hinzugefügt, was wir für den Header brauchen, mit der Ausnahme nur den Text hier und die Schaltflächen, die normalerweise im nächsten Video hinzufügen. So dass ich denke, ist viel für Glück. Wenn Sie irgendwelche Fragen haben, wie immer, achten Sie darauf, zu erreichen und ich werde in der nächsten Klasse sehen 48. Den Hero hinzufügen: Willkommen zurück. Also lassen Sie uns weiter bauen den Kopf und wir werden hier tun ist, um den Text für Ebene ein reines Geschäft hinzuzufügen sind eine wirkungsvolle Web-Präsenz gebaut und im Grunde die zu unserem Aufruf zu Action-Buttons. Um dies zu erreichen, müssen wir den HTML-Dateien eine Struktur hinzufügen. Lassen Sie uns den Kopf von 02 Klammern und ich werde zu meinem Index von HTML gehen. Also, wo genau werden wir diesen Text hinzufügen? Nun, es wird auf die Speisekarte fallen, aber es wird immer noch im Inneren des Haupt-Dave sein, der genau hier ist, was der Inhalt weiß ist. Wir müssen also sicherstellen, dass wir den Inhalt hinzufügen. Dennoch, statt dieses David und ich klicken direkt hier darauf, können Sie sich hier setzen. Hier schließt es sich. Also knapp oberhalb der Extremität, entfernen Sie einfach den Raum hier, darüber, direkt auf dem Messer. Der Knave. Ich eröffne einen neuen Dev und lass uns das tun. Ich werde das Dave nennen. Geben wir ihm eine Klasse aus Held. Na gut, lass uns diesen Helden machen, und ich werde jetzt weitermachen und einfach den Dev schließen, um sicherzustellen, dass wir es später nicht vergessen. Aber innerhalb dieses Dev, öffnen wir einen anderen Dev und wir können dies nennen Lassen Sie uns eine Klasse von Call to Action geben. Okay, also lasst uns gehen, dass Dash Two Dash Action anrufen. Und jetzt lass mich einfach weitermachen und diesen Davis Well schließen und OK, innerhalb dieses Tages. Lassen Sie uns nicht beginnen, den Text hinzuzufügen. Lassen Sie uns mit dem H one tack Festival gehen, weil in der Regel, das ist, was Sie tun wollen für Websites sind für S E O Popper sagt, im Grunde, Sie wollen Ihre Schlüsselwörter als H eine Steuer irgendwo auf Ihrer Webseite haben. Das ist, wo wir mit dem H ein Tag hier gehen. Also lasst uns das machen. Ich werde eine neue Linie eröffnen, und ich werde das starke Tag verwenden, weil beachten Sie, dass in unserem Design, die Ebene Licht hier ist es kühn im Vergleich zu Ihrem Geschäft ist, ist dieser Ball auch hier kühn wirkungsvoll , während die andere sind Regula r Text. Deshalb gibt es dort kein starkes Etikett. Das wird also stark sein und der Text ist eben, und es wird Platz oben sein, und dann wird das Geschäft auch stark sein . So wie das auf stark tun. Lassen Sie uns das schließen und hier drinnen wird ein Geschäftsniveau in Ihrem Geschäft sein. Lass uns das schließen. Und dann werde ich das Break-Tag hinzufügen, so dass das nächste der nächste Text in der neuen Zeile statistisch ist. Lassen Sie uns das hinzufügen. Und dann auf der neuen Linie, werde ich sagen, bauen und ich lebe. Nur bestätigte es nochmals Text. In Ordnung? So wirkungsvoll wirkungsvoll wird stark sein. Welche Geschenke dann? Okay, ich hab's. Gehen wir zurück, bauen ein und dann kam ich hierher. Das nennt man seinen einen Spaziergang entlang. Schließen wir ein Tag genau dort. So bauen und Auswirkungen, Full Web Präsenz K Raum Web-Präsenz. Drücken Sie den Sinn. Ok. Und ah, das war's. Ich werde jetzt voran gehen und das h ein Tag schließen, okay? Und ich denke, das sollte gut sein. Lass uns jetzt voran gehen und sparen und mal sehen, wie das mit frisch aussehen würde und ah, okay. Oh, es ist noch los. Ich habe hier runter geschaut. Eigentlich ist es hier oben. Okay, der Rest des Textes ist auch hier oben, ebnen Sie Ihre Auswirkungen auf das Gebäudegebäude auf ihre Anwesenheit. Okay, also offensichtlich müssen wir etwas Styling machen und es direkt in die Mitte bringen. Aber lassen Sie uns voran und fügen Sie die rumänischen Schaltflächen, die wir haben, sind Dienste und dann in Kontakt . Also lassen Sie uns das auch zur HTML-Struktur hinzufügen. Also, direkt unter dem H, werde ich unsere Knöpfe hinzufügen. Also haben wir die a tag h ref gleich und dann in Mäntel waren dabei, mit Dienstleistungen zu gehen und dann werden wir nur unsere Dienste eingeben. Lassen Sie uns das schließen und im Grunde der Wächter wieder über den Unterschied hier ist, dass wir Dienste zu Kontakten ändern werden. Lasst uns direkt hier Kontakt aufnehmen. Das wäre der Knöchel Link für den Text, der ah sein würde, in Kontakt kommt. Ich glaube, es wird berührt. Ich bin nur bestätigt. Das ist eigentlich nur wieder hier rein und ja, also nehmen Sie Kontakt auf. Ist der Text in Ordnung? Und ach, geh einfach weiter und sorge dafür, dass alles geschlossen ist, und ich denke, wir sind fertig. Das war's. Also ist dieser Dave geschlossen. Diese Kluft ist hier geschlossen. Dieser Davis schließt den ganzen Weg hierher und dann ist unsere Hedda geschlossen. Okay, lass los, spart. Und wir sollten jetzt gut gehen. Da gehst du. In Ordnung. Also haben wir alle notwendigen Text, und dann haben wir auch unsere Böden sind Links. So Deutschland für das nächste Video verfügbar. Jetzt geh weiter und zeig, dass es genau so aussieht, wie wir hier drüben haben. 49. Styling Hero Abschnitt: gut, Comebacks im vorherigen Video wird erfolgreich hinzugefügt ,um den Text für unsere Helden-Sektion sowie , die Schaltflächen, die unsere Dienstleistungen und in Kontakt zu treten. Aber wir brauchen nicht, dass dieser Inhalt genau so aussieht, wie wir hier drüben haben. Jetzt. Die große Herausforderung hier wird sein, dass der Text und die Tasten direkt dort in der Mitte des Bildschirms liegen , in den Hintergrundfarben. An dieser Stelle ist es einfach, die Größe Ihres Textes zu ändern. Alles, was ziemlich unkompliziert ist, aber wie bekommst du Inhalte direkt in der Mitte deines Bildschirms? Das Schöne an CSS ist, dass es normalerweise mehr als eine Möglichkeit gibt, das gleiche Ergebnis zu erzielen . Allerdings könnte ein Weg in der Regel besser sein als der ganze Weg. Um das zu erreichen, werde ich Ihnen einen neuen Weg zeigen, wie wir unsere Inhalte genau da in der Mitte bekommen können. Und dazu werde ich Ihnen ein neues Veld für die Display-Eigenschaft vorstellen, das Flex sein wird. Bisher haben wir uns mit Anzeigeblock in Zeile im Zeilenblock befasst. Aber jetzt werde ich dir einen neuen Velu Cold Flex vorstellen. Okay, bevor ich dort ankomme, gibt es eine Sache, die wir tun müssen. Wenn ich in Klammern gehe und einen Blick auf den Index von HTML werfe, lassen Sie uns die Struktur sehr sorgfältig beobachten. Ganz oben haben wir die Kopfzeile, richtig? Aber dann haben wir auch die Dev, das ist der Inhalt und dann breit. Dieser Dave enthält grundsätzlich alle Inhalte. Es enthält unser Logo, die Menüpunkte sowie die Huell-Rubrik. Damit wir den Flexor verwenden können, der Displayflex verwendet, müssen wir den übergeordneten Container auf 100% mit 100% Höhen einstellen. Das wird wichtig sein, Ordnung. Und natürlich der Elterntod für den Helden hier der Inhalt bereit? Der Tag der Klasse der Inhalte als die Eltern, Dave. Also folgen Sie einfach mit. Aber ich werde es tun, ich gehe zurück nach Maine, das CSS und genau hier. Aber wir haben die Hedda. Ich werde unser CSS genau dort hinzufügen. Also sagen wir, Hedda Space, dieser Inhalt, damit er hoch sein wird, wird 100% mit 100% sein. Jetzt weiß ich, dass es das erste Mal ist, dass wir es mit Prozentwerten und nicht mit Pixeln oder dem View-Port zu tun haben. Der Blick hohen Teil der Aussicht mit Hafen. Also, was genau diese Prozent tun in diesem Fall jetzt? Was das mit dem Container Dave tun wird, ist, dass er seine Höhe auf 100% aus der Höhe seiner eigenen Eltern, Dev,setzen der Höhe seiner eigenen Eltern, Dev, wird. Das ist, was der Prozentsatz tut, wenn Sie in diesem Fall einen Prozentwert auf ein Element anwenden . Im Moment ist es erhöht damit, dass es das Erhöhte mit unseren Inhalten gerade jetzt auf die exakt gleiche Höhe und mit einem eigenen Elternteil setzen wird. Wenn wir zurück auf den Index, dass HTML, wer ist die Eltern aus dem Tag der Klasse Inhalt? Es ist Hedda. Aber denken Sie auch daran, dass wir bereits den Header A verbirgt sich 100 Blick unsere Port-Höhe pH so im Grunde der Kopf des Lichts, es wird die exakt gleiche Höhe haben und mit natürlich, off 100%. Technisch gesehen könnte man hier reinkommen und die Höhe 100 VH mit 100 VW sagen. Es ist das gleiche, dass Sie die gleichen Ergebnisse bekommen. Dies ist jedoch der erste Schritt zur Verwendung des Display-Flex. Okay, holen wir das aus dem Weg. Jetzt werde ich hier runterkommen. Ich werde einen neuen Abschnitt erstellen, der speziell nicht für den Huell-Diff gilt. Ich werde hierher kommen. Lassen Sie uns das einfügen und richtig, ich werde das in Held ändern. Okay? Und jetzt kommen wir hier runter zu einer neuen Linie, angesichts der Klasse aus. Hebe! Oh, das ist der Dave. Und jetzt ist dies, wo die Magie zuerst geschieht, damit wir den Text direkt in der Mitte zu einer Zeile bringen können, muss dieser Dave Halt in unserem Inhalt auch eine Höhe von 100% haben. Und mit off 100% ist das wichtig, um den Text zu zentralisieren, oder? Also werde ich wieder hier reingehen, und ich werde sagen, mit 100% Häuten 100%. So weit, so gut. Jetzt ist hier wirklich Magie ins Spiel kommt. Ich werde sagen, Display-Flicks, okay. Und jetzt, um die Elemente des Zentrums zu machen, werde ich sagen, rechtfertigen Inhalt. Das ist eine neue Öffentlichkeit, um die gesendeten Inhalte zu rechtfertigen. Jetzt sind wir ein Löwe in horizontaler Luftauskleidung. Es dauert ein Detektiv die Tasten, aber auch in ein wenig Licht sie vertikal. Ich werde hier reinkommen und unsere Linie sagen und dann Strich und in Sachen. Und dann wird es auch im Zentrum sein. Da gehst du. Ich werde jetzt voran gehen und sicher. Gehen wir wieder rein. Lassen Sie uns auffrischen. Und da gehst du. Gerade jetzt können Sie sehen, dass der Text hier und die Tasten sind fast genau da in der Mitte von unserem Bildschirm. Aber wie bekommen wir sie genau da im Zentrum? Nun, um die Frage zu beantworten, müssen wir uns fragen, warum der Inhalt noch nicht in der Mitte ist? Alles blockiert den Inhalt von der Ankunft in der Mitte. Nun, ich werde den Inspektor hier vorstellen, und schauen wir uns an, was passiert. So genau hier können Sie sehen, dass der Header alle volle Breite und Höhe hat. Und natürlich ist die Content-Klasse auch voll mit und Höhe als auch. Sie können sehen, warum der Tod Aber jetzt, wenn ich hier runterkomme, beachten Sie, dass der Tag der Klasse Held wird nicht die volle Höhe von 100%, obwohl wir bereits explizit sagte Höhe 100%, aber es geht nicht 100%. Es hält genau dort an. Warum, das heißt, weil wir auch Ränder auf das Menü und das Logo angewendet haben. Ist es. Diese viel geht vor allem für das Menü, das ist diejenige, die den Inhalt dafür nach unten schiebt . Das Ding an diesem Spiel biegt sich, dass es berücksichtigt Margen von anderen Elementen darüber platziert. Deshalb steht dieser Inhalt hier nicht gerade im Mittelpunkt. Also, wie bekommen wir die Todesklasse des Helden, um die Ränder zu ignorieren, die durch das Menü und das Logo gesagt . Hier ist genau das, was ich tun werde. Ich werde jetzt hier reinkommen, und ich sage Position Absolute. Und da gehst du sofort. Wenn wir hier auf Dave Klasse schweben, Jetzt können Sie sehen, es geht in voller Höhe. Das liegt daran, dass Sie gesagt haben, dass die Position der absoluten und absoluten immer Muster ignorieren wird , Imagines und all das Zeug. Und wenn man sich den Text jetzt anschaut, ist es Freitag in der Mitte unseres Bildschirms. Das sind also einige nützliche Informationen für Sie. Ich hoffe es. Nie geht hier wieder rein und wendet diese Änderungen an, die wir entdeckt haben. Also werde ich sofort hier reinkommen. Ich sage einfach nur Position und wir nennen diese Abso-Laute. Und wir werden auch nur sagen Top Null links Null als auch. Es ist eine gute Idee. Es ist eine gute Praxis, diese Werte auch anzuwenden. Also geh einfach voran, rette das. Und, ähm, da gehst du. Ich gehe zurück zum Broza Refresh, und los gehst du. Ehrfürchtig. Aber wir haben ein Problem. Sehen Sie, wenn ich versuche, jetzt auf die Menüpunkte zu schweben, lesen Sie, dass es nicht mehr funktioniert. Warum ist das? Nun, das liegt daran, dass wir dem Heldenbereich die volle Höhe gegeben haben, weil wir gesagt haben, dass es absolut ist. Und jetzt ist es im Grunde vor den Menüpunkten und dem Logo zu bleiben, um dies zu beweisen. Sieh dir das an. Okay. Ich werde das mit von 100% auf 75% wechseln. Okay. Jetzt können Sie sehen, es ist mit Sie können jetzt sehen, dass die über Menüpunkte Dienste y O R Team sind alle abgedeckt. Mehrere versuchen, auf diesen zu schweben. Sie können sehen, dass nichts passiert. Aber dann, wenn ich versucht habe, auf Zeugnisse zu haben, jetzt beginnt es zu gehen. Die Klienten arbeiten. Der Kontakt funktioniert. Aber das liegt daran, dass die Heldenklasse nicht über nur die ersten 2 Buchstaben aus dem Testimonials Menüpunkt hinausgeht . Das können die Seminolen immer noch anzeigen. Klassische Split kann Kontakt auf dem Display anzeigen, aber sehen, während Dienste und über und nicht mehr dieses Flugzeug. Im Wesentlichen müssen wir das tun. Wir müssen die Hölle Inhalte hinter die Menüpunkte schieben oder die Menüpunkte vor den Heldeninhalt schieben . Wie erreichen wir das? Erinnern Sie sich an die Immobilie, die wir nutzen können? Es ist die Z-Index-Eigenschaft. Ohne Eigentum können wir Inhalte entweder nach vorne schieben, alles hinten. Also lassen Sie uns diese ähnliche ändern die mit zurück zu 100%. OK, aber jetzt werde ich zur naff-Klasse gehen und den naff-Klasse Z-Index von sagen wir 10 geben . Und jetzt können Sie sehen, dass die Menüpunkte jetzt ein Spiel laufen. Also, da gehst du, die Ausschaltung der Z-Indexeigenschaft. Also lasst uns das machen. Ich werde uns auch den Index für das Logo geben, nur für ein gutes Maß. Also gehe ich zurück zu Klammern und lass uns das machen. Also Menu, ich werde diesem einen Z-Index abgeben. Sagen wir 10. Und dann lassen Sie es auch der Band geben, denn das ist der Tag der Inhalte sind Logo. Also geben wir Z Index und lassen Sie uns weiterentwickelt geben. Neun. Da gehst du. Das ist sicher. Gehen wir zurück zu den Rechnungen werden die Seite aktualisiert und da gehst du. Ehrfürchtig. Nun, aber wir müssen tun, ist einfach unseren Stil in unseren Text und unsere Schaltflächen als auch anzuwenden. Und um das zu tun, gehe ich natürlich zurück in die Klammern . Und, ah, machen wir das. Okay, ich werde die neue Klasse von Call to Action eröffnen. Lassen Sie uns unsere Kollegen Klammern öffnen, damit die Farbe weiß sein sollte. Sie sind für den Text mit 456 ah Texten. Eine Linie wird auch Mitte sein. Und was haben wir noch? Wir haben Bücher Größe in. Lassen Sie uns mit der Buchgröße in Eigenschaft gehen. Und natürlich wird die Grenze Box der Wert sein, denn jetzt werden wir etwas Padding hinzufügen und die Musterventile werden 10 Pixel sein. Das ist gut mit 10 Pixel geht 50 Pixel und auch 10 Pixel. Es gibt eine kürzere Art, diese Werte zu schreiben, über die wir gesprochen haben. Also versuchen Sie, Frage, dass wir Rechte in den vier Werten für die Terrasse haben. Im Wesentlichen werden Sie nur drei Veloso haben, die an die Schuld gedacht sind, damit Sie sich diese kleine Aufgabe geben können und, ähm OK, also lasst uns voran gehen und das speichern. Lass uns wieder rein gehen, jeden frisch und besser aussehen. Okay, aber lass uns die Größe jetzt viel größer machen. Das H ein Tag, das ist, was zeigt den Heldeninhalt gegen die Rechte hier. H one h one wurde auf was validiert gesetzt? Wir geben dem H eins. Es ist wie fünf Pixel. Das ist irgendwie klein, Also nehmen wir diesen alten Weg zu 40 Pixel und vielleicht h zu werden Alter bis 25 Pixel und dann vielleicht HDB wir HDB machen 20 Pixel. Für jetzt. Wir müssen vielleicht etwas später ändern, aber lassen Sie uns diese einfach speichern, wie sie sind. Geh wieder hier rein. Lassen Sie uns aktualisieren und OK, jetzt ist das viel, viel besser als das, was wir derzeit haben. Unser Umhang. Genial jetzt für die Tasten bemerken hier in, dass sie Gemeinsamkeiten in der Schriftgröße, der vorderen Weg, die Muster als auch teilen Schriftgröße, der vorderen Weg, . Was wir also tun müssen, ist, ihnen die gleiche Klasse zur Verfügung zu stellen und das gleiche für die protestantische, die eine bestimmte Klasse anzuwenden protestantische, . Also lasst uns das machen. Ich gehe zurück in die Klammern. Lassen Sie uns zum Index Punkt html gehen. Und jetzt hier drüben, wo wir das A treff haben. Ich werde jetzt hier reinkommen und den Kurs abgeben. Lassen Sie uns einfach die Klassenschaltfläche aufrufen, weil es ein Boden ist. Aber ich werde auch eine andere Klasse für die Dienste geben, weil Notizen ist, dass der einzige Hauptunterschied zwischen beiden ist die Hintergrundfarbe. Wir haben also eine zusätzliche Klasse, die den violetten Hintergrund und auch den grünen Hintergrund anwendet . Also, unsere Dienste werden wir eine Klasse von Purple haben, okay, und jetzt für den Kontakt, können wir auch die Klasse aus Taste geben, und dann Platz und dann grün. Das wird für die Hintergründe sein. Lasst uns jetzt weitermachen und das retten. Und jetzt gehen wir zurück zu Maine, sagt Docs. Und fangen wir an, die Tasten anzuwenden. Also für die Knöpfe, ich werde sie tatsächlich unter Hedda anwenden. Ich denke, dass mein besseres Auto lass uns unter unserem Absatz spielen. Also lasst uns hier reinkommen. Ich werde das kopieren und dann hier unten, werde ich Absatz zwei Tasten ändern. Du wirst in Ordnung sein. Also haben wir Knöpfe und fangen wir an. Okay, also wird die erste Klasse natürlich an sich gekauft, natürlich an sich gekauft, und wir haben eine Reihe von Ventilen, die den Knopf zur Verfügung stellen. Die 1. 1, die das Telefon zu Größe sein wird, was natürlich 15 Pixel sein wird. Ich werde auch das Frontgewicht hinzufügen, dem ich weiß, dass 400 die Farbe des Textes sind. Natürlich, vergessen wir das nicht. Es wird F f f f f f f f f f f geben, und wir müssen auch die Textdekoration entfernen, da die Links automatisch auf dem Land sind. Also lasst uns die Links entfernen. Also nehmen Sie diese Frage wäre keine. Und, ah, was haben wir sonst noch? Lass uns das retten. Und schauen wir uns an, was wir frisch haben und, äh, okay. Textrons Form, denke ich, sollte in Ordnung sein. Text-Transformation. Wir können etwas Polsterung haben. Fügen Sie auch einige Ränder hinzu. Also lasst uns das machen. In Ordnung, ich gehe wieder hier rein. Machen wir den Text. Transformieren. Texttransformation wird Großbuchstaben sein. Okay, fügen wir den Rand hinzu. Gehen wir mit 10 Pixeln. Moment könnten wir das ändern. Lass uns gehen. 10 Pixel und klopfen. Natürlich werden wir diesen Hintergrund sehr, sehr bald hinzufügen . Lass uns gehen. 10 Pixel und 20 Pixel und ah, lassen Sie uns einfach mit diesem gehen. Spielen Sie auch im Linienblock. Okay, das sollte gut sein. Ah, lass uns am Grenzradius, damit wir die Grenzen ein bisschen machen können. Circulars gehen drei Pixel und wir sind gut. Okay, als Nächstes werde ich jetzt tun, wäre, um den eigentlichen Hintergrund Kahlo hinzuzufügen. Also haben wir lila wird die erste sein 1 Also pro Pool und ich habe die Hintergrundfarbe Hintergrundanrufer für Pop Earl wird 40 b sieben f f f und lassen Sie uns auch seine Grenze zur Verfügung stellen , die ein Pixel sein würde. Es wird natürlich solide sein . Und dann die Farben unserer Grenzen. Sehen? Was habe ich? 1/2 cc sieben bis F f. Okay, lassen Sie uns auch etwas sehr Ähnliches für den grünen Knopf tun. Ich werde mich hier drinnen beruhigen. Lassen Sie uns den Hintergrund hinzufügen, äh, Anrufer hier, was wäre Was habe ich? Ich habe acht c b 913 Und dann endlich, lassen Sie uns auch die Grenze hinzufügen, die auch ein Pixel fest sein wird. Und das letzte Tal wird es d zu f 37 in Ordnung sein. Ich denke, das sollte gut sein. Lass uns jetzt voran gehen und sparen und mal sehen, was wir haben. Ein frisches. Und da gehst du. Es ist eigentlich nicht so schlimm. Ok, genial. Ehrfürchtig. Ehrfürchtig. Tolle Seife mit viel Stil da drin. Endlich konnten wir unsere Inhalte fast so aussehen lassen, wie wir hier drüben haben. Außer der Tatsache, dass eine Sekunde warten. Die Kälte hier ist nicht genau die gleiche. Was ist los? Ein Glied hat das gerade wirklich, wirklich schnell bestätigt . C c a 03 d acht. Oh, okay. Ich entschuldige mich. Das muss einen Fehler für die Hintergrundfarbe gemacht haben. Lasst uns das schnell ändern. Kommen wir wieder rein. Und Oh, das war eine andere Farbe, die ich wählte. Entschuldigen Sie sich dafür. Ah, lass mich nachsehen. Okay. Du solltest Curry sein. Lasst uns jetzt weitermachen und das speichern. Gehen wir wieder rein. Lassen Sie uns auffrischen. Und da gehst du. Okay, das ist viel mehr wie alles. Mein Eins. Sie wurden gedauert. Natürlich. Im Moment ist Sie bemerken, dass es einen Effekt gibt, wenn wir auf die Schaltflächen schweben. Sie können sehen, dass wir das noch nicht haben. So Deutschland Pfennigs Video, wo ich nun zeigen werde, wie man einige coole Hover-Effekte auf Ihre Tasten hatte . 50. Übergehen: Nun, komm zurück. Werfen wir nun einen Blick darauf, wie wir die Übergangseffekte auf unsere Schaltflächen anwenden können. Und hier drüben, nun, wir haben, im Grunde ist nichts wirklich ausgefallenes. Die große Änderung hier ist die Flasche Coehlo die eine für lila ändert sich zu hellblau und die für grün ändert sich weiß. Also lasst uns einfach voran gehen und Distel machen. Ich gehe zurück zu Klammern, , und lass uns die violette Klasse noch einmal hinzufügen. Und was ich jetzt tun werde, ist, die Grenze zu ändern. Coehlo. Und der Anruf, mit dem wir gehen werden, wird 40 sein sieben f also werde ich den Schwebe-Selektor hinzufügen. Vergessen wir das nicht. Uh, falls ich das kopieren werde und wir tun genau dasselbe auch für Grün. Also lassen Sie mich lila Klasse in die grüne Klasse ändern. Wir ändern die Butterfarbe zu weiß 123456 und kühlen ab. Also, das ist es für die schweben unsere Effekte Aktion. Jetzt lassen Sie uns voran und wenden Sie es den Übergang selbst auf unsere Schaltflächen an. Also kommen wir hier in den Übergang und wir ändern die Grenze, Coehlo. Weil das Eigentum, wir werden uns ändern. Jemand ruft das Gesetz an. Gehen wir mit 0,4 Sekunden und wir werden uns entschärfen. Das ist voran, speichern und bolivars sollten definieren. Das geht zurück hier rein. Das ist die erste Seite. Und da gehst du. Also 0,4 Sekunden sind vielleicht ein bisschen langsam, aber, hey, es funktioniert immer noch. Okay, jetzt, da wir hier sind, möchte ich diese Gelegenheit nutzen, um ein bisschen tiefer in die Welt der Übergänge und dir nur ein paar Tricks zu zeigen, die du hier tatsächlich anwenden kannst. Ist das okay? Sie können Übergänge tatsächlich anwenden, ohne das Element gerade jetzt überhacken zu müssen . Die Effekte werden tatsächlich angewendet. Ich weiß nicht, wenn er bemerkt, wenn wir die Seite aktualisieren, schauen Sie sofort auf die Böden, Sie werden sehen, dass der Übergang tatsächlich stattfindet. Die Flasche ruft tatsächlich zu ändern, wenn ich mich erfrischen. Sieh dir das an. Siehst du das? Ich werde es wieder tun. Okay. Hoffentlich haben Sie das gesehen, aber um das besser zu demonstrieren. Lass uns etwas tun. Okay. Ich gehe zurück zu Klammern und wo wir den Knopf haben. Ich werde das hier reinkommen. Ich werde den Übergang von der Grenze ändern. Coehlo auf den Hintergrund Cola jetzt. Okay, also sieh dir das an. Ich werde das retten und sehen, was passieren wird. Alle Kopf zurück zu meinen Rechnungen sind die Seite zu aktualisieren und da geht's. Das ist ein bisschen zu schnell. Lassen Sie mich die Zeit ändern, tatsächlich von 0,4. Lass uns stattdessen mit deinen vier Sekunden alt werden. Siehst du wirklich, wovon ich rede? Gehen wir zurück zu ihr. Aber ich war Ah, nun, zuerst die Seite. Jetzt sehen Sie sich die Schaltflächen an. Es dauert vier Sekunden, bis die Bagram Col Zehe tatsächlich fühlen sich in, und das ist wegen der Anwendung für den Übergang direkt auf der Taste. Also, wenn es auch Harvard hier, wir werden nicht wirklich sehen, um die Tasche und Farbe ändern, weil , naja , natürlich, wir haben nicht die Hintergrundfarbe zum Hover-Effekt hinzugefügt zu ändern. Aber weil, wenn hatte eine Hintergrundfarbe direkt auf den Übergang für die Schaltfläche in seinen Standardzuständen jetzt, wenn wir einfach bezieht sich die Seite einer Last die Seite, die Farbe wird langsam in einem Übergangseffekt anwenden. Also, die Frage könnte Sie haben, ist OK, gut. Aber was, wenn wir nicht wollen, dass die Tasche unbekleidet übergeht, wenn wir die Seite laden, aber nur, wenn wir tatsächlich ho über die Tasten. Wie erreichen wir das? Nun, um das ganz einfach zu tun, was Sie tun können, ist, den Übergangseffekt aus der unteren Klasse zu entfernen, die die Kälte ist. Natürlich, die verschiedenen Zustände. Sie können das entfernen und dann einfach direkt auf die Hover-Zustände für lila oder grün angewendet alles, was wir hier tun könnten, statt weil einfach, sagen wir, Boughton. Und dann könnten wir die HOA va auswählbar spielen. Und jetzt können wir hier reinkommen und dann den Übergang anwenden. Also im Grunde jetzt. Aber dieser Code sagte OK, wenn ein Benutzer auf dem Element der Klasse der Schaltfläche schwebt, übergeht Baghlan Coehlo um vier Sekunden und um den Effekt wirklich zu sehen, lassen Sie uns einige Baghlan in der Nähe der Hover-Effekte jetzt für lila und grün. Also für Lila kann ich sagen, dass die Hintergrundfarbe sich ändern sollte, um zu lesen, wenn wir auf den beliebten Button schweben und für den grünen Knopf, sollte es vergangene Farbe ändern. Es sollte sich ändern. Nehmen wir an, rosa alle Kleider in der Wand rosa. Mal sehen, was passieren wird. Okay? Ich werde es jetzt retten. Lass uns hier wieder rein gehen. Jetzt was? Ich werde mich erfrischen. Okay, ziemlich normal. Aber jetzt, wenn ich auf dem violetten Knopf schweben, können Sie jetzt sehen, dass es zu rot übergeht und ich gehe zu grün einen Übergang zu rosa auf die vollen Sekunden. So können Sie solche Effekte erzielen. Um zusammenzufassen,können Sie entweder den Übergang, den Sie vorgetäuscht haben, direkt auf einen Element-Standardstatusanwenden, der natürlich ist, wenn das Element geladen wird, oder Sie können den Hover Um zusammenzufassen, können Sie entweder den Übergang, den Sie vorgetäuscht haben, direkt auf einen Element-Standardstatus , der natürlich ist, -Selektor. Ich bin so, dass Sie den Übergang speziell auf das Ganze anwenden können, um für ein solches Element selektiv zu sein. Eine multinationale erwähnte ist, dass neben der Angabe, welche Eigenschaft Sie die Dauer sowie Aufmerksamkeitseffekt übergehen möchten , Sie auch etwas spielen können, das als Übergangsverzögerung bekannt ist. Grundsätzlich wird es eine Zeit sein, die vergehen muss, bevor der Übergang tatsächlich beginnt. Das nennt man eine Verzögerung. Also, als Beispiel, lassen Sie uns das tun. Okay. Wo wir den Hover für die Schaltfläche haben. Ich werde jetzt hier reinkommen und fünf Sekunden sagen. Okay, also im Grunde, bevor die Hintergrundfarbe zu übergehen beginnt, warten wir fünf Sekunden. Und dann nach fünf Sekunden beginnt es den Übergang und endet in vier Sekunden. Ich hoffe, das ergibt Sinn. Gehen wir weiter. Speichern Sie das. Gehen wir zurück zu einem Poza. Lassen Sie uns die Seite aktualisieren. Jetzt sieh dir das an, okay? Ich werde auf dem Popil schweben. Es ändert es nicht. Es ändert sich nicht. Es ändert sich nicht. Es ändert sich nicht. Inzwischen zählen jetzt fünf Sekunden. Fünf Sekunden, Expats. Jetzt beginnt es, seine bezahlt in Übergang zu ändern, richtig, wie Sie sehen können, das gleiche für Grün auch. 2345 Und jetzt beginnt es sich zu ändern. Und dann geht es in vier Sekunden zum Bezahlen. Das ist also eine andere Sache, über die Sie wissen sollten. CSS-Übergänge. Jetzt könnte es die Frage haben. Hier ist OK, da ist der Befehl. Materie sagt, wir müssen ihn verteidigen, da wir einen für die Dauer haben. Wir haben eine für die Verzögerung. Es spielt keine Rolle, wer zuerst kommt. Es ist wichtig, weil CSS immer das erste Mal a als Dauer erkennt. So funktioniert CSS so Wann immer Sie einen Timer für Ihre Dauer hinzufügen und verzögern , wird derjenige, den Sie zuerst hinzufügen, als die Dauer betrachtet. Das ist eines der wichtigsten Dinge, die Sie zur Kenntnis nehmen sollten. Also, das ist im Grunde essen für die Übergänge Zahlen. Gehen Sie voran und entfernen Sie, was wir nicht wirklich brauchen, ist die Tasche auf Farbe, die Übereffekte für den Knopf und auch Training zurück auf Kühler, voll lila, glaube ich. Und oh ja, lass mich einfach zurückgehen und den Übergang für den Buchungsklassenübergang hinzufügen. Ah, Buddha. Coehlo ist das Eigentum und wir tun es nicht in 0,2 Sekunden und wir sind Lockerung. Okeydokey. Gehen wir weiter und sagen, das ist nur der Kopf zurück. Stellen Sie sicher, dass alles in Ordnung ist. Waren zuerst eine Seite und da gehst du. Awesome! Alles klar, das war's. Voll bei, in Übergängen zu unseren Schaltflächen Deutsch Avonex Video verfügbar Jetzt beginnen, um den Abschnitt über hinzufügen . Ich werde dich dann sehen 51. Den Abschnitt, den Menschen zu Uns: Nun, komm zurück. So weit, so gut. Wir konnten den Kopf komplett mit einem Logo, Menüpunkten, Helden-Sektion sowie dem Hintergrundbild ausbauen Menüpunkten, . Aber als nächstes müssen wir den Abschnitt über die USA aufbauen, im Wesentlichen der zweite Hauptteil der gesamten Website ist. Jetzt, hier drüben, habe ich bereits die grundlegende HTML-Struktur für den Abschnitt über ALS hinzugefügt und lassen mich Ihnen zeigen, was ich in Klammern habe. Also ist es im Grunde genau hier. Ich habe den Abschnitt Tack kalten Inhalt hinzugefügt. Ich gebe ihm einen I. D. S. Ich bin also rief ich an, um eine Vorstellung von etwa zu geben. Und dann hatten wir den Dave von Inhalten, die immer und immer wieder verwenden werden und dann das Alter, um für über alle zu taggen und dann Pete Sacks für die preisgekrönte Web-Entwicklungsfirma und Erfolge in einem bla, blah, blah. Dann fügte ich in dir taub mit der Klassen-Off-Rolle hinzu, die später darüber sprechen wird. Aber im Inneren haben wir den H-Tweet-Kopf dessen, wer wir sind einige pitak starke Tags und ah, das ist es im Grunde. So können Sie voran gehen und einfach diesen Code greifen und einfach einfügen. Es ist in Ihrem Textdokument. Wenn Sie das tun möchten, ist das ein Composer-Video. Tun Sie das und lassen Sie uns nicht voran und entwerfen Sie den Abschnitt über alle. Werfen wir einen Blick darauf, was wir erreichen müssen. Hier können Sie also sehen, dass der über Verlust irgendwie wie ein Blau auf der Linie hat, das einen Blick auf ein bisschen später werfen wird. Wir betrachten Text genau hier ist in Richtung Zentrum. Der Text hier für unseren Erfolg hat den Telefonstil kursiv. Es hat auch ein Frontgewicht von etwa 300. Aber das ist, wo die Dinge Bruder Interesse an Ihnen hier bemerken würden, obwohl dies irgendwie wie ein Zwei-Spalten-Abschnitt auf der einen Spalte ist, die wir haben, wer wir in der anderen Spalte sind . Wir haben, was wir tun, und sie haben einige Symbole grün, und auch der Text scheint an diesem Zentrum ausgerichtet zu sein. Also ein ziemlich interessanter Spaziergang hier rein. Also lasst uns das machen. Das allererste, was wir tun werden, ist, dass wir zurück zu Klammern gehen, und wenn ich tun werde, ist, ganz einfach zwei neue Daves für das, was wir sind und das, was wir tun, zu erstellen . Okay, also sieh dir das an. Ich komme sofort bei einem neuen DIV hierher. Wir geben diesem Dave eine Klasse, und hier ist der Name der Klasse, die wir geben werden. Es wird der Anruf Dash ein Bindestrich zur Klasse genannt werden. Dies ist normalerweise der Standard in CSS oder HTML, wenn Sie versuchen, eine Klasse mit zwei Spalten zu erstellen. Wenn es ein vierspaltiger Abschnitt wäre, dann würden Sie ein wenig später nur einen Strich vorwärts gehen. Aber das ist es, was es für die ersten Diversity Kreditgeber getan hat. Geh weiter und kopiere diese Klasse, und dann machen wir genau die gleiche Klasse hier auch für das, was wir tun. Lassen Sie uns voran gehen und das Tempo und natürlich. Ich werde jetzt weitermachen und die Dibs schließen. Schließen wir die 1. 1 und natürlich schließen wir auch die 2. 1 hier unten. Lassen Sie uns voran gehen und schließen, dass und OK, so erfolgreich jetzt haben Dave eine für das, was wir tun und eine andere für die, die wir sind. Lassen Sie uns jetzt voran und fügen Sie etwas Styling hinzu, also speichere ich einfach das HTML-Dokument. zunächst Lassen Sie unszunächstzum Hauptpunkt CSS gehen. Nun, was ich tun werde, ist, dass ich einen neuen Abschnitt erstellen und zusammenfassen werde, weil wir es jetzt mit dem Inhaltslayout zu tun haben. Im Wesentlichen. Also, ach, lasst uns das machen. Nur, mal sehen, nur unter Knöpfen kommen hier rein, Piece das, und wir nennen diesen Abschnitt Layout Lee heraus. Und OK, also ruft die Klasse von Dash einen Bindestrich an, was wir hier tun werden, ist, dass wir das Leben mit solch einer Klasse A mit 48,5% geben werden, es wird nicht 50% sein, weil wir immer noch in Margen und Mustern anwenden müssen. Also möchten Sie normalerweise etwas Platz dafür leben. Also gehen wir mit 48,5. Und natürlich, wenn man von Margen spricht, würde ihm eine Marge geben oder ihnen eine Marge geben. Sagen wir 1% und Null und dann auch ein Prozent, und noch ein 1% lassen sie voran und fügen meinen Doppelpunkt hinzu. Und ich weiß auch, dass wir etwas Polsterung für sie hinzufügen werden. Also diejenigen, die Null und 15 Pixel gehen, vergessen wir nicht das Buch Sizing haben eine sehr, sehr wichtige Rahmenbox, und wir werden auch nach links schweben. Also lasst uns das auch tun. Die Quoten sind Semikolon, und dies sollte abgeschlossen werden. Gehen Sie jetzt vor und sparen Sie und schauen wir uns an, was wir haben. Gehen wir hier wieder rein. Aktualisieren. Und da gehst du. Ehrfürchtig. So haben wir jetzt wenigstens die zwei Säulen Leben dort, aber wir haben noch einiges zu tun. Beginnen wir mit dem preisgekrönten und dem Erfolg. Lassen Sie uns also voran gehen und versuchen, diese beiden Absatz-Tags zu stylen. Und dazu werden wir zu unserem HTML-Index der HTML-Datei zurückkehren und ihnen eine individuelle Klasse geben . Also für das erste P-Tag, können wir diesem eine Klasse geben, und lassen Sie uns diesem eine Klasse von Thai-Werkzeug Dash eins geben. Und dann für das zweite p-Tag, lassen Sie uns eine P-Klasse ausschalten auf einen Titel gehen. Holländisch auch. Oh, Junge, hört sich gut an. Lasst uns das retten. Lassen Sie uns jetzt etwas CSS dafür anwenden. Wir gehen rüber zum Abschnitt Absatz. Also hier drüben, einfach runter. Er wird jetzt hier reinkommen und sie werden sagen, P-Punkt-Titel Um, Strich Juan und lass uns jetzt voran gehen und etwas Stil in die Telefongröße anwenden. Ich denke, wir werden mit 17 Pixeln gehen. Ich bin nicht intelligent. müsste vielleicht ändern. Es könnte ein bisschen zu klein sein. Vorne Gewichte Lassen Sie uns mit 400 Text eine Zeile gehen. Natürlich gehen wir ins Zentrum. Ah, die Farbe wird auch 777777 und ein Semikolon sein. Und für den ersten P-Titel wird der Rand hier 25 Pixel, 14 Pixel und dann 14 Pixel betragen. Also im Grunde der Defekt Auspuff für die oberen 40 Pixel links und rechts für 10 Pixel von unten. Ich werde das alles kopieren, und wir machen etwas sehr Ähnliches für den P-Titel zu seiner Paste. Wechseln Sie 1 zu 2, und Kunst ist A 42 wird ein bisschen kleinster sein. Versuchen wir es mit 15 Pixeln. Ah, Frontgewicht von 300 Textilindustrie Abstieg auch sind die Farbe ist eigentlich 888 , was ähnlich 456 ist Unsere Marge wird nur 14 Pixel rundum sein. Lassen Sie uns fortfahren und Fehler in Pixeln hinzufügen. Und es gibt noch eine Sache. Oh ja, der lustige Stil. Vergessen wir nicht den Schriftstil. Es wird unser kursiv sein. Okay, gehen wir weiter. Speichern Sie das und lassen Sie uns sehen, wie das aussehen würde. Gehen wir wieder rein. Hier bezieht sich die Seite und da gehst du. Also offensichtlich ist die lustige Größe hier drin viel zu klein. Weg, Weg, viel zu klein. Wir müssen einige wichtige Änderungen vornehmen. Oh, okay. Versuchen wir mal was hier drin. Ich werde den ganzen Weg mit 26 Pixeln gehen. Eigentlich, Schule Detektiv-Pixel, vielleicht 30 Pixel sieht viel besser aus. Und dann, für die 2. 1 der Peter, lassen Sie uns versuchen, 24 Pixel. Mal sehen. Okay, das Bestimmte sieht viel besser aus als das, was wir ursprünglich hatten. Also gehen wir mit 24 Pixel für P Titel zu und in für Peter für P Titel, 1 30 Pixel. Also 30 und 24. Okay, machen wir diese Wechsler 24 genau hier und dann 30 für Peter Toe eins. Lasst uns weitermachen, sparen. Gehen wir zurück zu einem Broza waren zuerst eine Seite, und da gehst du, alle Fälle, also sind wir fast da. Ein weiteres Mal, wenn Sie ändern müssen , wird jedoch die Größe von der über US-Text sein. Es ist das Zeitalter, das man kennzeichnet. Also lasst uns wieder in die Zehenklammern gehen und vielleicht haben wir Alter. Haben wir jeweils eine 25 Pixel? Eigentlich, wenn wir das Alter von 1 40 Pixeln machen wollen, sollte das ein bisschen größer sein als zu, in der Tat Picks. auch Versuchen wirauch52 Pixel. Lasst uns das retten. Gehen wir hier wieder rein. Lassen Sie uns zuerst eine Seite und OK, nicht schlecht. Es sieht viel aus, viel besser, dass ursprünglich gehabt werden. Allerdings müssen wir etwas Polsterung für unseren Abschnitt hinzufügen, denn wenn er es bemerkt, gibt es mehr Platz zwischen der über ALS und der Tasche, ein Bild, das alles, was wir derzeit hier drin haben. Und das liegt daran, dass der Abschnitt selbst etwas Polsterseife hat. Gehen wir jetzt weiter und zielen Sie auf das Abschnitt-Tag selbst, das übrigens das Abschnitt-Tag verwendet wird, wenn Sie unsere neuen Abschnitte auf Ihrer Website erstellen. Also, wenn wir einen Blick auf das Modell, das gesagt, dass wir hier über uns haben, wird ein Abschnitt sieben zur Verfügung gestellt wird, wird ein Abschnitt sein, in dem die Arbeiter ein Abschnitt sein und so weiter und so weiter. Also, normalerweise für die Sortierung würden Sie dieixties auf dem Tag verwenden. Sie könnten ein div anstelle von Abschnitt verwenden und ihm einfach eine Klasse aus Abschnitt geben. Aber da wir versuchen, mit Code so genau wie möglich zu sein, gehen wir stattdessen mit dem HTML-Sektion-Tag. Also lasst uns jetzt weitermachen und etwas Klaps in das Abschnitt-Tag geben und wir werden das hier machen, wo wir uns angelegt haben. Alles klar, also wird es hier reinkommen, und wir rufen diesen einen Abschnitt auf, Okay, also Grundsätzlich wird das Muster sein Wir haben 50 Pixel, wir haben Null Pixel und dann haben wir schließlich 45 Pixel. Also im Grunde die Pixel von oben, also Null Pixel links und rechts, und dann 45 Pixel sind von unten. Also lasst uns weitermachen. Jetzt speichern und gehen wir zurück hierher, um zuerst die Seite zu bekommen. Und da gehst du. So sieht viel, viel besser aus. Schließlich, lassen Sie uns feststellen, dass das, wer e. R. R. Tex und was wir tun, der Text ist in der Mitte ausgerichtet. Wie Sie sehen können, klebt es Allianzzentrum Jetzt, technisch gesehen, könnten wir einfach zurück zu unserer Buckets-Datei und dann hier, wo wir das mentale CSS haben, weil einfach hier reinkommen und Text ausrichten Zentrum geben die Kohle stutzen einen Strich zu, denn dies ist die Klasse. Ah, halten Sie sich den Inhalt für, wer wir sind und was wir tun. könnten wir tun. Aber es ist nicht die beste Idee, denn weiter unten auf der Straße müssen wir vielleicht diese Klasse verwenden, die Ash genannt wird. Wander stand, um einen weiteren zweispaltigen Abschnitt zu erstellen, und in diesem Szenario brauchen wir möglicherweise nicht, dass der Text an der Mitte ausgerichtet wird. Um solche Probleme in der Zukunft zu vermeiden, lassen Sie uns einfach eine andere Klasse erstellen und wir können das ein Zentrum nennen. Also machen wir das gleiche hier wie, nun, nun, Sentelle. Es ist auch in der Mitte für die zweite Spalte, und dann bin ich einfach gerettet. Wir können einfach zurück zu Maine, dass CSS und dann genau hier, wo wir das Layout gerade hier haben , oder besser gesagt, kommen wir hier runter zum Inhalt. Eigentlich machen wir jeden Inhalt. Also für den Inhalt, werden wir nur diesen einen Punkt Zentrum nennen und dann werde ich einfach alle Elemente mit der Klasse außerhalb der Mitte sagen . Geben Sie ihm einfach eine Textillinie aus der Mitte. Und da gehst du. Gehen wir jetzt sicher vor. Gehen Sie zurück, um unsere Aktualisierung der Seite zu widersetzen und da gehen Sie. So Deutschland, sehr nächstes Video verfügbar, wird nicht beginnen, etwas mehr Styling zu unserer über auch Abschnitt hinzuzufügen. 52. Den Abschnitt der Dienste erstellen: gut Comebacks. In einem vorherigen Video haben wir erfolgreich den Inhalt für den Abschnitt über die USA hinzugefügt und ich habe gesagt, dass wir etwas entwerfen würden . Allerdings, wenn Sie einen Blick auf die fertige Website direkt hier, können Sie beginnen, einige Ähnlichkeiten von einem Abschnitt zum anderen als ein Beispiel direkt hier zu bemerken , um das Vital wird feststellen, dass wir diese Knöchel haben. Ein Link, auf den sie geklickt haben, bringt uns direkt an den Anfang der Seite. Wir haben die Titel, die die blaue Grenze genau dort haben, etwas mit Dienstleistungen, die durch Spaziergang mit uns und so weiter und so weiter zur Verfügung gestellt werden. Also auch Sie werden die Anzahl der verschiedenen Aikens zur Verfügung, wer wir sind, bemerken und ich halte links. Was wir tun, hat Icann's The Headers unvernünftig, aber es hat auch Icann's und so viele andere Header auf unserer Website haben auch Aiken Seife. Der Punkt, den ich hier machen möchte, ist, dass es immer am besten ist, dass Sie herausfinden, welche Art von Inhalt Sie erstellen können und welchen Typ Sie später verschieben können. Normalerweise ist der Inhalt, den Sie später verschieben möchten, Inhalte, die Sie immer und immer wieder auf der gesamten Website wiederverwenden möchten. Also der Stil in der Hand, dieser Fall jetzt voll die Titel für die Abschnitte wie über auch vorgesehen hat, können wir dies später anwenden. Das Gleiche mit den Aikens wie das, was wir die Symbole für jetzt ignorieren und einfach anwenden können sind viel später. Aber für jetzt, konzentrieren wir uns einfach auf den Aufbau anderer Männer in Sektionen sowie die Anrufinhalte und fügen Sie auch einige Standpunkte hinzu, die einzigartig für diesen bestimmten Abschnitt ist. Also in diesem Fall, jetzt, werde ich hier, um die Kern-HTML-Struktur für die bereitgestellten Dienste hinzuzufügen. Also, wenn Sie gehen rüber zu Klammern rechts hier, Sie können sehen, ich habe den neuen Abschnitt von I d Dienstleistungen hinzugefügt. Ich habe ihre Klasse von Inhalten sowie die H zwei Titel hinzugefügt, die Dienste zur Verfügung gestellt werden und dann die Sie gut für die auf geordnete Liste und dann die Ally Elemente und dann h 34 Web-Entwicklung und dann in Norther Ul für die Listenelemente auf, dass jedes Teilchen unseren Service. Also lassen Sie uns das sehr, sehr sorgfältig zusammenbrechen . Sie werden genau hier feststellen, dass wir eine Art Liste von wichtigen Dienstleistungen haben und dann Dienstleistungen, die unter diese großen Dienstleistungen fallen. So haben wir Web-Entwicklung als Beispiel. Deshalb haben wir hier den allerersten Verbündeten. Und dann ist es eine HDB, weil es eine Hedda Web-Entwicklung ist. Und dann auf diesem speziellen Listenelement, haben wir Dienstleistungen im Besitz dieser Mahnwache Service. So auf der Web-Entwicklung, haben wir benutzerdefinierte Websites haben wir mit Anwendungen e Commerce Stores, progressive Web, APS. Deshalb habe ich beschlossen, eine andere Mindest innerhalb der allerersten Liste zu erstellen, wenn das Sinn ergibt. Die exakt gleiche Struktur ist also ein Spiel für die mobile APP-Entwicklung. Sie sind Sie X entwirft mobile Spiel entwickelt Mann, um das Design, Cloud-Migration, Qualitätssicherung, weiche Optimierung setzen Cloud-Migration, Qualitätssicherung, . Und schließlich ist unsere Cyber-Sicherheit so letztendlich, es das ist, was Ihnen bleibt. Sie haben Ihre H zwei, das ist der Dienst zur Verfügung gestellt Haupttitel für den Abschnitt, und dann haben Sie Ihre wichtigsten Dienste und dann die Sub-Dienste, die auf die sie fallen. Aber irgendwie müssen wir das so aussehen lassen, wie wir hier drüben haben. Lassen Sie uns also versuchen, das einfachste Styling anzugehen, das wir anwenden können, und das wird das Hintergrundbild für diesen Abschnitt sein. Also, um das zu tun, wenn ich das tun werde, gehe ich zurück zu Klammern und lass uns das machen. Ich werde voran gehen und fügen Sie eine Abschnittsklasse zu den Diensten, die Idee ist, dass, wenn Sie bemerken, wir haben alle diese Abschnitte, die Hintergrundbilder haben , zum Beispiel treffen das Team hat ein Hintergrundbild, und unsere Cleanse hat auch ein Hintergrundbild. Es könnte also Sinn für uns machen, nur eine Klasse zu erstellen, die wir für diese drei verschiedenen Abschnitte verwenden können , die Hintergrundbilder haben. Und die Klasse, die ich dafür verwenden werde, wird, ah, sie sein ah, . Geh einfach zurück in meine Klammern. Lassen Sie uns dies aufwenden, damit es hier drüben sein wird, aber ich habe meinen Abschnitt i d. Lassen Sie uns diesem ein Klassenzimmer geben, das wir immer wieder benutzen, und diese Klasse wird Bild Bindestrich BG sein. Ordnung, das wird eine Klasse immer und immer wieder verwenden. Lassen Sie mich jetzt voran und speichern Sie das einfach. Lassen Sie uns nicht zu Maine Punkt CSS gehen und wir werden beginnen, einige Steine auf die 1. 1 hier hinzuzufügen . Lassen Sie uns versuchen, das Hintergrundbild hinzuzufügen oder wir haben hier drüben. Also, damit es nicht ist, werde ich versuchen, einen neuen Abschnitt speziell für Dienstleistungen zu erstellen. Also lasst uns das machen. Ich werde mir den Titel gleich hier schnappen. Lassen Sie uns das kopieren. Und dann kommen einige von ihnen hierher. Lasst uns das Tempo machen. Und wir können Shiro auch ändern. Ah, lasst uns Änderungen an den Diensten kamen Dienste. Und jetzt lassen Sie uns die Klasse erstellen. Tut mirLeid, Leid wir haben hier eine 80 für Dienstleistungen. Richtig? Also lasst uns das machen. Ich werde jetzt hier reinkommen, und ich werde Dienste sagen, und dann werden wir das Hintergrundbild liefern. Viertens. Also werde ich meine Spalte öffnen, Zahnspangen. Kommen wir runter. Alles klar, also wird Hintergrundbild sein, und ich habe die Struktur genau hier, also schauen wir uns das schnell an. In Ordnung? Wir spielen die Lena. Großartig. Und denken Sie daran, dass wir mageren Zutaten gespielt werden, Alia. Es wird also alles G B A sein und die ersten Stimmen, die ich hier habe, sind 000 und dann 0,2. Also ist es nicht wirklich das, was Kapazität ist. Es wird also nicht zu dunkel. Wiederholen wir das gerade drinnen. Coma RGB ein wieder und dann innerhalb des exakt gleichen Wertes. 000 und 0,2. Ich hoffe, ich mache hier keinen Fehler. Und OK, Koma und dann nicht lassen Sie uns jetzt die Ihre von l für das Bild selbst hinzufügen. Also hier drin haben wir unsere Mäntel, haben Gedanken zu entkommen, und dann werden es Bilder sein. Vier Schrägstrich Wir haben Hintergrund als Ordner für Boden, und dann wird es Dienste dot j p g sein. Lassen Sie uns voran und fügen Sie einen Semikolon hinzu. Lasst uns jetzt voran sparen und ah, schauen wir uns mal an, was wir haben hier rüber. Lass uns erfrischen und da gehst du. In Ordnung. So weit, so gut. Wir haben die Tasche auf dem Bild genau da. Okay, ich werde jetzt noch etwas mehr Stehen für die Klasse anwenden. Sie werden immer wieder für die Abschnitte verwenden, die ein Hintergrundbild haben. Also sieh dir das an, ich gehe zurück zu Klammern. Gehen wir zurück zu unserem indizierten mit HTML. Also hier haben wir bereits die Klasse von Bild Bindestrich Hintergrund hinzugefügt. Also lassen Sie uns jetzt voran und fügen Sie etwas Styling für diese sehr spezifische Klasse hinzu. Und um das zu tun, gehen wir zu diesem Abschnitt, äh, Bereich. Also, wie hier haben wir sexuelle Probleme, wie ich komme jetzt hier rein und nennen wir diesen einen Abschnitt Punkte. Seien Bild sehr Bild Bindestrich BG. Und dann öffnen wir die Kohli-Zahnspangen. Also lassen Sie uns die Hintergrundgröße ändern, die sie anwenden würden. Gehen wir mit Deckung, okay? Und dann können wir auch eine Hintergrundfarbe für solche Abschnitte hinzufügen, die es besser haben. Ein Bild, das 555555 Lassen Sie uns auch die Hintergrundposition hinzufügen, damit wir ändern können . Der Winkel, aus dem die Bilder von hier aus angezeigt werden, wird unten und zentriert sein . Und wenn Sie bemerken, ist, wenn wir zurück gehen, wenn Sie genau hier bemerken, die Tasche auf Bildern nicht bewegen. Sie scrollen nicht. Während wir über die Schule nach oben scrollen, bewegen sie sich nicht, also sollten Sie schon in keiner Walt Eigenschaft, über die wir reden. Das wird die Hintergrundanhangs-Eigenschaft sein. Also lasst uns weitermachen und das auch hinzufügen. Ich komme sofort hier rein. Es wird ein Hintergrund sein. Ah, hinterer Boden Armaturenbrett Aufsatz und es wird repariert werden, okay? Und das ist es so ziemlich. Gehen wir jetzt weiter und sicher und schauen wir uns an, was wir derzeit haben. Lassen Sie uns die Seite aktualisieren und da gehen Sie. Okay, wir fangen an, dorthin zu kommen. Aber jetzt lassen Sie uns versuchen, etwas gegen den eigentlichen Inhalt zu tun, den wir im Inneren haben. Sie würden genau hier bemerken, dass der Inhalt tatsächlich die gleiche Farbe hat, aber sie sind alle mit ähnlichen weißen Hintergrundspalten bedeckt , und es sieht ziemlich schön aus. Es ist mit ihm viel besser als das, was wir derzeit haben. Es gibt also eine sehr schöne Eigenschaft, die wir verwenden können, und das wird die Display-Flex sein. Denken Sie daran, dass wir Displayflex für einige Inhalte verwenden, oder Pierre speziell für Menüpunkte. Also werden wir versuchen, genau den gleichen Prozess auch hier anzuwenden. Und um dies zu tun, überprüfen Sie dies. Ich denke, ich gehe zurück zu unserem Index von ex Tamil. Lassen Sie uns eine Klasse voll hinzufügen, Die wichtigsten u l und wurden im Wesentlichen auf die u L. Weil es das Hauptelement ist, das alle am wenigsten Dienste sowie die Seifendienste . Das ist, wo ich speziell in dieser UL genau dort an der Spitze. Also, was ich hier tun werde, werde ich ihm einen Kurs geben, okay? Und wir können die Klasse nennen, Nehmen wir an, Dienstleistungen Dash-Liste Sache, die vollkommenen Sinn macht. Lassen Sie uns voran gehen, speichern Lassen Sie uns den Kopf zurück zu einem Haupt docs sagt. Und dann hier unten im Bereich Dienste, lassen Sie uns jetzt einige Styling-Dienste Dash-Liste hinzufügen. Und jetzt sieh dir das an. Ich gehe jetzt rüber und sage Display, Flex. Also lasst uns das machen. Die Anzeige wird Flicks sein, okay? Und jetzt können Sie tatsächlich die Richtung von unserem Flex in Still angeben, um dies zu sagen. Sieh dir das an. Ich komme sofort hier rein und sage Flex Strich Richtung. Und jetzt gehe ich mit Whoa! Gehen wir weiter. Speichern Sie das und lassen Sie es uns wissen, sehen, was wir für den Kopf hier haben. Lassen Sie uns die Seite aktualisieren und da gehen Sie. Jetzt können Sie sehen, weil wir gesagt haben, Hey, Flex-Richtung ist eine Reihe. Es wird alle Elemente alle Listendienste in einem einzigen Tief anzeigen, wie Sie jetzt sehen können, bemerken Sie jedoch, dass alle diese Elemente innerhalb unserer Content-Klasse sind, die maximal eine Macht auf der 140 Pixel. Wenn Sie also Ihre Elemente als Flex anzeigen, neigen sie dazu, das Tragwerk zu brechen. Und sie könnten sogar Spender aus dem Container herausziehen. Gerade jetzt, wenn Sie sehr sorgfältig die Inhalte für die Cybersicherheit bemerken, unsere Liste hier. Diese hier sind sie außerhalb des Containers von 1000 wandern für die Pixel gegangen . Also, um richtig und zeigen, dass Sie Flex-Elemente sind in allen Containern bleiben. Wir müssen eine weitere Eigenschaft hinzufügen, und diese Eigenschaft hier wird der Flex Rap sein. Okay. Und genau hier sagen wir einfach Mist. Gehen wir weiter. Jetzt retten wir das. Gehen wir zurück, erfrischen wir uns. Und jetzt können Sie sehen, dass sie im Inneren des Behälters enthalten sind. Dies ist also eine sehr, sehr wichtige Eigenschaft, die Sie im Auge behalten müssen, wenn Sie Elemente als Flex anzeigen und Sie ihn bekommen. Wenn Lex, Richtung von O oder Spalte oder was auch immer und zeigen, dass Sie auch die Flex Wrap verpackt alt und zeigen, dass Ihre Flex-Elemente innerhalb des Containers enthalten sind. Lassen Sie uns etwas extra hinzufügen. Setzen Sie es so, um Ihr Muster wird Null und natürlich der am wenigsten Stil Typ sein. Lassen Sie uns fortfahren und das Standardstyling entfernen, so dass dies auf keine gesetzt wird. Und das ist so ziemlich gehen wir weiter. Jetzt speichern Sie das. Gehen wir zurück zu unseren Glocken sind erfrischend und da gehst du. Okay, wir haben noch viel zu tun in Bezug auf das Styling der tatsächlichen Listenelemente. Aber bevor ich um dieses Video nach oben, werden Sie feststellen, dass die Inhalte aus der über US-Abschnitt tatsächlich verschütten innerhalb der Dienstleistung bereitgestellt Abschnitt und rechts gegen den Text für wer wir sind, was wir tun. Sie sind praktisch innerhalb des Bereichs für die Dienste. Also, was genau ist hier los? Und wie reparieren wir das deutsche Avonex Video? Wette, ich zeige Ihnen einen klassischen Sets einen Strick, um diese Art von Problem zu beheben 53. Das klare Eigentum: Willkommen zurück in der vorherigen Video wurde erfolgreich hinzugefügt Inhalt für den Bereich Dienste. jedoch Wir habenjedochauch bemerkt, dass der Inhalt aus dem Abschnitt über diese Dienste im Grunde übergeht. In diesem Video werde ich genau erzählen, was passiert und wie wir es beheben können. Aber vor allem, warum wird der Inhalt überschwemmt? Nun, wenn Sie sich erinnern, haben wir die beiden Spalten im Zeichen der US-Abteilung gegeben. Wir gaben ihnen die Eigenschaft float left floating wird immer die strukturelle von Ihrem Inhalt Ihres Layouts brechen . Also müssen Sie es in Ihnen beheben, um sicherzustellen, dass die schwebenden Effekte abgebrochen werden. Als solche gibt es eine Eigenschaft, die wir verwenden können und das nennt man die klare Eigenschaft. Mit dieser Eigenschaft können Sie das sagen. Hey, ich will keine Elemente über mir unter mir, zu meiner Linken, zu meiner Rechten, um meine eigene Struktur zu beeinflussen. Die Idee hier ist das. Ich werde diese Sektion Containerdienste geben. Werfen Sie einen Blick auf das. Ich werde jetzt hier reinkommen und sagen, klar. Und wenn es so ist, werde ich beides sagen. Und da gehst du. Jetzt können Sie sehen, dass der Dienstbereich jetzt seinen eigenen Inhalt innerhalb seines eigenen Containers hat. Das ist der Effekt aus klar, und es hat tatsächlich drei verschiedene Werte, die Sie mit links, rechts oder beidem gehen können . Also, eigentlich, in diesem Fall, anstatt beides zu gehen, hätte ich sagen können, und es wird immer noch funktionieren, weil die beiden Elemente darüber, die sind, wer wir sind und das sind, was wir tun. Sec Air-Säulen schweben nach links. Also kam ich sofort rein und wandle mich nach links. Sagen wir richtig, es wird nicht funktionieren. Aber die meisten Entwickler gehen normalerweise nur mit beiden, um auf der sicheren Seite zu sein, also würde dies tatsächlich für den Dienstbereich gehen. jedoch nicht der beste Ansatz, Es istjedoch nicht der beste Ansatz,denn obwohl wir in der Lage waren, eine echte Struktur für den Bereich Dienste bereitzustellen , beachten Sie, dass der Abschnitt „ Über“ oder „Abschnitt“ immer noch kaputt ist. Sieh mal einen Tag hier drüben. Wenn ich auf Abschnitt Idee über bemerken schwebe, dass das, was wir sind zufrieden und auch der Hurriyah Inhalt, sowie das, was wir tun Inhalt ist immer noch außerhalb seiner schwimmenden außerhalb von seinem Container. Das liegt daran, dass diese beiden Elemente immer noch schweben, so dass der ideale Ansatz darin besteht, diese Elemente mit der schwebenden Eigenschaft zu fixieren , anstatt be clear Eigenschaft auf andere Elemente anzuwenden , die sie beeinflussen. Also, was genau machen wir? Vielleicht denkst du darüber nach. Nun, okay, wenn das der Fall ist, warum gehen wir nicht einfach zu jeder Spalte und ich spielte es klare Eigenschaft? Das wird nicht funktionieren, weil Sie die Clipper-Party nicht anwenden können zwei Elemente, die das schwebt in Es wird nicht funktionieren. Ok? Die andere Option wäre, die clear Eigenschaft zum übergeordneten Element hinzuzufügen, was Rolle nicht ist, da wir die def Klasse von geschrieben haben, die diese beiden Spalten enthält, die schweben sind. Leider wird das auch nicht laufen, da die Anwendung der Declare-Eigenschaft auf ein Element, dessen Children-Elemente schweben, auch nicht zu Fuß gehen ist . Also, was genau machen wir? Und das bringt uns zu einem Klassiker, sagt eine Streifen, die Sie immer und immer wieder in Ihrer Reise als CSS Entwickler verwenden werden. Was wir tun müssen, ist, dass wir einige Dummy-Inhalte entweder vor unseren Elementen des Floating vielleicht nach oder vielleicht sogar beidem erstellen müssen , und dann wird dieser Dummy-Inhalt jetzt die klare Eigenschaft darauf anwenden, um die Effekte der schwebende Elemente. Mach dir keine Sorgen. Und ich spreche vom Großen. Jetzt werde ich dir das erklären. Sehr, sehr klar. Feli, sieh dir das an, okay? Ich gehe zurück zu CSS-Klammern. Okay, lassen Sie uns Main das CSS öffnen. Ich schließe das hier einfach und jetzt gehe ich zu unserem Abschnittsbereich über das Layout und hier drüben, lasst uns zuerst Arvo eine mit 100% geben. Okay, 100% gut. Jetzt müssen wir einige Dummy-Inhalte vor und nach unserer niedrigen Klasse erstellen. Bitte beachten Sie, dass wir Ziele in der niedrigen Klasse hier sind, weil es das Element ist die beiden Elemente enthält, die schweben. Schauen Sie sich seine Demo-Struktur an. Genau hier. Wir haben den Tag wegen Roe und dann den Tag der Klasse außerhalb der Mitte, genau hier, wer wir sind und was wir tun. Dies sind diejenigen, die schweben, also müssen wir das Element, das beide enthält, anvisieren. Was natürlich die Klasse off-road ist. Das ist, wo Nimm es in der niedrigen Klasse. Okay, wir zurück hier rein. Ich werde sehen, dass gehen. Und jetzt werde ich Ihnen eine neue Art von Element vorstellen, bekannt als die Pseudoelemente. Und wir haben bei Colon angegeben. Und jetzt kann ich es vorher sagen. Aber auch, ich werde sagen, dass Low Coghlan und dann danach. Also im Grunde, jetzt wollen wir Inhalte vor und nach unserer niedrigen Klasse erstellen. Ich werde meine Spalten Klammern öffnen, und genau so haben wir Dummy-Inhalte erstellt. Ich werde die Eigenschaft namens Inhalt bearbeiten. Es wird leer sein, weil wir nichts zeigen. Ich füge meinen Semikolon hinzu. Es ist gut, etwas Raum zwischen den beiden Codes hinzuzufügen, übrigens, so dass auf irgendeinem Platz da drin und jetzt werde ich sagen, dieser Spieltisch, Dies ist ein neuer. Was ist, ist, dass es viel schafft. Jetzt verkaufen wir, also ist es viel besser, als Sie sagen, Anzeige, Blow Call in Land Block oder im Inland mit Tisch. Es schafft irgendwie eine imaginäre leere Zelle. So fügt es irgendwie zu den Inhalten hinzu, wenn das Sinn macht. Und dann werde ich jetzt sofort reinkommen und klares beides sagen. Was wir jetzt getan haben, ist, dass wir den Clip nicht direkt auf die Rollenklasse anwenden konnten , bevor und danach Dummy-Inhalte erstellen mussten. Übrigens, hör zu, übrigens, es ist nicht zwanghaft, dass du vorher oder danach mitgehen musst. Sie können einfach vor, einfach oder nach einfach sagen , es wird keine Rolle spielen. Es hängt alles von der Struktur Ihrer XML-Seite ab, aber auf der sicheren Seite zu sein, genau wie beim Löschen sowohl der typischen Vor- als auch Nachher Pseudo-Elemente, um auf der sicheren Seite zu sein. Deshalb hatte ich gesagt, dass ich vorher und auch mit nachher gehen soll. Jetzt, da wir Dummy-Inhalte gutgeschrieben haben, können wir jetzt anwenden, Eigentum auf sie deklarieren. Gehen wir jetzt sicher vor. Lasst uns hier wieder rein gehen. Lassen Sie uns die Seite aktualisieren und dass Sie immer noch das Gleiche gehen. Aber jetzt beachten Sie, dass, wenn wir die über oder Abschnitt Notiz jetzt überprüfen, dass in der Tat die, wer wir sind zufrieden, wie auch sie bereits Inhalt haben, jetzt innerhalb der über oder Abschnitt enthalten sind . So würden Sie also genau mit Elementen umgehen, die schwebende Elemente in ihnen enthalten sind . Wie ich schon sagte, dies ist ein Trick, den Sie sich immer und immer wieder auf Ihrer Reise bewerben werden, wenn sich ein CSS entwickelt. Also notieren Sie sich das. Das ist also, denke ich, viel Glück. Wir sehen uns in der nächsten Klasse. 54. Den Abschnitt Dienstleistungen erstellen: Willkommen zurück. Lassen Sie uns versuchen, die Servicesektion zu stylen, damit es wie Ah aussieht, nun, wir haben hier drüben. Also mal sehen. Sie können jetzt sehen, dass wir drei Zeilen und auch drei Spalten haben. Also sollten wir denken, Ordnung, vielleicht müssen wir einen Satz mit für die Eltern l I Elemente wie die Web-Entwicklung amable, abs. All dies sollte, wie, ein Set mit haben wie, , und es sollte um 33% sein, so dass die Zugabe aller drei Spalten im Grunde etwa 99% Rabatt auf das gesamte mit für den Container. So sollte es jetzt denken, 33% mit für jeden Container. Außerdem können wir sehen, dass sie auch einen weißen Hintergrund haben. Es gibt viele Padding Ränder angewendet, aber wir haben auch, was aussieht wie unser etwas aus Bordeaux Videos, vielleicht etwa drei Pixel und so weiter. Also lasst uns das machen. Okay, was wir tun werden zuerst, es wird nie ein mit für die Eltern l I Elemente liefern. Gehen wir zurück zu unserem indizierten XML. Also genau hier sollten wir idealerweise auf diese Hauptelemente in Hagen CLI abzielen. Es hält im Grunde Web-Entwicklung, und dann hält es die Schlucht-Dienste auf der Web-Entwicklung. Es gibt auch hier eine andere Fluggesellschaft, also sind dies die Verbündeten, die wir für die Bereitstellung benötigen, sowie die Hintergründe. jedoch Es gibtjedochein bisschen ein Problem. Sie sehen nur diese Verbündeten und dass innerhalb unserer UL-Dienstleistungspalette diese Unterdienste selbst auch Elemente von L. I sind . Also, wenn wir jetzt hier reinkommen und so etwas wie „ Hey, Hey, lass uns das machen, sagen wir „Keine Dienste“. Nur als Beispiel werde ich Dienste unterstützen, die Polizei und dann sage ich eine Lüge und komm hierher und dann sage ich: Okay, Okay, geben wir Ihnen ein paar mit 3%. Gehen wir weiter und speichern Sie das. Das Problem hier im Moment ist, dass jedes einzelne l ich habe, dass ein 3% einschließlich der Seifendienste als auch, aber wir Onley wollen die mit für die wichtigsten L I Elemente, diejenigen, die die Eltern Verbündeten Elemente, so zu sagen . Also, wie genau wollen wir sie gezielt anvisieren und sie nur Nun, ich werde Ihnen in neuen auswählbaren namens Element-Selektor vorstellen. Es ist üblich, durch das Größer-als-Symbol dargestellt. Also was ist das, dass wir es sehr spezifische Elemente in signierten übergeordneten Elementen markieren können . Also, wenn wir die wichtigsten Verbündeten anvisieren wollen, können wir sagen, dass Hey, nur die L IES, die direkt auf der Ihre Klasse Off-Service-Liste sind, bieten sie mit auf diese Weise diese anderen Verbündeten, diese Unterdienste werden keine länger anwendbar sein, weil sie nicht direkt auf der Kleidung voll sind, weil sie auf die Sie waren hier fallen, und dann fallen sie auf die Eltern ein Löwe, und schließlich fallen sie unter die Klasse, so dass es anwendbar sein wird sie, weil wir nur Ziele in den Elementen direkt unter der, ähm, Klasse sind, die die Verbündeten Haar und so weiter und so weiter. Also lasst uns das machen. Ich geh wieder hier rein. Lass uns den ganzen Weg hier runter gehen. Ich werde das entfernen und fügen wir Dienste Strich Liste und dann das geriebene und Symbol, und dann l ich jetzt alles in Ordnung gehen und fügen Sie die mit als verloren die Hintergrundfarbe. Oh, lass uns weitermachen. Jetzt mit wird es sein, ich werde mit 2,3 Prozent gehen. Okay, lassen Sie uns auch etwas Marge hinzufügen. Ich habe meine Margen bei 1% und ah, 00 und dann 1% von links. Und lassen Sie uns hinzufügen ah, Hintergrundruf Ehrfurcht, das wird f A f a f a f a. Okay, mal sehen, was wir haben. Ein Safe. Gehen wir zurück zu dem, was Wir die Seite aktualisiert haben, und da gehst du. Okay, nicht schlecht. Fügen Sie alle hinzu. jedoch Wir müssenjedochoffensichtlich noch etwas mehr Polsterung im Inneren anwenden. Warten auf Anwendung sind einige Randradius als auch, und auch in seinem gelten Sie. So Margen innerhalb der sind Sub-Dienste selbst. Sie können sehen, dass zwischen ihnen viel Platz ist. Also lasst uns versuchen, das zu beheben. Gehen wir zurück zu Klammern. In Ordnung, also für die übergeordneten Verbündeten, fügen wir etwas Polsterung hinzu, okay? Und ich habe fünf Pixel. Ich habe 20 Pixel. Ich habe 20 Pixel und 20 Pixel. Sie uns erneut LassenSie uns erneutden Rahmen hinzufügen. Wer es auch ist. Und ich gehe drei Pixel. Vergessen wir nicht die Grenze. Es tut mir leid. Die Buchgröße und Eigentum sowie Buchwissenschaft. Und lassen Sie uns einfach sagen, dass Sie auch eine Kiste gekauft haben. Ok. Alles klar, lassen Sie uns die speichern und dann sehen, wie es aussieht. Okay, wir kommen dorthin, aber geh da rein. Wir müssen nur einige Margen auf die L. I.anwenden I. Die Verbündeten befinden sich innerhalb der Elternverbündeten und ändern sich auch. Nun, sieht aus wie die Telefongröße. Dies schien viel kleiner zu sein als das, was wir derzeit getroffen haben. Okay, also denk darüber nach. In Ordnung? Wie wollen wir das Children Ale gezielt anvisieren? Ich Elemente jetzt, weil es ein Dylan war bereit, es zu nehmen. Wir nehmen es nicht. Die übergeordneten Verbündeten Elemente. Kannst du dir vorstellen, wie wir sie konkret mitnehmen können? Nun, es ist nicht schwer, und ich bin mir nur wirklich sicher. Wie willst du das machen? Wir werden hier wieder reingehen und genau das Gleiche Services-Dash-Liste. Und jetzt werde ich sagen, größer als den Verbündeten zu bekommen. Und jetzt die U. L Okay, Notizen machen. Sie können jetzt sehen, dies ist der Elternteil eine Lüge. Also, jetzt, wo Ziele in der U. L. Diese Typen, die die Seifendienste halten machen wir das genau. Also gehen wir wieder rein und lassen Sie uns etwas Stille anwenden. Ich werde meine Collie Rennen wie gewohnt öffnen und den List-Stil Typ. Gehen wir weiter und bewerben wir uns. Wir haben Disc ist ein Stil und dann die Telefongröße. Wir haben es bei 14 Pixeln, glaube ich, und es hat auch etwas Polsterung auf der linken Seite hinzugefügt, und ich muss zu den Pixeln hier. Mal sehen, wie das jetzt aussieht. Lasst uns jetzt voran gehen und sparen. Gehen wir zurück zu den Rebellen auf der ersten Seite. Und da gehst du, siehst viel, viel besser aus. Nur noch ein paar Dinge. Wir vor allem mit Margen. Sie neigen immer noch dazu, einige Geld untereinander zu haben. Wie Sie sehen können, sehen sie nicht so nahe beieinander aus, anders als das, was wir derzeit hier drin haben. Also lasst uns seltsam viel direkt zu den Unterdiensten unserer Verbündeten Elemente jetzt, also werde ich wieder hier reingehen, und ich werde das einfach packen. Es gibt nur den ganzen Stil kopieren und hier wieder einfügen. Und ich werde das L ich hier ändern. Tut mir leid, die, ähm, aber ich werde es auf die l I ändern. Wir müssen die UL nicht mehr hinzufügen, weil es egal ist, wo ich noch in die Children Elemente, die Kinder, eine Lüge, Elemente, die unter dem übergeordneten Airlie-Element fallen. Also müssen wir die UL nicht mehr hinzufügen. Also, weil ich hier hinzufügen werde, wird der Rand sein, und ich habe acht Pixel für sie niedergeschrieben. Gehen wir sicher weiter, und es sollte uns gut gehen. Nun, die erste Seite. Und da gehst du. Eine letzte Sache, wie Sie sehen können, wäre der culo, alle der h auf die Dienste zur Verfügung gestellt ohnehin genommen. Siehst du, es ist weiß. Wenn du runterkommst, kann er sehen, dass das Team auch in weiß ist. Und dann hier unten, unsere Klassen und Weiß. Aber denken Sie daran, dass wir eine Klasse speziell für Abschnitte bereitgestellt haben, die ein schlechtes Grundbild haben. So wie so. Alles, was wir jetzt tun müssen, ist, es einfach im Alter von zwei Jahren von einer solchen Klasse zu nehmen. Und um das zu tun, gehe ich zurück. Gehen wir in das Alter, um sich selbst zu teilen. Also den ganzen Weg hier oben. Also werde ich hier reinkommen, und ich werde Abschnitt in Ordnung sagen, und dann mach dir Dash BG nicht vor. Das ist die Klasse, die wir ihnen Entscheidungen mit einem Hintergrundbild h zwei gegeben haben und nur sehr, sehr einfach, Ich werde nur sagen, Farbe hier würde auf f f f f f f f f f f f f f f Semikolon speichern gesetzt werden. Lasst uns hier wieder reingehen Bezieht sich auf Seite, tut mir leid. Aktualisieren Sie diese Seite und los geht's. So offensichtlich könnten wir auch noch hinzufügen, wie die ah blaue Grenze von Ideen Sie können sehen, weil einfach sagen, Rand unten blau Fügen Sie einige Ränder als auch, Dinge wie das. Aber es gibt einen anderen Weg, wie wir unsere blauen Grenzen unter der h zwei Steuer hinzufügen werden. Also mach dir keine Sorgen darüber. Und beachten Sie auch, dass der Blütenhintergrund der blaue Rand eher tatsächlich auf allen H Zweien vorhanden ist , unabhängig davon. Nein, sie haben ein Hintergrundbild oder nicht. Daher können wir das Styling nicht speziell auf diese Klasse anwenden, da dann die Abschnitte, die kein Hintergrundbild haben, keinen gleichen Effekt haben. Also müssen wir verschiedene Wege finden. Hinzufügen Sind die blauen Ränder zu R H zwei Tags? Das ist es also. Vielen Dank für das Zuschauen. Und natürlich, ich sehe dich immer in der nächsten Klasse. 55. Den Warum Us erstellen: Willkommen zurück, hoffe, dass Sie den Kurs so weit genießen und wir haben ziemlich viele Fortschritte gemacht. Wir haben unsere Haupt-Header mit dem Helden Hintergrund mit hinzugefügt über einen Abschnitt Dienstleistungen zur Verfügung gestellt hinzugefügt. Und jetzt sprechen wir über den Wire Walker Abschnitt und ist gegen die bereits vorangehen um die HTML-Struktur für diesen Abschnitt hinzuzufügen. Aber schauen wir uns mal an, was wir hier entwerfen sollen, und es ist ziemlich einfach. Es ist kein komplizierter Abschnitt von irgendeiner Strecke der Phantasie. Es ist sehr ähnlich zu dem, was wir die über US Abschnitt hemmen, der Hauptunterschied ist , dass, während dieser Abschnitt hatte zwei Hauptspalten, eine für die Wer, wir sind die Reihenfolge für das, was wir hier unten tun. Wir haben stattdessen vier Spalten. Also im Moment sollten wir darüber nachdenken, vier verschiedene Devs zu erstellen, ihnen eine bestimmte Klasse gegeben, und diese Klasse wird vielleicht mit off haben, mal sehen, vielleicht 23 p sagen zwei oder 24% oder so etwas, Sie wissen, und hier für den Text wie Forschung und Verbündete Plan ausführen, können wir natürlich Spannen für sie verwenden und in der Tat habe ich das bereits getan. Lassen Sie mich Ihnen die HTML-Struktur zeigen oder was ich gerade habe. Also ist es genau hier. Ziemlich einfach. Wir haben unseren Abschnitt I d. Warum Tash uns die gleiche Klasse Inhalt, die, natürlich, setzt alle Inhalte innerhalb des Containers haben wir das Alter, zu dem ist, wo gehen mit uns und dann die Haupt p, Das ist das, was wir nicht nur entwickeln. Und natürlich, die Spannweiten für Forschung und Verbündete planen auszuführen. Und dann haben wir den Tag, natürlich der Reihe. Und dann haben wir jetzt den Hauptgrund Dave hält den mittleren Grund. Also Dave Nummer eins hier, Inhalt ausreichend. Diese Forschung gefüllt und zwei Packungen von Texten. Die zweite eingeladene enthält die analysierten Daten und so weiter. Das sind also die Dave, die der Klasse zwei geben müssen und diese Klasse mit dem von 24% von ihnen über versorgen müssen. Aber bevor wir das tun, lassen Sie uns einfach mit dem sehr einfachen Styling umgehen. Und natürlich, das wird in den Farben zu unserem Text sein. Genau hier. Forschung und Verbündete planen ausführen. Also lasst uns das machen. Okay, zuerst werde ich diesen Text hier geben. Ich gebe ihm einen Kurs vom Titel Dash drei. Also hier drüben, werde ich sagen, Klasse gleich und dann Titel Dash drei. Okay, Nun lassen Sie uns hinzufügen Klasse ist voll. Dieser spezielle Text. Also wird die 1. 1 hier blau sein, weil die Forschung in blauem Kragen ist. Äh, analysiere, glaube ich. Sollte orange sein. Sagen wir, Orange, das weiß, wie man Orange buchstabiert. Ah, Plan, ich glaube, es war grüne Anrufe grün. Und in der letzten Panelist Execute hat die Klasse über add red für execute. Oh, okay. Ich denke, das ist in Ordnung ist, geht voran. Speichern Sie das. Lassen Sie uns keinen Treffer über zwei Haupt, dass CSS. Also, genau hier im Abschnitt „Ah Absatz“, werde ich das Styling für Pete hinzufügen. Dieser Titel Dash drei und ich haben eine lustige Größe von etwa 20 Pixel. Ich habe einen Text, eine Linie der Mitte als auch, und ich habe eine Menge Rand , der 35 Pixel und 14 Pixel und weitere 14 Pixel sein wird. Ok, genial. Fügen wir nun das Styling für die Spannweiten hinzu. Also haben wir Spannweite Punkt blau und der Kragen wird ein Glied sein. Schau einfach mal, was ich hier drin habe. Es ist 40 b sieben f f Das wird für das Blau sein und dann haben wir es orange überspannt und lassen Sie uns die bunte Orange hinzufügen. Apropos Orange, ich habe auch keine Orange gegessen. Ich liebe Orangen. Ich weiß nicht, wie es dir geht, aber ich liebe dich, als ob ich sechs Orangen saugen kann. Ich liebe sie einfach. Alles klar, machen wir weiter. Wir haben Spannweite, dass Ah, grün und dann grüne Farbe Lindas Überprüfen Sie die gelben Haare für das Grün. Es ist ein bis C B 913 Und zu guter Letzt wir Herrn Executes Waffen hinrichten oder dieses Rot erweitern, nicht exekutieren. Und die Farbe hier wird f f f f 5050 Okay, jetzt, eine letzte Sache, obwohl, ist das Frontgewicht. Und das Komische ist eigentlich 500 für alle. Also können wir das tun. Ich werde den ganzen Weg hierher kommen. Wir werden einen neuen Abschnitt erstellen. Lassen Sie uns das kopieren. Lass uns den ganzen Weg hierher kommen und ich werde das anrufen. Ah, warum wir? OK? Und jetzt werde ich sagen, Lassen Sie uns p dunklen Titel hinzufügen. Nun, sagen wir einfach im Grunde, Dienstleistungen. Es tut mir leid, keine Dienstleistungen, aber warum wir? Das ich, warum uns streicheln? Ich glaube, es ist der Grund, warum Dash Islam gerade so schnell bestätigt hat. Ok, die Ideen streicheln uns. Alles klar, gehen wir zurück hier rein. Also, warum stinkst du uns? Und dann werde ich sagen, warum diese Spannweite? Irgendwelche Spannweiten im Inneren des warum stürzen uns? Geben wir ihm ein Telefon Zehe Warte von 500 und dann geht er weiter. Nun, speichern Sie diesen Kopf zurück in eine Broza bezieht sich auf die Seite, und da gehst du. Okay. Überhaupt nicht schlecht. Wo kommt da rein? Werfen wir einen Blick und sehen. Okay. Ah, das scheint nicht zu sein. Lassen Sie uns einfach die Größe bestätigen. Es ist 20 Pixel, aber es scheint ein wenig kleiner zu sein. Seele. Vielleicht können wir mit 23 Pixeln gehen. Ich denke, dass in Ordnung, nach oben 23 Pixel sollte ein bisschen genauer sein. Also lasst uns diese schnelle Änderung vornehmen. Lasst uns wieder nach oben gehen. Wo haben wir den Peter? Da sind drei. Okay, also lasst uns einfach in die Bilder auf 23 Pixel und wir sind gut. Okay, jetzt für das Hauptmaterial, das ist natürlich, natürlich, den Haupttext hier in vier Spalten zu teilen. , Denken Sie daran,dass, wenn wir uns mit dem Abschnitt über uns befasst haben, wir den Punkt Cole Strich Strich zur Klasse für die beiden Spalten verwendet haben. Also, jetzt werden wir eine neue Art von Kilometer Schönheit Punkt namens Dash 1-4 schaffen Alles klar, also lasst uns wieder hier reingehen. Gehen wir rüber, um uns anzulegen. Ich glaube, da haben wir die Struktur geschaffen. Und okay, also hier ist es, genau hier. Also werde ich das einfach kopieren. Weißt du was? Lassen Sie uns das hier kommen, fügen Sie das ein und dann werde ich tun, ist, dass ich hier umsteigen werde, um die mit Weg jetzt ändern , damit es vier Spalten aufnehmen kann, also wird das 23,75% sein. Das ist, wie viel ich habe, die Margen werden genau die gleichen bleiben. Das gleiche Muster Box Wissenschaft und Floater links als auch. Das ist alles, was wir tun müssen. Lasst uns retten. Lassen Sie uns zurück zum Index von HTML und tatsächlich lassen Sie es einfach kopieren. Ich werde diese Klasse kopieren Lassen Sie uns den Kopf zurück in den Index von HTML kopieren und jetzt können wir diese Klasse einfach der Division geben. Hier haben sie Klasse gleich und dann zahlen wir die Klasse weiß. Sie lassen uns die Punkte entfernen und da gehst du. Also lasst uns das einfach kopieren und wir werden einfach kopieren und einfügen kommen hier runter. Hoppla, lassen Sie uns den Einzug behalten, dass das Gleiche hier ist, nun, nun, fügen Sie die Rücktaste ein, um die Einrückung beizubehalten. Und zu guter Letzt, da gehst du hin. Okay, also sollte es uns jetzt gut gehen, wir haben die Klassen in unser ganzes Leben aufgenommen. Lassen Sie uns jetzt voran, speichern Sie diese auch. Kopf zurück in hier bezieht sich auf die Seite. Komm runter und du gehst. Okay, schauen wir uns mal an. Und es ist fast genau das Gleiche. Der einzige Unterschied ist natürlich, natürlich, dass die Titel, das Forschungsfeld, sie Symbole haben, die, natürlich, werden viel später hinzufügen. Aber das war's. Vollbau aus der Art und Weise gehe ich mit US-Sektion Deutschland, Venezuela, wo wird nun voran gehen und zu Fuß mit dem MIT. Dasselbe Abschnitt 56. Den Teambereich erstellen: Willkommen zurück. Hoffe, du hast eine wunderbare Zeit, wo immer du bist. So zuvor waren wir in der Lage, den Draht Spaziergang mit einem Abschnitt zu erstellen, aber jetzt ist es Zeit, einen Blick auf die treffen das Team Abschnitt nehmen. Wie werden wir also die Struktur erstellen und dann diesen Abschnitt entwerfen? Werfen wir einen Blick auf das, was wir derzeit haben. Wir haben acht Teammitglieder, und Sie denken vielleicht, OK, wir könnten die Spaltenstruktur hier verwenden, aber wir könnten die Klasse verwenden. Rufen Sie nicht Dash 1-4 an, weil wir vier Spalten haben, aber das wird nicht das Beste sein, weil wir es tun müssen. Rosa's gut, es ist nicht wie die Arbeit der Sektion, in der wir vier Spalten haben und nur eine einzige Stimme da drin haben. Wir müssen rudern. Also im Moment sollten Sie mehr Display-Flex denken, sitzen auf Display-Flaggen, und dann sollte die Flex-Richtung niedrig sein. Genau das sollten Sie aus der Designperspektive darüber nachdenken. Aber aus der HTML-Perspektive, die eigentliche Struktur selbst. Im Moment sieht das wie eine Liste aus. Okay, also werden wir eine ul und einige Verbündete haben, aber wir werden auch ein paar Daves haben. Wir werden wahrscheinlich einen Toten für das Bild haben, okay? Und wir können auch einen Tag für vielleicht den Namen von der Person und dann einen weiteren Tag für den Titel haben. müssen wir nicht unbedingt Diebe benutzen. Wir könnten auch Spannweiten verwenden und sie vielleicht als Block anzeigen, alles dort auf die meisten Arten, mit Glückwunsch zum Erreichen des exakt gleichen Ergebnisses. Aber in meinem Fall werde ich Dibs verwenden, um das Bild zu halten, um den Namen der Person und dann die Position zu halten . Okay, also versuchen wir es. Ich werde den Kopf zurück zu Klammern, und was ich getan habe, wie üblich, ist, ich habe voran gegangen, um die sehr grundlegende strukturelle hinzuzufügen, die nur der Abschnitt, den ich d ist. Ich gab ihm die Idee des Teams haben die Klasse gegeben von Bild Bindestrich Bijie. Weil wir natürlich natürlich wieder einen Hintergrund für die Bilder für die Bagger haben, siehst du? Es ist also sehr ähnlich wie die erbrachten Dienstleistungen. Deshalb fügte die Klasse genau dort und natürlich den guten alten Dave des Inhaltsalters hinzu, um es zu bilden. Das Team und das ist, was ich bisher erreicht habe. Also lasst uns etwa 18 gehen. Die Liste, zuallererst, also werde ich jetzt hier reinkommen, und lass uns einfach ein u l hinzufügen und ihm sofort eine Klasse geben. Ich gebe ihm einen Kurs ab. Nennen wir dieses Team eine Liste. Okay, jetzt gehen wir weiter und schließen das. Nun, um unsere Mitglieder leicht zu zeigen, werden wir sie als Ally verwenden, also haben wir einen Verbündeten. Sie werden wie die Eltern I sein. Und dann halten die Dibs im Bild. Der Name, die Position wird auf dem I I sein, also ist es irgendwie ähnlich wie das, was wir hier gemacht haben, mit den Abenden zur Verfügung gestellt. Also sieh dir das an. Ich gehe zurück zu Klammern und auf die U Well, in der Anzeige scheinbaren Verbündeten. Okay. Und dann drinnen werde ich hinzufügen, sind zu Dev gezwungen und geben diesem die Klasse ab. Lassen Sie uns dieses Teambild nennen. Tim, Bild, äh, Kate. Und lassen Sie uns einfach voran und fügen Sie das Bild für diesen bestimmten Mitarbeiter, der der CEO gleich Mäntel sein würde . Nun, um die Quelle zu finden, gehe ich zurück zu meinem Ordner, und ich glaube, es ist in den Vermögenswerten. Narren. Ah, und dann Bilder und dann Team. Okay, hier würden Sie die Bilder finden. Es wird also Teambilder Assets sein. Okay, ich glaube, das habe ich verstanden. Lasst uns hier wieder rein gehen. Das wird also Vermögen sein. Wir müssen keine Flucht machen, denn denken Sie daran, dass sich das HTML-Dokument selbst innerhalb des gleichen Ordners wie Assets befindet. Also ist es nicht so, dass wir aus dem ah aus dem Index des HTML entkommen, hatte ein B. Wir haben es mit dem CSS-Datei-Dam-Gebäude zu tun, um aus dem diesjährigen Ordner zu entkommen und dann in diesen Ordner, wo wir es Assets nehmen können. Aber da wir die Bilder direkt über den Index der XML-Datei hinzufügen, müssen wir keine Escapes machen. Okay, also hoffe ich, dass du das hast. Gehen wir zurück zu Klammern. Alles klar, also wird es jetzt Bilder sein, vier Schrägstriche Team, und dann glaube ich, sein Name ist Rusty. J P. G. Und da gehst du. Alles klar, gehen wir weiter und schließen uns. Dieser erste Div kam auf. Habe ich werde runterspringen. Das ist sicher, dass das geschlossen ist. Was springt hier runter? Fügen wir den nächsten Dave hinzu. Also Dave Klasse gleich Dies wird für die Namen sein. Will nannte sein Team Dash Namen und sein Name ist Rusty Dela Cruz. Und lassen Sie uns Div schließen. Ich weiß nicht, wie es dir geht, aber ich fand diesen Namen immer lustig. Ordnung, InOrdnung, lasst uns einfach seinen Kopf hier verlieren, Dave Class ist ein Team, als die Position Pos sein würde. Und natürlich ist er der Tod. Schließen wir das. Und OK, also haben wir nichts anderes geschlossen, das der Verbündete sein wird. Wir müssen das Luftlicht schließen und lassen Sie uns auch die u l und voila schließen! Okay, also lasst uns einfach zusammenfassen. Wir haben die U.S-Klasse der Mannschaft Liste der L, die ich in dem div halte, das das Bild enthält. Ein weiterer Tag davon hat den Namen. Positionieren Sie sie alles geschlossen haben Okay, Lasst uns voran und speichern Sie das. Gehen wir zurück zu Rechnungen über zuerst die Seite und er ist so glücklich ist wie, ja, ich bin der CEO, in Ordnung, Ordnung, also wurden jedenfalls erfolgreich hinzugefügt die erste Person Dela Cruz, Mr CEO Also, was ich werde jetzt tun ist, ich werde im Grunde genau die gleiche Struktur verwenden, um die verbleibenden Mitglieder aus dem Team hinzuzufügen. Ich werde das Video pausieren und fortsetzen, sobald ich alle hinzugefügt habe. Willkommen zurück. Und wie Sie jetzt sehen können, muss ich hinzufügen, um all die vielen Mitglieder für das Team hinzuzufügen. Ich habe einen Fehler mit dieser Schreibweise für Rusty gemacht, also habe ich das behoben. Aber ich habe auch den gesamten Text für die anderen Mitglieder hinzugefügt. Und ich werde das Gleiche jetzt für Mr. Rosti Dela Cruz tun. Das ist also etwas, das du immer versuchen solltest, nicht zu vergessen, wie ich es tat. Ich habe immer versucht, Ihnen alle Texte für alle Ihre Bilder hinzuzufügen. Lassen Sie mich das jetzt für Mr. Rusty dela Cruz tun. Und OK, also lasst uns das retten. Und schauen wir uns einfach an, was wir jetzt haben. Aktualisieren. Und natürlich können Sie jetzt alle Bilder mit den Namen der Leute sowie deren Positionen sehen. Okay, also lasst uns in die CSS-Aktion einsteigen. Gehen Sie auf ihre beiden wichtigsten, CSS fallen. Und lass uns alten Weg hier unten abkühlen. Lasst uns das Warum schnappen. Warum wir? Wir werden einen neuen Abschnitt erstellen. Wir rufen das Team an. Gehen wir zu den Teammitgliedern über die Teammitglieder. Okay. In Ordnung. Also wird der Neuling es neben tun, um als Flex anzuzeigen. In Ordnung, also nehmen wir die also nehmen wir die Klasse der Nationalistenmannschaft. Ok, mach auf. Unsere Kollegin Klammern, und lassen Sie uns etwas unternehmen. In Ordnung? So Display wird Flex sein und dann lenkt Richtung, wie Sie sich vorstellen können, wird Rolle sein. Und da gehst du. Also lasst uns auch den Flex Rap machen. Flex Rap wird Rap sein. Und lassen Sie uns auch den Listentyp A entfernen. Wir wollen kein Styling für unsere Listen oder Listen. Art des Stils. Mir wurde gesagt, ich will keines. Und lassen Sie uns einfach jedes Muster entfernen. Okay, also null und OK, also lasst uns das retten. Und sagen wir einfach die Fortschritte, die wir gemacht haben, kommen wir wieder hier rein. Das ist die erste Seite kam runter, OK, aber fast wir bekommen es noch brauchen, um ein mit für die tatsächlichen Verbündeten selbst zu setzen . Also lasst uns hier wieder rein gehen. Ich werde eine neue Erklärung erstellen. Es ist ein Verbündeter im Team. Und dann öffnen wir das. Ich werde das mit 24% ausgeben. Okay, weil, natürlich, da ist es eine Vierspalte, also kann es nicht 33% oder 50% sein, weil es dann keine vier Spalten hat, oder 24% sollten nur etwa rechte Ränder sein . Und Sie haben meine Margen bei 1% Null Null und dann Ah, 1% auch, was ziemlich Standard ist. Ich habe die Hintergrundfarbe, die die gleiche ist. Ah F A f a f A und ich habe eine Menge Patton, 20 Pixel, 20 Pixel, 10 Pixel und Eingabe Pixel. Fügen wir die Buchgröße in hinzu. Dies sind ziemlich Standardregeln, aber eine Box und dass Sie OK gehen, so jetzt haben wir es mit unseren Verbündeten Margen hinzugefügt, Hintergrundfarbe. Lass uns wieder den Kopf retten, erfrischen und alles. Okay, also wo wir fast dorthin kommen. Ich weiß, dass das schrecklich aussieht, aber zumindest jetzt können Sie sehen, dass CSS versucht, die Mitarbeiter in zwei Zeilen mit vier Spalten anzuzeigen , also gibt es im Moment eine Menge Sachen. Das Hauptproblem ist, dass die Bilder selbst ziemlich groß sind. Wenn ich zurück zu meinem Ordner gehe, können Sie sehen, dass sie alle im Grunde gut sind, sie haben unterschiedliche Größe. Dies zum Beispiel ist zum Beispiel12 80 mal 1 50 Herr hier gezeigt ist 9 50 mal 8 50 und so weiter. Was wir also tun können, ist, dass wir eine maximale Höhe für alle Bilder einstellen können und dann können wir auch unseren Überlauf so einstellen, dass er ausgeblendet wird. Also überprüfe das. Ich glaube, ich werde hier wieder rein gehen. Lassen Sie uns ein neues Deklarationsteam Bindestrich Bild erstellen, und überprüfen Sie dies. Ich werde etwas einstellen, das als die maximale Höhe bekannt ist, so dass, egal was passiert, es nie 200 Pixel überschreitet. Lassen Sie uns auch etwas tun, das als Überlauf bekannt ist, und wir sagten dies zu versteckt. Also im Grunde, was dies tut, ist, dass alle Teile des Bildes, die außerhalb des Containers verschütten könnten es einfach verstecken. Das ist es, was Überlauf versteckt macht. Lasst uns diesen Kopf hier wieder retten, erfrischen. Und da gehst du. Okay. jedoch Es gibtjedochnoch ein anderes Problem. Die Tatsache, dass wir eine maximale Höhe für das Bild eingestellt haben, hat etwas verändert , weil im Moment C s sagt nur, dass das weiß. Okay, dieses Bild sollte nicht mehr als 200 Pixel hoch sein. Aber was ist mit dem mit? Wir müssen auch etwas dagegen tun. Wir können keine spezifische mit in Bezug auf Pixel setzen. Aber was wir tun können, ist, dass es einen kleinen Trick braucht. Ich gehe zurück hierher und sieh mir das an. Ich werde sagen, Team-Dash Liste war nur sagen Bild. Ich bin G und jetzt mit wird 100 Prozent sein. Siehst du das? Lass uns wieder reingehen. Hier bezieht sich die Seite Und da gehst du. Was wir jetzt getan haben, ist ein Trick. Okay? Obwohl wir gesagt haben, dass die maximalen Höhen 200 Pixel mit auch gesagt, Hey, Hey, CS sagt, egal was das volle mit aus dem Bild angezeigt wird, so sind solche CSS jetzt an einen Weg denken, wie es das vollständige Bild anzeigen kann, während halten das Bild mit einer maximalen Höhe von 200 Pixel. CSS ist erstaunlich, aber im Moment können Sie sehen, dass dies ist, was wir so atypischen Trick bekommen haben, dass die Leute immer verwenden Entwickler normalerweise verwendet. Wenn Sie die maximale Höhe einstellen, gehen drei Bilder immer mit 100% und die meiste Zeit erhalten Sie einige ziemlich gute Ergebnisse. Okay, gehen wir zurück hierher. Mal sehen, was wir hier noch tun müssen, damit wir sehen können. Moment sind die Erkennungen an der Mitte ausgerichtet. Die Position ist irgendwie leicht etwa 300 in Bezug auf Gewicht. Und es ist auch eine Linie zum Zentrum. Aber es ist kursiv, richtig? Also werden wir versuchen, ein paar Änderungen hier vorzunehmen. Gehen wir zurück und lassen Sie uns das tun. Der erste, mit dem wir uns beschäftigen werden, wäre der Name des Teams, T-Name. Lassen Sie uns unsere Qualitätsspangen öffnen. Und, äh OK, also habe ich Text in der Zeile, eine Zeile, die das Zentrum sein wird. Okay, wie, machen wir genau das Gleiche für die Teamposition. Nennen Sie es Zahnspangen. Text, der Linie in die Mitte und denken Sie daran, Würden Sie eine vordere Gewichte haben? Weil es eine Art Lichter ist. Ich gebe ihm 300 und das lustige Styling auch. Telefonstil ist es? Alec und lassen Sie uns auch die Telefongröße ändern. Ich habe diese Größe von 15 Pixeln hier, und ich denke, das sollte gut sein. Lass uns das retten und sehen, was wir haben. Der Kopf zurück hier war zuerst eine Seite und, uh, okay, okay, wir haben immer noch ein paar Dinge vermisst. Zum Beispiel gibt es einen kleinen Spielraum zwischen den Bildern und den Titeln sowie den Namen der Mitarbeiter. Wie Sie sehen können, richtig. Es ist ziemlich viel Spielraum, eigentlich. Also müssen wir hier drin etwas tun und dann zurück hierher gehen. Lassen Sie uns Rand Studenten Namen hinzufügen. Zunächst einmal wird der Rand hier 17 Pixel Null sein und dann 10 Pixel haben. Und dann schauen wir nach der Position, in der ich Ma Jin auf 10 Pixel und Null gesetzt habe. Kein que. Sehen wir uns das an. Lasst uns hier wieder rein gehen. Lassen Sie uns die Seite aktualisieren und OK, so dass das letzte, was wir jetzt tun müssen, wäre, das Hintergrundbild hinzuzufügen, aber auch Notizen ist, dass die Alliierten einen Grenzradius haben. Oh, das hätte ich fast verpasst. Das ist also schnell behoben. Ah, wo wir Tim am wenigsten l i Ah, Buddha Radius, und ich werde es drei Pixel geben. Eigentlich, lassen Sie uns fünf Pixel bekommen. Dinge ein bisschen mehr als drei. Diese guten fünf Pixel sparen den Kopf wieder frisch. Okay, das ist eher so. Alles klar, lassen Sie uns einfach voran gehen und hatten das Hintergrundbild, also sollten sie ziemlich unkompliziert sein. Wir gehen rüber, wo wir zum Beispiel die Dienstehatten Beispiel die Dienste . Also all die packen das, lasst uns das kopieren. Komm runter und wir haben Team. Und ich wollte das einfach einfügen und dann die Dienste in das Team wechseln. Es war ein Team, das wir noch Team haben, und ich erinnere mich, okay, ich habe ein Team. Und so ist es nur Team. Okay, das wird also Team-Hintergrundbild sein. Und ich weiß, dass das Bild selbst Team O J. P. G.sein sollte P. G. . Lasst uns hier wieder rein gehen. Ah, Hintergrund. Ja, es ist Team, dass J p. G. G. Also denke ich, es sollte uns gut gehen. Lasst uns jetzt weitermachen und das retten. Gehen wir zurück zu einem Boza, aktualisieren Sie die Seite und voila. Da gehst du. Hoffentlich war das nicht zu kompliziert für dich. Und hoffentlich konnten Sie auch Ihre mittlere Mannschaft bauen. Das war's also. Vielen Dank, dass Sie sich mir in diesem Video angeschlossen haben. Deutschland, das nächste verfügbare. Jetzt gehen Sie vor und erstellt den Abschnitt Testimonials. 57. Testimonials Challenge: Nun, Comebacks. Und wenn Ihr Video erfolgreich erstellt wurde, ist der Mythos, dass der gleiche Abschnitt jetzt ist es Zeit, den Testimonial Abschnitt zu erstellen. Aber bevor wir das tun, möchte ich Ihnen diese Herausforderung vorstellen. Okay, ich möchte, dass du dein Bestes ausgibst, um jetzt voranzukommen und die Testimonial Sektion ganz alleine zu erstellen . Ich gebe Ihnen ein paar Hinweise. Nun ist die Struktur dafür, der bahnbrechende Abschnitt ist ein bisschen anders als das, was wir in der Vergangenheit hatten. Wir haben hier nicht mehrere Spalten, ist nur im Grunde eine einzelne Spalte. Aber dann haben wir für Rose. Da es sich also nur um eine Spalte handelt, können wir die Spaltenstruktur nicht verwenden, wie wir es mit dem Buy a book with a section oder sogar dem Abschnitt über US gemacht haben. Wir können nicht den Punkt namens Dash, wandern, Stewart oder Dash 1-4 zum Beispiel verwenden. Wir können verwenden, dass wir auch Flex die Display-Flex verwenden können, entweder weil ja, obwohl wir vier Zeilen haben und technisch könnten wir die Flex angezeigt ihre Display-Flex verwenden . Vielmehr es nicht wirklich der beste Ansatz sein, weil wir nicht mehrere Spalten haben. Es ist nur eine Säule mit für Rose. Also der beste Weg, der einfachste Weg, um dieses Spiel. Dies wird mit der Verwendung von Debs sein. Das ist alles, was ich sagen werde, in ihren verwendeten Strategien, die geben, um Ihre Zeugnisse zu zeigen . Vergessen Sie die Codes, die aufgerufen werden, wird das ein wenig später behandeln. Und wenn Sie versuchen können, sich einen Weg zu denken, wie Sie schweben können, gebe ich Ihnen nur den Hinweis am Tag, wie Sie zum zweiten und vierten fließen können. Zeugenaussagen. Wenn Sie herausfinden können, wie man sie ans Licht schwebt, wäre Zweifel fantastisch. Denken Sie also an Daves Denken an Klassen und versuchen Sie auch, etwas Stil zu machen. Versuchen Sie, einen Weg herauszufinden, wie Sie die weiße Hintergrundfarbe für die Haupt-Dave hinzufügen können, die das Zeugnis und auch den Namen sowie die Website für die Person, die das Zeugnis liefert . Beachten Sie auch die Grenzlohn und haben Sie einfach Spaß. , Tun Sie Ihr Bestes,um diese Aussage, Allergien und Daves zu zeigen und, ähm, das ist es viel Glück. Ich werde Sie nie nächstes Video sehen, wo ich jetzt voran und erstellen Sie die Zeugnisabschnitt 58. Den Abschnitt zur Zeugnisse erstellen: Okay, hoffentlich haben Sie versucht, den Testimonial Abschnitt ganz alleine zu erstellen. Wenn Sie es getan haben, wenn Sie einen Versuch unternommen haben, Herzlichen Glückwunsch. Wenn es dir nicht gut geht, sag es mir Bescheid. Zeigen Sie, wie Sie den Testimonial Abschnitt erstellen. Also, wie ich im Video der Leute sagte, wir können keine Anzeigeflags oder die Spaltenstruktur verwenden. Also, wo wird Dibs dafür verwenden? In Ordnung, also werden wir einen haben, Dave , der alle Männer festhält. Und Dave ist der zweite Tag des Willens im Grunde zeigte diesen Emmanuel, während der andere Dave den Namen sowie die Website für die Person anzeigen wird, die das besondere Zeugnis gegeben hat . Und nur auf einer Nebenanmerkung, wenn du irgendwelche von diesen Namen erkennst, erkennst, dann schick mir eine Nachricht, okay? Sag es mir einfach. Nun, weißt du, durch diese Leute von diesen fiktiven Charakteren aus und dass wir uns darüber unterhalten können , natürlich, weißt du. Das ist alles, was ich dazu sagen werde. Gehen wir rüber zu den Klammern. Also, was ich wie üblich getan habe, natürlich, ist natürlich,einen neuen Abschnitt für die Tests zu erstellen gewonnen Il und ich habe die Idee für Testimonials hinzugefügt haben eine Klasse A ganz besondere Klasse von grauen Bindestrich bgl vor dem Hintergrund eines spezieller Hintergrund. Also weiß ich es nicht. Man hat bereits den üblichen Tag der Klasse von Inhalten H zwei für die Zeugnisse Titel hinzugefügt , und das ist so ziemlich es. Okay, also, wie sollen wir jetzt unsere Zeugnisse zeigen? Nun, ich werde einen neuen Dev erstellen, der ihn schreibt und lassen Sie uns einfach geben, dass die Klasse aus Rolle gemacht hat. Okay, das wird also der Haupt-Dave sein, der die anderen Dibs hält. Lassen Sie uns nun versuchen, den anderen Tag hinzuzufügen, da wir die tatsächlichen Zeugnisse selbst halten . Das wird also div Klasse gleich und jetzt Zeugnis sein. Das wird also das Eltern-Div mögen. Also jetzt für den Tag, an dem der Mantel selbst angezeigt wird, also entspricht die Def-Klasse, äh, Mantel. Okay, also lasst uns das einfach machen. Ich gehe jetzt weiter und schnappe mir einfach den Mantel von Mr. Hans Gruber. Lassen Sie uns das hier kopieren. Lassen Sie uns das kopieren. Es war der Kopf zurück zu Klammern. Lassen Sie uns das zeigen. Und ah, ich mache nur diese zwei Zeilen. Gehen wir jetzt weiter und schließen das, Dev. Okay, das ist der Tag für den Mantel, den wir nicht noch einen Tag hinzufügen. Sofort, Full. Der Autor. Es ist ein Tag des Unterrichts hier wird dem Autor gleich sein. Und in diesem Fall ist sein Name Hände Gruber und seine Asian Dawn. Äh, ruhig. Gehen wir weiter und schließen das, Dev. Und das ist es. Also werde ich jetzt voran gehen und den Haupttag des Halteverhaltens schließen. Die Zeugnisse waren verschlossen eins. Ah, lassen Sie uns sicherstellen, dass das lila E eingerückt ist. Und dann können wir die Straße schließen. Dave selbst. Halten Sie eine Sekunde. Lassen Sie mich nur sicherstellen, dass das eingerückt ist. Vermutlich def, def. Okay, also dieses Gerät für die Zeile und dann ist dieses für den Inhalt. Und, äh, lassen Sie mich. Ich verwirre mich hier nicht, okay? So glücklicher Dave. Genau hier für den Inhalt. Dave. Klasse für Vaux, es scheint, als hätten wir einen zusätzlichen Dev Islamic diesen Dave entfernt. Okay, also mal sehen, wir haben den Tag für das Zeugnis nicht geschlossen. Okay, stellen Sie sicher, dass das korrigiert ist und noch ein Def. Okay? Dies sind die Arten von Problemen, mit denen Sie konfrontiert sind, wenn Sie mit CSS erstellen. Es ist ein bisschen ärgerlich, aber es ist, was es ist. Also lassen Sie mich nur sicherstellen, dass das richtig gegen Dave ist. Dave, sie haben genau hier. Ich bin nur im Weltraum, Def. Und dann dieser Dave hier. Lasst uns das hier rüber schieben und okay, geh einfach weiter und rette das. Gehen wir zurück zu einem Browser. Nun, zuerst die Seite und da gehst du. OK, also haben wir den ersten Tag, der angezeigt wurde. Ich werde jetzt weitermachen und die verbleibenden Leben für Hannibal Lecter hinzufügen, militärisches Elend. Und Michael Myers. Willkommen zurück. So beleidigte verbleibende Zeugnisse für Hannibal Lecter, Mildred Veteran und Michael Myers. Und das habe ich jetzt. Und ich habe die Seite aktualisiert. Sie können meine Zeugnisse sehen und das dort, aber wir müssen ihnen jetzt etwas Stil hinzufügen. Schauen wir uns mal an, was wir hier haben. Sie können sehen, dass sie etwas Padding haben, auch einige Ränder. Sie haben einen weißen Hintergrund. Es gibt auch eine Grenze Ovidius für die Zeugnisse. Also lasst uns das machen. Ich werde hier wieder rein gehen. Ich gehe über zwei Main, die CSS und lass uns das machen. Ich werde Teammitglieder schnappen. Lassen Sie mich das noch mal versuchen. Ich komm hier runter, füge das ein und wir werden den Namen von Teammitgliedern ändern, um t mehr zu testen. Neil testet mehr Knieschreie. Okay, also lasst uns jetzt und in der ersten Klasse weitermachen, was ein Zeugnis sein wird. Ja, okay. Und, äh, Ordnung, also fügen wir zuerst eine Telefongröße hinzu, die 17 Pixel betragen würde. Lassen Sie uns nun die Hintergrundfarbe hinzufügen, die weiß sein wird. Okay. Und dann lassen Sie uns auch die Grenze hinzufügen, weil sie uns vermeiden, wird zu einem Pixel gehen. Ah, solide. Und ich weiß, dass die Farbe hier leichter wird. E Null leicht Null. Okay, es gibt auch eine Grenze von Ideen. Vergiss das nicht. Und das Blut davon ist hier wird 10 Pixel sein. Und, ähm, das war's. Alles klar, lassen Sie mich das speichern und sehen, was wir jetzt Ihren Kopf wieder hier drin haben und jedes erste eine Seite und da gehst du. Okay. Also offensichtlich müssen wir jetzt etwas Polsterung hinzufügen, um den Text von den Grenzen weg zu schieben. Und fügen Sie auch einige Margen zu getrennten Zeugnissen voneinander hinzu, und Sie könnten auch feststellen, dass die mit allen Zeugnissen ein bisschen kürzer sind als der Regula Container mit. Also müssen wir auch für unsere Testimonials ein Maximum setzen. Also werde ich wieder hier reingehen und das werde ich tun. Ich komme hier rein. Lassen Sie uns das Pad in erster Linie hinzufügen, Also habe ich ein Muster hier ab 12 Pixel, und ich habe einen Rand von 12 Pixel x 20 Pixel. Und schließlich, lassen Sie uns etwas namens Max mit OK setzen, Max mit hier wird Let's go mit 800 Pixeln. Okay, also lasst uns das retten. Werfen wir keinen Blick auf die neuen Zeugnisse, und da gehst du. Okay, wir kommen dorthin. Versuchen wir nun, den Stil des Textes selbst zu ändern. Also haben wir die Autorenklasse in das Licht schweben, und wir haben auch den Text mit Affronted von etwa 300. Und auch, äh, der Schriftstil ist kursiv. Also lasst uns weitermachen und diese Änderungen vornehmen. Ich komme hier rein. Lassen Sie uns mit Test t mehr Neo und Mäntel gehen. Äh, okay. Also habe ich das Frontgewicht bei 300 haben den Spaß Stil kursiv. Und ich werde auch eine Zeilenhöhe von einem Punkt voll hinzufügen. Das sind die drei, die ich habe. Dann geh jetzt weiter und füge diese Geschichte in vier hinzu. Der Autor. Denken Sie daran, wir schweben den Autor nach rechts. Also lasst uns das machen. Ich werde aufgeben. Ich habe nicht die Eingabetaste für das College-Armband gedrückt. Mach das nochmal. Okay, lassen Sie mich das hier entfernen, als gehen Sie zurück rein, Tab schwimmt, und wir werden diesen Kerl nach rechts schweben. Und was müssen wir noch hinzufügen? Okay, lassen Sie uns auch einen Rand oben hinzufügen. Ich habe fünf Pixel und los geht's. Alles klar, gehen wir weiter. Nun, speichern Sie das und lassen Sie uns es passieren, okay? Ich werde mich erfrischen. Und da gehst du. Allerdings würden Sie feststellen, dass die auch jetzt die Struktur brechen, weil gut, raten Sie was? Wir sind Schwimmer drinnen zum Weißen. Also, um das zu beheben, um sicherzustellen, dass die schwebenden Elemente im Büroblock bleiben, Was wir tun werden, ist, dass wir hierher kommen, und wir werden einfach unsere Testimonials als in Line-Block anzeigen. Ehrfürchtig. Lass uns das retten. Und jetzt, wenn ich hier wieder reingehe und mich erfrischen würde. Da gehst du. Genau so kannst du Floating-Probleme beheben, wenn du es mit Daves zu tun hast. Wenn Sie eines der Elemente nach rechts oder links schweben, stellen Sie die Eltern Dave so ein, dass sie als Alienblock angezeigt werden, und es wird die Struktur nicht mehr brechen. Okay, wir sind fast da. jedoch Sie würdenjedochbemerken, dass hier das zweite und vierte Zeugnis nach rechts schweben. Wie können wir also genau das gleiche Ergebnis erzielen? Nun, es sollte an dieser Stelle ziemlich offensichtlich sein. Was ich tun werde, ist ganz einfach, wir werden eine neue Klasse für die zweite und vierte Testimonials erstellen. Ich werde hier reinkommen und die Klasse anrufen. Richtig? Ist das auch hier genau dasselbe, oder? Und jetzt werden wir den Kopf hinter den Zehen ein Haupt, das CSS. Und was ich tun werde, ist, dass ich den ganzen Weg nach oben gehen werde, wo wir den Abschnitt direkt im Layoutbereich von anderen haben . Also genau hier. Lassen Sie uns jetzt hier runter kommen und sagen, dass jede Klasse mit Rechten, jedes Element mit der weißen Klasse, ich meine, Lassen Sie uns nach rechts schweben. Es ist sicher. eine Kopf wieder rein. Hier bezieht sich die Seite und da gehst du. Also sind wir ein Urlaub ein Oh, wir müssen immer noch den Hintergrund hinzufügen. Der Hintergrund hier ist wie eine andere Spalte. Also denken Sie daran, wir haben die Klasse bereits von Grey Dash BG gegeben. Also werde ich hier rüber gehen und genau hier werde ich einfach sagen, ah Abschnitt Punkt Punkt grau Bindestrich BG. Und lassen Sie uns diesem eine Hintergrundfarbe von F o F Null F Null geben. Lasst uns das retten. Geh wieder rein. Hier bezieht sich die Seite und da gehst du. So lassen sie das vermisste jetzt ist natürlich natürlich die farbigen Fellsymbole, die natürlich wir natürlichspäter einen Blick auf ah etwas werfen werden. Aber so ziemlich wie man es baut. Die Sektion von jemand anderem Deutsch Avonex Video. Wo werden nun unsere Kunden hinzufügen? Dann sehen wir uns 59. Den Kundenbereich erstellen: gut kommen bald wieder in Menschen Video erfolgreich hinzugefügt und gestylt sind Zeugnisse. Aber jetzt ist es an der Zeit, hinzuzufügen. Der Kundenbereich muss die Logos all dieser Unternehmen hinzufügen. Und natürlich ist der Kundenbereich ein sehr, sehr beliebter Abschnitt auf jeder Business-Website, weil das Geschäft Potenzial für neue Clans zeigen muss , mit denen , ist der Kundenbereich ein sehr, sehr beliebter Abschnitt auf jeder Business-Website, weil das Geschäft Potenzial für neue Clans zeigen muss, mit denen wir gearbeitet haben diese Konferenz vor. Wir haben die Erfahrung, wissen Sie, wir waren kompetent in dem, was wir tun. Es ist also immer eine gute Idee, das Portfolio des Clans zu präsentieren. Jetzt möchte ich, dass Sie etwas Zeit damit verbringen, darüber nachzudenken, wie wir diese Logos anzeigen können. Der HTML-Abschnitt sollte ziemlich unkompliziert sein. Muss einen neuen Abschnitt zu erstellen, wird den Tag der Klasse von Inhalten wie gewohnt haben, und dann können wir eine Liste verwenden, um die Logos anzuzeigen. Aber dann denken Sie an den CSS-Aspekt davon. Wie werden wir diese Logos anzeigen? Wir hatten sehr etwas Ähnliches getan. Wir geben das Team zu, wo wir zwei Ziele hatten, aber in diesem Fall haben drei Regeln statt. Aber wird es die gleichen Display-Flaggen geben und so weiter und so weiter. Soap, genau wie mit der Testimonials Herausforderung, die Ihnen dargestellt wird, wenn Sie etwas Zeit verbringen möchten um zu übertragen, Got, wie wir diesen Abschnitt durch Omen anzeigen können, pausierte das Video. Geh weiter und gib ihm deinen besten Schuss auf das kleinste Minimum. Versuchen Sie, den HTML-Aspekt zu erstellen. Versuchen Sie also, den Abschnitt der Dave, die auf geordnete Klasse sowie die geringsten Elemente für jeden dieser Logos zu erstellen. Aber gehen wir weiter und machen das. Jetzt gehe ich wie gewohnt in Klammern und lass uns zum Index dot html gehen. Also hier unten, gehen Sie einfach vor und erstellen Sie einen neuen Abschnitt und okay, wir bekommen ein I D von Kunden, genau wie mit den oder den Abschnitten der Kunden. Und dann geben wir ihm die Klasse aus dem Bildhintergrund, weil wir die Tasche auf Bild von zwei Menschen haben , die die Hände schütteln. In Ordnung, also lasst uns einfach etwas Raum schaffen. Und so werden wir jetzt und am ersten Tag der Klasse gleich bekommen, nennen wir diesen Inhalt. Es ist die gleichen alten Inhaltsklassen üblich. Schließen wir das, und dann fügen wir hier den Titel hinzu , der auch Alter sein würde . Und dann werden es unsere Klienten sein. Okay, gehen wir weiter auf eine neue Linie. Und jetzt werden wir hier anfangen, die UL hinzuzufügen. Geben wir dem eine Klasse von unserer Kundenliste, okay? Und dann werden Sie jetzt den allerersten kleinsten Punkt L. I und dann innerhalb dieses Listenelements haben . Lassen Sie uns voran und fügen Sie das allererste l Logo, so dass wir es als Link verwenden. Auch. Also ein Baum, wenn gleich, wird nur den Hashtag verwenden, um den Link zu repräsentieren. Lassen Sie uns Ziel gleich hinzufügen und dann auf der Schule leer, so dass, wenn die Bilder geklickt werden , es wird in einem neuen Tab geöffnet. Gehen wir weiter und schließen das und jetzt drinnen. Endlich, alle unsere acht Ich werde jetzt die Bildquelle gleich haben. Und jetzt lassen Sie uns die Bilder bekommen, damit es innerhalb des Assets-Ordners ist und dann werden Sie Clients sehen. Und dann haben Sie gesagt, unsere Tochter P N G Also lassen Sie mich gehen und einfach den Namen kopieren. Lassen Sie uns das kopieren. Gehen wir zurück zu Klammern und rechts schlagen. In Ordnung, also sagen wir einfach Vermögenswerte und dann Bilder. Und sie werden Kunden sagen. Und das war's. Eine Reihe von Häusern. Das PNG. Das war's, genau da. Lassen Sie uns dies schließen und fügen Sie auch den Olt-Text hinzu. Gut für S e o wird dies nennen, sagte unsere Häuser Logo. Und da gehst du hin. Also jetzt das einzige, was Sie brauchen, um es direkt neben zu tun und zeigen, dass wir alles geschlossen haben , was wir haben, die A-Tags schließen. Wir haben die Angriffe. Schließen. Also müssen wir schließen. Rul. Das ist dir nahe. L, die geschlossen ist, ist auch ein Abschnitt geschlossen. Und ich denke, wir sind gut zu gehen. Lasst uns das retten. Gehen wir zurück zu unseren Glocken. Ah, waren zuerst eine Seite und da gehst du. Also, jetzt haben wir ein allererstes Logo, also wird es immer wieder der gleiche Prozess sein. Ich werde die neuen Listenelemente für die wichtigsten Logos hinzugefügt werden Video, und ich war in dem Video, sobald ich alle von ihnen hinzugefügt haben. Willkommen zurück. Wie Sie sehen können, habe ich alle Männer und Logos für die verbleibenden Unternehmen hinzugefügt, so dass bereits voran, um dies zu speichern . Lassen Sie uns zurück über Ihre Aber ich war ah einfach aktualisiert die Seite. Und da gehst du hin. Also haben wir jetzt alle Logos auftauchen. Also Billy Kuwait im HTML-Aspekt, ist nicht wirklich so schwierig. An dieser Stelle sollten Sie bequem sein, Ihre Abschnitte, Ihre Dave zu erstellen und die Elemente U L und L I zur Anzeige der Logos zu verwenden. Aber deutsche Event-Eier Video gut, aber jetzt einen Blick darauf werfen, wie wir dann die Kundenliste Elsie stylen können. 60. Den Kundenbereich gestalten: Willkommen zurück. So nihilistisch. Schauen Sie sich an, wie schwächen Stil der Client-Abschnitt. Und wie ich bereits sagte, sollten Sie an Dinge wie Display-Flags denken, vielleicht eine Flexrichtung der Zeile. Und dann vielleicht auch, um den Listen-Stil Dinge wie diese zu entfernen. Also ist es sehr ähnlich zu übermäßig nicht hier drüben wegen Fleisch. Das scheint so, lasst uns voran gehen und die Show beginnen. Ich werde zuerst von allen Dienstleistungen Teil herauswachsen, weil wir machen Sie so genau das gleiche sagen, Cisco, um das Hintergrundbild anzuzeigen. Also kopieren Sie das einfach und wir können das verwenden, um einen neuen Abschnitt vier zu erstellen. Die Klienten. Ich werde hier die Dienste für Kunden ändern. Und dann, natürlich, direkt hier wird Dienstleistungen für Kunden ändern. Okay, gehen wir weiter und retten das. Und stellen wir sicher, dass es so gut funktioniert. Zuerst die Seite und da gehst du. Okay. Ehrfürchtig. Also mussten wir ein Bild anflehen, das zeigt. Gut. Lassen Sie uns nun beginnen, die tatsächliche UL-Klasse zu stylen, die die Logos enthält. Und natürlich natürlich ist diese Klasse die Client-Liste, wie Sie sehen können. Dies ist, wo wir beginnen, das Display flex hinzuzufügen und so weiter. Also lasst uns das machen. Lassen Sie uns Oh, ich habe vergessen, den Service hier für Kunden zu wechseln. Lass uns das einfach schnell machen. Klienten. Okay, also fangen wir gleich jetzt mit der Klasse der Clients Dash-Liste an. Und wie ich schon sagte, mehrmals, werden wir Display verwenden. Ah, Flex. Und dann können wir auch die Flex-Richtung hinzufügen. Wir werden mit dem Fluss gehen. Fügen wir die Flex Rap-Prophezeiung hinzu und wir nennen das auch unseren Rap. Und dann, weil sich der am wenigsten Stil erinnert, wollen wir nichts davon. Also werden wir einfach keins sagen. Und, ah, nun, hat keine Muster, die verfügbar sein könnten, sagte das. Null. Speichern wir den Kopf zurück in unserem Browser. Nun, zuerst von Seite und da gehst du. Okay, gut. Jetzt fängt es an, so Gestalt anzunehmen. Was wir jetzt tun müssen, natürlich, wäre natürlich,etwas Hintergrundfarbe für die Logos hinzuzufügen. Wir können auch eine mit Hinweis hier über setzen, dass wir vier Logos auf jeder Zeile haben, also sollten wir daran denken, welche, wie vielleicht 23% oder 24% gut, auch etwas Marge hinzufügen müssen. Sie können sehen, wir haben einige Grenze Videos auch in der Mischung. Also lasst uns voran gehen und diese hinzufügen. Lass uns zurück hierher gehen, damit ich eine neue Linie kreiere. Ich werde sagen, Klienten Dash Listen und dann l i Und jetzt lasst uns das geben die mit habe ich 24%. Lasst uns einen Spielraum machen. Ich habe eine, äh Prozent 00 und dann 1% von links. Lassen Sie uns die Hintergrundfarbe hinzufügen und ich werde mit einem RGB einen Wert hier gehen. Okay, also wird es schwer sein, ein 255 255255 und 1,8 zu sein. Okay, aber du hast nicht vergessen, dass wir einen Grenzradius haben. Haben Sie fünf Pixel? Und, natürlich, vergessen wir nicht die gute alte Box-Größe in. Ich kaufte eine Kiste und ach ja, lass uns reingehen und das speichern und sehen, wie es jetzt aussieht. Aktualisieren Sie die Seite und gehen Sie. Es ist also nicht so schlimm. Ich meine, wir haben die Logos, die ein ziemlich Licht zeigen, aber Sie können jetzt sehen, dass es nicht ganz das Gleiche ist. Die Einheimischen hier sind perfekt auf das Zentrum ausgerichtet. Das sind viele Muster rund um das Logo. Um dies zu erreichen, müssen Sie es auf die A-Steuer selbst nehmen. Denn denken Sie daran, es ist die eine Tack, die ich tatsächlich halten die Bilder. Die l A Steuer hält eine Steuer. Aber es ist die A-Steuer selbst, die die Bilder hält. Sie wollen auf die Bilder zielen. Es ist gut, Ziele auf die A-Steuer für Muster, Dinge wie diese. Also lass uns das so machen, als würde ich hier wieder reingehen. Und jetzt werde ich sagen, Klienten-Dash. Wenigstens ein Tag. Und das erste, was wir hier tun können, ist Legis Forcible Anzeige als In-Line-Block. Okay, und dann können wir jetzt ein Pad hinzufügen und wir gehen 20 Pixel rundum. Lassen Sie uns auch eine mit 100% geben. Ah, 100%. Vergessen wir nicht die gute alte Box Größe, aber ah, Box und ah, das ist es. Lassen Sie uns jetzt voran und speichern Sie dies und Sie sollten einige wichtige Verbesserungen sehen. Lassen Sie uns hierher kommen, aktualisieren Sie die Seite und sagen Sie, aus einer Dexter-Perspektive, die Bilder sehen perfekt aus. Sie sehen genauso gut aus wie das, was wir hier haben. jedoch Ich wolltejedochdas Gespräch darüber verschieben, bis wir zum Responsive-Abschnitt des Kurses gehen . Aber lasst uns das machen. Okay, lass uns, aber aus einer Erfahrung werde ich das Fenster hier minimieren. Und Sie können sehen, dass, wenn wir die Länge aus der mit aus unserem Browser minimieren, Sie können jetzt sehen, dass die Einheimischen schauen, um Kopf zu starten. jedoch Wenn wirjedochzu unserem sterblichen Anblick gehen, schauen Sie sich das an. Das sieht perfekt aus, oder? Also, wenn dieses Set auf einem Mobiltelefon angesehen wurde, ist es genau so, wie es aussehen würde. Aber Oz würde jetzt so aussehen. Das ist sehr, sehr schlimm. Also, was könnte hier passieren? Hier müssen wir nun die Bilder selbst anvisieren. Also wollte ich das später tun, aber lassen Sie uns das jetzt tun, um unsere Logos gut und reaktionsschnell aussehen zu lassen. Das erste, was Sie tun müssen , ist, die Überlaufeigenschaft für ein Taxi-Unternehmen jetzt hinzuzufügen, dass es Logos außerhalb der Grenze springen . Also lasst uns hier rüber kommen und einfach Überlauf sagen, und wir können das verbergen. Okay, gehen wir. Bitte speichern Sie das und lassen Sie uns hier rüber gehen und aktualisieren. Okay, gut. Jetzt können Sie sehen, dass die Logos nicht mehr außerhalb ihrer Grenzen gehen. jedoch zusammen mit dem Browser schrumpfen, Damit die Logosjedoch zusammen mit dem Browser schrumpfen,so dass, wie wir das mit des Bruders minimieren , die Bilder auch entsprechend schrumpfen müssen, müssen die Bilder maximal mit der Eigenschaft 100% auf die Bilder setzen sich selbst. Also lasst uns das so machen, als würde ich hier reingehen. Ich werde sagen, Clients Strichliste und ein Bild. Und jetzt geschieht hier die ansprechende Magie. Wir werden sagen, Max mit off 100% im Grunde waren sagen, einfach weiter schrumpfen das Fleisch wie Sie schrumpfen Die Breite der BHs sind auch schrumpfen das Bild als gut. Und dann, für ein gutes Maß, werde ich sagen, dieser Spielblock. Okay, gehen wir weiter und retten, dass der Kopf wieder hier drin ist. Bezieht sich auf Seite und oh, es funktioniert nicht. Was ist los? Oh, es tut mir leid. Ich habe Klienten falsch geschrieben. Oh, Mann, entschuldige dich. Aber ich verstehe so, wenn ich wirklich, wirklich aufgeregt bin. In Ordnung, also das ist die Client-Liste, die das gespeichert hat. Und zurück hier bezieht sich die Seite und da gehst du. Ehrfürchtig. Ehrfürchtig. Ehrfürchtig. Es sieht also nicht ganz so aus, wie wir hier drüben haben, weil das im Grunde zwei Spalten . Während wir hier noch vier Spalten haben. Das ist also etwas, mit dem wir viel später umgehen werden, wenn wir auf den responsiven Aspekt gekommen sind. Aber nicht, wie Sie sehen können, dass die Logos immer noch außerhalb ihrer Grenzen bleiben. Das liegt daran, dass wir in Mexiko 100% gesagt haben und wir sie auch als Blöcke anzeigen. Das ist also so ziemlich es für die Gestaltung des Kundenabschnitts mit den Logos. So Deutschland Vendex Video Bill wird nun voran gehen und beginnen, den Kontakt US-Formular hinzuzufügen. Dann sehe ich dich. 61. Das Kontaktformular erstellen: Willkommen zurück. Also sind wir fast da. Wir haben so ziemlich alle Hauptabschnitte erstellt. Aber nicht zuletzt haben wir den Kontakt oder Abschnitt. Und natürlich ist das sehr wichtig, denn als Unternehmen wollen Sie weg für potenzielle Kunden und Kunden, um Sie zu erreichen. Also werden wir uns diese Form aufbauen, die Sie gerade betrachten und Formen zu erstellen ist eine ganz neue Bestie, wenn es um externe geht, denn es gibt viel, ah, viel zu externen Formen. Also werde ich genau sagen, wie wir es ausbauen können. Und aus einer Designperspektive sollten Sie darüber nachdenken, Okay, wir könnten, wie ein Eltern-div einhalten. Vielleicht würde das Label in diesem Fall benannt werden, vielleicht hätte ein anderer Dave, der das eigentliche Feld selbst und solche Dinge hält . Aber darüber reden wir später. Lassen Sie mich Ihnen zeigen, was ich getan habe, die weit habe ich wirklich voran wie üblich, um den Abschnitt I D hinzuzufügen , die werden Kontakt Die guten alten Tage, natürlich, der Inhalt haben den Titel Abschnitt H zwei Tags Kontakt mit uns aufgenommen und Ich habe auch das Intro hinzugefügt Haben Sie etwas, um uns zu fragen. Weißt du, du willst oben nur Hallo sagen, dass ich eine Klasse von Eindringlingen gebe, die dort drin ein paar Segeln machen werden . Alles klar, jetzt wollen wir anfangen, das eigentliche Formular selbst zu bauen, um ein Formular mit HTML zu erstellen. Nun, wir fangen mit dem Tag selbst an, der Schaumstoff genannt wird. Ok. Jetzt hat das Formular selbst viele verschiedene Arten von Attributen, die Sie darauf anwenden können. Die erste, die ich hier bewerbe, wird aber die Methode genannt werden. Und der Wert dafür wird Post sein Jetzt gibt es zwei Arten von Algen haften können. Sie können entweder mit gehen, erhalten oder posten. Fügen Sie hier gleich zwei hinzu. In Ordnung, also kannst du entweder mit get oder post gehen. Ich werde die Erklärung dessen aussetzen, was diese beiden sind für eine Weile. Wir reden später darüber. Aber das ist, wo die meisten unerfahrenen Entwickler neigen dazu, wirklich durcheinander zu bringen. Sie gehen in der Regel mit bekommen im Gegensatz zu posten. Mach dir keine Sorgen. Ich werde genau erklären, was das ein bisschen später sind, aber lassen Sie uns nur eine schnelle Methode gleich Post, und dann werde ich ihm Klasse sehr einfach von einem Alphabetisierungs-Kontaktformular geben. Okay, in Ordnung. Das ist der erste Tag aus dem Weg. Wir haben das Formular erstellt. Nun fügen wir die Dev-Klasse off-Rolle hinzu. Denn wenn man sich die Website gerade jetzt anschaut, sind dies im Wesentlichen jene. Also sind wir die gefallen und mögen Dave in seiner Rolle. Also ein deviled halten Etikett und andere verschiedene halten das Impute Feld und so weiter. Also werden wir die Klasse von Ole verwenden. Okay, machen wir das. Hvo Und jetzt in diesem, Dave, lasst uns am ersten Tag, der das Label halten wird, damit sie Klasse gleich haben. Nennen wir diesen Lee Bill Call Liberal Kolumne, im Grunde, und jetzt sehen Sie sich das an. Wir erstellen jetzt Etiketten, also wird die 1. 1 hier das Label sein, und ich sage vier. Es ist im Grunde richtig. Jetzt sagen wir, OK, dieses Etikett ist für dieses besondere gefüllt. Also, um das richtig zu tun, füge ich gleich zwei hinzu und dann füge ich das i d für das Feld hinzu, das ein bisschen später hinzugefügt wird. Aber für jetzt ist es Kontakt Dash Name. Dies ist die Idee Migranten, die Sie für unseren Namen verwenden gefüllt. So beschriften Sie vier Kontaktnamen. Und jetzt tippe ich einen Namen ein. Fügen wir einen Doppelpunkt hinzu und schließen wir die Beschriftung. Okay, lassen Sie uns auch den Tag schließen. Ehrfürchtig. Lassen Sie uns nun einen weiteren Tag für das eigentliche Eingabefeld selbst erstellen. Also sieh dir das an. Ich werde sagen, div class gleich und wir können dieses Feld niederländische Kohle nennen. Okay, jetzt überprüfen Sie das anstelle von Etikett. Es wird jetzt zugeschrieben werden. Und jetzt ist die i. D. Was ist die Identifikation für dieses Besondere gefüllt ist der Name, richtig? Es wird also gleich sein, Dash Name zu kontaktieren. Stellen Sie immer sicher, dass der volle Wert der Beschriftung und die Eingabe i d Werte gleich sind. Also haben wir den Namen des Kontakts. Kontaktieren Sie ihn hier unten. Nun, wenn es um die anderen Attribute für die Eingabe geht, gibt es viele, viele, viele von ihnen. Sie sind wahrscheinlich zwischen 15 und 20 von ihnen. Offensichtlich kann ich nicht jeden von ihnen abdecken, also zeige ich dir einfach das Wichtigste und das beliebteste. Eigentlich ist es für den Treibstoff. Also die 1. 1 hier haben wir das Ideal hinzugefügt. Es ist in einer Klasse, damit wir etwas stehen können. Okay, also wird diese Klasse durchgängig verwendet. Lassen Sie uns ihm Feld geben. Okay, jetzt, Ruhe ist Typ gleich Text. Dies zeigt im Grunde, oder es zeigt den Typ aus gefüllt. Das ist Erwarten wir einfachen Text? Erwarten wir eine E-Mail? Erwarten wir Zahlen? Dinge wie das. Das ist also sehr, sehr wichtig. Und ich werde es dir etwas später zeigen. Warum? Es ist äußerst wichtig. So geben Sie gleich Text. Und jetzt lassen Sie uns die Polizei halten. Also bitte halten Sie sich aus und wir können gleich sagen. Und dann in Mänteln. Sagen wir deinen Namen, okay? Und nicht zuletzt wollen wir dieses Feld erforderlich machen. Sie werden nie einen Kontakt aus dem Internet finden, wo die Angabe Ihres Namens nicht erforderlich ist . Es wird immer die meiste Zeit benötigt, zumindest. Also, um das zu tun, werde ich einfach wieder leise aufnehmen. Das ist alles, was wir hinzufügen müssen, erforderlich. Ok. Oh, einige. Gehen wir jetzt weiter und schließen Sie das einfach, Dev. Und dann werde ich auch den Dev für die Abstimmung schließen. Schließen wir das. Ok? Und vergessen wir nicht, das Formular auch zu schließen, und da gehst du. In Ordnung? Lassen Sie uns jetzt voran und speichern Sie dies aber voran, zurück zum Browser. Und mal sehen, was wir haben bezieht sich auf Seite und da gehst du. In Ordnung, also haben wir den ersten Labelnamen und dann das Feld. Dein Name. Also, was ich jetzt tun werde, ist, wie immer, ich werde das Video pausieren und die restlichen Felder und Etiketten auf Autismus hinzufügen. Sobald ich fertig bin, bin, komm zurück. Und, wie Sie jetzt sehen können, haben die restlichen Füllungen hinzugefügt. Also haben wir die gefüllt für die Kontakt-E-Mail haben wir für den Titel aus der Nachricht. Und dann hier unten, wir haben auch den Textbereich sie. Die Nachricht. Lindell geht los, spart das und lasst uns sehen, wie es jetzt aussieht. Lassen Sie uns auffrischen. Und da gehst du. So sieht es jetzt im Grunde aus. Also lass mich dich durch den ganzen Code führen. Ich fügte hinzu. Es ist ziemlich genau das gleiche wie mit dem Namensfeld. Also haben wir noch einen Tiefpunkt hier drin. Wir haben den Kontakt, E-Mail, die Klasse des Feldes, die Idee der Kontakt-E-Mail, diese Art hier, bitte. Pip. Aufmerksamkeit auf die Eingabe hier wurde auf E-Mail eingestellt. Dies ist sehr wichtig, weil überprüfen Sie diesen Befürworter. Wenn ich hier und da wieder rein gehe, sagen wir, ich versuche hier einen Unsinn zu füllen und ich traf. Übermitteln. Siehst du, Moment bleibt es. Die Polizei enthält ein at Symbol in der E-Mail-Adresse. Das ist, weil wir hier angegeben haben, dass der Typ sitzt E-Mail, wenn ich hier kam jetzt und ich ändere dies in Text statt, ich speichere. Ich gehe wieder hier rein. Lassen Sie uns einfach die Seite aktualisieren. Also komm ich hier runter klebe wieder etwas Unsinn auf. Jetzt, wenn ich auf Submit klicke, wird es im Grunde eingereicht. Sie können sagen, dass wir keine Nachricht bekommen haben, dass sie hier sind. Sie wissen, dass es ein Problem mit Ihrem E-Mail-Gefühl gibt. Bitte fügen Sie das at -Symbol hinzu. Das liegt daran, dass CSS oder jedes Team von anderen zu diesem Zeitpunkt keine E-Mail-Art von unterstellten, einfach erwarteten Texten. Das ist also, was sehr wichtig ist, wenn Sie Ihre E-Mail-Felder beenden und gezeigt haben, dass es hier auf E-Mail eingestellt ist, so dass es Silizium sehr kämpfen, dass in der Tat die Person eine E-Mail-Adresse im Feld hinzugefügt hat in Ordnung also unten Sie war es viel genau das Gleiche wie auch hier drüben für den Kontakttitel, den Typ, den ich leer gehalten habe. Da ein Titel Zahlen enthalten kann, kann er auch Text enthalten. Daher ist es normalerweise am besten, dieses Feld leer zu lassen und dort nichts hinzuzufügen. jedoch Beachten Siejedocheinen großen Unterschied für die Nachricht für den Textbereich, den wir nicht impute verwendet haben. Stattdessen haben wir Text Avia verwendet, also ist dies eine andere Art von Gefühl, die sie mit jedem Tempel erzeugen können. Formen sind viele von ihnen. Also, wenn Sie versuchen, Ihren Nachrichtenbereich zu erstellen, immer verwendeten Textbereich und dann hier drüben bemerken, sagte ich, dass das gleich fünf ist. Dies zeigt im Grunde an, wie hoch das Feld das Vakuum es jetzt sein wird, und ich ändere fünf auf, sagen wir, 10 zum Beispiel. Jetzt wird es viel größer machen. Also schau dir jetzt die Größe an. Wenn ich jetzt aktualisiere, siehst du es viel größer. Aber das ist nicht oft, Sir, denn Sie können immer einfach klicken und ziehen. Ah, mit der Maus hier drin, damit du nur fünf dort leben könntest. Du musst nicht wirklich größer als das sein, und das ist es so ziemlich. Jetzt hier unten haben wir eine spezielle Eingabeklasse für den Submit-Button, und wenn Sie genau darauf achten, haben Sie tatsächlich mit den Klassen für Button und Grün hinzuzufügen. Denken Sie daran, dass für die gleichen Klassen verwendet wurden, um die untere rechte erscheinen für die get in Fackel Stil . Es ist also im Grunde genau der gleiche Stil. Und deshalb habe ich einfach unseren Knopf und Grün dafür hinzugefügt. Und natürlich wurde uns ein Stück hinterlassen. Ein Hengst hier drin. Gehen wir einfach wieder rein. Und, ähm, das ist es so ziemlich. Also wurde der Typ hier so eingestellt, dass er eine Swell einreicht. Deswegen hast du das Fleisch, Tex India Showing. Und das ist so ziemlich es für die Konstruktion des HTML-Formulars. So Deutsch Avonex sehr gut wird nicht weiter gehen und beginnen, das Kontaktformular zu stylen 62. Das Kontaktformular Teil 1: Willkommen zurück im vorherigen Video ist erfolgreich die Felder für unser Kontaktformular erstellt . Aber jetzt müssen wir etwas Getreide Stil machen. Nun, bevor wir in ihrer Mitteilung hier drüben springen, dass ich als den eigentlichen Text senden und nicht hier drüben einreichen. So handschuh ist der Standardwert, den Sie aber edel immer haben. jedoch den Text ändern möchten, Wenn Siejedoch den Text ändern möchten,alles, was Sie eingeführt haben, um hier zurück zu gehen, wo Sie den klassischen ALS-Button grün und dann Arten von Fleisch haben oder Sie hier tun könnten, ist einfach etwas, das als Wert Fall gegen Verwendung bekannt ist Wert gleich und dann einfach in Großbuchstaben es als senden Speichern Sie dies, Lassen Sie uns zurück in. Hier bezieht sich die Seite und da gehst du. Also, jetzt wird es gesendet. So können Sie den Text für Ihre Schaltfläche anpassen. Okay, werfen wir einen Blick auf dieses Styling, das wir tun müssen. Und hier drüben jetzt können Sie sehen, dass es eine Art von wie ein Maximum mit für das Kontaktformular zu geben scheint. Alles ist auch in der Mitte ausgerichtet. Also lass uns das machen, ich werde zwei Klammern zurückwerfen. , Denken Sie daran, wir haben die Formular-Klasse außerhalb des Kontaktformulars gegeben. Also lasst uns das machen. Ich werde weitermachen, Text schnappen und hier runterkommen, das einfügen und wir wechseln einfach Kunden, um Kontakt zu kontaktieren. Und so lasst uns knacken. Die Klasse wird Form sein. Es tut mir leid. Kontakt. Niederländische Form. Öffnen wir unsere Kollegen Zahnspangen. Also werden wir ein Maximum zur Verfügung stellen, und das macht es wird 680 sein. Pixel werden ebenfalls angewendet. Also Marge zu versuchen, es in die Mitte zu bekommen, so dass sie gehen können. Das ist ein Teddypixel vom oberen Auto. Dies wird nun den ehemaligen Helfer in der Mitte zentralisieren. Und lassen Sie uns im März 20 Pixel für den unteren und, wie immer, Buchgröße hinzufügen. Ich gehe mit unseren Grenzböcken. Okay, gehen wir jetzt weiter und lassen Sie uns das retten. Gehen wir zurück zu ihm. Aber ich war ah. Bezieht sich auf die Seite. Und da gehst du. Ok. In Ordnung. Wir kommen dorthin. Also jetzt ist es irgendwie wie ein Löwe anderes Zentrum aufgebrochen, aber wir müssen die Felder dehnen, sie ein bisschen länger machen und auch eine Menge Muster hinzufügen. Also mit der Struktur jetzt, im Grunde mit einer Klasse aus dem liberalen Bindestrich, rufen und füllen Sie Strichkohle, werden sie viele genau die gleichen Eigenschaften und exakt die gleichen Werte haben. Also lasst uns das machen. Ok? Ich werde hier eine neue Deklaration erstellen. Also lassen Sie uns dieses Punktlabel Strich Kohle nennen und dann Komma, damit wir dann die andere hinzufügen können, die Feld-Strich Kohle ist. Öffnen wir unsere Kollegen Zahnspangen. Also das erste, was ich hier machen werde, ist das. Lassen Sie uns einige Ränder hinzufügen. Nein, es also habe ich 1% Null und dann 1% und dann noch ein 1%. Okay, lassen Sie uns auch ein Muster hinzufügen. Also habe ich fünf Pixel ringsum. Ich denke, das sollte gut sein. Lass uns gehen. Einige Bücher Größe in der Rahmenbox und weniger, aber nicht Listen waren dabei, einige Floating zu machen, also lassen Sie uns sie nach links schweben. Okay, aber jetzt ist es, wo die Dinge interessant werden, wissen Sie, wissen Sie, um sie auf der gleichen Linie zu haben, müssen sie mits für sie setzen. Und natürlich natürlich fangen wir mit dem Etiketten-Strick an. Cool. Jetzt sind die Etiketten selbst nicht so lang? Mal sehen. Die Etiketten hier können alsoetwa also 25% betragen. Vielleicht, und dann fühlt sich das eigentliche, sagen wir mal, 70% oder so etwas. Also lasst uns wieder hier reingehen, so eben. Aber Kohle wird ein mit aus haben. Gehen wir 25%. Okay, während Lay Bill, es tut mir leid, nicht Etikett, aber Feld. Dash Coal wird jetzt ein mit wir gehen nicht mit Center 5% gehen, weil wir etwas Platz wollen . Also gehen wir mit, sagen wir mal, 72% statt. Ok? Und, ah, lassen Sie uns das retten und sehen, wie das aussehen wird, als ob wir hier wieder rein gehen . Waren zuerst eine Seite und da gehst du. Ok. Okay, gut. Nun können Sie es jetzt auf der gleichen Linie sehen, weil wir ihnen gesetzt mit gegeben haben, und wir haben sie auch nach links geschoben. Okay, nun gehen wir voran und beginnen, die tatsächlichen Etiketten selbst und auch das Feld zu entwerfen. Also, was ich hier habe, ist mal sehen, dass das irgendwie groß ist. Werfen wir einen Blick auf das, was wir haben. Es ist ein bisschen großes Frontgewicht von vielleicht 300 Farbe und dann bemerkte etwas sehr, sehr Interessantes, wenn wir schweben Maus auf dem Etikett. Siehst du, wie es sich jetzt zur Hand dreht, mit dem Finger nach oben zeigt, aber genug, um so etwas zu tun? Denn gerade jetzt, wie es ist, kriegen wir das nicht. Also werde ich Ihnen eine neue Art von Eigentum vorstellen. Also lasst uns das machen. Ich werde hier wieder rein gehen. Also lasst uns zuerst das Etikett selbst anvisieren. Ok? Das Label-Tag. Also sieh dir das an. Ich werde eine geformte Größe hinzufügen. Ich werde mit 18 Pixeln gehen. Ein Frontgewicht von 300. Ah, lassen Sie uns eine Farbe von 555555 hinzufügen Und jetzt, werfen Sie einen Blick auf diese Eigenschaft namens Cursor. Okay, Dies ist, wie wir ändern können Das Symbol von erscheint, wenn wir auf das eigentliche Label selbst schweben. Also wird der Wert hier Zeiger sein. Alles klar, das ist die Lautstärke am Tag. Also lasst uns weitermachen. Speichern Sie das und lassen Sie uns sehen, lassen Sie uns aktualisieren. Und jetzt kann ich, weißt du. Wenn wir nun auf dem Etikett schweben, ändert sich das Symbol vom Pfeil zur Hand. Genau so können Sie die entscheidende Eigenschaft und den Wert Off-Punkt verwenden. Okay, das war's also für das Etikett. Schauen wir uns an, fühlt sich so an. Ja, die Treibstoffe haben. Mal sehen. Ah, irgendwie wie vielleicht eine Telefongröße, die etwas drinnen tippt. Okay, wenn eine Größe culo mit uns, na ja, wir müssen uns begleichen mit, Nehmen wir an, ein 100% hinzufügen wie ein Grenzradius. Fügen Sie auch einige Ränder hinzu. Okay, lass uns das machen. Ich gehe zurück hierher und lass uns einen Blick darauf werfen, was wir tun werden. Fügen wir die Feldklasse hinzu, denn denken Sie daran, wir verwenden die Klasse aus Feld für alle unterstellten und C-Klassenfelder hier, Feld gefüllt und so weiter. Also gehen wir zurück hierher. Gehen wir zurück zu Minden CSS. Und lasst uns das machen. Okay, das erste, was wir tun werden, wäre, eine Telefongröße hinzuzufügen und für die lustige Größe, die ich mit gehen werde , sagen wir, 17 Pixel statt. Die gleiche Farbe. Bleiben wir bei der 555555 Wir werden hier Padding von 10 Pixeln und 12 Pixeln hinzufügen , und wir haben einen Rahmen und der Körper wird ein Pixel sein, wird solide sein. Und dann wird der Anrufer de de de de de de de de ha sechziger Jahre sein. Wir haben einen Grenzradius von drei Pixeln. Und vergessen wir nicht die gute alte Büchergröße, in der Borderbox sein wird. Okay, ich möchte zuerst einen Blick werfen und sehen, was wir haben. Lasst uns das retten. Lasst uns hier wieder rein gehen. Waren frisch und OK, so im Moment können Sie sehen, dass die Felder immer noch nicht voll mit so sehr einfach nur mit off 100% hinzufügen. Also dieses Recht, das sollte den Trick tun. Lass uns weitermachen und diesen Jungen hier wieder retten. Aktualisieren. Und da gehst du. Also in anderen Bereichen gehen voll mit genial. Nun lassen Sie uns einfach stylen, dass der Platzhalter direkt hier sein,wissen Sie, Frontgewicht von 300 hat wissen Sie, . Es ist n talischen Stil und die Farbe sieht aus wie ein c C c. Also lasst uns das einfach sehr, sehr schnell machen , da Kopf wieder hier rein werden wir tun, es ist nur sehr einfach... Feld tippen. Okay, aber jetzt werde ich das Pseudo-Element wieder hinzufügen. Und dieses Mal wird es jetzt Platzhalter sein. So können wir den Platzhalter in unseren Gefühlen einnehmen. Öffnen Sie dann die Farbspangen und fügen Sie einfach die vordere Welle von 300 hinzu. Die Farbe hier wird si, si, si, si, si, si, si, si. Und weniger banal ist, dass wir den Fondsstil auf kursiv gesetzt haben. Okay, sicher. Lasst uns zuerst eine Seite hier reingehen. Und da gehst du. Ehrfürchtig. So deutsche Avonex Video Kaution wird nun auch weiterhin stilisiert und in der Tat, stilisiert im Kontaktformular. Dann sehe ich dich. 63. Styilng: Willkommen Rücken. Lassen Sie uns Stil in unserem Kontaktformular beenden, müssen wir einige Änderungen an der Sende-Taste machen, weil hier bemerken, dass es, wie, eine schöne Grenze Radios, aber auch und wir hoffen, dass über sie bemerken, dass die Tasche auf Calo Art von Veränderungen in der Umgebung . Wir haben, wie, ein Bock Schatten an der Butter gefärbt ändert sich auch immer so leicht. Lassen Sie uns also einige Änderungen an der Sende-Taste vornehmen. Und natürlich muss der Intra-Text auch Stilverbündete sein. Also lasst uns das machen. Wir gehen jetzt wieder rein. Hier drüben, noch zwei Stile, der Knopf für unser Formular. Ich werde eine einzigartige Klasse hinzufügen. In Ordnung, also werde ich jetzt kommentieren und wo wir biblisch als untergrünes haben. Ich werde Submit als zusätzliche Klasse hinzufügen, um es von den anderen Schaltflächen zu trennen. Okay, also lasst uns das retten. Gehen wir jetzt wieder hier rein und fangen wir an, die Knöpfe zu stylen. Also werde ich mit Knopf gehen, nicht einreichen. Lasst uns aufmachen. Gute alte Kohli Hosenträger und ich habe mit mir hier mit Sets zu Auto, wir haben Margen, dass Null als auch. Und wir werden auch den Cursor hinzufügen. Wir werden es schaffen, Zeiger. Ok? Und dann ein Grenzkühler. Und ich habe mich mit Bada Koloa hier entwickelt, setzt auf sieben b neun und dann ein 00 und das ist es. Okay, lassen Sie uns auch schnell die Hover-Effekte machen. Also Taste, die einreichen. Und jetzt, wenn wir darauf schweben, lassen Sie uns einige Änderungen vornehmen. Kommen wir rein und wir werden uns ändern. Zunächst einmal die Grenze Coehlo. Okay, eigentlich, raten Sie was? Wir werden mit der gleichen Farbe bleiben, aber einen Übergang anwenden. Also bleiben wir bei der Barnacle von sieben B A 900 Ok, Bücher, Bücher, Shadow. Wir werden das zu keiner sagen. Also keine Bücher Schatten dafür. Und dann werden wir hier die eigentliche Änderung vornehmen. Hintergrundfarbe. Wir werden den Hintergrund ändern. Coehlo zu einem D. D 247 Okay, in Ordnung, Ordnung, lasst uns voran gehen und das retten. Und lassen Sie uns einfach die neuen Effekte in Aktion sehen. Lassen Sie uns aktualisieren und OK, damit Sie genau dort sehen können, dass, wenn wir schweben, es eine Änderung vornimmt. jedoch, Beachten Siejedoch, natürlich, der Übergang Dies ist viel glatter, als wir derzeit hier drin haben. Das ist nur ein Augenblick. Also lassen Sie uns Übergang hinzufügen. Okay, ich werde den Übergang direkt in die Submit-Klasse spielen. Also hier drin wird nur sagen Übergang. Ich habe den Übergang zur Hintergrundfarbe gemacht, und es wird 0,2 Sekunden dauern und wir werden es einfach erleichtern. Okay, gehen wir weiter. Speichern Sie das. Lasst uns hier wieder rein gehen. Bezieht sich auf Seite und da gehst du. Das ist viel besser als das, was wir ursprünglich hatten. Ok. In Ordnung. Das letzte Mal, wenn Sie jetzt tun, wäre nur, den Intro-Text zu stylen. Also lasst uns das machen. Ich werde hier wieder rein gehen. Lassen Sie uns den ganzen Weg nach oben gehen, weil es AP-Klasse davon genau hier unten ist. Wir können das P-Pot-Intro machen. Lassen Sie uns unsere Kollegen Hosenträger öffnen und OK, also Telefongröße. Ich hatte eine lustige Größe von 19 Pixel genau hier, habe ein Frontgewicht. 0 500 und dann eine Farbe von 777777 Und eine Aufzählungs-Text-Ausrichtung ist auch in der Mitte. Und nicht zuletzt haben wir die Margen. Lassen Sie uns ein Spiel Einige Ränder und ein so habe ich 35 Pixel, 14 Pixel und dann 14 Pixel. Okay, lassen Sie uns das retten. Lasst uns hier wieder rein gehen. Lassen Sie uns die Seite aktualisieren. Und da gehst du. Ehrfürchtig. Ehrfürchtig. Ehrfürchtig. Also, das ist so ziemlich wir Styling der Kontakt aus Formular jetzt in der Schließung, wir haben noch nicht das Formular tatsächlich aktiv gemacht, weil gerade jetzt, wie es ist, wenn jemand hier kommt und füllt das Formular und den Treffer senden, nichts passieren wird. Damit wir den ersteren tatsächlich aktiv machen können, damit wir den Inhalt des ersteren per E-Mail erhalten , müssen wir einen zusätzlichen Code hinzufügen. Aber das wird P. H. P-Code wird einen Blick darauf werfen, dass ein bisschen später und die Kosten für die Sorge. Das habe ich nicht vergessen. Ich habe auch erwähnt, dass wir die beiden Arten von Formularmethoden post und get haben. Darüber reden wir auch ein bisschen später. Aber ich möchte diese Gelegenheit auch nutzen, um Sie einzuladen, einen Blick auf die HTML-Formulare Tutorials an öffentlichen Schulen zu werfen, damit Sie mehr über die Auftragsarten aus unseren Feldern leihen können . Als Beispiel haben wir nur einen Blick auf das E-Mail-Feld, das Textfeld, einen Text, der jemals ausgefüllt wurde. Aber Sie haben auch Zugang zu, wie das Radio gefüllt, zum Beispiel, wo die Person muss wählen zwischen. Das müsste eigentlich nur eine Option aus einer Reihe von verschiedenen Optionen wählen. Also, zum Beispiel, hier drin, wissen Sie, was für ein Geschlecht Sie sind? Müller-Weibchen. Du kannst dafür Video Putins benutzen. Sie haben Zugriff auf zwei andere Typen von Attributen, über die wir ein wenig später sprechen werden, vor allem Aktion. Wir werden viel später nach oben gehen, aber hier unten, wo Sie HTML-Formularelemente haben, wie ich sagte, haben wir das Eingabeelement, das select-Element verwendet . Aber Sie haben auch Zugriff auf mehrere Auswahlen sowie Text jeder, über die wir gesprochen haben. Sie haben Zugriff auf die Tastenelemente, die wir verwendet haben, aber in Ihrem sind Kraftstoff, Legendendatenliste Einige von ihnen müssen Sie möglicherweise nicht als solche verwenden, aber es ist immer noch eine gute Idee, sich mit all diesen verschiedenen Arten vertraut zu machen Zuweisungsarten. Also ja, das Bild, das Sie Passwort haben, suchen, und so weiter und so weiter, damit ich Ihnen garantieren kann, dass, egal wie kompliziert es von Ihrem Versuch zu erstellen, Sie die notwendige Frechheit finden und Attribute und Elemente mit HTML. Also werde ich Sie einladen wollen. Sie werden etwas Zeit verbringen und sich nur mit der Familie aufziehen. Es ist mehr von diesen verfügbaren Impute Typen sowie Elementen. Das war's also. Wir haben so ziemlich fertig die oder die gesamte Website. Es bleibt nur das Essen, das wir schaffen müssen. Also machen wir das im nächsten Video. Dann sehen wir uns. 64. Den Fußer erstellen: Willkommen zurück und wir sind zum letzten Abschnitt gekommen. Wir müssen die FOTA für die Website ausbauen. Schauen wir uns an, was wir haben. Wir haben, was aussieht wie zwei verschiedene Menüs. Die eine auf der linken Seite hat Links zwei andere Seiten oder externe Seiten und dann die eine auf die weiße hat die Social-Media-Symbole. Und dann unten haben wir alle Rechte vorbehalten Text. Okay, also lasst uns gehen und anfangen, die Struktur auszubauen. Ich habe das Fuß-Tag bereits hinzugefügt. Also auf die gleiche Weise, dass Sie den Kopf ein Tag den ganzen Weg hier oben für Ihren Kopf nach oben verwenden würden. Sie würden auch Fußzeile für den Fußabschnitt verwenden, die Klasse des Inhalts abwenden und dann auch breit. Denken Sie daran, wir haben eine Klasse von Weiß auch in unserer Kopfzeile für das Logo und für das Hauptmenü verwendet. Also habe ich genau die gleiche Klasse hier angewendet, nur um den Kontinent ein bisschen breiter als der Westen von unserer Seite zu machen . Also lasst uns das machen. Ich werde den allerersten Dave hier hinzufügen, was die Klasse aus der Rolle OK sein würde, und jetzt machen wir das. Okay. Ich werde AIDS die allererste Klasse schaffen, und das wird für die U L sein. Bis jetzt erzwungene Liste wird ul Klasse gleich sein. Nennen wir das den Fuß. Unsere Speisekarte. Okay. Und jetzt fügen wir das erste l i hinzu und dann im Inneren werden wir ein Tag hinzufügen, das acht Riff gleich ist, damit wir keine Links haben . Persists wird nur den Hashtag zu einem Ort verwendet, der und dann werden wir auch die Ziele hinzugefügt. Attribute sind gleich und dann wird es, natürlich Ah, leer sein. Und dann lassen Sie uns jetzt gehen und blawg auf den Text hinzufügen. Okay, also gehen wir weiter. Schließen Sie das a -Tag. Schließen wir auch das Verbündet-Tag. Und ah, da gehst du. Nicht offenbarte duL auch. Also lass uns mal sehen. Wie sieht es aus? Lasst uns sicher sein. Hoppla. Aber sparen Kopf Doktor Broza bezieht sich auf Seite Hoffnung. Entschuldigung. Eine falsche Website. Ist das hier. Okay, aktualisieren Sie die Seite. Lass uns hier runter gehen und da gehst du. Okay. So haben wir jetzt gebloggt erscheinen gut. Wir können immer noch viele Stelling tun, was wir tun werden, aber dann lassen Sie uns auch den ersten Listeneintrag für unsere sozialen erstellen, viele auf der rechten Seite. Was Facebook sein wird. Okay, also geh wieder rein und lass uns das richtig machen. Lendl schnappt sich alles hier drin. Lassen Sie uns das kopieren. Und dann werde ich den ganzen Weg hierher kommen. Tempo, liefern Sie wieder. Sofort. Jetzt werde ich den Fuß ein Menü ändern. Also gehen wir mit dem sozialen Menü, okay? Und jetzt hier drin, genau das Gleiche. Aber ich werde mich ändern. Ich werde hier ein zusätzliches Attribut hinzufügen, und das wird die Titelattribute sein. Der Titel hier wird gleich Facebook sein. Okay? Und wir werden hier keine SMS haben. Schließen wir das einfach so, wie es ist. Keine Sorge. Sie werden sehen, was ich später tun werde. Also lassen Sie uns Ihre Klasse l eine Lüge sehen. Sie haben sie und äh Okay, lassen Sie uns einfach den letzten Tag hier für die Rolle schließen. Lasst uns retten. Lasst uns hier wieder rein gehen. Wer zuerst die Seite Und OK, ich weiß, dass Sie die Facebook sehen können, aber wir werden ein Bild verwenden, um den Link darzustellen. Also, was ich jetzt tun werde, ist, dass ich das Video pausieren werde, und ich werde die restlichen Listeneinträge für das Food Thai Menü und auch für das soziale Menü hinzufügen . Willkommen zurück. Und wie Sie jetzt sehen können, habe ich die verbleibenden Listenversuche für das Fuß-A-Menü hinzugefügt. Wir haben Veranstaltungen Karriere, als ob beschuldigte Richtlinien und dann für das soziale Menü haben auch für Twitter hinzugefügt , LinkedIn und dribble. Okay, gehen wir weiter. Speichern Sie das. Lasst uns hier wieder rein gehen. Nun, zuerst die Seite und das Hey, dann gehst du. Ehrfürchtig. Okay, Last but not least, wir haben die 2020 wird Auswirkungen sein, alle Rechte vorbehalten. Und wir haben auch das Copyright-Symbol da unten. Also lassen Sie uns das hinzufügen. Also werde ich das einfach tun. Mal sehen. Also genau hier rein nach dem U l. Ich komme hier rein und füge einfach ein Absatz-Tag hinzu und dann für dieses Symbol für das Urheberrecht Urheberrechtist das einfach da. Also wird es Kopien Semikolon sein. Das wird also das Copyright-Symbol für uns anzeigen, und dann sage ich 2020 Web Impact Punkt und dann gibt es nur die Eingabe aller Rechte vorbehalten , und ich denke, das war's. Okay, gehen wir weiter. Rette diesen Kopf wieder hier drin. Aktualisieren Sie die Seite. Und da gehst du. Ehrfürchtig. Also, Deutschland Rednecks Video Web wird nicht beginnen, unser Essen zu stylen. 65. So gestaltest du die Fußzeile: gut, Comebacks und Menschen Video erfolgreich erstellt oder Fußzeile. Aber jetzt ist es an der Zeit, ein ernsthaftes Design zu machen, und das ist das Endziel genau hier. Mal sehen, was wir tun müssen. Wir müssen eine Hintergrundfarbe für den Fuß nach oben hinzufügen. Wir müssen einen Weg finden, wie wir das erste Menü nach links und dann das zweite nach rechts schweben können . Und es bemerkt auch, dass das Menü Elemente die Textelemente. Der Text hier ist alle Feststelltaste. Sie haben keine Liste mit Stil, dass sie nicht die Eingeweide oder die Kreise um sie herum haben . Das sind Dinge, die wir tun müssen, aber das war nicht Absicht. Gehen wir zurück zu Klammern und lassen Sie uns zu einem Haupt gehen, dass CIA sagt, ich werde einen neuen Abschnitt wie üblich für die Fußzeile erstellen. Gehen wir weiter und fügen Sie das ein und dann ändere ich Kontakt zwei Fußzeile. Also lassen Sie uns unsere Tasche auf Farbe hinzufügen und wir gehen, um die Fußmarke zu zielen, weil dies der Haupt-Tag ist , halten alle Elemente in unserem Essen. Also lassen Sie uns zurück zu Männern, die sagen, Emigranten bewerten, um in Fußzeile zu tippen und jetzt gehen wir voran und fügen die allererste Gelegenheit wird die Hintergrundfarbe sein. Und ich weiß, dass der Wert hier vier für 44 für vier sein wird und dann haben wir auch einen Kragen für unseren Text , der ein sein wird und dann ein Lassen Sie mich das Hash-Tag hinzufügen. Okay, eine Sache, die wir noch hinzufügen werden, wird die lustige Größe sein. So ist die sehr lustige Größe aus für 10 Pixel. Okay, gehen wir weiter und retten das. Und schauen wir uns einfach an, was wir haben, und sehen, was getan wurde. Okay, also haben wir die Hintergrundfarbe da drin Jetzt lassen Sie uns versuchen und entwerfen die tatsächlichen kleinsten Elemente selbst. Muss die Textdekoration entfernen, Entfernen Sie die Liste. Ich werde die Farbe als auch ändern, um die Angriffe selbst in Großbuchstaben zu verwandeln, genau wie wir hier drüben haben. Außerdem müssen Sie einen Hover-Effekt Hinweis hinzufügen. Wenn wir den Mauszeiger auf die Listenelemente zeigen, wird die Farbe blau und dann haben wir auch eine auf der Linie. Also lassen Sie uns den Kopf zurück zu maine Punkt c Beurteilen Sie Now über hier Index dot html eine Klasse aus Fuß unseres Menüs hinzugefügt werden . Also werden wir diesen Cluster verwenden, um die Verbündeten Elemente sowie die r A r Elemente selbst zu erhalten. Also gehen wir zurück nach Maine. Werde sehen beurteilen Und dann genau hier werde ich Essen Dash Menü sagen. Ah, OK, also das erste von einem guten hier ist, dass wir alle den geringsten Stil entfernen und wir werden einfach keine sagen. Wir wollen keinen Listenstil in, und dann werden wir es nach links schweben, Okay, weil es auf der linken Seite ist, während die Social-Media-Symbole auf der rechten Seite sind. Und dann lassen Sie uns einen Rand von 15 Pixel für seine offene Unterseite und Null für links und rechts hinzufügen. Und dann sagte Padden Bull dies einfach auf Null. Okay, nun lasst uns schnell voran gehen und auch die Verbündeten Elemente selbst anvisieren. So Fuß ein Dash-Menü l Ich werde auch haben, um sie zu schweben. Haben sie auch weggegangen. So sagten sie, dass sie in der Reihe sein können und dann Bestellungen mit einer gewissen Marge auf. Ich habe fünf Pixel sowie acht Pixel. Okay, lassen Sie uns das retten. Und mal sehen, wie das aussehen wird. Lass uns hier rüber gehen. Aktualisieren Sie die Seite. Und da gehst du. Okay, also kommen wir dorthin. Also jetzt müssen wir nur die tatsächliche A-Steuer selbst anvisieren, bereit, den Text in der Zeile zu entfernen, sie in Großbuchstaben umzuwandeln und so weiter. Also gehen wir zurück hierher, und wir machen das einfach. Ich werde Fußzeile sagen, Strichmenü. Und jetzt ein Also hier werden wir ein ernsthaftes Design machen. Also zuerst wird hier zuerst die Texttransformation sein, die in Großbuchstaben sein wird. Oh, richtig. Wir haben ein Halsband sowie eine und dann Textdekoration. Das wäre so eine Nonne. Wir brauchen überhaupt keine Takes Dekoration. Und, ah, retten wir diesen Kopf zurück. Lassen Sie mich die Seite aktualisieren. Und OK, also sind wir fast da, sie sind weniger als zwei Minuten. Jetzt tun ist, wie die Hover-Effekte hinzuzufügen. Weißt du, das hier drüben haben wir so schöne Überwirkung. Das ist auch ein Übergang im Gange. Also lasst uns zuerst das tun. Okay, ich gehe zurück hierher. Menü mit zwei Fußzeilen. Lassen Sie uns einen Rand unten hinzufügen. In Ordnung? Es wird zwei Pixel solide sein. Aber dann ist es gut, transparent zu sein. Ok? Und jetzt fügen wir den Übergangseffekt hinzu. Es ist ein Übergang. Wir werden den Anrufer wechseln. Denken Sie daran, indem Sie die Farbe wie ein blauer Gelehrter ändern, also machen wir 0,2 Sekunden und wir werden es erleichtern. Es wird die Wirkung geben. Aber jetzt auch die Randfarbe selbst. Das hat die Butter Coehlo verändert. Und das wird auch 0,2 Sekunden sein und dann auch erleichtern. Okay, jetzt gehen wir weiter und fügen die tatsächlichen Hover-Effekte hinzu. Es wird Fußzeile, Bindestrich, Bindestrich, Menü A und dann auf Hover geben. Lassen Sie uns jetzt unsere Effekte hinzufügen. Also wird die 1. 1 hier ändern wird die Farbe sein, die tatsächliche Farbe aus dem Text, und das wird voll Null b sieben f f und dann jetzt der Grenzaufruf sein. Oh, das werden wir uns ändern. Und das wird auch 40 b sieben f f f Lassen Sie uns jetzt voran, speichern Sie diesen Kopf zurück zu unseren Sprengen, Professor Page und dass Sie gehen. Also, da gehst du. Jetzt haben wir den Hover-Effekt, wenn wir den Mauszeiger auf unsere Listenelemente bewegen. Das war's also. Zum Teil, warnen Deutschland teilweise an Bill. Wird jetzt voran gehen. Und unser Stil, unsere Social-Media-Symbole sowie der Rest aus der Fußzeile. Dann sehe ich dich. 66. Unsere Social-Media-Icons von Font Awesome: Willkommen zurück. Also die Zeit hat gemeinsame Angebote, um unsere sozialen Medien, Aikens, hinzuzufügen . Aber wenn Sie bemerken, dass wir tatsächlich verwenden, was wie Bilder aussehen könnte, aber das sind tatsächlich Symbole, okay? Und Sie bemerken auch, dass wir hier drüben Aikens auf anderen Abschnitten haben, wie mit dem Draht gehen mit uns. Sie haben X Aktionen für das Forschungsfeld, die analysierten Daten und so weiter und auch hier. Wir haben mehrere Symbole für die angebotenen Dienste. In diesem Video werde ich Ihnen zeigen, woher Sie diese Symbole bekommen können. Und das ist die Website genau hier. Es heißt Schriftart Awesome Doc home, und es ist im Grunde Wiederholungen. American Holen Sie sich Tausende und Tausende von Symbolen kostenlos. Und lassen Sie mich Ihnen genau zeigen, wie Sie mit Front anfangen können. Ehrfürchtig. Alles, was Sie tun müssen, ist im Grunde einfach auf die Anmeldeseite gehen, um Ihnen zu zeigen, Lassen Sie mich zurück nach vorne gehen . Ehrfürchtig. Ordnung, das ist also die eigentliche erste Seite, die Sie sehen würden. So sehen Sie den Start für den kostenlosen Button genau hier. Klicken Sie einfach auf Start kostenlos, und dann werden Sie handeln, um Ihre E-Mail-Adresse anzugeben. Sie kam vor kurzem an Ihre E-Mail-Adresse und klicken Sie dann auf den Sand Kid Code. Sobald Sie das getan haben,ist dies die Art von E-Mail, die Sie erhalten würden. Sobald Sie das getan haben, Es ist im Grunde eine Möglichkeit für Sie, Ihre E-Mail-Adresse zu bestätigen und unsere Dinge einzurichten. Also gehen Sie einfach voran, klicken Sie auf, um Ihre E-Mail-Adresse zu bestätigen, und dann werden Sie zu einer anderen Seite weitergeleitet werden, und dies sollte die Seite sein, auf die Sie weitergeleitet werden. Wenn Sie diese Seite nicht sehen, klicken Sie einfach auf den Link stat im Hauptnavigationsmenü. Und dann müssen Sie hier einen Namen für Ihr Projekt oder Ihre Website hinzufügen. So können Sie entweder geben Sie ihm entweder einen bestimmten Namen oder Sie können einfach den Namen Ihrer Website hinzufügen und klicken Sie dann auf, erstellen und verwenden Sie dieses Kit, so dass Sie einen Link präsentiert werden. Lassen Sie mich Ihnen meine zeigen. Alles klar, jetzt ist das die, die ich habe, und das ist der Name hier. So sehen Sie den Link hier oben. Dies ist der Link muss kopieren und dann in unsere Indexpunkt-HTML-Datei einfügen. Ich gehe jetzt weiter, klicke auf „Code kopieren“. Und dann gehen wir zurück zu Klammern und hier in unserer Indexpunkt-HTML-Datei, werde ich einen Link hier oben in unserem Heads Abschnitt hinzufügen. Und da gehst du. Also gehen Sie jetzt nicht voran und speichern Sie so das genau hier dieser Link ist, was unsere Indexpunkt-HTML-Datei mit der Front verbindet . Tolle Webseite. Aber jetzt, wie zeigen wir die tatsächlichen Icons an? Nun, gehen wir zurück nach vorne. Ehrfürchtig. Jetzt schauen wir mal, was sie haben. Also lasst uns einfach voran gehen und das schließen. Von hier aus werde ich einfach gehen. Ich werde auf die 1588 Free Aiken klicken, und das sollte auf eine Seite gehen. Also nur als Beispiel, wenn Sie unsere Airbnb anzeigen wollten, können wir auf Airbnb klicken hier, und dann werden Sie den Code direkt hier sehen. Sie werden sehen, ich Klasse, es nennt so etwas. Dies wäre also der Code, der dieses Symbol tatsächlich auf unserer Website anzeigen würde. Aber wir versuchen, das Symbol für Facebook Twitter, LinkedIn und dribble anzuzeigen. Also lasst uns das so machen, als würde ich hier wieder reingehen und wo wir die Symbolleiste haben. Ich werde nach Facebook suchen. Lasst uns suchen und lassen oder C wir werden Ergebnisse verteidigen. Okay, also haben wir 12 übereinstimmende Ergebnisse, aber wir werden einfach voran gehen und uns die 1. 1 hier drinnen schnappen. Klicken Sie also auf das Symbol, und dann rechts hier, ich werde auf diesen Link klicken, um den HTML-Code zu kopieren. Sie können sehen, dass es kopiert wurde. Jetzt werde ich mit HTML zu unserem Index zurückkehren. Lassen Sie uns den ganzen Weg hier und dann abkühlen, aber wir haben Facebook. Ich füge eine neue Zeile hinzu und füge dann den Code ein. Das war's. Ich werde jetzt weitermachen. Speichern Sie das. Gehen wir zurück. Trump geht nach oben, Lasst uns die Seite aktualisieren. Und da gehst du. Jetzt haben wir Facebook da unten. Lassen Sie uns das eine sehr, sehr schnell auch für Twitter tun. Also haben wir Twitter und wieder gehen wir einfach voran und gehen bei der allerersten wollen. Also lasst uns auf Twitter klicken und wir werden auf diesen Link direkt dort klicken. Gehen Sie zurück zum Index html. Aber wir haben Twitter-Tempo diesen Code. Speichern Sie es. Gehen Sie zurück zu ah, Website aktualisiert die Seite. Und da gehst du. Jetzt haben wir Facebook und Twitter auftauchen. Also, was ich jetzt tun werde, ist unser positives Video. Und fügen Sie schnell die für LinkedIn hinzu und dribbeln Sie alle Rechte. Willkommen zurück. Ich muss die restlichen Symbole für LinkedIn und Dribble hinzufügen. Und natürlich, natürlich, wenn ich zurück zu meinem Browser gehe, können Sie sehen, dass ich gerade jetzt eine LinkedIn und dribble Anzeige habe. Das war's also. Deutschland Vendex Video. Nun, wir werden nun das Styling abschließen, was viele sah, die ich dich dann sehen werde. 67. Stilen Teil 2: Oh, es ist ein Ball zurück zu Teil zwei off Stil in unserer FOTA, und zuvor haben wir in der Lage, die Inhalte, die wir haben, ah, Navigationsmenü hinzufügen ah, , aber auch ein soziales Menü als gut. Also lasst uns versuchen, das Filmmaterial genau so aussehen zu lassen, wie wir hier drüben haben. Und lasst uns Festival Tackett, die Social Media Aikens, und Sie können sehen, die massive Differenz richtige Entscheidung Menü hier ist auf der rechten Seite, also müssen wir die Minuten von der rechten schweben. Aber wir müssen auch die Farbe von den Social-Media-Elementen ändern, erhöhen die Telefongrößen als auch. Wir müssen das Standardlisten-Styling entfernen, aber auch bemerken, dass, wenn wir den Mauszeiger auf die Menüelemente bewegen, Sie sehen können, dass wir eine Hintergrundkalo haben, die angezeigt wird. Und auch haben wir einige Farben für die Symbole selbst heraus. Twitter und Linda, nicht blauer Dribble wird gelesen. Facebook ist Ärzte blau, also müssen wir versuchen, herauszufinden, wie wir unsere vielen dazu bringen können, genau wie das aussehen, was wir hier so beleuchtet haben oder den Prozess starten können. Ich gehe zurück in die Klammern, und das haben wir. Wir haben eine Klasse außerhalb des sozialen Menüs, also können wir diese verwenden, um unsere Verbündeten als auch unser A-Tag anzuvisieren. Also lasst uns das machen. Ich werde über zwei Haupt nicht CSS schlagen. Und wie immer werde ich Fota schnappen. Auch wenn wir technisch immer noch den Fuß hoch gestalten. Lassen Sie uns einen neuen Abschnitt für unsere Social Media erstellen. Also rufen wir das an. Ah, also wird sie Food-Menü und OK, aber die Kreditgeber sorgen dafür, dass wir alles geschnappt haben. Wir haben den Ford Slash nicht geschnappt. In Ordnung, kommen wir. Aber komm runter und lass uns diese Show beginnen. Das erste, was wir tun werden, ist, dass wir die soziale Viele-Klasse anvisieren. Öffnen wir unsere Kollegen Zahnspangen. Also lassen Sie uns das schnell tun, wie Sie vielleicht erraten haben, wird etwas schwimmen in tun müssen. Also werden wir das den Rechten zufließen. Lassen Sie uns alle Muster entfernen. Also behalte das Null Ah, der Listen-Stil-Typ. Wir wollen kein Lee-Styling, also sagen alle nichts wie gewohnt und lassen Sie uns etwas Spielraum raus. Wir haben sieben Pixel und dann Null. Alles klar, lass uns das speichern und mal sehen, was wir haben, und okay, so gut. Im Moment ist das Menü auf der rechten Seite. Lassen Sie uns nun beginnen, die eigentlichen Menüelemente selbst zu stylen. Um das zu tun, gehen wir zurück zu Klammern und lassen uns aufhören. Oder zuerst, indem du die verbündete Krankheit selbst anvisierst. Also sagen wir soziales Dosh-Menü, und dann werde ich ich und dann schweben Sie sie nach links, damit sie sich beiseite setzen können. So fließen nach links und dann werden die Ränder Liberalismus hinzufügen, Marge Null und ah, gehen wir. Wir zwei Pixel. Ah, OK, jetzt fangen wir an. Ich bekomme das A-Tag. Also haben wir ein soziales Arzt-Menü ein Jahr und was wir hier tun werden, Zunächst einmal, fügen wir einige Padden 10 Pixel, und dann wird es auch die Anzeige des In-Line-Blocks hinzufügen und dann letzte, aber nicht andere. Wir werden einen Grenzradius von 20 Pixeln hinzufügen. Jetzt fügen wir die Grenzvideos hinzu, weil wir bemerkt haben, dass hier drüben, wenn wir auf den Menüpunkten hoffen, Sie sehen können, wie der Kreis um sie herum erscheint. Das liegt daran, dass der Bruder Videos Augen in Kraft und 20 Pixel aussteigen. Oder so gehen wir zurück hierher. Wir haben das Muster hinzugefügt. 10 Pixel haben wir Anzeige im Linienblock. Aber dann haben wir auch eine Flasche. Videos von 20 Pixeln Buchstaben. Schnell. Gehen Sie weiter und fügen Sie die Hover-Effekte hinzu. Okay, lass mich das schließen. Also haben wir soziale Dash-Menü ein und und schweben, damit sie schweben. Effekt, die wir hier haben, ist die Hintergrundfarbe und wir werden hinzufügen, dass Ah, wir haben Hashtag f a f a f a. Jetzt spart das und lasst uns hier rüber gehen und sehen, was passiert. Ich werde zuerst die Seite sein und da gehst du. Und dann, wenn wir jetzt auf den Menüpunkten schweben, können Sie sehen, dass wir den weißen Hintergrund offensichtlich haben und sie sind so weit, so gut. Aber beachte, dass hier drüben die Symbole viel größer sind. Also müssen wir etwas Fondsgröße machen. Und bedenken Sie, dass dies keine Bilder sind. Sie sind liebende Symbole, so dass Sie normale Front ah, Eigenschaften auf sie anwenden können , wie Sie es auf normalen Text würden, so dass wir Telefongröße anwenden können, also muss ich sie ein wenig größer machen. Und wir müssen auch einige Farbeffekte hinzufügen, wenn wir über die Menüpunkte selbst auf den tatsächlichen Icons ho . Aber in einer Kraft, um die tatsächlichen Symbole selbst zu zielen, müssen wir eine Klasse für sie erstellen, oder? Also Briefe Pflichten wie ich werde Teoh Index dot html zurückkehren und dann für jedes dieser Icons, werden wir eine Klasse aus Icon hinzufügen. Also lassen Sie uns Icon für Facebook für Twitter hinzufügen. Wir werden auch einen für Lincoln hinzufügen. Und dann wird der letzte Panelist 14 Dribble hinzufügen. Lass uns weitermachen und cool sparen. Jetzt können wir die Symbole selbst anvisieren. Lasst uns hier rüber gehen. Ich werde Social Dash Menü und dann die Klasse aus Symbol sagen. Und jetzt wird dies beginnen, den echten Stil zu tun. Unser erste und erste ist, lassen Sie uns die Farbe ändern und der Wert wird ein a a sein. Als nächstes wird hier die Schriftgröße sein. Jetzt weiß ich, dass es 20 Pixel sein wird. Also lassen Sie uns bei 20 Pixeln auch eine Zeilenhöhe von 20 Pixeln hinzufügen, nur für ein gutes Maß. Und dann können wir auch einen Text ausrichten aus der Mitte hinzufügen. Okay, lassen Sie uns das retten und sehen, was wir jetzt haben. Lasst uns hier rüber gehen. Bezieht sich auf Seite und da gehst du. OK, also kommen wir allmählich dorthin und bemerken, wenn wir auf den Symbolen schweben, das sieht immer noch gut aus. Aber dann müssen wir nun auch die Änderung des Farbeffekts hinzufügen. Also lasst uns das machen. Ok. Wenn wir zurück zu Klammern gehen, lassen Sie uns wissen, Kuwaiti Hover Effekte für jeden von ihnen. So voll kann beginnen, indem Sie soziale Dash-Menü sagen und dann ein und dann werden wir sagen, schweben. Ok. Und in Enten-Symbol Punkt f ein Bindestrich Phase Buch Dash F. Dies ist, was wir zielen speziell Ziele in den Symbolen selbst. Richtig? Denken Sie also daran, dass die Symbole auch auf dem A-Tag schweben. Technisch gesehen, so müssen wir es zusätzlich zu unseren Icon-Klassen als auch das a Tag nehmen. Deshalb haben wir diese ziemlich sehr, sehr lange Thekla Vision. Also lasst uns weitermachen und das tun. Aber ich werde nur sehr hinzufügen, sehr einfach die Farbe hier sagen, wir werden dies zu drei ändern. Seien Sie 599 acht und gehen Sie. also Wenn wiralsoauf Facebook schweben, kann ich seine Farbe von A auf diesen Wert ändern. Also lasst uns weitermachen und das versuchen. Lasst uns das retten. Gehen wir zurück. Erfrischen und okay, wir können nicht wirklich sehen, weil es dunkel ist. Lasst uns schnell schreckliche Tweet ausprobiert. Okay, lassen Sie es uns einfach schnell für Sie lesen, also schnappen Sie sich das. Lassen Sie uns einen kopieren, hier runter kommen, einfügen. Lassen Sie uns die Klasse für Twitter bestätigen. Es ist eigentlich das Symbol ist eigentlich f ein Bindestrich Twitter. Okay, kommen wir wieder hier rein für einen Armaturen-Hochtöner und dann wird der Wertaufruf hier tatsächlich 55 a c e sein . Und jetzt lassen Sie uns sehen, ob Sie nicht wollen, ist eine Veränderung. Da gehst du. Da gehst du. Jetzt funktioniert Twitter einwandfrei. Lassen Sie uns das gleiche für LinkedIn schließen und dribbeln so wieder, ich werde einfach voran gehen und diesen Code greifen. Komm einfach hier runter, Paste, komm auch hier runter. Und lassen Sie uns bestätigen, die Symbole für LinkedIn, es ist F A. In der Tat, Kreditgeber packten uns, ich könnte vergessen, weil mein Gedächtnis ist wirklich, wirklich schlecht. Also hat Linda das genau da geschnappt. Gehen Sie zurück, um das zu bleiben. Sehen Sie, bewerten Sie. Und dann hier drinnen werde ich das in F A Dash Wingman ändern. Und dann schließlich, die 14 Dribbeltage F ein Bindestrich dribbeln. Okay, also lass uns den einen Aziz machen. Nun, lassen Sie uns das einfügen. Und Ah, finden Sie. Also die 14 LinkedIn sein Wert ist eigentlich 0077 b fünf und dann wird die 14 dribbeln e ein voller C 89 Lassen Sie uns voran und speichern Sie dies. Lasst uns hier rüber gehen. Aktualisieren Sie die Seite. Und da gehst du. Ehrfürchtig. Ehrfürchtig, ehrfürchtig. Aber wir sind noch nicht fertig. Wir sind immer noch in Luft wie ein schöner Übergangseffekt, weil wir hier bemerken, dass sehr glatte Übergangseffekte haben . Also lasst uns das machen, okay? Wir gehen zurück hierher, und dann, wenn wir das Social-Media-Icon haben, lassen Sie uns unseren Übergangseffekt hier hinzufügen. Also werden wir sagen, Übergang wird Farbe sein und und wie üblich, lassen Sie uns 2,2 Sekunden gehen und ich wünschte, ich werde sagen, Leichtigkeit aus. Und da gehst du. Lasst uns sicher sein. Gehen wir zurück, aktualisieren Sie die Seite. Und jetzt haben wir diesen schönen entspannenden Effekt. Allerdings haben Sie vielleicht bemerkt, dass das Symbol für Facebook ein wenig anders aussieht, wenn wir auf sie von den anderen bewegen. Die anderen haben, naja, schöne, abgerundete Kreise, wie Sie sehen können. Aber Facebook ist nicht ganz so abgerundet. Was wir in einer Situation wie dieser tun können, ist einfach ein mit und eine Höhe für unsere Icons zur Verfügung zu stellen . Ok? Und im Idealfall möchten Sie mit dem Wert der angegebenen Schriftgröße gehen. Jetzt bisher haben wir bishereine Telefongröße von 20 Pixeln für das Symbol angegeben. Also lassen Sie uns das einfach so machen, als würde ich jetzt voran gehen und einfach sagen Höhe ist 20 Pixel und dann mit 20 Pixel auf diese Weise. Tut mir leid, Edna. Verschütten Sie mit richtig mit alles in Ordnung. So dass auf diese Weise, die Grenze Videos jetzt auf tatsächliche richtige unseren Kreis von ehemaligen Denken Sie daran, die Körper Videos, wo hier war 20 Pixel. Also, indem wir unseren Symbolen eine Höhe von 20 Pixel mit den 20 Pixeln und in der Vorderseite des Zuges Pixel gegeben , wird es richtig übereinstimmen. Also lassen Sie uns das speichern und gehen wir zurück zu einem Broza zuerst eine Seite und dann warten wir einfach ein paar Sekunden. Kommen wir runter. Und jetzt können Sie sehen, dass Facebook jetzt den gleichen Hover-Kreis-Effekt hat, wie bei Twitter, LinkedIn und Dribble. So bis zum Ende dieses Videos müssen noch das Copyright entwerfen. Tex und auch hinzufügen, sind viele Ränder und Muster. Wie Sie sehen können, gibt es eine Menge von Imagination und Muster zwischen den beiden sind Menüabschnitte sowie der Copyright-Text. Das erste, was wir tun müssen, ist, dass wir einen leichten Pfeil reparieren müssen. Und das ist, weil hier und ich HTML-Datei genau hier. Der Copyright-Text ist eigentlich innerhalb des Unterrichtstages, also sollte er draußen sein. Also lasst uns dieses Problem beheben. Okay, ich werde jetzt weitermachen und das und ihre Levels abschneiden, die draußen von der tauben Klasse abseits der Straße eingefügt wurden , weil es dann das Urheberrecht ist. Tex ist ein einsamer für sich. Die Todesklasse von Roe ist diejenige, die sowohl das Footer-Menü als auch das soziale Menü enthält. Wenn wir also wollen, dass der Fuß ein Text allein steht, wie er hier ist, muss er außerhalb des Tages des Essens sein. Thai-Menü beendet soziale Menü. Deshalb machen wir alles, was wir diese Änderung vornehmen. Also lasst uns jetzt voran sparen. Und wenn wir zurück zum Poza fahren, sollten wir sofort eine Veränderung bemerken. Und da gehst du. So jetzt können Sie sehen, dass der vollständige Text ganz von selbst da unten ist. Also, was müssen wir hier ändern? Wir müssen etwas Text transformieren. Wir müssen uns auch in die Mitte ausrichten und auch viele Imagines und Muster hinzufügen. Also lasst uns das machen. Ich werde zurück gehen, um das CSS zu bleiben. Und dann haben wir hier oben zu essen. Ich komm einfach rein und sage Fu tha und dann p in Ordnung. Und dann werde ich zuerst sagen, dass der Text transformiert wird. Lass uns einfach die Zeile für eine Sex-Zeile schreiben, um sie zu senden und dann Texte. Es gibt Transformation wird Großbuchstaben oder Kabel sein, sondern auch einige Ränder und Muster hinzufügen. Aber lass uns voran gehen und das zuerst speichern und sehen, wie es aussieht. Lassen Sie uns aktualisieren und da Sie gehen, OK, Also lassen Sie uns versuchen, einige Ränder und Muster Schüler gesamten Inhalt, weil beachten Sie hier, der Fuß auf Menüs. Welche wie viele hattest du? Einige Ränder von ganz oben selbst, vom Fuß nach oben. Was wir also tun können, ist, dass wir den Haupt-Dave anvisieren können, der alles hält was die tatsächliche Todesklasse von Inhalten ist. Also lasst uns diese Klasse anvisieren. Ich gehe zurück hier und dann gleich nach dem Essen, komme ich jetzt rein und sage Essen und dann Punktgehalt. Und jetzt können wir hier einige ernsthafte Muster hinzufügen. Also wird da rein klopfen. Lassen Sie uns mit 15 Bilder von den oberen 20 Pixel links und rechts gehen, 35 Pixel von unten und im Rand für gute Maßnahme wird Null Auto gehen, Lassen Sie uns speichern, und wir sollten jetzt einige große Verbesserungen sehen. Die frische Und da gehst du. Das ist also so ziemlich es. Es gibt hier einige kleine Unterschiede, Mann. Vielleicht der Firmentext. Es ist ein bisschen kleiner als das, was wir hier haben, aber es ist vollkommen in Ordnung. Ich glaube nicht, dass wir das müssen. Wir gehen in Masters passen genau zu diesem Design, aber das ist, wie wir in der Lage, erfolgreich zu entwerfen oder bauen und installieren unsere Lebensmittel. Wir waren auch in der Lage, Symbole von vorne zu bekommen, genial als auch. Das ist es also, um den Fuß zu bauen und zu starten. Eine deutsche Avonex Video-Glocke wird nun die verbleibenden Symbole von vorne Awesome hinzufügen. 68. Die verbleibenden Symbole hinzufügen: Willkommen zurück. Jetzt ist es Zeit für uns, die restlichen Symbole von vorne hinzuzufügen. Awesome! Jetzt hier drüben auf einer Modellseite, beachten Sie, dass wir Symbole für das Wer haben. Wir sind, was wir tun, aber bemerken, dass sie grün gefärbt sind und dann für Dienstleistungen. Wir haben neun verschiedene Aikens, und sie sind alle lila und farbig. Und dann endlich, in den VAE, gehen Sie mit uns. Wir haben auch vier verschiedene Symbole. Wir haben eine, die hellste blau, orange, grün wieder und dann lesen. Also brauchen wir einen Plan und was wir hier tun werden ist, lassen Sie uns zuerst Klassen für jedes dieser Symbole erstellen, insbesondere mit ihren Farben. Und Dan wird nur dem Hex eine düstere Werte für diese Farbeigenschaften zugewiesen. Also hier ist genau das, was wir tun werden. Gehen wir zurück von unseren beiden Klammern. Lasst uns rüber gehen, um dieses CSS zu bleiben. Und lasst uns einen guten Ort finden, um Aikens hinzuzufügen und alles, was wir tun können, genau hier haben wir Knöpfe. Lasst uns das einfach schnappen. Lassen Sie mich diesen leeren Raum aufräumen und, ah, wir gehen jetzt einfach voran und fügen einen neuen Abschnitt hinzu, aber wir nennen das den Icons Abschnitt. Also komme ich und ach, lasst uns das tun. In Ordnung, also wird die 1. 1 hier grün sein. Okay, also sagen wir, uh ich kann und dann ein Punkt grün, so dass dieses spezielle Symbol den Ruf des Wertes haben wird und es wird acht c b sind neun getragen drei. Okay, gehen wir einfach weiter und kopieren das wird. Lass uns voran gehen und einfügen. Lassen Sie uns schnell diese zu lila ändern, so haben wir lila und dann wird der Wert aus der lila Symbolfarbe sein, ah, CC 72 und dann f f f Lassen Sie uns einfach voran gehen in den Raum jemand für sind rot, orange sowie blau. In Ordnung, also, wie Sie sehen können, habe ich dort viele Farben für Blau, Orange und Rot hinzugefügt , aber beachten Sie, dass es zwei weitere Eigenschaften gibt, die wir möglicherweise hinzufügen müssen. Möglicherweise sehen Sie die Größe des Telefons. Wir können nicht wirklich sagen, wie groß sie sind, aber ich gehe zu den vier Pixeln für die Icons. Aber ich habe auch bemerkt, dass es ein wenig Abstand zwischen dem eigentlichen Text und in dem Symbol gibt, so dass wir geben können, dies kann ein Rand rechts von, sagen wir, fünf Pixel sein. Also lasst uns das machen. Ok? Die Symbole befinden sich tatsächlich innerhalb eines H drei Tags. Lassen Sie mich Ihnen das sehr schnell zeigen. Wenn wir zurück zu unserem Index von HTML sind, zum Beispiel, hier drüben, wo wir das Ganze haben wir sind, können Sie jetzt sehen, es ist in. Es ist in einem H drei sie Was wir tun, ist in einem H drei Web-Entwicklung für die Dienste ist ein H drei. Diese Symbole werden also außerhalb unseres Zeitalters platziert. Drei. Steuer. Deshalb kommen wir hier und ganz oben rein. Wir werden jetzt R H drei sagen und dann Leerzeichen und dann Punktsymbol. Ich hoffe, dass kein Zauber kann ich richtig, so wird dies jetzt haben. Zunächst einmal geben wir es eine Telefongröße und wir gehen zu den vier Pixeln und dann Rand rechts von fünf Pixeln geht voran und speichern Sie das und alle K. Also, wie können wir jetzt diese spielen die Symbole? Nun, fangen wir mit der 1. 1 an und dieser hier ist eigentlich ein Schachkönig. Ich spiele gerne Schach. Ich weiß nicht, wie es dir geht, aber ich spiele gerne Schach. Also, um die Brust König hinzuzufügen, lassen Sie uns Kopf von einem Rücken nach vorne. Ehrfürchtig. Gehen wir auf die Icons Seite. Und hier drüben tippen wir einfach rein. Ah, Schachkönig. Und da gehst du. Das hier ist also genau das, also gehen wir weiter. Kopieren Sie das. Lassen Sie uns darauf klicken, und wir kopieren einfach den Code, um ihn anzuzeigen. Lassen Sie uns Kopf Hintern Kopf Bug über Ihre Klammern. Es wird also sein, wo wir das haben, was wir sind. Das ist sehr gut in der Klasse wie Tag. Aber denken Sie daran, wir müssen immer noch die Klasse aus Symbol und dann grün hinzufügen, weil es die grüne Farbe hat. Richtig? Also lasst uns weitermachen, das retten. Gehen wir zurück zu unseren Glocken der interessierten Seite. Und da gehst du. So können wir eine ICANN sehen. Aber es gibt eine Tasche Run Kahlo, die sein Problem der Verarbeitbarkeit abdeckt. Nun, wenn wir zurück zu unseren Klammern gehen, denken Sie daran, dass hier oben die Kontakte haben. Sehen Sie hier drüben haben wir auch die Klasse von unten. Aber dann grün, richtig? Also, wo ist in der exakt gleichen Klasse fallen? Sie erhalten in Touch-Button mit dem Symbol für den Brustkönig. Es gibt in der gleichen Klasse von Grün. Und wenn wir etwa zwei Haupt-Nazi-SS-Mitglied hier drüben hatten, wo wir grün haben, haben wir eine Hintergrundfarbe von acht CB 913 Also, im Grunde, im Grunde, jetzt das Symbol bekommt die Hintergrundfarbe aus der Klasse off green die zunächst geben würde, um nach unten zu kommen. Also, um diese Art von Problem zu vermeiden oder einfach nur eine leichte Anpassung Ah, lassen Sie uns Kopf Buck hier rüber haben wir gehen und wir werden einfach sagen, Lass uns zurück zum ursprünglichen ersten Enciso. Wir haben Taste und dann grün, so dass wir einfach sagen Button und dann grün für diese bestimmte Eigenschaft. Soldaten, die hierher kommen , sagen wir , sind eingekauft und dann grün. Also im Grunde sollte jedes Element, das die Klasse von Bolton und Green hat, die Hintergrundfarbe von HCB neun Polizei haben . Also jede dieser Klasse mit nur einem anderen Element mit nur einer Klasse von Grün wird diese Hintergrundfarbe nicht mehr haben. Also lasst uns weitermachen. Speichern Sie das ein wenig, sehen Sie, ob das etwas frisches ändert. Warten wir noch ein paar Sekunden. Und da gehst du. Ehrfürchtig. So können wir jetzt das Symbol genau dort sehen, während die Gettin Fackel der grüne Baghran noch intakt ist . Das ist also eine Anpassung, die wir vorgenommen haben. Beide erinnern sich, dass wir auch etwas Ähnliches mit den Unsere Dienste, die die lila haben sind wieder auf Coehlo, und wir werden auch die Klasse der lila für die Dienste verwenden, die ich Konsole. Lassen Sie uns auch machen, dass die Einstellung wird zurück von zwei Klammern. So sehr haben lila. Wird nur sagen, unsere Taste lila. Das war's. Lass uns das einfach speichern und es sollte uns gut gehen. Also, was wir jetzt von hier aus tun müssen, ist, um die Symbole für unseren Service hinzuzufügen, sagt eine Liste. Wollen wir nur ein Beispiel für uns. Also dieser hier ist im Grunde unser Code für die Web-Entwicklung. Also lass uns wieder hier reingehen. Lassen Sie uns nach Code suchen und sehen, was wir von gebildet Awesome bekommen können. Und ist das hier? Also ist es im Grunde nur Code. Also lasst uns hier einklicken und mal sehen. Ich werde voran gehen, schnappen Sie sich das. Gehen wir zurück zu Klammern. Lassen Sie uns zum Index von HTML gehen. Also lasst uns das hier für die Web-Entwicklung tun. Lassen Sie uns voran Tempo gehen, dass aber natürlich, wird jetzt die Klasse aus Symbol hinzufügen und dann sind auch lila. Und lasst uns weitermachen, Speichern Sie das. Gehen wir zurück zu unseren Glocken über die erste Seite. Und da gehst du. Genau so. Wir haben jetzt das Symbol für ein Lila, also wird es im Grunde genau das gleiche sein, unser Prozess für alle verbleibenden Aikens. Also, was ich jetzt tun werde, ist einfach pausieren Sie das Video und fügen Sie die verbleibenden Amerikaner zu unseren Seitenrechten aller anderen Männer und Symbole für diese Dienste Abschnitt, sowie den Abschnitt Warum gehen Sie mit uns und, natürlich, die verbleibenden unsere Ikone hier drüben, wo wir das haben, was wir tun. Wenn ich also einen Blick auf meine Website schaue, das im Grunde so aus, wie es jetzt aussieht. Wir haben alle Symbole direkt dort, Also, wenn Sie interessiert sind, können Sie einfach nur die Namen all dieser Symbole aus den Dateien von Shed mit Ihnen die Dateien für die Website. Sie können einfach die Namen am richtigen Tag finden und einfach kopieren und einfügen. jedoch Wir müssenjedochnoch diejenigen für die Testimonials hinzufügen. Wie Sie sehen können, haben wir die hier nicht gehabt. Lassen Sie mich Ihnen zeigen, wie Sie eine für das Zeugnis hinzufügen können. Wir gehen wieder hier rein und werden nur glücklich in Mänteln und wir sind weg. Okay, das wird also der 1. 1. vor dem eigentlichen Gericht selbst sein. Also hier ist es, genau hier. Es heißt links. Also lasst uns auf diesen klicken. Und hier ist der Code. Also lassen Sie uns voran und kopieren Sie das Jetzt Kopf eines Rückens in Klammern und lassen Sie uns dies noch einmal tun. Suchen wir nach dem Testimonials Abschnitt und Ah, OK, also ist es genau hier. Also werden wir das direkt nach der Klasse Offcoat hinzufügen. Lassen Sie uns das hinzufügen. Aber dann wird dies die Icon-Klassen sein. Nun, vergiss nicht danach in der ICANN-Klasse und dann auch rot, denn die ersten Schichten sind rot. Aber dann müssen wir auch gehen. Wir werden auch etwas Design machen müssen. Also lassen Sie uns eine andere Klasse hinzufügen, die Gerichte genannt wird, die wir verwenden können, um sich vorstellen zu können und vielleicht sogar die Schriftgröße zu erhöhen, wenn nötig. Also, das ist es für die erste Erkältung. Gehen wir zurück und lassen Sie uns den Mantel von rechts hinzufügen, damit wir einfach unseren Mantel sagen können, richtig? Also lasst uns suchen. Und natürlich wäre dies derjenige am Ende des Zeugnisses. Es ist der, der hier ist. Also lasst uns auf Gerichtsrechte klicken und ah, naja, kopieren Sie das und dann machen wir genau das Gleiche noch einmal. Kommen wir kurz vor dem Dev her. Wir fügen das hinzu und natürlich fügen natürlichdie Eiken-Klasse, die rote Klasse und dann auch Mäntel hinzu. Also lasst uns weitermachen und das speichern. Und lasst uns die Veränderung sehen, die wir jetzt haben. Lass uns erfrischen und da gehst du. Okay, also haben wir jetzt die roten Mäntel. Alles, was wir jetzt wirklich tun müssen, ist, nur etwas Spielraum hinzuzufügen. Wie Sie sehen können, ist das ein gewisser Rand zwischen dem Aiken und dem Text. Also lasst uns das machen. Wir haben die Klasse bereits außerhalb des Platzes hinzugefügt, also gehen wir rüber nach Maine. Das ist ES sagt. Lassen Sie uns nach unserem Zeugnis Nägel Abschnitt suchen. Es ist genau hier, also können wir einfach geprüfte, mehr Nial sagen und dann können wir die Klasse Off-Coats hinzufügen und wir machen das einfach, okay? Wir werden nur Rand hinzugefügt und die Werte, die hier haben, sind fünf Pixel und 10 Pixel. Lassen Sie uns fortfahren und speichern Sie dies und aktualisieren Sie die Seite. Und da gehst du, siehst sehr, sehr gut aus. Ich werde alles tun, was wir jetzt tun müssen, ist, nur die restlichen Codes für das Grün, Blau und Orange hinzuzufügen Grün, . Ich gehe über die Videos visuelle und fortsetzen Sobald ich sie hinzugefügt habe. Willkommen zurück. Sie sehen also, dass ich noch verbleibende Codes für die drei Testimonials hinzugefügt habe. Und natürlich, wenn ich auf den Kopf zurück zu den Glocken sind die Seite aktualisiert. Nun, da gehst du. Wir haben jetzt alle Symbole auf unserer Seite angezeigt. Also, das ist es im Grunde, um Symbole aus Fonds hinzuzufügen. Ehrfürchtig. Ich hoffe, Sie haben das Video genossen. Ich sehe euch die nächste Klasse 69. Die Navigational hinzufügen: Gut komm zurück. In diesem Stadium haben wir uns so ziemlich eine ziemlich gut aussehende Website aufgebaut. Aber jetzt müssen wir auch Willkommen wieder hinzufügen, Sir. An dieser Stelle haben wir uns so ziemlich eine gut aussehende Website aufgebaut. Wir haben alle unsere Abschnitte. Wir haben, ah, Content-Design ist intakt und so ziemlich alles sieht gut aus. Allerdings können wir die Funktionalität unserer Seite noch verbessern, indem wir einige Navigationstasten hinzufügen, vor allem die hier drüben. Beachten Sie, dass, wenn jemand auf diese Pfeile klickt, sie direkt nach oben auf der Seite führt. Dies ist also eine gute Möglichkeit, die Benutzererfahrung auf einer Website zu verbessern, vor allem auf Seiten, die sehr, sehr lang sind , wie die, die wir hier haben, so dass der Benutzer, der alte Weg nach oben Schule, sie können einfach auf diese Tasten schauen und es wird sie den ganzen Weg nach oben bringen. Also müssen wir etwas, das als und genannt Links zu erstellen. Grundsätzlich müssen wir einen Onkel irgendwo um den ersten Abschnitt hier drinnen verlassen, so dass, wenn jemand auf diese Stunden klickt, sie zu diesem Knöchel bringen wird. Also müssen wir den Onkel hier oben erschaffen und dann die Onkel Lynn, den Onkel, entweder mit all den Navigationsstunden verknüpfen , die wir in jedem Abschnitt haben, wie Sie sehen können. Also lasst uns das tun, wird das ein bisschen Spaß machen. Lasst uns auf die Wählerklammern gehen. Und das erste, was wir jetzt tun werden, ist, etwas Platz für die Knöpfe hier oben zu schaffen . Also lasst uns das machen. Okay, lassen Sie uns jetzt voran und fügen Sie die erste 1 hier auch hinzu, wo wir die Idee haben. In der Tat, lassen Sie uns dies zuerst für die Dienste tun. Okay, ich denke darüber nach ein bisschen zu nah an der Spitze. Also lasst uns auf Abschnitt dafür gehen. Bis zu den Diensten. In Ordnung, also werden wir das tun. Ich werde diese neue ein Tag hinzufügen, weil, natürlich, es ist eine Linda, aber klicken Sie auf Also müssen wir eine Steuer verwenden, also werde ich sagen h ref gleich wir werden Mäntel für jetzt hinzufügen, der eigentliche Link wird der Onkel sein in Baltika. Sieh dir das ein bisschen später an. Fügen wir eine Klasse hinzu, weil wir etwas Styling machen werden. Also nennen wir es Taste und dann nach oben. Also ist es im Grunde von unten nach oben. Und jetzt lassen Sie uns eine Spanne erstellen, die den tatsächlichen Inhalt selbst enthält. So spannend. Und dann können wir sagen, Klasse gleich. Und dann rufen wir das einfach an. Ah, Pfeile! Pfeile hoch! Okay, ich habe nach oben gezeigt und das war's. Okay, gehen wir weiter und speichern das All K. Jetzt müssen wir die Avalos zeigen. Die Stunden, die wir hier haben. Nun, um dies anzuzeigen, können wir etwas als CSS NTT bekannt verwenden. Und natürlich können Sie hier sehen, dass wir so viele verschiedene Arten von Entitäten haben. All das symbolisiert deine Sünde hier drüben. Das sind die Entitäten. Und dann sind diese hier die Codes, mit denen wir die Entität anzeigen können. Also das, nach dem wir suchen, ist das, was ich versuche zu sehen, wo es ist. Okay, nachdem ich fast fünf Minuten verbracht hatte, habe ich es endlich gesehen. Ist der hier? Der 00 B rechte Punkt in doppeltem Anführungszeichen. Jetzt weiß ich, dass sie hier nach oben zeigen. Aber wenn ja, haben wir keine tatsächliche Entität, die das tut. Aber wir können uns auf die Verwendung von CSS bewerben, um das andere so zu drehen, dass es nach oben zeigt, also zeige ich Ihnen, wie das geht. Also lasst uns voran und schnappen uns einfach den Code. So ist es 00 BB. Ich denke, ich erinnere mich daran. Also lasst uns das alles in Ordnung machen. Eine Sache, die Sie auch wissen sollten, bevor Sie fortfahren, ist, dass Anzeigeelemente. Sie können den Inhalt, die gemeinsame Eigenschaft verwenden , um sie anzuzeigen. jedoch Der angebliche Inhalt würdejedochnur auf Pseudo-Elementen wie der Vor- oder Nachher-Klasse laufen. Infolgedessen müssen wir dies tun. Ich gehe zurück in die Klammern. Lassen Sie uns zu Maine gehen, dass CSS und Linsen einen neuen Abschnitt erstellen. Ich denke, nur auf den Knöpfen Lassen Sie uns das tun, wie ich hier reinkommen werde und ich werde sagen , Lassen Sie uns den neuen Abschnitt zuerst hinzufügen und ich werde anstelle von Knöpfen sehen. Ich werde sagen, Ah, Pfeile hoch. Okay, und dann Ah, Knopf und dann Leertaste und dann Pfeile. Und jetzt werden wir diese niedrige Klasse aus, bevor wir unsere Kollegen Klammern öffnen, und jetzt werden wir den Inhalt absichtlich verwenden, um die Entität anzuzeigen, und wir haben sie in Mänteln wird rückwärts Schrägstrich und jetzt 00 BB. So können Sie einen Entitätsinhalt anzeigen. Sie müssen also ein Pseudo-Element wie vorher, nachher verwenden und dann einfach die Art der Eigenschaft zum Schrägstrich verwenden, dann den Wert von diesem bestimmten und lassen Sie uns voran gehen. Jetzt speichere das und lass uns sehen, ob ich eine Änderung bemerke und ah, OK, also ist es genau hier. Sie können sehen, dass es genau da ist. Das ist also die Entität, diese Ebene. Aber irgendwie ist es nicht nötig, das hier rüber nach rechts von unserem Alter zu bringen, um vom Kurs zu besteuern . Dies ist, wo einige CSS Styling wird kommen, um zu spielen. Also lass uns tun, ich gehe zurück hierher. Lassen Sie uns etwas Platz oben schaffen. Also werden wir die A-Tags anvisieren, die die Stunden halten. Und natürlich sind die Acht, die mir wichtig ist, unsere Unter-zu-Spitzenklasse. Also werden wir hier reinkommen und ich werde sagen, Hintern und dann Punkt oben Ich würde sagen, zu einem Top und jetzt beginnen, etwas Stil hinzuzufügen. Und zuerst wir einfach den Kragen hinzu. Okay, also nennen sie hier wird 555555 Wir haben eine Hintergrundfarbe, also lassen Sie uns diese auch hinzufügen. Und wenn ich dich habe, ist nur reines Weiß. Es ist F f f f f f f f. Okay, lassen Sie uns auch etwas Polsterung hinzufügen. Also haben wir fünf Pixel. 12 Pixel Haben Sie fünf Pixel hier und dann Pixel? Oh, Cape und letzter Panelist. Fügen wir einen Rahmenradius von drei Pixeln hinzu. Okay, gehen wir weiter und retten das. Lass uns wieder reingehen. Hier bezieht sich die Seite und da gehst du. Okay, es fängt an, besser zu sehen. Aber wie bringen wir den Kerl hier rüber zum Licht? Sie sollten an die Position, Eigenschaft und speziell den Wert von AB denken . Also müssen Blicke die App slipped Eigenschaft verwenden, um dies nach rechts zu bekommen. Also lasst uns hier wieder rein gehen. Ähm, ich werde jetzt sagen, Position wird ab so laute sein, und dann werden wir einfach IKT tatsächlich sparen, viel über den Wert. Richtig? Doch Kugeln gehen mit vielleicht 10 Pixel und dann werden wir sehen. Okay, gehen wir weiter und retten das. Lasst uns zuerst eine Seite hier zurückkommen und da gehst du. Okay, also ist es genau hier. Also müssen wir es vielleicht etwas weiter nach rechts schieben, und dann können wir auch Top Null sagen. Jetzt ist es eine gute Sache, dass, wenn Sie bemerken, der Dev halten in der Klasse des Inhalts ist. Wir haben ihm bereits den Wert aus relativ für die Position gegeben. Deshalb sind wir immer noch in der Lage, die Entität hier zu sehen. Wenn wir diesen Schleier der Position entfernen, könnten Sie jetzt sehen, dass er einfach beginnt, außerhalb der Grenzen zu gehen. Deshalb ist es in der Regel eine gute Sache, einfach Persönlichkeit für Ihre Inhalte hinzuzufügen. Dave ist nur für den Fall, dass du mit irgendwelchen Elementen in diesen Daves laufen willst, die die Position von so laute haben könnten . Also lasst uns jetzt einfach weitermachen und ein paar Änderungen vornehmen. Ich werde den Inspektor auch benutzen, um hier anzuzünden . Ich verstehe. Also lassen Sie uns hier reinkommen und sagen wir weiß, 20 Pixel statt, und dann sagen wir top off null. Da gehst du. Das sieht viel besser aus. Ich fühle mich in Ordnung, also lasst uns das tun, denn wir werden die richtigen 20 Pixel haben und dann auf Null setzen. Also werden wir Rechte 20 Pixel speichern und dann nach oben haben wir Null als Wert. Und dann lassen Sie uns auch einen Rahmen hinzufügen. Also wird ein Pixel fest sein, und dann der Wert von unseren d fünf d fünf d fünf d fünf fünf fünf sein? Das wird der Wert sein. Okay, gehen wir weiter. Jetzt speichern Sie dies und lassen Sie uns sehen, was wir haben bezieht sich auf die Seite und OK, so dass Sie gehen. In Ordnung. Wir müssen noch ein paar Änderungen vornehmen. Beachten Sie, dass die Stunden zeigen oder gießt die ein bisschen größer und sie haben auch einige Muster . Also müssen wir das in Ordnung bringen. Also lasst uns hier wieder rein, wir werden es tun müssen, um die Klasse, die die Entität hält, die Stunden und das wird Hispanische Klasse über die Reisen, richtige Stunden sein. Also lasst uns weitermachen und das tun. Ich füge unsere neuen Klamotten hier unten hinzu und dann Avalos. Und jetzt werden wir die allererste Eigenschaft hier hinzufügen, die die lustige Größe sein würde. Jetzt weiß ich, dass die Telefongröße hier 28 Pixel betragen wird. Okay, gehen wir weiter und speichern das. Werfen wir einen Blick auf das, was wir jetzt haben. Aktualisieren Sie die Seite und gehen Sie. Okay, sieht jetzt größer aus. Aber das ist die Temer jetzt gezwungen, etwas Transformation zu tun. Also müssen wir einen Weg herausfinden, wie wir gehen können, nehmen Sie die Pfeile, so dass der Punkt nach oben jetzt gibt es eine Eigenschaft bekannt als die Chance von Eigenschaft speziell für solche, jedoch beachten Sie, dass die transformierte Eigenschaft Onley geht auf wählen in Linienelementen wie Bildern. Sie können die Eigenschaft transformieren auf Bilder anwenden. Kein Problem. Sowohl für Entitäten regulären Text, müssen Sie sie als In-Line-Block anzeigen, bevor die Transfer-Eigenschaft funktionieren kann. Also gehen wir zurück hier und lassen Sie uns zuerst sagen, Anzeige und dann im Zeilenblock. Okay, lassen Sie uns das retten. Lasst uns hier wieder rein gehen. Lass uns einfach auffrischen. Und jetzt werden wir das Inspect-Werkzeug verwenden, um die Transformation durchzuführen. Also sieh dir das an, als ob ich hier schauen würde, gehe zu inspizieren, und dann gleich hier, sieh dir das nochmal an. Ich minimiere das nur ein bisschen. Ah, Drogen hier drüben. Trink das hier. Okay, das ist also die Klasse, aber ich komme hier rein, also werde ich sagen, transformieren, transformieren . Und jetzt werden wir uns drehen, also wird es drehen. Und dann können wir jetzt den Grad aus der Rotation hinzufügen. Also in diesem Fall, jetzt, können wir mit gehen, sagen wir, 45 d e g So jetzt können Sie sehen, es ist um 45 Grad gedreht. Jetzt zeigt es eine Art Diagonale nach unten. Alles, was wir mit vielleicht 90 Grad hätten gehen können. Jetzt ist ein Punkt nach unten. Was ist komplett? Oh, wir können den ganzen Weg bis zu 70 Grad gehen. Und jetzt zeigt es nach oben, wie Sie sehen können. Aber ein anderer Wert, den wir einfach anstelle von 70 Grad geben könnten, wäre negativ 90 Grad. Das wäre also wie die Bewegung gegen den Uhrzeigersinn. Ich denke, es tut mir leid. Ich bin sehr schlecht in Mathe, etwa 2,2 Stunden oder Projekt, und Sie gehen mit 70 Grad oder negativ 90 Grad. Das ist also so, als könnten Sie Ihre Entitäten so gut transformieren, aber nicht Inspektor? Lassen Sie uns auch versuchen, ein zusätzliches CSS hinzuzufügen, um dies wirklich, wirklich gut aussehen zu lassen. Die erste Nacht wird hier tun, ist eine Zeilenhöhe von,sagen wir, 20 Pixel hinzuzufügen sagen wir, . Okay, es sieht also ein bisschen besser aus. Wir können auch Unordnung, bekannt als die vertikale unsere Linie und dann Mitte, so dass die Stunden der Position in der Mitte ihren Grenzen und, ah, was können wir sonst tun? Wir können ein Monster hinzufügen. Und ich denke, lasst uns noch etwas Marge versuchen. Vielleicht. Gehen wir zu Pixeln. Lasst uns ein bisschen mehr gehen. Fünf Pixel. Ich finde, das sieht gut aus. Ja, ich mag, was wir hier drin haben. Das tue ich. Ich mag das. Alles klar, gehen wir weiter. Eigentlich fünf Pixel zu viel sein. Es tut mir leid. Ich mache eigentlich seine Echtzeit, also okay, ich denke, drei Pixel sehen Ah aus, mehr als wären sie jetzt genau da in der Mitte gesäumt. Also gehen wir rein. Rand links sind drei Pixel s. Also lasst uns hier wieder rein und lasst uns das richtig machen. Also werde ich sagen, transformieren und natürlich, wird drehen. Und dann in Klammern. Also haben wir negative 90 Grad, und dann haben wir den Rand links, der drei Pixel Zeilenhöhe war. Lassen Sie uns das Versteck nicht vergessen, haben wir hinzugefügt. Und ich glaube, es waren 20 Pixel, wenn ich mich nicht irre. Lissabon, immer. Wir haben die vertikale Ausrichtung Mitte. Okay, gehen wir weiter und jetzt und retten den Kopf wieder hier drin. Bezieht sich auf Seite und da gehst du. Ok, fast da. Fast da. Zwei weitere Dinge, die wir tun müssen, ist, dass wir hier drin den Hover-Effekt haben, wie Sie sehen können. Also lassen Sie uns schnell den Übereffekt hinzufügen. Gehen wir wieder rein und wir müssen die Klasse anvisieren. Die A-Tags halten die Stunden, also wird das Baht in unseren beiden Top sein. Also komm rüber und ah, Ordnung, also genau hier. Ich werde nur sagen, Ah schlägt rein und dann nach oben und dann schweben. Also werden wir sehr tun, sehr einfach wird es sein, die Farbe der Grenze zu ändern, so dass es Grenze Coehlo und dann Entwickler sein wird. Mit hier ist die volle Null B sieben f. Und dann können wir auch einen Kastenschatten hinzufügen, nur um den Effekt zu verstärken. Entwickeln Sie also Ihre 0001 Pixel und dann können Sie auch die exakt gleiche Farbe hinzufügen. Wieder Oliver. 40 B sieben Ah f f Lasst uns voran gehen und diese retten. Lasst uns hier wieder rein gehen. Nun, zuerst die Seite und voila. Jetzt können Sie sehen, dass wir diesen schönen Übereffekt da drin haben. Aber jetzt ist die Frage, wie erstellen wir den Knöchel, damit wir, wenn wir auf diesen Pfeil klicken, uns den ganzen Weg hierher bringen? Nun, was wir tun müssen, ist, den Knöchel zu erstellen, einige um den Header-Abschnitt. Okay, also gehen wir zurück in die Taschen. Und mein Tonindex von HTML wird das head-out-Tag verwenden, weil dies das Tag ist, das im Grunde die Menüelemente und das lokale enthält. Dies wäre also ein guter Ort, um Knöchel hinzuzufügen. Also werde ich sagen, ich d gleich. Und dann werde ich einfach sagen, Ah, Ah, nach Hause. Das wird die Idee aus dem Knöchel sein. Also jetzt, um diesen Knöchel mit unseren A-Tags zu verknüpfen, werde ich hier reinkommen und du hast die h ref. Ich werde einfach sagen Hash-Tag und dann nach Hause. So wird das jetzt Zahnknöchel verbinden. Lass uns weitermachen. Jetzt speichern Sie diesen Kopf Hintergrund bläst unsere aktualisieren die Seite und nie hier runter kommen. Und ich klicke auf den Pfeil. Sie können sehen, dass es uns den ganzen Weg nach oben führt. Also alles, was ich jetzt tun werde, ist, einfach die restlichen Knöchellinks auf der Seite hinzuzufügen , so gut, komm zurück. Und wie Sie jetzt sehen können, habe ich die verbleibende Knöchellänge hinzugefügt. Und natürlich, wenn Sie auf sie klicken, wird es eine direkt nach oben von der Seite nehmen, und das ist so ziemlich es. Aber ich weiß, dass man hier auf der Modellseite sehen kann, dass der Knöchel sehr, sehr glatt ist, wenn er nach oben scrollt. Unsere gerade jetzt ist nur sofort. Sie klicken auf den Link und es geht den ganzen Weg zur oberen Seife. Wir müssen einen Weg finden, wie wir die Bewegung sehr, sehr glatt machen können . Was wir hier drüben haben, so dass deutsche Veranstaltung ausstrahlt über wird nun die Verbesserung abschließen off sind Knöchellänge. Vielen Dank für das Anschauen 70. Animationen hinzufügen: Nun, Comebacks. In einem vorherigen Video haben wir erfolgreich die Navigationspfeile für unsere verschiedenen Abschnitte hinzugefügt. Aber nur, was jetzt ist, dass, wenn wir auf diese Pfeile klicken, die Navigation der Schule zurück zum oberen Rand der Seite ist nicht glatt. Es ist nicht so, als wäre das, was wir hier haben, ein Beispiel. Sehen Sie, wenn ich auf das klicke, habe ich immer seine Schulen den ganzen Weg zurück glatt gesehen. Aber hier drüben ist es sofort. Also müssen wir das in Ordnung bringen. Beachten Sie aber auch, dass, wenn wir hier auf dem Bild für das Logo schweben, es dreht sich wie das Glücksrad herum. Richtig? Aber Oz macht das nicht. In diesem Video werden wir das auf Probleme beheben, wie wir ein sehr reibungsloses Scrollverhalten für unsere Navigations-Islas hinzufügen . Und dann werden wir auch einige Animation zu unserer lokalen hinzufügen, die diese Kühlung Zukunft zuerst behandeln , So ist es sehr, sehr einfach. Alles, was wir tun müssen, ist im Grunde das HTML-Tag, weil wir auf einer Seite scrollen, die Stunden Schulen auf einer Pizza. Grundsätzlich zielen Sie nicht auf ein bestimmtes Element ab. Du nimmst es im Grunde auf der ganzen Seite, weil deine Schulbildung offen ist. Also werden wir das Ziel der HTML-Steuer Lester. Ich gehe rüber zu Klammern und dann ganz oben im ganz, sehr, ganz oben Bordeaux. Sagen Sie HTML in Ordnung, und öffnen Sie dann die College-Zahnspangen. Und dann wird das Anwesen hier als Schulverhalten bezeichnet. Automatisch ist die Standardeinstellung. Aber jetzt aber ähnlich. Gehen mit glatt gehen. Oh, ja, reibungsloser Bediener, lasst uns weitermachen. Jetzt speichern Sie das. Lassen Sie uns den Kopf zurück, um unsere waren zuerst eine Seite und jetzt können Sie die Schule in der Tat sehen. Ja, es war wirklich so einfach. Ich bin mir ziemlich sicher, dass Sie wahrscheinlich denken, Oh, es wird ziemlich viel Code für uns brauchen, um diesen Effekt zu erzielen. Aber, hey, es war nur eine Zeile, und das war's. So erfolgreich hinzugefügt die coole Schule in Kraft für unsere Navigationspfeile. Aber was ist jetzt mit dem Einheimischen? Wie animieren wir das Logo, so dass es Tates wäre, wenn wir auf sie schweben, um das Logo zu animieren, Ich werde Ihnen eine ganze Reihe von neuen Schwestern Eigenschaften vorstellen müssen, die sich in erster Linie mit Animation beschäftigen . Jetzt ähneln sie dem Übergang, der angeblich Wilfredo mit in der Vergangenheit ging, aber jetzt geht es rein um die Sinnesanimation, und ich bin wirklich aufgeregt. Aber bevor wir da reinkommen, was ist genau passiert? Wenn wir also auf das Logo schweben, soll es sich drehen. Also natürlich wissen wir, dass jetzt die Klasse off Hover erstellen sollte, wenn der Benutzer, wissen Sie, auf dem auf dem Bild schwebt, das es jetzt nehmen sollte. Also lasst uns zuerst Aufgaben, gehen wir zurück zu einer Klammern und suchen wir nach dem Logo-Abschnitt, und ich glaube, es sollte hier sein. Okay, also hier ist es, genau hier. Also lassen Sie es uns einfach hinzufügen. Einfach Marke blasen. Also, was wir tun werden, ist, dass wir Marke auf der Klasse der Marke sehen und dann schweben, und sie werden nicht sagen Logo die Klasse des Logos. Hier passiert also die Magie. Ein Licht. Der erste, den ich sagen werde, ist der Name der Animation. Sie müssen Ihrer Animation einen Namen geben oder es könnte alles in meinem Fall sein, weil wir die lokalen drehen, all die cool. Es ist Schmerz. Okay, das wird der Name unserer Animation sein. Aber jetzt sollen wir die Dauer zur Verfügung stellen. Wie lange sollte die Animation dauern, bevor sie beginnt und dann in der angeblichen Gesamtdauer endet ? Also werde ich Animationsdauer sehen. In diesem Fall gehen wir 1,2 Sekunden. Okay, dann haben wir auch diese als Animations-Timing-Funktion bekannt. Grundsätzlich ist es ein Halbübergang, wo Sie Lini A haben. Sie haben Lockerung Leichtigkeit aus ist im Grunde, Sie diktieren die Geschwindigkeit der Animation von Anfang bis Ende. Wir wollen gefragt Gilenya, also beginnt es im Grunde mit der gleichen Geschwindigkeit endet mit der gleichen Geschwindigkeit, richtig? Aber dann gibt es auch eine andere Eigenschaft, die die Animation ist. Es ist Zählung. Grundsätzlich sagen wir, wie oft die Animation sich wiederholen sollte in unserem Fall wird unendlich sein , weil wir wieder hier reingehen. Sie können jetzt sehen, solange die Maus auf dem Logo hält, es nur weiter dreht und dreht sich und dreht und dreht sich und dreht. Es ist also unendlich, oder? Also, das ist eine Bibel gewählt, der unendliche Wert. Lasst uns hier wieder rein gehen. Das sind also die vollen Werte, die wir verwenden werden. Aber nur damit du es weißt, wir könnten das sogar verkürzen, aber ich werde dir zeigen, wie ich das will, damit ich nicht mit der Animation, lass uns den ganzen Weg hierher kommen. Lassen Sie uns nur in einem neuen Abschnitt erstellen und wir können dies den Animationsbereich nennen. Dies ist, wo die reale Animation alle eintritt. Also lasst uns den Namen auch hier ändern, auf einer Mission. Und OK, jetzt ist die Eigenschaft, die ich Ihnen vorstellen werde, eine extrem mächtige Eigenschaft, bekannt als die at key frames Eigenschaft. Mit dieser Eigenschaft können wir mehrere Animationen angeben, die das Element von Anfang bis Ende durchlaufen soll . Es ist extrem mächtig, also schau dir das an. Okay? Ich werde jetzt den Namen aus der Animation angeben, die Spin ist. Also ein anderer für Schlüsselbilder zu gehen, müssen Sie einen Namen für die Animation mit bereit haben, vorausgesetzt, es hat Spin. Also habe ich Spanien geschweifte Klammern. Und jetzt sieh dir das an. In Ordnung, wir können zuerst einmal angeben, dass ich mich öffnen werde. Ein weiterer Satz Kalibrierungen ist bei mir kahl. Okay, also innerhalb der ersten in unserer Kollegin Klammer, können wir den Anfang angeben. Okay, in diesem Fall wird jetzt null Prozent sein, das ist ein Ausweg, was darauf hindeutet, dass mit physischem Fleck am Anfang beginnt, richtig? Was wir jetzt tun werden, ist, dass wir das Logo verändern werden. Bär mit mir. Wir drehen uns rein, beginnen aber bei Null Grad. Okay? Grundsätzlich alle westlichen hier ist, dass, wenn wir hoffen, über das Logo und einige der Hobos auf dem Logo beginnen, es zu drehen, aber beginnen Sie von Null Grad und dann Statue, drehen Sie es. Okay, jetzt, da wir den Start angegeben haben, können wir jetzt auch das Ende angeben. In diesem Fall jetzt 100% sein, wird es jetzt 100% sein,was im Grunde jetzt ganz am Ende ist. Und dann werden wir wissen, sagen wir, verwandeln. Es wird wieder drehen. Bohrung Jetzt, bis zum Ende der zusätzlichen um 360 Grad gedreht. Ich hoffe wirklich, dass das Sinn ergibt. Grundsätzlich ist immer gerade jetzt, dass ganz am Anfang, bei 0%, wenn der Benutzer auf der Maus-Statue schwebt, drehen, aber beginnen Sie von Null Grad und dann am Ende der Drehung in der Regel um 360 transformiert Grad. Das ist genau das, was das hat. Fallen Sie kein Pferd. Also, aber alle verschwenden mehr Zeit. Gehen wir jetzt weiter. Speichern Sie das. Lasst uns hier wieder rein gehen. Aktualisieren Sie die Seite Und da geht's. Jetzt dreht sich das Logo und es ist unendlich. Also, Bennett, erklären Sie das. Lass uns geben. Lassen Sie mich Ihnen einige ältere Beispiele nennen. Okay, gehen wir zurück hier und nur als Beispiel, sehr, sehr schnell. Lasst uns mit der Situation einen Zähler spielen, richtig? Also lasst uns einfach ändern, könnte das Unendliche sagen. Gehen wir zum Beispiel mit drei . Okay, also wird sich die Animation dreimal wiederholen, also lasst uns aktualisieren. Und jetzt haben wir eins, zwei und drei. Dort geht es nach dem dritten Mal hat es aufgehört. Also lasst uns auch eine weitere Änderung vornehmen. Anstatt wie Null Grad, können wir mit vielleicht 45 Grad beginnen und dann enden. Lassen Sie uns sogar sagen, 70 Grad, so werden Sie jetzt sehen, dass das Logo, das Tate vollständig kennen wird. Lassen Sie uns auffrischen. Jetzt können Sie sehen, dass es sich nicht ganz dreht. Es stoppt die bis 70 Grad. Wie Sie sehen können, ist es nicht 45 dann stoppt ein zu 70. Und da gehst du. Es ist also nicht nur die Rotationsfunktion, die Sie tatsächlich eine Transformation haben. Sie können andere tun, wie Schrägskala. In der Tat, lassen Sie uns Maßstab machen. Skalieren bedeutet einfach, dass Sie die lokale machen werden. Du wirst das Bild groß machen. Dann gibt es auch verschiedene Arten von Fähigkeiten. Lassen Sie uns mit den drei D gehen, also von drei Dimensionen gehen wir mit Skala von 1,2 ah zwei. Und dann sagen wir es auch. Also wirst du 1.2 auf dem X X skalieren, ist y existieren zwei und Z existiert. Und dann auch das Gleiche hier. Lass uns das Gleiche machen. Skala. Ah, drei D Aber jetzt sagen wir ah, 0.52 und dann Ah, 0.5. Das wird verrückt. Eigentlich, habe keine Ahnung, was ich tue. Lass uns das retten. Das wird eine Vene sein, eine verrückte Art von Animation. Lass uns erfrischen und ah, nun, da gehst du. Das ist die Animation genau dort, in der Tat. Also alle wirklich ermutigen Sie, einige Zeit zu verbringen und überprüfen Sie alle Arten von Transformationen, die Sie tun könnten. Sie können auf den Animationen spielen und oh, bevor ich gehe, lassen Sie mich Ihnen sehr, sehr schnell zeigen Die Abkürzung für das Schreiben Ihrer Animationseigenschaften. Also gehen wir zurück zu unserem Logo und ah, es war in Ordnung. Also ist es genau hier. Die Art und Weise, wie Sie dies sehr leicht verkürzen können, wäre nur, um Animation zu sagen. Okay, das wird jetzt das Eigentum selbst sein. Animation, beginnen Sie mit dem Namen aus der Eigenschaft. Das wird immer die erste 1 sein und dann sehen wir Ah, eine 0,2 Sekunden. Denn dass dies natürlich natürlich unsere Zeit in Dauer sein wird. Und dann werden wir wissen, sagen wir linear, was die Zeit in Funktion sein wird. Und dann werden wir endlich mit unendlich gehen, denn das wird die Situation zählen. Unendlich. Da gehst du. Das ist also die Kurzform, um deine Animation dort zu schreiben, natürlich auch die Eigenschaften der Mutter Nation, aber sie werden nicht darauf hineinkommen. Also, Linda scrollen Sie hier nach unten und änderte die Werte hier zurück zu dem, was es war. Also hatten wir die Rotationen und wir hatten Null Grad, und natürlich hatten wir wieder welchen Zustand. Und das hatten wir auch bei 300 und 60 Grad. Alles klar, das sollte es tun. Gehen wir weiter. Rette den Kopf zurück, Teoh. Rechnungen nach oben bezieht sich auf die Seite. Und da gehst du jetzt, um dir ein letztes Beispiel zu geben, bevor du dieses Video umgehst, habe ich schon einen ganz besonderen leeren Dave hier klassifiziert als Sample. Dies ist nur, um Ihnen zu zeigen, was mit Animationen möglich ist, oder? Also habe ich diese Kluft hier genannt Klasse of Sample. Und dann hier konnte ich nicht die Schlüsselfirmen und ich nannte es Farben. Das ist, was Sie jetzt den Animationsnamen direkt hier der Farben haben. Aber jetzt sehen Sie sich das an. Okay? Ich habe die verschiedenen Arten von Animationen angegeben, die die anderen speziellen Dave durchmachen müssen . Also der Anfang, seine Hintergrundfarbe ist rot. Und dann, etwa 1/4 des Weges durch die Animation, sollte die Tasche Knöchel nach einem weiteren Viertel zu schwarz wechseln, was die Hälfte der Vorhänge zu blau wäre, 3/4 der Art, wie es zu orange wird. Und dann, ganz am Ende, ist deine Zunge zurück zu führen. So genau dort können Sie sehen, dass die zusätzlichen Eigenschaften mit einem 100% angewendet haben, so dass der Dave die volle mit aus der Seite, Kopf von 100 Pixeln belegt die volle mit aus der Seite, . Position relativ hinzugefügt. Ich gebe dir die Tasche und kühle auch rot ab und eingeladen. Die Aufnahme-Division beträgt sechs Sekunden, aber dann fügen sie auch Bearbeitungs- und Animationsverzögerung von drei Sekunden hinzu, so dass im Grunde drei Sekunden vergehen müssen, bevor die Animation tatsächlich beginnt. Das ist, was die Animation Verzögerung unseres Eigentums ist. Schauen wir uns mal an und sehen, was genau hier passieren wird. Ich werde die Seite aktualisieren. Rufen wir an und machen es nochmal. Also lassen Sie sehen. Jetzt hat es begonnen. Du denkst es in Betracht. Jetzt ändert es sich. Es ändert sich wieder zu Orange und ist endlich wieder an Kopf. Versuchen wir es noch einmal. So beginnt es bei Weird und Mission Division of Three Seconds ist verstrichen, nicht Animation, beginnt schwarz, blau, orange und schließlich zurück zu ihm. Dies ist also nur ein Beispiel dafür, was Sie mit der Animationseigenschaft von CSS erreichen können, ist extrem leistungsfähig. Sie können verschiedene Arten von Eigenschaften kombinieren, so dass Sie nicht nur mit der Rückseite auf Kahlo bleiben müssen. Sie könnten, wenn Sie dies anwenden, zum Beispiel, sagen wir unseren Text, zum Beispiel, Sie könnten die Telefonzeichen ändern zu finanzieren Warten Sie die Zeilenhöhe alle auf einmal verwenden die Animation. Also ich hoffe wirklich, dass Sie dieses Video genossen haben wir erholt, sagt Animationen. Und auch haben wir die glatte gültig für die Schule Verhaltenseigentum hinzugefügt. Das war's also. Danke so viel Glück. Wir sehen uns in der nächsten Klasse. 71. Filtereffekte hinzufügen: Willkommen zurück im vorherigen Video ist erfolgreich hinzugefügt diese Schule glatte Wirkung für unsere Knöchel Links, und wir konnten auch unser Logo animieren. Aber wenn Sie sehr genau darauf geachtet haben, können Sie feststellen, dass hier auf einem Modell sagte, wenn wir auf dem Logo schweben, gibt es ein wenig von einem Blut-Effekt. Sehen Sie, genau dort sehen Sie das Bild, das Sie sehr, sehr deutlich sehen können . Aber dann, wenn Sie Hoffer auf das Bild jetzt, gibt es eine kleine, wenig verschwommen effektiv genau dort. Unserer, auf der anderen Seite, oder es gibt keinen Schlag. Es ist die ganze Zeit klar. Also, was ich will, ist ein bisschen schnell, Sie zu zeigen oder Ihnen eine neue Eigenschaft als CSS Filter Eigenschaft bekannt, wo wir Dinge wie Bluteffekte, Helligkeit, Kontrast und so weiter hinzufügen können Helligkeit, . Also lasst uns das tun. Ich gehe zurück hierher und anders als hier, wo wir die Hover-Klasse für das Logo haben, werde ich keine Filter machen. Und das genau da ist das Eigentum. Und dann haben wir verschiedene Werte für Filter. In diesem Fall werde ich jetzt mit dem Weichzeichnen ein Pixel gehen, das der Wert sein wird, den ein Pixel tut. Gehen Sie voran, sparen Kopf zurück hier bezieht sich auf Seite, und jetzt können Sie sehen, dass Blut-Effekt direkt dort. So können Sie es erreichen. Blut-Effekt mit CIA sagt. Aber natürlich gibt es andere Werte, die zum Filtern nach oben verfügbar sind. Also, zum Beispiel, lassen Sie mich gehen und entfernen Sie die Unschärfe und lassen Sie uns etwas anderes versuchen. Ok? Ich kann dazu führen, dass ich Helligkeit sagen kann, und wir können hier einen Prozentwert geben. Kann sehen ist nicht wie 200% nur als Beispiel. Lass uns weitermachen, das speichern und dann, wenn ich hier reingehe, aktualisieren Sie die Seite und dass Sie dagegen sind. Das Bild ist jetzt 200% heller als es ursprünglich war. Sie können andere Dinge tun, damit Sie durch die Art und Weise kombinieren können, wie Sie Wert kombinieren können. Also lasst uns Helligkeit sein. Ich kann auch sagen, Unschärfe und dann unser ein Pixel, Also alles, was Sie tun müssen, ist nur ein Leerzeichen zwischen Ihren beiden verschiedenen Werten hinzuzufügen. Lassen Sie uns voran, speichern Sie das, und jetzt sollten wir mehrere Effekte sehen. Da gehst du. Also jetzt ist es 20% heller, aber es ist auch Blut um ein Pixel. Ein weiterer sehr interessanter Wert könnte hier hinzufügen. Lassen Sie mich umziehen. All das wird Graustufen sein. Dies wird tatsächlich Ihr kaltes Bild in Schwarzweiß verwandeln. Also, wenn wir jetzt 100% sagen, werden sie schwarz-weiß werden. Wir schweben auf dem Logo und los geht's. Ich sage Ihnen, CSS ist erstaunt. Und Sie würden denken, dass Sie einen sehr fortgeschrittenen Code benötigen, um all diese Effekte zu erzielen . Aber das tust du nicht. Da gehst du. Wir haben das jetzt zu 100%. Eigentlich bin ich Chris, um zu sehen, was passieren wird, wenn wir Brüder sind, sagen wir mal, 50%. Ich bin neugierig. Lass uns das sagen und sehen, was passieren wird. Lassen Sie uns auffrischen und OK, also sind das 50%. Nicht schlecht, überhaupt nicht schlecht. Also lasst uns wieder hier reingehen und einfach das ändern, was es sein soll. Also das ist Filter Ah, Unschärfe. Und dann, natürlich, sind abgenutzte Pixel. Und lasst uns das retten. Ich habe gerade wieder hier drinnen geschossen. Aktualisieren und los geht's. So können Sie mit der Filtereigenschaft zusätzliche Effekte auf Ihre Bilder erstellen. Danke so viel Vermögen. Wir sehen uns in der nächsten Klasse 72. Projektüberprüfung: Nun, das ist es, was wir am Ende dieses Projektabschnitts gekommen sind, und wir haben unsere Zellen gebaut. Diese vollständig abgenutzte Seite war mit HTML-Instanzen verärgert, und ich hoffe, Sie hatten viel Telefon, und ich hoffe, Sie haben ziemlich viel über HTML und CSS gelernt. Aber es gibt eine Sache, die wir noch tun müssen, und das ist, dass wir die Website sofort reagieren müssen. Es sieht gut aus an Deck Haltestellen, aber wenn Sie diese Website auf einem Mobiltelefon, oder vielleicht sogar auf dem Tisch, es könnte Sie entdecken, dass die Dinge waren ruhig, wie sie scheinen. Vielleicht sehen Sie eine Menge Säulen, diesen Gelenkkopf. Vielleicht wäre ein Texas zu groß. Es wird nicht ganz so gut aussehen. Daher müssen wir die Reaktionsfähigkeit in Angriff nehmen. Und das ist genau das, was wir im nächsten Abschnitt tun werden. Dann seh ich dich. 73. Vorschau von Vorstellung: Alles klar. Nur eine offizielle Begrüßung in der Reaktionsfähigkeit Sektion. Und unser Ziel ist es, sicherzustellen, dass unsere Website auf Tablets und Mobiltelefonen genauso gut aussieht wie auf einem Text nach oben. Nun, auf dem Dexter, sieht es gut aus. Alles sieht ganz gut aus, wie es ist. Aber das Ziel hier ist, wenn wir beginnen, die Bildschirmgröße zu minimieren. So, zum Beispiel, gerade jetzt, gerade hier, wäre dies die typische Schielengröße von einem Tablet und Sie können jetzt sehen. Aber stehen Sie, um einige Veränderungen zu sehen. Wir können das Navigationsmenü nicht mehr sehen, aber jetzt haben wir die traditionellen Hamburgermenüs. Wenn Sie den Mauszeiger darin bewegen, haben Sie nun Zugriff auf die Elemente im Hauptmenü. Und wenn ich anfangen, Schule unten, werden Sie feststellen, einige Änderungen sagt vorausgesetzt, Jetzt ist jetzt zwei Spalten, bevor es früher drei durch Gehen. Das ist jetzt zwei Spalten des Teams ist jetzt drei Spalten und so weiter und so weiter. Und wenn ich den ganzen Weg bis zum Ende der kleinen Bildschirmgröße gehe, wäre dies derjenige für ein Mobiltelefon. Sie können die vielen Änderungen sehen, sagt zur Verfügung gestellt ist jetzt eine einzelne Spalte. Warum Walk With Us ist auch eine einzige Spalte, dass das Team jetzt zwei Spalten. Unsere Testimonials sind eine einzige Spalte. Es war schon immer eine einzige Spalte sind Reinigungen jetzt. Zwei Spalten sollen vier Spalten auf der nächsten nach oben und natürlich natürlich einige Änderungen in der Zukunft sowie auf der Kopfzeile. Das Ziel hier ist es, Ihnen zu zeigen, wie Sie Ihre Inhalte anpassbar machen können, so dass, wenn der Bildschirm, die Bedrohung des Bildschirms, den Inhalt ändert. Außerdem die Größe des Inhalts auch die Strukturänderungen, um zu reflektieren, dass die Bildschirme ändern , dass dies der ganze Punkt außerhalb dieses gesamten Abschnitts ist. Lehnen Sie sich zurück, entspannen Sie sich, und ich hoffe, Sie finden in diesem Abschnitt nützlich. Lasst uns anfangen. 74. Einführung in die mobile Reaktionsfähigkeit: so willkommen zu diesem neuen Abschnitt. Will wird einen Blick auf mobile Reaktionsfähigkeit werfen und bevor wir anfangen, jeden Code zu tun und werfen wir einen Blick auf, was wir derzeit haben. Und genau jetzt würde die Website auf einem Tablet-Gerät aussehen. Und lassen Sie uns versuchen, nach unten zu scrollen. Bisher, der Kopf. Sieht gut aus. Wir haben ein Logo. Wir haben das Hauptmenü. Es ist in Ordnung. Der Heldenbereich ist in Ordnung über unsere Sektion ist immer noch in Ordnung. zur Verfügung gestellten Dienstleistungen sind in Ordnung. Das warum mit meinem Buch dieser Sektion. Ich denke, wir können das verbessern, indem wir vielleicht zeigen. Zwei Säulen sollen vier Spalten sein. Ah, einfach mit vielleicht gemacht das Team können wir Mitt Das Team sind drei Spalten im Gegensatz zu vier Spalten. Zeugnis sieht auch gut aus. Kunden sehen immer noch in Ordnung aus. Kontaktieren Sie uns gut. Lasst uns weiter nach unten gehen. In der Tat, lassen Sie uns einfach den ganzen Weg zur kleinen Bildschirmgröße gehen. Das wäre also für ein Mobiltelefon und genau hier das Foto. Sie können sehen, dass wir hier einige Änderungen vornehmen müssen. Lass uns den ganzen Weg nach oben gehen. Ja, unsere Kunden, wir können hier definitiv verbessern, indem wir vielleicht die Logos auf zwei Spalten zeigen, im Gegensatz zu den Focal-Ums, die wir hier haben. Testimonials sieht standardmäßig gut aus. Ich glaube nicht, dass wir etwas für das Zeugnis ändern müssen. Aber das liegt daran, dass wir die Testimonials bereits in einzelnen Zeilen selbst anzeigen. Sie sind nur eine Spalte werden nicht im Gegensatz zu den anderen Abschnitten, die vielleicht, wie, zwei Spalten, drei Zeilen und so weiter haben vielleicht, wie, wie zwei Spalten, . Also definitiv auf. Tut mir Leid. Auf jeden Fall das Team kennenlernen. Muss am Handy enorm verbessert werden. Unsere Bildschirmgröße. Du kannst es jetzt sehen. Das sieht überhaupt nicht gut aus. Lass uns weiter nach oben gehen. Ja, ich gehe. Das sieht furchtbar aus. Der vernünftige Kampf. Es sieht auch schrecklich aus. Also wahrscheinlich hier müssen zwei Spalten angezeigt werden. Oder vielleicht muss sogar eine einzelne Spalte warten und sehen. Ja. Ja. Ah, wer wir sind. Was wir tun, müssen auch einzelne Spalten sein. Und natürlich, der Kopf. Ah, nun, wir müssen hier einige wichtige Verbesserungen vornehmen. Meistens die Speisekarte, wie Sie sehen können. Und so es im Idealfall sollte es im Idealfallaussehen. So können Sie sehen. Moment haben wir das Menü, und es erscheint nur, wenn wir auf dem Menüpunkt schweben, können Sie jetzt sehen, alle sind viele Elemente hier oben. Lassen Sie uns nach unten scrollen und sehen, was wir sonst noch haben, damit Sie sehen können, wie sie über alle Abschnitt ist wer wir sind, was wir tun. So Dienstleistungen zur Verfügung gestellt, die Sie jetzt sehen können, ist eine einzelne Spalte. Jeder sieht so viel besser aus. Gleiches mit warum zu Fuß mit uns gemacht das Team ist in zwei Spalten H und Testimonials und Kunden. Konsequenzen in zwei kommt im Gegensatz zu den vier, und der Rest bleibt gleich, so dass das sind die Verbesserungen zu machen haben. Aber bevor wir in die eigentliche Codierung springen, lassen Sie mich Ihnen zeigen, wie Sie Ihre Bildschirmgrößen hinzufügen können. 75. Die Brechpunkte erstellen: Nun, komm zurück. Also lassen Sie uns jetzt über die Bildschirmgrößen sprechen, wie wir die Schielen Größe für ein Tablet und auch, wie wir es nehmen können, ist Queen Size für ein mobiles Gerät? Ein Telefon? Im Grunde. Also haben wir dieses Ding namens Brick Points, wenn es um CSS-Reaktionsfähigkeit geht und ein Breakpoint wird durch definiert, wenn es eine große Änderung unseres Stils gibt. Also, was ich hier sagen will, ist das OK? An diesem Punkt im Moment bleibt alles gleich, oder? Selbst wenn ich nach unten scrolle, können Sie sehen, dass der Inhalt ziemlich identisch mit der Struktur ist. Es ist so ziemlich das gleiche wie bei voller Größe. Aber dann, wenn wir weiter die Bildschirmgröße zu minimieren und dann kommt es hier. Also hier, wo Sie das Hamburg haben, Deutschland, hier oben, das nennen wir einen Bruchpunkt. Dies ist die besondere Bildschirmgröße, bei der eine neue Designänderung eintritt. Und Sie können natürlich, natürlich, dass die Änderung jetzt ein Hamburger-Menü haben würde. Wenn wir nach unten scrollen, können Sie jetzt sehen, dass vernünftiges Violett jetzt im Grunde zwei Spalten in jeder Zeile ist, und Sie haben einige andere Änderungen in hier als auch, mit weißen Spaziergang mit uns und dem Team. Das nennen wir also einen Ziegelpunkt. Also, was wir tun werden es sagt Reaktionsfähigkeit, ist, dass wir zeigen, dass, Okay, sobald der Bildschirm , der diese Bildschirmgröße ist, initiiert diese neuen Designänderungen und dann, wenn wir weiter minimieren Sie den Bildschirm, lassen Sie uns weitermachen. Sie einfach weiter. Keine Veränderung, keine Veränderung, keine Veränderung. Und dann plötzlich hier gibt es einen weiteren großen, denn jetzt können Sie sehen, dass Sinn vorgesehen ist, ist nicht eine einzelne Spalte sowie einige andere Abschnitte hier drin. Es wird also noch einen Bruchpunkt geben. Idealerweise sollten Sie ein Minimum von zwei Breakpoints haben. Einer wäre für Ihren Tisch. Es ist Queen Size, und dann wäre die andere für Ihr Handy Scoring-Größe. Aber Sie können die höchsten drei gehen, oder vielleicht sogar für unsere verschiedenen Breakpoints. Es hängt alles von der Art von Inhalten ab, die Sie haben und wie es aussieht. Also hier ist die Faneca. Gehen wir weiter und fügen Sie die Wafer hinzu. Break 0.4. Es ist Queen Size um diesen speziellen Bereich, der etwa 1000 und 24 Pixel ist. Also lasst uns das machen. Ich werde hier reingehen. Gehen wir zu Maine zu CSS. Lass uns den ganzen Weg hierher kommen und ich werde schnappen. Es gibt Inhalte, weil wir einen ganz neuen Abschnitt erstellen. Ich werde das beschleunigen und dann können wir das nennen. Lassen Sie uns nur anrufen ist die äh, mobile Briefe genannt seine Reaktionsfähigkeit, Stattdessen, Reaktionsfähigkeit. Und jetzt lassen Sie uns in neue Zeile. Und hier werde ich sagen, Lassen Sie uns einen neuen Kommentar hinzufügen. Ah, vierter Schrägstrich Hysterie und jetzt werde ich kalt ist die Tabletten Bruchpunkt. In Ordnung, also noch ein hysterischer vier Schrägstrich und jetzt hier ist der eigentliche Code, um eine Pause zu schaffen, wenn wir bei Media und dann auf dem Lee-Bildschirm sagen, und wir werden jetzt im Maximum mit sitzen. Solange dieser Inhalt auf einer maximalen Bildschirmgröße von 10 24 Pixel-Initiativen , neue Änderungen angezeigt , wird, muss ich die College-Klammern direkt dort hinzufügen. Das war's also. Wir haben den ersten 14 Tisch es erstellt, aber jetzt können wir genau das Gleiche wieder machen. Solyndras Kopie alles hier ein Exemplar Komm hier runter und änderte dann Tabletten zu Let's go with our phone. Und jetzt hier drin können wir die Bildschirmgröße auf 768 Pixel ändern. Jetzt sind 10 24 Pixel und 768 Pixel wie die Standard-Bildschirmgrößen sind eine kleinere Bildschirmgröße für als 76 Es wäre unsere 4 80 Das heißt, wenn Sie gehen wollen, dass. Ich denke, das ist wirklich der minimale Bildschirm, sagt man kann tatsächlich für 80 Pixel zielen. Aber für die Zwecke dieser Ursache werden wir zwei Bruchpunkte erstellen, die 10 24 und dann 768 Pixel betragen würden. Das wäre also für Taylor-Geräte. Dies wäre für das Telefon, unser mobiles Gerät. Also, das ist es für die Erstellung sind Bruchpunkte. Deutsch Advantix Video verfügbar jetzt beginnen, einige Responsive Design Änderungen mit CSSanzuwenden CSS 76. Den mobilen Header Teil erstellen: Nun ja. Comebacks in einem früheren Video ist erfolgreich unsere Breakpoints für unser mobiles Design erstellt . Lassen Sie uns nun beginnen, unsere CSS-Änderungen für Reaktionsfähigkeit zu erstellen. Und das erste Mal in einem Ziel wird das Handy sein. Viele, die in der Regel sind eines der schwierigeren Teile aus amable Reaktionsfähigkeit. So ist das gerade jetzt, wie die vielen aussieht, als ob es sich nie ändert Board versuchen zu tun, ist, die vielen dazu zu bringen , genau so aussehen zu lassen. Also haben wir drei Bars. Und wenn wir diese drei Dollar behalten , dann erscheinen jetzt die Menüpunkte. Beachten Sie aber auch, dass wir bei voller Bildschirmgröße diese Balken nicht sehen. Sie sind nicht da. Es ist auf Lee. Wenn wir zu einem Satz in Bildschirmgröße kommen , dann ist es hier. Dort erscheinen die drei Balken, und dann verschwindet das reguläre Menü. Wie sollen wir diesen Effekt erzielen? Nun, die erste Minute tun jetzt ist, acht diese drei Balken zu schaffen. Lassen Sie uns sie zuerst erschaffen. Okay, also hier ist, was wir tun werden. Lassen Sie uns den Kopf zurück, um CSS zu erhalten, und wir werden tun, ist der Kopf über den Index dot html und dann genau hier. Ah, gerade unter der Naff-Klasse von Männern. Hier werden wir die drei hinzufügen, Boss. Also, um das zu tun, sieh dir das an. Als ob ich Dev-Klasse sagen würde. Und nennen wir das einfach. Ah, nennen wir diesen Griff. Okay, du kannst diesen Griff anrufen. Das wird der Name für Hamburger-Menü sein. Im Grunde gehen wir voran und schließen das. Also, jetzt innerhalb dieser Klasse von Griff, werden sie drei Dibs hinzufügen. Drei leere Leben, in der Tat. Also lasst uns das machen. Es wird also die 1. 1 die 2. 1 und natürlich 1/3 1, weil wir drei haben. Boss, das haben wir drei leere Leben. Also lasst uns jetzt voran gehen und das speichern. Und natürlich, wenn wir in unsere Broza zurückgekehrt sind, werden wir es nicht sehen, weil es leer ist. Es gibt nichts, was du siehst. Also lassen Sie uns zurück zu Maine, dass CSS und dann von hier, gehen wir den ganzen Weg nach oben und lassen Sie uns nach dem Menübereich suchen und es ist genau hier. Also lasst uns das tun. Okay, lass uns jetzt weitermachen und diesen leeren Dibs etwas Styling hinzufügen. Und was genau versuchen wir zu erreichen? Nun, schauen wir uns mal an. Okay? Das ist es, was wir erreichen wollen. Also jeder Tag von jetzt, wie Sie sehen können, hat einen Hintergrund Kahlo. Es scheint seinen Zustand mit einer festgelegten Höhe festgelegt zu haben, und es gibt auch einen gewissen Rand, um die drei Zeilen zu trennen. Also lasst uns das machen. Okay? Zuerst werde ich sagen, hier ist das Menü und dann Dot Handle und dann das div. In Ordnung, also zielen wir jetzt auf die leeren Dibs. Die erste gewinnbringende Anzeige wird also der Hintergrund sein. Kahlo und ich haben meine Bragan-Farbe hier auf äh E fünf c fünf e fünf. Und jetzt haben wir eine mit jedem. Dave hat eine Breite von 22 Pixeln und dann eine sehr kurze Höhe von zwei Pixeln. Und dann lassen Sie uns auch etwas Rand, fünf Pixel und Null hinzufügen . Okay, gehen wir weiter, um das zu retten. Gehen wir zurück zu unserem Boza. Lasst uns das erweitern. Lassen Sie uns auf Seite beziehen und dort gehen Sie. OK, also aus irgendeinem Grund geht das voll mit nicht sicher, was passiert. Lasst uns hier wieder rein gehen. Oh, es tut mir leid. Ich habe nicht richtig buchstabiert. Ah, ja, das ist die Art von Sache, die passiert, wenn Sie programmieren. Und wir haben Videos gleichzeitig angerufen. Ich entschuldige mich. Also, mit 22 Pixeln, gehen wir wieder rein. Bezieht sich auf Seite und da gehst du. Okay, jetzt können Sie sehen, dass wir jetzt das Hamburger Menü offensichtlich haben. Ehrfürchtig. Aber wir müssen den Ausweis bekommen. Die vielen Gegenstände hier drüben rechts. Wir müssen die Speisekarte hier nach rechts bringen. Also offensichtlich, Moment, sollten Sie über Float nachdenken. Also werden wir das Menü ganz nach rechts fließen. Also lasst uns das machen. Okay? Ich gehe zurück. Zwei Haupt, dass CSS. Aber jetzt werden wir den Haupt-Dave-Halt in den drei Dips anvisieren. Und natürlich wird das die Klasse aus dem Griff sein. Das ist die Klasse. Wir werden ans Licht schweben. Also lasst uns das hier machen. Ich werde sagen, Menüpunkt-Griff. Und dann genau hier drin, genau so, werde ich sagen, Schwimmer an die Lichter. Okay, gehen wir weiter. Speichern Sie dies und lassen Sie uns sehen, wie es aussah wie aktualisieren. Und da gehst du. Okay, jetzt können Sie sehen, dass es da drüben zum Licht ist, aber wir wollen noch nicht angezeigt werden. Also wollen wir das Menü verstecken. Das Hamburger-Menü Bis zu den Scrimmages, die Bildschirmgröße für unsere Tablets wird so etwas verwenden müssen. Spielen Sie keine. Aber wir werden auch Position relativ verwenden, weil wir gehen, um die Menüpunkte zu positionieren . Diese vielen Gegenstände begannen, sie absolut zu positionieren . Also müssen wir einen Knöchelpunkt erstellen. Alles, was wir den Hamburger viele Persönlichkeit hinzufügen können und machen dies der Ankerpunkt für die geringsten Elemente. Also, Lektionen werde ich hier wieder reingehen. Also werde ich sagen, dieses Spiel keine, um es zu verstecken. Und dann lassen Sie uns Position für relative hinzufügen, weil wir erstellen werden. Wir werden es als Ankerpunkt für unsere Menüpunkte verwenden. Okay, das ist der Griff. Nun gehen wir über zu unserem responsiven Abschnitt und dann genau hier werden wir jetzt sehen, wo wir haben 10 im Fußball jetzt sehen, zeigen Sie das Menü-Handle als Block, also tun im Grunde das Gegenteil jetzt, weil genau hier wird dies die Kontrolle Ansicht für das mobile Gerät für Tablets so wird einfach sagen Block, So ging im Wesentlichen gab es sagen,, Will den Bildschirm, die ein Maximum mit Aufmerksamkeit für Pixel ist, zeigen Sie den Griff als Block angezeigt. Nun beachten Sie, dass es sei denn, wir kommen hier für das Telefon und dann überschreiben diese Partikel-Up-Stil , was auch immer Stile, die wir für den Briefbildschirm enthalten, wird automatisch von diesem kleinen Hintern vererbt werden, nur so dass Sie es wissen. Es besteht also keine Notwendigkeit für uns, hierher zu kommen und auch genau dasselbe. Dafür gibt es keinen Grund. Also lasst uns weitermachen. Speichern Sie das. Lasst uns hier wieder rein gehen. Lassen Sie uns auffrischen. Und jetzt, wenn wir Männer Königin jetzt minimieren, können Sie sehen, dass wir die Speisekarte direkt dort erscheinen. Sie können sehen, dass es jetzt offensichtlich genial ist. Allerdings müssen wir jetzt unser Hauptmenü auf eine Art Schwimmer unter dem Hamburger bringen. Viele wie das, was wir haben, sind hier drüben, wie Sie sehen können. Also die Sache ist jetzt, der einzige Grund, warum wir die vielen Elemente haben, die viele Elemente standardmäßig sind Blockelemente. Aber der einzige Grund, warum sie zeigen, gibt es ein Land Blocks ist, weil wir unseren Schwimmer auf sie angewendet haben . Siehst du, genau hier haben wir Float links. Also, wenn Sie entfernen Float links jetzt, können Sie sehen, da jetzt erscheinen, wie sie schießen. Aber wir können auch die Eigenschaft aus Text ausrichten anwenden, richtig, wie Sie nicht können, wie Sie sehen können. Jetzt sehen wir genau so aus, wie wir hier drüben haben. Die Listenelemente, aber der Text liegen auf dem Licht und dann keine Floats. Gehen wir also voran und wenden Sie diese Änderungen hier an. Ich werde einfach nicht sagen Menü und dann Ally, und dann sagen wir Float. Keine. Daniels haben aber auch einen Text, der nach rechts ausgerichtet ist. Lasst uns jetzt voran Save das. Lasst uns hier wieder rein gehen. Lassen Sie uns die Seite aktualisieren. Tut mir leid, lange Seite. Lassen Sie uns diese Seite aktualisieren und da gehen Sie. Ehrfürchtig. Also, jetzt haben wir unsere Menüpunkte, die wie Block-Elemente aussehen, nimmt eine Linie zum Licht. Alles, was wir jetzt tun müssen, ist herauszufinden, wie wir sie so positionieren können, dass sie nur auf der Marine-Hamburger Speisekarte erscheinen . Aber dann Onley erscheinen, wenn wir ho var auf unserem bescheidenen Menü bekommen. Also werden wir das im Vertex-Video angehen 77. Den mobilen Header Teil 2: Willkommen zurück zu Teil zwei für Stil in unserem mobilen Kopf. Erteilen Sie auch warnen, wir haben in der Lage, einige gute Arbeit zu tun Bisher haben wir in der Lage, den Hamburger zu bekommen, viele nur einmal anzuzeigen, es, die eine Bildschirmgröße von 10 24 Pixel ist, wie es gerade jetzt auf Tech Stop, es ist vollkommen in Ordnung. Aber dann, wenn wir bekommen zahnig, sind vorgebracht Ansicht. Das ist es, was wir derzeit haben. Was wir also versuchen müssen, jetzt zu erreichen, ist herauszufinden, wie wir alle Listenelemente vor der Anzeige verstecken können . Grundsätzlich müssen wir es unter dem Hamburger Menü unterhalten und dann Onley ihnen zeigen, wenn wir auf der Hamburger Speisekarte schweben. Also, wie ich in einem vorherigen Video angedeutet habe, haben wir bereits die Hamburger Menüposition relativ gemacht, weil wir absolut Position sind die wenigsten Elemente. Also lasst uns zuerst das tun. Okay, ich werde hier reingehen und hierher einladen. Mal sehen, gerade oben hier drin, Ich werde sagen, Punkt-Menü und dann l okay, und jetzt sagen wir einfach Position wird App-Salz sein. Okay, gehen wir weiter. Speichern Sie das. Sehen wir uns jetzt die Veränderung an. Aktualisieren. Und da gehst du. Okay, jetzt können Sie sehen, dass es positioniert ist. Absolut. Aber dann kann man auch sehen, dass es im Grunde jetzt nach draußen geht. Es ist Grenzlinie für elementare. Und öffne das eine Sekunde. Also jetzt müssen wir hier runter zum Weißen blättern, um sie zu sehen. Die Art und Weise, wie wir sicherstellen können, dass sie für die bescheidene Regierung nicht außerhalb der Grenze gehen , besteht darin, einfach Licht Null zu sparen. Also lasst uns das machen. Ich gehe hier wieder rein. Zwei Haupt, die aufhört und hier einladen. Ich werde die richtige Null retten. Dadurch werden die absoluten Positionselemente innerhalb des Rahmens gesperrt. Lass uns wieder rein mit frischem. Und da gehst du. Ehrfürchtig. Also jetzt haben wir die Menüpunkte, Absolute Position direkt da an der Grenze, abseits des Hamburger, viele tolle. Also der nächste Schritt jetzt wäre, einen Weg herauszufinden, wie groß kann die vielen Gegenstände verstecken und dann Onley ihnen zeigen, wenn wir ho über den Hamburger. Viele, damit wir das tun können. Ordnung, InOrdnung, gehen wir zurück, damit wir hier das Richtige sagen können. Aber wir haben unsere Speisekarte ul. Wir können einfach sagen, dieses Spiel keines. Ok? Und jetzt können wir sagen, Show. Es steht also auf der Speisekarte, der Speisekarte. Und dann, wenn wir jetzt auf ein Menü für die U L zeigen, die, ähm Okay, trotz der geringsten Elemente werden als Block angezeigt, richtig. Standardmäßig werden wir unsere Liste verstecken. Item Sie den Handle Hinweis. Übrigens behandeln sie Klassen. Das ist derjenige, der die drei Balken anzeigt. Also gibt es dieses Flugzeug als Block. Wir reden nicht darüber. Wir sprechen über den tatsächlich am wenigsten Versuch selbst, nämlich die UL-Klasse. Alles klar, das ist derjenige, den wir gesehen haben, der keine zeigt. Aber dann nun als Block im Ganzen angezeigt, drüben auf unserem Hamburger. Viele. Das ist genau das, was die Augen hier vor sich gehen. Also lasst uns weitermachen. Speichern Sie das. Hier ist der Kopf zurück für zuerst eine Seite und lass uns warten und sehen. Alles klar, damit sie sehen können, dass es weg ist. Die Hamburg, Deutschland ist immer noch da. Aber dann, wenn wir auf der Hamburgerkarte schweben, jetzt können Sie sehen, dass wir jetzt die Liste haben. Gegenstände sind Pierre in genau so. Sieh dir das an. Unheimliche. Das ist großartig. Ah, da gehst du. Okay, also, fast da zu sein, aber beachten Sie, dass ich eine Sache würde, wenn wir über die Menüpunkte hinüber sehen wie es aussieht, ist, als wäre es ein Übergang, der vor sich geht. Ok. Siehst du das? Es ist sehr, sehr, sehr glatt. Es ist nicht so, wie wir haben. Ah, es tut mir leid. Lassen Sie mich das zurückstellen. Es ist nicht so, wie wir hier drüben haben, wo es sofort ist. So gibt es hier einen Übergangseffekt, aber Übergänge funktionieren nicht für die Anzeigeeigenschaft. Also im Grunde können wir sagen Übergang Anzeige und einfach. Und er ist aus dem Zeug. Ich weiß, das wird nicht funktionieren. Wie können wir also den Übergangseffekt anwenden, während sich immer noch in den vielen Elementen verstecken? Und dann auf Lee zeigt sie weg ho über im Navigationsmenü Aber wir können tun, ist, einfach die Anzeige in eine andere Eigenschaft zu ändern, die als die Deckkraft bekannt ist. Okay, aber wir haben dieses Spiel. Ich werde die Anzeige hier in die Deckkraft ändern, und dann, um nichts zu zeigen, werde ich Opazität sagen. Null, die im Grunde die Menüpunkte verstecken und dann gleich hier. Wenn wir über ein Menü, Elemente lassen mich die Anzeige auch hier ändern, zurück zur Kapazität. Und dann statt Null, haben wir jetzt ah eins. Okay, gehen wir weiter, speichern Sie das. Aktualisieren Sie die Seite und sagt, dass sie sehen kann Im Moment sind die Effekte noch nicht eingetreten, weil wir den Übergang nicht anwenden. Aber man kann sehen, es ist immer noch im Grunde die gleiche Art und Weise laufen Die vielen Gegenstände nicht gezeigt, bis jetzt, über auf der Hamburger-Speisekarte. Okay, also lasst uns jetzt weitermachen und den Übergangseffekt hinzufügen. Werde ich das hier machen, wo wir viele dich haben? Nun, alle, die hierher kommen und sagen Übergangstrübung. Und jetzt können wir hinzufügen, das sind 0,5 Sekunden. Und dann wäre die Timing-Funktion hier Leichtigkeit. Okay, gehen wir weiter. Speichern Sie das. Lass uns wieder reingehen. Hier bezieht sich die Seite, und jetzt können Sie sehen, wie der Übergangseffekt erscheint. Allerdings können Sie eine weitere geringfügige Änderung feststellen, noch bevor wir zum Hamburger kommen. Wenn Sie das Menü sehen können, beginnen Elemente zu zeigen im Grunde will, die Reittiere tritt in die Zeugnisse, alle mit Bereich, die Sie sehen können, sobald es hier kommt, beginnen alle frühesten Versuche zu zeigen. Also, das ist etwas, das wir mit nur einer Liste versuchen zu beheben, zu zeigen, wenn wir tatsächlich über den Korb. Ich habe viele. Um das zu beheben, werde ich Ihnen den Inspektor noch einmal vorstellen. Also lasst uns das machen. Ok? Lassen Sie uns zuerst sicherstellen, dass diese Jungs standardmäßig nicht einmal sehen. Wovon rede ich? Lass uns das machen. Ok? Ich gehe zurück zu den IES und eigentlich zur UL. Entschuldigung. Lass uns das machen. Ok? Ich werde die Deckkraft entfernen, so dass sie immer standardmäßig angezeigt werden. Aber nun wollen wir versuchen, diese Listeneinträge unter dem Hamburger Menü zu verstecken. Was wir tun können, ist eine Top-Position einzuführen, aber dann in negative oder, sagen wir, 100 Pixel als Beispiel. Also, warum können Sie sehen, dass wir nicht mehr über. Wenn wir also weiter wachsen, zunehmen, zunehmen, zunehmen, zunehmen, zunehmen, können Sie sehen, dass sie verschwinden. Verschwinden, Schein, verschwindet. Lass uns den ganzen Weg gehen, Teoh. Mal sehen. Okay, lass uns nur etwas fremd zu Pixel. So werden negative 100 Pixel standardmäßig. Blenden Sie die Menüelemente aus. Alles klar, machen wir das noch mal. Ich gehe zurück und lass uns das machen. Ich werde Tup Negativ sagen. 400 Pixel. Okay, gehen wir weiter. Jetzt speichern Sie das und dann gehe ich wieder rein. Lassen Sie uns die Seite aktualisieren. Und jetzt bemerken, dass, wenn wir hier schweben, wir nicht mehr sehen, die Menüpunkte erklären, weil wir sie bereits den ganzen Weg nach oben außerhalb des Browsers geschoben haben, aber auch jetzt wieder über auf dem Hamburger. Manu, wir sehen sie immer noch nicht, weil sie immer noch negative 400 Pixel haben. Also, jetzt müssen wir sagen, wenn wir auf dem Hamburger-Menü schweben, ändern Sie die oberste Position aus der UL-Klasse. Also weniger werde ich den Inspektor noch einmal vorstellen und das machen. Okay, ich gehe rüber zur Klasse der Männer, du und dann genau hier, wo du Hall of hast, klicke ich auf Hoffnung und erzwinge dann einfach den Schwebestaat. Okay, also wird dies jetzt alle verfügbaren CSS anzeigen, wenn wir unsere auf dem Menü haben und wir speziell Ziele in der U. L. Element überlebt Hier haben Sie unsere Top-Funder Pixel hier oben. Hier schweben wir auf dem, ähm, ich werde nicht oben sagen. Ah, sagen wir vielleicht 20 Pixel. Okay, jetzt können Sie sehen, dass sie 20 Pixel sind. Wird in der Tat die Menüpunkte richtig anzeigen. Also 20 Pixel, vielleicht 25 Pixel. , Ich denke,wenn es gut ist. Also einfach so, wenn sie schweben, ein Hamburger-Menü besessen, ändern Sie die obere Position von negativen 100 Pixel auf 20 Pixel. Also lasst uns weitermachen und das tun. Ich werde hier wieder rein gehen und ganz einfach, genau hier. Ich werde nur die 20 besten Pixel sagen. Lasst uns weitermachen. Rette diesen Kopf wieder hier drin. Aktualisieren Sie die Seite. Und da gehst du. Wir haben erfolgreich das Hamburgerfleisch geschaffen, dass wir hier drüben haben. Wie Sie sehen können, tut es mir leid. Lassen Sie mich das hier wieder reinlegen. Und ah, das ist es so ziemlich. Der einzige große Unterschied hier ist natürlich, die Ränder, die Sie hier sehen können. Wir haben wirklich keinen Spielraum. Vielleicht können wir auch die Marge ändern. Vielleicht auch die Hamburgerkarte ein wenig nach unten geschoben. Sie können sehen, dass es ein bisschen höher ist als das Logo. Also lassen Sie uns hier einige Änderungen anwenden. Ich werde zurück gehen und nur ganz einfach die Menüklasse anvisieren. Also sagen Menü und dann Legis auf einem Rand oben ab. 32 Pixel haben jetzt dieses Boot getestet. Also kenne ich diese Arbeit, so dass die beiden Pixel Lasst uns voran gehen. Sparen Sie Kopf zurück zu Rebellen sind bezieht sich auf die Seite und das Ego. Jetzt können Sie sehen, dass sich das Hamburgermenü weiter nach unten verschoben hat und nun mit allen Logos ausgerichtet ist . Okay, ein paar weitere Änderungen bemerkt, dass, wenn wir auf die vielen Elemente direkt hier bewegen, können Sie sehen, dass der Cursor dreht sich auf einen Punkt sind und dann unsere Listenelemente keinen Rand haben . Also lasst uns einfach voran gehen und diese beiden Favoriten schnell beheben. Ich werde hier wieder rein gehen. Lassen Sie uns zuerst den ganzen Weg hier oben gehen, wo wir den Griff haben und ich werde sagen genau hier Cursor wird unser Zeiger sein. Okay, und dann gehen wir. Kommen Sie den ganzen Weg hierher und wir werden die Ränder von unseren Listeneinträgen entfernen. Also Marge Null gesetzt. jedoch bemerken, Lassen Sie michjedoch bemerken,dass, als ich die Seite aktualisiert habe, zuerst den Kristall getestet haben, damit der Kristall funktioniert. Aber jetzt können Sie das sehen, weil wir die Ränder entfernt haben. Die Menüpunkte werden nun gleich dort an der Grenze vor Hamburg, Deutschland, der Bar der Hamburger, Deutschland,bombardiert Deutschland, der Bar der Hamburger, Deutschland, . Also müssen wir sie nach unten schieben. Mal sehen, welchen Wert wir ihnen geben können. Ah, gehen wir zurück in die U-A-Klasse . Also okay, also statt der 20 sind Pixel begrenzt Stooges. Nun, schnell, denn statt der 20 Pixel, die wir hier haben , können wir das vielleicht auf 30 Pixel bringen denn statt der 20 Pixel, die wir hier haben, können wir das vielleicht auf 30 Pixel bringen. Aber ich denke, dass die Pixel gut wären. Also lasst uns einfach weitermachen und das ändern. Ich werde 20 Pixel hier drüben ändern, 2 30 Pixel sicher Kopf zurück hier für zuerst die Seite. Und da gehst du. Wen wir endlich in der Lage, unser Gebäude aus der Hamburg, Deutschland fertig zu stellen . Italien zu Kosten sind mehr als 20 Minuten, um dies zu erreichen, aber hoffentlich haben Sie keine Stadt Techniken beteiligt sich an der Schaffung eines Hamburger viele. Vielen Dank. Glückliches Video. Und wie immer, wenn Sie irgendwelche Fragen zu irgendwas bisher verborgen haben, lassen Sie es mich wissen. Stadtrat. Am besten, sie so schnell wie möglich zu beantworten. Vielen Dank. Wir sehen uns in der nächsten Klasse. 78. Tablet: Willkommen zurück. Also lassen Sie uns mit den ansprechenden Änderungen fortfahren und zuvor konnten wir das Hamburger-Menü erstellen und es sieht gut aus. Ich denke, das sieht auf allen Bildschirmgrößen gut aus. Das ist vollkommen in Ordnung. Jedoch, Lassen Sie uns beginnen, nach unten scrollen und werfen Sie einen Blick auf, was wir sonst ändern können. Der Heldenbereich sieht vollkommen gut aus. Ich glaube nicht, dass wir hier etwas ändern müssen. Ah, lassen Sie uns abkühlen, wenn ein Abschnitt gut aussieht. Auch keine Notwendigkeit, Dienste zu ändern. Geben Sie tote Blicke. Okay, lasst uns versuchen, das etwas kleiner zu machen, denn, denken Sie daran, wir sind Ziele in einem Bereich. Versuchen wir also, dies nahe an 7 60 Pixel zu nehmen. Es ist möglich. Beachten Sie den Entscheider mit der Größe vom Bildschirm am rechten Tag, da ich minimiere, minimiere, also werden wir so nah an 7 60 Pixel kommen. Das ist möglich, und das können Sie sehen. Was ist mit hier? Es fängt an, ziemlich schlecht um die 7 90 Pixel Lynch ist, die wirklich schlecht aussehen. Was wir also tun können, ist, dass wir die Struktur schaffen oder ändern können, um unsere zwei Spalten zu werden, im Gegensatz zu drei. Okay, also müssen wir eine Änderung für die erbrachten Dienstleistungen vornehmen. Warum? Von denen spazieren? Auf jeden Fall. Wir müssen Änderungen vornehmen. Nun , vielleicht zwei Spalten im Gegensatz zu vier Minuten. Das Team kann zu drei Spalten gehen. Testimonials ist in Ordnung. Clients sollten zu vielleicht zwei Spalten auf den B drei Spalten gehen. Ich werde uns sehen und kontaktieren. Es ist vollkommen in Ordnung. Also lasst uns ändern. Vor allem die erbrachten Dienstleistungen. Also, um das zu tun, werde ich hier reingehen. Hinweis: Wir sind immer noch unter dem Tablet-Bereich. Also Licht hier, lassen Sie uns Kommentar hinzufügen, und ich werde diese die Service-Liste nennen. Okay, was machen wir hier? Wir werden es über diese Serviceklasse reden, und dann wird es eine Strichliste sein. Und jetzt beachten Sie. Oder erinnern Sie sich daran, dass zurück in der Servicesektion? Nein. Es versuchte, die l i Elemente direkt innerhalb der Dienstlistenklasse zu zielen. Dies sind die Airline-Elemente, die sie an der Spitze wollen. Als ob die Männer hier auf die Verbündeten abzielen. Diese sind in einer anderen Rul. Wir wollen nur dieses spezielle ls anvisieren, weil diese diejenigen sind, die den tatsächlichen Inhalt enthalten. Sie können ihre alten die H drei den Titel von jedem bestimmten Dienst der Entwicklung sehen und dann das Kind Liste hohe Temps unter jedem. Das sind also die Alliierten, die dieses besondere hier bekommen wollen, dieses hier, dieses und so weiter. Wir müssen also das geriebene und Symbol verwenden, um die Verbündeten direkt anzusprechen, die sich unter der Dienstlistenklasse befinden . Also werden wir hier wieder reingehen und sagen, dass größer als L I ist. Und jetzt ändern wir das mit auf „Lasst uns mit dem Fuß 9% gehen. Wir müssen jedoch vorsichtig sein, weil ich glaube, dass wir auch einige Margen hinzugefügt haben. Lassen Sie uns Gewicht auf dem Deck erscheinen, stoppen Ansicht und sehen. Ordnung, das ist also der Bereich Dienstleistungen und das Licht hier. Sie können sehen, die anfängliche mit bleiben 2.3 und dann haben wir Ränder an der Spitze und dann links. Wir haben 1%. Also auf der sicheren Seite zu sein, lassen Sie uns mit vielleicht 48,5 gehen, im Gegensatz zu 49% weniger gut für die 8,5%. Also haben wir genug Platz für die Marge. Lasst uns jetzt weitermachen. Speichern Sie das. Lasst uns hier wieder rein gehen. Beziehen wir uns auf Seite Ah, lassen Sie uns hier nach unten scrollen und da gehst du. So sieht es jetzt viel besser aus. Und selbst wenn wir sehr, sehr nahe an 7 60 Pixel gehen , sieht es immer noch perfekt aus. Wir haben eine Spalte auf, allein allein zu stehen, aber es gibt nichts, was wir dagegen tun können, weil wir neun Spalten haben. So gibt es keine Möglichkeit, wie wir auf neun Spalten teilen können, sind gleich. Es wird einfach nicht passieren. Aber das ist vollkommen in Ordnung, wie es ist. Oh, gehen wir hier runter. Wir lassen den Wein mit uns spazieren. Okay, das muss sich ändern. Wir müssen jeden Kolumbianer hierher bringen. Vielleicht sind 49 oder vielleicht 40,5% im Grunde zwei Spalten in der Natur. Das ist es, was wir hier drinnen anvisieren wollen. Aber wenn Sie sich daran erinnern, wo wir dort sind, warum wir? Wir benutzten den Anrufstrich auf dem Armaturenbrett für die Klasse und wir gaben diese Klasse, glaube ich es mit 24% von so etwas. Also alles, was wir hier wirklich tun müssen, ist, nur die Breite dieser bestimmten Klasse auf vielleicht 48,5% zu ändern und wir sollten in Ordnung sein. Also lasst uns das machen. Ich komme hier zurück und dann direkt über dem Service, lustlos schafft einen weiteren Abschnitt, wird seine Layouts nennen, Ästhetik verändern. Also nehmen wir es mit dem Namen Dash 1-4 und jetzt ändern wir uns wieder auf 48,5%, nur um auf der sicheren Seite zu sein . Lass uns weitermachen. Speichern Sie das. Lasst uns hier wieder rein gehen. Bezieht sich auf Seite. Lassen Sie uns hier nach unten scrollen und OK, also lassen Sie mich Ihnen nur einen häufigen Fehler zeigen, den Entwickler machen. Fangen wir an, dies ein wenig weiter in die Haft zu erweitern. Okay, also, also, im Momentsieht das ganz gut aus, oder? Moment sieht das ganz gut aus, Und Sie könnten sich denken, Oh, es sieht gut aus auf dieser speziellen Bildschirmgröße, also sollte es jetzt in Ordnung sein, richtig? jedoch Wenn esjedochum das Testen der Reaktionsfähigkeit geht, sollten Sie immer die Bereiche für jeden Brit Punkt testen. Also, in unserem Fall jetzt sind Bruchpunkt derzeit 10 24 zu etwa 7 60 Wir sollten unser Design an beiden Endpunkten testen . Richtig? Also um 10 Uhr. 24 die etwa um Ach ist, hier. Das ist 10. 24. Sieht gut aus, oder? Aber dann, wenn wir anfangen, näher an 7 60 zu kommen, beginnen wir jetzt, ein großes Problem hier zu bemerken. Beachten Sie jetzt, dass die dritte Spalte effizient ausgeführt wird jetzt weiter unten ist. Wenn wir weitermachen, minimieren, wieder minimieren, plötzlich, dann ist es jetzt wieder da, wo es sein soll. Aber dann, wenn wir jetzt so nahe Ton 60 bekommen, ist es möglich, dass wir das Problem noch einmal haben. Also, was passiert hier? Warum schwanken die Höhen? Und warum geht es runter? Gut. Ich gehe runter. Nun, es ist einfach, weil an diesen verschiedenen Punkten, das Forschungsfeld hat eine zusätzliche Textzeile im Vergleich zur analysierten Datenspalte. Beachten Sie, dass hier gerade jetzt, zum Beispiel, wir Fortschritt für ihre eigenen ist die zusätzliche Textzeile. Aber dann, wenn wir das jetzt größer machen, können Sie die Anzahl der Zeilen für das Forschungsfeld sehen und alles gleich analysieren. Deshalb sind diese beiden Weißen hier irgendwie ausgewogen, oder? Aber dann expandieren Sie und dann wieder hier draußen, genau das Gleiche passiert wieder. Also der Grund, warum wir dieses Problem haben. Zusätzlich zu dieser zusätzlichen Zeile ist, weil wir die Spalten schweben. Denken Sie daran, wenn Sie ein Koma schweben, schweben Sie ein Element. Es besteht immer die Möglichkeit, dass Sie die natürliche Struktur brechen könnten. Aber denken Sie daran, wir haben auch über die klare Eigenschaft gesprochen. Wir können die Clipper Party nutzen, um solche Probleme zu verhindern. Aber hier ist eine dünne. Woher wissen wir, was von diesem Columbus anvisieren sollte? Es wird keinen Sinn machen, wenn wir hier reinkommen und sagen: OK, nun, nun, lasst uns einfach jede Spalte in der Sektion bekommen, denn in diesem Fall, bekannt, werden die Spalten schweben. Aber wir wollen, dass einige Klumpen schweben, während wir wollen, dass andere nicht schweben. Also war er genau das, was wir tun werden. Wir müssten die Spalten nach rechts, in diesem Fall, nach rechts von denen, deren Struktur in diesem Fall jetzt gebrochen wurde, abzielen in diesem Fall, . Nennen Sie ihn übrigens 40, ich glaube, ich sagte früher, dass ausgeführt Vision es 1/3 Spalte war. Es ist eigentlich die vierte Spalte. Mein Fehler Plan vor uns ist die dritte Spalte. Also in diesem Fall, und dann können Sie sehen, dass die vierte Spalte diejenige ist, die betroffen ist. Als solche wollen wir die Säule in ihr Licht bringen. Grundsätzlich werden wir also die dritte Spalte klären, die Plan voraus und auch in Zukunft ist. Wenn wir uns entschieden haben, zusätzliche Spalten hinzuzufügen, vielleicht zwei weitere Spalten. Ich kann Ihnen garantieren, dass es die Möglichkeit gibt, dass die sechste Spalte betroffen wäre. Also in diesem Fall, wo Sie es nehmen wollen. Die dritte Spalte Die Fünfte Spalte, Die siebte Spalte, neunte Spalte, 11. Spalte und so weiter und so weiter. Das sind die Säulen. Sie es zielt in dieser speziellen Art von Szenario. Aber wie machen wir das? Wie zielen wir auf die dritte Spalte ab? Die fünfte Spalte sieben Spalte und so weiter. Nun, ich werde Ihnen in neuen ausgewählten bekannt als das Endkind auswählbar vorstellen. Gehen wir hier rüber und hier ist genau, wie es funktionieren wird. Ich sitze zuerst. Rufen Sie Dash 1-4 und jetzt Coolum an und endet jetzt Kind. Dies hier ist der Selektor, den wir verwenden können, um bestimmte Elemente in jeder Struktur zu zielen, aber wir gehen nach dem 3. 5. 7. und so weiter. Also werde ich Ihnen diese Formel vorstellen, um plus eins zu beenden. Ich weiß, das klingt nach Griechisch, aber keine Sorge. Ich erkläre Ihnen das jetzt. Im Grunde, was hier passiert, ist, dass wir eine Schleife erstellt haben. Siehst du das Ende genau da? Es wird mit einem Wert von Null beginnen. Also, im Grunde, das allererste Element, das wir anvisieren werden, wäre Zeit Null plus eins, was im Grunde Null plus eins wäre, was das allererste Element wäre. Das ist in Ordnung. Aber dann wird das Ende nun zu einem drehen. Also, jetzt wird es zwei multipliziert mit einem eins plus eins, die drei Tier 22 sein wird, die mit zwei plus Frau multiplizieren sollte nicht das fünfte Element und so weiter und so weiter. Das hier ist also ein Weg, wie wir die ungeraden Zahlen, Theo, alten Spalten in unserer Struktur anvisieren können Theo, . Also werde ich das tun. Ich werde hier reinkommen. Und nur um Ihnen zu beweisen, dass das tatsächlich funktioniert, lasst uns zuerst die Farbe ändern. Ok? Um zu lesen. Idealerweise gerade jetzt sollte es gerade jetztnur die erste und die dritte Spalte sein, deren Culo rot wird. Gehen wir rüber zu unserer Broza. Kommen wir rein. Bezieht sich auf Seite und direkt dort können Sie jetzt sehen, dass sowohl die erste als auch die dritte Spalte die Farbe geändert hat, um zu lesen, weil wir alle ungerade nummerierten Spalten in unserer Struktur ausgerichtet sind . Also, das wurde gesagt, ich komme sofort wieder hier rein. Ändern Sie Coehlo zu löschen und wir werden nur sagen, sind beide. Lassen Sie mich sicherstellen, dass das beide korrekt ist. Und da gehst du sicherer Kopf zurück zu Rebellen sind die Seite auffrischen und da gehst du. Wir haben also keine Probleme mehr mit den Spalten, die sich übereinander stapeln. So können Sie diese Art von Problem beheben, ist aber keine Clipper-Party und nehmen Sie es in den ungeraden nummerierten Spalten in Ihrem Abschnitt. Das war's, zum Teil wird mir keinen Teil zwei geben. Erhältlich Jetzt befassen Sie sich mit der Minute, die das Team sowie die Bereiche unserer Kunden. Dann sehen wir uns 79. Tablet Teil 2: Nun, komm zurück. Teoh sind reaktionsfreudiges Design und in Ordnung. Bisher wurde so gute Dienstleistungen zur Verfügung gestellt, während Spaziergang mit uns auch gepflegt wurde . Aber jetzt müssen wir die Strukturen für Mitt, das Team und unsere Kunden ändern . Also lasst uns das einfach für das Team machen. Wir können mit drei Spalten Sache gehen, die gut sein sollte. Lassen Sie uns versuchen, hier in drei Spalten zu gehen. Also wird es das tun. Ich gehe hier rüber und gleich nach der Serviceliste. In der Tat, Zahlen, greifen Sie diesen gesamten Code. Lassen Sie uns das kopieren. Komm runter, Paste. Und natürlich werden wir jetzt auch die Serviceliste ändern. unsere Teamliste Vielleichtunsere Teamliste. Rufen wir die Tim-Liste an. Also, was wir tun werden, ist, dass wir uns am wenigsten ändern werden. Und der Klassiker ist das Team Strich Liste Gliedmaße. Bestätigen Sie einfach, dass dies der Fall ist. Lassen Sie uns zurück zum Index mit HTML. Und ah, da war okay, also kannst du sehen. Ja, es ist Teamliste. Okay, gut zu wissen. Also haben wir Team eine Liste, und dann gibt es keine Notwendigkeit, das Größer-als-Symbol zu verwenden, weil es keine untergeordneten Ally Elemente gab , ist nur ein einziges Verbündet-Element in der Struktur. Also wird das mit hier die mit über zwei ändern. Gehen wir mit 32,5%, denn wieder haben die Alliierten auch Margen. Also musst du das im Hinterkopf behalten. Ein Schwung. Also lasst uns weitermachen. Speichern Sie das. Und ach, mal sehen, was wir jetzt haben. Was bezieht sich auf Seite. Scrollen wir hier nach unten und oh, okay, also scheint es, dass 32.5 Bohne ein bisschen zu viel haben könnte. Lassen Sie uns untersuchen und schauen, was wir haben. L I Okay, Sie können sehen, dass wir Margen links haben, was 1% ist. Oh, es tut mir leid. Das geht eigentlich über 33% sofort, denn wenn Sie hinzufügen 1% für die linke bis 32 Punkt weiter wird auf die 3.5, so dass würde wissen, gehen. Was wir also tun können, ist, dass wir vielleicht mit hier 2/3 auf 1,5% geändert werden können. Damit haben wir mit 1.5 1.5nun diese besondere Struktur, die gut ist. Es ist in Ordnung. Es ist sehr ähnlich zu dem, was wir derzeit hier haben, wie Sie sehen können, so dass Theta 1,5% sind wird den Trick tun. Also lassen Sie uns wieder auf 321 0,5% ändern. Ehrfürchtig. Und schließlich wir einen Blick auf die Ablehnung unserer Kunden. Es ist derjenige, der hier ist. Also, was haben wir hier? Wir haben die Kundenliste, und dann haben wir unsere Verbündeten. Okay, ziemlich geradlinig. Lasst uns das machen. Ich komme hierher und all die packen den ganzen Code wieder. Kopieren Sie Einfügen. Und dann wechseln wir einfach das Team zu Kunden. Und dann wird die Klasse hier Client-Listen sein, Client-Liste. Und natürlich, die mit. Wir werden nur mit 31,5% halten, nur um einige Konsistenz zu erwähnen. Also lasst uns das retten. Lass uns hier wieder rein gehen, da ist die erste Seite. Rufen wir den ganzen Weg hier runter an und du gehst. Ehrfürchtig. Ehrfürchtig. Ehrfürchtig. Klassenlos. Jetzt sieht man ziemlich dope aus. Also, das ist es für den Tisch. Scrollen wir hier runter. Stellen Sie sicher, dass Ok, So der Kontakt von immer noch gut aussieht. Die Zukunft sieht gut aus. Lassen Sie uns den ganzen Weg zu 7 60 gehen und sehen, ob es etwas gibt, das wieder geändert werden muss. Okay, an diesem Punkt, gerade jetzt, sind wir in der Tat gerade im Bereich 7 50. So würde die Dinge aussehen, wenn sie auf einem Handy-Ende angesehen werden. Eigentlich ist es sowieso nicht so schlimm. Wir werden uns das im nächsten Video ansehen. Ich wollte gerade jetzt bestätigen, da für die Tabellenansicht bei 7 62 sieht alles vollkommen gut aus. Seele. Wir waren so ziemlich mit der Tabellenansicht fertig, und dann können wir jetzt auf die Gestaltung der Website für das Telefon aus Sicht gehen. Das ist also ein Deutscher im nächsten Video über, wir werden einen Blick darauf werfen, dass Ihnen dann sagt. 80. Phone: Willkommen zurück zum finalen Video in einem reaktionsfähigen Abschnitt, denn jetzt werden wir die kleinste Bildschirmgröße mit 7 60 Pixeln anvisieren . Und um ehrlich zu sein, ist es normalerweise bei weitem am einfachsten zu beheben, denn alles, was Sie wirklich tun müssen, ist normalerweise einfach alle Spalten so zu setzen, dass sie die meiste Zeit voll sind und dann unsere Spalten, die drei Spalten waren, bevor Sie sie einfach zu Gehe zur Spalte. Also gibst du ihnen einen mit vielleicht 48%. Es ist also ziemlich einfach. Wie auch immer, lassen Sie uns einfach voran gehen und das Ende anvisieren. Das ist so klein wie es wird, und sie hatten uns. Es sieht gut aus, aber jetzt sind sie über Abschnitt muss definitiv geändert werden, wie Sie sehen können, so müssen wir gehen sind voll mit für jede dieser einzelnen Spalten. Werfen wir einen Blick auf die Struktur. Lassen Sie uns zurück zu Index dot html und genau hier oben. Das ist, wo wir den Kohle-Strick Juan Dash zur Klasse verwenden. Wir mussten dies nicht in einer Tablet-Ansicht nehmen, weil es gut aussieht. Aber jetzt, für die Mobiltelefon-Ansicht, nun, ich hoffe, wir müssen einige Änderungen vornehmen. Also lasst uns hier rüber gehen. Und natürlich werden wir den ganzen Weg hier runter gehen. Ich entferne einfach all diese leeren Räume. Okay, also genau hier innerhalb des Max mit 768 Pixeln für das Telefon, werden wir sagen, dot rufen Sie Dash ein Bindestrich an und in diesem Fall wird nur gesagt, die mits im Grunde voll zu gehen, also gehen wir einfach mit 99%. Lassen Sie uns mit 98% gehen, weil denken Sie daran, wir haben einige Marge. Also lasst uns mit 98% gehen. Lass uns den Kopf wieder hier rüber retten, waren zuerst die Seite und da gehst du. Im Moment sieht es ganz gut aus. Awesome Siebziger, vorausgesetzt, ich denke, wir müssen das auch so einstellen, dass es in zwei Spalten nicht so gut aussieht. Ich denke, wir haben gesagt, dass es auf eine einzige Spalte ist. Ja, Sie können jetzt sehen, dass dies eine Spalte ist. Sieht viel besser aus. Also lasst uns das ändern. Also werde ich hier rüber gehen mir die Serviceliste komplett schnappen. Lassen Sie uns das kopieren. Komm runter, zahlt das noch einmal. Aber jetzt wird einfach nur ändern Sie die mit für die Service-Liste von 48 auf 98,5. Coole FM Lasst uns weitermachen. Rette diesen Kopf wieder hier drin. Nun, zuerst die Seite und da gehst du. Genau so. Sieht gut aus. Sieht viel besser aus, aber wie es, OK, warum gehen Sie mit uns Auch müsste voll mit gehen. Wie Sie sehen können, sieht das nicht so toll aus. Also lasst uns das nochmal machen. Ich werde die Layout-Änderungen ergreifen. Lassen Sie uns das kopieren. Und in der Tat, lassen Sie es hier oben einfügen. Okay, wir bewegen die Linie. In Ordnung, also Spalte, Dash 1-4, wir werden mit 98,5% gehen. Sagen Sie den Kopf wieder hier rein, aktualisieren Sie die Seite. Und da gehst du. Wie ich schon sagte, es ist sehr, sehr einfach. Alles, was Sie an dieser Stelle wirklich tun müssen, ist, einfach die Breiten Ihrer Spalten inmitten des Tim zu ändern . Auf jeden Fall. Ich denke, wir können stattdessen mit zwei Clubs hier gehen, im Gegensatz zu einem. Ich denke, zwei Säulen. Es wird uns gut gehen. Also lasst uns das auch reparieren. Ah, Teamliste. Lasst uns weitermachen. Lasst uns das schnappen. Kommen wir den ganzen Weg hierher, fügen Sie uns ein. Und jetzt werden wir einfach die Teamliste ändern die mit von auf die 1.5 und wir können mit 14 9 eigentlich gehen , nicht für den Namen, sondern 48 0.5% sicher. Der Kopf hier drin war zuerst eine Seite und da siehst du gut aus. Sieht gut aus. Lass uns den ganzen Weg hierher kommen. Unsere Kunden Okay, Dies kann definitiv auch zu Spalten gehen. Also lasst uns das machen. Lassen Sie uns diese Kopie greifen, kommen Sie hier runter, fügen und ändern Sie dann einfach die Client-Liste. Anders. Das 1.5 2 48 0.5 als auch. Es ist sicher. Lasst uns hier wieder rein gehen. Nun, zuerst die Seite und dass du gehst. So sieht das auch schön aus. Und dann zuletzt, aber nicht den ganzen Weg hier unten. Ach, Bauunternehmer sehen gut aus. Da drinnen wird alles ändern, aber das Essen braucht einige Änderungen. Wie Sie jetzt sehen können, sind die Social Media Aikens zu den Lichtern und dann haben wir das Navigationsmenü auf der linken Seite. Das sieht also irgendwie verzerrt aus. Also, was wir hier tun können, ist, dass sie im Grunde voll sind und dann vielleicht nur unseren Text, richten Sie sie an der Mitte aus. Also lassen Sie uns einen Blick auf die Münzstruktur für die Fußzeile, so dass Sie sehen können, haben wir Sie eine Klasse Fotomenü und in Ihrer Klasse sind soziale Menü. Und wenn wir zu unserem Hauptpunkt-CSS gehen, lassen Sie uns den ganzen Weg hierher gehen. würden Sie bemerken. Okay, wir haben die soziale Haupt in die Rechte geschoben, und wir haben auch den Fuß auf viele nach links geschoben. Vielleicht können wir einfach die Schwimmer entfernen und mal sehen, was passieren würde. Also lasst uns das machen. Ich werde einen ganz neuen Abschnitt für die Fußzeile erstellen. Lassen Sie uns das einfügen und wir ändern einfach die Client-Liste hier zu Essen und dann einfach die Klasse hier ändern. Also haben wir Fouda Dash Menü und wir können mit einem Koma und dann Klasse von Social Desh Menü Gliedmaße gehen . Bestätigen Sie einfach, dass dies die tatsächlichen Klassen sind. Also haben wir soziale Menü und dann Essen Zeitmenü. Ok, genial. Also lassen Sie uns den ganzen Weg hier runter gehen und jetzt wird im Grunde einfach Floats sagen. Keine schwimmt keine. Mal sehen, was passiert. Lasst uns das retten. Lasst uns hier wieder rein gehen. Lassen Sie uns auf Seite beziehen und dort gehen Sie. Okay, also schwimmt nicht mehr rein. Aber jetzt können Sie sehen, dass wir immer noch die Social Media Aikens Art von wie auf der gleichen Linie mit dem Essen Top-Menü. Der Grund, warum dies immer noch geschieht, ist, weil die Fluggesellschaften in beiden Menüs auch nach links schweben. Wenn wir zurück zu ah, Haupt, dass CSS und lassen Sie uns den ganzen Weg hier oben gehen, können Sie hier sehen, dass wir wahrscheinlich die Fußzeile haben, die Sie sehen können. Wir haben den Fuß, Emmanuel. Ich schwimme nach links. Wir haben auch unter dem sozialen Menü. Wir haben die sozialen, viele Verbündeten, die ebenfalls nach links schweben, also können wir einfach die Flow-Dose von ihnen verschieben und sie einfach als Inline-Block anzeigen . Also sieh dir das an, als würde ich gehen. Ich gehe wieder hier rein und lass uns den ganzen Code schnappen. Lasst uns das Exemplar schnappen , hier runterkommen , einfügen und dann sagen wir einfach Essen Zeit Menu. Ilyse, Soziales Menü Verbündeten und jetzt schweben. Keine Aber dann, wenn wir sie nicht schweben, werden sie als Block angezeigt. Aber um sicherzustellen, dass sie nicht verdrängen, wird der Block gerade jetzt sagen, als und im Zeilenblock angezeigt. Okay, gehen wir weiter. Speichern Sie das. Geh zurück hier, aktualisiere die Seite und los geht's. Im Moment schweben sie nicht mehr. Aber wir waren in der Lage, sie in Zeile anzuzeigen, weil wir sie wie in Linienblöcken verwenden. Wenn wir nicht die Anzeige im Linienblock gesagt haben, werden sie als Blöcke angezeigt, die übereinander gestapelt sind. Das letzte, was wir tun müssen, ist nur, Verbündeten in ihnen in die Mitte zu schreiben. Im Grunde. Also Befehle kommen hier und unter der Vollzeit, eine neue und soziale viele werden nur einen Text, ah, ah, Zeile Mitte Komma Doppelpunkt gespeichert, dass Kommen Sie zurück in. Hier bezieht sich die Seite und da gehst du. Es gibt also tatsächlich verschiedene Möglichkeiten, wie wir dieses spezielle Problem beheben konnten. Aber ich will dir nur diesen anderen Weg von diesem Flugzeug zeigen. Ihre Listenelemente als Binnenblöcke im Gegensatz zu Floating sie nach links oder nach rechts, so dass es ziemlich viel für die Responsive ist Teil für die Telefonansicht. Vielen Dank für das Zuschauen. Und natürlich sehe ich dich im nächsten letzten. 81. Responsiveness Durchblick: so dass sie es haben. Wir sind bis zum Ende dieses Abschnitts gekommen, wo wir Reaktionsfähigkeit angegangen haben und an diesem Punkt, Sie bereits beginnen, Websites zu bauen, weil Sie wissen, dass es Jemele ist. Sie wissen, CSS, und Sie wissen auch, wie Sie Ihren Inhalt und die Struktur anpassbar an verschiedene Bildschirmgrößen zu machen . Aber Sie können immer lernen, einige neue Dinge, die einige neue zusätzliche Dinge. Und im nächsten Abschnitt werde ich Ihnen zeigen, wie Sie sowohl das Design als auch die Funktionalität Ihrer Website weiter optimieren und verbessern können. Dann sehen wir uns. 82. Preview: was ist willkommen in diesem Abschnitt, wo wir gehen, um Website-Optimierung und Arm Winkel zu bekämpfen . Das Hauptziel in diesem Abschnitt ist es, unsere Website Leben im Internet zu bekommen. Bisher haben wir vor Ort gebaut. Mittlerweile ist es an der Zeit, alle unsere Dateien ins Internet zu übertragen. Also werde ich Ihnen zeigen, wie Sie sich einen Domain-Namen bekommen können, wie Sie Web-Hosting bekommen und natürlich, natürlich, wie Sie endlich Ihre Website live im Internet starten können. Aber bevor wir das tun, ist es auch wichtig, dass Sie einige wirklich, wirklich wichtige Aspekte der Web-Entwicklung wie S E O Suchmaschinenoptimierung angehen . Also werde ich Ihnen zeigen, wie Sie Ihre HTML-Website, vollständige Suchmaschinen optimieren können . Und natürlich werden wir auch die Geschwindigkeit angehen. Es spielt keine Rolle, ob Sie die schönste Website erstellt haben. Wenn es langsam ist, Leute zu laden und die Website nicht zu mögen, also möchten Sie sicherstellen, dass Sie Lasten so schnell wie möglich verärgert sind, und ich werde Ihnen alle Tricks beibringen, die Sie wissen müssen, um sicherzustellen, dass Ihre Seitenlasten so schnell wie möglich möglich. Das ist also irgendwie wie der komplementäre Abschnitt zum Prognosebereich, aber dennoch ist es auch ein sehr, sehr, sehr wichtiger Abschnitt, also ohne weiteres, lasst uns anfangen. 83. Suchmaschinenoptimierung: Okay, Leute, Leute, lasst uns über die Grundlagen von S e o für unsere HTML-Website sprechen und das meiste davon wird zu uns kommen , um für die Schlüsselwörter zu optimieren, die versucht haben, zu zielen. Wenn ich also heilt sage, meine ich die Art von Wörtern, die Menschen in Google eingeben werden. In anderen Financial finden Sie uns. Wir sind also ein Webdesign-Unternehmen. Aber nehmen wir an, wir sind in New York ansässig. In Ordnung, also sollten wir denken, Ordnung, wie würden die Leute uns auf Google finden? In der Regel könnten sie zu Google gehen und so etwas wie, Ah, Web-Design-Unternehmen in New York eingeben Ah, . Richtig, lass uns weitermachen. Drücken Sie nun die Eingabetaste und lassen Sie uns einen Blick auf das werfen, was wir hier haben. Hier unten können Sie sehen, dass wir haben, Ah, Ah Big Drop, Inc. Wir haben Max Burger, wir haben Blue Fountain Medien. Stellen wir uns also vor, wir versuchen, Web-Einfluss auf die erste Seite von Google zu bekommen. Wie sollen wir das machen? Nun, wie ich schon sagte, es fängt mit den Schlüsselwörtern an. Die Keywords versuchten also, unsere Webdesign-Firma in New York zu optimieren, also war er genau das, was wir tun können. Wir können zurück zu unserem Index von HTML und einem weißen gehen oder Sie haben Ihre Meta-Abschnitt. Ich gehe jetzt voran und füge diesen Code ein und da ist er, genau da. Also haben wir Metta-Namensbeschreibungsinhalte und dann haben wir Metta-Name-Schlüsselwörter und dann gehen die Kontinent-Nummern voran und entfernen diesen Inhalt tatsächlich, weil dies nicht das ist, was wir versuchen zu zielen. Also fangen wir an. Vor allem mit dem einen sind unter Schlüsselwörtern. Der Schlüssel war, dass in diesem Fall jetzt eine Webdesign-Firma in New York sein wird, richtig? Dies sind die Schlüsselwörter, die versucht haben, ins Ziel zu gehen. Genau so würden Sie die Schlüsselwörter so ein Targeting mit Ihrem HTML-Dokument angeben . Nun, die Beschreibung, die dies ist, wird jetzt geben für die Details, wer wir sind und was wir tun . Und Sie können die Meta-Beschreibung für all diese Unternehmen sehen. Zum Beispiel hat Big Job seine nicht viel von einer Beschreibung ist nur Cesar Web-Design-Unternehmen in New York waren neben Entwicklungen groß fallen. Okay, aber Max Burns hat eine viel bessere Beschreibung. Sie sagen, bei Max First Report Punkt umfassende bis die Website-Design, Entwicklung eines Web-Marketing-Dienstleistungen für verschiedene Unternehmen und so weiter. Das hier ist also genau das, was wir die Meta-Beschreibung nennen, also ist es eine gute Möglichkeit, das Keyword-Targeting weiter zu optimieren und zu rangieren. Aber es ist auch eine gute Möglichkeit, potenziellen Kunden mehr Informationen zur Verfügung zu stellen. Und Sie können die anderen unsere Links Idee sehen. Haben Sie etwas Ähnliches. Unser blauer Freund und sagen, er ist eine digitale Agentur erstellt Ausgaben, die Problem verbinden. Alles klar, das ist gut. Geh wieder hier rein. Also, was wir hier tun werden, ist für die Meta-Beschreibung. Inhalte schwächen, sagen etwas wie preisgekrönte und jetzt Web-Design-Unternehmen in New York. Ok. Und dann bauen wir fantastische Websites bei ah Ford Able Prices. Und natürlich können Sie ein wenig mehr hinzufügen, aber Sie möchten normalerweise nicht über 160 Zeichen hinausgehen. Das ist in der Regel das Maximum so, aber genau hier haben wir die Keywords wieder Web-Design-Unternehmen in New York hinzugefügt . Aber wir haben auch einige weitere Informationen über seine Gehorsam und preisgekrönte Wie wäre Design-Unternehmen? Und natürlich bauen wir fantastische Websites zu erschwinglichen Preisen, Das wird also unsere Meta-Beschreibung sein. Boy hat auch hinzugefügt. Die wichtigsten Stationen waren Ziele, in denen Web-Design-Unternehmen in New York ist. Also, das ist typischerweise Schritt eins. Schritt zwei wird nun der eigentliche Titel sein. Es ist offensichtlich, dass das Titel-Tag genau hier den Titel von unserer Seite darstellt. Im Moment ist es ein Zweiri-Impact-Build. Erstaunliche Oberteile. Okay, das ist in Ordnung. Aber wir könnten dies optimieren, indem wir hinzufügen, sind Schlüsselwörter waren auch hier. Statt zu sagen, wäre das Aufbauen von Auswirkungen ist Wissenschaft. Wenn wir sagen können, Web-Auswirkungen und dann vergeben, tatsächlich. Aber sagen wir einfach Web ah, Designfirma in New York wieder. Ordnung , an dieser Stelle haben wir unsere Keywords jetzt an drei verschiedenen Orten. Wir haben sie in den eigentlichen Schlüsselwörtern Meta haben wir sie in einer Beschreibung, aber wir alle haben sie jetzt auch im Titel von unserer Seite. Das hier ist also schon ein sehr guter Start für S C O. Aber die andere Ausgabe befasst sich jetzt mit der strukturellen Seite. Google und andere Suchmaschinen, sie lieben Struktur. Sie wollen sehen, dass wir h ein Tags haben, Alter von zwei Tags. Es ist mit Schwuchteln, weil das strukturell zeigt. Dies ist alles der Grund, warum der allererste Haupttext, den wir auf unserer Website haben , der natürlich genau hier ist, was die Ebene Ihres Geschäfts ist. Erstellen Sie eine wirkungsvolle, ihre Anwesenheit, wenn Sie bemerken, dass wir H ein Tags für sie verwendet haben, weil sie ganz oben auf der Seite sind. Deshalb haben wir jetzt H eins benutzt. Technisch gesehen könnten wir hier reinkommen und auch versuchen, genau die gleichen Keywords wieder hinzuzufügen. Anstatt also zu sagen, dass Sie Ihr Geschäft aufbauen, einen Einfluss auf die Zukunft aufbauen, könnten wir einfach sagen, World Design Company in New York. jedoch nicht, Sie möchtenjedoch nicht,dass Sie Ihre Seite mit den Schlüsselwörtern überstopfen, da Google Sie tatsächlich dafür bestrafen kann . Also seien Sie vorsichtig. Verwenden Sie Ihre Keywords. Ich meine, du willst wirklich für sie optimieren. Aber fangen Sie nicht an. Teoh, was ich gesagt habe, ist, nicht zu optimieren. Grundsätzlich, wenn Sie sie Ihre Beschreibung in Ihren Keywords und dann in Ihrem Titel haben, ist das in Ordnung. Okay, das ist ganz in Ordnung, wie es ist. Okay, lassen Sie uns weiter nach unten scrollen. So dauerte es über die Schlüsselwörter, die wir über die strukturelle genommen haben, was in Ordnung ist, aber ein anderes, als wir für die Optimierung tun könnten. Unser externes Dokument für Seo ist etwas, das wir bereits gemacht haben, und das wird die alten Tags für unsere Bilder sein. Denken Sie daran, wir haben über das alte Etikett gesprochen. Der alte Typ ist sehr, sehr wichtig, weil er hilft, ah, Software, die von blinden Menschen verwendet wird, um ihnen zu zeigen, worum es im Bild geht. Werfen wir einen Blick auf einige der Bilder, die wir haben. Wir haben, ah, das Bild schreiben. Zum Beispiel für die Teammitglieder können Sie für die Teammitgliederdie alten Tags sehen, eine Idee, dass Sie Alarmteams verrostet haben. Print fühlt sich im Grunde die alte Steuer. Hier sind die Namen von den Teammitgliedern, aber dann auch weiter unten. Aber wir haben Klienten. Sie können sehen, die alten Panzer alle Beschreibungen haben, zum Beispiel, sagte, dass Holmes-Logo ah, wachsen Sekretär Logo, hyper hyper hyper kit, checkte Logo, Finanzen, Look, Logo und so weiter. Also eine andere Möglichkeit, Ihre Website für ein Siegel wirklich zu optimieren, wird es sein, Ihre Bilder zu optimieren, indem sie einfach mit allen Tags bereitstellen, die Google liebt dies Und Sie wirklich wollen, um sicherzustellen, dass alle Bilder auf Ihrer Seite alte Tags haben? Ein letzter Weg zur Optimierung unserer XML-Website wird sein, die Geschwindigkeit zu verbessern, sicherzustellen, dass die Geschwindigkeit so schnell wie möglich ist und dass etwas aus unserem Interview nächsten Video kommen wird . 84. Geschwindigkeitsoptimierung Teil 1: Lassen Sie uns also über die Optimierung aller Websites sprechen. Geschwindigkeit und Geschwindigkeit ist wichtig, nicht nur für s CEO, weil Google und andere Suchmaschinen lieben es, wenn Ihre Website lädt sehr, sehr schnell. Aber es ist auch wichtig für die Benutzererfahrung. Wenn Nutzer Ihre Website besuchen, möchten Sie, dass sie sich amüsieren. Und eine der Möglichkeiten, wie Sie sicherstellen können, dass Ihre Seiten und deren Inhalte so schnell wie möglich geladen werden. So Websites eine der besten Möglichkeiten, um ihre Geschwindigkeit zu optimieren, ist durch die Optimierung der Bilder auf ihrer Seite. Und in seinem Gebot werde ich Ihnen zeigen, wie Sie Ihre HTML-Bilder optimieren können. Wie die Hölle Now sagte, Wir haben viele Bilder. Wir haben Hintergründe. Wir haben Bilder für unsere Teammitglieder. Wir haben Bilder auch für Kunden, die Logos und so weiter. ist das Wichtigste also Wenn es darum geht, Ihre Bilder zu optimieren, , sicherzustellen, dass sie eine kleine Größe wie möglich haben. Dann gibt es nicht, warum Sie Bilder eine kleinste mögliche Größe haben möchten, weil je kleiner die Bilder in der Größe, desto schneller würde es ein Bild mit einer Größe von 10 Kilobyte laden wird viel, viel schneller als ein Bild, das sagen wir, 500 Kilobyte in der Größe. Die allererste Reise hier, wenn es darum geht, Ihre Bilder zu optimieren, ist, einfach J-Pegs so oft wie möglich zu verwenden. Sie haben in der Regel entweder Pings oder J wählt kostenlose Bilder, und es wird einen Blick auf alle Ordner, die Sie direkt hier sehen. Beachten Sie, dass das Fünf-Symbol nicht im rosafarbenen Format ist. Das Logo ist im rosafarbenen Format, das Heldenbild ist jedoch ein J-Pegs. Unsere Teammitglieder sind alle J-Pegs, wie Sie sehen und dann Hintergrund alle Tasche anime Design J. Pegs, aber und schließlich die Kunden, die Bilder, die Logos, ob ich in rosa Formaten Wenn Sie dies nicht wussten, hat das rosafarbene Format eines Bildes normalerweise eine bessere Qualität als das Jay Peak-Format. Aber mit der besseren Qualität kommt ein Handel von besserer Qualität bedeutet, dass das Bild in Sicht begonnen wird . So wie solche Pings in der Regel laden slaw, dann J Stifte, dass sie bessere Qualität sind, aber sie laden langsamer. Infolgedessen davon. Sie möchten sicherstellen, dass die meisten Bilder, die Sie auf Ihrer Website R J. Pegs verwenden Pangs für Ihr Logo für Ihre fünf Symbole und für die Arten von Logos auf Ihrer Seite. Weil, wie ich schon sagte, unsere Schmerzen neigen dazu, von besserer Qualität zu sein. Also für Ihr ein kleines Mädchen, die Logos von Kunden, wollen Sie, dass sie von guter Qualität sind. Deshalb haben wir als Ergebnis Pings anstelle von J-Pegs verwendet, aber für die Hintergründe für unsere Teammitglieder brauchen wir keine Bilder, um diese Gitterqualität zu haben. Deshalb haben wir J. Pegs verwendet . Das wird also der allererste Tipp hier sein. Verwendet J wählt für die meisten Bilder Pings für Logos und dann für die Fünf-Symbole verwendet. Nun, mit all dem, was gesagt wird, ist eine andere Möglichkeit, die Größe zu reduzieren, aus. Unsere Bilder sind, indem wir sicherstellen, dass wir keine übergroßen Bilder überhaupt hochladen. Wovon rede ich jetzt? Sie sagen, wenn wir einen Blick auf die MIT die Team-Sektion als Beispiel, werfen wir einen Blick auf unser Meer oder Herrn Roster Dela Cruz. Ich gehe nach rechts? Klicken Sie hier und ich werde zu inspizieren. Okay, sieh dir das an. Also genau hier können Sie sehen, dass wir die Links zu dem Bild haben. Aber sehen Sie zwei getrennte Dimensionen? Die 1. 1 ist der Baum, der um 200 fallen soll. Aber dann in Becketts, wir haben intrinsische 9 50 mal 8 50 Intrinsic zeigt die tatsächliche Größe aus dem Bild in unserem Ordner, die 9 50 mal 8 50 ist jedoch tatsächlich dieses bestimmte Bild in einer Dimension von 22 voll von 200. Die Verwendung der massiven Diskrepanz direkt hier werden wir ein Bild hochgeladen, das 9 50 mal 8 50 ist aber nur das Bild tatsächlich bei U vier mal 200 anzeigt. In so einem Schnee, gerade jetzt, ist das Bild für Herrn Dela Cruz übergroß, weil Sie normalerweise die hochgeladene Größe wollen. Das Original sagt, dass das Bild so nah wie möglich an den Abmessungen ist, die wir verwenden werden, um das Bild auf unserer Website anzuzeigen. So möchten Sie sicherstellen, oder ob wir sicherstellen wollen, dass der Upload es Größe ist so nahe an 2 bis 4 von 200. Aber bevor wir das machen, machen Sie nicht den Fehler. Daran werde ich denken. Oh, Energien bei einem Nächsten von euch sind am größten. Nein, auch wir benutzen den Bildschirm sagt genau hier, was? Gehen wir hier wieder rein. Lassen Sie uns den ganzen Weg zur Vorlagenansicht gehen. Okay, lassen Sie uns weitermachen. Lasst uns weitermachen. Richtig, damit ich jetzt nicht hier bin. Sie können sehen, dass das Bild nun ein wenig größer ist, denn jetzt sind sie in drei Spalten, Gegensatz zu vier Spalten. Wenn ich mit der rechten Maustaste klicke und inspizieren Notiznummer, das Bild wurde jetzt bei 258 von 231 angezeigt Okay, lassen Sie uns halten, die Bildschirmgröße zu minimieren und dann um hier Hinweis. Jetzt ist es in zwei Säulen. Also, wenn ich zurückgehe und mit der rechten Maustaste hier gerade jetzt, können Sie sagen, es ist nicht bei 303 von 271 angezeigt worden Also lasst uns weiter gehen und sehen ob er größer wird. Und nein, es scheint nur kleiner zu werden, wenn wir die Bildschirmgröße verkleinern. Aber hier, hier ist, wo das Bild oder die Bilder für unsere Teammitglieder in ihrer größten Größe in etwa drei oder vier mal 2 angezeigt werden 72 Also, bevor Sie beginnen, Ihre Bilder zu beschneiden, stellen Sie sicher, dass Sie herausfinden, die größte Dimensionen mit umfangreicheren Bildern werden in auf Ihrer Website angezeigt. Das geht also. Im Moment ist es um drei oder vier mal 272 Jedoch, bevor Sie beginnen, Ihre Bilder zuschneiden, Limoges informieren Sie, dass wir hochauflösende Bildschirme haben, und dies sind in der Regel diejenigen von IOS von Apple-Computern, Apple-Geräte. Die Empfehlung ist also, dass Sie Ihre Bilder zwei Mal zuschneiden, zwei von der größten Anzeige, die erwähnt. Also, wenn wir sie haben, ist die legis gezeigt Dimension gerade jetzt, dass ein Sturz von 272 sein? Dann sollten wir Bilder koppeln, um etwa 60 warten 544 Wenn meine Mathematik korrekt ist, nur so dass sie auch auf Apple-Geräten gut aussehen würden. Also, wenn es darum geht, Ihre Bilder zu beschneiden und ändern entscheidet, dass ein Billy alles davon abhängt, was Sie die Werte in einem Mac verwenden. Ich weiß, dass Sie haben, wie ein eingebautes Werkzeug dafür. Sie können das benutzen. Ich bin auf einem PC, und ich habe meine gute alte Farbe. Ich werde das Malwerkzeug verwenden, um einfach die Größe zu ändern. Also werde ich hier rüber gehen, Teoh, klicken Sie einfach auf Größenänderungsschalter von Prozentsatz zwei Pixel. Also werden wir mit 6 10 gehen und damit 6 10 für fünf für fünf sein. Okay, gehen wir weiter. Klicken Sie nun auf. OK, was ich jetzt einfach tun werde, ist, dass ich das Bild speichern und ich werde das Bild in den Teams Ordner hochladen . In Ordnung. So, wie Sie jetzt sehen können, habe ich das neue von rostigen Bild applaudiert. Es heißt Rusty Dash New, und Sie können jetzt sehen, dass das Originalbild die Größe hier 118 Kilobyte betrug. Aber weil wir die Abmessungen reduziert haben, haben wir jetzt die neue Größe bei 62,4 Kilobyte. Also, was ich einfach hier tun kann, ist, einfach voran zu gehen und das geölte Bild zu löschen. Und natürlich sicher, dass der Name Ihres neuen Bildes den gleichen Namen hat, der in der HTML-Datei verwendet wird. Also ist es rostige Punkt jpg. Also, wenn Sie die restlichen Bilder für Ihre Teammitglieder optimieren lassen. Bitte gehen Sie voran und tun Sie so könnten Sie die gleichen vier Kunden tun. Aber die Wahrheit ist, diese Bilder sind schon sehr, sehr klein dagegen. Dieser ist 8,6 Kilobyte, äh, nur 12,5, also sind sie schon wirklich, wirklich klein. Und es hat wirklich keinen Sinn, wenn Sie versuchen, für die reduzierte die Größe von solchen Bildern weil sie schon sehr, sehr, sehr klein sind. So können Sie einfach nur unsere ignorieren diese hier. , die wir möglicherweise optimieren müssen, wäre jedoch Eine Gruppe von Bildern, die wir möglicherweise optimieren müssen, wäre jedochdie Hintergrundbilder, denn diese sind ein wenig größer als alle anderen, die Kunden sehen können , ist , dass 600 Kilobytes Services bei 51 Kilobyte, und dann die für Team ist ein 328 Kilobyte. Nun, anstatt die Dimensionen zu reduzieren, was wir tun können, können wir versuchen, die Bilder zu komprimieren, und um dies zu tun, können wir verwenden dieses Werkzeug namens Bild, komprimieren aus. Kometen, die eigentlich Illah optimieren genannt werden. So gehen Sie zu Bild komprimierbar ruhig und genau hier sehen Sie die grüne Schaltfläche zum Hochladen Dateien. Ich gehe jetzt los lade die Dateien hoch. Lassen Sie uns über Ihren Hintergrund gehen und gehen Sie jetzt voran und laden Sie die drei hoch. Laden wir sie hoch. Der erste in hat den zweiten hochgeladen, und dann die 3. 1 hat hochgeladen oder K. Also hier können Sie jetzt beginnen, die möglichen Ergebnisse zu sehen, die für Clients. Als Beispiel, Es gibt keine war 601 Kilobyte, aber und wenn wir sie komprimieren, es jetzt gezwungen, 468 Kilobyte jetzt, weil die Qualität dieser Bilder sind nicht so wichtig, was wir tun können, ist richtig Hier drüben. Mit der Qualität können wir die Qualität weiter reduzieren, und durch die Reduzierung der Qualität sind wir auch in der Lage, die Größe des Bildes weiter zu reduzieren. Also haben wir es auf 88. Mal sehen, was passieren wird. Eigentlich, lassen Sie uns weitermachen. Aus irgendeinem Grund dauert es etwas länger, gezwungen, die neuen Ergebnisse für das komprimierte Bild in 88% Qualität zu sehen. Ordnung, es gibt jetzt mehr als fünf Minuten, und ich stehe immer noch auf dieser Seite fest, und es scheint eine Art Bug zu sein. Ich weiß nicht, warum das passiert, aber jedes Mal, wenn ich versuche, die Qualität des Bildes zu reduzieren, haben Sie einfach dieses Drehrad und nichts ist passiert. Wenn Sie also Ihre versuchen, könnten Sie erfolgreich sein. Vielleicht haben sie das Problem behoben. Vielleicht mache ich etwas falsch, ich weiß nicht. Trotzdem konnten wir die Bilder auch immer noch optimieren. Sie können sehen, dass Kunden mit in der Größe von zwischen 2% Quellen von 24% und Team um ein mickes 1% verwendet wurde. Aber ich schätze, das Team, das unsere Baghlan Bilder bereits optimieren. Deswegen. Also kann ich einfach weitermachen. Klicken Sie nun auf Download all und dies wird mir mit einem Zip-Ordner zur Verfügung stellen. Ich stimme zu, ist ein Ordner und dann einfach entpacken Sie den Ordner auf meinem Computer und dann ersetzen Sie einfach die komprimierten Bilder sind mit denen bereits. Auf dem HTML werde ich abgelegt, so dass ist viel, wie Sie Ihre Bilder wieder optimieren. Verwendet J-Klammern wo immer möglich. Verwenden Sie nur Pings für Ihr Logo und Ihre fünf Symbole. Probieren Sie Teoh aus. Reduzieren Sie die Größe Ihrer hoffnungslosen Bilder, um die alle nicht übereinstimmen Bobby. Mal zwei von den leichtesten Abmessungen sind, mit denen sie auf Ihrer Website angezeigt werden . Und dann natürlich könnten Sie natürlichauch den Bildkompressor verwenden, der kommen, um Ihre größten Bilder zu komprimieren. Also, das ist es für die Geschwindigkeit, die Sie auf dem Kopf für Geschwindigkeit optimiert. Ein Trommelteil zu gut wird unsere Schnur optimieren. 85. Geschwindigkeitsoptimierung Teil 2: Willkommen zurück. hoffe, Sie genießen unsere Website-Optimierungsabenteuer und was ich Ihnen als nächstes zeigen werde ist, wie Sie Ihren CSS-Code optimieren können. Und genau wie bei Bildern können wir auch unseren CSS-Code komprimieren, und wir können ein Tool namens CSS verwenden. Viele reichten Ruhe ein. Also, was das tut, ist, dass Sie einfach Ihren Städtecode bereitstellen, Sie führen ihn durch die Engine und Sie haben eine optimierte Version von Ihrem CSS-Code. Nun, die Sache hier , ist,dass Sie dies normalerweise tun möchten, wenn Sie alle bereit, Ihre Website zu starten, weil es für Sie keinen Sinn machen wird, Ihren CSS-Code zu optimieren. Und dann fängst du später an, etwas extra kalt hinzuzufügen. Nein, Sie möchten das Endprodukt optimieren. Aber Sie möchten auch warten, bis Sie im Begriff sind zu starten, wenn Sie bereit sind, zu starten, weil die Ausgabe, die wir bekommen werden, nicht einfach zu lesen sein wird. Also, was ich hier tun werde, ist nur, um Ihnen ein Beispiel zu geben. Ich werde voran gehen und einfach ein paar nicht alle, außer einen Teil des Codes, den wir haben. Also lasst uns gehen. Aber Teoh Main, dass CSS und ich werde hier von Nummer eins greifen. Lasst uns den ganzen Weg bis 133 gehen. Ich war eine sehr zufällige Zahl. Lass uns weitermachen und das kopieren. Gehen wir zurück zu unserem, aber ich war Ah, ich werde jetzt weitermachen, das kleben. Und jetzt überprüfe das. Ich glaube, ich werde auf Männer klicken, wenn ich und da du gehst. Also im Moment, das ist die komprimierte Version aus oder wir haben hier drüben und Sie können jetzt sehen, dass das viel kleiner ist , aber die Aufträge, die er jetzt angerufen hat, sind praktisch unlesbar. Das wird für uns sehr, sehr schwer zu lesen sein. Aber das ist der Kompromiss, wenn Sie Ihren CSS-Code komprimieren möchten, so dass er schneller geladen wird und Ihre Absoluten schneller. Der Handel hier ist, dass der CSS-Code wird schwieriger sein, wirklich, weil warum wieder? Sie wollen nur dies tun, möchte, dass Sie alle bereit sind, Ihre Website zu starten. Also werde ich das Gericht nicht benachrichtigen, weil wir noch nicht bereit sind, unsere Website zu starten . Aber ich wollte dir das nur zeigen. Das ist also in der Zukunft. Wenn Sie Ihre Kunden auf den Kopf oder Ihre eine Website kurz bevor Sie so starten wollten, können Sie für Geschwindigkeit optimieren, indem Sie das CSS viele Feuer Tool verwenden. Also, das war's. Danke. So viel Vermögen. Wir sehen uns in der nächsten Klasse. 86. Unsere Favicons: Alles klar, also sind wir fast in der Nähe von langer Kette alle Website im Internet. Aber bevor wir das tun, lasst uns schnell ungefähr fünf Symbole nehmen. Und wenn Sie nicht wissen, was, wenn ich Icon ist Es ist im Grunde das Ich kann Sie auf Ihrem Browser-Tabs sehen . Also hier öffnen. Sie können sehen, dass dies das Fünf-Symbol für unsere Website ist. Ich habe andere Websites, die ich geöffnet habe. Wir haben Amazon. Sie können sehen, dass die A und die Gelb sind Zeichen genau dort. Du hast Mars. Wenn Sie den Mars nicht kennen, sind sie Spezialisten in S e o. Achten Sie darauf, die Website zu überprüfen, aber Sie können ihre eigenen sehen. Perricone ist ein M mit blauem Hintergrund. Sie haben auch Labor Cyber über dem schwarzen und grünen Schild. Und es ist nicht so wichtig, dass Sie haben müssen. Wenn ich das habe, kann ich es. Aber es ist gut zu haben. Es zeigt Professionalität. Es zeigt auch die Klasse jetzt. Wir haben bereits ein Fünf-Symbol, aber ich habe Ihnen nicht gezeigt, wie Sie tatsächlich Ihre erstellen können. Es gibt mehrere Tools im Internet, die Sie verwenden können. Einer meiner Favoriten wird das Rial fünf Symbol generieren alle Punktnetz sein. Was hier passiert, im Grunde ist, dass, wenn Sie hier gehen, können Sie zivikalisch Ihren Stoff auf dem Bild auswählen und einfach das Bild auswählen, das Sie verwenden möchten. Jetzt empfehlen sie Ihnen, mit einem Bild zu gehen, das etwa 60 bis 60 ist. Es gab mindestens eine seiner 70 von 70. Beachten Sie, dass es sich um Quadrate handelt, die Abmessungen sind quadratisch. Also bitte, was auch immer Stoff, wenn Sie verwenden möchten, stellen Sie sicher, dass die Bilder in einem quadratischen Format. Also werde ich einfach weitermachen und das Logo benutzen, das ich habe, und lass uns runtergehen und es hochladen. Nun, wenn Ihr Bild nicht bis zu 60 von 60 ist, werden Sie zu dieser Nachricht sagen, dass Hey, wissen Sie, wir sind Befehl, um bis 60 erfolgreich zu sein. Ich werde das einfach ignorieren und mit diesem Bild fortfahren. Alles klar, hier können Sie beginnen, die Ergebnisse zu sehen, wie ich auf verschiedenen Werkzeugen aussehen würde und sagt uns, so dass jeder sehen kann. Dies ist für nächste nach oben und Google, es sieht gut aus, wenn Sie hier nach unten scrollen, so wird es aussehen wie auf IOS Sie haben den Blutbeutel ungenannt dort mit dem Symbol. Das ist okay. Du hast die für die genussvollen Komas. Nun, Sie haben jetzt die für Windows Metro in diesem Fall. Ich mag diesen Hintergrund nicht, weil ich denke, es ist eine Art Überlappung mit der hellen Farbe, so dass wir mit sagen wir, dunklerem Blau als Beispiel gehen können . So im Moment können Sie sehen, es sieht jetzt so viel besser aus. Das geht also weiter unten. Und, ah, ja, also wirklich, das ist alles, was du an diesem Punkt tun musst. Im Moment haben Sie den letzten Schritt, in dem Sie auswählen müssen, wo Sie sie anzeigen möchten . Sie möchten, dass die fünf Symbole in diesem Kerl sind jetzt haben Sie die Möglichkeit zu sagen, Abu spielt def amerikanische Dateien auf dem Holz von meiner Website. Es wird empfohlen, aber ich empfehle Ihnen nicht, dies tatsächlich zu tun, denn das bedeutet, dass Sie Ihre fünf Symbole innerhalb dieses bestimmten Ordners genau entfalten müssen , halten Ihren HTML-Index, und ich würde lieber My Fabric kommt in einem Ordner namens Five Icons innerhalb des Assets-Ordners , wenn sie außer so hier ist genau das, was wir tun werden. Okay, ich gehe wieder hier rein, und ich werde sagen, ich will es nicht im Stammverzeichnis meines Ordners platzieren. Stattdessen werde ich es in die Vermögenswerte legen, und dann sind die fünf Aikens zusammengeklappt. Lassen Sie mich nur bestätigt, dass ich Vermögenswerte richtig verschütten, weil ich Tablette verschütten, also ist es OK. Ich wusste, dass etwas nicht stimmt, als ich das sah. In Ordnung, das ist nicht der Geist des Vermögens, oder? Assets A s s E t s okay. Ich muss mich daran erinnern. Also werden wir jetzt tun, ist, dass wir die fünf Icons innerhalb dieses Verzeichnisses platzieren werden Assets und dann fünf Icons haben. In Ordnung, also gehen wir weiter. Jetzt. Klicken Sie auf Generator Fabric Eigentümer und HTML-Code. Und, ähm, das ist es in der Zwischenzeit, werde ich jetzt wieder hier reingehen, anstatt unsere Vermögensmappe. Ich werde jetzt einen neuen Ordner erstellen. Ähm, ikonische wurde gerufen. Die fünf Symbole werden zusammengeklappt. Okay, also gehen wir zurück. Teoh schaltet sich ab. Also genau hier. Es steht unten mit deinem Paket, okay? Und dann in diesem Code im Kopfbereich deiner Seiten werde ich jetzt einfach voran gehen und erst dieses Gericht schnappen, also lasst uns die Kopie Kopf zurück zu Mr. Brackets holen. Also lasst uns genau so, als würde ich voran gehen. Und jetzt bewegen wir den ursprünglichen Stoff darin, dass wir die Verbindung hatten, alles, was wir dieses bewegen, lassen Sie uns etwas Raum schaffen. Und jetzt gehe ich einfach weiter und füge den ganzen Code ein. Lassen Sie mich sicherstellen, dass alle diese Links korrekt mit Registerkarten versehen sind. Da gehst du. Und OK, also, Kreditgeber, entfernen Sie diesen leeren Raum. Entfernen Sie hier auch das letzte leere Feld. Okay, das ist gut. Jetzt spart den Kopf zurück. Teoh sprengt in die Luft. Also, jetzt werde ich einfach gehen und das £5 Paket herunterladen. In Ordnung. Also, wie Sie sehen können, habe ich das Paket heruntergeladen. Gehen wir rüber zu meinen Ordnern. Und es ist gerade jetzt innen aus den fünf Icons Ordner, die Sie sehen können, das ist die ZIP-Datei. Also, was wir jetzt tun müssen, ist einfach zu extrahieren. Ich werde jetzt weitermachen und alle Dateien extrahieren. Und jetzt finden Sie eine weitere Mappe mit den tatsächlichen fünf ein Konzert nachdem Sie hier gegangen sind und dann bewegen wir uns wieder. Ich schneide das alles ab und stelle sicher, dass sie tatsächlich innerhalb des Fünf-Account-Ordners sind. Also werde ich jetzt weitermachen sie hier bezahlen. Lassen Sie uns die ZIP-Datei und auch den Paketordner entfernen. Das ist es also. Stellen Sie also sicher, dass, wenn Sie Ihre ähnlich machen, stellen Sie sicher, dass die fünf rechnet sich innen direkt innen von innen sind. Ihre fünf Symbole sind Ordner. Also wurde uns gesagt, dass alles richtig laufen sollte. Aber wenn ich jetzt zu meinem Browser zurückgehe und ich diese Seite aktualisiere, würden Sie feststellen, dass wir das Fünf-Symbol nicht mehr sehen. Nun, ich bin mir nicht sicher, warum das nicht lokal passiert, aber ich habe das bereits getestet. Und ich weiß, dass, wenn wir unsere Website live im Internet starten, Sie das Fünf-Symbol sehen werden und in der Tat, lassen Sie mich das schnell tun. Ich werde jetzt voran gehen und eine meiner Beispielseiten öffnen und Sie können sagen, das ist genau der gleiche Code, den wir haben. Aber beachten Sie, dass dies eine tatsächliche Live-Website-Aufgabe ein entscheidender kommen und Warum können Sie sehen Wir haben jetzt. Die fünf zeigen und ich habe genau die gleiche Farbe verwendet, die wir hier haben. Es gibt also etwas, was ich nicht weiß, was es genau ist. Aber wenn wir gehen vor, um unsere Website live im Internet zu starten sind die fünf Symbol hier oben , so dass, wenn ein fünf Symbole hoffen, dass Sie Video genossen, Ich werde Sie in der nächsten Klasse zu sehen. 87. HTML: schon wirklich fast bereit, jetzt endlich unsere Website zu starten. Aber bevor wir dies tun, ist es wichtig, dass wir überprüfen, dass unser gesamter Code überprüft und auch optimiert wurde . Jetzt haben wir bereits zuvor über den CSS-Unifier gesprochen. Vergessen Sie nicht, dies zu tun, kurz bevor Sie bereit sind, zu Ihnen kommen hierher zu starten, implizieren Sie alle Ihre CSS eine einheitliche Ausgabe und dann kopiert sie in der Effektausgabe auf Ihren Stil , der diese Datei sagt. Vergiss nicht, das zu tun. Wenn Sie die Geschwindigkeit von Ihrer Seite optimieren möchten, ist es nicht obligatorisch. Es ist nicht notwendig. Aber es hilft, die Geschwindigkeit von Ihrer Website zu erhöhen. Gehen Sie voran und schließen Sie das, aber das ist für das CSS. Nun, für das HTML-Dokument, das wir haben, gibt es einen anderen Dienst namens Validate all. Und im Grunde, was dies tut, ist, dass es eine HTML-Datei ist, um sicherzustellen, dass es keine Ellenbogen gab, es keine gebrochenen Links gibt. Und es ist nur ein sehr, sehr gutes Werkzeug zu verwenden, kurz bevor Sie Ihre Website starten. Das Leben im Internet. Also genau hier gibt es die verschiedenen Möglichkeiten, wie Sie überprüfen können. Was wir tun werden, ist, dass wir durch Datei-Upload validieren werden. Ich werde dort klicken, und dann werde ich unseren Index Punkt html final wählen. Lasst uns weitermachen. Öffnen Sie das und ah, klicken Sie auf überprüfen und sehen, was wir haben, und Oh, nun, wir haben eigentlich drei Pfeile. Wow. Okay, ich wurde nicht erwartet, um ehrlich zu dir zu sein, okay, mal sehen. Also haben wir ein schlechtes Ventil für Attribute. Zeit online 491. Okay, lass uns zu unserer Indexpunkt-HTML-Datei gehen und mal sehen, also bleibt es online. 491 und es ist die Wunde. Ah, wo ist es? Okay, also hier drüben, Zeile 491 Augen. Also, was ist das Problem hier, lass mich hier wieder rein gehen. Es sagt, ist eine schlechte Villa für die tatsächliche, aber Typ auf Element zuschreiben. Okay, lass uns sehen. Ach, ok. Ich sehe, was das Problem ist. Also habe ich gehört, dass wir nicht angegeben haben, welche Art von Feld der Titel sein soll. Also in diesem Fall wird gerade jetzt nur Text sein. Ok, Text. Lass uns einfach wieder in ihn gehen und sehen, was die anderen beiden noch waren. Also Nummer zwei liegt auch für 91 Es sagt, dass der Platzhalter nur erlaubt ist, ein MP-Typ ist E-Mail-Nummer. Passwort. Okay, okay, weil wir den Typ als Text angegeben haben. Das sollte sich aufpassen. Und schließlich, Aufzeichnung ist nur erlaubt, wenn? Ok. Ok. Das einzige Problem, das wir hier hatten, war, weil wir vergessen haben, den Typ des Feldes anzugeben, der dies sein soll. Infolgedessen war das der allererste Aargh. Und zweitens können Sie keine Dinge hinzufügen, die für jede Art von, ah Feld erforderlich sind, das keinen Typ hat. Deswegen hatten wir die Teufelsbotschaften. Und Sie können auch einen Platz hinzufügen, der älter ist für alle Gefühle, die keinen bestimmten Typ haben. Also Maley, indem Sie angeben, dass dieses Feld hier ein Textfeld ist. Ich denke, es sollte uns gut gehen. Dann geh weiter. Speichern Sie nun diese Datei. Lass uns hier wieder rein gehen. Ich gehe zurück und wähle das gleiche fiel wieder, weil das die gleiche Version ist . Öffnen wir das und lassen Sie uns nachsehen. Also Okay, es wird jetzt sehen, wir haben keine Ebenen mehr auf auch, und es ist auf HTML. Dokument ist gut zu gehen, und wir sind bereit, alle Dateien ins Internet hochzuladen. So ein deutsches Ereignis. Nächstes Video. Nun, wir werden nun weiter gehen von Ah, Domain-Namen, Hosting und schließlich unsere Website starten. Das Leben im Internet. Dann seh ich dich. 88. Unsere Website live starten: Okay, also sind wir alle bereit, das gesamte Website-Leben im Internet zu starten. Aber wir brauchen Dinge. Wir brauchen einen Domain-Namen, und wir brauchen auch einige Hosting. Nun, es gibt mehrere Hosting-Unternehmen da draußen, und einer meiner Favoriten ist Nebengelände. Ich bin seit vielen, vielen Jahren Gastgeber mit ihnen , und sie sind, meiner bescheidenen Meinung nach, eines der besten unserer Pferde und Unternehmen der Welt. Wenn Sie wollen In seiner Alternative, Ich verwende auch Cloud-Möglichkeiten, die Männer Unterschied hier ist, dass Cloud Way spezialisiert auf Cloud-Hosting . Das Hosting hier ist also viel schneller, aber es ist jetzt auch ein bisschen teurer. Side Ground bietet auch Cloud-Hosting, aber ihr Cloud-Hosting ist ein bisschen teurer als Cloud-Wege. In Ordnung, also ein Grund, warum äußere Bemerkung. Zunächst einmal, dass Sie mit Side Guns beginnen, weil zusätzlich zu in unserem Cloud-Hosting haben, sie haben die regelmäßige Art von Hosting, das wäre das Shared Hosting. Lassen Sie mich Ihnen ein Beispiel zeigen, wovon ich hier spreche. Sie haben verschiedene Pakete. Sie haben diese Art von Posting groß und dann gehen Geek. Der Hauptunterschied zwischen diesen drei natürlich ist natürlichdie angebotene Funktionalität. Starten Sie, zum Beispiel, bietet Sie nur wollen einzelne Website wachsen große Angebote Sie unbegrenzte Website, so gibt es gehen Gig. Aber dann ist der große Unterschied zwischen Go big und go get ist, dass zurück. Natürlich Angebote. Du bist mehr Platz. Es kann 100.000 Besuche pro Monat verarbeiten, während Grbic unheilig 25.000 behandelt. Und so ist die Sache, wenn Sie alle Mittagessen in einer echten Website heraus empfehlen dort. Sie gehen entweder mit dem Startup-Paket oder wachsen groß. Jetzt, da Ihre Website beginnt, mehr Traffic zu gewinnen und Sie das Bedürfnis haben, Ihre Pakete zu aktualisieren , können Sie immer gehen, um Gig zu gehen. Oder, wenn Sie es vorziehen, können Sie am Ende von Side gun wechseln und gehen Sie über zu Cloud-Wege für Cloud-Hosting. Keine Sorge, Sie können immer erzengel diese Angebote und Pakete später, aber obwohl kommen natürlich begonnen Seite Boden und gehen Sie entweder mit dem Startup-Paket oder dem Go big. Nun, bevor wir mit dem Host gehen und wir müssen uns einen Domain-Namen kaufen. Nun, um das zu tun, werde ich wieder zu Diensten gehen. Aber jetzt werde ich zu Domains wechseln und ich werde auf die Register-Domain klicken . So haben Sie die im Grunde die Domain-Erweiterungen. Du hast die U. S. die Ruhe. Keine Brennnessel Auto Biz. Idealerweise möchten Sie mit der Ruhe gehen. Die Ruhe ist bei weitem die beste. Denn wenn die Leute den Namen Ihrer Website hören, die automatisch als sie, wird es in com enden. Es wird nie Izumi Oh, es sollte in Punktnetz oder die AWG enden? Nein. Die einzigen anderen Zeiten, in denen Sie vielleicht nicht wollen, um die com zu verwenden, ist, wenn, sagen wir, Sie bauen eine Website für die Schule , zum Beispiel, dann Punkt e d. Sie könnten viel angemessener die Ogle vor, wie Organisationen und so weiter. Aber die meiste Zeit, 90% der Zeit wollen Sie mit dot com gehen. Hier haben Sie also die Möglichkeit, in und Abschnitt einzugeben, um zu sehen, ob der Domänenname, den Sie möchten vorhanden ist. Also in diesem Fall jetzt, der Name unseres Unternehmens ist Web-Auswirkungen. Also werde ich Web-Impact eingeben, und ich werde dot com wählen und ah, mal sehen, ob das existiert. Ich werde sehr, sehr schockiert sein , wenn es jetzt ein Anliegen ist, dass es nicht für die Registrierung verfügbar ist. Also werde ich einfach voran gehen und die SI zwei K wechseln und sagen wir, ich werde jetzt gehen und so und hoffentlich, dass eine verfügbar sein wird und es auch nicht verfügbar ist. Also, wenn ich gerade tun werde, jetzt ist, werde ich einfach voran und fügen Sie ein C, so dass es jetzt Impact dot com ist. Gehen wir voran und suchen Sie nach diesem, und das ist verfügbar, um zu verstehen. Nun ist die Sache, das ist keine gute Website, also kümmert ich mich wirklich nicht um den tatsächlichen Domain-Namen selbst. Aber wenn Sie bauen Öl starten eine echte Website, bitte verbringen Sie einige Zeit, um mit einem Domain-Namen zu kommen, die übereinstimmen, was Sie versuchen zu bieten und wäre auch sinnvoll. Gehen Sie nicht in, um mit der Eingabe in zufälligen Wörtern und ah zu beginnen, nur damit Sie sich einen Domain-Namen bekommen können, stellen Sie sicher, dass Ihr Domain-Name Sinn macht und auch in gewisser Weise verwandt ist. Um welche Website geht es? Also mache ich es jetzt. Ich werde jetzt voran gehen und Web Impact oder zu Hause auswählen. In Ordnung, so genau hier. Ich werde voran gehen. nun Klicken Sienunauf, fügen Sie hinzu. Also ist es jetzt hinzugefügt, hier unten. Eine Menge hängt auch von der Hosting-Firma gehen mit so könnte Ihnen zusätzliche Dienste anbieten. Manche vielleicht nicht. Also, in dem Fall, ab Seite gehen jetzt, sie bieten zusätzliche Hosting das Angebot Domain Privatsphäre. Also, wenn dies das erste Mal ist, dass Sie mit Saigon gehen, Ich kann Ihnen empfehlen, klicken Sie auf hinzufügen, so dass Sie mit dem Domain-Hosting Web-Hosting-Paket direkt hier gehen können, so dass Sie auf Hinzufügen klicken können, und Sie können dann wählen, welchen Plan Sie gehen möchten mit. Aber ich habe bereits einen Hosting-Plan mit Seitenboden, also brauche ich das nicht. Alles, was ich jetzt tun werde, ist, dass ich hier reinkomme und einfach für den Domain-Namen bezahlen werde . Nun, eine Sache, die ich erwähnen sollte, ist, dass, wenn Sie sich den Domain-Namen und das Hosting binden, Sie einige Überprüfung durchführen müssen. So müssen Sie sich selbst versorgen. Sie geben ihnen die Telefonnummer an, mit der sie Sie dann entweder anrufen oder Ihnen eine SMS senden können. Dann ist das das erste einer Verifizierung. Der zweite Schritt als, dass sie eine kleine unsere Bank-Transaktionen durchführen oder eine Karte mit einem bestimmten Betrag aus Geld belasten . Sie müssen also auf Ihr Bankkonto gehen und überprüfen. Sagen Sie ihnen, wie viel sie tatsächlich in Rechnung gestellt haben, und überprüfen Sie dann Ardell Ihre Identität. Es ist natürlich aus Sicherheitsgründen wichtig , damit Sie sehen können. Im Moment habe ich meine Identitäten verifiziert, und jetzt kann ich auf die Homepage gehen und als nächstes wird es sein, eine Website einzurichten. Jetzt gehen wir einfach voran und schließen uns. Wolke wiegt. Also, wie ich sagte, Sie brauchen Domain-Namen und er muss auch Hosting. Und ich sagte, Alia, dass ich nicht in Hosting gehen würde, weil bereits ein Hosting-Konto mit Nebengrund haben . Aber lassen Sie mich Ihnen zeigen, wie Sie die Vorteile der Kriegsmonat-Wiederaufnahme nutzen können, die Saigon bietet meine Studenten sind, so dass Sie hier gehen können, um auf Setup Seiten klicken oder Sie könnten auch einfach zu unseren Diensten gehen. Sie können zu Diensten kommen und dann werden Sie die kostenlose Holsten Link sehen. Sie können dort klicken, also werde ich mit dem Startplan gehen. Ich klicke auf einen glatten Plan. Und jetzt wäre das wichtig. Stellen Sie sicher, dass Sie das Rechenzentrum auswählen, das Ihrem eigenen physischen Standort am nächsten liegt. Also, wenn Sie in Asien sind, wollen Sie mit Singapur gehen. Wenn Ihr neuer, wenn Sie mit Deutschland oder den Niederlanden und so eins gehen können, werde ich mit Asien Singapur gehen, Ich klicke auf Bestätigen, und ich werde jetzt auf Bestellung klicken und ah, Ordnung. Mal sehen, was passieren wird. Ich denke, ich bekomme eine E-Mail, die unsere Verarbeitung vom Holsten-Paket bestätigt. Also lasst uns noch ein paar Sekunden warten. In der Regel dauert es nicht zu lange, bis der Auftrag den Prozess beendet. Und oh, vielleicht tut es das. In Ordnung, ich muss das Video pausieren und immer, ähm, ähm, das Video will, dass die Bestellung beendet ist. In Ordnung, also dauerte es fast zwei Minuten, bis der gesamte Prozess abgeschlossen war. Aber jetzt siehst du, dass Say's alles bereit ist. Also werde ich auf Einrichtungsseite klicken. In Ordnung, also kümmert es mich, dass du es sehen kannst, Cesar. Neue Domäne. Vorhandene Domäne. Temporäre Domäne. Jetzt haben wir bereits eine Domain, die wir gerade gekauft haben. Also werde ich auf existierende Domain klicken und ich werde hierher kommen und mit Web Impacto nach Hause gehen . Ich klicke auf Weiter und das ist es. In Ordnung. Also, was ich tun werde, ich höre, ich werde einfach auf Überspringen klicken und acht leere Seite erstellen, die dort klicken . Und ah, sind zusätzliche Dienste, für die Sie gehen können. Sie sind nicht nötig. Also koche ich einfach am Ende. Und so im Grunde, das wird jetzt die bedeuten, dass Sarah Gone die notwendigen Dateien für die Domain erstellt um zu existieren, es erstellt auch die Datenbanken. Also, was ich jetzt tun werde, ist, das Video noch einmal zu pausieren und wieder aufzunehmen will. Dieser Prozess ist beendet, in Ordnung. Sagt, dass Sie jetzt sehen können, sagt es, dass Sie alle eingestellt sind, wenn ich auf gehen Sie zur Website direkt hier klicken. Und im Grunde ist das, was du sehen würdest. Sie Es sagt so etwas wie, es ist nur sagen, dass Hey, es gibt eine tolle Website kommt zu diesem bestimmten Domain-Namen und würde gehen Sie voran und schließen Sie dies und ich werde gehen, um zu verwalten Website jetzt. Der nächste Schritt, den wir durchlaufen müssen, ist, dass wir die Dateien hochladen müssen, die wir in unserem Ordner für die Website haben . Ich spreche über den Index des HTML, die fünf Symbole, all die Bilder, die wir brauchen, um all diese Dateien auf alle Website hochzuladen. Also genau hier ist dies im Grunde das Backend für Seitenboden. Und lassen Sie mich einfach betonen, dass jedes Hosting-Unternehmen, mit dem Sie in der Tat gehen , die meisten von ihnen, sie werden etwas sehr Ähnliches haben. Also, selbst wenn Sie nicht mit Seitenboden gehen, wird es immer noch ähnlich sein, was Sie mit Ihrem eigenen Web-Hosting-Unternehmen finden könnten. Was Sie also tun möchten, ist, dass Sie nach einer bestimmten Funktion suchen möchten, die den Dateimanager genannt wird . Ich bin sicher, du wirst es etwas in deinem Rücken finden und meins ist hier drüben. Also werde ich auf Dateimanager klicken, und es ist dieser Dateimonitor, der uns erlaubt, unsere Dateien auf unsere Website hochzuladen. Nun, beachten Sie, dass, wenn Sie es für das Recht hier erweitern, Sie werden diesen Ordner namens Unser öffentlicher Punkt XML-Ordner sehen Es ist innerhalb dieses Ordners wo wir alle unsere Dateien hinzufügen sollen. Also bitte tun Sie das immer. Stellen Sie immer sicher, dass die Fouls, aus denen sich Ihre Website im HTML-Ordner der Schule befinden. Also genau hier, O p a. Sie können sehen, ich habe die Option aus, eine Datei hochgeladen oder ein Fold up hochgeladen. Also lassen Sie uns einfach voran und laden Sie den Index in der HTML-Datei hoch. Zunächst einmal, also lasst uns voran, lade das hoch. Und dann gehe ich jetzt rüber zum Ordner und lade die Assets hoch, falte mich mit allen Bildern. Es heißt also, dass dies einige Vermögenswerte abschütteln wird. Ja, gehen Sie weiter und laden Sie das hoch. Es ist kein Problem. Alle Bilder waren also niedrig. Wurde applaudierte Logos, die Bilder von ah Teammitglieder, die fünf ich Hühneraugen und alt natürlich, die CSS-Datei haben Konto. Das vergessen wir. Okay, das ist also ziemlich schön Alle 37 Dateien wurden erfolgreich hochgeladen. Und jetzt der Moment der Wahrheit. Wenn ich jetzt voran gehe und die Stätten besuche, lass uns einfach voran gehen und zu jedem Blütenblatt Ruhe gehen. Da gehst du, es ist jetzt geladen. Da ist es. Wir haben jetzt Web-Auswirkungen oder Kamm live und direkt auf die Internets, und da ist es. So können Sie Ihre Dateien auf Ihren Webserver hochladen. Nur ein paar Punkte, als ob Sie viel oder Dateien haben, und Sie würden sie lieber nicht nacheinander hochladen. Was Sie tun können, ist, dass Sie sie einfach zu einer einzigen ZIP-Datei adul, laden Sie diese ZIP-Datei und extrahieren Sie dann die ZIP-Datei. In meinem Fall jetzt einen gibt es jetzt einenExtrakt-Button. Es ist derjenige hier, damit Sie diese Dateien extrahieren können. Stellen Sie jedoch sicher, dass sich Ihre Dateien im DO-Root-Verzeichnis befinden. Okay, stellen Sie sicher, dass sie direkt in Ihrer Öffentlichkeit im HTML-Ordner der Schule. Wenn sie sich in einem anderen Ordner befinden, haben Sie möglicherweise ein oder zwei Probleme damit. Also last but not least möchte ich Sie ermutigen, dass Sie irgendwelche Probleme beim Hochladen Ihrer Dateien haben oder etwas nicht richtig funktioniert. Ich empfehle Ihnen zunächst, wenden Sie sich an Ihr Web-Hosting-Unternehmen. Wenn sie ein gutes Unternehmen sind, sollten sie in der Lage sein, Ihnen zu helfen. Und da es ihr eigenes System ist. Sie werden in einem sehr, sehr guten Präsidentschaftsrat, wie Sie Ihre Dateien am besten hochladen. Aber das war's. Wir haben unsere Website erfolgreich hinzugefügt. Leben im Internet Denken ist viel Glück. Wir sehen uns in der nächsten Klasse. 89. Skripte verwalten: bereits, Glückwünsche wurden erfolgreich gestartet unsere Website Leben im Internet. Aber jetzt, da es im Internet ist, können Sie beginnen zu bemerken, ist ein oder zwei Fragen, vor allem in Bezug auf die Geschwindigkeit aus Ihrer Website jetzt zu sehen, Wenn ich möchte, meine Seite zu aktualisieren, beachten Sie, dass es beginnt, nehmen ein wenig länger als üblich, besonders wenn Sie anfangen, zusätzlichen Code hinzuzufügen und vielleicht werden Sie von Google oder von anderen Diensten erwischt , um Ihrem Kopf der PHP-Datei etwas hinzuzufügen. Dinge wie diese, könnten Sie beginnen zu bemerken, dass Ihre Verlangsamung auf dem Kopf nur ein wenig. Eine Möglichkeit, sicherzustellen, dass Ihre Website so schnell wie möglich ist, besteht darin, Ihre Skripte zu verwalten und wovon spreche ich? Wenn ich zurück zu unseren Nebenwerkzeugen gehe und den Index der Exkrementdatei geöffnet habe, beachte, dass wir hier ein Skript von vorne aufrufen. Ehrfürchtig. Es ist Spaß, genial, verantwortlich für die Anzeige all dieser Symbole auf unserer bezahlt. Denken Sie jedoch daran, dieser Kooperator in unserem Kopf ist im Kopfbereich auf der Website eine Möglichkeit, wie wir die Geschwindigkeit unserer Websites weiter verbessern können , ist es, Skripte wie diese in den FOTA-Bereich zu verschieben. Also, was du tun willst, ist, dass du dieses Skript packen willst und dann werde ich jetzt voran gehen und das abschneiden. Ich werde den ganzen Weg hier runter kommen und kurz nach dem Fuß ein Abschnitt werde ich nicht das Drehbuch Licht dort beschleunigen. Ich kann jetzt voran gehen und das retten. Und natürlich, wenn ich zurück zu meinen Rechnungen gehe, sind wir zuerst die Seite und Ah, da gehst du. Also im Grunde der Punkt hier ist, dass, wenn Sie Skripte haben, es sei denn, es wird explizit gesagt, dass diese Skripte im Kopfbereich Ihrer Website sein müssen , Sie sie normalerweise in die Fußzeile verschieben möchten, weil gerade jetzt bestellen. Vorher, wenn die Skripte waren in der Kopfabschnitt passieren wird, ist, dass der Browser von oben in Ihrer Datei beginnt und geht den ganzen Weg nach unten. Also in diesem Fall, gerade jetzt, bevor die Boza bekommt, um das Logo, den Inhalt Ihrer Seite, wird es das Skript treffen, allem, und es wird sein Skript ausführen müssen. Executive-Übersprungen dauern länger als die Ausführung normaler Inhalte. Anstatt zu haben, wer auch immer Ihre Website besucht, wartet auf den Bruder, um das Skript auszuführen , kann der Präsident zumindest den Inhalt Ihrer Seite sehen und dann unten. Schließlich, sobald die Schläge A in den Fuß des Abschnitts gelangt ist, kann es dann das Skript ausführen, um diese Symbole anzuzeigen. Die Symbole, in denen diese Symbole hier sind, sind nicht so wichtig wie der tatsächliche Inhalt außerhalb der Seite. Also nochmals, sofern nicht ausdrücklich angegeben, füge ich Ihre Skripte immer im Fußzeilenbereich Ihrer Website hinzu. Also, das war's. Vielen Dank, dass Sie zugesehen haben. Und natürlich sehe ich dich in der nächsten Klasse. 90. Du hast es: Das war's also. Wir sind bis zum Ende dieses Abschnitts gekommen. Wir haben uns eine echte ummauerte, interaktive, responsive Website mit HTML fünf und CSS drei gebaut interaktive, und von der Unterseite meiner hatte Kalk. Sag nicht so sehr, dass du es so weit geschafft hast, und ich hoffe, du hast es in zwei auf der Reise gelernt. Nun, wenn Sie den Kurs bisher geliebt haben, würde ich Sie ermutigen, eine Rezension für den Kurs zu hinterlassen, bitte, weil Bewertungen wirklich helfen mir sehr. Und ich würde eine schriftliche Rezension von Ihnen wirklich schätzen. Jetzt, wenn Sie interessiert sind, habe ich mehr Inhalte. Ich habe zu anderen Abschnitten, wo ich zeige Ihnen die Grundlagen dessen, was Design und auch das Geschäft der PHP-Umfrage interessiert? Achten Sie darauf, diese beiden Bonusabschnitte zu überprüfen. Ansonsten, wenn Sie mit dem zufrieden sind, was Sie bisher gelernt haben, Gliedmaße sagen Sie einfach so viel Nochmals und Lindas wünscht Ihnen alles Gute in Ihrer Prüfung. A Five und CSS, wo Projekte denken, es ist viel und auch das nächste Mal bye bye 91. Design Vorschau: Willkommen zu diesem ganz besonderen Bonusbereich, wo wir gehen, um Web-Design zu bekämpfen, und es ist eine Sache zu wissen, HTML und CSS sagt. Aber es ist eine ganz andere, es zu entwerfen. Webseite. im Grunde an die Arten von Kollagen, Denken Sieim Grunde an die Arten von Kollagen,die die Arten von Bildern verwenden, die Sie verwenden werden, wie Sie in den Raum gehen, den Inhalt klingen, wie Sie die Strukturen entwerfen werden, Dinge wie diese. Es erfordert also etwas Training, um solche Dinge tun zu können. Gut gestaltet und Web-Entwicklung sind eigentlich zwei verschiedene Dinge. Stell dir Aufgeregt wie ein Haus vor, oder? Stellen Sie sich vor, ein Haus war eine Website. Der Architekt ist die Person, die das Haus entworfen hat. In diesem Fall ist der Architekt der Webdesigner. Der Weltentwickler ist der eigentliche Maurer, der jetzt beginnt, die Briggs zu setzen und das ganze Gebäude selbst zu erledigen. Das ist also der Unterschied. Viele Leute sind also Webentwickler, aber sie sind keine Webdesigner, was bedeutet, dass, obwohl sie eine Website erstellen können, sie jemand anderes brauchen, um zuerst zu verärgern und dann schauen sie sich das Design an und dann Bauen Sie es aus. Also, was ich hier tun möchte, ist, Ihnen zu zeigen, wie Sie auch den Ball vom Web-Designer nehmen und mit Ideen kommen, um eine Website zu entwerfen und dann schließlich zu bauen. Lassen Sie mich sagen, wollen reichlich klar, Ich bin mehr von einem Web-Entwickler als ein Web-Designer. Dieser Abschnitt ist also kein fortgeschrittener Abschnitt von irgendeiner Strecke der Phantasie. Dies sind nur reine Grundlagen des Webdesigns. Wenn Sie viel mehr sind, wenn Sie mehr daran interessiert sind, über Webdesign zu lernen, gibt es andere Kurse, die Sie besuchen können? Dieser Abschnitt ist alles über die Grundlagen, nur lehren Sie genug, um in der Lage sein, mit guten Designs für Ihre Websites kommen, Also ich hoffe, Sie finden einen Abschnitt von verschiedenen vollständigen Lassen Sie uns loslegen. 92. Standortstruktur: Wir heißen Teoh willkommen. Dieser neue Abschnitt, in dem wir über Webdesign sprechen und die allererste und ich mag zu sprechen, wird die allgemeine Struktur von Ihrer Website sein. Und lassen Sie uns anfangen, über den Kopf zu sprechen. Jetzt enthält der Kopf in der Regel das Logo sowie das Hauptnavigationsmenü, und die meisten Websites haben diese spezielle Formel, wo Sie das Logo auf der linken Seite und dann das Hauptmenü auf der rechten Seite. Wie Sie hier auf dem Web Auswirkungen sehen können oder kommen, Lab Cyber hat eine sehr ähnliche Struktur. Moss hat etwas Ähnliches, außer dass neben dem Logo auf der linken Seite, Sie haben auch dieses kleine Mini-Menü, das nächste Logo. Aber dann auf dem Licht haben Sie jetzt wie das Hauptnavigationsmenü. Jetzt gibt es heraus, welches Plus, das etwas Ähnliches hat. Schriftsteller, Sie haben das Logo auf der linken Seite. Sie haben das Hauptmenü direkt neben dem Logo. Aber dann, hier drüben auf dem Licht, Sie haben eine viele, viele, wo Sie sich einloggen oder versuchen, ihr Produkt für kostenlose Box, die etwas ähnliches kommen . Aber Sie haben die lokale auf der linken Seite, das Hauptmenü direkt dort in der Mitte, aber dann noch viele, viele weiße Tag zum Licht. Es kommt also wirklich auf die Art von Website an, die Sie alle bauen. Aber in den meisten Fällen haben Sie das Logo weiß dort auf der linken Seite. Und wenn Sie mehr als ein Menü in Ihrer Kopfzeile haben müssen, können Sie entweder mit dem ersten Menü rechts neben Logo gehen und dann das zweite dort drüben rechts, wie das, was Sie hier auf dem Mars haben und aus dem, plus, Oder Sie könnten sich entscheiden, das Logo auf der linken Seite haben, die Männer viele rechts in der Mitte und dann das zweite Menü auf der rechten Seite. Das ist in der Regel, wie Sie gehen wollen. jedoch andere Fälle, Es gibtjedoch andere Fälle,in denen Sie möglicherweise einen anderen Kopf des Designs haben, wo Sie das Logo genau dort in der Mitte des oberen und dann das Hauptmenü auf die Notwendigkeit haben würden . Das Logo. Jetzt ist diese Art von Design perfekt. Volle Restaurants, Kinos, Massage. Paolo Spas im Grunde bedienen über Yen Ted Websites, wenn das Sinn macht, aber gegen jetzt, das macht durchaus Sinn, weil zwischen dem Hauptmenü und dem Logo, Sie haben, wie das Telefon -Nummer. Was natürlich durchaus Sinn macht, denn dies ist ein Restaurant, in dem die Leute vielleicht anrufen möchten, kann Bookers Ausweichen sein. Vielleicht bestellen Sie etwas zu essen, damit es Dinge wie diese geliefert hat. Und, natürlich, sie haben auch ihre Öffnungszeiten, wenn sie geöffnet werden, wenn ihre Kleidung, die, natürlich, macht durchaus Sinn für diese Art von Website. Also wieder, es hängt alles von der Art der verärgert Ihr Gebäude. Wenn das Gebäude Fahrzeug bis eine Websites für Unternehmen, dann wollen Sie mit dem Logo auf dem linken Hauptmenü auf dem Licht gehen oder, wenn Sie bauen für Restaurants. Sind solche Pollos Parsons wie, dass Sie mit Habe nicht Logo direkt in der Mitte und dann das Hauptmenü unter dem Logo gehen könnte. Werfen wir einen Blick auf zwei Websites, die diesen Designkonzepten nicht folgen, und die 1. 1 hier wird Neil Patel dot com sein. Obwohl er sein Logo in der Hedda hat,hat er sein Menü nicht in der Kopfzeile. Obwohl er sein Logo in der Hedda hat, In der Tat ist es in der Fußzeile, aber hier unten, wie Sie sehen können, aber es gibt keinen Grund, warum dieses Design gut funktioniert. Es ist, weil von der Art off-Seite Website dies ist, ist dies eine Art wie Googles solche Box, wo Sie kommen hier, Sie tippen Sie auf eine Domäne, gegen die Sie konkurrieren wollen, und dann klicken Sie auf Suchen und dann zeigt er Ihnen, wie Sie nicht Rang dass Domain und Google und andere Suchmaschinen. Der Punkt hier ist also, dass die Leute nicht wirklich daran interessiert sind, auf der Website zu navigieren . Sie wollen nur hier herkommen, indem Sie Domain-Namen tippen und dann sehen, wie sie diese Domain besiegen können . Es ist irgendwie wie Google. Wenn Sie zu Google gehen, suchen Sie nicht, um zu navigieren. Sie möchten nur nach bestimmten Schlüsselwörtern suchen und dann weitere Informationen über diesen bestimmten Schlüssel erfahren . Was ist unser Thema? Also wieder, es kommt alles auf die Art von Website, die Sie entwerfen, und manchmal brauchen Sie vielleicht das Menü. Manchmal brauchst du vielleicht nicht die vielen. Also die flexible und schließlich, wir einen Blick auf TechCrunch Doc com. Rechts hier haben sie das Logo auf der linken Seite, aber dann haben sie auch ein eigenes Menü direkt unter dem Logo auf der linken Seite. Dies ist eine Designschuld, die Sie wahrscheinlich nicht viele Male sehen werden. Und es ist nicht das Beste. Meiner bescheidenen Meinung nach, ich meine, alle TechCrunch, ich denke, sie lese ich einige sehr, sehr schöne Artikel auf der Website manchmal, aber persönlich bin ich kein Fan von dieser Art von entworfen. Warum haben Sie nicht einfach Ihr Logo auf der linken, rechten Seite, und dann haben Sie Ihr Hauptmenü gleich hier auf dem Kopf. Aber zum Licht glaube ich, dass das viel besser aussehen wird, als es derzeit so aussieht. Das ist meiner bescheidenen Meinung nach nicht großartig . Also wollte ich nur darauf hinweisen. Vielleicht sehen Sie einige Websites mit dieser Art von, ähm, wie Design. In Ordnung. Aber wurden gesagt, Lassen Sie uns zum nächsten Abschnitt gehen und ich möchte über die Hauptüberschrift sprechen. Nun, Die Hauptüberschrift ist entworfen, um sofort einem Besucher zu vermitteln, was die Website ist alles über in seinen Mädchen. Im Moment, Webb, bleibt die Wirkung auf dem Niveau Ihres Unternehmens. Bauen Sie eine wirkungsvolle Webpräsenz auf. Also, Tiere, die sich hier zum ersten Mal begeben, werden wir das sehen. Okay, sieht so aus. Die Menschen werden sich darauf spezialisiert, Unternehmen zu helfen, ihre Präsenz im Internet verbessert weil im Grunde, was das alles ist, nie zu Neil Patel gehen. Es ist im Grunde das Gleiche, Len, Warum Ihre Konkurrenten so hoch rangieren und wie Sie auf lange sie können. Er erzählt Ihnen sofort, wie er Ihnen helfen kann Lobster Videos auf dem sehr ähnlichen, sie sagen, Cybersicherheit Wissen leicht gemacht, und sie bieten auch einige weitere Informationen. Hier drin ist Mars das Gleiche. Es gibt einen klügeren Weg zu tun. S E O. Sie gehen Teoh aus, die personalisierte kalte E-Mails senden, die Antworten erhalten und dann endlich Box dot com. Vereinfachen Sie, wie Sie eine sichere Zusammenarbeit mit jedem und überall auf jedem Gerät durchführen. Der Punkt war also, dass Licht nach dem Kopf oben, wo Sie ein Logo und Ihr Hauptmenü hatten , Sie eine Hauptüberschrift haben wollen, die beschreibt, worum es in Ihrem Geschäft geht oder worum es auf der Website geht. Das ist im Grunde das, was du tun willst. In Ordnung, lassen Sie uns diese anderen Websites schließen, weil wir sie nicht mehr brauchen. Und, ah, gerade Baltimore geschlossen, alles klar, also nächstes Mal, wenn wir darüber reden, wird diese Abschnitte sein. Alles klar, also genau hier, können Sie sehen, dass wir einen Abschnitt haben. für über uns. Wir haben Dienstleistungen durch Spaziergang mit uns und so weiter zur Verfügung gestellt. Aber wenn Sie bemerken, die Hintergründe ändern sich so über Haus, wie ein einfacher weißer Hintergrund sagt zur Verfügung gestellt hat ein Bild Hintergrund während zu Fuß Mit uns hat ein anderes weiß von Grand als gut gemacht. Das Team hat seine eigenen Hintergrund-Testimonials hat seinen einebenen Hintergrund wieder, Kunden haben eine andere Tasche, und jemand der Punkt ist hier, dass eine Möglichkeit, Abschnitte zu trennen ist, indem verschiedene Hintergründe für sie hinzugefügt werden. Es wird nicht gut sein, wenn Sie genau den gleichen Hintergrund haben, sind für mehrere Abschnitte nacheinander. Du könntest in gewisser Weise einfach eine weiße Tasche auf ein Flugzeug zurück haben in gewisser Weise einfach eineweiße Tasche auf ein Flugzeug zurück habenund einen anderen Typ abkühlen. Vielleicht, Aber in den meisten Fällen möchten Sie unterschiedliche Hintergründe für Ihre verschiedenen Abschnitte haben. Auf diese Weise vermittelt es an den Benutzer. Okay, das ist ein anderer Abschnitt, und es macht dich einfach viel attraktiver hier drüben. Ein Labor Cyber, den Sie sehen können, ist hier gestorben. Ich habe einen einfachen weißen Hintergrund für das, was Labor Cyber ist, und dann hat Mitchell Lehrer den grünen Hintergrund, während Upside eine weiße Ursache hat . Die Lobby hat einen grünen Hintergrund. Und dann haben Sie dieses, Ah, Video, das irgendwie wie einen schwarzen asiatischen Hintergrund hat Claims einen weißen Hintergrund, wenn als grüner Hintergrund beschuldigt wird. Software hat eine schwarze Tasche an und so weiter und so weiter. Sie können jetzt sehen, dass Sie mit jedem neuen Abschnitt einen neuen Hintergrund als Gewichte haben. Sie trennten sich vom vorherigen Abschnitt Seife. Das ist eine Sache, über die ich auch reden muss. Versuchen Sie, verschiedene Hintergründe für Ihre Abschnitte hinzuzufügen. Du könntest mit einem Plan gehen, Hintergrund, Coehlo oder du könntest mit einem Hintergrundbild gehen. Jetzt kommen wir den ganzen Weg hier runter zum Essen, und in der Regel ist Ihre Fußzeile, wo Sie Ihre Social-Media-Symbole haben könnten. Sie könnten sie auch in Ihrer Kopfzeile haben, wenn Sie möchten. Aber hier unten auf dem Foto, ist es ein guter Ort, um Ihre sozialen Medien zu vergleichen, und er könnte auch, wie ein zweites Navigationsmenü entfernt haben . Drittens im Navigationsmenü abhängig von der Website, die Sie in der Zukunft als auch haben. Also in der Regel hier wird das Menü in Ihrer Fußzeile haben würde gut spitzen Seiten, die nicht die beliebtesten in diesem geht jetzt. Zum Beispiel Richtlinien als Ereignisse übertragen. Diese sind nicht ganz so beliebt wie die Bestellungen hier. Wie, warum unsere Dienstleistungen Testimonials. Diese sind irgendwie wie die Bilder, die mehr gefragt sind. Also für die Seiten, die nicht so oft wieder gefordert werden, wie ich sagte, wie Richtlinien F beschuldigt, dass Sie sie in den Fuß, unsere Speisekarte. Und natürlich, vergessen Sie nicht, Ihr Exemplar zu haben. Lichter Text rechts Tag neue Fußzeile als auch 2020, wird aber Auswirkungen sein. In Ordnung, reserviert Der Wähler ist ein guter Ort, um Ihren Copyright-Text zu haben. guter Letzt Zuguter Letztmöchte ich nur über Animationen sprechen. In Ordnung, jetzt weiß ich, dass Animationen fantastisch sein können. Sie lassen Ihre Website sehr, sehr, sehraufregend aussehen , sehr . Aber versuchen Sie so viel wie möglich, um die Anzahl der Animationen zu begrenzen, die Sie auf Ihrer Seite ausgeführt haben , weil Animationen ich viel mehr Kraft zu verarbeiten. Je mehr die Missionen, die Sie auf Ihrer Website haben, so langsam. Warum? Es wird werden. Versuchen Sie also, Animationen oder Schieberegler oder sogar Video-Stretching zu minimieren. Minimieren Sie sie so weit wie möglich. Versuchen Sie, mit den GLA-Bildern und Text zu gehen. Aber in Fällen, in denen es ist, ist es sehr wichtig, dass Sie, ah, Video von Omen haben ah, . Sie können das Video zeigen, aber wie gesagt, versuchen Sie, die Animationen, die Schieberegler zu minimieren . Ah, und so weiter auf Ihrer Website. Also, das ist so vielen Dank für das Ansehen von Videos. Wir sehen uns in der nächsten Klasse. 93. Schriftarten: Lassen Sie uns also über einen sehr, sehr wichtigen Aspekt des Designs sprechen , und das wird Mittel sein. Die Mittel, die Sie auf extrem wichtig wählen, weil sie neigen dazu, den Ton aus Ihrer Website zu reflektieren . Telefone sind der beste Weg, um anzuzeigen, dass Art von Persönlichkeit Ihre Website verkörpert, so dass es professionell sein könnte. Es könnte eine Blogger-Art Persönlichkeit sein oder vielleicht sogar unsere Komiker in der Natur. Nun, um die Wichtigkeit von Telefonen zu demonstrieren, lassen Sie mich Ihnen nur einige Beispiele nennen. Also, genau hier auf unserer Website waren mit der ziemlich sicheren Sind Monserrat weg auf Familie? Richtig? Aber dann, wenn ich mich entscheide, hierher zu kommen und die Fondsfamilie von einer Abfindung zu wechseln, um uns vielleicht mit anderen wie kursiv zu gehen, oder? Also, meine Niere jetzt und sie ändern das in kursive. Sie können jetzt sehen, dass der Ton fast sofort ändert sich gerade jetzt, sogar die Schlagzeile es hat diese Art von ah Spaß, dass Sie normalerweise assoziieren es wie Film-Websites oder solche Sachen. Es spiegelt nicht mehr diesen professionellen Geschäftston wider. Und hier auf CBR, die eine Comic-Website ist, können Sie irgendwie die lustige Familie sehen, die sie hier verwenden. Es ist schon ähnlich dem Fluch, dass wir hier drüben haben. Aber weil diese Website über Comics, ein Comic Buch, Nachrichten TV zeigt Dinge wie diese. Aber schauen Sie sich mal mit der Washington Post an. Okay, das ist eine Webseite. Es ist eine Zeitschriften-Website für Nachrichten, und Sie können sogar aus dem Logo selbst sehen. Sie können sehen, dass es diese sehr künstlerische Art von Treibstoff hat. Zu diesem Zweck natürlich die Schlagzeilen hier sehen, können Sie natürlich die Schlagzeilen hier sehen,das ist sehr, sehr ähnlich wie die Zeiten New Roman und der Körpertext selbst. Es ist viel professioneller, als zu kreuzigen, was Sie hier auf C, Belgacom und ah Himmel haben , Ellipsen, die eigentlich privilegiert waren, weiterzugehen. Es ist der Eliminated Shaking Guy Dot Com, und natürlich ist dieser Typ ein Komiker. Er, Sie wissen, dass er ein Showman ist, ist, und Sie können direkt hier von den Telefonen erzählen, die verwendet werden, in dem er kann. Es spiegelt den Ton wider. Es wirkt sich auf den Ton der Website aus, den Sie hier unten sehen können, wir verwenden eine Art Comic Art von einem Fonds Universum, das hier abgekühlt ist. Sie können hier sehen, dass das Telefon benutzt wurde. Sie werden nie professionelle Telefone wie die gleiche auf Ausverkauf oder mal neue Roman auf Sets wie diese verwendet finden . Sie werden etwas mehr zu unseren Comic-Sounds oder kursiv oder so etwas finden. Also wieder, die Mittel, die Sie wählen, müssen den Ton von Ihrer Website reflektieren. nun Wenn esnunum die Schriftgröße geht, möchten Sie normalerweise mit einer Wissenschaft zwischen 15 Pixeln und 22 Pixeln für Ihren regulären Text gehen . Nun ist der Grund, warum es eine Reihe ist, weil nicht alle Spaß. Familien sind gleich, wenn es um ihre Größe geht. So könnte eine Monserrat Wissenschaft mit 15 Pixeln größer sein als eine kleine Größe von 15 Pixeln. Aber in der Regel zwischen dem Bereich von 15 Pixel und zwei in Pixel, Sie haben unser etwas Ideal für die Telefonfamilie, die Sie jetzt verwenden Headlines. H will H zwei Bienen sollten größer sein als Ihr normaler Text. Das ist der Tote von Sistan. Also hier ist eine Art wie ein Beispiel, von dem Sie vielleicht Ihre H haben könnten, die bei 40 Pixel h zwei die größte sein wird, vielleicht 34 Pixel jede drei würde zwischen vier wählen Susan. Natürlich wäre Ihr regulärer Text, der durch die P R dargestellt wird, 18 Pixel hier ist eine Art wie ein Beispiel aus dem Telefon sagt, dass Sie für Ihre Schlagzeilen und Ihren regulären Text haben würden. Nun, wenn es darum geht, die eigentliche Spaßfamilie selbst zu wählen, gibt es zwei Haupttypen. Okay, du hast die Sonnenserif und du hast Siri. Wenn Sie vielleicht schon von diesen gehört haben, dienen bedeutet einfach, dass der Text eine Erklärung am unteren Rand jedes Buchstabens hat, und Sie sehen dies in der Regel, vor allem auf wie die A's, die Tees und vielleicht sogar die S. Du wirst es sehen. Sie können hier sehen. Es hat so etwas wie ein Swagger oder Schwingen, oder ich weiß wirklich nicht, wie ich es beschreiben soll. Aber sieh dir den Grund der Sonne an. Sue, wenn bedeutet, dass nimmt Hachinohe Dekoration an der Unterseite jedes Beines gegen rechts bei Sonnenuntergang. Grundsätzlich sind es Wohnungen. Es gibt kein künstlerisches Design. - Nichts. Nichts dergleichen ist nur im Grunde flach, also ist dies im Allgemeinen der Hauptunterschied zwischen Ihrem Sohn Syrien und Ihrem Sarif. Also, wenn es darum geht, Ihre Telefonfamilie für Ihren Text zu wählen. Sie typisch auf dem goopy absteigt. So kurz etwas, weil es viel einfacher zu lesen ist als die Su If und wenn es um die Auswahl der Telefon-Familien kommt , Ich kann diese fünf von Google-Handys empfehlen. Diese fünf sind in der Regel die sehr, sehr besten, und sie sind die sicheren Telefone, mit denen Sie für Ihren Knöchel gehen können. Sex, den du offen hast, schickt dich Latell. Du hast sieben gewonnen, was mein Favorit ist. Sie haben einen echten Weg, und Sie haben auch PT-Söhne. Nun, mit dem gesagt, ich sage nicht, dass das die einzigen fünf sind, die Sie wählen können. Es gibt viele, viele Hunderte von anderen Fonds da draußen, aber der Punkt hier war, dass, wenn jemals Aktien und Sie nicht wissen, mit welcher lustigen Familie Sie gehen, gehen Sie einfach mit einem dieser fünf, und Sie werden in Ordnung sein. Also, wenn es um den Telefonstil geht und Sie mit einem Telefon für den Kopf als gehen und wissen, dass für Ihren regulären Text, es ist eine gute Möglichkeit, zwischen Ihren Schlagzeilen und unregelmäßigen Text zu unterscheiden. Sie bereit haben die Telefongröße, um den Unterschied anzuzeigen, aber es ist oft eine gute A. Haben Sie eine andere Art von Spaß? Familie spricht speziell für Ihren Kopf als einer für einen regulären Text und eine optionale. Sie könnten wählen, 1/3 Fonds für Ihre Links zu haben. Es ist nicht notwendig, aber das könntest du auch tun. Aber Sie wollen nicht mit mehr als drei unserer Bauernfamilien auf Ihrer Website zu gehen. Also, das ist es für Telefone. Vielen Dank, dass Sie zuschauen. Wir sehen uns in der nächsten Klasse. 94. Farben: Celestica Was wohl der wichtigste Aspekt des Web-Design und das wird Farben sein . Farben sind extrem wichtig, weil sie, genau wie bei den Fondsfamilien, genau wie bei den Fondsfamilien,auch Emotionen und Ton widerspiegeln. Die Farben, die Sie Schuhe diktieren die Emotion oder den Ton Associate ID mit Ihrer Website. Sehen Sie sich diese zwei Kreise an, in denen Sie die erste 1 haben, die größer ist. Es gibt keine Farbe da drin außer grau-schwarz und im Grunde sieht es leblos aus. Aber dann fügen Sie in einigen Schattierungen von Rot und Büro, irgendwie. Der Kreis wird nun etwas lebendiger. Dies ist der Einfluss von Carlos auf Ihre Website. Aber eine andere Sache ist, obwohl wir wissen, dass unsere Zielländer sehr, sehr wichtig sind, viel zu viel spielen. Anrufer kann auch dazu führen, dass Europa sehr, sehr klebrig und nicht sehr, sehr gut zu betrachten war. So kommt es wirklich darauf an, dass Sie eine Balance treffen, wenn es um die Auswahl Ihrer Halsbänder geht. Aber offensichtlich könnte die Frage genau hier haben, ist, wie wähle ich die Kahlo's für meine Website. Wenn ich hier tun werde, werde ich Ihnen drei grundlegende Schritte geben, um Ihnen zu helfen, gelöst zu werden . Diese Herausforderung für den allerersten Schritt hier wäre, einen dominanten Carlo zu wählen. Was ist der Kahlo mit meiner Marke mit meinem Logo verbunden? Mit meiner Website. Dies wird Ihre Domain und Kahlo sein. Ich möchte Ihnen den zweiten Schritt hier geben, der darin besteht , ein oder zwei Akte und Farben zu erstellen, um einen Anruf zu erstellen. Wir sind gekommen. So wählen Sie Ihre Haupt dominante Farbe, und dann aus dieser Farbe wählen Sie ein oder zwei Akzent in der Nähe, um diese dominante Farbe zu ergänzen . Und schließlich, in Schritt drei, wählen Sie einen Hintergrundanruf. Oh, diejenigen daran, grundlegende Schritte zu sein. Gehen wir zurück zum Schritt, das ist der dominante Kahlo. Der vorherrschende Ruf, wie ich schon sagte, ist Ihr Markenverband. Es diktiert im Grunde, worum es bei Ihrer Marke Wasser-Website geht. Hier sind einige Beispiele mit Coca Cola Light. Die dominanten College-Jahre, offensichtlich rot und mit der Zeit denke ich an Coca Cola. Sie denken aus dem Anruf oder lesen, aber Sie haben auch Animal Planet. Es ist kein Zufall, dass sie hier Grün verwendet haben, anstatt zu lesen. Sie sehen auch, warum sie hier Grün gewählt haben. Hier ist ein weiteres Beispiel von Best Buy. Wenn Sie in den Vereinigten Staaten oder möglicherweise sogar Kanada leben, haben Sie vielleicht von Best Buy Sie im Grunde von Ella Tricks gehört Von dort und in Dublin, Farbe hier ist in der Regel wieder Hommage. Sie werden sehen, warum sie sich entschieden haben, Orange hier zu verwenden. Wenn es um Farben geht, haben Farben verschiedene Arten von Emotionen, die mit ihnen verbunden sind. Rot, das sehr, sehr, sehrhäufig ist , sehr , steht für Energie, Gefahr, Lebendigkeit, Dringlichkeit. Sie würden in der Regel rot sehen, wenn Sie die Website Graben für mich haben oder etwas sehr, sehr wichtiges. Vielleicht gibt es einen Countdown. So etwas sagen, im Grunde drängt. Die Menschen sollen handeln. Jetzt haben Sie eine ist sehr, sehr ähnlich, das ist die Orange. Aber das steht für Freundlichkeit und Kreativität. Aber es wird auch verwendet, um Menschen zu drängen, wie etwas kaufen oder abonnieren. Es ist kein Zufall, warum, am besten Buy, Sie haben diese Art von wie dieser orange gelbliche Coehlo mit ihnen verbunden. Also lasst uns weitermachen. Du hast Grün. Denken Sie daran, Animal Planet mit Grün als unser Haupt Dublin Kahlo. Das liegt daran, dass Green verwendet wird, um die Natur zu repräsentieren. Es repräsentiert Gesundheit, es repräsentiert Reichtum, und es ist auch die zweithäufigste Farbe von Männern und Frauen wusste das eigentlich nicht . Ich fand es erst heraus, als ich für diese spezielle Lektion recherchierte. Aber Grün ist eigentlich die zweithäufigste Farbe. Weißt du, was die erste Farbe ist? Weißt du, die am meisten bezeichnete Farbe wirst du bald genug herausfinden. So zustimmen, wie ich sagte, repräsentiert Gesundheit, natürlichen Reichtum. Du hast Gelb, repräsentiert Jugendlichkeit und Teilfülle. Und es wird verwendet, um sofort Aufmerksamkeit zu erregen. Ein Gamine für dich. Wenn Sie zu einer Website gehen und Sie haben eine Schaltfläche, die eine Tasche Onkel von Gelb hat, werden Sie feststellen, dass Schaltfläche zuerst vor jedem Autor Schaltfläche. Und jetzt hier drin hast du Schwarz. Schwarz wird verwendet, Fahrten und Stromschlösser Wir l gegen. Das ist, was oft Sie schwarz mit Marken unterstützt finden. Staat weckt Stärke und Professionalität. Du hast jetzt Lila. Problem wird verwendet. Repräsentieren Reichtum, Loyalität mit ihnen. Es wird in Beauty-Produkten und sogar Fluggesellschaften verwendet. Eigentlich, Thai Airways, Ich glaube Qatar Airways als auch, Ich glaube, vielleicht ah klm Lufthansa. Ich erinnere mich nicht, aber ich weiß, dass einige Fluggesellschaften auch unser Purple benutzen. Und jetzt haben wir Gray verwendet Trip ist in Neutralität, Logik, futuristische Technologie. Deshalb ist es mit Marken wie Apple verbunden. Sie haben alle großartig als eine ihrer wichtigsten dominanten Farbe. Es ist also nur um Technologie, Kompetenz, Raffinesse zu repräsentieren Kompetenz, . Und schließlich haben Sie Blue, die Vertrauen, Sicherheit, Stabilität, Houston Unternehmen, Banken und blau ist eigentlich die Nummer eins unterschiedlichsten Spalte von Männern und Frauen. Also, im Grunde müssen Sie sich für einen dominanten Kahlo entscheiden, der repräsentiert, was Ihr Geschäft ist oder worum es bei Ihrer Website geht. Scheint, ich möchte ein paar Minuten damit verbringen, darüber nachzudenken, und dann im Grunde können Sie im GrundeIhren dominanten Abruf auf Ihren Hintergründen, Ihre Knöpfe sowie Bereiche, auf die Sie aufmerksam machen möchten, verwenden . Dort würden Sie Ihre dominante Farbe verwenden. Aber dann haben Sie auch die Akzentfarben richtig. Sie können dies auch auf Hintergründen, Buttons und Links verwenden. Wenn Sie herausfinden möchten, wie Sie einen Akzent Farben aus Ihrem dominanten Kahlo erstellen können, stellen Sie sicher, dass Sie das Pdf-Buch, das ich habe. Mit diesem Kurs finden Sie einen Abschnitt auf diese Weise. Heute. Ich habe den Ball nahe genommen. Sie werden eine Link-Theorie finden, wo Sie alles finden, was Sie erstellen können. Akzentkleidung für Ihre dominante Farbe kann im Grunde mit Adobe gehen. Ein Gläubiger. Adobe Colors verfügt über ein Tool, mit dem Sie Akzentkleidung aus dominanter Farbe erstellen können. Sie könnten einfach Ihre Forschung machen und Google einfach passieren. Ihre Hauptanforderung. Coehlo. Und finden Sie heraus, was die Akzentfarben zugeordnet sind. Das dominante Coehlo sind es. Und dann, endlich, haben Sie Ihre Hintergrundfarbe. Es gibt keine bestimmte vou ein Verehrer mit Ihrer Tasche auf Farbe, außer stellen Sie sicher, dass Ihr Text ist immer leicht zu führen. Es ist kein Zufall, dass die meisten zurück auf Anrufe Websites sind in der Regel weiß, weil die Steuer namens Texas, in der Regel schwarz und schwarz, geht sehr, sehr gut mit Weiß. Wenn Sie also Ihren Hintergrund Coehlo auswählen, stellen Sie sicher, dass der Text leicht von den Benutzern gelesen wird. Das war's also für Carlos. Vielen Dank für das Zuschauen. Und natürlich sehe ich dich in der nächsten Klasse 95. Mit Symbolen arbeiten: Lassen Sie uns über Symbole im Willen zum Webdesign sprechen. Und ich dachte, ich würde Live-Beispiele verwenden, ob als seine Lichtshow, um über dieses spezielle Thema zu sprechen . So werden Aikens heutzutage auf vielen, vielen Websites verwendet . Ich bin hier drüben auf uber dot com und genau hier achte genau auf diesen kritischen letzten Abschnitt. Sie haben Symbole gerade an der Spitze einiger bestimmter Textstücke. Also hast du was essen, richtig? Und natürlich hast du die Gabel und einen Löffel, der Eat repräsentiert. Sie haben das Auto, das Vied repräsentiert. Sie haben diese Balken, die verdient repräsentieren, die, nebenbei bemerkt, können Sie diesen Chef auch verwenden, um unsere Signalstärke darzustellen, vielleicht sogar Frequenz persönlich ältere Ansichten, vielleicht das Pfundzeichen oder die Dollar-Zeichen. Aber das ist auch ganz in Ordnung. Und natürlich können Sie die anderen Symbole hier und den Text sehen, mit dem sie verknüpft sind. Wenn es darum geht, in Symbolen zu verwenden, ist Regel Nummer eins, dass Sie sicherstellen möchten, dass die Symbole genau den Text darstellen, mit dem sie verknüpft sind. Es wird keinen Sinn ergeben, wenn man für das Fahrrad als Beispiel, anstatt ein tatsächliches Fahrrad zu benutzen, das Auto benutzt. Es wird keinen Sinn ergeben, so gut. Wieder Nummer Eins. Stellen Sie sicher, dass der Text und die Symbole übereinstimmen. Aber wo genau würdest du deine Icons verwenden? Sie können Ihre Symbole in Spalten verwenden. Sie können sie auch in Wasserhähnen verwenden. Zum Beispiel. Das hier ist ein Tab. Wenn ich zu gehe, kann ich auf Verdienen klicken, und dann müssen Sie Bücher hier oben verdienen. Eine schlüssige Business to Business Books wird angezeigt, so dass Sie Symbole verwenden können, um Ihre Registerkarten darzustellen , aber Sie können sie auch in Spalten wie unten verwenden, hier ist ein Beispiel. Sie haben ihre Bottles Spalte Newsroom Spalte, Global ist in der Schiffspalte und, natürlich , oben, Sie haben die Symbole. Es ist auch, warum, auf unserer Website, wo wir Dienstleistungen zur Verfügung gestellt habe ich Symbole unser Wasser repräsentieren. Bestimmte Kategorie dreht sich wieder um. Sie können die Symbole sehen, die den Text genau widerspiegeln. Es sind mit Kultursicherung geeignet, mit dem Häkchen unsere Cloud mit der Cloud. Ich kann ihre Cybersicherheit mit dem Schild schreiben und so weiter und so weiter. So, wie ich schon sagte, können Sie Symbole in Ihren Spalten und Ihren Tampons verwenden. Aber es gibt eine andere Regel, die mit Symbolen verbunden ist, und das ist die Tatsache, dass Symbole nicht im Rampenlicht stehen sollten. Sie sollten sehr, sehr klein sein , und es sollte verwendet werden, um das Design von der Säule oder dem Wasserhahn, mit dem sie verbunden sind, einfach zu ergänzen oder zu verbessern . Das sollte nie im Rampenlicht stehen. Eine weitere Sache gewählt, erwähnt haben wir in Aikens ist, wenn Sie sie in Ihrem Navigationsmenü verwenden, stellen Sie sicher, dass es in einer Situation, wo es genug Platz für sie verwendet werden. Mit anderen Worten, sie machen Ihr Menü in diesem Fall nicht überladen aussehen. Zum Beispiel, mit uber beachten Sie, dass auf der linken Seite, wo sie das eigentliche Hauptmenü haben, sie keine Symbole haben, die unseren Text darstellen. Aber hier drüben auf dem Licht, wo sie nur die Sprachprodukte haben, Logan und dann anmelden, sind sie in der Lage, Aikens zu verwenden, weil, gut, im Grunde, die Symbole können Philip ein bisschen mehr Platz hier drin. Grundsätzlich, wenn Sie die Symbole hier entfernen, werden die vielen immer noch aussehen, OK aussehen, aber nur diese Woche Symbole die, die Sprachprodukte und Logan sie tun Pflanzen Sie oben Wunder hier auf unsere Auswirkungen auf das Web. Es wird keinen Sinn für uns gemacht haben, Symbole zu haben, rechtes Gelände Arm eine Navigation viele, weil wieder, wir haben bereits was, wie sieben Elemente in unserem Hauptmenü. Sie also zusätzliche Symbole hinzufügen, wird dies nur sehr, sehr, sehr gruppiert oder geplatzt aussehen sehr, , und es würde nicht gut aussehen. Also nochmal, wenn Sie Aikens auf Ihrer Speisekarte verwenden, stellen Sie sicher, dass genug Platz für sie vorhanden ist. Das war's also für Aikens. Vielen Dank, dass Sie zuschauen. Wir sehen uns in der nächsten Klasse. 96. Bilder: Lassen Sie uns über einen weiteren wichtigen Aspekt des Designs sprechen, und das wird Hintergrundbilder sein, die Arten von Bildern, die Sie verwenden, sind jetzt sehr wichtig. Was ich hier tun möchte, ist, die verschiedenen Möglichkeiten zu demonstrieren, wie Sie Ihre Hintergrundbilder anwenden können , sowie die Effekte, die Sie auf sie anwenden können, damit sie alle wirklich, wirklich gut aussehen . Jetzt ist die 1. 1 hier haben Sie dieses Hintergrundbild, Sie haben ein Logo und Sie haben auch etwas Text. Das sieht also nicht so toll aus, oder? Es sieht so aus, dass man das Logo kaum sehen kann. Man kann den Inhalt des Logos und sogar den Text selbst kaum lesen. Es ist, obwohl Sie lesen können und Sie sehen, dass es Bloggen leicht gemacht wird. Es fügt sich irgendwie ein wenig mit dem Laptop ein, weil der Laptop auch weiß ist, also ist er nicht wirklich so gut sichtbar. Allerdings, wenn wir jetzt seine Kapazität mit einem Baghran Aufruf von Schwarz anwenden, jetzt können Sie sehen, dass niedrige Ziel ist besser sichtbar als der Text. Dies hier ist also der beliebteste Weg, um unsere Hintergrundbilder anzuwenden, besonders wenn Sie Text auf Ihrem Hintergrundbild abspielen möchten. Sie können zur Kapazität gehen. Nun, vielleicht 0,5 Punkt sechs. Machen Sie den Text sichtbarer. Machen Sie alle Bilder oder Logos, die sich auf diesem Hintergrund befinden, sichtbarer als auch . Die 2. 1 hier wird mit Grady INts sein. Jetzt Grady's beinhaltet im Grunde die Kombination von Farben, und hier können Sie sehen, zum Beispiel, hatten Sie eine Art rosa-rötliche Art Mischung auf der linken Seite in Richtung Mitte und dann unter was? Sie haben etwas mehr Greysia Grün in der Art, dass Sie es genau dort sehen können. Und hier ist noch einmal ein Beispiel. Sie haben so etwas wie lila bläulich rechts dort auf der linken Seite, und dann war es zur gleichen Zeit. Das Recht haben Sie etwas mehr zitronig grünlich in einer Weise, um ehrlich zu sein, Sie waren noch nie ein Fan von Grady Insight. Hadley jemals verwendet Glanz auf meine Hintern Designs, aber das ist nicht zu sagen, dass sie nicht. Sie sind fantastisch. Sie können Granaten verwenden, um echtes Italien zu schaffen, sind schöne Effekte auf Ihrer Website, aber hier ist eine andere, die nicht sehr, sehr häufig ist, aber eigentlich ziemlich gut als gut ist. Und das ist der Bluteffekt. Also, so können Sie in der Tasche sehen und wir haben das Bild von einem Mann, der ein Handy hält . Aber du kannst es. Heute ist es Blut und es ist nicht weiß. Blut ist, weil wir den Text wollen. Soziale Medien Sucht mehr zu sein sind sichtbar, um mehr verbessert zu werden. Also hier ist eine andere Art off-Stil. Sie können sich auf Ihre Hintergrundbilder anwenden. Sie können sie ein wenig Blut machen, um den Text auf dem Hintergrund besser sichtbar zu machen. Also eine weitere Sache in der Show wird sein, wenn Sie Textfelder direkt mit etwas Text hinzufügen. In diesem Fall jetzt sehen, können Sie jetzt sehen,dass wir das Textfeld mit der Aussprache haben. Vielleicht sind die Worte, wie man Lehrbuch von Allays für Fotos im Lebensmittelgeschäft macht. Ein wirklich genial Gewichte. Sie entwerfen Ihre Tasche, wenn Bilder wie diese eine gewisse Kapazität auf der tatsächlichen Box selbst haben . Nun, wenn Sie genau hinsehen, können Sie das immer noch durch die Box sehen. Wir können immer noch die Sterne da draußen sehen. Es ist nicht ah, Peak. Es ist eine Art Transplantation. Sie können Pats des Bagman als auch sehen, so gibt es eine weitere coole Möglichkeit, Textfelder auf Ihrer Website hinzuzufügen Wenn sie vorbei sind. Lemon Dill auf einem Hintergrundbild, versuchte, sie ein bisschen transparenter zu machen, so dass der Benutzer oder der Leser immer noch an der Tasche rund durch die Box sehen kann . Also, im Allgemeinen, sind lebenswichtige Bilder ziehen, die zu klein Schlepptau sind. Vermeiden Sie Stretching. Denken Sie daran, wir sprechen über die Covergröße in Eigenschaft sowie die enthalten. Wenn Sie die Abdeckung verwenden möchten, denken Sie daran, die cova das Bild dehnt, um sicherzustellen, dass es immer voll mit einer Höhe seines Behälters einnimmt . Wenn Sie Bilder von zwei kleinen verwenden, landen Sie vielleicht direkt im Bild und sie sehen Blut aus, und sie werden nicht so toll aussehen. Vermeiden Sie das Hochladen auf kleine Bilder, aber vermeiden Sie gleichzeitig opulente, übergroße Bilder. Der Nachteil hier ist, dass, wenn Sie über Wissenschaftsbilder haben, sie länger dauern, um zu laden und als solche die Geschwindigkeit eines seriösen Sofas als Ergebnis. Versuchen Sie also, Bilder hochzuladen, die nicht mehr als das Doppelte ihrer tatsächlichen Anzeigemaße haben. Denken Sie daran, dass wir darüber im Put-it-Abschnitt gesprochen haben, mit dem Sie nicht mehr als mal gehen möchten , denn wirklich, mal zwei ist das, was unsere hochauflösenden Bildschirme aufnehmen wird, wie die, die Sie auf finden Apple-Geräte. Alles, was mehr als das ist, ist einfach zu viel jetzt, nur um Ihnen eine kurze Zusammenfassung zwischen Pings und J-Pegs zu geben. Denken Sie daran, dass bessere Qualität , aber weil sie eine bessere Qualität haben, sind sie größer und das Ergebnis wird etwas länger dauern als Jeb XG. Schweine fühlen sich oft Qualität, aber der Handel aus hier ist, dass eine kleinere in der Wissenschaft und es wird viel schneller laden, so verwenden Sie Pings für Ihre Logos. Es sind dankbare Logos, vielleicht sogar Symbole. Aber dann verwenden Sie J Schweine, hauptsächlich für Ihre regulären Bilder auf Ihrer Website. Also, das ist es für Bilder. Vielen Dank für das Zuschauen. Wir sehen uns in der nächsten Klasse. 97. Abstände: eine letzte Sache und lassen Sie uns darüber reden, bevor wir aufrunden. Dieser Abschnitt zu den Grundlagen des Webdesigns wird jetzt Abstand sein. habe bereits über das allgemeine Layout genommen, aber ich habe nicht über Raum gesprochen. Und Vorfreude natürlich ist natürlichsehr, sehr wichtig. Generell wollten Sie genügend Abstand zwischen Ihren Abschnitten, Ihren Spalten sowie Ihrem Kopf und dem GLA Texas haben. Sie konnten jetzt auf einem Lebensort sehen. Wir haben viele und viele Abstände. Und, natürlich, es erlaubt den Inhalt auf allen Websites, im Grunde alle atmen. Aber jetzt stellen Sie sich diese exakt gleiche Website vor. Aber jetzt fühlten wir, dass jeder Raum hier das Ergebnis ist. Genau hier, können Sie sehen, die über US Abschnitt sieht jetzt Halle Rebell. Es sieht so aus, als wären alle Texas gegeneinander geformt. Sie können die angebotenen Dienstleistungen Abschnitt auch zu Fuß mit uns sehen. Alles, was wie ein Chaos aussieht, weil es keinen Platz in so Abständen gibt, wie ich sagte, ist sehr, sehr wichtig. Stellen Sie sicher, dass zwischen Ihren Inhalten kein Platz vorhanden ist. Verwenden Sie Ihre Ränder. Verwenden Sie Ihre Muster entsprechend. Aber natürlich, natürlich, geh nicht über Bord. Verwenden Sie das nicht in Rändern von 200 Pixeln oder Mustern von 500 Pixeln. Natürlich willst du nicht gehen. Unser Putsch ist leicht vorstellbar. Die Muster. Stellen Sie einfach sicher, dass viel Platz zwischen Ihren Abschnitten, Spalten und natürlich zwischen Ihren H Wunden H ist Spalten und , um H-Dreien und direkte Angriffe zu verwenden, stellen Sie sicher, dass Sie Ihre Ränder und Muster sind für sie. Also, das ist es für den Weltraum und nicht viel zu reden hier drinnen. Aber vielen Dank fürs Anschauen. Und natürlich natürlich werde ich Sie in der nächsten Klasse sehen. 98. Web Überprüfung: Also, das war's. Wir sind bis zum Ende dieses Bonusabschnitts gekommen, in dem wir die Grundlagen des Webdesigns angehen, und hoffentlich verstehen Sie jetzt, wie wichtig es ist, Kahlo zu schreiben, wie Sie mit Bhagwan Bilder gehen können High Text auf Baghlan Bildern abspielen kann, wie Sie mit Symbolen, Raum und solchen Dingen gehen können . Also, wie ich schon sagte, Alien, um diesen Abschnitt zu sehen, ist kein Gürtel fortgeschritten. Die Web-Design-Konzepte, wenn Sie mehr Interesse an Web-Design und ziemlich sicher, dass Sie erweiterte Waffen begrenzt und Ursachen gibt draußen im Internet. Aber wenn Sie sich nur für Linda Basics interessieren, hat dieser Abschnitt hoffentlich solche Grundlagen zur Verfügung gestellt, um dort zu gehen und beginnen, schöne Websites zu entwerfen. Also, das war's. Ich hoffe, Sie genießen diesen Abschnitt. Vielen Dank, und natürlich werde ich Sie im nächsten Abschnitt sehen. 99. PHP: Alles klar. Es ist eine willkommene Bonus-Sektion Nummer zwei. Wir werden die Grundlagen von P H P angehen. Jetzt ist PHP eine sehr, sehr leistungsfähige Programmiersprache, von der Sie vielleicht gehört haben. Wenn Sie an PHP denken, denken Sie an Webserver, die sie im Grunde verwendet haben, um eine Kommunikation zwischen ihm herzustellen oder herzustellen . Website Willbros Up und IT-Web-Service. Wenn alles husten Server, denken Sie an PHP jetzt, wie konkurrieren tatsächlich alle Website profitieren, wie es ist, auch wenn im Moment ist dies eine gut entwickelte Website, es ist schön gestaltet. Es ist reaktionsschnell, aber es ist nicht alles so interaktiv. Zum Beispiel, wenn ich auf lasst uns sagen Testimonials klicke, finden Sie es führt uns bis zum Abschnitt Testimonials. Aber was, wenn Sie eine separate Seite vier Testimonials wollen? Was ist, wenn Sie in der Lage sein wollten, diese eine Seite zu verlassen und zu einer anderen Seite zu gehen? Wie erreichen wir das? Aber wir können das mit PHP erreichen, die so in diesem Abschnitt aufgegriffen ist, ich werde Ihnen zeigen, wie Sie einen Blick interaktiver machen können, so dass, wenn Sie auf Links im Menü klicken , es Sie zu den tatsächlichen Seiten für diese Menüpunkte und von natürlich. Vergessen Sie nicht unser Kontaktformular. Wir haben eine Form, aber es ist nicht funktional. Wenn jemand hierher kommt, tippt er in seinen Namen E-Mail Titelnachricht, würde er nichts schicken, wird passieren. Aber mit Ph. B. werde ich Ihnen zeigen, wie Sie Kontaktformulare tatsächlich richtig funktionieren lassen können. Also, das ist es für diesen Abschnitt sind Sie werden es sehr, sehr nützlich finden , weil PHP eine extrem leistungsfähige Programmiersprache ist und es ist eine, die Sie kennen müssen. Sie müssen zumindest die Grundlagen von PHP kennen, um unsere interaktiven Websites erstellen zu können. Lehnen Sie sich zurück, entspannen Sie sich und wie immer, ich hoffe, Sie genießen diesen Abschnitt. Lasst uns loslegen. 100. So erstellst du die Datei: Alles klar, willkommen im PHP-Bereich. Und was ich hier tun möchte, ist, Sie in eine PHP-Anweisung oder Funktion einzuführen, die als include all require bekannt ist . Was genau sind diese beiden? Nun, lassen Sie uns einen Blick auf unsere Website werfen könnte. Derzeit ist es eine einzelne Seite. Sie klicken auf einen der Links direkt hier. Es führt Sie zum jeweiligen Abschnitt und so weiter. Aber was wäre, wenn wir wollten, dass unsere Website wie alle traditionellen Websites ist, auf denen Sie mehrere Seiten haben ? Wenn Sie also auf Testimonials klicken, zum Beispiel Veteran, der diese hier zum Entlassungsabschnitt bringt, führt es uns zu einer separaten Seite speziell für das Zeugnis. Das ist in der Regel, wie die meisten Websites sind. Wir können PHP für solche jedoch verwenden. Lassen Sie mich Ihnen etwas zeigen. Okay, Lassen Sie uns zu w gehen drei Schulen dot com bemerkt, dass, wenn ich auf eine dieser Registerkarten hier klicken , zwei Dinge sind immer konsistent. Natürlich ist jeder dieser Seite der Header und der Fuß-Down-Hit Der Inhalt ändert sich nie zwischen der eigentlichen Seite selbst. Der Inhalt ändert sich. Ja. Wenn Sie zum Beispiel auf Djebbour Mathematik geklickt haben, ändert sich all diese hier. jedoch Die Kopf- und Fußzeile istjedochimmer gleich. Auf der linken Seite finden Sie immer ein Logo. Sie werden sein Menü auf der rechten Seite zu finden, dass dieser Text auf der rechten Seite finden Sie sie im Navigationsmenü Freitag. Es spielt keine Rolle, welche Registerkarte klicken Sie auf es ist genau das gleiche immer und immer wieder als solche, Wenn wir eine separate Seite für einen dieser Menüpunkte erstellen möchten, werden wir wollen, um genau das gleiche zu sein. Du wolltest dort auf der linken Seite sein, das Hauptmenü auf der rechten Seite, und dann hier unten. Natürlich wollen wir auf allen Seiten genau gleich sein, ohne gesagt zu werden. Wenn wir eine lasst uns, sagen wir, eine Testimonial Start HTML-Datei erstellen sagen wir, wollen, müssten wir genau das gleiche enthalten. Es ist ähnlicher Code für den Header, und Lebensmittel sind alle wieder ohne PHP. Aber mit PHP können wir einfach zu den Testimonials gehen, keine HTML-Datei und einfach sagen, hey, hey, rufen Sie den Inhalt auf oder rufen Sie den Inhalt für den Header. Alle haben den Inhalt für die Fußzeile mit einer einzigen Zeile aus Code abgerufen, den Sie mir nicht glauben . Wir werden das überprüfen. Ok. Was ich hier tun werde, ist das in Ordnung? Ich werde zu einem öffentlichen, dass HTML-Ordner gehen, und genau hier werde ich eine neue Datei erstellen. Okay, lass mich , hier herumklicken, Lim Einweg. Schließen Sie dies in den Schlusstagen der Fixierung. Ordnung, InOrdnung, also hier drinnen, gehe ich zu einem Klick. Klicken Sie auf neue Datei, und ich werde diese Fouda dot PHP nennen. Okay, jetzt bemerken. Ich nenne es das PHP und nicht dot html. Sie werden es bald herausfinden. Ich gehe zurück zum Index dot html und öffne dann diese Datei. Ich werde den ganzen Weg hierher kommen, und was ich tun werde, ist, dass ich den Inhalt des gesamten Fußzeilenabschnitts schnappen werde. Also, genau hier, werde ich den ganzen Weg hierher kommen. Kies davon. Schnappen Sie sich alles. Ich werde das jetzt abschneiden. Ich werde mich öffnen, Fouda Dot PHP und ich werde all diese Kälte hier einfügen. Lass mich jetzt voran gehen und sparen. Ich werde auch die Indexpunkt-HTML-Datei speichern, die diese ebenfalls gespeichert hat. Nun, wenn ich zurück zu der Broza und ich würde zuerst eine Seite bemerken, dass wir nicht mehr sehen die Fußzeile sogar Tür Gerade jetzt haben wir einen Fuß der PHP-Datei. In der Indexpunkt-HTML-Datei selbst gibt es jedochkeinen Code. In der Indexpunkt-HTML-Datei selbst gibt es jedoch Es gibt nichts Erzählen Sie im Browser oder dem Server, um den Inhalt von fota dot PHP abzurufen . Als solche müssen wir nun eine PHP-Anweisung in unsere in auszuüben seine NFL aufnehmen, um zu sagen, hey, den Inhalt für Lebensmittel tar dot PHP abzurufen. Und hier wird die magische PHP-Anweisung hineinfallen. Also genau hier direkt über dem Buddy-Tag, werde ich sagen, Fragezeichen PHP enthalten. Und dann in Mänteln dachte Fota P, äh, Fußzeilenpunkt PHP und dann Doppelpunkt und dann Fragezeichen auf Symbol aufgerissen. Dies hier ist der PHP-Code, der dem Server anweist, den Inhalt vom Fußzeilenpunkt PHP abzurufen . Und natürlich sagen wir nur für den Sieg, weil Fuß des PHP und Index dot html I und genau den gleichen Ordner, so stellen Sie sicher, dass der Pfad immer korrekt ist. Also werde ich jetzt weitermachen, das speichern, aber wenn ich wieder hier reingehe und die Seite aktualisiert habe, beachte, dass wir den Inhalt immer noch nicht von der Fußzeile sagen. Warum? Denn gerade jetzt ist unsere Akte zu kalt. Index dachte HTM l Wenn Sie möchten, dass Ihr Server PHP-Code verarbeiten, müssen Sie Ihre Datei dot PHP nennen und nicht gedacht, html bemerkte die Debatte, die wir hier könnten , ist alles in schwarz. Sie sind nicht hervorgehoben. Wie der HTML-Code. Es ist in blau, rot und so weiter. Also, was ich jetzt tun werde, ist, dass ich einfach die Indexpunkt-HTML-Datei umbenennen werde. Ich werde dies in Index Punkt p h p umbenennen lassen Sie uns das bestätigen. Und jetzt Norden ist, dass plötzlich scheinen gut jetzt ist jetzt hervorgehoben weil wir jetzt die Datei als PHP-Datei und nicht als HTML-Datei speichern. Wenn ich zum Browser zurückgehe und ich die Seite aktualisiere, würden Sie bemerken. Wir haben jetzt die Fußzeile angezeigt. Also sagte ich, OK, die Symbole sind nun endlich erschienen. Ich habe immer darauf gewartet, dass die Symbole angezeigt werden, aber Sie können nicht sehen, dass die Fota jetzt vollständig angezeigt wird, weil wir hier den Code haben der den Inhalt von fruchtbarem PHP aufruft. Fuß der Seite B hat den HTML-Code für den Fuß nach oben. Und natürlich haben wir auch unsere Indexpunkt-HTML-Datei umbenannt, um gedacht P H p zu indexieren. Nun fragen Sie sich vielleicht , OK, also habe ich Ihnen gezeigt, wie Sie die Include-Anweisung verwenden. Allerdings gibt es eine andere Aussage ist sehr, sehr ähnlich, was die Anforderung Anweisung ist. Was genau ist der Unterschied zwischen include und the choir? Beide werden den Inhalt Ihrer fiel richtig erreichen. jedoch sicherer, Das eine istjedoch sicherer,während das andere weniger sicher ist. Was soll ich meine? Denken Sie daran, dass Sie, wenn Sie mit PHP-Code zu tun haben, auch mit einem Webserver zu tun haben. Daher kann es Situationen geben, in denen eine Aufschlüsselung der Kommunikation zwischen Ihrem Browser und dieser Website vorliegt. Oder vielleicht weigert sich die UPS zu reagieren. Wer weiß, wenn solche Verkäufe, oder rufen Sie die Aussage, dass Sie auch angeben, wie die zivilen Lewis wird in einem solchen Szenario reagieren . Im Falle von Include wird weiterhin Code ausgeben, obwohl es eine immer Weile erfordern wird nicht mehr dieser Spieltiercode, es wird einfach aufhören, dies zu demonstrieren. Lass uns etwas tun. Ok. Ich komme hier runter und lass uns Dot PHP indexieren. Uh, ich werde hier runterkommen. Lassen Sie mich einfach etwas hinzufügen, wenn ähnlichen Code direkt hier. Also lass mich dieses H nennen und ich sage nur Hallo. Lassen Sie mich auch dieses h ein Tag schließen. Okay, ich werde jetzt weitermachen, und ich werde diese Akte speichern. Allerdings werde ich den Namen unseres Fußes über PHP ändern. Ich werde das in,sagen wir, Fuß hoch umbenennen sagen wir, . Ah, ein Punkt PHP. Lasst uns daraus kommen. Okay, also gerade jetzt, hier drüben, wo Sie die Include für den Punkt PHP haben wir nicht mehr den Fuß der Petri fiel weil es jetzt Fuß sind warnen dot PHP. Also sollte es hier eine jemals geben. Aber beachten Sie, was passieren wird, wenn ich zum Browser zurückgehe und die Seite aktualisiert habe. Beachten Sie, dass , ja, wir haben nicht mehr die Fußzeile, weil es jetzt Fuß sind wandert. Ph b. Aber wir haben jetzt noch die Wir haben jetzt das Hallo. Tagged der h ein Typ, der Hallo anzeigt, weil das ist, was es erfordert. Also, das ist, was beinhaltet. Auch wenn es hier bereits einen Fehler gab, weil Fuß der Poesie nicht gefunden wurde, schließen, ging immer noch auf die Ausgabe des H ein Tag aus. Hallo. Aber wenn ich mich ändere, füge jetzt hinzu, um das ganze zu verlangen, was passieren wird, werde ich jetzt voran gehen. Speichern Sie das. Wenn ich zurück zu den Rechnungen sind auf. Ich verweise auf Seite bemerken, dass die Vorhöfe intakt nicht mehr diesen Ort. Das liegt daran, dass wir Chor sein könnten, sobald ein Bereich von jeglicher Art ist. Der Rest des Kaltwasserdatensatzes wird nicht mehr angezeigt. Deshalb ist es sicherer. Sie möchten normalerweise keine Ausgabe im Code beibehalten Wenn es einen Evel gibt, gibt es viele Szenarien, in denen dies keine gute Idee sein wird, Code weiter zu setzen. Obwohl es bereits eine Nachricht gibt, können Hacker dies nutzen und Ihre Website wirklich durcheinander bringen. Um also auf der sicheren Seite zu sein, möchten Sie normalerweise mit erfordern gehen, anstatt alle Kate einzuschließen. Also werde ich jetzt voran gehen und einfach das H ein-Tag entfernen. Und natürlich werde ich die Datei speichern. Und dann werde ich wieder hier reingehen. Und, natürlich, auch einfach umbenannt den Fuß ein eins zurück in ah footer dot PHP. Lassen Sie mich das bestätigen. Und da gehst du. Okay, ich gehe wieder hier rein. Aktualisieren Sie einfach die Seite und stellen Sie sicher, dass alles in Ordnung ist. Und, ah, so ist es. Also vielen Dank für das Ansehen des allerersten Videos hier auf der PHP-Rubrik Deutschland Nächstes Video wearable Jetzt erstellen Sie unsere Header Dot PHP-Datei. 101. So erstellst du die header.php: Nun, Comebacks und People's Video wird erfolgreich erstellt. Unsere Fuß Erwachsene PHP-Datei und wir waren auch in der Lage, die require Anweisung zu verwenden, um seinen Inhalt abzurufen . Also, was ich jetzt tun werde, ist, ganz einfach acht neue Akten zu erstellen, und wir werden diese Datei nennen. Der Kopf sind Punkt PHP ist begrenzt. Dieser Index wurde mit PHP-Datei geschlossen. Ah, lassen Sie mich eine neue Datei erstellen. Nennen Sie es hedda dot PHP bestätigen und in Ordnung, ich werde acht andere PHP öffnen. Lassen Sie uns auch den Index Punkt PHP öffnen. Also schnappen Sie sich in der Kälte für den Kopf des PHP wird ein bisschen komplizierter als der Fuß des PHP. Der Grund ist, dass, obwohl wir nur das Logo und das Navigationsmenü, das zukünftige Hintergrundbild sowie diesen Text und diese beiden Tasten alle innerhalb des Hedda-Bereichs enthaltenwollen das zukünftige Hintergrundbild sowie diesen Text und diese beiden Tasten alle innerhalb des Hedda-Bereichs enthalten , es genau hier ist. Das ist der Tag des Heims von Hedda I. D. Und sein Kopf aus Abschnitt enthält auch diesen Kluft Hügel der Klasse des Helden und all diese anderen Inhalte. Es wird also etwas kniffliger, aber ich werde im nächsten Video ausführlicher darüber sprechen. Also, nur um die Dinge für dieses Video einfach zu halten, werde ich voran gehen und greifen alles bis zu wo Sie das HTML-Tag oben haben . Also werde ich das schneiden und dann zum Kopf des Tahps gehen, und wir fügen den ganzen Code ein . Lassen Sie uns es speichern und dann zurück zu in exert PHP und natürlich genau hier. Ich entferne einfach diesen leeren Raum hier. Ich werde sagen, Frage Mark PHP erfordern und dann Mäntel. Und dann Hedda, Ich dachte, P h P Colon Person Mark freigesprochen und Symbol. Speichern Sie das. Lasst uns hier wieder rein gehen. Aktualisieren Sie die Seite und da gehen Sie. Also vor der PHP ist jetzt zu Fuß sowie die Fußzeile brachte PHP. Also, das ist es für die Erstellung der Kopf der Petri-Datei Deutschland Vendex Video verfügbar jetzt versuchen, eine separate Seite zu erstellen 102. Kontaktseite erstellen: Nun, komm zurück. Also, was wir jetzt tun werden, ist, dass wir eine separate Seite voll erstellen. Nehmen wir an, der Kontaktabschnitt. Okay, was ich jetzt tun werde, ist, wie immer, werde ich wieder hier reingehen. Lassen Sie uns unseren öffentlichen Punkt-XML-Ordner öffnen. Klicken Sie hier mit der rechten Maustaste Beenden Sie eine neue Datei namens seinen Kontakt-Punkt PHP. Lassen Sie uns das bestätigen. Ich werde es aufmachen. Zuallererst, komm schon, mach auf . Ok. Ich werde zurück zum Index von PHP gehen. Nun lasst uns den Abschnitt für den Kontakt greifen. Was, also wird es gleich hier sein? Abschnitt I d Kontakte. Ich werde alles den ganzen Weg hier runter nehmen. Ich werde jetzt voran gehen und diesen Kopf auf über, um mit PHP Kontakt mit all dem Code zu tun . Lasst es uns retten. Ich werde auch unseren Index Dot PHP speichern. Lasst uns das retten. Lasst uns hier wieder rein gehen. Lassen Sie uns die Seite aktualisieren und OK, also wird es hier aufgerufen. Wir haben den Kontaktbereich nicht mehr. Wir können immer noch auf den Kontakt klicken, verkaufen in größer, weil wir das Menü nicht aktualisiert haben. Ein Link. Aber was ich tun kann, ist, dass ich zu meinem Schleier gehen und dann einfach Kontakt Gedanken sagen kann. PHP drücken Sie die Eingabetaste Und da gehst du hin. Jetzt können Sie sehen, wir haben die Kontaktseite ohne den Kopf nach oben ohne das Essen. Also gehen wir zurück zu unserem Kontakt mit PHP. Und nun lassen Sie uns einschließen oder eher den Header und den Fuß benötigen. Also lasst uns das machen. Ich eröffne eine neue Linie White Hit ganz oben. Aber Sie haben Abschnitt I d Und ich werde einfach das PHP-Tag öffnen PHP erfordern Coates hedda dot PHP Lassen Sie uns einen kühlen langen geschlossenen PHP-Tag hinzufügen. Und dann, natürlich, kopiere ich das nicht auch, und dann wird es den ganzen Weg hierher kommen und dann einfach den Vorgang wiederholen. Aber dieses Mal ändern Header zwei Fußzeilen Punkt PHP speichern. Und jetzt gehe ich zurück zur Broza, aktualisiere die Seite und das Hey du gehst. Und jetzt haben wir vor der Berufung. Wir haben auch den Fuß aufgerufen werden und bemerken, dass unser Kontakt-US-Formular jetzt auch Stil ist , weil wir den Kopf des PHP aufrufen, der auch den Link zur CSS-Datei hat. Das ist also ein deutsches Ereignis. XVID jetzt verfügbar Gehen Sie vor, um die Menü-Links zu aktualisieren. Dann seh ich dich. 103. Aktualisierung der Menülinks: Willkommen zurück zum Video der Leute ist erfolgreich unseren Kontakt mit PHP-Datei erstellt. Allerdings, hier auf die wichtigsten viele, wenn wir auf Kontakt klicken, es tut nichts, weil wir den Link nicht aktualisiert haben, um auf den Kontakt Punkt PHP Seite zeigen . Um dies sehr, sehr, sehr einfach zu tun , werde ich zurück zur Header-Punkt-PHP-Datei gehen, weil dies die Datei ist, die unser Hauptmenü ab und zu enthält, alles, was wir tun müssen, ist zum Navigationsbereich zu gehen, schauen Sie für den Bereich Kontakte und natürlich direkt hier. Das A-Tag ist gut, wir wollen es nehmen, weil das der Link ist. Ich komme gerade hier rein und sage einfach vier Schrägstrichkontakt adat P H p. Das ist alles, was wir tun müssen. Ich werde jetzt voran gehen. Speichern Sie das. Lasst uns zuerst von Page herkommen und Linda's stellen sicher, dass ich auf der Homepage selbst bin. Okay, also für mich jetzt, wenn ich auf Kontakt klicke, bringt es uns jetzt auf die Kontaktpunkt-Seite p h p. Es sagt einfach so. Also werden wir andere Seiten erstellen. Gehen Sie einfach zu Ihrem me navigationsmenü und aktualisiert die A-Steuer, um sie zwei zeigen seine Links auf die neuen Seiten, aber beachten Sie jetzt, dass wir sogar die Welt sind, um die PHP-Seite zu kontaktieren, wir haben keinen Weg zurück zu gehen auf der Startseite. Eine Lösung könnte darin bestehen, einen neuen Menüpunkt namens Home zu erstellen und einfach darauf hinzuweisen, dass ich auf die Homepage verführe. jedoch Ein besserer Weg, mehr als weit weg Punkte in oder Erstellen eines Links zur Homepage wärejedoch, den Link auf das niedrige Ziel hinzuzufügen . Viele Male Sie auf Websites gehen, würden Sie keine Startseite sehen, aber wenn Sie auf das Logo klicken, wird es Sie zurück zu ihrer Homepage. Also lasst uns hier etwas sehr, sehr Ähnliches machen. Ich gehe einfach zurück zum Kopf der PHP-Datei. Lassen Sie uns nach dem Logobereich suchen und natürlich. Es ist genau hier, aber Sie haben Marke lokalen Rap und dann den Namen. Also ganz einfach, wo wir das Bild haben, das das eigentliche Logo zeigt, werde ich einfach das ein Tag hinzufügen, das eine Reise gleich ist. Und dann in Mänteln, denken Sie vielleicht, wie zeigen wir auf die Homepage. Es ist sehr, sehr einfach. Fügen Sie einfach 1/4 Schrägstrich hinzu. Das ist alles, was Sie tun müssen. Also, jetzt werde ich weitermachen, das schließen und, natürlich, am Ende, genau hier. Ich werde auch das a-Tag noch einmal schließen. Und da gehst du hin. Ich werde jetzt voran gehen und das retten. Lassen Sie uns hier gehen Bezieht sich auf Seite und natürlich, beachten Sie, dass wir immer noch in Kontakt mit PHP unserer Seite sind. jedoch Wenn ich Novajedochauf dem Logo kenne, besonders den Kreis hier, wenn ich darauf klicke, bringt es uns zurück zur Homepage zur Indexpunkt-PHP-Datei. jedoch Dieser Text selbst istjedochimmer noch kein Link. Alles, was Sie jetzt tun müssen, ist, dass Sie einfach hier reinkommen und genau das Gleiche tun können. Also schnappen Sie sich diese ein Tag mit dem Ford Slash kommen hier eingefügt für die Span-Klasse Fortsetzung Angriffe. Und natürlich bin ich hier drin gelandet. Gehen Sie einfach voran und schließen Sie einfach. Ah, das ein Tag speichern Gehen Sie zurück hier bezieht sich auf Seite und sie gehen jetzt Das gesamte Logo ist anklickbar . Lassen Sie uns auf den Kontakt mit PHP-Seite gehen klicken Sie auf den Text, oder? A. Es führt uns zurück zur Homepage des Index Punkt p h p. Also das ist es für die Aktualisierung unserer manuellen Links. Und natürlich werde ich dich in die nächste Klasse sehen. 104. PHP: Ich möchte diese Gelegenheit nutzen, um Ihnen eine kleine Herausforderung zu präsentieren, wenn Sie dafür bereit sind . Bisher, so gut, dass wir in der Lage waren, unsere Menü-Links zu aktualisieren. Aber auf dem Kontakt von PHP Notiz, gab es immer noch das Hintergrundbild sowie diesen Heldenbereich gesehen, wenn idealerweise alles, was wir sehen sollten, wäre das Logo, das Navigationsmenü und dann das Kontaktformular. So wie das, was Sie hier bei der World Bank Academy haben. Dies ist die Homepage. Aber wenn du auf Kontakt klickst, kannst du jetzt sehen, dass du nicht mehr den Heldenbereich hast. Alles, was Sie haben, ist nur ein Text sowie das Formular. Es ist nur auf der Homepage, wo Sie diese Helden Abschnitt mit dem Hintergrundbild und dem Text haben . Ebenso möchte ich, dass Sie versuchen, etwas Ähnliches hier auf unserer Website neu zu erstellen, so dass, wenn Sie auf Kontakt mit PHP klicken, Sie nicht mehr gesagt, sein Hintergrundbild. Sie haben diesen Text nicht mehr zwei Schaltflächen gesagt. Alles, was Sie sehen werden, wird das Logo sein, das Navigationsmenü und dann der Inhalt für die Auftragnehmer gebildet werden, Also werde ich Ihnen ein paar Hinweise geben, wenn Sie zurück zum Header Punkt PHP-Datei gehen. Dies ist der Tag, an dem wir versuchen, aus dem Erbe PHP an diesem Tag der Klasse des Helden zu entfernen. So werden Sie einfach diesen Text entfernen, setzen Sie ihn in den Index Punkt PHP-Datei, und dann müssen Sie etwas Styling tun, denn wenn sie diesen Abschnitt entfernt Ihre Münze Hedda aus dem Logo. Und im Navigationsmenü, wir haben nicht mehr das Hintergrundbild als als, wie sein Hintergrund Sie. Sie müssen also etwas CSS verwenden, um sich zu bewerben, vielleicht eine Tasche auf coolem Schwarz oder vielleicht eine andere Art von Farbe. Das ist also die Herausforderung. Ich lade Sie ein, es zu versuchen, wenn Sie dafür bereit sind. Und natürlich, natürlich, wenn Sie auf irgendwelche Herausforderungen stoßen, lassen Sie mich wissen, mehr als glücklich, Ihnen zu helfen. Also das ist, denke ich, so viel Glück, und natürlich werde ich Sie in der nächsten Klasse sehen 105. Die Date: Nun, komm zurück. Ich will dir einen schnellen Weg zeigen. Oder besser gesagt, ein schnelles Willkommen zurück. Ich will dich. Willkommen zurück. Ich möchte Ihnen einen besseren Weg zeigen, um die Daten in unserem Essen auszugeben. Also, aber wir haben alle Rechte vorbehalten, unser Copyright Text. Moment sind wir manuell setzen das Datum mit HTML, was bedeutet, dass, wenn das neue Jahr kommt in wird zurück zu unserem Code gehen und dann ändern 2022 2021 Boot mit GHB, wir können dies tatsächlich automatisch tun. Leute werden das Jahr verfolgen, und dann, wenn das neue Jahr kommt, wird es automatisch 2022 2021 ändern. Also, wie machen wir das? Nun, wir werden eine Funktion nutzen, die das PHP-Datum genannt wird. Grundsätzlich hat PHP viele Funktionen wie Pre-Build-Programme, die Datenkraft ausgeben können. Also, was ich hier tun werde, ist, dass ich zu meinem Fuß gehen werde, begann PHP, weil das die Datei ist, die das Datum hat. Und genau hier werde ich 20 21. von allen entfernen, und dann werde ich den öffnenden PHP-Code vorstellen. PHP und dann werde ich sagen, echo Echo wird im Grunde verwendet, um Daten auszugeben. Es ist irgendwie so, als würde man unsere Inhalte ausdrucken. Also mein Echo, wir bitten PHP, einige Inhalte anzuzeigen. Also wollen wir das Datum anzeigen. Als Ergebnis werde ich sagen Echo und dann Daten und dann in Klammern und dann in Doppelmänteln, werde ich das Code-Kapital hinzufügen, warum? Und dann mein Semikolon, und dann werde ich den PHP-Code schließen. Was das jetzt tut, ist, dass wir sagen Echo das Datum und warum die Hauptstadt, warum repräsentiert das Jahr. Also lassen Sie mich jetzt voran und speichern Sie das und ich werde zurück zu meinen Rechnungen gehen bezieht sich auf Seite. Und dann, wenn wir den ganzen Weg hier unten Schule, können Sie sehen, dass wir jetzt 2020 ausgegeben haben, Ted. Aber woher wissen wir, dass es tatsächlich funktioniert? Nun, wenn ich hier wieder reinkomme und die Hauptstadt geändert habe, sagen wir, ich werde in diesem Fall den Tag repräsentieren. Ich werde jetzt wieder sparen. Ich gehe zurück zu meinem Browser waren zuerst eine Seite und jetzt können Sie sehen, heute ist Dienstag. So jetzt können Sie sehen, dass PHP tatsächlich funktioniert. Das ist also der allgemeine Code, richtig? Sie haben Ihren öffnenden PHP-Code und dann Echo zur Ausgabe, und dann wird die Funktion Datumsangaben genannt. Aber auch über Datumsangaben gibt es viele Variablen mit einem Datum, dass Sie die Zeit haben können, die Sie den Tag haben können, den Sie den Monat haben können. Sie können das Jahr haben und so weiter. Jede dieser Variablen hat also ihren Code. Also steht ich in diesem Fall für den Tag. Und wenn ich zeigen wollte, sagen wir, den Monat als Beispiel, werde ich l entfernen und stattdessen Kapital F verwenden. Lass uns das retten und ich es dir zeigen. Ich werde die Profis auffrischen kommen den ganzen Weg hier unten und jetzt können Sie sehen, es ist Juni 2020. Eigentlich gehen wir voran und geben den Monat und auch ah, das Jahr aus. Also gibt es B f und dann Raum und dann ein Kapital. Warum zurück hier reingehen? Aktualisieren. Komm den ganzen Weg hier runter und da gehst du. Es ist Juni 2020. Beachten Sie übrigens, dass diese Buchstaben sie tatsächlich Groß- und Kleinschreibung empfindlich kleine Luft. Vier Nicht sind etwas gesetzt, es wird nur den tatsächlichen Buchstaben f ausgeben, während ein kleines wenig warum die letzten zwei Ziffern aus dem Jahr ausgeben wird . Also in diesem Fall jetzt, wenn ich das gerettet habe und ich hierher zurückkam, wird es jetzt 20 sein, im Gegensatz zu 2020. Also bedenken Sie das. Gehen wir hier wieder rein. Ändern Sie alles zurück, um warum sparen? Und da gehst du hin. So können Sie die Datumsfunktion verwenden, um das Datum des Münzjahres auszugeben. Und wenn Sie weitere Anweisungen wünschen, können Sie zu PHP dot net gehen und dann einfach nach der Datumsfunktion suchen. Hier finden Sie alle verschiedenen Variablen, die Sie verwenden können, wie s Kapital. Und Sie können Z verwenden. Sie können W und so weiter und so weiter verwenden. Also, das ist, denke ich, so ein Vermögen. Ich werde dich in der nächsten Klasse sehen 106. So machst du unser Kontaktformular: In Ordnung. Herzlich willkommen zum letzten Video hier in unserer Periode Resektion. Und wenn ich hier tun möchte, um Ihnen zu zeigen, wie man das PHP-Formular zum Laufen bringt, haben wir es derzeit als Stil-Form von Gott. HTML CSS, aber nichts mehr. Es gibt keine Funktionalität hinter den Kulissen Jetzt habe ich bereits den notwendigen Code erstellt. Also, was ich jetzt tun werde, ist, dich durch das Gericht zu führen und dir zu erklären, wie es wirklich funktioniert. Also hatte ich meinen Kontakt mit PHP-Datei nicht direkt hier geöffnet, wie Sie sehen können. Und hier drüben beginnt die Form tatsächlich. Was Sie vier Methode gleich bekommen jetzt. Es gibt zwei Arten von Werten, die Sie hier angeben können. Sie können entweder gehen alle Post Post ist der viel bessere Wert, weil es sicherer ist als zu bekommen. Und ich zeige dir genau, warum. Was ich jetzt tun werde, ist, dass ich diese beiden Dateien einfach speichern werde. Mach dir keine Sorgen um sie. werde dir genau erklären, was passiert, aber ich werde zu meinen Schlägen zurückkehren. Unsere Kalender aktualisieren. Nein, nein, dass wir als den Wert Vital bekommen, wo wir das Prägende haben, aber es ist so eingestellt, dass wir jetzt reinkommen. Und ich habe meinen Namen E-Mail-Titel ausgefüllt und ich habe ein paar Nachrichten. Nun, und ich werde Send treffen, Ordnung. Grundsätzlich haben wir eine Fehlermeldung, aber es ist nicht notwendigerweise, weil aus, das tatsächlich krank wird. Es ist wegen der veränderten entwickelt, um zu bekommen Aber es ist etwas anderes eigentlich wollte Ihnen zeigen, was passiert in der u R l Wenn Sie verwenden, bekommen Sie hier sehen wir den Namen Person, die die E-Mail sendet, das ist Alexander Bony. Wir haben seine E-Mail-Adresse. Wir haben den Titel. Wir haben die Nachricht Alle Ausgabekopf in Diyala Bill. Das ist, was get tut. Es wird den Inhalt aus dem Formular in der U. R L ausgeben , was aus Sicherheitsgründen sehr, sehr schlecht ist . Sie möchten mit Post in die gehen, weil mit Post, Sie werden diese Werte überhaupt nicht sehen. Islam geht hier zurück und ändert das Format, von dem er jetzt posten wird. Der Grund, warum wir tatsächlich die Fehlermeldungen haben, denn in der eigentlichen Form machen den ganzen Prozess, und wir Basin, posten, Post, Post, Post und so weiter. Also, wenn wir Get benutzen wollten, muss ein paar Leute hier drinnen wechseln. Deshalb hatten wir tatsächlich diese Errol-Nachricht. Aber wenn ich wieder hier reingehe, habe ich den Posten für die Vela Formularmethode. Und jetzt hier drin, wo du Action hast. Das ist sehr, sehr wichtig. Denn genau hier bedeutet dies für PHP. Was genau sollte passieren, wenn ein Benutzer Send rechts trifft? Nervös und okay, Gehen Sie, um uns zu kontaktieren, bilden die PHP und erhalten Sie alle notwendigen Verarbeitungsgericht von Tag. Dies hier ist jetzt der Kontakt US Form dot PHP-Datei. Dies ist der tatsächliche pH-Wert, den wir hinter den Kulissen laufen könnten, um die Form und den Inhalt auszugeben und alles andere zu tun, was notwendig ist. Also, was genau ist hier los? Ein paar Dinge waren ziemlich viele Dinge tatsächlich sie einfach diese Seite aktualisieren. In Ordnung, jetzt lass mich dir etwas zeigen, wenn ich versuche, dieses Formular zu senden, ohne den Titel auszufüllen , rate mal, was da steht. Die Polizei füllt dieses Feld aus, auch wenn ich das Feld ausfülle und ich hallo sage und ich erneut auf Senden klicke . Es heißt auch, die Polizei folgt diesem Feld auch. Grundsätzlich haben wir Peter angewiesen, zu bestätigen, dass Abstieg er tatsächlich alle notwendigen Felder ausgefüllt hat . Und wie machen wir das? Nun, das haben wir hier drüben gemacht. Kreditgeber führen Sie durch die Initiale. Ah, Anfang. Also genau hier. Dies ist nur, um zu bestätigen, dass tatsächlich Daten im Formular vorhanden sind. Und wenn es kein Formular gibt, wenn es keine Daten gibt, sagen Sie einfach, Hey, es gibt keine Postdaten. Das ist im Grunde, was das hier macht. Hier beginnen wir zu bestätigen, dass der Benutzer tatsächlich die Felder ausfüllt. Sie haben diese Filterfunktion, Filter, Filter, desinfizieren, String-E-Mail Diese all dies hier ist nur, um zu bestätigen, dass der Benutzer tatsächlich füllt diese fühlt sich richtig und dann hier einladen. Sie können sehen, dass die Rücksendungen immer Nachrichten gefüllt sind. Grundsätzlich, wenn das Namensfeld kein Feld ist oder das E-Mail-Gefühl nicht gefüllt ist oder das Tattoo-Gefühl nicht gefüllt ist oder sogar das Nachrichtenfeld nicht ausgefüllt wird, sondern in die Ausgabe. Verlassen Sie es, sagen Sie eine oder mehrere. Die ruhigen Felder sind leer. Ich weiß, das sieht kompliziert aus, aber es ist im Grunde PHP. Es ist nicht so kompliziert. Keine Sorge. Und dann hier drüben, wenn für jemanden, der nicht hier ist, ein Benutzer alle Felder ausgefüllt hat, aber die Gläubigen nicht richtig ausfüllt , wird es sagen, dass das E-Mail-Format falsch ist. Das ist genau das, was diese spezielle Funktion tut. Und Sie können das sehen, wenn, wenn ja, im Grunde ist es Zustand. Es ist alles bedingt, wenn der Benutzer die Telefone ausgefüllt hat. Aber Füllung der Gläubigen richtig geben diese viel Nachricht aus, sagen die E-Mail von dem, was falsch ist. Das ist genau das, was all dieses Gericht hier im Grunde tut, um zu bestätigen, dass der Benutzer alle Felder richtig ausgefüllt hat. Und wenn der Benutzer keine Evel-Nachricht ausgegeben hat, okay? Nein, bevor ich so weitermache, hast du Namen, E-Mail, E-Mail, Titelnachricht. Es ist wichtig, dass Sie den Formularfeldern eine neue Variable hinzufügen. Und genau das habe ich hier drin gemacht. Wenn es den Namen genannt wurde, können Sie direkt hier unter unserem Kontaktnamen sehen, wir haben Namen gleich Name für E-Mail. Wir haben Name gleich E-Mail und dann auch für Titel. Wir haben Namen gleich Titou. Und dann schließlich, für die Nachricht, haben wir Name gleich Nachricht. Damit Petri jedes dieser Felder ordnungsgemäß bereinigt , muss der Name vorhanden sein. Also, bitte, ich mache das. Vergiss das nicht. Zurück zum Kontaktformular. Also genau hier, im Grunde, was genau hier passiert. Ist das okay? Was passiert also, wenn der Benutzer alt ausgefüllt hat? Es fühlt sich richtig an, die E-Mail zu senden, als wäre das im Grunde, was das tut. Schriftsteller. Sie haben die Maut, und dies ist die Adresse, an die die E-Mail an jeden Kontakt gesendet wird von gesendet werden. So können Sie sofort reinkommen und dies in die entsprechende E-Mail direkt hier ändern. Sofort. Wir erstellen die eigentliche Nachricht selbst. Wenn die E-Mail gesendet wird, wie wird angezeigt? Nun, wir haben das Thema. Okay, der Wert des Subjekts. Und natürlich, genau hier haben wir den Namen und dann den Titel. Im Grunde genommen, wenn wir die E-Mail oder das Kontaktformular erhalten, wird der Titel der E-Mail auch den Namen der Person haben. Fragte diesen Titel Das ist im Grunde, was diese Zeilen die Betreff produzieren diese Zeile und dann die eigentliche Nachricht aus der E-Mail wird nun den Namen der Person, die E-Mail, den Titel und dann die Nachricht. Das ist es, was all diese tun. Sie sagten, dieser rückwärtige Schrägstrich und Rückwärtsschrägstrich, und diese sind wie die Zeilenumbrüche, um aus zu sein . Überprüfe, dass du es nicht hast. HTML. Dies ist nur, um sicherzustellen, dass jedes davon in einer separaten Zeile sein wird. Aber all das hier, aber nur Ausgaben in den Werten aller Filterausgabe beinhalten den Namen E-Mail-Titel und dann Nachricht. Und dann, natürlich, Ihre E-Mail muss den Kopf wie an Ort und Stelle haben. So wird der Kopf von I t Film wird Auswirkungen Kontakt und hier wieder in sein. Sie möchten bestätigen, dass diese E-Mail hier korrekt ist? Ich habe meins genau so eingestellt, dass ich es hier gesagt habe, und dann, natürlich, geantwortet und dann die Post E-Mail. Also wollen wir auf die E-Mail antworten, die in das Kontaktformular ausgefüllt wurde , wo wir unseren Beitrag und eine E-Mail direkt hier haben. Genau das macht diese Linie. Und dann, natürlich, Sie haben den Weihnachtsmann ruft Mail an Betreff Nachricht Kopf als im Grunde, und das ist die letzte Funktion, um die E-Mail zu senden. Schließlich Ritual, natürlich, wieder die Bilder haben. Es wurde an den Betreff gesendet, diese Nachricht. Und, natürlich, der notwendige Kopf davon ist genau das, was seine Funktion könnte es tun. Und dann schließlich, wenn die E-Mail erfolgreich gesendet wurde, Echo, Dies muss eine Nachricht gesendet haben erfolgreich Vielen Dank oder sonst sagen, es war ein Evel . Die Nachricht wurde uns nicht im Grunde was gesendet? Dieses letzte Stück Code tut so, wie ich sagte, ich werde den Code mit Ihnen teilen, und Sie sind mehr als willkommen, es zu testen. Probieren Sie es aus. Und, ähm, das ist so ziemlich es. Also, wenn Sie irgendwelche Fragen dazu haben, lassen Sie es mich wissen. Vielen Dank für das Anschauen, und ich werde in der nächsten Klasse sehen 107. Abschließende Schlussbemerkung: so dass es offiziell werden wird. Es bist du, das Ende dieses Kurses auf HTML und CSS und von ganzem Herzen llamado sicher Spanglish so viel. Und ich hoffe, Sie genießen diesen Kurs gründlich und ich hoffe, Sie haben genug über HTML CSS und einige von entworfen en PHP gelernt , um schöne, responsive interaktive Websites zu bauen . Wenn Sie den Kurs genießen, bitte überlegen lassen Sie die Bewertung Bewertungen wirklich helfen. Mittlere auch, bitte verbringen Sie vielleicht 30 Sekunden und warten Sie nur. Wenn du den Leuten erzählst, wie sehr du den Kurs genossen hast, schätze es wirklich. Und vergiss nicht, dass ich auf YouTube bin. Ich habe einen YouTube-Kanal der Affe abonnieren Hit die Rechnung, so dass Sie benachrichtigt, wenn ich in Ihnen hochladen tutorial. Und natürlich bin ich auch auf Facebook. Dieser Affe online Das ist meine Seite. Werden Sie Mitglied der Facebook-Gruppe. Wenn nicht, ist es ein großartiger Ort, um mit mir und anderen Schülern zu interagieren. Also noch einmal, aus tiefstem Herzen. Vielen Dank, dass Sie den Kurs beendet haben. Und ich wünsche Ihnen alles Gute in den europäischen Entwicklungsprojekten. Sieh mal und ich rede nächstes Mal mit dir. Tschüss