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!
html:
<p class="line_01">小小分隔线 单标签实现</p>
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; }
Vorteile: Einfacher Code
html:
<p class="line_02"><span>小小分隔线 巧用色实现</span></p>
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; }
Vorteile: prägnanter Code, anpassungsfähig width
html:
<p class="line_03"><b></b><span>小小分隔线 inline-block实现</span><b></b></p>
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; }
html:
<p class="line_04"><b></b><span>小小分隔线 浮动来实现</span><b></b></p>
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; }
html:
<p class="line_05">———————————<span>小小分隔线 字符来实现</span>————————————</p>
css:
.demo_line_05{ letter-spacing: -1px; color: #ddd; } .demo_line_05 span{ letter-spacing: 0; color: #222; margin:0 20px; }
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!