Heim > Artikel > Web-Frontend > Detaillierte Einführung in die Methode zum Festlegen gepunkteter Ränder in HTML
Detaillierte Einführung in die Methode zum Festlegen gepunkteter Ränder in HTML
- 高洛峰Original
- 2017-03-03 16:34:566322Durchsuche
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>Das obige Beispiel legt den gleichen Stil für verschiedene Tags in HTML fest, einschließlich der gleichen gepunkteten Rahmenlinie.
6. Browser-Effekt-Screenshots
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!