So legen Sie einen gepunkteten Rahmen in HTML fest

Verwenden Sie CSS-Stile und HTML-Tag-Elemente

Um verschiedenen HTML-Tags gepunktete Ränder hinzuzufügen, wählen wir mehrere häufig verwendete Tags aus, um sie auszurichten und den gepunkteten Randeffekt festzulegen.

1. Häufig verwendete Tags in HTML

p-Tag

Spanne

ul li

Tabelle tr td

2. Beispiele für verwendete CSS-Eigenschaftswörter

Grenze

Breite

Höhe

3. Wichtige Punkte bei der Implementierung gepunkteter Linien mit CSS

Rahmen ist ein Rahmenattribut. Wenn Sie einen Objektrahmeneffekt erzielen möchten, müssen Sie die Rahmenbreite, Rahmenfarbe und den Rahmenstil (durchgezogene Linie oder gepunktete Linie) festlegen.

border:1px dashed #F00 Dies legt die Breite des Rahmenstils auf 1px, gepunktete Linie fest und die gepunktete Linie ist rot.

4. Beispielbeschreibung

Wir legen für die obigen Beschriftungen die gleiche Breite, Höhe und Rahmenwirkung fest.

5. Vollständiger HTML-Code:

 <!DOCTYPE html> <html>
 <Kopf> <meta charset="utf-8" />
 <title>Demonstration einer gepunkteten HTML-Grenze für www.pcss5.com</title> <style>
 .bor{border:1px gestrichelt #F00;width:300px;height:60px;margin-top:10px} span{display:block}/*CSS-Kommentar: Lass span einen Block bilden*/
 </style> </head>
 <body> <p class="bor">p-Box</p>
 <span class="bor">Spannungsfeld</span> <ul class="bor">
 <li>ul li-Liste</li> <li>ul li-Liste</li>
 </ul> <table class="bor">
 <tr> <td>Tabelle</td>
 <td>Tabelle 2</td> </tr>
 <tr> <td>Daten</td>
 <td>Daten 2</td> </tr>
 </Tabelle> </Body>
 </html>

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

6. Screenshots von Browsereffekten

Screenshot zum Festlegen des gestrichelten Rahmeneffekts für verschiedene Tags in HTML

<<: Detaillierter Prozess zur Bereitstellung von MySQL mit Docker (allgemeine Anwendungen, die mit Docker bereitgestellt werden)

>>: Eine andere Art von „Abbrechen“-Button

So erstellen Sie eine Liste in CocosCreator

Eine kurze Analyse der SpringBoot-Verpackung und des Hochladens in Docker sowie der Implementierung der Bereitstellung mehrerer Instanzen (IDEA-Version)

Kürzlich fragte mich ein Freund, ob ich schon ein...

So legen Sie einen gepunkteten Rahmen in HTML fest

So erstellen Sie eine Liste in CocosCreator

Beispiel für den Import von Nginx-Protokollen in Elasticsearch

Asynchroner Lebenszyklus von AsyncHooks in Node8

Diskussion über die Browsing-Designmethode für Webseiteninhalte

Detaillierte Erklärung der MySQL-Gruppensortierung, um die Top N zu finden

Vue verwendet OSS zum Hochladen von Bildern oder Anhängen

Detailliertes Tutorial zum Erstellen einer JMeter+Grafana+Influxdb-Überwachungsplattform mit Docker

Zeichnen Sie den Verbindungsvorgang mit der lokalen virtuellen Linux-Maschine über SSH auf

20 JS-Abkürzungsfähigkeiten zur Verbesserung der Arbeitseffizienz

Die Verwendung eines eindeutigen MySQL-Schlüssels in Abfragen und damit verbundene Probleme

Artikel empfehlen

CSS verwendet das Autoflow-Attribut, um einen Sitzauswahleffekt zu erzielen

So führen Sie PostgreSQL mit Docker aus

Eine detaillierte Einführung in die Speicherverwaltung und -adressierung unter Linux

CSS erzielt den Effekt, die Bildlaufleiste auszublenden und den Inhalt zu scrollen (drei Möglichkeiten)

Eine kurze Analyse der SpringBoot-Verpackung und des Hochladens in Docker sowie der Implementierung der Bereitstellung mehrerer Instanzen (IDEA-Version)

Zusammenfassung zur Verwendung von MySQL-Isolationsspalten und Präfixindizes

So aktivieren Sie die Swoole Loader-Erweiterung auf dem virtuellen Host des Linux-Systems

Beispiel für eine Methode zum Festlegen von MySQL-Fremdschlüsseln

Einführung in die Erstellung von Linux-Benutzerskripten/Ratespiel/Überwachung des Netzwerkkartenverkehrs

Beherrschen Sie die CSS-Eigenschaft „display:flow-root“-Deklaration in einem Artikel

Implementierungsbeispiel für den Linux-Befehl „tac“

React implementiert eine mehrkomponentige Wertübertragungsfunktion über Conetxt

So ändern Sie den Punkt im WeChat-Applet Swiper-Dot in einen Slider

Bild-Scrolling-Effekt mit CSS3 erstellt

So verwenden Sie js zur Kommunikation zwischen zwei HTML-Fenstern