So implementieren Sie Teiler mithilfe von CSS

Im Folgenden finden Sie einige einfache Möglichkeiten, Trennlinien zu implementieren. Ich persönlich bevorzuge die letzte fünfte Schreibweise 2. Bitte helfen Sie mir oder stellen Sie andere gute Methoden zur Verfügung.

Eine einzelne Beschriftung implementiert die Trennlinie:

.demo_line_01{
    padding: 0 20px 0;
    margin: 20px 0;
    line-height: 1px;
    border-left: 200px solid #ddd;
    border-right: 200px solid #ddd;
    text-align: center;
}

Vorteile: Der Code ist prägnant

Intelligente Verwendung von Hintergrundfarbe zur Implementierung der Trennlinie:

.demo_line_02{
    height: 1px;
    border-top: 1px solid #ddd;
    text-align: center;
}
.demo_line_02 span{
    position: relative;
    top: -8px;
    background: #fff;
    padding: 0 20px;
}

Vorteile: Der Code ist prägnant und kann an die Breite angepasst werden

Inline-Block zur Implementierung der Trennlinie:

.demo_line_03{
    width:600px;
}
.demo_line_03 b{
    background: #ddd;
    margin-top: 4px;
    display: inline-block;
    width: 180px;
    height: 1px;
    _overflow: hidden;
    vertical-align: middle;
}
.demo_line_03 span{
    display: inline-block;
    width: 220px;
    vertical-align: middle;
}

Vorteile: Text kann mehrzeilig sein

Floating zur Implementierung der Trennlinie:

.demo_line_04{
    width:600px;
}
.demo_line_04{
    overflow: hidden;
    _zoom: 1;
}
.demo_line_04 b{
    background: #ddd;
    margin-top: 8px;
    float: left;
    width: 26%;
    height: 1px;
    _overflow: hidden;
}

Vorteile: NUN

Verwenden Sie Zeichen, um Trennzeichen zu realisieren:

<p class="demo_line_05">———————————<span>小小分隔线 字符来实现</span>————————————</p>

.demo_line_05{
    letter-spacing: -1px;
    color: #ddd;
}
.demo_line_05 span{
    letter-spacing: 0;
    color: #222;
    margin:0 20px;
}

Vorteile: Das Obige sind nur einige einfache Beispiele für Trennmethoden. Ich werde es in Zukunft auf jeden Fall tun. Ich hoffe, es kann allen helfen.

Der obige Code stellt kurz vor, wie man Trennzeichen schreibt. Es gibt möglicherweise andere geeignetere Möglichkeiten, sie je nach Umgebung zu schreiben.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie Teiler mithilfe von CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!