Брилијантна употреба ХТМЛ листа у Веб дизајну

Можете пронаћи добро осмишљене листе широм Интернета. Дизајнери их користе деценијама координирати информације о страницама и распореде, у данашњем вебу можете видети велику креативност у томе како веб дизајнери користе листе. То укључује навигационе меније, профиле везе, архиве, задатке / контролне листе и тоне других употреба!

У овом посту ћу представити различите врсте ХТМЛ листа, са саветима о њиховом дизајнирању, посебно о томе како додајте јединствену ивицу на листу. Такође ћу вас водити кроз неколико примјера веб страница с фантастичним дизајном пописа, и на крају ћете добити попис веб страница с лијепо дизајнираним ХТМЛ листама. Нема више сумње о томе како да ваше листе изгледају јединствено и да почнемо да их користимо највише данас!

Елементи листинга

Веб дизајнери константно скачу из једне бандвагон у другу, на тај начин узрокујући да се стилови веб страница мијењају током времена, али листе су издржале тест времена и могу бити добро у будућности у иновацијама Ворлд Виде Веб-а.

Пре провере примера желим да покријем неколико тачака са ХТМЛ листама. Постоји неколико различитих типова листа које можете користити у свом дизајнерском раду. Већина веб дизајнера се фокусира на Унордеред Листс које се отварају са

али постоје и две друге мање популарне варијације: Наређени пописи и Дефиниције података. У наставку сам погледао детаље.

Нерегистроване листе (

)

Вероватно један од најчешће коришћених елемената у ХТМЛ4 / ХТМЛ5 стандардима. Неуређене листе ће испоручивати податке на исти начин као и наручена листа, међутим ви неће видети нумеричке маркере са стране. Уместо тога свака ставка је дата а мали круг или диск и оборио на нову линију. Ова икона такође се може променити са својством типа стила листе пронађено у ЦСС-у.

Испод је пример кода нерегистроване листе:

 
 
Итем 1
 
Тачка 2
 
Тачка 3
 
 

Неуредне листе су савршен лијек за изградњу линкови за навигацију. Пошто можеш лако ставите цео списак у било коју ставку листе то је једноставно ствар за стварање под-навигацијских веза такође. Након уклањања стила листе оставићете празан елемент ставке. Одавде можете обликовати сидрене везе како би се појавиле као елементи блока на вашој страници, попуњавајући тако дизајн навигацијског изборника, а са неким јКуери кодом можете саставити прекрасно заглавље за вашу веб-локацију.

Најчешће ћете наћи неуређене листе у средини веб чланака или упутстава за инсталацију. Обратите пажњу на то Гоогле и други претраживачки роботи не обрађују садржај Ваше странице на другачији начин, тако твој СЕО не би требало да буде погођена без обзира на то који тип уноса одаберете.

Наређене листе (

)

Када требате наручити скуп података могуће је поставити властити оквир распореда од нуле, али на тај начин ћете морати додати сваки повећани број руком, што може бити заморно. Уређене листе су одличне чување нумерисаних задатака у реду без икаквог зезања. Редослед интерних ставки листе (

• ) ће диктирати како ће се подаци приказивати.

  Испод је пример кода наручене листе:

   
   
  Итем 1
   
  Тачка 2
   
  Тачка 3
   
   

  Такође је могуће промените бројач са регуларних бројева на неколико других опција. Ови укључују абецедно слово и римски бројеви, да поменемо само неке. Веб дизајнери би користили наручену листу за листе специфичне за садржај. Подаци о рецепту, дневне задатке, фаворитес, или топ / рецент пријављени корисници само су неки од примјера. Често ћете видети блог цомментс изграђена помоћу наручених листи да сваки коментар држи у нумерисаној секвенци.

  Листе дефиниције података (

  )

  Листе дефиниција више се не виде често (не као да су икада биле популарне). Некада су се виђали са веб дизајнерима стварајући сложене формате линкова или садржаја кутије. Тхе ознака листе података (

  ) често се погрешно схватају кодери данас. У ХТМЛ4.01 спецификацијама су коришћене листе података пар ставки са њиховим описима. То су се звали листе дефиниција.

  Испод је пример кода списка дефиниција података:

   
   
  Итем 1
   
  Опис
   
  Тачка 2
   
  Опис
   
  Тачка 3
   
  Опис
   
   

  Међутим, са новим ХТМЛ5 спецификацијама, листама података је дата транскрипција. Не постоје разлике са синтаксом у томе како користите елементе, али њихова намена је ажурирана као листу описа која се састоји од једног или више услова података (

  ) праћено једном или више дефиниција података (

  ).

  Снажан пример из ХТМЛ5 Докторског чланка је а форматирана листа метаподатака. Унутар једног дл лист елемент који бисте хтели дефинишите појам, као што је ваше име, затим сваки наредни ознака дефиниције може описати податке о вама, евентуално вашем узрасту, занимању, тренутном граду / граду, итд било који скуп података са паровима кључ / вредност се лепо уклапа у листу описа. У листи можете користити више од једног термина података, али то наводи В3Ц сваки термин би требао бити јединствен на листи.

  Сада када смо забили 3 популарна листа, пређимо на неке примјере! Веб дизајнери су постали веома креативни са својим листама током протеклих година. У наставку сам каталогизирао 7 омиљених веб-локација с посебним нагласком на њихово креативно кориштење пописа.

  Једноставна навигација нерегистрованих листа

  Навигациони менији су много једноставнији за изградњу са модерним ЦСС техникама. Зато су неуређене листе и чак наручене листе постале популарна опција. Један од мојих омиљених примјера се појављује на блогу друштвених медија, Масхабле.

  

  Према врху њиховог заглавља приметићете 2 главне групе линкова. Директно на врх њиховог логотипа налази се мала неуређена листа која садржи везе заједнице као што су Топ Сториес, Трендинг Топицс и Пеопле. Дизајнер је створио елегантан ховер стил који има солидну позадину и схему боја.

  Директно испод тога видећете њихове под-навигационе везе. Овај навигациони мени води до категорија блогова као што су Социал Медиа или Тецх. Обе унордед листе су садржане унутар ХТМЛ5