CSS vertikale Linie
Beispiel 1
Wir verwenden Visual Studio -Code beim Generieren einer neuen Datei. Die leere Datei wird geöffnet, und wir müssen eine Sprache auswählen. Wir machen zuerst HTML -Code, also wählen wir die HTML -Sprache aus. Danach ist die erzeugte Datei eine HTML -Datei. Wir müssen beim Speichern keine Dateierweiterung angeben. Setzen Sie nun die grundlegenden HTML -Tags (oder Sie können die “einsetzen!Markieren Sie, um diese Tags automatisch zu generieren). Wenn Sie setzen "!"Und dann drücken. Im Körper können Sie sehen, dass es eine Überschrift und einen Div -Behälter gibt. Das "V1" ist der Name des Div -Containers. Wir verknüpfen diese HTML -Datei auch mit dem CSS, indem wir das Tag "Link" im "Kopf" dieses HTML -Code verwenden.
Wir dekorieren die Überschrift und verwenden die Eigenschaft "Textdekoration" und setzen sie auf "unterstreichen". Durch die Verwendung dieser Eigenschaft wird die Überschrift unterstrichen. Wir verwenden auch die Eigenschaft "Farbe", die die Farbe des Textes der Überschrift festlegt und auf "Blau-Violett" einstellt. In der nächsten Zeile haben wir die Eigenschaft "Schriftfamilie", die wir als "Times New Roman" festlegen,. Dann legen wir den Namen des Div -Containers "V1" und zeichnen die vertikale Linie in diesem Div -Container. Wir können die vertikale Linie mit der Eigenschaft „Grenze“ zeichnen.
Wir verwenden also diese Eigenschaft „Grenz-links“, die uns beim Zeichnen einer vertikalen Linie hilft. Da es sich um die Eigenschaft „Grenze links“ handelt, müssen wir die „Breite“, „Typ“ und „Farbe“ für diese Eigenschaft auf: „10px“ in seiner „Breite“, „solide“ in "Typ" und "10px" einstellen "Rot" in "Farbe". Es wird eine vertikale Linie auf dem Bildschirm von 10px Breite und rot machen. Wir setzen auch die „Höhe“ dieser vertikalen Linie als „400px“. Jetzt werden wir die Ausgabe dieses Codes erstellen, indem wir auf die rechte Maustaste klicken und dann "im Standardbrowser öffnen" auswählen. Oder Sie können die Verknüpfung verwenden, die "Alt+B" ist, um die Ausgabe zu erhalten.
Der Ausgang ist unten gezeigt. Sie können die vertikale Linie sehen. Diese Linie wird auf der linken Seite gerendert, da wir die Eigenschaft „Border-Links“ zum Zeichnen dieser vertikalen Linie verwendet haben.
Beispiel 2
In Beispiel 2 fügen wir im obigen HTML -Code einen Absatz hinzu. Jetzt haben wir einen Übergang, einen Absatz und einen DIV -Container in diesem HTML -Code. Danach fahren wir zur CSS -Datei, um den CSS -Code zu generieren.
Dekorieren Sie die Überschrift ein wenig, indem Sie die Eigenschaft "Textdekoration" anwenden und auf "gestricheln" setzen und "rot" als Wert der Eigenschaft "Farbe" verwenden. Der "Algerianer" wird als "Schriftfamilie" verwendet. Wenden Sie nun etwas Styling auf den Absatz an und setzen Sie seine Schriftgröße auf "20px" fest. Wir verwenden „grün“ als Wert der Eigenschaft „Farbe“. Verwenden Sie auch "Calibri" als "Schriftfamilie". Das Schlüsselwort "Fett" wird hier als "Schriftgewicht" verwendet.
Verwenden Sie das DIV namens "V1" und setzen Sie das Grundstück "Grenz-links" ein. Diese Eigenschaft hilft beim Zeichnen einer vertikalen Linie in den Div -Behälter. Die „Breite“ der vertikalen Linie lautet "10px". Diese Linie erscheint im „soliden“ Typ. Die Farbe der vertikalen Linie ist "orange". Die „Höhe“ bestimmt die Höhe der Linie, die wir als „400px“ festlegen,. Die "Position" der vertikalen Linie ist "absolut". Wir setzen die "links" auf "50%", damit diese vertikale Linie auf dem 50% igen linken Mittelwert in der Mitte erscheint. Das "Margen-Links" ist "-3px". Diese Eigenschaft wird verwendet, um den Raum außerhalb des Objekts auf der linken Seite zu definieren. Wir setzen auch das „Oberteil“ der vertikalen Linie als „50px“.
Die vertikale Linie erscheint auf einer linken Seite von 50% des Ausgabebildschirms.
Beispiel 3
Jetzt werden wir zwei vertikale Linien zeichnen. Also setzen wir zwei verschiedene Div -Container in diesen HTML -Code ein. Wir werden jedes Div zum Zeichnen vertikaler Linien separat verwenden. Die Überschrift und die Absatz -Tags sind die gleichen wie oben, und wir ändern nur den Text, der in den Absatz -Tags geschrieben ist.
In diesem Fall ist die „Schriftfamilie“ für die Überschrift „algerisch“. Setzen Sie die "Schriftgröße" des Absatzes auf "20px" und wenden Sie mehr Styling an. Für die "Farbe" verwenden wir das "Lila". Verwenden Sie auch "Times New Roman" als "Schriftfamilie". Das Schlüsselwort "Fett" wird als "Schriftgewicht" verwendet. Wir "unterstreichen" auch den Text des Absatzes mit "Textdekoration". Wir verwenden das Grundstück „Grenze links“ auf dem Div mit dem Namen „V1).Mit diesem Attribut kann eine vertikale Linie innerhalb des Div -Containers gezogen werden. Die „Breite“ der vertikalen Linie ist „12px“ und die Linie ist im Aussehen „solide“, da der Typ der Grenzeigenschaft „solide“ ist. In diesem Fall ist die vertikale Linie "blau" gefärbt. Die Höhe der Linie gibt in der „Höhe“ an, die wir auf "400px" gestellt haben. Die „Position“ der vertikalen Linie ist „absolut“. Wir setzen die "links" auf "50 Prozent", daher wird diese vertikale Linie auf der 50 -prozentigen linken Seite angezeigt, die sich in der Mitte befindet. Das "-3px" ist das "Rand links"."Das" Top "hier ist" 130px ".
Jetzt verwenden wir erneut die gleichen Eigenschaften für die zweite DIV, um eine weitere vertikale Linie im zweiten Div zu erstellen. Wir haben die Eigenschaft "Grenze links" auf "12px diente Grün" gesetzt, und die "Höhe" für diese Linie entspricht der ersten vertikalen Linie, die "400px" ist. Wir setzen seine „linke“ Eigenschaft auf „20%“ und diese Linie wird auf der linken Seite von 20% erscheinen. Das „Rand-Links“ und das „Oberteil“ entsprechen der ersten vertikalen Linie.
Wir können sehen, dass zwei vertikale Linien auf dem Ausgangsbildschirm rendern. Beide werden in einer anderen Position in der Ausgabe gerendert, während wir diese Position im CSS -Code festlegen.
Beispiel 4
Wir setzen eine Überschrift und einen DIV in den Körper und schreiben auch einen Text in den Div -Container. Wir zeichnen auch eine vertikale Linie in CSS und verknüpfen beide Dateien.
Passen Sie die Eigenschaft „Textdekoration“ an „unterstreichen“ und „grün“ als „Farbe“ an, um dem Header zusätzliches Flair zu verleihen. Die „Schriftfamilie“ der Überschriften ist in diesem Beispiel „algerisch“ und im „Zentrum“ ausgerichtet. Auf der DIV verwenden wir das Attribut „Grenzrechte“. In diesem Attribut im Div -Container kann eine vertikale Linie gezogen werden. Die „Breite“ der vertikalen Linie lautet "10px" und die Linie erscheint "solide", da der Typ der Grenzemobilie "solide" ist. Die vertikale Linie ist in diesem Code „Goldenrod“ gefärbt. Die „Höhe“ zeigt die Höhe der Linie an, die wir an "500px" eingestellt haben. Wir verwenden die Farbe „braun“ für die „Farbe“. Ändern Sie die „Schriftgröße“ des Textes in „23px“ und fügen Sie ihm weitere Dekoration hinzu. Das Schlüsselwort "Fett" wird hier als "Schriftgewicht" verwendet. Verwenden Sie außerdem als "Schriftfamilie" "sans-serif".
In diesem Screenshot wird die vertikale Linie auf der rechten Seite des Ausgangsbildschirms gerendert, da wir in diesem Beispiel die Eigenschaft „Grenzrechte“ verwendet haben.
Abschluss
Das Ziel, diesen Leitfaden zu präsentieren, ist es, Ihnen zu helfen, die „vertikale Linie“ in CSS zu verstehen. Wir haben diesen Begriff ausführlich durchgemacht und Ihnen mehrere Beispiele dafür gegeben, wie wir diese vertikale Linie in CSS gezeichnet haben. Wir haben erklärt, dass wir die Eigenschaft „Grenz links“ oder „Grenzrechte“ verwendet haben, um diese vertikale Linie im Ausgangsbildschirm zu rendern. Wir haben hier geschrieben, wie man vertikale Linien rendert. Wir haben hier vier verschiedene Beispiele verwendet, und wir haben die Ausgabe in diesem Handbuch angegeben.