Wenn Sie eine Webseite entwerfen, die die Elemente in geeigneten Positionen ausgerichtet ist, ist es von großer Bedeutung und macht sie reaktionsschnell, was bedeutet, dass sie ihr Verhalten je nach verschiedenen Arten von Geräten, die die Webseite anzeigen, ändern. Eine Möglichkeit, beide oben genannten Aufgaben auszuführen, besteht darin, ein Netzansichtssystem zu erstellen. Hier in dieser Beschreibung führen wir Ihnen Schritt für Schritt, wie Sie eine reaktionsschnelle Rasteransicht von Grund auf neu erstellen können.

Bevor wir in seine Konstruktion springen, lassen Sie uns untersuchen, was eine Rasteransicht tatsächlich ist.

Was ist eine Gitteransicht?

Eine Gitteransicht ist eine Technik, die eine Webseite in verschiedene Spalten verteilt, die die Positionierung von Elementen erleichtert. Eine Netzansicht, die in der Natur reaktionsschnell ist, besteht typischerweise aus 12 Spalten zusammen mit einer 100% igen Breite und skaliert je nach Größe des Webbrowsers auf und ab.

Lassen Sie uns nun sehen, wie Sie eine reaktionsschnelle Rasteransicht von Grund auf neu erstellen können.

Aufbau einer ansprechenden Rasteransicht

Im Folgenden haben wir das Schritt-für-Schritt-Verfahren zur Erstellung einer reaktionsschnellen Rasteransicht demonstriert.

Voraussetzung

Bevor Sie in die Codierung springen. Zum Beispiel ist hier die Skizze der Gitteransicht, die wir bauen werden.

Jetzt, wo wir unsere Skizze haben, beginnen wir mit dem Codierungsteil.

Schritt 1

Die grundlegende Notwendigkeit, eine Webseite reaktionsschnell zu machen.

Html

Das Attribut für Breite = Gerätebreite bedeutet, dass sich die Webseiten-Breite in der Korrespondenz zur Breite des Geräts ändert, während initial-Scale = 1 1.0 Attribut bedeutet, wenn die Webseite zum ersten Mal vom Browser geladen wird, ist 1.

Schritt 2

Fügen Sie einige HTML -Elemente hinzu, die Sie auf der Webseite anzeigen möchten.

Html

Linux -Hinweis

Um Inhalte in unserem Header -Abschnitt hinzuzufügen, erstellen wir einen DIV -Behälter und wickeln unsere Überschrift in diesen Behälter ein.

Html

• Über uns


• Autoren


• Veröffentlichte Artikel


• Kategorien von Artikeln

Alles über Programmiersprachen!

Hier finden Sie gut geschriebene und gut strukturierte Artikel, die sich auf alle Programmiersprachen beziehen, die von unseren raffinierten Autoren komponiert werden.

Um Inhalte in die Seitenleiste einzuführen, haben wir eine DIV mit Klassennamen „Col-3-Seitenleiste“ erstellt und eine ungeordnete Liste darin verschachtelt. Was den Hauptabschnitt betrifft, haben wir zwei Absätze hinzugefügt und in einem anderen DIV mit den Klassennamen "Col-9 Main" verschachtelt. Beide Divelemente sind in einem größeren Div mit dem Klassennamen „Container“ weiter verschachtelt.

Die an die verschachtelten Divelelemente zugewiesenen Klassen werden später erklärt.

Schritt 3

Jetzt sind wir mit unserem HTML -Teil fertig und gehen jetzt zu unserem CSS -Teil des Codes über. Das erste, was im Stylesheet durchgeführt werden muss.

CSS

*
Kastengrößen: Border-Box;

Der Grund dafür ist, dass diese Eigenschaft die Polsterung und die Grenze in der Gesamthöhe und der Breite von HTML -Elementen umfasst.

Schritt 4

Konvertieren wir unsere Seite nun in eine reaktionsschnelle Rasteransicht von 12 Spalten. Um dies zu tun.

Die Breite einer einzelnen Spalte = 1/12 der Gesamtbildschirmbreite = 100%/12 = 8.33%.

Die Breite von zwei Spalten kombiniert = 2/12. der Gesamtbildschirmbreite = 2 (100%)/12 = 16.66%

Die Breite von drei Spalten kombiniert = 3/12. der Gesamtbildschirmbreite = 3 (100%)/12 = 25%

Die Breite von vier Spalten kombiniert = 4/12. der Gesamtbildschirmbreite = 4 (100%)/12 = 33.33%

Usw.

CSS

.Col-1 Breite: 8.33%;
.col-2 width: 16.66%;
.Col-3 Breite: 25%;
.Col-4 Breite: 33.33%;
.col-5 Breite: 41.66%;
.Col-6 Breite: 50%;
.col-7 Breite: 58.33%;
.col-8 Breite: 66.66%;
.col-9 Breite: 75%;
.col-10 Breite: 83.33%;
.Col-11 Breite: 91.66%;
.Col-12 Breite: 100%;

Die Breite aller Spalten wurde im CSS definiert.

Notiz:

Wir wollten unsere Seitenleiste und unseren Hauptabschnitt in zwei Spalten platzieren. Eine Gitteransicht mit zwei Spalten sieht ungefähr so ​​aus.

Wenn wir uns die Breiten der verschiedenen Spalten im obigen Code ansehen. Daher wurde dem Div, das die Menüliste nistet .col-3 Klasse, während der Div mit dem Inhalt des Hauptabschnitts gegeben wurde .col-9 Klasse.

Schritt 5

Jetzt mit der Klasse “.Col- ”lasst uns den Säulen etwas Polsterung zur Verfügung stellen und nach links schweben.

CSS

[Klasse*= "col-"]
float: links;
Polsterung: 10px;

Der Float: Links -Eigenschaft platziert diese Spalten links vom Container, so dass Text und andere Inline -Elemente in die Spalten einwickeln werden. Dies positioniert die Elemente jedoch so, als ob die Spalten überhaupt nicht da sind. Deshalb müssen wir den Fluss löschen. Folgen Sie dazu den Code -Snippet unten.

CSS

.Container :: nach
Inhalt: "";
Lösche beide;
Anzeige: Tabelle;

Die: Nach dem Unterricht und der Inhaltseigenschaft wird verwendet, um Inhalte nach dem Container hinzuzufügen. In der Zwischenzeit wird der Tabellenwert der Anzeigeeigenschaft den Inhalt in Form einer Tabelle I angezeigt.e in Zeilen und Spalten.

Schritt 6

.Header
Hintergrundfarbe: Bisque;
Farbe weiß;
Polsterung: 20px;

.Seitenleiste ul
Rand: Auto;
Polsterung: 0px;

.Seitenleiste li
Polsterung: 10px;
Randboden: 10px;
Hintergrundfarbe: Rosybrown;
Farbe weiß;

Zuletzt stylen wir jetzt unsere Elemente mit den Klassen, die den Div -Containern des Headers und der Seitenleiste zugeordnet sind.

Ausgang

Die Webseite wurde bei zufälligen Bildschirmbreiten angezeigt.

Dies ist unsere Webseite bei 1250px.

Unsere Webseite bei der Breite von 600px.

Abschluss

Um eine reaktionsschnelle Rasteransicht zu erstellen, müssen Sie zuerst das Layout skizzieren, das Ihre Webseite haben soll, und teilen Sie Ihre Seite in verschiedene Spalten auf. Zum Beispiel haben wir in dem in diesem Artikel verwendeten Beispiel unsere Seite in 12 Spalten unterteilt, indem wir den Prozentsatz jeder Spalte berechnet haben. Danach können Sie diesen Prozentsatz verwenden, um Ihre Elemente genau über verschiedene Spalten zu platzieren. In diesem Handbuch haben wir Ihnen eine schrittweise Verfahrensanlage gezeigt, um eine Netzansicht von Grund auf neu zu erstellen.