So verwenden Sie das div-Tag in HTML zum Erstellen von Schnittstellenblöcken
In diesem Artikel zeige ich Ihnen, wie Sie das div-Tag und einige verwandte CSS-Eigenschaften verwenden. Dadurch wissen Sie, wie Sie Blöcke auf der Oberfläche einer Website erstellen.
Das div-Tag spielt eine sehr wichtige Rolle, es wird verwendet, um eine Abdeckung für eine Position ( Block ) auf der Schnittstelle zu erstellen. Früher, als es keine Header-, Footer-, Artikel-..-Tags gab, verwendeten Programmierer div-Tags, um Schnittstellenblöcke für Kopf- und Fußzeilen zu erstellen. Jetzt ist es anders, Sie können stattdessen div-Tags oder diese neu hinzugefügten Tags verwenden.
Aber am Ende sind diese neuen Karten nichts Besonderes. Es ist im Wesentlichen dasselbe wie das div-Tag, gibt nur einen neuen Namen, um das HTML-Layout zu betrachten, damit man seine genaue Position auf der Oberfläche beurteilen kann.
Mục lục
Eigenschaften von div-Tags in HTML
Das div -Tag in HTML ist ein normales Tag, das standardmäßig als Block angezeigt wird. Daher verwenden wir es oft, um Blöcke auf der Benutzeroberfläche der Website zu erstellen.
Die Standardlänge eines div-Tags beträgt 100 % , was bedeutet, dass es sich von links nach rechts vollständig erstreckt. Die Domain ist durch den Platz begrenzt, den die äußeren HTML-Tags einnehmen. Das div-Tag hat überhaupt kein Attribut, um die Anzeige anzupassen, was wir mit CSS kombinieren müssen, um es bei Bedarf zu ändern.
Die div-Tag-Syntax lautet wie folgt :
<div> ... Nội dung bên trong </div>Sie können auch mehrere verschachtelte div-Tags wie folgt erstellen :
<div> <div> <div> ... Nội dung bên trong </div> </div> </div>Natürlich wirkt sich die übermäßige Verwendung von HTML-Tags in einem Thema auf die Ladegeschwindigkeit der Seite, die Suchmaschinenoptimierung und viele andere Faktoren aus. Daher sind erfahrene Frontend-Leute sehr eingeschränkt bei der Verwendung zu vieler HTML-Ebenen.
So erstellen Sie ein Block-Div auf der HTML-Oberfläche
Um es reibungslos verwenden zu können, müssen Sie wissen, wie man es mit CSS-Eigenschaften kombiniert, um die Standardanzeige von div-Tags anzupassen.
Hintergrund für div. Tag ändern
Ganz einfach, wir müssen nur die Hintergrundeigenschaft in CSS verwenden.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> div{ background: white; } </style> </head> <body> <div> CHÀO MỪNG BẠN ĐẾN VỚI THẺ DIV </div> </body> </html>Legen Sie Höhe und Breite für div. Tag fest
Mit den Eigenschaften height und width können wir die Höhe und Breite des div-Tags ändern.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> div{ background:white; height: 300px; width: 400px; } </style> </head> <body> <div> CHÀO MỪNG BẠN ĐẾN VỚI THẺ DIV </div> </body> </html>Rahmen für div. Tag erstellen
Um einen Rahmen zu erstellen, verwenden wir die Border-Eigenschaft in CSS.
div{ background: yellow; height: 300px; width: 400px; border: solid 1px red }Ändern Sie den Abstand zwischen Inhalt und Rahmen
Führen Sie die obigen Beispiele aus und Sie sehen den Inhalt innerhalb des div-Tags nahe am Rand. Jetzt werde ich die Eigenschaft padding in CSS verwenden, um Platz zwischen ihnen zu schaffen.
div{ background: yellow; height: 300px; width: 400px; border: solid 1px red; padding: 30px; }Bildschirmzentrierung für div. Tag einstellen
Wenn Sie möchten, dass das div-Tag relativ zu den Rändern zentriert angezeigt wird, verwenden Sie das margin-Attribut.
div{ background: yellow; height: 300px; width: 400px; border: solid 1px red; padding: 30px; margin: 0px auto; }Dabei ist 0px der Abstand oben und unten und auto der automatische Abstand zwischen links und rechts. Da ich Auto eingestellt habe, wird es automatisch zentriert. Lassen Sie uns das Beispiel ausführen, um die Ergebnisse anzuzeigen.
Bewegen Sie sich mit dem Schwimmer nach links oder rechts
Die Float-Eigenschaft in CSS hilft uns, dieses div-Tag links oder rechts auszurichten.
- float:left => nach links ausrichten
- float:right => rechte Ausrichtung
Linker Flügel
div{ background: yellow; height: 300px; width: 400px; border: solid 1px red; padding: 30px; float:left }Recht
div{ background: yellow; height: 300px; width: 400px; border: solid 1px red; padding: 30px; float:right }Es ist zu einfach, nicht wahr? In diesem Artikel möchte ich nur das div-Tag und einige der am häufigsten verwendeten Operationen vorstellen. In den nächsten Artikeln werde ich es auf Gebäudelayouts anwenden.
Bài viết liên quan:
Dịch vụ thiết kế Wesbite
