Listen Sie Tag UL, OL, DL: Kompatibilitätsprobleme für verschiedene Browser auf

Einführung in die Produktion von Webseiten: Forschung und Anwendung von HTML CSS -Listenelementen UL, OL, DL.

HTML -Listenelemente (wie OL, UL, DL) werden in der aktuellen Website -Entwicklung und -produktion häufig verwendet, aber ihre Gemüter unterscheiden sich in verschiedenen Browsern. Dieser Artikel analysiert die grundlegenden Merkmale dieser Listenelemente, verschiedene Kompatibilitätsprobleme in verschiedenen Browsern und führt einige gemeinsame Anwendungen ein.

Es sollte für Anfänger oder solche, die Erfahrung in CSS haben, hilfreich sein.

Unbestreitete Listen sind die am häufigsten verwendeten Listen. Die folgende Abbildung zeigt die Anzeige ungeordneter Listen in verschiedenen Browsern:

Demo -Seite

Wie oben gezeigt, sind die Standardeinstellungen von ungeordneten Listen unter verschiedenen Browsern geringfügig unterschiedlich. Natürlich gibt es nur wenige ungeordnete Listen, die heute in den tatsächlichen Website -Projekten nicht geändert werden. Einer der Gründe ist der CSS -Reset, der die Standard -Kugeln, Ränder oder Paddings für nicht ordnungsgemäße Listen entfernt hat.

Einige spezifische CSS-Eigenschaften von ungeordneten Listen sind Typenstil-, Listen-Style-Positionen und Listen-Stil-Imbs. Diese Eigenschaften setzen den Typ der Listenkugeln, den Ort des Tags und die Verwendung von Bildern anstelle von Tags. Diese drei Eigenschaften können mit Listenstil zusammengeführt werden.

Das Attribut vom Typ Listenstil kann auf verschiedene Werte festgelegt werden. Das folgende Diagramm zeigt den Seiteneffekt einiger Werte:

Abhängig vom Browser und des Betriebssystems des Benutzers werden einige Werte im Listen-Stil möglicherweise nicht korrekt angezeigt, und in der Regel standardmäßig Dezimalwerte. Es wird nicht empfohlen, eine unnötige Liste zu verwenden, um den Wert zu erhöhen, da die Semantik der ungeordneten Liste selbst nicht mehr vorhanden ist.

Listenstil-Position kann für die Position des Listen-Tags auf äußerlich (Standard) oder im Inneren eingestellt werden. Wenn ein Listen-Image eingestellt ist, wirkt es sich auch auf die Position des Bildes aus.

Das Attribut "Listen-Image-Image" kann nicht ordnungsgemäß eine benutzerdefinierte eindeutige Leistung listen. Leider besteht die Verwendung dieser Methode zum Hinzufügen von Projektnummern in IE viele Fehler, sodass sie selten verwendet wird. Eine bessere Lösung besteht darin, dem Li-Element der Liste Hintergrundbild hinzuzufügen und den Standort des Hintergrundbildes entsprechend anzupassen und auf No-Repeat einzustellen. Auf maxdesign.com wurde diese Methode durch schrittweise Erklärungen demonstriert und funktioniert in allen Browsern gut.

Bestellte Listen werden verwendet, wenn vor jedem Listenelement des Listenelements ein inkrementeller Wert erforderlich ist (z. B. 1, 2, 3 usw.). Der Typ-Typ-Typ-Typ-Typ einer bestellten Liste kann auf jeden Wert festgelegt werden, der unter einer nicht ordnungsgemäßen Liste festgelegt werden kann. In den meisten Fällen ist eine geordnete Liste entweder ein inkrementeller Wert vorausgesetzt oder keine Markierungen voraus. Es wird nicht empfohlen, bestellte Listen zu verwenden, um ein Verhalten ähnlich wie ungeordnete Listen zu erreichen. Aus diesem Grund ist die Semantik der geordneten Liste selbst nicht mehr korrekt.

Die Definitionsliste wird verwendet, um die definierten Listenelemente zu markieren, die den Definitionstitel (DT) und die Definition selbst (DD) enthalten. Bei der Definition eines Listenelements müssen Sie nicht genau übereinstimmen. Der folgende Code ist unter striktem XHTML völlig legal:

<dl> <dt> drahtlose Musik miguhui </dt> <dt> Kopenhagen Konferenz </dt> <dd> "Oktober Siege" </dd> </dl>

Auf diese Weise können Sie mehrere DTs unter einem einzelnen DD oder mehrere DDs unter einem einzelnen DT verwenden.

Definieren Sie die visuelle Anzeige der Liste. Standardmäßig ist die Anzeige jedes Browsers nahezu das gleiche wie in der folgenden Abbildung:

Demo -Seite

Der dem obige Bild entsprechende HTML -Code lautet wie folgt:

<dl> <dt>Title</dt> <dd>Here is the definition</dd> </dl> <dl> <dt>Popular movies</dt> <dd>October siege</dd> <dd>Taoling</dd> <dd>Three guns to slap the table</dd> <dd>Avatar</dd> </dl> <dl> <dt>Hot Thema </dt> <dd> Aktienmarkt </dd> <dd> Immobilienpreise </dd> <dd> Neujahrstag </dd> <dd> CAO CAOs Grab </dd> </dl> 4. Veraltete Liste: Menü & Dire

<em Menü> und <Dir> Elemente können technisch auch als HTML -Listen bezeichnet werden, sind jedoch in XHTML veraltet, sodass sie hier nicht ausführlich besprochen werden.

In HTML bleibt die ungeordnete Liste im Wesentlichen gleich, obwohl sie jetzt einfach als Liste bezeichnet wird und neue Elemente verwendet werden, um die Liste als Navigation zu wickeln.

Das OL -Element hat eine leichte Änderung und erhält zwei neue Eigenschaften: umgekehrt, was ein boolescher Wert ist, um anzuzeigen, ob die Liste steigt oder fällt; Start, was eine Ganzzahl ist, um den Ausgangspunkt der geordneten Liste zu deklarieren.

Darüber hinaus werden die Elemente <ABELLE> und <TEATALISE> hinzugefügt und sie werden untergeordnete Elemente enthalten, einschließlich der Elemente <Dt> und <dd>.

Weitere Informationen zu HTML5 finden Sie in diesem Artikel zu Taobao Kongyan's enthüllender HTML5 und CSS3 [Baibiao Milk Tea Gang]. Darüber hinaus können Sie hier klicken, um das Online -PPT anzuzeigen.

Das Folgende sind einige häufige und offensichtliche Browserunterschiede.

Unter dem Internet Explorer 8, Opera 9, Chrome, Firefox 2 & 3 und Safari wird das Anzeigen hinzugefügt.

Aber unter IE6 und IE7 fügen das Display hinzu: Block Bullet gibt es immer noch:

Demo -Seite

Unter IE6 und IE7 werden die Listenelemente horizontal ausgerichtet, während die Kugeln (oder Elementnummer) verschwinden. Wie in der Abbildung unten gezeigt, wird es aus dem IE7 -Browser geschnitten

Unter IE8 und allen anderen Browsern sind die Listenelemente horizontal ausgerichtet, aber die Kugeln (oder Projektnummern) sind immer noch sichtbar.

Demo -Seite

Wenn das Listenelement schwimmt, müssen wir uns an einen anderen wichtigen Punkt erinnern, dh der Listenbehälter (UL -Element) stirbt, wenn nur schwimmende Elemente im Inneren sind. Dies wird in allen Browsern auf die gleiche Weise geschehen. Überlauf hinzufügen: Hidden ist eine der Lösungen für dieses Problem.

Um ungefähr den gleichen Float zu erreichen: linker Effekt in verschiedenen Browsern, ist die beste Möglichkeit, Anzeige zu verwenden: Inline.

Unter IE6 und IE7, wenn das Listenelement in der bestellten Liste ein Layout enthält, erhöht sich der Wert der geordneten Liste nicht und wird als 1 angezeigt, wie in der folgenden Abbildung gezeigt:

Demo -Seite

Die Haslayout -Eigenschaft kann nicht direkt festgelegt werden. Wenn jedoch ein Element auf Breite, Höhe, schwebende, absolute Positionierung eingestellt ist, ändert sich das Warten von Haslayout.

Um in den meisten Browsern Kugeln oder Projektnummern zu entfernen und die linke Seite des Inhalts auszurichten, müssen Sie die linke Polsterung auf 0 einstellen, dies funktioniert jedoch nicht in IE6 und IE7. In IE6 und 7 müssen Sie den linken Rand auf 0 einstellen und ersetzen. Siehe das Bild unten:

Demo -Seite

Um Probleme bei der Behandlung von Listenstilen unter verschiedenen Browsern zu vermeiden, besteht der beste Weg, den oben genannten CSS -Reset zu verwenden. Das CSS -Reset kann fast alle Unterschiede für Standardeinstellungen im Browser festlegen und es allen Browsern ermöglichen, auf derselben Basis zu arbeiten. Obwohl es immer noch Unterschiede in einigen Stilen gibt, werden sie nicht als schwieriger Punkt behandelt.

Wie bereits erwähnt, vermeiden Sie es am besten, die Eigenschaft im List-Stil zu vermeiden und stattdessen den Hintergrund festzulegen, eine benutzerdefinierte symbolische Problemumgehung für Cross-Browser, leicht zu machende, ungeordnete Listen.

Die häufigste Verwendung ungeordneter Listen sind Navigationsstangen, ob horizontal oder vertikal. Da Tabellenbasierte Layouts veraltet sind, wurden aus folgenden Gründen nicht ordnungsgemäße Listen als Grundlage für Navigationselemente verwendet:

• Nicht ordnungsgemäße Listen gehören zu Block -Level -Elementen und müssen keine DIV außerhalb des Außenbereichs einwickeln, um Hintergrund oder andere grafische Erweiterungen anzuwenden.

• Wenn der Stil deaktiviert ist, wird der Listenstil ruhig herabgestuft, wodurch der ursprüngliche Stil beibehalten wird, was sicherstellen kann, dass sich die Navigationselemente von anderen Inhalten auf der Seite unterscheiden.

• Obwohl eine ungeordnete Liste nicht nur eine einfache Liste ist, werden Elemente wie <a> Tags hinzugefügt, aber zusätzliche <li> Elemente werden die Navigationsleiste in einer flexibleren Form ausdrücken.

• Die Navigation ist in Listen und/oder Untervermieter unterteilt, sodass die Verwendung von Hilfstechnologien (z. B. Bildschirmleser) verwendet wird, die Benutzer problemlos die gesamte Navigationsleiste überspringen können.

Zum Beispiel: Lavalamp Special Effect -Menü mit JQuery implementiert

Zum Beispiel ein Beispiel für ein Dropdown-Menü, das ich vor einiger Zeit erstellt habe: JQuery verwendet Slidetoggle, um das vertikale Dropdown-Menü zu implementieren

Effekt Demo

HTML List Tag UL, LI, bietet eine effektive Möglichkeit, aus den gleichen Gründen wie oben in der Navigationsleiste erwähnt eine Fotoliste anzuzeigen. Im Folgenden finden Sie einige Photogalerien oder Fotomodellkomponenten, die auf HTML -Tags basieren.

Jcarousel

JCarousel Photo Switching Getriebe JQuery Plug-In bietet anpassbare JQuery-Funktionen, die nicht ordnungsgemäße Listen verwenden, und kann Übertragungseffekte auf viele verschiedene Arten anzeigen. Ich habe dieses Plugin in Chinesisch übersetzt, Sie können hier hart klicken: JCAROUSEL CHINA -Demo -Homepage

Innerfade - JQuery

Mit dem Innerfade-Plug-In können alle Inhalte für Listenform die Anzeige ein- und ausblenden oder die Anzeige nach oben und unten schalten. Der Inhalt kann Text, Bilder usw. sein, unterstützt verschiedene Tags, Listen -Tags, UL-, Li-, Div- und P -Tags.

Es kann sich leicht realisieren, dass die automatische Zufallsschaltanzeige von Nachrichten oder Ankündigungsinhalten oder Wiedergabemaßnahmen von Bild -Diashows usw. angezeigt wird

Diese Plug-in-Demo ist schwer hier zu klicken: Innerfade Demo-Seite

Viele Blogs und Tutorial -Websites enthalten JavaScript -Highlight -Code, das Pre -Elemente oder TextArea -Elemente in geordnete Listen umwandelt, wie im folgenden Screenshot gezeigt. Einer der berühmten Code -Hervorhebungs -Plugins ist Alex Gorbatchevs Syntaxhighlighter.

Im Folgenden finden Sie einen Screenshot des Effekts ähnlich dem hervorgehobenen Plugin:

Sie können hier klicken, um den Effekt anzunehmen (die Demo-Seite zeigt den JQuery Cookie-Plug-in-Code).

Blog-Kommentare, einschließlich dieser WordPress-gesteuerten Websites, sind in bestellten Listen eingebaut, bieten sehr flexible Stylingoptionen und legen die Grundlage für die Verschachtelung von Kommentaren. Das folgende Bild ist Screenshot aus dem Kommentarbereich der Geschichte von Mr.Gray - Web Interaction Design Gray 8 Anwendungen, die gestern von Tencent CDC TD veröffentlicht wurden.

Der typischste Vertreter ist die Anzeige von Tausenden von Produktkategorien in der Taobao -Homepage in der Babykategorie:

Wie aus dem Screenshot ersichtlich ist, wird der Zweck dieser Kategorie mit der Liste der DL-, DT- und DD -Definitionsliste angezeigt.

Es gibt viele andere Anwendungen für Listenelemente, z. B. Fortschrittsbalken für Uploads mit mehreren Bildern, CSS-Step-Menüs, überlappende Menüs usw. Ich werde sie hier nacheinander nicht zeigen.

Die HTML -Tagelemente sind Ziegel und Fliesen, die sehr gewöhnlich aussehen, aber wenn es um exzellente Designer und exzellente Arbeitnehmer geht, werden sie ihr unendliches Potenzial und ihr Charme ausüben, sodass wir ein farbenfrohes Internet haben. Gleiches gilt für Listenelemente. Obwohl es in diesem Artikel Dutzende von mehr Verwendungen und Techniken zu diskutieren gibt, erhalten wir einige der in diesem Artikel gezeigten Dinge ein gründliches Verständnis für den Überblick über Listen -Tag -Elemente in HTML, wodurch Sie wunderschöne Internetgebäude mit Ziegeln wie Listen erstellen können.

• Der Listen

• CSS -Design: Taming -Listen

• CSS -Listen auf W3schools

• Definitionslisten - missbraucht oder missverstanden?

• Listen im CSS-Stil: 20+ Demos, Tutorials und Best Practices

• Listen Sie Elemente in der HTML -Referenz von SitePoint auf