Article Part
Some Detailed Text
Section Part
Some Text
Heim >Web-Frontend >HTML-Tutorial >HTML-Layout
HTML-Layout
- 王林Original
- 2024-09-04 16:15:39514Durchsuche
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>
Ausgabe:
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
Summary: click here to show details
Details: Upon clicking summary element, details will be shown to the user