` mit CSS
Dies ist die häufigste und flexibelste Methode. Sie erstellen ein schmales `div`element und stylen es als vertikale Linie.
`` `html
`` `
* `width:1px;` :Macht die Linie 1 Pixel breit. Sie können diesen Wert anpassen.
* `Höhe:100px;` :Legt die Höhe der Linie fest. Passen Sie dies an Ihre Bedürfnisse an. Erwägen Sie, Prozentsätze (`Höhe:100%;`) zu verwenden, damit er den verfügbaren Raum füllt.
* `Hintergrundfarbe:schwarz;` :Legt die Farbe der Linie fest. Ändern Sie dies in Ihre bevorzugte Farbe.
* `Margin:0 Auto;` :Zentriert die Linie horizontal. Dies funktioniert nur, wenn der übergeordnete Container eine definierte Breite hat.
Methode 2:Verwenden eines `
`Tag mit CSS (für einen einfachen Separator)
Das `
`Tag ist für horizontale Regeln ausgelegt, aber mit CSS können Sie es leicht vertikal machen. Dies ist am besten für einfache Separatoren.
`` `html
`` `
* `width:1px;` :Legt die Breite fest (vor der Rotation).
* `Höhe:100px;` :Legt die Höhe (vor der Rotation) fest.
* `Border:1px fest schwarz;` :Definiert die Grenze der Linie.
* `Transformation:Drehen (90 °);` :Dreht die Linie 90 Grad.
* `Transform-Origin:Top Center;` :Legt den Rotationsursprung auf die obere Mitte ein und stellt sicher, dass er sich um die Oberseite dreht.
Methode 3:Verwenden eines Randes an einem Div
Sie können auch eine vertikale Linie mit dem Rand eines DIV erstellen. Dies kann flexibler sein als die Verwendung von Hintergrundfarben.
`` `html
`` `
* `Border-Links:1px Solid Black;` :Erstellt auf der linken Seite einen 1PX -soliden schwarzen Rand. Sie könnten "Grenze-Recht" für eine Linie auf der rechten Seite der Div verwenden.
in ASP.NET integriert
Sie würden diese HTML normalerweise in Ihre Datei ASP.Net Razor View (.cshtml) einbinden:
`` `csharp
@{{
// dein anderer Code ...
}
@{{
// mehr von deinem Code ...
}
`` `
Denken Sie daran, die Eigenschaften "Höhe" und andere Stileigenschaften so anzupassen, dass sie Ihren spezifischen Layoutanforderungen entsprechen. Für komplexere Szenarien oder ein konsistenteres Styling in Ihrer Anwendung werden Sie eine CSS -Klasse erstellen und auf das Element anstelle von Inline -Stilen anwenden. Dies ist im Allgemeinen der bevorzugte Ansatz für die Wartbarkeit. Zum Beispiel:
CSS -Klassenansatz (empfohlen):
Ihre CSS -Datei (z. B. `styles.css`):
`` `CSS
.vertische Line {
Breite:1PX;
Höhe:100px;
Hintergrundfarbe:Schwarz;
Rand:0 Auto;
}
`` `
Ihre Rasieransicht:
`` `html
`` `
Dieser Ansatz ist sauberer, leichter zu warten und ermöglicht es Ihnen, den Stil über mehrere Elemente hinweg wiederzuverwenden. Denken Sie daran, Ihre CSS -Datei korrekt mit Ihrer Ansicht zu verknüpfen.
