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 for å 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 med andre bruksområder!

I dette innlegget vil jeg introdusere forskjellige typer HTML-lister, med tips om hvordan du designer dem, spesielt om hvordan du legger 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, og dermed får nettstedstypene forandre seg over tid, men lister har stått tidstesten og kan veldig godt være rundt i fremtidig innovasjon av World Wide Web.

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

tag, men det finnes også to andre mindre populære variasjoner: Bestilte lister og datadefinisjoner . Jeg har gått inn i ytterligere detaljer nedenfor.

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 på siden . I stedet blir hvert element gitt en liten sirkel eller plate og brutt ned på en ny linje. Dette ikonet kan også endres med egenskapen for listeformat-typen som finnes i CSS.

Nedenfor er eksempelkoden til den uordnede listen:

Punkt 1
Punkt 2
Punkt 3

Uordnede lister er det perfekte middelet for å bygge navigasjonsforbindelser . Siden du lett kan nest hele lister innenfor et hvilket som helst listepost, er det enkelt å lage undernavigasjonslenkene også. Etter at du har fjernet listestilen, blir du igjen med et tomt elementelement. Herfra kan du stylere 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 header for nettstedet ditt.

Vanligvis finner du uordnede lister i midten av webartikler eller installasjonsinstruksjoner. Vær oppmerksom på at Google og andre søkebots ikke behandler innholdet på sidene dine noe annerledes, slik at SEO ikke bør 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 oppsettramme 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 å bytte telleren fra vanlige numre til en rekke andre alternativer . Disse inkluderer alfabetisk bokstaver og romerske tall, for å nevne noen. Webdesignere vil bruke bestilt liste for innholdsspesifikke lister. Oppskriftdata, daglige oppgaver, favoritter, eller topp / nyere 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 blir ikke sett veldig ofte lenger (ikke som de var noen gang populære). De pleide å bli sett hos webdesignere som skaper komplekse formater av koblinger eller boksinnhold. Datalisten merket (

  ) blir ofte misforstått av kodere i dag. I HTML4.01 ble spesifikasjonslister brukt til å sammenkoble elementer med beskrivelsene deres . 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 en metadataformatert liste . Innenfor ett enkelt dl listelement vil du definere et begrep, for eksempel navnet ditt, da kan hver etterfølgende definisjonskode beskrive data om deg, muligens alder, yrke, nåværende by / by osv. Til slutt et hvilket som helst 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 at hvert uttrykk skal 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 bestilt 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 logoen er en liten, uordnet liste som inneholder fellesskapsforbindelser som Topp Stories, Trending Topics og People. Designeren har skapt en slank svingstil 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 en HTML5