de.hideout-lastation.com
Paradies Für Designer Und Entwickler


Brillante Verwendung von HTML-Listen im Webdesign

Sie können gut gestaltete Listen rund um das Internet finden. Designer verwenden sie seit Jahrzehnten, um Seiteninformationen und Layouts zu koordinieren, und im heutigen Web können Sie die große Kreativität sehen, mit der Webdesigner Listen verwenden. Dazu gehören Navigationsmenüs, Profilverknüpfungen, Archive, Aufgaben / Checklisten und viele andere Anwendungen!

In diesem Beitrag werde ich verschiedene Arten von HTML-Listen vorstellen, mit Tipps zu deren Gestaltung, insbesondere dazu, wie Sie Ihrer Liste eine einzigartige Kante hinzufügen können . Außerdem werde ich Sie durch einige Beispiele von Websites mit fantastischen Listen-Designs führen, und schließlich werden Sie eine Liste von Websites mit schön gestalteten HTML-Listen erhalten. Es gibt keinen Zweifel mehr daran, wie man einfach aussehende Listen einzigartig aussehen lässt, und fangen wir an, heute das Beste daraus zu machen!

Die Auflistungselemente

Webdesigner springen ständig von einem Zug auf den nächsten, was dazu führt, dass sich die Websitestile im Laufe der Zeit verändern, aber Listen haben sich im Laufe der Zeit bewährt und sind möglicherweise bei zukünftigen Innovationen des World Wide Web sehr präsent.

Bevor ich die Beispiele anschaue, möchte ich einige Punkte mit HTML-Listen behandeln. Es gibt einige verschiedene Arten von Listen, die Sie in Ihrer eigenen Designarbeit verwenden können. Die meisten Webdesigner konzentrieren sich auf ungeordnete Listen, die mit einem geöffnet werden

    Tags, aber es gibt auch zwei andere weniger beliebte Varianten: Geordnete Listen und Datendefinitionen . Ich bin weiter unten näher darauf eingegangen.

    Ungeordnete Listen (
      )

    Möglicherweise eines der am häufigsten verwendeten Elemente in HTML4 / HTML5-Standards. Ungeordnete Listen geben Daten auf die gleiche Weise aus wie eine geordnete Liste, jedoch sehen Sie keine numerischen Markierungen auf der Seite . Stattdessen erhält jeder Gegenstand einen kleinen Kreis oder eine Scheibe und eine neue Linie. Dieses Symbol kann auch mit der listenähnlichen Eigenschaft in CSS geändert werden .

    Unten ist der Beispielcode der ungeordneten Liste:

    • Gegenstand 1
    • Punkt 2
    • Punkt 3

    Ungeordnete Listen sind das perfekte Mittel zum Aufbau von Navigationslinks . Da Sie ganz einfach ganze Listen innerhalb eines Listenelements verschachteln können, ist es auch einfach, Unter-Navigationslinks zu erstellen . Nach dem Entfernen des Listenstils bleibt ein leeres Element übrig. Von hier aus können Sie Anker-Links als Blockelemente auf Ihrer Seite formatieren und so ein Navigationsmenü-Design ausfüllen. Mit etwas jQuery-Code können Sie einen schönen Header für Ihre Site zusammenstellen.

    Am häufigsten finden Sie ungeordnete Listen in der Mitte von Web-Artikeln oder Installationsanweisungen. Beachten Sie, dass Google und andere Such-Bots Ihre Seiteninhalte nicht auf andere Weise verarbeiten. Daher sollte Ihre SEO unabhängig davon, welche Anzeigenart Sie auswählen, nicht betroffen sein .

    Geordnete Listen (
      )

    Wenn Sie eine Reihe von Daten bestellen müssen, ist es möglich, ein eigenes Layoutframework von Grund auf neu zu erstellen, aber auf diese Weise müssen Sie jede inkrementierende Zahl von Hand hinzufügen, was mühsam sein kann. Geordnete Listen sind ideal, um nummerierte Aufgaben ohne Fehler in Einklang zu halten. Die Reihenfolge Ihrer internen Listenelemente (

  • ) wird bestimmen, wie die Daten dargestellt werden.

    Unten ist der Beispielcode der geordneten Liste:

    1. Gegenstand 1
    2. Punkt 2
    3. Punkt 3

    Es ist auch möglich, den Zähler von normalen Zahlen zu einer Handvoll anderer Optionen zu ändern . Dazu gehören alphabetische Buchstaben und römische Ziffern, um nur einige zu nennen. Webdesigner würden eine geordnete Liste für inhaltsspezifische Listen verwenden. Rezeptdaten, tägliche Aufgaben, Favoriten oder top / zuletzt eingeloggte Benutzer sind nur einige Beispiele. Oft sehen Sie Blogkommentare, die mit sortierten Listen erstellt wurden, um jeden Kommentar in einer nummerierten Reihenfolge zu halten.

    Datendefinitionslisten (
    )

    Definitionslisten werden nicht mehr oft gesehen (nicht wie sie jemals beliebt waren). Sie wurden früher bei Webdesignern gesehen, die komplexe Formate von Links oder Box-Inhalten erstellten. Das Datenlisten-Tag (

    ) wird heute oft von Codern missverstanden. In HTML4.01 wurden Spezifikationsdatenlisten verwendet, um Elemente mit ihren Beschreibungen zu paaren . Diese wurden Definitionslisten genannt.

    Im Folgenden finden Sie den Beispielcode der Datendefinitionsliste:

     Gegenstand 1 
     Beschreibung 
     Punkt 2 
     Beschreibung 
     Punkt 3 
     Beschreibung

    Mit den neuen HTML5-Spezifikationen haben Datenlisten jedoch eine Transkription erhalten. Es gibt keine Unterschiede in der Syntax, wie Sie die Elemente verwenden. Ihr Zweck wurde jedoch als eine Beschreibungsliste aktualisiert, die aus einem oder mehreren Datenbegriffen besteht (

    ) gefolgt von einer oder mehreren Datendefinitionen (
    ) .

    Ein gutes Beispiel aus dem HTML5 Doctor's Artikel ist eine Metadaten-formatierte Liste . In einem einzelnen dl Listenelement würden Sie einen Begriff wie Ihren Namen definieren, dann könnte jedes nachfolgende Definitions-Tag Daten über Sie beschreiben, möglicherweise Ihr Alter, Beruf, aktuelle Stadt usw. Letztendlich jeder Datensatz mit Schlüssel / Wert Paare passen gut in eine Beschreibungsliste . Sie können mehr als einen Datenterm in einer Liste verwenden, aber W3C gibt an, dass jeder Term in der Liste eindeutig sein sollte .

    Nachdem wir nun die 3 populären Listenstile durchgearbeitet haben, gehen wir zu einigen Beispielen über! Webdesigner sind in den letzten Jahren sehr kreativ mit ihren Listen geworden. Ich habe sieben meiner Lieblingswebsites katalogisiert, mit besonderem Schwerpunkt auf der kreativen Verwendung von Listen.

    Einfache ungeordnete Listennavigation

    Navigationsmenüs sind mit modernen CSS-Techniken viel einfacher zu erstellen. Aus diesem Grund sind ungeordnete Listen und sogar geordnete Listen eine beliebte Option geworden. Eines meiner Lieblingsbeispiele dafür erscheint auf dem Social-Media-Blog Mashable.

    An der Spitze ihres Headers werden Sie zwei Hauptgruppen von Links bemerken. Direkt an der Spitze des Logos befindet sich eine kleine ungeordnete Liste mit Community-Links wie Top Stories, Trending Topics und People. Der Designer hat einen eleganten Hover-Stil mit einem soliden Hintergrund und Farbschema erstellt.

    Direkt darunter sehen Sie ihre Unter-Navigationslinks. Dieses Navigationsmenü führt zu Blog-Kategorien wie Social Media oder Tech. Beide ungeordneten Listen sind in einem HTML5 enthalten