Брилянтно използване на HTML списъци в уеб дизайна

Можете да намерите добре разработени списъци в интернет. Дизайнерите ги използват от десетилетия координира информацията и оформленията на страницата, и в днешния уеб можете да видите голямото творчество в това как уеб дизайнерите използват списъци. Те включват менюта за навигация, връзки към профили, архиви, задачи / контролни списъци и тонове други употреби!

В този пост ще представям различни видове HTML списъци, със съвети за тяхното проектиране, особено за това как добавете уникален ръб към списъка си. Също така ще ви преведа през няколко примера на уебсайтове с фантастични дизайни на списъци и в крайна сметка ще получите списък с уебсайтове с добре разработени HTML списъци. Няма повече съмнение за това как да направите вашите очевидни списъци изглеждат уникални и нека започнем да правим най-много от тях днес!

Елементите на обявата

Уеб дизайнерите непрекъснато скачат от една в друга, като по този начин стиловете на уебсайтовете се променят с течение на времето, но списъците са издържали изпитанието на времето и може много добре да се намират в бъдещите иновации в World Wide Web.

Преди да проверим примерите, искам да покрия няколко точки с HTML списъци. Има няколко различни вида списъци, които можете да използвате в собствената си проектантска работа. По-голямата част от уеб дизайнерите се фокусират върху Неподредени списъци които се отварят с

, но има и две други по-малко популярни варианти: Подредени списъци и Дефиниции на данни. По-долу съм научил повече подробности.

Нерегламентирани списъци (

)

Вероятно един от най-използваните елементи в HTML4 / HTML5 стандартите. Неподредените списъци ще извеждат данни по същия начин, както и подреден списък, независимо от това, че вие няма да виждат никакви цифрови маркери отстрани. Вместо това всеки елемент е даден a малък кръг или диск и разбити на нов ред. Тази икона може също да се променя със свойство тип стил в списъка в CSS.

По-долу е даден примерният код на неподредения списък:

 
 
Позиция 1
 
Точка 2
 
Точка 3
 
 

Неподредените списъци са идеалното средство за изграждане навигационни връзки. Тъй като можете лесно вмъкнете цели списъци в някоя елемент от списъка това е просто да създадете под-навигационни връзки също. След като премахнете стила на списъка, ще останете с празен елемент на елемент. Оттук можете да създадете връзки за котва, които да се показват като блокови елементи на вашата страница, като по този начин попълните дизайна на навигационното меню, а с някои jQuery код можете да съберете красив заглавие за вашия сайт..

Най-често ще намерите неподредени списъци в средата на уеб статии или инструкции за инсталиране. Обърнете внимание Google и други ботове за търсене не обработват съдържанието на вашата страница по различен начин, така че SEO не трябва да бъде засегната, независимо от вида на списъка.

Подредени списъци (

)

Когато трябва да поръчате набор от данни, е възможно да създадете своя собствена рамка за оформление от нулата, но по този начин ще трябва да добавите всеки нарастващ номер на ръка, което може да е уморително. Подредените списъци са страхотни поддържане на номерирани задачи в съответствие без никакви винтове. Редът на вътрешните ви елементи от списъка (

• ) ще диктуват как се представят данните.

  По-долу е даден примерният код на подредения списък:

   
   
  Позиция 1
   
  Точка 2
   
  Точка 3
   
   

  Възможно е също така променете брояча от обикновени номера на няколко други опции. Те включват азбучен надпис и римски цифри, за да назовем само няколко. Уеб дизайнерите ще използват поръчан списък за специфични за съдържанието списъци. Данни за рецептата, дневни задачи, любими, или нагоре / последните регистрирани потребители са само няколко примера. Често ще видите коментари в блога построен с помощта на подредени списъци, за да запази всеки коментар в номерирана последователност.

  Списъци с дефиниране на данни (

  )

  Списъците с дефиниции вече не се виждат много често (не като тези, които някога са били популярни). Преди се виждаха с уеб дизайнери, които създаваха сложни формати на връзки или съдържание на кутия. Най- етикет със списък с данни (

  ) често се разбира погрешно от кодерите днес. В спецификациите HTML4.01 са използвани списъци с данни съчетайте елементи с техните описания. Те се наричат ​​списъци с дефиниции.

  По-долу е показан примерният код на списъка с дефиниции на данни:

   
   
  Позиция 1
   
  описание
   
  Точка 2
   
  описание
   
  Точка 3
   
  описание
   
   

  Но с новите спецификации за HTML5 данните бяха дадени транскрипция. Няма никакви различия със синтаксиса в начина, по който използвате елементите, но тяхната цел е актуализирана като списък с описания, който се състои от едно или повече термини за данни (

  ) последвано от едно или повече определения на данни (

  ).

  Силен пример от статията на HTML5 Doctor е a списък с форматирани метаданни. Вътре в един сингъл дл списък елемент ще дефинирате термин, като вашето име, след това всяка следваща бих могъл да опише данни за вас, евентуално вашата възраст, професия, настоящ град / град и т.н. всеки набор от данни с двойки ключ / стойност се вписва добре в списъка с описания. Можете да използвате повече от един термин в списъка, но W3C заявява това всеки термин трябва да бъде уникален в списъка.

  Сега, след като приковахме 3-те популярни стила в списъка, нека преминем към някои примери! Уеб дизайнерите са станали много креативни със своите списъци през последните години. Аз каталогизирах 7 от любимите ми уебсайтове по-долу с конкретен акцент върху тяхното творческо използване на списъци.

  Обикновено навигация с неподреден списък

  Навигационните менюта са много по-прости за изграждане с модерни CSS техники. Ето защо неподредените списъци и дори подредените списъци са станали популярна опция. Един от любимите ми примери за това се появява в блога на социалните медии, Mashable.

  

  Към горната част на заглавието ще забележите 2 основни групи връзки. Директно в горната част на логото им има малък, неподреден списък, който съдържа връзки в общността, като „Най-важни истории“, „Тенденции в тенденциите“ и „Хора“. Дизайнерът е създал елегантен стил, който се отличава със солидна фонова и цветова схема.

  Пряко под това ще видите техните под-навигационни връзки. Това навигационно меню води до категории в блогове като социални медии или технологии. И двете нерегламентирани списъци се съдържат в a HTML5