HTML -Layoutelemente und -techniken
Die HTML-Layoutelemente definieren das Layout der Seite, wie die Elemente angeordnet werden sollen, um eine gut strukturierte Seite zu erhalten. Während die HTML -Layout -Techniken die Elemente verschönern, um eine Seite in einem präsentierbaren Format zu erhalten. In Anbetracht der Bedeutung von HTML -Elementen und HTML -Techniken beabsichtigt dieser Leitfaden, die folgenden Lernergebnisse bereitzustellen:
- Was sind HTML -Layoutelemente?
- CSS -Frameworks
- Gitterstruktur
- Flexbox -Layout
- Float -Eigenschaft
HTML -Layoutelemente
Der HTML5 hat die Unterstützung verschiedener semantischer Elemente entwickelt, mit denen das Layout der HTML -Seite gestaltet werden kann. Man kann die semantischen Elemente organisiert verwenden, um das gewünschte Layout zu erhalten. Die folgenden HTML -Elemente sind so eingestellt, dass das Layout der Seite entsprechend festgelegt wird.
: Der Header -Abschnitt definiert den Header -Teil des Dokuments
: Dieses Element wird verwendet, um einen neuen Abschnitt innerhalb einer Seite zu erstellen
Der
: Ein Artikel in einer HTML -Seite kann mit diesem Tag definiert werden.
Der
: Dieses Element erstellt eine Überschrift, um Informationen oder Details über diese Überschrift zusammenzufassen. Wenn Sie auf diese Überschrift klicken, werden die Informationen angezeigt, die darin gespeichert sind.
: Das Tag wird verwendet, um detaillierte Informationen über jedes bestimmte Ding/Objekt zu erwähnen.
: Es repräsentiert die Fußzeile eines Abschnitts/Dokuments.
Klicken Sie hier, um mehr über die semantischen Elemente der HTML -Elemente zu erfahren.
HTML -Layouttechniken
Die HTML -Layout -Techniken helfen bei der Erstellung eines mehrfarbigen Layouts, und die Techniken können aus einer der hier angegebenen Aussagen ausgewählt werden.
CSS -Frameworks
CSS -Frameworks würde dazu beitragen, ein reaktionsschnelles und attraktives Layout einer Webseite zu erstellen. Diese Frameworks enthalten verschiedene integrierte Kurse, die mit Stilen ausgestattet sind. Sie müssen daher keine eigenen Stile erstellen. Unter verschiedenen CSS -Frameworks, W3.CSS und Bootstrap werden häufig verwendet.
So verwenden Sie den W3.CSS -Framework
Es ist ein gut definiertes modernes CSS-Framework, das eine hohe Funktionalität von Stilen für eine Webseite bieten soll. Sein Zweck ist es, eine vielfältige Alternative zum Bootstrap -Framework zu liefern. Den W3 verwenden.CSS -Klasse müssen Sie einfach den folgenden Link zu Ihrer HTML -Seite einfügen.
So verwenden Sie das Bootstrap -Framework
Das Bootstrap-Framework ist ein weiteres CSS-Framework, in dem auch integrierte Klassen für HTML-Seiten verschiedene Arten von Stilen bereitgestellt werden können. Um das Bootstrap -Framework zu verwenden, haben Sie zwei Möglichkeiten:
- Download Bootstrap
- Verwenden Sie den CDN -Link direkt in Ihrem HTML -Dokument (empfohlen)
Die folgenden CDN -Links unterstützen Sie beim Importieren von Bootstrap -Instanzen, um Ihre Webseite zu stylen.
Fügen Sie den folgenden Link in Ihr Kopf -Tag ein (empfohlen)
Platzieren Sie das folgende Skript am Ende (empfohlen) des Tags des Dokuments
Durch das Platzieren der oben genannten Links können Sie verschiedene Bootstrap -Klassen verwenden, um Ihre HTML -Seite entsprechend zu stylen.
CSS schweben
Diese Technik ist sehr hilfreich, um HTML -Elemente zu platzieren. Standardmäßig werden die Elemente nacheinander platziert. Sie können jedoch die Float/Clear -Eigenschaft verwenden, um die Standardplatzierung von Elementen zu manipulieren. Die klare Eigenschaft wird verwendet, um die Kontinuität der Float -Eigenschaft zu brechen, sodass Sie die klare Eigenschaft verwenden müssen, wenn Sie das Element in die nächste Zeile platzieren möchten.
Die Funktionalität von CSS float und klare Eigenschaften ist leicht zu lernen, aber schwierig zu implementieren. Das folgende Beispiel bezieht sich auf die Verwendung von Float und klaren Eigenschaften.
Html
Html
CSS
JavaScript
Der obige HTML -Code erstellt drei Abteilungen mit Klassennamen “prim1","prim2" Und "prim3“.
CSS
.prim1float: links;
Breite: 33%;
Hintergrundfarbe: Orange;
.prim2
float: links;
Breite: 33%;
Hintergrundfarbe: LightskyBlue;
.prim3
klar: links;
Breite: 66%;
Hintergrundfarbe: LightGreen;
Der Hauptbestandteil dieses Beispiels ist das CSS, das zeigt, wie der Schwimmer und die klaren Eigenschaften verwendet werden. Der float = ”linksEigenschaft wird in den ersten beiden verwendet Divs während der dritte div hat das klare = "links“.
Ausgang
Flexbox -Layout
Das CSS -Modul Flexbox (Flexible Box) unterstützt bei der Erstellung einer flexiblen Layoutstruktur, ohne das Float oder ein Positionierungselement zu verwenden. Darüber hinaus können die Elemente in einer Zeile oder einer Spalte angeordnet werden (nur eine Dimension). Um die CSS -Flexbox -Technik zu verwenden, müssen Sie Class = addieren. “Flex-Container”Zum Element und das“Anzeige"Eigenschaft von Flex-Container muss auf" eingestellt sein "biegen“. Die Kinderelemente benötigen keine Klasse, sie werden nur mit der Elternklasse angepasst.
Das nachstehende Beispiel zeigt besser die Verwendung eines flexiblen Layouts.
.Flex-ContainerAnzeige: Flex;
Html
CSS
Im obigen Code a div wird mit class = "erstellt"Flex-Container"Und seine Anzeigeeigenschaft ist auf" gesetzt "biegen".
Ausgang
Gitterstruktur
Das Netzlayout ermöglicht das Anordnen verschiedener Kinderelemente auf eine präsentierbare Weise. Das Netzlayout bietet die Anordnung in zwei Dimensionen (mit Zeile und Spalte gleichzeitig). Um dies zu verwenden, die Klasse = “Gittercontainer"Wird für das übergeordnete Element verwendet, während die Klasse ="Gitter-Element”Wird für die Kinderelemente verwendet. Außerdem die Anzeige Eigenschaft des Gitterbehälters kann auf die festgelegt werden Netz oder zu Inline-Gitter.
.Raster-ContainerAnzeige: Grid;
Html
CSS
JavaScript
Im obigen Code die Klasse der übergeordneten div ist eingestellt auf "Gittercontainer"Und die Kinderartikel haben Klassen"Gitter-Element“.
Ausgang
Der Ausgang zeigt den primären Unterschied zwischen Gitter und Flex -Layout. Das Netzlayout wurde in mehrdimensionierter Erweiterung erweitert, während das Flex-Layout die Elemente in einer einzigen Dimension ordnet.
Abschluss
HTML -Layoutelemente und HTML -Layout -Techniken bieten die Funktionalität, eine Webseite auf präsentierbare Weise zu entwerfen. Zu diesem Zeitpunkt werden in diesem Artikel verschiedene HTML -Semantikelemente und HTML -Layouts bereitgestellt. Die semantischen Elemente dienen am besten dem Zweck ihrer Verwendung und gelten daher als wichtiger Bestandteil der Webseite. Die HTML -Layout -Techniken können CSS -Frameworks (Bootstrap oder W3) umfassen.CSS), CSS Float, CSS Flexible Box und CSS -Gitter.