Brillianter Einsatz von HTML-Listen im Webdesign
Rund um das Internet finden Sie übersichtlich gestaltete Listen. Designer verwenden sie seit Jahrzehnten koordinieren Sie Seiteninformationen und Layouts, Im heutigen Web können Sie sehen, wie kreativ Webdesigner Listen verwenden. Dazu gehören Navigationsmenüs, Profilverknüpfungen, Archive, Aufgaben / Checklisten und viele andere Verwendungsmöglichkeiten!
In diesem Beitrag werde ich verschiedene Arten von HTML-Listen einführen, mit Tipps zu deren Gestaltung, insbesondere zum Vorgehen Fügen Sie Ihrer Liste einen eindeutigen Rand hinzu. Ich werde Sie auch durch einige Beispiele von Websites mit fantastischen Listendesigns führen und schließlich werden Sie eine Liste von Websites mit hübsch gestalteten HTML-Listen erhalten. Es gibt keinen Zweifel mehr daran, wie Sie Ihre einfach aussehenden Listen einzigartig aussehen lassen. Lassen Sie uns heute das Beste aus ihnen machen!
Die Auflistungselemente
Webdesigner springen ständig von einem Zug zum nächsten, was dazu führt, dass sich die Website-Stile im Laufe der Zeit ändern, aber Listen haben sich bewährt und sind möglicherweise eine zukünftige Innovation des World Wide Web.
Bevor ich die Beispiele anschaue, möchte ich einige Punkte mit HTML-Listen behandeln. Es gibt einige verschiedene Arten von Listen, die Sie für Ihre eigene Designarbeit verwenden können. Die Mehrheit der Webdesigner konzentriert sich auf Ungeordnete Listen welche mit einem geöffnet werden
Ungeordnete Listen ()
Möglicherweise eines der am häufigsten verwendeten Elemente in HTML4 / HTML5-Standards. Ungeordnete Listen geben Daten auf dieselbe Weise wie eine geordnete Liste aus Ich sehe keine numerischen Markierungen an der Seite. Stattdessen erhält jedes Element ein kleiner Kreis oder Scheibe und in eine neue Zeile unterteilt. Dieses Symbol kann auch mit der Eigenschaft vom Typ "Listenstil" geändert werden in CSS gefunden.
Unten ist der Beispielcode der ungeordneten Liste:
- Gegenstand 1
- Punkt 2
- Punkt 3
Ungeordnete Listen sind die perfekte Lösung für das Bauen Navigationslinks. Da kannst du leicht Verschachteln Sie ganze Listen innerhalb eines Listenelements es ist ein einfache Angelegenheit, um Unter-Navigationslinks zu erstellen auch. Nach dem Entfernen des Listenstils verbleibt ein leeres Elementelement. Von hier aus können Sie Anker-Links so gestalten, dass sie als Blockelemente auf Ihrer Seite erscheinen und ein Navigationsmenü-Design ausfüllen. Mit etwas jQuery-Code können Sie einen schönen Header für Ihre Website erstellen.
Meistens finden Sie ungeordnete Listen in der Mitte von Webartikeln oder Installationsanweisungen. Beachten Sie das Google und andere Such-Bots verarbeiten Ihren Seiteninhalt nicht anders, also dein SEO sollte nicht beeinflusst werden, unabhängig davon, welchen Auflistungstyp Sie wählen.
Bestellte Listen ()
Wenn Sie einen Datensatz bestellen möchten, können Sie Ihr eigenes Layout-Framework von Grund auf einrichten. Auf diese Weise müssen Sie jede inkrementelle Nummer von Hand hinzufügen, was ermüdend sein kann. Bestellte Listen sind gut für nummerierte Aufgaben in einer Reihe halten ohne schrauben. Die Reihenfolge Ihrer internen Listenelemente () bestimmt, wie die Daten dargestellt werden.
Unten ist der Beispielcode der geordneten Liste:
- Gegenstand 1
- Punkt 2
- Punkt 3
Es ist auch möglich zu Ändern Sie den Zähler von regulären Zahlen in eine Handvoll anderer Optionen. Diese schließen ein alphabetische Beschriftung und römische Zahlen, um ein paar zu nennen. Webdesigner würden geordnete Listen für inhaltsspezifische Listen verwenden. Rezeptdaten, tägliche Aufgaben, Favoriten, oder top / zuletzt angemeldete Benutzer sind nur einige Beispiele. Oft wirst du sehen Blog-Kommentare erstellt anhand von sortierten Listen, um jeden Kommentar in einer nummerierten Reihenfolge zu halten.
Daten-Definitionslisten ()
Definitionslisten werden nicht mehr oft gesehen (nicht als wären sie jemals populär). Früher wurden sie mit Webdesignern gesehen, die komplexe Formate von Links oder Boxinhalten erstellen. Das Datenlisten-Tag (
Unten ist der Beispielcode der Datendefinitionsliste:
- Gegenstand 1
- Beschreibung
- Punkt 2
- Beschreibung
- Punkt 3
- Beschreibung
Mit den neuen HTML5-Spezifikationen wurden jedoch Datenlisten transkribiert. Es gibt keine Unterschiede in der Syntax bei der Verwendung der Elemente. Der Zweck wurde jedoch als aktualisiert Beschreibungsliste, die aus einem oder mehreren Datenbegriffen besteht (), gefolgt von einer oder mehreren Datendefinitionen ().
Ein starkes Beispiel aus dem HTML5-Doktorartikel ist a Metadaten-formatierte Liste. In einem einzigen dl Listenelement würden Sie einen Begriff definieren, wie dein Name, dann jedes weitere Definitions-Tag könnte Daten beschreiben über Sie, möglicherweise Ihr Alter, Ihren Beruf, Ihre aktuelle Stadt usw. Letztendlich Jeder Datensatz mit Schlüssel / Wert-Paaren passt gut in eine Beschreibungsliste. Sie können mehr als einen Datenbegriff in einer Liste verwenden, aber das W3C gibt dies an Jeder Begriff sollte eindeutig sein In der Liste.
Nun, da wir die drei beliebten Listenstile genau festgelegt haben, gehen wir zu einigen Beispielen über! Webdesigner sind in den letzten Jahren mit ihren Listen sehr kreativ geworden. Ich habe 7 meiner Lieblingswebsites unten aufgelistet, mit besonderem Fokus auf deren kreativer Verwendung von Listen.
Einfache ungeordnete Listennavigation
Navigationsmenüs sind mit modernen CSS-Techniken viel einfacher zu erstellen. Deshalb sind ungeordnete Listen und sogar geordnete Listen zu einer populären Option geworden. Eines meiner Lieblingsbeispiele davon erscheint im Social Media-Blog Mashable.
Oben in der Kopfzeile befinden sich zwei Hauptgruppen von Links. 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 schlanken Hover-Stil mit festem Hintergrund und Farbschema erstellt.
Direkt darunter sehen Sie die entsprechenden Navigationslinks. Dieses Navigationsmenü führt zu Blog-Kategorien wie Social Media oder Tech. Beide ungeordneten Listen sind in a enthalten HTML5 Element um alles mit der Vorlage inline zu halten. Die hier hinzugefügten Hover-Effekte zeigen eine abgerundete Ecke um das Unternavigationsmenü. Jeder Link wird als Blockelement angezeigt und nimmt viel Platz im Unternavigationsmenü ein.
Auflisten der Softwarefunktionen
Dies ist möglicherweise eines meiner Lieblingsbeispiele für Stillisten. Webentwickler und Softwareunternehmen verwenden diese in ihren eigenen Webdesigns. Mein Beispiel konzentriert sich auf die Seite der Culture Code's Things, eine To-Do-Listen-App. Sie haben eine gebaut formatierte Gruppe von Elementen und Funktionen Sie können in Sachen finden.
Die ganze Kollektion ist in einem enthalten Bilder werden als hinzugefügt Die Elemente wurden wunderschön zusammengestellt und ich bewundere die Arbeitsmoral von Culture Code sehr. Sie haben bewiesen, dass sie über Jahre hinweg fantastische Designs bieten, insbesondere für Dinge. Wenn Sie sich ein Icon-Verzeichnis wie Icon Finder ansehen, ist es ziemlich einfach, ein Set von Freebies auszuwählen. Von hier aus können Sie ein Design nachahmen und einen ähnlichen Stil in CSS codieren. Wenn Sie sich für ihr Design interessieren, verwendet die Seite "Dinge für iPhone" tatsächlich eine Beschreibungsliste. Jedes Symbol ist als Definitionsbegriff gesetzt und die Beschreibungen werden nach rechts verschoben. Dies ist nicht die empfohlene Methode, um diese Tags zu verwenden, funktioniert jedoch unter bestimmten Umständen gut! WordPress-Benutzer sind mit dem Kategorien- / Markierungssystem sehr vertraut. In den meisten Formen sozialer Medien hat es bisher gut funktioniert, aber es stammt ursprünglich aus der Blogosphäre. Tags eignen sich hervorragend für die Anzeige einiger Nischenartikel zum Thema. Kategorien sind viel breiter und werden verwendet, um den größeren Teil Ihrer Artikel zu erfassen. Das beste Beispiel, das mir einfällt, ist das Smashing Magazine und die Neugestaltung der Homepage. Oben sehen Sie eine Registerkarte mit der Aufschrift “Zeitschrift” mit einem kleinen Tag-Symbol an der Seite. Bewegen Sie den Mauszeiger darüber, um eine verborgene Liste mit Kategorien anzuzeigen, z. B. Codierung, Design, Grafiken usw. Außerdem wird jeder mit einem ausgefallenen CSS3-Hover-Effekt als glänzende Schaltflächen angezeigt. Wenn Sie sich den Code ansehen, werden Sie feststellen, dass sie dieses Feld in den linken Spaltenbereich platziert haben. Es ist eine gegeben Ich war immer ein großer Fan des klassischen Digg-Designs. Es enthielt alles, was Sie von einer Nachrichten-Website mit großartigen sozialen Fähigkeiten erwarten würden. Ein wirklich interessantes Stück zu ihrem alten Design ist das Fußzeilenspalten mit Definitionslisten einrichten. Leider hat die Digg-Crew bereits v4 design live gestartet, aber das Internet ist ein nostalgischer Ort, und mit den Wayback Internet Archives können wir ein älteres Design von Digg ab August 2007 anzeigen. Diese Vorlage enthält viele fantastische Elemente der Benutzeroberfläche Genauer gesagt, konzentrieren wir uns auf den Fußzeilenbereich. Sie werden feststellen, dass jede Spalte tatsächlich in eine Spalte unterteilt ist Datenlistenelement. Diese Spalten sind Als Blöcke anzeigen und mit vordefinierten Breiten nebeneinander schweben. Das Datenausdrücke verhalten sich als Header innerhalb der Liste und erscheinen nur einmal pro Spalte. Meiner Meinung nach ist dies eine viel schönere und sauberere Methode, um Ihre Beschreibungslisten zu erstellen. Es ist möglich, mehr als einen Begriff pro Liste zu verwenden. Dies führt jedoch häufig zu einer Verwirrung Ihres HTML-Codes und Sie können den Code sehr schnell verlieren. Die ersten beiden Spalten enthalten 6-7 Verknüpfungen, die untereinander als Datenbegriffe zur Beschreibung des Headertextes aufgeführt sind, Danach bemerken Sie jedoch, dass sich die Spalten von der Standardformatierung lösen. Zum Beispiel darunter Digg Tools & API es gibt Nur zwei Datendefinitionen. Dies sind eigentlich die 2 Absätze, die einen internen Link und einen Satz enthalten. Mit diesem Markup ist sicherlich nichts falsch, und es ist tatsächlich ein sehr kreatives und nachhaltiges System zum Erstellen von Fußzeilensäulen. Ich bin mir sicher, dass Sie beim Durchsuchen der Archive auf Diggs Seiten viele weitere fantastische Listenbeispiele finden. Listen werden nicht immer nur für Designstile berücksichtigt. Es gibt tatsächlich Zeiten, in denen Inhalt erfordert Listenelemente, um eine tatsächliche Datenliste zu erstellen. Aufgabenlisten sind das perfekte Beispiel für diese Phänomene. Es gibt jedoch keine Unmengen von Task-Managern, die im Web integriert sind, und es ist schwierig, großartige Beispiele zu finden. Flow App ist ein solcher Dienst mit einem schönen Benutzerbildschirm. Wenn Sie Zeit haben, empfehle ich Ihnen, sich für ein kostenloses Konto anzumelden, um der App eine Demo zu geben. Selbst wenn Sie nicht vorhaben zu bezahlen, ist dies immer noch eine sehr lustige Web-App, mit der Sie sich verwirren können, und Sie können sogar einige Inspiration für Ihr Design erhalten. Wenn Sie angemeldet sind, sortiert das Menü unten links Ihre Liste der Listen. Dies sind Aufgaben, die Sie neu anordnen, bearbeiten, markieren und als abgeschlossen prüfen können. Klicken Sie auf die erste Standardliste “Die Grundlagen” Der Inhalt wird im rechten Fensterbereich geöffnet. Hier wird die gesamte Listenstruktur mit einer ungeordneten Liste erstellt. Jedes Element enthält einen ziemlich großen inneren Kontext. Jede Bar, die Sie sehen, geht über Geschenke ein Listeneintrag zum Gesamtwert hinzugefügt Zusammen mit vielen anderen Designerkollegen bin ich ein riesiger Dribbble-Süchtiger. Die Website ist wunderschön aufgebaut und bietet einige der besten Grafikdesigner aus der ganzen Welt. Wenn Sie mit dem Netzwerk nicht vertraut sind, ist Dribbble eine einladende soziale Gemeinschaft von Webdesignern, die Aufnahmen ihrer neuesten Arbeit zeigen. Dinge werden interessant, wenn Sie Ihre Aufmerksamkeit auf den rechten unteren Rand der Seitenleiste richten. Hier haben wir eine geordnete Liste mit der Klasse “Spielerliste“. Es sind Rookies dabei, die die neuesten Designer sind und die sich zuletzt auf der Website angemeldet haben. Aus irgendeinem Grund hat sich der Webentwickler von Dribbble für die Verwendung von geordnete Liste mit jedem Listenelement, das Details zum Benutzer enthält. Der innere Inhalt ist tatsächlich in zwei Segmente aufgeteilt. EIN Es gibt einige fantastische Beispiele und schriftliche Best Practices für die Erstellung der Navigationspfadnavigation. In diesen Menüs wird der angezeigt Sammlung von Unterlinks, die Sie zum Aufrufen der aktuellen Seite durchlaufen haben. In Hongkiat gibt es ein fantastisches Tutorial, das vollständig mit CSS3-Techniken und ungeordneten Listen erstellt wurde. Das Design verwendet Ankerlinks als Blockelemente um das Listenmenü anzuzeigen. Der Ankerlink wird mit einem Hintergrundbild versehen und a abnehmend Schauen Sie sich auch das Beispiel von Google auf einer seiner Support-Seiten an. Dies ist das perfekte Seitenelement, das Sie in Ihre eigene Website integrieren können mehrere verschachtelte Inhaltsseiten. Besucher werden wahrscheinlich versuchen, zu vorherigen Seiten zurückzukehren, ohne ihren Verlauf zu überprüfen. Es gibt nicht viele Alternativen, um eine Liste von Breadcrumb-Links zu erstellen. Sie könnten also eine geordnete Liste verwenden Suchmaschinen-Crawler wissen, dass es eine Reihenfolge für die Menü-Links gibt, Wie bereits erwähnt, wird dies jedoch beim SERPS-Ranking wahrscheinlich keinen großen Unterschied machen. Wenn Sie komplexere Anforderungen an Breadcrumbs haben, z. B. einen Titel / eine Beschreibung für jeden Link, können Sie das Definitionslistenelement besser nutzen. Ohne zu viel ins Detail zu gehen, ist es mein Ziel, ein fantastisches Setup von listenbasierten Oberflächenelementen zu sammeln. Dies ist viel einfacher gesagt als getan - aber das Internet bietet so viele Möglichkeiten zur Auswahl! Im Bereich der HTML-Listen gibt es viel Raum für Wachstum. Wenn Sie sich nach mehr Inspiration sehnen, schauen Sie sich die untenstehende Mini-Galerie mit fantastischen Beispielen an. Ein fantastisches Navigationsmenü, das als Schaltflächenelemente gestaltet ist. Cake Sweet Cake bietet eine schöne Liste von Miniaturbildern mit einigen leckeren Mustern ihrer Bäckerei. Die Cheesemonger Invitational-Website umfasst 2 separate Die Social-Media-Links im unteren Bereich der Website des Threepenny Editors sind alle unter einer Liste zusammengefasst. Es fügt sich perfekt in eine Spalte des Layout-Themes "Hände und Papier" ein. Ein weiteres schönes Beispiel für ein Navigationsmenü mit Bildern und CSS. Sie wissen, wer auf ihrer Website einen schicken Retro-Designeffekt hat. Der untere Teil der Homepage enthält eine kleine geordnete Liste mit Miniaturansichten der neuesten Projektarbeit. Eine ungeordnete Liste für die Anmeldepläne von MediaLoot sieht vielversprechend aus. 365psd bietet täglich eine brandneue Photoshop-Vorlage zum Herunterladen. In ihrer Seitenleiste finden Sie eine Liste von Tags, die in eine ungeordnete Liste integriert sind. Dies sieht perfekt aus in Blogs und Archivseiten, wo sich eine kleine Tag-Liste als angemessen anfühlt. Hoffentlich hat Ihnen diese Galerie mit kreativen Listen im HTML-Stil einige Anregungen für die Gestaltung von Layout-Inhalten gegeben. Es kann schwierig sein, eine konkrete Idee für Ihre Listen auf Webseiten festzulegen, aber Artikellisten sind ein großer Teil des Designprozesses bieten konstruktive Beziehungen zwischen Markup-Tags und Inhalten. Es gibt wahrscheinlich Dutzende anderer fantastischer Listen im Web, und mit der wachsenden Anzahl an Webdesignern werden wir sicherlich feststellen, dass diese Zahl schneller steigt als je zuvor. Wenn Sie von einer großartigen Website mit tollen HTML-Listen wissen, können Sie die Links in unserem Kommentarbereich unten anbieten. Auch wenn Sie einen der oben genannten Stile in Ihre eigene Website einfügen, würden wir uns sehr darüber freuen!. Das stark Stichworte werden für jeden Kopfpunkt verwendet, der in dunklerem Text angezeigt wird, und unmittelbar danach wird die Beschreibung hinzugefügt.Blog-Kategorien und Tags
Anzeige: keine; Stil zu erscheinen ausgeblendet, bis sie ausgelöst werden. Die ungeordnete Liste wird mit jedem Listenelement gesetzt, das einen Anker-Link enthält, aber als Alternative diese Links werden inline angezeigt und auf zwei Zeilen aufgeteilt für den benötigten Platz.Fußzeilenspalten mit Definitionslisten
Aufgaben und Aufgaben
Dribbble-Spielerliste
Überschrift mit der Klasse “vcard” enthält den Namen des Benutzers und den Avatar. Beide sind mit ihrem persönlichen Dribbble-Profil und einigen Kontostatistiken verknüpft. Horizontale Paniermehl
z-index Eigenschaft, so dass die Pfeile über jedem gleichzeitigen Element angezeigt werden.
Schönere Listen-basierte Benutzeroberfläche
6wunderkinder
Kuchen süßer Kuchen
Käsehändler Einladung
Der Dreigroschen-Editor
Le Tipi
Sie wissen, wer
MediaLoot
365psd
Fazit
