Verwenden Sie Standard-DL-, DT- und DD-Tags, um Tabellenlisten zu verwerfen
|
Heutzutage beginnen immer mehr Front-End-Entwickler, das ursprüngliche Tabellenlayout durch xHTML+CSS zu ersetzen und so das Gesamtlayout der Webseite zu vervollständigen. Dadurch werden nicht nur die Kosten für Entwicklung und Wartung der Website gesenkt, sondern der Code wird auch semantischer. Dies bedeutet jedoch nicht, dass Tabellen verschwunden sind. Viele Menschen verwenden sie immer noch, da sie für die Datenpräsentation auf Webseiten erforderlich sind, beispielsweise für Listen mit persönlichen Daten. Tatsächlich sparen Sie durch die Verwendung der HTML-Tags dl, dt und dd mehr Code und sorgen dafür, dass der Code semantisch konsistenter mit dem Inhalt ist. Natürlich haben Tabellen ihren Nutzen, und zwar für Datentabellen mit großen Datenmengen, aber für kleine Datenlisten und Formulare sind überhaupt keine Tabellen erforderlich! Wenn Sie zum Erstellen von Datenlisten immer noch herkömmliche Tabellen verwenden, lesen Sie weiter, um zu erfahren, wie die Verwendung der HTML-Tags dl, dt und dd Ihre Arbeit erleichtern kann ... Tabellendatenliste Der Datenlistencode der herkömmlichen Tabelle ist wie folgt. Wir müssen für jede Zeile ein tr-Tag hinzufügen und dann ein td-Tag für den Titel und die Daten. Da die Tags alle td sind, müssen wir, wenn wir Stile hinzufügen möchten, jedem td auch ein Klassenattribut hinzufügen. Code kopieren Der Code lautet wie folgt:<Tabelle> <tbody> <tr> <td class="title">Name:</td> <td class="text">Böe Li</td> </tr> <tr> <td class="title">Alter:</td> <td class="text">23</td> </tr> <tr> <td class="title">Geschlecht:</td> <td class="text">Männlich</td> </tr> <tr> <td class="title">Geburtstag:</td> <td class="text">26. Mai 1986</td> </tr> </tbody> </Tabelle> Nachfolgend der entsprechende CSS-Code. Wir fügen den zuvor im HTML deklarierten Klassen Stile hinzu. Code kopieren Der Code lautet wie folgt:/*TABELLELISTENDATEN*/ Tisch { Rand unten: 50px; } Tabelle tr .title { Hintergrund: #5f9be3; Farbe: #fff; Schriftstärke: fett; Polsterung: 5px; Breite: 100px; } Tabelle tr .text { Polsterung links: 10px; } Wie aus dem obigen Code ersichtlich ist, müssen Sie bei Verwendung des Tabellen-Tags einige entsprechende Klassenattribute zur TD-Zelle hinzufügen, wenn Sie CSS zum Ändern oder Modifizieren des Inhalts verwenden möchten. Dadurch erhöht sich Ihr Arbeitsaufwand unsichtbar und der Code wird etwas umfangreicher. Was bedeutet mehr Code? Dies bedeutet, dass Website-Verkehr verschwendet wird, die Wahrscheinlichkeit von Fehlern steigt und die anschließende Wartung schwieriger ist. dl, dt, dd-Datenlisten Sehen wir uns nun Datenlisten mit den HTML-Tags dl, dt, dd an. Zuerst verwenden wir das Tag dl (Definitionsliste), um die gesamte Datenstruktur zu speichern, und dann verwenden wir die Tags dt (benutzerdefinierter Titel) und dd (benutzerdefinierte Beschreibung), um den Titel und den Inhalt in den Daten zu speichern. Code kopieren Der Code lautet wie folgt:<dl> <dt>Name: </dt> <dd>Böe Li</dd> <dt>Alter: </dt> <dd>23</dd> <dt>Geschlecht: </dt> <dd>Männlich</dd> <dt>Geburtstag:</dt> <dd>26. Mai 1986</dd> </dl> Im CSS-Code müssen wir nur dt und dd nach links schweben lassen. Code kopieren Der Code lautet wie folgt:/*DL, DT, DD TAGS-LISTENDATEN*/ dl { Rand unten: 50px; } dl dt { Hintergrund: #5f9be3; Farbe: #fff; schweben: links; Schriftstärke: fett; Rand rechts: 10px; Polsterung: 5px; Breite: 100px; } dl dd { Rand: 2px 0; Polsterung: 5px 0; } Anhand der Beispiele von dl, dt und dd sollte deutlich erkennbar sein, dass ihre Codes einfacher, flüssiger und semantischer sind. Wenn Sie vor diesem Hintergrund weiterhin auf der Verwendung von Tabellen-Tags zum Ausfüllen von Webformularen oder anderen Webseiten-Layouts bestehen, ist es jetzt an der Zeit, Ihren Code zu ändern. Erleichtern Sie sich die Arbeit! |
<<: MySQL Online-DDL-Tool Gh-Ost-Prinzipanalyse
Artikel empfehlen
Erstellen Sie eine virtuelle Maschine und installieren Sie das Betriebssystem Redhat Linux auf VMware (grafisches Tutorial)
So erstellen Sie eine virtuelle Maschine auf VMwa...
WeChat Mini-Programm implementiert den Likes-Dienst
In diesem Artikel wird der spezifische Code für d...
So beheben Sie den Fehler „MySQL-Dienst kann nicht gestartet werden, Fehler 1069“
Heute, als ich unterwegs war, schrieb mir ein Kol...
Detaillierte Erläuterung zur Verwendung von Docker zum Erstellen einer einfachen Java-Entwicklungs- und Kompilierungsumgebung
Es gibt viele Versionen der Java-Sprache. Zusätzl...
So lösen Sie das Problem, dass das Softwarepaket bei der Installation von Software unter Linux nicht vorhanden ist
Wenn das Softwarepaket nicht vorhanden ist, kann ...
Sicherheitskonfiguration und Erkennung von SSL, nachdem die Website https aktiviert hat
Heutzutage ist es für Websites Standard, SSL zu a...
Toolkit: Ein leistungsfähigeres Front-End-Framework als Bootstrap
Hinweis: Die derzeit beliebtesten Front-End-Frame...
Velocity.js implementiert den Seiten-Scrolling-Umschalteffekt
Heute werde ich ein kleines Javascript-Animations...
js, um Drag & Drop-Sortierdetails zu erreichen
Inhaltsverzeichnis 1. Einleitung 2. Umsetzung 3. ...
JavaScript-Quellcode für Elimination
JavaScript zum Erreichen der Quellcode-Download-A...
Eine kurze Erläuterung der Unterschiede zwischen den verschiedenen Möglichkeiten zum Ausführen von .sh-Dateien in Ubuntu
Vorwort Verschiedene Methoden zur Skriptausführun...
Lösen Sie das Problem der Datensynchronisierung beim Scrollen und Liken von Vue-Seamless-Scroll
VUE verwendet vue-seamless-scroll zum automatisch...
37 Tipps für ein gutes User Interface Design (mit Bildern)
1. Versuchen Sie, ein einspaltiges statt eines meh...
Beispiel zum Erstellen eines Datenbanknamens mit Sonderzeichen in MySQL
Vorwort In diesem Artikel wird erklärt, wie Sie i...
Fragen und Antworten: Unterschiede zwischen XML und HTML
F: Ich weiß nicht, was der Unterschied zwischen XM...