Beispiele für die Verwendung von DD DT DL-Tags

Beispiele für die Verwendung von DD DT DL-Tags
Normalerweise verwenden wir die Tags <ul><li>, aber auch die Tags dd und dt sind gut, insbesondere beim Veröffentlichen eines Programms können Sie sie zum Layout der Liste der Funktionsmodule verwenden.

<dl>< /dl>< dt>< /dt>< dd>< /dd>
<dl>< /dl> wird verwendet, um eine normale Liste zu erstellen, <dt>< /dt> wird verwendet, um das obere Element in der Liste zu erstellen, und <dd>< /dd> wird verwendet, um das untere Element in der Liste zu erstellen. Sowohl <dt>< /dt> als auch <dd>< /dd> müssen zwischen dem Tag-Paar <dl>< /dl> platziert werden. Schauen Sie sich das folgende Beispiel an und Sie werden es verstehen:

dl ——Liste definieren——Liste definieren
dt ——Listentitel definieren——wird verwendet, um die Titel jedes Listenelements in der Definitionsliste zu generieren. Es kann wiederholt verwendet werden, um die Titel mehrerer Listenelemente zu definieren.
dd – „define list define“ – wird verwendet, um die Beschreibungstextfelder für jedes Listenelement in der Definitionsliste zu generieren. Es kann wiederholt verwendet werden, um mehrere Beschreibungstextfelder zu definieren. dd ist eine kurze Beschreibung oder Erklärung des entsprechenden dt

Beispiel:

Code kopieren
Der Code lautet wie folgt:

<dl>
<dt>Heute
<dd>Heute ist gestern.
<dt>Morgen
<dd>Morgen ist heute.
</dl>

Beispiel 2:

Code kopieren
Der Code lautet wie folgt:

<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<Kopf>
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
dt {
schweben: links;
Breite: 60px;
Rand: 0px;
Polsterung: 0px;
}
dd {
schweben: links;
klar: keine;
Breite: 290px;
Rand: 0px;
Polsterung: 0px;
}
dl {
Breite: 350px;
Schriftgröße: 9pt;
Zeilenhöhe: 1,5em;
Position: relativ;
Rand: 0px;
Polsterung: 0px;
links: 15px;
}
.Rot {
Farbe: #FF3300;
}
#Kasten {
Breite: 500px;
Hintergrundfarbe: #F1F1F7;
}
#Box #Inhalt {
Polsterung oben: 10px;
Polsterung rechts: 10px;
Polsterung unten: 10px;
Polsterung links: 20px;
}
-->
</Stil>
</Kopf>
<Text>
<div id="box">
<div id="Inhalt">
<img src=/Article/UploadFiles/200704/20070412091408274.gif align="left"/ >
<dl>
<dt>Produktname:</dt>
<dd><strong>[Was für ein großes] </strong>Youhui: <span class="red"><em>15 % Rabatt</em></span></dd>
<dt>Produkteinführung:</dt>
<dd>ProduktnameProduktnameProduktnameProduktnameProduktnameProduktnameProduktnameProduktnameProduktnameProduktnameProduktnameProduktnameProduktnameProduktnameProduktnameProduktnameProduktnameProduktnameProduktnameProduktnameProduktnameProduktnameProduktnameProduktnameProduktnameProduktnameProduktnameProduktnameProduktname…[<span class="red";>Ausführliche Einführung</span>]</dd>
<dt>Adresse des Geschäfts:</dt>
<dd>Produktname</dd>
<dt>Kontaktnummer:</dt>
<dd>0000-12345678 87654321 </dd>
</dl>
</div>
</div>
</body>
</html>

<<:  So implementieren Sie „insert if none“ und „update if yes“ in MySql

>>:  Implementierung des klassischen CSS-Sticky-Footer-Layouts

Artikel empfehlen

Zusammenfassung der Methoden zum Löschen des Cache im Linux-System

1) Einführung in den Cache-Mechanismus Um die Lei...

Lösung für das Problem, dass die Audiokomponente des WeChat-Applets unter iOS nicht abgespielt werden kann.

Lösung: Binden Sie das Klickereignis an die Audio...

So verwenden Sie Vue+ElementUI Tree

Die Verwendung von Vue + ElementUI Tree dient zu ...

JS+CSS zur Realisierung einer dynamischen Uhr

In diesem Artikelbeispiel wird der spezifische Co...

14 Möglichkeiten zum Erstellen von Website-Inhalten, die Ihre Besucher fesseln

Wenn ich im Internet surfe, sehe ich oft Websites...

Eine kurze Diskussion zur Auftragsrekonstruktion: MySQL-Sharding

Inhaltsverzeichnis 1. Ziele 2. Umweltvorbereitung...

So installieren Sie MySQL und aktivieren die Remote-Verbindung auf dem Cloud-Server Ubuntu_Server_16.04.1

1. Installieren Sie MySQL: Verwenden Sie die folg...

Detaillierte Erläuterung der MySQL-Replikationsprinzipien und praktischen Anwendungen

Dieser Artikel veranschaulicht anhand von Beispie...

Die 6 effektivsten Möglichkeiten zum Schreiben von HTML und CSS

In diesem Artikel werden die sechs wirksamsten Me...

Detaillierte Erläuterung des CentOS 6.6-Quellcodes und der Installation des MySQL 5.7.18-Tutorials

1. Benutzer und Gruppen hinzufügen 1. MySQL-Benut...

Absoluter Pfad-URL und relativer Pfad-URL in HTML und Unterverzeichnis, übergeordnetes Verzeichnis, Stammverzeichnis

Eine absolute URL wird verwendet, um den gesamten ...

So verwenden Sie nginx zum Konfigurieren des Zugriffs auf wgcloud

Die Nginx-Konfiguration ist wie folgt: Wie http:/...

Oberflächliches Webdesign

<br />Ich war schon immer der Meinung, dass ...

So fügen Sie einem Hintergrundbild in CSS3 eine Farbmaske hinzu

Vor einiger Zeit stieß ich während der Entwicklun...

Beispiel für die Bereitstellung von MySQL auf Docker

Inhaltsverzeichnis 1 Was ist eine Container-Cloud...