Heim > Web-Frontend > CSS-Tutorial > Detaillierte Erläuterung verschiedener Methoden zur Implementierung von Trennlinien in CSS

Detaillierte Erläuterung verschiedener Methoden zur Implementierung von Trennlinien in CSS

韦小宝
Freigeben: 2018-03-14 12:55:19
Original
3446 Leute haben es durchsucht

In diesem Artikel werden die verschiedenen Methoden zur Implementierung von Trennzeichen in CSS beschrieben. Es gibt viele Möglichkeiten, Trennzeichen in CSS zu implementieren. Schauen wir uns also an, wie sie verwendet werden CSS, um eine schönere Ansicht des Teilers zu erreichen!

Ein einzelnes Tag implementiert die Trennlinie:

html:

<p class="line_01">小小分隔线 单标签实现</p>
Nach dem Login kopieren

css:

.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;
}
Nach dem Login kopieren

Vorteile: Einfacher Code

Hintergrundfarbe geschickt einsetzen, um Trennlinien zu erzielen:

html:

<p class="line_02"><span>小小分隔线 巧用色实现</span></p>
Nach dem Login kopieren

css:

.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;
}
Nach dem Login kopieren

Vorteile: prägnanter Code, anpassungsfähig width

inline-block implementiert die Trennlinie:

html:

<p class="line_03"><b></b><span>小小分隔线 inline-block实现</span><b></b></p>
Nach dem Login kopieren

css:

.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;
}
Nach dem Login kopieren

Floating-Implementierungsteiler:

html:

<p class="line_04"><b></b><span>小小分隔线 浮动来实现</span><b></b></p>
Nach dem Login kopieren

css:

.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;
}
Nach dem Login kopieren

Verwenden Sie Zeichen, um Trennzeichen zu implementieren:

html:

<p class="line_05">———————————<span>小小分隔线 字符来实现</span>————————————</p>
Nach dem Login kopieren

css:

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

Vorteile : Der Code ist prägnant. Es gibt möglicherweise andere geeignetere Möglichkeiten, sie je nach Umgebung zu schreiben.
Nur ​​durch den Vergleich können Sie herausfinden, wer besser ist. Sie können diese Codes umsetzen und einen Vergleich durchführen!

Verwandte Empfehlungen:
So legen Sie Trennzeichen und doppelte durchgezogene Linien in CSS fest

So verwenden Sie CSS, um Teiler zu implementieren

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung verschiedener Methoden zur Implementierung von Trennlinien in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage