Suurepärane HTML-nimekirjade kasutamine veebidisainis

Kogu Internetist leiate hästi kavandatud nimekirjad. Disainerid on neid kasutanud aastakümneid koordineerib lehekülje teavet ja paigutusi, ja tänapäeva veebis näete, kuidas veebidisainerid loendeid kasutavad. Nende hulka kuuluvad navigeerimismenüüd, profiili lingid, arhiivid, ülesanded / kontrollnimekirjad ja muud kasutusalad!

Selles postituses tutvustan erinevaid HTML-nimekirju, mille näpunäiteid on nende kujundamisel, eriti kuidas seda teha lisage oma loendisse unikaalne serv. Samuti võtan teid läbi mõned näited fantastiliste nimekirjadega veebisaitidest ja lõpuks saate nimekirja veebisaitidest, millel on kenasti loodud HTML-nimekirjad. Ei ole enam kahtlust, kuidas muuta oma tavapärased nimekirjad ainulaadseks, ja alustame neist täna kõige paremini!

Nimekirja elemendid

Veebidisainerid hüppavad pidevalt ühest bandwagonist teise, põhjustades seeläbi veebisaidi stiilide muutumise aja jooksul, kuid nimekirjad on ajaproovile jõudnud ja võivad olla veebi tulevaste uuenduste juures väga head..

Enne näidete kontrollimist tahan HTML-nimekirjadega hõlmata mõned punktid. Seal on vähe erinevaid nimekirju, mida saate oma disainitöödes kasutada. Enamik veebidisainerid keskenduvad Järjestamata nimekirjad mis avatakse a

silti, kuid on veel kaks vähem populaarset varianti: Tellitud nimekirjad ja Andmete määratlused. Ma olen allpool üksikasjalikumalt tutvunud.

Järjestamata nimekirjad (

)

Võib-olla üks HTML4 / HTML5 standardite kõige kasutatavamaid elemente. Korraldamata nimekirjad edastavad andmeid samamoodi nagu tellitud nimekiri ei näe küljel ühtegi numbrilist markerit. Selle asemel antakse igale elemendile a väike ring või ketas ja jaotatud uuele reale. See ikoon saab muuta ka loendistiilis tüüpi omadustega leitud CSS-is.

Allpool on järjestamata nimekirja näidiskood:

 
 
Punkt 1
 
Punkt 2
 
Punkt 3
 
 

Korraldamata nimekirjad on ehitamiseks ideaalne vahend navigatsioonilinke. Kuna saate kergesti kogu nimekirjade pesa see on alamnavigatsioonilinkide loomine on lihtne samuti. Pärast loendistiili eemaldamist jäetakse sulle tühi element. Siit saate kujundada ankurlinke, et kuvada oma lehel plokkelemendina, täites seega navigatsioonimenüü kujunduse ja mõne jQuery koodi abil saate oma saidile kokku panna ilusa päise.

Kõige sagedamini leiate veebilehtede või installijuhiste keskel järjestamata nimekirjad. Pange tähele Google ja teised otsingurobotid ei töödelda teie lehe sisu teisiti, nii et teie SEO-i ei tohiks mõjutada, olenemata sellest, millist tüüpi kirjet valida.

Tellitud nimekirjad (

)

Kui teil on vaja tellida kogum andmeid, on võimalik luua oma paigutusraamistik nullist, kuid sel viisil peate lisama iga juurdekasvu numbri käsitsi, mis võib olla väsitav. Tellitud nimekirjad on suurepärased nummerdatud ülesannete järjepidevus ilma kruvideta. Sisemise loendiüksuste järjekord (

• ) dikteerib, kuidas andmeid esitatakse.

  Allpool on tellitud nimekirja näide:

   
   
  Punkt 1
   
  Punkt 2
   
  Punkt 3
   
   

  Samuti on võimalik muutke loendurit tavapärastest numbritest mõne teise valikuni. Need sisaldavad tähestikulised tähed ja rooma numbrid, mõne nime nimetada. Veebidisainerid kasutaksid sisupõhiste nimekirjade tellitud nimekirja. Retseptiandmed, igapäevased ülesanded, lemmikud, või top / hiljuti sisse logitud kasutajad on vaid mõned näited. Sageli näete blogi kommentaarid ehitatud kasutades tellitud nimekirju, et iga kommentaar oleks nummerdatud.

  Andmete määratlemise loendid (

  )

  Määratluste nimekirju enam ei näe (mitte nagu nad olid kunagi populaarsed). Neid kasutati veebidisainerite poolt, luues keerukaid linkide või kasti sisu vorme. The andmete loendi silt (

  ) Kodeerijad mõistavad neid sageli valesti. HTML4.01-s kasutati spetsiifiliste andmete nimekirju paarikaupa nende kirjeldustega. Neid nimetati definitsiooniloenditeks.

  Allpool on toodud andmefailide loendi kood:

   
   
  Punkt 1
   
  Kirjeldus
   
  Punkt 2
   
  Kirjeldus
   
  Punkt 3
   
  Kirjeldus
   
   

  Uute HTML5-spetsifikatsioonidega on andmeloenditele antud transkriptsioon. Elementide kasutamisel pole süntaksiga mingeid erinevusi, kuid nende eesmärk on uuendatud kui a kirjelduse loend, mis koosneb ühest või mitmest \ t

  ), millele järgneb üks või mitu andmete määratlust (

  ).

  Tugev näide HTML5 arsti artiklist on a metaandmete vormindatud loend. Toas üks dl loendielement, mida soovite määratleda mõiste, näiteks teie nimi, seejärel iga järgmine määratluse silt võiks kirjeldada andmeid sinust, võib-olla teie vanusest, ametist, praegusest linnast jne. Lõppkokkuvõttes ükskõik milline võtmete / väärtuste paaridega seotud andmete kogum sobib hästi kirjelduste loendisse. Loendis saab kasutada rohkem kui ühte andmesõna, kuid W3C kinnitab seda iga mõiste peaks olema unikaalne loendis.

  Nüüd, kui oleme 3 populaarse nimekirjastiili löödud, liigume edasi mõne näite juurde! Veebidisainerid on viimaste aastate nimekirjadega väga loomingulised. Olen katalooginud 7 minu lemmikveebisaiti, pöörates erilist tähelepanu nende loovale kasutamisele.

  Lihtne korrastamata nimekirja navigeerimine

  Navigeerimismenüüd on tänapäevaste CSS-tehnikate abil palju lihtsam ehitada. Seetõttu on järjestatud nimekirjad ja isegi tellitud nimekirjad muutunud populaarseks. Üks minu lemmiknäiteid ilmub sotsiaalmeedia blogis Mashable.

  

  Oma päise ülaosas näete 2 peamist linkide komplekti. Otse oma logo ülaosas on väike, järjestamata nimekiri, mis sisaldab kogukonna lingid, nagu Top Stories, Trending Topics ja People. Disainer on loonud stiilse hoverstiili, millel on tugev taust ja värviskeem.

  Otse selle all näete nende alamnavigatsiooni linke. See navigeerimismenüü viib blogi kategooriatesse, nagu näiteks sotsiaalmeedia või tehniline. Mõlemad järjestamata nimekirjad sisalduvad a HTML5