Share
Willkommen zur sechsten Lektion unserer Web Design for Kids-Serie, CSS Layout!
Hier legen wir alle Elemente genau dort ab, wo sie auf dem Bildschirm angezeigt werden sollen. Dazu werden wir unsere HTML- und CSS-Dateien hinzufügen.
Um sich zu erinnern, schauen Sie sich die Website an, die wir erstellen. Die Dateien für diesen Kurs können Sie hier herunterladen. Vergessen Sie nicht, Fragen zu stellen, die Sie in den Kommentaren am Ende dieser Seite haben.
Es gibt ein paar Dinge, die wir wissen müssen, bevor wir direkt hinein springen Layout. In diesem ersten Abschnitt werden wir uns anschauen, wie man organisiert bleibt. Wir werden einige Grundlagen zur Positionierung besprechen und über welche Art von CSS sprechen Eigenschaften werden für das Layout verwendet.
Das Organisieren eines CSS-Dokuments ist sehr wichtig. Durch die richtige Organisation können wir alle Teile in unserer Datei leichter finden und später Änderungen vornehmen und Dinge hinzufügen. Generell ist es am besten, unser CSS zu bestellen Erklärungen in der Reihenfolge finden sie auf der Seite statt.
In dieser Lektion fügen wir Stile hinzu Main, zum Beispiel. Dieses zusätzliche Styling für ein solches wichtiges Element sollte in unserem CSS-Dokument enthalten sein Vor alle anderen Elemente, die darin verschachtelt sind Main.
HTML-Elemente sind ein bisschen wie rechteckige Boxen. Das CSS-Boxmodell beschreibt den Abstand dieser Kästchen.
Jede Box hat vier Seiten. Wir können einen Wert auf alle vier Seiten gleichzeitig in unserem CSS anwenden Polsterung, Rand, und / oder Spanne. Wenn wir jedoch eine Seite eines Elements gestalten möchten, können wir dies auch tun. Zum Beispiel:
Polsterung links: 20px; Grenze: 4px fest # 205D76;
Sagen wir, dieser rosa Kasten steht für Text. Wir können sehen, dass das Auffüllen hinzugefügt wurde nur nach links und dicke blaue Umrandung alles vier Seiten des Inhalts.
CSS gibt uns eine Reihe von Eigenschaften, die speziell für das Layout unserer Website entwickelt wurden. So hilft zwar das Boxmodell das zu erklären Abstand um HTML-Elemente, Flexbox erlaubt uns zu Bewegung diese Elemente in Position.
Wenn wir Flexbox für ein Containerelement verwenden, wird dieses Element zu einem Flexbehälter und alle Elemente in ihm werden flex artikel.
Wenn wir die Flexbox auf einen Container anwenden, werden die Elemente automatisch entlang einer geraden Linie (horizontal) angeordnet, und dann können wir mit den anderen Flexbox-Eigenschaften detaillierter vorgehen.
Wir müssen flexbox nicht zu viel für unsere Website verwenden, aber es ist wichtig, über flexbox nachzudenken, da dies als die modernste und geeignetste Methode zum Positionieren kleiner Teile von Inhalten auf einer Website betrachtet wird.
Das h1 und Stadtbild innerhalb der Header werden auf der Seite zentriert. Es gibt verschiedene Möglichkeiten, etwas mit CSS zu zentrieren, aber für den Moment werden wir es verwenden Text ausrichten: Mitte; auf der Header.
Wir zeigen auf den Header, indem wir den zuvor hinzugefügten Klassennamen verwenden:
.Primärkopf Textausrichtung: Mitte;
Nicht vergessen! Speichern Sie die Dokumente und aktualisieren Sie den Browser, um die Änderungen zu sehen, während wir sie vornehmen!
Das Erste, was wir mit unseren Abschnitten tun wollen, ist, den Inhalt, das Bild und die Liste innerhalb jedes Abschnitts nebeneinander zu stellen, anstatt gestapelt zu sein.
Um dies zu erreichen, werden wir verwenden Flexbox. Flexbox wird mithilfe von auf die Elemente in einem Containerelement angewendet Anzeige: Flex; auf dem Behälter:
.Ladenbereich Anzeige: Flex; Anzeige: -webkit-flex; / * Dies ist ein Herstellerpräfix! * /
Um dies auf das zurückzubringen, worüber wir früher gesprochen haben, das Image und div mit der Shopliste sind jetzt flex artikel, weil sie innerhalb dieses sind Flexbehälter.
Während es viele Optionen gibt, um genau anzugeben, wohin ein Element gehen soll, funktioniert das Standardverhalten von Flexbox hier perfekt für uns - und die Liste unseres Geschäfts befindet sich jetzt rechts vom Bild des Geschäfts.
Da Flexbox relativ neu ist, hatten nicht alle Browser die Möglichkeit, es richtig einzubinden. Um dies zu umgehen, können wir eine Herstellerpräfix zu den Flexbox-Eigenschaften hinzufügen und diese fehlende Unterstützung vorerst hinzufügen. Auch wenn wir uns bei diesem Projekt nur auf die aktuellsten Versionen moderner Browser konzentrieren, müssen wir dennoch ein -Webkit- Herstellerpräfix für Flexbox, um sicherzustellen, dass es in "Safari" funktioniert.
Wir könnten etwas Abstand zwischen dem Bild und dem Element haben, das den gesamten Text enthält. In unserem HTML-Code fügen wir eine Klasse hinzu Shop-Details zum div den Text enthalten.
Nachdem wir dies gespeichert haben, können wir zu unserem CSS springen und diesen Abstand hinzufügen, jedoch nur zum links der div:
.Store-Details Rand links: 30px;
Links von unseren ungeordneten Listen gibt es einige Abstände. Das ist so, weil es einige gibt Standardstil das geht mit der Verwendung einer HTML-Liste einher. Manchmal ist dieses Standard-Styling in Ordnung und manchmal führt es möglicherweise nicht zu dem gewünschten Effekt.
Wir können diesen standardmäßigen Listenabstand mit entfernen Polsterung: 0; auf der ungeordneten Liste, aber das würde dazu führen, dass unsere Aufzählungszeichen zu weit nach links gehen, verglichen mit der Überschrift unserer Liste.
Wir wollen ein bisschen Polsterung hier, aber nicht so sehr, wie dies durch das Standardformat der Liste möglich ist. Einstellen a Polsterung links von 15px Auf der Liste werden die Aufzählungszeichen mit der Überschrift ziemlich gut abgeglichen, sodass wir dies zusätzlich zu den Dingen hinzufügen, die wir der Liste in der vorherigen Lektion hinzugefügt haben:
.Store-Liste Auffüllen links: 15px; / * neu hinzugefügtes Styling * / color: # FFC122;
Wir haben immer noch die Angelegenheit, die wir in der vorherigen Lektion erwähnt haben, wobei die Listenelemente zu nahe beieinander liegen. Um dies zu lösen, fügen wir eine Klasse hinzu Geschäftsname zu allen Listenelementen, , in unserem HTML. Wir werden dann einen kleinen Rand hinzufügen Unterseite dieser Elemente.
.Geschäftsname Margin-bottom: 10px;
Abstände müssen zu den Abschnitten hinzugefügt werden und müssen auf der Seite zentriert werden. Wir werden das durch das tun Spanne und Breite Eigenschaften.
Nochmals, wir werden das Styling, das wir bereits geschrieben haben, ergänzen:
.Ladenbereich Anzeige: Flex; Anzeige: -webkit-flex; Marge: 50px auto; Breite: 450px;
Das 50px Wert innerhalb Spanne hier wendet diese Menge an Raum an oben von jedem Ladenbereich. Im Anschluss daran mit Auto weist den Browser an, die Breite des Elements (auf die wir festgelegt haben) zu berücksichtigen 450px) und zentriere es automatisch im Browserfenster.
Für unser Fußzeile Wir zentrieren den Text und fügen ein wenig hinzu Polsterung um sicherzustellen, dass sich dieser Text nicht zu nahe an den Rändern der Fußzeile befindet.
.Hauptfußzeile Polsterung: 2px; Text ausrichten: Mitte; Hintergrundfarbe: # FFC122;
Wir haben darüber geredet Standardstil ein bisschen, als wir unsere Listen zusammensetzten. Das Karosserie Das Element verfügt über eigene Standardstile. Einer davon ist a Spanne das umgibt die ganze Seite. Während dies manchmal kein Problem ist, können wir feststellen, dass dies die Hintergrundfarbe unserer Fußzeile von den Seiten des Browser-Fensters vollständig zu strecken.
Die Lösung hier ist, in unserem CSS-Dokument zurück zum Hauptteil zu springen und Folgendes hinzuzufügen:
body margin: 0;
In diesem Kurs haben wir alle Elemente mit CSS-Layouttechniken zusammengefügt. Normalerweise gibt es mehrere Möglichkeiten, um ein bestimmtes Layout zu erreichen. Wenn Sie sich jedoch mit dem CSS-Box-Modell und der Flexbox vertraut machen, erhalten Sie ein tiefes Verständnis dieser verschiedenen Ansätze.
Da unsere Website komplett ist (Glückwunsch!), Werden wir uns ausführlich darüber unterhalten Design, Typografie, und Farbe in den folgenden Lektionen. Dies wird Ihnen helfen, ein gut abgerundeter, informierter Webdesigner zu werden.
Wir sehen uns in der Stadt!
Accentsconagua