HTML-Layout

王林

Freigeben： 2024-09-04 16:15:39

Original

499 Leute haben es durchsucht

Beim Entwerfen einer Webseite müssen wir die Webseitenelemente auf elegante Weise anordnen. Sie sollten für den Benutzer leicht zu navigieren und einfach sein. Es bietet eine Möglichkeit, diese Elemente gut strukturiert anzuordnen. Das HTML-Layout verleiht der Webseite ein sehr gutes Aussehen und bietet eine einfache Möglichkeit zur Gestaltung. Es ist eine einfache Möglichkeit, Webelemente mithilfe einfacher Standard-HTML-Tags zu entwerfen. HTML bietet verschiedene Layoutelemente, mit denen wir verschiedene Teile der Webseite gestalten können.

HTML-Layoutelemente

In diesem Artikel sehen wir verschiedene Layoutelemente und deren Beispiele. Mit diesen Elementen entwerfen wir eine einfache Struktur ähnlich der Zeitung.

1.

Dieses Element wird verwendet, um den Header der Webseite zu definieren. Es enthält den Titel der Seite oder ein Logo oder vielleicht einführenden Inhalt.

Code:

<!DOCTYPE html>
<html>
<head>
<title> EduCba </title>
</head>
<body>
<header style = "height: 100px; width: 100%; background-color: #607D8B;" >
<h1 style=" color: #fff; text-align: center; padding-top: 25px; font-size: 30px;" > Header Section</h1>
</header>
</body>
</html>

Nach dem Login kopieren

Ausgabe:

HTML-Layout

2.

Dieses Element enthält Links zur Menüliste. Dieses Element ist wie ein Container für verschiedene Navigationslinks. Die Links befinden sich auf einer anderen Seite oder auf derselben Seite.

Code:

Fügen wir unterhalb der Kopfzeile unseres letzten Beispiels ein Navigationselement hinzu.

Header Section

Section Part

Some Text

Article Part

Some Detailed Text

Summary: click here to show details

Details: Upon clicking summary element, details will be shown to the user

<footer style = " height: 100px; background-color:#607D8B; width: 100%; text-align: center;"> <h3 style = " color: #fff; text-align: center; padding-top: 10px; font-size: 30px; " >Footer Section</h3> <p> © Copyright ( Year ) </p> </footer>

Nach dem Login kopieren

Fazit

HTML-Layoutelemente sind daher beim Entwerfen einer Webseite sehr nützlich. Sie helfen Entwicklern, gut strukturierte Webseiten zu entwerfen. Die richtige Verwendung dieser Layoutelemente verbessert das Leseerlebnis von Webseiten. Wir haben die meisten der wichtigsten HTML-Layoutelemente im Detail gesehen.

Das obige ist der detaillierte Inhalt vonHTML-Layout. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!