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

Tutorial zu HTML-Formular-Tags (3): Eingabe-Tag

Tutorial zu HTML-Formular-Tags. In diesem Abschni...

Eine kurze Diskussion darüber, ob CSS-Animationen durch JS blockiert werden

Der Animationsteil von CSS wird von JS blockiert,...

Beispielcode zur Implementierung des Neuner-Raster-Layouts dynamischer Bilder mit CSS

Voraussetzung: content="width=750" <...

Miniprogramm zur Implementierung der Sieve-Lotterie

In diesem Artikelbeispiel wird der spezifische Co...

Neue Blockbereichsfunktion von JavaScript ES

Inhaltsverzeichnis 1. Was ist Blockbereich? 2. Wa...

Detaillierte Einführung in die Linux-Firewall iptables, Konfigurationsmethode und Fall

1.1 Einführung in die iptables-Firewall Netfilter...

Super detaillierter GCC-Upgrade-Prozess unter Linux

Inhaltsverzeichnis Vorwort 1. Aktuelle gcc-Versio...

CSS3 realisiert den roten Umschlag-Shaking-Effekt

Es besteht die Anforderung, den Schütteleffekt de...

JavaScript-Entwurfsmuster – Muster der Verantwortungskette

Inhaltsverzeichnis Überblick Code-Implementierung...

Lösen Sie das Problem, dass MySQL 8.0 trotz korrekter Eingabe immer noch die Meldung „Zugriff verweigert“ anzeigt.

Ich habe vor kurzem angefangen, MySQL zu lernen. ...

Vue.js implementiert eine Timeline-Funktion

In diesem Artikel wird der spezifische Code von V...

Webdesign muss Zweck, Ideen, Gedanken und Beständigkeit haben

<br />Einleitung: Diese Idee kam mir, als ic...

Analyse der Ideen zur Implementierung vertikaler Tabellen auf zwei Arten im Vue-Projekt

Problembeschreibung In unseren Projekten sind hor...

Lassen Sie die Webseite automatisch den Hochgeschwindigkeitsmodus des Dual-Core-Browsers aufrufen (Webkit)

Codebeispiel Fügen Sie im Head-Tag eine Codezeile ...

Tiefgreifendes Verständnis der JavaScript-Rückruffunktionen

Inhaltsverzeichnis Vorwort Kurzübersicht: JavaScr...