Detaillierte Einführung in die Methode zum Festlegen gepunkteter Ränder in HTML-HTML-Tutorial-php.cn

Detaillierte Einführung in die Methode zum Festlegen gepunkteter Ränder in HTML

高洛峰

Freigeben： 2017-03-03 16:34:56

Original

6421 Leute haben es durchsucht

Verwendung von CSS-Stilen und HTML-Tag-Elementen Um gepunktete Ränder zu verschiedenen HTML-Tags hinzuzufügen, wählen wir mehrere gängige Tags zum Ausrichten aus und legen den Effekt des gepunkteten Rahmens fest.

1. Gängige HTML-Tags p-Tag Spanne Ulli Tabelle tr td

2. Das Beispiel verwendet CSS-Attributwörter Grenze Breite Höhe

3. Wichtige Einführung in CSS zur Realisierung gepunkteter Linien border ist das border-Attribut. Wenn Sie

implementieren möchten, verwenden Sie CSS-Stile und HTML-Tag-Elemente.

Um gepunktete Ränder zu verschiedenen HTML-Tags hinzuzufügen, wählen wir mehrere gängige Tags zum Ausrichten aus Legen Sie den gepunkteten Randeffekt fest.

1. Gemeinsame HTML-Tags

p-Tag

span

ul li

table tr td

2. Das Beispiel verwendet CSS-Attributwörter

Rahmen

Breite

Höhe

3 , CSS-Schlüsselpunkte zum Realisieren gepunkteter Linien

Rahmen ist das Rahmenattribut. Wenn Sie den Objektrandeffekt erzielen möchten, müssen Sie die Rahmenbreite, die Rahmenfarbe und den Rahmenstil (durchgezogen oder) festlegen gepunktete Linie)

border:1px dashed #F00 Hiermit wird die Breite des Rahmenstils auf 1 Pixel, gepunktete Linie, festgelegt, und die gepunktete Linie ist rot.

4. Beispielbeschreibung

Wir stellen die gleiche Breite, die gleiche Höhe und den gleichen Randeffekt für die oben genannten Etiketten ein.

5. Vollständiger HTML-Code:

<!DOCTYPE html> <html> 
<head> <meta charset="utf-8" /> 
<title>html边框虚线演示 www.pcss5.com</title> <style> 
.bor{border:1px dashed #F00;width:300px;height:60px;margin-top:10px} span{display:block}/*css注释说明：让span形成块*/ 
</style> </head> 
<body> <p class="bor">p盒子</p> 
<span class="bor">span盒子</span> <ul class="bor"> 
<li>ul li列表</li> <li>ul li列表</li> 
</ul> <table class="bor"> 
<tr> <td>表格</td> 
<td>表格2</td> </tr> 
<tr> <td>数据</td> 
<td>数据2</td> </tr> 
</table> </body> 
</html>

Nach dem Login kopieren

Das obige Beispiel legt den gleichen Stil für verschiedene Tags in HTML fest, einschließlich der gleichen gepunkteten Rahmenlinie.

6. Browser-Effekt-Screenshots

Detaillierte Einführung in die Methode zum Festlegen gepunkteter Ränder in HTML

HTML-Screenshots verschiedener Beschriftungseinstellungen mit gepunkteten Linieneffekten

Mehr HTML Eine ausführliche Einführung in die Methode zum Festlegen eines gepunkteten Rahmens finden Sie auf der chinesischen PHP-Website für verwandte Artikel!