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:

3b385d3141f77151a11c5ca4e387cb50———————————45a2772a6b6107b401db3c9b82c049c2小小分隔线 字符来实现54bdf357c58b8a65c66d7c19c8e4d114————————————94b3e26ee717c64999d7867364b1b4a3

.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!