Brilantné použitie zoznamov HTML vo webe

Môžete nájsť dobre navrhnuté zoznamy po celom internete. Dizajnéri ich používajú už desiatky rokov koordinovať informácie o stránke a rozloženia, a na dnešnom webe môžete vidieť skvelú tvorivosť v tom, ako používajú web dizajnéri zoznamy. Patria sem navigačné ponuky, profilové prepojenia, archívy, úlohy / kontrolné zoznamy a množstvo ďalších použití!

V tomto príspevku budem predstavovať rôzne druhy zoznamov HTML, s tipy na ich návrh, najmä o tom, ako pridajte jedinečný okraj do svojho zoznamu. Taktiež vás budem prinášať niekoľko príkladov webových stránok s fantastickými návrhmi zoznamov a nakoniec dostanete zoznam webových stránok s pekne navrhnutými zoznamami HTML. Neexistuje žiadna pochybnosť o tom, ako vytvoriť zoznamy s jednoduchým hľadaním vyzerajúce unikátne a začnime z nich vyťažiť dnes!

Prvky záznamu

Web dizajnéri neustále skákajú z jednej vlajky na ďalšiu, čo spôsobuje, že sa štýly webových stránok menia v priebehu času, ale zoznamy stoja testom času a môžu byť veľmi dobre v budúcnosti inovácií na World Wide Web.

Pred skontrolovaním príkladov chcem pokryť niekoľko bodov pomocou zoznamov HTML. Existuje niekoľko rôznych typov zoznamov, ktoré môžete využiť vo svojej vlastnej projektovej práci. Väčšina webových dizajnérov sa sústreďuje Neurčené zoznamy ktoré sú otvorené a

tag, ale existujú aj ďalšie dve menej populárne variácie: Objednané zoznamy a Definície údajov. Prešiel som do ďalších podrobností nižšie.

Neurčené zoznamy (

)

Možno jeden z najpoužívanejších prvkov v štandardoch HTML4 / HTML5. Neurčené zoznamy budú zobrazovať údaje rovnakým spôsobom ako objednaný zoznam, ale vy nevidia žiadne bočné číselné značky. Namiesto toho každá položka je daná a malý kruh alebo disk a rozdeliť na novú linku. Táto ikona môže byť tiež zmenené s vlastnosť typu štýlu zoznamu nájdené v CSS.

Nižšie je uvedený príklad kódu neoznačeného zoznamu:

 
 
Položka 1
 
Bod 2
 
Bod 3
 
 

Neurčené zoznamy sú dokonalým prostriedkom na stavbu navigačné odkazy. Pretože môžete ľahko zhrňte celé zoznamy v ľubovoľnej položke zoznamu je to a jednoduchá záležitosť na vytvorenie odkazov na navigáciu tiež. Po odstránení štýlu zoznamu zostanete prázdnym prvkom položky. Odtiaľ sa môžete ukotviť ukotvené odkazy tak, aby sa zobrazovali ako blokové prvky na vašej stránke, čím vyplníte návrh navigačného menu a pomocou nejakého jQuery kódu môžete dať dohromady krásnu záhlavie pre vašu stránku.

Najčastejšie nájdete neoznačené zoznamy v strede webových článkov alebo pokynov na inštaláciu. Ber to na vedomie Spoločnosť Google a iné vyhľadávacie roboty obsah stránky spracúvajú inak, tak vaše SEO by nemala byť dotknutá bez ohľadu na to, ktorý typ inzerátu si vyberiete.

Objednané zoznamy (

)

Keď potrebujete objednať súbor údajov, je možné nastaviť vlastný rámec rozloženia od začiatku, ale týmto spôsobom budete musieť pridať každý prírastkový počet ručne, čo môže byť únavné. Objednané zoznamy sú skvelé pre vedenie číslovaných úloh v súlade bez akýchkoľvek zákrutov. Poradie položiek interného zoznamu (

• ) bude diktovať, ako sa údaje prezentujú.

  Nižšie je uvedený príklad kódu objednaného zoznamu:

   
   
  Položka 1
   
  Bod 2
   
  Bod 3
   
   

  Je tiež možné zmeniť počítadlo od bežných čísel na niekoľko ďalších možností. Tie obsahujú abecedné písmo a rímske číslice, vymenovať zopár. Web dizajnéri by používali usporiadaný zoznam pre zoznamy špecifické pre obsah. Údaje o receptúrach, denné úlohy, obľúbené, alebo top / nedávno prihlásení užívatelia sú len niektoré príklady. Často uvidíte blog komentáre vytvorené pomocou zoznamov na objednanie, aby každý komentár zostal v očíslovanom poradí.

  Zoznamy definícií údajov (

  )

  Zoznamy definícií už nie sú vidieť veľmi často (nie ako by boli niekedy populárne). Oni boli vidieť s webových návrhárov vytvárať komplexné formáty odkazov alebo obsah boxu. značka zoznamu údajov (

  ) je často nesprávne pochopené kodérmi dnes. V špecifikáciách HTML4.01 boli použité zoznamy údajov pár položiek s ich popismi. Tieto boli nazývané zoznamy definícií.

  Nižšie je uvedený príklad kódu zoznamu definícií údajov:

   
   
  Položka 1
   
  popis
   
  Bod 2
   
  popis
   
  Bod 3
   
  popis
   
   

  Avšak s novými špecifikáciami HTML5 boli zoznamy dát daný prepis. Neexistujú žiadne rozdiely so syntaxou v tom, ako používate prvky, ale ich účel bol aktualizovaný ako a popisný zoznam, ktorý pozostáva z jedného alebo viacerých údajov (

  ), za ktorými nasleduje jedna alebo viac definícií údajov (

  ).

  Silný príklad z článku lekára HTML5 je a zoznam formátovaných metaúdajov. Vo vnútri jedného singlu dl prvok zoznamu by ste definujte pojem, ako je vaše meno, potom každé nasledujúce definícia značky môže opisovať údaje o vás, prípadne o vašom veku, povolaní, aktuálnom meste / meste, atď všetky súbory údajov s párom kľúč / hodnota sa hodia dobre do zoznamu opisov. V zozname môžete použiť viac ako jeden dátový termín, ale W3C to uvádza každý pojem by mal byť jedinečný v zozname.

  Teraz, keď sme prilepili 3 obľúbené zoznamy štýlov, prejdime na niekoľko príkladov! Weboví dizajnéri sa v posledných rokoch stali veľmi kreatívnymi svojimi zoznamami. Zostavil som 7 mojich najobľúbenejších webových stránok s osobitným zameraním na ich tvorivé používanie zoznamov.

  Jednoduchá neusporiadaná navigácia v zozname

  Navigačné ponuky sú oveľa jednoduchšie s modernými technikami CSS. To je dôvod, prečo sa nezoradené zoznamy a dokonca aj objednané zoznamy stali populárnou voľbou. Jeden z mojich obľúbených príkladov sa objavuje na blogu sociálnych médií Mashable.

  

  Smerom k hlavičke si všimnete 2 hlavné sady odkazov. Priamo na vrchole svojho loga je malý neusporiadaný zoznam obsahujúci odkazy na komunitu, ako sú Top Stories, Trending Topics a People. Návrhár vytvoril elegantný vzhľad, ktorý má pevné pozadie a farebnú schému.

  Priamo pod týmto sa zobrazia ich podriadené navigačné odkazy. Toto navigačné menu vedie k kategóriám blogov, ako sú sociálne médiá alebo tech. Obe nezoradené zoznamy sa nachádzajú v rámci reťazca a HTML5