So legen Sie einen gepunkteten Rahmen in HTML fest

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:

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

Artikel empfehlen

Lösung für das Problem der Werteübergabe zwischen HTML-Seiten

Als ich den Aufsatz zum ersten Mal verwendete, füh...

Implementierung des CSS-Ladeeffekts Pac-Man

emmm, der Name ist nur eine zufällige Vermutung 2...

So installieren Sie OpenJDK in Docker und führen das JAR-Paket aus

Bild herunterladen Docker-Pull OpenJDK Erstellen ...

Ein Protokoll einer Notfallreaktion nach einem Einbruch in einen Linux-Server (Zusammenfassung)

Kürzlich erhielten wir von einem Kunden eine Bitt...

18 erstaunliche Verbindungen zwischen Interaktionsdesign und Psychologie

Designer müssen Psychologie verstehen, indem sie ...

Grafisches Tutorial zur Maven-Installation und -Konfiguration unter Windows (einschließlich lokalisierter Warehouse-Konfiguration)

1. Maven herunterladen Offizielle Maven-Website: ...

Eine einfache Möglichkeit, Desktop-Exe-Programme auf einer Webseite aufzurufen

Dieser Artikel stellt hauptsächlich vor, wie Deskt...

Docker-Container wird nach der Ausführung beendet (wie kann man ihn weiter ausführen)

Phänomen Starten Sie den Docker-Container docker ...

So erstellen Sie ein Apache-Image mit Dockerfile

Inhaltsverzeichnis 1. Docker-Image 2. Erstellen S...

Detaillierte Erklärung des Unterschieds zwischen Vue-Lebenszyklus

Lebenszyklusklassifizierung Jede Komponente von V...

Beheben Sie das Problem, dass nach der Installation von Centos7 in VMware kein Ping an das externe Netzwerk möglich ist

Beim Konfigurieren eines Clusters ist ein Problem...

So verwenden Sie Mixins in Vue

Inhaltsverzeichnis Vorwort Anwendung Zusammenfass...

MySQL 8.0.20 Installations- und Konfigurations-Tutorial unter Win10

Super ausführliches Tutorial zur Installation und...

Ideen und Praxis einer mehrsprachigen Lösung für ein Vue.js-Frontend-Projekt

Inhaltsverzeichnis 1. Welche Inhalte müssen üblic...

Installieren Sie die MySQL5.5-Datenbank in einer CentOS7-Umgebung

Inhaltsverzeichnis 1. Prüfen Sie, ob MySQL auf de...