Genialne wykorzystanie list HTML w projektowaniu stron internetowych

Możesz znaleźć dobrze zaprojektowane listy w całym Internecie. Projektanci używają ich od dziesięcioleci koordynować informacje o stronie i układy, W dzisiejszej sieci widać wielką kreatywność w tym, jak projektanci stron korzystają z list. Obejmują one menu nawigacyjne, linki do profili, archiwa, zadania / listy kontrolne i mnóstwo innych zastosowań!

W tym poście przedstawię różne rodzaje list HTML, z poradami dotyczącymi ich projektowania, szczególnie tego, jak to zrobić dodaj unikalną krawędź do listy. Przeprowadzę Cię również przez kilka przykładów stron internetowych z fantastycznymi projektami list, a ostatecznie otrzymasz listę stron internetowych z ładnie zaprojektowanymi listami HTML. Nie ma więcej wątpliwości, jak sprawić, by listy wyglądające na zwykłe wyglądały wyjątkowo, i zacznijmy od nich jak najlepiej korzystać!

Elementy aukcji

Projektanci stron internetowych nieustannie przeskakują z jednego do drugiego, powodując, że style strony zmieniają się z czasem, ale listy przetrwały próbę czasu i mogą równie dobrze znaleźć się w przyszłych innowacjach sieci World Wide Web.

Przed sprawdzeniem przykładów chcę omówić kilka punktów z listami HTML. Istnieje kilka różnych rodzajów list, które możesz wykorzystać we własnych pracach projektowych. Większość projektantów stron internetowych koncentruje się na Listy nieuporządkowane które są otwierane za pomocą

tag, ale są też dwie inne mniej popularne odmiany: Listy uporządkowane i Definicje danych. Zajrzałem do dalszych szczegółów poniżej.

Listy nieuporządkowane (

)

Prawdopodobnie jeden z najczęściej używanych elementów w standardach HTML4 / HTML5. Listy nieuporządkowane będą wyświetlać dane w taki sam sposób, jak lista uporządkowana nie zobaczę żadnych znaczników numerycznych z boku. Zamiast tego każdy przedmiot otrzymuje małe kółko lub dysk i rozbite na nową linię. Ta ikona można również zmienić za pomocą właściwości typu list-style znalezione w CSS.

Poniżej znajduje się przykładowy kod listy nieuporządkowanej:

 
 
Przedmiot 1
 
Pozycja 2
 
Pozycja 3
 
 

Listy nieuporządkowane są doskonałym lekarstwem na budowanie linki nawigacyjne. Ponieważ możesz łatwo zagnieżdżaj całe listy w dowolnym elemencie listy to jest prosta sprawa, aby utworzyć sub-nawigacyjne linki także. Po usunięciu stylu listy pozostanie pusty element. Od tego momentu możesz stylizować linki kotwiczące, które pojawią się jako elementy blokowe na twojej stronie, wypełniając w ten sposób projekt menu nawigacyjnego, a przy pomocy kodu jQuery możesz stworzyć piękny nagłówek dla swojej strony.

Najczęściej znajdziesz nieuporządkowane listy w środku artykułów internetowych lub instrukcji instalacji. Zwróć na to uwagę Google i inne boty wyszukiwania nie przetwarzają treści strony inaczej, więc twój SEO nie powinno mieć wpływu na to, który typ aukcji wybierzesz.

Zamówione listy (

)

Gdy potrzebujesz zamówić zestaw danych, możesz skonfigurować własny schemat układu od podstaw, ale w ten sposób będziesz musiał ręcznie dodawać każdy numer przyrostowy, co może być męczące. Zamówione listy są świetne utrzymywanie numerowanych zadań w linii bez żadnych śrubek. Kolejność wewnętrznych elementów listy (

• ) będzie dyktować sposób prezentacji danych.

  Poniżej znajduje się przykładowy kod zamówionej listy:

   
   
  Przedmiot 1
   
  Pozycja 2
   
  Pozycja 3
   
   

  Możliwe jest również zmień licznik ze zwykłych liczb na kilka innych opcji. Obejmują one alfabetyczny napis i cyfry rzymskie, by wymienić tylko kilka. Projektanci stron internetowych użyliby uporządkowanej listy do list specyficznych dla treści. Dane receptury, Codzienne zadania, ulubione, lub top / recent zalogowani użytkownicy to tylko kilka przykładów. Często zobaczysz komentarze na blogu zbudowane za pomocą uporządkowanych list, aby zachować każdy komentarz w numerowanej kolejności.

  Listy definicji danych (

  )

  Listy definicji nie są już często widywane (nie tak, jak kiedykolwiek były popularne). Kiedyś widzieli je projektanci stron internetowych, tworząc skomplikowane formaty linków lub zawartości skrzynek. The znacznik listy danych (

  ) jest często źle rozumiany przez twórców kodu. W specyfikacjach HTML4.01 używane były listy danych sparuj przedmioty z ich opisami. Były to listy definicji.

  Poniżej znajduje się przykładowy kod listy definicji danych:

   
   
  Przedmiot 1
   
  Opis
   
  Pozycja 2
   
  Opis
   
  Pozycja 3
   
  Opis
   
   

  Jednak dzięki nowym specyfikacjom HTML5 listy danych otrzymały transkrypcję. Nie ma żadnych różnic w składni w sposobie używania elementów, jednak ich cel został zaktualizowany jako lista opisów składająca się z jednego lub więcej terminów danych (

  ) po której następuje jedna lub więcej definicji danych (

  ).

  Silnym przykładem z artykułu HTML5 Doctor jest lista sformatowana metadanych. Wewnątrz jednego singla dl element listy, który byś chciał zdefiniować termin, takie jak twoje imię, a następnie kolejne znacznik definicji mógłby opisywać dane o tobie, ewentualnie o twoim wieku, zawodzie, aktualnym mieście itp. Ostatecznie dowolny zestaw danych z parami klucz / wartość pasuje do listy opisów. Możesz użyć więcej niż jednego terminu danych na liście, ale W3C to stwierdza każdy termin powinien być niepowtarzalny na liście.

  Teraz, gdy wybiliśmy 3 popularne style list, przejdźmy do kilku przykładów! Projektanci stron internetowych stali się bardzo kreatywni dzięki swoim listom w ostatnich latach. Poniżej skatalogowałem 7 moich ulubionych stron internetowych, ze szczególnym uwzględnieniem ich twórczego wykorzystania list.

  Prosta nawigacja listy nieuporządkowanej

  Menu nawigacji są znacznie prostsze do zbudowania za pomocą nowoczesnych technik CSS. Dlatego listy nieuporządkowane, a nawet listy uporządkowane stały się popularną opcją. Jednym z moich ulubionych przykładów jest blog społecznościowy Mashable.

  

  W górnej części nagłówka zauważysz 2 główne zestawy linków. Bezpośrednio na górze ich logo znajduje się niewielka nieuporządkowana lista zawierająca linki społeczności, takie jak Najważniejsze artykuły, Tematy trendów i Ludzie. Projektant stworzył elegancki styl najechania, który ma solidne tło i kolorystykę.

  Bezpośrednio poniżej zobaczysz ich linki do nawigacji. To menu nawigacyjne prowadzi do kategorii blogów, takich jak Social Media lub Tech. Obie nieuporządkowane listy są zawarte w a HTML5