In dieser technologisch reichen Ära ist die Website die wichtigste Bestandteil, um Ihre Unternehmen, Produkte oder Dienstleistungen vorzustellen. Das Layout gibt den Benutzern klare Anweisungen, um auf Websites zu navigieren und die wichtigsten Elemente einer Website ganz oben auf der Liste zu platzieren. Das Website -Layout hängt normalerweise von den Anforderungen des Benutzers ab. Es gibt jedoch einige Richtlinien, die die Entwickler beachten, um ein gutes Layout für eine Website zu erhalten.

In diesem Artikel haben wir verschiedene Möglichkeiten entwickelt, das Layout einer Website zu planen.

So planen Sie das Layout einer Website

Wie bereits beschrieben, hängt das Layout einer Website von den Anforderungen des Benutzers ab. Hier listen wir verschiedene Schlüsselelemente auf, die beim Erstellen eines angepassten Layouts einer Website helfen.

Header

Dieser Abschnitt wird oben auf einer Website angezeigt, und es gibt zahlreiche Möglichkeiten, diesen Raum auszuüben. Nur wenige Moderatoren halten den Namen oder das Logo der Website in diesem Kopfzeile, aber man kann auch einen Schieberegler hinzufügen.

Der folgende Code bezieht sich auf das Erstellen eines Beispielheaders

Html

Willkommen bei LinuxHint

A wird mit a erstellt class = "Header" und ein

Element ist in diesem Div enthalten.

CSS

Der obige CSS -Code bezieht sich auf die Kopfklasse und fügt dieser Klasse eine Eigenschaft im Hintergrundfarbe, eine Polsterung und eine textausrichtung hinzu.

Ausgang

Die Ausgabe zeigt, dass der Header oben auf der Seite platziert wurde und die benutzerdefinierten Eigenschaften enthält, die ihm zugewiesen wurden.

Navigationsverbindungen

Nach dem Header wird empfohlen, eine Navigationsleiste zu haben, die die Besucher auf verschiedene Seiten Ihrer Website leitet. Eine Beispielnavigationsleiste wird mit dem folgenden Code erstellt.

Html

Heim
Tutorials
Kategorien

Im obigen Code die div wird erstellt, die verschiedene Anker -Tags enthält, die sich auf verschiedene Links beziehen.

CSS

Der obige CSS -Code enthält Styling für die div class = "nav". Der “.Marine ” bezieht sich auf die Hauptnavigationsleiste und die “.nav a ” Die Klasse enthält Stylingeigenschaften für Links der Navigationsleiste.

Ausgang

Die Ausgabe enthält einen Header und eine Navigationsleiste mit drei Links.

Hauptinhalt

Der Hauptinhalt beginnt normalerweise gleich nach Ihrer Navigationsleiste. Und das Design des Hauptinhalts variiert vom Benutzer zu Benutzer. Verschiedene Benutzer bevorzugen einen Einspalten-Inhaltsbereich, während auch ein Mehrspaltlayout verwendet werden kann.

Der folgende Code bezieht sich auf das Erstellen des Hauptinhalts der Website -Seite.

Html

Html

CSS

Im obigen Code a div class = "main" wird erstellt, die zwei Kind enthält divs class = "prim".

CSS

.prim
float: links;
Breite: 49%;
Text-Align: Mitte;

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

Der CSS -Code passt die an Immobilien nach links schweben, Die Breite ist auf 49%, und die Ausrichtung des Textes wird auf die festgelegt Center. Darüber hinaus wird das klare Eigentum auf dem ausgeübt “.Main: Nach “ Um den schwimmenden Effekt zu verschwinden.

Notiz: Für eine einzelne Spalte müssen Sie die Breite entsprechend anpassen und ihr Wert wird auf eingestellt "Passform". Für 3 Spalten kann die Breite für jede Spalte auf 33% usw. eingestellt werden.

Ausgang

Die Ausgabe zeigt, dass der Hauptinhalt zwei Spalten benannt hat "HTML" und "CSS". Diese Spalten können nach Inhalten gemäß Ihrer Anforderung gespeist werden.

Fusszeile

Die Fußzeile ist eine weitere Hauptkomponente des Layout. Um eine Fußzeile zu erstellen, haben wir den folgenden Code verwendet.

Html

Fußzeileninformationen

Der obige Code erstellt a Div class = "Fußzeile" Das würde als Fußzeile der Seite angesehen werden.

CSS

.Fusszeile
Hintergrundfarbe: Orange;
Polsterung: 20px;
Text-Align: Mitte;

Der Hintergrundfarbe, Polster- und Text-Align-Eigenschaften werden auf die angewendet class = "Fußzeile".

Ausgang

Das obige Bild zeigt, dass die Fußzeile erfolgreich hinzugefügt wurde. Darüber hinaus kann man Stile und detaillierte Informationen für eine bessere Ästhetik der Seite hinzufügen.

Abschluss

Das Layout der Website besteht aus wenigen Hauptzutaten wie Header, Navigationsabschnitt, Hauptkörper und Fußzeile. Diese Komponenten dienen als wichtiger Player bei der Planung eines Layouts für eine Website, und die Schnittstelle oder Anordnung dieser Komponenten hängt von der Anforderung des Benutzers ab. Dieser Beitrag hat einen detaillierten Leitfaden zur Planung des Layouts einer Website bereitgestellt. Für ein besseres Verständnis haben wir die Verwendung aller oben genannten Komponenten demonstriert.