Brilantní použití HTML seznamů v Web Design

Můžete najít dobře navržené seznamy po celém internetu. Návrháři je používali po celá desetiletí koordinovat informace o stránkách a rozvržení, a na dnešním webu můžete vidět velkou kreativitu v tom, jak weboví designéři používají seznamy. Mezi ně patří navigační menu, odkazy na profily, archivy, úkoly / kontrolní seznamy a tuny dalších použití!

V tomto příspěvku budu představovat různé druhy HTML seznamů, s tipy na jejich navrhování, zejména o tom, jak přidejte do svého seznamu jedinečnou hranu. Také budu vás přes několik příkladů webových stránek s fantastickým seznamem návrhů, a nakonec budete mít seznam webových stránek s pěkně navrženými HTML seznamy. Neexistují žádné další pochybnosti o tom, jak se vaše prostý seznamy vypadají jedinečně, a začněme z nich vytěžit maximum!

Výpisové prvky

Web designéři neustále skákají z jednoho rozjetého vlaku na druhý, což způsobuje, že se styly webových stránek v průběhu času mění, ale seznamy obstály v testu času a mohou se velmi dobře stát v budoucnu v inovaci webu..

Než se podívám na příklady, chci zahrnout několik bodů do seznamů HTML. Existuje několik různých typů seznamů, které můžete využít ve své vlastní projekční práci. Většina webových designérů se zaměřuje na Neuspořádané seznamy které jsou otevřeny pomocí a

ale i další dvě méně oblíbené varianty: Objednané seznamy a Definice dat. Zašel jsem do dalších podrobností níže.

Neuspořádané seznamy (

)

Možná jeden z nejpoužívanějších prvků v HTML4 / HTML5 standardech. Nezařazené seznamy budou na výstupu data stejným způsobem jako objednaný seznam na straně se nezobrazí žádné číselné značky. Namísto toho je každé položce a malý kruh nebo disk a rozdělit na nový řádek. Tato ikona lze také změnit pomocí vlastnosti typu list-style-type nalezené v CSS.

Níže je uveden příklad kódu neuspořádaného seznamu:

 
 
Položka 1
 
Bod 2
 
Bod 3
 
 

Neuspořádané seznamy jsou perfektním prostředkem pro stavbu navigační odkazy. Protože můžete snadno vnořit celé seznamy v libovolné položce seznamu to je jednoduchá záležitost vytvořit sub-navigační odkazy také. Po odstranění stylu seznamu zůstane prázdný prvek položky. Odtud můžete vytvářet kotevní odkazy, které se budou zobrazovat jako prvky bloku na vaší stránce, čímž vyplníte návrh navigační nabídky, a pomocí některého kódu jQuery můžete sestavit krásný záhlaví pro vaše stránky.

Nejčastěji najdete neuspořádané seznamy uprostřed webových článků nebo instalačních pokynů. Všimněte si toho Google a další vyhledávací roboty nezpracovávají obsah vaší stránky jinak, tak vaše SEO by nemělo být ovlivněno bez ohledu na to, který typ záznamu zvolíte.

Objednané seznamy (

)

Pokud potřebujete objednat sadu dat, je možné nastavit si vlastní rozvržení od nuly, ale tímto způsobem budete muset přidat každé přírůstkové číslo ručně, což může být únavné. Objednané seznamy jsou skvělé udržování číslovaných úkolů v řadě bez šroubování. Pořadí položek interního seznamu (

• ) bude určovat, jak budou data prezentována.

  Níže je uveden příklad kódu objednaného seznamu:

   
   
  Položka 1
   
  Bod 2
   
  Bod 3
   
   

  Je také možné změňte počitadlo z běžných čísel na několik dalších možností. Tyto zahrnují abecední nápisy a římské číslice, abychom jmenovali alespoň některé. Weboví návrháři by pro seznamy specifických pro obsah používali uspořádaný seznam. Údaje o receptu, denní úkoly, oblíbených, nebo top / recent přihlášených uživatelů jsou jen některé příklady. Často uvidíte blog komentáře vytvořené pomocí uspořádaných seznamů, aby každý komentář zůstal v číslovaném pořadí.

  Seznamy definic dat (

  )

  Seznamy definic se již velmi často nevidí (ne jako by byly populární). Byly vidět s web designéry, kteří vytvářejí složité formáty odkazů nebo obsahu krabice. značka seznamu dat (

  ) je dnes často špatně chápána kodéry. V HTML4.01 byly použity datové seznamy párovat položky s jejich popisy. Ty se nazývaly seznamy definic.

  Níže je uveden příklad kódu seznamu definic dat:

   
   
  Položka 1
   
  Popis
   
  Bod 2
   
  Popis
   
  Bod 3
   
  Popis
   
   

  Nicméně s novými HTML5 specifikacemi datové seznamy dostali přepis. Neexistují žádné rozdíly se syntaxí v tom, jak prvky používáte, ale jejich účel byl aktualizován jako seznamu obsahující jeden nebo více datových termínů (

  ) následované jednou nebo více definicemi údajů (

  ).

  Silným příkladem z článku HTML5 Doctor je a seznam formátovaných metadat. Uvnitř jednoho jediného dl prvek seznamu definovat pojem, jako je vaše jméno, pak každý následující definice by mohla popisovat data o vás, případně o vašem věku, o zaměstnání, o současném městě, atd. Nakonec jakákoliv množina dat s dvojicemi klíč / hodnota dobře zapadá do seznamu popisů. Můžete použít více než jeden datový termín v seznamu, ale W3C uvádí, že každý termín by měl být jedinečný seznamu.

  Teď, když jsme přibili 3 populární styly seznamů, přejdeme k několika příkladům! Weboví designéři se v posledních letech velmi kreativní s jejich seznamy. Katalogoval jsem 7 mých oblíbených webů níže se zvláštním zaměřením na jejich kreativní využití seznamů.

  Navigace jednoduchého neuspořádaného seznamu

  Navigační menu je mnohem jednodušší vytvořit s moderními CSS technikami. To je důvod, proč se neuspořádané seznamy a dokonce i objednané seznamy staly populární volbou. Jeden z mých oblíbených příkladů se objevuje na blogu sociálních médií Mashable.

  

  Směrem k horní části záhlaví si všimnete 2 hlavních sad odkazů. Přímo v horní části loga je malý neuspořádaný seznam obsahující odkazy komunity, jako jsou Top Stories, Trending Topics a People. Návrhář vytvořil elegantní styl přechodu, který má pevné pozadí a barevné schéma.

  Přímo pod nimi uvidíte jejich navigační odkazy. Tato navigační nabídka vede k kategoriím blogů, jako jsou Sociální média nebo Tech. Oba neuspořádané seznamy jsou obsaženy v a HTML5