Strålende brug af HTML-lister i webdesign

Du kan finde veldesignede lister over hele internettet. Designere har brugt dem i årtier til koordinere sideoplysninger og layouter, og i dagens web kan du se den store kreativitet i, hvordan webdesignere bruger lister. Disse omfatter navigeringsmenuer, profilforbindelser, arkiver, opgaver / checklister og tonsvis af andre anvendelser!

I dette indlæg vil jeg introducere forskellige typer HTML-lister med tips om design af dem, især om hvordan man skal Tilføj en unik kant til din liste. Også jeg tager dig gennem et par eksempler på hjemmesider med fantastiske listedesigner, og i sidste ende får du en liste over hjemmesider med pænt designet HTML-lister. Der er ingen tvivl om, hvordan du får dine plain looking lister til at se unikke ud, og lad os begynde at få mest ud af dem i dag!

Listen Elements

Webdesignere springer konstant fra en bandwagon til den næste, hvilket medfører, at webstedsformaterne ændrer sig over tid, men lister har stået tidstesten og kan meget vel være i fremtiden for innovation på World Wide Web.

Før jeg tjekker eksemplerne, vil jeg dække et par punkter med HTML-lister. Der er få forskellige typer lister, som du kan bruge i dit eget designarbejde. De fleste webdesignere fokuserer på Uordnede lister som åbnes med a

tag, men der er også to andre mindre populære variationer: Ordnede lister og Datadefinitioner. Jeg har gået ind i yderligere detaljer nedenfor.

Uordnede lister (

)

Muligvis et af de mest brugte elementer i HTML4 / HTML5 standarder. Uordnede lister udsender data på samme måde som en ordnet liste, dog du vil ikke se nogen numeriske markører til siden. I stedet gives hver vare en lille cirkel eller disk og opdelt på en ny linje. Dette ikon kan også ændres med egenskaben i listestil-typen fundet i CSS.

Nedenfor er eksemplet kode for den uordnede liste:

 
 
Punkt 1
 
Punkt 2
 
Punkt 3
 
 

Uordnede lister er det perfekte middel til at opbygge navigationslinks. Da du nemt kan nest hele lister inden for enhver liste element Det er en simpelt spørgsmål at skabe undernavigationslinks såvel. Når du har fjernet listestilen, bliver du efterladt med et tomt elementelement. Herfra kan du stile ankerforbindelser for at fremstå som blokelementer på din side og dermed udfylde et navigationsmenu design, og med nogle jQuery-kode kan du sammensætte en smuk header til dit websted.

Mest almindeligt finder du uordnede lister midt i webartikler eller installationsanvisninger. Vær opmærksom på det Google og andre søgebotser behandler ikke dit sideindhold anderledes, så din SEO bør ikke påvirkes uanset hvilken noteringstype du vælger.

Ordnede lister (

)

Når du har brug for at bestille et sæt data, er det muligt at oprette din egen layoutramme fra bunden, men på denne måde skal du tilføje hvert inkrementalt tal for hånden, hvilket kan være trættende. Ordnede lister er gode til holde nummererede opgaver i kø uden skruer. Ordren for dine interne lister (

• ) vil diktere, hvordan dataene præsenteres.

  Nedenfor er eksemplet kode på den ordnede liste:

   
   
  Punkt 1
   
  Punkt 2
   
  Punkt 3
   
   

  Det er også muligt at skift tælleren fra almindelige tal til en håndfuld andre muligheder. Disse omfatter alfabetisk bogstaver og romertal, for at nævne et par stykker. Webdesignere ville bruge ordnet liste til indholdsspecifikke lister. Opskrift data, daglige opgaver, favoritter, eller top / seneste logget ind brugere er blot nogle få eksempler. Ofte vil du se blog kommentarer bygget ved hjælp af ordnede lister for at holde hver kommentar i en nummereret rækkefølge.

  Data Definition Lister (

  )

  Definition lister ses ikke meget ofte længere (ikke som de var nogensinde populære). De plejede at ses hos webdesignere, der skabte komplekse formater af links eller indhold af boks. Det dataliste tag (

  ) er ofte misforstået af kodere i dag. I HTML4.01 var specs datalister brugt til par elementer med deres beskrivelser. Disse blev kaldt definitionslister.

  Nedenfor er eksemplet kode for data definition listen:

   
   
  Punkt 1
   
  Beskrivelse
   
  Punkt 2
   
  Beskrivelse
   
  Punkt 3
   
  Beskrivelse
   
   

  Men med de nye HTML5-specifikationer er datalister blevet givet en transkription. Der er ingen forskelle med syntaks i, hvordan du bruger elementerne, men deres formål er blevet opdateret som en Beskrivelsesliste, der består af et eller flere data vilkår (

  ) efterfulgt af en eller flere datadefinitioner (

  ).

  Et stærkt eksempel fra HTML5-doktorens artikel er en metadataformateret liste. Inde i en enkelt dl liste element du ville definere et udtryk, som dit navn, derefter hver efterfølgende Definition-tag kan beskrive data om dig, muligvis din alder, besættelse, nuværende by / by osv. i sidste ende ethvert sæt data med nøgle / værdi par passer pænt i en beskrivelse liste. Du kan bruge mere end et dataterm på en liste, men W3C angiver det hvert udtryk skal være unikt i listen.

  Nu hvor vi har spikret ned de 3 populære listestilarter, lad os gå videre til nogle eksempler! Webdesignere er blevet meget kreative med deres lister i de seneste år. Jeg har katalogiseret 7 af mine foretrukne hjemmesider nedenfor med specifikt fokus på deres kreative brug af lister.

  Enkel uordnet liste navigation

  Navigationsmenuer er meget enklere at bygge med moderne CSS-teknikker. Det er derfor, at uordnede lister og endda bestilte lister er blevet en populær mulighed. Et af mine yndlingseksempler herpå vises på social media blog, Mashable.

  

  Mod toppen af ​​deres overskrift bemærker du 2 hovedsæt af links. Direkte til toppen af ​​deres logo er en lille uordnet liste, der indeholder fællesskabslink som Top Stories, Trending Topics og People. Designeren har lavet en slank svingstil, der har en solid baggrund og farveskema.

  Lige under dette ser du deres undernavigationslinks. Denne navigationsmenu fører til blogkategorier som Social Media eller Tech. Begge uordnede lister er indeholdt i a HTML5