Briljantno korištenje HTML popisa u web dizajnu

Možete pronaći dobro osmišljene popise diljem interneta. Dizajneri ih koriste desetljećima koordinirati informacije o stranicama i izgledu, iu današnjem webu možete vidjeti veliku kreativnost u tome kako web dizajneri koriste popise. To uključuje navigacijske izbornike, profile veze, arhive, zadatke / kontrolne popise i tona drugih namjena!

U ovom postu predstavit ću različite vrste HTML popisa, s savjetima o njihovom oblikovanju, osobito o tome kako dodajte jedinstveni rub popisu. Također ću vas voditi kroz nekoliko primjera web-mjesta s fantastičnim dizajnom popisa i na kraju ćete dobiti popis web-mjesta s lijepo dizajniranim HTML popisima. Nema više sumnje o tome kako napraviti svoje popise izgleda jedinstveno, i počnimo iz njih izvući najviše!

Elementi unosa

Web dizajneri konstantno skaču iz jedne bandwagon na sljedeću, uzrokujući time mijenjanje stilova web stranica s vremenom, ali popisi su izdržali test vremena i mogu biti dobro u budućim inovacijama World Wide Weba.

Prije provjere primjera želim pokriti nekoliko točaka pomoću HTML popisa. Postoji nekoliko različitih vrsta popisa koje možete koristiti u vlastitom dizajnerskom radu. Većina web dizajnera se fokusira na Neuređeni popisi koje se otvaraju s

ali postoje i dvije manje popularne varijacije: Uređeni popisi i Definicije podataka. U nastavku sam pogledao više pojedinosti.

Neuređeni popisi (

)

Možda jedan od najčešće korištenih elemenata u HTML4 / HTML5 standardima. Neuređeni popisi će ispisati podatke na isti način kao i naručeni popis, međutim vi neće vidjeti numeričke oznake na stranu. Umjesto toga, svaka se stavka daje a mali krug ili disk i oborio na novu liniju. Ova ikona Također se može promijeniti svojstvo tipa stila popisa pronađeno u CSS-u.

U nastavku je primjer koda neuređenog popisa:

 
 
Stavka 1
 
Točka 2
 
Tačka 3
 
 

Neuredni popisi savršen su lijek za izgradnju navigacijske veze. Budući da lako možete stavite cijeli popis u bilo koju stavku popisa to je jednostavno stvar za stvaranje pod-navigacijskih veza također. Nakon uklanjanja stila popisa ostat će vam prazan element stavke. Odavde možete oblikovati sidrene veze kako bi se pojavljivale kao elementi bloka na vašoj stranici, ispunjavajući tako dizajn navigacijskog izbornika, a uz neki jQuery kôd možete sastaviti prekrasno zaglavlje za svoju web-lokaciju.

Najčešće ćete pronaći neuredne popise usred članaka na webu ili uputa za instalaciju. Obratite pozornost na to Google i ostali roboti za pretraživanje ne obrađuju sadržaj Vaše stranice na drugačiji način, tako da vaš SEO se ne smije utjecati bez obzira na vrstu popisa koji odaberete.

Naručeni popisi (

)

Kada trebate naručiti skup podataka moguće je postaviti vlastiti okvir rasporeda od nule, ali na taj ćete način morati ručno dodati svaki povećani broj koji može biti zamoran. Naručeni popisi su izvrsni čuvanje numeriranih zadataka u redu bez ikakvih upletanja. Redoslijed internih stavki popisa (

• ) će diktirati način prikazivanja podataka.

  U nastavku je primjer koda naručenog popisa:

   
   
  Stavka 1
   
  Točka 2
   
  Tačka 3
   
   

  Također je moguće promijenite brojač iz regularnih brojeva u nekoliko drugih opcija. To uključuje abecednim slovima i rimske brojke, u ime nekoliko. Web dizajneri bi koristili naručeni popis za popise specifične za sadržaj. Podaci o receptu, dnevni zadaci, favoriti, ili gore / nedavno prijavljeni korisnici samo su neki od primjera. Često ćete vidjeti komentari na blogu izrađene pomoću naručenih popisa za držanje svakog komentara u numeriranom nizu.

  Popisi definicija podataka (

  )

  Popisi definicija više se ne vide često (ne kao da su ikada bili popularni). Nekada su se vidjeli s web dizajnerima koji su stvarali složene formate veza ili sadržaja okvira. oznaka popisa podataka (

  ) koderi često pogrešno shvaćaju. U specifikacijama HTML4.01 korišteni su popisi podataka par stavki s njihovim opisima. To su nazvali popisi definicija.

  U nastavku je primjer koda popisa definicija podataka:

   
   
  Stavka 1
   
  Opis
   
  Točka 2
   
  Opis
   
  Tačka 3
   
  Opis
   
   

  Međutim, s novim HTML5 specifikacijama popisi podataka dobili su transkripciju. Ne postoje razlike sintakse u načinu na koji koristite elemente, ali njihova je namjena ažurirana kao popis opisa koji se sastoji od jednog ili više podatkovnih pojmova (

  ) nakon čega slijedi jedna ili više definicija podataka (

  ).

  Snažan primjer iz HTML5 Doktorskog članka je a popis formatiranih metapodataka. Unutar jednog DL element popisa koji biste htjeli definirati pojam, kao što je vaše ime, zatim svako sljedeće oznaka definicije može opisati podatke o vama, možda o vašoj dobi, zanimanju, trenutnom gradu / gradu, itd. U konačnici bilo koji skup podataka s parovima ključ / vrijednost lijepo se uklapa u popis opisa. Na popisu možete koristiti više od jednog termina podataka, ali to navodi W3C svaki bi pojam trebao biti jedinstven na popisu.

  Sada kada smo prikovali 3 popularna popisa stilova, prijeđimo na neke primjere! Web dizajneri su postali vrlo kreativni sa svojim popisima tijekom posljednjih godina. U nastavku sam katalogizirao 7 omiljenih web-lokacija s posebnim naglaskom na njihovo kreativno korištenje popisa.

  Jednostavna navigacija popisa neredovitih popisa

  Navigacijski izbornici su mnogo jednostavniji za izgradnju s modernim CSS tehnikama. Zbog toga su neuređeni popisi i čak naručeni popisi postali popularna opcija. Jedan od mojih omiljenih primjera ovoga pojavljuje se na blogu društvenih medija, Mashable.

  

  Prema vrhu njihovog zaglavlja primijetit ćete 2 glavna skupa linkova. Izravno na vrh logotipa nalazi se mali, neuredan popis koji sadrži veze zajednice, kao što su Najnovije vijesti, Teme u trendu i Ljudi. Dizajner je stvorio elegantan hover stil koji ima solidnu pozadinu i shemu boja.

  Odmah ispod toga vidjet ćete njihove pod-navigacijske veze. Ovaj navigacijski izbornik vodi do kategorija blogova kao što su Social Media ili Tech. Oba neuređena popisa nalaze se unutar HTML5