Strålende bruk av HTML-lister i webdesign

Du kan finne godt utformede lister over hele Internett. Designere har brukt dem i flere tiår til koordinere sideinformasjon og layouter, og i dagens web kan du se den store kreativiteten i hvordan webdesignere bruker lister. Disse inkluderer navigasjonsmenyer, profilkoblinger, arkiver, oppgaver / sjekklister og tonnevis av andre bruksområder!

I dette innlegget vil jeg introdusere forskjellige typer HTML-lister, med tips om hvordan du designer dem, spesielt om hvordan du skal legg til en unik kant på listen din. Også jeg tar deg gjennom noen få eksempler på nettsteder med fantastiske liste design, og til slutt får du en liste over nettsteder med pent utformede HTML-lister. Det er ingen tvil om hvordan du får dine lette lister å se unike ut, og la oss begynne å få mest mulig ut av dem i dag!

The Listing Elements

Webdesignere hopper stadig fra en båndvogn til den neste, noe som gjør at nettstedstypene endres over tid, men lister har stått tidstesten og kan veldig godt være i fremtiden for innovasjon av World Wide Web.

Før du sjekker ut eksemplene, vil jeg dekke noen få punkter med HTML-lister. Det finnes få forskjellige typer lister som du kan bruke i ditt eget designarbeid. De fleste webdesignere fokuserer på Uordnede lister som åpnes med a

Bestilte lister

Datadefinisjoner

Uordnede lister (
)

Muligens en av de mest brukte elementene i HTML4 / HTML5 standarder. Uordnede lister vil utdata data på samme måte som en bestilt liste, men du vil ikke se noen numeriske markører til siden. I stedet blir hvert element gitt a liten sirkel eller plate og brutt ned på en ny linje. Dette ikonet kan også endres med egenskapen listestil-type funnet i CSS.

Nedenfor er eksempelkoden til den uordnede listen:

  Punkt 1
 Punkt 2
 Punkt 3

Uordnede lister er det perfekte middel for å bygge navigasjonskoblinger. Siden du enkelt kan nest hele lister innenfor noen liste element det er en Enkelt å lage undernavigasjonslinks også. Etter at du har fjernet listestilen, blir du igjen med et tomt elementelement. Herfra kan du stile ankerforbindelser for å vises som blokkelementer på siden din, og dermed fylle ut et navigasjonsmeny-design, og med noen jQuery-kode kan du sette sammen en vakker overskrift for nettstedet ditt.

Vanligvis finner du uordnede lister i midten av webartikler eller installasjonsinstruksjoner. Legg merke til det Google og andre søkebotser behandler ikke sidens innhold noe annerledes, så din SEO bør ikke påvirkes uansett hvilken oppføringstype du velger.

Bestilte lister (
)

Når du trenger å bestille et sett med data, er det mulig å sette opp ditt eget layoutramme fra bunnen av, men på denne måten må du legge til hvert inkrementalt tall for hånden, noe som kan være kjedelig. Bestilte lister er gode for holde nummererte oppgaver i kø uten noen skruer. Ordren til dine interne listeposter (

) vil diktere hvordan dataene presenteres.

Nedenfor er eksempelkoden til den bestilte listen:
```
  Punkt 1
 Punkt 2
 Punkt 3
 
 
```
Det er også mulig å endre disken fra vanlige tall til en håndfull andre alternativer. Disse inkluderer alfabetisk bokstaver og romertall, for å nevne noen. Webdesignere ville bruke bestilt liste for innholdsspesifikke lister. Oppskrift data, daglige gjøremål, favoritter, eller Topp / Siste innloggede brukere er bare noen få eksempler. Ofte vil du se bloggkommentarer bygget ved hjelp av bestilte lister for å holde hver kommentar i en nummerert rekkefølge.

Data Definisjonslister (
)

Definisjonslister er ikke sett veldig ofte lenger (ikke som de var noen gang populære). De pleide å bli sett med webdesignere som skaper komplekse formater av koblinger eller boksinnhold. De dataliste-tag (
) blir ofte misforstått av kodere i dag. I HTML4.01 var spesifikasjoner datalistene vant til par elementer med sine beskrivelser. Disse ble kalt definisjonslister.

Nedenfor er eksempelkoden til datadefinisjonslisten:
```
  Punkt 1
 Beskrivelse
 Punkt 2
 Beskrivelse
 Punkt 3
 Beskrivelse
 
 
```
Men med de nye HTML5-spesifikasjonene har datalistene fått en transkripsjon. Det er ingen forskjeller med syntaks i hvordan du bruker elementene, men deres formål har blitt oppdatert som en Beskrivelsesliste som består av ett eller flere datavilkår (
) etterfulgt av en eller flere datadefinisjoner (
).

Et godt eksempel fra HTML5-doktorens artikkel er a metadataformatert liste. Inne i en enkelt dl liste element du ville definer et begrep, for eksempel ditt navn, deretter hver påfølgende definisjonskoden kan beskrive data om deg, muligens din alder, yrke, nåværende by / by, etc. Til syvende og sist ethvert sett med data med nøkkel / verdi par passer pent i en beskrivelse liste. Du kan bruke mer enn ett datasett i en liste, men W3C sier det hvert begrep bør være unikt i listen.

Nå som vi har spikret ned de 3 populære listestilene, la oss gå videre til noen eksempler! Webdesignere har blitt veldig kreative med sine lister over de siste årene. Jeg har katalogisert 7 av mine favorittwebsider nedenfor med spesielt fokus på deres kreative bruk av lister.

Enkel uordnet liste navigasjon

Navigasjonsmenyer er mye enklere å bygge med moderne CSS-teknikker. Dette er grunnen til at uordnede lister og til og med bestilte lister har blitt et populært alternativ. En av mine favoritteksempler på dette vises på bloggen for sosiale medier, Mashable.

Mot toppen av toppteksten vil du legge merke til 2 hoved sett med lenker. Direkte til toppen av logoet er en liten, uordnet liste som inneholder fellesskapsforbindelser som Topp Stories, Trending Topics og People. Designeren har skapt en elegant hover-stil som har en solid bakgrunn og fargevalg.

Rett under dette ser du deres undernavigasjonslenk. Denne navigasjonsmenyen fører til bloggkategorier som Social Media eller Tech. Begge uordnede lister finnes i a HTML5
element å holde alt i tråd med malen. Hover-effektene som er lagt til her, viser et avrundet hjørne rundt undernavigasjonsmenyen. Hver lenke vises som et blokkelement og tar opp mye plass på undernavigasjonsmenyen.

Listing Software Features

Dette er muligens et av mine favoritteksempler på stylede lister. Webutviklere og programvareselskaper bruker disse i sin egen bedriftens webdesign. Mitt eksempel fokuserer på siden av Culture Code's Things, en gjøremålsliste app. De har bygget en formatert sett med elementer og funksjoner du kan finne i ting.

Hele samlingen finnes inne i a
tag som inneholder både venstre og høyre kolonner. Innsiden er flytende
elementer med venstre og høyre klasse, henholdsvis. Innholdet på listen elementet er faktisk brutt inn i segmenter og CSS brukes til å justere alt.

Bilder legges til som tags direkte inn i koden og posisjonert i forhold til deres inneholdende
. De sterk tags brukes til hvert av topptekstpunktene som vises i mørkere tekst, og umiddelbart etter dette er beskrivelsen lagt til.

Elementene ble satt sammen vakkert og jeg beundrer i stor grad Kultur Codes arbeidsmoral. De har vist seg å tilby fantastiske design over år, spesielt for ting. Hvis du sjekker ut et ikonkatalog som Icon Finder, er det ganske enkelt å plukke ut et sett med freebie, og herfra kan du mockup et design og kode en lignende listeliste i CSS.

Hvis du er interessert videre i deres design, bruker Things for iPhone-siden faktisk en beskrivelsesliste. Hvert ikon er sett som en definisjonsterm og beskrivelsene er plassert til høyre. Dette er ikke den anbefalte måten å bruke disse kodene på, men det fungerer bra under noen omstendigheter!

Blogkategorier og Tags

WordPress-brukere er veldig kjent med kategoriene / tags-systemet. Det har fungert bra i de fleste former for sosiale medier så langt, men det er opprinnelig hentet fra blogosfæren. Etiketter er flotte for å vise noen nisjeartikler relatert til emnet. Kategorier er mye bredere og pleide å omfatte større deler av artiklene dine.

Det beste eksemplet jeg kan tenke på er Smashing Magazine og deres nye hjemmeside re-design. På toppen vil du legge merke til en fane som er merket “Magasin” med et lite tagikon som henger av siden. Hold deg over dette for å vise en skjult liste over kategorier som koding, design, grafikk, osv. Hver er også utformet med en fancy CSS3 svever effekt som vises som glanset knapper.

Ser du på koden vil du legge merke til at de har plassert denne boksen i venstre kolonneområde. Det er gitt a skjerm: ingen; stil til vises skjult til utløst. Den uordnede listen er satt med hver liste element som inneholder en ankerlink, men som alternativ disse koblingene vises inline og brøt på to linjer for nødvendig plass.

Footer-kolonner med definisjonslister

Jeg var alltid en stor fan av det klassiske Digg-designet. Den presenterte alt du kunne forvente fra et nyhetsnettsted med gode sosiale evner. En virkelig interessant brikke til deres gamle design er oppsett av bunntekolonner ved hjelp av definisjonslister.

Dessverre har Digg crew allerede lansert v4 design live, men Internett er et nostalgisk sted og med Wayback Internet Archives kan vi trekke opp en eldre design av Digg fra august 2007. Denne malen inneholder mange fantastiske brukergrensesnittelementer, men Mer spesifikt la oss fokusere på fotfeltet. Du vil legge merke til at hver kolonne faktisk er brutt inn i en datalisteelement. Disse kolonnene er satt til å vise som blokker og flyter ved siden av hverandre med forhåndsdefinerte bredder.

De Datavilkårene oppfører seg som overskrifter innenfor listen og vises bare en gang per kolonne. Etter min mening er dette en mye finere og renere måte å bygge beskrivelseslister på. Det er mulig å bruke mer enn ett begrep per liste, men dette ødelegger ofte HTML-en din, og du kan miste koden veldig raskt. De to første kolonnene inneholder 6-7 lenker som er oppført under hverandre som datavilkår for å beskrive toppteksten, men etter dette vil du legge merke til at kolonner brytes bort fra standardformateringen.

For eksempel, under Digg Tools & API det er bare to datadefinisjoner. Disse er faktisk de to avsnittene som inneholder en intern lenke og en setning. Det er absolutt ingenting galt med dette oppslaget, og det er faktisk et veldig kreativt og bærekraftig system for å bygge bunntekstkolonner. Jeg er sikker på at du surfer på arkene til Diggs sider, og du finner mange flere fantastiske eksempler på lister.

Oppgaver og To-dos

Lister er ikke alltid bare innlemmet for design stiler. Det er faktisk tider hvor innhold krever listeposter for å danne en faktisk liste over data. Tøkslister er det perfekte eksempel på disse fenomenene. Men det er ikke massevis av oppgavebehandlere bygget på nettet, så det er vanskelig å finne gode eksempler.

Flow App er en slik tjeneste med et vakkert brukerpanel. Hvis du har tiden jeg foreslår, melde meg på en gratis konto for å gi appen en demonstrasjon. Selv om du ikke har tenkt på å betale, er det fortsatt en veldig morsom webapp å rote rundt med, og du kan til og med trekke ut litt designinspirasjon.

Hvis du er logget inn, sorterer den nederste venstremenyen din samling lister. Dette er oppgaver som du kan omorganisere, redigere, merke og sjekke som fullført. Klikk på den første standardlisten “Det grunnleggende” vil åpne innhold i høyre rute, her er hele listestrukturen bygd med en uordnet liste.

Hvert element inneholder en ganske stor mengde indre kontekst. Hver stolpe du ser går over gaver en liste element lagt til det totale
element. Det er mange interne objekter som et redigeringsikon, en ferdiggjøringsboks, et flagg og et søppelikon også. Også i sidemenyen kobles under “Fokus” du vil legge merke til konstruerte gjenstander satt til en uordnet liste. Det ser fantastisk ut for sin enkelhet.

Dribbble Players List

Sammen med mange andre designere er jeg en stor dribbbleavhengige. Nettstedet er bygget vakkert, og det har noen av de beste grafiske designere fra hele verden. Hvis du ikke er kjent med nettverket, er Dribbble et invitasjonssamfunn for webdesignere som deler bilder av deres nyeste arbeid.

Ting blir interessante hvis du gjør oppmerksomheten til nederst til høyre i sidebarområdet. Her har vi en bestilt liste med klassen “Spillerne-liste“. Den har nybegynnere som er de nyeste designerne som har fått invitasjoner og som har meldt seg inn på nettsiden sist. Uansett grunn har Dribbles webutvikler valgt å bruke en bestilt liste med hver liste element som inneholder detaljer om brukeren.

Innholdet er faktisk oppdelt i to segmenter. EN
Flytende til høyre holder følg / ufølge linken hvis du er logget inn. Det alternative elementet viser en
header med klassen “vcard” inneholder brukerens navn og avatar. Disse er begge knyttet til deres personlige Dribbble-profil, sammen med noen kontostatistikker.

Horisontale brødsmuler

Det er noen fantastiske eksempler og skriftlig beste praksis for å bygge breadcrumb navigering. Disse menyene viser synlig samling av delkoblinger du har krysset for å nå den nåværende siden. Vi har en fantastisk breadcrumbs opplæringsprogrammet på Hongkiat bygget fullt ut med CSS3 teknikker og uordnede lister.

Designet bruker ankerforbindelser som blokkelementene for å vise listemenyen. Ankerlinken er gitt et bakgrunnsbilde og a forsvinnende z-indeks eiendom slik at pilene vil vises på toppen av hvert samtidige element.

Se også Googles eksempel på en av deres støttesider. Dette er det perfekte sidenelementet til å innlemme i ditt eget nettsted hvis du har flere nestede sider med innhold. Besøkende vil sannsynligvis se etter å komme tilbake til tidligere sider uten å sjekke historien deres.

Det er ikke så mange alternativer for å lage en liste over breadcrumb-linker. Du kan bruke en bestilt liste så søkemotor crawlere forstår at det er en ordre til menykoblingene, men som sagt før dette sannsynligvis ikke vil gjøre for mye av en forskjell når det kommer til rangering i SERPS. Hvis du har mer komplekse behov for brødsmuler som en tittel / beskrivelse for hver lenke, kan du bedre bruke definisjonslisteelementet.

Mer vakker listebasert brukergrensesnitt

Uten å gå for mye i detalj er det mitt mål å samle et fantastisk oppsett av listebaserte grensesnittelementer. Dette er mye enklere sagt enn gjort - men Internett har så mange muligheter å velge mellom! Det er god plass for vekst i riket av HTML-lister. Hvis du dør for mer inspirasjon, sjekk ut mini galleriet nedenfor med noen fantastiske eksempler.

6wunderkinder

En fantastisk navigasjonsmeny utformet som knappelementer.

Cake Sweet Cake

Cake Sweet Cake har en vakker liste over miniatyrbilder som inneholder noen deilige prøver av deres bakeriverk.

Cheesemonger Invitational

Cheesemonger Invitational-nettstedet har 2 separate
elementer som flyter for å opprette en navigasjonsmeny. Det ser veldig pent ut i tråd med deres sentrert logotype.

The Threepenny Editor

De sosiale medier koblingene på bunnen av Threepenny Editor nettsted er alle laget under en liste. Den passer perfekt inn i en kolonne av deres hånd-og-papir layout tema.

Le Tipi

Et annet flott eksempel på navigasjonsmenyen utformet med bilder og CSS.

Du vet hvem

Du vet hvem har en fancy retro design effekt på deres hjemmeside. Den nederste delen av hjemmesiden har en liten bestilt liste som inneholder miniatyrer av deres nyeste prosjektarbeid.

MediaLoot

En uordnet liste laget for MediaLots registreringsplaner, ser lovende ut.

365psd

365psd tilbyr en helt ny Photoshop-mal for nedlasting hver dag. I sidebjellet finner du en liste over tagger som er bygd inn i en uordnet liste. Dette ser perfekt ut i blogger og arkivsider der en liten tagliste føles riktig.

Konklusjon

Forhåpentligvis har dette galleriet av kreative HTML-stil lister gitt deg litt inspirasjon for utforming av layoutinnhold. Det kan være vanskelig å spikre ned en konkret ide for lister på nettsider, men varelister er en stor del av designprosessen og tilby konstruktive relasjoner mellom merketiketter og innhold.

Det finnes trolig dusinvis av andre fantastiske lister rundt nettet, og med den økende mengden webdesignere tilgjengelig, ser vi sikkert at dette nummeret øker raskere enn noensinne. Hvis du vet om noen gode nettsider med kjempebra HTML-lister, kan du gjerne tilby linkene i kommentarseksjonen nedenfor. Også hvis du legger til noen av stilene som er oppført ovenfor i ditt eget nettsted, vil vi gjerne sjekke det ut!
Ta med Office 2003-menyer Tilbake til 2010 med UBitMenu

Ta med Windows 7 Start-menyen til Windows 10 med Classic Shell

Lys opp Firefox for helligdager