Блискуче використання списків 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 елемент зберігати все вбудовано в шаблоні. Ефекти, наведені тут, відображають округлий кут навколо підна навігаційного меню. Кожне посилання відображається як блок-елемент і займає величезний простір у підна навігаційному меню.
Список функцій програмного забезпечення
Можливо, це один з моїх улюблених прикладів стильових списків. Веб-розробники та компанії-виробники програмного забезпечення використовують їх у своїх власних корпоративних веб-проектах. Мій приклад фокусується на сторінці речей коду культури, до списку завдань. Вони побудували a форматований набір елементів і функцій Ви можете знайти в речах.
Вся колекція міститься всередині a Зображення додаються як Елементи були складені красиво, і я дуже захоплювався робочою етикою Кодексу культури. Вони виявилися фантастичними проектами протягом багатьох років, особливо для речей. Якщо ви перевіряєте будь-яку директорію іконок, наприклад Icon Finder, то досить просто вибирати набір халяви, а звідси ви можете макетувати дизайн і кодувати подібний стиль списку в CSS. Якщо ви зацікавлені в подальшому розробці, сторінка «Речі для iPhone» фактично використовує список описів. Кожна піктограма встановити як термін визначення та описи розміщені праворуч. Це не рекомендований спосіб використання цих тегів, але він працює добре в деяких обставинах! Користувачі WordPress дуже добре знайомі з системою категорій / тегів. Він добре працював у більшості форм соціальних медіа до цих пір, але спочатку він походить з блогосфери. Теги відмінно підходять для відображення декількох нішевих статей, пов'язаних з темою. Категорії набагато ширші і використовуються для охоплення більшої частини ваших статей. Кращий приклад, який я можу придумати, це Smashing Magazine та їхня нова реорганізація на домашній сторінці. Угорі ви побачите вкладку з позначкою “Журнал” з невеликою піктограмою з тегами, що висить збоку. Наведіть курсор на це, щоб відобразити прихований список категорій, таких як кодування, дизайн, графіка тощо. Кожен також має стильний ефект CSS3, який відображається як глянцеві кнопки. Дивлячись на код, ви помітите, що вони розмістили це поле в області лівого стовпця. Це дано a Я завжди був великим шанувальником класичного дизайну Digg. Вона показала все, що ви очікуєте від сайту новин з великими соціальними можливостями. Один дійсно цікавий шматок їх старого дизайну колонки колонтитула встановлюються за допомогою списків визначень. На жаль, команда Digg вже запустила дизайн v4 в реальному часі, але Інтернет є ностальгічним місцем, а з Інтернет-архівами Wayback ми можемо підняти старий дизайн Digg з серпня 2007 року. більш конкретно давайте звернемо увагу на область нижнього колонтитула. Ви помітите, що кожен стовпець фактично розбитий на a елемент списку даних. Ці стовпці є встановлюється для відображення у вигляді блоків і плаваючих поруч один з одним із заданими ширинами. The терміни даних поводяться як заголовки у списку та відображаються лише один раз на стовпець. На мою думку, це набагато приємніший і чистіший спосіб створити списки описів. Можна використовувати більше одного терміну в списку, але це часто спотворює ваш HTML, і ви можете дуже швидко втратити код. Перші дві колонки містять 6-7 посилань, наведених нижче один одного, як терміни даних для опису тексту заголовка, але після цього ви побачите відрив стовпців від типового форматування. Наприклад, під ним Digg Tools & API там є тільки два визначення даних. Це фактично 2 пункти, які містять внутрішнє посилання і речення. Звичайно, з цією розміткою нічого поганого, і це насправді дуже творча і стійка система для створення колонок колонтитулів. Я впевнений, що якщо ви будете переглядати архіви сторінок Digg, ви знайдете набагато більше фантастичних прикладів списків. Списки не завжди просто включені для стилів дизайну. Насправді є час, коли вміст вимагає елементів списку для формування фактичного списку даних. Списки справ є прекрасним прикладом цих явищ. Однак в Інтернеті не побудовано багато менеджерів завдань, тому важко знайти великі приклади. Flow App є однією з таких послуг з гарною панеллю користувача. Якщо у вас є час, я пропоную підписатися на безкоштовний обліковий запис, щоб надати програмі демо-версію. Навіть якщо ви не плануєте платити, це все ще дуже веселе веб-додаток, щоб возитися, і ви навіть можете витягнути деякі натхнення дизайну. Якщо ви ввійшли в систему, ліве нижнє меню сортує вашу колекцію списків. Це завдання, які можна змінити, змінити, позначити та перевірити як завершені. Натискання першого списку за замовчуванням “Основи” відкриє вміст у правій області, тут побудована вся структура списку з невпорядкованим списком. Кожен елемент містить досить велику кількість внутрішнього контексту. Кожен бар ви бачите переходячи подарунки до списку додано один елемент списку Разом з багатьма колегами-дизайнерами я величезний наркоман Dribbble. Сайт побудований красиво і в ньому є деякі з кращих дизайнерів з усього світу. Якщо ви не знайомі з мережею, Dribbble - це спільна спільнота веб-дизайнерів, яка пропонує лише спільний доступ до своїх останніх робіт.. Речі стають цікавими, якщо звернути увагу на нижній правий край бічної панелі. Тут ми маємо впорядкований список з класом “Список гравців“. Вона пропонує новачків, які є новітніми дизайнерами, запрошені та які підписалися на сайті останнім часом. З якихось причин веб-розробник Dribbble вирішив використати упорядкований список з кожним елементом списку, що містить відомості про користувача. Внутрішній контент фактично розбитий на два сегменти. A Існують деякі фантастичні приклади та написані найкращі практики для створення навігаційної системи. Ці меню помітно відображають зібрані під-посилання, які ви перейшли, щоб досягти поточної сторінки. У нас є фантастичний навчальний посібник про хлібні тріски, розроблений повністю на основі методів CSS3 і невпорядкованих списків. Дизайн використовує якірні зв'язки як елементи блоку , щоб відобразити меню списку. Анкерному каналу надається фонове зображення і a зменшується Також перегляньте приклад Google на одній з їхніх сторінок підтримки. Це ідеальний елемент сторінки для включення у власний веб-сайт, якщо у вас є кілька вкладених сторінок вмісту. Відвідувачі, швидше за все, захочуть повернутися до попередніх сторінок, не перевіряючи свою історію. Немає занадто багато альтернатив для створення списку хлібних посилань. Ви можете використовувати впорядкований список так сканери пошукових систем розуміють, що існує замовлення на посилання в меню, однак, як зазначено раніше, це, мабуть, не зробить занадто багато різниці, коли мова йде про ранжування в SERPS. Якщо у вас є складніші потреби в сухарях, таких як назва / опис для кожного посилання, ви можете краще використовувати елемент списку визначень. Не вдаючись у деталі, моя мета - зібрати фантастичне налаштування елементів інтерфейсу на основі списків. Це набагато простіше сказати, ніж зробити - але в Інтернеті так багато варіантів! Існує багато місця для зростання в області списків HTML. Якщо ви вмираєте для більше натхнення, перевірте міні-галерею внизу з деякими фантастичними прикладами. Фантастичне навігаційне меню з елементами кнопок. Торт Солодкий торт має прекрасний список мініатюр зображень, що містять деякі смачні зразки їх хлібобулочних робіт. Веб-сайт Cheesemonger Invitational має 2 окремих Посилання на соціальні медіа в нижній частині веб-сайту редактора Threepenny все створено під списком. Вона ідеально вписується в колонку з темою макетів рук і паперу. Ще один гарний приклад навігаційного меню стилізований з зображеннями і CSS. Ви знаєте, хто має фантазійний ефект ретро-дизайну на своєму сайті. У нижній частині домашньої сторінки є невеликий упорядкований список, який містить мініатюри їх останньої проектної роботи. Невпорядкований список для планів реєстрації MediaLoot виглядає багатообіцяючим. 365psd пропонує новий шаблон Photoshop для завантаження щодня. У бічній панелі ви знайдете список тегів, вбудованих у невпорядкований список. Це ідеально виглядає в блогах і архівних сторінках, де невеликий список тегів вважається доречним. Сподіваємося, що ця галерея творчих списків у стилі HTML дає вам натхнення для розробки вмісту макета. На веб-сторінках може бути важко закріпити конкретні ідеї для списків, але списки предметів є великою частиною процесу проектування. пропонують конструктивні відносини між тегами розмітки та вмістом. Є, мабуть, десятки інших фантастичних списків, знайдених по всьому Інтернету, і з ростом кількості веб-дизайнерів ми обов'язково побачимо, що це число зростає швидше, ніж будь-коли. Якщо ви знаєте будь-який великий веб-сайт, що містить чудові списки HTML, не соромтеся запропонувати посилання в нашому розділі коментарів нижче. Також, якщо ви додасте будь-який з перелічених вище стилів у свій веб-сайт, ми хотіли б перевірити його!
елементи з лівим і правим класом, відповідно. Насправді вміст елемента списку розбиті на сегменти і CSS використовується для вирівнювання всіх. теги безпосередньо в код і розташовані відносно їх містять
. The
сильний
теги використовуються для кожної з точок заголовка, які відображаються в темному тексті, і безпосередньо після цього додано опис.Категорії та теги блогу
дисплей: немає;
стиль з'являються прихованими до спрацьовування. Невпорядкований список встановлюється для кожного елемента списку, що містить прив'язку, але як альтернативні ці посилання відображаються вбудовано і розбиваються на дві лінії для необхідного простору.Колони колонтитулів із списками визначення
Завдання та завдання
елемент. Існує багато внутрішніх об'єктів, таких як значок редагування, прапорець завершення, прапор і значок кошика. Також у бічних меню посилання під ним “Фокус” Ви помітите побудовані елементи встановлені в невпорядкований список. Звичайно, це виглядає просто фантастично.Список гравців
заголовок з класом “vcard” містить ім'я користувача та аватар. Вони обидва пов'язані з їхнім особистим профілем Dribbble, а також з деякими статистичними даними облікового запису.
Горизонтальні сухарі
z-індекс
властивість, щоб стрілки відображалися поверх кожного паралельного елемента.Більш красивий інтерфейс на основі списку
6wunderkinder
Торт Солодкий торт
Cheesemonger Invitational
плаваючих елементів для створення 1 навігаційного меню. Це виглядає дійсно акуратним відповідно до їх центрованою графікою логотипу.Тривимірний редактор
Le Tipi
Ти знаєш хто
MediaLoot
365psd
Висновок