Heim Web-Frontend Front-End-Fragen und Antworten Was sind die 8 häufigsten Arten von Webseiten-Layouts?

Was sind die 8 häufigsten Arten von Webseiten-Layouts?

Jun 10, 2021 pm 03:31 PM
Webseitenlayout

8 gängige Arten von Webseitenlayouts: 1. „国“-Layout; 3. Titeltext-Layout; 6. „口“-Layout; . Symmetrisches Kontrastlayout; 8. POP-Layout.

Was sind die 8 häufigsten Arten von Webseiten-Layouts?

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Die meisten Websites haben unterschiedliche Stile, aber die Layouts haben alle bestimmte Regeln. Es gibt acht gängige Website-Layoutformen, nämlich „国“-Layout, Ecklayout, Titeltext-Layout und „T“-Strukturlayout, „Mund“. „Layout, symmetrisches Kontrastlayout, POP-Layout. Lassen Sie uns diese acht gängigen Arten von Webseitenlayouts nacheinander vorstellen.

1. „国“-Schriftartlayout

Dieses Layout ist weit verbreitet und wird häufig von einigen großen Websites verwendet. Sein Merkmal ist, dass es standardisiert ist und der Inhalt von oben nach unten verläuft. Oben auf der Webseite befinden sich das Titelbanner und die Navigationsleiste, und unten befinden sich die relevanten Inhaltsinformationen der Website, z. B. Chinaren, 163, Sina und andere Websites.

2. Ecklayout

Das Merkmal dieses Layouts besteht darin, Links zu relevanten Inhalten auf der linken oder rechten Seite der Webseite zu platzieren, und auf der anderen Seite befinden sich relevante Textinformationen. Über der Website befindet sich das Titelbanner oder die Hauptinhaltsnavigation Bar, wie zum Beispiel eine Campus-Website warten.

3. Titeltext-Layout

Es zeichnet sich dadurch aus, dass zusätzlich zum Titel Text verwendet wird. Einige Fachartikel, Romanseiten oder Registrierungsseiten fallen in diesen Typ.

4. Cover-Layout

Es zeichnet sich dadurch aus, dass die Homepage der Website aus einigen exquisiten und kreativen Mustern in Kombination mit einigen kleinen Animationen besteht. Auf der Seite gibt es keine Navigationsleistenanzeige, sondern nur einfache „Eingabe“ und andere Links: Dieses Layout wird im Allgemeinen auf Design-Websites wie Designforen, Designfirmen, persönlichen Websites usw. verwendet, da dieses Layout sorgfältiges Design erfordert und den Menschen ein wunderbares visuelles Gefühl vermittelt.

5. „T“-Strukturlayout

Das sogenannte „T“-Strukturlayout bezieht sich auf die Kombination der oberen und linken Seite der Webseite. Der obere Teil der Seite ist das horizontale Website-Logo und das Werbebanner Unten links befindet sich das Hauptmenü und rechts wird der Inhalt angezeigt. Dies ist die am häufigsten verwendete Layoutmethode im Webdesign. Im tatsächlichen Design kann auch die Form des „T“-Strukturlayouts geändert werden.

Zum Beispiel ein zweispaltiges Layout links und rechts, wobei die Hälfte aus Text und die andere Hälfte aus visuellen Bildern und Navigation besteht. Oder der Haupttext wird in zwei Spalten angeordnet, die sich durch die Hintergrundfarbe unterscheiden, und Bilder und Text werden getrennt platziert.

Ein solches Layout hat seine inhärenten Vorteile, da die Aufmerksamkeit der Menschen hauptsächlich auf die untere rechte Ecke gerichtet ist, sodass die meisten Briefe, die Unternehmen an Benutzer veröffentlichen möchten, von den Benutzern am besten erhalten werden können, und zweitens ist es sehr praktisch , die Seitenstruktur ist klar, klare Prioritäten und einfach zu bedienen. Der Nachteil ist, dass die Regeln starr sind und wenn man nicht auf Details und Farben achtet, kann es schnell „langweilig“ werden.

6. „Mund“-Layout

Dies ist eine anschauliche Art zu sagen, dass sich oben und unten auf der Seite ein Werbebanner befindet, links das Hauptmenü, rechts benutzerfreundliche Links usw der Hauptinhalt in der Mitte.

Der Vorteil dieses Layouts besteht darin, dass die Seite umfangreich ist, der Inhalt reichhaltig ist und die Menge an Informationen groß ist. Es handelt sich um ein häufig verwendetes Layout für umfassende Websites. Das Besondere ist die Reihe kleiner Symbole oben Das Zentrum spielt eine Rolle bei der Aktivierung der Atmosphäre.

Der Nachteil ist, dass die Seite überfüllt und nicht flexibel genug ist. Es gibt auch fensterartige Designs, bei denen die vier Seiten leer bleiben und nur die Mitte verwendet wird. Beispielsweise verwendet die NetEase-Hintergrundbild-Website ein Multi-Frame-Format. Nur der mittlere Teil der Seite kann gescrollt werden, und die Benutzeroberfläche ist ähnlich eine Spieloberfläche. Mehrdimensionale Gaming-Unterhaltungswebsites, die diese Art von Layout verwenden.

7. Symmetrisches Kontrastlayout

Wie der Name schon sagt, bezieht es sich auf ein symmetrisches Links-Rechts- oder Oben-Unten-Layout, halb dunkel und halb hell, das im Allgemeinen für Design-Websites verwendet wird. Sein Vorteil ist die starke visuelle Wirkung, sein Nachteil besteht jedoch darin, dass es schwierig ist, die beiden Teile organisch zu kombinieren.

8. POP-Layout

POP kommt vom Werbebegriff, was bedeutet, dass das Seitenlayout wie ein Werbeplakat ist, mit einem schönen Bild als Designzentrum der Seite. Die Vorteile werden oft auf Mode-Websites verwendet und liegen auf der Hand: schön und attraktiv, aber der Nachteil ist die langsame Geschwindigkeit.

Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Einführung in die Programmierung! !

Das obige ist der detaillierte Inhalt vonWas sind die 8 häufigsten Arten von Webseiten-Layouts?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Repo: Wie man Teamkollegen wiederbelebt
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

So zentrieren Sie Bilder im Dreamweaver-Webdesign So zentrieren Sie Bilder im Dreamweaver-Webdesign Apr 08, 2024 pm 08:45 PM

Zentrieren Sie ein Bild in Dreamweaver: Wählen Sie das Bild aus, das Sie zentrieren möchten. Stellen Sie im Eigenschaftenfenster die horizontale Ausrichtung auf „Mitte“ ein. (Optional) Stellen Sie die vertikale Ausrichtung auf „Mitte“ oder „Unten“ ein.

Was sind die am häufigsten verwendeten Flex-Layout-Eigenschaften? Was sind die am häufigsten verwendeten Flex-Layout-Eigenschaften? Feb 25, 2024 am 10:42 AM

Was sind die gemeinsamen Eigenschaften von Flex-Layout? Es sind spezifische Codebeispiele erforderlich. Flex-Layout ist ein leistungsstarkes Tool zum Entwerfen responsiver Webseitenlayouts. Es erleichtert die Steuerung der Anordnung und Größe von Elementen auf einer Webseite mithilfe eines flexiblen Satzes von Eigenschaften. In diesem Artikel werde ich die allgemeinen Eigenschaften des Flex-Layouts vorstellen und spezifische Codebeispiele bereitstellen. Anzeige: Stellen Sie den Anzeigemodus des Elements auf Flex ein. .container{display:flex;}flex-directi

So erstellen Sie mit CSS Viewport Unit vh ein Webseitenlayout, das sich an mobile Bildschirme anpasst So erstellen Sie mit CSS Viewport Unit vh ein Webseitenlayout, das sich an mobile Bildschirme anpasst Sep 13, 2023 am 11:15 AM

So erstellen Sie mit der CSSViewport-Einheit vh ein an Mobiltelefonbildschirme angepasstes Webseitenlayout. Mobiltelefongeräte werden immer beliebter und immer mehr Webseiten müssen an Mobiltelefonbildschirme angepasst werden. Um dieses Problem zu lösen, hat CSS3 eine neue Unit-Viewport-Einheit eingeführt, die vh (Viewportheight) enthält. In diesem Artikel untersuchen wir, wie man mit vh-Einheiten Webseitenlayouts erstellt, die sich an mobile Bildschirme anpassen, und stellen spezifische Codebeispiele bereit. eins

Woraus besteht Bootstrap? Woraus besteht Bootstrap? Apr 05, 2024 am 01:09 AM

Das Bootstrap-Framework besteht aus den folgenden Komponenten: CSS-Präprozessoren: SASS und LESS. Responsives Layoutsystem: Grid-System und Responsive Utility-Klassenkomponenten: UI-Elemente und JavaScript-Plug-in-Designs und -Vorlagen: Vorgefertigte Stile und vorgefertigte Seiten. Tools und Dienstprogramme : Icon-Set, jQuery, Grunt

jQuery-Tipps zum schnellen Ermitteln der Bildschirmhöhe jQuery-Tipps zum schnellen Ermitteln der Bildschirmhöhe Feb 24, 2024 pm 06:30 PM

jQuery-Tipps: So ermitteln Sie schnell die Bildschirmhöhe Bei der Webentwicklung kommt es häufig vor, dass Sie die Bildschirmhöhe ermitteln müssen, z. B. bei der Implementierung eines responsiven Layouts, der dynamischen Berechnung der Elementgröße usw. Mit jQuery können Sie die Funktion zum Ermitteln der Bildschirmhöhe problemlos erreichen. Als Nächstes stellen wir einige Implementierungsmethoden für die Verwendung von jQuery vor, um schnell die Bildschirmhöhe zu ermitteln, und fügen spezifische Codebeispiele hinzu. Methode 1: Verwenden Sie die height()-Methode von jQuery, um die Bildschirmhöhe mithilfe der Höhe von jQuery zu ermitteln

Gibt es eine Möglichkeit, Floats zu löschen? Gibt es eine Möglichkeit, Floats zu löschen? Feb 22, 2024 pm 04:00 PM

Gibt es eine Methode zum Löschen von Floats? Im Webseitenlayout sind Floats eine gängige Layoutmethode, die es ermöglicht, Elemente aus dem Dokumentfluss zu lösen und relativ zu anderen Elementen zu positionieren. Bei der Verwendung des Floating-Layouts tritt jedoch häufig das Problem auf, dass das übergeordnete Element das Floating-Element nicht korrekt umschließen kann, was zu einem ungeordneten Layout der Seite führt. Daher müssen wir Maßnahmen ergreifen, um den Float zu löschen, damit das übergeordnete Element das Float-Element korrekt umschließen kann. Es gibt viele Möglichkeiten, Floats zu löschen. Im Folgenden werden einige häufig verwendete Methoden vorgestellt und spezifische Codebeispiele gegeben.

Was ist Layout-Layout? Was ist Layout-Layout? Feb 24, 2024 pm 03:03 PM

Unter Layout versteht man eine im Webdesign verwendete Schriftsatzmethode, um Webseitenelemente nach bestimmten Regeln und Strukturen anzuordnen und anzuzeigen. Durch ein angemessenes Layout kann die Webseite schöner und übersichtlicher gestaltet werden und eine gute Benutzererfahrung erzielt werden. Bei der Front-End-Entwicklung stehen viele Layoutmethoden zur Auswahl, z. B. traditionelles Tabellenlayout, schwebendes Layout, Positionierungslayout usw. Mit der Förderung von HTML5 und CSS3 sind jedoch moderne responsive Layout-Technologien wie das Flexbox-Layout und das Grid-Layout entstanden

Die Definition und Verwendung von Zeichen voller Breite Die Definition und Verwendung von Zeichen voller Breite Mar 25, 2024 pm 03:33 PM

Was sind Zeichen in voller Breite? In Computerkodierungssystemen sind Zeichen doppelter Breite eine Zeichenkodierungsmethode, die zwei Standardzeichenpositionen einnimmt. Dementsprechend wird die Zeichenkodierungsmethode, die eine Standardzeichenposition einnimmt, als Zeichen halber Breite bezeichnet. Zeichen in voller Breite werden normalerweise für die Eingabe, Anzeige und den Druck von chinesischen, japanischen, koreanischen und anderen asiatischen Zeichen verwendet. Bei chinesischen Eingabemethoden und der Textbearbeitung sind die Verwendungsszenarien von Zeichen voller Breite und Zeichen halber Breite unterschiedlich. Verwendung von Zeichen in voller Breite Chinesische Eingabemethode: Bei der chinesischen Eingabemethode werden normalerweise Zeichen in voller Breite verwendet, um chinesische Zeichen einzugeben, z. B. chinesische Schriftzeichen, Symbole usw.

See all articles