Блестящее использование списков HTML в веб-дизайне

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

В этой статье я расскажу о различных видах HTML-списков с советами по их разработке, в частности о том, как добавить уникальный край в свой список. Также я покажу вам несколько примеров сайтов с фантастическим дизайном списков, и в итоге вы получите список сайтов с красиво оформленными списками HTML. Больше нет сомнений в том, как сделать так, чтобы ваши простые списки выглядели уникальными, и давайте начнем максимально использовать их сегодня!

Листинговые элементы

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

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

тег, но есть и два других менее популярных варианта: Упорядоченные списки а также Определения данных. Я углубился в подробности ниже.

Неупорядоченные списки (

)

Возможно, один из наиболее часто используемых элементов в стандартах HTML4 / HTML5. Неупорядоченные списки будут выводить данные так же, как упорядоченный список, однако вы не будет видеть никаких числовых маркеров в стороне. Вместо этого каждому предмету присваивается маленький круг или диск и разбит на новую линию. Этот значок также можно изменить с помощью свойства list-style-type найдено в CSS.

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

 
 
Элемент 1
 
Пункт 2
 
Пункт 3
 
 

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

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

Упорядоченные списки (

)

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

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

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

   
   
  Элемент 1
   
  Пункт 2
   
  Пункт 3
   
   

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

  Списки определения данных (

  )

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

  ) сегодня часто неправильно понимают кодеры. В HTML4.01 спецификации были использованы списки данных для пара предметов с их описаниями. Они назывались списками определений.

  Ниже приведен пример кода списка определения данных:

   
   
  Элемент 1
   
  Описание
   
  Пункт 2
   
  Описание
   
  Пункт 3
   
  Описание
   
   

  Однако с новыми спецификациями HTML5 списки данных получили транскрипцию. Нет никаких различий с синтаксисом в том, как вы используете элементы, однако их назначение было обновлено как список описания, состоящий из одного или нескольких терминов данных (

  ) с последующим одним или несколькими определениями данных (

  ).

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

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

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

  Навигационные меню гораздо проще создать с помощью современных методов CSS. Вот почему неупорядоченные списки и даже упорядоченные списки стали популярным вариантом. Один из моих любимых примеров этого появляется в блоге социальных сетей, Mashable.

  

  В верхней части их заголовка вы увидите 2 основных набора ссылок. Непосредственно в верхней части их логотипа находится небольшой неупорядоченный список, содержащий ссылки на сообщества, такие как «Главные новости», «Актуальные темы» и «Люди». Дизайнер создал стильный стиль при наведении, который имеет сплошной фон и цветовую гамму..

  Прямо под этим вы увидите их суб-навигационные ссылки. Это навигационное меню ведет к таким категориям блогов, как Social Media или Tech. Оба неупорядоченных списка содержатся в HTML5