CSS: Grid-Design

Name: CSS: Grid-Design
Author: Cliff Brozo

Wie man das Grid-Design versteht und einsetzt

Preview the first lesson free — get full access to all 4 lessons.

Kurs: On-Demand

(flotte Musik) Willkommen zurück zum Kurs von Knowledge City auf Cascading Style Sheets. Ich bin Cliff Brozo, ich bin dein Lehrer. Und heute werden wir über das Entwerfen unter Verwendung eines Rasters sprechen. Wir werden herausfinden, wie man Container benutzt. Wir werden mit dem Layout herumspielen und wir werden herausfinden, welche Gegenstände um in welchen Bereich des Gitters wir setzen. Wir werden uns auch einige Formatierungen ansehen um Seiten mit mehreren Spalten zu erstellen. Wir werden mit einem ausgefallenen Menü herumspielen und wir werden Artikel und Seiten erstellen und diese stylen. Werfen wir einen Blick darauf, wie es aussehen wird. Wir erstellen eine Seite mit drei ungeraden Spalten. Einige der Spalten sind kleiner, andere größer aber wir werden sie alle anders machen. Wir werden einen Container benutzen und innerhalb des Containers, Wir werden Text und Bilder einfügen. Wir werden die Größe der Container variieren und erstellen Sie Artikel in den Seiten und machen Sie ein dreispaltiges Layout. Wir werden einen Gittercontainer verwenden und viele Bilder in unser Raster einfügen. Sind Sie bereit? Ich bin. Lass uns gehen. Noch einmal, Wir verwenden Adam als unsere Design-Software. Und hier schauen wir uns unsere erste Seite an, Umgang mit einem Container. Diese blaue Linie, die Sie sehen, ist der eigentliche Container. Und alles, was ich hier hineingesteckt habe kann anders stilisiert werden als die Außenseite des Behälters. Jetzt können Sie wählen, ob Sie diese blaue Linie oder eine beliebige Farbe einfügen möchten oder überhaupt keine Linie haben. Niemand weiß also, dass Sie es im Container tun. Alles was du wirklich brauchst, ist das Einrichten eines Inhaltsbereichs in CSS und rufen Sie es dann in Ihrem HTML auf. In diesem Bild auf der rechten Seite Ihres Bildschirms Ich habe einen Bereich namens "Inhalt" und die Breite des Inhalts beträgt 80% und linker und rechter Rand werden automatisch eingestellt. Mein Container macht also 80% der Seite aus mit 10% links und 10% rechts. Ich benutze diesen Container, indem ich ihn in einer Abteilung aufrufe. sagen Klasse gleich Inhalt. Ich kann die Größe ändern und immer noch mein 80% Inhaltsfenster beibehalten. Und wenn es groß oder klein wird, Die Größe des Textes wird automatisch korrekt geändert. Werfen wir einen Blick auf das CSS, mit dem wir das tun können. In meinem Container CSS, Mein Body Tag hat den Hintergrund von Zitronen-Chiffon. einige Ränder, die Schriftgröße und ich habe eine Schriftart namens MV Boli ausgewählt. Meine Inhaltsklasse legt die Breite auf 80% fest. und was du hier siehst ist das gleiche, was Sie auf dem Bild sehen das ist auf der Webseite enthalten. Die Grenze ist diese blaue Dodger-Linie. Und was ich tue, ist das herauszunehmen So können Sie genau sehen, wie der Container aussieht mit der Grenze, wo es jetzt ist und ohne die Grenze. Also werde ich diese Zeile löschen, ich werde das CSS speichern und ich habe die Seite wieder ohne Rand. Jetzt gibt es keine richtige oder falsche Antwort ob Sie einen Rand anzeigen sollen oder nicht. Manche Leute lieben es, Einige Leute tun es nicht, lassen Sie es uns wieder einsetzen und wir haben eine blaue Linie um unseren Container. Ich habe einen Randradius von 25 Pixel verwendet um mir eine geschwungene Ecke zu geben und ich habe etwas geschwenkt, nur um den Text wegzuschieben vom Rand der Ecke. Wir haben eine Website entwickelt, die sich mit Containern befasst. Wir zeigen Ihnen, wie Sie drei Spalten erstellen. Wir werden uns eine Stadt in New Hampshire ansehen, und eine andere Stadt in New Hampshire, die Autostraße in New Hampshire, und dann werden wir einige CSS-Kommentare diskutieren. Wir werden mit unserem dreispaltigen Layout fortfahren. Und bevor wir auf diese Schaltfläche klicken, Ich möchte darauf hinweisen, dass die Tasten stilisiert sind mit etwas ausgefallenem CSS-Code. Schauen wir uns diesen Code an. Unten auf unserer Seite ist der Navigationsbereich für CSS. Ich habe eine Hintergrundfarbe erstellt für meine Navigationsleiste von Dodger blau. Das ist das Blau, das du hier siehst. Ich habe alle Überläufe ausgeblendet, um Überlappungen bei Bildern zu vermeiden. und ich habe die Ecken noch einmal abgerundet. Meine Links schweben auf der linken Seite. Sie sind in der Farbe Zitronenchiffon welches zum Hintergrund passt und das ist ein ordentlicher Trick. Welche Farbe auch immer Sie Ihre Box für die Navigation machen, Verwenden Sie die Kontrastfarbe. Das ist die Hintergrundseite. Ich richte den Text in der Mitte aus. Meine Textdekoration von keiner entfernt die Unterstreichung. Und denken Sie daran, dies ist ein Hypertext-Link. So entfernt es die Unterstreichung, und ich legte etwas Polsterung nach links und das Recht jedes Wortes. Hier ist der schicke Teil. Wenn ich über den Link schwebe, Ich drehe die Farbe und die Hintergrundfarbe um Wechsel von Dodger Blue zu Zitronenchiffon. Wo ich Dodger blau als Hintergrund hatte, jetzt ist Dodgerblau die Farbe. Zitronen-Chiffon war die Farbe, jetzt ist Zitronenchiffon der Hintergrund und um den Knopf zu machen sieht aus wie es auch abgerundete Ecken hat, Ich werde einen Randradius setzen. Wenn ich über die einzelnen Links schwebe, Der Text ändert sich in die Hintergrundfarbe und es gibt die Illusion eines Knopfes.

Mittelstufe Anbieter : Cliff Brozo 4 Lektionen · 23m auf Arabisch, Deutsch, Englisch, Spanisch, Französisch, Portugiesisch, Chinese

Kursbeschreibung

In diesem Kurs werden Sie Grid-Layout und -Design untersuchen, indem Sie komplizierten Code in etwas umwandeln, das visuell Sinn macht, so dass Sie besser verstehen können, was Sie tun. Sie werden die Möglichkeit haben, das Grid-Layout zu manipulieren, lernen, wie man Container verwendet, und bestimmen, welche Elemente in welchen Bereich des von Ihnen erstellten Grids gesetzt werden sollen. Das Grid-Layout ist ein wichtiger Bestandteil von CSS und ein unverzichtbares Werkzeug, um Ihre Websites zum Leben zu erwecken.

Was Sie lernen werden

Ein Grid-Layout in CSS entwerfen
Die verfügbaren Tools für Grid-Design erkunden
Container verwenden, um Grid-Layouts zu strukturieren
Bestimmen, welche Elemente in jeden Bereich des Grids zu platzieren sind
Attraktive Menüs mit CSS Grid erstellen
Artikel und Asides innerhalb eines Grids formatieren

Wichtige Erkenntnisse

Der Kurs verwandelt komplizierten Grid-Code in etwas, das visuell sinnvoll ist, damit Lernende besser verstehen, was sie tun.
Lernende üben, Grid-Layout zu manipulieren und Container zu verwenden, um Inhalte zu organisieren.
Grid-Layout wird als ein wichtiger Teil von CSS und ein wesentliches Werkzeug zur Belebung von Websites präsentiert.
Der Kurs behandelt das Platzieren von Elementen in spezifischen Bereichen eines Grids und das Formatieren von Elementen wie Menüs, Artikeln und Asides.

Häufig gestellte Fragen

Was werde ich in diesem Kurs lernen?

Sie werden Grid-Layout und Design untersuchen, Grid-Layout manipulieren, lernen, wie man Container verwendet, und bestimmen, welche Elemente in welchen Bereich des Grids zu legen sind. Die Ziele umfassen das Entwerfen eines Grids in CSS, das Erkunden von Tools für Grid-Design, das Erstellen attraktiver Menüs und das Formatieren von Artikeln und Asides.

Wie ist der Kurs strukturiert?

Der Kurs ist in vier Lektionen organisiert: Grid Design Part 1, Grid Design Part 2, Grid Design Part 3 und Grid Design Part 4.

Welche Fähigkeiten behandelt dieser Kurs?

Er behandelt CSS Codes, CSS Frameworks, CSS Grid, Grid System, Grid Layout und Object Oriented CSS.

Warum ist das Erlernen von Grid-Layout wichtig?

Grid-Layout ist ein wichtiger Teil von CSS und ein wesentliches Werkzeug zur Belebung Ihrer Websites.