Utilizarea strălucitoare a listelor HTML în Web Design

Puteți găsi liste bine concepute în jurul internetului. Designerii le-au folosit de decenii coordonează informațiile despre pagini și machetele, iar pe site-ul de astăzi puteți vedea o mare creativitate în modul în care designerii web folosesc listele. Acestea includ meniuri de navigare, link-uri de profil, arhive, sarcini / liste de verificare și tone de alte utilizări!

În acest post voi fi introducerea diferitelor tipuri de liste HTML, cu sfaturi despre proiectarea lor, în special despre cum să adăugați o margine unică în lista dvs.. De asemenea, vă voi duce prin câteva exemple de site-uri web cu modele de listă fantastice și, în cele din urmă, veți obține o listă de site-uri web cu liste HTML bine concepute. Nu mai aveți nicio îndoială în privința modului în care să faceți ca listele dvs. cu aspect simplu să pară unice și să începem să profităm la maximum de acestea astăzi!

Elementele de listare

Designerii web continuă să sară de la o bandă la alta, provocând astfel modificarea stilurilor site-ului în timp, dar listele s-au dovedit a fi testul timpului și pot fi foarte bine în viitoarele inovații ale World Wide Web.

Înainte de a verifica exemplele, vreau să acoperim câteva puncte cu liste HTML. Există câteva tipuri diferite de liste pe care le puteți utiliza în propria dvs. lucrare de proiectare. Majoritatea designerilor web se concentrează pe Liste neordonate care sunt deschise cu a

Liste ordonate

Definiții de date

Liste neordonate (
)

Probabil unul dintre cele mai utilizate elemente din standardele HTML4 / HTML5. Tabelele neordonate vor transmite date în același mod ca o listă ordonată, cu toate acestea nu va vedea nici un marker numeric în lateral. În schimb, fiecare articol este dat cerc mic sau disc și defalcate pe o linie nouă. Această pictogramă poate fi schimbată și cu proprietatea de tip listă găsite în CSS.

Mai jos este codul exemplu al listei neordonate:

  Punctul 1
 Punctul 2
 Punctul 3

Liniile neordonate reprezintă soluția perfectă pentru construire link-uri de navigare. Din moment ce puteți cu ușurință citește liste întregi în cadrul oricărui element din listă e o simplă materie pentru a crea legături sub-navigare de asemenea. După eliminarea stilului listei, veți rămâne cu un element element gol. De aici puteți crea link-uri de ancorare pentru a apărea ca elemente de bloc pe pagina dvs., completând astfel un design de meniu de navigare, iar cu unele coduri jQuery puteți crea împreună un antet frumos pentru site-ul dvs..

Cel mai frecvent veți găsi liste neordonate în mijlocul articolelor web sau al instrucțiunilor de instalare. Luați notă de asta Google și alte roboții de căutare nu procesează conținutul paginii altfel, așa că tu SEO nu ar trebui să fie afectată, indiferent de tipul de listă pe care îl alegeți.

Liste comandate (
)

Când trebuie să comandați un set de date, este posibil să configurați propriul cadru de structură de la zero, dar în acest fel va trebui să adăugați fiecare număr incrementat manual, ceea ce poate fi obositor. Listele comandate sunt excelente ținând sarcinile numerotate în linie fără vreo șoc. Ordinea articolelor dvs. interne (

) va dicta cum sunt prezentate datele.

Mai jos este codul exemplu al listei ordonate:
```
  Punctul 1
 Punctul 2
 Punctul 3
 
 
```
Este, de asemenea, posibil să schimbați contorul de la numere regulate într-o mână de alte opțiuni. Acestea includ litere alfabetice și numere romane, a numi câteva. Designerii de web ar folosi o listă ordonată pentru liste specifice conținutului. Rețetă date, sarcini zilnice, favorite, sau utilizatorii înregistrați în top / recent sunt doar câteva exemple. Adesea veți vedea comentarii pe blog construit folosind liste comandate pentru a păstra fiecare comentariu într-o secvență numerotată.

Liste de definire a datelor (
)

Literele de definire nu mai sunt văzute foarte des (nu ca și cum ar fi fost vreodată populare). Acestea au fost văzute de designerii web care creează formate complexe de linkuri sau conținut de cutii. lista de date (
) este adesea greșit înțeleasă de coderi astăzi. În specificațiile HTML4.01 au fost utilizate liste de date elemente pereche cu descrierile lor. Acestea au fost numite liste de definiții.

Mai jos este codul exemplu al listei de definiții a datelor:
```
  Punctul 1
 Descriere
 Punctul 2
 Descriere
 Punctul 3
 Descriere
 
 
```
Cu toate acestea, cu noile liste de date pentru specificațiile HTML5 li s-a dat o transcriere. Nu există diferențe cu sintaxa în modul în care utilizați elementele, totuși scopul lor a fost actualizat ca a descriere care cuprinde unul sau mai mulți termeni de date (
) urmată de una sau mai multe definiții de date (
).

Un exemplu puternic din articolul HTML5 Doctor este a lista de metadate formatată. În interiorul unui singur single dl elementul de listă pe care îl veți face defini un termen, cum ar fi numele dvs., apoi fiecare ulterior definirea etichetei ar putea descrie datele despre tine, posibil vârsta, ocupația, orașul curent etc. În cele din urmă orice set de date cu perechi cheie / valoare se potrivește frumos într-o listă de descriere. Puteți utiliza mai mult de un termen de date într-o listă, dar W3C afirmă acest lucru fiecare termen ar trebui să fie unic În listă.

Acum, că am introdus cele 3 stiluri de listă populare, să trecem la câteva exemple! Web designerii au devenit foarte creativi cu listele lor în ultimii ani. Am catalogat 7 site-uri preferate de mai jos, cu accent special pe folosirea creativă a listelor.

Navigare simplă listă neordonată

Meniurile de navigare sunt mult mai simple de construit cu tehnicile CSS moderne. De aceea, listele neordonate și listele chiar ordonate au devenit o opțiune populară. Unul dintre exemplele mele preferate de acest lucru apare pe blogul social media, Mashable.

În partea de sus a antetului lor veți observa două seturi principale de linkuri. Direct spre partea de sus a logo-ului lor este o mică listă neordonată care conține legături comunitare, cum ar fi Top Stories, Trending Topics și People. Designerul a creat un stil de hover elegant, care are un fundal solid și o schemă de culori.

Aproape de aceasta veți vedea legăturile de sub navigare. Acest meniu de navigare duce la categorii de bloguri, cum ar fi Social Media sau Tech. Ambele liste neordonate sunt cuprinse într-un HTML5
element pentru a păstra totul în linie cu șablonul. Efectele hover adăugate aici afișează un colț rotunjit în jurul meniului de sub-navigare. Fiecare link se afișează ca element de bloc și ocupă un spațiu mare din meniul de sub-navigare.

Afișarea caracteristicilor software

Acesta este, probabil, unul dintre exemplele mele preferate de liste stilate. Dezvoltatorii web și companiile de software le utilizează în propria lor desene web corporatiste. Exemplul meu se concentrează pe pagina Lucrurilor codului culturii, o listă cu lista de sarcini. Au construit a format set de elemente și caracteristici puteți găsi în Lucruri.

Întreaga colecție este conținut în interiorul a
etichetă care conține atât coloane stânga cât și drept. În interior sunt plutitor
elemente cu clasa stanga si dreapta, respectiv. Conținutul elementului de listă este de fapt rupt în segmente și CSS este folosit pentru a alinia totul.

Imaginile sunt adăugate ca Etichete direct în cod și poziționate în raport cu conținutul lor
. puternic Etichete sunt utilizate pentru fiecare dintre punctele de antet care apar în textul mai întunecat și imediat după aceea se adaugă descrierea.

Elementele au fost impresionate frumos și admir foarte mult etica muncii Codului Culturii. Ei s-au dovedit a oferi modele fantastice de-a lungul anilor, mai ales pentru Lucruri. Dacă verificați orice director de pictograme, cum ar fi Icon Finder este destul de simplu să alegeți un set de freebie, și de aici puteți mockup un design și cod un stil similar de listă în CSS.

Dacă sunteți interesat în continuare de designul lor, pagina Things for iPhone utilizează de fapt o listă de descriere. Fiecare pictogramă este setat ca termen de definiție iar descrierile sunt plasate în dreapta. Acesta nu este modul recomandat de a utiliza aceste etichete, dar funcționează bine în anumite circumstanțe!

Categorii de bloguri și etichete

Utilizatorii WordPress sunt foarte familiarizați cu sistemul de categorii / etichete. Ea a funcționat bine în cele mai multe forme de social media până acum, dar a fost inițial derivată din blogosphere. Etichetele sunt excelente pentru afișarea câtorva articole de nișă legate de subiect. Categoriile sunt mult mai largi și sunt folosite pentru a cuprinde cea mai mare parte a articolelor dvs..

Cel mai bun exemplu pe care il pot gandi este Smashing Magazine si noul lor site de re-design. În partea de sus veți observa o filă etichetă “Revistă” cu o pictogramă de etichetă mică suspendată de o parte. Plasați cursorul peste aceasta pentru a afișa o listă ascunsă de categorii cum ar fi codarea, designul, grafica etc. Fiecare este, de asemenea, decorat cu un efect extraordinar de hovering CSS3 care apare ca butoane lucioase.

Privind codul veți observa că ați plasat această casetă în zona coloanei din stânga. Se da a afișare: niciuna; stil la apar ascunse până când sunt declanșate. Lista neordonată este setată pentru fiecare element de listă care conține o legătură de ancorare, dar ca alternativă aceste legături sunt afișate în linie și au rupt două linii pentru spațiul necesar.

Coloana subsol cu liste de definiții

Am fost întotdeauna un mare fan al designului clasic Digg. Acesta a inclus tot ce v-ați aștepta de la un site de știri cu mari capacități sociale. O piesă cu adevărat interesantă pentru designul lor vechi este footer coloane de configurare folosind listele de definiție.

Din păcate, echipajul Digg a lansat deja v4 design viu, dar Internetul este un loc nostalgic și cu Arhivele Wayback Internet putem scoate un design mai vechi de Digg din august 2007. Acest șablon prezintă o mulțime de elemente de interfață cu utilizatorul fantastic, mai precis să ne concentrăm asupra zonei subsolului. Veți observa că fiecare coloană este de fapt fragmentată într-un elementul listei de date. Aceste coloane sunt setate să fie afișate ca blocuri și să plutească una lângă alta cu lățimi predefinite.

termenii de date se comportă ca anteturi în listă și apar doar o dată pe coloană. În opinia mea, aceasta este o modalitate mai bună și mai curată de a vă construi listele de descriere. Este posibil să utilizați mai mult de un termen pe listă, dar acest lucru vă deranjează adesea codul HTML și puteți pierde foarte ușor codul. Primele două coloane conțin 6-7 link-uri enumerate unul sub altul ca termeni de date pentru descrierea textului antetului, dar după aceea veți observa că coloanele se îndepărtează de formatul implicit.

De exemplu, dedesubt Digg Tools & API Sunt doar două definiții de date. Acestea sunt de fapt cele 2 paragrafe care conțin o legătură internă și o propoziție. Nu există nimic în neregulă cu acest marcaj, și de fapt este un sistem foarte creativ și durabil pentru construirea coloanelor subsolului. Sunt sigur că dacă navigați în arhivele paginilor lui Digg veți găsi mai multe exemple fantastice de liste.

Sarcini și dos-uri

Listele nu sunt întotdeauna doar incluse pentru stilurile de design. Există de fapt ori în care conținutul necesită elemente de listă pentru a forma o listă reală de date. Lista de sarcini reprezintă exemplul perfect al acestor fenomene. Cu toate acestea, nu există o mulțime de administratori de sarcini construiți pe web, astfel că este dificil să găsiți exemple minunate.

Flow App este un astfel de serviciu cu un panou de utilizator frumos. Dacă aveți timp, vă sugerăm să vă înscrieți pentru un cont gratuit pentru a oferi aplicației o demonstrație. Chiar dacă nu plănuiți să plătiți, este totuși o aplicație web foarte distractivă pentru a vă împiedica și chiar puteți scoate o inspirație de design.

Dacă sunteți conectat (ă), meniul din partea stângă jos sortează colecția dvs. de liste. Acestea sunt sarcini pe care le puteți rearanja, edita, eticheta și verifica complet. Dând clic pe prima listă implicită “Cele elementare” va deschide conținutul în panoul din dreapta, aici structura listei întregi este construită cu o listă neordonată.

Fiecare element conține o cantitate destul de mare de context interior. Fiecare bară pe care o vedeți trece prin cadouri un element de listă adăugat la general
element. Există o mulțime de obiecte interne, cum ar fi o pictogramă de editare, o casetă de completare de completare, un pavilion și o pictogramă a coșului de gunoi, de asemenea. De asemenea, în meniul lateral se află legăturile din partea de jos “concentra” veți observa obiecte construite stabilite într-o listă neordonată. Arată fantastic pentru simplitatea sa cu siguranță.

Dribbble Play List

Împreună cu mulți designeri colegi, sunt un dependent imens Dribbble. Site-ul este construit frumos și oferă unii dintre cei mai buni designeri de grafici din întreaga lume. Dacă nu sunteți familiarizați cu rețeaua Dribbble este o comunitate socială de invitați numai de designeri web care împărtășesc fotografii ale celor mai recente lucrări.

Lucrurile devin interesante dacă vă îndreptați atenția spre partea dreaptă de jos a zonei barei laterale. Aici avem o listă ordonată cu clasa “jucători listă“. Acesta oferă începători care sunt cei mai noi designeri care au primit invitații și care au semnat recent pe site. Din orice motiv, dezvoltatorul web al Dribbble a ales să folosească un listă ordonată, cu fiecare articol din listă conținând detalii despre utilizator.

Conținutul interior este de fapt împărțit în două segmente. A
care plutește în dreapta, deține legătura de urmărire / întrerupere dacă sunteți în prezent conectat. Elementul supleant afișează a
antet cu clasa “vcard” conținând numele și avatarul utilizatorului. Acestea sunt legate atât de profilul personal Dribbble, cât și de statisticile contului.

Picioare orizontale

Există câteva exemple fantastice și cele mai bune practici scrise pentru construirea navigației pentru pescuit. Aceste meniuri afișează vizibil colectarea sub-legăturilor pe care le-ați traversat pentru a ajunge la pagina curentă. Avem un tutorial de pescuit fantastic, prezentat pe Hongkiat construit pe deplin cu tehnicile CSS3 și listele neordonate.

Designul folosește ancora link-uri ca elemente de bloc pentru a afișa meniul listei. Legătura de ancorare este dată unei imagini de fundal și a diminuarea z-index astfel încât săgețile să fie afișate în partea de sus a fiecărui element concurent.

De asemenea, verificați exemplul Google pe una din paginile de asistență. Acesta este elementul perfect al paginii pentru a include în site-ul dvs. dacă aveți mai multe pagini imbricate de conținut. Vizitatorii vor căuta probabil să se întoarcă la paginile anterioare fără a-și verifica istoricul.

Nu există prea multe alternative pentru a construi o listă de link-uri de pescuit. Ați putea folosi o listă ordonată crawlerele motorului de căutare înțeleg că există o comandă a legăturilor de meniu, totuși, după cum sa menționat anterior, probabil că nu va face prea multă diferență atunci când vine vorba de clasamentul în SERPS. Dacă aveți nevoi mai complexe pentru pesmet, cum ar fi un titlu / o descriere pentru fiecare legătură, puteți utiliza mai bine elementul listei de definiții.

Mai frumos UI bazate pe listă

Fără a intra în prea multe detalii, scopul meu este să colectez o configurație fantastică a elementelor de interfață bazate pe listă. Acest lucru este mult mai ușor de spus decât de făcut - dar Internetul are atât de multe opțiuni de a alege! Există o mulțime de spațiu pentru creștere în domeniul listelor HTML. Dacă mori pentru mai multă inspirație, verificați galeria de mai jos cu câteva exemple fantastice.

6wunderkinder

Un meniu de navigare fantastic numit elemente de buton.

Cake Sweet Tort

Cake Sweet Cake are o listă minunată de imagini miniaturale care conțin câteva exemple delicioase din fabricile de panificație.

Cheesemonger Invitational

Site-ul web Cheesemonger Invitational are 2 separate
elemente plutitoare pentru a crea 1 meniu de navigare. Arată într-adevăr elegant, în conformitate cu graficul lor logo-ul centrat.

Editorul Threepenny

Link-urile de social media din partea de jos a site-ului Editorului Threepenny sunt toate realizate sub o listă. Se potrivește perfect într-o coloană a temei pentru aspectul mâinilor și a hârtiei.

Le Tipi

Un alt exemplu frumos de meniu de navigare cu imagini și CSS.

Știți cine

Știți cine are un efect retro design elegant pe site-ul lor. Partea de jos a paginii de start are o listă mică, care conține miniaturi ale celei mai recente lucrări de proiect.

MediaLoot

O listă neordonată făcută pentru planurile de înscriere a MediaLoot pare promițătoare.

365psd

365psd oferă un nou șablon Photoshop pentru descărcare în fiecare zi. În bara lor laterală veți găsi o listă de etichete încorporate într-o listă neordonată. Acest lucru arată perfect în blogurile și paginile de arhivă în care o listă de etichete mici se consideră potrivită.

Concluzie

Sperăm că această galerie de liste creative cu stil HTML vă oferă o inspirație pentru proiectarea conținutului layout-ului. Poate fi dificil să se creeze o idee concretă pentru listele dvs. de pe paginile web, dar listele de articole reprezintă o parte importantă a procesului de proiectare și să ofere relații constructive între etichetele de marcare și conținutul.

Există, probabil, zeci de alte liste fantastice găsite în jurul web-ului, iar odată cu creșterea numărului de designeri web disponibile, cu siguranță vom vedea că acest număr crește mai repede decât oricând. Dacă știți despre orice site web minunat care conține liste HTML minunate, nu ezitați să oferiți link-urile din secțiunea noastră de comentarii de mai jos. De asemenea, dacă adăugați oricare dintre stilurile enumerate mai sus pe site-ul dvs., ne-ar plăcea să verificăm acest lucru!
Aduceți meniurile Office 2003 înapoi cu 2010 cu UBitMenu

Aduceți meniul Windows 7 Start la Windows 10 cu Classic Shell

Îmbunătățiți Firefox pentru sărbătorile