Блискуче використання списків HTML у веб-дизайні

Ви можете знайти добре розроблені списки по всьому Інтернету. Дизайнери використовували їх протягом десятиліть координувати інформацію про сторінку та макети, і в сьогоднішній мережі ви можете побачити велику творчість в тому, як веб-дизайнери використовують списки. До них відносяться навігаційні меню, посилання на профілі, архіви, завдання / контрольні списки, тони інших застосувань!

У цьому пості я познайомлюся з різними типами HTML-списків, з порадами щодо їх розробки, зокрема, як це зробити додайте унікальний край до списку. Крім того, я перегляну кілька прикладів веб-сайтів з фантастичним дизайном списку, і в кінцевому підсумку ви отримаєте список веб-сайтів з красиво оформленими списками HTML. Немає більше сумнівів щодо того, як зробити свої списки виглядають унікально, і давайте почнемо робити найбільше з них сьогодні!

Елементи лістингу

Веб-дизайнери постійно перестрибують з одного переможця на наступний, тим самим змушуючи стилі веб-сайту змінюватися з плином часу, але списки витримали випробування часом і, можливо, можуть бути навколо в майбутніх інноваціях World Wide Web.

Перед тим, як перевірити приклади, я хочу охопити кілька пунктів списками HTML. Є кілька різних типів списків, які ви можете використовувати у своїй роботі. Більшість веб-дизайнерів зосереджені на Невпорядковані списки які відкриваються за допомогою a

, але є ще два менш популярні варіанти: Впорядковані списки і Визначення даних. Нижче я детальніше ознайомився.

Невпорядковані списки (

)

Можливо, один з найбільш використовуваних елементів у стандартах HTML4 / HTML5. Невпорядковані списки будуть виводити дані таким же чином, як і впорядкований список не буде бачити жодних цифрових маркерів убік. Замість цього кожен елемент надається a маленьке коло або диск і розбито на нову лінію. Ця піктограма також можна змінити за допомогою властивості типу стилю списку знайдено в CSS.

Нижче наведено приклад коду невпорядкованого списку:

 
 
Пункт 1
 
Пункт 2
 
Пункт 3
 
 

Невпорядковані списки є ідеальним засобом для будівництва навігаційні посилання. Так ви можете легко вкласти всі списки в будь-який елемент списку це проста справа для створення підна навігаційних посилань так само. Після видалення стилю списку залишиться порожній елемент елемента. Звідси ви можете створити якірні посилання для відображення у вигляді елементів блоку на вашій сторінці, заповнивши таким чином дизайн навігаційного меню, а з деяким кодом jQuery ви зможете створити гарний заголовок для вашого сайту.

Найчастіше ви знайдете невпорядковані списки посередині веб-статей або інструкцій з інсталяції. Зверніть увагу на це Google та інші пошукові роботи не обробляють вміст вашої сторінки по-різному, так ваш SEO не повинно впливати, незалежно від того, який тип списку ви вибрали.

Впорядковані списки (

)

Коли вам потрібно замовити набір даних, можна налаштувати власну структуру макета з нуля, але таким чином вам доведеться додати кожне число, що збільшується, вручну. Упорядковані списки дуже зручні зберігання пронумерованих завдань у рядку без будь-яких загвинчувань. Порядок внутрішніх елементів списку (

• ) буде диктувати, як дані будуть представлені.

  Нижче наведено приклад коду впорядкованого списку:

   
   
  Пункт 1
   
  Пункт 2
   
  Пункт 3
   
   

  Це також можливо змінюйте лічильник із звичайних номерів на кілька інших варіантів. До них відносяться алфавітний написи і римські цифри, назвати декілька. Веб-дизайнери використовують впорядкований список для специфічних для вмісту списків. Дані рецепта, щоденні завдання, вибране, або Топ / нещодавно зареєстровані користувачі це лише кілька прикладів. Часто ви побачите коментарі блогу побудований з використанням впорядкованих списків для збереження кожного коментаря в нумерованій послідовності.

  Списки визначення даних (

  )

  Визначення списків не зустрічається дуже часто (не так, як вони були завжди популярні). Раніше вони бачилися з веб-дизайнерами, створюючи складні формати посилань або вмісту вікон. The тег списку даних (

  ) часто невірно розуміють кодери сьогодні. У специфікації HTML4.01 використовувалися списки даних пара елементів з їх описом. Вони називалися списками визначення.

  Нижче наведено приклад коду списку даних:

   
   
  Пункт 1
   
  Опис
   
  Пункт 2
   
  Опис
   
  Пункт 3
   
  Опис
   
   

  Проте з новими специфікаціями HTML5 списки даних отримали транскрипцію. Немає жодних відмінностей з синтаксисом в тому, як ви використовуєте елементи, однак їхня мета була оновлена ​​як список опису, який складається з одного або більше термінів даних (

  ), за якими слідує одне або кілька визначень даних (

  ).

  Яскравим прикладом статті HTML5 Доктора є a список форматованих метаданих. Всередині одного синглу dl елемент списку ви б визначити термін, наприклад, ваше ім'я, потім кожен наступний Тег визначення може описувати дані про вас, можливо, ваш вік, професія, поточний місто / місто тощо будь-який набір даних з парами ключ / значення добре вписується в список опису. Ви можете використовувати більш ніж один термін даних у списку, але W3C стверджує, що кожен термін повинен бути унікальним у списку.

  Тепер, коли ми прибили 3 популярні стилі списку, давайте перейдемо до деяких прикладів! За останні роки веб-дизайнери стали дуже творчими зі своїми списками. Нижче зібрано 7 моїх улюблених веб-сайтів, з особливим акцентом на їх творче використання списків.

  Простий невпорядкований навігації списку

  Навігаційні меню набагато простіше побудувати за допомогою сучасних методів CSS. Ось чому невпорядковані списки і навіть впорядковані списки стали популярним варіантом. Один з моїх улюблених прикладів з'являється в блозі соціальних медіа, Mashable.

  

  До верхньої частини заголовка ви побачите 2 основні набори посилань. Безпосередньо на верхній частині їх логотипу розташований невеликий невпорядкований список, який містить посилання на спільноти, такі як "Найпопулярніші теми", "Тенденції щодо тенденцій" та "Люди". Дизайнер створив гладкий стиль наведення, який має суцільну фонову та кольорову схему.

  Безпосередньо під ним ви побачите посилання для навігації. Це навігаційне меню призводить до категорій блогу, таких як соціальні медіа або технології. Обидва невпорядковані списки містяться в межах HTML5